:root{
  --bg:#e5e6e7; --ink:#5d5c56; --orange:#ff5a1f; --red:#ff3028;
  --alu1:#d7d8d8; --alu2:#c6c7c7; --alu3:#b8b9ba;
  --recess:#c1c2c1;
  --cream1:#f8f5ed; --cream2:#e8e3d6; --cream3:#dcd6c7; --edge:#b7b1a0;
  color-scheme: light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);min-height:100%}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(20px + env(safe-area-inset-bottom,0px))}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

#wrap{margin:0 auto;position:relative}
#stage{position:absolute;left:0;top:0;width:1260px;height:950px;transform-origin:0 0}

/* ---------- корпус ---------- */
#device{z-index:2;position:absolute;left:16px;top:34px;width:1228px;height:717px;border-radius:18px 18px 22px 22px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>"),
    linear-gradient(180deg,#dcdddd 0%,var(--alu2) 40%,var(--alu3) 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.85), inset 0 -2px 2px rgba(0,0,0,.18), inset 2px 0 1px rgba(255,255,255,.4),
              0 2px 2px rgba(0,0,0,.25), 0 22px 30px -6px rgba(0,0,0,.35), 0 40px 60px -20px rgba(0,0,0,.3);
}
#device::after{content:'';position:absolute;left:0;right:0;top:683px;bottom:0;border-radius:0 0 22px 22px;
  background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.02) 20%,rgba(0,0,0,.08));box-shadow:0 -1px 0 rgba(255,255,255,.5);pointer-events:none}
.engrave{position:absolute;top:693px;font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.09em;color:#6f7071;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.jack{position:absolute;top:-13px}
.jack.s{width:50px;height:13px;background:linear-gradient(180deg,#e9eaea,#a9aaab);border-radius:2px 2px 0 0;box-shadow:inset 0 1px 0 #fff}
.jack.b{width:42px;height:15px;top:-15px;background:linear-gradient(180deg,#3a3a3c,#0e0e0f);border-radius:8px 8px 0 0;box-shadow:inset 0 2px 1px rgba(255,255,255,.18)}
.foot{position:absolute;top:668px;width:62px;height:58px;border-radius:8px 8px 14px 14px;
  background:repeating-linear-gradient(90deg,#8c8d90 0 2px,#c7c8ca 2px 4px,#a9aaad 4px 5px);
  box-shadow:inset 0 3px 3px rgba(255,255,255,.5), inset 0 -8px 8px rgba(0,0,0,.28), 0 8px 10px rgba(0,0,0,.35)}

/* ---------- левая панель ---------- */
#left{position:absolute;left:14px;top:14px;width:589px;height:655px;display:grid;
  grid-template-columns:repeat(9,61px);grid-template-rows:repeat(10,61px);gap:5px}
.cell{position:relative}
.cell::before{content:'';position:absolute;inset:0;border-radius:18px;background:var(--recess);
  box-shadow:inset 0 3px 4px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.35), 0 1px 0 rgba(255,255,255,.65)}
.key{position:absolute;left:3px;right:3px;top:2px;bottom:8px;border-radius:15px;
  background:radial-gradient(120% 90% at 50% 0%,var(--cream1) 0%,#eee9dd 45%,var(--cream2) 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.95), inset 0 -4px 5px rgba(120,108,80,.16),
              0 5px 0 var(--edge), 0 7px 9px rgba(0,0,0,.32);
  transition:transform .05s ease-out, box-shadow .05s ease-out;
  display:grid;place-items:center;color:var(--ink)}
.key:hover{filter:brightness(1.02)}
.key.down,.key.on{transform:translateY(4px);box-shadow: inset 0 2px 3px rgba(120,108,80,.25), inset 0 -2px 3px rgba(120,108,80,.12), 0 1px 0 var(--edge), 0 2px 3px rgba(0,0,0,.3)}
.key svg{width:28px;height:22px;fill:none;stroke:#5f5e58;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.key .t{font:700 11px Manrope;text-align:center;line-height:1.05;pointer-events:none;color:#5c5b55}
.key .n{font:300 30px Manrope;pointer-events:none;color:#66655f}
.key .sm{font:500 13px Manrope;color:#66655f;pointer-events:none}
.led{position:absolute;top:6px;right:8px;width:6px;height:6px;border-radius:50%;background:#c2bdae;box-shadow:inset 0 1px 1px rgba(0,0,0,.35);pointer-events:none}
.key.on .led,.key.down .led{background:var(--red);box-shadow:0 0 6px var(--red),0 0 2px #fff inset}
.key.pend .led{animation:blink .3s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.cell.pill .key{border-radius:27px;bottom:11px;align-content:end;padding-bottom:12px}
.cell.pill .key .k{font:500 11px 'IBM Plex Mono',monospace;color:#8a887e;pointer-events:none}

.cell.pad .key{left:5px;right:5px;top:4px;bottom:12px;border-radius:20px}
.dot{position:absolute;left:50%;top:34%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  background:radial-gradient(circle at 36% 28%,#5b5b5d 0,#1a1a1b 45%,#050505 100%);
  box-shadow:0 0 0 3px #cfcabc, 0 0 0 4px rgba(0,0,0,.25), 0 6px 0 #0a0a0a, 0 9px 9px rgba(0,0,0,.45), inset 0 2px 2px rgba(255,255,255,.28);
  transition:transform .05s, box-shadow .05s}
.dot.down,.dot.on{transform:translateY(5px);box-shadow:0 0 0 3px #cfcabc, 0 0 0 4px rgba(0,0,0,.25), 0 1px 0 #0a0a0a, 0 2px 3px rgba(0,0,0,.4), inset 0 2px 2px rgba(255,255,255,.18)}
.dotlbl{position:absolute;left:0;right:0;bottom:2px;text-align:center;font:600 7.5px 'Manrope';color:#77766e;pointer-events:none}
.dot.on ~ .dl,.dot.down ~ .dl{background:var(--red);box-shadow:0 0 6px var(--red)}
.dl{position:absolute;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#a9a595;box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}

/* ручки */
.knob{--c:#888;--v:.5;position:relative;width:84px;height:84px;border-radius:50%;touch-action:none;cursor:ns-resize;
  background:radial-gradient(circle at 50% 22%,#fdfdfc,#d6d6d3 55%,#b3b3b0);
  box-shadow:inset 0 2px 2px #fff, inset 0 -4px 7px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.12), 0 4px 7px rgba(0,0,0,.35)}
.knob::before{content:'';position:absolute;inset:5px;border-radius:50%;
  background:conic-gradient(from 225deg,var(--c) calc(var(--v)*270deg),rgba(0,0,0,.14) 0 270deg,transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 65%);mask:radial-gradient(circle,transparent 63%,#000 65%)}
.kcap{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle at 34% 26%,color-mix(in srgb,var(--c) 55%,#fff) 0,var(--c) 42%,color-mix(in srgb,var(--c) 68%,#000) 100%);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.28), 0 6px 6px rgba(0,0,0,.4), 0 2px 0 rgba(0,0,0,.25);
  transform:rotate(calc(-135deg + var(--v)*270deg))}
.kcap b{position:absolute;left:50%;top:5px;width:3px;height:11px;margin-left:-1.5px;border-radius:2px;background:rgba(0,0,0,.55);box-shadow:0 1px 0 rgba(255,255,255,.3)}
.knob.mini{width:30px;height:30px;box-shadow:inset 0 1px 1px #fff, inset 0 -2px 3px rgba(0,0,0,.2), 0 2px 3px rgba(0,0,0,.35)}
.knob.mini::before{inset:2px;-webkit-mask:radial-gradient(circle,transparent 66%,#000 69%);mask:radial-gradient(circle,transparent 66%,#000 69%)}
.knob.mini .kcap{width:20px;height:20px;margin:-10px 0 0 -10px;box-shadow:inset 0 1px 1px rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.3), 0 3px 3px rgba(0,0,0,.4)}
.knob.mini .kcap b{top:2px;height:6px;width:2px;margin-left:-1px;background:#f4f1e8}
.knob.mini.blk .kcap b{background:#f4f1e8}
.knob.mini.gry .kcap b{background:#2a2a2a}
.knob.mix{width:62px;height:62px}
.knob.mix .kcap{width:44px;height:44px;margin:-22px 0 0 -22px}
.knob.mix .kcap b{top:4px;height:9px}

/* экран */
#bezel{grid-column:1 / span 8;grid-row:3 / span 4;position:relative;border-radius:14px;padding:6px;
  background:linear-gradient(180deg,#8f9090,#c9caca 30%,#b5b6b6);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.6), 0 1px 0 rgba(255,255,255,.7)}
#screen{display:block;width:511px;height:247px;border-radius:8px;background:#0b0c0e;cursor:crosshair;touch-action:none;
  box-shadow:0 0 0 2px #1c1d1f, inset 0 0 20px rgba(0,0,0,.8)}
#bezel::after{content:'';position:absolute;left:6px;right:6px;top:6px;bottom:6px;border-radius:8px;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%)}

/* ---------- правая часть ---------- */
#right{position:absolute;left:613px;top:14px;width:600px;height:655px}
#speaker{position:absolute;left:0;top:0;width:600px;height:158px;border-radius:12px;
  background:linear-gradient(180deg,#bbbcbc,#cfd0d0);box-shadow:inset 0 3px 5px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.6)}
#grille{position:absolute;left:10px;top:9px;width:580px;height:140px}
.mod{position:absolute;top:163px;height:492px;border-radius:12px;
  background:linear-gradient(180deg,#dddede,#cfd0d1 50%,#c7c8c9);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.9), inset 0 -2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.1), 0 2px 3px rgba(0,0,0,.2)}
#tape{left:0;width:298px}
#mix{left:302px;width:298px}
.mtitle{position:absolute;left:14px;top:14px;font:500 18px Manrope;color:#77787a;letter-spacing:.02em}
.chip{position:absolute;border-radius:5px;font-family:'IBM Plex Mono',monospace}
#tchip{right:12px;top:10px;width:70px;height:34px;background:#0d0d0e;color:#fff;padding:5px 7px;box-shadow:0 0 0 2px #1d1d1e, 0 2px 3px rgba(0,0,0,.4)}
#tchip b{display:block;font:600 11px 'IBM Plex Mono';letter-spacing:.06em}
#tchip span{display:block;font:400 8px 'IBM Plex Mono';color:#9fa0a2;margin-top:2px}
#tchip.rec b{color:#ff5a1f}
#disc{position:absolute;left:16px;top:58px;width:266px;height:266px;border-radius:50%;cursor:grab;touch-action:none;
  background:
    conic-gradient(from 0deg,#d8d9da,#eeeff0 12%,#c9cacb 25%,#e6e7e8 38%,#cfd0d1 50%,#eeeff0 62%,#c9cacb 75%,#e6e7e8 88%,#d8d9da);
  box-shadow:inset 0 0 0 5px #c2c3c4, inset 0 0 0 6px rgba(255,255,255,.7), inset 0 0 22px rgba(0,0,0,.18), 0 6px 10px rgba(0,0,0,.3)}
#disc.drag{cursor:grabbing}
#discRot{position:absolute;inset:0;border-radius:50%}
#discRot::before{content:'';position:absolute;left:12%;right:12%;top:50%;height:1.5px;background:rgba(80,80,84,.45);transform:rotate(-38deg);transform-origin:center}
#discRot .dt{position:absolute;font:500 8px 'IBM Plex Mono';color:#7d7e80;letter-spacing:.05em}
#hub{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 35% 28%,#8f9093,#5f6063 55%,#47484b);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.35), 0 3px 5px rgba(0,0,0,.4), 0 0 0 4px #dcdddd, 0 0 0 5px rgba(0,0,0,.18)}
#hub i{position:absolute;width:4px;height:4px;border-radius:50%;background:#2a2b2d;box-shadow:0 1px 0 rgba(255,255,255,.25)}
.rk{position:absolute;width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 50% 20%,#f4f4f3,#d2d2d0);box-shadow:inset 0 1px 1px #fff, 0 3px 0 #a9a9a7, 0 5px 6px rgba(0,0,0,.3);
  display:grid;place-items:center;font:500 18px Manrope;color:#6a6a68;transition:transform .05s, box-shadow .05s}
.rk.down{transform:translateY(3px);box-shadow:inset 0 1px 2px rgba(0,0,0,.2), 0 0 0 #a9a9a7, 0 1px 2px rgba(0,0,0,.3)}
#ttrans{position:absolute;left:0;top:372px;width:225px;height:120px;display:flex;gap:2px;padding:0 0 0 0}
.tk{position:relative;flex:1;border-radius:6px;margin-top:0;
  background:linear-gradient(180deg,#e7e8e8,#d3d4d5);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.9), inset 0 -4px 6px rgba(0,0,0,.1), 0 5px 0 #a9aaab, 0 8px 8px rgba(0,0,0,.28);
  display:grid;place-items:center;transition:transform .05s, box-shadow .05s;height:104px}
.tk.down,.tk.on{transform:translateY(5px);box-shadow:inset 0 2px 4px rgba(0,0,0,.18), 0 0 0 #a9aaab, 0 2px 3px rgba(0,0,0,.25)}
.tk svg{width:26px;height:26px;pointer-events:none}
.tk.on{background:linear-gradient(180deg,#f0ece4,#ddd8cc)}
#swing{position:absolute;left:236px;top:372px;width:52px;height:120px;touch-action:none;cursor:ns-resize}
#swing::before{content:'';position:absolute;left:50%;top:6px;bottom:14px;width:2px;margin-left:-1px;background:#2b2b2c;box-shadow:0 1px 0 rgba(255,255,255,.7)}
#swing i{position:absolute;left:50%;width:34px;height:34px;margin-left:-17px;bottom:calc(6px + var(--v)*(100% - 60px))}
#swing i::before,#swing i::after{content:'';position:absolute;background:#5d5e60}
#swing i::before{left:0;right:0;top:50%;height:1.5px}
#swing i::after{top:0;bottom:0;left:50%;width:1.5px}
#swing .sl{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font:600 9px Manrope;color:#7c7d7f}

/* MIX-6 */
.chcol{position:absolute;top:0;width:38px;height:492px}
.chcol .knob.mini{position:absolute;left:4px}
.chcol .k1{top:56px}.chcol .k2{top:104px}.chcol .k3{top:152px}
.leds{position:absolute;left:0;right:0;top:206px;display:flex;flex-direction:column;align-items:center;gap:5px}
.leds i{width:5px;height:5px;border-radius:50%;background:#a9aaab;box-shadow:inset 0 1px 1px rgba(0,0,0,.35)}
.leds i.g{background:#39d353;box-shadow:0 0 5px #39d353}
.leds i.y{background:#ffc531;box-shadow:0 0 5px #ffc531}
.leds i.r{background:#ff4b2b;box-shadow:0 0 5px #ff4b2b}
.fader{position:absolute;left:0;top:246px;width:38px;height:126px;touch-action:none;cursor:ns-resize}
.fader::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:8px;margin-left:-4px;border-radius:4px;background:#0f0f10;box-shadow:inset 0 2px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.75)}
.fader i{position:absolute;left:50%;width:24px;height:34px;margin-left:-12px;border-radius:4px;bottom:calc(var(--v)*(100% - 34px));
  background:linear-gradient(90deg,#1c1c1d,#3b3b3d 45%,#151516);box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 4px 5px rgba(0,0,0,.5)}
.fader i::after{content:'';position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;background:#e9e6de;border-radius:1px}
.chl{position:absolute;left:0;right:0;top:378px;text-align:center;font:600 8px Manrope;color:#78797b;letter-spacing:.04em}
.mk{position:absolute;left:6px;top:398px;width:26px;height:34px;border-radius:5px;
  background:linear-gradient(180deg,#eeeeee,#d4d4d4);box-shadow:inset 0 1px 1px #fff, 0 4px 0 #a3a3a4, 0 6px 6px rgba(0,0,0,.28);transition:transform .05s, box-shadow .05s}
.mk.down,.mk.on{transform:translateY(4px);box-shadow:inset 0 1px 3px rgba(0,0,0,.2), 0 0 0 #a3a3a4}
.mk::after{content:'';position:absolute;left:50%;top:5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#b1b1b1}
.mk.on::after,.mk.down::after{background:var(--red);box-shadow:0 0 6px var(--red)}
#mixR{position:absolute;left:240px;top:0;width:58px;height:492px}
#lcd{left:5px;top:50px;width:48px;height:54px;background:#bfe2e4;color:#12363a;padding:4px 5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.4), 0 0 0 2px #a9b9ba;border-radius:4px}
#lcd small{display:block;font:600 7px 'IBM Plex Mono'}
#lcd b{display:block;font:600 21px 'IBM Plex Mono';line-height:1.15;letter-spacing:-.04em}
#lcd span{display:block;font:400 7px 'IBM Plex Mono'}
#mixR .knob.mix{position:absolute;left:-2px;top:140px}
.mlbl{position:absolute;left:0;right:0;text-align:center;font:600 10px Manrope;color:#6f7072}
.fx{position:absolute;left:5px;width:48px;height:48px;border-radius:50%;
  background:radial-gradient(circle at 50% 18%,#efefee,#c9c9c7);box-shadow:inset 0 1px 1px #fff, 0 0 0 2px #b9b9b7, 0 5px 0 #8e8e8c, 0 8px 8px rgba(0,0,0,.35);
  transition:transform .05s, box-shadow .05s;display:grid;place-items:center}
.fx.down,.fx.on{transform:translateY(4px);box-shadow:inset 0 1px 3px rgba(0,0,0,.25), 0 0 0 2px #b9b9b7, 0 1px 0 #8e8e8c, 0 2px 3px rgba(0,0,0,.3)}
.fx i{display:block;width:26px;height:14px;border-radius:3px;background:#161617;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.fx.on i{background:var(--red);box-shadow:0 0 9px var(--red)}
.fx i::after{content:attr(data-t);display:block;text-align:center;font:700 9px Manrope;line-height:14px;color:#fff}
.sk{position:absolute;left:8px;top:406px;width:42px;height:24px;border-radius:5px;background:linear-gradient(180deg,#eee,#d3d3d3);
  box-shadow:inset 0 1px 1px #fff, 0 4px 0 #a3a3a4, 0 6px 6px rgba(0,0,0,.28);transition:transform .05s, box-shadow .05s}
.sk.down,.sk.on{transform:translateY(4px);box-shadow:inset 0 1px 3px rgba(0,0,0,.2), 0 0 0 #a3a3a4}
.sk.on{background:linear-gradient(180deg,#f3ece4,#e2d7cb)}

@media (prefers-reduced-motion:reduce){.key,.dot,.tk,.fx,.mk,.sk,.rk{transition:none}.key.pend .led{animation:none}}

/* ---------- USB-порт и флешки ---------- */
.usb{position:absolute;left:597px;top:690px;width:46px;height:16px;border-radius:3px;background:#262729;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.6)}
.usb i{position:absolute;left:6px;right:6px;top:6px;height:3px;border-radius:1px;background:#7d7f83}
#tray{position:absolute;left:200px;top:772px;width:860px;height:164px;border-radius:20px;z-index:0;
  background:linear-gradient(180deg,#d0d1d1,#dadbdb);box-shadow:inset 0 3px 5px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.75)}
.dslot{position:absolute;z-index:0;top:790px;width:68px;height:138px;border-radius:14px;background:#c4c5c5;
  box-shadow:inset 0 3px 5px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.6)}
.dslotn{position:absolute;z-index:0;top:776px;width:68px;text-align:center;font:500 11px 'IBM Plex Mono',monospace;color:#7a7c7f;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.drive{position:absolute;top:800px;width:56px;height:124px;padding:0;border:0;background:none;cursor:pointer;z-index:0;touch-action:manipulation;will-change:transform}
.drive.active{z-index:1}
.dtip{position:absolute;left:11px;top:0;width:34px;height:34px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#8e9094,#f3f4f5 28%,#bdbfc3 62%,#8a8c90);box-shadow:inset 0 0 0 2px #7b7d81,0 0 0 1px rgba(0,0,0,.25)}
.dtip i{position:absolute;top:9px;width:7px;height:13px;background:#3a3b3d;box-shadow:inset 0 1px 2px #000}
.dtip i:first-child{left:7px}.dtip i:last-child{right:7px}
.dbody{position:absolute;left:0;top:30px;width:56px;height:94px;border-radius:10px 10px 18px 18px;display:block;
  background:linear-gradient(160deg,color-mix(in srgb,var(--dc) 62%,#fff) 0,var(--dc) 42%,color-mix(in srgb,var(--dc) 78%,#000) 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.75),inset 0 -5px 7px rgba(0,0,0,.22),0 5px 0 color-mix(in srgb,var(--dc) 55%,#000),0 8px 10px rgba(0,0,0,.35);
  transition:transform .12s}
.drive:not(.active):hover .dbody{transform:translateY(-3px)}
.dlabel{position:absolute;left:8px;top:10px;width:40px;height:46px;border-radius:4px;background:#fbfbfa;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.25)}
.dled{position:absolute;left:50%;top:64px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:rgba(0,0,0,.28);box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}
.drive[aria-pressed="true"] .dled{background:#ff5a1f;box-shadow:0 0 7px #ff5a1f}
.drive.wait .dled{animation:blink .3s steps(2) infinite}
.dhole{position:absolute;left:50%;bottom:7px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--bg,#e5e6e7);box-shadow:inset 0 2px 3px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.35)}
@media (prefers-reduced-motion:reduce){.dbody{transition:none}.drive.wait .dled{animation:none}}

/* светодиоды у остальных кнопок: тот же красный, тот же принцип */
.cell.pill .led{left:50%;right:auto;margin-left:-3px;top:10px}
.tk::after,.rk::after,.fx::after,.sk::after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:#c2bdae;box-shadow:inset 0 1px 1px rgba(0,0,0,.35);pointer-events:none}
.tk::after{top:8px;right:9px}
.rk::after{top:3px;left:50%;margin-left:-2.5px;width:5px;height:5px}
.fx::after{top:5px;left:50%;margin-left:-3px}
.sk::after{top:4px;right:5px}
.tk.on::after,.tk.down::after,.rk.down::after,.fx.on::after,.fx.down::after,.sk.on::after,.sk.down::after{background:var(--red);box-shadow:0 0 6px var(--red)}