.crt-room{background:radial-gradient(120% 90% at 50% 28%,#29241f 0%,#16120f 55%,#0a0807 100%);place-items:center;display:grid;position:fixed;inset:0;overflow:hidden}.crt-monitor{--case-pad:clamp(18px, 3.2vmin, 34px);--case-r:clamp(10px, 1.8vmin, 20px);border-radius:var(--case-r);width:fit-content;padding:var(--case-pad);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E"),linear-gradient(160deg,#5d564f 0%,#3a3530 26%,#211d1a 70%,#14110f 100%);background-size:160px 160px,100% 100%;flex-direction:column;display:flex;position:relative;box-shadow:inset 0 2px 3px #fff3,inset 2px 0 3px #ffffff0d,inset -3px -5px 14px #0000008c,0 60px 120px -30px #000000e6,0 24px 48px -18px #000000b3}.crt-monitor:after{content:"";filter:blur(6px);background:radial-gradient(50% 50%,#000000a6,#0000 70%);border-radius:50%;height:clamp(14px,4vmin,40px);margin-top:clamp(6px,1.6vmin,16px);position:absolute;top:100%;left:5%;right:5%}.crt-bezel{background:linear-gradient(200deg,#2a2622 0%,#0c0b0a 70%);border-radius:clamp(8px,1.3vmin,14px);flex:none;padding:clamp(10px,1.8vmin,18px);display:flex;box-shadow:inset 0 4px 10px #000000d9,inset 0 -1px 1px #ffffff14,0 1px #ffffff0f}.crt-screen{aspect-ratio:4/3;background:#0a0908;border-radius:clamp(10px,1.8vmin,18px);flex:none;height:min(66vh,66vw);position:relative;overflow:hidden;box-shadow:inset 0 0 clamp(30px,6vmin,70px) #000000a6,inset 0 0 8px #000000e6}.crt-screen:before{content:"NO SIGNAL";font-family:var(--mono);letter-spacing:.3em;color:#ffffff38;place-items:center;font-size:13px;animation:1.6s steps(2,jump-none) infinite crt-nosignal;display:grid;position:absolute;inset:0}.crt-glass{z-index:70;pointer-events:none;border-radius:inherit;position:absolute;inset:0}.crt-glass,.crt-glass:before,.crt-glass:after{border-radius:inherit}.crt-glass{background:radial-gradient(circle,#0000002e .5px,#0000 .9px) 0 0/3px 3px,repeating-linear-gradient(0deg,#0000003d 0 1px,#0000 1px 3px) 0 0/100% 100%;animation:4s linear infinite crt-flicker}.crt-glass:before{content:"";background:radial-gradient(#0000 56%,#00000038 84%,#0000008c 100%);position:absolute;inset:0}.crt-glass:after{content:"";background:radial-gradient(90% 55% at 16% 6%,#ffffff17,#0000 55%),radial-gradient(40% 26% at 82% 92%,#ffbe5a0d,#0000 70%);position:absolute;inset:0}.crt-screen:has(.gt-window[data-screen=mac]) .crt-glass{opacity:.45}.crt-screen:has(.gt-window[data-screen=mac]){box-shadow:inset 0 0 clamp(12px,2.2vmin,26px) #00000059,inset 0 0 5px #00000080}.crt-room.crt-warp .crt-screen{filter:url(#crt-barrel)}.crt-filters{pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}.crt-room .crt-glass:after{background:radial-gradient(130% 90% at 50% -14%,#ffffff29,#0000 60%),radial-gradient(85% 45% at 50% 118%,#ffffff12,#0000 58%),radial-gradient(90% 55% at 16% 6%,#ffffff1a,#0000 55%),radial-gradient(40% 26% at 82% 92%,#ffbe5a0d,#0000 70%)}.crt-room .crt-glass:before{background:radial-gradient(120% 120%,#0000 48%,#0000002e 74%,#0000006b 90%,#000000b3 100%)}.crt-room .crt-screen:after{content:"";z-index:72;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;background:linear-gradient(#0000 0%,#ffffff0a 44%,#ffffff13 50%,#ffffff0a 56%,#0000 100%);height:38%;animation:6.5s linear infinite crt-roll;position:absolute;top:0;left:0;right:0}.crt-room .gt-window{zoom:1.25;width:auto!important;height:auto!important;position:absolute!important;inset:0!important;transform:none!important}.crt-deck{margin:clamp(12px, 2.2vmin, 24px) calc(-1 * var(--case-pad)) calc(-1 * var(--case-pad));padding:clamp(10px, 1.8vmin, 16px) var(--case-pad) var(--case-pad);border-radius:0 0 var(--case-r) var(--case-r);background:linear-gradient(#0003 0%,#0000000a 45%,#0000 100%);border-top:1px solid #000000b8;flex:none;align-items:center;gap:clamp(10px,1.8vmin,18px);display:flex;box-shadow:inset 0 1px #ffffff14}.crt-brandplate{font-family:var(--mono);letter-spacing:.22em;white-space:nowrap;align-items:baseline;gap:10px;font-size:9px;display:flex}.crt-brand{color:#ffffff38;text-shadow:0 -1px #000c}.crt-model{color:#ffffff1a;text-shadow:0 -1px #000c}.crt-floppy{background:linear-gradient(#000 0%,#060505 60%,#0e0d0c 100%);border-radius:clamp(3px,.5vmin,5px);flex:0 clamp(150px,24vmin,280px);height:clamp(10px,1.6vmin,14px);margin-left:auto;position:relative;box-shadow:inset 0 2px 4px #000000f2,inset 0 -1px 1px #ffffff0f,0 1px 1px #ffffff17,0 -1px 1px #000c,0 0 0 1px #0006}.crt-floppy:before{content:"";background:linear-gradient(#000 0%,#060505 60%,#0e0d0c 100%);border-radius:clamp(3px,.5vmin,5px);width:24%;height:230%;position:absolute;top:50%;right:-2%;transform:translateY(-48%);box-shadow:inset 0 2px 5px #000000f2,inset 0 -1px 1px #ffffff0f,0 1px 1px #ffffff17,0 -1px 1px #000c,0 0 0 1px #0006}.crt-led{background:var(--crt-accent);width:7px;height:7px;box-shadow:0 0 6px color-mix(in srgb, var(--crt-accent) 90%, transparent), 0 0 14px color-mix(in srgb, var(--crt-accent) 45%, transparent);border-radius:50%;flex:none;transition:background .25s,box-shadow .25s;animation:5s ease-in-out infinite crt-led}.crt-room:has(.gt-window[data-screen=mac]) .crt-led{opacity:.55;box-shadow:0 0 4px color-mix(in srgb, var(--crt-accent) 35%, transparent);animation:none}.crt-room{--crt-accent:#ff7a17}.crt-room:has(.gt-window[data-screen=amber]){--crt-accent:#ff9d00}.crt-room:has(.gt-window[data-screen=green]){--crt-accent:#39d98a}.crt-room:has(.gt-window[data-screen=cyberdeck]){--crt-accent:#ff2fb0}.crt-room:has(.gt-window[data-screen=mac]){--crt-accent:#e8e8e8}.crt-knob{aspect-ratio:1;cursor:pointer;background:radial-gradient(circle at 32% 28%,#4c453f 0%,#221e1a 55%,#15120f 100%);border:none;border-radius:50%;flex:none;place-items:center;width:clamp(32px,5vmin,48px);padding:0;display:grid;position:relative;box-shadow:inset 0 1px 1px #ffffff40,inset 0 -2px 4px #000000b3,0 2px 6px #0009}.crt-knob:before{content:"";background:repeating-conic-gradient(#ffffff17 0deg 5deg,#0000 5deg 12deg);border-radius:50%;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#0000 62%,#000 66% 92%,#0000 96%);mask-image:radial-gradient(circle,#0000 62%,#000 66% 92%,#0000 96%)}.crt-knob-dot{aspect-ratio:1;background:var(--crt-accent);width:36%;box-shadow:0 0 8px var(--crt-accent), 0 0 20px color-mix(in srgb, var(--crt-accent) 55%, transparent), inset 0 -1px 2px #00000059;border-radius:50%;transition:background .25s,box-shadow .25s}.crt-knob:hover .crt-knob-dot{box-shadow:0 0 10px var(--crt-accent), 0 0 26px color-mix(in srgb, var(--crt-accent) 70%, transparent), inset 0 -1px 2px #00000059}.crt-knob:active{transform:translateY(1px)}.crt-knob:focus-visible{outline:2px solid var(--crt-accent);outline-offset:3px}.crt-off{z-index:80;cursor:pointer;border-radius:inherit;background:radial-gradient(90% 55% at 16% 6%,#ffffff0d,#0000 55%),radial-gradient(120% 100% at 50% 45%,#111312 0%,#0a0b0a 55%,#050605 100%);border:none;place-items:center;margin:0;padding:0;display:grid;position:absolute;inset:0}.crt-off:focus-visible{outline:2px solid var(--crt-accent);outline-offset:-3px}.crt-hint-px{pointer-events:none;width:100%;height:100%;filter:drop-shadow(0 0 6px color-mix(in srgb, var(--crt-accent) 55%, transparent)) drop-shadow(0 0 20px color-mix(in srgb, var(--crt-accent) 25%, transparent));display:block;position:absolute;inset:0}.crt-off[data-state=ignite]{pointer-events:none;animation:.68s ease-in forwards crt-ignite}.crt-off[data-state=ignite]:before{content:"";border-radius:inherit;opacity:0;background:#fff;animation:.68s ease-out forwards crt-bloom;position:absolute;inset:0}.crt-off[data-state=ignite]:after{content:"";background:color-mix(in srgb, var(--crt-accent) 45%, #fff 55%);height:2px;box-shadow:0 0 10px color-mix(in srgb, var(--crt-accent) 90%, transparent), 0 0 34px color-mix(in srgb, var(--crt-accent) 55%, transparent);border-radius:2px;animation:.68s cubic-bezier(.22,.9,.3,1) forwards crt-beam;position:absolute;top:50%;left:5%;right:5%}.crt-room[data-power=off] .crt-led{animation:2.6s ease-in-out infinite crt-led-standby}@keyframes crt-ignite{0%,55%{opacity:1}to{opacity:0}}@keyframes crt-bloom{0%,30%{opacity:0}55%{opacity:.35}to{opacity:0}}@keyframes crt-beam{0%{opacity:0;transform:translateY(-50%)scale(0,.6)}22%{opacity:1;transform:translateY(-50%)scale(1)}48%{transform:translateY(-50%)scaleY(1.4)}to{opacity:0;transform:translateY(-50%)scaleY(300)}}@keyframes crt-led-standby{0%,to{opacity:.25}50%{opacity:.8}}@keyframes crt-flicker{0%,to{opacity:1}3%{opacity:.92}6%{opacity:1}54%{opacity:.96}57%{opacity:1}}@keyframes crt-nosignal{0%,to{opacity:1}50%{opacity:.25}}@keyframes crt-led{0%,to{opacity:1}50%{opacity:.75}}@keyframes crt-roll{0%{transform:translateY(-120%)}to{transform:translateY(340%)}}@media (prefers-reduced-motion:reduce){.crt-glass,.crt-screen:before,.crt-led{animation:none}.crt-room .crt-screen:after{opacity:0;animation:none}.crt-off[data-state=ignite]:before,.crt-off[data-state=ignite]:after{content:none}}
