:root{color-scheme:dark;--bg:#191a17;--ink:#eeeede;--muted:#a4ada1;--accent:#b8df9e;--case-ink:#55574b;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input{font:inherit;color:inherit}button{cursor:pointer}button,input{-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #42684a;outline-offset:5px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The cabinet, removable faceplate, sloped bezel and glass are separate layers. */
.crt-shape{position:absolute;pointer-events:none}
.stage{--stage-padding:24px;min-height:100svh;display:grid;place-items:center;padding:var(--stage-padding);background:radial-gradient(ellipse at 50% 45%,#383832 0,#21221e 48%,#131411 100%)}
.monitor{--rail:156px;--rim:32px;--plate:18px;--bevel:28px;--gap:28px;--surround:calc(2*(var(--rim) + var(--plate) + var(--bevel)) + 10px);--frame-width:calc(var(--surround) + var(--rail) + var(--gap));position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:var(--gap);align-items:stretch;width:min(100%,calc((100svh - 2*var(--stage-padding) - var(--surround))*1.333333 + var(--frame-width)));max-width:1760px;padding:var(--rim);color:var(--case-ink);border:2px solid #b4ae98;border-top-color:#f8f4df;border-left-color:#ede7ce;border-radius:15px 15px 12px 12px;background:linear-gradient(108deg,#e5dfc7 0%,#e0d9bf 47%,#d0c8ad 100%);box-shadow:inset 3px 5px 6px #fffcec99,inset -4px -4px 6px #8c836655,0 3px 0 #89836f,0 8px 0 #565647,0 30px 65px #0009}
.monitor::after{content:"";position:absolute;left:28px;right:28px;bottom:-11px;height:6px;z-index:-1;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#535345 0 13%,transparent 13% 87%,#535345 87%)}
.display-housing{position:relative;min-width:0;align-self:center;padding:var(--plate);border:3px solid #34352c;border-top-color:#282a24;border-radius:10px;background:linear-gradient(112deg,#d4cdb6,#c9c2aa 65%,#ccc5ae);box-shadow:0 0 0 2px #b6ad91,0 -2px 4px 2px #9e967b77,0 2px 2px 2px #f8f1d9,inset 2px 3px 3px #fff9e5aa,inset -2px -3px 3px #746d5680}
.screen-bezel{position:relative;padding:var(--bevel);border:1px solid #c9c1a7;border-bottom-color:#eee7ce;border-radius:12px;background:conic-gradient(from 45deg,#aaa38e 0deg,#bdb6a0 85deg,#eae3cc 92deg,#ddd6be 177deg,#bcb49c 185deg,#b1a990 265deg,#a59d86 272deg,#aaa38e 360deg);box-shadow:inset 4px 5px 9px #6d68554d,inset -3px -4px 7px #fff9e080,0 -1px 2px #ede7d177,0 1px 1px #8e877050}
.screen-wrap{position:relative;isolation:isolate;overflow:hidden;clip-path:url(#crt-aperture);border-radius:8% / 9%;background:#020505;box-shadow:inset 0 0 18px #000}
canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;background:#020505}
.glass{position:absolute;z-index:1;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 40% 25%,#94c9d00a,transparent 65%),linear-gradient(118deg,#cee5e506,transparent 48%,#89a9b206);box-shadow:inset 0 0 22px 10px #000a,inset 0 0 70px #0005,inset 2px 3px 5px #e6eeee19}
.control-panel{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;margin:calc(-1*var(--rim) + 2px) 0 calc(-1*var(--rim) + 2px);padding:28px 0 24px 21px;border-left:1px solid #918971;box-shadow:inset 2px 0 #f6efd6, -2px 0 #c5bba0}

.rgb-badge{padding:0;appearance:none;display:grid;place-items:center;align-self:center;width:49px;height:49px;margin-top:28px;border:1px solid #aaa086;border-top-color:#9a8f75;border-radius:7px;background:linear-gradient(140deg,#b8b19a,#d5d0b9);box-shadow:inset 1px 2px 3px #6c645550,inset -1px -1px 1px #ece6ce,0 1px 1px #fff9df}
.color-mark{display:flex;align-items:center;gap:3px;transform:skewY(-9deg)}
.color-mark i{display:block;width:7px;height:22px;border-radius:2px;background:linear-gradient(#e16c55,#c74737);box-shadow:0 1px 1px #6b665555}
.color-mark i:nth-child(2){background:linear-gradient(#8ab66c,#53854d)}
.color-mark i:nth-child(3){background:linear-gradient(#72a5c0,#487fa5)}
.saver-controls{border:0;min-width:0;margin:auto 0;padding:26px 0;display:grid;gap:11px}
.saver-controls legend{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saver-key{position:relative;display:block;min-width:0;cursor:pointer}.saver-key input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.key-face{display:flex;align-items:center;gap:8px;min-height:46px;padding:9px;border:1px solid #a59c82;border-top-color:#c2b9a0;border-radius:4px;background:linear-gradient(#e2dac2,#d0c7ad);box-shadow:inset 0 1px 1px #fff7de,0 3px 0 #a49b80,0 4px 3px #6d65504d;font-size:11px;line-height:1.3;font-weight:500;text-shadow:0 1px #faf2d9;transition:background .12s,box-shadow .12s,transform .12s}
.key-light{flex:none;width:5px;height:5px;border-radius:1px;background:#8f9279;box-shadow:inset 0 1px 2px #43513a77,0 1px #fff1d3}
.saver-key:hover .key-face{background:linear-gradient(#eee6cf,#dbd3bc)}.saver-key input:checked+.key-face{transform:translateY(2px);background:linear-gradient(#c2bba2,#d1cab2);box-shadow:inset 0 1px 4px #70684e55,0 1px 0 #978f73;color:#424d35}.saver-key input:checked+.key-face .key-light{background:#a3d979;box-shadow:0 0 5px #b4e98e,inset 0 1px #e7ffce}.saver-key input:focus-visible+.key-face{outline:2px solid #42684a;outline-offset:5px}
/* A recessed cabinet rocker doubles as the fullscreen switch. */
.power-controls{align-self:center;width:100%;max-width:134px}
.fullscreen{display:flex;flex-direction:column;align-items:center;gap:13px;width:100%;padding:0;border:0;border-radius:3px;background:transparent;appearance:none}
.switch-recess{position:relative;display:block;overflow:hidden;width:100%;height:65px;border:1px solid #bcb296;border-top-color:#f0e8cf;border-bottom-color:#eee5cc;border-radius:2px;background:linear-gradient(90deg,#c4baa0 0%,#857b61 12%,#6d6551 19%,#8e8369 78%,#9f9478 90%,#dad0b5 100%);box-shadow:inset 0 11px 10px -7px #474332c9,inset 0 -6px 5px #4e493a77,1px 1px 1px #eee5ca}
.switch-recess::before{content:"";position:absolute;inset:0 0 auto;height:28px;background:linear-gradient(#b2a68a,#8b806600);clip-path:polygon(0 0,100% 0,84% 100%,15% 100%)}
.switch-rocker{position:absolute;left:10%;right:10%;bottom:5px;height:30px;border:1px solid #746b55;border-top:3px solid #c7bca0;border-right-color:#a69b7f;border-radius:2px 2px 1px 1px;background:linear-gradient(90deg,#8e836b 0%,#a69b7e 7%,#93886e 9%,#9b9075 78%,#80755e 93%,#b0a489 96%,#968a6e);box-shadow:0 -2px 1px #584f3c,0 4px 5px #322f29aa,inset 0 1px 2px #dfd5b280;transform-origin:50% 100%;transition:transform .14s,background .14s}
.switch-rocker::before{content:"";position:absolute;left:37%;right:37%;top:-7px;height:3px;border-radius:1px;background:#9f957c;box-shadow:0 -1px #d4cab0,0 1px 1px #564e3c}
.power-symbol{display:block;width:52px;height:55px;color:#b6ab90;filter:drop-shadow(1px 1px .6px #f7efd5) drop-shadow(-.5px -.5px .4px #a79b7e)}
.fullscreen:hover .switch-rocker{filter:brightness(1.07)}
.fullscreen:active .switch-rocker,.fullscreen[aria-pressed="true"] .switch-rocker{transform:translateY(3px) rotateX(-12deg);background:linear-gradient(90deg,#81765e,#9b9073 15%,#8b8065 86%,#a89b7f);box-shadow:0 -1px 1px #5c523e,0 1px 2px #322f2999,inset 0 2px 3px #5c523e77}
.screen-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:#060d0bf7;color:var(--ink);text-align:center}.loading-symbol{color:var(--accent);font-size:34px;margin-bottom:12px}.screen-overlay h1{font-weight:500;font-size:clamp(19px,2.4vw,28px);letter-spacing:-.6px;margin:0 0 12px}.screen-overlay p{max-width:440px;margin:0 0 22px;color:var(--muted);font:13px/1.7 var(--mono)}progress{appearance:none;width:160px;height:3px;border:0;background:#344038;border-radius:3px}progress::-webkit-progress-bar{background:#344038;border-radius:3px}progress::-webkit-progress-value{background:var(--accent);border-radius:3px}progress::-moz-progress-bar{background:var(--accent);border-radius:3px}
.screen-button,.resume{background:var(--accent);color:#1c2515;border:0;border-radius:6px;padding:12px 20px;min-height:44px;font-size:14px}.resume{position:absolute;z-index:2;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;background:#263521ee;color:var(--accent);border:1px solid #6b8051}
.stage:fullscreen,.stage.expanded{width:100vw;height:100dvh;min-height:100dvh;overflow:auto}.stage:fullscreen .monitor,.stage.expanded .monitor{width:min(100%,calc((100dvh - 2*var(--stage-padding) - var(--surround))*1.333333 + var(--frame-width)))}.stage.expanded{position:fixed;inset:0;z-index:1000}.no-scroll{overflow:hidden}noscript{text-align:center;max-width:30ch}
@media(max-width:900px){.stage{--stage-padding:18px}.monitor{--rail:143px;--rim:24px;--plate:13px;--bevel:21px;--gap:22px;border-radius:12px}.control-panel{padding-left:16px;padding-top:21px;padding-bottom:18px}.saver-controls{gap:9px;padding:20px 0}.key-face{font-size:10px}.rgb-badge{margin-top:15px;width:43px;height:43px}}
@media(max-width:620px){.stage{--stage-padding:14px}.monitor{--rim:18px;--plate:10px;--bevel:16px;display:block;width:100%;border-radius:11px}.screen-bezel{border-radius:9px}.display-housing{border-radius:7px}.control-panel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 13px;margin:20px calc(-1*var(--rim)) calc(-1*var(--rim) + 2px);padding:18px var(--rim);border-left:0;border-top:1px solid #aaa084;box-shadow:inset 0 2px #f4ecd2,0 -2px #d3c8ac}.rgb-badge{grid-column:1;grid-row:1;width:36px;height:36px;margin:0}.color-mark i{width:5px;height:18px}.color-mark{gap:2px}.saver-controls{grid-column:1 / -1;grid-row:2;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0;padding:0}.key-face{flex-direction:column;justify-content:center;gap:7px;padding:8px 3px;min-height:60px;font-size:9px;text-align:center}.power-controls{grid-column:3;grid-row:1;align-self:center;width:86px}.fullscreen{gap:7px}.switch-recess{height:43px}.switch-rocker{height:23px;bottom:4px}.power-symbol{width:35px;height:37px}.stage:fullscreen .monitor,.stage.expanded .monitor{width:100%}}
@media(max-height:570px) and (min-width:621px){.stage{--stage-padding:14px}.monitor{--rail:142px;--rim:16px;--plate:10px;--bevel:14px;--gap:18px}.control-panel{padding:14px 0 12px 15px}.saver-controls{gap:6px;padding:12px 0}.key-face{min-height:32px;padding:5px 8px;font-size:10px}.power-controls{max-width:102px}.fullscreen{gap:5px}.switch-recess{height:38px}.switch-rocker{height:21px;bottom:3px}.power-symbol{width:29px;height:31px}.rgb-badge{width:32px;height:32px;margin-top:0}.color-mark{gap:2px}.color-mark i{width:5px;height:17px}}
@media(prefers-reduced-motion:reduce){.key-face,.switch-rocker{transition:none}}