/* The locked look (22/10/2026): warm grey, olive screen, chunky ink line, no grain, rounded lettering. Flat fills only: no gradients, highlights or soft shadows. */
:root { --body: #c9c5be; --bezel: #5b5e6d; --dpad: #2a2a2c; --btn: #9a2b5d; --pill: #8e8a85; --on: #f2c230; --ink: #2a1b3d;
  --word: #2a2f6b; --stripe1: #8a2c5c; --stripe2: #2a2f6b; --bztext: #c9c9d3; --lcd: #a9b677; --px: #26311a; --page: #dfe3e6; }
.device { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.device .body { fill: var(--body); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.device .bezel, .device .dpad, .device .btn, .device .pill, .device .spk, .device .track, .device .led { stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.device .bezel { fill: var(--bezel); } .device .dpad { fill: var(--dpad); } .device .btn { fill: var(--btn); } .device .pill { fill: var(--pill); }
.device .btn.on { fill: var(--on); } .device .pill.on { fill: var(--on); }
.device .spk { fill: var(--pill); } .device .track { fill: var(--pill); } .device .knob { fill: var(--on); stroke: var(--ink); stroke-width: 2; }
.device .led { fill: #d23a2a; stroke-width: 2; }
.device .seam { fill: none; stroke: var(--pill); stroke-width: 1.5; }
.device .stripe { fill: none; stroke-width: 2; } .device .s1 { stroke: var(--stripe1); } .device .s2 { stroke: var(--stripe2); }
.device .word { fill: var(--word); font: 700 25px Fredoka, system-ui, sans-serif; letter-spacing: -.01em; }
.device .cpa { font-size: 11px; letter-spacing: .12em; }
.device .stxt, .device .ledt { fill: var(--bztext); font: 600 7.5px Fredoka, system-ui, sans-serif; letter-spacing: .12em; }
.device .lbl { fill: var(--word); font: 700 10px Fredoka, system-ui, sans-serif; letter-spacing: .12em; } .device .lbl.sm { font-size: 9px; }