/* The radio picture is the radio (radio-keys.js). Its printed keys are the buttons: the click areas over them are
   invisible, with a light only on hover/press and a thin warm outline on the selected preset. */
#radio[data-keys] .hot,
#radio[data-keys] .hot:hover,
#radio[data-keys] .hot:active,
#radio[data-keys] .hot.pressed { background: transparent; box-shadow: none; padding: 0; border: 0; }
#radio[data-keys] .hot:hover { box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .28); }
#radio[data-keys] .hot:active,
#radio[data-keys] .hot.pressed { background: rgba(0, 0, 0, .22); }
#radio[data-keys] #presets [data-i][aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(255, 196, 110, .95), 0 0 .9cqw rgba(255, 170, 70, .75); }
/* The click areas stay the printed key's size: no minimum size or label may change them. */
#radio[data-keys] .hot { min-width: 0 !important; min-height: 0 !important; transform: none; }
#radio[data-keys] .livebar { display: none; }
/* The live LCD covers the lettering printed on the picture's display. */
#radio[data-keys] .lcd { background: #021518; border-radius: 1.4cqw; }
/* The old photo's knob crops do not belong on this picture; the knobs printed in it show through, and the click
   areas never turn (they stay where radio-keys.js puts them). */
#radio[data-keys] .knob { background: none; transform: none; touch-action: none; }
/* Turning knob caps cut from the same picture (radio-keys.js); the buttons above them take the input. */
#radio[data-keys] .knob-cap { position: absolute; border-radius: 50%; pointer-events: none; background-repeat: no-repeat; background-size: 100cqw auto; transform-origin: 50% 50%; transition: transform .15s ease-out; -webkit-mask: radial-gradient(closest-side, #000 calc(100% - 1.5px), transparent); mask: radial-gradient(closest-side, #000 calc(100% - 1.5px), transparent); }
#radio[data-keys] .knob-cap.held { transition: none; }
#radio[data-keys] .nrbadge { display: none; }