.teaching-slide.slide-field-radio{container-type:size;overflow:auto;gap:12px;padding:18px 1.8%;border:1px solid #a48e55;border-radius:12px;background:radial-gradient(ellipse at 50% 35%,#29433899,transparent 65%),linear-gradient(135deg,#102724,#08191d);box-shadow:inset 0 0 0 4px #071a1c,inset 0 0 0 5px #866b3b70;color:#e1d8b6}
.fr-topbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center;gap:28px;flex-shrink:0}
.slide-field-radio .fr-topbar header p{font:600 14px/1.4 var(--sans);letter-spacing:2px;color:#b6a16d;margin:0 0 5px}
.slide-field-radio .fr-topbar h2{font:750 clamp(28px,5cqh,42px)/1.15 var(--serif);color:#e9cd86;margin:0;text-shadow:0 2px 7px #0005}
.fr-health{width:100%;min-width:0;justify-self:end;padding:9px 12px;border:1px solid #9baf7050;border-radius:8px;background:#26392966}
.fr-health>div{display:flex;justify-content:space-between;align-items:center;font:700 13px/1.3 var(--sans);color:#b8d99d}
.fr-health b{font-variant-numeric:tabular-nums;color:#b5ed86;font-size:16px}
.fr-health progress{display:block;appearance:none;border:0;border-radius:6px;overflow:hidden;width:100%;height:6px;margin:6px 0;background:#0b1710;box-shadow:inset 0 1px 4px #0006}
.fr-health progress::-webkit-progress-bar{background:#0b1710}
.fr-health progress::-webkit-progress-value{background:linear-gradient(90deg,#4d8c44,#a0de70);box-shadow:0 0 12px #a5e67977}
.fr-health progress::-moz-progress-bar{background:#86c963}
.slide-field-radio .fr-state{color:#b5c2a2;font:400 12px/1.4 var(--sans);margin:0;min-height:17px}
.fr-body{flex:1 0 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.fr-device{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:20px;width:min(1100px,100%,calc((100cqh - 310px)*4/3 + 116px));padding:18px 20px 14px;border:2px solid #8b8659;border-radius:20px;background:linear-gradient(125deg,#596248,#313e2f 50%,#4b543d);box-shadow:inset 0 0 0 5px #18231988,inset 0 1px 2px #d9d4ad55,0 18px 38px #0007;flex-shrink:0}
.fr-display{min-width:0}
.fr-display-label{display:flex;justify-content:space-between;gap:8px;color:#e1d7ad;font:600 11px/1.4 monospace;letter-spacing:1.5px;margin-bottom:9px}
.fr-lamp{color:#b8b795;white-space:nowrap}
.fr-playing .fr-lamp{color:#b3ee89;text-shadow:0 0 9px #a8dc67}
.fr-bezel{padding:10px;border:1px solid #9b9b6c77;border-radius:17px;background:linear-gradient(140deg,#0c140d,#293227);box-shadow:inset 4px 5px 15px #000b,0 0 0 4px #27332588}
.fr-screen{position:relative;width:100%;aspect-ratio:4/3;min-height:0;overflow:hidden;border-radius:11px;background:#030706;box-shadow:inset 0 0 30px #000,0 0 22px #b7d78b15}
.fr-player-host{position:absolute;inset:0;z-index:1}
.fr-player-host video{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:contain;object-position:center;border:0;border-radius:0;background:#000}
.fr-cover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:20px;background:radial-gradient(ellipse,#1b3022,#020706);text-align:center}
.fr-cover[hidden]{display:none}
.fr-static{position:absolute;inset:0;pointer-events:none;opacity:.15;background-image:repeating-radial-gradient(circle at 18% 29%,#cfddb4 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,#0000 0 3px,#0008 3px 4px);background-size:7px 9px,100% 4px}
:is([data-radio-state=tuning],[data-radio-state=buffering]) .fr-static{animation:fr-static .18s steps(3) infinite;opacity:.28}
.fr-reticle{position:relative;z-index:1;color:#aac786;font:44px/1 monospace;text-shadow:0 0 18px #a3cf7b55}
.slide-field-radio .fr-cover-message{position:relative;color:#9dad8a;font:600 14px/1.5 monospace;letter-spacing:3px;margin:0}
.fr-connect{position:relative;z-index:1;border:1px solid #efd183;border-radius:7px;background:#302e1de8;color:#f4d995;box-shadow:0 0 0 4px #bca15b16,0 0 26px #e1b35238,inset 0 0 18px #ac853814;font:750 clamp(16px,3.3cqh,24px)/1.4 var(--sans);letter-spacing:1px;min-height:52px;padding:14px 24px;cursor:pointer;transition:background .3s,box-shadow .3s}
.fr-connect:disabled{cursor:wait;opacity:.65}
.fr-cover small{position:relative;z-index:1;font:400 13px/1.5 var(--sans);color:#98a589}
.fr-spectrum{height:24px;display:flex;align-items:center;justify-content:center;gap:4px;margin:10px 0 8px;padding:0 6px;overflow:hidden}
.fr-spectrum i{display:block;flex:1;max-width:12px;height:100%;border-radius:2px;background:#a1be71;opacity:.28;transform:scaleY(.12);box-shadow:0 0 5px #9cbd6422}
.fr-sounding .fr-spectrum i{opacity:.85;animation:fr-spectrum var(--speed) ease-in-out var(--delay) infinite alternate}
.fr-tuner{display:flex;align-items:center;gap:12px;font:10px/1.3 monospace;letter-spacing:1px;color:#bfbf97}
.fr-tuner>div{position:relative;flex:1;height:11px;border-bottom:1px solid #a6ad8070;background:repeating-linear-gradient(90deg,#d0d09b80 0 1px,transparent 1px 10px)}
.fr-tuner i{position:absolute;top:-2px;bottom:-2px;width:2px;background:#e4b668;left:48%;box-shadow:0 0 5px #dfaa5599}
.fr-hardware{display:flex;align-items:center;flex-direction:column;gap:8px;border-left:1px solid #a6ac7944;padding-left:16px;color:#b7bb96;font:10px/1.5 monospace;letter-spacing:1px;text-align:center}
.fr-knob{flex-shrink:0;position:relative;width:64px;height:64px;margin-top:8px;border:4px double #939c72;border-radius:50%;background:repeating-conic-gradient(#19271b 0 9deg,#4b573a 9deg 12deg);box-shadow:0 4px 8px #0006,inset 0 0 0 9px #2c3927}
.fr-knob:after{content:'';position:absolute;top:10px;left:27px;width:3px;height:16px;border-radius:3px;background:#d4cd96;transform:rotate(25deg);transform-origin:bottom}
.fr-knob-small{width:48px;height:48px;margin-top:6px}
.fr-knob-small:after{left:19px;top:6px;height:12px}
.fr-hardware small{font:9px monospace}
.fr-speaker{flex:1;min-height:40px;width:100%;margin-top:4px;border:1px solid #a3aa7350;border-radius:6px;background:repeating-linear-gradient(0deg,#0d1b12 0 2px,#4c583b 2px 5px);box-shadow:inset 0 2px 7px #0007}
.fr-hardware b{font-size:10px;font-weight:400}
.fr-screw{position:absolute;width:8px;height:8px;border-radius:50%;background:linear-gradient(45deg,#8f976e 40%,#152319 42% 55%,#8f976e 57%);box-shadow:0 1px 2px #0008;top:6px}
.fr-screw-a{left:8px}.fr-screw-b{right:8px}
.fr-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-shrink:0;border-top:1px solid #a48d5640;padding-top:12px}
.fr-bottom strong{display:block;color:#e2cf9d;font:600 20px/1.4 var(--serif)}
.fr-bottom>div>span{display:block;color:#98ad91;font:400 13px/1.5 var(--sans);margin-top:3px}
.fr-actions{display:flex;align-items:center;gap:10px}
.fr-actions button{border:1px solid #9e8c59;border-radius:6px;background:#293a2a;color:#ead69d;min-height:40px;padding:8px 13px;font:600 15px/1.4 var(--sans);cursor:pointer}
.fr-actions button:disabled{opacity:.4;cursor:default}
.fr-actions .fr-disconnect{font-size:22px;padding:4px 11px}
.slide-field-radio .fr-actions a{color:#bdad7e;font:400 12px/1.4 var(--sans);text-decoration:none}
.slide-field-radio :is(button,a):focus-visible{outline:2px solid #f3d68c;outline-offset:4px}
@media(hover:hover){.fr-connect:not(:disabled):hover{background:#514322;box-shadow:0 0 30px #e1b35266}.fr-actions button:not(:disabled):hover{background:#425236}}
@keyframes fr-spectrum{from{transform:scaleY(.12)}to{transform:scaleY(var(--peak))}}
@keyframes fr-static{0%{background-position:0 0}100%{background-position:11px -15px}}
@media(max-width:800px){.teaching-slide.slide-field-radio{container-type:normal;padding:18px 12px;overflow:auto}.fr-topbar{grid-template-columns:1fr;gap:12px}.fr-health{max-width:360px;justify-self:start}.slide-field-radio .fr-topbar h2{font-size:30px}.fr-body{flex:0 0 auto;margin:12px 0}.fr-device{width:100%;grid-template-columns:minmax(0,1fr) 54px;gap:10px;padding:15px 12px}.fr-hardware{padding-left:8px;gap:6px}.fr-knob{width:40px;height:40px;border-width:2px;box-shadow:inset 0 0 0 6px #2c3927,0 3px 6px #0008}.fr-knob:after{left:17px;top:4px;height:12px}.fr-knob-small{width:32px;height:32px}.fr-knob-small:after{left:13px;top:3px;height:10px}.fr-hardware>span,.fr-hardware b{font-size:8px}.fr-hardware small{font-size:8px}.fr-display-label{font-size:9px;letter-spacing:.3px}.fr-bezel{padding:6px}.fr-cover{padding:12px;gap:10px}.fr-connect{padding:12px 15px;font-size:16px}.fr-cover small{font-size:11px}.fr-reticle{font-size:30px}.fr-cover-message{font-size:11px}.fr-bottom{flex-direction:column;align-items:flex-start}.fr-actions{flex-wrap:wrap}.fr-spectrum{gap:2px}}
@media(max-width:480px){.fr-device{grid-template-columns:minmax(0,1fr);padding:14px 10px}.fr-hardware{display:none}.fr-screen{min-height:0}.fr-display-label{font-size:9px}.fr-bottom strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.slide-field-radio *{animation:none!important;transition:none!important}.fr-sounding .fr-spectrum i{transform:scaleY(.45)}}