/* Motion: one small set of timings and curves for the whole interface (use these, not literals).
   --t-micro: hover, press, colour.  --t-base: things arriving or changing state.  --t-slow: panels and screens.  --t-reveal: the few big entrances.
   --ease-out: nearly everything (fast start, soft landing).  --ease-in: things leaving.  --ease-pop: a small overshoot, for toasts and toggles only.
   Leaving is quicker than arriving: an exit runs about two thirds of its entrance. */
:root{--t-micro:.12s;--t-base:.22s;--t-slow:.45s;--t-reveal:.8s;--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.7,0,.84,0);--ease-pop:cubic-bezier(.3,1.45,.5,1)}
@font-face{font-family:Console;src:local('Arial');font-display:swap}*{box-sizing:border-box}html{color-scheme:dark;background:#060709;font-family:Console,Arial,sans-serif;font-size:16px}body{margin:0;color:#e7e9ec;background:#060709}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}button:focus-visible,a:focus-visible{outline:2px solid #96dcff;outline-offset:7px}button:disabled{cursor:default;opacity:.4}::selection{background:#6db4e5;color:#020609}[hidden]{display:none!important}.skip-link{position:fixed;left:20px;top:-100px;z-index:200;background:#a6daff;color:#000;padding:14px}.skip-link:focus{top:10px}.console-frame{min-height:100svh;position:relative;display:flex;flex-direction:column;overflow:hidden}.console-frame:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:90;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#0000000b 3px,#0000000b 4px);opacity:.35}.topbar{height:112px;display:flex;align-items:center;gap:24px;padding:0 5.2vw;position:relative;z-index:4;border-bottom:1px solid #ffffff0a}.brand{font-size:42px;letter-spacing:.04em;font-weight:900;font-style:italic;line-height:1;padding-right:6px}.brand span{font-size:12px;font-weight:400;letter-spacing:0;position:relative;top:-22px;margin-left:7px;font-style:normal}.edition{font-size:11px;letter-spacing:2.7px;color:#727985;padding-left:25px;border-left:1px solid #363a42;line-height:22px}.sound-toggle{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:1.6px;color:#989ea8;padding:15px 0}.sound-bars{display:flex;gap:3px;align-items:center;height:18px}.sound-bars i{height:5px;width:2px;background:currentColor}.sound-bars i:nth-child(2){height:13px}.sound-bars i:nth-child(3){height:18px}.sound-bars i:nth-child(4){height:9px}.sound-toggle[aria-pressed=true]{color:#9edaff}.console-footer{height:88px;margin-top:auto;padding:0 5.2vw;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:12px;letter-spacing:1px;color:#9b9ea8;position:relative;z-index:3;border-top:1px solid #ffffff0a}.console-footer #control-hints{display:flex;align-items:center;gap:9px;letter-spacing:.2px}.key{font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:24px}.key:not(:first-child){margin-left:16px}.blue{color:#8dbeff}.red{color:#e9a4a8}.footer-name{font-size:10px;letter-spacing:2.4px;color:#737986}#system-clock{font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:2px;color:#737986}#main-content{flex:1;display:flex;flex-direction:column;outline:none;position:relative;min-height:calc(100svh - 200px)}.home-screen{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:550px;padding:65px 7vw;background:radial-gradient(ellipse at 29% 56%,#0b152426,transparent 55%)}.home-art{position:absolute;inset:0;pointer-events:none}.home-canvas{width:100%;height:100%;display:block}.home-layout{width:min(100%,1100px);display:grid;grid-template-columns:1fr 1fr;position:relative;align-items:center;gap:5vw}.home-label{align-self:end;margin-top:350px;padding-left:45px;display:flex;gap:13px;align-items:center;font-size:10px;color:#667083;letter-spacing:2px}.home-label:before{content:'';width:22px;height:1px;background:#476389}.menu-intro{font-size:12px;letter-spacing:3px;color:#777f8e;margin:0 0 28px}.main-menu{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.menu-link{font-size:clamp(30px,3.8vw,56px);font-weight:400;letter-spacing:-1.7px;color:#717985;position:relative;padding:6px 0;transition:color var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);text-align:left;white-space:nowrap}.menu-link.active,.menu-link:hover,.menu-link:focus-visible{color:#bae6ff;text-shadow:0 0 30px #71c6ff66;transform:translateX(8px)}.menu-link.active:before{content:'';position:absolute;width:5px;height:5px;left:-26px;top:50%;background:#a4e3ff;box-shadow:0 0 15px #9adbff}.menu-caption{margin:30px 0 0;font-size:14px;color:#7c8593;line-height:1.8;max-width:300px}.home-serial{position:absolute;bottom:37px;left:5.2vw;font-size:10px;letter-spacing:2px;color:#424a56}.power-screen{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;min-height:550px;background:radial-gradient(ellipse at center,#10213955,transparent 58%);position:relative}.power-orbit{width:190px;height:190px;margin-bottom:47px;position:relative;border:1px solid #5a8db025;border-radius:50%;box-shadow:0 0 80px #325cac12,inset 0 0 60px #0d477622;transform:rotate(-20deg)}.power-orbit:before,.power-orbit:after{content:'';position:absolute;border-radius:50%;background:#9edcff;box-shadow:0 0 10px #88cbff,0 0 30px #308bff,0 0 60px #398fff}.power-orbit:before{width:12px;height:12px;top:17px;left:29px}.power-orbit:after{width:5px;height:5px;bottom:24px;right:25px}.power-symbol{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(20deg);font-size:58px;color:#90b9d7;text-shadow:0 0 25px #66abff55}.power-button{font-size:25px;letter-spacing:1px;color:#bce4ff;padding:16px 32px;border:1px solid #6999bb33;background:#15223133;box-shadow:0 0 40px #1c5fbc0a}.power-button:hover{background:#23456644;border-color:#a1d8ff77}.power-screen p{font-size:12px;color:#677486;letter-spacing:1px;margin-top:25px}.power-screen .power-id{position:absolute;bottom:34px;color:#495463;letter-spacing:3px;font-size:10px}#boot-overlay{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;overflow:hidden}#boot-canvas{position:absolute;width:100%;height:100%}.boot-wordmark{font-size:clamp(70px,12vw,160px);letter-spacing:.04em;font-style:italic;font-weight:900;color:#cdeeff;text-shadow:0 0 45px #539bf8;opacity:0;text-align:center;position:relative}.boot-wordmark span{display:block;font-size:11px;letter-spacing:5px;font-weight:400;font-style:normal;margin-top:23px;color:#a3b8d1}#skip-boot{position:absolute;right:5vw;bottom:35px;color:#8395ab;font-size:13px}#skip-boot span{color:#b3d8ff;margin-left:10px}.screen-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:42px 5.2vw 0;position:relative;z-index:2}.eyebrow{font-size:11px;font-weight:400;letter-spacing:2.5px;text-transform:uppercase;color:#858d9b;margin:0 0 12px}.screen-head h1{font-size:26px;font-weight:400;letter-spacing:-.5px;margin:0}.back-link{display:inline-flex;align-items:center;gap:8px;color:#9da5af;font-size:13px;padding:7px 0}.back-link .key{font-size:20px}.screen-note{font-size:12px;color:#8f98a4;line-height:1.8;text-align:right}.browser-screen{position:relative;flex:1;display:flex;flex-direction:column;background:radial-gradient(ellipse at 40% 30%,#96999d,#6d7176 55%,#52575d);color:#fff;text-shadow:0 1px 2px #0004;min-height:580px}.browser-screen .eyebrow{color:#d3d9dc}.browser-screen .screen-head h1{color:#f0f1f2}.browser-screen .back-link,.browser-screen .screen-note{color:#e0e4e8}.memory-indicator{display:flex;align-items:center;gap:10px;font-size:12px}.memory-indicator b{color:#d5eab0;font-weight:400}.company-stage{position:relative;width:100%;max-width:1400px;margin:0 auto;height:330px;flex:1;min-height:280px}.company-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.company-targets{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);padding:0 4vw;align-items:stretch}.company-target{position:relative;display:flex;justify-content:flex-end;align-items:center;flex-direction:column;padding:0 8px 28px;background:transparent;color:#e3e4e6;transition:color var(--t-base) var(--ease-out)}.company-target .company-name{font-size:18px;letter-spacing:-.5px}.company-target .company-index{font-size:10px;letter-spacing:2px;margin-top:9px;opacity:.45}.company-target.active{color:#e8ffc5}.company-target.active:after{content:'';position:absolute;bottom:11px;left:calc(50% - 3px);width:5px;height:5px;background:#eaffc9;box-shadow:0 0 12px #ecffd6}.company-target:focus-visible{outline-offset:-15px}.browser-detail{margin:20px 5.2vw 40px;padding:22px 0 0;border-top:1px solid #ffffff30;display:flex;justify-content:space-between;gap:20px;align-items:center}.browser-detail h2{font-size:23px;letter-spacing:-.5px;font-weight:400;margin:0 0 8px}.browser-detail p{font-size:14px;color:#d5d9df;margin:0;line-height:1.6}.console-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 21px;border:1px solid #ffffff32;font-size:14px;transition:background var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out);white-space:nowrap;min-height:48px}.console-button:hover{background:#ffffff17}.console-button.primary{background:#bbdfff;color:#142535;border-color:#bbdfff;text-shadow:none}.console-button.primary:hover{background:#d8eeff}.console-button .key{font-size:21px}.breadcrumbs{font-size:12px;color:#858e9b;display:flex;align-items:center;gap:13px;margin-bottom:24px}.breadcrumbs a:hover{color:#b5ddff}.breadcrumbs span{color:#4c5663}.content-screen{width:100%;max-width:1320px;padding:40px 5.2vw 75px;margin:auto}.company-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin:25px 0 45px}.company-hero h1{font-size:clamp(42px,6vw,78px);letter-spacing:-3px;font-weight:400;margin:10px 0 16px}.company-hero p{font-size:17px;line-height:1.8;color:#939caa;max-width:580px;margin:0}.record-label{font-size:12px;color:#91b9de;white-space:nowrap}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 26px}.project-card{display:block;position:relative}.project-image{aspect-ratio:16/10;background:#151b24;overflow:hidden;border:1px solid #ffffff10;position:relative;display:flex;align-items:center;justify-content:center}.project-image img{width:100%;height:100%;object-fit:contain;transition:transform var(--t-slow) var(--ease-out);background:#e9ebee}.project-card:hover img{transform:scale(1.035)}.project-card h2{font-size:23px;letter-spacing:-.6px;margin:20px 0 8px;font-weight:400}.project-card p{font-size:13px;color:#7f8b9c;margin:0;line-height:1.7}.project-image .file-icon{font-size:90px;color:#6b9acb;font-weight:900;letter-spacing:-8px;font-style:italic}.project-image .file-description{position:absolute;bottom:23px;left:25px;right:25px;font-size:11px;letter-spacing:2px;color:#819ab7}.project-card .open-project{display:block;color:#a0c6ec;font-size:12px;margin-top:15px}.project-card:hover h2{color:#b3ddff}.case-top{display:grid;grid-template-columns:1.4fr 1fr;gap:65px;margin:40px 0}.case-top h1{font-size:clamp(36px,5vw,64px);font-weight:400;letter-spacing:-2px;line-height:1.08;margin:12px 0 25px}.case-top p{color:#a6afbd;font-size:18px;line-height:1.8;margin:0}.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-content:end;padding-bottom:9px}.case-facts dt{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#6d7a8b;margin-bottom:10px}.case-facts dd{margin:0;font-size:14px;color:#d5dce5;line-height:1.6}.case-cover{width:100%;max-height:650px;object-fit:contain;background:#e6e8ec;display:block;border:1px solid #fff1}.case-body{max-width:800px;margin:60px auto}.case-section{margin:0 0 50px}.case-section h2{font-size:30px;letter-spacing:-1px;font-weight:400;margin:0 0 20px}.case-section p{font-size:17px;line-height:1.9;color:#a5afbd}.case-section ul{padding-left:22px;color:#a5afbd;font-size:17px;line-height:1.9}.case-figure{margin:35px -80px 50px}.case-figure img{display:block;width:100%;background:#e6e8ec;max-height:750px;object-fit:contain}.case-figure figcaption{font-size:12px;color:#707c8e;margin-top:12px}.source-link{display:inline-flex;color:#a8cff2;border-bottom:1px solid #36516b;padding-bottom:4px;font-size:14px}.case-end{display:flex;align-items:center;justify-content:space-between;margin-top:55px;padding-top:30px;border-top:1px solid #ffffff16}.placeholder-note{border-left:2px solid #7298bb;padding:5px 0 5px 22px;color:#96a3b5;line-height:1.8;font-size:16px;max-width:650px}.about-screen{position:relative;flex:1;background:radial-gradient(ellipse at 30% 60%,#19223877,transparent 62%)}.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:5vw;padding:10px 7vw 50px;max-width:1450px;width:100%;margin:0 auto;align-items:center}.character-stage{position:relative;height:480px;cursor:grab;touch-action:pan-y}.character-stage:active{cursor:grabbing}.character-stage canvas{width:100%;height:100%;display:block}.character-stage .rotate-hint{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:2px;color:#65768d;pointer-events:none}.character-loading{position:absolute;inset:0;display:grid;place-items:center;color:#6c88a6}.about-copy{max-width:475px}.about-copy h1{font-size:clamp(38px,4.5vw,65px);font-weight:400;letter-spacing:-2px;margin:10px 0 23px}.about-copy .lead{font-size:20px;line-height:1.65;color:#b4c0d0;margin:0 0 20px}.about-copy p{font-size:16px;line-height:1.85;color:#8291a5}.outfit-picker{margin-top:30px;border-top:1px solid #ffffff16;padding-top:23px}.outfit-options{display:flex;gap:12px;margin-top:15px}.outfit-button{padding:13px 16px;border:1px solid #334254;color:#8e9db0;font-size:13px;min-height:46px}.outfit-button[aria-pressed=true]{border-color:#90bcdf;background:#8cbcee13;color:#d2eaff}.outfit-swatch{display:inline-block;width:9px;height:9px;margin-right:9px;background:#c93242}.social-links{display:flex;gap:23px;margin-top:30px;font-size:13px;color:#a8bfd8}.social-links a{border-bottom:1px solid #3b4f66;padding-bottom:6px}.social-links a:hover{color:#fff}.play-screen{width:min(1240px,100%);padding:35px 5.2vw 50px;margin:0 auto}.play-heading{display:flex;align-items:center;justify-content:space-between;margin:10px 0 22px}.play-heading h1{font-size:30px;font-weight:400;letter-spacing:-1px;margin:0}.game-cabinet{border:1px solid #303a49;padding:8px;background:#0e131b;position:relative}.game-viewport{position:relative;aspect-ratio:16/9;background:#152137;overflow:hidden}.game-viewport canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.game-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;background:linear-gradient(#06111daa,#06111def)}.game-overlay .eyebrow{color:#e2c078}.game-overlay h2{font-size:clamp(35px,5vw,66px);line-height:.98;letter-spacing:-2px;font-weight:900;text-transform:uppercase;margin:13px 0 18px;color:#f9e6b7;text-shadow:4px 4px #a04e39}.game-overlay p{color:#b7bec8;font-size:14px;line-height:1.8;margin:0 0 25px;max-width:400px}.game-overlay .console-button{background:#edbc6e;border-color:#edbc6e;color:#1b2530;font-weight:700}.game-hud{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-bottom:13px;font-size:12px;letter-spacing:1px;color:#a5b5c9;font-variant-numeric:tabular-nums}.game-hud strong{color:#eac07b;font-weight:400;margin-left:6px}.game-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:18px;font-size:12px;color:#7d8b9d}.game-controls div{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.game-controls kbd{background:#17202b;padding:4px 6px;border:1px solid #354052;color:#bdcad8;font-family:inherit;font-size:11px;margin-right:5px}.game-mobile{display:none;padding:80px 25px;text-align:center;background:#101925}.game-mobile h2{font-size:30px;font-weight:400;color:#b7d8f8}.game-mobile p{font-size:16px;line-height:1.8;color:#8d9db2}.game-status{font-size:12px;color:#d4b37b}body.browser-mode .topbar,body.browser-mode .console-footer{background:#252a30}body.browser-mode .console-footer{color:#aeb7c3}.view-enter{animation:viewEnter var(--t-slow) var(--ease-out) both}@keyframes viewEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.home-screen{min-height:650px}.company-stage{height:400px}.about-layout{padding-top:35px}.character-stage{height:580px}}
@media(max-width:760px){.topbar{height:84px;padding:0 7vw}.brand{font-size:35px}.brand span{top:-18px}.edition{display:none}.sound-toggle{font-size:10px}.console-footer{height:76px;padding:0 7vw}.footer-name{display:none}#system-clock{font-size:9px}#main-content{min-height:calc(100svh - 160px)}.home-screen{min-height:590px;padding:30px 9vw 80px;align-items:flex-end}.home-layout{display:block}.home-label{display:none}.home-layout>div:last-child{max-width:250px;margin-left:auto;margin-right:auto}.menu-intro{font-size:10px;margin-bottom:17px}.menu-link{font-size:37px;letter-spacing:-1px;padding:4px 0}.main-menu{gap:7px}.menu-caption{font-size:12px;margin-top:19px}.home-serial{bottom:23px;left:7vw;font-size:9px}.power-screen{min-height:500px}.power-orbit{width:150px;height:150px;margin-bottom:35px}.power-button{font-size:21px}.screen-head{padding:30px 7vw 0}.screen-head h1{font-size:22px}.screen-note{font-size:10px}.browser-screen{min-height:650px}.company-stage{min-height:460px}.company-targets{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;padding:0 3vw}.company-target{padding-bottom:20px}.company-target .company-name{font-size:16px}.company-target .company-index{font-size:9px}.company-target.active:after{bottom:6px}.browser-detail{margin:12px 7vw 30px;align-items:flex-start}.browser-detail h2{font-size:20px}.browser-detail p{font-size:12px;max-width:160px}.console-button{font-size:12px;padding:12px 14px;gap:6px}.content-screen{padding:28px 7vw 50px}.company-hero{display:block;margin:30px 0}.company-hero h1{font-size:50px;letter-spacing:-2px}.company-hero p{font-size:15px}.record-label{margin-top:20px}.project-grid{grid-template-columns:1fr;gap:35px}.project-card h2{font-size:22px}.case-top{grid-template-columns:1fr;gap:20px;margin-top:30px}.case-top h1{font-size:39px}.case-top p{font-size:16px}.case-facts{gap:22px}.case-body{margin-top:40px}.case-section h2{font-size:26px}.case-section p,.case-section ul{font-size:16px}.case-figure{margin:25px 0 35px}.case-end{gap:20px;align-items:flex-start}.about-layout{grid-template-columns:1fr;padding:0 7vw 40px;gap:5px}.character-stage{height:390px}.about-copy{max-width:100%}.about-copy h1{font-size:45px}.about-copy .lead{font-size:19px}.about-copy p{font-size:16px}.play-screen{padding:28px 7vw 45px}.play-heading h1{font-size:25px}.game-desktop{display:none}.game-mobile{display:block}.breadcrumbs{font-size:11px}.boot-wordmark{letter-spacing:.04em}.boot-wordmark span{letter-spacing:2px;font-size:9px}}
/* Reduced motion: every transition and animation jumps straight to its end state, once. (Not animation:none: things that
   arrive by animating, the tour's captions, would then never arrive.) What's shown for a while and then removed gets a
   still version of its own below. */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}}
.rotation-controls{display:flex;justify-content:center;gap:35px;margin-top:10px}.rotation-controls button{font-size:25px;color:#819cb9;width:44px;height:40px;border:1px solid #334354}.rotation-controls button:hover{color:#c8e6ff;background:#173147}.text-button{font-size:12px;color:#93b5d5;border-bottom:1px solid #364f67;padding:0 0 6px}.text-button:hover{color:#d1e8fc}
.about-layout>div:first-child>.outfit-picker{margin:18px auto 0;padding:0;border:0;text-align:center}.about-layout>div:first-child>.outfit-picker .outfit-options{justify-content:center}.about-layout>div:first-child>.outfit-picker .eyebrow{font-size:10px;margin-bottom:5px}.about-layout .character-stage{height:420px}.about-layout .rotation-controls{margin-top:2px}.about-layout .rotation-controls button{width:38px;height:33px;font-size:21px}.play-mode .topbar{height:80px}.play-mode .console-footer{height:60px}.play-mode #main-content{min-height:calc(100svh - 140px)}.play-mode .play-screen{padding-top:18px;padding-bottom:20px}.play-mode .breadcrumbs{margin-bottom:13px}.play-mode .play-heading{margin:0 0 14px}.play-mode .game-cabinet,.play-mode .game-hud,.play-mode .game-controls{max-width:min(960px,calc((100svh - 315px)*16/9));margin-left:auto;margin-right:auto}.play-mode .game-controls{font-size:11px}.game-viewport canvas:focus-visible{outline:1px solid #98c8dc;outline-offset:-2px}
@media(min-width:761px) and (max-height:800px){.topbar{height:84px}.console-footer{height:64px}#main-content{min-height:calc(100svh - 148px)}.home-screen{min-height:480px;padding-top:30px;padding-bottom:30px}.browser-screen{min-height:calc(100svh - 148px)}.company-stage{min-height:245px}.browser-detail{margin-bottom:25px}.screen-head{padding-top:25px}.about-layout{padding-top:10px;padding-bottom:25px;gap:5vw}.about-layout .character-stage{height:330px}.about-copy h1{font-size:49px;margin:8px 0 16px}.about-copy .lead{font-size:20px;margin-bottom:15px;line-height:1.5}.about-copy p{font-size:16px;line-height:1.65}.about-copy .social-links{margin-top:20px}.about-layout>div:first-child>.outfit-picker{margin-top:14px}.about-layout>div:first-child>.outfit-picker .outfit-options{margin-top:10px}.outfit-button{padding:10px 13px}.home-label{margin-top:300px}.menu-link{font-size:42px}.menu-caption{margin-top:22px}}
@media(max-width:760px){.about-layout .character-stage{height:370px}.about-layout>div:first-child>.outfit-picker{margin-bottom:35px}.play-mode .game-mobile{margin-top:25px}.play-mode .game-cabinet,.play-mode .game-hud,.play-mode .game-controls{max-width:100%}}
.game-enemy-caption{font-size:9px;letter-spacing:1.7px;color:#b79a6c;margin-top:20px}.xp-track{height:21px;position:relative;background:#142437;border-top:1px solid #32495d;overflow:hidden}.xp-track>div{height:100%;width:0;background:#346781;transition:width var(--t-base) var(--ease-out)}.xp-track>span{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;letter-spacing:2px;color:#c1e9f3}.game-loadout{max-width:min(960px,calc((100svh - 355px)*16/9));margin:10px auto 0;display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.game-loadout>span{padding:4px 7px;background:#121c28;border:1px solid #26384b;font-size:10px;color:#90aac2}.game-loadout b{font-weight:400;color:#ded0a2;margin-left:4px}.game-overlay.upgrade-overlay{background:#071320ed;padding:20px}.upgrade-overlay h2{font-size:clamp(22px,2.6vw,35px);text-transform:none;letter-spacing:-1px;text-shadow:none;margin:3px 0 20px;color:#c8eafa}.upgrade-overlay>.eyebrow{margin-bottom:8px;font-size:10px}.upgrade-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,760px)}.upgrade-choice{border:1px solid #40576b;background:linear-gradient(#1a3043,#122233);padding:16px 14px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:162px}.upgrade-choice:hover,.upgrade-choice:focus-visible{border-color:#91d6ea;background:#233f51}.upgrade-slot{font-size:10px;letter-spacing:2px;color:#6f9daf}.upgrade-choice strong{font-size:15px;color:#e7ce90;line-height:1.15}.upgrade-choice>span:not(.upgrade-slot){font-size:12px;line-height:1.55;color:#a6bbcf;flex:1}.upgrade-choice small{font-size:9px;letter-spacing:1.5px;color:#7bacbd;margin-top:8px}.upgrade-choice small span{color:#aee5f7;margin-left:10px}.play-mode .game-cabinet,.play-mode .game-hud,.play-mode .game-controls{max-width:min(960px,calc((100svh - 355px)*16/9))}.play-mode .game-controls{padding-top:12px}.play-mode .game-overlay h2{font-size:clamp(30px,4vw,55px)}.play-mode .upgrade-overlay h2{font-size:clamp(22px,2.6vw,35px)}
@media(min-width:761px) and (max-height:780px){.game-overlay{padding:18px}.game-overlay h2{margin:7px 0 13px!important}.game-overlay p{font-size:12px;margin-bottom:15px;line-height:1.5}.game-enemy-caption{margin-top:14px;font-size:8px}.upgrade-choice{padding:10px;gap:7px;min-height:143px}.upgrade-choice strong{font-size:13px}.upgrade-choice>span:not(.upgrade-slot){font-size:11px}.game-overlay.upgrade-overlay{padding:15px}.upgrade-overlay>.eyebrow{font-size:9px}.upgrade-overlay h2{font-size:23px!important}.upgrade-choices{gap:8px}}

/* Keep upgrade choices reachable in short desktop windows. */
@media(min-width:761px){.play-mode .game-cabinet,.play-mode .game-hud,.play-mode .game-controls,.play-mode .game-loadout{max-width:min(960px,max(620px,calc((100svh - 355px)*16/9)))}}
.game-overlay{overflow-y:auto;justify-content:safe center}.game-overlay>*{flex-shrink:0}

.boss-status{max-width:min(960px,max(620px,calc((100svh - 385px)*16/9)));margin:0 auto 10px;display:flex;align-items:center;gap:12px;font:10px monospace;letter-spacing:1px;color:#7f9aaa;min-height:20px;flex-wrap:wrap}.boss-status>span:first-child{flex:1}.boss-status.boss-active{color:#efd091}.boss-health-track{height:5px;background:#332c32;width:100%;overflow:hidden}.boss-health-track>div{height:100%;width:100%;background:#e8a165;transform:scaleX(var(--boss,1));transform-origin:0 50%;transition:transform var(--t-micro) linear}.play-mode .game-status{max-width:48%;text-align:right;line-height:1.5}.play-mode .game-cabinet,.play-mode .game-hud,.play-mode .game-controls,.play-mode .game-loadout{max-width:min(960px,max(620px,calc((100svh - 385px)*16/9)))}

/* Paused field guide */
.enemy-info-open{margin-top:14px;padding:8px 20px;color:#e8d6ad}
.game-overlay.enemy-info-overlay{padding:18px 22px;align-items:stretch;justify-content:flex-start;text-align:left;background:#101d2af5;gap:12px;overflow:hidden}
.enemy-info-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.enemy-info-heading .eyebrow{font-size:9px;letter-spacing:1.5px}
.enemy-info-heading h2{font-size:22px!important;margin:5px 0 0!important}
.enemy-info-heading button{font-size:11px;white-space:nowrap}
.enemy-info-tabs{display:flex;gap:8px}
.enemy-info-tabs button{padding:7px 13px;border:1px solid #506074;background:#192b3e;color:#bbc8d6;font:inherit;font-size:11px;cursor:pointer}
.enemy-info-tabs button[aria-pressed=true]{color:#17212b;background:#edbc6e;border-color:#edbc6e}
.game-overlay .enemy-info-body{display:grid;grid-template-columns:185px 1fr;gap:20px;min-height:0;flex:1;overflow:hidden}
.enemy-info-list{overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding:2px}
.enemy-info-list button{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid transparent;padding:8px 7px;background:transparent;color:#b5c4d4;font:inherit;font-size:11px;cursor:pointer;flex-shrink:0}
.enemy-info-list button span{color:#74899e;font-size:9px}
.enemy-info-list button[aria-pressed=true]{border-color:#edbc6e80;background:#edbc6e16;color:#ffe1ac}
.enemy-info-detail{overflow-y:auto;display:grid;grid-template-columns:100px 1fr;align-content:start;gap:12px;padding:6px 4px}
.game-viewport .enemy-info-detail canvas{width:100px;height:100px;background:radial-gradient(ellipse,#43607855,transparent 70%)}
.enemy-info-number{color:#8ca5bb;font-size:9px;letter-spacing:1px}
.enemy-info-detail h3{font-size:18px;color:#fff0d3;margin:6px 0 10px}
.enemy-info-detail h4{font-size:9px;letter-spacing:1.5px;color:#edbc6e;margin:16px 0 6px}
.game-overlay .enemy-info-detail p{font-size:12px;line-height:1.6;margin:0 0 10px;max-width:none}
.enemy-info-detail small{font-size:10px;color:#8ca5bb}
@media(max-width:1000px){.enemy-info-detail{grid-template-columns:75px 1fr}.game-viewport .enemy-info-detail canvas{width:75px;height:75px}.game-overlay .enemy-info-body{grid-template-columns:160px 1fr;gap:10px}}
.enemy-info-quips{list-style:none;padding:0;margin:0}.enemy-info-quips li{font-size:11px;color:#c5d5df;line-height:1.6;padding:7px 0;border-bottom:1px solid #ffffff12}

/* Editorial case studies inside the console shell. */
.case-study .case-reading{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:1px;color:#91a9bf;margin-top:24px;text-transform:uppercase}
.case-study .case-facts dt{font-size:12px;letter-spacing:1.2px;color:#9aa8b9}
.case-study .case-facts dd{font-size:16px}
.case-brief{padding:32px 0 36px;margin-bottom:40px;border-top:1px solid #6383a755;border-bottom:1px solid #6383a733}
.case-brief .eyebrow{color:#9acbed;font-size:12px}
.case-brief .case-summary{font-size:clamp(20px,2.2vw,27px);line-height:1.55;letter-spacing:-.35px;max-width:960px;color:#e2e9f0;margin:18px 0 28px}
.case-brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.case-brief-grid h2{font-size:14px;letter-spacing:.3px;font-weight:500;color:#aad6f4;margin:0 0 10px}
.case-brief-grid p{font-size:16px;line-height:1.8;color:#aab7c6;margin:0}
.case-study .case-cover{background:#11151b;max-height:560px}
.case-story-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:55px;align-items:start;margin-top:65px}
.case-index{position:sticky;top:30px;display:flex;flex-direction:column;gap:5px}
.case-index .eyebrow{font-size:12px;letter-spacing:1px;margin-bottom:16px}
.case-index button{display:flex;gap:10px;text-align:left;color:#9fadc0;line-height:1.6;font-size:12px;letter-spacing:.3px;padding:9px 0}
.case-index button span{color:#6383a7}
.case-index button:hover,.case-index button:focus-visible{color:#c3e7ff}
.case-study .case-body{max-width:850px;width:100%;margin:0 auto}
.case-study .case-section{scroll-margin-top:35px;margin-bottom:65px;outline:none}
.case-study .case-section:focus-visible{outline:1px solid #6383a7;outline-offset:12px}
.case-study .case-section-label{font-size:12px;letter-spacing:1.5px;color:#91c4eb;line-height:1.5;margin-bottom:14px}
.case-study .case-section h2{font-size:clamp(26px,2.8vw,36px);line-height:1.25;max-width:750px}
.case-study .case-section>p:not(.case-section-label){max-width:740px;color:#b2bfce}
.case-study .case-figure{margin:32px 0 42px}
.case-study .case-figure img{background:#101318;border:1px solid #ffffff15;max-height:none}
.case-study .case-figure a{display:block;cursor:zoom-in}
.case-study .case-figure figcaption{font-size:14px;color:#9aaabb;line-height:1.7;margin-top:14px}
.case-figure figcaption span{display:block;font-size:12px;color:#6989a7;margin-top:4px}
.case-evidence{display:flex;flex-wrap:wrap;gap:30px;margin:30px 0;padding:24px 0;border-top:1px solid #6383a733;border-bottom:1px solid #6383a733}
.case-evidence>div{display:flex;flex-direction:column;gap:12px;flex:1;min-width:180px}
.case-evidence dt{font-size:14px;line-height:1.6;color:#a9b8c8;order:1}
.case-evidence dd{margin:0;color:#c4e5ff;font-size:36px;letter-spacing:-1px}
.case-decision{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:25px;background:#111b27;border-left:2px solid #83bce5;margin:30px 0}
.case-decision h3{font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:1px;color:#89b8dc;margin:0 0 10px}
.case-study .case-decision p{font-size:16px;line-height:1.7;margin:0;color:#c6d3e1}
.case-study .case-decision .case-decision-why{grid-column:1/-1;font-size:14px;color:#93a7bc;border-top:1px solid #ffffff15;padding-top:18px}
@media(max-width:1000px){.case-story-layout{grid-template-columns:135px minmax(0,1fr);gap:30px}.case-study .case-top{gap:30px}}
@media(max-width:760px){.case-brief-grid,.case-decision{grid-template-columns:1fr;gap:24px}.case-story-layout{display:block;margin-top:36px}.case-index{position:static;flex-direction:row;flex-wrap:wrap;gap:6px 16px;margin-bottom:35px;border-bottom:1px solid #6383a733;padding-bottom:20px}.case-index .eyebrow{width:100%;margin-bottom:5px}.case-index button{font-size:12px}.case-study .case-section{margin-bottom:45px}.case-study .case-top h1{font-size:38px}.case-study .case-figure{margin:25px 0}.case-brief{padding-top:25px}.case-study .case-end{align-items:flex-start;flex-direction:column;gap:20px}}
.case-mode .console-frame{overflow:clip}.case-study .case-figure img{height:auto}.case-study .case-cover{height:auto}
.company-targets{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.company-targets{grid-template-columns:1fr 1fr}.company-target:last-child{grid-column:1/-1;width:50%;justify-self:center}}
.additional-browser-link{display:flex;justify-content:space-between;gap:15px;margin:0 5.2vw 25px;padding:15px 0;border-top:1px solid #ffffff30;font-size:16px;color:#eef4ff}.additional-browser-link span{font-size:12px;color:#dae0e7}.additional-browser-link:hover{color:#e8ffc5}.additional-project{display:grid;grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr);gap:45px;padding:45px 0;border-top:1px solid #ffffff20}.additional-project h2{font-size:28px;font-weight:400;letter-spacing:-.7px;margin:0 0 20px;line-height:1.2}.additional-project-copy>p:not(.eyebrow){font-size:17px;line-height:1.8;color:#aab8c9}.additional-project img{display:block;width:100%;height:auto;border:1px solid #ffffff18}.additional-project a{cursor:zoom-in}.additional-project a>span{display:block;font-size:12px;color:#89aac5;margin-top:10px}@media(max-width:760px){.additional-project{grid-template-columns:1fr;gap:15px;padding:30px 0}.additional-browser-link{flex-direction:column;gap:8px}.additional-screen .company-hero h1{font-size:42px}}
.company-targets{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:760px){.company-targets{grid-template-columns:repeat(2,minmax(0,1fr))}.company-target:last-child{grid-column:auto;width:auto;justify-self:stretch}}

.work-history{max-width:1200px;margin:15px auto 70px;padding:40px 7vw 0;border-top:1px solid #ffffff16}.work-history h2{font-size:36px;font-weight:400;letter-spacing:-1px;margin:12px 0 36px}.work-timeline{list-style:none;margin:0;padding:0}.work-timeline li{display:grid;grid-template-columns:150px 1fr;gap:32px;position:relative;padding:0 0 35px 25px;border-left:1px solid #35475c}.work-timeline li:before{content:'';position:absolute;left:-4px;top:7px;width:7px;height:7px;border-radius:50%;background:#aad9f6;box-shadow:0 0 12px #8cbcee40}.work-timeline li:last-child{padding-bottom:0}.work-date{font-size:12px;letter-spacing:1px;color:#8fa9c3;padding-top:5px}.work-detail h3{font-size:23px;font-weight:400;margin:0 0 7px}.work-detail p{max-width:650px;font-size:15px;line-height:1.8;color:#94a2b5;margin:10px 0 0}.work-detail .work-role{font-size:12px;color:#b4c6da;margin:0}@media(max-width:760px){.work-history{margin:0 7vw 50px;padding:30px 0 0}.work-history h2{font-size:30px}.work-timeline li{grid-template-columns:1fr;gap:10px;padding-left:22px}.work-detail h3{font-size:22px}.work-date{padding-top:2px}}

/* Homepage introduction and console menu. */
.hero-intro{display:grid;grid-template-columns:1fr;align-content:center;gap:30px;padding:35px 7vw 48px;min-height:560px}
.home-introduction{position:relative;z-index:1;width:min(100%,1100px);margin:0 auto}
.home-introduction h1{font-size:clamp(25px,2.8vw,40px);line-height:1.35;letter-spacing:-1px;font-weight:400;margin:0;max-width:1000px;color:#e5edf5}
.home-introduction h1 span{color:#9daab9}
.hero-intro .home-layout{min-height:275px;gap:5vw;margin:auto}
.hero-intro .home-label{margin-top:230px;padding-left:25px;font-size:9px}
.hero-intro .home-art{inset:auto auto 40px 7vw;width:40%;height:300px}
.hero-intro .menu-intro{font-size:10px;margin-bottom:12px}
.hero-intro .menu-link{font-size:clamp(30px,3.3vw,46px);letter-spacing:-1px;padding:2px 0}
.hero-intro .main-menu{gap:8px}
.hero-intro .menu-caption{font-size:12px;line-height:1.65;margin-top:16px}
.hero-intro .home-serial{display:none}
@media(max-width:760px){.hero-intro{padding:28px 8vw 35px;min-height:600px;gap:24px}.home-introduction h1{font-size:27px;letter-spacing:-.7px}.hero-intro .home-art{left:0;bottom:20px;width:38%;height:260px}.hero-intro .home-layout{display:block;min-height:260px;width:100%}.hero-intro .home-layout>div:last-child{margin-left:35%;margin-right:0;max-width:none}.hero-intro .home-label{display:none}.hero-intro .menu-link{font-size:32px}.hero-intro .menu-caption{font-size:11px}}

@media(min-width:761px){.hero-console .home-art{bottom:95px;height:280px}.hero-console .home-label{padding-left:25px}}

.case-video video{display:block;width:100%;max-height:620px;background:#080b10;border:1px solid #ffffff20}
.home-head{max-width:860px}
.home-browser .screen-head h1{font-size:clamp(22px,2.3vw,34px);line-height:1.3;letter-spacing:-.8px;margin-top:6px}
.home-browser .screen-head h1 span{color:#d6dce1}
.home-browser .screen-note{flex-shrink:0}
.home-browser .memory-indicator{justify-content:flex-end}
.home-nav{display:flex;gap:24px;justify-content:flex-end;margin-bottom:12px}
.home-nav a{font-size:17px;color:#f0f1f2;padding:3px 0;border-bottom:1px solid #ffffff4d;transition:color var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
.home-nav a:hover,.home-nav a:focus-visible{color:#e8ffc5;border-color:#e8ffc5}
@media(max-width:760px){.home-browser .screen-head{flex-direction:column;gap:14px}.home-browser .screen-head h1{font-size:20px}.home-browser .screen-note{text-align:left}.home-browser .memory-indicator,.home-nav{justify-content:flex-start}.home-nav a{font-size:15px}}
.case-original{max-width:860px}
.case-original .original-head{max-width:620px;margin:56px auto 40px}
.case-original .original-head h1{font-size:clamp(30px,3.4vw,40px);font-weight:500;letter-spacing:-1px;line-height:1.15;margin:0 0 26px;color:#eef2f6}
.case-original .original-head>p{font-size:17px;line-height:1.75;color:#b2bfce;margin:0}
.original-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:36px 0 0}
.original-facts div{border:1px solid #ffffff1c;border-radius:6px;padding:20px 20px 22px;background:#ffffff06}
.original-facts dt{font-size:14px;font-weight:600;color:#e7edf3;margin-bottom:14px}
.original-facts dd{margin:0;font-size:14px;line-height:1.55;color:#aebbca}
.original-hero{display:block;width:100%;max-width:620px;height:auto;margin:0 auto 70px}
.original-section{max-width:620px;margin:0 auto 70px}
.original-section h2{font-size:21px;font-weight:500;letter-spacing:-.3px;color:#eef2f6;margin:0 0 18px}
.original-section p{font-size:17px;line-height:1.75;color:#b2bfce;margin:0 0 28px}
.original-figure{margin:0 auto 22px;width:84%}
.original-figure a{display:block;cursor:zoom-in}
.original-figure img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #ffffff17;background:#101318}
.original-related{max-width:620px;margin:90px auto 0;padding-top:50px;border-top:1px solid #ffffff16}
.original-related h2{font-size:36px;font-weight:500;letter-spacing:-1px;margin:0 0 28px}
.original-related-card h3{font-size:22px;font-weight:500;margin:18px 0 6px;color:#eef2f6}
.original-related-card span{font-size:15px;color:#a8cff2;border-bottom:1px solid #36516b;padding-bottom:2px}
.original-related-card:hover h3,.original-related-card:focus-visible h3{color:#bae6ff}
.case-original .case-end{max-width:620px;margin-left:auto;margin-right:auto}
@media(max-width:760px){.case-original .original-head{margin-top:36px}.original-facts{grid-template-columns:1fr}.original-figure{width:100%}.original-hero,.original-section{margin-bottom:50px}.original-related h2{font-size:30px}}
.case-original .original-head>p+p{margin-top:22px}
.original-lead{font-size:20px!important;line-height:1.6!important;color:#c7d2de!important}
.original-lead-medium{font-size:18px!important}
.original-small{font-size:15px!important}
.original-note{font-size:13px!important;color:#8495a8!important;margin-top:-16px!important}
.original-facts-stack{grid-template-columns:1fr}
.original-facts-stack div{padding:16px 20px 18px}
.original-facts-stack dt{margin-bottom:8px}
.original-section-large h2{font-size:25px;line-height:1.35}
.original-section-item{margin-bottom:56px}
.original-section-item h2{font-size:18px;margin-bottom:8px}
.original-section-item .original-figure{width:100%}
.original-list{margin:-8px 0 28px;padding-left:22px;color:#b2bfce;font-size:17px;line-height:1.75}
.original-list li{margin-bottom:12px}
.original-list strong{color:#e7edf3;font-weight:600}
.original-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 auto 32px;width:84%}
.original-stats div{border:1px solid #ffffff1c;border-radius:8px;padding:22px;background:#ffffff06}
.original-stats h3{font-size:16px;font-weight:500;color:#c7d2de;margin:0}
.original-stats p{font-size:52px!important;line-height:1.1!important;letter-spacing:-2px;color:#eef2f6!important;margin:12px 0 0!important}
.original-overlay{position:relative;margin:0 0 26px;border-radius:8px;overflow:hidden;border:1px solid #ffffff17}
.original-overlay img{display:block;width:100%;height:auto}
.original-overlay video{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:cover;border-radius:8px;mix-blend-mode:screen}
.original-video video{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #ffffff17;background:#101318}
.original-youtube{width:100%}
.original-youtube button{position:relative;display:block;width:100%;padding:0;border-radius:8px;overflow:hidden;border:1px solid #ffffff17;cursor:pointer}
.original-youtube button img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border:0;border-radius:0}
.original-youtube button span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:12px;background:#000c;color:#fff;font-size:20px;display:grid;place-items:center;transition:background var(--t-base) var(--ease-out)}
.original-youtube button:hover span,.original-youtube button:focus-visible span{background:#e2231a}
.original-youtube iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px}
@media(max-width:760px){.original-stats{width:100%}.original-stats p{font-size:40px!important}.original-lead{font-size:18px!important}.original-overlay video{width:52%}}
.original-related-stage{position:relative}
.original-related-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.original-related-grid{position:relative;display:grid;grid-template-columns:repeat(var(--related-count),minmax(0,1fr));gap:14px}
.original-related-card{display:flex;flex-direction:column;justify-content:flex-end;height:290px;padding:0 12px 18px;border-radius:8px;border:1px solid #ffffff12;background:radial-gradient(ellipse at 50% 38%,#9a9ea31f,#ffffff05 70%);text-align:center;transition:border-color var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out)}
.original-related-card:hover,.original-related-card:focus-visible{border-color:#ffffff33;background:radial-gradient(ellipse at 50% 38%,#b4b9bf33,#ffffff08 70%)}
.original-related-card h3{font-size:16px;line-height:1.3;margin:0 0 6px}
.original-related-card span{align-self:center;font-size:13px}
@media(max-width:760px){.original-related-grid{grid-template-columns:1fr}.original-related-card{height:250px}}
.original-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 10px}
.original-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 16px 22px;border:1px solid #ffffff17;border-radius:8px;background:linear-gradient(180deg,#161c26,#0d1118);transition:border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.original-card:hover{border-color:#7fc4ff55;box-shadow:0 0 0 1px #7fc4ff22,0 10px 30px #0006}
.original-card-slot{display:grid;place-items:center;width:96px;height:96px;margin-bottom:18px;border-radius:6px;border:1px solid #ffffff12;background:#2a3648 radial-gradient(#ffffff1c 1px,transparent 1.2px) 0 0/6px 6px;box-shadow:inset 0 0 22px #0007}
.pixel-icon{width:72px;height:72px;display:block;filter:drop-shadow(0 4px 0 #0006)}
.original-card:hover .pixel-icon{animation:pixel-hop .5s steps(2,jump-none) infinite alternate}
@keyframes pixel-hop{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.original-card-index{position:absolute;top:12px;left:14px;font-size:10px;letter-spacing:2px;color:#5f7186}
.original-card h3{font-size:18px;font-weight:500;letter-spacing:-.2px;margin:0 0 8px;color:#eef2f6}
.original-card p{font-size:14px!important;line-height:1.55!important;color:#9fb0c3!important;margin:0!important}
@media(max-width:760px){.original-cards{grid-template-columns:1fr}.original-card-index{display:none}}
@media(prefers-reduced-motion:reduce){.original-card:hover .pixel-icon{animation:none}}
body.explore-mode .topbar,body.explore-mode .console-footer{display:none}
body.explore-mode{overflow:hidden}
.explore-screen{position:fixed;inset:0;z-index:40;background:#0b0d12;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.explore-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.explore-canvas:active{cursor:grabbing}
.explore-hud{position:absolute;inset:0;pointer-events:none;font-family:Console,Arial,sans-serif}
.explore-hud a,.explore-hud button,.explore-stick{pointer-events:auto}
.explore-labels{position:absolute;inset:0;overflow:hidden}
.explore-label{position:absolute;left:0;top:0;opacity:0;text-align:center;white-space:nowrap;text-shadow:0 2px 0 #000,0 0 12px #000a;transition:opacity var(--t-base) var(--ease-out)}
.explore-label strong{display:block;font-size:15px;font-weight:700;letter-spacing:.5px;color:#fff;text-transform:uppercase}
.explore-label span{display:block;font-size:12px;color:#e6eef6;margin-top:2px}
.explore-area{position:absolute;right:5vw;bottom:13vh;text-align:right;opacity:0;transform:translateY(8px)}
.explore-screen.ready .explore-area{animation:area-title 5.5s .6s ease both}
.explore-area span{display:block;font-size:clamp(38px,6vw,72px);font-weight:900;font-style:italic;letter-spacing:-1px;color:#f4e3b8;-webkit-text-stroke:2px #1a1208;paint-order:stroke fill;text-shadow:0 4px 0 #1a1208}
.explore-area em{display:block;font-style:normal;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 #000;margin-top:4px}
@keyframes area-title{0%{opacity:0;transform:translateY(8px)}12%,78%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes area-title-still{0%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@media(prefers-reduced-motion:reduce){.explore-screen.ready .explore-area{animation:area-title-still 4.5s .3s both!important;animation-duration:4.5s!important;animation-delay:.3s!important}}   /* shown, held, gone: no movement */
.explore-radar{position:absolute;left:28px;bottom:28px;width:168px;height:168px;opacity:0;transition:opacity var(--t-slow) var(--ease-out)}
.explore-radar canvas{width:100%;height:100%;filter:drop-shadow(0 3px 6px #0008)}
.explore-prompt{position:absolute;left:50%;bottom:max(9vh,84px);transform:translate(-50%,10px);display:flex;align-items:center;gap:18px;padding:12px 14px 12px 20px;border-radius:8px;background:#0b0f16d9;border:1px solid #ffffff2a;box-shadow:0 10px 30px #0008;opacity:0;transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);pointer-events:none}
.explore-prompt.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.explore-prompt strong{display:block;font-size:16px;color:#fff}
.explore-prompt em{display:block;font-style:normal;font-size:13px;color:#a9bccf;margin-top:2px}
.explore-prompt button{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:6px;background:#ffffff14;border:1px solid #ffffff2a;color:#fff;font-size:14px}
.explore-prompt button:hover{background:#ffffff26}
.explore-help{position:absolute;left:212px;bottom:28px;max-width:calc(100% - 236px);margin:0;padding:8px 14px;border-radius:20px;background:#0b0f16a6;font-size:12px;line-height:1.6;color:#d2dbe5;opacity:0;transition:opacity var(--t-slow) var(--ease-out)}   /* bottom-left, beside the radar */
.explore-help span{color:#fff;font-weight:700}
.explore-exit{position:absolute;top:18px;right:22px;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:20px;background:#0b0f16a6;color:#fff;font-size:13px;opacity:0;transition:opacity var(--t-slow) var(--ease-out)}
.explore-exit:hover{background:#0b0f16e0}
.explore-screen.ready .explore-radar,.explore-screen.ready .explore-help,.explore-screen.ready .explore-exit{opacity:1}
.explore-stick{display:none;position:absolute;left:28px;bottom:28px;width:120px;height:120px;border-radius:50%;background:#0b0f1666;border:1px solid #ffffff33;touch-action:none}
.explore-stick span{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#ffffffcc;box-shadow:0 4px 12px #0006}
.explore-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;background:#0b0d12;color:#dce6f0;transition:opacity var(--t-slow) var(--ease-out);pointer-events:auto}
.explore-loading p{margin:0;font-size:14px;letter-spacing:3px;text-transform:uppercase}
.explore-loading i{display:block;width:220px;height:3px;background:#ffffff1a;overflow:hidden}
.explore-loading b{display:block;height:100%;background:#9fd6ff;transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out)}
.explore-screen.ready .explore-loading{opacity:0;pointer-events:none}
.explore-link{margin-top:18px}
@media(pointer:coarse){.explore-stick{display:block}.explore-radar{left:auto;right:16px;bottom:auto;top:64px;width:110px;height:110px}.explore-help{display:none}.explore-area{bottom:auto;top:22vh}}
@media(max-width:760px){.explore-prompt{bottom:170px;gap:12px;padding:10px 10px 10px 14px}.explore-area span{font-size:40px}}
.explore-screen.returning .explore-area{display:none}
.explore-sound{position:absolute;top:18px;right:118px;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;background:#0b0f16a6;color:#fff;font-size:13px;opacity:0;transition:opacity var(--t-slow) var(--ease-out)}
.explore-sound:hover{background:#0b0f16e0}
.explore-screen.ready .explore-sound{opacity:1}
@media(max-width:760px){.explore-sound{right:auto;left:16px;top:18px}}
/* ---- case study overlay over the block (light panel, world keeps running behind) */
.explore-case{position:absolute;inset:0;z-index:5;display:flex;justify-content:center;align-items:flex-start;padding:16px 2.4vw 0;background:transparent;transition:background var(--t-base) var(--ease-out)}
.explore-case.open{background:#05060a40}
.explore-case-panel{position:relative;width:100%;max-width:1900px;height:calc(100% - 54px);overflow:auto;overscroll-behavior:contain;border-radius:22px;background:#060709;color:#e7e9ec;border:1px solid #ffffff14;box-shadow:0 30px 80px #0009;transform:translateY(40px);opacity:0;transition:transform var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease-out);font-family:Inter,Console,Arial,sans-serif}
.explore-case.open .explore-case-panel{transform:none;opacity:1}
.explore-case-close{position:sticky;top:22px;float:right;margin:22px 26px -60px 0;z-index:2;width:44px;height:44px;border-radius:50%;font-size:30px;line-height:40px;color:#e7e9ec;background:#ffffff14;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.explore-case-close:hover,.explore-case-close:focus-visible{background:#ffffff2b}
.explore-case-body .breadcrumbs,.explore-case-body .back-link{display:none}
.explore-case-body .content-screen{max-width:1180px;padding:70px clamp(24px,7vw,110px) 70px}
/* the older (Figma-sourced) layout used by Commenting */
@media(max-width:760px){.explore-case{padding:10px 8px 0}.explore-case-panel{height:calc(100% - 40px);border-radius:16px}.explore-case-body .original-facts-stack,.explore-case-body .original-facts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.explore-case-panel{transition:none}}
/* window TV: the overlay turns into a dark screening room */
.explore-case.tv .explore-case-panel{background:#0b0d12;color:#e8edf3;max-width:1400px;height:auto;max-height:calc(100% - 54px);margin-top:3vh}
.explore-case.tv .explore-case-close{color:#e8edf3;background:#ffffff14}
.explore-case.tv .explore-case-close:hover{background:#ffffff26}
.explore-tv{padding:34px clamp(18px,4vw,60px) 40px}
.explore-tv-kicker{margin:0 0 18px;font-size:12px;letter-spacing:3px;color:#7fe3ff}
.explore-tv-frame{position:relative;aspect-ratio:16/9;width:100%;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #ffffff14,0 20px 60px #000a}
.explore-tv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.explore-jump{display:none;position:absolute;right:28px;bottom:150px;width:78px;height:78px;border-radius:50%;background:#0b0f1680;border:1px solid #ffffff40;color:#fff;font-size:14px;font-weight:700;letter-spacing:1px;touch-action:none;pointer-events:auto}
.explore-jump:active{background:#ffffff33}
@media(pointer:coarse){.explore-jump{display:block}}
/* arcade cabinet: Layoff Survivor plays in the dark overlay */
.explore-case.game .explore-case-panel{height:calc(100% - 54px);max-height:none;max-width:1500px;margin-top:0}
.explore-case.game .explore-case-body .play-screen{min-height:0;padding:28px clamp(16px,3vw,44px) 30px}
.explore-case.game .explore-case-body .play-heading{padding-right:56px}

/* About: the Experience section peeks above the fold with a lifted edge and a scroll cue */
.work-history{position:relative;border-top-color:#ffffff2e;background:linear-gradient(#ffffff0a,transparent 240px);border-radius:14px 14px 0 0;box-shadow:0 -18px 40px -24px #6fb6ff40}
.scroll-cue{position:absolute;right:0;top:-48px;display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #ffffff26;border-radius:20px;background:#0b0f16cc;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#bcd6ee;transition:opacity var(--t-base) var(--ease-out)}
.scroll-cue span{display:inline-block;font-size:14px;animation:cue-bob 1.6s ease-in-out infinite}
.scroll-cue:hover{color:#fff;border-color:#ffffff55}
.about-screen.cue-float .scroll-cue{position:fixed;top:auto;bottom:22px;right:5.2vw;z-index:5}
.about-screen.scrolled .scroll-cue{opacity:0;pointer-events:none}
@keyframes cue-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.scroll-cue span{animation:none}}
@media(max-width:760px){.scroll-cue{display:none}}
.about-screen.compact .screen-head{padding-top:18px}
.about-screen.compact .about-layout{padding-top:0;padding-bottom:14px}
.about-screen.compact .about-copy .eyebrow{margin-bottom:6px}
.about-screen.compact .about-copy h1{font-size:46px;margin:4px 0 12px}
.about-screen.compact .about-copy .lead{font-size:18px;line-height:1.45;margin:0 0 10px}
.about-screen.compact .about-copy p{font-size:15px;line-height:1.6;margin:0 0 10px}
.about-screen.compact .explore-link{margin-top:8px}
.about-screen.compact .social-links{margin-top:14px}

/* Home: every destination on one screen, four per row, rows scaled to fit the screen */
.home-browser .company-stage{height:auto;flex:1;min-height:calc(3 * clamp(150px,21vh,240px));max-width:1240px}
.home-browser .company-targets{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,1fr);padding:0 4vw}
.home-browser .company-target{padding-bottom:22px;grid-column:auto;width:auto;justify-self:stretch}
.home-browser .company-target .company-name{font-size:16px;text-align:center}
.home-browser .company-target.active:after{bottom:8px}
@media(max-width:760px){.home-browser .company-stage{min-height:calc(3 * 190px)}.home-browser .company-targets{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 3vw}.home-browser .company-target:last-child:nth-child(4n+1){grid-column:auto}.home-browser .company-target .company-name{font-size:13px}}
.tv-screen .tv-frame{position:relative;aspect-ratio:16/9;width:100%;max-width:1100px;margin:0 auto;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #ffffff14,0 20px 60px #000a}
.tv-screen .tv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Meta archetype cards: 3D icons drawn on one canvas behind the cards (pixel art only without WebGL) */
.original-cards{position:relative}
.original-cards-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.original-cards.has-3d .original-card-slot{width:100%;max-width:220px;height:132px;border:0;background:radial-gradient(ellipse at 50% 45%,#b9c2cc40,#ffffff08 72%);box-shadow:none}
.original-cards.has-3d .original-card-slot .pixel-icon{visibility:hidden}
.home-browser .company-target .company-index{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-top:6px;opacity:1;color:#e9edf1;text-shadow:0 1px 2px #0006}
.home-browser .company-target.active .company-index{color:#e8ffc5}

/* View switch: a pill at the top centre with a sliding knob (start / grid / block) */
.view-switch{position:fixed;left:50%;top:36px;z-index:60;display:none;gap:4px;padding:4px;border-radius:999px;background:#14171ccc;border:1px solid #ffffff2b;box-shadow:0 6px 20px #0006,inset 0 1px 0 #ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateX(-50%)}
body.start-mode .view-switch,body.browser-mode .view-switch,body.explore-mode .view-switch{display:flex}
body.explore-case-open .view-switch{display:none}
.view-switch-tab{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:32px;border-radius:999px;color:#c9d0d8;transition:color var(--t-base) var(--ease-out)}
.view-switch-tab svg{width:17px;height:17px;fill:currentColor}
.view-switch-tab svg .cut{fill:#14171c;stroke:#14171c;stroke-width:1.2}
.view-switch-tab svg .ring{fill:none;stroke:currentColor;stroke-width:1.5}
.view-switch-tab:hover{color:#fff}
.view-switch-tab[aria-current]{color:#14171c}
.view-switch-tab[aria-current] svg .cut{fill:#eef1f4;stroke:#eef1f4}
.view-switch-knob{position:absolute;top:4px;left:4px;width:44px;height:32px;border-radius:999px;background:linear-gradient(#ffffff,#d9dee4);box-shadow:0 2px 6px #0005;transition:transform var(--t-base) var(--ease-pop)}


.view-switch-tab:focus-visible{outline:2px solid #96dcff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.view-switch-knob{transition:none}}
body.browser-mode .topbar .edition{display:none}
@media(min-width:761px) and (max-height:800px){.view-switch{top:22px}}
@media(max-width:760px){.view-switch{top:22px}}
@media(max-width:1000px){body.start-mode .topbar .edition{display:none}}

/* The block keeps the same header (logo left, Sound right) floating over the 3D view */
body.explore-mode .topbar{display:flex;position:fixed;top:0;left:0;right:0;z-index:55;background:transparent;border-bottom:0;pointer-events:none;text-shadow:0 1px 3px #000c}
body.explore-mode .topbar .brand,body.explore-mode .topbar .sound-toggle{pointer-events:auto}
body.explore-mode .topbar .edition{display:none}
body.explore-mode .topbar .sound-toggle{color:#d5dce4}
body.explore-case-open .topbar{display:none!important}
@media(pointer:coarse){body.explore-mode .explore-radar{top:96px}}

/* Social pills (start tab) */
.start-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.social-pill{display:inline-flex;align-items:center;padding:12px 22px;border-radius:999px;font-size:15px;color:#d9dee4;background:linear-gradient(#26292e,#17191c);border:1px solid #ffffff1c;box-shadow:inset 0 1px 0 #ffffff14,0 6px 18px #0007;transition:color var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.social-pill:hover,.social-pill:focus-visible{color:#fff;border-color:#ffffff40;transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffff1f,0 0 22px #71c6ff2e,0 8px 20px #0008}
@media(max-width:760px){.social-pill{padding:10px 18px;font-size:14px}}

/* Case-study footer: every other part of the site, four cards per row */
.original-related.site-footer{max-width:1080px}
.site-footer .original-related-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.site-footer .original-related-card{height:240px}
.site-footer .original-related-card h3{font-size:17px;line-height:1.3;margin:0 0 6px}
.site-footer .original-related-card span{align-self:center;font-size:14px}
.site-footer h2.site-footer-more{margin-top:56px}
@media(max-width:900px){.site-footer .original-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.explore-case-body .site-footer .original-related-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

/* the About page is the start tab: no back header, so give the layout some air */
.about-screen.landing .about-layout{padding-top:36px}
.about-screen.landing.compact .about-layout{padding-top:12px}
.about-copy .start-social{margin-top:22px}
/* Outfit buttons stay tucked away until you hover the character (or tab into them); always shown on touch screens */
@media(hover:hover){
 .about-layout>div:first-child>.outfit-picker{opacity:0;transform:translateY(6px);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
 .about-layout>div:first-child:hover>.outfit-picker,.about-layout>div:first-child>.outfit-picker:focus-within{opacity:1;transform:none}
}
@media(hover:hover) and (prefers-reduced-motion:reduce){.about-layout>div:first-child>.outfit-picker{transition:none;transform:none}}
/* Time machine (preview controls, ?controls only) */
.env-controls{position:fixed;right:18px;bottom:18px;z-index:80;width:300px;padding:10px 12px 12px;border-radius:14px;background:#0b0f16e6;border:1px solid #ffffff24;box-shadow:0 12px 30px #0009;color:#dfe6ee;font-size:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.env-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#9fd6ff;padding:2px 0 8px}
.env-controls.collapsed .env-body{display:none}.env-controls.collapsed .env-toggle{padding-bottom:2px}
.env-row{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;margin-top:6px}
.env-row>span{color:#8a96a6;font-size:11px}
.env-seg{display:flex;flex-wrap:wrap;gap:4px}
.env-seg button{padding:4px 8px;border-radius:999px;border:1px solid #ffffff1f;color:#c9d2dc;font-size:11px}
.env-seg button:hover{border-color:#ffffff55;color:#fff}
.env-seg button[aria-checked=true]{background:#e8f4ff;border-color:#e8f4ff;color:#101820}
.env-now{margin:10px 0 0;color:#6f7b8a;font-size:11px}
/* "Cheat unlocked" banner */
.cheat-toast{position:fixed;left:50%;top:50%;z-index:120;display:grid;justify-items:center;gap:6px;padding:22px 40px 20px;border-radius:16px;background:#0b0f16ee;border:1px solid #9fd6ff55;box-shadow:0 0 0 1px #ffffff10,0 0 60px #4aa3ff55,0 20px 50px #000b;color:#fff;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-pop)}
.cheat-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cheat-toast strong{font-size:clamp(28px,4.5vw,48px);font-weight:900;font-style:italic;letter-spacing:-1px;text-transform:uppercase;color:#f4e3b8;-webkit-text-stroke:1.5px #1a1208;paint-order:stroke fill;text-shadow:0 4px 0 #1a1208,0 0 30px #ffd88a66}
.cheat-toast-kicker{font-size:14px;letter-spacing:6px;color:#ffd88a}
.cheat-toast-sub{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#9fd6ff}
@media(prefers-reduced-motion:reduce){.cheat-toast{transition:opacity var(--t-base) var(--ease-out)}}
/* About hero: PS2-style memory-tower backdrop behind the intro (fades into the Experience panel) */
.about-screen.landing{position:relative;overflow:hidden}
.about-hero-bg{position:absolute;left:0;top:0;width:100%;height:min(100svh,920px);display:block;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.about-screen.landing .about-layout,.about-screen.landing .work-history{position:relative;z-index:1}
/* One header everywhere: logo left, start/grid/block switch centred, Sound right; same height and colour on every page */
.topbar,.play-mode .topbar,body.browser-mode .topbar{height:84px;background:#0a0c10;border-bottom:1px solid #ffffff0f}
.topbar .edition{display:none}
.topbar .view-switch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;pointer-events:auto}
body.unpowered .view-switch{display:none}
.view-switch-knob{transform:none}
.view-switch[data-active=start] .view-switch-knob{transform:translateX(96px)}
.view-switch[data-active=block] .view-switch-knob{transform:translateX(48px)}
.view-switch-tab[aria-current],.view-switch[data-active=start] [data-view=start],.view-switch[data-active=grid] [data-view=grid],.view-switch[data-active=block] [data-view=block]{color:#14171c}
.view-switch[data-active=start] [data-view=start] svg .cut,.view-switch[data-active=grid] [data-view=grid] svg .cut,.view-switch[data-active=block] [data-view=block] svg .cut{fill:#eef1f4;stroke:#eef1f4}
body.explore-mode .topbar{background:transparent;border-bottom:0}
@media(max-width:760px){.topbar,.play-mode .topbar,body.browser-mode .topbar{height:72px;padding:0 5vw}.topbar .brand{font-size:30px}.topbar .brand span{top:-15px}.sound-toggle #sound-label{display:none}}
.tv-blurb{margin:10px 0 0;max-width:560px;font-size:15px;line-height:1.6;color:#a9b5c4}
.tv-blurb em{font-style:normal;color:#e7e9ec}
.explore-tv .tv-blurb{margin:0 0 18px}
.tv-screen .tv-blurb{margin-top:0}
/* House Hunters: blurb spans the full width of the video player */
.tv-screen .play-heading{max-width:1100px;margin-left:auto;margin-right:auto}
.tv-screen .play-heading>div{flex:1}
.tv-screen .tv-blurb,.explore-tv .tv-blurb{max-width:none}
/* Case-study clips (converted GIFs): autoplaying, looping, two per row */
.case-clips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:35px -80px 50px}
.case-clips.single{grid-template-columns:1fr}
.case-clip{margin:0}
.case-clips .case-clip:last-child:nth-child(odd){grid-column:1/-1}
.case-clip video{display:block;width:100%;aspect-ratio:1668/1080;object-fit:cover;border-radius:10px;background:#0d1118;border:1px solid #ffffff14}
.case-clip figcaption{font-size:13px;line-height:1.5;color:#8f9aab;margin-top:10px}
@media(max-width:900px){.case-clips{grid-template-columns:1fr;margin:25px 0 35px}}
/* clip title + description sit above the concept */
.case-clip figcaption{margin:0 0 12px;display:grid;gap:4px}
.case-clip-kicker{font-size:10px;letter-spacing:2.2px;color:#7fb8ff}
.case-clip figcaption strong{font-size:17px;font-weight:500;color:#eef2f6}
.case-clip figcaption span:last-child{font-size:13px;line-height:1.5;color:#8f9aab}
/* ---- Case-study showcase: the work first, minimal text ---- */
.showcase{max-width:1180px;margin:8px auto 0;padding:0 0 30px}
.showcase-meta{margin:0 0 14px;font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:#7fb8ff}
.showcase h1{margin:0;font-size:clamp(44px,6.4vw,92px);font-weight:500;letter-spacing:-2.5px;line-height:1;color:#f1f4f8}
.showcase-summary{max-width:760px;margin:22px 0 0;font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:#a9b5c4}
.showcase-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.showcase-links a{padding:9px 16px;border-radius:999px;background:#1a1f27;border:1px solid #ffffff1f;color:#e6ebf1;font-size:14px}
.showcase-links a:hover{border-color:#ffffff4d}
.showcase-hero{margin:36px 0 0;border-radius:18px;overflow:hidden;background:#0d1118;border:1px solid #ffffff14;box-shadow:0 30px 70px #0008}
.showcase-hero video,.showcase-hero img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;background:#0d1118}
.showcase-yt{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer}
.showcase-yt img{display:block;width:100%}
.showcase-yt span{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;display:grid;place-items:center;border-radius:50%;background:#ffffffe6;color:#101418;font-size:28px;box-shadow:0 10px 30px #0007;transition:transform var(--t-base) var(--ease-out)}
.showcase-yt:hover span{transform:scale(1.06)}
.showcase-hero iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.showcase-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin:34px 0 0;padding:26px 0;border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14}
.showcase-stats div{margin:0}
.showcase-stats dd{margin:0;font-size:clamp(34px,3.6vw,48px);font-weight:500;letter-spacing:-1px;color:#f1f4f8}
.showcase-stats dt{margin-top:6px;font-size:13px;line-height:1.45;color:#8f9aab}
.showcase-highlights{display:grid;gap:clamp(56px,8vw,110px);margin-top:clamp(56px,8vw,100px)}
.showcase-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:center}
.showcase-row:nth-child(even){grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.showcase-row:nth-child(even) .showcase-copy{order:2}
.showcase-num{display:block;margin-bottom:10px;font-size:11px;letter-spacing:2px;color:#7fb8ff}
.showcase-copy h2{margin:0 0 10px;font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.6px;color:#f1f4f8}
.showcase-copy p{margin:0;font-size:17px;line-height:1.55;color:#9fabbb}
.showcase-media{margin:0;border-radius:16px;overflow:hidden;background:#0d1118;border:1px solid #ffffff14;box-shadow:0 20px 50px #0007}
.showcase-media video,.showcase-media img{display:block;width:100%;height:auto}
/* strip: three square concepts side by side (Meta) */
.showcase-strip .showcase-highlights{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px}
.showcase-strip .showcase-row,.showcase-strip .showcase-row:nth-child(even){grid-template-columns:1fr;gap:16px;align-items:start}
.showcase-strip .showcase-row .showcase-copy{order:0}   /* title and line above each clip */
.showcase-strip .showcase-copy h2{font-size:22px}
.showcase-strip .showcase-copy p{font-size:15px}
/* the long-form write-up, folded away */
.full-story{max-width:1180px;margin:clamp(60px,8vw,110px) auto 0;border-top:1px solid #ffffff1f;border-bottom:1px solid #ffffff1f}
.full-story>summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 20px;padding:28px 0;cursor:pointer;list-style:none}
.full-story>summary::-webkit-details-marker{display:none}
.full-story-label{font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.5px;color:#f1f4f8}
.full-story-meta{grid-row:2;font-size:13px;color:#8f9aab}
.full-story-icon{grid-row:1/3;grid-column:2;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff2b;font-size:24px;color:#e6ebf1;transition:transform var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out)}
.full-story>summary:hover .full-story-icon{background:#ffffff12}
.full-story[open] .full-story-icon{transform:rotate(45deg)}
.full-story-body{padding-bottom:40px}
@media(max-width:860px){
 .showcase-row,.showcase-row:nth-child(even){grid-template-columns:1fr}
 .showcase-row .showcase-copy,.showcase-row:nth-child(even) .showcase-copy{order:0}   /* stacked: the title reads before its media */
 .showcase-strip .showcase-highlights{grid-template-columns:1fr}
}
/* showcase pages use the full content width; the folded write-up keeps its narrow reading column */
.case-original:has(.showcase){max-width:1320px}
.case-original:has(.showcase) .full-story-body{max-width:860px;margin:0 auto}
.showcase-hero .showcase-yt{aspect-ratio:16/9;height:auto;margin:0}
.showcase-hero .showcase-yt img{width:100%;height:100%;object-fit:cover}
/* the title already leads the showcase; don't repeat it inside the full story */
.full-story-body .original-head h1,.full-story-body .case-top h1{display:none}
.full-story-body .original-head{margin-top:24px}
.outfit-swatch.southwest{background:linear-gradient(135deg,#c43a2c 0 33%,#5a3f86 33% 66%,#ece7dc 66%)}
.outfit-options{flex-wrap:wrap;justify-content:center}
.outfit-button{white-space:nowrap}
.outfit-swatch.white{background:#f3f2ee;box-shadow:inset 0 0 0 1px #0004}
.read-mark{position:absolute;top:50%;left:0;width:1px;height:1px;pointer-events:none}
.outfit-swatch.webflow{background:#146ef5}.outfit-swatch.mardigras{background:linear-gradient(180deg,#5b2a86 0 33%,#1f7a3a 33% 66%,#e2b21c 66%)}.outfit-swatch.linen{background:linear-gradient(90deg,#e6dcc5 0 30%,#6f9fd6 30% 70%,#e6dcc5 70%)}.outfit-swatch.hivis{background:linear-gradient(180deg,#c8f03a 0 40%,#b9bec4 40% 52%,#c8f03a 52% 70%,#1d1f22 70%)}.outfit-swatch.bartender{background:linear-gradient(90deg,#c9242e 0 30%,#f3f2ee 30% 70%,#c9242e 70%);box-shadow:inset 0 3px 0 #15161a}
.outfit-swatch.meta{background:linear-gradient(90deg,#0064e0,#0082fb);box-shadow:inset 0 0 0 3px #f3f2ee,inset 0 0 0 4px #0003}
.outfit-swatch.macro{background:#19191c;box-shadow:inset 0 0 0 1px #fff4}
/* the block's clothing store */
.closet{padding:34px clamp(18px,4vw,60px) 40px}
.closet-kicker{margin:0 0 10px;font-size:12px;letter-spacing:3px;color:#ffb86b}
.closet h1{margin:0;font-size:clamp(28px,4vw,44px);letter-spacing:-.02em}
.closet-sub{margin:8px 0 24px;color:#a9b5c4;font-size:15px}
.closet-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.closet-item{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border:1px solid #ffffff1a;border-radius:12px;background:#ffffff0a;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background var(--t-micro) var(--ease-out),border-color var(--t-micro) var(--ease-out),transform var(--t-micro) var(--ease-out)}
.closet-item .outfit-swatch{width:44px;height:44px;margin:0 0 8px;border-radius:50%}
.closet-item strong{font-size:15px}
.closet-item span:last-child{font-size:13px;color:#a9b5c4}
button.closet-item:hover,button.closet-item:focus-visible{background:#ffffff16;border-color:#ffb86b;transform:translateY(-2px);outline:none}
.closet-item[aria-pressed="true"]{border-color:#ffb86b;background:#ffb86b14}
.closet-item[aria-pressed="true"] span:last-child{color:#ffb86b}
.closet-item.locked{cursor:default;opacity:.7}
.closet-item.locked strong{color:#a9b5c4}
.outfit-swatch.locked{display:grid;place-items:center;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff2a;color:#a9b5c4;font-weight:900;font-size:18px}
.outfit-swatch.race{background:linear-gradient(180deg,#1f5bd1 0 34%,#d8323a 34% 38%,#f4f3ee 38% 62%,#d8323a 62% 66%,#1f5bd1 66%)}
/* ---------------------------------------------------------------- the Bed-Stuy Grand Prix (race.js) */
body.race-mode{overflow:hidden}
body.race-mode .console-footer{display:none}
body.race-mode .topbar{display:flex;position:fixed;top:0;left:0;right:0;z-index:55;background:transparent;border-bottom:0;pointer-events:none;text-shadow:0 1px 3px #000c}
body.race-mode .topbar .brand,body.race-mode .topbar .sound-toggle,body.race-mode .view-switch{pointer-events:auto}
body.race-mode .topbar .edition{display:none}
body.race-mode .topbar .sound-toggle{color:#d5dce4}
body.race-mode .view-switch{display:flex}
.race-screen{position:fixed;inset:0;z-index:40;background:#0b0d12;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;font-family:"Arial Black",Impact,Arial,sans-serif}
.race-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.race-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;background:#0b0d12;color:#dce6f0;transition:opacity var(--t-slow) var(--ease-out);font-family:Console,Arial,sans-serif}
.race-loading p{margin:0;font-size:14px;letter-spacing:3px;text-transform:uppercase}
.race-loading i{display:block;width:220px;height:3px;background:#ffffff1a;overflow:hidden}
.race-loading b{display:block;height:100%;background:#ffd23a;transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out)}
.race-screen.ready .race-loading{opacity:0;pointer-events:none}
.race-hud{position:absolute;inset:0;pointer-events:none;color:#fff;text-shadow:0 2px 0 #000,0 0 12px #0008}
.race-lap,.race-clock{position:absolute;top:84px;display:flex;flex-direction:column;gap:2px}
.race-lap{left:24px}.race-clock{right:24px;text-align:right}
.race-lap span,.race-clock span{font-size:12px;letter-spacing:3px;color:#ffd23a}
.race-lap strong{font-size:44px;line-height:1}.race-lap em{font-style:normal;font-size:24px;color:#cfd6df}
.race-clock strong{font-size:28px;font-variant-numeric:tabular-nums}
.race-item{position:absolute;top:80px;left:50%;transform:translateX(-50%);width:96px;height:96px;border-radius:18px;background:#0b0d12a6;box-shadow:inset 0 0 0 3px #ffffff40,0 6px 20px #0006;pointer-events:auto;cursor:pointer}
.race-item canvas{width:100%;height:100%}
.race-item span{position:absolute;right:-8px;bottom:-8px;width:28px;height:28px;border-radius:50%;background:#2b66dc;display:grid;place-items:center;font-size:14px;opacity:0;transition:opacity var(--t-base) var(--ease-out)}
.race-item.full{box-shadow:inset 0 0 0 3px #ffd23a,0 0 24px #ffd23a66}.race-item.full span{opacity:1}
.race-place{position:absolute;right:28px;bottom:26px;display:flex;align-items:flex-start;line-height:.85}
.race-place strong{font-size:110px;color:#ffd23a;-webkit-text-stroke:3px #000}
.race-place em{font-style:normal;font-size:40px;margin-top:8px;color:#ffd23a;-webkit-text-stroke:2px #000}
.race-place[data-place="1"] strong,.race-place[data-place="1"] em{color:#ffe866}
.race-place[data-place="5"] strong,.race-place[data-place="6"] strong,.race-place[data-place="5"] em,.race-place[data-place="6"] em{color:#ff8a4c}
.race-map{position:absolute;left:20px;bottom:20px;width:170px;height:170px;border-radius:16px;background:#0b0d1299;box-shadow:inset 0 0 0 2px #ffffff26}
.race-map canvas{width:100%;height:100%}
.race-banner{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:clamp(40px,8vw,96px);letter-spacing:.02em;color:#fff;-webkit-text-stroke:3px #000;opacity:0;transform:scale(.6);transition:opacity var(--t-micro) var(--ease-out),transform var(--t-base) var(--ease-pop)}
.race-banner.show{opacity:1;transform:none}
.race-banner.count{color:#ffd23a;font-size:clamp(80px,14vw,170px)}
.race-banner.go{color:#5be37d;font-size:clamp(80px,14vw,170px)}
.race-banner.final{color:#ff5a5a}.race-banner.win{color:#ffe866}
.race-banner.title{font-size:clamp(28px,5vw,60px);top:24%}
.race-help{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:#0b0d12b3;font:500 12px Console,Arial,sans-serif;color:#cfd6df;text-shadow:none;white-space:nowrap}
.race-help span{color:#fff;font-weight:700}
.race-boostfx{position:absolute;inset:0;opacity:0;transition:opacity var(--t-base) var(--ease-out);background:radial-gradient(ellipse at center,transparent 45%,#ffd23a22 70%,#ff8a4c40 100%)}
.race-boostfx.on{opacity:1}
.race-hud.drift-blue .race-boostfx{opacity:.6;background:radial-gradient(ellipse at center,transparent 55%,#4fb4ff33 100%)}
.race-hud.drift-orange .race-boostfx{opacity:.8;background:radial-gradient(ellipse at center,transparent 55%,#ff8a4c44 100%)}
.race-touch{display:none}
.race-hud.touch .race-help{display:none}
.race-hud.touch .race-touch{display:block}
.race-touch button{position:absolute;bottom:22px;width:78px;height:78px;border-radius:50%;border:0;background:#ffffff26;color:#fff;font:900 22px Arial;pointer-events:auto;box-shadow:inset 0 0 0 2px #ffffff40}
.race-touch [data-k="l"]{left:20px}.race-touch [data-k="r"]{left:110px}
.race-touch [data-k="drift"]{right:110px;font-size:13px}.race-touch [data-k="item"]{right:20px;font-size:13px;background:#2b66dccc}
.race-hud.touch .race-map{bottom:auto;top:84px;left:auto;right:16px;width:120px;height:120px}
.race-hud.touch .race-clock{top:210px}
.race-hud.touch .race-place{bottom:118px}
.race-menu{position:absolute;inset:0;display:grid;place-items:center;background:#05070bb3;backdrop-filter:blur(4px);z-index:2;font-family:Console,Arial,sans-serif}
.race-menu[hidden]{display:none}
.race-card{width:min(560px,calc(100% - 32px));padding:28px;border-radius:18px;background:#0f1218;box-shadow:0 0 0 1px #ffffff1a,0 30px 80px #000c;color:#e8edf3}
.race-card.small{width:min(420px,calc(100% - 32px))}
.race-kicker{margin:0 0 8px;font-size:12px;letter-spacing:3px;color:#ffd23a}
.race-card h2{margin:0 0 18px;font-size:34px}
.race-results{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.race-results li{display:grid;grid-template-columns:14px 44px 1fr auto;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#ffffff0a}
.race-results li.you{background:#2b66dc33;box-shadow:inset 0 0 0 1px #2b66dc}
.race-results em{font-style:normal;font-variant-numeric:tabular-nums;color:#cfd6df}
.race-dot{width:12px;height:12px;border-radius:50%}
.race-best{margin:0 0 20px;font-size:13px;color:#a9b5c4}
.race-actions{display:flex;gap:10px;flex-wrap:wrap}
.console-button.ghost{background:transparent;box-shadow:inset 0 0 0 1px #ffffff40}
/* password-protected case study (vault.js) */
.vault{margin:28px 0 56px}
.vault-card{max-width:560px;margin:0 auto;padding:32px clamp(20px,4vw,40px);border-radius:18px;background:#0f1218;box-shadow:0 0 0 1px #ffffff1a,0 24px 60px #0008;text-align:center}
.vault-icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#ffffff0f;color:#9fd6ff;box-shadow:inset 0 0 0 1px #9fd6ff40;margin-bottom:14px}
.vault-kicker{margin:0 0 8px;font-size:12px;letter-spacing:3px;color:#9fd6ff}
.vault-card h2{margin:0 0 8px;font-size:clamp(22px,3vw,28px)}
.vault-card p{margin:0;color:#a9b5c4;line-height:1.55}
.vault-form{margin-top:22px}
.vault-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vault-row{display:flex;gap:10px;flex-wrap:wrap}
.vault-row input{flex:1 1 220px;min-width:0;padding:12px 14px;border-radius:10px;border:1px solid #ffffff2a;background:#0b0d12;color:#e8edf3;font:inherit;font-size:15px}
.vault-row input:focus{outline:none;border-color:#9fd6ff;box-shadow:0 0 0 3px #9fd6ff33}
.vault-row .console-button{flex:0 0 auto}
.vault-error{min-height:1.4em;margin-top:12px!important;color:#ff8a8a!important;font-size:14px}
/* About tab: one "Change outfit" button under the avatar (always there, always the same size, so the avatar never moves) */
.about-layout>div:first-child>.outfit-picker{opacity:1!important;transform:none!important;min-height:44px;margin-top:14px;display:flex;justify-content:center}
.outfit-change{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;font:inherit;font-size:14px;color:#d9dee4;background:linear-gradient(#26292e,#17191c);border:1px solid #ffffff1c;box-shadow:inset 0 1px 0 #ffffff14,0 6px 18px #0007;cursor:pointer;transition:color var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.outfit-change:hover,.outfit-change:focus-visible{color:#fff;border-color:#ffb86b;transform:translateY(-1px);outline:none}
.outfit-change .outfit-swatch{width:12px;height:12px;margin:0;border-radius:50%}
/* the wardrobe modal: the block's clothing-store panel, over any page */
.wardrobe-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:#05060a00;transition:background var(--t-base) var(--ease-out)}
.wardrobe-modal.open{background:#05060acc}
.wardrobe-panel{position:relative;width:min(980px,100%);max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain;border-radius:22px;background:#0b0d12;color:#e8edf3;border:1px solid #ffffff14;box-shadow:0 30px 80px #0009;transform:translateY(14px) scale(.98);opacity:0;transition:transform var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease-out)}
.wardrobe-modal.open .wardrobe-panel{transform:none;opacity:1}
.wardrobe-close{position:absolute;top:18px;right:18px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;font-size:30px;line-height:40px;color:#e7e9ec;background:#ffffff14;cursor:pointer}
.wardrobe-close:hover,.wardrobe-close:focus-visible{background:#ffffff2b;outline:none}
@media(prefers-reduced-motion:reduce){.wardrobe-modal,.wardrobe-panel{transition:none}}
.outfit-swatch.halloween{background:repeating-linear-gradient(0deg,#141416 0 3px,#ecebe4 3px 5px);box-shadow:inset 0 0 0 1px #fff3}
.outfit-swatch.christmas{background:linear-gradient(180deg,#c8232c 0 62%,#f4f1ea 62% 78%,#c8232c 78%)}
/* the power ring is the button: no separate "Power on AFK" button */
button.power-orbit{display:block;padding:0;margin-bottom:22px;background:transparent;font:inherit;color:inherit;cursor:pointer;transition:border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);animation:power-pulse 3.2s ease-in-out infinite}
button.power-orbit .power-symbol{transition:color var(--t-base) var(--ease-out),text-shadow var(--t-base) var(--ease-out)}
button.power-orbit:hover,button.power-orbit:focus-visible{outline:none;border-color:#9fd6ff66;box-shadow:0 0 90px #3a7bdc33,inset 0 0 70px #1d6fd133,0 0 0 1px #9fd6ff22;transform:rotate(-20deg) scale(1.04)}
button.power-orbit:hover .power-symbol,button.power-orbit:focus-visible .power-symbol{color:#d8f0ff;text-shadow:0 0 18px #8fd0ff,0 0 40px #4f9dff}
button.power-orbit:focus-visible{box-shadow:0 0 90px #3a7bdc33,inset 0 0 70px #1d6fd133,0 0 0 3px #9fd6ff99}
button.power-orbit:active{transform:rotate(-20deg) scale(.97)}
@keyframes power-pulse{0%,100%{box-shadow:0 0 80px #325cac12,inset 0 0 60px #0d477622}50%{box-shadow:0 0 110px #3a7bdc2e,inset 0 0 70px #1d6fd12a}}
@media(prefers-reduced-motion:reduce){button.power-orbit{animation:none}}
/* power screen motion: lights orbit the ring, ripples pulse off it, motes drift up, everything fades in */
button.power-orbit:before,button.power-orbit:after{content:none}
.power-spin{position:absolute;inset:-1px;border-radius:50%;animation:power-orbit-spin 16s linear infinite}
.power-spin.alt{animation-duration:27s;animation-direction:reverse}
.power-spin:before{content:'';position:absolute;width:12px;height:12px;top:17px;left:29px;border-radius:50%;background:#9edcff;box-shadow:0 0 10px #88cbff,0 0 30px #308bff,0 0 60px #398fff;animation:power-twinkle 2.6s ease-in-out infinite}
.power-spin.alt:before{width:5px;height:5px;top:auto;left:auto;bottom:24px;right:25px;animation-delay:-1.3s}
.power-ripple{position:absolute;inset:-1px;border-radius:50%;border:1px solid #8fd0ff55;opacity:0;animation:power-ripple 4.2s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
.power-ripple.late{animation-delay:2.1s}
.power-symbol{animation:power-symbol-in var(--t-reveal) var(--ease-out) both,power-breathe 3.2s ease-in-out .9s infinite}
.power-screen p{animation:power-fade-up var(--t-reveal) var(--ease-out) .45s both}
.power-screen .power-id{animation:power-fade-up var(--t-reveal) var(--ease-out) .8s both}
.power-motes{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.power-motes i{position:absolute;left:var(--x);bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;background:#bfe6ff;box-shadow:0 0 8px #6fb6ff;opacity:0;animation:power-mote var(--d) linear var(--t) infinite}
@keyframes power-orbit-spin{to{transform:rotate(360deg)}}
@keyframes power-twinkle{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:.65;filter:brightness(1.4)}}
@keyframes power-ripple{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.85);opacity:0}}
@keyframes power-symbol-in{from{opacity:0;transform:rotate(20deg) scale(.7);filter:blur(4px)}to{opacity:1;transform:rotate(20deg) scale(1);filter:blur(0)}}
@keyframes power-breathe{0%,100%{text-shadow:0 0 25px #66abff55}50%{text-shadow:0 0 34px #7fbcffaa,0 0 60px #3f8cff44}}
@keyframes power-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes power-mote{0%{transform:translateY(0);opacity:0}12%{opacity:.7}80%{opacity:.35}100%{transform:translateY(-78vh);opacity:0}}
@media(prefers-reduced-motion:reduce){.power-spin,.power-spin:before,.power-ripple,.power-symbol,.power-screen p,.power-screen .power-id,.power-motes i{animation:none}.power-ripple,.power-motes{display:none}}
button.power-orbit:hover,button.power-orbit:focus-visible,button.power-orbit:hover .power-symbol,button.power-orbit:focus-visible .power-symbol{animation:none}
/* Layoff Survivor on phones and tablets: the game shows at every width; touch screens get a joystick under it */
@media(max-width:760px){.game-desktop{display:block}.play-mode .game-cabinet,.play-mode .game-hud,.play-mode .game-controls,.play-mode .game-loadout{max-width:100%}}
.game-stick{display:none;position:relative;width:132px;height:132px;margin:18px auto 6px;border-radius:50%;background:radial-gradient(circle,#ffffff10,#0b0f1688 70%);border:1px solid #ffffff30;touch-action:none;user-select:none;-webkit-user-select:none}
.game-stick span{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#edbc6ee6;box-shadow:0 4px 14px #0007;pointer-events:none}
.touch-only{display:none}
@media(hover:none) and (pointer:coarse){.game-stick{display:block}.touch-only{display:inline}.keys-only{display:none}}
@media(max-width:760px){
 .game-overlay{padding:10px 14px}
 .game-overlay h2{font-size:26px;letter-spacing:-1px;margin:6px 0 10px;text-shadow:3px 3px #a04e39}
 .game-overlay>p:not(.eyebrow){font-size:11px;line-height:1.4;margin:0 0 8px}
 .game-overlay:has(#game-start)>p:not(.eyebrow),.game-enemy-caption{display:none}
 .upgrade-overlay{padding:8px}
 .upgrade-overlay>.eyebrow{display:none}
 .upgrade-overlay h2{font-size:15px;margin:0 0 8px}
 .upgrade-choices{gap:6px}
 .upgrade-choice{min-height:0;padding:8px;gap:4px}
 .upgrade-choice strong{font-size:12px}
 .upgrade-choice>span:not(.upgrade-slot),.upgrade-choice small{display:none}
 .upgrade-slot{font-size:8px;letter-spacing:1px}
 .game-overlay .eyebrow{font-size:9px}
 .game-overlay .console-button{padding:10px 18px;font-size:14px}
 .game-hud{flex-wrap:wrap;gap:6px 14px;font-size:10px}
}
/* ---------------------------------------------------------------- Layoff Survivor: arcade cabinet */
.play-screen .play-heading,.play-screen>.breadcrumbs{display:none}
.arcade-marquee{max-width:min(960px,max(620px,calc((100svh - 355px)*16/9)));margin:0 auto 12px;padding:12px 16px 10px;text-align:center;border-radius:14px 14px 6px 6px;background:radial-gradient(ellipse at 50% 0,#3a2a5a 0,#140f22 70%);box-shadow:inset 0 0 0 2px #2c2140,inset 0 0 30px #b04aff22,0 0 30px #b04aff18}
.arcade-marquee span{display:block;font:900 clamp(22px,4.4vw,40px)/1 "Arial Black",Impact,Arial,sans-serif;letter-spacing:.02em;color:#f9e6b7;text-shadow:3px 3px 0 #a04e39,0 0 18px #ffb35a66;animation:marquee-glow 3s ease-in-out infinite}
.arcade-marquee em{display:block;margin-top:6px;font:700 10px/1 "Courier New",ui-monospace,monospace;letter-spacing:.32em;color:#7fe3ff;font-style:normal}
@keyframes marquee-glow{0%,100%{text-shadow:3px 3px 0 #a04e39,0 0 14px #ffb35a44}50%{text-shadow:3px 3px 0 #a04e39,0 0 26px #ffb35a99}}
.game-cabinet{border:0;padding:12px;border-radius:12px;background:linear-gradient(#1c212b,#0b0e13);box-shadow:inset 0 0 0 2px #2b3342,inset 0 2px 0 #ffffff12,0 24px 60px #000b}
.game-viewport{border-radius:8px;box-shadow:inset 0 0 0 2px #000,0 0 0 1px #3a4456}
.game-viewport:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:8px;background:repeating-linear-gradient(0deg,#00000026 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,#0008 100%)}
.game-viewport .game-overlay{z-index:4}
/* the readouts, inside the screen: red labels, white numbers */
.arcade-hud,.arcade-hud-bottom{position:absolute;left:0;right:0;z-index:5;pointer-events:none;font:700 12px/1.15 "Courier New",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 6px #000,1px 1px 0 #000}
.arcade-hud{top:0;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;padding:7px 12px 14px;background:linear-gradient(#000000c8,#0000)}
.arcade-hud div{display:flex;flex-direction:column;gap:2px}
.arcade-hud .mid{align-items:center}.arcade-hud .end{align-items:flex-end}
.arcade-hud span,.arcade-hud-bottom .hp span{color:#ff3d3d}
.arcade-hud strong,.arcade-hud-bottom strong{color:#fff;font-weight:700}
.arcade-hud-bottom{bottom:0;display:flex;align-items:center;gap:12px;padding:14px 12px 7px;background:linear-gradient(#0000,#000000c8)}
.arcade-hud-bottom .hp{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.hp-bar{display:block;width:72px;height:7px;background:#2a1013;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #ff3d3d55;overflow:hidden}
.hp-bar b{display:block;height:100%;width:100%;transform:scaleX(var(--hp,1));transform-origin:0 50%;background:linear-gradient(90deg,#ff3d3d,#ffd23a 55%,#5be37d);transition:transform var(--t-base) var(--ease-out)}
.arcade-hud-bottom .boss-status{flex:1;min-width:0;max-width:none;margin:0;display:flex;align-items:center;gap:8px;font:inherit;color:#ffd23a;min-height:0;flex-wrap:nowrap}
.arcade-hud-bottom .boss-status>span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arcade-hud-bottom .boss-health-track{flex:1 1 60px;max-width:110px}
.hud-pause{pointer-events:auto;margin-left:auto;flex:0 0 auto;padding:4px 9px;border:1px solid #ffffff40;border-radius:4px;background:#000a;color:#fff;font:inherit;cursor:pointer}
.hud-pause:hover,.hud-pause:focus-visible{border-color:#ffd23a;color:#ffd23a;outline:none}
.game-cabinet .xp-track{margin-top:8px;border-radius:4px;border-top:0;box-shadow:inset 0 0 0 1px #32495d}
/* phones held upright: a tall screen as wide as it can be, the joystick under it */
@media(max-width:760px){
 .play-mode .play-screen{padding:10px 12px 16px}
 .arcade-marquee{max-width:100%;margin-bottom:8px;padding:9px 10px 8px}
 .arcade-marquee span{font-size:24px}
 .arcade-marquee em{font-size:8px;margin-top:4px}
 .game-cabinet{padding:8px}
 .arcade-hud,.arcade-hud-bottom{font-size:10px}
 .arcade-hud{padding:5px 8px 12px}.arcade-hud-bottom{padding:12px 8px 5px;gap:8px}
 .hp-bar{width:48px}
}
.game-cabinet.is-portrait .game-viewport{aspect-ratio:9/16;height:min(calc((100vw - 40px)*16/9),calc(100svh - 318px));width:auto;margin:0 auto}
.game-cabinet.is-portrait .game-overlay>p:not(.eyebrow),.game-cabinet.is-portrait .game-overlay:has(#game-start)>p:not(.eyebrow){display:block;font-size:12px;line-height:1.5;margin:0 0 14px}
.game-cabinet.is-portrait .game-overlay h2{font-size:30px;margin:8px 0 14px}
.game-cabinet.is-portrait .upgrade-overlay>.eyebrow{display:block}
.game-cabinet.is-portrait .upgrade-choices{grid-template-columns:1fr;gap:8px;width:100%}
.game-cabinet.is-portrait .upgrade-choice{padding:10px 12px;gap:4px}
.game-cabinet.is-portrait .upgrade-choice>span:not(.upgrade-slot){display:block;font-size:11px;line-height:1.4}
.game-cabinet.is-portrait .boss-status{flex-wrap:wrap}
.play-mode .game-stick{margin-top:12px}
/* phones on their side: the joystick floats over the bottom-left of the game */
@media(hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:520px){
 .game-stick{position:fixed;left:16px;bottom:16px;z-index:30;margin:0;opacity:.85}
 .arcade-marquee{display:none}
 .play-mode .game-viewport{height:calc(100svh - 70px);width:auto;aspect-ratio:16/9;margin:0 auto}
}
@media(max-width:760px){
 .arcade-marquee{padding:7px 10px 6px;margin-bottom:6px}
 .arcade-marquee span{font-size:21px}
 .play-mode .game-stick{width:112px;height:112px;margin:8px auto 4px}
 .play-mode .game-stick span{width:48px;height:48px;margin:-24px 0 0 -24px}
 .game-cabinet .xp-track{margin-top:6px}
}
/* ---------------------------------------------------------------- Layoff Survivor: the cabinet, seen head-on */
.cab{position:relative;width:min(1000px,100%);margin:0 auto;padding:0 18px 0;border-radius:18px 18px 6px 6px;background:linear-gradient(90deg,#0d0e10,#1b1d21 6%,#141518 50%,#1b1d21 94%,#0d0e10);box-shadow:inset 7px 0 0 #b8954a,inset -7px 0 0 #b8954a,inset 9px 0 0 #6b5626,inset -9px 0 0 #6b5626,0 30px 80px #000c}
.cab:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,#fff3 0,transparent 1.2%,transparent 98.8%,#fff3 100%)}
.cab-top{display:flex;align-items:center;gap:14px;padding:14px 4px 12px}
.cab-speaker{flex:0 0 auto;width:58px;height:34px;border-radius:50%;background:repeating-radial-gradient(circle,#0f2a26 0 2px,#071513 2px 4px);box-shadow:inset 0 0 0 3px #0a0b0c,inset 0 3px 8px #000,0 1px 0 #ffffff12}
.cab .arcade-marquee{flex:1;max-width:none;margin:0}
.cab-face{padding:14px;border-radius:10px;background:linear-gradient(#050607,#0a0c0e);box-shadow:inset 0 0 0 1px #3a3f46,inset 0 0 0 7px #050607,inset 0 0 0 8px #23272d,0 0 0 1px #000}
.cab .game-cabinet{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.cab .game-viewport{border-radius:22px/18px;box-shadow:0 0 0 3px #0b0c0d,0 0 0 5px #1f6f5f,0 0 28px #2fd0a02e}
.cab .game-viewport:after{border-radius:22px/18px}
.cab .game-viewport:before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:22px/18px;background:linear-gradient(165deg,#ffffff16 0,#ffffff06 28%,transparent 42%)}
.cab .game-viewport canvas{border-radius:22px/18px}
.cab .xp-track{margin:12px 6px 0;height:16px}
/* the control deck: angled toward you, joystick with a red ball, arcade buttons */
.cab-deck{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:14px -18px 0;padding:18px 34px 20px;background:linear-gradient(#2a2c31,#16171a 70%);box-shadow:inset 0 2px 0 #ffffff1c,inset 0 -6px 12px #0008,0 -1px 0 #000;clip-path:polygon(2% 0,98% 0,100% 100%,0 100%)}
.cab-buttons{display:grid;grid-template-columns:repeat(3,auto);gap:10px 12px;justify-content:center;align-items:center}
.cab-buttons i{display:block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 -3px 0 #0006,0 3px 0 #000a,0 0 0 3px #0d0e10}
.cab-buttons i.red{background:radial-gradient(circle at 40% 35%,#ff8fa0,#e0294a 55%,#8e1029)}
.cab-buttons i.blue{background:radial-gradient(circle at 40% 35%,#8fd0ff,#2a74e0 55%,#173d8c)}
.cab-start{grid-column:span 3;justify-self:center;padding:6px 14px;border:0;border-radius:999px;background:radial-gradient(circle at 50% 30%,#fff3b0,#f2c230 60%,#a77b10);color:#2a1d02;font:900 11px/1 "Arial Black",Arial,sans-serif;letter-spacing:.12em;box-shadow:inset 0 -3px 0 #0005,0 3px 0 #000a,0 0 0 3px #0d0e10;cursor:pointer}
.cab-start:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 #0005,0 1px 0 #000a,0 0 0 3px #0d0e10}
.cab-start:focus-visible{outline:2px solid #ffd23a;outline-offset:3px}
.cab .game-stick{display:block;width:120px;height:120px;margin:0;border:0;background:radial-gradient(circle,#2b2e33 0 30%,#141518 31% 60%,#0c0d0f 61%);box-shadow:inset 0 0 0 2px #3a3e45,inset 0 6px 14px #000c,0 2px 0 #ffffff10;cursor:grab}
.cab .game-stick:before{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#9aa3ad;box-shadow:0 0 0 3px #50575f}
.cab .game-stick span{width:54px;height:54px;margin:-27px 0 0 -27px;background:radial-gradient(circle at 38% 32%,#ffb3b3 0,#ff3b3b 30%,#c8102e 62%,#6e0616 100%);box-shadow:0 10px 14px #000a,inset 0 -4px 6px #0006;transition:transform .05s var(--ease-out)}
.cab-door{display:flex;justify-content:center;gap:40px;margin:0 -18px;padding:16px 0 18px;background:linear-gradient(#111214,#0b0c0d);box-shadow:inset 0 1px 0 #000}
.cab-door i{display:grid;place-items:end center;width:34px;height:52px;padding-bottom:6px;border-radius:5px;background:linear-gradient(#2a2c30,#1a1b1e);box-shadow:inset 0 0 0 2px #3a3d42,0 2px 0 #000;font:700 8px/1 "Courier New",monospace;color:#d9b45a;font-style:normal;position:relative}
.cab-door i:before{content:'';position:absolute;left:50%;top:9px;width:4px;height:20px;margin-left:-2px;border-radius:2px;background:#050506;box-shadow:0 0 0 2px #6b5626}
.play-mode .game-controls,.play-mode .game-loadout{margin-top:14px}
/* the deck's stick works with a mouse too; on keyboards the hint still says WASD */
@media(hover:none) and (pointer:coarse){.cab .game-stick{cursor:default}}
/* phones held upright: tall CRT, a slimmer cabinet so the deck stays on screen */
@media(max-width:760px){
 .cab{padding:0 10px;border-radius:14px 14px 4px 4px}
 .cab-top{gap:8px;padding:8px 2px 7px}
 .cab-speaker{width:34px;height:22px}
 .cab-face{padding:9px}
 .cab .xp-track{margin:8px 4px 0;height:14px}
 .cab-deck{margin:9px -10px 0;padding:10px 14px 12px;gap:8px}
 .cab-buttons{gap:7px 8px}
 .cab-buttons i{width:16px;height:16px}
 .cab .game-stick,.play-mode .game-stick{width:100px;height:100px;margin:0}
 .cab .game-stick span,.play-mode .game-stick span{width:44px;height:44px;margin:-22px 0 0 -22px}
 .cab-door{padding:8px 0 10px;gap:28px;margin:0 -10px}
 .cab-door i{width:24px;height:34px}
 .cab-door i:before{top:6px;height:12px}
}
.cab .game-cabinet.is-portrait .game-viewport{height:min(calc((100vw - 56px)*16/9),calc(100svh - 372px))}
@media(hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:520px){.cab-top,.cab-door{display:none}.cab .game-stick{position:relative;left:auto;bottom:auto;opacity:1}}
/* ---------------------------------------------------------------- the Blender cabinet (blender/build_cabinet.py)
   The render sits on top with a transparent screen opening; the live game sits underneath, lined up with it.
   --x/--y/--w/--h (screen), --sx/--sy/--sr (joystick), --bx/--by (START) are % of the image, set from cabinet.json. */
.cab{position:relative;aspect-ratio:var(--a,.91);width:min(100%,calc((100svh - 150px)*var(--a,.91)));margin:0 auto;padding:0;background:none;box-shadow:none;border-radius:0;opacity:0;transition:opacity var(--t-base) var(--ease-out)}
.cab.ready{opacity:1}
.cab:before{content:none}
.cab-art{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;user-select:none;-webkit-user-drag:none}
.cab .game-cabinet.cab-screen{position:absolute;z-index:1;left:calc((var(--x) - .6)*1%);top:calc((var(--y) - .5)*1%);width:calc((var(--w) + 1.2)*1%);height:calc((var(--h) + 1)*1%);padding:0;margin:0;background:#000;border:0;border-radius:0;box-shadow:none}
.cab .cab-screen .game-viewport,.cab .cab-screen.is-portrait .game-viewport{width:100%;height:100%;aspect-ratio:auto;margin:0;border-radius:0;box-shadow:none}
.cab .cab-screen .game-viewport:before,.cab .cab-screen .game-viewport:after{border-radius:0}
.cab .cab-screen .game-viewport canvas{width:100%;height:100%;object-fit:cover;border-radius:0}
.cab .cab-screen .arcade-hud{padding-top:max(7px,2.2%)}
/* the red ball on the rendered stick: drag it (thumb or mouse) */
.cab .game-stick.cab-stick{display:block;position:absolute;z-index:3;left:calc(var(--sx)*1%);top:calc(var(--sy)*1%);width:calc(var(--sr)*3.2%);height:auto;aspect-ratio:1;margin:0;transform:translate(-50%,-50%);border:0;border-radius:50%;background:none;box-shadow:none;opacity:1;cursor:grab;touch-action:none}
.cab .game-stick.cab-stick:before{content:none}
.cab .game-stick.cab-stick span{width:34%;height:34%;left:33%;top:33%;margin:0;background:radial-gradient(circle at 38% 32%,#ffc2c2 0,#ff3b3b 30%,#c8102e 62%,#6e0616 100%);box-shadow:0 8px 12px #0009,inset 0 -3px 5px #0006}
/* START: the rendered button is the art; this is the hit area (with a press flash) */
.cab .cab-start{position:absolute;z-index:3;left:calc(var(--bx)*1%);top:calc(var(--by)*1%);width:calc(var(--sr)*1.4%);aspect-ratio:1;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:transparent;color:transparent;font-size:0;box-shadow:none;cursor:pointer}
.cab .cab-start:active{background:#ffffff40;transform:translate(-50%,-50%)}
.cab .cab-start:focus-visible{outline:2px solid #ffd23a;outline-offset:2px}
.cab+.xp-track{width:min(100%,calc((100svh - 150px)*var(--a,.91)));margin:10px auto 0;border-radius:4px;box-shadow:inset 0 0 0 1px #32495d}
.play-mode .play-screen{padding-top:12px}
@media(max-width:760px){
 .cab{width:min(100%,calc((100svh - 128px)*var(--a,.47)))}
 .play-mode .play-screen{padding:8px 0 16px}
 .cab+.xp-track{width:calc(100% - 24px);margin-top:6px}
 .play-mode .game-controls,.play-mode .game-loadout{padding:0 12px}
}
/* keep the readouts clear of the CRT's rounded corners; pop-up screens (start, pause, upgrades) sit above them */
.cab .cab-screen .arcade-hud{padding:max(8px,3%) max(14px,5%) 14px}
.cab .cab-screen .arcade-hud-bottom{padding:14px max(14px,5%) max(8px,3%)}
.cab .cab-screen .game-viewport .game-overlay{z-index:6;padding:max(14px,6%) max(14px,6%)}
/* the CRT lip in the render overlaps the screen edges a little: keep text well inside */
.cab .cab-screen .arcade-hud{padding:max(10px,4.5%) max(16px,8%) 14px}
.cab .cab-screen .arcade-hud-bottom{padding:14px max(16px,8%) max(10px,4.5%)}
.cab .cab-screen .game-viewport .game-overlay{padding:max(18px,9%) max(18px,10%)}
.cab .cab-screen.is-portrait .game-overlay>p:not(.eyebrow){font-size:11px;line-height:1.45}
.cab .cab-screen.is-portrait .game-overlay h2{font-size:26px}
.cab .cab-screen .arcade-hud{padding:max(9px,3.5%) max(12px,5.5%) 14px}
.cab .cab-screen .arcade-hud-bottom{padding:14px max(12px,5.5%) max(9px,3.5%)}
.cab .cab-screen .game-viewport .game-overlay{padding:max(16px,7%) max(16px,7%)}
.cab .cab-screen.is-portrait .arcade-hud-bottom{flex-wrap:wrap;row-gap:4px}
.cab .cab-screen.is-portrait .arcade-hud-bottom .boss-status{order:3;flex:1 1 100%}
/* the time machine only belongs where the world it changes is on screen: About, the grid and the block */
body:not(.start-mode):not(.browser-mode):not(.explore-mode) .env-controls{display:none}
/* START: a lit arcade button with its lettering on it; it flashes until a run is going */
.cab .cab-start{width:calc(var(--sr)*1.5%);color:#2a1d02;font:900 clamp(7px,1.25vw,12px)/1 "Arial Black",Arial,sans-serif;letter-spacing:.04em;background:radial-gradient(circle at 50% 32%,#fffbe0 0,#ffe36a 32%,#f2c230 62%,#b98a12 100%);box-shadow:0 0 0 2px #1a1306,0 4px 0 #6b4f0a,0 6px 10px #0009,0 0 18px #ffd23a88;animation:cab-start-flash 1.1s steps(1,end) infinite}
.cab .cab-start:active{transform:translate(-50%,calc(-50% + 3px));box-shadow:0 0 0 2px #1a1306,0 1px 0 #6b4f0a,0 2px 6px #0009,0 0 26px #ffd23acc;background:radial-gradient(circle at 50% 32%,#fffbe0 0,#ffe36a 32%,#f2c230 62%,#b98a12 100%)}
.cab.cab-live .cab-start{animation:none}
@keyframes cab-start-flash{0%{filter:brightness(1.18);box-shadow:0 0 0 2px #1a1306,0 4px 0 #6b4f0a,0 6px 10px #0009,0 0 26px #ffd23acc}50%{filter:brightness(.62);box-shadow:0 0 0 2px #1a1306,0 4px 0 #6b4f0a,0 6px 10px #0009,0 0 0 #0000}}
@media(prefers-reduced-motion:reduce){.cab .cab-start{animation:none}}

/* the block's arcade: the game plays on the cabinet's own 3D screen (explore.js warps it there) and
   the cabinet's stick and START button are the controls, so the page drops its frame and Blender art */
.explore-case.cabinet{padding:0;background:transparent!important;pointer-events:none}
.explore-case.cabinet .explore-case-panel{position:absolute;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;transform:none;opacity:1}
.explore-case.cabinet .explore-case-close{pointer-events:auto;position:fixed;top:18px;right:18px;margin:0;float:none}
.explore-case.cabinet .play-screen{padding:0!important;min-height:0;animation:none}
.explore-case.cabinet .cab-art,.explore-case.cabinet .game-controls,.explore-case.cabinet #game-loadout{display:none}
.explore-case.cabinet .cab{position:static;width:auto;aspect-ratio:auto;opacity:1;transition:none}
.explore-case.cabinet .cab .game-cabinet.cab-screen,.explore-case.cabinet .cab .xp-track{position:fixed;left:0;top:0;margin:0;transform-origin:0 0;pointer-events:auto;border-radius:0}
.explore-case.cabinet .cab .game-stick.cab-stick,.explore-case.cabinet .cab .cab-start{position:fixed;left:var(--hx);top:var(--hy);width:var(--hs);height:var(--hs);margin:0;transform:translate(-50%,-50%);opacity:0;pointer-events:auto;animation:none;border-radius:50%;touch-action:none;cursor:pointer}
.explore-case.cabinet .cab .cab-start{left:var(--bx2);top:var(--by2)}
@media(pointer:coarse){.explore-case.cabinet .cab .game-stick.cab-stick,.explore-case.cabinet .cab .cab-start{opacity:1;background:none;border:2px solid #ffffff38;box-shadow:none;color:transparent}.explore-case.cabinet .cab .game-stick.cab-stick span{display:none}}
.at-cabinet .explore-radar,.at-cabinet .explore-prompt,.at-cabinet .explore-stick,.at-cabinet .explore-jump{display:none!important}
.at-cabinet .explore-help{left:50%;top:var(--help-y);bottom:auto;transform:translate(-50%,-50%);max-width:calc(100% - 32px);width:max-content;text-align:center}
.at-cabinet:not(.cab-placed) .explore-help{opacity:0;transition:none}

/* Layoff Survivor's menus (start, pause, enemy info, upgrades, game over) in the same arcade type as the in-game HUD:
   bold Courier caps, red labels, white values, gold highlights, on a dark CRT. Sizes follow the screen (cqw). */
.cab .cab-screen .game-viewport{container-type:inline-size}
.cab .cab-screen .game-viewport:has(>.game-overlay:not([hidden]):not(.upgrade-overlay)) :is(.arcade-hud,.arcade-hud-bottom){visibility:hidden}
.cab .cab-screen .game-overlay{font:700 max(7px,1.9cqw)/1.45 "Courier New",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 0 6px #000,1px 1px 0 #000;
 background:linear-gradient(#0000 50%,#00000026 50%) 0 0/100% 3px,radial-gradient(ellipse at 50% 45%,#0c1622f2,#020306fb 78%)}
.cab .cab-screen .game-overlay .eyebrow{margin:0;font:inherit;font-size:max(6px,1.6cqw);letter-spacing:.16em;color:#ff3d3d}
.cab .cab-screen .game-overlay h2{margin:.25em 0 .4em!important;font:700 max(14px,7.4cqw)/1 "Courier New",ui-monospace,monospace!important;letter-spacing:.02em!important;color:#ffd23a;text-shadow:.07em .07em 0 #ff3d3d,0 0 .5em #ffd23a40!important}
.cab .cab-screen .game-overlay>p:not(.eyebrow){margin:0 auto .8em!important;max-width:58ch;font-size:max(7px,1.8cqw)!important;line-height:1.5!important;color:#dfe7ee}
.cab .cab-screen .game-overlay :is(.console-button,.text-button){margin:.35em 0 0;padding:.6em 1.3em;border:1px solid #ffffff45;border-radius:4px;background:#000b;color:#fff;font:inherit;font-size:max(7px,1.8cqw);letter-spacing:.1em;text-transform:uppercase;text-shadow:none;box-shadow:none;cursor:pointer}
.cab .cab-screen .game-overlay .console-button{border-color:#ffd23a;color:#ffd23a}
.cab .cab-screen .game-overlay .console-button::before{content:'▶ ';animation:hud-blink 1s steps(1) infinite}
.cab .cab-screen .game-overlay .console-button span{margin-left:.5em;opacity:.7}
.cab .cab-screen .game-overlay :is(.console-button,.text-button):is(:hover,:focus-visible){background:#ffd23a;border-color:#ffd23a;color:#000;outline:none}
.cab .cab-screen .game-overlay .game-enemy-caption{display:block;margin-top:.9em;font-size:max(6px,1.4cqw);letter-spacing:.14em;color:#ffd23a}
@keyframes hud-blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.cab .cab-screen .game-overlay .console-button::before{animation:none}}

/* enemy info: the field guide, sized to fit the screen */
.cab .cab-screen .game-overlay.enemy-info-overlay{padding:max(7px,3.6cqw) max(12px,4.4cqw)!important;gap:max(6px,1.3cqw);text-align:left}
.cab .cab-screen .enemy-info-heading h2{font-size:max(11px,4.2cqw)!important;margin:.15em 0 0!important}
.cab .cab-screen .enemy-info-heading .text-button{margin:0;padding:.45em .9em;font-size:max(6px,1.5cqw)}
.cab .cab-screen .enemy-info-tabs{gap:.6em}
.cab .cab-screen .enemy-info-tabs button{padding:.45em .9em;border:1px solid #ffffff40;border-radius:4px;background:#000b;color:#cfd8e1;font:inherit;font-size:max(6px,1.5cqw);text-transform:uppercase}
.cab .cab-screen .enemy-info-tabs button[aria-pressed=true]{border-color:#ffd23a;color:#000;background:#ffd23a;text-shadow:none}
.cab .cab-screen .game-overlay .enemy-info-body{grid-template-columns:minmax(0,32%) 1fr;gap:max(6px,2cqw)}
.cab .cab-screen .enemy-info-list{gap:2px}
.cab .cab-screen .enemy-info-list button{gap:.7em;padding:.4em .5em;border:1px solid transparent;border-radius:3px;font:inherit;font-size:max(6px,1.6cqw);color:#b9c6d3;text-transform:uppercase}
.cab .cab-screen .enemy-info-list button span{color:#ff3d3d;font-size:inherit}
.cab .cab-screen .enemy-info-list button[aria-pressed=true]{border-color:#ffd23a80;background:#ffd23a14;color:#ffd23a}
.cab .cab-screen .enemy-info-detail{grid-template-columns:max(56px,13cqw) 1fr;gap:max(6px,1.8cqw);padding:2px}
.cab .cab-screen .game-viewport .enemy-info-detail canvas{width:max(56px,13cqw);height:max(56px,13cqw);background:radial-gradient(ellipse,#ffd23a1f,transparent 70%)}
.cab .cab-screen .enemy-info-number{color:#ffd23a;font-size:max(6px,1.4cqw)}
.cab .cab-screen .enemy-info-detail h3{margin:.25em 0 .5em;font-size:max(9px,2.8cqw);color:#fff}
.cab .cab-screen .enemy-info-detail h4{margin:1em 0 .35em;font-size:max(6px,1.4cqw);letter-spacing:.14em;color:#ff3d3d}
.cab .cab-screen .game-overlay .enemy-info-detail p,.cab .cab-screen .enemy-info-quips li{font-size:max(7px,1.6cqw);line-height:1.5;text-transform:none;letter-spacing:.02em;color:#dfe7ee}
.cab .cab-screen .enemy-info-quips li{padding:.4em 0;border-bottom-color:#ffffff14}
.cab .cab-screen .enemy-info-detail small{font-size:max(6px,1.4cqw);color:#ffd23a}

/* upgrades: the same boxes as the HUD's pause button */
.cab .cab-screen .upgrade-choice{border:1px solid #ffffff40;border-radius:4px;background:#000b;font:inherit;text-transform:none;color:#dfe7ee}
.cab .cab-screen .upgrade-choice strong{color:#fff;text-transform:uppercase}
.cab .cab-screen .upgrade-choice .upgrade-slot{color:#ff3d3d}
.cab .cab-screen .upgrade-choice small{color:#ffd23a}
.cab .cab-screen .upgrade-choice:is(:hover,:focus-visible){border-color:#ffd23a;background:#ffd23a14;outline:none}
/* portrait screens: the enemy list becomes a scrolling row above the details */
.cab .cab-screen.is-portrait .enemy-info-heading{align-items:flex-start}
.cab .cab-screen.is-portrait .enemy-info-tabs button{padding:.45em .6em;white-space:nowrap}
.cab .cab-screen.is-portrait .game-overlay .enemy-info-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:8px}
.cab .cab-screen.is-portrait .enemy-info-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:4px;padding-bottom:4px}
.cab .cab-screen.is-portrait .enemy-info-list button{flex:0 0 auto;white-space:nowrap}
.cab .cab-screen.is-portrait .enemy-info-detail{grid-template-columns:56px 1fr}
.cab .cab-screen.is-portrait .game-viewport .enemy-info-detail canvas{width:56px;height:56px}

/* the cabinet everywhere is the block's 3D model (arcade-cabinet.js): the game and upgrade bar are warped onto its
   screen, and the hotspots sit over its stick and START (with START's label printed on the button) */
.cab{--a:1.42;aspect-ratio:var(--a);width:min(100%,calc((100svh - 130px)*var(--a)))}
.cab-3d{-webkit-mask-image:linear-gradient(#0000,#000 5%,#000 95%,#0000);mask-image:linear-gradient(#0000,#000 5%,#000 95%,#0000)}
.cab-3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.cab .game-cabinet.cab-screen,.cab .xp-track{position:absolute;left:0;top:0;margin:0;transform-origin:0 0;border-radius:0;box-shadow:none;z-index:1}
.cab .game-stick.cab-stick,.cab .cab-start{position:absolute;left:var(--hx);top:var(--hy);width:var(--hs);height:var(--hs);margin:0;padding:0;transform:translate(-50%,-50%);border:0;border-radius:50%;background:none;box-shadow:none;animation:none;z-index:2;touch-action:none;cursor:pointer}
.cab .game-stick.cab-stick{opacity:0}
.cab .cab-start{left:var(--bx2);top:var(--by2);color:#3d2a00;font:900 max(7px,calc(var(--br)*.5))/1 "Arial Black",Arial,sans-serif;letter-spacing:0;text-shadow:0 1px 0 #fff7}
.explore-case.cabinet .cab .cab-start{opacity:1;background:none;border:0}
@media(pointer:coarse){.cab .game-stick.cab-stick,.explore-case.cabinet .cab .game-stick.cab-stick{opacity:1;border:2px solid #ffffff38}.cab .game-stick.cab-stick span{display:none}}
.cab.cab-flat{aspect-ratio:auto}.cab.cab-flat .game-cabinet.cab-screen,.cab.cab-flat .xp-track{position:relative;width:100%;transform:none}.cab.cab-flat .game-cabinet.cab-screen{aspect-ratio:16/9;height:auto}.cab.cab-flat .cab-stick,.cab.cab-flat .cab-start{display:none}
@media(max-width:760px) and (orientation:portrait){.cab{--a:.78}.cab-3d{-webkit-mask-image:linear-gradient(#0000,#000 9%,#000 91%,#0000);mask-image:linear-gradient(#0000,#000 9%,#000 91%,#0000)}}
.cab .cab-screen .game-viewport .game-overlay:not(.enemy-info-overlay){padding:max(6px,4.5%) max(8px,6%)}

/* About: more contrast. A darker, crisper backdrop; brighter intro text with a soft shadow off the towers */
.about-screen .about-hero-bg{filter:brightness(.68) contrast(1.2) saturate(1.1)}
.about-copy h1{color:#fff;text-shadow:0 2px 20px #000c}
.about-copy p{color:#dde6f0;text-shadow:0 1px 12px #000e,0 0 2px #0008}
.about-copy .eyebrow{color:#a9c6ea}

/* the CRT tube (crt.js) redraws the game canvas; the original stays underneath, invisible, for focus and input */
.game-viewport canvas.crt-source{opacity:0}
.game-viewport canvas.crt-screen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;image-rendering:auto}
.game-viewport:has(.crt-source:focus-visible) .crt-screen{outline:1px solid #98c8dc;outline-offset:-2px}

/* the close-up cabinet view leaves the stick and START out of shot: no START label, and on touch screens the stick
   sits in the bottom-left corner */
.cab.cab-controls-off .cab-start{display:none}
/* on the cabinet the game is exactly the size of the 3D screen: no width caps from the flat layout (a capped box warps
   narrower and skewed on wide windows) */
.play-mode .cab .game-cabinet.cab-screen,.cab .game-cabinet.cab-screen,.cab .xp-track{max-width:none;min-width:0}

/* level up: the run stays on screen, paused and dimmed under the choices (the HUD stays up too) */
.cab .cab-screen .game-overlay.upgrade-overlay{background:linear-gradient(#0000 50%,#00000026 50%) 0 0/100% 3px,radial-gradient(ellipse at 50% 48%,#04080e8c,#020306c4 82%)}
.cab .cab-screen .upgrade-overlay .upgrade-choice{background:#020407d9}

/* Layoff Survivor from the grid: the same round close button as the block's cabinet, top right, back to the grid */
.play-screen{position:relative}
.play-close{position:absolute;top:14px;right:max(16px,2.4vw);z-index:5;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:30px;line-height:1;color:#e7e9ec;background:#ffffff14;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.play-close:hover,.play-close:focus-visible{background:#ffffff2b}

/* read out to screen readers only (the game's status line) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Layoff Survivor: how to play, one line under the cabinet (same pill as the block's help) */
.cab-help{position:absolute;left:50%;top:calc(var(--under,100%) + 12px);transform:translateX(-50%);z-index:2;width:max-content;max-width:calc(100% - 32px);margin:0;padding:8px 14px;border-radius:20px;background:#0b0f16a6;font-size:12px;line-height:1.6;color:#d2dbe5;text-align:center}
.cab-help b{font-weight:400;color:#fff}
.explore-case .cab-help,.cab.cab-flat .cab-help{display:none}
/* concept clips (Commenting): a list, one concept per row (what it is on the left, the clip on the right);
   a single selected concept stays full width */
.case-clips:not(.single){display:flex;flex-direction:column;gap:0;margin:30px 0 50px;border-top:1px solid #ffffff14}
.case-clips:not(.single) .case-clip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:28px;align-items:center;padding:28px 0;border-bottom:1px solid #ffffff14}
.case-clips:not(.single) .case-clip figcaption{margin:0}
.case-clips:not(.single) .case-clip figcaption strong{font-size:20px}
@media(max-width:900px){.case-clips:not(.single){margin:25px 0 35px}.case-clips:not(.single) .case-clip{grid-template-columns:1fr;gap:14px;padding:22px 0}}
/* Layoff Survivor high scores (leaderboard.js): the top ten in two columns, and three-letter initials entry */
.hs-slot{width:min(100%,34em);margin:.2em auto .4em}
.hs-board{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:2.4em;row-gap:.15em;text-align:left;font-variant-numeric:tabular-nums}
.hs-board li{display:grid;grid-template-columns:3.2em 3em 1fr;align-items:baseline;gap:.4em;color:#dfe7ee}
.hs-board .hs-rank{color:#ff3d3d}
.hs-board .hs-ini{color:#fff;letter-spacing:.12em}
.hs-board .hs-cash{text-align:right;color:#ffd23a}
.hs-board li.top .hs-ini,.hs-board li.top .hs-cash{color:#ffd23a;text-shadow:0 0 10px #ffd23a88}
.hs-board li.mine{animation:hsBlink .9s steps(2,start) infinite}
@keyframes hsBlink{to{opacity:.25}}
.hs-empty{margin:.4em 0;color:#9fb0c2}
.hs-new{margin:0 0 .4em;color:#ffd23a;letter-spacing:.14em}
.hs-fail{margin:0 0 .6em!important;color:#ff9c8f!important}
.hs-entry{display:flex;justify-content:center;gap:.9em;outline:none;margin:.2em 0}
.hs-letterbox{display:flex;flex-direction:column;align-items:center;gap:.15em}
.hs-letter{display:block;width:1.5em;text-align:center;font-size:2.4em;line-height:1.15;color:#fff;border-bottom:.08em solid #ffffff40;cursor:pointer}
.hs-letterbox.on .hs-letter{color:#ffd23a;border-color:#ffd23a;text-shadow:0 0 12px #ffd23a99;animation:hsBlink .8s steps(2,start) infinite}
.hs-step{background:none;border:0;color:#7f93a8;font:inherit;font-size:.9em;padding:.1em .6em;cursor:pointer;line-height:1}
.hs-step:hover,.hs-step:focus-visible{color:#ffd23a;outline:none}
.hs-hint{margin:.3em 0 .2em!important;font-size:.8em!important;color:#8fa2b6!important}
.hs-overlay .hs-slot{margin:.4em auto .8em}
@media(prefers-reduced-motion:reduce){.hs-board li.mine,.hs-letterbox.on .hs-letter{animation:none}}
/* on the title screen and pause menu, High scores sits under the main button */
.game-overlay #game-scores{margin-top:.6em}

/* Layoff Survivor: the stage picker (cities you've visited, on the title screen) and the one-a-run rocket in the HUD */
.stage-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:.45em;margin:0 0 .6em}
.game-overlay .stage-pick .text-button{margin:0}
.game-overlay .stage-pick [aria-pressed=true]{border-color:#ffd23a;color:#ffd23a;background:#ffd23a1f}
.game-overlay .stage-pick [aria-pressed=true]::before{content:'▸ '}
.hud-rocket{pointer-events:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:3px 8px 3px 6px;border:1px solid #ff8a3aa6;border-radius:4px;background:#000a;color:#ffd23a;font:inherit;cursor:pointer;touch-action:manipulation}
.hud-rocket i{width:18px;height:8px;background:linear-gradient(90deg,#ffb347 0 3px,#3a4234 3px 5px,#5d6b4f 5px 14px,#d8433a 14px);clip-path:polygon(0 0,22% 20%,78% 20%,100% 50%,78% 80%,22% 80%,0 100%)}
.hud-rocket.used{border-color:#ffffff30;color:#ffffff66;cursor:default}.hud-rocket.used i{filter:grayscale(1);opacity:.35}
.hud-rocket:not(.used):is(:hover,:focus-visible){border-color:#ffd23a;outline:none;background:#ffd23a22}
@media(pointer:coarse){.hud-rocket{padding:7px 12px;font-size:1.15em}.hud-rocket i{width:24px;height:11px}}
/* the airport bus: "Where to?" on board (explore.js), and the flight between cities (flight.js) */
.bus-picker{pointer-events:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 32px));padding:20px;border-radius:12px;background:#0b0f16f0;border:1px solid #ffc21a55;box-shadow:0 0 50px #ffc21a22,0 20px 50px #000b;color:#fff;z-index:5}
.bus-picker[hidden]{display:none}
.bus-picker-kicker{margin:0 0 4px;font:700 12px/1 "Courier New",monospace;letter-spacing:.18em;color:#ffc21a;text-shadow:0 0 8px #ffc21a88}
.bus-picker h2{margin:0 0 14px;font-size:22px}
.bus-picker button{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:8px;padding:12px 14px;border-radius:8px;background:#ffffff10;border:1px solid #ffffff2a;color:#fff;font-size:15px;text-align:left;cursor:pointer}
.bus-picker button:hover,.bus-picker button:focus-visible{background:#ffc21a22;border-color:#ffc21a;outline:none}
.bus-picker button b{font:700 15px/1 "Courier New",monospace;letter-spacing:.1em;color:#ffc21a}
.bus-picker button.bus-stay{justify-content:center;background:none;color:#a9bccf;font-size:13px}
.flight-layer{position:fixed;inset:0;z-index:200;background:#000;opacity:0;transition:opacity var(--t-slow) var(--ease-out)}
.flight-layer.covered{opacity:1}
.flight-layer.leaving{opacity:0;transition:opacity var(--t-reveal) var(--ease-out)}
.flight-layer canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity var(--t-reveal) var(--ease-out)}
.flight-layer.flying canvas{opacity:1}
.flight-caption{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;opacity:0;transition:opacity var(--t-reveal) var(--ease-out) .4s}
.flight-layer.flying .flight-caption{opacity:1}
.flight-route{padding:.25em .6em;border-radius:6px;background:#0b0904e6;font:700 clamp(28px,6vw,52px)/1 "Courier New",monospace;letter-spacing:.14em;color:#ffc21a;text-shadow:0 0 14px #ffc21aaa;white-space:nowrap}
.flight-route i{font-style:normal}
.flight-cities{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px #000a}
@media (prefers-reduced-motion:reduce){.flight-layer,.flight-layer canvas,.flight-caption{transition:none}}
/* the first-visit tour (tour.js): letterbox bars, a GTA-style caption, Next / Skip in the bottom bar; the HUD waits */
.explore-screen.touring :is(.explore-radar,.explore-help,.explore-prompt,.explore-labels,.explore-area,.explore-stick,.explore-jump){display:none!important}
.tour{position:absolute;inset:0;pointer-events:none;z-index:5}
.tour-bar{position:absolute;left:0;right:0;height:11vh;min-height:64px;background:#000;transition:transform var(--t-reveal) var(--ease-out)}
.tour-bar.top{top:0;transform:translateY(-100%)}.tour-bar.bottom{bottom:0;transform:translateY(100%)}
.tour.on .tour-bar{transform:none}.tour.done .tour-bar.top{transform:translateY(-100%)}.tour.done .tour-bar.bottom{transform:translateY(100%)}
.tour-fade{position:absolute;inset:0;background:#000;opacity:0}.tour.done .tour-fade{transition:opacity var(--t-slow) var(--ease-out)}
.tour-caption{position:absolute;left:6vw;bottom:calc(max(11vh,64px) + 4vh);max-width:min(640px,88vw);opacity:0}
.tour-caption.in{animation:tour-in var(--t-reveal) .15s var(--ease-out) both}
.tour-caption strong{display:block;font-size:clamp(30px,4.6vw,56px);font-weight:900;font-style:italic;letter-spacing:-1px;line-height:1.05;color:#f4e3b8;-webkit-text-stroke:2px #1a1208;paint-order:stroke fill;text-shadow:0 4px 0 #1a1208}
.tour-caption p{margin:10px 0 0;font-size:17px;line-height:1.55;color:#fff;text-shadow:0 2px 0 #000,0 0 14px #000c}
.tour-controls{position:absolute;right:5vw;bottom:calc(max(11vh,64px) / 2);transform:translateY(50%);display:flex;align-items:center;gap:18px;pointer-events:auto;opacity:0;transition:opacity var(--t-slow) var(--ease-out) .5s}
.tour.on .tour-controls{opacity:1}.tour.done .tour-caption,.tour.done .tour-controls{opacity:0;transition:opacity var(--t-base) var(--ease-out)}
.tour-step{font-size:11px;letter-spacing:2px;color:#7f8894;font-variant-numeric:tabular-nums}
.tour-next{padding:8px 18px;border:1px solid #ffffff4d;border-radius:18px;font-size:13px;color:#fff;background:#ffffff12}.tour-next:hover{background:#ffffff26}
.tour-skip{font-size:13px;color:#aab3be;padding:8px 0}.tour-skip:hover{color:#fff}
.tour-skip kbd{font-family:inherit;font-size:10px;letter-spacing:1px;padding:2px 5px;margin-left:6px;border:1px solid #ffffff33;border-radius:3px;color:#8d96a2}
@keyframes tour-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:760px){.tour-caption{left:16px;right:16px}.tour-caption p{font-size:15px}.tour-controls{right:16px;gap:12px}.tour-step{display:none}}
/* ---- Arriving and leaving: nothing in the interface just pops ---- */
@keyframes rise-in{from{opacity:0;transform:translateY(12px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes dot-in{from{transform:scale(0)}}
@keyframes swap-in{from{opacity:0;transform:translateY(5px)}}
/* one screen to the next (app.js go()): the old screen fades back quickly, the new one comes up. Browsers without view
   transitions swap as before. */
::view-transition{pointer-events:none}   /* the new screen is usable at once, not when the fade ends */
::view-transition-old(root){animation:vt-out var(--t-micro) var(--ease-in) both}
::view-transition-new(root){animation:vt-in var(--t-slow) var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
/* panels shown and hidden with [hidden] (the game's overlays, the bus's departures board): they arrive rising, their
   contents a beat apart, and fade out as they go (display waits for the fade where the browser can do that) */
.game-overlay,.bus-picker{transition:opacity var(--t-micro) var(--ease-in),display var(--t-micro) allow-discrete}
.game-overlay[hidden],.bus-picker[hidden]{opacity:0;pointer-events:none}
.game-overlay:not([hidden]),.bus-picker:not([hidden]){animation:fade-in var(--t-base) var(--ease-out)}
.game-overlay>*,.bus-picker>*{animation:rise-in var(--t-slow) var(--ease-out) both}
:is(.game-overlay,.bus-picker)>:nth-child(2){animation-delay:.04s}:is(.game-overlay,.bus-picker)>:nth-child(3){animation-delay:.08s}
:is(.game-overlay,.bus-picker)>:nth-child(4){animation-delay:.12s}:is(.game-overlay,.bus-picker)>:nth-child(n+5){animation-delay:.16s}
/* the time machine: comes up when it's mounted, and folds rather than vanishing */
.env-controls{animation:rise-in var(--t-slow) var(--ease-out) .2s both}
.env-body{max-height:225px;overflow:hidden;transition:max-height var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease-out),visibility 0s}
.env-controls.collapsed .env-body{display:block;max-height:0;opacity:0;visibility:hidden;transition:max-height var(--t-base) var(--ease-in),opacity var(--t-micro) var(--ease-in),visibility 0s var(--t-base)}
.env-toggle span{display:inline-block;transition:transform var(--t-base) var(--ease-out)}.env-controls.collapsed .env-toggle span{transform:rotate(-90deg)}
/* the toast: in with a small overshoot, out quicker */
.cheat-toast{transition:opacity var(--t-micro) var(--ease-in),transform var(--t-base) var(--ease-in)}
.cheat-toast.show{transition:opacity var(--t-base) var(--ease-out),transform var(--t-slow) var(--ease-pop)}
.cheat-toast.show>*{animation:rise-in var(--t-slow) var(--ease-out) both}.cheat-toast.show>:nth-child(2){animation-delay:.05s}.cheat-toast.show>:nth-child(3){animation-delay:.1s}
/* a case study over the block: up slowly, away quickly */
.explore-case-panel{transition:transform var(--t-base) var(--ease-in),opacity var(--t-base) var(--ease-in)}
.explore-case.open .explore-case-panel{transition:transform var(--t-slow) var(--ease-out),opacity var(--t-base) var(--ease-out)}
/* the home grid: the icons come in as a wave from the top left (their labels here, the 3D icons in objects.js), the
   selection's dot pops, and the text under the grid changes with a quick rise */
.home-browser .company-target{animation:rise-in var(--t-slow) var(--ease-out) both;animation-delay:calc(var(--wave,0)*45ms + 60ms)}
.company-target.active:after{animation:dot-in var(--t-base) var(--ease-pop)}
.browser-detail .swap{animation:swap-in var(--t-base) var(--ease-out)}
.home-browser .browser-detail{animation:rise-in var(--t-slow) var(--ease-out) .32s both}
.from-boot .home-browser .company-target{animation-delay:calc(var(--wave,0)*45ms + 380ms)}.from-boot .home-browser .browser-detail{animation-delay:.64s}   /* after the boot's dissolve (app.js), not under it */
/* a case study's full story unfolding */
.full-story[open] .full-story-body{animation:rise-in var(--t-slow) var(--ease-out)}
/* the block's HUD coming back after the tour, and the boot handing over */
.explore-screen.toured :is(.explore-radar,.explore-help,.explore-stick,.explore-jump){animation:fade-in var(--t-reveal) var(--ease-out) both}