/* CRT interaction layers. The surrounding site layout stays unchanged. */
/* Reserve double taps throughout the monitor, including its bezel and startup
   poster, while preserving browser scrolling and pinch zoom. */
.crt-stage{touch-action:manipulation}
.screen{--terminal:#f4f4f4;isolation:isolate;background:#050708;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.crt-canvas{display:block;width:100%;height:100%;outline:none}
.screen,.crt-canvas{touch-action:pan-y pinch-zoom;cursor:default}
.screen[data-interactive="true"],.screen[data-interactive="true"] .crt-canvas{touch-action:pinch-zoom;cursor:grab}
.screen.dragging,.screen.dragging .crt-canvas{cursor:grabbing}
.screen::after{z-index:3}
.screen:has(.crt-canvas:focus-visible){outline:2px solid #cbd1c6;outline-offset:3px}
.voxel-targets{position:absolute;inset:0;pointer-events:none;z-index:4}
.voxel-target{position:absolute;display:block;padding:0;margin:0;border:0;background:transparent;color:transparent;opacity:0;pointer-events:none}
.voxel-target:focus-visible{opacity:1;outline:1px dashed #cbd1c6;outline-offset:2px;border-radius:3px}
.voxel-target[hidden]{display:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.power:focus-visible{outline:2px solid #fff;outline-offset:4px}
.floppy-drive:focus-visible{outline:2px solid #30372f;outline-offset:3px;border-radius:5px}

/* Screen proportions drive the case height, never the other way around. */
.crt{aspect-ratio:auto;--chin-center:53.5px}
.screen-bezel{height:auto}
.screen{height:auto;aspect-ratio:4/3}
.power{background:linear-gradient(#e4829a,#c75b78);box-shadow:inset 0 1px 0 #ffd9e580,inset 0 0 0 1px #f2a5bb,0 3px 0 #6e3447,0 5px 5px #0005}
.power[aria-pressed="true"],.power:active{background:linear-gradient(#7f3048,#a44661);box-shadow:inset 0 3px 6px #3a101bcc,inset 0 0 0 1px #5e2136,0 1px 0 #e0e6d75c;color:#d9b5c0}
button.floppy-drive{height:44px;border:0;padding:0;background:transparent;appearance:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button.floppy-drive:active .floppy-slot{box-shadow:0 0 0 1px #000a,inset 0 2px 2px #000}
.floppy-drive::before,.floppy-drive::after{content:none}
.floppy-layer{position:fixed;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:20}
.floppy-grab{position:fixed;left:0;top:0;z-index:21;display:block;min-width:44px;min-height:44px;padding:0;border:0;border-radius:5px;background:transparent;appearance:none;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.floppy-grab.is-held{cursor:grabbing}
.floppy-grab:focus-visible{outline:1px dashed #f4f4f4;outline-offset:5px}
body[data-floppies="true"]{padding-bottom:56px}
@media(max-width:520px){.crt{--chin-center:45px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The DOM remains the accessible input surface; all visible hardware is mesh. */
/* The browser scrolls this document-anchored canvas with the text. */
.crt-model-layer{position:absolute;left:0;top:0;display:block;pointer-events:none;z-index:20;opacity:0}
.crt-model-layer[data-ready="true"]{opacity:1}
.crt,.screen-bezel,.screen{background:transparent;box-shadow:none}
.crt-canvas,.chin-logo,.floppy-slot,.status-led{opacity:0!important}
.screen::after{display:none}
:root{--power-button-radius:6px}
.power{border-radius:var(--power-button-radius);background:transparent!important;border-color:transparent;box-shadow:none!important;color:transparent!important}
.floppy-layer{visibility:hidden}
.crt:not([data-model-ready="true"]){pointer-events:none}
.floppy-drive:disabled{cursor:default}

.crt{z-index:21}
.floppy-grab{z-index:22}

/* Align the dark slot itself with the logo and power switch. */
.floppy-slot{transform:none}