:root{--bg: #0a0a0f;--plate: #101114;--ink: #e8e4d9;--ink-2: rgba(232, 228, 217, .58);--ink-3: rgba(232, 228, 217, .34);--line: rgba(232, 228, 217, .16);--yellow: #f2c230;--yellow-ink: #0c0c0e;--font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--gutter: clamp(1.25rem, 4vw, 3.5rem);--tour-length: 820vh;--plate-w: 380px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:auto}body{font-family:var(--font-mono);color:var(--ink);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}::selection{background:var(--yellow);color:var(--yellow-ink)}:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}a{color:inherit}.mono{font-family:var(--font-mono)}.hz{height:8px;background:repeating-linear-gradient(135deg,var(--yellow) 0 11px,#131316 11px 22px)}#canvas-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1}#scroll{height:var(--tour-length);pointer-events:none}#loader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;background:var(--bg);transition:opacity .6s ease}#loader.done{opacity:0;pointer-events:none}.loader-inner{display:grid;gap:.9rem;justify-items:center}.loader-inner span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}.loader-bar{width:220px;height:6px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--yellow) 0 11px,#131316 11px 22px);background-size:31px 6px;animation:crawl .7s linear infinite}@keyframes crawl{to{background-position:31px 0}}.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;padding:1.1rem var(--gutter);pointer-events:none}.top:before{content:"";position:absolute;top:0;right:0;bottom:-3.5rem;left:0;z-index:-1;background:linear-gradient(to bottom,rgba(10,10,15,.72),transparent)}.top>*{pointer-events:auto}.brand{display:grid;gap:.2rem;text-decoration:none}.brand-name{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:.2em;text-transform:uppercase;line-height:1}.brand-sub{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}.top-links{display:flex;gap:1.6rem;padding-top:.15rem}.top-links a{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .2s ease}.top-links a:hover{color:var(--yellow)}#rail{position:fixed;left:var(--gutter);top:5.4rem;z-index:8;list-style:none;display:grid;gap:.5rem;padding:.8rem 1rem .8rem .9rem;background:var(--plate);border:1px solid var(--line);opacity:0;transition:opacity .6s ease;pointer-events:none}#rail.show{opacity:1;pointer-events:auto}#rail li{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);transition:color .25s ease}#rail li:before{content:"";width:12px;height:1px;background:currentColor;transition:width .25s ease}#rail li:hover{color:var(--ink-2)}#rail li.on{color:var(--yellow)}#rail li.on:before{width:26px}#rail li b{font-weight:500}#stage{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}.beat{--vis: 0;position:fixed;opacity:var(--vis);visibility:hidden}.beat.on{visibility:visible}.beat a,.beat button{pointer-events:auto}.plate{width:min(var(--plate-w),calc(100vw - 2 * var(--gutter)));background:var(--plate);color:var(--ink);border:1px solid var(--line);box-shadow:0 22px 48px #00000080}.beat.plate-r{right:var(--gutter);top:50%;transform:translate(calc((1 - var(--vis)) * 28px),-50%)}.beat.plate-l{left:var(--gutter);top:50%;transform:translate(calc((1 - var(--vis)) * -28px),-50%)}.plate .tab{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.25rem 0;font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}.plate .tab span+span{color:var(--ink-3);text-align:right}.plate .ttl{font-family:var(--font-display);font-weight:800;font-size:3.1rem;line-height:.95;letter-spacing:.01em;text-transform:uppercase;padding:.4rem 1.25rem .85rem}.spec{width:calc(100% - 2.5rem);margin:0 1.25rem .9rem;border-collapse:collapse;font-size:.8rem;line-height:1.5}.spec td{padding:.55rem 0;border-top:1px solid var(--line);vertical-align:top}.spec td:first-child{width:5.6rem;padding-top:.68rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}.spec td a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s ease,color .2s ease}.spec td a:hover{color:var(--yellow);border-color:var(--yellow)}.plate .foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.25rem 1.25rem .9rem;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}.btn{display:inline-block;padding:.7em 1.1em;background:var(--yellow);color:var(--yellow-ink);font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;line-height:1;white-space:nowrap;transition:background .2s ease}.btn:hover{background:#ffd54a}.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line)}.btn.ghost:hover{color:var(--ink);border-color:var(--ink-2)}.hint{display:inline-flex;align-items:center;gap:.6rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}#walk-hint:not(.show){display:none}kbd{display:inline-grid;place-items:center;min-width:1.15rem;height:1.05rem;padding:0 .3em;border:1px solid var(--ink-3);border-bottom-width:2px;font-family:var(--font-mono);font-size:.58rem;font-weight:500;letter-spacing:.04em;color:var(--ink);text-transform:uppercase}.keys{display:inline-grid;justify-items:center;gap:2px}.keys span{display:flex;gap:2px}.keys>kbd{animation:keypulse 1.5s ease-in-out infinite}@keyframes keypulse{0%,to{background:transparent;color:var(--ink)}50%{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow)}}.mode-chip kbd{border-color:#0c0c0e80;color:inherit;height:1rem;font-size:.56rem}.mode-chip.hud{display:flex;gap:1.1rem;padding:.35em .9em}.mode-chip.hud span{display:inline-flex;align-items:center;gap:.35rem}#hero-scrim{--vis: 0;position:fixed;left:0;right:0;bottom:0;height:50vh;z-index:3;pointer-events:none;opacity:var(--vis);background:linear-gradient(to top,rgba(10,10,15,.6),transparent)}.beat.hero{left:var(--gutter);bottom:clamp(1.5rem,6vh,4rem);width:min(36rem,calc(100vw - 2 * var(--gutter)));transform:translateY(calc((1 - var(--vis)) * 22px))}.hero-inner{background:var(--plate);border:1px solid var(--line);box-shadow:0 22px 48px #00000080}.np{padding:1.1rem 1.5rem 1.4rem}.np-tab{display:flex;justify-content:space-between;gap:1.4rem;margin-bottom:1.1rem;font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}.np-tab span+span{color:var(--ink-3)}h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(3rem,5.4vw,4.9rem);line-height:.9;letter-spacing:.005em;margin-bottom:.8rem}.np-role{font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);padding-bottom:.9rem;border-bottom:1px solid var(--line);margin-bottom:.9rem}.lede{font-family:var(--font-display);font-weight:500;font-size:1.25rem;line-height:1.3;color:var(--ink-2);max-width:30rem}.np-actions{display:flex;align-items:center;gap:1.2rem;margin-top:1.2rem;flex-wrap:wrap}#scroll-hint{--vis: 0;position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%);z-index:3;opacity:var(--vis);pointer-events:none;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);animation:bob 2.2s ease-in-out infinite}@keyframes bob{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,6px)}}.mode-chip,#mii-tag,#nawaf-tag,#baddah-tag{position:fixed;top:0;left:0;z-index:6;padding:.42em .75em;font-family:var(--font-mono);font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow-ink);background:var(--yellow);opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .25s ease}.mode-chip.show{opacity:1}#esc-chip{top:4.4rem;left:50%;transform:translate(-50%)}#mii-tag,#nawaf-tag,#baddah-tag{z-index:5;transform:translate(-50%,-130%)}#op-panel{position:fixed;right:var(--gutter);top:50%;z-index:7;transform:translate(28px,-50%);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease}#op-panel.show{opacity:1;pointer-events:auto;transform:translateY(-50%)}#op-panel .op-sub{padding:0 1.25rem .8rem;font-size:.7rem;color:var(--ink-2)}#op-panel .op-line{margin:0 1.25rem;padding:.75rem 0 .2rem;border-top:1px solid var(--line);font-family:var(--font-display);font-weight:500;font-size:1.2rem;line-height:1.25}#op-panel .op-bullets{list-style:none;margin:.5rem 1.25rem 0}#op-panel .op-bullets li{position:relative;padding:.45rem 0 .45rem 1.1rem;border-top:1px solid var(--line);font-size:.74rem;line-height:1.45;color:var(--ink-2)}#op-panel .op-bullets li:before{content:"—";position:absolute;left:0;color:var(--yellow)}#op-panel .op-chips{margin:.6rem 1.25rem 0;padding-top:.6rem;border-top:1px solid var(--line);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}#op-panel .op-chips .chip+.chip:before{content:" · "}.op-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:1rem 1.25rem 0}.op-btn{width:2.4rem;height:2.1rem;display:grid;place-items:center;background:transparent;border:1px solid var(--line);color:var(--ink);font-family:var(--font-mono);font-size:.8rem;cursor:pointer;transition:border-color .2s ease,color .2s ease}.op-btn:hover{border-color:var(--yellow);color:var(--yellow)}.op-dots{display:flex;gap:.4rem}.op-dot{width:14px;height:3px;background:var(--line)}.op-dot.on{background:var(--yellow)}.op-actions{display:flex;gap:.6rem;margin:.9rem 1.25rem 1.1rem}.op-actions .btn{flex:1;text-align:center}#fade{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:var(--bg);opacity:0;pointer-events:none}@media(pointer:coarse),(max-width:820px){#walk-hint,#walk-btn{display:none!important}#rail{display:none}}@media(max-width:720px){:root{--gutter: 1rem}.top{padding:.9rem var(--gutter)}.top-links{gap:1rem}.beat.plate-r,.beat.plate-l{left:var(--gutter);right:var(--gutter);top:auto;bottom:1rem;width:auto;transform:translateY(calc((1 - var(--vis)) * 20px))}#op-panel{left:var(--gutter);right:var(--gutter);top:auto;bottom:1rem;width:auto;transform:translateY(20px)}#op-panel.show{transform:none}.plate .ttl{font-size:2.3rem}.spec{font-size:.74rem}.spec td:first-child{width:4.6rem}.beat.hero{right:var(--gutter);bottom:3rem;width:auto}.np{padding:.9rem 1.1rem 1.1rem}h1{font-size:clamp(2.4rem,11vw,3.4rem)}.lede{font-size:1.05rem}#scroll-hint{bottom:.8rem}#esc-chip{top:3.6rem}}@media(prefers-reduced-motion:reduce){#scroll-hint,.loader-bar,.keys>kbd{animation:none}.beat,#op-panel,#rail{transition:none}}