.alla-radio{width:calc(100% - 44px);max-width:880px;margin:16px auto 30px;color:var(--ink)}
.radio-shell{padding:5px;border:1px solid #747b80;border-radius:38px;background:var(--auto-chrome);box-shadow:0 2px 5px #20291e24}
.radio-face{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:6px 12px;align-items:center;padding:12px 15px 9px;border-radius:32px;background:var(--auto-ivory);box-shadow:inset 0 1px 1px #fff}
.radio-key,.radio-preset{position:relative;border:2px solid transparent;background:var(--auto-ivory) padding-box,var(--auto-chrome) border-box;box-shadow:0 0 0 .5px #747b80,inset 0 1px 1px #fff,0 2px 3px #2222;color:var(--ink);cursor:pointer}
.radio-key{height:52px;width:52px;border-radius:50%;display:grid;place-items:center;grid-row:1/3}
.radio-key svg{width:21px;height:21px;fill:currentColor;pointer-events:none}
.radio-next{grid-column:3}.radio-play{grid-column:1}
.radio-screen{grid-column:2;grid-row:1;min-width:0;text-align:center;padding:6px 8px;border:1px solid #a1987d;border-radius:19px;background:linear-gradient(#ecdfbd,#fff8e4);box-shadow:inset 0 2px 3px #75694c25}
.radio-screen small{display:block;font-size:9px;letter-spacing:3px;margin-bottom:5px}
.radio-screen strong{display:block;font-family:Georgia,serif;font-size:clamp(11px,2vw,20px);letter-spacing:.5px;line-height:1.4;overflow-wrap:anywhere}
.radio-presets{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.radio-preset{min-height:44px;border-radius:10px;font:700 15px Georgia,serif}
.radio-preset[aria-pressed=true]{background:linear-gradient(#efdfb8,#fff2ce) padding-box,var(--auto-chrome) border-box;box-shadow:0 0 0 .5px #747b80,inset 0 1px 3px #7c673b33;color:#8f2f16}
.radio-key:active,.radio-preset:active{transform:translateY(1px)}
.radio-key:focus-visible,.radio-preset:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.radio-status{font-size:12px;line-height:1.5;text-align:center;margin:8px 0}.radio-status:empty{display:none}
.radio-spot-preview{display:block;margin:10px auto 0;padding:9px 16px;border:1px solid #a1987d;border-radius:18px;background:var(--auto-ivory);color:var(--ink);font:inherit;font-size:12px;cursor:pointer;min-height:40px}
.radio-spot-preview:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:800px){.alla-radio{width:calc(100% - 24px);margin-top:14px}.radio-face{grid-template-columns:42px minmax(0,1fr) 42px;gap:5px 7px;padding:10px 8px 8px}.radio-key{width:40px;height:44px}.radio-shell{padding:3px;border-radius:29px}.radio-face{border-radius:25px}.radio-screen{padding:6px 4px}.radio-screen small{font-size:8px;letter-spacing:2px}.radio-screen strong{font-size:12px}.radio-preset{min-height:44px}}

/* Fixed circular controls: intrinsic button padding must not squeeze the face. */
.alla-radio .radio-key{box-sizing:border-box;padding:0;min-width:52px;max-width:52px;width:52px;min-height:52px;max-height:52px;height:52px;aspect-ratio:1;flex-shrink:0;border-radius:50%;justify-self:center;align-self:center}
.alla-radio .radio-key svg{flex-shrink:0}
.alla-radio button:disabled{opacity:.45;cursor:default}
@media(max-width:800px){.alla-radio .radio-key{min-width:44px;max-width:44px;width:44px;min-height:44px;max-height:44px;height:44px}.alla-radio .radio-face{grid-template-columns:44px minmax(0,1fr) 44px}}