.classic-border { padding: clamp(12px, 4vw, 40px); background: #000; }
#classic-screen { display: block; width: 100%; aspect-ratio: 4/3; image-rendering: pixelated; background: #000; outline-offset: 8px; }
#classic-screen:focus-visible { outline: 2px solid var(--cyan); }
.classic-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 14px; }
.classic-controls button { padding: 12px; border: 1px solid #777; color: var(--white); background: #111; }
.classic-controls .primary-button { color: #000; background: var(--yellow); }
button:disabled { opacity: .45; cursor: default; }
.classic-transcript { margin: 32px 0; border-top: 1px solid var(--line); padding-top: 20px; }
.classic-transcript pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.7 var(--mono); }
.classic-transcript summary { cursor: pointer; color: var(--cyan); margin-bottom: 20px; }
.classic-border + .screen-footer { border-top: 1px solid var(--line); }
#classic-status { font-size: 11px; }
#classic-json { width: 100%; background: #111; color: var(--white); font: 12px/1.5 var(--mono); }
#classic-tape-json { width: 100%; background: #111; color: var(--white); font: 12px/1.5 var(--mono); }
.classic-cassette { border: 1px solid var(--line); padding: 20px; margin-top: 24px; }
.cassette-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.cassette-heading h2 { font: 14px/1.5 var(--mono); color: var(--cyan); margin: 0; }
#classic-tape-status { font: 11px/1.5 var(--mono); }
.tape-file-label { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 12px/1.5 var(--mono); }
#classic-tape-file { max-width: 100%; font: inherit; }
@media (max-width: 600px) { .classic-controls button { flex: 1 1 auto; } .frame-toolbar { flex-wrap: wrap; gap: 10px; } }