.preview-intro { max-width: 75ch; line-height: 1.6; }
.preview-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; }
.preview-controls[hidden], .preview-controls [hidden], [hidden] { display: none; }
.preview-controls button, .preview-controls select { background: #183950; color: #f2f6fb; border: 1px solid #7796b4; border-radius: 4px; padding: .6rem .85rem; font: inherit; min-height: 44px; }
.preview-controls button { cursor: pointer; }
.preview-controls button:hover { background: #244c69; }
.preview-controls button[aria-pressed="true"] { color: #ffec8b; border-color: #ffec8b; }
.preview-controls button:disabled { opacity: .5; cursor: wait; }
.preview-controls label { display: flex; align-items: center; gap: .5rem; }
a { color: #a8d6ff; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid #ffec8b; outline-offset: 3px; }
::selection { background: #315e85; color: #fff; }
#reconstruction { position: relative; width: 100%; aspect-ratio: 3 / 2; background: #000; overflow: hidden; }
#original-screen { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#screen-choices { position: absolute; inset: 0; }
#screen-choices button { position: absolute; border: 0; padding: 0; background: transparent; cursor: pointer; }
#screen-choices button:focus-visible { outline-offset: -2px; }
#screen-choices .advance-intro { inset: 0; width: 100%; height: 100%; }
.inspection { margin-block: 1rem; }
.inspection summary { cursor: pointer; color: #a8d6ff; }
#preview-status { min-height: 1.5em; color: #ffec8b; line-height: 1.5; }
#preview-help { line-height: 1.6; }
.rom-picker { display: grid; gap: .5rem; max-width: 100%; }
.rom-picker input { font: inherit; max-width: 100%; }
@media (max-width: 600px) { header { align-items: start; gap: 1rem; } header h1 { font-size: 1rem; } header h1 span { font-size: 1.25rem; } .preview-controls { gap: .5rem; } }