:root{color-scheme:dark;--steel:#d7dddc;--glass:#eaf4f1d9;--ink:#263536;--green:#70b9a8;--green-deep:#37786c;--signal:#f4c85a}
    *{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#171e20;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
    button{font:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #c6fff0;outline-offset:3px}
    #stage,#scene{position:fixed;inset:0}#scene{touch-action:none}canvas{display:block;width:100%;height:100%}
    #vignette{position:fixed;inset:0;z-index:4;pointer-events:none;background:linear-gradient(#0c15181e,#0c151800 18% 78%,#07101258),radial-gradient(circle at 50% 48%,transparent 58%,#0710123d 100%)}
    #ambient{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;opacity:.72}
    #ambient .ceiling{position:absolute;left:-25%;top:-7%;width:150%;height:25%;background:linear-gradient(110deg,transparent 42%,#ffffff1b 49%,#ffffff06 54%,transparent 61%);animation:reflect 12s ease-in-out infinite}
    #ambient .shadow{position:absolute;bottom:-7%;width:8%;height:31%;border-radius:48% 48% 15% 15%;background:#0710123e;filter:blur(8px);opacity:.2;animation:walk 18s linear infinite}
    #ambient .shadow.s2{animation-delay:-9s;animation-duration:24s;transform:scale(.76)}
    #ambient .rail{display:none;position:absolute;inset:14% -20%;background:repeating-linear-gradient(90deg,transparent 0 9%,#d9fffa13 9.5% 10%,transparent 10.5% 18%);filter:blur(2px);animation:tunnel .9s linear infinite}
    body[data-step="5"] #ambient .rail{display:block}body[data-step="5"] #ambient .shadow{display:none}
    @keyframes reflect{0%,100%{transform:translateX(-10%);opacity:.35}50%{transform:translateX(12%);opacity:.75}}
    @keyframes walk{from{left:-15%}to{left:112%}}@keyframes tunnel{to{transform:translateX(-18%)}}
    #flash{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 48%,#eafffa80,transparent 68%)}#flash.go{animation:flash .48s ease-out}@keyframes flash{18%{opacity:.62}100%{opacity:0}}
    #transition{position:fixed;z-index:35;inset:-4%;pointer-events:none;opacity:0;background:#dbe4e2;filter:blur(12px);transform:scale(1.03)}#transition.go{animation:transition .58s ease-in-out}@keyframes transition{0%,100%{opacity:0}46%,56%{opacity:.84}}
    .hud{position:fixed;z-index:20;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;gap:9px;pointer-events:none}.hud>*{pointer-events:auto}.grow{flex:1}
    .glass{color:var(--ink);background:var(--glass);border:1px solid #fff;box-shadow:0 2px 9px #06101245,0 12px 30px #06101224;backdrop-filter:blur(14px) saturate(.8)}
    .round{width:50px;height:50px;border-radius:14px;display:grid;place-items:center}.round:active,.step:active{transform:translateY(2px)}
    #steps{display:flex;gap:4px;padding:5px;border-radius:18px;background:#20292bb8;border:1px solid #edf8f571;box-shadow:0 8px 28px #0610124a;backdrop-filter:blur(14px)}
    .step{position:relative;width:44px;height:43px;border-radius:12px;display:grid;place-items:center;color:#425251;background:#dfe6e3;border:1px solid #fff;transition:.18s transform,.18s background,.18s color}.step.active{color:#173e38;background:#a9d7ca}.step.active:after{content:"";position:absolute;bottom:-4px;width:12px;height:3px;border-radius:3px;background:#d7fff4}
    #action{position:fixed;z-index:20;left:50%;bottom:max(22px,calc(env(safe-area-inset-bottom) + 12px));width:70px;height:70px;transform:translateX(-50%);border-radius:50%;display:grid;place-items:center;color:#1d4d45;background:#b5ddcf;border:3px solid #f4fbf8;box-shadow:0 0 0 7px #eaf5f03b,0 5px 16px #07101275;animation:breathe 2.8s ease-in-out infinite}@keyframes breathe{50%{box-shadow:0 0 0 13px #d8eee600,0 5px 18px #07101269}}#action:active{transform:translate(-50%,3px);animation:none}
    #look{position:fixed;z-index:20;right:max(16px,env(safe-area-inset-right));bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));display:grid;grid-template-columns:repeat(3,42px);gap:4px}#look .round{width:42px;height:42px;border-radius:50%}#look button:nth-child(1){grid-column:2}#look button:nth-child(2){grid-column:1}#look button:nth-child(4){grid-column:2}
    #gesture{position:fixed;z-index:10;left:max(16px,env(safe-area-inset-left));bottom:max(20px,calc(env(safe-area-inset-bottom) + 10px));width:64px;height:42px;border-radius:22px;color:#eef8f5;background:#1b292bb0;border:1px solid #d7e9e47a;display:flex;align-items:center;justify-content:center;gap:3px;pointer-events:none;backdrop-filter:blur(8px)}#gesture svg:last-child{animation:turn 2.6s ease-in-out infinite}@keyframes turn{50%{transform:rotate(80deg)}}
    #hotspots{position:fixed;z-index:18;inset:0;pointer-events:none;overflow:hidden}.hotspot{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;display:grid;place-items:center;color:#224a43;background:#c7e5dbec;border:3px solid #fff;box-shadow:0 0 0 0 #dffff58c,0 5px 20px #0710127a;pointer-events:auto;transition:.14s opacity,.14s transform;animation:hotpulse 2.2s ease-out infinite}.hotspot:before{content:"";position:absolute;inset:-10px;border:1px solid #edfffab5;border-radius:50%}.hotspot:active{transform:scale(.92)}.hotspot.off{opacity:0;pointer-events:none}@keyframes hotpulse{65%{box-shadow:0 0 0 15px #dffff500,0 5px 20px #0710127a}}
    #lesson{position:fixed;z-index:19;left:max(18px,env(safe-area-inset-left));bottom:max(82px,calc(env(safe-area-inset-bottom) + 72px));width:min(240px,58vw);height:116px;border-radius:18px;opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;transition:.22s opacity,.22s transform;overflow:hidden;background:#edf2efea;border:1px solid #fff;box-shadow:0 16px 42px #0710126e;backdrop-filter:blur(16px)}#lesson.show{opacity:1;transform:none}#lesson .bar{height:10px;background:linear-gradient(90deg,#6cae9f,#bcc9c5 72%,#f0c75d)}#lesson .visual{height:106px;display:grid;place-items:center;color:#315c55}#lesson svg{max-width:88%;max-height:88%}
    #lesson.show .route-dot{animation:route-dot 1.8s ease-in-out infinite}#lesson.show .scan{animation:scan 1.25s ease-in-out infinite}#lesson.show .gate-left{animation:gate-left 1.6s ease-in-out infinite;transform-origin:68px 52px}#lesson.show .gate-right{animation:gate-right 1.6s ease-in-out infinite;transform-origin:162px 52px}#lesson.show .mini-train{animation:mini-train 2.4s ease-in-out infinite}#lesson.show .strap{animation:strap 1.9s ease-in-out infinite;transform-origin:50px 16px}#lesson.show .strap.s2{animation-delay:-.5s;transform-origin:92px 16px}#lesson.show .strap.s3{animation-delay:-1s;transform-origin:134px 16px}#lesson.show .exit-glow{animation:exit-glow 1.3s ease-in-out infinite}
    @keyframes route-dot{50%{transform:translate(86px,-26px)}}@keyframes scan{50%{transform:translateX(25px);opacity:.4}}@keyframes gate-left{50%{transform:rotate(-24deg)}}@keyframes gate-right{50%{transform:rotate(24deg)}}@keyframes mini-train{50%{transform:translateX(-70px)}}@keyframes strap{50%{transform:rotate(5deg)}}@keyframes exit-glow{50%{opacity:.25}}
    #loader{position:fixed;z-index:40;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:.2s opacity;background:#151d1f2a}#loader.show{opacity:1}#loader i{width:56px;height:56px;border:5px solid #edf4f2;border-right-color:#6cad9f;border-bottom-color:transparent;border-radius:50%;animation:spin .8s linear infinite;filter:drop-shadow(0 5px 12px #07101270)}@keyframes spin{to{transform:rotate(360deg)}}
    #fallback{position:fixed;z-index:80;inset:0;display:none;place-items:center;background:#20282a;color:#d8eee7}#fallback svg{width:96px;height:96px}
    @media(max-width:780px){.hud{gap:4px}.round{width:43px;height:43px;border-radius:12px}#steps{gap:2px;padding:4px}.step{width:38px;height:39px;border-radius:10px}.step svg{width:22px;height:22px}.hud .grow{display:none}.hud{justify-content:space-between}#look{right:9px;bottom:10px;grid-template-columns:repeat(3,38px)}#look .round{width:38px;height:38px}#gesture{left:9px;bottom:12px;width:56px}#action{width:64px;height:64px}#lesson{bottom:76px;left:10px;height:102px;width:min(210px,56vw)}#lesson .visual{height:92px}}
    @media(max-width:470px){.hud{left:5px;right:5px}.round{width:37px;height:37px}.step{width:31px;height:34px}.step svg{width:19px;height:19px}.hud{gap:1px}#sound{position:fixed;top:52px;right:7px}}
    @media(max-height:520px){.hud{top:5px}.step{height:34px}#action{bottom:8px;width:58px;height:58px}#look{bottom:6px}#gesture{bottom:8px}#lesson{bottom:62px;height:86px;width:185px}#lesson .visual{height:76px}}
    @media(prefers-reduced-motion:reduce){#ambient *,#gesture svg,#action,#loader i{animation:none!important}}