[hidden]{display:none!important}
:root{--bg:#030504;--ph:#5dff93;--ph2:#3fb86a;--ph-dim:#1d5a34;--ink:#cfe9d6;--mute:#6f8a7a;--sodium:#ffb347;--red:#ff3b30;--panel:#07100bcc;
  --mono:"IBM Plex Mono","JetBrains Mono","Fira Code",ui-monospace,"Courier New",monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:13px/1.4 var(--mono);overflow:hidden;-webkit-font-smoothing:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#stage,#stage canvas,.css3d{position:fixed;inset:0}
#stage canvas{image-rendering:pixelated;cursor:grab;touch-action:none}
.css3d{pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ph);transition:opacity .9s .2s,visibility 0s 1.2s;letter-spacing:.08em}
.loader.gone{opacity:0;visibility:hidden}
.ld-dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.ld-bar{width:160px;height:2px;background:#0f2416;overflow:hidden}.ld-bar i{display:block;height:100%;width:30%;background:var(--ph);box-shadow:0 0 8px var(--ph);animation:ld 1.1s ease-in-out infinite alternate}
@keyframes ld{to{transform:translateX(240%)}}
.ld-sub{color:var(--mute);font-size:11px}

/* ---------- overlay chrome ---------- */
.brand{position:fixed;z-index:20;left:max(22px,env(safe-area-inset-left));top:max(20px,env(safe-area-inset-top));text-decoration:none;color:var(--ph);display:flex;flex-direction:column;gap:2px;text-shadow:0 0 8px #5dff9355;opacity:0;transition:opacity 1s .6s}
.brand b{font-size:14px;letter-spacing:.22em}.brand span{color:var(--mute);font-size:10px;letter-spacing:.12em}
.chip{position:fixed;z-index:20;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border:1px solid #2c5a3b;background:#050c08e6;color:var(--ph);font-size:11px;letter-spacing:.14em;box-shadow:inset 0 0 0 1px #00000088,0 0 18px #00000099;opacity:0;transition:opacity 1s .6s,border-color .2s,background .2s}
.chip:hover{border-color:var(--ph);background:#0b1a10f2}
.chip:focus-visible,.jack:focus-visible{outline:1px solid var(--ph);outline-offset:3px}
.snd{right:max(20px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top))}
.snd[aria-pressed=true] i{animation:blink 1s steps(2) infinite}
.back{z-index:60;left:50%;transform:translateX(-50%);bottom:max(20px,env(safe-area-inset-bottom))}
body.ready .brand,body.ready .chip{opacity:1}
.hint{position:fixed;z-index:20;left:max(22px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));margin:0;color:var(--mute);font-size:10px;letter-spacing:.1em;opacity:0;transition:opacity 1s 1.2s}
body.ready .hint{opacity:.8}body.focused .hint,body.inspecting .hint{opacity:0}
kbd{font:inherit;border:1px solid #2a3d31;padding:0 4px;color:var(--ink)}
.jack{position:fixed;left:0;top:0;z-index:15;display:flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid #5dff9399;background:#030a06ee;color:var(--ph);font-size:11px;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 0 22px #5dff9322,inset 0 0 12px #5dff9311;white-space:nowrap}
.jack i{width:6px;height:6px;background:var(--ph);box-shadow:0 0 8px var(--ph);animation:blink 1.1s steps(2) infinite}
.jack::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#5dff9399}
.tip{position:fixed;left:0;top:0;z-index:25;pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:7px 11px;border-left:2px solid var(--ph);background:#020604ee;color:var(--ink);font-size:11px;letter-spacing:.06em;box-shadow:0 6px 24px #000c;max-width:280px}
.tip b{color:var(--ph);font-weight:600;letter-spacing:.14em}.tip span{color:#9fb8a7}
.tip span::after{content:"_";animation:blink 1s steps(2) infinite;color:var(--ph)}
@keyframes blink{50%{opacity:0}}
.nojs{position:fixed;inset:0;display:grid;place-items:center;color:var(--ph)}
body.no-webgl::before{content:"no webgl down here. try another machine.";position:fixed;inset:0;display:grid;place-items:center;color:var(--ph)}

/* ---------- the CRT desktop (800x600, scaled onto the glass) ---------- */
.desk{width:800px;height:600px;position:relative;overflow:hidden;background:#010402;color:var(--ph);font:15px/1.45 var(--mono);border-radius:26px/22px;visibility:hidden;filter:saturate(.9) contrast(1.06)}
.desk::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#0b2a17 0%,#030b06 60%,#000 100%);opacity:0;transition:opacity .25s}
.desk.on::before{opacity:1;animation:warm .6s ease-out}
@keyframes warm{0%{opacity:0;transform:scaleY(.004) scaleX(.6)}35%{opacity:1;transform:scaleY(.004) scaleX(1)}100%{transform:none}}
.glass{position:absolute;inset:0;pointer-events:none;z-index:50;border-radius:inherit;
  background:repeating-linear-gradient(0deg,#0006 0 1px,transparent 1px 3px),radial-gradient(ellipse at 30% 20%,#ffffff10,transparent 40%),radial-gradient(ellipse at 50% 50%,transparent 55%,#000c 100%);
  box-shadow:inset 0 0 60px #000,inset 0 0 6px #5dff9333;animation:flick 4s infinite}
@keyframes flick{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.86}49%{opacity:1}82%{opacity:.95}}
.desk *{text-shadow:0 0 6px #5dff9366}

.boot{position:absolute;inset:0;z-index:10;padding:46px 54px;font-size:17px;white-space:pre;transition:opacity .45s}
.boot.fade{opacity:0;filter:blur(2px)}
.bl{min-height:1.45em}.bl.dim{color:var(--ph2)}.bl.hot{color:#b8ffcf}.bl.final{color:var(--sodium);text-shadow:0 0 10px #ffb34788;margin-top:6px;letter-spacing:.2em}
.bl.final::after,.bl:last-child:not(.final):not(.relay)::after{content:"█";animation:blink .8s steps(2) infinite;margin-left:4px}
.bar{color:var(--ph2)}.tail.ok{color:var(--ph)}.tail.masked{color:var(--red);text-shadow:0 0 6px #ff3b3088}
body.focused .back.chip{opacity:1}
@media (max-width:700px){.hint{display:none}.brand span{display:none}.desk.portal~.back{z-index:60}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}

/* An idle desktop on the physical CRT; the playable view stays crisp. */
.idle{position:absolute;inset:0;background:#09120d;color:#87b69a;display:flex;flex-direction:column}
.idle-bar{padding:10px 22px;border-bottom:1px solid #4d6f58;background:#26382d;color:#d5e3d8}
.idle-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.idle-body b{font-size:38px;letter-spacing:.16em}.idle-body small{margin-top:32px;letter-spacing:.2em}
.inside{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;padding:18px 22px 0;background:#070a08;opacity:0;transform:scale(.965);transition:opacity .32s,transform .48s;}
.inside.visible{opacity:1;transform:none}
.bezel{position:relative;flex:1;min-height:0;border:8px solid #202822;border-radius:16px;overflow:hidden;box-shadow:0 0 0 2px #39443b,0 0 60px #000,inset 0 0 25px #000}
#osframe{display:block;width:100%;height:100%;border:0;background:#111}
.crtfx{position:absolute;inset:0;pointer-events:none;border-radius:8px;box-shadow:inset 0 0 20px #0006;background:repeating-linear-gradient(0deg,#00000009 0 1px,transparent 1px 4px)}
.bezel-label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;color:#91a395;font-size:10px;letter-spacing:.1em}
.led{display:inline-block;width:5px;height:5px;background:#70e598;box-shadow:0 0 6px #70e598;margin-right:10px;border-radius:50%}
.lo{padding:8px 12px;color:#bdd3c3}.lo:hover{color:#fff}.lo:focus-visible,.mjack:focus-visible{outline:2px solid #5dff93;outline-offset:2px}
.mjack{position:fixed;bottom:24px;right:24px;z-index:30;padding:14px 22px;border:1px solid #5dff9370;background:#06100bea;color:var(--ph);letter-spacing:.12em;text-transform:uppercase}
body.focused .mjack,body.in-game .brand,body.in-game .chip,body.in-game .jack,body.in-game .hint{visibility:hidden}
body.no-webgl::before{content:'The room needs WebGL. You can still play OnionOS below.';padding:30px;text-align:center}
body.no-webgl .mjack{visibility:visible}body.in-game .mjack{visibility:hidden}
@media(max-width:700px){.inside{padding:0}.bezel{border:0;border-radius:0}.crtfx{display:none}.bezel-label{min-height:38px;padding:0 8px;padding-bottom:env(safe-area-inset-bottom)}.bezel-label>span{font-size:8px;letter-spacing:0}.mjack{bottom:max(24px,env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}.jack{display:none}.brand b{font-size:12px;letter-spacing:.12em}.snd{font-size:9px;padding:0 8px}.back{bottom:80px}}
@media(prefers-reduced-motion:reduce){.inside{transition:none;transform:none}}