body{background:#17191b;color:#e8e5de;padding:18px 24px}html{background:#17191b}main{margin-top:0}.modebar{max-width:1120px;width:100%;margin:0 auto 12px;display:flex;align-items:center;justify-content:space-between;gap:16px}.modebar strong{font-size:20px;letter-spacing:1px}.modebar small{display:block;font-size:9px;color:#b3aaa1;margin-top:6px}.modebar button{background:#252729;border:1px solid #5b5853;color:#ddd6cd;padding:11px 19px;border-radius:6px}.modebar button[aria-pressed=true]{background:#b52922;color:white;border-color:#fb7668}.radio-wrap{background:#17191b}.previewNote{color:#a7a19b;text-align:center;font-size:12px}.tapeActions{display:flex;gap:5px;flex-shrink:0;padding:4px 0}.tapeActions label{cursor:pointer;display:inline-flex;align-items:center}.tapeActions .screenbtn{min-height:26px}.screen [hidden],canvas[hidden],section[hidden]{display:none!important}#tapeCanvas{position:absolute;left:56.6%;top:31%;width:31.9%;height:31.2%;border-radius:4px;box-shadow:0 2px 7px #000;pointer-events:none}.results button[aria-current=true]{background:#d6ffad;color:#072f14}.results button{gap:8px;text-align:left}.results button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#tapeSeek{display:flex;align-items:center;gap:8px;font-size:10px;flex-shrink:0}#seekTape{min-width:0;flex:1;accent-color:#07571a}.tapeOptions{max-width:1000px;margin:12px auto;padding:18px;background:#242628;border:1px solid #414345;border-radius:10px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}.tapeOptions label{font-size:12px;color:#ddd}.tapeOptions select,.tapeOptions input{display:block;background:#17191b;color:#eee;border:1px solid #666;padding:7px;margin-top:7px}.tapeOptions p{color:#b9b4aa;font-size:12px}.modebar button:focus-visible,.screen button:focus-visible{outline:2px solid #ffe29d;outline-offset:2px}@media(max-width:700px){body{padding:12px 6px}.modebar{max-width:520px;flex-direction:column;gap:12px}.modebar button{padding:10px 16px}.modebar strong{align-self:flex-start;margin-left:14px}.tapeOptions{max-width:520px;gap:12px;padding:14px}#tapeCanvas{left:18%;top:54.8%;width:65%;height:23%;}.previewNote{max-width:400px;margin:14px auto;font-size:11px}.tapeActions{padding:5px 0}.tapeActions .screenbtn{font-size:11px;padding:4px 8px}.display .results button{min-height:30px;font-size:12px}}
.screen{color:#062e12}#tapeCanvas{top:29.7%}#tapeTime{color:#062e12}@media(max-width:700px){#tapeCanvas{top:54.8%}}

#tapeBay{position:absolute;left:55.7%;top:28.8%;width:34.6%;height:31.8%;background:radial-gradient(#242725,#080909);border-radius:5px;overflow:hidden;padding:3px;box-shadow:inset 0 0 8px #000}#tapeBay[hidden]{display:none}#tapeCanvas{position:static;width:100%;height:100%;object-fit:contain;box-shadow:none;border-radius:0}@media(max-width:700px){#tapeBay{left:10.9%;top:53.6%;width:78%;height:20.8%;}}

/* Mobile: give 120 source pixels from the LCD to the cassette compartment.
   The canvas retains its native 880:573 ratio; only the surrounding bay grows. */
@media(max-width:700px){
 .screen{height:27.6644%}
 #tapeBay,#tapeBay[hidden]{display:block!important;left:10.9%;top:44.6%;width:78%;height:29.9%;box-sizing:border-box;padding:3px}
 .tapeActions .screenbtn{font-size:10px;padding:4px 5px}
 .display .results{min-height:28px}
}

/* Landscape: narrower LCD, larger cassette bay; preserve the cassette ratio. */
@media(min-width:701px){
 .radio{aspect-ratio:1200/890;background-image:url('assets/radio/radio-landscape-roomy.svg');mask:none;-webkit-mask:none}
 .screen{left:8.9%;top:26.25%;width:36.3%;height:35.8%}
 #tapeBay,#tapeBay[hidden]{display:block!important;left:48.05%;top:26%;width:43%;height:35.9%;padding:4px;box-sizing:border-box}
 .hot{top:67.4157%;height:10.7865%}
 .volume{top:83.1461%;height:4.4944%}
 .volume-panel{top:81.4831%;height:7.7303%}
 .mute{top:83.7303%;height:4.4944%}
 .version{top:20.0449%}
}