:root{--green:#22e584;--cyan:#06d6d6;--bg:#010403;--ink:#dffff1;--muted:#6f9488;--hud:rgba(2,7,6,.67)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.environment{position:fixed;inset:0;overflow:hidden;background:#010504}.cinema-scene{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 52% 46%,#0a1a14 0,#050d0a 34%,#010302 76%);perspective:1100px}.cinema-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,18,13,.05),rgba(0,0,0,.55) 75%),radial-gradient(circle at 52% 55%,transparent 0 35%,rgba(0,0,0,.6) 80%)}
.ceiling{position:absolute;left:-8%;right:-8%;top:-8%;height:23%;background:linear-gradient(180deg,#010302 0,#07100d 65%,#020504);transform:perspective(700px) rotateX(-18deg);transform-origin:top;box-shadow:0 28px 70px rgba(0,0,0,.8);z-index:9}.ceiling span{position:absolute;top:58%;height:3px;width:18%;background:linear-gradient(90deg,transparent,rgba(34,229,132,.52),transparent);filter:blur(.2px);box-shadow:0 0 18px rgba(34,229,132,.35)}.ceiling span:nth-child(1){left:18%}.ceiling span:nth-child(2){left:42%}.ceiling span:nth-child(3){right:15%}.left-wall,.right-wall{position:absolute;top:8%;bottom:0;width:13%;z-index:8;background:linear-gradient(90deg,#010302,#07100d 55%,#020504);box-shadow:20px 0 70px rgba(0,0,0,.8)}.left-wall{left:0;clip-path:polygon(0 0,100% 8%,84% 100%,0 100%)}.right-wall{right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 8%,84% 100%,0 100%)}.wall-strip{position:absolute;left:18%;top:12%;width:2px;height:56%;background:linear-gradient(transparent,var(--cyan),transparent);opacity:.32;box-shadow:0 0 18px rgba(6,214,214,.6)}.server-rack{position:absolute;left:18%;top:18%;width:58%;height:50%;padding:6px;background:#020504;border:1px solid rgba(255,255,255,.04);box-shadow:inset 0 0 30px #000}.server-rack i{display:block;height:11%;margin:5% 8%;background:linear-gradient(90deg,#08130f 0 72%,rgba(34,229,132,.42) 73% 75%,#07100d 76%);box-shadow:0 0 9px rgba(34,229,132,.08)}
.window-frame{position:absolute;left:11%;right:11%;top:10%;height:54%;z-index:2;border:12px solid #050a08;background:#010504;box-shadow:0 0 0 1px rgba(180,255,230,.03),inset 0 0 80px rgba(0,0,0,.8),0 25px 80px rgba(0,0,0,.55);overflow:hidden}.window-glass{position:absolute;inset:0;background:linear-gradient(180deg,#05151a 0,#04120f 50%,#02100b 100%);overflow:hidden}.sky-glow{position:absolute;inset:-20% -10% 0;background:radial-gradient(ellipse at 69% 42%,rgba(6,214,214,.22),transparent 21%),radial-gradient(ellipse at 34% 60%,rgba(34,229,132,.15),transparent 25%),linear-gradient(180deg,rgba(3,15,24,.9),rgba(1,8,6,.1));filter:blur(1px)}.city-layer{position:absolute;left:-3%;right:-3%;bottom:0;background-repeat:repeat-x;filter:drop-shadow(0 0 10px rgba(34,229,132,.04))}.city-layer.far{height:40%;opacity:.42;background-image:linear-gradient(90deg,transparent 0 3%,rgba(17,52,42,.8) 3% 5%,transparent 5% 8%,rgba(14,42,37,.7) 8% 11%,transparent 11% 15%);background-size:150px 100%;clip-path:polygon(0 72%,3% 72%,3% 48%,5% 48%,5% 65%,8% 65%,8% 38%,11% 38%,11% 74%,15% 74%,15% 50%,18% 50%,18% 69%,21% 69%,21% 35%,24% 35%,24% 70%,29% 70%,29% 45%,32% 45%,32% 76%,100% 76%,100% 100%,0 100%)}.city-layer.mid{height:49%;opacity:.76;background:repeating-linear-gradient(90deg,#06130f 0 4.5%,#0b2119 4.6% 6%,#04100d 6.1% 11%);clip-path:polygon(0 100%,0 80%,4% 80%,4% 38%,8% 38%,8% 72%,12% 72%,12% 52%,16% 52%,16% 74%,21% 74%,21% 25%,26% 25%,26% 67%,30% 67%,30% 45%,34% 45%,34% 77%,40% 77%,40% 58%,46% 58%,46% 73%,52% 73%,52% 40%,59% 40%,59% 78%,65% 78%,65% 53%,70% 53%,70% 69%,76% 69%,76% 34%,82% 34%,82% 74%,88% 74%,88% 48%,94% 48%,94% 76%,100% 76%,100% 100%)}.city-layer.mid:after,.city-layer.near:after{content:"";position:absolute;inset:8% 0;background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(34,229,132,.18) 19px 20px,transparent 21px 34px),repeating-linear-gradient(0deg,transparent 0 13px,rgba(6,214,214,.12) 14px 15px,transparent 16px 29px);mix-blend-mode:screen}.city-layer.near{height:30%;opacity:.94;background:linear-gradient(180deg,#06120e,#020705);clip-path:polygon(0 100%,0 65%,10% 65%,10% 18%,18% 18%,18% 72%,27% 72%,27% 39%,36% 39%,36% 78%,47% 78%,47% 22%,58% 22%,58% 73%,70% 73%,70% 37%,79% 37%,79% 69%,90% 69%,90% 12%,100% 12%,100% 100%)}.mega-tower{position:absolute;bottom:10%;background:linear-gradient(90deg,#03100d,#0a241c 50%,#04110e);box-shadow:0 0 40px rgba(6,214,214,.06)}.mega-tower:after{content:"";position:absolute;inset:7% 16%;background:repeating-linear-gradient(0deg,transparent 0 15px,rgba(34,229,132,.18) 16px 17px,transparent 18px 28px)}.tower-a{left:12%;width:8%;height:51%;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}.tower-b{right:17%;width:10%;height:64%;clip-path:polygon(35% 0,65% 0,84% 100%,16% 100%)}.tower-c{left:61%;width:5%;height:39%}.aerial-lane{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(6,214,214,.7),transparent);box-shadow:0 0 8px rgba(6,214,214,.6);opacity:.4;animation:traffic 9s linear infinite}.lane-a{width:18%;left:-20%;top:42%}.lane-b{width:10%;left:-15%;top:31%;animation-duration:14s;animation-delay:-5s}@keyframes traffic{to{transform:translateX(750%)}}.window-reflection{position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 43%,rgba(190,255,235,.025) 44% 48%,transparent 49% 100%);mix-blend-mode:screen}.mullion{position:absolute;z-index:3;background:linear-gradient(#07100d,#020504);box-shadow:0 0 20px rgba(0,0,0,.9)}.mullion.vertical{top:0;bottom:0;width:9px}.mullion.one{left:33%}.mullion.two{right:33%}.mullion.horizontal{left:0;right:0;top:62%;height:8px}
.volumetric-beam{position:absolute;z-index:5;top:9%;height:72%;width:22%;filter:blur(13px);opacity:.13;pointer-events:none;mix-blend-mode:screen}.beam-left{left:13%;background:linear-gradient(165deg,rgba(6,214,214,.7),transparent 62%);clip-path:polygon(0 0,42% 0,100% 100%,30% 100%)}.beam-right{right:11%;background:linear-gradient(195deg,rgba(34,229,132,.6),transparent 65%);clip-path:polygon(55% 0,100% 0,70% 100%,0 100%)}.floor-reflection{position:absolute;left:4%;right:4%;bottom:-5%;height:43%;background:radial-gradient(ellipse at 50% 10%,rgba(34,229,132,.12),transparent 48%),linear-gradient(180deg,rgba(4,16,12,.9),#010302);transform:perspective(650px) rotateX(66deg);transform-origin:bottom;filter:blur(.5px);z-index:1}
.workstation{position:absolute;left:50%;bottom:5%;width:min(78vw,1180px);height:min(42vw,560px);transform:translateX(-50%);z-index:10}.desk-backlight{position:absolute;left:12%;right:12%;bottom:22%;height:4%;background:rgba(34,229,132,.15);filter:blur(18px);box-shadow:0 0 45px rgba(34,229,132,.25)}.monitor{position:absolute;bottom:34%;width:28%;height:48%;background:linear-gradient(145deg,#111a17,#030706 24%,#010302);border:8px solid #070d0b;border-radius:3px;box-shadow:0 20px 35px rgba(0,0,0,.75),0 0 28px rgba(34,229,132,.05);transform-origin:bottom center}.monitor-left{left:9%;transform:perspective(760px) rotateY(10deg) rotateZ(-.4deg)}.monitor-center{left:36%;height:55%;bottom:36%;z-index:3}.monitor-right{right:8%;transform:perspective(760px) rotateY(-10deg) rotateZ(.4deg)}.screen{position:absolute;inset:7px;background:radial-gradient(circle at 40% 30%,rgba(34,229,132,.08),transparent 38%),linear-gradient(180deg,rgba(2,20,14,.97),rgba(0,8,6,.98));color:rgba(92,255,174,.65);font:clamp(7px,.72vw,11px)/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;padding:12px;white-space:pre;overflow:hidden;text-shadow:0 0 7px rgba(34,229,132,.65);box-shadow:inset 0 0 50px rgba(0,0,0,.65)}.screen:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);pointer-events:none}.screen:after{content:"";position:absolute;left:0;right:0;height:16%;top:-20%;background:linear-gradient(transparent,rgba(34,229,132,.07),transparent);animation:scan 6s linear infinite}@keyframes scan{to{top:115%}}.monitor-glow{position:absolute;left:6%;right:6%;bottom:-8%;height:16%;background:rgba(34,229,132,.2);filter:blur(24px);opacity:.33}.stand{position:absolute;left:45%;bottom:-25%;width:10%;height:25%;background:linear-gradient(90deg,#030706,#0b1411,#030706)}.stand:after{content:"";position:absolute;left:-55%;bottom:0;width:210%;height:10%;background:#080f0d}.desk-surface{position:absolute;left:4%;right:4%;bottom:23%;height:11%;background:linear-gradient(180deg,#101915 0 18%,#050a08 19% 56%,#010302 57%);clip-path:polygon(2% 0,98% 0,100% 100%,0 100%);box-shadow:0 -4px 18px rgba(34,229,132,.04),0 28px 50px rgba(0,0,0,.75)}.desk-leg{position:absolute;bottom:0;width:5%;height:25%;background:linear-gradient(90deg,#020403,#0b1210,#020403)}.desk-leg.left{left:14%;transform:skewX(-5deg)}.desk-leg.right{right:14%;transform:skewX(5deg)}.keyboard{position:absolute;left:39%;bottom:25%;width:22%;height:7%;transform:perspective(260px) rotateX(63deg);background:repeating-linear-gradient(90deg,#0a1511 0 4.4%,#16261f 4.7% 5.3%),repeating-linear-gradient(0deg,#0a1511 0 22%,#17261f 23% 27%);border:1px solid rgba(34,229,132,.08);box-shadow:0 0 17px rgba(34,229,132,.08)}.mouse{position:absolute;left:64%;bottom:28%;width:3.2%;height:5%;background:#08110e;border-radius:50% 50% 42% 42%;box-shadow:0 0 9px rgba(34,229,132,.08)}.coffee{position:absolute;right:16%;bottom:31%;width:32px;height:44px;background:linear-gradient(90deg,#050a08,#0d1713,#050a08);border:1px solid rgba(255,255,255,.08);border-radius:3px 3px 9px 9px;box-shadow:0 8px 15px rgba(0,0,0,.55)}.coffee:after{content:"";position:absolute;right:-12px;top:10px;width:15px;height:17px;border:2px solid rgba(255,255,255,.09);border-left:0;border-radius:0 10px 10px 0}.coffee-rim{position:absolute;left:3px;right:3px;top:3px;height:5px;border-radius:50%;background:#020302;box-shadow:0 0 6px rgba(34,229,132,.06)}.steam{position:absolute;right:17.1%;bottom:39%;width:18px;height:64px;border-left:2px solid rgba(210,255,240,.09);border-radius:50%;filter:blur(2px);animation:steam 5s ease-in-out infinite}.steam-two{right:16.5%;height:45px;animation-delay:-2.2s;opacity:.55}@keyframes steam{0%{transform:translate(0,10px) scaleX(.7);opacity:0}35%{opacity:.35}100%{transform:translate(11px,-25px) scaleX(1.8);opacity:0}}
.chair{position:absolute;left:50%;bottom:-6%;width:15%;height:36%;transform:translateX(-50%);z-index:14;filter:drop-shadow(0 18px 20px #000)}.chair-head{position:absolute;left:27%;right:27%;top:0;height:20%;background:#030504;border-radius:14px 14px 5px 5px}.chair-body{position:absolute;left:12%;right:12%;top:14%;height:62%;background:linear-gradient(90deg,#020403,#0b1210 48%,#020403);clip-path:polygon(15% 0,85% 0,100% 92%,76% 100%,24% 100%,0 92%)}.chair-base{position:absolute;left:44%;bottom:0;width:12%;height:24%;background:#020403}.cable{position:absolute;z-index:12;border:2px solid rgba(8,20,15,.8);border-top:0;border-left:0;border-radius:50%;filter:drop-shadow(0 2px 3px #000)}.cable-one{left:31%;bottom:7%;width:12%;height:12%;transform:rotate(15deg)}.cable-two{right:27%;bottom:8%;width:10%;height:9%;transform:rotate(-22deg)}.foreground-shadow{position:absolute;left:-6%;right:-6%;bottom:-9%;height:22%;background:#000;filter:blur(18px);z-index:15}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#matrixCanvas{z-index:4;opacity:.105;mix-blend-mode:screen;mask-image:linear-gradient(180deg,transparent 3%,#000 18%,#000 67%,transparent 91%)}#rainCanvas{z-index:18;opacity:.54;mix-blend-mode:screen;filter:blur(.15px)}.lightning{position:absolute;inset:0;z-index:17;background:radial-gradient(circle at 72% 20%,rgba(202,255,244,.95),rgba(167,240,255,.18) 19%,transparent 55%);opacity:0;pointer-events:none}.lightning.flash{animation:flash .48s ease-out}@keyframes flash{0%,100%{opacity:0}13%{opacity:.31}20%{opacity:.02}31%{opacity:.18}46%{opacity:0}}.haze{position:absolute;z-index:16;inset:0;background:radial-gradient(ellipse at 50% 52%,rgba(34,229,132,.035),transparent 42%),linear-gradient(180deg,rgba(4,29,22,.03),rgba(0,0,0,.18));filter:blur(10px);animation:haze 12s ease-in-out infinite alternate;pointer-events:none}@keyframes haze{to{transform:scale(1.025) translateY(-.8%)}}.lens-bloom{position:absolute;z-index:19;border-radius:50%;filter:blur(25px);opacity:.18;mix-blend-mode:screen;pointer-events:none}.bloom-a{right:14%;top:18%;width:70px;height:70px;background:rgba(6,214,214,.3)}.bloom-b{left:18%;top:43%;width:55px;height:55px;background:rgba(34,229,132,.25)}.film-grain{position:absolute;z-index:30;inset:-50%;width:200%;height:200%;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");animation:grain .22s steps(2) infinite}@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(2%,2%)}100%{transform:translate(-1%,1%)}}.letterbox{position:absolute;left:0;right:0;height:3.4%;background:#000;z-index:35;pointer-events:none}.letterbox.top{top:0}.letterbox.bottom{bottom:0}.vignette{position:absolute;z-index:34;inset:0;background:radial-gradient(ellipse at 50% 49%,transparent 31%,rgba(0,0,0,.22) 61%,rgba(0,0,0,.82) 100%);pointer-events:none}
.hud{position:fixed;z-index:60;inset:0;pointer-events:none;transition:opacity .5s}.hud.hidden{opacity:0}.topbar{pointer-events:auto;position:absolute;left:34px;right:34px;top:34px;display:flex;justify-content:space-between;align-items:center}.brand{font-weight:800;letter-spacing:.19em;font-size:12px;text-shadow:0 2px 12px #000}.brand span{color:var(--green)}.brand small{font-size:8px;color:var(--muted);margin-left:8px}.top-actions{display:flex;gap:7px}.iconbtn,.chip{border:1px solid rgba(178,255,228,.11);background:rgba(1,7,5,.52);color:rgba(233,255,246,.85);height:38px;padding:0 12px;backdrop-filter:blur(16px);cursor:pointer;font:700 10px system-ui;letter-spacing:.09em;transition:.2s}.iconbtn:hover,.chip.active{border-color:rgba(34,229,132,.55);color:var(--green);background:rgba(2,14,10,.72)}.panel{pointer-events:auto;position:absolute;left:34px;bottom:42px;width:min(350px,calc(100vw - 68px));background:linear-gradient(180deg,rgba(2,8,6,.73),rgba(1,5,4,.64));border:1px solid rgba(190,255,231,.1);box-shadow:0 18px 50px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.02);backdrop-filter:blur(22px);padding:18px 19px}.kicker{color:var(--green);font-size:8px;letter-spacing:.2em;font-weight:900}.panel h1{font-size:22px;font-weight:650;margin:6px 0 3px;letter-spacing:-.02em}.sub{color:var(--muted);font-size:10px;letter-spacing:.08em;margin-bottom:15px}.tabs{display:flex;gap:6px;margin-bottom:14px}.chip{height:29px}.tabpage{display:none}.tabpage.active{display:block}.row{display:grid;grid-template-columns:65px 1fr 34px;align-items:center;gap:9px;margin:10px 0;color:#a8c2b9;font-size:9px;letter-spacing:.06em}.row input{width:100%;accent-color:var(--green)}.row output{text-align:right;color:#8ef0bb;font-variant-numeric:tabular-nums}.timer-display{font:600 40px/1 ui-monospace,monospace;margin:9px 0 13px;letter-spacing:-.06em}.timer-actions{display:flex;gap:6px;flex-wrap:wrap}.hud-tip{color:#547367;font-size:8px;line-height:1.5;margin-top:13px}.status{position:absolute;right:34px;bottom:42px;color:rgba(210,255,237,.43);font:9px ui-monospace,monospace;letter-spacing:.13em;text-align:right;text-shadow:0 2px 10px #000}.sound-prompt{position:fixed;z-index:90;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(5,18,14,.58),rgba(0,0,0,.88));backdrop-filter:blur(13px)}.sound-prompt.off{display:none}.sound-card{width:min(470px,calc(100vw - 40px));padding:30px;border:1px solid rgba(34,229,132,.16);background:linear-gradient(180deg,rgba(5,14,11,.94),rgba(1,5,4,.95));box-shadow:0 30px 90px rgba(0,0,0,.6)}.sound-card h2{font-size:31px;font-weight:600;margin:9px 0}.sound-card p{color:#7fa195;line-height:1.65;font-size:13px}.enter{width:100%;padding:14px;background:#9af5c1;color:#031009;border:0;font-weight:900;letter-spacing:.08em;cursor:pointer}.sound-card .quiet{display:block;width:100%;margin-top:8px;padding:12px;background:transparent;border:1px solid rgba(255,255,255,.1);color:#c6ddd4;cursor:pointer;letter-spacing:.06em}@media(max-width:760px){.letterbox{height:2%}.left-wall,.right-wall{width:8%}.window-frame{left:5%;right:5%;top:11%;height:48%;border-width:7px}.workstation{width:110vw;height:62vw;bottom:6%}.monitor{border-width:5px}.chair{width:24%;height:30%}.topbar{left:15px;right:15px;top:16px}.top-actions .iconbtn:first-child{display:none}.panel{left:15px;bottom:20px;width:calc(100vw - 30px);padding:15px}.status{display:none}.panel h1{font-size:19px}.server-rack{display:none}.hud-tip{display:none}}@media(max-aspect-ratio:4/5){.window-frame{height:42%}.workstation{height:78vw;bottom:12%}.monitor{height:45%}.monitor-center{height:51%}.chair{bottom:-1%}}