.howto-walk{--paper:#fbfaf5;--ink:#15201e;--ink2:#2b3835;--muted:#6e7a76;--line:#e7e2d6;--wall:#2b3835;--teal:#004751;--teal2:#1dbfb0;--navy:#0c2030;--lime:#cad500;--sgreen:#009a4d;--sred:#c8102e;--ease:cubic-bezier(.4, 0, .2, 1);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;cursor:crosshair;isolation:isolate;min-height:100vh;font-family:Schibsted Grotesk,system-ui,sans-serif;line-height:1.5;position:relative}.howto-walk a,.howto-walk button{cursor:pointer}.howto-walk a{color:inherit;text-decoration:none}.howto-walk button{font:inherit}.howto-walk :focus-visible{outline:3px solid var(--teal2);outline-offset:3px;border-radius:6px}.howto-walk .mono{font-family:Spline Sans Mono,monospace}.howto-walk .canvas-grid{z-index:-2;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);opacity:.33;background-size:44px 44px;position:fixed;inset:0}.howto-walk .layout{grid-template-columns:minmax(310px,400px) 1fr;align-items:start;gap:clamp(16px,2.2vw,38px);max-width:1560px;margin:0 auto;padding:0 clamp(16px,2.4vw,36px);display:grid}.howto-walk .narrative{padding-top:108px;padding-bottom:6vh}.howto-walk .eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--teal);align-items:center;gap:8px;margin-bottom:13px;font-family:Spline Sans Mono,monospace;font-size:11.5px;font-weight:600;display:inline-flex}.howto-walk .eyebrow:before{content:"";background:var(--lime);width:22px;height:2px}.howto-walk h1{letter-spacing:-.028em;color:var(--navy);font-size:clamp(36px,3.6vw,52px);font-weight:800;line-height:1.04}.howto-walk h1 .knows{color:var(--teal);white-space:nowrap;position:relative}.howto-walk h1 .knows:after{content:"";background:var(--lime);z-index:-1;border-radius:3px;height:.13em;position:absolute;bottom:.05em;left:0;right:0}.howto-walk .sub{color:var(--muted);max-width:42ch;margin-top:14px;font-size:16px}.howto-walk .hint{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-items:center;gap:10px;margin-top:15px;font-family:Spline Sans Mono,monospace;font-size:10.5px;display:flex}.howto-walk .hint .dot{background:var(--lime);border-radius:50%;width:7px;height:7px;animation:1.8s infinite hw-pulse}@keyframes hw-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.55)}}.howto-walk .step{flex-direction:column;justify-content:center;min-height:80vh;display:flex}.howto-walk .step.hero-step{justify-content:flex-start;min-height:calc(64vh - 108px);padding-top:1vh}.howto-walk .step-card{border-left:3px solid var(--line);transition:border-color .5s var(--ease);padding:6px 0 6px 20px}.howto-walk .step.now .step-card{border-color:var(--teal2)}.howto-walk .step .no{letter-spacing:.14em;color:var(--teal);font-family:Spline Sans Mono,monospace;font-size:10.5px;font-weight:600}.howto-walk .step h3{letter-spacing:-.022em;color:var(--navy);margin-top:8px;font-size:clamp(22px,2vw,26px);font-weight:800;line-height:1.12}.howto-walk .step p{color:var(--muted);max-width:40ch;margin-top:9px;font-size:15px}.howto-walk .step .ref{color:var(--teal);white-space:nowrap;background:#e8f4f2;border-radius:6px;padding:2px 7px;font-family:Spline Sans Mono,monospace;font-size:10.5px;font-weight:600}.howto-walk .step .ref.g{color:var(--sgreen);background:#e6f4ec}.howto-walk .step ul{flex-direction:column;gap:7px;margin-top:11px;list-style:none;display:flex}.howto-walk .step li{color:var(--ink2);align-items:baseline;gap:8px;font-size:13.5px;display:flex}.howto-walk .stagecol{place-items:center;height:100vh;min-height:540px;display:grid;position:sticky;top:0}.howto-walk .stagewrap{aspect-ratio:1000/660;width:100%;max-height:calc(100vh - 64px);margin-top:24px;position:relative}.howto-walk .stagewrap svg.plan{border-radius:14px;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.howto-walk .pw{fill:none;stroke:var(--wall);stroke-width:8px;stroke-linecap:square}.howto-walk .pw.draw{stroke-dasharray:1;stroke-dashoffset:1px}.howto-walk.drawn .pw.draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease)}.howto-walk .dg{stroke:var(--paper);stroke-width:10px}.howto-walk .win{stroke:#fff;stroke-width:8px}.howto-walk .win2{stroke:var(--wall);stroke-width:1.7px}.howto-walk .rm-a{fill:#eaf4f2}.howto-walk .rm-b{fill:#f3f6e9}.howto-walk .rm-c{fill:#fbf3e7}.howto-walk .rm-d{fill:#eff0f6}.howto-walk .rm-e{fill:#f7eef0}.howto-walk .rn{letter-spacing:.07em;fill:var(--ink2);font-family:Spline Sans Mono,monospace;font-size:12px;font-weight:600}.howto-walk .rn.sm{font-size:9.5px}.howto-walk .ra{fill:var(--muted);font-family:Spline Sans Mono,monospace;font-size:9.5px}.howto-walk .fel{fill:#fff;stroke:var(--teal2);stroke-width:1.9px}.howto-walk .dimln{stroke:var(--teal);stroke-width:1.4px}.howto-walk .dimtx{fill:var(--teal);font-family:Spline Sans Mono,monospace;font-size:11px}.howto-walk .alarm{fill:#fff;stroke:var(--sred);stroke-width:2.3px}.howto-walk .fireeq{fill:var(--sred)}.howto-walk .exitt{fill:var(--sgreen)}.howto-walk .route{fill:none;stroke:var(--sgreen);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:9 7;animation:1.6s linear infinite hw-routeflow}@keyframes hw-routeflow{to{stroke-dashoffset:-32px}}.howto-walk .svc{fill:#fff;stroke:var(--navy);stroke-width:1.6px}.howto-walk .svctx{fill:var(--navy);font-family:Spline Sans Mono,monospace;font-size:7.5px;font-weight:700}.howto-walk .bnd{fill:none;stroke:var(--teal);stroke-width:2px;stroke-dasharray:10 6}.howto-walk .area-g{fill:#edf3dd;stroke:#cad500;stroke-width:1.4px}.howto-walk .way{fill:#efe9da;stroke:#d8d2c2;stroke-width:1.2px}.howto-walk .bayln{stroke:#fff;stroke-width:2px}.howto-walk .road{fill:#e4dfd2}.howto-walk .roadln{stroke:#fff;stroke-width:2px;stroke-dasharray:14 12}.howto-walk .nbr{fill:#f0eee6;stroke:#c9c2b2;stroke-width:1.6px}.howto-walk .nbrtx{fill:#a39a85;letter-spacing:.08em;font-family:Spline Sans Mono,monospace;font-size:9.5px}.howto-walk .shadowp{fill:#0c20301f}.howto-walk .ctxtx{fill:var(--muted);letter-spacing:.06em;font-family:Spline Sans Mono,monospace;font-size:9.5px}.howto-walk .L{transition:opacity .55s var(--ease)}.howto-walk .L[data-vis=false]{opacity:0}.howto-walk .popin{animation:hw-popin .5s var(--ease)}@keyframes hw-popin{0%{opacity:0;transform-box:fill-box;transform-origin:50%;transform:scale(.5)}70%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.howto-walk .flash{animation:hw-flash 1.1s var(--ease)}@keyframes hw-flash{0%,to{fill:var(--ink2)}40%{fill:var(--teal2)}}.howto-walk .selglow{fill:none;stroke:var(--teal2);stroke-width:2px;stroke-dasharray:6 7;opacity:0;transition:opacity .35s}.howto-walk .selglow.on{opacity:.7}.howto-walk .toast{background:var(--navy);color:#fff;letter-spacing:.1em;opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);z-index:8;white-space:nowrap;border-radius:10px;align-items:center;gap:8px;padding:7px 13px;font-family:Spline Sans Mono,monospace;font-size:10px;font-weight:600;display:flex;position:absolute;top:1%;left:50%;transform:translate(-50%,-8px);box-shadow:0 16px 36px -16px #0c20308c}.howto-walk .toast .sw{border-radius:3px;width:9px;height:9px}.howto-walk .toast.show{opacity:1;transform:translate(-50%)}.howto-walk .ghost{z-index:9;pointer-events:none;opacity:0;width:22px;height:22px;transition:left 1s var(--ease),top 1s var(--ease),opacity .4s;filter:drop-shadow(0 4px 10px #0c203066);position:absolute}.howto-walk .ghost.show{opacity:1}.howto-walk .ghost.click:after{content:"";border:2.5px solid var(--teal2);width:30px;height:30px;animation:hw-clickring .55s var(--ease);border-radius:50%;position:absolute;top:-6px;left:-6px}@keyframes hw-clickring{0%{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.4)}}.howto-walk .ctxmenu{z-index:10;border:1px solid var(--line);opacity:0;transform-origin:0 0;width:198px;transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none;background:#fff;border-radius:12px;padding:5px;position:absolute;transform:scale(.92);box-shadow:0 24px 56px -24px #0c203080}.howto-walk .ctxmenu.show{opacity:1;pointer-events:auto;transform:none}.howto-walk .ctxmenu .hd{letter-spacing:.12em;color:var(--muted);padding:6px 9px 4px;font-family:Spline Sans Mono,monospace;font-size:8.5px}.howto-walk .ctxmenu button{text-align:left;width:100%;color:var(--ink2);background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:7px 9px;font-size:12.5px;font-weight:600;display:flex}.howto-walk .ctxmenu button:hover,.howto-walk .ctxmenu button.hot{color:var(--teal);background:#e8f4f2}.howto-walk .ctxmenu button .k{color:var(--muted);margin-left:auto;font-family:Spline Sans Mono,monospace;font-size:9px}.howto-walk .ctxmenu .sep{background:var(--line);height:1px;margin:4px 7px}.howto-walk .ctxmenu button.danger:hover{color:var(--sred);background:#fbeaec}.howto-walk .bubbles{z-index:9;pointer-events:none;flex-direction:column;align-items:flex-end;gap:8px;width:min(268px,58%);display:flex;position:absolute;bottom:4%;right:1%}.howto-walk .bubble{opacity:0;max-width:100%;transition:opacity .45s var(--ease),transform .45s var(--ease);border-radius:13px;padding:9px 13px;font-size:13px;line-height:1.45;transform:translateY(10px);box-shadow:0 16px 40px -20px #0c203066}.howto-walk .bubble.show{opacity:1;transform:none}.howto-walk .bubble.u{background:var(--navy);color:#fff;border-bottom-right-radius:4px}.howto-walk .bubble.a{border:1px solid var(--line);color:var(--ink2);background:#fff;border-bottom-left-radius:4px;align-self:flex-start}.howto-walk .bubble.a .ok{color:var(--sgreen);font-weight:700}.howto-walk .bubble.typing{align-items:center;gap:4px;padding:11px 14px;display:flex}.howto-walk .bubble.typing i{background:#9fb1bc;border-radius:50%;width:6px;height:6px;animation:1s infinite hw-tdot}.howto-walk .bubble.typing i:nth-child(2){animation-delay:.15s}.howto-walk .bubble.typing i:nth-child(3){animation-delay:.3s}@keyframes hw-tdot{0%,to{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}.howto-walk .bubble .tagline{letter-spacing:.08em;color:var(--muted);margin-top:5px;font-family:Spline Sans Mono,monospace;font-size:8.5px;display:block}.howto-walk .northchip{z-index:8;border:1px solid var(--line);letter-spacing:.1em;color:var(--ink2);opacity:0;transition:all .5s var(--ease);background:#fff;border-radius:10px;align-items:center;gap:7px;padding:6px 10px;font-family:Spline Sans Mono,monospace;font-size:9.5px;display:flex;position:absolute;top:1.5%;right:1%;transform:translateY(-6px)}.howto-walk .northchip.show{opacity:1;transform:none}.howto-walk .scalechip{z-index:8;border:1px solid var(--line);letter-spacing:.08em;color:var(--muted);opacity:0;transition:opacity .5s var(--ease);background:#fff;border-radius:10px;padding:6px 10px;font-family:Spline Sans Mono,monospace;font-size:9.5px;position:absolute;bottom:1.5%;left:1%}.howto-walk .scalechip.show{opacity:1}.howto-walk .scalechip b{color:var(--teal)}.howto-walk .room--exit{z-index:6;background:var(--navy);color:#fff;text-align:center;padding:96px 44px;position:relative}.howto-walk .room--exit h2{letter-spacing:-.024em;color:#fff;max-width:24ch;margin:0 auto;font-size:clamp(28px,3.4vw,42px);font-weight:800;line-height:1.07}.howto-walk .room--exit .sub{color:#9fb1bc;max-width:54ch;margin:16px auto 0}.howto-walk .btn{transition:all .3s var(--ease);border:1px solid #0000;border-radius:13px;align-items:center;gap:8px;padding:14px 21px;font-size:15px;font-weight:700;display:inline-flex}.howto-walk .btn-exit{background:var(--sgreen);color:#fff;box-shadow:0 14px 30px -12px #009a4d99}.howto-walk .btn-exit:hover{background:#00813f;transform:translateY(-1px)}.howto-walk .btn-ghost{color:#fff;background:0 0;border-color:#ffffff40}.howto-walk .btn-ghost:hover{border-color:var(--teal2)}.howto-walk .cta-row{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px;display:flex}@media(max-width:900px){.howto-walk .layout{grid-template-columns:1fr;gap:0;padding:0 14px}.howto-walk .stagecol{z-index:10;background:linear-gradient(var(--paper) 88%,transparent);order:-1;height:50vh;min-height:350px;position:sticky;top:54px}.howto-walk .stagewrap{max-height:48vh;margin-top:4px}.howto-walk .narrative{padding-top:12px}.howto-walk .step{min-height:66vh}.howto-walk .step.hero-step{min-height:auto;padding:8px 0 26px}.howto-walk .bubbles{width:min(220px,70%)}}@media(prefers-reduced-motion:reduce){.howto-walk *,.howto-walk :before,.howto-walk :after{transition:none!important;animation:none!important}.howto-walk .pw.draw{stroke-dasharray:none;stroke-dashoffset:0}}