:root .sig--des-radio { display: grid; place-items: center; padding: clamp(18px, 3vw, 40px) clamp(14px, 2.4vw, 30px); container-type: inline-size; }
:root .sig--des-radio .rd, :root .sig--des-radio.rd { position: relative; isolation: isolate; width: 100%; max-width: 560px; }
:root .sig--des-radio .rd__box, :root .sig--des-radio.rd__box { position: relative; padding: 14px; border-radius: 28px; background:
  repeating-linear-gradient(94deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px, rgba(0, 0, 0, .05) 7px 9px, transparent 9px 15px),
  linear-gradient(160deg, #6b3f26, #3e2215 55%, #2a170e); box-shadow: inset 0 1px 0 rgba(255, 220, 190, .25), inset 0 -6px 14px rgba(0, 0, 0, .45), 0 34px 60px -24px rgba(0, 0, 0, .95); margin-top: 26px; }
:root .sig--des-radio .rd__handle, :root .sig--des-radio.rd__handle { position: absolute; left: 22%; right: 22%; top: -24px; height: 34px; border: 7px solid #2a2a2d; border-bottom: 0; border-radius: 22px 22px 0 0; z-index: -1; }
:root .sig--des-radio .rd__face, :root .sig--des-radio.rd__face { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 14px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #e9dfcc, #d6c8ae); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
:root .sig--des-radio .rd__spk, :root .sig--des-radio.rd__spk { position: relative; align-self: center; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #3b2a20 1.6px, transparent 2px) 0 0 / 9px 9px, radial-gradient(circle at 50% 40%, #6c5442, #3d2c22); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6), 0 0 0 5px #c9b896, 0 0 0 6px rgba(0, 0, 0, .2); overflow: hidden; }
:root .sig--des-radio .rd__cone, :root .sig--des-radio.rd__cone { position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 200, .18), transparent 70%); transition: transform .09s; }
:root .sig--des-radio .rd__panel, :root .sig--des-radio.rd__panel { display: grid; gap: 10px; align-content: center; min-width: 0; }
:root .sig--des-radio .rd__dial, :root .sig--des-radio.rd__dial { position: relative; height: clamp(58px, 15cqw, 78px); border-radius: 10px; overflow: hidden; background: radial-gradient(120% 140% at 50% 120%, #e3b8ff, #f3b04a 40%, #a8641f); box-shadow: inset 0 0 0 2px #2a170e, inset 0 6px 16px rgba(0, 0, 0, .35); transition: filter .6s; }
:root .sig--des-radio .rd:not(.is-on):not(.is-search) .rd__dial, :root .sig--des-radio.rd:not(.is-on):not(.is-search) .rd__dial { filter: saturate(.5) brightness(.7); }
:root .sig--des-radio .rd__scale, :root .sig--des-radio.rd__scale { position: absolute; left: 6%; right: 6%; top: 0; bottom: 0; }
:root .sig--des-radio .rd__scale i, :root .sig--des-radio.rd__scale i { position: absolute; top: 18%; height: 14%; width: 1px; background: #3a1f0c; }
:root .sig--des-radio .rd__scale i.b, :root .sig--des-radio.rd__scale i.b { height: 24%; width: 1.5px; }
:root .sig--des-radio .rd__scale em, :root .sig--des-radio.rd__scale em { position: absolute; top: 46%; transform: translateX(-50%); font: 600 clamp(8px, 2.1cqw, 11px)/1 var(--f-display); font-style: normal; color: #3a1f0c; }
:root .sig--des-radio .rd__band, :root .sig--des-radio.rd__band { position: absolute; right: 0; bottom: 8%; font: 600 9px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: rgba(58, 31, 12, .7); }
:root .sig--des-radio .rd__needle, :root .sig--des-radio.rd__needle { position: absolute; top: 6%; bottom: 6%; width: 2px; margin-left: -1px; background: #d3122b; box-shadow: 0 0 8px rgba(211, 18, 43, .7); left: 30%; }
:root .sig--des-radio .rd__dial .rd__needle, :root .sig--des-radio.rd__dial .rd__needle { left: calc(6% + 88% * var(--np, .3)); }
:root .sig--des-radio .rd__noise, :root .sig--des-radio.rd__noise { position: absolute; inset: 0; opacity: 0; mix-blend-mode: multiply; background: repeating-radial-gradient(circle at 17% 32%, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 73% 61%, rgba(0, 0, 0, .2) 0 1px, transparent 1px 4px); transition: opacity .3s; }
:root .sig--des-radio .rd.is-search .rd__noise, :root .sig--des-radio.rd.is-search .rd__noise { opacity: 1; animation: rdNoise .18s steps(3) infinite; }
@keyframes rdNoise{ 33% { background-position: 3px 1px, -2px 2px; } 66% { background-position: -2px -1px, 2px -3px; } }
:root .sig--des-radio .rd__info, :root .sig--des-radio.rd__info { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; }
:root .sig--des-radio .rd__air, :root .sig--des-radio.rd__air { padding: 5px 8px; border-radius: 6px; border: 1.5px solid #8a7558; color: #8a7558; font: 700 10px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; transition: all .4s; }
:root .sig--des-radio .rd.is-on .rd__air, :root .sig--des-radio.rd.is-on .rd__air { border-color: #d3122b; background: #d3122b; color: #fff; box-shadow: 0 0 16px rgba(211, 18, 43, .6); }
:root .sig--des-radio .rd__freq, :root .sig--des-radio.rd__freq { min-width: 3.4em; font: 700 clamp(16px, 4.4cqw, 22px)/1 var(--f-display); color: #2a170e; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
:root .sig--des-radio .rd__eq, :root .sig--des-radio.rd__eq { height: 40px; display: flex; align-items: flex-end; gap: 2px; }
:root .sig--des-radio .rd__eq i, :root .sig--des-radio.rd__eq i { flex: 1; height: 100%; border-radius: 2px 2px 0 0; background: linear-gradient(0deg, #3a1f0c 0 40%, #a8641f 40% 75%, #d3122b 75%); transform-origin: 50% 100%; transform: scaleY(.06); transition: transform .09s linear; }
:root .sig--des-radio .rd__now, :root .sig--des-radio.rd__now { display: grid; gap: 2px; min-height: 2.6em; }
:root .sig--des-radio .rd__nt, :root .sig--des-radio.rd__nt { font: 600 12px/1.2 var(--f-display); color: #5a3a22; text-transform: lowercase; letter-spacing: .02em; }
:root .sig--des-radio .rd__ns, :root .sig--des-radio.rd__ns { font: 600 clamp(13px, 3.4cqw, 16px)/1.25 var(--f-display); color: #2a170e; letter-spacing: -.01em; }
:root .sig--des-radio .rd__knobs, :root .sig--des-radio.rd__knobs { display: grid; grid-template-columns: auto 1fr 1fr auto; align-items: center; gap: 8px; }
:root .sig--des-radio .rd__lbl, :root .sig--des-radio.rd__lbl { font: 600 9px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: #8a7558; }
:root .sig--des-radio .rd__lbl:nth-of-type(3), :root .sig--des-radio.rd__lbl:nth-of-type(3) { text-align: right; }
:root .sig--des-radio .rd__knob, :root .sig--des-radio.rd__knob { position: relative; width: clamp(30px, 8cqw, 40px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5a4a3e, #1d1612 70%); box-shadow: 0 4px 8px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(255, 255, 255, .05); transform: rotate(-120deg); transition: transform .12s linear; }
:root .sig--des-radio .rd__knob i, :root .sig--des-radio.rd__knob i { position: absolute; left: 50%; top: 12%; width: 3px; height: 30%; margin-left: -1.5px; border-radius: 2px; background: #e9dfcc; }
:root .sig--des-radio .rd__foot, :root .sig--des-radio.rd__foot { position: absolute; bottom: -10px; width: 16%; height: 12px; border-radius: 0 0 8px 8px; background: #1d1612; z-index: -1; }
:root .sig--des-radio .rd__foot--l, :root .sig--des-radio.rd__foot--l { left: 12%; }
:root .sig--des-radio .rd__foot--r, :root .sig--des-radio.rd__foot--r { right: 12%; }
@container (max-width: 420px){:root .sig--des-radio .rd__face, :root .sig--des-radio.rd__face { grid-template-columns: 1fr; }
:root .sig--des-radio .rd__spk, :root .sig--des-radio.rd__spk { width: 46%; justify-self: center; order: 2; }

}