@font-face{font-family:Sixtyfour;src:url(/fonts/Sixtyfour.woff2)format("woff2");font-weight:400;font-style:normal;font-display:block}@font-face{font-family:Sixtyfour CRT;src:url(/fonts/Sixtyfour.woff2)format("woff2");font-weight:400;font-style:normal;font-display:block;font-variation-settings:"SCAN" 40, "BLED" 65}@font-face{font-family:Sixtyfour Clean;src:url(/fonts/Sixtyfour.woff2)format("woff2");font-weight:400;font-style:normal;font-display:block;font-variation-settings:"SCAN" -53, "BLED" 0}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--c64-blue:#352879;--c64-light-blue:#6c5eb5;--c64-black:#000;--c64-white:#fff;--bezel:#b3ac9c;--bezel-dark:#6f6a5d;--bezel-deep:#453f36;--ui-bg:#000;--ui-panel:#0d0d0d;--ui-text:#fff;--ui-dim:#959595;--ui-accent:#70a4b2;--ui-border:#6c6c6c;--ui-btn-bg:#352879;--ui-focus:#b8c76f;--ui-font:"Sixtyfour", "Courier New", monospace;--sidebar-w:21rem}*{box-sizing:border-box}body{background:var(--ui-bg);min-height:100vh;color:var(--ui-text);font-family:var(--ui-font);margin:0}#app{grid-template-columns:minmax(0,1fr);align-content:start;justify-items:center;gap:1rem;min-height:100vh;padding:1rem;display:grid}.stage{grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:1rem;width:100%;min-width:0;height:calc(100svh - 2rem);display:grid}.stage__monitor{place-content:safe center unsafe center;justify-items:center;width:100%;min-width:0;min-height:0;display:grid}.sidebar{justify-items:center;gap:1rem;width:100%;display:grid}.monitor{--c64-scale:1;--c64-bezel:24px;justify-items:center;display:grid}.monitor__bezel{padding:var(--c64-bezel);background:linear-gradient(170deg, var(--bezel) 0%, var(--bezel-dark) 100%);border-radius:14px 14px 6px 6px;justify-items:center;display:grid;box-shadow:inset 0 2px #ffffff59,inset 0 -2px #00000059,0 12px 28px #0009}.monitor__border{background:var(--c64-black);box-shadow:inset 0 0 0 2px var(--bezel-deep), inset 0 0 24px #0000008c;border-radius:3px;grid-template-columns:max-content;display:grid;position:relative}.monitor__screen{background:var(--c64-black);image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;grid-area:1/1;display:block}.monitor__base{background:linear-gradient(180deg, var(--bezel-dark) 0%, var(--bezel-deep) 100%);border-radius:0 0 8px 8px;justify-content:flex-end;align-items:center;gap:.5rem;width:45%;min-width:8rem;padding:.4rem .9rem;display:flex;box-shadow:0 6px 14px #0000008c}.monitor__led{background:#3d0f0f;border-radius:50%;width:.6rem;height:.6rem;transition:background .2s ease-out;box-shadow:inset 0 0 3px #000c}.monitor[data-power=on] .monitor__led{background:#ff3b30;box-shadow:inset 0 0 2px #ffbeb4e6,0 0 8px 2px #ff3b30a6}.monitor.is-dragover .monitor__bezel{outline:3px dashed var(--c64-light-blue);outline-offset:5px}.stage:has(.picker__input:focus-visible) .monitor__bezel{outline:3px solid var(--c64-white);outline-offset:5px}.monitor.is-dragover .monitor__border{box-shadow:inset 0 0 0 2px var(--c64-white), inset 0 0 24px #0000008c}.scanlines .monitor__border:after{content:"";z-index:2;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(to bottom, #0000004d 0 calc(1px * var(--c64-scale)), transparent calc(1px * var(--c64-scale)) calc(2px * var(--c64-scale)));position:absolute;inset:0}.compare{z-index:1;touch-action:none;cursor:ew-resize;grid-area:1/1;position:relative}.compare-original{width:100%;height:100%;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;display:block}.compare-handle{cursor:ew-resize;background:var(--c64-white);width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;box-shadow:0 0 4px #000c}.compare-handle:focus-visible{outline:2px solid var(--c64-white);outline-offset:2px}.screen-status{z-index:3;padding:calc(2px * var(--c64-scale)) calc(4px * var(--c64-scale));pointer-events:none;color:var(--c64-white);font-size:calc(8px * var(--c64-scale));text-transform:uppercase;background:#000000bf;grid-area:1/1;align-self:end;margin:0;line-height:1}.picker{flex-wrap:wrap;justify-content:center;gap:.6rem;width:100%;display:flex}.c64-button{font:inherit;color:var(--ui-text);background:var(--ui-btn-bg);border:2px solid var(--ui-accent);cursor:pointer;border-radius:0;padding:.5rem .85rem;font-size:.7rem;line-height:1.4;transition:background-color .12s ease-out}.c64-button:hover:not(:disabled){background:#4a3a9e}.c64-button:active:not(:disabled){transform:translateY(1px)}.c64-button:disabled{opacity:.4;cursor:not-allowed}:focus-visible{outline:2px solid var(--ui-text);outline-offset:2px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.controls{background:var(--ui-panel);border:2px solid var(--ui-border);width:100%;max-width:24rem;color:var(--ui-text);gap:.55rem;padding:.9rem;font-size:.6rem;line-height:1.5;display:grid}.ctl-row{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;align-items:center;gap:.5rem;display:grid}.ctl-row label{color:var(--ui-dim)}.ctl-row select{font:inherit;min-width:0;color:var(--ui-text);background:var(--ui-bg);border:1px solid var(--ui-border);padding:.25rem;font-size:.55rem}.ctl-row input[type=range]{width:100%;min-width:0;accent-color:var(--ui-accent)}.ctl-row input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--ui-accent);justify-self:start}.ctl-row output{color:var(--ui-accent);text-align:right;font-variant-numeric:tabular-nums;min-width:2.6em}.ctl-row :disabled{opacity:.4}.ctl-row--export{flex-wrap:wrap;gap:.45rem;margin-top:.35rem;display:flex}.ctl-row--export button{font:inherit;color:var(--ui-text);background:var(--ui-btn-bg);border:2px solid var(--ui-accent);cursor:pointer;flex:auto;padding:.45rem .35rem;font-size:.55rem}.ctl-row--export button:hover:not(:disabled){background:#4a3a9e}.ctl-row--export button:disabled{opacity:.4;cursor:not-allowed}footer{width:100%;max-width:46rem;color:var(--ui-dim);text-align:left;border-top:1px solid var(--ui-border);order:1;padding-top:.8rem;font-family:ui-monospace,Courier New,monospace;font-size:.72rem;line-height:1.6}footer p{margin:0 0 .5rem}footer a{color:var(--ui-accent);text-decoration:underline}@media (min-width:67rem){#app{height:100vh;min-height:0;margin-right:var(--sidebar-w);grid-template-rows:minmax(0,1fr);padding:1rem 0 1rem 1rem}.stage{height:auto}.sidebar{width:var(--sidebar-w);border-left:2px solid var(--ui-border);align-content:space-between;gap:0;position:fixed;top:0;bottom:0;right:0;overflow-y:auto}.controls{border-width:0;max-width:none}footer{max-width:none;padding-left:.9rem;padding-right:.9rem}}@media (max-width:26rem){#app{padding-inline:0}.monitor__bezel{padding:8px}footer{padding-left:.75rem;padding-right:.75rem}}@media (max-width:22rem){#app{overflow-x:clip}.monitor__bezel{padding:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}