:root{color-scheme:dark;background:#0b1019;font-family:'Courier New',monospace}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{display:grid;place-items:center}
.stream-frame{position:relative;width:min(100vw,calc(100vh * 9 / 16));width:min(100vw,calc(100dvh * 9 / 16));aspect-ratio:9/16;overflow:hidden;background:#1a242e}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;outline:none}
.stream-readout{position:absolute;top:2%;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;color:#e8d8b9;font-size:clamp(9px,2.8vw,14px);font-weight:bold;line-height:1.4;text-shadow:1px 2px #10131e;white-space:nowrap}
#stream-status{overflow:hidden;text-overflow:ellipsis;color:#dcc7ed}#stream-depth{margin-left:auto;color:#d4dce5}
.pause-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#10171988;color:#f2d08a;font-size:18px;letter-spacing:3px}.pause-overlay[hidden]{display:none}
.stream-frame.is-wide{width:min(100vw,calc(100vh * 16 / 9));width:min(100vw,calc(100dvh * 16 / 9));aspect-ratio:16/9}
/* Keep the readout inside the vertical center crop in both outputs. */
.is-wide .stream-readout{left:50%;right:auto;width:calc(100% * 81 / 256 * .92);transform:translateX(-50%)}