/* Solid colour fills, with fine edges and small raised shading to match the reference. */
:root {
  --bg: #0d0d0e;
  --body: #2a2b2e;
  --body-edge: #111113;
  --body-hi: #45474d;
  --rib: #17181a;
  --rib-hi: #3a3c41;
  --dark: #111214;

  --key: #3a3c41;
  --key-hi: #5a5d64;      /* raised top edge */
  --key-lo: #1a1b1e;      /* underside */
  --key-edge: #0a0a0b;
  --key-text: #f2f4f7;
  --key-sub: #9aa0aa;

  --screen: #0b2c52;
  --screen-edge: #050505;
  --screen-text: #e8f4ff;
  --highlight: #3a78c2;
  --highlight-hi: #5a92d6;

  --orange: #f08a3c;
  --orange-hi: #ffb07a;
  --orange-lo: #a85a20;
  --red: #c62828;
  --red-hi: #ef5350;
  --green: #3fb950;
  --green-hi: #7ee08a;
  --ptt: #55585e;
  --ptt-hi: #767a82;
  --ptt-tx: #c33333;
  --ptt-tx-hi: #e05a5a;

  --font-ui: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label: "Arial Narrow", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --font-lcd: Consolas, Menlo, "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: #dfe;
  font-family: var(--font-ui);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Body ---------- */
.radio {
  width: 100%;
  max-width: 760px;
  background: var(--body);
  border: 2px solid var(--body-edge);
  border-radius: 14px;
  padding: 0 14px 14px;
  box-shadow:
    inset 0 2px 0 var(--body-hi),
    inset 0 -3px 0 #1f2023,
    0 14px 30px rgba(0, 0, 0, 0.55);
}
.radio.off { opacity: 0.45; }

/* ---------- Grille ---------- */
.grille {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  height: 58px;
  padding: 12px 12px 0;
  margin: 0 -14px;
  background: var(--dark);
  border-bottom: 2px solid var(--body-edge);
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
}
.rib {
  width: 6px;
  height: 100%;
  background: var(--rib);
  border-radius: 3px;
  box-shadow: inset 1px 0 0 var(--rib-hi), inset -1px 0 0 #000;
}

.face {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin-top: 14px;
}

/* ---------- Left column ---------- */
.col-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 82px;
}
.power {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid #0a2a12;
  background: var(--green);
  color: #0b1f10;
  font-size: 17px;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 var(--green-hi),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 0 0 3px #1a1b1e,
    0 0 0 4px #0a0a0b;
}
.power:active { transform: translateY(1px); }

/* PTT: raised cap with a dark ring around it, as in the reference */
.ptt {
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 3px solid #0c0c0d;
  background: var(--ptt);
  color: #f5f7fa;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  margin-top: auto;
  margin-bottom: auto;
  box-shadow:
    inset 0 3px 0 var(--ptt-hi),
    inset 0 -5px 0 rgba(0, 0, 0, 0.35),
    0 0 0 4px #1a1b1e,
    0 0 0 5px #0a0a0b,
    0 8px 14px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.ptt:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.ptt.tx {
  background: var(--ptt-tx);
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 0 var(--ptt-tx-hi),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 0 0 4px #1a1b1e,
    0 0 0 5px #0a0a0b;
}

/* ---------- Screen column ---------- */
.col-screen { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }

.screen {
  background: var(--screen);
  color: var(--screen-text);
  border: 2px solid var(--screen-edge);
  border-radius: 6px;
  height: 196px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-lcd);
  font-size: 13px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px #2a5a8f,     /* thin bright bezel edge */
    inset 0 0 14px rgba(0, 0, 0, 0.5),
    0 2px 0 #1b1c1f;
}
.hdr {
  background: var(--highlight);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 9px;
  font-weight: bold;
  border-bottom: 1px solid #1d4f8c;
  box-shadow: inset 0 1px 0 var(--highlight-hi);
}
.sub {
  display: flex;
  justify-content: space-between;
  padding: 4px 9px;
  opacity: 0.85;
  border-bottom: 1px solid #184070;
}
.rows { flex: 1; overflow: hidden; padding: 2px 0; }
.row { display: flex; gap: 10px; padding: 5px 9px; }
.row.selected {
  background: var(--highlight);
  box-shadow: inset 0 1px 0 var(--highlight-hi), inset 0 -1px 0 #1d4f8c;
}
.row-label { width: 84px; flex-shrink: 0; font-weight: bold; letter-spacing: 0.5px; }
.row-value { flex: 1; }

.softkeys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #082041;
  border-top: 1px solid #184070;
}
.softkey {
  background: transparent;
  color: var(--screen-text);
  border: none;
  padding: 7px 0;
  font-family: var(--font-lcd);
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.softkey + .softkey { border-left: 1px solid #184070; }
.softkey.active { background: var(--highlight); box-shadow: inset 0 1px 0 var(--highlight-hi); }

/* ---------- Bottom buttons ---------- */
.bottom-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.bottom-btns button {
  background: var(--key);
  color: var(--key-text);
  border: 1px solid var(--key-edge);
  border-radius: 6px;
  padding: 8px 0;
  font-family: var(--font-label);
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 var(--key-hi),
    inset 0 -3px 0 var(--key-lo),
    0 2px 3px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.bottom-btns button:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(1px);
}

.indicators {
  display: flex;
  gap: 16px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 1px;
  color: #5d6068;
  padding-left: 4px;
}
.indicators .mic-on { color: var(--highlight-hi); }

/* ---------- Controls column ---------- */
.col-controls {
  width: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.knobs { display: flex; gap: 14px; }
.knob-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--key-sub);
  gap: 5px;
}
/* Knob: dark ring, recessed centre, light pointer line */
.knob {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #1a1b1e;
  border: 2px solid #0a0a0b;
  box-shadow:
    inset 0 2px 0 #3d4046,
    inset 0 -3px 0 #050505,
    0 0 0 3px #2a2c30,
    0 0 0 4px #0a0a0b;
}
.knob::after {
  content: "";
  position: absolute;
  left: 50%; top: 6px;
  width: 3px; height: 12px;
  margin-left: -1.5px;
  background: #e9ecf1;
  border-radius: 2px;
}

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 36px);
  gap: 3px;
}
.dir {
  background: var(--key);
  color: var(--key-text);
  border: 1px solid var(--key-edge);
  cursor: pointer;
  font-size: 11px;
  box-shadow:
    inset 0 2px 0 var(--key-hi),
    inset 0 -2px 0 var(--key-lo),
    0 2px 3px rgba(0, 0, 0, 0.45);
}
.dir-up    { grid-column: 2; grid-row: 1; border-radius: 8px 8px 3px 3px; }
.dir-left  { grid-column: 1; grid-row: 2; border-radius: 8px 3px 3px 8px; }
.dir-right { grid-column: 3; grid-row: 2; border-radius: 3px 8px 8px 3px; }
.dir-down  { grid-column: 2; grid-row: 3; border-radius: 3px 3px 8px 8px; }
.dir-center {
  grid-column: 2; grid-row: 2;
  border-radius: 50%;
  background: #222326;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: bold;
}

.switch {
  width: 100%;
  background: var(--key);
  color: var(--key-text);
  border: 1px solid var(--key-edge);
  border-radius: 6px;
  padding: 8px 0;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 var(--key-hi),
    inset 0 -3px 0 var(--key-lo),
    0 2px 3px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* ---------- Keypad: rounded raised keys, as in the reference ---------- */
.col-keys { width: 176px; }
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.key {
  background: var(--key);
  color: var(--key-text);
  border: 1px solid var(--key-edge);
  border-radius: 10px;
  padding: 5px 2px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  box-shadow:
    inset 0 2px 0 var(--key-hi),
    inset 0 -3px 0 var(--key-lo),
    0 2px 3px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.key:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(1px);
}
.key-num {
  font-family: var(--font-label);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}
.key-name {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.3px;
  color: var(--key-sub);
  text-align: center;
  line-height: 1.1;
  margin-top: 3px;
}

/* ---------- Panic ---------- */
.col-panic { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.panic {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--orange-lo);
  background: var(--orange);
  color: #1a0d00;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  margin-top: 8px;
  box-shadow:
    inset 0 3px 0 var(--orange-hi),
    inset 0 -4px 0 var(--orange-lo),
    0 0 0 3px #1a1b1e,
    0 0 0 4px #0a0a0b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.panic:active { transform: translateY(1px); }
.panic.active {
  background: var(--red);
  color: #fff;
  border-color: #6e1313;
  box-shadow:
    inset 0 3px 0 var(--red-hi),
    inset 0 -4px 0 #6e1313,
    0 0 0 4px rgba(198, 40, 40, 0.35);
}

/* ---------- Join panel ---------- */
.panel {
  width: 100%;
  max-width: 760px;
  background: #17181a;
  border: 1px solid #0a0a0b;
  border-radius: 10px;
  padding: 14px;
  box-shadow: inset 0 1px 0 #26282c;
}
#code {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-lcd);
  font-size: 16px;
  margin-bottom: 8px;
  background: #0e0f10;
  color: #e8ecf1;
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
#join-btn {
  width: 100%;
  padding: 10px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: #f2f4f7;
  background: var(--highlight);
  border: 1px solid #13355f;
  border-radius: 6px;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 var(--highlight-hi),
    inset 0 -2px 0 #24518a,
    0 2px 4px rgba(0, 0, 0, 0.4);
}
.error { color: #ff7b7b; min-height: 1em; font-size: 13px; }

/* ===== v4 changes ===== */
.radio { max-width: 980px; }
.radio.off { opacity: 1; }

.screen { height: 250px; }
.screen.off {
  background: #05080c;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.85), 0 2px 0 #1b1c1f;
}
.screen.off > * { visibility: hidden; }

.row-label { width: 120px; }
.row.editing .row-value { color: #ffffff; }

.panic {
  width: 52px;
  height: 52px;
  font-size: 10px;
  margin-top: 6px;
}

/* Arrow buttons press like the other buttons */
.dir {
  transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.dir:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(1px);
}

/* PTT presses down while held and springs back on release */
.ptt {
  transition: transform 70ms ease-out, box-shadow 70ms ease-out, background 70ms ease-out;
}
.ptt:not(:disabled):active {
  transform: translateY(2px);
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.45),
    0 0 0 4px #1a1b1e,
    0 0 0 5px #0a0a0b;
}

/* Knobs turn smoothly */
.knob {
  transition: transform 120ms ease-out;
}

/* ===== v5: radio display and device pages ===== */

/* Radio channel view */
.radio-view {
  height: 100%;
  padding: 8px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ch-num {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #9fc4ec;
}
.ch-name {
  font-family: var(--font-label);
  font-size: 26px;
  font-weight: bold;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.ch-status {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #7ee08a;
}
.units {
  margin-top: auto;
  background: #082041;
  border: 1px solid #1d4f8c;
  border-radius: 4px;
  padding: 6px 8px;
  box-shadow: inset 0 1px 0 #163d6b;
}
.units-title {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 1px;
  color: #9fc4ec;
  margin-bottom: 4px;
}
.unit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: bold;
}
.unit-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #7ee08a;
  box-shadow: 0 0 0 2px #0c3a1f;
}
.unit-name { flex: 1; }
.unit-tag {
  font-size: 10px;
  letter-spacing: 1px;
  color: #9fc4ec;
}

/* Device pages (INPUT / OUTPUT) */
.row.device-row .row-label {
  flex: 1;
  width: auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: normal;
}
.row.device-row .row-value {
  flex: none;
  width: 16px;
  text-align: center;
}

/* ===== v8: channel splash ===== */
.screen.splash-on .hdr,
.screen.splash-on .sub { display: none; }

.splash {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  background: var(--highlight);
  box-shadow: inset 0 1px 0 var(--highlight-hi), inset 0 -2px 0 #1d4f8c;
}
.splash-name {
  font-family: var(--font-label);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1.1;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}


/* ===== v10: floating overlay ===== */
html, body {
  background: transparent !important;
}
body {
  padding: 16px 16px 30px;
  gap: 0;
  overflow: hidden;
}
/* Drag the radio by its top grille (handled in JavaScript) */
.grille { cursor: grab; }
.grille.dragging { cursor: grabbing; }


/* ===== v11: resizable radio ===== */
body { user-select: none; }
.stage { position: relative; flex: none; }
.radio {
  position: absolute;
  left: 0;
  top: 0;
  width: 980px;
  max-width: none;
  transform-origin: 0 0;
}
.row { padding: 4px 9px; }

/* ===== v14: live units and panic ===== */
.unit-list {
  max-height: 58px;
  overflow-y: auto;
  scrollbar-width: none;
}
.unit-list::-webkit-scrollbar { display: none; }
.unit-row { padding: 1px 3px; border-radius: 3px; }
.unit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.unit-row.alert {
  animation: panic-flash 0.5s steps(1) infinite;
}
@keyframes panic-flash {
  0%   { background: #d62828; color: #ffffff; }
  50%  { background: transparent; color: #ff6b6b; }
}
.unit-row.alert .unit-dot { background: #ff4d4d; box-shadow: 0 0 0 2px #5a0c0c; }

/* ===== v15: voice ===== */
.indicators #ind-tx.lit { color: #ff6b6b; }
.indicators #ind-rx.lit { color: #7ee08a; }
.unit-row.talking .unit-name { color: #7ee08a; }
.unit-row.talking .unit-dot { background: #b8ffc2; box-shadow: 0 0 6px 2px #7ee08a; }


/* ===== v16: handheld body =====
   The same radio with its parts rearranged. Every element, handler and state is the same one the vehicle
   radio uses; only the layout and sizes below change. Nothing here changes what a control does. */
.key-alt { display: none; }

.radio.hh {
  width: 290px;
  border-radius: 22px;
  padding: 8px 10px 10px;
}
.radio.hh { position: absolute; }
/* The vent pattern is gone, but the top edge is still the place you hold to drag the overlay. */
.radio.hh .grille {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 14px;
  padding: 0; margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 22px 22px 0 0;
}
.radio.hh .rib { display: none; }
.radio.hh .face {
  display: grid;
  grid-template-columns: 20px repeat(3, minmax(0, 1fr));
  column-gap: 7px;
  row-gap: 6px;
  align-items: center;
  margin-top: 0;
}
/* The column wrappers disappear so every control can be placed on the one grid. */
.radio.hh .col-left,
.radio.hh .col-screen,
.radio.hh .col-controls,
.radio.hh .col-keys,
.radio.hh .col-panic,
.radio.hh .bottom-btns { display: contents; }

/* Row 1: knobs left, PANIC right */
.radio.hh .knobs { grid-column: 2 / 4; grid-row: 1; justify-self: start; gap: 16px; }
.radio.hh .knob { width: 50px; height: 50px; }
.radio.hh .knob::after { top: 6px; height: 13px; }
.radio.hh .knob-wrap { gap: 3px; font-size: 9px; }
.radio.hh .panic { grid-column: 4; grid-row: 1; justify-self: end; margin: 0 8px 0 0; width: 44px; height: 44px; font-size: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 0 0 1px; line-height: 1; text-align: center; }

/* Row 2: screen, same content as the vehicle screen, scaled down and made squarer, with a bigger outline */
.radio.hh .screen {
  grid-column: 2 / 5; grid-row: 2;
  zoom: 0.66;
  width: 379px;
  height: 330px;
  justify-self: start;
  margin: 6px 0 6px -10.8px;   /* the frame reaches the right edge of the body and stops just short of the PTT on the left */
  box-shadow:
    inset 0 0 0 1px #2a5a8f,
    inset 0 0 14px rgba(0, 0, 0, 0.5),
    0 0 0 6px #0a0a0b,
    0 0 0 8px #3a3c41,
    0 0 0 9px #0a0a0b;
}

/* PTT sits on the left edge of the radio, flush with the side */
.radio.hh .ptt {
  grid-column: 1; grid-row: 2 / 5;
  align-self: stretch;
  width: 20px; height: auto;
  margin: 0 0 0 -10px;
  justify-self: stretch;
  border-radius: 0 9px 9px 0;
  border-width: 2px 2px 2px 0;
  writing-mode: vertical-rl;
  letter-spacing: 3px;
  font-size: 12px;
  box-shadow:
    inset 0 3px 0 var(--ptt-hi),
    inset 0 -5px 0 rgba(0, 0, 0, 0.35),
    0 4px 8px rgba(0, 0, 0, 0.5);
}
.radio.hh .ptt.tx {
  box-shadow: inset 0 3px 0 var(--ptt-tx-hi), inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}
.radio.hh .ptt:not(:disabled):active {
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.45);
}

/* Row 3: settings + OK on the left, D-pad in the middle, home + back on the right */
.radio.hh #btn-settings { grid-column: 2; grid-row: 3; align-self: start; }
.radio.hh #btn-ok       { grid-column: 2; grid-row: 3; align-self: end; }
.radio.hh #btn-home     { grid-column: 4; grid-row: 3; align-self: start; }
.radio.hh #btn-back     { grid-column: 4; grid-row: 3; align-self: end; }
.radio.hh .bottom-btns button { padding: 4px 0; width: 100%; font-size: 13px; }
.radio.hh .dpad {
  grid-column: 3; grid-row: 3; justify-self: center;
  grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); gap: 2px;
}

/* Row 4: keypad, with the letters beside the numbers */
.radio.hh .keypad { grid-column: 2 / 5; grid-row: 4; gap: 5px; }
.radio.hh .key {
  min-height: 32px;
  padding: 3px 2px;
  flex-direction: row;
  gap: 4px;
  border-radius: 8px;
}
.radio.hh .key-name { display: none; }
.radio.hh .key-num { font-size: 16px; }
.radio.hh .key-alt {
  display: inline;
  font-family: var(--font-label);
  font-size: 7px;
  letter-spacing: 0.2px;
  color: var(--key-sub);
  margin-top: 4px;
}

/* Row 5: green PWR button (the same power button) and the TX / RX / MIC lights */
.radio.hh .power {
  grid-column: 2; grid-row: 5;
  width: 100%; height: 26px;
  border-radius: 8px;
  font-size: 0;
  box-shadow: inset 0 2px 0 var(--green-hi), inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 2px 3px rgba(0, 0, 0, 0.45);
}
.radio.hh .power::after {
  content: "PWR";
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}
/* TX / RX / MIC lights are hidden for now (the radio still updates them). */
.radio.hh .indicators { display: none; }

/* Row 5, beside PWR: SWITCH RADIO */
.radio.hh .switch {
  grid-column: 3 / 5; grid-row: 5;
  width: 100%;
  height: 26px;
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-radius: 5px;
}

/* DFN (handheld only): red; brighter and pressed in while deafened */
.radio.hh #btn-back {
  background: #8f1f1f;
  color: #ffd9d9;
  border-color: #3a0a0a;
  box-shadow: inset 0 2px 0 #c24b4b, inset 0 -3px 0 #5c1010, 0 2px 3px rgba(0, 0, 0, 0.45);
}
.radio.hh #btn-back.dfn-on {
  background: var(--red-hi);
  color: #fff;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(1px);
}

/* The up and down arrows are drawn smaller than left and right by the font; scale them to match. */
.radio.hh .dir-up, .radio.hh .dir-down { font-size: 15px; }


/* DFN on the vehicle radio: the PANIC button's twin, in red. Brighter and pressed in while deafened. */
.dfn-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid #3a0a0a;
  background: #a32424;
  color: #ffe3e3;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow:
    inset 0 3px 0 #d65a5a,
    inset 0 -4px 0 #5c1010,
    0 0 0 3px #1a1b1e,
    0 0 0 4px #0a0a0b;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  display: flex; align-items: center; justify-content: center; padding: 0 0 0 1px; line-height: 1;
}
.dfn-btn:active { transform: translateY(1px); }
.dfn-btn.dfn-on {
  background: var(--red-hi);
  color: #fff;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5), 0 0 0 3px #1a1b1e, 0 0 0 4px #0a0a0b;
  transform: translateY(1px);
}
.radio.hh .dfn-btn { display: none; }   /* the handheld has its own DFN button */


/* ===== v17: top view =====
   The same radio seen from above. Real controls are hidden while it shows; the buttons here press them. */
.top-btn { display: none; }
.radio.hh .top-btn { display: block; grid-column: 4; grid-row: 5; width: 100%; height: 26px; padding: 0; font-size: 9px; letter-spacing: 0.3px; border-radius: 5px; line-height: 1.05; }
.radio.hh .switch:not(.top-btn) { grid-column: 3; font-size: 8.5px; letter-spacing: 0; line-height: 1.05; white-space: normal; }

.topview { display: none; }
.radio.top {
  position: absolute;
  width: 406px; height: 322px;
  padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
}
.radio.top .face, .radio.top .rib { display: none; }
.radio.top .topview { display: block; position: absolute; left: 0; top: 0; width: 580px; height: 460px; transform: scale(0.7); transform-origin: 0 0; }
/* The rear bump is the place you hold to drag the overlay. */
.radio.top .grille { position: absolute; left: 102px; top: 39px; width: 209px; height: 20px; padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none; z-index: 5; cursor: grab; }
.tv-art { position: absolute; left: 0; top: 0; pointer-events: none; }
.tv-art svg { display: block; }

.tv-panic, .tv-pwr, .tv-dfn, .tv-front { position: absolute; cursor: pointer; font-family: var(--font-label); font-weight: bold; padding: 0; line-height: 1; }
.tv-panic {
  left: 142px; top: 114px; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--orange-lo); background: radial-gradient(circle at 40% 35%, var(--orange-hi), var(--orange) 55%, var(--orange-lo));
  color: #3a1a00; font-size: 8px; letter-spacing: 0.3px;
}
.tv-panic:active { transform: translateY(1px); }
.tv-panic.active { filter: brightness(1.25) drop-shadow(0 0 8px rgba(240, 138, 60, 0.9)); }
.tv-pwr {
  left: 173px; top: 329px; width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid #1f7a33; background: radial-gradient(circle at 40% 35%, var(--green-hi), var(--green) 60%, #1f7a33);
  color: #0b2a12; font-size: 8px;
}
.tv-pwr.off { filter: brightness(0.55); }
.tv-pwr:active { transform: translateY(1px); }
.tv-dfn {
  left: 411px; top: 332px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #8a1a1a; background: radial-gradient(circle at 40% 35%, var(--red-hi), var(--red) 60%, #8a1a1a);
}
.tv-dfn.dfn-on { filter: brightness(1.3) drop-shadow(0 0 8px rgba(239, 83, 80, 0.9)); transform: translateY(1px); }
.tv-front {
  left: 238px; top: 366px; width: 100px; height: 24px; border-radius: 9px;
  border: 2px solid var(--key-edge); background: var(--key); color: var(--key-text);
  font-size: 8px; letter-spacing: 0.8px; box-shadow: inset 0 2px 0 var(--key-hi), inset 0 -2px 0 var(--key-lo);
}
.tv-front:active { transform: translateY(1px); }

.tv-screen {
  position: absolute; left: 210px; top: 109px; width: 196px; height: 72px; border-radius: 5px; overflow: hidden;
  background: linear-gradient(#0b2c52, #081f3a); color: #fff;
}
.tv-screen.off { background: #05080c; }
.tv-screen.off > * { visibility: hidden; }
.tv-hdr { display: flex; justify-content: space-between; height: 15px; padding: 0 7px; align-items: center; background: var(--highlight); font: bold 9.5px var(--font-lcd); }
.tv-ch { margin: 9px 0 0 9px; font: 9.5px var(--font-lcd); color: rgba(232, 244, 255, 0.7); height: 11px; }
.tv-name { margin: 2px 9px 0; font: 800 22px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 26px; }
.tv-st { margin: 0 9px; font: 9px var(--font-lcd); color: var(--green-hi); height: 11px; white-space: nowrap; overflow: hidden; }
.tv-st.tx { color: var(--ptt-tx-hi); }

.tv-dialhit { position: absolute; left: 214px; top: 200px; width: 148px; height: 148px; border-radius: 50%; }
.tv-volhit { position: absolute; left: 432px; top: 156px; width: 116px; height: 116px; border-radius: 50%; }
.tv-num { position: absolute; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; padding: 0; }
.tv-num:hover { background: rgba(154, 231, 255, 0.22); }
.tv-num.on { background: rgba(58, 120, 194, 0.45); box-shadow: 0 0 0 2px rgba(154, 231, 255, 0.6); }

/* ===== v17: Fire theme =====
   When the server says you are on the Fire team the radio turns bright lime, like a fire-service handheld: lime body,
   black keys and knobs. Colours only: nothing else changes. */
.radio.fire {
  --body: #aee00c;
  --body-edge: #3b4f00;
  --body-hi: #d6f750;
  --rib: #1b1d17;
  --rib-hi: #3b3e33;
  --dark: #15170f;
  --key: #2c2e2a;
  --key-hi: #4b4e46;
  --key-lo: #141512;
  --key-edge: #090a08;
  --ptt: #2c2e2a;
  --ptt-hi: #4b4e46;
}
/* printed labels that sit on the lime body need to be dark */
.radio.fire .knob-wrap span, .radio.fire .indicators, .radio.fire .indicators span { color: #2a3400; }
.radio.fire .mic-on { color: #2a3400; }
.radio.fire .tv-num.on { background: rgba(185, 214, 43, 0.4); box-shadow: 0 0 0 2px rgba(220, 240, 92, 0.7); }
.radio.fire .tv-art circle[fill="#9fe7ff"] { fill: #dcf05c; }
.radio.fire .tv-art text[letter-spacing="2"] { fill: #2a3400; }
.radio.fire #tv-bg stop:nth-child(1) { stop-color: #c6ef3a; }
.radio.fire #tv-bg stop:nth-child(2) { stop-color: #aee00c; }
.radio.fire #tv-bg stop:nth-child(3) { stop-color: #8fba00; }
.radio.fire #tv-ear stop:nth-child(1) { stop-color: #bdea22; }
.radio.fire #tv-ear stop:nth-child(2) { stop-color: #98c400; }
.radio.fire #tv-wall stop:nth-child(1) { stop-color: #4a6200; }
.radio.fire #tv-wall stop:nth-child(2) { stop-color: #1f2a00; }
.radio.fire #tv-cap stop:nth-child(1) { stop-color: #55574f; }
.radio.fire #tv-cap stop:nth-child(2) { stop-color: #2b2c28; }
.radio.fire #tv-cap stop:nth-child(3) { stop-color: #0f100d; }

/* ===== v17: bigger, easier to read screen text (same screen size) ===== */
.screen { font-size: 17px; }
.hdr { padding: 3px 10px; }
.sub { padding: 2px 10px; }
.row { padding: 3px 10px; }
.row-label { width: 142px; }
.row-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.softkey { padding: 6px 0; font-size: 16px; }
.ch-num { font-size: 15px; }
.ch-name { font-size: 30px; }
.radio-view { padding: 6px 10px; gap: 2px; }
.ch-status { font-size: 15px; min-height: 17px; }
.units { padding: 4px 8px; }
.units-title { font-size: 13px; margin-bottom: 2px; }
.unit-list { max-height: 40px; }
.unit-row { font-size: 17px; padding: 0 3px; }
.unit-dot { width: 10px; height: 10px; }
.unit-tag { font-size: 12px; }

/* handheld: use the taller screen. The units box stretches to fill it and the list scrolls inside it */
.radio.hh .radio-view { padding: 8px 10px; gap: 4px; }
.radio.hh .units { flex: 1; min-height: 0; margin-top: 4px; display: flex; flex-direction: column; }
.radio.hh .unit-list { flex: 1; max-height: none; min-height: 0; }

/* handheld: the screen is taller, so the text is bigger still and fills it */
.radio.hh .screen { font-size: 21px; }
.radio.hh .hdr { padding: 4px 10px; }
.radio.hh .sub { padding: 3px 10px; }
.radio.hh .row { padding: 3px 10px; }
.radio.hh .row-label { width: 152px; }
.radio.hh .softkey { padding: 7px 0; font-size: 18px; }
.radio.hh .ch-num { font-size: 18px; }
.radio.hh .ch-name { font-size: 36px; }
.radio.hh .ch-status { font-size: 18px; min-height: 20px; }
.radio.hh .units-title { font-size: 15px; margin-bottom: 3px; }
.radio.hh .unit-row { font-size: 21px; padding: 1px 3px; }
.radio.hh .unit-dot { width: 12px; height: 12px; }
.radio.hh .unit-tag { font-size: 14px; }

/* top view: settings page on the small screen, with MENU and arrow keys along the bottom edge */
.tv-menu, .tv-k { position: absolute; cursor: pointer; font-family: var(--font-label); font-weight: bold; padding: 0; line-height: 1;
  border: 2px solid var(--key-edge); background: var(--key); color: var(--key-text); box-shadow: inset 0 2px 0 var(--key-hi), inset 0 -2px 0 var(--key-lo); }
.tv-menu { left: 196px; top: 367px; width: 34px; height: 22px; border-radius: 8px; font-size: 7.5px; letter-spacing: 0.5px; }
.tv-k { top: 367px; width: 20px; height: 22px; border-radius: 7px; font-size: 8px; }
#tv-l { left: 316px; } #tv-u { left: 338px; } #tv-d { left: 360px; } #tv-r { left: 382px; }
.tv-front { left: 234px; width: 78px; letter-spacing: 0.4px; }
.tv-menu:active, .tv-k:active { transform: translateY(1px); }
.tv-rows { display: none; }
.tv-screen.list .tv-ch, .tv-screen.list .tv-name, .tv-screen.list .tv-st { display: none; }
.tv-screen.list .tv-rows { display: block; }
.tv-row-unused { display: flex; gap: 6px; padding: 0 7px; height: 19px; align-items: center; font: bold 9.5px var(--font-lcd); cursor: pointer; overflow: hidden; white-space: nowrap; }
.tv-row.selected { background: var(--highlight); box-shadow: inset 0 1px 0 var(--highlight-hi); }
.tv-row .l { width: 64px; flex: none; }
.tv-row .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* top view: bigger text on its small screen */
.tv-hdr { height: 17px; font-size: 11px; }
.tv-ch { margin: 7px 0 0 9px; font-size: 11px; height: 13px; }
.tv-name { font-size: 25px; line-height: 27px; margin-top: 1px; }
.tv-st { font-size: 11px; height: 13px; }
.tv-rows { cursor: pointer; }
.tv-one-top { display: flex; justify-content: space-between; padding: 6px 9px 0; font: bold 11px var(--font-lcd); color: rgba(232, 244, 255, 0.72); height: 14px; }
.tv-one-val { padding: 0 9px; margin-top: 4px; font-family: var(--font-ui); font-weight: 800; color: #fff; line-height: 32px; height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* top view: bigger PWR (moved up into the free space) and a bigger bottom row with a cogwheel settings key */
.tv-pwr { left: 150px; top: 277px; width: 52px; height: 52px; font-size: 11px; }
.tv-menu { left: 176px; top: 364px; width: 28px; height: 29px; border-radius: 9px; font-size: 17px; letter-spacing: 0; }
.tv-front { left: 209px; top: 364px; width: 76px; height: 29px; border-radius: 9px; font-size: 9.5px; letter-spacing: 0.4px; }
.tv-k { top: 364px; width: 27px; height: 29px; border-radius: 8px; font-size: 11px; }
#tv-l { left: 290px; } #tv-u { left: 320px; } #tv-d { left: 350px; } #tv-r { left: 380px; }

/* website demo only: the handheld keeps its single wide VEHICLE RADIO button, and the top view is shown as its own radio */
.radio.demo .top-btn { display: none !important; }
.radio.demo.hh .switch:not(.top-btn) { grid-column: 3 / 5; font-size: 10px; letter-spacing: 0.5px; }

/* ===== Radio Design Packs =====
   Library packs are colour sets added as a class on .radio (for example .radio.dot). Same layout and functions. */
.radio.dot {
  --body: #ffb000;
  --body-edge: #6b4a00;
  --body-hi: #ffd24d;
  --rib: #1b1d17;
  --rib-hi: #3b3e33;
  --dark: #15170f;
  --key: #2c2e2a;
  --key-hi: #4b4e46;
  --key-lo: #141512;
  --key-edge: #090a08;
  --ptt: #2c2e2a;
  --ptt-hi: #4b4e46;
}
/* printed labels that sit on the lime body need to be dark */
.radio.dot .knob-wrap span, .radio.dot .indicators, .radio.dot .indicators span { color: #3a2600; }
.radio.dot .mic-on { color: #3a2600; }
.radio.dot .tv-num.on { background: rgba(255,190,40,.4); box-shadow: 0 0 0 2px rgba(255,220,100,.7); }
.radio.dot .tv-art circle[fill="#9fe7ff"] { fill: #fff0a0; }
.radio.dot .tv-art text[letter-spacing="2"] { fill: #3a2600; }
.radio.dot #tv-bg stop:nth-child(1) { stop-color: #ffc61f; }
.radio.dot #tv-bg stop:nth-child(2) { stop-color: #ffb000; }
.radio.dot #tv-bg stop:nth-child(3) { stop-color: #e69500; }
.radio.dot #tv-ear stop:nth-child(1) { stop-color: #ffbd0f; }
.radio.dot #tv-ear stop:nth-child(2) { stop-color: #e09200; }
.radio.dot #tv-wall stop:nth-child(1) { stop-color: #7a5200; }
.radio.dot #tv-wall stop:nth-child(2) { stop-color: #3a2700; }
.radio.dot #tv-cap stop:nth-child(1) { stop-color: #55574f; }
.radio.dot #tv-cap stop:nth-child(2) { stop-color: #2b2c28; }
.radio.dot #tv-cap stop:nth-child(3) { stop-color: #0f100d; }


.radio.dot{--orange:#e8480c;--orange-hi:#ff7a45;--orange-lo:#a02e00}

/* SWITCH THEME: vehicle radio only, and only when the network has more than one design to switch between */
.theme-btn[hidden] { display: none; }
.radio.hh .theme-btn, .radio.top .theme-btn { display: none; }
.theme-btn { margin-top: 8px; }

/* ===== Design pack: Retro (vehicle radio only) =====
   A classic car-radio layout: knobs at the sides, a dial window in the middle, big push keys under it.
   Same buttons, same functions: PWR PTT PANIC DFN MENU are the real power / PTT / panic / deafen / settings keys,
   the small row is the arrows, OK, BACK and HOME. Colours come from the --rt-* values so every theme has a version. */
.radio.dsg-retro { --rt-body: #c6c9ce; --rt-edge: #6a6e75; --rt-rib: #b6b9bf; --rt-rib2: #d9dce0; --rt-hi: #e4e6ea; --rt-frame: #a9adb3; --rt-ink: #3c4046; }
.radio.dsg-retro.fire { --rt-body: #aee00c; --rt-edge: #3b4f00; --rt-rib: #9bc90a; --rt-rib2: #c7ef40; --rt-hi: #d6f750; --rt-frame: #8fba00; --rt-ink: #2a3400; }
.radio.dsg-retro.dot { --rt-body: #ffb000; --rt-edge: #6b4a00; --rt-rib: #e69b00; --rt-rib2: #ffc94d; --rt-hi: #ffd24d; --rt-frame: #e09500; --rt-ink: #3a2600; }

.radio.dsg-retro:not(.hh):not(.top) {
  width: 820px; max-width: none; height: 380px; padding: 0; position: relative;
  background: var(--rt-body); border: 3px solid var(--rt-edge); border-radius: 30px;
  box-shadow: inset 0 0 0 3px var(--rt-hi), 0 14px 26px rgba(0, 0, 0, 0.5);
}
.radio.dsg-retro:not(.hh):not(.top) .grille,
.radio.dsg-retro:not(.hh):not(.top) .col-keys,
.radio.dsg-retro:not(.hh):not(.top) #top,
.radio.dsg-retro:not(.hh):not(.top) #center,
.radio.dsg-retro:not(.hh):not(.top) .softkeys,
.radio.dsg-retro:not(.hh):not(.top) .sub { display: none; }
.radio.dsg-retro:not(.hh):not(.top) .face { position: absolute; inset: 0; margin: 0; display: block; }
.radio.dsg-retro:not(.hh):not(.top) .face > div,
.radio.dsg-retro:not(.hh):not(.top) .knobs,
.radio.dsg-retro:not(.hh):not(.top) .dpad,
.radio.dsg-retro:not(.hh):not(.top) .bottom-btns { display: contents; }
/* ribbed centre panel */
.radio.dsg-retro:not(.hh):not(.top) .face::before {
  content: ""; position: absolute; left: 192px; top: 14px; width: 432px; height: 346px; border-radius: 20px;
  border: 3px solid var(--rt-edge);
  background: repeating-linear-gradient(90deg, var(--rt-rib) 0 7px, var(--rt-rib2) 7px 9px, var(--rt-rib) 9px 14px);
}
/* dial window */
.radio.dsg-retro:not(.hh):not(.top) .screen {
  position: absolute; left: 212px; top: 32px; width: 392px; height: 176px; margin: 0;
  background: #12100c; border: 4px solid var(--rt-frame); outline: 3px solid var(--rt-edge); border-radius: 10px;
  box-shadow: inset 0 0 0 2px #2b2a27; color: #f4eacb; font-size: 14px;
}
.radio.dsg-retro:not(.hh):not(.top) .screen::before {   /* tuner scale and needle */
  content: ""; position: absolute; left: 14px; right: 14px; top: 6px; height: 16px; z-index: 2;
  background: repeating-linear-gradient(90deg, #e9d9a8 0 2px, transparent 2px 12px) bottom / 100% 6px no-repeat,
              repeating-linear-gradient(90deg, #e9d9a8 0 2px, transparent 2px 36px) bottom / 100% 12px no-repeat;
}
.radio.dsg-retro:not(.hh):not(.top) .screen::after {
  content: ""; position: absolute; top: 3px; width: 4px; height: 26px; background: #e0402e; z-index: 3;
  left: calc(14px + (var(--ch, 1) - 1) * 36px);
}
.radio.dsg-retro:not(.hh):not(.top) .screen .hdr { background: transparent; color: #e9d9a8; margin-top: 22px; padding: 2px 10px; font-size: 12px; }
.radio.dsg-retro:not(.hh):not(.top) .screen .radio-view { padding: 2px 10px; }
.radio.dsg-retro:not(.hh):not(.top) .screen .ch-num { color: #e9d9a8; font-size: 12px; }
.radio.dsg-retro:not(.hh):not(.top) .screen .ch-name { color: #f4eacb; font-size: 26px; }
.radio.dsg-retro:not(.hh):not(.top) .screen .ch-status { color: #9fb0a0; font-size: 12px; min-height: 14px; }
.radio.dsg-retro:not(.hh):not(.top) .screen .units { background: transparent; border-color: #4a4638; padding: 2px 8px; }
.radio.dsg-retro:not(.hh):not(.top) .screen .units-title { color: #e9d9a8; font-size: 11px; }
.radio.dsg-retro:not(.hh):not(.top) .screen .unit-row { color: #f4eacb; font-size: 14px; }
.radio.dsg-retro:not(.hh):not(.top) .screen .unit-list { max-height: 34px; }
/* the five big push keys */
.radio.dsg-retro:not(.hh):not(.top) #power, .radio.dsg-retro:not(.hh):not(.top) #ptt, .radio.dsg-retro:not(.hh):not(.top) #panic,
.radio.dsg-retro:not(.hh):not(.top) #dfn, .radio.dsg-retro:not(.hh):not(.top) #btn-settings {
  position: absolute; top: 222px; width: 72px; height: 62px; margin: 0; padding: 0; border-radius: 11px;
  background: #17181a; border: 3px solid #050506; color: #f2f4f7; cursor: pointer;
  font-family: var(--font-label); font-size: 17px; font-weight: bold; letter-spacing: 1px; text-shadow: none;
  box-shadow: inset 0 5px 0 #3a3c41, inset 0 -5px 0 #0c0d0e, 0 3px 3px rgba(0, 0, 0, 0.5);
}
.radio.dsg-retro:not(.hh):not(.top) #power { left: 218px; color: #7ee08a; font-size: 0; }
.radio.dsg-retro:not(.hh):not(.top) #power::after { content: "PWR"; font-size: 17px; }
.radio.dsg-retro:not(.hh):not(.top) #ptt { left: 298px; }
.radio.dsg-retro:not(.hh):not(.top) #panic { left: 378px; color: var(--orange); font-size: 14px; }
.radio.dsg-retro:not(.hh):not(.top) #dfn { left: 458px; }
.radio.dsg-retro:not(.hh):not(.top) #btn-settings { left: 538px; font-size: 0; }
.radio.dsg-retro:not(.hh):not(.top) #btn-settings::after { content: "MENU"; font-size: 15px; }
.radio.dsg-retro:not(.hh):not(.top) #panic.active { background: var(--red); color: #fff; }
.radio.dsg-retro:not(.hh):not(.top) .radio-off #power { color: #f2f4f7; }
/* small key row: arrows, OK, BACK, HOME */
.radio.dsg-retro:not(.hh):not(.top) #left, .radio.dsg-retro:not(.hh):not(.top) #up, .radio.dsg-retro:not(.hh):not(.top) #down,
.radio.dsg-retro:not(.hh):not(.top) #right, .radio.dsg-retro:not(.hh):not(.top) #btn-ok, .radio.dsg-retro:not(.hh):not(.top) #btn-back,
.radio.dsg-retro:not(.hh):not(.top) #btn-home {
  position: absolute; top: 298px; width: 50px; height: 34px; margin: 0; padding: 0; border-radius: 8px;
  background: #17181a; border: 2px solid #050506; color: #f2f4f7; cursor: pointer; font-size: 13px; font-weight: bold;
  font-family: var(--font-label); box-shadow: inset 0 3px 0 #3a3c41, inset 0 -3px 0 #0c0d0e, 0 2px 2px rgba(0, 0, 0, 0.5);
}
.radio.dsg-retro:not(.hh):not(.top) #left { left: 218px; }
.radio.dsg-retro:not(.hh):not(.top) #up { left: 274px; }
.radio.dsg-retro:not(.hh):not(.top) #down { left: 330px; }
.radio.dsg-retro:not(.hh):not(.top) #right { left: 386px; }
.radio.dsg-retro:not(.hh):not(.top) #btn-ok { left: 442px; }
.radio.dsg-retro:not(.hh):not(.top) #btn-back { left: 498px; }
.radio.dsg-retro:not(.hh):not(.top) #btn-home { left: 554px; }
.radio.dsg-retro:not(.hh):not(.top) .indicators { position: absolute; left: 222px; top: 342px; padding: 0; color: #3c4046; font-size: 12px; }
.radio.dsg-retro:not(.hh):not(.top) .indicators .mic-on { color: #3c4046; }
/* knobs at the sides */
.radio.dsg-retro:not(.hh):not(.top) .knob-wrap { position: absolute; top: 108px; color: var(--rt-ink); font-size: 14px; gap: 10px; }
.radio.dsg-retro:not(.hh):not(.top) .knob-wrap:nth-child(1) { left: 37px; }
.radio.dsg-retro:not(.hh):not(.top) .knob-wrap:nth-child(2) { left: 663px; }
.radio.dsg-retro:not(.hh):not(.top) .knob {
  width: 118px; height: 118px; background: #111214; border: 3px solid #050506;
  box-shadow: inset 0 0 0 7px #1c1d20, 0 0 0 9px var(--rt-frame), 0 0 0 11px var(--rt-edge), 0 6px 6px rgba(0, 0, 0, 0.35);
}
.radio.dsg-retro:not(.hh):not(.top) .knob::after { top: 14px; width: 6px; height: 40px; margin-left: -3px; }
/* mode buttons on the right bezel */
.radio.dsg-retro:not(.hh):not(.top) #switch, .radio.dsg-retro:not(.hh):not(.top) #theme {
  position: absolute; left: 654px; width: 148px; height: 30px; padding: 0; font-size: 12px; margin: 0;
}
.radio.dsg-retro:not(.hh):not(.top) #switch { top: 292px; }
.radio.dsg-retro:not(.hh):not(.top) #theme { top: 330px; }

.radio.dsg-retro:not(.hh):not(.top) .col-keys, .radio.dsg-retro:not(.hh):not(.top) .keypad { display: none !important; }

/* ===== Design pack: Retro, handheld ===== (charcoal body, steel pinstripe, old green LCD, square matte keys; same grid and functions as the standard handheld) */
.radio.dsg-retro.hh { --hb: #2a2b2c; --hb-hi: #4a4b4d; --ht: #aeb3b9; --hk: #1b1c1d; --hink: #dedbcc; --hlcd: #a3b092; --hlcd-ink: #1f2a1a; }
.radio.dsg-retro.hh.fire { --hb: #27300a; --hb-hi: #46540f; --ht: #aee00c; --hink: #eef8c0; }
.radio.dsg-retro.hh.dot { --hb: #2c2410; --hb-hi: #4d3f1a; --ht: #ffb000; --hink: #ffe9b0; }
.radio.dsg-retro.hh {
  --body: var(--hb); --body-edge: #0d0d0e; --body-hi: var(--hb-hi);
  --key: var(--hk); --key-hi: #3a3b3d; --key-lo: #0a0a0a; --key-edge: #050505; --key-text: var(--hink); --key-sub: #8d8f90;
  --ptt: #1f2022; --ptt-hi: #3a3b3d; --dark: #17181a;
  padding-top: 82px; border: 3px solid #0d0d0e; border-radius: 28px;
  box-shadow: inset 0 0 0 3px var(--hb-hi), inset 0 0 0 5px var(--hb), inset 0 0 0 6px var(--ht), 0 14px 26px rgba(0, 0, 0, 0.5);
}
.radio.dsg-retro.hh::before {   /* name plate */
  content: "REALITY"; position: absolute; left: 22px; right: 22px; top: 18px; height: 52px; z-index: 1;
  display: flex; justify-content: center; align-items: flex-start; padding-top: 8px;
  background: #17181a; border: 3px solid #050505; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ht);
  color: var(--hink); font-family: var(--font-label); font-weight: bold; font-size: 19px; letter-spacing: 7px; text-indent: 7px;
}
.radio.dsg-retro.hh::after {
  content: "MODEL RL-17  \00B7  TWO-WAY"; position: absolute; left: 22px; right: 22px; top: 49px; z-index: 2; text-align: center;
  color: var(--ht); font-family: var(--font-label); font-weight: bold; font-size: 8px; letter-spacing: 3px; pointer-events: none;
}
.radio.dsg-retro.hh .grille { display: none; }
.radio.dsg-retro.hh .knob-wrap span, .radio.dsg-retro.hh .indicators, .radio.dsg-retro.hh .indicators span { color: var(--hink); }
.radio.dsg-retro.hh .knob {   /* knurled edge */
  background: repeating-conic-gradient(#0f1011 0 9deg, #2e3032 9deg 18deg); border: 2px solid #050505;
  box-shadow: inset 0 0 0 6px #17181a, 0 0 0 2px var(--ht), 0 0 0 4px #050505;
}
.radio.dsg-retro.hh .knob::after { background: var(--hink); }
.radio.dsg-retro.hh .panic { background: #c4481a; border: 3px solid #17181a; box-shadow: 0 0 0 2px var(--ht), inset 0 0 0 2px #e07a4a; color: #fff; }
.radio.dsg-retro.hh .panic.active { background: var(--red); }
.radio.dsg-retro.hh .screen {
  background: var(--hlcd); color: var(--hlcd-ink);
  box-shadow: inset 0 0 0 2px #7d8a6f, 0 0 0 6px #17181a, 0 0 0 8px var(--ht), 0 0 0 10px #050505;
}
.radio.dsg-retro.hh .screen .hdr { background: transparent; color: var(--hlcd-ink); border-bottom: 2px solid var(--hlcd-ink); font-weight: bold; }
.radio.dsg-retro.hh .screen .sub { background: transparent; color: var(--hlcd-ink); border-bottom: 1px solid #7d8a6f; }
.radio.dsg-retro.hh .screen .ch-num, .radio.dsg-retro.hh .screen .units-title { color: #3a4a30; }
.radio.dsg-retro.hh .screen .ch-name, .radio.dsg-retro.hh .screen .unit-row, .radio.dsg-retro.hh .screen .unit-row .unit-name { color: var(--hlcd-ink); }
.radio.dsg-retro.hh .screen .ch-status { color: #2f5a1a; font-weight: bold; }
.radio.dsg-retro.hh .screen .units { background: transparent; border-color: #5d6b50; }
.radio.dsg-retro.hh .screen .unit-dot { background: #2f4a22; box-shadow: none; }
.radio.dsg-retro.hh .screen .unit-row.talking { background: var(--hlcd-ink); }
.radio.dsg-retro.hh .screen .unit-row.talking .unit-name { color: var(--hlcd); }
.radio.dsg-retro.hh .screen .unit-row.talking .unit-dot { background: var(--hlcd); box-shadow: none; }
.radio.dsg-retro.hh .screen .unit-tag { color: #3a4a30; }
.radio.dsg-retro.hh .screen .row.selected { background: var(--hlcd-ink); color: var(--hlcd); }
.radio.dsg-retro.hh .softkeys { background: var(--hlcd); border-top: 2px solid var(--hlcd-ink); }
.radio.dsg-retro.hh .softkey { background: var(--hlcd); color: var(--hlcd-ink); border-left-color: var(--hlcd-ink); }
.radio.dsg-retro.hh .softkey.active { background: var(--hlcd-ink); color: var(--hlcd); box-shadow: none; }
/* old fashioned keys: square, matte, a pressed-in face and a hard shadow underneath */
.radio.dsg-retro.hh .key, .radio.dsg-retro.hh .bottom-btns button, .radio.dsg-retro.hh .dir, .radio.dsg-retro.hh .switch,
.radio.dsg-retro.hh .power, .radio.dsg-retro.hh #btn-back {
  border-radius: 4px; border: 2px solid #050505;
  box-shadow: inset 0 0 0 2px #313234, 0 2px 0 #000;
}
.radio.dsg-retro.hh .dir-center { border-radius: 50%; }
.radio.dsg-retro.hh .key { background: #1b1c1d; }
.radio.dsg-retro.hh .key:active, .radio.dsg-retro.hh .dir:active, .radio.dsg-retro.hh .bottom-btns button:active { box-shadow: inset 0 0 0 2px #1b1c1d; transform: translateY(2px); }
.radio.dsg-retro.hh #btn-back { background: #8a2216; color: #ffd9d0; box-shadow: inset 0 0 0 2px #a8402e, 0 2px 0 #000; }
.radio.dsg-retro.hh #btn-back.dfn-on { background: #c4481a; color: #fff; box-shadow: inset 0 0 0 2px #e07a4a; }
.radio.dsg-retro.hh .power { background: #1f6a32; color: #e3f5e6; box-shadow: inset 0 0 0 2px #3f9a58, 0 2px 0 #000; }
.radio.dsg-retro.hh .ptt {
  color: var(--hink); border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(0deg, #17181a 0 6px, #2c2d2f 6px 8px);
  box-shadow: 0 2px 0 #000;
}

/* ===== Design pack: British, handheld ===== (a rugged emergency-services handset: black body, colour screen, a coloured band across the top. The band and screen accent follow the theme: Battenburg blue and yellow, Fire red and white, DOT yellow and black) */
.radio.dsg-british.hh { --bb: #222324; --bt-acc: #2e6fbd; --bt-acc-dk: #12307a; --bt-rim: #3a3c3f; }
.radio.dsg-british.hh.fire { --bt-acc: #c4281c; --bt-acc-dk: #7a1c14; --bt-rim: #7a1c14; }
.radio.dsg-british.hh.dot { --bt-acc: #c98a00; --bt-acc-dk: #6b4a00; --bt-rim: #8a6200; }
.radio.dsg-british.hh {
  --body: var(--bb); --body-edge: #050505; --body-hi: var(--bt-rim);
  --key: #1a1b1c; --key-hi: #323436; --key-lo: #0a0a0a; --key-edge: #050505; --key-text: #e4e6e8; --key-sub: #8d9298;
  --ptt: #17181a; --ptt-hi: #3a3c3f; --dark: #101112;
  padding-top: 36px; border: 3px solid #050505; border-radius: 26px;
  box-shadow: inset 0 0 0 3px var(--bt-rim), 0 14px 26px rgba(0, 0, 0, 0.5);
}
.radio.dsg-british.hh::before {   /* the band */
  content: ""; position: absolute; left: 10px; right: 10px; top: 9px; height: 16px; z-index: 1; border: 2px solid #050505;
  background: repeating-conic-gradient(#1b4aa8 0 25%, #f2d21c 0 50%) 0 0 / 16px 16px;
}
.radio.dsg-british.hh.fire::before { background: linear-gradient(#c4281c 0 34%, #e9e9e9 34% 66%, #c4281c 66%); }
.radio.dsg-british.hh.dot::before { background: repeating-conic-gradient(#17181a 0 25%, #ffb000 0 50%) 0 0 / 16px 16px; }
.radio.dsg-british.hh .grille { display: none; }
.radio.dsg-british.hh .knob-wrap span, .radio.dsg-british.hh .indicators, .radio.dsg-british.hh .indicators span { color: #9aa0a6; }
.radio.dsg-british.hh .knob {
  background: repeating-conic-gradient(#101112 0 9deg, #2e3032 9deg 18deg); border: 2px solid #050505;
  box-shadow: inset 0 0 0 6px #17181a, 0 0 0 2px #3a3c3f, 0 0 0 4px #050505;
}
.radio.dsg-british.hh .knob::after { background: #e4e6e8; }
.radio.dsg-british.hh .panic { background: #d9531e; border: 3px solid #2a0a04; box-shadow: inset 0 0 0 2px #f0a070; color: #fff; }
.radio.dsg-british.hh .panic.active { background: var(--red); }
.radio.dsg-british.hh .screen {
  background: #f2f4f6; color: #12161a;
  box-shadow: inset 0 0 0 2px #c4cbd2, 0 0 0 6px #0b0c0d, 0 0 0 8px #3a3c3f, 0 0 0 10px #050505;
}
.radio.dsg-british.hh .screen .hdr { background: var(--bt-acc); color: #fff; }
.radio.dsg-british.hh .screen .sub { background: transparent; color: #4a5560; border-bottom: 1px solid #c4cbd2; }
.radio.dsg-british.hh .screen .ch-num, .radio.dsg-british.hh .screen .units-title, .radio.dsg-british.hh .screen .unit-tag { color: #4a5560; }
.radio.dsg-british.hh .screen .ch-name, .radio.dsg-british.hh .screen .unit-row, .radio.dsg-british.hh .screen .unit-row .unit-name { color: #12161a; }
.radio.dsg-british.hh .screen .ch-status { color: #1f8a3a; font-weight: bold; }
.radio.dsg-british.hh .screen .units { background: transparent; border-color: #b9c1c9; }
.radio.dsg-british.hh .screen .unit-dot { background: #1f8a3a; box-shadow: none; }
.radio.dsg-british.hh .screen .unit-row.talking .unit-name { color: #1f8a3a; }
.radio.dsg-british.hh .screen .unit-row.talking .unit-dot { background: #1f8a3a; box-shadow: 0 0 0 2px #b8e6c4; }
.radio.dsg-british.hh .screen .row.selected { background: var(--bt-acc); color: #fff; }
.radio.dsg-british.hh .softkeys { background: #e4e8ec; }
.radio.dsg-british.hh .softkey { background: #e4e8ec; color: var(--bt-acc-dk); border-left-color: #c4cbd2; }
.radio.dsg-british.hh .softkey.active { background: var(--bt-acc-dk); color: #fff; box-shadow: none; }
.radio.dsg-british.hh .key, .radio.dsg-british.hh .bottom-btns button, .radio.dsg-british.hh .dir, .radio.dsg-british.hh .switch,
.radio.dsg-british.hh .power, .radio.dsg-british.hh #btn-back {
  border-radius: 8px; border: 2px solid #050505; box-shadow: inset 0 0 0 2px #323436, 0 2px 0 #000;
}
.radio.dsg-british.hh .dir-center { border-radius: 50%; }
.radio.dsg-british.hh .key:active, .radio.dsg-british.hh .dir:active, .radio.dsg-british.hh .bottom-btns button:active { box-shadow: inset 0 0 0 2px #1a1b1c; transform: translateY(2px); }
.radio.dsg-british.hh #btn-back { background: #8a1c18; color: #ffe0dc; box-shadow: inset 0 0 0 2px #b84a40, 0 2px 0 #000; }
.radio.dsg-british.hh #btn-back.dfn-on { background: #c4481a; color: #fff; box-shadow: inset 0 0 0 2px #e07a4a; }
.radio.dsg-british.hh .power { background: #1f6a32; color: #eaffee; box-shadow: inset 0 0 0 2px #3f9a58, 0 2px 0 #000; }
.radio.dsg-british.hh .ptt { color: #cfd2d6; border-radius: 0 6px 6px 0; background: repeating-linear-gradient(0deg, #17181a 0 6px, #2c2d2f 6px 8px); box-shadow: 0 2px 0 #000; }

/* ===== Design pack: British, vehicle radio and top view ===== (same black body, colour screen and coloured band as the handheld; theme sets the band and screen accent) */
.radio.dsg-british { --bt-acc: #2e6fbd; --bt-acc-dk: #12307a; --bt-rim: #3a3c3f; }
.radio.dsg-british.fire { --bt-acc: #c4281c; --bt-acc-dk: #7a1c14; --bt-rim: #7a1c14; }
.radio.dsg-british.dot { --bt-acc: #c98a00; --bt-acc-dk: #6b4a00; --bt-rim: #8a6200; }
.radio.dsg-british:not(.top) {
  --body: #222324; --body-edge: #050505; --body-hi: var(--bt-rim);
  --key: #1a1b1c; --key-hi: #323436; --key-lo: #0a0a0a; --key-edge: #050505; --key-text: #e4e6e8; --key-sub: #8d9298;
  --ptt: #17181a; --ptt-hi: #3a3c3f; --dark: #101112;
}
.radio.dsg-british:not(.hh):not(.top) {
  width: 920px; max-width: none; height: 330px; padding: 0; position: relative;
  background: #222324; border: 3px solid #050505; border-radius: 26px;
  box-shadow: inset 0 0 0 3px var(--bt-rim), 0 14px 26px rgba(0, 0, 0, 0.5);
}
.radio.dsg-british:not(.hh):not(.top)::before { content: ""; position: absolute; left: 14px; right: 14px; top: 12px; height: 16px; border: 2px solid #050505;
  background: repeating-conic-gradient(#1b4aa8 0 25%, #f2d21c 0 50%) 0 0 / 16px 16px; }
.radio.dsg-british:not(.hh):not(.top).fire::before { background: linear-gradient(#c4281c 0 34%, #e9e9e9 34% 66%, #c4281c 66%); }
.radio.dsg-british:not(.hh):not(.top).dot::before { background: repeating-conic-gradient(#17181a 0 25%, #ffb000 0 50%) 0 0 / 16px 16px; }
.radio.dsg-british:not(.hh):not(.top)::after { content: "REALITY\A MODEL RS-17"; white-space: pre; position: absolute; left: 813px; top: 262px; width: 84px; text-align: center;
  color: #8d9298; font-family: var(--font-label); font-weight: bold; font-size: 11px; letter-spacing: 1.5px; line-height: 1.5; }
.radio.dsg-british:not(.hh):not(.top) .grille, .radio.dsg-british:not(.hh):not(.top) .sub, .radio.dsg-british:not(.hh):not(.top) .softkeys, .radio.dsg-british:not(.hh):not(.top) #top, .radio.dsg-british:not(.hh):not(.top) .indicators { display: none; }
.radio.dsg-british:not(.hh):not(.top) .face { position: absolute; inset: 0; margin: 0; display: block; }
.radio.dsg-british:not(.hh):not(.top) .face > div, .radio.dsg-british:not(.hh):not(.top) .knobs, .radio.dsg-british:not(.hh):not(.top) .dpad, .radio.dsg-british:not(.hh):not(.top) .bottom-btns, .radio.dsg-british:not(.hh):not(.top) .col-keys { display: contents; }
.radio.dsg-british:not(.hh):not(.top) .screen {
  position: absolute; left: 223px; top: 57px; width: 376px; height: 204px; margin: 0; background: #f2f4f6; color: #12161a;
  border: 0; border-radius: 4px; outline: 10px solid #0b0c0d; box-shadow: 0 0 0 12px #050505; font-size: 14px;
}
/* the knobs, left */
.radio.dsg-british:not(.hh):not(.top) .knob-wrap { position: absolute; left: 41px; color: #9aa0a6; font-size: 12px; gap: 6px; }
.radio.dsg-british:not(.hh):not(.top) .knob-wrap:nth-child(1) { top: 65px; }
.radio.dsg-british:not(.hh):not(.top) .knob-wrap:nth-child(2) { top: 189px; }
.radio.dsg-british:not(.hh):not(.top) .knob { width: 60px; height: 60px; background: repeating-conic-gradient(#101112 0 9deg, #2e3032 9deg 18deg); border: 2px solid #050505;
  box-shadow: inset 0 0 0 7px #17181a, 0 0 0 2px #3a3c3f, 0 0 0 5px #050505; }
.radio.dsg-british:not(.hh):not(.top) .knob::after { top: 8px; width: 6px; height: 18px; margin-left: -3px; background: #e4e6e8; }
/* PWR, DFN, PANIC, PTT column */
.radio.dsg-british:not(.hh):not(.top) #power, .radio.dsg-british:not(.hh):not(.top) #dfn, .radio.dsg-british:not(.hh):not(.top) #panic, .radio.dsg-british:not(.hh):not(.top) #ptt { position: absolute; left: 137px; width: 56px; margin: 0; padding: 0; cursor: pointer;
  font-family: var(--font-label); font-weight: bold; font-size: 14px; letter-spacing: 0.5px; text-shadow: none; }
.radio.dsg-british:not(.hh):not(.top) #power { top: 53px; height: 40px; font-size: 0; background: #1f6a32; color: #eaffee; }
.radio.dsg-british:not(.hh):not(.top) #power::after { content: "PWR"; font-size: 14px; }
.radio.dsg-british:not(.hh):not(.top) #dfn { top: 101px; height: 40px; background: #8a1c18; color: #fff; }
.radio.dsg-british:not(.hh):not(.top) #panic { top: 149px; height: 40px; background: #d9531e; color: #fff; }
.radio.dsg-british:not(.hh):not(.top) #panic.active { background: var(--red); }
.radio.dsg-british:not(.hh):not(.top) #ptt { top: 197px; height: 70px; background: #1a1b1c; color: #e4e6e8; font-size: 15px; }
/* soft keys under the screen */
.radio.dsg-british:not(.hh):not(.top) #btn-back, .radio.dsg-british:not(.hh):not(.top) #btn-home, .radio.dsg-british:not(.hh):not(.top) #btn-settings, .radio.dsg-british:not(.hh):not(.top) #btn-ok { position: absolute; top: 272px; width: 86px; height: 34px; margin: 0; padding: 0; background: #1a1b1c; color: #e4e6e8;
  font-family: var(--font-label); font-weight: bold; font-size: 0; cursor: pointer; text-shadow: none; }
.radio.dsg-british:not(.hh):not(.top) #btn-back { left: 225px; } .radio.dsg-british:not(.hh):not(.top) #btn-home { left: 319px; } .radio.dsg-british:not(.hh):not(.top) #btn-settings { left: 413px; } .radio.dsg-british:not(.hh):not(.top) #btn-ok { left: 507px; }
.radio.dsg-british:not(.hh):not(.top) #btn-back::after { content: "BACK"; font-size: 14px; } .radio.dsg-british:not(.hh):not(.top) #btn-home::after { content: "HOME"; font-size: 14px; }
.radio.dsg-british:not(.hh):not(.top) #btn-settings::after { content: "MENU"; font-size: 14px; } .radio.dsg-british:not(.hh):not(.top) #btn-ok::after { content: "OK"; font-size: 14px; }
/* keypad, right */
.radio.dsg-british:not(.hh):not(.top) .keypad { position: absolute; left: 637px; top: 51px; width: 162px; display: grid; grid-template-columns: repeat(3, 48px); gap: 6px; }
.radio.dsg-british:not(.hh):not(.top) .key { min-height: 38px; height: 38px; padding: 0; }
.radio.dsg-british:not(.hh):not(.top) .key-name { display: none; }
.radio.dsg-british:not(.hh):not(.top) .key-num { font-size: 18px; }
/* arrows */
.radio.dsg-british:not(.hh):not(.top) .dir { position: absolute; margin: 0; padding: 0; font-size: 12px; background: #1a1b1c; color: #e4e6e8; cursor: pointer; }
.radio.dsg-british:not(.hh):not(.top) #up { left: 697px; top: 225px; width: 36px; height: 28px; } .radio.dsg-british:not(.hh):not(.top) #down { left: 697px; top: 281px; width: 36px; height: 28px; }
.radio.dsg-british:not(.hh):not(.top) #left { left: 655px; top: 253px; width: 36px; height: 28px; } .radio.dsg-british:not(.hh):not(.top) #right { left: 739px; top: 253px; width: 36px; height: 28px; }
.radio.dsg-british:not(.hh):not(.top) #center { left: 699px; top: 251px; width: 32px; height: 32px; border-radius: 50%; font-size: 11px; }
/* mode buttons, far right */
.radio.dsg-british:not(.hh):not(.top) #switch, .radio.dsg-british:not(.hh):not(.top) #theme { position: absolute; left: 813px; width: 84px; height: 52px; margin: 0; padding: 2px; font-size: 12px; line-height: 1.2; white-space: normal; }
.radio.dsg-british:not(.hh):not(.top) #switch { top: 51px; } .radio.dsg-british:not(.hh):not(.top) #theme { top: 117px; }
/* every button: square matte, same as the handheld */
.radio.dsg-british:not(.hh):not(.top) #power, .radio.dsg-british:not(.hh):not(.top) #dfn, .radio.dsg-british:not(.hh):not(.top) #panic, .radio.dsg-british:not(.hh):not(.top) #ptt, .radio.dsg-british:not(.hh):not(.top) #btn-back, .radio.dsg-british:not(.hh):not(.top) #btn-home, .radio.dsg-british:not(.hh):not(.top) #btn-settings, .radio.dsg-british:not(.hh):not(.top) #btn-ok, .radio.dsg-british:not(.hh):not(.top) .key, .radio.dsg-british:not(.hh):not(.top) .dir, .radio.dsg-british:not(.hh):not(.top) #switch, .radio.dsg-british:not(.hh):not(.top) #theme {
  border-radius: 8px; border: 2px solid #050505; box-shadow: inset 0 0 0 2px #323436, 0 2px 0 #000; }
.radio.dsg-british:not(.hh):not(.top) #power { box-shadow: inset 0 0 0 2px #3f9a58, 0 2px 0 #000; } .radio.dsg-british:not(.hh):not(.top) #dfn { box-shadow: inset 0 0 0 2px #b84a40, 0 2px 0 #000; } .radio.dsg-british:not(.hh):not(.top) #panic { box-shadow: inset 0 0 0 2px #f0a070, 0 2px 0 #000; }
.radio.dsg-british:not(.hh):not(.top) .key:active, .radio.dsg-british:not(.hh):not(.top) .dir:active { box-shadow: inset 0 0 0 2px #1a1b1c; transform: translateY(2px); }
/* screen colours (vehicle and handheld) */
.radio.dsg-british .screen .hdr { background: var(--bt-acc); color: #fff; }
.radio.dsg-british:not(.hh) .screen .ch-num, .radio.dsg-british:not(.hh) .screen .units-title, .radio.dsg-british:not(.hh) .screen .unit-tag { color: #4a5560; }
.radio.dsg-british:not(.hh) .screen .ch-name, .radio.dsg-british:not(.hh) .screen .unit-row, .radio.dsg-british:not(.hh) .screen .unit-row .unit-name { color: #12161a; }
.radio.dsg-british:not(.hh) .screen .ch-status { color: #1f8a3a; font-weight: bold; }
.radio.dsg-british:not(.hh) .screen .units { background: transparent; border-color: #b9c1c9; }
.radio.dsg-british:not(.hh) .screen .unit-dot { background: #1f8a3a; box-shadow: none; }
.radio.dsg-british:not(.hh) .screen .unit-row.talking .unit-name { color: #1f8a3a; }
.radio.dsg-british:not(.hh) .screen .row.selected { background: var(--bt-acc); color: #fff; }
.radio.dsg-british:not(.hh):not(.top) .screen .ch-name { font-size: 34px; }
.radio.dsg-british:not(.hh):not(.top) .screen .unit-list { max-height: 64px; }
.radio.dsg-british:not(.hh):not(.top) .screen .radio-view { padding: 4px 10px; }
.radio.dsg-british:not(.hh):not(.top) .screen .hdr { padding: 4px 10px; font-size: 14px; }
/* ----- top view ----- */
.radio.dsg-british.top #tv-bg stop, .radio.dsg-british.top #tv-ear stop { stop-color: #232425; }
.radio.dsg-british.top #tv-wall stop:nth-child(1) { stop-color: #1a1b1c; } .radio.dsg-british.top #tv-wall stop:nth-child(2) { stop-color: #0a0a0b; }
.radio.dsg-british.top #tv-cap stop:nth-child(1) { stop-color: #34363a; } .radio.dsg-british.top #tv-cap stop:nth-child(2) { stop-color: #1e1f21; } .radio.dsg-british.top #tv-cap stop:nth-child(3) { stop-color: #0f1011; }
.radio.dsg-british.top .tv-art circle[fill="#9fe7ff"] { fill: #e4e6e8; }
.radio.dsg-british.top .tv-num.on { background: rgba(46, 111, 189, 0.45); box-shadow: 0 0 0 2px rgba(180, 210, 245, 0.7); }
.radio.dsg-british.fire.top .tv-num.on { background: rgba(196, 40, 28, 0.45); box-shadow: 0 0 0 2px rgba(240, 160, 150, 0.7); }
.radio.dsg-british.dot.top .tv-num.on { background: rgba(255, 176, 0, 0.45); box-shadow: 0 0 0 2px rgba(255, 220, 120, 0.7); }
.radio.dsg-british.top .tv-art::after { content: ""; position: absolute; left: 150px; top: 60px; width: 290px; height: 22px; border: 2px solid #050505;
  background: repeating-conic-gradient(#1b4aa8 0 25%, #f2d21c 0 50%) 0 0 / 14px 14px; }
.radio.dsg-british.fire.top .tv-art::after { background: linear-gradient(#c4281c 0 34%, #e9e9e9 34% 66%, #c4281c 66%); }
.radio.dsg-british.dot.top .tv-art::after { background: repeating-conic-gradient(#17181a 0 25%, #ffb000 0 50%) 0 0 / 14px 14px; }
.radio.dsg-british.top .tv-screen { background: #f2f4f6; color: #12161a; }
.radio.dsg-british.top .tv-hdr { background: var(--bt-acc); color: #fff; }
.radio.dsg-british.top .tv-ch { color: #4a5560; } .radio.dsg-british.top .tv-name { color: #12161a; } .radio.dsg-british.top .tv-st { color: #1f8a3a; font-weight: bold; }
.radio.dsg-british.top .tv-panic { background: #d9531e; border: 3px solid #17181a; box-shadow: 0 0 0 2px #3a3c3f, inset 0 0 0 2px #f0a070; color: #fff; }
.radio.dsg-british.top .tv-pwr { background: #1f6a32; border: 2px solid #050505; border-radius: 8px; color: #eaffee; box-shadow: inset 0 0 0 2px #3f9a58; }
.radio.dsg-british.top .tv-dfn { background: #8a1c18; border: 2px solid #050505; border-radius: 4px; box-shadow: inset 0 0 0 2px #b84a40; }
.radio.dsg-british.top .tv-front, .radio.dsg-british.top .tv-menu, .radio.dsg-british.top .tv-k { background: #1a1b1c; border: 2px solid #050505; border-radius: 6px; color: #e4e6e8; box-shadow: inset 0 0 0 2px #323436; }
.radio.dsg-british .knob-wrap span, .radio.dsg-british.fire .knob-wrap span, .radio.dsg-british.dot .knob-wrap span { color: #9aa0a6; }
.radio.dsg-british.top .tv-art text[letter-spacing="2"], .radio.dsg-british.fire.top .tv-art text[letter-spacing="2"], .radio.dsg-british.dot.top .tv-art text[letter-spacing="2"] { fill: #e4e6e8; }
.radio.dsg-british.fire.top .tv-art circle[fill="#dcf05c"], .radio.dsg-british.dot.top .tv-art circle[fill="#fff0a0"] { fill: #e4e6e8; }

/* ===== Default design (dsg-std): modern rugged radios. Vehicle: low wide unit with big knobs, wide screen and a row of five keys. Handheld: tall radio with dial, keypad and big number keys. =====
   Colours come from the theme variables (--body, --key ...), so Fire and DOT follow. */
.radio.dsg-std .screen { background: #c6dac8; color: #14201a; border: 0; }
.radio.dsg-std .screen .hdr { background: transparent; color: #14201a; border-bottom: 0; box-shadow: none; }
.radio.dsg-std .screen .sub { color: #3c4a40; opacity: 1; border-bottom: 0; }
.radio.dsg-std .screen .ch-num, .radio.dsg-std .screen .units-title, .radio.dsg-std .screen .unit-tag { color: #3c4a40; }
.radio.dsg-std .screen .ch-name, .radio.dsg-std .screen .unit-row, .radio.dsg-std .screen .unit-row .unit-name { color: #14201a; text-shadow: none; }
.radio.dsg-std .screen .ch-status { color: #1f6a32; }
.radio.dsg-std .screen .units { background: transparent; border-color: #8aa08e; box-shadow: none; }
.radio.dsg-std .screen .unit-dot { background: #1f6a32; box-shadow: none; }
.radio.dsg-std .screen .unit-row.talking .unit-name { color: #1f6a32; }
.radio.dsg-std .screen .row.selected { background: #14201a; color: #c6dac8; box-shadow: none; }
.radio.dsg-std .screen .softkeys { background: #3a443d; border-top: 0; }
.radio.dsg-std .screen .softkey { color: #fff; background: transparent; border-left-color: #5a645d; }
.radio.dsg-std .screen .softkey.active { background: #14201a; box-shadow: none; }
.radio.dsg-std .grille { display: none; }
/* ----- vehicle ----- */
.radio.dsg-std:not(.hh):not(.top) {
  width: 960px; max-width: none; height: 290px; padding: 0; position: relative;
  border-radius: 26px; box-shadow: inset 0 0 0 3px var(--body-hi), inset 0 0 0 5px rgba(0, 0, 0, 0.35), 0 14px 26px rgba(0, 0, 0, 0.5);
}
.radio.dsg-std:not(.hh):not(.top)::before { content: "REALITY"; position: absolute; left: 0; right: 0; top: 10px; text-align: center; color: var(--key-sub); font-family: var(--font-label); font-weight: bold; font-style: italic; font-size: 15px; letter-spacing: 7px; }
.radio.dsg-std:not(.hh):not(.top) .face { position: absolute; inset: 0; margin: 0; display: block; }
.radio.dsg-std:not(.hh):not(.top) .face > div, .radio.dsg-std:not(.hh):not(.top) .knobs, .radio.dsg-std:not(.hh):not(.top) .dpad, .radio.dsg-std:not(.hh):not(.top) .bottom-btns, .radio.dsg-std:not(.hh):not(.top) .col-keys { display: contents; }
.radio.dsg-std:not(.hh):not(.top) .keypad, .radio.dsg-std:not(.hh):not(.top) .sub, .radio.dsg-std:not(.hh):not(.top) .indicators, .radio.dsg-std:not(.hh):not(.top) #top { display: none !important; }
.radio.dsg-std:not(.hh):not(.top) .screen { position: absolute; left: 257px; top: 53px; width: 445px; height: 152px; margin: 0; border-radius: 8px; font-size: 14px;
  outline: 8px solid #0a0a0b; box-shadow: 0 0 0 10px #2a2c2f, 0 0 0 12px #050505; }
.radio.dsg-std:not(.hh):not(.top) .screen .hdr { justify-content: center; gap: 40px; padding: 4px 10px; font-size: 14px; }
.radio.dsg-std:not(.hh):not(.top) .screen .radio-view { align-items: center; text-align: center; padding: 2px 10px; gap: 1px; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-num { font-size: 15px; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-name { font-size: 32px; }
.radio.dsg-std:not(.hh):not(.top) .screen .units { width: 80%; padding: 2px 8px; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-list { max-height: 34px; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-row { font-size: 14px; }
.radio.dsg-std:not(.hh):not(.top) .screen .softkey { padding: 4px 0; font-size: 16px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap { position: absolute; color: var(--key-sub); font-size: 11px; gap: 4px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(1) { left: 113px; top: 39px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(2) { left: 742px; top: 35px; }
.radio.dsg-std:not(.hh):not(.top) .knob { width: 110px; height: 110px; background: #17181a; border: 3px solid #050505;
  box-shadow: inset 0 0 0 9px #1d1f21, 0 0 0 4px #6a6d72, 0 0 0 7px #050505; }
.radio.dsg-std:not(.hh):not(.top) .knob::after { top: 12px; width: 8px; height: 34px; margin-left: -4px; }
.radio.dsg-std:not(.hh):not(.top) #power, .radio.dsg-std:not(.hh):not(.top) #ptt, .radio.dsg-std:not(.hh):not(.top) #panic, .radio.dsg-std:not(.hh):not(.top) #dfn, .radio.dsg-std:not(.hh):not(.top) #btn-back, .radio.dsg-std:not(.hh):not(.top) #btn-ok, .radio.dsg-std:not(.hh):not(.top) #btn-settings, .radio.dsg-std:not(.hh):not(.top) #btn-home, .radio.dsg-std:not(.hh):not(.top) .dir, .radio.dsg-std:not(.hh):not(.top) #switch, .radio.dsg-std:not(.hh):not(.top) #theme {
  position: absolute; margin: 0; padding: 0; cursor: pointer; font-family: var(--font-label); font-weight: bold; text-shadow: none; }
.radio.dsg-std:not(.hh):not(.top) #power { left: 25px; top: 46px; width: 56px; height: 56px; border-radius: 50%; font-size: 26px; color: #4ade5a; }
.radio.dsg-std:not(.hh):not(.top) #panic { left: 875px; top: 22px; width: 82px; height: 82px; border-radius: 50%; font-size: 14px; }
.radio.dsg-std:not(.hh):not(.top) #ptt { left: 171px; top: 218px; width: 56px; height: 56px; border-radius: 50%; font-size: 13px; }
.radio.dsg-std:not(.hh):not(.top) #btn-back { left: 251px; top: 236px; width: 76px; height: 40px; }
.radio.dsg-std:not(.hh):not(.top) #btn-ok { left: 347px; top: 236px; width: 76px; height: 40px; }
.radio.dsg-std:not(.hh):not(.top) #btn-settings { left: 442px; top: 236px; width: 76px; height: 40px; font-size: 0; }
.radio.dsg-std:not(.hh):not(.top) #btn-settings::after { content: "MENU"; font-size: 14px; }
.radio.dsg-std:not(.hh):not(.top) #dfn { left: 540px; top: 236px; width: 76px; height: 40px; font-size: 14px; }
.radio.dsg-std:not(.hh):not(.top) #switch { left: 28px; top: 168px; width: 112px; height: 38px; font-size: 11px; line-height: 1.1; white-space: normal; }
.radio.dsg-std:not(.hh):not(.top) #theme { left: 28px; top: 214px; width: 112px; height: 38px; font-size: 11px; line-height: 1.1; white-space: normal; }
.radio.dsg-std:not(.hh):not(.top) #up { left: 802px; top: 158px; width: 44px; height: 36px; } .radio.dsg-std:not(.hh):not(.top) #down { left: 802px; top: 238px; width: 44px; height: 36px; }
.radio.dsg-std:not(.hh):not(.top) #left { left: 752px; top: 198px; width: 44px; height: 36px; } .radio.dsg-std:not(.hh):not(.top) #right { left: 852px; top: 198px; width: 44px; height: 36px; }
.radio.dsg-std:not(.hh):not(.top) #center { left: 804px; top: 196px; width: 40px; height: 40px; border-radius: 50%; font-size: 12px; }
.radio.dsg-std:not(.hh):not(.top) #btn-home { left: 886px; top: 214px; width: 56px; height: 52px; color: #f2c71c; font-size: 22px; }
.radio.dsg-std:not(.hh):not(.top) #power, .radio.dsg-std:not(.hh):not(.top) #ptt, .radio.dsg-std:not(.hh):not(.top) #panic, .radio.dsg-std:not(.hh):not(.top) #dfn, .radio.dsg-std:not(.hh):not(.top) #btn-back, .radio.dsg-std:not(.hh):not(.top) #btn-ok, .radio.dsg-std:not(.hh):not(.top) #btn-settings, .radio.dsg-std:not(.hh):not(.top) #btn-home, .radio.dsg-std:not(.hh):not(.top) .dir, .radio.dsg-std:not(.hh):not(.top) #switch, .radio.dsg-std:not(.hh):not(.top) #theme {
  border-radius: inherit; }
.radio.dsg-std:not(.hh):not(.top) #btn-back, .radio.dsg-std:not(.hh):not(.top) #btn-ok, .radio.dsg-std:not(.hh):not(.top) #btn-settings, .radio.dsg-std:not(.hh):not(.top) #dfn, .radio.dsg-std:not(.hh):not(.top) .dir, .radio.dsg-std:not(.hh):not(.top) #btn-home, .radio.dsg-std:not(.hh):not(.top) #switch, .radio.dsg-std:not(.hh):not(.top) #theme { border-radius: 10px; }
.radio.dsg-std:not(.hh):not(.top) #center, .radio.dsg-std:not(.hh):not(.top) #power, .radio.dsg-std:not(.hh):not(.top) #panic, .radio.dsg-std:not(.hh):not(.top) #ptt { border-radius: 50%; }
/* ----- handheld ----- */
.radio.dsg-std.hh {
  width: 320px; height: 724px; padding: 0; position: absolute; border-radius: 34px 34px 40px 40px;
  box-shadow: inset 0 0 0 3px var(--body-hi), inset 0 0 0 5px rgba(0, 0, 0, 0.35), 0 14px 26px rgba(0, 0, 0, 0.5);
}
.radio.dsg-std.hh::before { content: "REALITY"; position: absolute; left: 0; right: 0; top: 126px; text-align: center; color: var(--key-sub); font-family: var(--font-label); font-weight: bold; font-size: 9px; letter-spacing: 5px; }
.radio.dsg-std.hh::after { content: ""; position: absolute; left: 110px; top: 98px; width: 100px; height: 15px; border-radius: 8px; background: #3a3320; border: 2px solid #050505; }
.radio.dsg-std.hh .face { position: absolute; inset: 0; margin: 0; display: block; }
.radio.dsg-std.hh .col-left, .radio.dsg-std.hh .col-screen, .radio.dsg-std.hh .col-controls, .radio.dsg-std.hh .col-keys, .radio.dsg-std.hh .col-panic, .radio.dsg-std.hh .knobs, .radio.dsg-std.hh .dpad, .radio.dsg-std.hh .bottom-btns { display: contents; }
.radio.dsg-std.hh .sub, .radio.dsg-std.hh .indicators { display: none !important; }
.radio.dsg-std.hh .screen { position: absolute; left: 65px; top: 158px; width: 189px; height: 146px; zoom: 1; margin: 0; border-radius: 6px; font-size: 11px;
  box-shadow: 0 0 0 5px #0a0a0b, 0 0 0 7px #2a2c2f, 0 0 0 9px #050505; }
.radio.dsg-std.hh .screen .hdr { padding: 3px 8px; font-size: 11px; }
.radio.dsg-std.hh .screen .radio-view { padding: 2px 8px; gap: 0; }
.radio.dsg-std.hh .screen .ch-num { font-size: 12px; }
.radio.dsg-std.hh .screen .ch-name { font-size: 24px; }
.radio.dsg-std.hh .screen .ch-status { font-size: 11px; min-height: 12px; }
.radio.dsg-std.hh .screen .units-title { font-size: 10px; margin-bottom: 1px; }
.radio.dsg-std.hh .screen .unit-row { font-size: 13px; }
.radio.dsg-std.hh .screen .softkey { padding: 5px 0; font-size: 13px; }
.radio.dsg-std.hh .knob-wrap { position: absolute; font-size: 9px; gap: 2px; color: var(--key-sub); }
.radio.dsg-std.hh .knob-wrap:nth-child(1) { left: 203px; top: 24px; }
.radio.dsg-std.hh .knob-wrap:nth-child(2) { left: 108px; top: 4px; }
.radio.dsg-std.hh .knob { width: 58px; height: 52px; border-radius: 10px; background: #17181a; border: 3px solid #050505; box-shadow: inset 0 0 0 4px #1d1f21; }
.radio.dsg-std.hh .knob::after { top: 5px; width: 6px; height: 20px; margin-left: -3px; }
.radio.dsg-std.hh #panic { position: absolute; left: 44px; top: 20px; width: 38px; height: 38px; margin: 0; border-radius: 50%; font-size: 7px; padding: 0; display: flex; align-items: center; justify-content: center; }
.radio.dsg-std.hh #ptt { position: absolute; left: 3px; top: 190px; width: 22px; height: 140px; margin: 0; border-radius: 8px; font-size: 11px; writing-mode: vertical-rl; letter-spacing: 2px; }
.radio.dsg-std.hh #btn-ok { position: absolute; left: 62px; top: 322px; width: 196px; height: 28px; margin: 0; }
.radio.dsg-std.hh #btn-home { position: absolute; left: 32px; top: 364px; width: 58px; height: 82px; margin: 0; font-size: 28px; color: #f2c71c; }
.radio.dsg-std.hh #btn-settings { position: absolute; left: 229px; top: 364px; width: 58px; height: 82px; margin: 0; font-size: 12px; }
.radio.dsg-std.hh .dpad { display: block; }
.radio.dsg-std.hh #up { position: absolute; left: 143px; top: 370px; width: 34px; height: 24px; margin: 0; }
.radio.dsg-std.hh #down { position: absolute; left: 143px; top: 424px; width: 34px; height: 24px; margin: 0; }
.radio.dsg-std.hh #left { position: absolute; left: 104px; top: 397px; width: 34px; height: 24px; margin: 0; }
.radio.dsg-std.hh #right { position: absolute; left: 182px; top: 397px; width: 34px; height: 24px; margin: 0; }
.radio.dsg-std.hh #center { position: absolute; left: 144px; top: 394px; width: 32px; height: 30px; margin: 0; border-radius: 50%; }
.radio.dsg-std.hh .keypad { position: absolute; left: 32px; top: 458px; width: 255px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.radio.dsg-std.hh .key { min-height: 38px; height: 38px; padding: 0 4px; border-radius: 10px; justify-content: center; }
.radio.dsg-std.hh .key-num { font-size: 23px; }
.radio.dsg-std.hh .key-alt { font-size: 9px; margin-top: 8px; }
.radio.dsg-std.hh .power { position: absolute; left: 32px; top: 640px; width: 80px; height: 30px; margin: 0; }
.radio.dsg-std.hh #btn-back { position: absolute; left: 120px; top: 640px; width: 80px; height: 30px; margin: 0; }
.radio.dsg-std.hh #top { position: absolute; left: 208px; top: 640px; width: 80px; height: 30px; margin: 0; display: block; font-size: 10px; }
.radio.dsg-std.hh #switch { position: absolute; left: 32px; top: 678px; width: 255px; height: 28px; margin: 0; font-size: 11px; }
.radio.dsg-std.hh .theme-btn { display: none; }

.radio.dsg-std:not(.hh):not(.top) .screen { top: 50px; height: 160px; }
.radio.dsg-std:not(.hh):not(.top) .screen .units-title { display: none; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-name { font-size: 30px; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-list { max-height: 40px; }
.radio.dsg-std.hh .screen .units { padding: 2px 6px; }
.radio.dsg-std.hh .screen .units-title { display: none; }
.radio.dsg-std.hh .screen .unit-list { max-height: 40px; }
.radio.dsg-std.hh .screen .ch-name { font-size: 22px; }

.radio.dsg-std:not(.hh):not(.top) .screen .hdr { padding: 2px 10px; }
.radio.dsg-std:not(.hh):not(.top) .screen .radio-view { padding: 0 10px; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-num { font-size: 13px; line-height: 1.1; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-name { font-size: 26px; line-height: 1.05; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-status { font-size: 12px; min-height: 13px; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-list { max-height: 36px; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-row { font-size: 13px; padding: 0 3px; line-height: 1.2; }
.radio.dsg-std.hh .screen .ch-status { display: none; }
.radio.dsg-std.hh .screen .unit-list { max-height: 44px; }
.radio.fire.dsg-std::before, .radio.fire.dsg-std .knob-wrap span { color: #2a3400; }
.radio.dot.dsg-std::before, .radio.dot.dsg-std .knob-wrap span { color: #3a2600; }
.radio.dsg-std #power { color: #4ade5a; }
.radio.dsg-std.hh .power { color: #fff; }

/* handheld: the real body shape (narrow neck, wider body, grip ribs, screws, strap loop) is drawn as the background */
.radio.dsg-std.hh { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%22724%22 viewBox=%220 0 320 724%22%3E%3Crect x=%2235%22 y=%222%22 width=%2223%22 height=%2262%22 rx=%229%22 fill=%22%230f1011%22 stroke=%22%23050505%22 stroke-width=%222.5%22/%3E%3Cg transform=%22translate(-15 -150) scale(.8333)%22%3E%3Cpath d=%22M86 250 H334 Q350 250 352 270 L356 290 Q396 310 398 360 L402 1000 Q402 1056 330 1056 H90 Q18 1056 18 1000 L22 360 Q24 310 64 290 L68 270 Q70 250 86 250 Z%22 fill=%22%232a2b2e%22 stroke=%22%23050505%22 stroke-width=%224%22/%3E%3Cpath d=%22M96 262 H324 Q338 262 340 276 L344 298 Q380 316 384 364 L388 992 Q388 1042 328 1042 H92 Q32 1042 32 992 L36 364 Q40 316 76 298 L80 276 Q82 262 96 262 Z%22 fill=%22none%22 stroke=%22%2338393c%22 stroke-width=%222%22/%3E%3Cpath d=%22M60 330 Q60 322 70 318 L350 318 Q360 322 360 330 L362 980 Q362 1020 330 1020 H90 Q58 1020 58 980 Z%22 fill=%22none%22 stroke=%22%232c2d2f%22 stroke-width=%222%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22380%22 y2=%22380%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22380%22 y2=%22380%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22398%22 y2=%22398%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22398%22 y2=%22398%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22416%22 y2=%22416%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22416%22 y2=%22416%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22434%22 y2=%22434%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22434%22 y2=%22434%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22452%22 y2=%22452%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22452%22 y2=%22452%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22470%22 y2=%22470%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22470%22 y2=%22470%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22488%22 y2=%22488%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22488%22 y2=%22488%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22506%22 y2=%22506%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22506%22 y2=%22506%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22524%22 y2=%22524%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22524%22 y2=%22524%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22542%22 y2=%22542%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22542%22 y2=%22542%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22560%22 y2=%22560%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22560%22 y2=%22560%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22578%22 y2=%22578%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22578%22 y2=%22578%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22596%22 y2=%22596%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22596%22 y2=%22596%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22614%22 y2=%22614%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22614%22 y2=%22614%22 stroke=%22%233a3b3e%22 stroke-width=%223%22/%3E%3Ccircle cx=%2288%22 cy=%22282%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%2284.5%22 x2=%2291.5%22 y1=%22282%22 y2=%22282%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Ccircle cx=%22332%22 cy=%22282%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%22328.5%22 x2=%22335.5%22 y1=%22282%22 y2=%22282%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Ccircle cx=%2270%22 cy=%221000%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%2266.5%22 x2=%2273.5%22 y1=%221000%22 y2=%221000%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Ccircle cx=%22350%22 cy=%221000%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%22346.5%22 x2=%22353.5%22 y1=%221000%22 y2=%221000%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Crect x=%22396%22 y=%22520%22 width=%2214%22 height=%2260%22 rx=%226%22 fill=%22%2317181a%22 stroke=%22%23050505%22 stroke-width=%223%22/%3E%3Ccircle cx=%2292%22 cy=%22338%22 r=%225%22 fill=%22%230a0a0b%22/%3E%3Ccircle cx=%22298%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22308%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22318%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22328%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22338%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22298%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22308%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22318%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22328%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22338%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22298%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22308%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22318%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22328%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22338%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Cellipse cx=%22190%22 cy=%22262%22 rx=%2286%22 ry=%2224%22 fill=%22%230e0f10%22 stroke=%22%23050505%22 stroke-width=%223%22/%3E%3Cellipse cx=%22190%22 cy=%22262%22 rx=%2278%22 ry=%2219%22 fill=%22none%22 stroke=%22%232a2c2f%22 stroke-width=%222%22/%3E%3Ctext x=%22118%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E1%3C/text%3E%3Cline x1=%22118%22 x2=%22118%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22134%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E2%3C/text%3E%3Cline x1=%22134%22 x2=%22134%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22150%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E3%3C/text%3E%3Cline x1=%22150%22 x2=%22150%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22166%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E4%3C/text%3E%3Cline x1=%22166%22 x2=%22166%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22182%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E5%3C/text%3E%3Cline x1=%22182%22 x2=%22182%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22198%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E6%3C/text%3E%3Cline x1=%22198%22 x2=%22198%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22214%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E7%3C/text%3E%3Cline x1=%22214%22 x2=%22214%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22230%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E8%3C/text%3E%3Cline x1=%22230%22 x2=%22230%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22246%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E9%3C/text%3E%3Cline x1=%22246%22 x2=%22246%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22262%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E0%3C/text%3E%3Cline x1=%22262%22 x2=%22262%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.5)); }
.radio.dsg-std.hh.fire { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%22724%22 viewBox=%220 0 320 724%22%3E%3Crect x=%2235%22 y=%222%22 width=%2223%22 height=%2262%22 rx=%229%22 fill=%22%230f1011%22 stroke=%22%23050505%22 stroke-width=%222.5%22/%3E%3Cg transform=%22translate(-15 -150) scale(.8333)%22%3E%3Cpath d=%22M86 250 H334 Q350 250 352 270 L356 290 Q396 310 398 360 L402 1000 Q402 1056 330 1056 H90 Q18 1056 18 1000 L22 360 Q24 310 64 290 L68 270 Q70 250 86 250 Z%22 fill=%22%23aee00c%22 stroke=%22%23050505%22 stroke-width=%224%22/%3E%3Cpath d=%22M96 262 H324 Q338 262 340 276 L344 298 Q380 316 384 364 L388 992 Q388 1042 328 1042 H92 Q32 1042 32 992 L36 364 Q40 316 76 298 L80 276 Q82 262 96 262 Z%22 fill=%22none%22 stroke=%22%23d6f750%22 stroke-width=%222%22/%3E%3Cpath d=%22M60 330 Q60 322 70 318 L350 318 Q360 322 360 330 L362 980 Q362 1020 330 1020 H90 Q58 1020 58 980 Z%22 fill=%22none%22 stroke=%22%238fba00%22 stroke-width=%222%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22380%22 y2=%22380%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22380%22 y2=%22380%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22398%22 y2=%22398%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22398%22 y2=%22398%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22416%22 y2=%22416%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22416%22 y2=%22416%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22434%22 y2=%22434%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22434%22 y2=%22434%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22452%22 y2=%22452%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22452%22 y2=%22452%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22470%22 y2=%22470%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22470%22 y2=%22470%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22488%22 y2=%22488%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22488%22 y2=%22488%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22506%22 y2=%22506%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22506%22 y2=%22506%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22524%22 y2=%22524%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22524%22 y2=%22524%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22542%22 y2=%22542%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22542%22 y2=%22542%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22560%22 y2=%22560%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22560%22 y2=%22560%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22578%22 y2=%22578%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22578%22 y2=%22578%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22596%22 y2=%22596%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22596%22 y2=%22596%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22614%22 y2=%22614%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22614%22 y2=%22614%22 stroke=%22%233b4f00%22 stroke-width=%223%22/%3E%3Ccircle cx=%2288%22 cy=%22282%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%2284.5%22 x2=%2291.5%22 y1=%22282%22 y2=%22282%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Ccircle cx=%22332%22 cy=%22282%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%22328.5%22 x2=%22335.5%22 y1=%22282%22 y2=%22282%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Ccircle cx=%2270%22 cy=%221000%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%2266.5%22 x2=%2273.5%22 y1=%221000%22 y2=%221000%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Ccircle cx=%22350%22 cy=%221000%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%22346.5%22 x2=%22353.5%22 y1=%221000%22 y2=%221000%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Crect x=%22396%22 y=%22520%22 width=%2214%22 height=%2260%22 rx=%226%22 fill=%22%2317181a%22 stroke=%22%23050505%22 stroke-width=%223%22/%3E%3Ccircle cx=%2292%22 cy=%22338%22 r=%225%22 fill=%22%230a0a0b%22/%3E%3Ccircle cx=%22298%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22308%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22318%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22328%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22338%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22298%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22308%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22318%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22328%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22338%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22298%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22308%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22318%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22328%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22338%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Cellipse cx=%22190%22 cy=%22262%22 rx=%2286%22 ry=%2224%22 fill=%22%230e0f10%22 stroke=%22%23050505%22 stroke-width=%223%22/%3E%3Cellipse cx=%22190%22 cy=%22262%22 rx=%2278%22 ry=%2219%22 fill=%22none%22 stroke=%22%232a2c2f%22 stroke-width=%222%22/%3E%3Ctext x=%22118%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E1%3C/text%3E%3Cline x1=%22118%22 x2=%22118%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22134%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E2%3C/text%3E%3Cline x1=%22134%22 x2=%22134%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22150%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E3%3C/text%3E%3Cline x1=%22150%22 x2=%22150%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22166%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E4%3C/text%3E%3Cline x1=%22166%22 x2=%22166%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22182%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E5%3C/text%3E%3Cline x1=%22182%22 x2=%22182%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22198%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E6%3C/text%3E%3Cline x1=%22198%22 x2=%22198%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22214%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E7%3C/text%3E%3Cline x1=%22214%22 x2=%22214%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22230%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E8%3C/text%3E%3Cline x1=%22230%22 x2=%22230%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22246%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E9%3C/text%3E%3Cline x1=%22246%22 x2=%22246%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22262%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E0%3C/text%3E%3Cline x1=%22262%22 x2=%22262%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3C/g%3E%3C/svg%3E"); }
.radio.dsg-std.hh.dot { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%22724%22 viewBox=%220 0 320 724%22%3E%3Crect x=%2235%22 y=%222%22 width=%2223%22 height=%2262%22 rx=%229%22 fill=%22%230f1011%22 stroke=%22%23050505%22 stroke-width=%222.5%22/%3E%3Cg transform=%22translate(-15 -150) scale(.8333)%22%3E%3Cpath d=%22M86 250 H334 Q350 250 352 270 L356 290 Q396 310 398 360 L402 1000 Q402 1056 330 1056 H90 Q18 1056 18 1000 L22 360 Q24 310 64 290 L68 270 Q70 250 86 250 Z%22 fill=%22%23ffb000%22 stroke=%22%23050505%22 stroke-width=%224%22/%3E%3Cpath d=%22M96 262 H324 Q338 262 340 276 L344 298 Q380 316 384 364 L388 992 Q388 1042 328 1042 H92 Q32 1042 32 992 L36 364 Q40 316 76 298 L80 276 Q82 262 96 262 Z%22 fill=%22none%22 stroke=%22%23ffd24d%22 stroke-width=%222%22/%3E%3Cpath d=%22M60 330 Q60 322 70 318 L350 318 Q360 322 360 330 L362 980 Q362 1020 330 1020 H90 Q58 1020 58 980 Z%22 fill=%22none%22 stroke=%22%23e09500%22 stroke-width=%222%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22380%22 y2=%22380%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22380%22 y2=%22380%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22398%22 y2=%22398%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22398%22 y2=%22398%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22416%22 y2=%22416%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22416%22 y2=%22416%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22434%22 y2=%22434%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22434%22 y2=%22434%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22452%22 y2=%22452%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22452%22 y2=%22452%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22470%22 y2=%22470%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22470%22 y2=%22470%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22488%22 y2=%22488%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22488%22 y2=%22488%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22506%22 y2=%22506%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22506%22 y2=%22506%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22524%22 y2=%22524%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22524%22 y2=%22524%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22542%22 y2=%22542%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22542%22 y2=%22542%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22560%22 y2=%22560%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22560%22 y2=%22560%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22578%22 y2=%22578%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22578%22 y2=%22578%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22596%22 y2=%22596%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22596%22 y2=%22596%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%2222%22 x2=%2236%22 y1=%22614%22 y2=%22614%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Cline x1=%22384%22 x2=%22398%22 y1=%22614%22 y2=%22614%22 stroke=%22%236b4a00%22 stroke-width=%223%22/%3E%3Ccircle cx=%2288%22 cy=%22282%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%2284.5%22 x2=%2291.5%22 y1=%22282%22 y2=%22282%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Ccircle cx=%22332%22 cy=%22282%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%22328.5%22 x2=%22335.5%22 y1=%22282%22 y2=%22282%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Ccircle cx=%2270%22 cy=%221000%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%2266.5%22 x2=%2273.5%22 y1=%221000%22 y2=%221000%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Ccircle cx=%22350%22 cy=%221000%22 r=%226%22 fill=%22%23141516%22 stroke=%22%23050505%22 stroke-width=%222%22/%3E%3Cline x1=%22346.5%22 x2=%22353.5%22 y1=%221000%22 y2=%221000%22 stroke=%22%234a4c4f%22 stroke-width=%222%22/%3E%3Crect x=%22396%22 y=%22520%22 width=%2214%22 height=%2260%22 rx=%226%22 fill=%22%2317181a%22 stroke=%22%23050505%22 stroke-width=%223%22/%3E%3Ccircle cx=%2292%22 cy=%22338%22 r=%225%22 fill=%22%230a0a0b%22/%3E%3Ccircle cx=%22298%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22308%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22318%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22328%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22338%22 cy=%22334%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22298%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22308%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22318%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22328%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22338%22 cy=%22342%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22298%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22308%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22318%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22328%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Ccircle cx=%22338%22 cy=%22350%22 r=%222.2%22 fill=%22%230d0e0f%22/%3E%3Cellipse cx=%22190%22 cy=%22262%22 rx=%2286%22 ry=%2224%22 fill=%22%230e0f10%22 stroke=%22%23050505%22 stroke-width=%223%22/%3E%3Cellipse cx=%22190%22 cy=%22262%22 rx=%2278%22 ry=%2219%22 fill=%22none%22 stroke=%22%232a2c2f%22 stroke-width=%222%22/%3E%3Ctext x=%22118%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E1%3C/text%3E%3Cline x1=%22118%22 x2=%22118%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22134%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E2%3C/text%3E%3Cline x1=%22134%22 x2=%22134%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22150%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E3%3C/text%3E%3Cline x1=%22150%22 x2=%22150%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22166%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E4%3C/text%3E%3Cline x1=%22166%22 x2=%22166%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22182%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E5%3C/text%3E%3Cline x1=%22182%22 x2=%22182%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22198%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E6%3C/text%3E%3Cline x1=%22198%22 x2=%22198%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22214%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E7%3C/text%3E%3Cline x1=%22214%22 x2=%22214%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22230%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E8%3C/text%3E%3Cline x1=%22230%22 x2=%22230%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22246%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E9%3C/text%3E%3Cline x1=%22246%22 x2=%22246%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3Ctext x=%22262%22 y=%22270%22 text-anchor=%22middle%22 font-size=%229%22 font-family=%22Arial%22 font-weight=%22700%22 fill=%22%23d6d8da%22%3E0%3C/text%3E%3Cline x1=%22262%22 x2=%22262%22 y1=%22274%22 y2=%22279%22 stroke=%22%238d9298%22 stroke-width=%222%22/%3E%3C/g%3E%3C/svg%3E"); }
.radio.dsg-std.hh .knob-wrap:nth-child(2) span { display: none; }

/* handheld: longer and wider screen, everything below it moves down a little */
.radio.dsg-std.hh .screen { left: 47px; top: 146px; width: 226px; height: 172px; }
.radio.dsg-std.hh .screen .hdr { font-size: 12px; }
.radio.dsg-std.hh .screen .ch-num { font-size: 13px; }
.radio.dsg-std.hh .screen .ch-name { font-size: 27px; }
.radio.dsg-std.hh .screen .ch-status { display: block; font-size: 12px; min-height: 13px; }
.radio.dsg-std.hh .screen .unit-row { font-size: 14px; }
.radio.dsg-std.hh .screen .unit-list { max-height: 58px; }
.radio.dsg-std.hh .screen .softkey { font-size: 14px; }
.radio.dsg-std.hh #btn-ok { top: 332px; }
.radio.dsg-std.hh #btn-home, .radio.dsg-std.hh #btn-settings { top: 374px; }
.radio.dsg-std.hh #up { top: 380px; } .radio.dsg-std.hh #down { top: 434px; } .radio.dsg-std.hh #left, .radio.dsg-std.hh #right { top: 407px; } .radio.dsg-std.hh #center { top: 404px; }
.radio.dsg-std.hh .keypad { top: 468px; }
.radio.dsg-std.hh .power, .radio.dsg-std.hh #btn-back, .radio.dsg-std.hh #top { top: 650px; }
.radio.dsg-std.hh #switch { top: 688px; }

/* default vehicle: plain white screen */
.radio.dsg-std:not(.hh):not(.top) .screen { background: #f4f6f7; }
.radio.dsg-std:not(.hh):not(.top) .screen .softkeys { background: #3a3f44; }

/* the top edge is the place you hold to drag the overlay, so the new designs keep it (invisible) */
.radio.dsg-std:not(.top) .grille, .radio.dsg-retro:not(.top) .grille, .radio.dsg-british:not(.top) .grille {
  display: block !important; position: absolute; left: 0; right: 0; top: 0; height: 16px; padding: 0; margin: 0;
  background: transparent; border: 0; box-shadow: none; opacity: 0; z-index: 6; cursor: grab;
}
.radio.dsg-std.hh .grille { left: 60px; right: 60px; top: 90px; height: 24px; }

/* ---- Default vehicle: taller layout with number pad (power in corner, centred key row, right side tidied) ---- */
.radio.dsg-std:not(.hh):not(.top) { height: 400px; }
.radio.dsg-std:not(.hh):not(.top) .keypad { display: grid !important; position: absolute; left: 26px; top: 176px; width: 214px; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.radio.dsg-std:not(.hh):not(.top) .key { min-height: 34px; height: 34px; padding: 0 2px; border-radius: 9px; justify-content: center; }
.radio.dsg-std:not(.hh):not(.top) .key-num { font-size: 17px; line-height: 1; }
.radio.dsg-std:not(.hh):not(.top) .key-name { display: block; font-size: 8px; line-height: 1; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio.dsg-std:not(.hh):not(.top) .key-alt { display: none; }
.radio.dsg-std:not(.hh):not(.top) #power { left: 20px; top: 16px; }
.radio.dsg-std:not(.hh):not(.top) #btn-back { left: 310px; top: 238px; }
.radio.dsg-std:not(.hh):not(.top) #btn-ok { left: 404px; top: 238px; }
.radio.dsg-std:not(.hh):not(.top) #btn-settings { left: 498px; top: 238px; }
.radio.dsg-std:not(.hh):not(.top) #dfn { left: 592px; top: 238px; }
.radio.dsg-std:not(.hh):not(.top) #switch { left: 296px; top: 322px; width: 132px; }
.radio.dsg-std:not(.hh):not(.top) #theme { left: 532px; top: 322px; width: 132px; }
.radio.dsg-std:not(.hh):not(.top) #ptt { left: 438px; top: 296px; width: 84px; height: 84px; font-size: 20px; }
.radio.dsg-std:not(.hh):not(.top) #up { left: 788px; top: 214px; }
.radio.dsg-std:not(.hh):not(.top) #down { left: 788px; top: 310px; }
.radio.dsg-std:not(.hh):not(.top) #left { left: 736px; top: 262px; }
.radio.dsg-std:not(.hh):not(.top) #right { left: 840px; top: 262px; }
.radio.dsg-std:not(.hh):not(.top) #center { left: 790px; top: 262px; width: 40px; height: 40px; }
.radio.dsg-std:not(.hh):not(.top) #btn-home { left: 894px; top: 266px; }

/* ---- Default vehicle v2: number pad on the right, small VOL / CH knobs above the arrows, PTT on the left ---- */
.radio.dsg-std:not(.hh):not(.top) .screen { left: 150px; top: 50px; width: 440px; height: 160px; }
.radio.dsg-std:not(.hh):not(.top) .keypad { left: 772px; top: 112px; width: 172px; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.radio.dsg-std:not(.hh):not(.top) .key { min-height: 36px; height: 36px; }
.radio.dsg-std:not(.hh):not(.top) .key-name { font-size: 7px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(1) { left: 622px; top: 44px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(2) { left: 686px; top: 44px; }
.radio.dsg-std:not(.hh):not(.top) .knob { width: 56px; height: 56px; border-width: 2px; }
.radio.dsg-std:not(.hh):not(.top) .knob::after { top: 6px; width: 5px; height: 20px; margin-left: -2.5px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap { font-size: 10px; gap: 2px; }
.radio.dsg-std:not(.hh):not(.top) #panic { left: 868px; top: 16px; width: 80px; height: 80px; }
.radio.dsg-std:not(.hh):not(.top) #ptt { left: 24px; top: 150px; width: 96px; height: 96px; font-size: 24px; }
.radio.dsg-std:not(.hh):not(.top) #btn-back { left: 200px; } .radio.dsg-std:not(.hh):not(.top) #btn-ok { left: 294px; } .radio.dsg-std:not(.hh):not(.top) #btn-settings { left: 388px; } .radio.dsg-std:not(.hh):not(.top) #dfn { left: 482px; }
.radio.dsg-std:not(.hh):not(.top) #switch { left: 205px; top: 306px; width: 150px; }
.radio.dsg-std:not(.hh):not(.top) #theme { left: 385px; top: 306px; width: 150px; }
.radio.dsg-std:not(.hh):not(.top) #up { left: 654px; top: 128px; }
.radio.dsg-std:not(.hh):not(.top) #left { left: 604px; top: 176px; }
.radio.dsg-std:not(.hh):not(.top) #center { left: 656px; top: 174px; }
.radio.dsg-std:not(.hh):not(.top) #right { left: 708px; top: 176px; }
.radio.dsg-std:not(.hh):not(.top) #down { left: 654px; top: 222px; }
.radio.dsg-std:not(.hh):not(.top) #btn-home { left: 648px; top: 280px; width: 56px; height: 44px; }

.radio.dsg-std:not(.hh):not(.top) .screen { width: 420px; }
.radio.dsg-std:not(.hh):not(.top) .keypad { left: 778px; width: 168px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(1) { left: 630px; top: 44px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(2) { left: 700px; top: 44px; }
.radio.dsg-std:not(.hh):not(.top) #up { left: 664px; } .radio.dsg-std:not(.hh):not(.top) #left { left: 614px; } .radio.dsg-std:not(.hh):not(.top) #center { left: 666px; } .radio.dsg-std:not(.hh):not(.top) #right { left: 718px; } .radio.dsg-std:not(.hh):not(.top) #down { left: 664px; } .radio.dsg-std:not(.hh):not(.top) #btn-home { left: 658px; }
.radio.dsg-std:not(.hh):not(.top) #btn-back { left: 190px; } .radio.dsg-std:not(.hh):not(.top) #btn-ok { left: 284px; } .radio.dsg-std:not(.hh):not(.top) #btn-settings { left: 378px; } .radio.dsg-std:not(.hh):not(.top) #dfn { left: 472px; }
.radio.dsg-std:not(.hh):not(.top) #switch { left: 195px; } .radio.dsg-std:not(.hh):not(.top) #theme { left: 375px; }

/* ---- v3: taller screen, number pad full height, smaller PANIC ---- */
.radio.dsg-std:not(.hh):not(.top) .screen { height: 192px; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-list { max-height: 62px; }
.radio.dsg-std:not(.hh):not(.top) #btn-back, .radio.dsg-std:not(.hh):not(.top) #btn-ok, .radio.dsg-std:not(.hh):not(.top) #btn-settings, .radio.dsg-std:not(.hh):not(.top) #dfn { top: 274px; }
.radio.dsg-std:not(.hh):not(.top) #switch, .radio.dsg-std:not(.hh):not(.top) #theme { top: 332px; }
.radio.dsg-std:not(.hh):not(.top) #panic { left: 884px; top: 14px; width: 62px; height: 62px; font-size: 12px; }
.radio.dsg-std:not(.hh):not(.top) .keypad { left: 774px; top: 92px; width: 172px; gap: 6px; grid-auto-rows: 66px; }
.radio.dsg-std:not(.hh):not(.top) .key { min-height: 66px; height: 66px; }
.radio.dsg-std:not(.hh):not(.top) .key-num { font-size: 22px; }
.radio.dsg-std:not(.hh):not(.top) .key-name { font-size: 8px; margin-top: 4px; }

/* ---- v4: compact height, even number keys ---- */
.radio.dsg-std:not(.hh):not(.top) { height: 332px; }
.radio.dsg-std:not(.hh):not(.top) .keypad { left: 774px; top: 92px; width: 172px; grid-auto-rows: 40px; }
.radio.dsg-std:not(.hh):not(.top) .key { min-height: 40px; height: 40px; }
.radio.dsg-std:not(.hh):not(.top) .key-num { font-size: 18px; }
.radio.dsg-std:not(.hh):not(.top) .key-name { font-size: 7px; margin-top: 2px; }
.radio.dsg-std:not(.hh):not(.top) #btn-back, .radio.dsg-std:not(.hh):not(.top) #btn-ok, .radio.dsg-std:not(.hh):not(.top) #btn-settings, .radio.dsg-std:not(.hh):not(.top) #dfn { top: 266px; }
.radio.dsg-std:not(.hh):not(.top) #ptt { left: 24px; top: 88px; }
.radio.dsg-std:not(.hh):not(.top) #switch { left: 16px; top: 198px; width: 112px; }
.radio.dsg-std:not(.hh):not(.top) #theme { left: 16px; top: 244px; width: 112px; }
.radio.dsg-std:not(.hh):not(.top) #up { left: 664px; top: 122px; }
.radio.dsg-std:not(.hh):not(.top) #left { left: 614px; top: 168px; } .radio.dsg-std:not(.hh):not(.top) #center { left: 666px; top: 166px; } .radio.dsg-std:not(.hh):not(.top) #right { left: 718px; top: 168px; }
.radio.dsg-std:not(.hh):not(.top) #down { left: 664px; top: 212px; }
.radio.dsg-std:not(.hh):not(.top) #btn-home { left: 658px; top: 262px; }

/* ---- v5: narrower body, knobs level with PANIC, compact arrow cluster ---- */
.radio.dsg-std:not(.hh):not(.top) { width: 900px; }
.radio.dsg-std:not(.hh):not(.top) .screen { left: 150px; width: 420px; }
.radio.dsg-std:not(.hh):not(.top) .keypad { left: 714px; top: 92px; width: 172px; }
.radio.dsg-std:not(.hh):not(.top) #panic { left: 824px; top: 14px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(1) { left: 686px; top: 17px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(2) { left: 752px; top: 17px; }
.radio.dsg-std:not(.hh):not(.top) #up, .radio.dsg-std:not(.hh):not(.top) #down { width: 36px; height: 30px; left: 629px; }
.radio.dsg-std:not(.hh):not(.top) #up { top: 112px; } .radio.dsg-std:not(.hh):not(.top) #down { top: 192px; }
.radio.dsg-std:not(.hh):not(.top) #left, .radio.dsg-std:not(.hh):not(.top) #right { width: 36px; height: 30px; top: 152px; }
.radio.dsg-std:not(.hh):not(.top) #left { left: 589px; } .radio.dsg-std:not(.hh):not(.top) #right { left: 669px; }
.radio.dsg-std:not(.hh):not(.top) #center { left: 629px; top: 148px; width: 36px; height: 36px; }
.radio.dsg-std:not(.hh):not(.top) #btn-home { left: 626px; top: 238px; width: 42px; height: 40px; }
.radio.dsg-std:not(.hh):not(.top) #btn-back { left: 190px; } .radio.dsg-std:not(.hh):not(.top) #btn-ok { left: 284px; } .radio.dsg-std:not(.hh):not(.top) #btn-settings { left: 378px; } .radio.dsg-std:not(.hh):not(.top) #dfn { left: 472px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(1) { left: 668px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(2) { left: 742px; }

/* ---- v6: TX (red) and RX (green) lamps under PTT ---- */
.radio.dsg-std:not(.hh):not(.top) .indicators { display: block !important; position: absolute; left: 52px; top: 184px; width: 40px; height: 22px; padding: 0; margin: 0; }
.radio.dsg-std:not(.hh):not(.top) .indicators .mic-on { display: none; }
.radio.dsg-std:not(.hh):not(.top) .indicators #ind-tx, .radio.dsg-std:not(.hh):not(.top) .indicators #ind-rx { display: block; position: absolute; left: 0; width: 40px; height: 8px; border-radius: 4px; font-size: 0; color: transparent; border: 1px solid #050505; transition: background 0.08s, box-shadow 0.08s; }
.radio.dsg-std:not(.hh):not(.top) .indicators #ind-tx { top: 0; background: #4a1a18; }
.radio.dsg-std:not(.hh):not(.top) .indicators #ind-rx { top: 12px; background: #17331d; }
.radio.dsg-std:not(.hh):not(.top) .indicators #ind-tx.lit { background: #ff3b30; box-shadow: 0 0 10px 3px rgba(255, 59, 48, 0.85); }
.radio.dsg-std:not(.hh):not(.top) .indicators #ind-rx.lit { background: #3dff6a; box-shadow: 0 0 10px 3px rgba(61, 255, 106, 0.8); }
.radio.dsg-std:not(.hh):not(.top) #ptt { top: 82px; }
.radio.dsg-std:not(.hh):not(.top) #switch { top: 214px; } .radio.dsg-std:not(.hh):not(.top) #theme { top: 258px; }

/* ---- v7: HANDHELD RADIO / SWITCH THEME under the number pad ---- */
.radio.dsg-std:not(.hh):not(.top) #switch { left: 714px; top: 278px; width: 82px; height: 38px; font-size: 10px; }
.radio.dsg-std:not(.hh):not(.top) #theme { left: 804px; top: 278px; width: 82px; height: 38px; font-size: 10px; }
.radio.dsg-std:not(.hh):not(.top) #ptt { top: 112px; }
.radio.dsg-std:not(.hh):not(.top) .indicators { top: 214px; }

/* ---- v8: speaker grille under the TX / RX lamps ---- */
.radio.dsg-std:not(.hh):not(.top)::after { content: ""; position: absolute; left: 28px; top: 252px; width: 88px; height: 66px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2288%22%20height%3D%2266%22%20viewBox%3D%220%200%2088%2066%22%3E%3Crect%20x%3D%2216.0%22%20y%3D%224.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2216.0%22%20y%3D%223%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%226.0%22%20y%3D%2217.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%226.0%22%20y%3D%2216%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%220.0%22%20y%3D%2230.2%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%220.0%22%20y%3D%2229%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%226.0%22%20y%3D%2243.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%226.0%22%20y%3D%2242%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2216.0%22%20y%3D%2256.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2216.0%22%20y%3D%2255%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3C/svg%3E") no-repeat; pointer-events: none; }

/* ---- v9: corner screws (drawn with the speaker grille in one layer) ---- */
.radio.dsg-std:not(.hh):not(.top)::after { content: ""; position: absolute; left: 0; top: 0; width: 900px; height: 332px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22900%22%20height%3D%22332%22%20viewBox%3D%220%200%20900%20332%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%22.35%22%20cy%3D%22.3%22%20r%3D%22.9%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238a8d92%22/%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%233c3e42%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231a1b1d%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20x%3D%2244.0%22%20y%3D%22256.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22255%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22269.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22268%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22282.2%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22281%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22295.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22294%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22308.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22307%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M10.698657540361287%2011.741430106419859%20L17.301342459638715%2016.25856989358014%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M10.698657540361287%2012.741430106419859%20L17.301342459638715%2017.25856989358014%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%2214%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%2214%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M888.3540044690213%2010.76601438472164%20L883.6459955309787%2017.23398561527836%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M888.3540044690213%2011.76601438472164%20L883.6459955309787%2018.23398561527836%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M13.320131428399035%20314.05820108004616%20L14.679868571600965%20321.94179891995384%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M13.320131428399035%20315.05820108004616%20L14.679868571600965%20322.94179891995384%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M882.0797336886351%20317.2053226768198%20L889.9202663113649%20318.7946773231802%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M882.0797336886351%20318.2053226768198%20L889.9202663113649%20319.7946773231802%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3C/svg%3E") no-repeat; pointer-events: none; }
.radio.dsg-std:not(.hh):not(.top) #power { left: 26px; top: 22px; }
.radio.dsg-std:not(.hh):not(.top) #panic { left: 818px; top: 22px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(1), .radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(2) { top: 25px; }
.radio.dsg-std:not(.hh):not(.top) .keypad { top: 98px; }
.radio.dsg-std:not(.hh):not(.top) #switch { left: 714px; top: 280px; width: 80px; } .radio.dsg-std:not(.hh):not(.top) #theme { left: 800px; top: 280px; width: 80px; }

/* ---- v10: screen sits in its own raised housing with the REALITY name on it ---- */
.radio.dsg-std:not(.hh):not(.top)::before { left: 122px; right: auto; top: 8px; width: 476px; height: 252px; box-sizing: border-box; padding-top: 7px; text-align: center; font-size: 15px; letter-spacing: 7px; line-height: 20px;
  background: linear-gradient(#1b1c1e, #0c0d0e); border-radius: 16px; border: 2px solid #050505; box-shadow: inset 0 2px 0 rgba(255,255,255,.13), inset 0 0 0 4px #17181a, 0 3px 6px rgba(0,0,0,.5); }
.radio.dsg-std:not(.hh):not(.top)::before { color: #e6e8ea; font-style: normal; font-size: 16px; letter-spacing: 6px; }

/* ---- v11: three ribs linking the left side to the screen housing ---- */
.radio.dsg-std:not(.hh):not(.top)::after { content: ""; position: absolute; left: 0; top: 0; width: 900px; height: 332px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22900%22%20height%3D%22332%22%20viewBox%3D%220%200%20900%20332%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%22.35%22%20cy%3D%22.3%22%20r%3D%22.9%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238a8d92%22/%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%233c3e42%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231a1b1d%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20x%3D%2244.0%22%20y%3D%22256.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22255%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22269.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22268%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22282.2%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22281%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22295.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22294%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22308.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22307%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M10.698657540361287%2011.741430106419859%20L17.301342459638715%2016.25856989358014%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M10.698657540361287%2012.741430106419859%20L17.301342459638715%2017.25856989358014%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%2214%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%2214%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M888.3540044690213%2010.76601438472164%20L883.6459955309787%2017.23398561527836%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M888.3540044690213%2011.76601438472164%20L883.6459955309787%2018.23398561527836%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M13.320131428399035%20314.05820108004616%20L14.679868571600965%20321.94179891995384%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M13.320131428399035%20315.05820108004616%20L14.679868571600965%20322.94179891995384%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M882.0797336886351%20317.2053226768198%20L889.9202663113649%20318.7946773231802%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M882.0797336886351%20318.2053226768198%20L889.9202663113649%20319.7946773231802%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2283.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2282%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2292.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2291%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22101.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22100%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") no-repeat; pointer-events: none; }

/* ---- v12: 3D look: sloped top face, raised centre plate, bevelled edges ---- */
.radio.dsg-std:not(.hh):not(.top)::after { content: ""; position: absolute; left: 0; top: 0; width: 900px; height: 332px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22900%22%20height%3D%22332%22%20viewBox%3D%220%200%20900%20332%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%22.35%22%20cy%3D%22.3%22%20r%3D%22.9%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238a8d92%22/%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%233c3e42%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231a1b1d%22/%3E%3C/radialGradient%3E%3ClinearGradient%20id%3D%22top%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235e6166%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%233a3c40%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23232427%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22plate%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2334363a%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231c1d1f%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M24%202%20H876%20Q898%202%20898%2024%20L894%2026%20H6%20L2%2024%20Q2%202%2024%202Z%22%20fill%3D%22url%28%23top%29%22/%3E%3Cpath%20d%3D%22M24%202.5%20H876%20Q897%202.5%20897.5%2022%22%20fill%3D%22none%22%20stroke%3D%22%23a4a7ac%22%20stroke-width%3D%221.4%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M6%2026%20H894%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M6%2028%20H894%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22%20opacity%3D%22.5%22/%3E%3Cpath%20d%3D%22M112%2026%20L120%207%20H600%20L608%2026Z%22%20fill%3D%22url%28%23plate%29%22%20stroke%3D%22%23050505%22%20stroke-width%3D%221.5%22/%3E%3Cpath%20d%3D%22M120%208%20H600%22%20stroke%3D%22%239a9da2%22%20stroke-width%3D%221.2%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M2%2028%20V300%22%20stroke%3D%22%238a8d92%22%20stroke-width%3D%221.4%22%20opacity%3D%22.35%22/%3E%3Cpath%20d%3D%22M898%2028%20V300%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20opacity%3D%22.5%22/%3E%3Cpath%20d%3D%22M6%20321%20H894%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22%20opacity%3D%22.4%22/%3E%3Cpath%20d%3D%22M24%20330%20H876%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20opacity%3D%22.6%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22256.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22255%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22269.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22268%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22282.2%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22281%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22295.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22294%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22308.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22307%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M10.698657540361287%2011.741430106419859%20L17.301342459638715%2016.25856989358014%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M10.698657540361287%2012.741430106419859%20L17.301342459638715%2017.25856989358014%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%2214%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%2214%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M888.3540044690213%2010.76601438472164%20L883.6459955309787%2017.23398561527836%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M888.3540044690213%2011.76601438472164%20L883.6459955309787%2018.23398561527836%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M13.320131428399035%20314.05820108004616%20L14.679868571600965%20321.94179891995384%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M13.320131428399035%20315.05820108004616%20L14.679868571600965%20322.94179891995384%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M882.0797336886351%20317.2053226768198%20L889.9202663113649%20318.7946773231802%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M882.0797336886351%20318.2053226768198%20L889.9202663113649%20319.7946773231802%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2283.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2282%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2292.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2291%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22101.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22100%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") no-repeat; pointer-events: none; }
.radio.dsg-std:not(.hh):not(.top)::before { top: 24px; height: 238px; padding-top: 5px; }

.radio.dsg-std:not(.hh):not(.top)::after { content: ""; position: absolute; left: 0; top: 0; width: 900px; height: 332px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22900%22%20height%3D%22332%22%20viewBox%3D%220%200%20900%20332%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%22.35%22%20cy%3D%22.3%22%20r%3D%22.9%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238a8d92%22/%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%233c3e42%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231a1b1d%22/%3E%3C/radialGradient%3E%3ClinearGradient%20id%3D%22top%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235e6166%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%233a3c40%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23232427%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22plate%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2334363a%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231c1d1f%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M24%202%20H876%20Q898%202%20898%2024%20L894%2026%20H6%20L2%2024%20Q2%202%2024%202Z%22%20fill%3D%22url%28%23top%29%22/%3E%3Cpath%20d%3D%22M24%202.5%20H876%20Q897%202.5%20897.5%2022%22%20fill%3D%22none%22%20stroke%3D%22%23a4a7ac%22%20stroke-width%3D%221.4%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M6%2026%20H894%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M6%2028%20H894%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22%20opacity%3D%22.5%22/%3E%3Cpath%20d%3D%22M110%2038%20L119%206%20H601%20L610%2038Z%22%20fill%3D%22url%28%23plate%29%22%20stroke%3D%22%23050505%22%20stroke-width%3D%221.5%22/%3E%3Cpath%20d%3D%22M119%207%20H601%22%20stroke%3D%22%239a9da2%22%20stroke-width%3D%221.2%22%20opacity%3D%22.8%22/%3E%3Ctext%20x%3D%22360%22%20y%3D%2229%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2216%22%20font-weight%3D%22700%22%20letter-spacing%3D%226%22%20fill%3D%22%23e6e8ea%22%3EREALITY%3C/text%3E%3Cpath%20d%3D%22M2%2028%20V300%22%20stroke%3D%22%238a8d92%22%20stroke-width%3D%221.4%22%20opacity%3D%22.35%22/%3E%3Cpath%20d%3D%22M898%2028%20V300%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20opacity%3D%22.5%22/%3E%3Cpath%20d%3D%22M6%20321%20H894%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22%20opacity%3D%22.4%22/%3E%3Cpath%20d%3D%22M24%20330%20H876%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20opacity%3D%22.6%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22256.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22255%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22269.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22268%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22282.2%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22281%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22295.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22294%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22308.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22307%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M10.698657540361287%2011.741430106419859%20L17.301342459638715%2016.25856989358014%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M10.698657540361287%2012.741430106419859%20L17.301342459638715%2017.25856989358014%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%2214%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%2214%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M888.3540044690213%2010.76601438472164%20L883.6459955309787%2017.23398561527836%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M888.3540044690213%2011.76601438472164%20L883.6459955309787%2018.23398561527836%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M13.320131428399035%20314.05820108004616%20L14.679868571600965%20321.94179891995384%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M13.320131428399035%20315.05820108004616%20L14.679868571600965%20322.94179891995384%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22886%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M882.0797336886351%20317.2053226768198%20L889.9202663113649%20318.7946773231802%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M882.0797336886351%20318.2053226768198%20L889.9202663113649%20319.7946773231802%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2283.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2282%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2292.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2291%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22101.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22100%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") no-repeat; pointer-events: none; }
.radio.dsg-std:not(.hh):not(.top)::before { content: ""; top: 30px; height: 232px; }

/* ---- v13: round four-way pad (no centre key; OK is in the bottom row) ---- */
.radio.dsg-std:not(.hh):not(.top) #up, .radio.dsg-std:not(.hh):not(.top) #down, .radio.dsg-std:not(.hh):not(.top) #left, .radio.dsg-std:not(.hh):not(.top) #right { left: 607px; top: 121px; width: 98px; height: 98px; border: 0; border-radius: 0; font-size: 0; padding: 0; background: linear-gradient(150deg, #4d5054, #26282b 60%, #1a1b1d); box-shadow: none; z-index: 2; }
.radio.dsg-std:not(.hh):not(.top) #up:active, .radio.dsg-std:not(.hh):not(.top) #down:active, .radio.dsg-std:not(.hh):not(.top) #left:active, .radio.dsg-std:not(.hh):not(.top) #right:active { filter: brightness(1.4); }
.radio.dsg-std:not(.hh):not(.top) #up::after, .radio.dsg-std:not(.hh):not(.top) #down::after, .radio.dsg-std:not(.hh):not(.top) #left::after, .radio.dsg-std:not(.hh):not(.top) #right::after { content: ""; position: absolute; border-radius: 2px; background: #cfd2d5; box-shadow: 0 0 2px rgba(255,255,255,.35); }
.radio.dsg-std:not(.hh):not(.top) #up { clip-path: polygon(50.0% 46.8%, 16.2% 13.2%, 20.2% 9.8%, 24.7% 6.9%, 29.4% 4.4%, 34.3% 2.5%, 39.5% 1.1%, 44.7% 0.3%, 50.0% 0.0%, 55.3% 0.3%, 60.5% 1.1%, 65.7% 2.5%, 70.6% 4.4%, 75.3% 6.9%, 79.8% 9.8%, 83.8% 13.2%); }
.radio.dsg-std:not(.hh):not(.top) #up::after { left:50%;top:13%;width:16px;height:3px;margin-left:-8px; }
.radio.dsg-std:not(.hh):not(.top) #down { clip-path: polygon(50.0% 53.2%, 83.8% 86.8%, 79.8% 90.2%, 75.3% 93.1%, 70.6% 95.6%, 65.7% 97.5%, 60.5% 98.9%, 55.3% 99.7%, 50.0% 100.0%, 44.7% 99.7%, 39.5% 98.9%, 34.3% 97.5%, 29.4% 95.6%, 24.7% 93.1%, 20.2% 90.2%, 16.2% 86.8%); }
.radio.dsg-std:not(.hh):not(.top) #down::after { left:50%;bottom:13%;width:16px;height:3px;margin-left:-8px; }
.radio.dsg-std:not(.hh):not(.top) #left { clip-path: polygon(46.8% 50.0%, 13.2% 83.8%, 9.8% 79.8%, 6.9% 75.3%, 4.4% 70.6%, 2.5% 65.7%, 1.1% 60.5%, 0.3% 55.3%, 0.0% 50.0%, 0.3% 44.7%, 1.1% 39.5%, 2.5% 34.3%, 4.4% 29.4%, 6.9% 24.7%, 9.8% 20.2%, 13.2% 16.2%); }
.radio.dsg-std:not(.hh):not(.top) #left::after { left:13%;top:50%;width:3px;height:16px;margin-top:-8px; }
.radio.dsg-std:not(.hh):not(.top) #right { clip-path: polygon(53.2% 50.0%, 86.8% 16.2%, 90.2% 20.2%, 93.1% 24.7%, 95.6% 29.4%, 97.5% 34.3%, 98.9% 39.5%, 99.7% 44.7%, 100.0% 50.0%, 99.7% 55.3%, 98.9% 60.5%, 97.5% 65.7%, 95.6% 70.6%, 93.1% 75.3%, 90.2% 79.8%, 86.8% 83.8%); }
.radio.dsg-std:not(.hh):not(.top) #right::after { right:13%;top:50%;width:3px;height:16px;margin-top:-8px; }
.radio.dsg-std:not(.hh):not(.top) #center { display: block !important; left: 601px; top: 115px; width: 110px; height: 110px; border-radius: 50%; font-size: 0; padding: 0; pointer-events: none; z-index: 1; background: radial-gradient(circle at 40% 30%, #17181a, #060607); border: 2px solid #55585d; box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 0 0 3px #0a0a0b; }
.radio.dsg-std:not(.hh):not(.top) #btn-home { left: 635px; top: 240px; }
.radio.dsg-std:not(.hh):not(.top) #up, .radio.dsg-std:not(.hh):not(.top) #down, .radio.dsg-std:not(.hh):not(.top) #left, .radio.dsg-std:not(.hh):not(.top) #right { left: 611px; top: 125px; width: 90px; height: 90px; }
.radio.dsg-std:not(.hh):not(.top) #center { left: 606px; top: 120px; width: 100px; height: 100px; }
.radio.dsg-std:not(.hh):not(.top) #btn-home { top: 236px; }
/* decoration layers stay behind every button */
.radio.dsg-std:not(.hh):not(.top)::before { z-index: 0; }
.radio.dsg-std:not(.hh):not(.top)::after { z-index: 0; }
.radio.dsg-std:not(.hh):not(.top) .face { z-index: 1; }

/* ---- v14: plainer screen with serious, regular-weight type ---- */
.radio.dsg-std:not(.hh):not(.top) .screen, .radio.dsg-std:not(.hh):not(.top) .screen * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.radio.dsg-std:not(.hh):not(.top) .screen .hdr { justify-content: space-between; gap: 0; padding: 3px 10px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: #1a1d20; background: transparent; border-bottom: 1px solid #c9ced2; }
.radio.dsg-std:not(.hh):not(.top) .screen .hdr * { font-weight: 400; }
.radio.dsg-std:not(.hh):not(.top) .screen .radio-view { gap: 3px; padding: 6px 12px 0; justify-content: flex-start; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-num { font-size: 13px; font-weight: 400; color: #333; letter-spacing: 0; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-name { font-size: 25px; font-weight: 400; color: #111; line-height: 1.1; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-status { font-size: 14px; font-weight: 400; color: #222; }
.radio.dsg-std:not(.hh):not(.top) .screen .units { border: 0; background: none; box-shadow: none; padding: 4px 0 0; width: 80%; border-top: 1px solid #c9ced2; border-radius: 0; margin-top: 4px; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-list { max-height: 66px; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-row { justify-content: center; font-size: 14px; font-weight: 400; color: #111; padding: 1px 3px; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-row .unit-name { color: #111; font-weight: 400; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-dot { display: none; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-tag { font-size: 11px; font-weight: 400; color: #444; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-row.talking, .radio.dsg-std:not(.hh):not(.top) .screen .unit-row.talking .unit-name { color: #000; font-weight: 700; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-row.alert, .radio.dsg-std:not(.hh):not(.top) .screen .unit-row.alert .unit-name { color: #b00000; font-weight: 700; }
.radio.dsg-std:not(.hh):not(.top) .screen .softkeys { background: #30353a; }
.radio.dsg-std:not(.hh):not(.top) .screen .softkey { font-size: 14px; font-weight: 400; letter-spacing: 0.5px; }
/* important text bold: channel name, network name */
.radio.dsg-std:not(.hh):not(.top) .screen .ch-name { font-weight: 700; }
.radio.dsg-std:not(.hh):not(.top) .screen .hdr, .radio.dsg-std:not(.hh):not(.top) .screen .hdr * { font-weight: 700; }
.radio.dsg-std:not(.hh):not(.top) .screen .softkey.active { background: #666d73; color: #fff; box-shadow: none; }
/* screen housing runs down to hold the BACK / OK / MENU / DFN row */
.radio.dsg-std:not(.hh):not(.top)::before { height: 288px; }
.radio.dsg-std:not(.hh):not(.top) #btn-back, .radio.dsg-std:not(.hh):not(.top) #btn-ok, .radio.dsg-std:not(.hh):not(.top) #btn-settings, .radio.dsg-std:not(.hh):not(.top) #dfn { top: 270px; }
.radio.dsg-std:not(.hh):not(.top) #power { color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.5); }
/* VOL / CH labels fully visible above the number pad */
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(1), .radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(2) { top: 21px; font-size: 11px; color: #c4c9d0; z-index: 3; }
.radio.dsg-std:not(.hh):not(.top) .keypad { top: 106px; grid-auto-rows: 38px; }
.radio.dsg-std:not(.hh):not(.top) .key { min-height: 38px; height: 38px; }
.radio.dsg-std:not(.hh):not(.top) #switch, .radio.dsg-std:not(.hh):not(.top) #theme { top: 284px; height: 34px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(1), .radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(2) { gap: 6px; top: 19px; }

/* ---- v16: keys with a hub and bevelled domes, not slices ---- */
.radio.dsg-std:not(.hh):not(.top) #up { clip-path: polygon(20.5% 16.0%, 25.7% 12.1%, 31.3% 9.1%, 37.3% 6.8%, 43.6% 5.5%, 50.0% 5.0%, 56.4% 5.5%, 62.7% 6.8%, 68.7% 9.1%, 74.3% 12.1%, 79.5% 16.0%, 58.8% 36.7%, 57.2% 35.7%, 55.5% 35.0%, 53.7% 34.4%, 51.9% 34.1%, 50.0% 34.0%, 48.1% 34.1%, 46.3% 34.4%, 44.5% 35.0%, 42.8% 35.7%, 41.2% 36.7%); background: radial-gradient(ellipse at 50% 22%, #62666b 0%, #34373b 45%, #1d1e20 100%); }
.radio.dsg-std:not(.hh):not(.top) #up::after { left:50%;top:21%;width:15px;height:3px;margin-left:-7.5px; }
.radio.dsg-std:not(.hh):not(.top) #down { clip-path: polygon(79.5% 84.0%, 74.3% 87.9%, 68.7% 90.9%, 62.7% 93.2%, 56.4% 94.5%, 50.0% 95.0%, 43.6% 94.5%, 37.3% 93.2%, 31.3% 90.9%, 25.7% 87.9%, 20.5% 84.0%, 41.2% 63.3%, 42.8% 64.3%, 44.5% 65.0%, 46.3% 65.6%, 48.1% 65.9%, 50.0% 66.0%, 51.9% 65.9%, 53.7% 65.6%, 55.5% 65.0%, 57.2% 64.3%, 58.8% 63.3%); background: radial-gradient(ellipse at 50% 78%, #62666b 0%, #34373b 45%, #1d1e20 100%); }
.radio.dsg-std:not(.hh):not(.top) #down::after { left:50%;bottom:21%;width:15px;height:3px;margin-left:-7.5px; }
.radio.dsg-std:not(.hh):not(.top) #left { clip-path: polygon(16.0% 79.5%, 33.7% 91.9%, 55.1% 94.7%, 75.4% 87.1%, 89.8% 71.0%, 95.0% 50.0%, 89.8% 29.0%, 75.4% 12.9%, 55.1% 5.3%, 33.7% 8.1%, 16.0% 20.5%, 36.7% 41.2%, 42.7% 35.8%, 50.6% 34.0%, 58.3% 36.3%, 64.0% 42.2%, 66.0% 50.0%, 64.0% 57.8%, 58.3% 63.7%, 50.6% 66.0%, 42.7% 64.2%, 36.7% 58.8%); background: radial-gradient(ellipse at 22% 50%, #62666b 0%, #34373b 45%, #1d1e20 100%); }
.radio.dsg-std:not(.hh):not(.top) #left::after { left:21%;top:50%;width:3px;height:15px;margin-top:-7.5px; }
.radio.dsg-std:not(.hh):not(.top) #right { clip-path: polygon(84.0% 20.5%, 87.9% 25.7%, 90.9% 31.3%, 93.2% 37.3%, 94.5% 43.6%, 95.0% 50.0%, 94.5% 56.4%, 93.2% 62.7%, 90.9% 68.7%, 87.9% 74.3%, 84.0% 79.5%, 63.3% 58.8%, 64.3% 57.2%, 65.0% 55.5%, 65.6% 53.7%, 65.9% 51.9%, 66.0% 50.0%, 65.9% 48.1%, 65.6% 46.3%, 65.0% 44.5%, 64.3% 42.8%, 63.3% 41.2%); background: radial-gradient(ellipse at 78% 50%, #62666b 0%, #34373b 45%, #1d1e20 100%); }
.radio.dsg-std:not(.hh):not(.top) #right::after { right:21%;top:50%;width:3px;height:15px;margin-top:-7.5px; }
.radio.dsg-std:not(.hh):not(.top) #center { background: radial-gradient(circle at 40% 30%, #1c1d1f, #050506); border: 2px solid #5c5f64; box-shadow: 0 4px 8px rgba(0,0,0,.65), inset 0 0 0 4px #0b0b0c, inset 0 0 0 5px #2a2c2f; }
.radio.dsg-std:not(.hh):not(.top) #center::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #2f3236, #0d0e0f); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.12); }
.radio.dsg-std:not(.hh):not(.top) #up, .radio.dsg-std:not(.hh):not(.top) #down, .radio.dsg-std:not(.hh):not(.top) #left, .radio.dsg-std:not(.hh):not(.top) #right { left: 609px; top: 123px; width: 94px; height: 94px; }

.radio.dsg-std:not(.hh):not(.top) #up { clip-path: polygon(20.5% 16.0%, 25.7% 12.1%, 31.3% 9.1%, 37.3% 6.8%, 43.6% 5.5%, 50.0% 5.0%, 56.4% 5.5%, 62.7% 6.8%, 68.7% 9.1%, 74.3% 12.1%, 79.5% 16.0%, 58.8% 36.7%, 57.2% 35.7%, 55.5% 35.0%, 53.7% 34.4%, 51.9% 34.1%, 50.0% 34.0%, 48.1% 34.1%, 46.3% 34.4%, 44.5% 35.0%, 42.8% 35.7%, 41.2% 36.7%); }
.radio.dsg-std:not(.hh):not(.top) #down { clip-path: polygon(79.5% 84.0%, 74.3% 87.9%, 68.7% 90.9%, 62.7% 93.2%, 56.4% 94.5%, 50.0% 95.0%, 43.6% 94.5%, 37.3% 93.2%, 31.3% 90.9%, 25.7% 87.9%, 20.5% 84.0%, 41.2% 63.3%, 42.8% 64.3%, 44.5% 65.0%, 46.3% 65.6%, 48.1% 65.9%, 50.0% 66.0%, 51.9% 65.9%, 53.7% 65.6%, 55.5% 65.0%, 57.2% 64.3%, 58.8% 63.3%); }
.radio.dsg-std:not(.hh):not(.top) #left { clip-path: polygon(16.0% 79.5%, 12.1% 74.3%, 9.1% 68.7%, 6.8% 62.7%, 5.5% 56.4%, 5.0% 50.0%, 5.5% 43.6%, 6.8% 37.3%, 9.1% 31.3%, 12.1% 25.7%, 16.0% 20.5%, 36.7% 41.2%, 35.7% 42.8%, 35.0% 44.5%, 34.4% 46.3%, 34.1% 48.1%, 34.0% 50.0%, 34.1% 51.9%, 34.4% 53.7%, 35.0% 55.5%, 35.7% 57.2%, 36.7% 58.8%); }
.radio.dsg-std:not(.hh):not(.top) #right { clip-path: polygon(84.0% 20.5%, 87.9% 25.7%, 90.9% 31.3%, 93.2% 37.3%, 94.5% 43.6%, 95.0% 50.0%, 94.5% 56.4%, 93.2% 62.7%, 90.9% 68.7%, 87.9% 74.3%, 84.0% 79.5%, 63.3% 58.8%, 64.3% 57.2%, 65.0% 55.5%, 65.6% 53.7%, 65.9% 51.9%, 66.0% 50.0%, 65.9% 48.1%, 65.6% 46.3%, 65.0% 44.5%, 64.3% 42.8%, 63.3% 41.2%); }

/* ---- v17: more minimal: flatter keys, no sub-labels, quieter decoration ---- */
.radio.dsg-std:not(.hh):not(.top) .key-name { display: none; }
.radio.dsg-std:not(.hh):not(.top) .key { box-shadow: 0 1px 0 #000; border-color: #1a1b1d; background: #34373b; }
.radio.dsg-std:not(.hh):not(.top) .key-num { font-size: 19px; font-weight: 600; }
.radio.dsg-std:not(.hh):not(.top) #btn-back, .radio.dsg-std:not(.hh):not(.top) #btn-ok, .radio.dsg-std:not(.hh):not(.top) #btn-settings, .radio.dsg-std:not(.hh):not(.top) #switch, .radio.dsg-std:not(.hh):not(.top) #theme, .radio.dsg-std:not(.hh):not(.top) #btn-home { box-shadow: 0 1px 0 #000; background: #34373b; border-color: #1a1b1d; }
.radio.dsg-std:not(.hh):not(.top) #up, .radio.dsg-std:not(.hh):not(.top) #down, .radio.dsg-std:not(.hh):not(.top) #left, .radio.dsg-std:not(.hh):not(.top) #right { background: #3a3d41 !important; }
.radio.dsg-std:not(.hh):not(.top) #center { background: #0a0a0b; box-shadow: none; border: 2px solid #34373b; }
.radio.dsg-std:not(.hh):not(.top) #center::after { background: #16171a; box-shadow: none; }
.radio.dsg-std:not(.hh):not(.top) #ptt { box-shadow: 0 1px 0 #000, 0 0 0 6px #17181a; }
.radio.dsg-std:not(.hh):not(.top)::after { opacity: .55; }
.radio.dsg-std:not(.hh):not(.top)::before { box-shadow: inset 0 0 0 3px #131415; }
.radio.dsg-std:not(.hh):not(.top) .screen { box-shadow: 0 0 0 10px #17181a; outline-color: #050506; }
.radio.dsg-std:not(.hh):not(.top)::after { opacity: .85; }

.ch-page { display: contents; }
/* ---- v18: the vehicle screen shows the channel centred; the units are below, reached with the up / down arrows ---- */
.radio.dsg-std:not(.hh):not(.top) .screen .radio-view { overflow-y: auto; scrollbar-width: none; padding: 0 12px; gap: 0; justify-content: flex-start; scroll-behavior: smooth; }
.radio.dsg-std:not(.hh):not(.top) .screen .radio-view::-webkit-scrollbar { display: none; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; flex-shrink: 0; gap: 4px; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-name { font-size: 32px; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-num { font-size: 14px; }
.radio.dsg-std:not(.hh):not(.top) .screen .ch-status { font-size: 15px; }
.radio.dsg-std:not(.hh):not(.top) .screen .units { width: 80%; margin: 0 auto 12px; flex-shrink: 0; align-self: center; }
.radio.dsg-std:not(.hh):not(.top) .screen .units-title { display: block; font-size: 12px; color: #444; text-align: center; padding-bottom: 3px; }
.radio.dsg-std:not(.hh):not(.top) .screen .unit-list { max-height: none; overflow: visible; }

/* ---- v19: overall shape like a mobile radio: flat top, cut corners, rubber side grips ---- */
.radio.dsg-std:not(.hh):not(.top) { border-radius: 0; box-shadow: none; clip-path: polygon(42px 0px, 858px 0px, 888px 30px, 888px 92px, 900px 104px, 900px 230px, 888px 242px, 888px 302px, 858px 332px, 42px 332px, 12px 302px, 12px 242px, 0px 230px, 0px 104px, 12px 92px, 12px 30px); }
.radio.dsg-std:not(.hh):not(.top)::after { content: ""; position: absolute; left: 0; top: 0; width: 900px; height: 332px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22900%22%20height%3D%22332%22%20viewBox%3D%220%200%20900%20332%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%22.35%22%20cy%3D%22.3%22%20r%3D%22.9%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238a8d92%22/%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%233c3e42%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231a1b1d%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M0%20104%20L12%2092%20V242%20L0%20230Z%22%20fill%3D%22%2317181a%22/%3E%3Cpath%20d%3D%22M900%20104%20L888%2092%20V242%20L900%20230Z%22%20fill%3D%22%2317181a%22/%3E%3Cpath%20d%3D%22M12%2096%20V238%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M888%2096%20V238%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22256.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22255%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22269.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22268%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22282.2%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22281%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22295.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22294%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22308.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22307%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2238%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2238%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M22.698657540361285%2035.741430106419855%20L29.301342459638715%2040.258569893580145%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M22.698657540361285%2036.741430106419855%20L29.301342459638715%2041.258569893580145%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%2238%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%2238%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M876.3540044690213%2034.76601438472164%20L871.6459955309787%2041.23398561527836%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M876.3540044690213%2035.76601438472164%20L871.6459955309787%2042.23398561527836%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%22296%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%22296%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M25.320131428399037%20292.05820108004616%20L26.679868571600963%20299.94179891995384%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M25.320131428399037%20293.05820108004616%20L26.679868571600963%20300.94179891995384%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%22296%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%22296%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M870.0797336886351%20295.2053226768198%20L877.9202663113649%20296.7946773231802%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M870.0797336886351%20296.2053226768198%20L877.9202663113649%20297.7946773231802%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2283.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2282%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2292.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%2291%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22101.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22100%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M42%200%20L858%200%20L888%2030%20L888%2092%20L900%20104%20L900%20230%20L888%20242%20L888%20302%20L858%20332%20L42%20332%20L12%20302%20L12%20242%20L0%20230%20L0%20104%20L12%2092%20L12%2030Z%22%20fill%3D%22none%22%20stroke%3D%22%23050505%22%20stroke-width%3D%223%22/%3E%3Cpath%20d%3D%22M43%203%20L857%203%20L885%2031%20L885%2093%20L897%20105%20L897%20229%20L885%20241%20L885%20301%20L857%20329%20L43%20329%20L15%20301%20L15%20241%20L3%20229%20L3%20105%20L15%2093%20L15%2031Z%22%20fill%3D%22none%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221.2%22%20opacity%3D%22.55%22/%3E%3Ctext%20x%3D%22360%22%20y%3D%2227%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2216%22%20font-weight%3D%22700%22%20letter-spacing%3D%226%22%20fill%3D%22%23e6e8ea%22%3EREALITY%3C/text%3E%3C/svg%3E") no-repeat; pointer-events: none; opacity: 1; z-index: 0; }
.radio.dsg-std:not(.hh):not(.top)::before { top: 8px; height: 310px; }
.radio.dsg-std:not(.hh):not(.top) #power { left: 28px; top: 28px; }
.radio.dsg-std:not(.hh):not(.top) #panic { left: 810px; top: 26px; }
.radio.dsg-std:not(.hh):not(.top) #power { left: 42px; top: 30px; }
.radio.dsg-std:not(.hh):not(.top) #panic { left: 800px; top: 26px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(1) { left: 658px; }
.radio.dsg-std:not(.hh):not(.top) .knob-wrap:nth-child(2) { left: 728px; }
.radio.dsg-std:not(.hh):not(.top) .keypad { left: 710px; width: 162px; gap: 6px; }
.radio.dsg-std:not(.hh):not(.top) .key { border: 1.5px solid #75797f; }
.radio.dsg-std:not(.hh):not(.top) #switch { left: 710px; width: 78px; }
.radio.dsg-std:not(.hh):not(.top) #theme { left: 794px; width: 78px; }
.radio.dsg-std:not(.hh):not(.top) #switch { left: 710px; width: 72px; }
.radio.dsg-std:not(.hh):not(.top) #theme { left: 788px; width: 72px; }
.radio.dsg-std:not(.hh):not(.top) .key { border: 1.5px solid #101112; }

/* ---- v20: less "generated": matte moulded-plastic grain, hard even edges, flat controls, printed legends ---- */
.radio.dsg-std:not(.hh):not(.top) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); }
.radio.dsg-std:not(.hh):not(.top) .key, .radio.dsg-std:not(.hh):not(.top) #btn-back, .radio.dsg-std:not(.hh):not(.top) #btn-ok, .radio.dsg-std:not(.hh):not(.top) #btn-settings, .radio.dsg-std:not(.hh):not(.top) #switch, .radio.dsg-std:not(.hh):not(.top) #theme, .radio.dsg-std:not(.hh):not(.top) #btn-home { background: #34373b url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); border-radius: 7px; box-shadow: 0 1px 0 #000, inset 0 1px 0 rgba(255,255,255,.07); }
.radio.dsg-std:not(.hh):not(.top) #dfn { border-radius: 7px; background: #8e211d url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); box-shadow: 0 1px 0 #000, inset 0 1px 0 rgba(255,255,255,.08); }
.radio.dsg-std:not(.hh):not(.top) #ptt { background: #44474c url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); box-shadow: 0 0 0 4px #121314, 0 0 0 5px #2c2e31; }
.radio.dsg-std:not(.hh):not(.top) #panic { background: #e5701c url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); border: 3px solid #0b0b0c; box-shadow: 0 0 0 4px #17181a, 0 0 0 5px #2c2e31; color: #1a0d03; }
.radio.dsg-std:not(.hh):not(.top) #power { background: #1e7a39 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); border: 3px solid #0b0b0c; box-shadow: 0 0 0 4px #17181a, 0 0 0 5px #2c2e31; }
.radio.dsg-std:not(.hh):not(.top) .knob { box-shadow: none; background: #141517 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); }
.radio.dsg-std:not(.hh):not(.top) .indicators::after { content: "TX\A RX"; white-space: pre; position: absolute; left: 50px; top: -1px; font: 700 8px/12px Arial, sans-serif; color: #8d939a; }
.radio.dsg-std:not(.hh):not(.top) .indicators #ind-tx.lit { box-shadow: 0 0 5px 1px rgba(255,59,48,.6); }
.radio.dsg-std:not(.hh):not(.top) .indicators #ind-rx.lit { box-shadow: 0 0 5px 1px rgba(61,255,106,.55); }

/* ---- v21: header shows a connection icon (left) and a battery (right, always full) ---- */
.radio.dsg-std:not(.hh):not(.top) .screen .hdr { position: relative; }
.radio.dsg-std:not(.hh):not(.top) .screen .hdr::before { content: ""; position: absolute; left: 10px; top: 50%; width: 24px; height: 16px; margin-top: -8px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%3E%3Crect%20x%3D%221%22%20y%3D%2212.0%22%20width%3D%224%22%20height%3D%224.0%22%20fill%3D%22%232fae4c%22/%3E%3Crect%20x%3D%227%22%20y%3D%228.4%22%20width%3D%224%22%20height%3D%227.6%22%20fill%3D%22%232fae4c%22/%3E%3Crect%20x%3D%2213%22%20y%3D%224.8%22%20width%3D%224%22%20height%3D%2211.2%22%20fill%3D%22%232fae4c%22/%3E%3Crect%20x%3D%2219%22%20y%3D%221.2%22%20width%3D%224%22%20height%3D%2214.8%22%20fill%3D%22%232fae4c%22/%3E%3C/svg%3E") no-repeat center; }
.radio.dsg-std:not(.hh):not(.top) .screen.offline .hdr::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%3E%3Crect%20x%3D%221%22%20y%3D%2212.0%22%20width%3D%224%22%20height%3D%224.0%22%20fill%3D%22%23c0392b%22/%3E%3Crect%20x%3D%227%22%20y%3D%228.4%22%20width%3D%224%22%20height%3D%227.6%22%20fill%3D%22%23bfc4c8%22/%3E%3Crect%20x%3D%2213%22%20y%3D%224.8%22%20width%3D%224%22%20height%3D%2211.2%22%20fill%3D%22%23bfc4c8%22/%3E%3Crect%20x%3D%2219%22%20y%3D%221.2%22%20width%3D%224%22%20height%3D%2214.8%22%20fill%3D%22%23bfc4c8%22/%3E%3C/svg%3E"); }
.radio.dsg-std:not(.hh):not(.top) .screen .hdr::after { content: ""; position: absolute; right: 10px; top: 50%; width: 28px; height: 16px; margin-top: -8px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2228%22%20height%3D%2216%22%20viewBox%3D%220%200%2028%2016%22%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%2222%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22%231a1d20%22%20stroke-width%3D%221.6%22/%3E%3Crect%20x%3D%2224%22%20y%3D%225.5%22%20width%3D%223%22%20height%3D%225%22%20rx%3D%221%22%20fill%3D%22%231a1d20%22/%3E%3Crect%20x%3D%223.2%22%20y%3D%224.2%22%20width%3D%2217.6%22%20height%3D%227.6%22%20rx%3D%221%22%20fill%3D%22%232fae4c%22/%3E%3C/svg%3E") no-repeat center; }
.radio.dsg-std:not(.hh):not(.top) .screen #hdr-right { font-size: 0; }
.radio.dsg-std:not(.hh):not(.top) .screen[data-mode="radio"] #hdr-title, .radio.dsg-std:not(.hh):not(.top) .screen[data-mode="home"] #hdr-title { font-size: 0; }
.radio.dsg-std:not(.hh):not(.top) .screen:not([data-mode="radio"]):not([data-mode="home"]) #hdr-title { padding-left: 34px; }
.radio.dsg-std:not(.hh):not(.top) .screen .hdr { min-height: 26px; box-sizing: border-box; align-items: center; }
/* user's local time, just right of the connection icon */
.radio.dsg-std:not(.hh):not(.top) .screen[data-mode="radio"] #hdr-title::after, .radio.dsg-std:not(.hh):not(.top) .screen[data-mode="home"] #hdr-title::after { content: attr(data-time); position: absolute; left: 42px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: #1a1d20; line-height: 1; }

/* ---- v22: pitched down ~2 degrees, so a sliver of the top of the radio shows ---- */
.radio.dsg-std:not(.hh):not(.top) { height: 354px; clip-path: polygon(60px 0px, 840px 0px, 858px 22px, 888px 52px, 888px 114px, 900px 126px, 900px 252px, 888px 264px, 888px 324px, 858px 354px, 42px 354px, 12px 324px, 12px 264px, 0px 252px, 0px 126px, 12px 114px, 12px 52px, 42px 22px); }
.radio.dsg-std:not(.hh):not(.top) .face { inset: 22px 0 0 0; }
.radio.dsg-std:not(.hh):not(.top)::after { content: ""; position: absolute; left: 0; top: 0; width: 900px; height: 354px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22900%22%20height%3D%22354%22%20viewBox%3D%220%200%20900%20354%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%22.35%22%20cy%3D%22.3%22%20r%3D%22.9%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238a8d92%22/%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%233c3e42%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231a1b1d%22/%3E%3C/radialGradient%3E%3ClinearGradient%20id%3D%22tf%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23595d62%22/%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%23383b3f%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2325272a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M60%200%20H840%20L858%2022%20H42Z%22%20fill%3D%22url%28%23tf%29%22/%3E%3Cpath%20d%3D%22M150%205%20H430%20L427%2016%20H153Z%22%20fill%3D%22%23141516%22%20opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M150%204.6%20H430%22%20stroke%3D%22%238c9095%22%20stroke-width%3D%221.1%22%20opacity%3D%22.45%22/%3E%3Cpath%20d%3D%22M470%205%20H750%20L747%2016%20H473Z%22%20fill%3D%22%23141516%22%20opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M470%204.6%20H750%22%20stroke%3D%22%238c9095%22%20stroke-width%3D%221.1%22%20opacity%3D%22.45%22/%3E%3Cpath%20d%3D%22M42%2022%20H858%22%20stroke%3D%22%239a9ea3%22%20stroke-width%3D%221.4%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M42%2023.7%20H858%22%20stroke%3D%22%23050505%22%20stroke-width%3D%221.8%22%20opacity%3D%22.6%22/%3E%3Cpath%20d%3D%22M0%20126%20L12%20114%20V264%20L0%20252Z%22%20fill%3D%22%2317181a%22/%3E%3Cpath%20d%3D%22M900%20126%20L888%20114%20V264%20L900%20252Z%22%20fill%3D%22%2317181a%22/%3E%3Cpath%20d%3D%22M12%20118%20V260%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M888%20118%20V260%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22278.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22277%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22291.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22290%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22304.2%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22303%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22317.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22316%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22330.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22329%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2260%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2260%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M22.698657540361285%2057.741430106419855%20L29.301342459638715%2062.258569893580145%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M22.698657540361285%2058.741430106419855%20L29.301342459638715%2063.258569893580145%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%2260%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%2260%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M876.3540044690213%2056.76601438472164%20L871.6459955309787%2063.23398561527836%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M876.3540044690213%2057.76601438472164%20L871.6459955309787%2064.23398561527836%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M25.320131428399037%20314.05820108004616%20L26.679868571600963%20321.94179891995384%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M25.320131428399037%20315.05820108004616%20L26.679868571600963%20322.94179891995384%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M870.0797336886351%20317.2053226768198%20L877.9202663113649%20318.7946773231802%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M870.0797336886351%20318.2053226768198%20L877.9202663113649%20319.7946773231802%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22105.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22104%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22114.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22113%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22123.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22122%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M60%200%20L840%200%20L858%2022%20L888%2052%20L888%20114%20L900%20126%20L900%20252%20L888%20264%20L888%20324%20L858%20354%20L42%20354%20L12%20324%20L12%20264%20L0%20252%20L0%20126%20L12%20114%20L12%2052%20L42%2022Z%22%20fill%3D%22none%22%20stroke%3D%22%23050505%22%20stroke-width%3D%223%22/%3E%3Ctext%20x%3D%22360%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2216%22%20font-weight%3D%22700%22%20letter-spacing%3D%226%22%20fill%3D%22%23e6e8ea%22%3EREALITY%3C/text%3E%3C/svg%3E") no-repeat; pointer-events: none; z-index: 0; }
.radio.dsg-std:not(.hh):not(.top)::before { top: 30px; }

/* ===== Handheld: the same screen UI and matte key style as the vehicle ===== */
.radio.dsg-std.hh .screen { background: #f4f6f7; }
.radio.dsg-std.hh .screen, .radio.dsg-std.hh .screen * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.radio.dsg-std.hh .screen .hdr { position: relative; min-height: 20px; box-sizing: border-box; align-items: center; justify-content: space-between;
  gap: 0; padding: 2px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0; color: #1a1d20; background: transparent; border-bottom: 1px solid #c9ced2; }
.radio.dsg-std.hh .screen .hdr::before { content: ""; position: absolute; left: 6px; top: 50%; width: 18px; height: 12px; margin-top: -6px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2016%22%3E%3Crect%20x%3D%221%22%20y%3D%2212.0%22%20width%3D%224%22%20height%3D%224.0%22%20fill%3D%22%232fae4c%22/%3E%3Crect%20x%3D%227%22%20y%3D%228.4%22%20width%3D%224%22%20height%3D%227.6%22%20fill%3D%22%232fae4c%22/%3E%3Crect%20x%3D%2213%22%20y%3D%224.8%22%20width%3D%224%22%20height%3D%2211.2%22%20fill%3D%22%232fae4c%22/%3E%3Crect%20x%3D%2219%22%20y%3D%221.2%22%20width%3D%224%22%20height%3D%2214.8%22%20fill%3D%22%232fae4c%22/%3E%3C/svg%3E") no-repeat center; }
.radio.dsg-std.hh .screen.offline .hdr::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2016%22%3E%3Crect%20x%3D%221%22%20y%3D%2212.0%22%20width%3D%224%22%20height%3D%224.0%22%20fill%3D%22%23c0392b%22/%3E%3Crect%20x%3D%227%22%20y%3D%228.4%22%20width%3D%224%22%20height%3D%227.6%22%20fill%3D%22%23bfc4c8%22/%3E%3Crect%20x%3D%2213%22%20y%3D%224.8%22%20width%3D%224%22%20height%3D%2211.2%22%20fill%3D%22%23bfc4c8%22/%3E%3Crect%20x%3D%2219%22%20y%3D%221.2%22%20width%3D%224%22%20height%3D%2214.8%22%20fill%3D%22%23bfc4c8%22/%3E%3C/svg%3E"); }
.radio.dsg-std.hh .screen .hdr::after { content: ""; position: absolute; right: 6px; top: 50%; width: 20px; height: 12px; margin-top: -6px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2220%22%20height%3D%2212%22%20viewBox%3D%220%200%2028%2016%22%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%2222%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22%231a1d20%22%20stroke-width%3D%221.6%22/%3E%3Crect%20x%3D%2224%22%20y%3D%225.5%22%20width%3D%223%22%20height%3D%225%22%20rx%3D%221%22%20fill%3D%22%231a1d20%22/%3E%3Crect%20x%3D%223.2%22%20y%3D%224.2%22%20width%3D%2217.6%22%20height%3D%227.6%22%20rx%3D%221%22%20fill%3D%22%232fae4c%22/%3E%3C/svg%3E") no-repeat center; }
.radio.dsg-std.hh .screen #hdr-right { font-size: 0; }
.radio.dsg-std.hh .screen[data-mode="radio"] #hdr-title, .radio.dsg-std.hh .screen[data-mode="home"] #hdr-title { font-size: 0; }
.radio.dsg-std.hh .screen[data-mode="radio"] #hdr-title::after, .radio.dsg-std.hh .screen[data-mode="home"] #hdr-title::after { content: attr(data-time); position: absolute; left: 28px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #1a1d20; line-height: 1; }
.radio.dsg-std.hh .screen:not([data-mode="radio"]):not([data-mode="home"]) #hdr-title { padding-left: 24px; }
.radio.dsg-std.hh .screen .radio-view { overflow-y: auto; scrollbar-width: none; padding: 0 8px; gap: 0; justify-content: flex-start; scroll-behavior: smooth; }
.radio.dsg-std.hh .screen .radio-view::-webkit-scrollbar { display: none; }
.radio.dsg-std.hh .screen .ch-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; flex-shrink: 0; gap: 2px; }
.radio.dsg-std.hh .screen .ch-num { font-size: 11px; font-weight: 400; color: #333; }
.radio.dsg-std.hh .screen .ch-name { font-size: 22px; font-weight: 700; color: #111; line-height: 1.1; }
.radio.dsg-std.hh .screen .ch-status { font-size: 11px; font-weight: 400; color: #222; min-height: 12px; }
.radio.dsg-std.hh .screen .units { border: 0; background: none; box-shadow: none; border-radius: 0; width: 88%; margin: 0 auto 8px; padding: 3px 0 0; border-top: 1px solid #c9ced2; flex-shrink: 0; align-self: center; }
.radio.dsg-std.hh .screen .units-title { display: block; font-size: 9px; color: #444; text-align: center; padding-bottom: 2px; }
.radio.dsg-std.hh .screen .unit-list { max-height: none; overflow: visible; }
.radio.dsg-std.hh .screen .unit-row { justify-content: center; font-size: 12px; font-weight: 400; color: #111; padding: 0 2px; }
.radio.dsg-std.hh .screen .unit-row .unit-name { color: #111; font-weight: 400; }
.radio.dsg-std.hh .screen .unit-dot { display: none; }
.radio.dsg-std.hh .screen .unit-tag { font-size: 9px; color: #444; }
.radio.dsg-std.hh .screen .unit-row.talking, .radio.dsg-std.hh .screen .unit-row.talking .unit-name { color: #000; font-weight: 700; }
.radio.dsg-std.hh .screen .unit-row.alert, .radio.dsg-std.hh .screen .unit-row.alert .unit-name { color: #b00000; font-weight: 700; }
.radio.dsg-std.hh .screen .softkeys { background: #30353a; }
.radio.dsg-std.hh .screen .softkey { font-size: 12px; font-weight: 400; padding: 5px 0; }
.radio.dsg-std.hh .screen .softkey.active { background: #666d73; color: #fff; box-shadow: none; }
/* matte, flat keys with a dark outline, like the vehicle */
.radio.dsg-std.hh .key, .radio.dsg-std.hh #btn-ok, .radio.dsg-std.hh #btn-back, .radio.dsg-std.hh #btn-settings, .radio.dsg-std.hh #btn-home, .radio.dsg-std.hh #switch, .radio.dsg-std.hh #top, .radio.dsg-std.hh .dir, .radio.dsg-std.hh #center {
  background: #34373b url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); border: 1.5px solid #101112; border-radius: 7px; box-shadow: 0 1px 0 #000, inset 0 1px 0 rgba(255,255,255,.07); }
.radio.dsg-std.hh #center { border-radius: 50%; }
.radio.dsg-std.hh #dfn { background: #8e211d url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); border: 1.5px solid #101112; border-radius: 7px; box-shadow: 0 1px 0 #000, inset 0 1px 0 rgba(255,255,255,.08); }
.radio.dsg-std.hh .power { background: #1e7a39 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); border: 1.5px solid #101112; border-radius: 7px; box-shadow: 0 1px 0 #000, inset 0 1px 0 rgba(255,255,255,.08); color: #fff; }
.radio.dsg-std.hh #panic { background: #e5701c url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); border: 3px solid #0b0b0c; box-shadow: 0 0 0 3px #17181a; color: #1a0d03; }
.radio.dsg-std.hh #ptt { background: #44474c url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); }
.radio.dsg-std.hh .key-num { font-weight: 600; }
.radio.dsg-std.hh #btn-back { background: #8e211d url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); color: #fff; }

/* handheld top shaped like the reference: tall tapered antenna on the left, PANIC moved clear of it */
.radio.dsg-std.hh { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22320%22%20height%3D%22724%22%20viewBox%3D%220%200%20320%20724%22%3E%3Cpath%20d%3D%22M46%204%20Q56%20-4%2066%204%20L69%2034%20V66%20H43%20V34Z%22%20fill%3D%22%23191a1c%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M42%2058%20H70%20V76%20Q56%2083%2042%2076Z%22%20fill%3D%22%230e0f10%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M50%208%20V68%22%20stroke%3D%22%2353585e%22%20stroke-width%3D%222.5%22%20opacity%3D%22.4%22/%3E%3Cpath%20d%3D%22M43%2044%20H69%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22%20opacity%3D%22.6%22/%3E%3Cg%20transform%3D%22translate%28-15%20-150%29%20scale%28.8333%29%22%3E%3Cpath%20d%3D%22M86%20250%20H334%20Q350%20250%20352%20270%20L356%20290%20Q396%20310%20398%20360%20L402%201000%20Q402%201056%20330%201056%20H90%20Q18%201056%2018%201000%20L22%20360%20Q24%20310%2064%20290%20L68%20270%20Q70%20250%2086%20250%20Z%22%20fill%3D%22%232a2b2e%22%20stroke%3D%22%23050505%22%20stroke-width%3D%224%22/%3E%3Cpath%20d%3D%22M96%20262%20H324%20Q338%20262%20340%20276%20L344%20298%20Q380%20316%20384%20364%20L388%20992%20Q388%201042%20328%201042%20H92%20Q32%201042%2032%20992%20L36%20364%20Q40%20316%2076%20298%20L80%20276%20Q82%20262%2096%20262%20Z%22%20fill%3D%22none%22%20stroke%3D%22%2338393c%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M60%20330%20Q60%20322%2070%20318%20L350%20318%20Q360%20322%20360%20330%20L362%20980%20Q362%201020%20330%201020%20H90%20Q58%201020%2058%20980%20Z%22%20fill%3D%22none%22%20stroke%3D%22%232c2d2f%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22380%22%20y2%3D%22380%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22380%22%20y2%3D%22380%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22398%22%20y2%3D%22398%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22398%22%20y2%3D%22398%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22416%22%20y2%3D%22416%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22416%22%20y2%3D%22416%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22434%22%20y2%3D%22434%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22434%22%20y2%3D%22434%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22452%22%20y2%3D%22452%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22452%22%20y2%3D%22452%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22470%22%20y2%3D%22470%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22470%22%20y2%3D%22470%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22488%22%20y2%3D%22488%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22488%22%20y2%3D%22488%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22506%22%20y2%3D%22506%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22506%22%20y2%3D%22506%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22524%22%20y2%3D%22524%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22524%22%20y2%3D%22524%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22542%22%20y2%3D%22542%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22542%22%20y2%3D%22542%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22560%22%20y2%3D%22560%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22560%22%20y2%3D%22560%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22578%22%20y2%3D%22578%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22578%22%20y2%3D%22578%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22596%22%20y2%3D%22596%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22596%22%20y2%3D%22596%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22614%22%20y2%3D%22614%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22614%22%20y2%3D%22614%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22282%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2284.5%22%20x2%3D%2291.5%22%20y1%3D%22282%22%20y2%3D%22282%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22332%22%20cy%3D%22282%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%22328.5%22%20x2%3D%22335.5%22%20y1%3D%22282%22%20y2%3D%22282%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%221000%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2266.5%22%20x2%3D%2273.5%22%20y1%3D%221000%22%20y2%3D%221000%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%221000%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%22346.5%22%20x2%3D%22353.5%22%20y1%3D%221000%22%20y2%3D%221000%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Crect%20x%3D%22396%22%20y%3D%22520%22%20width%3D%2214%22%20height%3D%2260%22%20rx%3D%226%22%20fill%3D%22%2317181a%22%20stroke%3D%22%23050505%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%22338%22%20r%3D%225%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Cellipse%20cx%3D%22190%22%20cy%3D%22262%22%20rx%3D%2286%22%20ry%3D%2224%22%20fill%3D%22%230e0f10%22%20stroke%3D%22%23050505%22%20stroke-width%3D%223%22/%3E%3Cellipse%20cx%3D%22190%22%20cy%3D%22262%22%20rx%3D%2278%22%20ry%3D%2219%22%20fill%3D%22none%22%20stroke%3D%22%232a2c2f%22%20stroke-width%3D%222%22/%3E%3Ctext%20x%3D%22118%22%20y%3D%22270%22%20text-anchor%3D%22middle%22%20font-size%3D%229%22%20font-family%3D%22Arial%22%20font-weight%3D%22700%22%20fill%3D%22%23d6d8da%22%3E1%3C/text%3E%3Cline%20x1%3D%22118%22%20x2%3D%22118%22%20y1%3D%22274%22%20y2%3D%22279%22%20stroke%3D%22%238d9298%22%20stroke-width%3D%222%22/%3E%3Ctext%20x%3D%22134%22%20y%3D%22270%22%20text-anchor%3D%22middle%22%20font-size%3D%229%22%20font-family%3D%22Arial%22%20font-weight%3D%22700%22%20fill%3D%22%23d6d8da%22%3E2%3C/text%3E%3Cline%20x1%3D%22134%22%20x2%3D%22134%22%20y1%3D%22274%22%20y2%3D%22279%22%20stroke%3D%22%238d9298%22%20stroke-width%3D%222%22/%3E%3Ctext%20x%3D%22150%22%20y%3D%22270%22%20text-anchor%3D%22middle%22%20font-size%3D%229%22%20font-family%3D%22Arial%22%20font-weight%3D%22700%22%20fill%3D%22%23d6d8da%22%3E3%3C/text%3E%3Cline%20x1%3D%22150%22%20x2%3D%22150%22%20y1%3D%22274%22%20y2%3D%22279%22%20stroke%3D%22%238d9298%22%20stroke-width%3D%222%22/%3E%3Ctext%20x%3D%22166%22%20y%3D%22270%22%20text-anchor%3D%22middle%22%20font-size%3D%229%22%20font-family%3D%22Arial%22%20font-weight%3D%22700%22%20fill%3D%22%23d6d8da%22%3E4%3C/text%3E%3Cline%20x1%3D%22166%22%20x2%3D%22166%22%20y1%3D%22274%22%20y2%3D%22279%22%20stroke%3D%22%238d9298%22%20stroke-width%3D%222%22/%3E%3Ctext%20x%3D%22182%22%20y%3D%22270%22%20text-anchor%3D%22middle%22%20font-size%3D%229%22%20font-family%3D%22Arial%22%20font-weight%3D%22700%22%20fill%3D%22%23d6d8da%22%3E5%3C/text%3E%3Cline%20x1%3D%22182%22%20x2%3D%22182%22%20y1%3D%22274%22%20y2%3D%22279%22%20stroke%3D%22%238d9298%22%20stroke-width%3D%222%22/%3E%3Ctext%20x%3D%22198%22%20y%3D%22270%22%20text-anchor%3D%22middle%22%20font-size%3D%229%22%20font-family%3D%22Arial%22%20font-weight%3D%22700%22%20fill%3D%22%23d6d8da%22%3E6%3C/text%3E%3Cline%20x1%3D%22198%22%20x2%3D%22198%22%20y1%3D%22274%22%20y2%3D%22279%22%20stroke%3D%22%238d9298%22%20stroke-width%3D%222%22/%3E%3Ctext%20x%3D%22214%22%20y%3D%22270%22%20text-anchor%3D%22middle%22%20font-size%3D%229%22%20font-family%3D%22Arial%22%20font-weight%3D%22700%22%20fill%3D%22%23d6d8da%22%3E7%3C/text%3E%3Cline%20x1%3D%22214%22%20x2%3D%22214%22%20y1%3D%22274%22%20y2%3D%22279%22%20stroke%3D%22%238d9298%22%20stroke-width%3D%222%22/%3E%3Ctext%20x%3D%22230%22%20y%3D%22270%22%20text-anchor%3D%22middle%22%20font-size%3D%229%22%20font-family%3D%22Arial%22%20font-weight%3D%22700%22%20fill%3D%22%23d6d8da%22%3E8%3C/text%3E%3Cline%20x1%3D%22230%22%20x2%3D%22230%22%20y1%3D%22274%22%20y2%3D%22279%22%20stroke%3D%22%238d9298%22%20stroke-width%3D%222%22/%3E%3Ctext%20x%3D%22246%22%20y%3D%22270%22%20text-anchor%3D%22middle%22%20font-size%3D%229%22%20font-family%3D%22Arial%22%20font-weight%3D%22700%22%20fill%3D%22%23d6d8da%22%3E9%3C/text%3E%3Cline%20x1%3D%22246%22%20x2%3D%22246%22%20y1%3D%22274%22%20y2%3D%22279%22%20stroke%3D%22%238d9298%22%20stroke-width%3D%222%22/%3E%3Ctext%20x%3D%22262%22%20y%3D%22270%22%20text-anchor%3D%22middle%22%20font-size%3D%229%22%20font-family%3D%22Arial%22%20font-weight%3D%22700%22%20fill%3D%22%23d6d8da%22%3E0%3C/text%3E%3Cline%20x1%3D%22262%22%20x2%3D%22262%22%20y1%3D%22274%22%20y2%3D%22279%22%20stroke%3D%22%238d9298%22%20stroke-width%3D%222%22/%3E%3C/g%3E%3C/svg%3E"); }
.radio.dsg-std.hh #panic { left: 232px; top: 92px; width: 36px; height: 36px; font-size: 7px; }
/* handheld knobs: round, so turning them only moves the white pointer */
.radio.dsg-std.hh .knob { width: 54px; height: 54px; border-radius: 50%; border: 3px solid #050505;
  background:
    repeating-conic-gradient(from 0deg, #4a4e53 0deg 3deg, #16171a 3deg 9deg),
    radial-gradient(circle at 50% 50%, #26282b 0 58%, #16171a 58% 100%);
  background-blend-mode: normal;
  box-shadow: inset 0 0 0 9px #1c1d20, inset 0 0 0 11px #0a0a0b, 0 2px 4px rgba(0, 0, 0, 0.55); }
.radio.dsg-std.hh .knob::after { display: block; top: 8px; width: 6px; height: 17px; margin-left: -3px; border-radius: 3px; background: #f0f2f4; }
.radio.dsg-std.hh .knob-wrap:nth-child(1) { left: 204px; top: 24px; }
.radio.dsg-std.hh .knob-wrap:nth-child(2) { left: 110px; top: 4px; }
.radio.dsg-std.hh .knob {
  background:
    radial-gradient(circle at 50% 50%, #26282b 0 56%, rgba(0, 0, 0, 0) 56%),
    repeating-conic-gradient(from 0deg, #4e5258 0deg 6deg, #15161a 6deg 18deg);
  box-shadow: inset 0 0 0 1px #0a0a0b, 0 2px 4px rgba(0, 0, 0, 0.55); }

/* ---- handheld: knobs moved onto the face, dial numbers removed, THEME beside DFN ---- */
.radio.dsg-std.hh { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22320%22%20height%3D%22724%22%20viewBox%3D%220%200%20320%20724%22%3E%3Cpath%20d%3D%22M46%204%20Q56%20-4%2066%204%20L69%2034%20V66%20H43%20V34Z%22%20fill%3D%22%23191a1c%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M42%2058%20H70%20V76%20Q56%2083%2042%2076Z%22%20fill%3D%22%230e0f10%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M50%208%20V68%22%20stroke%3D%22%2353585e%22%20stroke-width%3D%222.5%22%20opacity%3D%22.4%22/%3E%3Cpath%20d%3D%22M43%2044%20H69%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22%20opacity%3D%22.6%22/%3E%3Cg%20transform%3D%22translate%28-15%20-150%29%20scale%28.8333%29%22%3E%3Cpath%20d%3D%22M86%20250%20H334%20Q350%20250%20352%20270%20L356%20290%20Q396%20310%20398%20360%20L402%201000%20Q402%201056%20330%201056%20H90%20Q18%201056%2018%201000%20L22%20360%20Q24%20310%2064%20290%20L68%20270%20Q70%20250%2086%20250%20Z%22%20fill%3D%22%232a2b2e%22%20stroke%3D%22%23050505%22%20stroke-width%3D%224%22/%3E%3Cpath%20d%3D%22M96%20262%20H324%20Q338%20262%20340%20276%20L344%20298%20Q380%20316%20384%20364%20L388%20992%20Q388%201042%20328%201042%20H92%20Q32%201042%2032%20992%20L36%20364%20Q40%20316%2076%20298%20L80%20276%20Q82%20262%2096%20262%20Z%22%20fill%3D%22none%22%20stroke%3D%22%2338393c%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M60%20330%20Q60%20322%2070%20318%20L350%20318%20Q360%20322%20360%20330%20L362%20980%20Q362%201020%20330%201020%20H90%20Q58%201020%2058%20980%20Z%22%20fill%3D%22none%22%20stroke%3D%22%232c2d2f%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22380%22%20y2%3D%22380%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22380%22%20y2%3D%22380%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22398%22%20y2%3D%22398%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22398%22%20y2%3D%22398%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22416%22%20y2%3D%22416%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22416%22%20y2%3D%22416%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22434%22%20y2%3D%22434%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22434%22%20y2%3D%22434%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22452%22%20y2%3D%22452%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22452%22%20y2%3D%22452%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22470%22%20y2%3D%22470%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22470%22%20y2%3D%22470%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22488%22%20y2%3D%22488%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22488%22%20y2%3D%22488%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22506%22%20y2%3D%22506%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22506%22%20y2%3D%22506%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22524%22%20y2%3D%22524%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22524%22%20y2%3D%22524%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22542%22%20y2%3D%22542%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22542%22%20y2%3D%22542%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22560%22%20y2%3D%22560%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22560%22%20y2%3D%22560%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22578%22%20y2%3D%22578%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22578%22%20y2%3D%22578%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22596%22%20y2%3D%22596%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22596%22%20y2%3D%22596%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22614%22%20y2%3D%22614%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22614%22%20y2%3D%22614%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22282%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2284.5%22%20x2%3D%2291.5%22%20y1%3D%22282%22%20y2%3D%22282%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22332%22%20cy%3D%22282%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%22328.5%22%20x2%3D%22335.5%22%20y1%3D%22282%22%20y2%3D%22282%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%221000%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2266.5%22%20x2%3D%2273.5%22%20y1%3D%221000%22%20y2%3D%221000%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%221000%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%22346.5%22%20x2%3D%22353.5%22%20y1%3D%221000%22%20y2%3D%221000%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Crect%20x%3D%22396%22%20y%3D%22520%22%20width%3D%2214%22%20height%3D%2260%22%20rx%3D%226%22%20fill%3D%22%2317181a%22%20stroke%3D%22%23050505%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%22338%22%20r%3D%225%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Cellipse%20cx%3D%22190%22%20cy%3D%22262%22%20rx%3D%2286%22%20ry%3D%2224%22%20fill%3D%22%230e0f10%22%20stroke%3D%22%23050505%22%20stroke-width%3D%223%22/%3E%3Cellipse%20cx%3D%22190%22%20cy%3D%22262%22%20rx%3D%2278%22%20ry%3D%2219%22%20fill%3D%22none%22%20stroke%3D%22%232a2c2f%22%20stroke-width%3D%222%22/%3E%3C/g%3E%3C/svg%3E"); }
.radio.dsg-std.hh::before { top: 62px; font-size: 8px; letter-spacing: 4px; }
.radio.dsg-std.hh::after { display: none; }
.radio.dsg-std.hh .knob-wrap { display: flex !important; flex-direction: column; align-items: center; gap: 3px; font-size: 9px; color: var(--key-sub); z-index: 2; }
.radio.dsg-std.hh .knob-wrap span { display: block; }
.radio.dsg-std.hh .knob-wrap:nth-child(2) { left: 106px; top: 80px; }
.radio.dsg-std.hh .knob-wrap:nth-child(1) { left: 178px; top: 80px; }
.radio.dsg-std.hh #panic { left: 34px; top: 88px; width: 40px; height: 40px; font-size: 8px; }
/* a clear stroke around the main keys */
.radio.dsg-std.hh .key, .radio.dsg-std.hh #btn-ok, .radio.dsg-std.hh #btn-back, .radio.dsg-std.hh #btn-settings, .radio.dsg-std.hh #btn-home, .radio.dsg-std.hh #switch, .radio.dsg-std.hh #theme, .radio.dsg-std.hh .dir, .radio.dsg-std.hh #ptt {
  border: 1.5px solid #0b0c0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 0 #000; }
.radio.dsg-std.hh #theme { display: flex !important; position: absolute; left: 208px; top: 640px; width: 80px; height: 30px; margin: 0;
  align-items: center; justify-content: center; font-size: 10px; background: #34373b url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.16%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); color: var(--key-text); border-radius: 7px; }

.radio.dsg-std.hh { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22320%22%20height%3D%22724%22%20viewBox%3D%220%200%20320%20724%22%3E%3Cpath%20d%3D%22M46%204%20Q56%20-4%2066%204%20L69%2034%20V66%20H43%20V34Z%22%20fill%3D%22%23191a1c%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M42%2058%20H70%20V76%20Q56%2083%2042%2076Z%22%20fill%3D%22%230e0f10%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M50%208%20V68%22%20stroke%3D%22%2353585e%22%20stroke-width%3D%222.5%22%20opacity%3D%22.4%22/%3E%3Cpath%20d%3D%22M43%2044%20H69%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22%20opacity%3D%22.6%22/%3E%3Cg%20transform%3D%22translate%28-15%20-150%29%20scale%28.8333%29%22%3E%3Cpath%20d%3D%22M86%20250%20H334%20Q350%20250%20352%20270%20L356%20290%20Q396%20310%20398%20360%20L402%201000%20Q402%201056%20330%201056%20H90%20Q18%201056%2018%201000%20L22%20360%20Q24%20310%2064%20290%20L68%20270%20Q70%20250%2086%20250%20Z%22%20fill%3D%22%232a2b2e%22%20stroke%3D%22%23050505%22%20stroke-width%3D%224%22/%3E%3Cpath%20d%3D%22M96%20262%20H324%20Q338%20262%20340%20276%20L344%20298%20Q380%20316%20384%20364%20L388%20992%20Q388%201042%20328%201042%20H92%20Q32%201042%2032%20992%20L36%20364%20Q40%20316%2076%20298%20L80%20276%20Q82%20262%2096%20262%20Z%22%20fill%3D%22none%22%20stroke%3D%22%2338393c%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M60%20330%20Q60%20322%2070%20318%20L350%20318%20Q360%20322%20360%20330%20L362%20980%20Q362%201020%20330%201020%20H90%20Q58%201020%2058%20980%20Z%22%20fill%3D%22none%22%20stroke%3D%22%232c2d2f%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22380%22%20y2%3D%22380%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22380%22%20y2%3D%22380%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22398%22%20y2%3D%22398%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22398%22%20y2%3D%22398%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22416%22%20y2%3D%22416%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22416%22%20y2%3D%22416%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22434%22%20y2%3D%22434%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22434%22%20y2%3D%22434%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22452%22%20y2%3D%22452%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22452%22%20y2%3D%22452%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22470%22%20y2%3D%22470%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22470%22%20y2%3D%22470%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22488%22%20y2%3D%22488%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22488%22%20y2%3D%22488%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22506%22%20y2%3D%22506%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22506%22%20y2%3D%22506%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22524%22%20y2%3D%22524%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22524%22%20y2%3D%22524%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22542%22%20y2%3D%22542%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22542%22%20y2%3D%22542%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22560%22%20y2%3D%22560%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22560%22%20y2%3D%22560%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22578%22%20y2%3D%22578%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22578%22%20y2%3D%22578%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22596%22%20y2%3D%22596%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22596%22%20y2%3D%22596%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22614%22%20y2%3D%22614%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22614%22%20y2%3D%22614%22%20stroke%3D%22%233a3b3e%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22282%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2284.5%22%20x2%3D%2291.5%22%20y1%3D%22282%22%20y2%3D%22282%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22332%22%20cy%3D%22282%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%22328.5%22%20x2%3D%22335.5%22%20y1%3D%22282%22%20y2%3D%22282%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%221000%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2266.5%22%20x2%3D%2273.5%22%20y1%3D%221000%22%20y2%3D%221000%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%221000%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%22346.5%22%20x2%3D%22353.5%22%20y1%3D%221000%22%20y2%3D%221000%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Crect%20x%3D%22396%22%20y%3D%22520%22%20width%3D%2214%22%20height%3D%2260%22%20rx%3D%226%22%20fill%3D%22%2317181a%22%20stroke%3D%22%23050505%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%22338%22%20r%3D%225%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3C/g%3E%3C/svg%3E"); }
.radio.dsg-std.hh::before { top: 66px; }
.radio.dsg-std.hh .knob-wrap:nth-child(2) { left: 104px; top: 84px; }
.radio.dsg-std.hh .knob-wrap:nth-child(1) { left: 180px; top: 84px; }
.radio.dsg-std.hh .knob-wrap span { display: block !important; font-size: 9px; color: #9aa0a6; letter-spacing: 1px; }
.radio.dsg-std.hh::before { top: 60px; }
.radio.dsg-std.hh .knob-wrap:nth-child(2) { left: 104px; top: 76px; }
.radio.dsg-std.hh .knob-wrap:nth-child(1) { left: 180px; top: 76px; }
.radio.dsg-std.hh #panic { top: 84px; }
/* handheld bottom row: PWR, DFN, TOP VIEW, THEME */
.radio.dsg-std.hh .power { left: 34px; width: 56px; font-size: 11px; }
.radio.dsg-std.hh #btn-back { left: 100px; width: 56px; }
.radio.dsg-std.hh #top { left: 166px; width: 56px; font-size: 9px; }
.radio.dsg-std.hh #theme { left: 232px; width: 56px; font-size: 9px; line-height: 1.05; white-space: normal; }

/* Fire and DOT handhelds: same antenna, dial numbers removed */
.radio.dsg-std.hh.fire { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22320%22%20height%3D%22724%22%20viewBox%3D%220%200%20320%20724%22%3E%3Cpath%20d%3D%22M46%204%20Q56%20-4%2066%204%20L69%2034%20V66%20H43%20V34Z%22%20fill%3D%22%23191a1c%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M42%2058%20H70%20V76%20Q56%2083%2042%2076Z%22%20fill%3D%22%230e0f10%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M50%208%20V68%22%20stroke%3D%22%2353585e%22%20stroke-width%3D%222.5%22%20opacity%3D%22.4%22/%3E%3Cpath%20d%3D%22M43%2044%20H69%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22%20opacity%3D%22.6%22/%3E%3Cg%20transform%3D%22translate%28-15%20-150%29%20scale%28.8333%29%22%3E%3Cpath%20d%3D%22M86%20250%20H334%20Q350%20250%20352%20270%20L356%20290%20Q396%20310%20398%20360%20L402%201000%20Q402%201056%20330%201056%20H90%20Q18%201056%2018%201000%20L22%20360%20Q24%20310%2064%20290%20L68%20270%20Q70%20250%2086%20250%20Z%22%20fill%3D%22%23aee00c%22%20stroke%3D%22%23050505%22%20stroke-width%3D%224%22/%3E%3Cpath%20d%3D%22M96%20262%20H324%20Q338%20262%20340%20276%20L344%20298%20Q380%20316%20384%20364%20L388%20992%20Q388%201042%20328%201042%20H92%20Q32%201042%2032%20992%20L36%20364%20Q40%20316%2076%20298%20L80%20276%20Q82%20262%2096%20262%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23d6f750%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M60%20330%20Q60%20322%2070%20318%20L350%20318%20Q360%20322%20360%20330%20L362%20980%20Q362%201020%20330%201020%20H90%20Q58%201020%2058%20980%20Z%22%20fill%3D%22none%22%20stroke%3D%22%238fba00%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22380%22%20y2%3D%22380%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22380%22%20y2%3D%22380%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22398%22%20y2%3D%22398%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22398%22%20y2%3D%22398%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22416%22%20y2%3D%22416%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22416%22%20y2%3D%22416%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22434%22%20y2%3D%22434%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22434%22%20y2%3D%22434%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22452%22%20y2%3D%22452%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22452%22%20y2%3D%22452%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22470%22%20y2%3D%22470%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22470%22%20y2%3D%22470%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22488%22%20y2%3D%22488%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22488%22%20y2%3D%22488%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22506%22%20y2%3D%22506%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22506%22%20y2%3D%22506%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22524%22%20y2%3D%22524%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22524%22%20y2%3D%22524%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22542%22%20y2%3D%22542%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22542%22%20y2%3D%22542%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22560%22%20y2%3D%22560%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22560%22%20y2%3D%22560%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22578%22%20y2%3D%22578%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22578%22%20y2%3D%22578%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22596%22%20y2%3D%22596%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22596%22%20y2%3D%22596%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22614%22%20y2%3D%22614%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22614%22%20y2%3D%22614%22%20stroke%3D%22%233b4f00%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22282%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2284.5%22%20x2%3D%2291.5%22%20y1%3D%22282%22%20y2%3D%22282%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22332%22%20cy%3D%22282%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%22328.5%22%20x2%3D%22335.5%22%20y1%3D%22282%22%20y2%3D%22282%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%221000%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2266.5%22%20x2%3D%2273.5%22%20y1%3D%221000%22%20y2%3D%221000%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%221000%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%22346.5%22%20x2%3D%22353.5%22%20y1%3D%221000%22%20y2%3D%221000%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Crect%20x%3D%22396%22%20y%3D%22520%22%20width%3D%2214%22%20height%3D%2260%22%20rx%3D%226%22%20fill%3D%22%2317181a%22%20stroke%3D%22%23050505%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%22338%22%20r%3D%225%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3C/g%3E%3C/svg%3E"); }
.radio.dsg-std.hh.dot { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22320%22%20height%3D%22724%22%20viewBox%3D%220%200%20320%20724%22%3E%3Cpath%20d%3D%22M46%204%20Q56%20-4%2066%204%20L69%2034%20V66%20H43%20V34Z%22%20fill%3D%22%23191a1c%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M42%2058%20H70%20V76%20Q56%2083%2042%2076Z%22%20fill%3D%22%230e0f10%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M50%208%20V68%22%20stroke%3D%22%2353585e%22%20stroke-width%3D%222.5%22%20opacity%3D%22.4%22/%3E%3Cpath%20d%3D%22M43%2044%20H69%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22%20opacity%3D%22.6%22/%3E%3Cg%20transform%3D%22translate%28-15%20-150%29%20scale%28.8333%29%22%3E%3Cpath%20d%3D%22M86%20250%20H334%20Q350%20250%20352%20270%20L356%20290%20Q396%20310%20398%20360%20L402%201000%20Q402%201056%20330%201056%20H90%20Q18%201056%2018%201000%20L22%20360%20Q24%20310%2064%20290%20L68%20270%20Q70%20250%2086%20250%20Z%22%20fill%3D%22%23ffb000%22%20stroke%3D%22%23050505%22%20stroke-width%3D%224%22/%3E%3Cpath%20d%3D%22M96%20262%20H324%20Q338%20262%20340%20276%20L344%20298%20Q380%20316%20384%20364%20L388%20992%20Q388%201042%20328%201042%20H92%20Q32%201042%2032%20992%20L36%20364%20Q40%20316%2076%20298%20L80%20276%20Q82%20262%2096%20262%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23ffd24d%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M60%20330%20Q60%20322%2070%20318%20L350%20318%20Q360%20322%20360%20330%20L362%20980%20Q362%201020%20330%201020%20H90%20Q58%201020%2058%20980%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23e09500%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22380%22%20y2%3D%22380%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22380%22%20y2%3D%22380%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22398%22%20y2%3D%22398%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22398%22%20y2%3D%22398%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22416%22%20y2%3D%22416%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22416%22%20y2%3D%22416%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22434%22%20y2%3D%22434%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22434%22%20y2%3D%22434%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22452%22%20y2%3D%22452%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22452%22%20y2%3D%22452%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22470%22%20y2%3D%22470%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22470%22%20y2%3D%22470%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22488%22%20y2%3D%22488%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22488%22%20y2%3D%22488%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22506%22%20y2%3D%22506%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22506%22%20y2%3D%22506%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22524%22%20y2%3D%22524%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22524%22%20y2%3D%22524%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22542%22%20y2%3D%22542%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22542%22%20y2%3D%22542%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22560%22%20y2%3D%22560%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22560%22%20y2%3D%22560%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22578%22%20y2%3D%22578%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22578%22%20y2%3D%22578%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22596%22%20y2%3D%22596%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22596%22%20y2%3D%22596%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2236%22%20y1%3D%22614%22%20y2%3D%22614%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Cline%20x1%3D%22384%22%20x2%3D%22398%22%20y1%3D%22614%22%20y2%3D%22614%22%20stroke%3D%22%236b4a00%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22282%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2284.5%22%20x2%3D%2291.5%22%20y1%3D%22282%22%20y2%3D%22282%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22332%22%20cy%3D%22282%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%22328.5%22%20x2%3D%22335.5%22%20y1%3D%22282%22%20y2%3D%22282%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%221000%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2266.5%22%20x2%3D%2273.5%22%20y1%3D%221000%22%20y2%3D%221000%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%221000%22%20r%3D%226%22%20fill%3D%22%23141516%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%22346.5%22%20x2%3D%22353.5%22%20y1%3D%221000%22%20y2%3D%221000%22%20stroke%3D%22%234a4c4f%22%20stroke-width%3D%222%22/%3E%3Crect%20x%3D%22396%22%20y%3D%22520%22%20width%3D%2214%22%20height%3D%2260%22%20rx%3D%226%22%20fill%3D%22%2317181a%22%20stroke%3D%22%23050505%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%22338%22%20r%3D%225%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22334%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22342%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22350%22%20r%3D%222.2%22%20fill%3D%22%230d0e0f%22/%3E%3C/g%3E%3C/svg%3E"); }

/* the top sliver tints with the body colour, so Fire and DOT keep their colour up there */
.radio.dsg-std:not(.hh):not(.top)::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22900%22%20height%3D%22354%22%20viewBox%3D%220%200%20900%20354%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%22.35%22%20cy%3D%22.3%22%20r%3D%22.9%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238a8d92%22/%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%233c3e42%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231a1b1d%22/%3E%3C/radialGradient%3E%3ClinearGradient%20id%3D%22tf%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.30%22/%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23000000%22%20stop-opacity%3D%22.10%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000000%22%20stop-opacity%3D%22.32%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M60%200%20H840%20L858%2022%20H42Z%22%20fill%3D%22url%28%23tf%29%22/%3E%3Cpath%20d%3D%22M150%205%20H430%20L427%2016%20H153Z%22%20fill%3D%22%23141516%22%20opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M150%204.6%20H430%22%20stroke%3D%22%238c9095%22%20stroke-width%3D%221.1%22%20opacity%3D%22.45%22/%3E%3Cpath%20d%3D%22M470%205%20H750%20L747%2016%20H473Z%22%20fill%3D%22%23141516%22%20opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M470%204.6%20H750%22%20stroke%3D%22%238c9095%22%20stroke-width%3D%221.1%22%20opacity%3D%22.45%22/%3E%3Cpath%20d%3D%22M42%2022%20H858%22%20stroke%3D%22%239a9ea3%22%20stroke-width%3D%221.4%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M42%2023.7%20H858%22%20stroke%3D%22%23050505%22%20stroke-width%3D%221.8%22%20opacity%3D%22.6%22/%3E%3Cpath%20d%3D%22M0%20126%20L12%20114%20V264%20L0%20252Z%22%20fill%3D%22%2317181a%22/%3E%3Cpath%20d%3D%22M900%20126%20L888%20114%20V264%20L900%20252Z%22%20fill%3D%22%2317181a%22/%3E%3Cpath%20d%3D%22M12%20118%20V260%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M888%20118%20V260%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22278.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22277%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22291.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22290%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22304.2%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2228.0%22%20y%3D%22303%22%20width%3D%2288%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22317.2%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2234.0%22%20y%3D%22316%22%20width%3D%2276%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22330.2%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%3Crect%20x%3D%2244.0%22%20y%3D%22329%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%223.5%22%20fill%3D%22%230a0a0b%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2260%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2260%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M22.698657540361285%2057.741430106419855%20L29.301342459638715%2062.258569893580145%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M22.698657540361285%2058.741430106419855%20L29.301342459638715%2063.258569893580145%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%2260%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%2260%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M876.3540044690213%2056.76601438472164%20L871.6459955309787%2063.23398561527836%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M876.3540044690213%2057.76601438472164%20L871.6459955309787%2064.23398561527836%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M25.320131428399037%20314.05820108004616%20L26.679868571600963%20321.94179891995384%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M25.320131428399037%20315.05820108004616%20L26.679868571600963%20322.94179891995384%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%22318%22%20r%3D%227.5%22%20fill%3D%22%23050505%22%20stroke%3D%22%235a5d62%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%22318%22%20r%3D%225.5%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M870.0797336886351%20317.2053226768198%20L877.9202663113649%20318.7946773231802%22%20stroke%3D%22%230a0a0b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M870.0797336886351%20318.2053226768198%20L877.9202663113649%20319.7946773231802%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.8%22%20opacity%3D%22.2%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22105.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22104%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22114.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22113%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22123.5%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22122%22%20width%3D%2224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23121314%22%20stroke%3D%22%236a6d72%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M60%200%20L840%200%20L858%2022%20L888%2052%20L888%20114%20L900%20126%20L900%20252%20L888%20264%20L888%20324%20L858%20354%20L42%20354%20L12%20324%20L12%20264%20L0%20252%20L0%20126%20L12%20114%20L12%2052%20L42%2022Z%22%20fill%3D%22none%22%20stroke%3D%22%23050505%22%20stroke-width%3D%223%22/%3E%3Ctext%20x%3D%22360%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2216%22%20font-weight%3D%22700%22%20letter-spacing%3D%226%22%20fill%3D%22%23e6e8ea%22%3EREALITY%3C/text%3E%3C/svg%3E") no-repeat; }
.radio.dsg-std.hh .power, .radio.dsg-std.hh #power { color: #fff !important; }
.radio.dsg-std.hh .power { font-size: 0 !important; }
.radio.dsg-std.hh .power::after { color: #fff; font-size: 12px; }

/* ===== Default top view: same screen UI as the vehicle and handheld ===== */
.radio.dsg-std.top .tv-screen { background: #f4f6f7; color: #111; }
.radio.dsg-std.top .tv-screen, .radio.dsg-std.top .tv-screen * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.radio.dsg-std.top .tv-hdr { position: relative; background: transparent; border-bottom: 1px solid #c9ced2; color: #1a1d20; font-weight: 700; }
.radio.dsg-std.top .tv-hdr::before { content: ""; position: absolute; left: 6px; top: 50%; width: 16px; height: 11px; margin-top: -5.5px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2211%22%20viewBox%3D%220%200%2024%2016%22%3E%3Crect%20x%3D%221%22%20y%3D%2212.0%22%20width%3D%224%22%20height%3D%224.0%22%20fill%3D%22%232fae4c%22/%3E%3Crect%20x%3D%227%22%20y%3D%228.4%22%20width%3D%224%22%20height%3D%227.6%22%20fill%3D%22%232fae4c%22/%3E%3Crect%20x%3D%2213%22%20y%3D%224.8%22%20width%3D%224%22%20height%3D%2211.2%22%20fill%3D%22%232fae4c%22/%3E%3Crect%20x%3D%2219%22%20y%3D%221.2%22%20width%3D%224%22%20height%3D%2214.8%22%20fill%3D%22%232fae4c%22/%3E%3C/svg%3E") no-repeat center; }
.radio.dsg-std.top.offline .tv-hdr::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2211%22%20viewBox%3D%220%200%2024%2016%22%3E%3Crect%20x%3D%221%22%20y%3D%2212.0%22%20width%3D%224%22%20height%3D%224.0%22%20fill%3D%22%23c0392b%22/%3E%3Crect%20x%3D%227%22%20y%3D%228.4%22%20width%3D%224%22%20height%3D%227.6%22%20fill%3D%22%23bfc4c8%22/%3E%3Crect%20x%3D%2213%22%20y%3D%224.8%22%20width%3D%224%22%20height%3D%2211.2%22%20fill%3D%22%23bfc4c8%22/%3E%3Crect%20x%3D%2219%22%20y%3D%221.2%22%20width%3D%224%22%20height%3D%2214.8%22%20fill%3D%22%23bfc4c8%22/%3E%3C/svg%3E"); }
.radio.dsg-std.top .tv-hdr::after { content: ""; position: absolute; right: 6px; top: 50%; width: 18px; height: 11px; margin-top: -5.5px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2211%22%20viewBox%3D%220%200%2028%2016%22%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%2222%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22%231a1d20%22%20stroke-width%3D%221.6%22/%3E%3Crect%20x%3D%2224%22%20y%3D%225.5%22%20width%3D%223%22%20height%3D%225%22%20rx%3D%221%22%20fill%3D%22%231a1d20%22/%3E%3Crect%20x%3D%223.2%22%20y%3D%224.2%22%20width%3D%2217.6%22%20height%3D%227.6%22%20rx%3D%221%22%20fill%3D%22%232fae4c%22/%3E%3C/svg%3E") no-repeat center; }
.radio.dsg-std.top #tv-hl, .radio.dsg-std.top #tv-hr { font-size: 0; }
.radio.dsg-std.top #tv-hl::after { content: attr(data-time); position: absolute; left: 26px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700; color: #1a1d20; }
.radio.dsg-std.top .tv-screen.list #tv-hl { font-size: 10px; padding-left: 20px; }
.radio.dsg-std.top .tv-screen.list #tv-hl::after { content: none; }
.radio.dsg-std.top .tv-ch { margin: 6px 0 0; text-align: center; font-size: 10px; color: #333; }
.radio.dsg-std.top .tv-name { margin: 1px 6px 0; text-align: center; font-weight: 700; font-size: 22px; color: #111; }
.radio.dsg-std.top .tv-st, .radio.dsg-std.top .tv-st.tx { margin: 0 6px; text-align: center; font-size: 10px; color: #222; }
.radio.dsg-std.top .tv-row { color: #111; }
.radio.dsg-std.top .tv-row.selected { background: #666d73; color: #fff; box-shadow: none; }

/* ===== Dispatch on the radio screen (every design) ===== */
.sig-banner { width: 100%; box-sizing: border-box; background: #d93a32; color: #fff; font: 800 11px/1.3 Arial, sans-serif; letter-spacing: .04em; text-align: center; padding: 2px 6px; border-radius: 3px; margin: 2px 0; animation: rl-sig 1.2s ease-in-out infinite; }
@keyframes rl-sig { 50% { background: #9c201a; } }
.disp-msg { width: 100%; box-sizing: border-box; background: #ffe08a; color: #1a1400; font: 700 12px/1.25 Arial, sans-serif; text-align: center; padding: 3px 6px; border-radius: 3px; margin: 2px 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .sig-banner { animation: none; } }
.radio.dsg-std:not(.hh):not(.top) .screen .sig-banner { font-size: 13px; }
.radio.dsg-std:not(.hh):not(.top) .screen .disp-msg { font-size: 14px; }

/* Default design menus (vehicle and handheld): plain rows, grey highlight, values not cut short */
.radio.dsg-std .screen .rows { overflow: hidden; }
.radio.dsg-std .screen .row { gap: 6px; padding: 3px 8px; font-size: 12px; font-weight: 400; color: #111; align-items: center; }
.radio.dsg-std .screen .row-label { width: auto; flex: 0 0 auto; font-weight: 700; letter-spacing: 0; color: #111; }
.radio.dsg-std .screen .row-value { flex: 1 1 auto; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.radio.dsg-std .screen .row.selected { background: #666d73; box-shadow: none; }
.radio.dsg-std .screen .row.selected .row-label, .radio.dsg-std .screen .row.selected .row-value { color: #fff; }
.radio.dsg-std .screen .row.editing .row-value { color: #fff; }
.radio.dsg-std:not(.hh):not(.top) .screen .row { font-size: 14px; padding: 4px 12px; }

/* Handheld: the drag strip sits on the top edge, clear of the CH / VOL knobs */
.radio.dsg-std.hh .grille { left: 84px; right: 64px; top: 52px; height: 22px; }
/* Every radio: switched off = black screen */
.radio .screen.off, .radio[class] .screen.off { background: #050607 !important; border-color: #050505; }
.radio .screen.off .softkeys, .radio .screen.off .hdr { background: transparent !important; border-color: transparent !important; }
.radio .screen.off .hdr::before, .radio .screen.off .hdr::after, .radio .screen.off #hdr-title::after { display: none !important; }
.radio .tv-screen.off { background: #050607 !important; }

/* ---- v23: red DFN next to the time while the radio is deafened ---- */
.radio.dsg-std:not(.hh):not(.top) .screen[data-mode="radio"] #hdr-title::before, .radio.dsg-std:not(.hh):not(.top) .screen[data-mode="home"] #hdr-title::before { content: attr(data-dfn); position: absolute; left: 88px; top: 50%; transform: translateY(-50%); font: 800 13px/1 Arial, sans-serif; letter-spacing: .04em; color: #d32f2f; }
.radio.dsg-std.hh .screen[data-mode="radio"] #hdr-title::before, .radio.dsg-std.hh .screen[data-mode="home"] #hdr-title::before { content: attr(data-dfn); position: absolute; left: 62px; top: 50%; transform: translateY(-50%); font: 800 10.5px/1 Arial, sans-serif; letter-spacing: .04em; color: #d32f2f; }
.radio.dsg-std.top #tv-hl::before { content: attr(data-dfn); position: absolute; left: 57px; top: 50%; transform: translateY(-50%); font: 800 9.5px/1 Arial, sans-serif; letter-spacing: .04em; color: #d32f2f; }
.radio.dsg-std.top .tv-screen.list #tv-hl::before { content: none; }
.radio .screen.off #hdr-title::before { display: none !important; }