:root{--wall: #1d2a4a;--desk: #7a4a2a;--ink: #1c1a22;--phosphor: #78ff96;--cream: #f1e6c8}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--wall);color:var(--cream);font-family:VT323,monospace;overflow:hidden}.lab{position:relative;width:100%;height:100%}.scene{position:absolute;inset:0}.scene canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.lab:not(.scene-live):not(.scene-failed) .crt-host{visibility:hidden}.crt-host{position:absolute;right:max(16px,3vw);top:max(16px,4vh);width:min(560px,92vw);aspect-ratio:4 / 3;cursor:pointer}.crt-host canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.crt-inner{position:relative;width:100%;height:100%;overflow:hidden;border-radius:14px;animation:crt-breathe 5.3s steps(40) infinite,crt-jitter 7.1s steps(1) infinite}.crt-inner>*{position:absolute;inset:0;pointer-events:none}.crt-inner .crt-mirror{position:relative}.crt-bloom{image-rendering:auto!important;filter:blur(7px) brightness(1.5);mix-blend-mode:screen;opacity:.55}.crt-roll{background:linear-gradient(to bottom,transparent 0%,rgba(150,255,180,.07) 46%,rgba(150,255,180,.13) 50%,transparent 58%);background-size:100% 260%;animation:crt-roll 6.5s linear infinite;mix-blend-mode:screen}.crt-noise{background:url(/ui/crt_noise.png);opacity:.35;mix-blend-mode:screen;animation:crt-grain .5s steps(6) infinite}.crt-glass{border-radius:14px;box-shadow:inset 0 0 44px 6px #0000008c,inset 0 0 6px 1px #000000d9;background:radial-gradient(ellipse 60% 40% at 28% 18%,rgba(255,255,255,.07),transparent 70%)}@keyframes crt-roll{0%{background-position:0 130%}to{background-position:0 -130%}}@keyframes crt-grain{0%{background-position:0 0}17%{background-position:-40px 20px}33%{background-position:30px -50px}50%{background-position:-70px -10px}67%{background-position:60px 40px}83%{background-position:-20px 70px}to{background-position:10px -30px}}@keyframes crt-breathe{0%,to{filter:brightness(1)}23%{filter:brightness(1.04)}24%{filter:brightness(.93)}25%{filter:brightness(1.02)}61%{filter:brightness(.97)}78%{filter:brightness(1.05)}}@keyframes crt-jitter{0%,91%,93%,to{transform:none}92%{transform:translate(2px) skew(-.4deg)}}@media(prefers-reduced-motion:reduce){.crt-inner,.crt-roll,.crt-noise{animation:none}}.crt-back{position:fixed;inset:0;background:#06160c;opacity:0;pointer-events:none}.lab.scene-live .crt-host{position:fixed;left:0;top:0;right:auto;width:640px;height:480px;aspect-ratio:auto;transform-origin:0 0;opacity:0;pointer-events:none;will-change:transform,opacity}.lab.scene-live.view-crt .crt-host{pointer-events:auto}.key{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:96px;height:36px;padding:2px 18px 6px;border-style:solid;border-width:0 17px;border-image:url(/ui/key.png) 0 34 fill / 0 17px stretch;background:none;color:var(--ink);font:22px/1 VT323,monospace;letter-spacing:1px;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none}.key:active:not(:disabled){border-image-source:url(/ui/key_down.png);padding-top:8px}.key:disabled,.key-dead{opacity:.55;cursor:default}.key-red{border-image-source:url(/ui/key_red.png);color:#fff4e8}.key-red:active:not(:disabled){border-image-source:url(/ui/key_red_down.png)}.key:focus-visible{outline:2px solid var(--phosphor);outline-offset:3px}.key-mark{min-width:64px}.key-mark img{height:18px;width:auto;display:block}.desk-keys{position:absolute;left:50%;bottom:max(16px,3vh);transform:translate(-50%);display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;max-width:calc(100vw - 32px)}.link-keys{display:flex;gap:8px}.line{position:absolute;left:50%;bottom:calc(max(16px,3vh) + 52px);transform:translate(-50%);margin:0;padding:4px 12px;color:var(--phosphor);font-size:22px;text-shadow:0 0 6px rgba(120,255,150,.6);max-width:calc(100vw - 32px);text-align:center}.box-wrap{position:fixed;inset:0;pointer-events:none}.box-stage{position:fixed;left:0;top:0;width:1536px;height:874px;transform-origin:0 0;opacity:0;will-change:transform,opacity}.box-canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.box-open .box-stage{pointer-events:auto;cursor:pointer}.box-foot{position:fixed;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transition:opacity .35s ease}.box-open .box-foot{opacity:1;pointer-events:auto}.box-info{margin:0;max-width:100%;color:var(--cream);font-size:22px;text-align:center;text-shadow:0 2px 0 #1c1a22,0 0 8px #1c1a22}.box-keys{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.lab.box-on .desk-keys,.lab.box-on .line{opacity:0;pointer-events:none}@media(max-width:640px){.crt-host{right:16px;left:16px;width:auto}.key{font-size:20px;min-width:80px}}.hints{position:absolute;inset:0;pointer-events:none}.hint-arrow{position:absolute;width:auto;height:110px;image-rendering:pixelated}.hint-note{position:absolute;width:200px;height:205px;background-size:100% 100%;image-rendering:pixelated;pointer-events:auto}.hint-paper{position:absolute;width:172px;height:160px;padding:26px 8px 10px 14px;transform-origin:50% 50%}.hint-paper p{margin:0;color:#1c1a22;font:16px/1.35 Permanent Marker,cursive;white-space:normal}.hint-x{float:right;width:26px;height:26px;margin:-6px -4px 6px 10px;padding:0;border:0;background:none;color:#1c1a22;font:22px/26px Permanent Marker,cursive;cursor:pointer}.hint-x:focus-visible{outline:2px solid #1c1a22}
