/* ============================================================
   UNIT-07 — the device. Drawn entirely in CSS.
   All internal sizing is in cqw (1% of the device width), so the
   whole unit scales as one object.
   ============================================================ */

/* ---- display modes (set on <body>, so page accents follow) ---- */
body[data-mode="green"]{
  --lcd-bg:#7dd46a; --lcd-bg-2:#5fbd4e; --lcd-ink:#0f2a0c;
  --lcd-dim:rgba(15,42,12,.45); --lcd-glow:rgba(125,212,106,.5);
}
body[data-mode="ice"]{
  --lcd-bg:#8fd3e8; --lcd-bg-2:#6bbcd6; --lcd-ink:#0b2a35;
  --lcd-dim:rgba(11,42,53,.45); --lcd-glow:rgba(143,211,232,.5);
}

.device{
  --sp:44cqw;                 /* headroom reserved above the chassis for the aerial */
  container-type:inline-size;
  position:relative;
  width:100%; max-width:394px; margin-inline:auto;
  filter:drop-shadow(0 30px 34px rgba(60,38,18,.42));
  transition:filter .5s var(--ease);
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
/* spacer: % padding resolves against the device width, so the headroom scales with it */
.device::before{ content:''; display:block; padding-top:44%; }

/* pinned beside the content, the unit is 2.42x as tall as it is wide (aerial
   included) — size it off the viewport height so the plate never gets cropped */
@media (min-width:981px){
  /* 230px covers the 96px pin offset, the hint line beneath and real slack —
     too tight and the pinned unit never fully settles */
  .device{ max-width:min(394px,calc((100vh - 230px) / 2.42)); }
}
.device[data-tx="1"]{ filter:drop-shadow(0 30px 34px rgba(60,38,18,.42)) drop-shadow(0 0 24px rgba(200,50,40,.5)); }
body[data-power="off"] .device{ filter:drop-shadow(0 18px 22px rgba(60,38,18,.3)) saturate(.7) brightness(.86); }

/* ---------------- antenna & top furniture ---------------- */

.antenna{ position:absolute; top:calc(var(--sp) - 44cqw); left:7cqw; width:8cqw; height:48cqw; transform:rotate(-4deg); transform-origin:50% 100%; }
.antenna-rod{
  position:absolute; left:2.4cqw; top:2cqw; width:3.2cqw; height:44cqw; border-radius:1.6cqw;
  background:linear-gradient(90deg,#0e1011 0%,#3a3f42 34%,#5a6165 46%,#26292b 70%,#0b0d0e 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.antenna-tip{
  position:absolute; left:1.4cqw; top:-1cqw; width:5.2cqw; height:9cqw; border-radius:2.6cqw;
  background:linear-gradient(90deg,#141617 0%,#454b4f 38%,#646b70 50%,#22262a 72%,#0d0f10 100%);
}
.antenna-hinge{
  position:absolute; left:0; bottom:0; width:8cqw; height:7cqw; border-radius:1.2cqw;
  background:linear-gradient(160deg,#4c5256 0%,#2b2f32 60%,#191c1e 100%);
  box-shadow:inset 0 .6cqw .6cqw rgba(255,255,255,.14), 0 1px 3px rgba(0,0,0,.5);
}
.antenna-hinge::after{
  content:''; position:absolute; left:2.6cqw; top:2.4cqw; width:2.2cqw; height:2.2cqw; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#7e868b,#2a2e31 70%);
}

.hoop{
  position:absolute; top:calc(var(--sp) - 5.2cqw); left:18cqw; width:11cqw; height:9cqw; z-index:0;
  border:1.7cqw solid #60666a; border-bottom:0;
  border-radius:6cqw 6cqw 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.1),transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.top-cap{
  position:absolute; top:calc(var(--sp) - 3.4cqw); left:34cqw; width:32cqw; height:6cqw; z-index:0;
  border-radius:1.6cqw 1.6cqw 0 0;
  background:linear-gradient(180deg,#d4593a 0%,#a63d22 62%,#7e2c15 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}

.side-grip{
  position:absolute; width:4.4cqw; height:30cqw; z-index:0; border-radius:1.4cqw;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1.2cqw,rgba(255,255,255,.07) 1.2cqw 2.6cqw),
    linear-gradient(90deg,#8d3419,#b8492a);
  box-shadow:0 2px 5px rgba(0,0,0,.35);
}
.side-grip--l{ left:-3cqw; top:calc(var(--sp) + 34cqw); }
.side-grip--r{
  right:-3cqw; top:calc(var(--sp) + 24cqw); height:24cqw;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1.2cqw,rgba(255,255,255,.08) 1.2cqw 2.6cqw),
    linear-gradient(90deg,#3c4144,#666d72);
}
.side-knob{
  position:absolute; right:-3.2cqw; top:calc(var(--sp) + 57cqw); width:5.6cqw; height:9cqw; z-index:0; border-radius:1.4cqw;
  background:
    repeating-linear-gradient(180deg,#767d82 0 .9cqw,#31363a .9cqw 1.9cqw);
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.side-port{
  position:absolute; left:-2.4cqw; top:calc(var(--sp) + 70cqw); width:3.6cqw; height:13cqw; z-index:0; border-radius:1.2cqw;
  background:linear-gradient(90deg,#2a2e31,#5a6165);
}

/* ---------------- chassis ---------------- */

.chassis{
  position:relative; z-index:1;
  padding:5cqw 5cqw 0;
  border-radius:7cqw;
  background:
    linear-gradient(176deg,#7b8287 0%,#585e63 7%,#464b4f 32%,#3d4245 62%,#33383b 100%);
  box-shadow:
    inset 0 .8cqw 0 rgba(255,255,255,.22),
    inset 0 -1cqw 2cqw rgba(0,0,0,.45),
    inset 1cqw 0 1.6cqw rgba(0,0,0,.25),
    inset -1cqw 0 1.6cqw rgba(0,0,0,.25);
}
.chassis::before{
  content:''; position:absolute; inset:.9cqw; border-radius:6cqw; pointer-events:none;
  border:.4cqw solid rgba(255,255,255,.07);
}

/* procedural paint wear: chips (multiply) + scratches (screen) */
.wear{
  position:absolute; inset:0; pointer-events:none; z-index:6; border-radius:inherit;
  mix-blend-mode:multiply; opacity:.55;
  background:
    radial-gradient(1.4cqw 1cqw at 12% 18%,rgba(0,0,0,.6),transparent 70%),
    radial-gradient(2.2cqw .8cqw at 78% 9%,rgba(0,0,0,.45),transparent 70%),
    radial-gradient(1cqw 1.6cqw at 94% 44%,rgba(0,0,0,.5),transparent 70%),
    radial-gradient(2.6cqw 1.2cqw at 30% 63%,rgba(0,0,0,.35),transparent 70%),
    radial-gradient(1.2cqw .9cqw at 60% 87%,rgba(0,0,0,.4),transparent 70%),
    radial-gradient(1.8cqw 1cqw at 6% 78%,rgba(0,0,0,.42),transparent 70%);
}
.wear::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  mix-blend-mode:screen; opacity:.5;
  background:
    linear-gradient(74deg,transparent 0 21%,rgba(255,255,255,.5) 21.2%,transparent 21.5%),
    linear-gradient(81deg,transparent 0 47%,rgba(255,255,255,.34) 47.15%,transparent 47.4%),
    linear-gradient(68deg,transparent 0 66%,rgba(255,255,255,.4) 66.2%,transparent 66.5%),
    linear-gradient(97deg,transparent 0 83%,rgba(255,255,255,.28) 83.2%,transparent 83.5%),
    linear-gradient(120deg,transparent 0 34%,rgba(255,255,255,.22) 34.2%,transparent 34.6%);
}
.wear--plate{ opacity:.6; }

/* ---------------- screws ---------------- */

.screw{
  position:absolute; width:4.2cqw; height:4.2cqw; border-radius:50%; z-index:5;
  background:
    linear-gradient(var(--sa,26deg),transparent 0 44%,rgba(10,12,13,.9) 44% 56%,transparent 56%),
    radial-gradient(circle at 34% 28%,#a7aeb3 0%,#6e757a 38%,#3a3f42 74%,#22262a 100%);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.55), 0 1px 1px rgba(255,255,255,.14);
}
.screw--tl{ top:2.4cqw; left:2.6cqw; --sa:20deg; }
.screw--tr{ top:2.4cqw; right:2.6cqw; --sa:112deg; }
.screw--bl{ bottom:2.4cqw; left:2.6cqw; --sa:70deg; }
.screw--br{ bottom:2.4cqw; right:2.6cqw; --sa:150deg; }
.screw--fl{ bottom:3cqw; left:6cqw; --sa:40deg; z-index:7; }
.screw--fr{ bottom:3cqw; right:6cqw; --sa:95deg; z-index:7; }

/* ---------------- screen ---------------- */

.bezel{
  position:relative; z-index:4;
  padding:6.5cqw 6cqw;
  border-radius:4cqw;
  background:linear-gradient(170deg,#7c8388 0%,#575d61 22%,#41464a 70%,#2f3336 100%);
  box-shadow:
    inset 0 .5cqw .5cqw rgba(255,255,255,.28),
    inset 0 -.5cqw 1cqw rgba(0,0,0,.5),
    0 .6cqw 1.4cqw rgba(0,0,0,.35);
}

.screen{
  position:relative; aspect-ratio:1.36/1; border-radius:2.2cqw; overflow:hidden;
  background:linear-gradient(170deg,var(--lcd-bg) 0%,var(--lcd-bg-2) 100%);
  box-shadow:
    inset 0 0 0 .5cqw rgba(0,0,0,.35),
    inset 0 2cqw 4cqw rgba(0,0,0,.22),
    0 0 6cqw var(--lcd-glow);
  transition:box-shadow .5s var(--ease), background .5s var(--ease);
}
body[data-power="off"] .screen{
  background:linear-gradient(170deg,#4a4438 0%,#2e2a22 100%);
  box-shadow:inset 0 0 0 .5cqw rgba(0,0,0,.45), inset 0 2cqw 5cqw rgba(0,0,0,.5);
}
body[data-power="off"] .lcd{ opacity:0; transform:scaleY(.008); }

.glass{
  position:absolute; inset:0; pointer-events:none; z-index:8;
  background:linear-gradient(128deg,rgba(255,255,255,.34) 0 26%,rgba(255,255,255,.06) 34%,transparent 52%);
}
.scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:7; opacity:.3;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
}

.lcd{
  position:absolute; inset:0; z-index:2;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:2.2cqw 2.6cqw;
  color:var(--lcd-ink); font-family:var(--fm);
  transform-origin:50% 50%;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}

/* top icon bar */
.lcd-bar{ display:flex; align-items:center; justify-content:space-between; padding-bottom:1.4cqw; border-bottom:.4cqw solid var(--lcd-ink); }
.lcd-icons{ display:flex; gap:1.3cqw; }
.gi{ width:3.4cqw; height:3.4cqw; border:.4cqw solid var(--lcd-ink); position:relative; }
.gi::after{ content:''; position:absolute; inset:.6cqw; background:var(--lcd-ink); opacity:.75; }
.gi-grid::after{ background:
  linear-gradient(90deg,var(--lcd-ink) 0 40%,transparent 40% 60%,var(--lcd-ink) 60%); }
.gi-disk::after{ border-radius:50%; }
.gi-lock::after{ inset:1cqw .8cqw .6cqw; }
.gi-file::after{ inset:.5cqw .9cqw; }
.gi-cog::after{ border-radius:50%; inset:.5cqw; box-shadow:0 0 0 .3cqw var(--lcd-bg) inset; }
.gi-undo::after{ border-radius:50% 50% 0 0; inset:.8cqw .4cqw 1.2cqw; }

.lcd-bar-right{ display:flex; align-items:center; gap:1.4cqw; }
.chev{ font-size:3.4cqw; line-height:1; opacity:.85; }
.batt{
  position:relative; width:7cqw; height:3.4cqw; border:.4cqw solid var(--lcd-ink); padding:.4cqw;
}
.batt::after{ content:''; position:absolute; right:-1.2cqw; top:1cqw; width:.8cqw; height:1.4cqw; background:var(--lcd-ink); }
.batt-fill{ display:block; height:100%; width:74%; background:var(--lcd-ink); transition:width .6s var(--ease); }
.batt-fill.low{ animation:battBlink 1.1s steps(2) infinite; }
@keyframes battBlink{ 0%,100%{opacity:1} 50%{opacity:.2} }

/* main body */
.lcd-body{ display:grid; grid-template-columns:auto auto 1fr; gap:2cqw; align-items:center; padding:1.6cqw 0; }
.lcd-rail{ display:grid; gap:1.2cqw; }
.ri{ width:4cqw; height:4cqw; border:.4cqw solid var(--lcd-ink); display:block; position:relative; }
.ri::after{ content:''; position:absolute; inset:.8cqw; background:var(--lcd-ink); }
.ri-power::after{ border-radius:50%; background:none; box-shadow:0 0 0 .35cqw var(--lcd-ink) inset; }
.ri-user::after{ border-radius:50% 50% 30% 30%; }
.ri-wave::after{ inset:1.2cqw .6cqw; }
.ri-vol::after{ clip-path:polygon(0 30%,40% 30%,100% 0,100% 100%,40% 70%,0 70%); }
.ri-lock::after{ inset:1.4cqw .7cqw .7cqw; }

.lcd-art{ display:grid; gap:1cqw; justify-items:center; }
.mast{ width:13cqw; height:13cqw; color:var(--lcd-ink); }
.wv{ opacity:.9; }
.device[data-tx="1"] .wv1{ animation:wvPulse .6s steps(2) infinite; }
.device[data-tx="1"] .wv2{ animation:wvPulse .6s steps(2) .2s infinite; }
.device[data-tx="1"] .wv3{ animation:wvPulse .6s steps(2) .4s infinite; }
@keyframes wvPulse{ 0%,100%{opacity:1} 50%{opacity:.12} }

.meters{ display:grid; gap:.8cqw; width:15cqw; }
.meter{ display:block; height:2.2cqw; border:.35cqw solid var(--lcd-ink); padding:.3cqw; }
.meter i{ display:block; height:100%; width:var(--w); background:var(--lcd-ink); transition:width .5s var(--ease); }

.lcd-readout{ align-self:start; padding-top:.4cqw; }
.ro{ margin:0 0 .5cqw; font-size:4.1cqw; line-height:1.28; letter-spacing:.02em; white-space:nowrap; }
.ro-head{ font-size:4.3cqw; margin-bottom:1.2cqw; }
#ro-signal{ letter-spacing:-.06em; }

/* footer strip */
.lcd-foot{ display:flex; align-items:center; gap:1.6cqw; border-top:.4cqw solid var(--lcd-ink); padding-top:1.2cqw; }
.lcd-track{ flex:1; height:2cqw; border:.35cqw solid var(--lcd-ink); padding:.3cqw; }
.lcd-track i{ display:block; height:100%; width:16%; background:var(--lcd-ink); transition:width .45s var(--ease); }
.lcd-tick{
  font-size:3.4cqw; letter-spacing:.1em; text-transform:uppercase;
  max-width:44%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}

/* static + boot overlays */
.lcd-static{
  position:absolute; inset:0; z-index:5; opacity:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  transition:opacity .2s;
}
.device[data-signal="dead"] .lcd-static{ opacity:.85; animation:staticRoll .16s steps(3) infinite; }
.device[data-tx="1"] .lcd-static{ opacity:.3; animation:staticRoll .12s steps(3) infinite; }
@keyframes staticRoll{
  0%{background-position:0 0} 33%{background-position:14px -9px}
  66%{background-position:-11px 7px} 100%{background-position:5px 12px}
}

/* call display — takes over the screen while the link to Natasha is up */
.lcd-call{
  position:absolute; inset:0; z-index:4; display:none;
  padding:3.4cqw 3.6cqw;
  background:linear-gradient(170deg,var(--lcd-bg),var(--lcd-bg-2));
  color:var(--lcd-ink); font-family:var(--fm);
}
.device[data-call] .lcd-call{ display:block; }
.lc-head{ margin:0 0 2.4cqw; font-size:4.4cqw; padding-bottom:1.6cqw; border-bottom:.4cqw solid var(--lcd-ink); }
.lc-row{ margin:0 0 1.4cqw; font-size:4.1cqw; white-space:nowrap; }
.lc-bars{ display:flex; gap:1.2cqw; margin-top:3cqw; }
.lc-bars i{ flex:1; height:3.4cqw; border:.4cqw solid var(--lcd-ink); }
.device[data-call="live"] .lc-bars i{ background:var(--lcd-ink); }

.lcd-boot{
  position:absolute; inset:0; z-index:6; padding:3cqw;
  background:linear-gradient(170deg,var(--lcd-bg),var(--lcd-bg-2));
  color:var(--lcd-ink); font-size:3.6cqw; line-height:1.5;
  display:none;
}
.lcd-boot.on{ display:block; }
.lcd-boot p{ margin:0; white-space:nowrap; overflow:hidden; }

/* ---------------- control deck ---------------- */

.deck{
  position:relative; z-index:4;
  display:grid; grid-template-columns:1fr 1fr; gap:3cqw; align-items:start;
  padding:3.4cqw 3cqw 4.6cqw;
  margin-top:1cqw;
}
.deck::before{
  content:''; position:absolute; inset:0 -5cqw; z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.18));
  border-top:.35cqw solid rgba(255,255,255,.1);
}
.deck-col{ display:grid; justify-items:center; gap:2cqw; }

.stencil{
  font-family:var(--fx); font-weight:600; font-size:3.5cqw; letter-spacing:.11em;
  color:#e6e3dc; text-shadow:0 1px 0 rgba(0,0,0,.65); text-transform:uppercase;
  white-space:nowrap;
}

/* dial */
.dial-wrap{ position:relative; width:27cqw; height:27cqw; display:grid; place-items:center; }
.dial-ticks{ position:absolute; inset:0; }
.dial-ticks .tk{
  position:absolute; left:50%; top:50%; width:0; height:0;
  font-family:var(--fx); font-weight:600; font-size:2.9cqw; color:#e7ad6a;
}
.dial-ticks .tk span{
  position:absolute; transform:translate(-50%,-50%) rotate(var(--r-inv));
  left:0; top:0; text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.dial-ticks .tk::before{
  content:''; position:absolute; left:-.35cqw; top:-.6cqw; width:.7cqw; height:1.6cqw;
  background:rgba(240,163,35,.75); transform:translateY(3.2cqw);
}

.dial{
  position:relative; width:17.5cqw; height:17.5cqw; border-radius:50%; cursor:grab;
  background:
    repeating-conic-gradient(from 0deg,#767d82 0deg 3deg,#2f3437 3deg 6.5deg);
  box-shadow:
    0 .8cqw 1.6cqw rgba(0,0,0,.55),
    inset 0 0 0 .5cqw rgba(0,0,0,.35);
  transform:rotate(0deg);
  transition:transform .32s var(--ease);
  touch-action:none;
}
.dial:active{ cursor:grabbing; }
.dial.snapping{ transition:transform .32s cubic-bezier(.3,1.4,.5,1); }
.dial-face{
  position:absolute; inset:2.6cqw; border-radius:50%;
  background:radial-gradient(circle at 36% 28%,#5c6266 0%,#3a3f42 46%,#1e2224 100%);
  box-shadow:inset 0 .5cqw .8cqw rgba(255,255,255,.14), inset 0 -.4cqw .8cqw rgba(0,0,0,.5);
}
.dial-knurl{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 210deg,rgba(255,255,255,.22),transparent 40%,rgba(0,0,0,.35) 75%,rgba(255,255,255,.12));
}
.dial-pointer{
  position:absolute; left:50%; top:2.2cqw; width:1.2cqw; height:7cqw; margin-left:-.6cqw;
  border-radius:.6cqw; background:linear-gradient(180deg,#f2ae3e,#b86b12);
  box-shadow:0 0 1.4cqw rgba(240,163,35,.7);
}

/* power rocker */
.deck-col--pwr{ padding-top:.2cqw; }
.rocker{
  position:relative; width:22cqw; height:9.4cqw; padding:0; border:0; cursor:pointer;
  background:linear-gradient(180deg,#191c1e,#2c3134);
  border-radius:1.2cqw;
  box-shadow:inset 0 .5cqw 1.2cqw rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.14);
}
.rocker-cap{
  position:absolute; top:1.1cqw; left:1.2cqw; width:9cqw; height:7.2cqw; border-radius:.8cqw;
  background:linear-gradient(180deg,#e8823a 0%,#c85f22 52%,#8f3d12 100%);
  box-shadow:0 .4cqw .8cqw rgba(0,0,0,.55), inset 0 .4cqw 0 rgba(255,255,255,.35);
  transition:left .22s var(--ease), background .22s;
}
.rocker[aria-checked="false"] .rocker-cap{
  left:11.6cqw; background:linear-gradient(180deg,#6d7378 0%,#4a5053 52%,#2c3033 100%);
}
.rocker-well{
  position:absolute; inset:1.1cqw; border-radius:.8cqw;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 .6cqw,transparent .6cqw 1.4cqw);
}
.rocker-arrows{ display:flex; gap:9cqw; margin-top:-.6cqw; }
.rocker-arrows i{
  width:0; height:0; border:1.5cqw solid transparent;
  border-bottom-color:#cfd3d6; display:block; opacity:.75;
}
.rocker-arrows i:first-child{ transform:rotate(-90deg); }
.rocker-arrows i:last-child{ transform:rotate(90deg); }

/* ---------------- lower plate ---------------- */

.plate{
  position:relative; z-index:3; overflow:hidden;
  margin:0 -5cqw; padding:12cqw 6cqw 11cqw;
  border-radius:0 0 6.2cqw 6.2cqw;
  background:
    linear-gradient(168deg,#c8532c 0%,#b8492a 30%,#a33e21 72%,#8d3419 100%);
  box-shadow:inset 0 1cqw 2cqw rgba(0,0,0,.28);
  min-height:66cqw;
}
.plate::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px);
  opacity:.5;
}
/* grey wedge: the orange fascia rises towards the right, as on the real unit */
.plate::after{
  content:''; position:absolute; top:-1cqw; left:0; width:58%; height:9cqw; pointer-events:none;
  background:linear-gradient(180deg,#3c4144,#363b3e);
  clip-path:polygon(0 0,100% 0,0 100%);
}

.keys{
  position:relative; z-index:6; margin:0 0 -6.4cqw;
  display:flex; align-items:center; justify-content:center; gap:4cqw;
}
.key{
  font-family:var(--fx); font-weight:700; letter-spacing:.1em; cursor:pointer;
  touch-action:manipulation;
  color:#e9e5dd; border:0; border-radius:1.4cqw;
  background:linear-gradient(180deg,#5b6165 0%,#3e4346 55%,#272b2e 100%);
  box-shadow:0 1.4cqw 0 #1a1d1f, 0 2cqw 2.6cqw rgba(0,0,0,.5), inset 0 .5cqw 0 rgba(255,255,255,.2);
  transition:transform .09s var(--ease), box-shadow .09s var(--ease), filter .18s;
}
.key--sm{ width:15cqw; height:9cqw; font-size:3.3cqw; }
.key--call{
  width:21cqw; height:11cqw; font-size:4.6cqw; border-radius:1.6cqw;
  color:#fff1ea;
  background:linear-gradient(180deg,#e05a4c 0%,#c23127 52%,#8d1f18 100%);
  box-shadow:0 1.6cqw 0 #5e120d, 0 2.4cqw 3cqw rgba(0,0,0,.5), inset 0 .6cqw 0 rgba(255,255,255,.3);
}
.key:hover{ filter:brightness(1.12); }
.key:active,.key.down{ transform:translateY(1.2cqw); box-shadow:0 .2cqw 0 #1a1d1f, 0 .6cqw 1cqw rgba(0,0,0,.5), inset 0 .5cqw 0 rgba(255,255,255,.2); }
.key--call:active,.key--call.down{
  transform:translateY(1.4cqw);
  box-shadow:0 .2cqw 0 #5e120d, 0 .8cqw 1.4cqw rgba(0,0,0,.5), inset 0 .6cqw 0 rgba(255,255,255,.3),
             0 0 5cqw rgba(224,90,76,.9);
}

.plate-grid{ display:grid; grid-template-columns:1fr auto; gap:3cqw; align-items:end; margin-top:5cqw; }
.pid{
  font-family:var(--fx); font-weight:700; font-size:9.4cqw; line-height:.95; letter-spacing:.02em;
  color:#f6f1e7; margin:0 0 1.4cqw; text-shadow:0 .4cqw 0 rgba(0,0,0,.28);
}
.psub{
  font-family:var(--fx); font-weight:600; font-size:4.3cqw; line-height:1.28; letter-spacing:.055em;
  color:#f3ece0; margin:0; text-shadow:0 .3cqw 0 rgba(0,0,0,.25);
}
.pbar{ display:block; width:26cqw; height:1.4cqw; margin-top:2cqw; background:#f0a323; opacity:.85; }
.plate-spec{ text-align:right; padding-bottom:.6cqw; }
.pspec-top{
  font-family:var(--fx); font-weight:700; font-size:6cqw; line-height:1; letter-spacing:.06em;
  color:#f6f1e7; margin:0 0 3.4cqw; text-shadow:0 .4cqw 0 rgba(0,0,0,.28);
}
.plate-spec .psub{ font-size:4cqw; }

.property{
  margin:6cqw 0 0; text-align:center;
  font-family:var(--fx); font-weight:600; font-size:4cqw; line-height:1.3; letter-spacing:.07em;
  color:#f7f0e4; text-shadow:0 .3cqw 0 rgba(0,0,0,.25);
}

.clip{
  position:absolute; bottom:-3.4cqw; z-index:2; width:12cqw; height:7cqw; border-radius:0 0 1.6cqw 1.6cqw;
  background:linear-gradient(180deg,#4d5357 0%,#2e3235 60%,#1c1f21 100%);
  box-shadow:0 .5cqw 1cqw rgba(0,0,0,.45), inset 0 .4cqw 0 rgba(255,255,255,.18);
}
.clip--l{ left:20cqw; }
.clip--r{ right:20cqw; }

/* ---------------- motion preferences ---------------- */

@media (prefers-reduced-motion:reduce){
  .device[data-signal="dead"] .lcd-static,
  .device[data-tx="1"] .lcd-static{ animation:none; }
  .device[data-tx="1"] .wv1,.device[data-tx="1"] .wv2,.device[data-tx="1"] .wv3{ animation:none; }
  .batt-fill.low{ animation:none; }
  .dial{ transition:none; }
}