.site-controls { position:fixed; inset:0; z-index:4; pointer-events:none; font-family:'Bahnschrift','Segoe UI',sans-serif; }
.site-controls button,.sound-control { pointer-events:auto; }
.control-icon { width:46px; height:46px; display:grid; place-items:center; padding:0; border:1px solid #71efff66; border-radius:7px; color:#b9f6ff; background:#101722ed; box-shadow:0 0 16px #26c7ef17; cursor:pointer; }
.control-icon:hover { border-color:#71efff; background:#172534; }
.control-icon:focus-visible,.audio-panel button:focus-visible,.audio-panel input:focus-visible { outline:2px solid #ff7ad5; outline-offset:4px; }
.control-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fullscreen-control { position:absolute; bottom:max(20px,env(safe-area-inset-bottom)); right:max(22px,env(safe-area-inset-right)); }
.fullscreen-control .fullscreen-exit { display:none; }
.fullscreen-control[aria-pressed="true"] .fullscreen-enter { display:none; }
.fullscreen-control[aria-pressed="true"] .fullscreen-exit { display:block; }
.sound-control { position:absolute; bottom:max(20px,env(safe-area-inset-bottom)); left:max(22px,env(safe-area-inset-left)); }
.sound-control summary { list-style:none; }
.sound-control summary::-webkit-details-marker { display:none; }
.sound-control[data-muted="true"] .sound-waves { display:none; }
.sound-control .sound-muted { display:none; }
.sound-control[data-muted="true"] .sound-muted { display:block; }
.audio-panel { position:absolute; bottom:59px; left:0; width:252px; box-sizing:border-box; padding:18px; border:1px solid #71efff55; border-radius:9px; background:#101722f5; box-shadow:0 10px 30px #0006,0 0 20px #71efff10; color:#c3d4e3; }
.radio-kicker { margin:0 0 9px; color:#ff84d8; font:10px/1.4 Consolas,monospace; letter-spacing:.18em; }
.radio-track { margin:0 0 5px; font-size:18px; color:#e7f9fc; }
.radio-state { margin:0 0 17px; color:#8da5b8; font-size:11px; line-height:1.5; }
.audio-panel label { display:flex; justify-content:space-between; font-size:12px; }
.audio-panel input { width:100%; margin:13px 0 16px; accent-color:#71efff; cursor:pointer; }
.radio-buttons { display:flex; gap:7px; }
.radio-buttons button { flex:1; padding:9px 5px; font-size:11px; color:#aceef5; background:#71efff08; border:1px solid #71efff33; border-radius:4px; cursor:pointer; }
.radio-buttons button:hover { background:#71efff18; }
.site-message { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); margin:0; color:#94c7d0; font:11px/1.5 Consolas,monospace; text-align:center; }
@media(max-width:480px) { .fullscreen-control { right:15px; bottom:15px; } .sound-control { left:15px; bottom:15px; } .site-message { bottom:25px; max-width:200px; font-size:10px; } }


.audio-panel { width:min(252px,calc(100vw - 30px)); max-height:calc(100dvh - 100px); overflow-y:auto; }