:root {
  --room: #110d0a;
  --walnut: #4e311e;
  --see: 1;
  --face: #d9c7ae;
  --ink: #3a2b22;
  --amber: #ffb84a;
  --gold: #c6a57a;
  --age: 0.38;
  --wow: 0.32;
  --den:
    radial-gradient(ellipse 55% 42% at 16% 0%, rgba(255, 176, 84, 0.16), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 115%, rgba(72, 42, 22, 0.45), transparent 55%),
    linear-gradient(180deg, #1a130e 0%, #0d0a08 72%);
  color-scheme: dark;
}

@font-face {
  font-family: "Tape Hand";
  src: url("fonts/caveat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--room);
  color: var(--ink);
  font-family: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
}

html:has(body.overlay),
body.overlay {
  /* Same backing as the old detach window. A transparent iframe over the tab
     is what makes Chrome drop the dark knob paint. */
  background: var(--room) !important;
  color-scheme: dark;
  width: auto;
  height: auto !important;
  min-height: 0;
  overflow: visible;
}

/* Full page and the Mac app: each skin's room stays parked behind the machine.
   The embedded tab overlay keeps the flat backing so Chrome still paints the knobs. */
html:has(body.preview),
body.preview,
html:has(body.desktop),
body.desktop {
  background: var(--den, var(--room)) !important;
  background-attachment: fixed !important;
  color-scheme: dark;
}

/* Overlay preview is a real page, not an iframe host — fill the pane and keep the machine in flow
   so the receiver is not clipped when html/body collapse around an absolutely-positioned #room. */
html:has(body.preview.overlay),
body.preview.overlay {
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: auto !important;
}
body.preview.overlay #room {
  position: relative;
  left: auto;
  top: auto;
  margin: 16px auto;
}

/* The machine sits down in the room, so the top of the picture stays visible. */
body.preview.overlay:not(.desktop):not(.is-pocket):not(.is-min):not(.is-phone) #room {
  margin: clamp(280px, 32vh, 520px) auto 64px;
}
body.preview.overlay.is-phone #room {
  margin: 8px auto 28px;
}
body.is-phone {
  touch-action: manipulation;
}
body.desktop.preview.overlay:not(.is-pocket):not(.is-min) #room {
  margin: 320px 48px 36px;
}

html:has(body.desktop.preview.overlay),
body.desktop.preview.overlay {
  overflow: hidden !important;
}

/* Hidden title bar: grab the wood, not a control, to move the window. */
body.desktop .cabinet {
  -webkit-app-region: drag;
}
body.desktop :is(
  button, a, input, textarea, select, canvas, label, output,
  [role="slider"], [role="button"],
  .mpc-pad, .sp-pad, .pad-start, .keys-jewel,
  #guide, #keys-sheet, #note-desk, #song-desk, #chop-slip, #hw-tip, .pst-menu, #preset-slip, #hear-desk,
  #pocket button, #pocket [role="slider"]
) {
  -webkit-app-region: no-drag;
}
body.desktop.is-pocket #pocket { -webkit-app-region: drag; }

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

button, .knob, .fader { font: inherit; color: inherit; }

body.booting .stage { opacity: 0; }

.room,
.cabinet,
.plinth,
.face,
.drops {
  position: relative;
  z-index: 0;
}

.room::before,
.cabinet::before,
.plinth::before,
.face::before,
.drops::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}
.cabinet,
.plinth,
.face,
.drops {
  isolation: isolate;
}
.cabinet {
  background-color: var(--shell, var(--walnut));
  color-scheme: dark;
  forced-color-adjust: none;
}
.plinth,
.face,
.drops { background-color: var(--face); }

body[data-skin="walnut"] { --face: #d4c09a; --shell: #4e311e; }
body[data-skin="ebony"] { --face: #c5ccd6; --shell: #1a1c22; }
body[data-skin="avocado"] { --face: #d9cf9f; --shell: #3a4a1c; }
body[data-skin="papaya"] { --face: #f3cfa6; --shell: #3a0f2a; }
body[data-skin="lagoon"] { --face: #b3d8cf; --shell: #0c3a38; }
body[data-skin="halloween"] { --face: #d6b172; --shell: #1a0c06; }
body[data-skin="ashbury"] { --face: #f0dcc0; --shell: #2a1020; }
body[data-skin="synthwave"] { --face: #130738; --shell: #0a0418; }
body[data-skin="reggae"] { --face: #745e46; --shell: #3a2a18; }
body[data-skin="invasion"] { --face: #c7a23c; --shell: #2a1a08; }
body[data-skin="mpc"] { --face: #d4d4cc; --shell: #1c1c1f; }
body[data-skin="sp404"] { --face: #1f2125; --shell: #121316; }

.room {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.overlay .room {
  height: auto;
  width: auto;
  display: block;
  overflow: visible;
  padding: 0;
}

body.overlay .room::before,
body.overlay .lamp,
body.overlay .vignette,
body.overlay .motes {
  display: none;
}

.room::before {
  background: var(--den);
}

.lamp, .grain, .vignette, .motes { pointer-events: none; }

.lamp {
  position: fixed;
  inset: -10vh auto auto -8vw;
  width: 70vw;
  height: 60vh;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 186, 110, 0.2), transparent 62%);
}

.vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.55) 100%);
}

.grain {
  position: fixed;
  inset: -10%;
  opacity: 0.09;
  filter: url(#grain);
  mix-blend-mode: overlay;
}

.motes i {
  position: fixed;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 214, 160, 0.45);
  animation: mote 14s linear infinite;
  opacity: 0;
}

.motes i:nth-child(1) { left: 18%; top: 70%; animation-duration: 16s; }
.motes i:nth-child(2) { left: 28%; top: 80%; animation-duration: 19s; animation-delay: -4s; }
.motes i:nth-child(3) { left: 12%; top: 60%; animation-duration: 13s; animation-delay: -8s; }
.motes i:nth-child(4) { left: 36%; top: 76%; animation-duration: 21s; animation-delay: -2s; }
.motes i:nth-child(5) { left: 22%; top: 88%; animation-duration: 17s; animation-delay: -11s; }
.motes i:nth-child(6) { left: 8%; top: 74%; animation-duration: 15s; animation-delay: -6s; }
.motes i:nth-child(7) { left: 44%; top: 68%; animation-duration: 23s; animation-delay: -9s; }
.motes i:nth-child(8) { left: 31%; top: 58%; animation-duration: 18s; animation-delay: -13s; }

@keyframes mote {
  0% { transform: translate3d(0, 20px, 0); opacity: 0; }
  15% { opacity: 0.55; }
  100% { transform: translate3d(30px, -140px, 0); opacity: 0; }
}

.stage {
  width: min(800px, calc(100vw - 28px));
  animation: arrive 0.8s ease both;
}

body.overlay .stage {
  width: max-content;
  max-width: none;
}

/* Natural size must not depend on the iframe's current size: pin #room top-left at max-content. */
body.overlay #room {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: max-content;
  height: max-content;
  overflow: visible;
}

body.overlay .vignette,
body.overlay .lamp,
body.overlay .motes {
  opacity: var(--see);
}

body.overlay .grain {
  display: none;
}

body.overlay .cabinet {
  width: 800px;
  min-width: 800px;
  max-width: none;
  box-shadow:
    0 1px 0 rgba(255, 220, 180, calc(0.18 * var(--see))) inset,
    0 28px 50px rgba(0, 0, 0, calc(0.55 * var(--see))),
    0 2px 0 rgba(0, 0, 0, calc(0.4 * var(--see)));
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.cabinet {
  position: relative;
  width: 800px;
  max-width: 100%;
  min-width: 0;
  padding: 18px 18px 12px;
  border-radius: 16px 16px 12px 12px;
  box-shadow:
    0 1px 0 rgba(255, 220, 180, 0.18) inset,
    0 28px 50px rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(0, 0, 0, 0.4);
}

.cabinet::before {
  background:
    radial-gradient(ellipse at 0% 40%, rgba(255, 220, 180, 0.08), transparent 42%),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(87deg, transparent 0 22px, rgba(30, 14, 6, 0.22) 23px, transparent 28px, transparent 46px, rgba(120, 74, 40, 0.16) 47px, transparent 52px),
    linear-gradient(180deg, #6b452c, #4a2e1c 38%, #3a2416);
}

.plinth {
  position: relative;
  height: 408px;
  border-radius: 10px 10px 4px 4px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.16), inset 0 -12px 20px rgba(0, 0, 0, 0.18);
}

.plinth::before {
  background:
    linear-gradient(180deg, rgba(255, 230, 200, 0.07), transparent 18%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #5c3b26, #3f2819);
}

.disc {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  left: calc((100% - 604px) / 2 + 42px);
  top: 22px;
  width: 364px;
  height: 364px;
}

.platter, .slipmat, .vinyl, .sheen, .spindle {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.slipmat { z-index: 2; }
.vinyl { z-index: 3; }
.sheen { z-index: 4; }

.platter {
  width: 364px;
  height: 364px;
  background:
    repeating-radial-gradient(circle at 50% 50%, #c8c2b6 0 2px, #8f897f 3px, #ded8ce 5px);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.42),
    inset 0 0 0 10px #6d675e,
    inset 0 0 0 13px #d5cfc3;
}

.slipmat {
  width: 332px;
  height: 332px;
  background:
    radial-gradient(circle at 50% 50%, #214536 0 62%, #163528 63%, #1c4034 100%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
}

.vinyl {
  width: 308px;
  height: 308px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 38%, #141414 38.4% 100%),
    repeating-radial-gradient(circle at 50% 50%, #090909 0 1.2px, #1b1b1b 1.6px, #070707 2.5px, #161616 3.1px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  will-change: transform;
}

.disc.over .vinyl { box-shadow: 0 0 0 3px rgba(255, 184, 74, 0.7), 0 8px 16px rgba(0, 0, 0, 0.35); }

.wear {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: calc(0.12 + var(--age) * 0.7);
  background:
    repeating-conic-gradient(from 12deg, transparent 0 22deg, rgba(255, 255, 255, 0.045) 22.2deg, transparent 22.8deg),
    radial-gradient(circle at 32% 40%, transparent 46%, rgba(255, 255, 255, 0.05) 47%, transparent 48%);
}

.speck {
  position: absolute;
  width: 4px;
  height: 3px;
  border-radius: 50%;
  background: rgba(230, 220, 200, 0.55);
}
.speck.a { left: 22%; top: 30%; }
.speck.b { right: 16%; top: 58%; width: 3px; background: rgba(180, 160, 130, 0.7); }
.speck.c { left: 48%; bottom: 14%; width: 5px; height: 2px; opacity: calc(0.3 + var(--age)); }

.label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118px;
  height: 118px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1a120c 0 7px, transparent 7.5px),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 42%),
    repeating-linear-gradient(180deg, rgba(120, 70, 20, 0.08) 0 2px, transparent 2px 5px),
    #e4c56a;
  box-shadow: inset 0 0 0 5px #8d2e2b, inset 0 0 0 7px #e4c56a, 0 0 0 1px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  text-align: center;
}

.label-copy {
  width: 100%;
  height: 100%;
  color: #4a2416;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 12px;
}

.label-kicker, .label em {
  display: block;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 8px;
}

.label strong {
  display: block;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.03em;
  line-height: 1.05;
  font-weight: 700;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheen {
  width: 308px;
  height: 308px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.2), transparent 26%, transparent 62%, rgba(255, 255, 255, 0.07) 78%, transparent);
  pointer-events: none;
}

.spindle {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 35%, #fff, #b7b1a6 40%, #5c574e 78%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.arm-wrap {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: calc((100% - 604px) / 2);
  width: 604px;
  pointer-events: none;
}

.arm-svg { width: 100%; height: 100%; overflow: visible; }
.arm-rotor,
.cradle { pointer-events: auto; cursor: pointer; }

.arm-rotor {
  transform-box: view-box;
  transform-origin: 790px 185px;
  transform: rotate(180deg);
  transition: transform 1.05s cubic-bezier(0.22, 0.72, 0.18, 1);
}

body.is-playing .arm-rotor { transform: rotate(9deg); }

/* A filament in the tube. Off on the rest, a small uneven flicker while the record turns. */
.arm-halo, .arm-core { opacity: 0; }
body.is-playing .arm-halo, body.is-playing .arm-core { animation: arm-flicker 3.1s infinite; }
.needle-glow { opacity: 0; }
body.is-playing .needle-glow {
  opacity: 0.72;
  animation: needle-pool 5.2s ease-in-out 0.5s infinite;
}
@keyframes needle-pool {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.82; }
}
@keyframes arm-flicker {
  0% { opacity: 0.55; }
  4% { opacity: 0.92; }
  5% { opacity: 0.18; }
  11%, 36% { opacity: 0.64; }
  37% { opacity: 1; }
  38% { opacity: 0.26; }
  60% { opacity: 0.7; }
  61% { opacity: 0.12; }
  68%, 86% { opacity: 0.78; }
  87% { opacity: 0.3; }
  100% { opacity: 0.55; }
}

/* Light under the platter: a soft ring, and one warmer patch that walks the rim. */
.platter-under {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 428px;
  height: 428px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.platter { z-index: 1; }
body.is-playing .platter-under { opacity: 0.15; mix-blend-mode: screen; }
.platter-under i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 80%, rgba(255, 170, 60, 0.35) 86%, rgba(255, 196, 110, 0.9) 91%, rgba(255, 150, 40, 0.4) 96%, transparent 100%);
  filter: blur(3px);
  animation: platter-breath 6.4s ease-in-out infinite;
}
.platter-under i::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 68%, rgba(255, 236, 190, 1) 78%, rgba(255, 150, 40, 0.45) 86%, transparent 94%);
  filter: blur(7px);
  animation: platter-walk 18s linear infinite;
}
@keyframes platter-breath {
  0%, 100% { opacity: 0.55; transform: scale(0.985); }
  50% { opacity: 1; transform: scale(1.02); }
}
@keyframes platter-walk {
  to { transform: rotate(360deg); }
}

.label-foot {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.deck-controls {
  position: absolute;
  z-index: 2;
  right: calc((100% - 604px) / 2 + 36px);
  bottom: 28px;
  width: 92px;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.ctrl-name, .tray, .speed button, .group-label, .k-name, .f-name, .tool-label, .silk, .rail, .rocker span, .brand em {
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ctrl-name { font-size: 10px; color: rgba(255, 224, 190, 0.55); }

.cue {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  appearance: none;
  font: inherit;
  cursor: pointer;
  background:
    radial-gradient(circle at 40% 35%, #eeeae3, #b7b1a6 46%, #6e685e);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
}

.cue-stem {
  position: absolute;
  width: 6px;
  height: 26px;
  left: 34px;
  top: 8px;
  border-radius: 3px;
  background: linear-gradient(#f4efe6, #8d877c);
  transform-origin: 50% 90%;
  transform: rotate(28deg);
  transition: transform 0.35s ease;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

body.is-playing .cue-stem { transform: rotate(-18deg); left: 14px; }

.speed { display: flex; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }

.speed button, .tray {
  border: 0;
  background: #2a2118;
  color: rgba(255, 214, 160, 0.55);
  cursor: pointer;
  padding: 5px 8px;
  font-size: 11px;
}

.speed button.on, .tray:hover, .speed button:hover { color: var(--amber); }

.speed button.on {
  background: #1a120c;
  box-shadow: inset 0 0 8px rgba(255, 160, 50, 0.35);
}

.tray { width: 100%; border-radius: 4px; background: rgba(0, 0, 0, 0.28); }

.face, .drops {
  position: relative;
  border-radius: 8px;
  margin-top: 10px;
  padding: 16px 16px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 0 30px rgba(90, 55, 20, 0.08), 0 8px 16px rgba(0, 0, 0, 0.18);
}

.face::before,
.drops::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 22%, rgba(80, 50, 20, 0.05)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #e3d3bc, #cbbba3);
}

.drops {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.drops-title {
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6a5344;
}

body:not(.is-on) .face,
body:not(.is-on) .drops {
  filter: saturate(0.35) brightness(0.62);
}

.screw {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3efe8, #9a9388 45%, #5e584e);
  box-shadow: inset 0 0 0 1px #3a342c;
}
.screw::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 4px;
  height: 1px;
  background: #3a342c;
  transform: rotate(28deg);
}
.s1 { left: 8px; top: 8px; }
.s2 { right: 8px; top: 8px; }
.s3 { left: 8px; bottom: 8px; }
.s4 { right: 8px; bottom: 8px; }

.meter-row {
  display: grid;
  grid-template-columns: 168px 168px 1fr;
  gap: 12px;
  align-items: start;
}

.meter {
  background: #2a160c;
  border-radius: 5px;
  padding: 4px 4px 2px;
  box-shadow: inset 0 0 0 2px #cfc3ae, inset 0 0 0 4px #6d6254, 0 2px 5px rgba(0, 0, 0, 0.28);
}

.meter-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

body:not(.is-on) .meter-svg { filter: grayscale(0.7) brightness(0.38); }

.meter span {
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #5c4a3c;
  margin-top: 2px;
}

.needle { transform-origin: 90px 94px; transform: rotate(-42deg); }

.tick-red { stroke: #8d2a22; }

.readout { position: relative; padding-top: 2px; }
body:is([data-skin="mpc"], [data-skin="sp404"]) .brand { display: none; }
body:is([data-skin="mpc"], [data-skin="sp404"]) .vfd,
body:is([data-skin="mpc"], [data-skin="sp404"]) .jewels { display: none; }

.brand strong {
  display: block;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3d2c22;
}

.brand em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10px;
  color: #6d5848;
}

.vfd {
  margin-top: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 4px;
  padding: 8px 10px 7px;
  cursor: default;
  background: linear-gradient(180deg, #1a120b, #120d08);
  box-shadow: inset 0 0 0 1px #3a2a1c, inset 0 8px 16px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 3px;
}

.vfd span {
  display: block;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 170, 50, 0.75);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#vfd1 { font-size: 14px; }
#vfd2 { font-size: 10px; opacity: 0.72; }

body:not(.is-on) .vfd span { color: #6a5438; text-shadow: none; }

.vfd-readonly { pointer-events: none; user-select: none; }

.vfd.flash { animation: flicker 0.18s linear 2; }

body.overlay .disc { pointer-events: auto; cursor: pointer; }

@keyframes flicker {
  50% { opacity: 0.45; }
}

.jewels { display: flex; gap: 8px; margin-top: 8px; }

.jewel {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5c5148, #2a241c);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

body.is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #fff6df, #ffb84a 42%, #a85a12);
  box-shadow: 0 0 8px #ffb84a;
}

body.is-on .signal-jewel.hot {
  background: radial-gradient(circle at 35% 30%, #fff, #ff5a3c 45%, #8d1c12);
  box-shadow: 0 0 8px #ff5a3c;
}

body.is-on .dub-jewel.on {
  background: radial-gradient(circle at 35% 30%, #f4ffe4, #b6e07a 45%, #3d6a22);
  box-shadow: 0 0 8px #9dce6a;
}

body.keys-live .keys-jewel {
  background: radial-gradient(circle at 35% 30%, #e8fff4, #3dffb0 45%, #0a6a44);
  box-shadow: 0 0 9px #2dff9b;
}

.drawer {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 118px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #16110c;
  border-radius: 4px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}

.drawer button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--amber);
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 8px;
  cursor: pointer;
  border-radius: 3px;
}

.drawer button:hover, .drawer button:focus-visible { background: rgba(255, 184, 74, 0.12); }

.knob-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.group { min-width: 0; }

.group-label {
  display: block;
  text-align: center;
  font-size: 10px;
  color: #6a5344;
  margin-bottom: 6px;
}

.knobs { display: flex; gap: 8px; }

.knob, .fader { outline: none; cursor: grab; touch-action: none; user-select: none; }
.knob:active, .fader:active { cursor: grabbing; }

.knob-stack { position: relative; width: 64px; height: 64px; margin: 0 auto; }

.knob-scale {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 225deg, #5c4638 0 270deg, transparent 270deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61% 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 60%, #000 61% 70%, transparent 71%);
}

.knob.bipolar .knob-scale::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 2px;
  height: 7px;
  background: #3a2a22;
  transform: translateX(-50%);
}

.knob-ring {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.26) 0 1.5deg, rgba(0, 0, 0, 0.18) 1.5deg 3deg),
    radial-gradient(circle at 40% 32%, var(--kn-sk1), var(--kn-sk2) 52%, var(--kn-sk3));
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.42),
    0 1px 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

.knob-cap {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  /* No overflow clip and no transform on this element. In the docked iframe
     Chrome drops the cap paint when a rounded clip wraps a rotated child,
     and the light skirt shows through. */
  background: radial-gradient(circle at 50% 28%, var(--kn-top1), var(--kn-top2) 56%, var(--kn-top3));
  box-shadow:
    0 6px 8px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -5px 8px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Rotate the pointer/knurl only. A transform on the painted cap punches
   through the transparent overlay iframe in Chrome. */
.knob-spin {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: rotate(var(--rot, 0deg));
  pointer-events: none;
  z-index: 2;
}

/* knurled grip around the edge of the cap (turns with the knob) */
.knob-spin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--kn-grip) 0 2.5deg, transparent 2.5deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 0 72%, #000 74%);
  mask: radial-gradient(circle, transparent 0 72%, #000 74%);
  pointer-events: none;
}

/* top face: machined rings + a light that stays put */
.knob-cap::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255, 255, 255, var(--kn-sheen)) 28deg,
      transparent 66deg,
      transparent 180deg,
      rgba(255, 255, 255, calc(var(--kn-sheen) * 0.6)) 212deg,
      transparent 250deg),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.07) 1px 2px);
  pointer-events: none;
}
.knob-cap i {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 4px;
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: var(--kn-ind);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55), 0 0 7px var(--kn-glow);
  transform: translateX(-50%);
}

.k-name, .k-val {
  display: block;
  text-align: center;
  line-height: 1.1;
}

.k-name {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4e3b30;
}

.k-val {
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 9px;
  color: #6d5848;
}

.tools-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(90, 55, 20, 0.12);
}

.group-faders { flex: 0 0 auto; }

.tools-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 8px;
  align-items: stretch;
  justify-items: center;
}

.tool-cell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  width: 100%;
}

.voice-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tools-grid .knob { display: flex; flex-direction: column; align-items: center; }
.tools-grid .knob .k-name { display: none; }
.tools-grid .bay-foot .k-name { display: block; }

.siren-feet {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: center;
  align-items: start;
}
.siren-feet .bay-foot { width: auto; flex: 1; max-width: 78px; }
.siren-feet .trim-track { width: 100%; min-width: 44px; }

.bay-foot {
  display: grid;
  grid-template-rows: 54px auto auto;
  justify-items: center;
  align-items: center;
  width: 100%;
  outline: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.bay-foot:active { cursor: grabbing; }

.trim-track, .reed-track { position: relative; }

.trim-track { width: 70px; height: 22px; }

.trim-slot {
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 8px;
  border-radius: 4px;
  background: #0c0a08;
  box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255, 255, 255, 0.12);
}

.trim-cap {
  position: absolute;
  top: 1px;
  width: 16px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(90deg, #f7f1e6, #c9b79a 55%, #8d7d68);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.trim-cap::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 7px;
  width: 2px;
  background: #2a2118;
}

.wheel-bezel {
  position: relative;
  width: 68px;
  height: 34px;
  overflow: hidden;
  border-radius: 7px;
  background: #0c0a08;
  box-shadow: inset 0 2px 5px #000, 0 1px 0 rgba(255, 255, 255, 0.14);
}

.wheel-bezel::before,
.wheel-bezel::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.wheel-bezel::before {
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%, rgba(0, 0, 0, 0.35));
}

.wheel-bezel::after {
  left: 50%;
  top: 3px;
  bottom: 3px;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 196, 110, 0.9);
  box-shadow: 0 0 4px rgba(255, 150, 40, 0.7);
}

.wheel-tire {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 150px;
  margin-left: -75px;
  background:
    repeating-linear-gradient(90deg, #efe4d0 0 3px, #2c241c 3px 6px, #c9b89a 6px 9px, #14110e 9px 12px);
}

.reed-track { width: 28px; height: 54px; }

.reed-slot {
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 6px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: #0c0a08;
  box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.reed-cap {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(#ffe1a8, #e09030 48%, #8a4e16);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.reed-cap::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 6px;
  height: 2px;
  background: #3a220c;
}

.tool-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  color: #6a5344;
}

.tool-readout, .tools-grid .k-val {
  display: block;
  margin-top: 4px;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d5848;
}

.face .f-name {
  color: #4e3b30;
}

.face .f-scale {
  color: #6d5848;
}

.pilot {
  width: 58px;
  height: 58px;
  margin: 3px auto 0;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 38% 30%, #f7f4ee, #b7b1a4 46%, #6a645c);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.pilot-glass {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.7), transparent 24%),
    radial-gradient(circle at 50% 62%, rgba(210, 245, 160, 0.72), rgba(70, 140, 48, 0.72) 58%, rgba(16, 40, 14, 0.92));
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(220, 255, 180, 0.35);
}

.pilot.hot .pilot-glass {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85), transparent 30%),
    radial-gradient(circle at 50% 48%, #e7ffc4, #8ed85a 40%, #246018 74%);
  box-shadow: 0 0 12px rgba(150, 230, 80, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.35);
}

.selector {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  cursor: grab;
  touch-action: none;
  outline: none;
  isolation: isolate;
}

.selector:active { cursor: grabbing; }

.selector-scale {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 220deg, rgba(230, 210, 170, 0.75) 0 280deg, transparent 280deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61% 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 60%, #000 61% 70%, transparent 71%);
}




.tools-grid .knob-stack { width: 72px; height: 72px; }

.hiss-types {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.hiss-types button {
  border: 0;
  border-radius: 3px;
  background: #c4b29a;
  color: #5c463a;
  cursor: pointer;
  padding: 5px 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hiss-types button.on {
  color: var(--amber);
  background: #2a2118;
  box-shadow: inset 0 0 8px rgba(255, 160, 50, 0.35);
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding-left: 4px;
}

.rocker {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.rocker span:last-child {
  font-size: 11px;
  color: #5c463a;
}

.rocker-cap {
  width: 36px;
  height: 18px;
  border-radius: 9px;
  background: #2a2118;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
}

.rocker-cap::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3efe6, #8d877c);
  transition: transform 0.18s ease;
}

.rocker.on .rocker-cap::after { transform: translateX(18px); }
.rocker.on .rocker-cap { box-shadow: inset 0 0 8px rgba(255, 160, 40, 0.45), 0 1px 0 rgba(255, 255, 255, 0.4); }

.silk {
  margin: 0 0 0 auto;
  font-size: 10px;
  color: #7a6556;
}

.faders {
  display: flex;
  justify-content: center;
  gap: 6px;
  height: 230px;
}

.faders-compact {
  height: 148px;
}

.fader { width: 40px; height: 100%; position: relative; }

.f-scale {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 28px;
  width: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 8px;
  color: rgba(230, 215, 196, 0.45);
}

.f-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  bottom: 26px;
}

.f-slot {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 8px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: #0c0a08;
  box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255, 255, 255, 0.15);
}

.f-cap {
  position: absolute;
  left: 50%;
  width: 26px;
  margin-left: -13px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(#ffe1a8, #e09030 48%, #8a4e16);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.f-cap::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 6px;
  height: 2px;
  background: #3a220c;
}

.f-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(230, 215, 196, 0.78);
}

.rail {
  margin: 10px 0 4px;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 220, 190, 0.42);
}
body.overlay .rail::after { content: " · 411"; }
body.web-drums .rail,
body.is-phone .rail { display: none; }
.knob-diag { color: #ffb84a; letter-spacing: 0.02em; }

.feet {
  display: flex;
  justify-content: space-between;
  padding: 0 18px;
}

.feet i {
  width: 18px;
  height: 8px;
  border-radius: 0 0 8px 8px;
  background: radial-gradient(circle at 50% 0%, #e6d2a8, #8a6a3e 60%, #3a2a16);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.35);
}

.knob:focus-visible, .fader:focus-visible, .bay-foot:focus-visible, button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .stage, .motes i, .arm-rotor, .cue-stem, .arm-halo, .arm-core, .needle-glow, .platter-under i, .platter-under i::after { animation: none; transition: none; }
  .arm-halo, .arm-core { opacity: 0; }
}

.skin-chip {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.skin-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding: 0;
  background: transparent;
  color: #5c463a;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
}

.swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(#8a5a32, #3f2818);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.kill-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
}

.kill {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 40%),
    #d9cbb4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 0 #a8947c,
    0 4px 8px rgba(0, 0, 0, 0.12);
  color: #3d2c22;
}

.kill span {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kill em {
  grid-column: 2;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a6556;
}

.kill-lamp {
  grid-row: 1 / span 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a6258, #2a241c);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
}

.kill.on {
  background:
    linear-gradient(180deg, rgba(255, 220, 170, 0.35), transparent 42%),
    #c9b496;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 0 #8d7b64,
    0 0 0 1px rgba(180, 60, 30, 0.25);
}

.kill.on .kill-lamp {
  background: radial-gradient(circle at 35% 30%, #ffe1c2, #ff5a32 46%, #8a1c10);
  box-shadow: 0 0 8px rgba(255, 80, 40, 0.75);
}

.kill.on em { color: #8a3a22; }

.silk { margin-left: 12px; }

.dock-bar { display: none; }

.dock {
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  background: #1a120c;
  color: rgba(255, 214, 160, 0.9);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font: inherit;
  font-size: 11px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 196, 110, 0.28);
}

body.overlay .cabinet:has(.dock-bar.is-open) .plinth {
  z-index: 8;
}
body.overlay .plinth .dock-bar:not([hidden]) {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 5px;
  position: absolute;
  z-index: 12;
  top: 14px;
  right: 18px;
  left: auto;
  max-width: none;
  pointer-events: auto;
}
body[data-skin="sp404"].overlay .plinth .dock-bar:not([hidden]) {
  top: 38px;
}

.dock-more {
  position: relative;
  width: 28px;
  height: 26px;
  padding: 0;
  flex: none;
}
.dock-more.has-house::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d4, #ff9a2a 54%, #c45110);
  box-shadow: 0 0 6px rgba(255, 150, 40, 0.9);
}
.house-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 2px;
  padding: 10px 10px 9px;
  border-radius: 12px;
  text-decoration: none;
  color: #2a1c10;
  background:
    radial-gradient(ellipse 80% 55% at 0% 0%, rgba(255, 206, 140, 0.7), transparent 68%),
    linear-gradient(165deg, #fff6e4, #e4c27a);
  box-shadow:
    inset 0 0 0 1px rgba(90, 48, 16, 0.38),
    3px 4px 0 #6b3a22;
  transform: rotate(0.7deg);
}
.house-card .dock-tray-kicker { letter-spacing: 0.12em; }
.house-card strong {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.house-card p {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.house-shelves {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.house-shelves i {
  font-style: normal;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 250, 242, 0.78);
  box-shadow: 1px 1px 0 rgba(90, 40, 16, 0.32);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}
.house-go {
  margin-top: 1px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.house-card:hover { transform: rotate(-0.4deg) translateY(-1px); }
.house-card:active { transform: rotate(0.7deg) translateY(1px); }
body.overlay .plinth .dock.pay-cap {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  font-weight: 800;
  color: #2a1c10;
  background: radial-gradient(circle at 34% 28%, #fff6df, #e4c56a 52%, #8a6a22);
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 #5a3a12,
    0 6px 10px rgba(0, 0, 0, 0.35);
}
.pay-cap span { position: relative; z-index: 1; }
.pay-cap[aria-expanded="true"] {
  transform: translateY(2px) rotate(-8deg);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28), 0 1px 0 #5a3a12;
}
.pay-card {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  position: absolute;
  top: -6px;
  right: calc(100% + 12px);
  width: 260px;
  max-width: min(260px, calc(100vw - 64px));
  padding: 14px 14px 12px;
  border-radius: 16px;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  color: var(--tour-ink);
  background:
    radial-gradient(ellipse 70% 40% at 12% 0%, var(--tour-blush), transparent 70%),
    linear-gradient(165deg, var(--tour-paper), var(--tour-paper2));
  box-shadow:
    inset 0 0 0 2px var(--tour-line),
    inset 0 0 0 5px rgba(255, 255, 255, 0.16),
    6px 8px 0 var(--tour-pop),
    0 22px 40px rgba(0, 0, 0, 0.45);
  transform: rotate(-1.4deg);
  transform-origin: right top;
  z-index: 3;
}
.pay-card.is-open { display: flex; }
.pay-card[hidden] { display: none !important; }
.pay-copy,
.pay-note {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.pay-note:empty { display: none; }
.pay-mail {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pay-mail[hidden] { display: none; }
.pay-mail input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  color: #23180f;
  background: #fffaf3;
  box-shadow: inset 0 0 0 1px rgba(42, 28, 16, 0.28);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.pay-go {
  height: 34px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: #2a1c10;
  background: linear-gradient(180deg, #fffaf3, #e7d7bc);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #6b452c;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pay-go:disabled { cursor: default; opacity: 0.72; }
.dock-tray .pay-card {
  display: flex;
  position: static;
  top: auto;
  right: auto;
  width: auto;
  max-width: none;
  margin: 2px 0 0;
  padding: 10px 10px 8px;
  border-radius: 10px;
  transform: none;
  background: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.dock-tray .pay-card .dock-tray-title { font-size: 18px; }
body.overlay.is-min .pay-card { display: none !important; }

.dock-more i {
  display: block;
  width: 4px;
  height: 4px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(255, 214, 160, 0.92);
  box-shadow: -7px 0 0 rgba(255, 214, 160, 0.92), 7px 0 0 rgba(255, 214, 160, 0.92);
}
.dock-bar.is-open .dock-more {
  transform: rotate(-8deg) scale(1.06);
  box-shadow: 3px 3px 0 var(--tour-line), 0 0 0 1px var(--tour-pop);
}

.dock-tray {
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
  position: absolute;
  top: -8px;
  right: calc(100% + 14px);
  left: auto;
  width: 240px;
  max-width: min(240px, calc(100vw - 48px));
  padding: 14px 14px 12px;
  border-radius: 16px;
  color: var(--tour-ink);
  background:
    radial-gradient(ellipse 70% 40% at 12% 0%, var(--tour-blush), transparent 70%),
    linear-gradient(165deg, var(--tour-paper), var(--tour-paper2));
  box-shadow:
    inset 0 0 0 2px var(--tour-line),
    inset 0 0 0 5px rgba(255, 255, 255, 0.16),
    6px 8px 0 var(--tour-pop),
    0 22px 40px rgba(0, 0, 0, 0.45);
  transform: rotate(-1.6deg);
  transform-origin: right top;
  backdrop-filter: none;
}
.dock-bar.is-open .dock-tray,
.dock-bar.is-open .dock-tray[hidden] {
  display: flex !important;
  animation: guide-pop 0.28s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}
.dock-tray::after {
  content: "";
  position: absolute;
  top: 14px;
  right: -9px;
  width: 16px;
  height: 16px;
  background: var(--tour-paper);
  box-shadow: inset -2px 2px 0 var(--tour-line), 4px 3px 0 var(--tour-pop);
  transform: rotate(45deg);
}

.dock-tray-kicker {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  margin-bottom: 2px;
  background: var(--tour-pop);
  color: var(--tour-pop-ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--tour-line);
}
.dock-tray-title {
  display: block;
  margin: 0 0 2px;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--tour-ink);
}

body.overlay .dock { display: flex; }

body.overlay .plinth .glass {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px 0 10px;
  border-radius: 999px;
  background: rgba(12, 8, 6, 0.82);
  color: rgba(255, 214, 160, 0.92);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 196, 110, 0.32);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  backdrop-filter: blur(4px);
}

body.overlay:not(.is-min) .dock-tray .glass {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
  color: var(--tour-ink);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  backdrop-filter: none;
}
body.overlay:not(.is-min) .dock-tray .glass-name {
  font-size: 10px;
  font-weight: 900;
  color: var(--tour-ink);
}
body.overlay:not(.is-min) .dock-tray .glass-track {
  flex: 1;
  width: auto;
  min-width: 72px;
}

body.overlay .plinth .dock {
  padding: 5px 10px;
  font-size: 10px;
  background: rgba(12, 8, 6, 0.82);
  backdrop-filter: blur(4px);
}

.glass-name {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.overlay .plinth .glass-track {
  width: 56px;
}

.glass-track {
  position: relative;
  width: 92px;
  height: 8px;
  border-radius: 4px;
  background: #0c0a08;
  box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255, 255, 255, 0.12);
}

.glass-cap {
  position: absolute;
  top: -4px;
  width: 14px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, #f7f1e6, #c9b79a 55%, #8d7d68);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

body.overlay.is-min .glass,
body.overlay.is-min .zoom { display: none; }

body.overlay .dock-close {
  background: #2a1612;
  color: rgba(255, 214, 186, 0.95);
}

body.overlay.is-min {
  background: #1a120c;
}

body.overlay.is-min .lamp,
body.overlay.is-min .motes,
body.overlay.is-min .grain,
body.overlay.is-min .vignette,
body.overlay.is-min .halloween-decor,
body.overlay.is-min .face,
body.overlay.is-min .rail,
body.overlay.is-min .feet {
  display: none !important;
}

body.overlay.is-min .plinth > :not(.dock-bar) {
  display: none !important;
}

body.overlay.is-min .plinth {
  height: auto;
  min-height: 0;
  box-shadow: none;
}

body.overlay.is-min .plinth::before {
  opacity: 0;
}

body.overlay.is-min .cabinet {
  min-width: 0;
  width: 100%;
  padding: 0;
  box-shadow: none;
}

body.overlay.is-min .cabinet::before {
  opacity: 0;
}

body.overlay.is-min .dock-more { display: none !important; }
body.overlay.is-min .house-card { display: none !important; }
body.overlay.is-min .plinth .dock-bar {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  max-width: none;
  width: 100%;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
}
body.overlay.is-min .dock-tray {
  display: flex !important;
  flex-direction: row;
  position: relative;
  top: auto;
  right: auto;
  max-width: none;
  width: 100%;
  padding: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  box-shadow: none;
  transform: none;
  animation: none;
  backdrop-filter: none;
}
body.overlay.is-min .dock-tray::after,
body.overlay.is-min .dock-tray-kicker,
body.overlay.is-min .dock-tray-title {
  display: none !important;
}

body.overlay.is-min .glass {
  display: none;
}

body.overlay.is-min .dock {
  flex: 1;
  height: 46px;
  border-radius: 0;
  box-shadow: none;
  background: #1a120c;
}

body.overlay.is-min .dock-close {
  flex: 0 0 auto;
  height: 46px;
  border-radius: 0;
  box-shadow: inset 1px 0 0 rgba(255, 196, 110, 0.28);
}


































.halloween-decor {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

body[data-skin="halloween"] .halloween-decor {
  display: block;
}

.hw {
  position: absolute;
  overflow: visible;
}

.hw.bat {
  width: 44px;
  height: 22px;
  fill: #120804;
  opacity: 0.88;
  filter: drop-shadow(0 0 6px rgba(255, 100, 20, 0.45));
}

.hw-b1 {
  top: 44px;
  right: 20px;
  transform: rotate(-6deg);
  animation: hw-bat 3.8s ease-in-out infinite;
}

.hw-b2 {
  top: 38%;
  left: 4px;
  width: 34px;
  height: 17px;
  opacity: 0.72;
  animation: hw-bat 5.2s ease-in-out infinite reverse;
  animation-delay: -1.4s;
}

.hw-b3 {
  top: 118px;
  right: 8px;
  width: 30px;
  height: 15px;
  opacity: 0.65;
  animation: hw-bat 4.6s ease-in-out infinite;
  animation-delay: -2.8s;
}

.hw.pump {
  width: 38px;
  height: 34px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}

.hw .hw-rind { fill: #e06812; }
.hw .hw-stem { fill: #3a7a18; }
.hw .hw-ribs { stroke: #5a2408; }
.hw .hw-eye { fill: #ffe8a8; }
.hw .hw-grin { stroke: #2a1006; }

.hw-p1 {
  bottom: 52px;
  left: 10px;
  transform: rotate(-4deg);
}

.hw-p2 {
  bottom: 58px;
  right: 14px;
  width: 28px;
  height: 25px;
  opacity: 0.92;
  transform: rotate(6deg) scaleX(-1);
}

.hw-p2 .hw-eye,
.hw-p2 .hw-grin {
  display: none;
}

@keyframes hw-bat {
  0%, 100% { transform: translateY(0) rotate(var(--hw-tilt, -6deg)); }
  50% { transform: translateY(-5px) rotate(calc(var(--hw-tilt, -6deg) + 4deg)); }
}

.hw-b2 { --hw-tilt: 12deg; }
.hw-b3 { --hw-tilt: -14deg; }

@media (prefers-reduced-motion: reduce) {
  .hw.bat { animation: none; }
}









/* ==========================================================================
   Label contrast: every face label reads from these, and each theme sets its own.
   ========================================================================== */
:root {
  --label: #2e1608;
  --label-dim: #5a3a28;
  --brand: #2e1608;
  --scale: #5c4638;
  --plate-label: rgba(255, 238, 214, 0.95);
  --ctrl-label: rgba(255, 238, 214, 0.95);
}

.ctrl-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ctrl-label);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.group-label,
.tool-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--label);
}

.k-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--label);
}

.k-val,
.tool-readout,
.tools-grid .k-val {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--label-dim);
}

.face .f-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--label);
}

.face .f-scale {
  font-size: 9px;
  font-weight: 600;
  color: var(--label-dim);
}

.rocker span:last-child,
.skin-chip {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--label);
}

.silk {
  font-size: 11px;
  font-weight: 700;
  color: var(--label-dim);
}

.hiss-types button {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--label);
}
.hiss-types button.on { color: var(--amber); }

.brand strong { color: var(--brand); }
.brand em {
  font-size: 11px;
  font-weight: 700;
  color: var(--label-dim);
}

.meter span { color: #f0dcb8; font-weight: 700; }

.rail {
  font-size: 11px;
  font-weight: 700;
  color: var(--plate-label);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.knob-scale { background: conic-gradient(from 225deg, var(--scale) 0 270deg, transparent 270deg); }
.knob.bipolar .knob-scale::after { background: var(--scale); }

/* ==========================================================================
   Guide button + pop-up tutorial (lives inside the cabinet)
   ========================================================================== */
.face-help {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-btn {
  position: relative;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  padding: 7px 16px 7px 11px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f6ead8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  background: linear-gradient(110deg, #b86a58, #c4923a, #8a9a56, #4e8a86, #7a6a9a, #b86a58);
  background-size: 240% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 210, 0.28),
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 5px 12px rgba(80, 40, 20, 0.22);
  transform: rotate(-2.5deg);
  transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
  animation: guide-flow 14s linear infinite;
}
.guide-btn:hover { transform: rotate(2deg) scale(1.04); }
.guide-btn:active { transform: translateY(2px) scale(0.97); }
.guide-btn[aria-expanded="true"] { filter: saturate(1.12) brightness(1.04); }

.keys-btn {
  position: relative;
  border: 0;
  background: transparent;
  padding: 4px 3px 3px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label);
  transform: rotate(1.6deg);
}
.keys-btn:hover,
.keys-btn[aria-expanded="true"] {
  color: var(--brand, var(--label));
  transform: rotate(-1.2deg) scale(1.06);
}

.guide-spark {
  width: 16px;
  height: 16px;
  background: #f3e6d0;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
  opacity: 0.82;
  animation: guide-spin 8s linear infinite;
}

@keyframes guide-flow { to { background-position: 300% 0; } }
@keyframes guide-spin { to { transform: rotate(360deg); } }
@keyframes guide-pop {
  from { opacity: 0; transform: scale(0.92) translateY(14px); }
  to { opacity: 1; transform: none; }
}

.guide {
  position: absolute;
  inset: 10px;
  z-index: 30;
  overflow: auto;
  border-radius: 14px;
  padding: 18px 20px 16px;
  color: #f6ecff;
  background:
    radial-gradient(ellipse 60% 28% at 12% 0%, rgba(255, 45, 149, 0.34), transparent 70%),
    radial-gradient(ellipse 50% 30% at 92% 4%, rgba(45, 183, 255, 0.28), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
    linear-gradient(165deg, #1d0838, #0b0418 58%, #16062c);
  box-shadow:
    inset 0 0 0 2px #ff2d95,
    inset 0 0 0 5px rgba(255, 255, 255, 0.1),
    0 0 26px rgba(255, 45, 149, 0.55),
    0 20px 50px rgba(0, 0, 0, 0.6);
  animation: guide-pop 0.3s cubic-bezier(0.2, 1.35, 0.4, 1) both;
  scrollbar-width: thin;
  scrollbar-color: #ff2d95 transparent;
}
.guide[hidden] { display: none; }

.guide-head { text-align: center; margin-bottom: 14px; }

.guide-kicker {
  display: inline-block;
  padding: 4px 12px;
  background: #ffe600;
  color: #16062c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 #ff2d95;
}

.guide h2 {
  margin: 10px 0 4px;
  font-size: 48px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 3px 3px 0 #ff2d95, 6px 6px 0 rgba(45, 183, 255, 0.7);
}
.guide h2 em {
  font-style: italic;
  background: linear-gradient(90deg, #ffe600, #2dff9b, #2db7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(3px 3px 0 #ff2d95);
}
.guide-head p {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #d9c6f5;
}

.guide-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.guide-card {
  --c: hsl(calc(var(--n) * 41 + 320) 95% 62%);
  position: relative;
  padding: 10px 12px 11px 15px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 5px 0 0 var(--c), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: rotate(calc((var(--n) - 7.5) * 0.12deg));
  transition: transform 0.16s ease, background 0.16s ease;
}
.guide-card:hover { transform: rotate(0deg) scale(1.03); background: rgba(255, 255, 255, 0.13); }
.guide-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }

.guide-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c);
  color: #16062c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.guide-card h3 {
  margin: 6px 0 3px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.guide-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.36;
  color: #e8dcf8;
}

.guide-close {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #16062c;
  background: linear-gradient(100deg, #ffe600, #ff8a00 45%, #ff2d95);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), 0 10px 22px rgba(255, 45, 149, 0.4);
  transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.guide-close:hover { transform: scale(1.03) rotate(-0.6deg); }
.guide-close:active { transform: translateY(3px); }

.guide.tour {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  pointer-events: none;
}
.guide.tour[hidden] { display: none; }

:root,
body[data-skin="walnut"] {
  --tour-paper: #f3e6d0;
  --tour-paper2: #dcc8a6;
  --tour-blush: rgba(255, 184, 74, 0.28);
  --tour-ink: #3a2b22;
  --tour-muted: #5c4636;
  --tour-line: #6b452c;
  --tour-pop: #ffb84a;
  --tour-pop-ink: #2a1a10;
  --tour-glow: rgba(255, 176, 74, 0.45);
  --tour-dim: rgba(18, 10, 6, 0.58);
}
body[data-skin="ebony"] {
  --tour-paper: #2a2118;
  --tour-paper2: #16110c;
  --tour-blush: rgba(198, 165, 122, 0.22);
  --tour-ink: #f3e6d0;
  --tour-muted: #cbb69a;
  --tour-line: #c6a57a;
  --tour-pop: #c6a57a;
  --tour-pop-ink: #1a120c;
  --tour-glow: rgba(198, 165, 122, 0.45);
  --tour-dim: rgba(8, 6, 4, 0.62);
}
body[data-skin="halloween"] {
  --tour-paper: #1a0c08;
  --tour-paper2: #120804;
  --tour-blush: rgba(255, 106, 0, 0.28);
  --tour-ink: #ffe8c4;
  --tour-muted: #f0c48a;
  --tour-line: #ff6a00;
  --tour-pop: #ff7a12;
  --tour-pop-ink: #120804;
  --tour-glow: rgba(255, 110, 0, 0.5);
  --tour-dim: rgba(10, 4, 2, 0.64);
}
body[data-skin="reggae"] {
  --tour-paper: #efe4d0;
  --tour-paper2: #d8c4a4;
  --tour-blush: rgba(74, 122, 76, 0.22);
  --tour-ink: #17110b;
  --tour-muted: #4a3a28;
  --tour-line: #4a7a4c;
  --tour-pop: #c9a23a;
  --tour-pop-ink: #17110b;
  --tour-glow: rgba(201, 162, 58, 0.4);
  --tour-dim: rgba(16, 12, 8, 0.56);
}
body[data-skin="ashbury"] {
  --tour-paper: #fff6df;
  --tour-paper2: #f0dcc0;
  --tour-blush: rgba(255, 45, 149, 0.22);
  --tour-ink: #1a0c28;
  --tour-muted: #4a2458;
  --tour-line: #ff2d95;
  --tour-pop: #ffe600;
  --tour-pop-ink: #1a0c28;
  --tour-glow: rgba(255, 45, 149, 0.45);
  --tour-dim: rgba(20, 0, 40, 0.55);
}
body[data-skin="synthwave"] {
  --tour-paper: #2a0a48;
  --tour-paper2: #10061c;
  --tour-blush: rgba(255, 45, 149, 0.4);
  --tour-ink: #f6ecff;
  --tour-muted: #ead8ff;
  --tour-line: #ff2d95;
  --tour-pop: #ffe600;
  --tour-pop-ink: #16062c;
  --tour-glow: rgba(255, 45, 149, 0.7);
  --tour-dim: rgba(8, 3, 16, 0.62);
}
body[data-skin="papaya"] {
  --tour-paper: #ffe4c8;
  --tour-paper2: #f0c49a;
  --tour-blush: rgba(232, 106, 60, 0.22);
  --tour-ink: #3a1c10;
  --tour-muted: #6a3824;
  --tour-line: #c44a28;
  --tour-pop: #e86a3c;
  --tour-pop-ink: #2a1008;
  --tour-glow: rgba(232, 106, 60, 0.4);
  --tour-dim: rgba(30, 12, 6, 0.55);
}
body[data-skin="avocado"] {
  --tour-paper: #e8efd4;
  --tour-paper2: #c8d4a4;
  --tour-blush: rgba(90, 122, 50, 0.2);
  --tour-ink: #243014;
  --tour-muted: #3e4e24;
  --tour-line: #5a7a32;
  --tour-pop: #8aaa44;
  --tour-pop-ink: #1a220c;
  --tour-glow: rgba(90, 122, 50, 0.4);
  --tour-dim: rgba(12, 16, 8, 0.55);
}
body[data-skin="lagoon"] {
  --tour-paper: #d4eef0;
  --tour-paper2: #b0d4d8;
  --tour-blush: rgba(26, 106, 120, 0.2);
  --tour-ink: #0e2c32;
  --tour-muted: #245058;
  --tour-line: #1a6a78;
  --tour-pop: #3aa8b4;
  --tour-pop-ink: #082024;
  --tour-glow: rgba(58, 168, 180, 0.4);
  --tour-dim: rgba(6, 16, 20, 0.55);
}
body[data-skin="mpc"] {
  --tour-paper: #e8e6df;
  --tour-paper2: #d4d0c6;
  --tour-blush: rgba(44, 64, 117, 0.18);
  --tour-ink: #232326;
  --tour-muted: #3a3d44;
  --tour-line: #c8352a;
  --tour-pop: #2c4075;
  --tour-pop-ink: #dfe7ff;
  --tour-glow: rgba(44, 64, 117, 0.4);
  --tour-dim: rgba(12, 12, 14, 0.55);
}
body[data-skin="sp404"] {
  --tour-paper: #2a2a28;
  --tour-paper2: #161614;
  --tour-blush: rgba(255, 179, 71, 0.18);
  --tour-ink: #f4ead8;
  --tour-muted: #d8c8a8;
  --tour-line: #111;
  --tour-pop: #ffb347;
  --tour-pop-ink: #1a1208;
  --tour-glow: rgba(255, 160, 40, 0.45);
  --tour-dim: rgba(6, 6, 5, 0.64);
}

.tour-spot {
  position: fixed;
  z-index: 41;
  pointer-events: none;
  border-radius: 14px;
  border: 3px solid var(--tour-pop);
  box-shadow:
    0 0 0 9999px var(--tour-dim),
    0 0 0 6px var(--tour-line),
    0 0 28px var(--tour-glow);
  transition: top 0.32s cubic-bezier(0.3, 1.35, 0.4, 1), left 0.32s cubic-bezier(0.3, 1.35, 0.4, 1), width 0.32s cubic-bezier(0.3, 1.35, 0.4, 1), height 0.32s cubic-bezier(0.3, 1.35, 0.4, 1);
}

.tour-card {
  position: fixed;
  z-index: 42;
  width: min(340px, calc(100vw - 28px));
  padding: 16px 18px 14px;
  pointer-events: auto;
  color: var(--tour-ink);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 70% 40% at 12% 0%, var(--tour-blush), transparent 70%),
    linear-gradient(165deg, var(--tour-paper), var(--tour-paper2));
  box-shadow:
    inset 0 0 0 2px var(--tour-line),
    inset 0 0 0 5px rgba(255, 255, 255, 0.16),
    6px 8px 0 var(--tour-pop),
    0 22px 40px rgba(0, 0, 0, 0.45);
  transform: rotate(-1.4deg);
  animation: guide-pop 0.28s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}
.tour-card .guide-kicker {
  margin-bottom: 6px;
  background: var(--tour-pop);
  color: var(--tour-pop-ink);
  box-shadow: 3px 3px 0 var(--tour-line);
}
.guide.tour .tour-card h2 {
  margin: 8px 0 6px;
  font-size: 26px;
  line-height: 1.05;
  color: var(--tour-ink);
  text-shadow: none;
  letter-spacing: 0.04em;
}
.guide.tour .tour-card h2 em {
  background: none;
  color: inherit;
  filter: none;
}
.tour-card #tour-copy {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tour-muted);
  letter-spacing: 0.02em;
}
.tour-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  min-height: 0;
}
.tour-keys:empty { display: none; }
.tour-keys kbd {
  display: inline-block;
  padding: 3px 7px 2px;
  border-radius: 5px;
  font: 800 11px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tour-pop-ink);
  background: var(--tour-pop);
  box-shadow: 2px 2px 0 var(--tour-line);
}

#hw-tip {
  position: absolute;
  z-index: 8;
  width: max-content;
  max-width: 228px;
  padding: 8px 10px 9px;
  pointer-events: none;
  color: var(--tour-ink);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, var(--tour-blush), transparent 70%),
    linear-gradient(165deg, var(--tour-paper), var(--tour-paper2));
  box-shadow:
    inset 0 0 0 1.5px var(--tour-line),
    inset 0 0 0 4px rgba(255, 255, 255, 0.16),
    4px 5px 0 var(--tour-pop),
    0 12px 22px rgba(0, 0, 0, 0.38);
  transform: rotate(-1.4deg);
  transform-origin: 18% 100%;
  animation: hw-tip-pop 0.22s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}
@keyframes hw-tip-pop {
  from { opacity: 0; transform: rotate(-1.4deg) scale(0.94) translateY(8px); }
  to { opacity: 1; transform: rotate(-1.4deg); }
}
#hw-tip[hidden] { display: none; }
#hw-tip .hw-kicker {
  display: inline-block;
  margin: 0 0 4px;
  padding: 2px 7px 1px;
  border-radius: 4px;
  background: var(--tour-pop);
  color: var(--tour-pop-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--tour-line);
}
#hw-tip .hw-kicker[hidden] { display: none; }
#hw-tip strong {
  display: block;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--tour-ink);
}
#hw-tip p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--tour-muted);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#hw-tip p[hidden] { display: none; }
#hw-tip .hw-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
#hw-tip .hw-keys:empty { display: none; }
#hw-tip .hw-keys kbd {
  display: inline-block;
  padding: 2px 6px 1px;
  border-radius: 4px;
  font: 800 10px/1.2 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tour-pop-ink);
  background: var(--tour-pop);
  box-shadow: 2px 2px 0 var(--tour-line);
}
.tour-nav {
  display: grid;
  grid-template-columns: 1fr auto 1.4fr;
  gap: 8px;
}
.tour-nav button {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 10px 8px;
}
#tour-back {
  color: var(--tour-ink);
  background: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
#tour-back:disabled { opacity: 0.35; cursor: default; }
.tour-skip {
  color: var(--tour-muted);
  background: transparent;
}
.tour-nav .guide-close {
  width: auto;
  margin: 0;
  padding: 10px 8px;
  font-size: 13px;
  color: var(--tour-pop-ink);
  background: var(--tour-pop);
  box-shadow: 0 4px 0 var(--tour-line), 0 8px 16px rgba(0, 0, 0, 0.25);
}

.key-flash {
  outline: 2px solid rgba(255, 230, 0, 0.85);
  outline-offset: 3px;
}

.keys-sheet {
  position: fixed;
  z-index: 45;
  width: min(488px, calc(100vw - 24px));
  padding: 14px 16px 13px;
  pointer-events: auto;
  color: var(--tour-ink);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 40% at 12% 0%, var(--tour-blush), transparent 70%),
    linear-gradient(165deg, var(--tour-paper), var(--tour-paper2));
  box-shadow:
    inset 0 0 0 2px var(--tour-line),
    inset 0 0 0 5px rgba(255, 255, 255, 0.16),
    5px 7px 0 var(--tour-pop),
    0 20px 36px rgba(0, 0, 0, 0.45);
  transform: rotate(-0.8deg);
  animation: keys-pop 0.22s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}
@keyframes keys-pop {
  from { opacity: 0; transform: rotate(-0.8deg) scale(0.94) translateY(10px); }
  to { opacity: 1; transform: rotate(-0.8deg); }
}
.keys-sheet[hidden] { display: none; }
body[data-skin="mpc"] .keys-sheet,
body[data-skin="sp404"] .keys-sheet { width: min(560px, calc(100vw - 24px)); }

.keys-kicker {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tour-pop);
  color: var(--tour-pop-ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--tour-line);
}
.keys-note {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tour-muted);
}
.keys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.keys-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.keys-sheet h3 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tour-muted);
}
.keys-sheet dl {
  display: grid;
  gap: 4px;
  margin: 0;
}
.keys-sheet dl > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}
.keys-sheet dt {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}
.keys-sheet dd {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.keys-sheet kbd {
  display: inline-block;
  padding: 3px 6px 2px;
  border-radius: 5px;
  font: 800 10px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tour-pop-ink);
  background: var(--tour-pop);
  box-shadow: 2px 2px 0 var(--tour-line);
}
.keys-pads {
  margin: 0 0 8px;
  font: 800 12px/1.45 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.14em;
  color: var(--tour-ink);
}
.keys-for-machine { display: none; }
body[data-skin="mpc"] .keys-for-machine,
body[data-skin="sp404"] .keys-for-machine { display: block; }
body[data-skin="mpc"] .keys-for-vinyl,
body[data-skin="sp404"] .keys-for-vinyl { display: none; }

@media (prefers-reduced-motion: reduce) {
  .guide-btn, .guide-spark, .guide, .tour-card, .tour-spot, .keys-sheet { animation: none; transition: none; }
}

/* ==========================================================================
   Theme: Synthwave (night drive: indigo, hot pink, cyan, sun-gradient label)
   ========================================================================== */
body[data-skin="synthwave"] {
  --label: #5ef2ff;
  --label-dim: #d2b3ff;
  --brand: #ff5ce0;
  --scale: #ff5ce0;
  --plate-label: rgba(255, 220, 250, 0.96);
  --ctrl-label: rgba(190, 250, 255, 0.98);
}

body[data-skin="synthwave"] {
  --den:
    radial-gradient(ellipse 55% 42% at 16% 0%, rgba(255, 60, 200, 0.3), transparent 60%),
    radial-gradient(ellipse 50% 36% at 90% 100%, rgba(40, 220, 255, 0.2), transparent 60%),
    linear-gradient(180deg, #170a38 0%, #05010f 72%);
}

body[data-skin="synthwave"] .lamp {
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 70, 210, 0.34), transparent 62%);
}

body[data-skin="synthwave"] .cabinet::before {
  background:
    repeating-linear-gradient(0deg, rgba(94, 242, 255, 0.12) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255, 92, 224, 0.12) 0 1px, transparent 1px 26px),
    radial-gradient(ellipse at 50% 100%, rgba(255, 92, 224, 0.5), transparent 55%),
    linear-gradient(180deg, #4a128a, #230a4d 45%, #0f0526);
  box-shadow:
    inset 0 0 0 2px #ff5ce0,
    inset 0 0 0 4px rgba(10, 2, 30, 0.9),
    inset 0 0 0 5px #5ef2ff,
    0 0 26px rgba(255, 92, 224, 0.55);
}

body[data-skin="synthwave"] .plinth::before {
  background:
    radial-gradient(ellipse at 50% 112%, rgba(255, 92, 224, 0.75), transparent 52%),
    repeating-linear-gradient(0deg, rgba(94, 242, 255, 0.34) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255, 92, 224, 0.3) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, #1b0a40, #0a0322);
  box-shadow: inset 0 0 0 1px rgba(94, 242, 255, 0.5);
}

body[data-skin="synthwave"] .face::before,
body[data-skin="synthwave"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 92, 224, 0.32), transparent 14%),
    repeating-linear-gradient(90deg, rgba(94, 242, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #26115a, #130738);
}
body[data-skin="synthwave"] .face {
  box-shadow: inset 0 0 0 1px rgba(94, 242, 255, 0.6), 0 0 20px rgba(255, 92, 224, 0.35), 0 8px 16px rgba(0, 0, 0, 0.4);
}

body[data-skin="synthwave"] .label {
  background:
    repeating-linear-gradient(180deg, transparent 0 7px, #1a0838 7px 10px) 0 56% / 100% 44% no-repeat,
    linear-gradient(180deg, #ffe14a 0%, #ff7a8a 52%, #ff2bd6 100%);
  box-shadow: inset 0 0 0 5px #1a0838, inset 0 0 0 7px #5ef2ff, 0 0 0 1px rgba(0, 0, 0, 0.5);
}
body[data-skin="synthwave"] .label-copy { color: #1a0838; }

body[data-skin="synthwave"] .hiss-types button { background: #2e1668; }
body[data-skin="synthwave"] .hiss-types button.on { background: #12062e; }
body[data-skin="synthwave"] .vfd span { color: #5ef2ff; text-shadow: 0 0 8px rgba(94, 242, 255, 0.85); }
body[data-skin="synthwave"] .vfd { box-shadow: inset 0 0 0 1px #5a2a9a, inset 0 8px 16px rgba(0, 0, 0, 0.5); }
body[data-skin="synthwave"] .swatch { background: linear-gradient(135deg, #ff2bd6, #5ef2ff); }
body[data-skin="synthwave"] .silk { font-size: 0; }
body[data-skin="synthwave"] .silk::after { content: "Neon · chrome · night drive"; font-size: 11px; }

/* ==========================================================================
   Theme: Kingston (a 70s Kingston front room: painted plank house, teak deck, mahogany veneer)
   ========================================================================== */
body[data-skin="reggae"] {
  --label: #2a1c10;
  --label-dim: #4a3420;
  --brand: #d4553f;
  --scale: #d9b75a;
  --plate-label: #f6e7bd;
  --ctrl-label: #2a1c10;
  --tape-tpa: url("data:image/svg+xml,%3Csvg%20viewBox%3D%22-8%20-8%20164%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20focusable%3D%22false%22%3E%3Cdefs%3E%3Cpath%20id%3D%22stpa%22%20d%3D%22M-1.1%200.3L12.3%201.7L24.6%200.6L38.0%200.8L49.5%201.9L62.2%200.4L74.5%202.0L87.1%20-0.8L99.7%201.3L111.5%201.3L122.7%200.7L136.6%201.3L147.1%202.0L148.0%207.8L149.1%2015.0L147.4%2021.9L149.1%2028.6L149.8%2037.0L147.5%2044.8L135.1%2042.5L122.3%2042.4L110.1%2043.2L99.0%2044.4L86.7%2041.8L74.7%2044.9L61.4%2043.8L49.9%2043.9L36.0%2043.3L24.3%2044.1L11.8%2044.2L0.3%2045.0L-1.6%2036.7L1.3%2029.9L-1.6%2022.0L0.1%2014.4L-0.4%207.7Z%22%2F%3E%3CclipPath%20id%3D%22cltpa%22%3E%3Cuse%20href%3D%22%23stpa%22%2F%3E%3C%2FclipPath%3E%3Cfilter%20id%3D%22rotpa%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.07%22%20numOctaves%3D%222%22%20seed%3D%2221%22%20result%3D%22n%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%221.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22sptpa%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.55%22%20numOctaves%3D%222%22%20seed%3D%2224%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%2013%200%200%200%20-9.7%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22fdtpa%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.05%22%20numOctaves%3D%223%22%20seed%3D%2230%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%205%200%200%200%20-3.0%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22fwtpa%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.05%22%20numOctaves%3D%223%22%20seed%3D%2230%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%20.94%200%200%200%200%20.92%200%200%200%200%20.86%204%200%200%200%20-2.5%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22grtpa%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.03%20.09%22%20numOctaves%3D%223%22%20seed%3D%2242%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%20.25%200%200%200%200%20.18%200%200%200%200%20.08%201.7%200%200%200%20-.85%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22bltpa%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22gltpa%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.3%22%2F%3E%3Cstop%20offset%3D%22.4%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.04%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.2%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22mAtpa%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20filter%3D%22url%28%23sptpa%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20opacity%3D%220.24%22%20filter%3D%22url%28%23fdtpa%29%22%2F%3E%3Cpolygon%20points%3D%22140%2C-4%20148%2C8%20132%2C10%22%20fill%3D%22%23000%22%2F%3E%3C%2Fmask%3E%3Cmask%20id%3D%22mBtpa%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20opacity%3D%22.55%22%20filter%3D%22url%28%23sptpa%29%22%2F%3E%3C%2Fmask%3E%3Cmask%20id%3D%22rmtpa%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%2F%3E%3C%2Fmask%3E%3Cpattern%20id%3D%22httpa%22%20width%3D%225%22%20height%3D%225%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate%2822%29%22%3E%3Ccircle%20cx%3D%222.5%22%20cy%3D%222.5%22%20r%3D%221.2%22%20fill%3D%22%2317120f%22%20opacity%3D%220.18%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url%28%23rotpa%29%22%3E%3Cg%20mask%3D%22url%28%23mBtpa%29%22%3E%3Cuse%20href%3D%22%23stpa%22%20fill%3D%22%23e7e0cd%22%20stroke%3D%22%23e7e0cd%22%20stroke-width%3D%224.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20mask%3D%22url%28%23mAtpa%29%22%3E%3Cuse%20href%3D%22%23stpa%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cg%20clip-path%3D%22url%28%23cltpa%29%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23efe2bf%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22url%28%23httpa%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-2%22%20width%3D%22164%22%20height%3D%225%22%20fill%3D%22%23fff%22%20opacity%3D%22.18%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%2240%22%20width%3D%22164%22%20height%3D%226%22%20fill%3D%22%237a5320%22%20opacity%3D%22.12%22%2F%3E%3Cpath%20d%3D%22M0%2024.2H148%22%20stroke%3D%22%237a5320%22%20stroke-width%3D%220.6%22%20opacity%3D%22.18%22%2F%3E%3Cpath%20d%3D%22M4%203L142.0%2041.0%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220.5%22%20opacity%3D%22.16%22%2F%3E%3Cellipse%20cx%3D%2270%22%20cy%3D%22360%22%20rx%3D%2230%22%20ry%3D%2212%22%20fill%3D%22%235a3b12%22%20fill-opacity%3D%22.18%22%20filter%3D%22url%28%23bltpa%29%22%2F%3E%3Cellipse%20cx%3D%22460%22%20cy%3D%2280%22%20rx%3D%2224%22%20ry%3D%2210%22%20fill%3D%22%235a3b12%22%20fill-opacity%3D%22.16%22%20filter%3D%22url%28%23bltpa%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20opacity%3D%22.38%22%20filter%3D%22url%28%23grtpa%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20filter%3D%22url%28%23fwtpa%29%22%20opacity%3D%22.42%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22url%28%23gltpa%29%22%2F%3E%3Cpath%20d%3D%22M48%2070l16%20-6%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.4%22%2F%3E%3Cpath%20d%3D%22M430%2060l14%206%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.36%22%2F%3E%3Cpath%20d%3D%22M90%20360l18%204%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.32%22%2F%3E%3Cpath%20d%3D%22M400%20180l-10%208%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.38%22%2F%3E%3C%2Fg%3E%3Cg%20clip-path%3D%22url%28%23cltpa%29%22%3E%3Cg%20mask%3D%22url%28%23rmtpa%29%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23f4f1e6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --tape-tpb: url("data:image/svg+xml,%3Csvg%20viewBox%3D%22-8%20-8%20164%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20focusable%3D%22false%22%3E%3Cdefs%3E%3Cpath%20id%3D%22stpb%22%20d%3D%22M0.8%201.7L11.8%200.9L25.0%201.6L36.0%202.1L50.0%20-0.0L61.6%20-0.7L73.0%201.1L85.7%20-0.7L99.0%201.4L110.6%20-1.0L123.1%201.2L135.0%200.3L147.2%200.3L147.0%207.1L147.1%2015.4L147.2%2021.8L149.6%2028.7L148.7%2037.3L147.7%2043.5L135.3%2042.6L124.0%2045.1L110.8%2042.9L98.0%2043.8L87.2%2044.8L74.6%2043.0L61.8%2044.4L49.6%2045.2L38.0%2042.6L25.1%2043.1L12.9%2041.9L-0.4%2044.7L-0.6%2037.4L-0.6%2028.8L-0.5%2021.8L-0.9%2014.8L0.7%206.8Z%22%2F%3E%3CclipPath%20id%3D%22cltpb%22%3E%3Cuse%20href%3D%22%23stpb%22%2F%3E%3C%2FclipPath%3E%3Cfilter%20id%3D%22rotpb%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.07%22%20numOctaves%3D%222%22%20seed%3D%2244%22%20result%3D%22n%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%221.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22sptpb%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.55%22%20numOctaves%3D%222%22%20seed%3D%2247%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%2013%200%200%200%20-9.7%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22fdtpb%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.05%22%20numOctaves%3D%223%22%20seed%3D%2253%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%205%200%200%200%20-3.0%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22fwtpb%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.05%22%20numOctaves%3D%223%22%20seed%3D%2253%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%20.94%200%200%200%200%20.92%200%200%200%200%20.86%204%200%200%200%20-2.5%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22grtpb%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.03%20.09%22%20numOctaves%3D%223%22%20seed%3D%2265%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%20.25%200%200%200%200%20.18%200%200%200%200%20.08%201.7%200%200%200%20-.85%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22bltpb%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22gltpb%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.3%22%2F%3E%3Cstop%20offset%3D%22.4%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.04%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.2%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22mAtpb%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20filter%3D%22url%28%23sptpb%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20opacity%3D%220.24%22%20filter%3D%22url%28%23fdtpb%29%22%2F%3E%3Cpolygon%20points%3D%22-4%2C20%2012%2C48%20-8%2C44%22%20fill%3D%22%23000%22%2F%3E%3C%2Fmask%3E%3Cmask%20id%3D%22mBtpb%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20opacity%3D%22.55%22%20filter%3D%22url%28%23sptpb%29%22%2F%3E%3C%2Fmask%3E%3Cmask%20id%3D%22rmtpb%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%2F%3E%3C%2Fmask%3E%3Cpattern%20id%3D%22httpb%22%20width%3D%225%22%20height%3D%225%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate%2822%29%22%3E%3Ccircle%20cx%3D%222.5%22%20cy%3D%222.5%22%20r%3D%221.2%22%20fill%3D%22%2317120f%22%20opacity%3D%220.18%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url%28%23rotpb%29%22%3E%3Cg%20mask%3D%22url%28%23mBtpb%29%22%3E%3Cuse%20href%3D%22%23stpb%22%20fill%3D%22%23e7e0cd%22%20stroke%3D%22%23e7e0cd%22%20stroke-width%3D%224.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20mask%3D%22url%28%23mAtpb%29%22%3E%3Cuse%20href%3D%22%23stpb%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cg%20clip-path%3D%22url%28%23cltpb%29%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23e6c98a%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22url%28%23httpb%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-2%22%20width%3D%22164%22%20height%3D%225%22%20fill%3D%22%23fff%22%20opacity%3D%22.18%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%2240%22%20width%3D%22164%22%20height%3D%226%22%20fill%3D%22%237a5320%22%20opacity%3D%22.12%22%2F%3E%3Cpath%20d%3D%22M0%2024.2H148%22%20stroke%3D%22%237a5320%22%20stroke-width%3D%220.6%22%20opacity%3D%22.18%22%2F%3E%3Cpath%20d%3D%22M4%203L142.0%2041.0%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220.5%22%20opacity%3D%22.16%22%2F%3E%3Cellipse%20cx%3D%2270%22%20cy%3D%22360%22%20rx%3D%2230%22%20ry%3D%2212%22%20fill%3D%22%235a3b12%22%20fill-opacity%3D%22.18%22%20filter%3D%22url%28%23bltpb%29%22%2F%3E%3Cellipse%20cx%3D%22460%22%20cy%3D%2280%22%20rx%3D%2224%22%20ry%3D%2210%22%20fill%3D%22%235a3b12%22%20fill-opacity%3D%22.16%22%20filter%3D%22url%28%23bltpb%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20opacity%3D%22.38%22%20filter%3D%22url%28%23grtpb%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20filter%3D%22url%28%23fwtpb%29%22%20opacity%3D%22.42%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22url%28%23gltpb%29%22%2F%3E%3Cpath%20d%3D%22M48%2070l16%20-6%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.4%22%2F%3E%3Cpath%20d%3D%22M430%2060l14%206%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.36%22%2F%3E%3Cpath%20d%3D%22M90%20360l18%204%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.32%22%2F%3E%3Cpath%20d%3D%22M400%20180l-10%208%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.38%22%2F%3E%3C%2Fg%3E%3Cg%20clip-path%3D%22url%28%23cltpb%29%22%3E%3Cg%20mask%3D%22url%28%23rmtpb%29%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23f4f1e6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --tape-tpc: url("data:image/svg+xml,%3Csvg%20viewBox%3D%22-8%20-8%20164%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20focusable%3D%22false%22%3E%3Cdefs%3E%3Cpath%20id%3D%22stpc%22%20d%3D%22M0.5%20-0.3L12.7%200.1L25.4%20-0.8L37.0%200.1L50.4%200.2L62.4%20-0.7L75.1%20-0.9L86.5%20-0.6L98.3%20-0.8L110.5%200.2L123.5%200.6L135.6%200.4L148.1%200.8L149.7%208.1L147.5%2014.6L148.4%2022.7L148.8%2028.8L148.9%2036.1L148.0%2042.3L135.5%2045.0L123.5%2044.2L111.5%2042.6L99.2%2042.0L85.5%2042.9L73.1%2044.7L62.1%2045.0L50.1%2044.2L36.5%2042.0L23.8%2042.1L13.1%2044.5L-1.0%2043.1L-1.9%2036.4L-0.2%2029.3L0.7%2021.6L-1.9%2015.2L-1.9%207.4Z%22%2F%3E%3CclipPath%20id%3D%22cltpc%22%3E%3Cuse%20href%3D%22%23stpc%22%2F%3E%3C%2FclipPath%3E%3Cfilter%20id%3D%22rotpc%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.07%22%20numOctaves%3D%222%22%20seed%3D%2267%22%20result%3D%22n%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%221.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22sptpc%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.55%22%20numOctaves%3D%222%22%20seed%3D%2270%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%2013%200%200%200%20-9.7%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22fdtpc%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.05%22%20numOctaves%3D%223%22%20seed%3D%2276%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%205%200%200%200%20-3.0%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22fwtpc%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.05%22%20numOctaves%3D%223%22%20seed%3D%2276%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%20.94%200%200%200%200%20.92%200%200%200%200%20.86%204%200%200%200%20-2.5%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22grtpc%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.03%20.09%22%20numOctaves%3D%223%22%20seed%3D%2288%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%20.25%200%200%200%200%20.18%200%200%200%200%20.08%201.7%200%200%200%20-.85%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22bltpc%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22gltpc%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.3%22%2F%3E%3Cstop%20offset%3D%22.4%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.04%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.2%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22mAtpc%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20filter%3D%22url%28%23sptpc%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20opacity%3D%220.24%22%20filter%3D%22url%28%23fdtpc%29%22%2F%3E%3Cpolygon%20points%3D%228%2C-2%200%2C10%2018%2C8%22%20fill%3D%22%23000%22%2F%3E%3C%2Fmask%3E%3Cmask%20id%3D%22mBtpc%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20opacity%3D%22.55%22%20filter%3D%22url%28%23sptpc%29%22%2F%3E%3C%2Fmask%3E%3Cmask%20id%3D%22rmtpc%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%2F%3E%3C%2Fmask%3E%3Cpattern%20id%3D%22httpc%22%20width%3D%225%22%20height%3D%225%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate%2822%29%22%3E%3Ccircle%20cx%3D%222.5%22%20cy%3D%222.5%22%20r%3D%221.2%22%20fill%3D%22%2317120f%22%20opacity%3D%220.18%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url%28%23rotpc%29%22%3E%3Cg%20mask%3D%22url%28%23mBtpc%29%22%3E%3Cuse%20href%3D%22%23stpc%22%20fill%3D%22%23e7e0cd%22%20stroke%3D%22%23e7e0cd%22%20stroke-width%3D%224.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20mask%3D%22url%28%23mAtpc%29%22%3E%3Cuse%20href%3D%22%23stpc%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cg%20clip-path%3D%22url%28%23cltpc%29%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23d8bc86%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22url%28%23httpc%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-2%22%20width%3D%22164%22%20height%3D%225%22%20fill%3D%22%23fff%22%20opacity%3D%22.18%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%2240%22%20width%3D%22164%22%20height%3D%226%22%20fill%3D%22%237a5320%22%20opacity%3D%22.12%22%2F%3E%3Cpath%20d%3D%22M0%2024.2H148%22%20stroke%3D%22%237a5320%22%20stroke-width%3D%220.6%22%20opacity%3D%22.18%22%2F%3E%3Cpath%20d%3D%22M4%203L142.0%2041.0%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220.5%22%20opacity%3D%22.16%22%2F%3E%3Cellipse%20cx%3D%2270%22%20cy%3D%22360%22%20rx%3D%2230%22%20ry%3D%2212%22%20fill%3D%22%235a3b12%22%20fill-opacity%3D%22.18%22%20filter%3D%22url%28%23bltpc%29%22%2F%3E%3Cellipse%20cx%3D%22460%22%20cy%3D%2280%22%20rx%3D%2224%22%20ry%3D%2210%22%20fill%3D%22%235a3b12%22%20fill-opacity%3D%22.16%22%20filter%3D%22url%28%23bltpc%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20opacity%3D%22.38%22%20filter%3D%22url%28%23grtpc%29%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23000%22%20filter%3D%22url%28%23fwtpc%29%22%20opacity%3D%22.42%22%2F%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22url%28%23gltpc%29%22%2F%3E%3Cpath%20d%3D%22M48%2070l16%20-6%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.4%22%2F%3E%3Cpath%20d%3D%22M430%2060l14%206%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.36%22%2F%3E%3Cpath%20d%3D%22M90%20360l18%204%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.32%22%2F%3E%3Cpath%20d%3D%22M400%20180l-10%208%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.38%22%2F%3E%3C%2Fg%3E%3Cg%20clip-path%3D%22url%28%23cltpc%29%22%3E%3Cg%20mask%3D%22url%28%23rmtpc%29%22%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%22164%22%20height%3D%2260%22%20fill%3D%22%23f4f1e6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --tape-paper: var(--tape-tpa);
}

/* the room: the same den, held on the jungle and the crates */
body[data-skin="reggae"] {
  --den:
    linear-gradient(180deg, rgba(8, 5, 3, 0.05) 0%, rgba(8, 5, 3, 0.12) 70%, rgba(8, 5, 3, 0.4)),
    url("reggae-den.jpg") center top / cover no-repeat,
    #110d0a;
}
body[data-skin="reggae"] .lamp {
  background: radial-gradient(ellipse at 28% 18%, rgba(255, 196, 110, 0.16), transparent 62%);
}

/* painted house: one third green, one third gold, one third mellow brick */
body[data-skin="reggae"] .cabinet::before {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%'%20height='100%'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.03'%20numOctaves='3'%20seed='17'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.5%20-0.21'/%3E%3C/filter%3E%3Crect%20width='100%'%20height='100%'%20filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%'%20height='100%'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.06'%20numOctaves='2'%20seed='13'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.2%200%200%200%200%200.11%200%200%200%200%200.05%200%200%200%204.5%20-2.8'/%3E%3C/filter%3E%3Crect%20width='100%'%20height='100%'%20filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%'%20height='100%'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.25%200.004'%20numOctaves='3'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.1%200%200%200%200%200.05%200%200%200%200%200.02%200%200%200%200.28%20-0.10'/%3E%3C/filter%3E%3Crect%20width='100%'%20height='100%'%20filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, transparent 0 57px, rgba(0, 0, 0, 0.42) 57px 59px, rgba(255, 235, 190, 0.07) 59px 60px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 60px, rgba(0, 0, 0, 0.06) 60px 120px, rgba(255, 255, 255, 0.0) 120px 180px),
    linear-gradient(180deg, rgba(255, 244, 214, 0.1), transparent 30%),
    linear-gradient(180deg, #4a7a4c 0 33.33%, #c9a23a 33.33% 66.66%, #8a5348 66.66% 100%);
  background-size: 200px 200px, 200px 200px, 240px 240px, auto, auto, auto, auto;
  box-shadow: inset 0 0 0 2px rgba(20, 10, 4, 0.6), inset 0 0 26px rgba(40, 20, 6, 0.28);
}

/* the deck: listening-room painting, held on the jungle and the crates, rug cropped */
body[data-skin="reggae"] .plinth {
  background-color: #140e0a;
  background-image: url("reggae-den.jpg");
  background-repeat: no-repeat;
  background-size: 108% auto;
  background-position: center top;
}
body[data-skin="reggae"] .plinth::before {
  background: linear-gradient(180deg, rgba(18, 10, 6, 0.14), transparent 14%, transparent 76%, rgba(18, 10, 6, 0.3));
  box-shadow: inset 0 0 0 2px rgba(201, 162, 58, 0.45), inset 0 0 36px rgba(0, 0, 0, 0.22);
}
body[data-skin="reggae"] .plinth::after {
  content: none;
}

/* the receiver: lighter mahogany, brass edge, hand-painted pinstripe */
body[data-skin="reggae"] .face::before,
body[data-skin="reggae"] .drops::before {
  background:
    linear-gradient(180deg, #4a7a4c 0 1.5px, transparent 1.5px 3px, #c9a23a 3px 4.5px, transparent 4.5px 6px, #8a5348 6px 7.5px, transparent 7.5px) 0 5px / 100% 8px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%'%20height='100%'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.03'%20numOctaves='3'%20seed='17'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.5%20-0.21'/%3E%3C/filter%3E%3Crect%20width='100%'%20height='100%'%20filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='260'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%'%20height='100%'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.006%200.2'%20numOctaves='3'%20seed='5'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.1%200%200%200%200%200.05%200%200%200%200%200.02%200%200%200%200.28%20-0.1'/%3E%3C/filter%3E%3Crect%20width='100%'%20height='100%'%20filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='260'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%'%20height='100%'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.006%200.16'%20numOctaves='3'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%200%200%200%200%200.78%200%200%200%200%200.42%200%200%200%200.22%20-0.1'/%3E%3C/filter%3E%3Crect%20width='100%'%20height='100%'%20filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 196, 110, 0.1), transparent 24%),
    linear-gradient(180deg, #91765e, #745e46);
  background-size: 100% 8px, 200px 200px, 260px 260px, 260px 260px, auto, auto;
}
body[data-skin="reggae"] .face {
  box-shadow: inset 0 0 0 1px rgba(201, 162, 58, 0.45), 0 8px 16px rgba(0, 0, 0, 0.45);
}
body[data-skin="reggae"] .ctrl-name,
body[data-skin="reggae"] .rail {
  text-shadow: none;
}

body[data-skin="reggae"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a120c 0 7px, transparent 7.5px),
    linear-gradient(180deg, #3f7344 0 33.33%, #d6ad45 33.33% 66.66%, #8a5348 66.66% 100%);
  box-shadow: inset 0 0 0 5px #17110b, inset 0 0 0 7px #d6ad45, 0 0 0 1px rgba(0, 0, 0, 0.5);
}
body[data-skin="reggae"] .label-copy { color: #17110b; }
body[data-skin="reggae"] .label-copy .label-kicker,
body[data-skin="reggae"] .label-copy strong,
body[data-skin="reggae"] .label-copy em {
  text-shadow: 0 0 3px rgba(255, 244, 214, 0.45);
}

body[data-skin="reggae"] .vfd span { color: #a6d98f; text-shadow: 0 0 7px rgba(150, 210, 120, 0.55); }
body[data-skin="reggae"] .vfd { background: linear-gradient(180deg, #17110a, #0d0905); box-shadow: inset 0 0 0 1px #5a4320, inset 0 8px 16px rgba(0, 0, 0, 0.5); }
body[data-skin="reggae"] .swatch { background: linear-gradient(180deg, #4a7a4c 0 33.33%, #c9a23a 33.33% 66.66%, #8a5348 66.66%); }

/* ripped reel-to-reel splicing tape stuck over every faceplate word */
body[data-skin="reggae"] .group-label,
body[data-skin="reggae"] .tool-label,
body[data-skin="reggae"] .k-name,
body[data-skin="reggae"] .face .f-name,
body[data-skin="reggae"] .ctrl-name,
body[data-skin="reggae"] .brand em,
body[data-skin="reggae"] .rocker span:last-child,
body[data-skin="reggae"] .skin-chip #skin-name,
body[data-skin="reggae"] .hiss-types button,
body[data-skin="reggae"] .rail,
body[data-skin="reggae"] .keys-btn,
body[data-skin="reggae"] .silk::after {
  z-index: 0;
  color: #23150c;
  text-shadow: none;
  font-family: "Tape Hand", "Segoe Script", "Bradley Hand", cursive;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1;
}
body[data-skin="reggae"] .group-label,
body[data-skin="reggae"] .tool-label { font-size: 16px; }
body[data-skin="reggae"] .k-name,
body[data-skin="reggae"] .ctrl-name,
body[data-skin="reggae"] .brand em,
body[data-skin="reggae"] .rocker span:last-child,
body[data-skin="reggae"] .skin-chip #skin-name,
body[data-skin="reggae"] .hiss-types button,
body[data-skin="reggae"] .rail,
body[data-skin="reggae"] .keys-btn { font-size: 14px; }
body[data-skin="reggae"] .face .f-name { font-size: 13px; }
body[data-skin="reggae"] .group-label,
body[data-skin="reggae"] .tool-label,
body[data-skin="reggae"] .k-name,
body[data-skin="reggae"] .ctrl-name,
body[data-skin="reggae"] .brand em,
body[data-skin="reggae"] .rocker span:last-child,
body[data-skin="reggae"] .skin-chip #skin-name,
body[data-skin="reggae"] .hiss-types button,
body[data-skin="reggae"] .rail,
body[data-skin="reggae"] .keys-btn,
body[data-skin="reggae"] .silk::after {
  position: relative;
}
body[data-skin="reggae"] .group-label,
body[data-skin="reggae"] .tool-label,
body[data-skin="reggae"] .k-name,
body[data-skin="reggae"] .ctrl-name,
body[data-skin="reggae"] .brand em,
body[data-skin="reggae"] .rocker span:last-child,
body[data-skin="reggae"] .skin-chip #skin-name,
body[data-skin="reggae"] .silk::after {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 3px 11px 2px;
}
body[data-skin="reggae"] .face .f-name {
  padding: 2px 3px 1px;
}
body[data-skin="reggae"] .group-label::before,
body[data-skin="reggae"] .tool-label::before,
body[data-skin="reggae"] .k-name::before,
body[data-skin="reggae"] .face .f-name::before,
body[data-skin="reggae"] .ctrl-name::before,
body[data-skin="reggae"] .brand em::before,
body[data-skin="reggae"] .rocker span:last-child::before,
body[data-skin="reggae"] .skin-chip #skin-name::before,
body[data-skin="reggae"] .hiss-types button::before,
body[data-skin="reggae"] .keys-btn::before,
body[data-skin="reggae"] .rail::before {
  content: "";
  position: absolute;
  inset: -3px -7px;
  z-index: -1;
  background: var(--tape-paper) center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 0.6px rgba(0, 0, 0, 0.5)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
  transform: rotate(var(--tape-r, -1.2deg));
  pointer-events: none;
}
body[data-skin="reggae"] .silk { font-size: 0; }
body[data-skin="reggae"] .silk::after {
  content: "56 Hope Road · Kingston";
  font-size: 15px;
  background: var(--tape-tpb) center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 0.6px rgba(0, 0, 0, 0.5)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
  transform: rotate(1.1deg);
}
body[data-skin="reggae"] .rail {
  display: block;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 8px auto 0;
  padding: 4px 12px 3px;
}
body[data-skin="reggae"] .hiss-types {
  overflow: visible;
  box-shadow: none;
  gap: 8px;
  background: none;
}
body[data-skin="reggae"] .hiss-types button {
  background: none;
  box-shadow: none;
  overflow: visible;
}
body[data-skin="reggae"] .brand em {
  margin-left: 0;
  margin-right: auto;
}
body[data-skin="reggae"] .hiss-types button.on {
  color: #1a1008;
}
body[data-skin="reggae"] .hiss-types button.on::before {
  filter: brightness(0.78) saturate(1.15);
  box-shadow:
    inset 0 2px 3px rgba(40, 22, 6, 0.35),
    0 1px 0 rgba(255, 244, 214, 0.2);
}
body[data-skin="reggae"] .group:nth-child(1) .group-label::before { --tape-r: -1.6deg; }
body[data-skin="reggae"] .presets .group-label::before { --tape-r: 1.3deg; }
body[data-skin="reggae"] .group:nth-child(3) .group-label::before { --tape-r: -0.7deg; }
body[data-skin="reggae"] .group-faders .group-label::before { --tape-r: 1.5deg; }
body[data-skin="reggae"] .tool-cell:nth-child(1) .tool-label::before { --tape-r: -1.4deg; }
body[data-skin="reggae"] .tool-cell:nth-child(2) .tool-label::before { --tape-r: 1.1deg; }
body[data-skin="reggae"] .tool-cell:nth-child(3) .tool-label::before { --tape-r: -0.8deg; }
body[data-skin="reggae"] .knobs .knob:nth-child(1) .k-name::before { --tape-r: -1.8deg; }
body[data-skin="reggae"] .knobs .knob:nth-child(2) .k-name::before { --tape-r: 1.4deg; }
body[data-skin="reggae"] .knobs .knob:nth-child(3) .k-name::before { --tape-r: -0.6deg; }
body[data-skin="reggae"] .fader.drums .f-name::before { --tape-r: 1.6deg; }
body[data-skin="reggae"] .fader.master .f-name::before { --tape-r: -1.3deg; }
body[data-skin="reggae"] .rocker:nth-of-type(1) span:last-child::before { --tape-r: -1.5deg; }
body[data-skin="reggae"] .rocker:nth-of-type(2) span:last-child::before { --tape-r: 1.2deg; }
body[data-skin="reggae"] .rocker:nth-of-type(3) span:last-child::before { --tape-r: -0.9deg; }
body[data-skin="reggae"] .hiss-types button:nth-child(1)::before { --tape-r: -1.7deg; }
body[data-skin="reggae"] .hiss-types button:nth-child(2)::before { --tape-r: 0.8deg; }
body[data-skin="reggae"] .hiss-types button:nth-child(3)::before { --tape-r: -1.1deg; }
body[data-skin="reggae"] .ctrl-name::before { --tape-r: 1.8deg; }
body[data-skin="reggae"] .brand em::before { --tape-r: -0.8deg; }
body[data-skin="reggae"] .rail::before { --tape-r: -0.4deg; inset: -3px -10px; }
body[data-skin="reggae"] .keys-btn {
  padding: 3px 10px 2px;
}
body[data-skin="reggae"] .keys-btn::before { --tape-r: 1.4deg; }


body[data-skin="reggae"] .group-label::before,
body[data-skin="reggae"] .brand em::before,
body[data-skin="reggae"] .ctrl-name::before { --tape-paper: var(--tape-tpa); }
body[data-skin="reggae"] .tool-label::before,
body[data-skin="reggae"] .k-name::before,
body[data-skin="reggae"] .rocker span:last-child::before,
body[data-skin="reggae"] .keys-btn::before { --tape-paper: var(--tape-tpb); }
body[data-skin="reggae"] .face .f-name::before,
body[data-skin="reggae"] .hiss-types button::before,
body[data-skin="reggae"] .rail::before,
body[data-skin="reggae"] .skin-chip #skin-name::before { --tape-paper: var(--tape-tpc); }

body[data-skin="reggae"] .group,
body[data-skin="reggae"] .knob,
body[data-skin="reggae"] .fader,
body[data-skin="reggae"] .tool-cell { overflow: visible; }

/* ==========================================================================
   Hardware finishes shared by every theme: knob materials, meter bezels, feet.
   Each theme sets the --kn-* / --bezel-* / --foot-* variables on the body.
   ========================================================================== */
:root {
  /* knob skirt (the machined ring under the cap) */
  --kn-sk1: #f7f4ee;
  --kn-sk2: #b7b1a4;
  --kn-sk3: #7d776c;
  /* knob cap top face */
  --kn-top1: #4a4a4d;
  --kn-top2: #171718;
  --kn-top3: #060607;
  --kn-grip: rgba(255, 255, 255, 0.16);
  --kn-sheen: 0.22;
  --kn-ind: #f4efe4;
  --kn-glow: transparent;
  /* meter bezel + feet */
  --bezel-1: #cfc3ae;
  --bezel-2: #6d6254;
  --foot-1: #e6d2a8;
  --foot-2: #8a6a3e;
  --foot-3: #3a2a16;
}

.meter {
  box-shadow:
    inset 0 0 0 2px var(--bezel-1),
    inset 0 0 0 4px var(--bezel-2),
    0 2px 5px rgba(0, 0, 0, 0.3);
}
.feet i { background: radial-gradient(circle at 50% 0%, var(--foot-1), var(--foot-2) 60%, var(--foot-3)); }

/* ==========================================================================
   Theme: Walnut (the original hi-fi receiver: figured walnut, brass trim, champagne faceplate)
   ========================================================================== */
body[data-skin="walnut"] {
  --label: #2e1608;
  --label-dim: #5a3a28;
  --brand: #2e1608;
  --scale: #5c4638;
  --plate-label: rgba(255, 238, 214, 0.95);
  --ctrl-label: rgba(255, 238, 214, 0.95);
  --kn-sk1: #f9e7b4;
  --kn-sk2: #c99c4a;
  --kn-sk3: #7a5822;
  --kn-sheen: 0.28;
  --bezel-1: #ecd08a;
  --bezel-2: #8a6a2a;
  --foot-1: #f7e3a8;
  --foot-2: #b8892e;
  --foot-3: #4a3410;
}

body[data-skin="walnut"] .cabinet::before {
  background:
    repeating-radial-gradient(ellipse 170% 58% at 22% 28%, transparent 0 15px, rgba(30, 12, 4, 0.17) 16px 18px, transparent 19px 36px),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(87deg, transparent 0 22px, rgba(30, 14, 6, 0.22) 23px, transparent 28px, transparent 46px, rgba(120, 74, 40, 0.16) 47px, transparent 52px),
    radial-gradient(ellipse at 0% 40%, rgba(255, 220, 180, 0.12), transparent 42%),
    linear-gradient(180deg, #70492f, #4a2e1c 38%, #381f12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 150, 0.55),
    inset 0 0 0 3px rgba(40, 20, 8, 0.7),
    inset 0 0 0 4px rgba(214, 170, 90, 0.6);
}

body[data-skin="walnut"] .plinth::before {
  background:
    radial-gradient(ellipse 55% 60% at 50% 48%, rgba(255, 190, 110, 0.2), transparent 70%),
    linear-gradient(180deg, rgba(255, 230, 200, 0.09), transparent 16%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 7px),
    repeating-radial-gradient(ellipse 150% 40% at 70% 90%, transparent 0 12px, rgba(25, 10, 4, 0.13) 13px 15px, transparent 16px 30px),
    linear-gradient(180deg, #5f3c26, #3b2417);
  box-shadow: inset 0 0 0 1px rgba(214, 170, 90, 0.5);
}

body[data-skin="walnut"] .face::before,
body[data-skin="walnut"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 20%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 1px, rgba(60, 40, 10, 0.045) 1px 2px),
    radial-gradient(ellipse at 50% 0%, rgba(255, 244, 214, 0.5), transparent 60%),
    linear-gradient(180deg, #e4d3b4, #c8b48c);
}
body[data-skin="walnut"] .face {
  box-shadow: inset 0 0 0 1px rgba(140, 100, 36, 0.55), inset 0 0 0 3px rgba(255, 244, 214, 0.35), 0 8px 16px rgba(0, 0, 0, 0.38);
}

body[data-skin="walnut"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a120c 0 7px, transparent 7.5px),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.4), transparent 42%),
    repeating-radial-gradient(circle at 50% 50%, rgba(120, 70, 20, 0.1) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #f1d98a, #d3a94a);
  box-shadow: inset 0 0 0 5px #7b2a22, inset 0 0 0 6px #f6e3a6, inset 0 0 0 8px #7b2a22, 0 0 0 1px rgba(0, 0, 0, 0.4);
}
body[data-skin="walnut"] .vfd span { color: #ffb03a; text-shadow: 0 0 7px rgba(255, 150, 30, 0.7); }
body[data-skin="walnut"] .swatch { background: linear-gradient(135deg, #8a5a32, #3a2414); }
body[data-skin="walnut"] .silk { font-size: 0; }
body[data-skin="walnut"] .silk::after { content: "Hi-fi · stereo · model 2233"; font-size: 11px; }

/* ==========================================================================
   Theme: Ebony (piano-black lacquer, chrome trim, carbon-fibre deck, ice-blue readout)
   ========================================================================== */
body[data-skin="ebony"] {
  --label: #0f1520;
  --label-dim: #3d4757;
  --brand: #0f1520;
  --scale: #2a3342;
  --plate-label: rgba(236, 242, 252, 0.96);
  --ctrl-label: rgba(222, 232, 248, 0.98);
  --kn-sk1: #ffffff;
  --kn-sk2: #c4cad3;
  --kn-sk3: #6a717c;
  --kn-top1: #f5f7fa;
  --kn-top2: #b6bcc6;
  --kn-top3: #5f6671;
  --kn-grip: rgba(0, 0, 0, 0.3);
  --kn-sheen: 0.7;
  --kn-ind: #10141b;
  --bezel-1: #f2f5fa;
  --bezel-2: #7b838f;
  --foot-1: #ffffff;
  --foot-2: #9aa2ad;
  --foot-3: #2b3036;
}
body[data-skin="ebony"] {
  --den:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(90, 140, 255, 0.22), transparent 62%),
    linear-gradient(180deg, #11141b, #050608 72%);
}
body[data-skin="ebony"] .lamp { background: radial-gradient(ellipse at 50% 10%, rgba(120, 170, 255, 0.28), transparent 62%); }

body[data-skin="ebony"] .cabinet::before {
  background:
    linear-gradient(116deg, transparent 0 16%, rgba(255, 255, 255, 0.11) 20%, rgba(255, 255, 255, 0.025) 32%, transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 12%),
    radial-gradient(ellipse at 50% 125%, rgba(80, 130, 255, 0.28), transparent 55%),
    linear-gradient(180deg, #2a2d34, #101114 52%, #050506);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 0 0 3px #07080a,
    inset 0 0 0 4px rgba(196, 206, 222, 0.6),
    0 0 22px rgba(80, 130, 255, 0.18);
}
body[data-skin="ebony"] .plinth::before {
  background:
    radial-gradient(ellipse 80% 55% at 50% 118%, rgba(70, 130, 255, 0.4), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 26%),
    linear-gradient(45deg, #0e0f12 25%, transparent 25% 75%, #0e0f12 75%) 0 0 / 8px 8px,
    linear-gradient(45deg, #0e0f12 25%, #1d2026 25% 75%, #0e0f12 75%) 4px 4px / 8px 8px,
    #0c0d10;
  box-shadow: inset 0 0 0 1px rgba(196, 206, 222, 0.5);
}
body[data-skin="ebony"] .face::before,
body[data-skin="ebony"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 22%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0 1px, rgba(40, 50, 70, 0.05) 1px 2px),
    linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, 0.28) 48%, transparent 58%),
    linear-gradient(180deg, #e8ebf0, #bcc3ce);
}
body[data-skin="ebony"] .face {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 0 2px rgba(110, 120, 138, 0.5), 0 8px 18px rgba(0, 0, 0, 0.5);
}
body[data-skin="ebony"] .label {
  background:
    radial-gradient(circle at 50% 50%, #0a0b0d 0 7px, transparent 7.5px),
    conic-gradient(from 20deg, #f7f9fc, #aab1bb, #f7f9fc, #858c97, #f7f9fc);
  box-shadow: inset 0 0 0 5px #0c0d10, inset 0 0 0 6px #d8dde5, inset 0 0 0 8px #0c0d10, 0 0 0 1px rgba(0, 0, 0, 0.5);
}
body[data-skin="ebony"] .label-copy { color: #0c0d10; }
body[data-skin="ebony"] .hiss-types button { background: #c3c9d3; }
body[data-skin="ebony"] .hiss-types button.on { background: #1a1d23; }
body[data-skin="ebony"] .vfd { background: linear-gradient(180deg, #060a12, #03060b); box-shadow: inset 0 0 0 1px #3a465a, inset 0 8px 16px rgba(0, 0, 0, 0.55); }
body[data-skin="ebony"] .vfd span { color: #9fe6ff; text-shadow: 0 0 8px rgba(110, 200, 255, 0.85); }
body[data-skin="ebony"] .swatch { background: linear-gradient(135deg, #f4f6f9, #0d0e11 62%); }
body[data-skin="ebony"] .silk { font-size: 0; }
body[data-skin="ebony"] .silk::after { content: "Hi-fi · high gloss · chrome"; font-size: 11px; }

/* ==========================================================================
   Theme: Avocado (70s kitchen hi-fi: pebbled vinyl wrap, racing stripes, concentric sunburst deck)
   ========================================================================== */
body[data-skin="avocado"] {
  --label: #2b2d0a;
  --label-dim: #565a22;
  --brand: #6a2c0a;
  --scale: #5a5e24;
  --plate-label: rgba(255, 244, 205, 0.97);
  --ctrl-label: rgba(255, 244, 205, 0.97);
  --kn-sk1: #fbf3d6;
  --kn-sk2: #d3c493;
  --kn-sk3: #8c7c48;
  --kn-top1: #f8f0d4;
  --kn-top2: #dccf9f;
  --kn-top3: #a8985f;
  --kn-grip: rgba(90, 64, 20, 0.28);
  --kn-sheen: 0.45;
  --kn-ind: #6a2c0a;
  --bezel-1: #eadba6;
  --bezel-2: #7a6a30;
  --foot-1: #f0c06a;
  --foot-2: #b4561a;
  --foot-3: #4a2208;
}
body[data-skin="avocado"] {
  --den:
    radial-gradient(ellipse 50% 40% at 80% 0%, rgba(232, 163, 58, 0.35), transparent 62%),
    linear-gradient(180deg, #2a3010, #0d1005 74%);
}
body[data-skin="avocado"] .lamp { background: radial-gradient(ellipse at 70% 10%, rgba(255, 190, 80, 0.3), transparent 62%); }

body[data-skin="avocado"] .cabinet::before {
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.13) 0 1px, transparent 1.6px) 0 0 / 5px 5px,
    radial-gradient(circle, rgba(255, 255, 255, 0.09) 0 1px, transparent 1.6px) 2.5px 2.5px / 5px 5px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20%),
    linear-gradient(180deg, #7f8c2d, #5a6a1c 45%, #3d4a12);
  box-shadow:
    inset 0 0 0 2px rgba(24, 30, 6, 0.75),
    inset 0 0 0 4px #e8a33a,
    inset 0 0 0 5px rgba(24, 30, 6, 0.6),
    inset 0 0 0 7px #b4561a;
}
body[data-skin="avocado"] .plinth::before {
  background:
    linear-gradient(rgba(24, 30, 6, 0.28), rgba(24, 30, 6, 0.55)),
    repeating-radial-gradient(circle at 50% 50%, #b4561a 0 16px, #e8a33a 16px 32px, #f2d36a 32px 48px, #7c8a2a 48px 64px);
  box-shadow: inset 0 0 0 2px rgba(240, 190, 90, 0.45), inset 0 0 28px rgba(0, 0, 0, 0.4);
}
body[data-skin="avocado"] .face::before,
body[data-skin="avocado"] .drops::before {
  background:
    linear-gradient(180deg, #b4561a 0 3px, #e8a33a 3px 6px, #f2d36a 6px 9px, transparent 9px) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 22%),
    radial-gradient(circle, rgba(90, 70, 20, 0.07) 0 1px, transparent 1.5px) 0 0 / 6px 6px,
    linear-gradient(180deg, #f0e9c8, #d9cf9f);
}
body[data-skin="avocado"] .face {
  box-shadow: inset 0 0 0 1px rgba(90, 70, 20, 0.5), 0 8px 16px rgba(0, 0, 0, 0.4);
}
body[data-skin="avocado"] .label {
  background:
    radial-gradient(circle at 50% 50%, #241206 0 7px, transparent 7.5px),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 42%),
    repeating-radial-gradient(circle at 50% 50%, rgba(120, 50, 10, 0.12) 0 2px, transparent 2px 6px),
    #f0a232;
  box-shadow: inset 0 0 0 5px #5a6a1c, inset 0 0 0 7px #f2d36a, inset 0 0 0 9px #b4561a, 0 0 0 1px rgba(0, 0, 0, 0.4);
}
body[data-skin="avocado"] .label-copy { color: #3a1606; }
body[data-skin="avocado"] .hiss-types button { background: #e7dca9; }
body[data-skin="avocado"] .hiss-types button.on { background: #3d4a12; }
body[data-skin="avocado"] .swatch { background: linear-gradient(135deg, #8a9a2e, #3a4710); }
body[data-skin="avocado"] .silk { font-size: 0; }
body[data-skin="avocado"] .silk::after { content: "Far out · far fidelity"; font-size: 11px; }

/* ==========================================================================
   Theme: Papaya (tropical sunset pop: ray burst deck, memphis-stripe faceplate, hot pink readout)
   ========================================================================== */
body[data-skin="papaya"] {
  --label: #6a1708;
  --label-dim: #92422a;
  --brand: #c4260e;
  --scale: #b4401e;
  --plate-label: rgba(255, 244, 226, 0.98);
  --ctrl-label: rgba(255, 244, 226, 0.98);
  --kn-sk1: #ffffff;
  --kn-sk2: #f4dcc6;
  --kn-sk3: #b98a66;
  --kn-top1: #55484a;
  --kn-top2: #1c1416;
  --kn-top3: #070405;
  --kn-grip: rgba(255, 190, 120, 0.3);
  --kn-sheen: 0.34;
  --kn-ind: #ff8a1f;
  --kn-glow: rgba(255, 130, 20, 0.8);
  --bezel-1: #fff1de;
  --bezel-2: #d0602a;
  --foot-1: #ffd9a0;
  --foot-2: #e8541a;
  --foot-3: #6a1708;
}
body[data-skin="papaya"] {
  --den:
    radial-gradient(ellipse 60% 44% at 50% 100%, rgba(255, 140, 40, 0.5), transparent 62%),
    linear-gradient(180deg, #3a0f2a, #12040c 74%);
}
body[data-skin="papaya"] .lamp { background: radial-gradient(ellipse at 50% 100%, rgba(255, 150, 60, 0.32), transparent 62%); }

body[data-skin="papaya"] .cabinet::before {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 20%),
    linear-gradient(180deg, #ff9d3f, #ec5a1c 46%, #a92c0e);
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 215, 0.85),
    inset 0 0 0 4px rgba(120, 30, 8, 0.6),
    inset 0 0 0 5px #ff3d8b,
    0 0 24px rgba(255, 120, 40, 0.3);
}
body[data-skin="papaya"] .plinth::before {
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 226, 140, 0.26) 0 5deg, transparent 5deg 10deg),
    radial-gradient(circle at 50% 50%, #ffc965 0, #ff8a2c 34%, #d8431a 68%, #8c1c10 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 240, 215, 0.55), inset 0 0 30px rgba(110, 20, 6, 0.45);
}
body[data-skin="papaya"] .face::before,
body[data-skin="papaya"] .drops::before {
  background:
    linear-gradient(90deg, #ff3d8b 0 33.3%, #ffc21a 33.3% 66.6%, #1fc4b4 66.6% 100%) 0 0 / 100% 5px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 22%),
    radial-gradient(circle at 12% 88%, rgba(255, 61, 139, 0.12), transparent 38%),
    radial-gradient(circle at 90% 70%, rgba(255, 194, 26, 0.16), transparent 40%),
    linear-gradient(180deg, #fdebd6, #f3cfa6);
}
body[data-skin="papaya"] .face {
  box-shadow: inset 0 0 0 1px rgba(200, 80, 30, 0.45), 0 8px 16px rgba(80, 10, 0, 0.45);
}
body[data-skin="papaya"] .label {
  background:
    radial-gradient(circle at 50% 50%, #3a0a0a 0 7px, transparent 7.5px),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.4), transparent 42%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.14) 0 6deg, transparent 6deg 12deg),
    linear-gradient(150deg, #ffd04a, #ff6a2a 52%, #ff3d8b);
  box-shadow: inset 0 0 0 5px #fff1de, inset 0 0 0 7px #d4301a, 0 0 0 1px rgba(0, 0, 0, 0.4);
}
body[data-skin="papaya"] .label-copy { color: #55120a; }
body[data-skin="papaya"] .hiss-types button { background: #fbd9b4; }
body[data-skin="papaya"] .hiss-types button.on { background: #521019; }
body[data-skin="papaya"] .vfd { background: linear-gradient(180deg, #1a0710, #0f040a); box-shadow: inset 0 0 0 1px #7a2a4a, inset 0 8px 16px rgba(0, 0, 0, 0.5); }
body[data-skin="papaya"] .vfd span { color: #ff8fd0; text-shadow: 0 0 8px rgba(255, 90, 180, 0.8); }
body[data-skin="papaya"] .swatch { background: linear-gradient(135deg, #ffc21a, #ff3d8b); }
body[data-skin="papaya"] .silk { font-size: 0; }
body[data-skin="papaya"] .silk::after { content: "Fresh-squeezed sound"; font-size: 11px; }

/* ==========================================================================
   Theme: Lagoon (deep-sea teal: wave-banded shell, drifting caustic light on the deck, seafoam plate)
   ========================================================================== */
body[data-skin="lagoon"] {
  --label: #06323a;
  --label-dim: #2d6670;
  --brand: #0a5a62;
  --scale: #2d6670;
  --plate-label: rgba(222, 255, 248, 0.97);
  --ctrl-label: rgba(222, 255, 248, 0.97);
  --kn-sk1: #f6fdfc;
  --kn-sk2: #b9cfce;
  --kn-sk3: #5f7776;
  --kn-top1: #8ff0e2;
  --kn-top2: #2faea2;
  --kn-top3: #0c5a56;
  --kn-grip: rgba(0, 40, 44, 0.32);
  --kn-sheen: 0.6;
  --kn-ind: #032a2c;
  --bezel-1: #d9fff7;
  --bezel-2: #2f8a86;
  --foot-1: #dffff8;
  --foot-2: #4aa8a0;
  --foot-3: #0c3a3c;
}
body[data-skin="lagoon"] {
  --den:
    radial-gradient(ellipse 60% 44% at 30% 0%, rgba(90, 240, 220, 0.3), transparent 62%),
    linear-gradient(180deg, #0a3a42, #031418 74%);
}
body[data-skin="lagoon"] .lamp { background: radial-gradient(ellipse at 30% 10%, rgba(120, 255, 235, 0.3), transparent 62%); }

body[data-skin="lagoon"] .cabinet::before {
  background:
    repeating-radial-gradient(ellipse 130% 36% at 50% 125%, rgba(255, 255, 255, 0.075) 0 11px, transparent 11px 24px),
    linear-gradient(180deg, rgba(190, 255, 245, 0.2), transparent 18%),
    linear-gradient(180deg, #2c9490, #166264 46%, #0a3a3e);
  box-shadow:
    inset 0 0 0 2px rgba(160, 255, 236, 0.6),
    inset 0 0 0 4px rgba(4, 36, 40, 0.75),
    inset 0 0 0 5px rgba(255, 150, 120, 0.7),
    0 0 24px rgba(60, 220, 200, 0.22);
}
body[data-skin="lagoon"] .plinth::before {
  background:
    radial-gradient(ellipse 120px 62px at 18% 30%, rgba(160, 255, 240, 0.34), transparent 70%),
    radial-gradient(ellipse 150px 76px at 74% 58%, rgba(120, 240, 255, 0.3), transparent 70%),
    radial-gradient(ellipse 100px 52px at 44% 88%, rgba(160, 255, 220, 0.26), transparent 70%),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.05) 0 3px, transparent 3px 14px),
    linear-gradient(180deg, #11595f, #06262d);
  box-shadow: inset 0 0 0 2px rgba(160, 255, 236, 0.45), inset 0 0 28px rgba(0, 20, 26, 0.5);
}
body[data-skin="lagoon"] .plinth::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 130px 40px at 30% 40%, rgba(200, 255, 250, 0.4), transparent 70%),
    radial-gradient(ellipse 110px 34px at 70% 22%, rgba(180, 255, 245, 0.36), transparent 70%),
    radial-gradient(ellipse 140px 44px at 60% 78%, rgba(200, 255, 240, 0.34), transparent 70%);
  opacity: calc(0.7 * var(--see, 1));
  mix-blend-mode: screen;
  animation: lagoon-drift 11s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes lagoon-drift {
  from { transform: translate3d(-22px, -10px, 0) scale(1.04); }
  to { transform: translate3d(24px, 12px, 0) scale(1.12); }
}
body[data-skin="lagoon"] .face::before,
body[data-skin="lagoon"] .drops::before {
  background:
    linear-gradient(90deg, #17a6a0, #7ff0e0 50%, #ff9a84) 0 0 / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 22%),
    repeating-radial-gradient(ellipse 150% 46% at 50% 135%, rgba(20, 120, 120, 0.06) 0 10px, transparent 10px 22px),
    linear-gradient(180deg, #dcf2ec, #b3d8cf);
}
body[data-skin="lagoon"] .face {
  box-shadow: inset 0 0 0 1px rgba(20, 110, 110, 0.5), 0 8px 16px rgba(0, 30, 34, 0.45);
}
body[data-skin="lagoon"] .label {
  background:
    radial-gradient(circle at 50% 50%, #04282c 0 7px, transparent 7.5px),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 42%),
    repeating-radial-gradient(ellipse 140% 40% at 50% 130%, rgba(255, 255, 255, 0.2) 0 5px, transparent 5px 11px),
    linear-gradient(160deg, #ffc2a0, #ff8a78 55%, #e8586a);
  box-shadow: inset 0 0 0 5px #0e6a6c, inset 0 0 0 7px #9ff6e6, 0 0 0 1px rgba(0, 0, 0, 0.4);
}
body[data-skin="lagoon"] .label-copy { color: #052e32; }
body[data-skin="lagoon"] .hiss-types button { background: #c4e4dc; }
body[data-skin="lagoon"] .hiss-types button.on { background: #06383c; }
body[data-skin="lagoon"] .vfd { background: linear-gradient(180deg, #041a1e, #021013); box-shadow: inset 0 0 0 1px #1d6a6c, inset 0 8px 16px rgba(0, 0, 0, 0.5); }
body[data-skin="lagoon"] .vfd span { color: #7ff4ff; text-shadow: 0 0 8px rgba(100, 240, 255, 0.85); }
body[data-skin="lagoon"] .swatch { background: linear-gradient(135deg, #7ff0e0, #0e5a60); }
body[data-skin="lagoon"] .silk { font-size: 0; }
body[data-skin="lagoon"] .silk::after { content: "Deep · blue · hi-fi"; font-size: 11px; }

/* ==========================================================================
   Theme: Halloween (haunted: harvest moon over the deck, cobweb, candle glow, burnt parchment)
   ========================================================================== */
body[data-skin="halloween"] {
  --label: #2a0e02;
  --label-dim: #6a3410;
  --brand: #c44a00;
  --scale: #5c2808;
  --plate-label: rgba(255, 208, 150, 0.98);
  --ctrl-label: rgba(255, 196, 120, 0.98);
  --kn-sk1: #8a7060;
  --kn-sk2: #3a2c22;
  --kn-sk3: #130c08;
  --kn-top1: #433a36;
  --kn-top2: #181210;
  --kn-top3: #060403;
  --kn-grip: rgba(255, 140, 40, 0.3);
  --kn-sheen: 0.2;
  --kn-ind: #ff9a24;
  --kn-glow: rgba(255, 110, 0, 0.95);
  --bezel-1: #ff9a24;
  --bezel-2: #3a1a08;
  --foot-1: #ffb15a;
  --foot-2: #8a3a08;
  --foot-3: #2a1004;
}
body[data-skin="halloween"] {
  --den:
    radial-gradient(ellipse 50% 40% at 80% 0%, rgba(255, 130, 20, 0.34), transparent 62%),
    linear-gradient(180deg, #1c0a2a, #070209 74%);
}
body[data-skin="halloween"] .lamp { background: radial-gradient(ellipse at 80% 10%, rgba(255, 140, 30, 0.32), transparent 62%); }

body[data-skin="halloween"] .cabinet::before {
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(177deg, transparent 0 40px, rgba(255, 110, 0, 0.1) 40px 41px, transparent 41px 90px),
    radial-gradient(ellipse at 50% 108%, rgba(255, 110, 0, 0.4), transparent 55%),
    linear-gradient(180deg, #2c1a3a, #170c20 48%, #0a0510);
  box-shadow:
    inset 0 0 0 2px #ff7a14,
    inset 0 0 0 4px rgba(10, 4, 14, 0.9),
    inset 0 0 0 5px rgba(255, 150, 50, 0.55),
    0 0 26px rgba(255, 110, 0, 0.35);
}
body[data-skin="halloween"] .cabinet::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 190px;
  z-index: 3;
  border-radius: 16px 0 0 0;
  background:
    repeating-radial-gradient(circle at 0 0, transparent 0 20px, rgba(236, 226, 206, 0.6) 20px 21px),
    repeating-conic-gradient(from 90deg at 0 0, rgba(236, 226, 206, 0.65) 0 0.9deg, transparent 0.9deg 15deg);
  -webkit-mask: conic-gradient(from 90deg at 0 0, #000 0 90deg, transparent 90deg);
  mask: conic-gradient(from 90deg at 0 0, #000 0 90deg, transparent 90deg);
  opacity: calc(0.55 * var(--see, 1));
  pointer-events: none;
}
body[data-skin="halloween"] .plinth::before {
  background:
    radial-gradient(circle 230px at 50% 48%, rgba(255, 170, 50, 0.6), rgba(255, 100, 0, 0.2) 58%, transparent 72%),
    radial-gradient(ellipse at 50% 120%, rgba(150, 40, 200, 0.4), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255, 140, 40, 0.05) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #2a1238, #0e0516);
  box-shadow: inset 0 0 0 1px rgba(255, 130, 30, 0.55), inset 0 0 30px rgba(0, 0, 0, 0.5);
}
body[data-skin="halloween"] .plinth::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 4% 104%, rgba(255, 130, 20, 0.6), transparent 34%),
    radial-gradient(circle at 96% 104%, rgba(255, 130, 20, 0.6), transparent 34%);
  opacity: calc(1 * var(--see, 1));
  mix-blend-mode: screen;
  animation: hw-flicker 2.6s steps(1, end) infinite;
  pointer-events: none;
}
@keyframes hw-flicker {
  0% { filter: brightness(1); }
  18% { filter: brightness(0.78); }
  34% { filter: brightness(1.12); }
  52% { filter: brightness(0.86); }
  71% { filter: brightness(1.18); }
  88% { filter: brightness(0.92); }
}
body[data-skin="halloween"] .face::before,
body[data-skin="halloween"] .drops::before {
  background:
    repeating-linear-gradient(90deg, #ff6a00 0 14px, #120804 14px 28px) 0 0 / 100% 5px no-repeat,
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(110, 50, 8, 0.42) 100%),
    radial-gradient(circle, rgba(90, 50, 10, 0.14) 0 1px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(180deg, rgba(255, 236, 180, 0.35), transparent 20%),
    linear-gradient(180deg, #f1dbaa, #d6b172);
}
body[data-skin="halloween"] .face {
  box-shadow: inset 0 0 0 1px rgba(90, 40, 6, 0.65), inset 0 0 0 3px rgba(255, 110, 0, 0.35), 0 8px 18px rgba(0, 0, 0, 0.6);
}
body[data-skin="halloween"] .label {
  background:
    radial-gradient(circle at 50% 50%, #120804 0 7px, transparent 7.5px),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.3), transparent 42%),
    repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.16) 0 7deg, transparent 7deg 22.5deg),
    #ff7a12;
  box-shadow: inset 0 0 0 5px #120804, inset 0 0 0 6px #ffb54a, inset 0 0 0 8px #120804, 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 110, 0, 0.5);
}
body[data-skin="halloween"] .label-copy { color: #1a0a02; }
body[data-skin="halloween"] .hiss-types button { background: #e4c488; }
body[data-skin="halloween"] .hiss-types button.on { background: #1a0a12; }
body[data-skin="halloween"] .vfd { background: linear-gradient(180deg, #05100a, #020804); box-shadow: inset 0 0 0 1px #2c5a1c, inset 0 8px 16px rgba(0, 0, 0, 0.55); }
body[data-skin="halloween"] .vfd span { color: #9dff6a; text-shadow: 0 0 9px rgba(120, 255, 70, 0.85); }
body[data-skin="halloween"] .swatch { background: radial-gradient(circle at 40% 35%, #ffb54a, #ff6a00 55%, #3a1500); }
body[data-skin="halloween"] .silk { font-size: 0; }
body[data-skin="halloween"] .silk::after { content: "Boo · wow · flutter"; font-size: 11px; }

/* ==========================================================================
   Theme: Ashbury (psychedelic Haight St: colour-cycling swirl deck, rainbow plate, candy knobs)
   ========================================================================== */
body[data-skin="ashbury"] {
  --label: #2a0c3e;
  --label-dim: #6a2a86;
  --brand: #d4147a;
  --scale: #7a2a9a;
  --plate-label: rgba(255, 238, 250, 0.98);
  --ctrl-label: rgba(255, 238, 250, 0.98);
  --kn-sk1: #fff3b8;
  --kn-sk2: #ffc545;
  --kn-sk3: #a8691a;
  --kn-top1: #ff8fd2;
  --kn-top2: #d02a96;
  --kn-top3: #5c0a48;
  --kn-grip: rgba(255, 255, 255, 0.34);
  --kn-sheen: 0.6;
  --kn-ind: #ffffff;
  --kn-glow: rgba(255, 255, 255, 0.9);
  --bezel-1: #ffe14a;
  --bezel-2: #a24bff;
  --foot-1: #ffe9a0;
  --foot-2: #ff4aa8;
  --foot-3: #4a0a52;
}
body[data-skin="ashbury"] {
  --den:
    radial-gradient(ellipse 50% 40% at 15% 0%, rgba(255, 45, 149, 0.4), transparent 62%),
    radial-gradient(ellipse 50% 40% at 90% 100%, rgba(45, 183, 255, 0.34), transparent 62%),
    linear-gradient(180deg, #2a0c42, #0c0318 74%);
}
body[data-skin="ashbury"] .lamp { background: radial-gradient(ellipse at 30% 10%, rgba(255, 90, 190, 0.34), transparent 62%); }

body[data-skin="ashbury"] .cabinet::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 225, 74, 0.5) 0 18px, transparent 19px),
    radial-gradient(circle at 88% 82%, rgba(45, 255, 155, 0.4) 0 22px, transparent 23px),
    repeating-radial-gradient(circle at 0% 100%, transparent 0 22px, rgba(255, 255, 255, 0.09) 22px 26px),
    repeating-radial-gradient(circle at 100% 0%, transparent 0 22px, rgba(255, 255, 255, 0.09) 22px 26px),
    linear-gradient(180deg, #8a2ad0, #5a1a9a 46%, #34106a);
  box-shadow:
    inset 0 0 0 2px #ff2d95,
    inset 0 0 0 4px #1a0c28,
    inset 0 0 0 5px #ffe14a,
    inset 0 0 0 7px #1a0c28,
    inset 0 0 0 8px #2dffbe;
}
body[data-skin="ashbury"] .plinth::before {
  background:
    linear-gradient(rgba(22, 6, 44, 0.5), rgba(22, 6, 44, 0.66)),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 17px, rgba(255, 255, 255, 0.2) 17px 19px),
    conic-gradient(from 0deg at 50% 50%, #ff2d95, #ffb400, #2dff9b, #2db7ff, #a24bff, #ff2d95);
  box-shadow: inset 0 0 0 2px rgba(255, 225, 74, 0.6), inset 0 0 30px rgba(20, 0, 40, 0.5);
  animation: ash-hue 20s linear infinite;
}
@keyframes ash-hue {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}
body[data-skin="ashbury"] .face::before,
body[data-skin="ashbury"] .drops::before {
  background:
    linear-gradient(90deg, #ff2d95, #ff8a00, #ffe600, #2dff9b, #2db7ff, #a24bff) 0 0 / 100% 5px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 22%),
    radial-gradient(circle at 10% 90%, rgba(255, 45, 149, 0.14), transparent 36%),
    radial-gradient(circle at 92% 20%, rgba(45, 183, 255, 0.16), transparent 38%),
    radial-gradient(circle at 70% 96%, rgba(255, 225, 74, 0.2), transparent 34%),
    linear-gradient(180deg, #fff6df, #f0dcc0);
}
body[data-skin="ashbury"] .face {
  box-shadow: inset 0 0 0 1px rgba(120, 40, 140, 0.55), 0 8px 16px rgba(20, 0, 40, 0.5);
}
body[data-skin="ashbury"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a0c28 0 7px, transparent 7.5px),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.4), transparent 42%),
    conic-gradient(from 0deg at 50% 50%, #ff2d95, #ffb400, #2dff9b, #2db7ff, #a24bff, #ff2d95);
  box-shadow: inset 0 0 0 5px #1a0c28, inset 0 0 0 7px #ffe14a, 0 0 0 1px rgba(0, 0, 0, 0.5);
}
body[data-skin="ashbury"] .label-copy { color: #1a0c28; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
body[data-skin="ashbury"] .hiss-types button { background: #f6dcf2; }
body[data-skin="ashbury"] .hiss-types button.on { background: #2a0c3e; }
body[data-skin="ashbury"] .vfd { background: linear-gradient(180deg, #14061f, #0b0314); box-shadow: inset 0 0 0 1px #7a2a9a, inset 0 8px 16px rgba(0, 0, 0, 0.5); }
body[data-skin="ashbury"] .vfd span { color: #ff8be0; text-shadow: 0 0 8px rgba(255, 90, 210, 0.85); }
body[data-skin="ashbury"] .swatch { background: conic-gradient(#ff2d95, #ffb400, #2dff9b, #2db7ff, #a24bff, #ff2d95); }
body[data-skin="ashbury"] .silk { font-size: 0; }
body[data-skin="ashbury"] .silk::after { content: "Peace · love · feedback"; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  body[data-skin="lagoon"] .plinth::after,
  body[data-skin="halloween"] .plinth::after,
  body[data-skin="ashbury"] .plinth::before { animation: none; }
}

/* ==========================================================================
   Hardware finishes for the three newer themes
   ========================================================================== */
body[data-skin="synthwave"] {
  --kn-sk1: #efdcff;
  --kn-sk2: #9470d6;
  --kn-sk3: #3a2272;
  --kn-top1: #3f2c78;
  --kn-top2: #170b3a;
  --kn-top3: #07021a;
  --kn-grip: rgba(94, 242, 255, 0.36);
  --kn-sheen: 0.3;
  --kn-ind: #5ef2ff;
  --kn-glow: rgba(94, 242, 255, 0.95);
  --bezel-1: #ff7ae6;
  --bezel-2: #3a1a7a;
  --foot-1: #ffb4f4;
  --foot-2: #8a2ad0;
  --foot-3: #1a0838;
}
body[data-skin="reggae"] {
  --kn-sk1: #e6d08a;
  --kn-sk2: #8a7024;
  --kn-sk3: #2a1e0a;
  --kn-top1: #e4c868;
  --kn-top2: #b8861c;
  --kn-top3: #6a4208;
  --kn-grip: rgba(0, 0, 0, 0.34);
  --kn-sheen: 0.38;
  --kn-ind: #1a1204;
  --bezel-1: #d4b24a;
  --bezel-2: #1c8a2a;
  --foot-1: #e0c46a;
  --foot-2: #b8861c;
  --foot-3: #3a2804;
}

/* ==========================================================================
   Theme: British Invasion (black tolex stack with white piping, Union Jack deck,
   gold plexi panel, mod-target record label, red LED readout)
   ========================================================================== */
body[data-skin="invasion"] {
  --label: #15110a;
  --label-dim: #4e3f12;
  --brand: #c8102e;
  --scale: #3a2f10;
  --plate-label: rgba(246, 242, 228, 0.97);
  --ctrl-label: rgba(246, 242, 228, 0.97);
  --kn-sk1: #ffffff;
  --kn-sk2: #c4cad3;
  --kn-sk3: #6a717c;
  --kn-top1: #ff7078;
  --kn-top2: #c8102e;
  --kn-top3: #55050f;
  --kn-grip: rgba(255, 255, 255, 0.32);
  --kn-sheen: 0.55;
  --kn-ind: #ffffff;
  --kn-glow: rgba(255, 255, 255, 0.85);
  --bezel-1: #f0d97e;
  --bezel-2: #6a5214;
  --foot-1: #f6e39a;
  --foot-2: #b08a20;
  --foot-3: #3a2a04;
}
body[data-skin="invasion"] {
  --den:
    radial-gradient(ellipse 50% 40% at 12% 0%, rgba(200, 16, 46, 0.34), transparent 62%),
    radial-gradient(ellipse 50% 40% at 92% 100%, rgba(30, 70, 190, 0.34), transparent 62%),
    linear-gradient(180deg, #14151c, #040406 74%);
}
body[data-skin="invasion"] .lamp { background: radial-gradient(ellipse at 20% 10%, rgba(255, 70, 90, 0.3), transparent 62%); }

body[data-skin="invasion"] .cabinet::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 0 1px, transparent 1.6px) 0 0 / 4px 4px,
    radial-gradient(circle, rgba(0, 0, 0, 0.55) 0 1px, transparent 1.6px) 2px 2px / 4px 4px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 18%),
    linear-gradient(180deg, #212125, #0e0e11);
  box-shadow:
    inset 0 0 0 2px #f4f0e2,
    inset 0 0 0 4px #0a0a0c,
    inset 0 0 0 5px #c8a23a,
    0 0 20px rgba(200, 16, 46, 0.22);
}
body[data-skin="invasion"] .plinth::before {
  background:
    linear-gradient(rgba(4, 8, 28, 0.4), rgba(4, 8, 28, 0.55)),
    linear-gradient(90deg, transparent calc(50% - 21px), #c8102e calc(50% - 21px) calc(50% + 21px), transparent calc(50% + 21px)),
    linear-gradient(180deg, transparent calc(50% - 21px), #c8102e calc(50% - 21px) calc(50% + 21px), transparent calc(50% + 21px)),
    linear-gradient(90deg, transparent calc(50% - 36px), #f4f0e2 calc(50% - 36px) calc(50% + 36px), transparent calc(50% + 36px)),
    linear-gradient(180deg, transparent calc(50% - 36px), #f4f0e2 calc(50% - 36px) calc(50% + 36px), transparent calc(50% + 36px)),
    linear-gradient(to top right, transparent calc(50% - 7px), #c8102e calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)),
    linear-gradient(to bottom right, transparent calc(50% - 7px), #c8102e calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)),
    linear-gradient(to top right, transparent calc(50% - 26px), #f4f0e2 calc(50% - 26px) calc(50% + 26px), transparent calc(50% + 26px)),
    linear-gradient(to bottom right, transparent calc(50% - 26px), #f4f0e2 calc(50% - 26px) calc(50% + 26px), transparent calc(50% + 26px)),
    #13296a;
  box-shadow: inset 0 0 0 2px rgba(244, 240, 226, 0.7), inset 0 0 30px rgba(0, 0, 10, 0.55);
}
body[data-skin="invasion"] .face::before,
body[data-skin="invasion"] .drops::before {
  background:
    linear-gradient(90deg, #c8102e 0 33.3%, #f4f0e2 33.3% 66.6%, #13296a 66.6% 100%) 0 0 / 100% 5px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 20%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 1px, rgba(90, 60, 10, 0.05) 1px 2px),
    radial-gradient(ellipse at 50% 0%, rgba(255, 244, 200, 0.45), transparent 60%),
    linear-gradient(180deg, #ebd37e, #c7a23c);
}
body[data-skin="invasion"] .face {
  box-shadow: inset 0 0 0 1px rgba(21, 17, 10, 0.7), inset 0 0 0 3px rgba(255, 244, 200, 0.35), 0 8px 16px rgba(0, 0, 0, 0.5);
}
body[data-skin="invasion"] .label {
  background:
    radial-gradient(circle at 50% 50%, #0b0d12 0 7px, #c8102e 7.5px 22px, #f4f0e2 22.5px 31px, #13296a 31.5px);
  box-shadow: inset 0 0 0 3px #f4f0e2, inset 0 0 0 5px #0b0d12, 0 0 0 1px rgba(0, 0, 0, 0.5);
}
body[data-skin="invasion"] .label-copy { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 20, 0.8); }
body[data-skin="invasion"] .hiss-types button { background: #dcc468; }
body[data-skin="invasion"] .hiss-types button.on { background: #15110a; }
body[data-skin="invasion"] .vfd { background: linear-gradient(180deg, #160606, #0c0303); box-shadow: inset 0 0 0 1px #6a1a1a, inset 0 8px 16px rgba(0, 0, 0, 0.55); }
body[data-skin="invasion"] .vfd span { color: #ff5a4a; text-shadow: 0 0 8px rgba(255, 70, 50, 0.85); }
body[data-skin="invasion"] .swatch { background: linear-gradient(135deg, #13296a 0 38%, #f4f0e2 38% 54%, #c8102e 54%); }
body[data-skin="invasion"] .silk { font-size: 0; }
body[data-skin="invasion"] .silk::after { content: "Loud · swinging · London"; font-size: 11px; }

/* keep the silkscreen clear of the pumpkin in the corner */
body[data-skin="halloween"] .silk { margin-right: 26px; }

/* ==========================================================================
   Voice knob: same machined build as the others, but in each theme's secondary colour
   ========================================================================== */
:root {
  --kn2-top1: #4a4a4d;
  --kn2-top2: #171718;
  --kn2-top3: #060607;
  --kn2-grip: rgba(255, 255, 255, 0.16);
  --kn2-sheen: 0.22;
  --kn2-ind: #f4efe4;
  --kn2-glow: transparent;
}
.selector {
  --kn-top1: var(--kn2-top1);
  --kn-top2: var(--kn2-top2);
  --kn-top3: var(--kn2-top3);
  --kn-grip: var(--kn2-grip);
  --kn-sheen: var(--kn2-sheen);
  --kn-ind: var(--kn2-ind);
  --kn-glow: var(--kn2-glow);
}
.selector .knob-cap i { height: 12px; }

/* walnut: polished brass cap */
body[data-skin="walnut"] { --kn2-top1: #fbebb8; --kn2-top2: #d0a24e; --kn2-top3: #7a5822; --kn2-grip: rgba(60, 36, 8, 0.32); --kn2-sheen: 0.6; --kn2-ind: #2a1606; }
/* ebony: black gloss with an ice-blue light */
body[data-skin="ebony"] { --kn2-top1: #565a64; --kn2-top2: #17181c; --kn2-top3: #050506; --kn2-grip: rgba(255, 255, 255, 0.24); --kn2-sheen: 0.38; --kn2-ind: #9fe6ff; --kn2-glow: rgba(110, 200, 255, 0.95); }
/* avocado: harvest orange */
body[data-skin="avocado"] { --kn2-top1: #ffd582; --kn2-top2: #ec9e30; --kn2-top3: #a85412; --kn2-grip: rgba(90, 40, 8, 0.3); --kn2-sheen: 0.5; --kn2-ind: #3a1606; }
/* papaya: hot pink */
body[data-skin="papaya"] { --kn2-top1: #ff9ac6; --kn2-top2: #ff3d8b; --kn2-top3: #8a0a46; --kn2-grip: rgba(255, 255, 255, 0.34); --kn2-sheen: 0.55; --kn2-ind: #ffffff; --kn2-glow: rgba(255, 255, 255, 0.8); }
/* lagoon: coral */
body[data-skin="lagoon"] { --kn2-top1: #ffc9b0; --kn2-top2: #ff8a78; --kn2-top3: #b5403a; --kn2-grip: rgba(80, 10, 10, 0.3); --kn2-sheen: 0.55; --kn2-ind: #3a0a0a; }
/* halloween: haunted purple with a ghost-green pointer */
body[data-skin="halloween"] { --kn2-top1: #b070e8; --kn2-top2: #5a2294; --kn2-top3: #1e0746; --kn2-grip: rgba(180, 255, 140, 0.3); --kn2-sheen: 0.32; --kn2-ind: #9dff6a; --kn2-glow: rgba(120, 255, 70, 0.95); }
/* ashbury: electric blue */
body[data-skin="ashbury"] { --kn2-top1: #94e2ff; --kn2-top2: #2d9ae8; --kn2-top3: #0a3a8a; --kn2-grip: rgba(255, 255, 255, 0.36); --kn2-sheen: 0.6; --kn2-ind: #ffffff; --kn2-glow: rgba(255, 255, 255, 0.9); }
/* synthwave: hot magenta */
body[data-skin="synthwave"] { --kn2-top1: #ffa0f2; --kn2-top2: #ff2bd6; --kn2-top3: #6a0a6a; --kn2-grip: rgba(255, 255, 255, 0.32); --kn2-sheen: 0.5; --kn2-ind: #ffffff; --kn2-glow: rgba(255, 255, 255, 0.9); }
/* reggae: Rasta red */
body[data-skin="reggae"] { --kn2-top1: #ff8070; --kn2-top2: #d4261a; --kn2-top3: #5a0a06; --kn2-grip: rgba(255, 210, 120, 0.22); --kn2-sheen: 0.36; --kn2-ind: #dcc46a; --kn2-glow: rgba(210, 170, 50, 0.4); }
/* mpc: pad orange */
/* british invasion: mod blue */
body[data-skin="invasion"] { --kn2-top1: #86a4ff; --kn2-top2: #2442b0; --kn2-top3: #0a1a55; --kn2-grip: rgba(255, 255, 255, 0.32); --kn2-sheen: 0.5; --kn2-ind: #ffffff; --kn2-glow: rgba(255, 255, 255, 0.85); }

.selector-scale { background: conic-gradient(from 220deg, var(--scale) 0 280deg, transparent 280deg); }

/* ==========================================================================
   Theme: SP 40 (gunmetal sampler: silver trim, red LED bank display,
   round rubber LED buttons, knob cluster, 3x4 pad bay that chase-lights red)
   ========================================================================== */
body[data-skin="sp404"] {
  --label: #f1f1ed;
  --label-dim: #a9adb5;
  --brand: #ff4a3c;
  --scale: #c6c9d0;
  --plate-label: rgba(240, 240, 236, 0.95);
  --ctrl-label: rgba(240, 240, 236, 0.96);
  --kn-sk1: #8a8d95;
  --kn-sk2: #34363c;
  --kn-sk3: #0f1013;
  --kn-top1: #eceef2;
  --kn-top2: #aeb2ba;
  --kn-top3: #5b5f68;
  --kn-grip: rgba(0, 0, 0, 0.34);
  --kn-sheen: 0.65;
  --kn-ind: #ff3b2f;
  --kn-glow: rgba(255, 59, 47, 0.7);
  --kn2-top1: #ff8070;
  --kn2-top2: #e0261a;
  --kn2-top3: #6a0a06;
  --kn2-grip: rgba(0, 0, 0, 0.3);
  --kn2-sheen: 0.5;
  --kn2-ind: #ffffff;
  --kn2-glow: rgba(255, 255, 255, 0.7);
  --bezel-1: #d4d7dd;
  --bezel-2: #4a4d54;
  --foot-1: #6a6d75;
  --foot-2: #2c2e33;
  --foot-3: #0c0d10;
}
body[data-skin="sp404"] {
  --den:
    radial-gradient(ellipse 50% 40% at 85% 0%, rgba(255, 59, 47, 0.25), transparent 62%),
    linear-gradient(180deg, #17181c, #050506 74%);
}
body[data-skin="sp404"] .lamp { background: radial-gradient(ellipse at 80% 10%, rgba(255, 80, 60, 0.26), transparent 62%); }

body[data-skin="sp404"] .cabinet::before {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 16%),
    linear-gradient(180deg, #3b3d42, #303236 50%, #27292c);
  box-shadow:
    inset 0 0 0 2px #9fa2a9,
    inset 0 0 0 3px #08080a,
    inset 0 0 0 4px #ff3b2f,
    0 0 20px rgba(255, 59, 47, 0.16);
}
body[data-skin="sp404"] .face::before,
body[data-skin="sp404"] .drops::before {
  background:
    linear-gradient(90deg, #ff3b2f 0 20%, transparent 20%) 0 0 / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 18%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #373940, #1f2125);
}
body[data-skin="sp404"] .face {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 2px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.5);
}
body[data-skin="sp404"] .label {
  background:
    radial-gradient(circle at 50% 50%, #0a0a0c 0 7px, transparent 7.5px),
    repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0 6deg, transparent 6deg 12deg),
    linear-gradient(160deg, #3a3c43, #14151a);
  box-shadow: inset 0 0 0 5px #ff3b2f, inset 0 0 0 7px #14151a, inset 0 0 0 8px #c6c9d0, 0 0 0 1px rgba(0, 0, 0, 0.5);
}
body[data-skin="sp404"] .label-copy { color: #f4f4f0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
body[data-skin="sp404"] .hiss-types button { background: #2a2c32; }
body[data-skin="sp404"] .hiss-types button.on { background: #0b0c0f; }
body[data-skin="sp404"] .vfd { background: linear-gradient(180deg, #1c0707, #0d0303); box-shadow: inset 0 0 0 1px #6a1a16, inset 0 8px 16px rgba(0, 0, 0, 0.55); }
body[data-skin="sp404"] .vfd span { color: #ff4a3a; text-shadow: 0 0 8px rgba(255, 60, 40, 0.85); }
body[data-skin="sp404"] .swatch { background: linear-gradient(135deg, #0b0b0d 50%, #ff7a1a 50%); }
body[data-skin="sp404"] .silk { font-size: 0; }
body[data-skin="sp404"] .silk::after { content: "Dig · sample · flip"; font-size: 11px; }

/* ==========================================================================
   Siren lamp: a breathing halo, a highlight that drifts around the glass,
   and a gentle brightness swell. All of it speeds up while the siren fires.
   ========================================================================== */
.pilot {
  --siren-rgb: 140, 230, 80;
  position: relative;
}
.pilot::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--siren-rgb), 0.55) 0 38%, rgba(var(--siren-rgb), 0.18) 55%, transparent 70%);
  animation: siren-breathe 4.2s ease-in-out infinite;
  pointer-events: none;
}
.pilot-glass {
  position: relative;
  overflow: hidden;
  animation: siren-lamp 4.2s ease-in-out infinite;
}
.pilot-glass::after {
  content: "";
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 14%, rgba(225, 255, 175, 0.55), transparent 34%);
  animation: siren-orbit 9s linear infinite;
  pointer-events: none;
}
.pilot.hot::before { animation-duration: 0.9s; background: radial-gradient(circle, rgba(var(--siren-rgb), 0.85) 0 38%, rgba(var(--siren-rgb), 0.3) 55%, transparent 72%); }
.pilot.hot .pilot-glass { animation-duration: 0.9s; }
.pilot.hot .pilot-glass::after { animation-duration: 2.2s; background: radial-gradient(circle at 50% 14%, rgba(245, 255, 215, 0.8), transparent 38%); }

/* a sleeping room doesn't glow */
body:not(.is-on) .pilot::before { opacity: 0.3; animation-play-state: paused; }
body:not(.is-on) .pilot-glass,
body:not(.is-on) .pilot-glass::after { animation-play-state: paused; }

@keyframes siren-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes siren-lamp {
  0%, 100% { filter: brightness(0.94); }
  50% { filter: brightness(1.14); }
}
@keyframes siren-orbit {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pilot::before, .pilot-glass, .pilot-glass::after { animation: none; }
}

/* ==========================================================================
   SP 40 hero panel: brushed gunmetal with black rails and corner screws,
   a recessed knob bar, orange-lit rubber FX keys around a round display,
   rows of black rubber keys, and 4 x 4 numbered pads. Everything presses.
   ========================================================================== */
body[data-skin="sp404"] .plinth::before {
  background:
    radial-gradient(circle at 13px 13px, #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) 13px, #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at 13px calc(100% - 13px), #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 12%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(0, 0, 0, 0.05) 1px 2px),
    linear-gradient(180deg, #80818a, #686a72 50%, #5a5c63);
  box-shadow:
    inset 0 0 0 4px #141518,
    inset 0 0 0 5px #3d3e44,
    inset 0 -10px 18px rgba(0, 0, 0, 0.22);
}

.sp-decor {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--see, 1);
}
body[data-skin="sp404"] .sp-decor { display: block; }

.sp-brand {
  position: absolute;
  left: 20px;
  top: 12px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #eceef2;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.sp-brand b { font-weight: 800; color: #ff4a3c; margin-left: 3px; }

/* a recessed black bay: the display on top, the 4 x 4 pads below */
.sp-panel {
  position: absolute;
  right: 16px;
  top: 40px;
  width: 316px;
  height: 352px;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #08090a, #17181b);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* the display: pad number big, its name beside it (then the tempo or bar when idle) */
.sp-round {
  flex: none;
  height: 54px;
  box-sizing: border-box;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 0%, #26272c, #050506 75%);
  box-shadow: 0 0 0 2px #000, 0 0 0 3px #45464b, inset 0 2px 5px rgba(255, 255, 255, 0.08), 0 3px 5px rgba(0, 0, 0, 0.6);
}
.sp-round span {
  flex: none;
  min-width: 62px;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f4f8ff;
  text-shadow: 0 0 8px rgba(190, 215, 255, 0.85);
}
.sp-round small {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: #ff9a3a;
  text-shadow: 0 0 6px rgba(255, 130, 30, 0.7);
}

/* 4 x 4 numbered rubber pads */
.sp-bay {
  flex: 1;
  min-height: 0;
  padding: 4px 3px 3px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  counter-reset: sp;
}
.sp-pad {
  position: relative;
  pointer-events: auto;
  counter-increment: sp;
  border-radius: 6px;
  background: linear-gradient(180deg, #232429, #0b0b0d 78%, #060608);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 -4px 6px rgba(0, 0, 0, 0.6),
    0 0 0 2px #050506,
    0 0 0 3px rgba(255, 255, 255, 0.1),
    0 4px 5px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.05s;
}
.sp-pad:active {
  transform: translateY(1px) scale(0.985);
  background: linear-gradient(180deg, #ffb860, #ff7a1a 62%, #b84a00);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px #050506, 0 0 16px 2px rgba(255, 130, 30, 0.85);
}
.sp-pad:active::after { color: #2a1200; }

/* ==========================================================================
   Theme: MP 2X (warm grey ABS chassis, black LCD housing with a navy screen,
   cream / navy / orange / red keycaps that press, grey rubber pads in recessed wells)
   ========================================================================== */
body[data-skin="mpc"] {
  --label: #2a2a2d;
  --label-dim: #5d5e63;
  --brand: #c8352a;
  --scale: #3a3a3e;
  --plate-label: #3a3b3f;
  --ctrl-label: #2a2a2d;
  --kn-sk1: #cdcdd0;
  --kn-sk2: #808185;
  --kn-sk3: #3a3b3e;
  --kn-top1: #5a5a5f;
  --kn-top2: #1d1d20;
  --kn-top3: #070708;
  --kn-grip: rgba(255, 255, 255, 0.2);
  --kn-sheen: 0.24;
  --kn-ind: #f4f2ea;
  --kn-glow: transparent;
  --kn2-top1: #8fc0ff;
  --kn2-top2: #2f6fe0;
  --kn2-top3: #123a96;
  --kn2-grip: rgba(255, 255, 255, 0.32);
  --kn2-sheen: 0.55;
  --kn2-ind: #ffffff;
  --kn2-glow: transparent;
  --bezel-1: #e6e5df;
  --bezel-2: #6b6c70;
  --foot-1: #8c8d91;
  --foot-2: #3a3b3f;
  --foot-3: #111113;
  --mpc-speckle: radial-gradient(circle, rgba(0, 0, 0, 0.07) 0 0.6px, transparent 1px) 0 0 / 3px 3px;
}
body[data-skin="mpc"] {
  --den:
    radial-gradient(ellipse 55% 42% at 16% 0%, rgba(255, 250, 235, 0.14), transparent 60%),
    linear-gradient(180deg, #1c1c1f 0%, #08080a 72%);
}
body[data-skin="mpc"] .lamp { background: radial-gradient(ellipse at 30% 20%, rgba(255, 245, 225, 0.16), transparent 62%); }

body[data-skin="mpc"] .cabinet::before {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.025) 0 1px, transparent 1px 3px),
    var(--mpc-speckle),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 18%),
    linear-gradient(180deg, #e4e4dd, #d4d4cc 46%, #bfbfb6);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 0 0 3px rgba(0, 0, 0, 0.2), inset 0 -8px 14px rgba(0, 0, 0, 0.08);
}
body[data-skin="mpc"] .plinth::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 12%),
    var(--mpc-speckle),
    linear-gradient(180deg, transparent calc(100% - 12px), rgba(0, 0, 0, 0.1) calc(100% - 12px)),
    linear-gradient(180deg, #dddcd5, #cfcec6);
  box-shadow: inset 0 0 0 2px #f4f4ef, inset 0 0 0 3px rgba(0, 0, 0, 0.26), inset 0 -8px 14px rgba(0, 0, 0, 0.1);
}
body[data-skin="mpc"] .face::before,
body[data-skin="mpc"] .drops::before {
  background:
    linear-gradient(90deg, #c8352a 0 22%, transparent 22%) 0 0 / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 20%),
    var(--mpc-speckle),
    linear-gradient(180deg, #e1e1db, #cbcbc3);
}
body[data-skin="mpc"] .face {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 0 0 2px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.35);
}
body[data-skin="mpc"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a1a1c 0 7px, transparent 7.5px),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.5), transparent 42%),
    linear-gradient(160deg, #e8e8e2, #c9c9c2);
  box-shadow: inset 0 0 0 5px #c8352a, inset 0 0 0 7px #e8e8e2, inset 0 0 0 9px #26385c, 0 0 0 1px rgba(0, 0, 0, 0.45);
}
body[data-skin="mpc"] .label-copy { color: #232326; }
body[data-skin="mpc"] .vfd {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2a3d70, #1b2a52);
  box-shadow: inset 0 0 0 2px #111215, inset 0 6px 12px rgba(0, 0, 0, 0.4);
}
body[data-skin="mpc"] .vfd span,
body:not(.is-on)[data-skin="mpc"] .vfd span { color: #b9c5e2; text-shadow: none; }
body[data-skin="mpc"] .hiss-types button { background: #c9c9c1; }
body[data-skin="mpc"] .hiss-types button.on { background: #232326; }
body[data-skin="mpc"] .swatch { background: linear-gradient(135deg, #f6f4ec 50%, #2c4a8f 50%); }
body[data-skin="mpc"] .silk { font-size: 0; }
body[data-skin="mpc"] .silk::after { content: "Swing · chop · repeat"; font-size: 11px; }

/* ----- the MP 2X hero: wordmark, a navy LCD that names every pad you hit,
   and a big 4 x 4 bay of rubber pads. The sequencer panel sits to its left. ----- */
.mpc-decor {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--see, 1);
}
body[data-skin="mpc"] .mpc-decor { display: block; }

/* wordmark: outlined type with the red rule */
.mpc-brand { position: absolute; left: 18px; top: 7px; white-space: nowrap; }
.mpc-mark {
  display: block;
  padding-bottom: 2px;
  border-bottom: 2px solid #c8352a;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #e6e5df;
  -webkit-text-stroke: 1px #6b6d72;
}
.mpc-mark b { font-weight: 800; -webkit-text-stroke: 1px #45474b; }
.mpc-sub {
  display: block;
  margin-top: 3px;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #55565a;
}

/* the two panels (sequencer on the left, pads on the right) share one blue-grey face */
.mpc-panel {
  position: absolute;
  right: 16px;
  top: 40px;
  width: 316px;
  height: 352px;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 8px 8px, #eceae2 0 1.5px, #7c7f85 2px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 8px) 8px, #eceae2 0 1.5px, #7c7f85 2px 3.5px, transparent 4px),
    radial-gradient(circle at 8px calc(100% - 8px), #eceae2 0 1.5px, #7c7f85 2px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #eceae2 0 1.5px, #7c7f85 2px 3.5px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 10%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #b3b8bf, #a0a6ae);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(56, 62, 72, 0.5), 0 2px 3px rgba(0, 0, 0, 0.22);
}

/* LCD: black housing, navy screen. Shows the pad you hit, then goes back to the pattern. */
.mpc-lcd {
  flex: none;
  height: 68px;
  box-sizing: border-box;
  padding: 6px 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #2a2b2f, #141518 40%, #0c0d0f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 0 1px #050506,
    0 3px 6px rgba(0, 0, 0, 0.4);
}
.mpc-screen {
  height: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  display: grid;
  align-content: space-between;
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2c4075, #1b2a54);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 1px #0a0b10, 0 1px 0 rgba(255, 255, 255, 0.12);
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #aebbdc;
  cursor: pointer;
  pointer-events: auto;
}
.mpc-screen span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpc-screen span:nth-child(1) { font-size: 13px; font-weight: 800; color: #dfe7ff; }
.mpc-screen span:nth-child(2) { font-size: 9px; }

.chop {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  pointer-events: auto;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  user-select: none;
  cursor: pointer;
}
.chop-st, .chop-en {
  font-size: 8px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0.92;
  cursor: pointer;
  padding: 4px 0;
}
.chop-st { cursor: pointer; }
.chop-en { opacity: 0.55; }
.chop-bar {
  position: relative;
  height: 8px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
  cursor: ew-resize;
  touch-action: none;
  outline: none;
}
.chop-win {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 100%;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(220, 232, 255, 0.95), rgba(150, 175, 220, 0.75));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.mpc-screen .chop { color: #c4d0ee; }
.mpc-screen .chop-st, .mpc-screen .chop-en { color: #dfe7ff; }
.pad-start {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 3px;
  z-index: 4;
  height: 7px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
  cursor: ew-resize;
  touch-action: none;
  pointer-events: auto;
}
.pad-start i {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 100%;
  border-radius: 1px;
  background: linear-gradient(180deg, #ffc878, #ff8a28);
  box-shadow: 0 0 0 1px rgba(255, 200, 120, 0.25);
  pointer-events: none;
}
.pad-start.on { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 154, 58, 0.55); }
#chop-slip {
  position: fixed;
  z-index: 60;
  width: 304px;
  color: var(--tour-ink);
  transform: rotate(-1.4deg);
  transform-style: preserve-3d;
  perspective: 900px;
  pointer-events: auto;
}
#chop-slip:not(.is-flipped) .chop-back,
#chop-slip.is-flipped .chop-front { pointer-events: none; }
#chop-slip[hidden] { display: none !important; }
body.tour-open #chop-slip { z-index: 35; }
.chop-flipper {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#chop-slip.is-flipped .chop-flipper { transform: rotateY(180deg); }
.chop-face {
  border-radius: 14px;
  padding: 12px 12px 10px;
  background:
    radial-gradient(ellipse 70% 40% at 12% 0%, var(--tour-blush), transparent 70%),
    linear-gradient(165deg, var(--tour-paper), var(--tour-paper2));
  box-shadow:
    inset 0 0 0 2px var(--tour-line),
    inset 0 0 0 5px rgba(255, 255, 255, 0.08),
    5px 6px 0 var(--tour-pop),
    0 18px 36px rgba(0, 0, 0, 0.45);
  backface-visibility: hidden;
}
.chop-front,
.chop-back { grid-area: 1 / 1; }
.chop-back { transform: rotateY(180deg); }
.chop-face-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.chop-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.chop-close {
  margin: 0;
  padding: 1px 7px 0;
  min-width: 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--tour-ink);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--tour-line);
}
.chop-close:hover {
  color: #fff6e8;
  box-shadow: inset 0 0 0 1.5px rgba(255, 220, 160, 0.65);
}
.chop-flip {
  margin: 0;
  padding: 3px 8px 2px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tour-ink);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--tour-line);
}
.chop-knobs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px;
  margin-top: 12px;
}
.chop-keys {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px;
  margin-top: 10px;
  padding-top: 10px;
  box-shadow: inset 0 1px 0 rgba(90, 50, 20, 0.22);
}
.chop-back.is-keys .chop-keys { display: grid; }
.chop-back.is-mono .chop-knob[data-voice="poly"],
.chop-back.is-poly .chop-knob[data-voice="mono"] { display: none; }
.chop-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  outline: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.chop-knob:active { cursor: grabbing; }
.chop-knob > span:not(.chop-pot) {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tour-ink);
}
.chop-knob em {
  font: 700 10px/1 "SF Mono", "Courier New", ui-monospace, monospace;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--tour-ink);
  opacity: 0.8;
}
.chop-pot {
  position: relative;
  width: 68px;
  height: 68px;
}
.chop-knob.is-center .chop-pot::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 2px;
  width: 2px;
  height: 7px;
  border-radius: 1px;
  background: #3a2a22;
  transform: translateX(-50%);
  pointer-events: none;
}
.chop-pot-ring,
.chop-pot-cap {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.chop-pot-ring {
  inset: 0;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.28) 0 1.6deg, rgba(0, 0, 0, 0.22) 1.6deg 3.2deg),
    radial-gradient(circle at 40% 32%, var(--kn-sk1, #d7c4a4), var(--kn-sk2, #8d7358) 54%, var(--kn-sk3, #4a382c));
  box-shadow:
    0 6px 8px rgba(0, 0, 0, 0.38),
    0 1px 1px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -3px 4px rgba(0, 0, 0, 0.35);
}
.chop-pot-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 225deg, rgba(40, 24, 12, 0.55) 0 270deg, transparent 270deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60% 72%, transparent 74%);
  mask: radial-gradient(circle, transparent 58%, #000 60% 72%, transparent 74%);
}
.chop-pot-cap {
  inset: 16%;
  background: radial-gradient(circle at 50% 28%, var(--kn-top1, #f4efe4), var(--kn-top2, #c9b48a) 58%, var(--kn-top3, #8a704c));
  box-shadow:
    0 5px 7px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -5px 8px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.chop-pot-cap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--kn-grip, rgba(0, 0, 0, 0.28)) 0 2.4deg, transparent 2.4deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 0 70%, #000 73%);
  mask: radial-gradient(circle, transparent 0 70%, #000 73%);
}
.chop-pot-cap b {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: rotate(var(--rot, -135deg));
}
.chop-pot-cap b::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 9%;
  width: 3px;
  height: 28%;
  border-radius: 2px;
  background: var(--kn-ind, #f7f1e4);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55), 0 0 6px var(--kn-glow, transparent);
  transform: translateX(-50%);
}
@media (prefers-reduced-motion: reduce) {
  .chop-flipper { transition: none; }
}
.chop-slip-kicker {
  display: inline-block;
  padding: 2px 8px;
  background: var(--tour-pop);
  color: var(--tour-pop-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.chop-slip-name {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.03em;
}
.chop-slip-well {
  margin-top: 8px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  background: #120e0b;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  cursor: ew-resize;
  touch-action: none;
}
.chop-slip-well canvas { display: block; width: 100%; height: 64px; touch-action: none; }
.chop-slip-read {
  display: block;
  margin-top: 6px;
  font: 700 11px/1 "SF Mono", "Courier New", ui-monospace, monospace;
  letter-spacing: 0.08em;
}
.chop-tune { margin-top: 8px; }
.chop-modes { display: flex; gap: 6px; }
.chop-modes button {
  flex: 1;
  margin: 0;
  padding: 6px 0 5px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tour-ink);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--tour-line);
}
.chop-modes button.on {
  color: var(--tour-pop-ink);
  background: var(--tour-pop);
  box-shadow: 2px 2px 0 var(--tour-line);
}
.chop-rate {
  position: relative;
  height: 16px;
  margin-top: 8px;
  border-radius: 8px;
  background: #1a120c;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  cursor: ew-resize;
  touch-action: none;
}
.chop-rate.is-start::before { opacity: 0; }
.chop-rate::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: rgba(255, 220, 160, 0.4);
}
.chop-rate i {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 12px;
  margin-left: -6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f6e3a6, #c4963a);
  box-shadow: 0 1px 0 #5a3a12, inset 0 1px 0 rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.chop-play { margin-top: 10px; }
.chop-perform {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chop-perf-modes button {
  padding: 8px 0 7px;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.chop-perform .chop-modes { flex-wrap: wrap; }
.chop-subs button { flex: 1 0 22%; }
.chop-pats button { flex: 1 0 30%; letter-spacing: 0.02em; }
.chop-perf-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chop-perf-body[hidden],
.chop-subs[hidden],
.chop-arp-only[hidden],
.chop-keys-scale[hidden],
.chop-scale[hidden] { display: none !important; }
.chop-keys-scale {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chop-perf-read {
  font: 700 11px/1 "SF Mono", "Courier New", ui-monospace, monospace;
  letter-spacing: 0.08em;
}
.chop-scale {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
}
.chop-scale label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chop-scale select {
  font: 700 12px/1.2 inherit;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tour-ink);
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 5px 6px;
  box-shadow: inset 0 0 0 1.5px var(--tour-line);
}
.chop-voice[hidden],
.chop-octave[hidden] { display: none; }
.chop-octave .chop-modes { align-items: center; }
.chop-octave button { flex: 0 0 2.4em; font-size: 14px; }
.chop-octave button:disabled { opacity: 0.35; cursor: default; }
.chop-oct-read { flex: 1; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.06em; }
.chop-hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--tour-ink);
  opacity: 0.8;
}
.chop-mute {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.chop-mute > span {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chop-mute .chop-modes { flex: 1; }
/* Chop to pads: Even and Hits do the cut, ×16 / ×8 picks how many, Undo shows after a chop. */
.chop-cut { padding-top: 8px; border-top: 1px dashed var(--tour-line); }
.chop-cut .chop-count { flex: 0 0 3.2em; font-variant-numeric: tabular-nums; }
.chop-cut .chop-undo { flex: 0 0 4.2em; }
.chop-cut .chop-undo[hidden] { display: none; }
.chop-cut button:disabled { opacity: 0.35; cursor: default; }
.chop-cut button.is-confirm {
  color: var(--tour-pop-ink);
  background: var(--tour-pop);
  box-shadow: 2px 2px 0 var(--tour-line);
  animation: chop-ask 0.9s ease-in-out infinite alternate;
}
@keyframes chop-ask { to { box-shadow: 2px 2px 0 var(--tour-line), 0 0 0 2px rgba(255, 59, 34, 0.35); } }
@media (prefers-reduced-motion: reduce) { .chop-cut button.is-confirm { animation: none; } }
.chop-rate-read {
  display: block;
  margin-top: 6px;
  font: 700 11px/1 "SF Mono", "Courier New", ui-monospace, monospace;
  letter-spacing: 0.08em;
}
.sp-pad::before { pointer-events: none; }
.mpc-screen em { display: inline-block; width: 5px; height: 9px; margin-left: 3px; vertical-align: -1px; background: #aebbdc; animation: mpc-cursor 1s steps(1) infinite; }
@keyframes mpc-cursor { 50% { opacity: 0; } }

/* 4 x 4 rubber pad bay, sunk into the panel */
.mpc-bay {
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  padding: 13px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #8f959e, #a3a9b1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.45);
}
.mpc-pad {
  pointer-events: auto;
  border-radius: 4px;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.1) 0 0.7px, transparent 1.1px) 0 0 / 3px 3px,
    linear-gradient(145deg, #a8a9a6, #8c8d8a 60%, #7e7f7c);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 2px 2px 3px rgba(255, 255, 255, 0.38),
    inset -2px -3px 4px rgba(0, 0, 0, 0.3),
    0 0 0 3px #6f757d,
    0 0 0 4px rgba(255, 255, 255, 0.28),
    0 2px 3px 3px rgba(0, 0, 0, 0.22);
  transition: transform 0.05s;
}
.mpc-pad:active {
  transform: translateY(1px) scale(0.985);
  background: linear-gradient(145deg, #ff8a74, #ff4a36 60%, #c82a1a);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), inset 2px 2px 3px rgba(255, 255, 255, 0.4), 0 0 0 3px #6f757d, 0 0 14px 2px rgba(255, 74, 54, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .mpc-screen em { animation: none; }
}

/* ==========================================================================
   Meters: a lamp that glows with the signal, a slow ambient halo, and a needle
   that quivers a little on top of its real reading.
   ========================================================================== */
.meter { position: relative; animation: meter-halo 5.2s ease-in-out infinite; }
.meter:nth-child(2) { animation-delay: -2.6s; }

.meter::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  bottom: 17px;
  border-radius: 2px;
  background: radial-gradient(ellipse at 50% 92%, rgba(255, 208, 135, 0.6), rgba(255, 172, 80, 0.2) 52%, transparent 80%);
  mix-blend-mode: screen;
  opacity: calc(0.3 + var(--lv, 0) * 0.7);
  transition: opacity 0.1s linear;
  pointer-events: none;
}

.needle-sway {
  transform-origin: 90px 94px;
  animation: needle-idle 3.6s ease-in-out infinite alternate;
}
.meter:nth-child(2) .needle-sway { animation-duration: 4.3s; animation-delay: -1.3s; }
body.is-playing .needle-sway { animation-name: needle-live; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: normal; }
body.is-playing .meter:nth-child(2) .needle-sway { animation-duration: 1.9s; }

/* a sleeping room: dark glass, still needles */
body:not(.is-on) .meter { animation: none; }
body:not(.is-on) .meter::after { opacity: 0; }
body:not(.is-on) .needle-sway { animation: none; }

@keyframes meter-halo {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--bezel-1), inset 0 0 0 4px var(--bezel-2), 0 2px 5px rgba(0, 0, 0, 0.3), 0 0 8px 0 rgba(255, 170, 70, 0.16); }
  50% { box-shadow: inset 0 0 0 2px var(--bezel-1), inset 0 0 0 4px var(--bezel-2), 0 2px 5px rgba(0, 0, 0, 0.3), 0 0 18px 3px rgba(255, 170, 70, 0.42); }
}
@keyframes needle-idle {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.4deg); }
}
@keyframes needle-live {
  0% { transform: rotate(-2.2deg); }
  30% { transform: rotate(1.3deg); }
  55% { transform: rotate(-1deg); }
  80% { transform: rotate(2.4deg); }
  100% { transform: rotate(-2.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .meter, .needle-sway { animation: none; }
}

/* ==========================================================================
   Drum pads: a struck pad lights up (also for keyboard / touch hits, and even
   while the chase animation is running).
   ========================================================================== */
.mpc-pad.hit {
  transform: translateY(1px) scale(0.985);
  background: linear-gradient(145deg, #ff8a74, #ff4a36 60%, #c82a1a) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), inset 2px 2px 3px rgba(255, 255, 255, 0.4), 0 0 0 3px #6f757d, 0 0 14px 2px rgba(255, 74, 54, 0.7) !important;
}
.sp-pad.hit {
  transform: translateY(1px) scale(0.985);
  background: linear-gradient(180deg, #ffb860, #ff7a1a 62%, #b84a00) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px #050506, 0 0 16px 2px rgba(255, 130, 30, 0.85) !important;
}
.sp-pad.hit::after { color: #2a1200; }
.mpc-pad, .sp-pad { touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }

/* ==========================================================================
   Siren Hold key: a small latching key to the right of the lamp. Tap it once,
   then one tap on the lamp keeps the siren going until you tap again.
   The lamp itself does not move.
   ========================================================================== */
.siren-pad {
  position: relative;
  width: 100%;
  display: grid;
  justify-items: center;
}
.latch {
  position: absolute;
  left: calc(50% + 46px);
  top: 3px;
  height: 58px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.latch-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #7a4a40, #3a1612 70%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.5);
  transition: background 0.12s, box-shadow 0.12s;
}
.latch-cap {
  display: block;
  min-width: 34px;
  padding: 5px 6px 4px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: #e9dfcd;
  background: linear-gradient(180deg, #4a443d, #2a2622 55%, #17140f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 3px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.06s, box-shadow 0.06s, color 0.12s;
}
.latch:active .latch-cap,
.latch.on .latch-cap {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 1px 1px rgba(0, 0, 0, 0.35);
}
.latch.on .latch-cap { color: #ffc46a; }
.latch.on .latch-led {
  background: radial-gradient(circle at 36% 30%, #ffd0c0, #ff4a36 62%, #b01808);
  box-shadow: 0 0 6px 2px rgba(255, 74, 54, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.5);
}
body:not(.is-on) .latch.on .latch-led { opacity: 0.55; }
.latch:focus-visible { outline: 2px solid rgba(255, 190, 80, 0.9); outline-offset: 3px; border-radius: 5px; }

/* ==========================================================================
   Drum machines: the record, tonearm and 33/45 controls make way for a
   sequencer, and the pads wear their hot keys.
   ========================================================================== */
body[data-skin="mpc"] .disc, body[data-skin="mpc"] .arm-wrap, body[data-skin="mpc"] .deck-controls,
body[data-skin="sp404"] .disc, body[data-skin="sp404"] .arm-wrap, body[data-skin="sp404"] .deck-controls { display: none; }

/* the decorative pad chase would hide what you play, so it rests while the sequencer runs */
body.seq-running .mpc-pad, body.seq-running .sp-pad { animation: none; }

/* hot keys printed on the pads */
.mpc-pad { position: relative; }
.mpc-pad::after {
  content: attr(data-k);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(24, 24, 28, 0.78);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.mpc-pad.hit::after, .mpc-pad:active::after { color: rgba(255, 255, 255, 0.96); text-shadow: 0 0 4px rgba(90, 10, 0, 0.45); }
.sp-pad::before {
  content: counter(sp);
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 26px;
  height: 10px;
  margin-left: -13px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #f4f4f2;
  background: #17181c;
}

/* the MP's own number pad shows its numerals and the pattern in use */





/* the MPC transport keys: bolder legends, and they light when active */








/* ---------- the sequencer panel ---------- */
.seq {
  display: none;
  position: absolute;
  z-index: 1;
  left: 26px;
  top: 50px;
  width: 380px;
  height: 332px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  --ic-rec: #ff3b2a;
  --ic-dub: #ff9a2a;
  --ic-play: #26c24e;
  --ic-stop: #2a2b2e;
}
body[data-skin="mpc"] .seq, body[data-skin="sp404"] .seq { display: flex; }
.seq::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 8px;
  z-index: -1;
  pointer-events: none;
}
.seq button {
  appearance: none;
  -webkit-appearance: none;
  isolation: isolate;
  position: relative;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
  color: var(--k-text);
  background-color: var(--k2);
  background-image: linear-gradient(180deg, var(--k1), var(--k2) 70%, var(--k3));
  box-shadow: inset 0 1px 0 var(--k-hi), 0 0 0 1px var(--k-rim), 0 3px 0 var(--k-edge), 0 5px 5px rgba(0, 0, 0, 0.35);
  transition: transform 0.05s, box-shadow 0.05s, filter 0.12s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.seq button:hover { filter: brightness(1.06); }
.seq button:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--k-rim), 0 0 0 var(--k-edge), 0 1px 1px rgba(0, 0, 0, 0.3);
}
.seq button:focus-visible { outline: 2px solid #ffb84a; outline-offset: 2px; }

/* the display */
.seq-lcd {
  box-sizing: border-box;
  height: 112px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 4px;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.seq-line { display: flex; justify-content: space-between; align-items: center; height: 14px; }
.seq-loadwrap { display: inline-flex; align-items: center; gap: 6px; }
.seq-lcd.drop-over { box-shadow: inset 0 0 0 1px rgba(255, 210, 122, 0.7); }
.seq-roll { display: block; width: 100%; height: 64px; }
.seq[data-input="rec"] [data-f="state"] { color: #ff5a48 !important; }
.seq[data-input="hear"] [data-f="state"] { color: #ffc46a !important; }
.seq.songing .seq-roll { cursor: grab; }
.seq.songing .seq-roll.is-drag { cursor: grabbing; }
.seq-roll.is-loop-in, .seq-roll.is-loop-out { cursor: ew-resize; }
.seq-roll.is-loop-move { cursor: grab; }
.seq-roll.is-loop-move.is-drag { cursor: grabbing; }
.seq-lcd [data-f="state"] { font-weight: 800; }
.seq[data-mode="rec"] [data-f="state"] { color: #ff5a48 !important; }
.seq[data-mode="dub"] [data-f="state"] { color: #ffae3a !important; }
.seq[data-mode="play"] [data-f="state"] { color: #5ee884 !important; }
.seq-tail { display: inline-flex; align-items: center; gap: 12px; }

/* transport: big, labelled, lit when active */
.seq-transport { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; height: 62px; }
.tk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.tk span { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; }
.ico { display: block; position: relative; width: 18px; height: 18px; color: var(--ic, currentColor); }
.ico-rec { border-radius: 50%; background: radial-gradient(circle at 36% 30%, #ffb0a4, var(--ic-rec) 55%, #a01006); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45); }
.ico-dub { border-radius: 50%; border: 3px solid var(--ic-dub); box-sizing: border-box; }
.ico-dub::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--ic-dub); }
.ico-stop { width: 15px; height: 15px; margin: 1.5px; border-radius: 2px; background: var(--ic-stop); }
.ico-play { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--ic-play); }
.ico-rsmp svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ico-rsmp .ico-rsmp-tape { display: block; }
.ico-rsmp .ico-rsmp-shroom { display: none; }
body[data-skin="sp404"] .ico-rsmp .ico-rsmp-tape { display: none; }
body[data-skin="sp404"] .ico-rsmp .ico-rsmp-shroom { display: block; }
.ico-lofi svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ico-undo, .ico-redo {
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
.ico-undo { transform: rotate(-50deg); }
.ico-redo { transform: scaleX(-1) rotate(-50deg); }
.ico-undo::after, .ico-redo::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -5px;
  border: 3.5px solid transparent;
  border-right-color: currentColor;
}

.tk.on.tk-rec { background: linear-gradient(180deg, #ff8a78, #ff3b2a 70%, #c61408); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(90, 10, 4, 0.8), 0 3px 0 #6a2018, 0 0 18px 3px rgba(255, 60, 40, 0.85); }
.tk.on.tk-rec .ico-rec { background: radial-gradient(circle at 36% 30%, #fff, #ffd9d4 60%, #ffb0a4); }
.tk.on.tk-dub { background: linear-gradient(180deg, #ffc468, #ff9a2a 70%, #d36c08); color: #2a1400; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(110, 54, 6, 0.8), 0 3px 0 #94501a, 0 0 18px 3px rgba(255, 150, 30, 0.85); }
.tk.on.tk-dub .ico-dub { border-color: #2a1400; }
.tk.on.tk-dub .ico-dub::after { background: #2a1400; }
.tk.on.tk-play { background: linear-gradient(180deg, #a6f5b0, #3fd964 70%, #1e9c3c); color: #052a10; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(10, 70, 24, 0.8), 0 3px 0 #14702a, 0 0 18px 3px rgba(60, 220, 100, 0.8); }
.tk.on.tk-play .ico-play { border-left-color: #052a10; }
.tk.on.tk-stop { filter: brightness(0.94); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--k-rim), 0 1px 0 var(--k-edge); transform: translateY(2px); }
.tk-play.beat { animation: seq-beat 0.2s ease-out; }
.tk-play.beat-strong { animation: seq-beat-strong 0.3s ease-out; }
@keyframes seq-beat { 0% { filter: brightness(1.28); } 100% { filter: brightness(1); } }
@keyframes seq-beat-strong { 0% { filter: brightness(1.55) saturate(1.2); } 100% { filter: brightness(1); } }
.seq[data-count="1"] .tk-rec { animation: seq-blink 0.5s steps(1) infinite; }
@keyframes seq-blink { 50% { filter: brightness(0.7); } }

/* A: the automation key. Dark = off, amber = read, red = write. A tiny lamp if the pattern has rides. */
.tk-auto { min-width: 0; }
.tk-auto .auto-a {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  font-style: normal;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
.tk-auto.read {
  --k1: #f0c36a;
  --k2: #d4922a;
  --k3: #a86a12;
  --k-edge: #6a4010;
  --k-text: #2a1400;
  --k-hi: rgba(255, 236, 180, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(110, 54, 6, 0.7), 0 3px 0 #94501a, 0 0 12px 2px rgba(255, 170, 40, 0.45);
}
.tk-auto.write {
  --k1: #ff8a78;
  --k2: #ff3b2a;
  --k3: #c61408;
  --k-edge: #6a2018;
  --k-text: #fff;
  --k-hi: rgba(255, 220, 200, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(90, 10, 4, 0.8), 0 3px 0 #6a2018, 0 0 16px 3px rgba(255, 60, 40, 0.75);
}
.tk.on.tk-rsmp, .tk-rsmp.hot {
  background: linear-gradient(180deg, #ff8a78, #ff3b2a 70%, #c61408); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(90, 10, 4, 0.8), 0 3px 0 #6a2018, 0 0 16px 3px rgba(255, 60, 40, 0.75);
}
.tk-rsmp.hot { animation: seq-blink 0.5s steps(1) infinite; }
body[data-skin="sp404"] .tk-rsmp.hot .ico-rsmp-shroom,
body[data-skin="sp404"] .tk.on.tk-rsmp .ico-rsmp-shroom {
  filter: drop-shadow(0 0 4px rgba(196, 120, 232, 0.85));
}
.utilbar .tk-lofi.armed[data-level="1"] {
  --k1: #c8f4f0; --k2: #5ec8c0; --k3: #2a9a94; --k-edge: #1a6e6a; --k-text: #f4f8ff; --k-hi: rgba(255, 255, 255, 0.6);
  color: #f4f8ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(20, 80, 76, 0.7), 0 3px 0 var(--k-edge), 0 0 12px 2px rgba(80, 210, 200, 0.75);
}
.utilbar .tk-lofi.armed[data-level="2"] {
  --k1: #7a9cff; --k2: #3d5ae0; --k3: #243fb0; --k-edge: #162878; --k-text: #f4f8ff; --k-hi: rgba(255, 255, 255, 0.55);
  color: #f4f8ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(16, 28, 90, 0.75), 0 3px 0 var(--k-edge), 0 0 12px 2px rgba(80, 110, 255, 0.85);
}
.utilbar .tk-lofi.armed[data-level="3"] {
  --k1: #8a5cff; --k2: #4a28d4; --k3: #2a1288; --k-edge: #16085a; --k-text: #f4f8ff; --k-hi: rgba(255, 255, 255, 0.5);
  color: #f4f8ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(18, 8, 70, 0.8), 0 3px 0 var(--k-edge), 0 0 14px 2px rgba(130, 80, 255, 0.95);
}
body[data-skin="sp404"] .utilbar .tk-lofi.armed { text-shadow: 0 1px 0 rgba(10, 28, 72, 0.45); }

.tk-auto.has::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd36a;
  box-shadow: 0 0 5px #ffb84a;
  pointer-events: none;
}
.tk-auto.write.has::after { background: #fff; box-shadow: 0 0 6px #fff; }

/* tempo, click, erase */
.seq-tempo { display: flex; align-items: center; gap: 7px; height: 38px; }
.seq-label {
  flex: none;
  width: 46px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--seq-label);
}
.sk { height: 34px; font-size: 13px; font-weight: 800; line-height: 1; }
.sk-step { width: 36px; }
.sk-wide { width: 50px; }
/* (scoped under .seq so they beat the `.seq button { font: inherit }` reset) */
.seq .sk-step { font-size: 22px; font-weight: 700; }
.seq .sk-wide { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.seq .sk.dim { filter: grayscale(0.12) brightness(0.62); }
.seq-bpm {
  flex: 1;
  display: grid;
  place-items: center;
  height: 34px;
  box-sizing: border-box;
  border-radius: 4px;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: ns-resize;
  user-select: none;
  touch-action: none;
}
.sk.on { background: linear-gradient(180deg, var(--lit1), var(--lit2) 70%, var(--lit3)); color: var(--lit-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px var(--k-rim), 0 3px 0 var(--lit-edge), 0 0 10px 1px var(--lit-glow); }
.seq.erase-armed [data-act="erase"] { background: linear-gradient(180deg, #ff8a78, #ff3b2a 70%, #c61408); color: #fff; }

/* bars 1-8 and patterns 1-8 */
.seq-row { display: flex; align-items: center; gap: 7px; height: 38px; }
.seq-keys { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.seq-keys .sk { width: auto; font-size: 14px; }
.seq-keys .sk.has::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--has); box-shadow: 0 0 4px var(--has); }
.seq-keys .sk.on.has::after { background: var(--lit-text); box-shadow: none; }
.seq-keys .sk-trk.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--trk-color) 72%, white), color-mix(in srgb, var(--trk-color) 88%, black));
  color: #1a120c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px color-mix(in srgb, var(--trk-color) 55%, black), 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 12px 1px color-mix(in srgb, var(--trk-color) 45%, transparent);
}
.seq-keys .sk-trk.on.hi {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px var(--trk-color), 0 3px 0 rgba(0, 0, 0, 0.4), 0 0 14px 2px color-mix(in srgb, var(--trk-color) 55%, transparent);
}
.seq-bars-read { cursor: pointer; }
#bars-slip {
  position: fixed;
  z-index: 65;
  width: min(240px, calc(100vw - 16px));
  transform: rotate(-1deg);
  pointer-events: auto;
}
#bars-slip[hidden] { display: none !important; }
.bars-card {
  border-radius: 14px;
  padding: 12px 12px 10px;
  background: linear-gradient(165deg, var(--tour-paper), var(--tour-paper2));
  box-shadow: inset 0 0 0 2px var(--tour-line), 5px 6px 0 var(--tour-pop), 0 16px 32px rgba(0, 0, 0, 0.42);
  color: var(--tour-ink);
}
.bars-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.bars-kicker { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; }
.bars-close { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; opacity: 0.65; }
.bars-lead { margin: 0 0 10px; font-size: 12px; line-height: 1.35; opacity: 0.88; }
.bars-note { margin: 0 0 8px; font-size: 11px; line-height: 1.35; opacity: 0.75; }
.io-booth {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.bars-picks { flex-wrap: wrap; }
#load-slip,
#save-slip {
  position: fixed;
  z-index: 65;
  width: min(272px, calc(100vw - 16px));
  transform: rotate(-1deg);
  pointer-events: auto;
}
#load-slip[hidden],
#save-slip[hidden] { display: none !important; }
.io-actions { flex-direction: column; align-items: stretch; }
.io-actions button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 8px 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.io-actions button small { margin-left: auto; padding-left: 8px; font-size: 10px; opacity: 0.6; letter-spacing: 0; }
.io-actions button.io-quiet { padding: 6px 10px; font-size: 11px; opacity: 0.78; }
.io-name { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 4px; }
.io-name input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px var(--tour-line);
  color: inherit;
  font: inherit;
  font-size: 13px;
}
.io-name input:focus { outline: 2px solid var(--tour-pop); outline-offset: 1px; }
[data-save-file] { font-family: ui-monospace, Menlo, monospace; font-size: 10px; word-break: break-all; }
.kit-save.is-bouncing { animation: kit-bounce-blink 0.8s steps(2, start) infinite; }
@keyframes kit-bounce-blink { to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .kit-save.is-bouncing { animation: none; text-decoration: underline; } }
.note-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 8px 0 4px;
  width: 100%;
}
.note-tool { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: min(100%, 280px); }
.note-tool-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.note-toolbar .note-bars-picks,
.note-toolbar .note-trk-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.note-toolbar .note-bars-picks button,
.note-toolbar .note-trk-picks button {
  flex: 0 0 auto;
  min-width: 52px;
  min-height: 44px;
  padding: 11px 16px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  box-shadow: inset 0 0 0 2px var(--tour-line);
}
.note-toolbar .note-bars-picks button.on,
.note-toolbar .note-trk-picks button.on {
  box-shadow: 3px 3px 0 var(--tour-line);
}
.note-toolbar .note-trk-picks button {
  min-width: 64px;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.note-trk-picks .on, .note-bars-picks .on { /* uses chop-modes .on */ }
.note-trk-picks .on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--trk-color) 70%, white), color-mix(in srgb, var(--trk-color) 90%, black)) !important;
  color: #1a120c !important;
}
.note-trk-picks .on.hi {
  box-shadow: inset 0 0 0 2px var(--trk-color) !important;
}
.note-chip { border: 0; border-radius: 3px; min-width: 8px; }
.note-tool-zoom { flex: 0 1 auto; min-width: 0; }
.note-toolbar .note-zoom-picks { display: flex; align-items: center; gap: 8px; }
.note-toolbar .note-zoom-picks button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px 9px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.note-toolbar .note-zoom-picks button[data-note-zoom="fit"] { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; padding-inline: 14px; }
.note-toolbar .note-zoom-picks button:disabled { opacity: 0.35; cursor: default; }
.note-zoom-read {
  min-width: 58px;
  padding: 9px 8px 8px;
  border-radius: 6px;
  background: #0b0906;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #ffb84a;
  font: 700 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 0 6px rgba(255, 184, 74, 0.55);
  font-variant-numeric: tabular-nums;
}
#note-desk .note-chip, #note-desk .note-ghost { min-width: 0; width: max(3px, calc(var(--note-cell) - 4px)); }

/* ---------- MP 2X look ---------- */
body[data-skin="mpc"] .seq {
  --k1: #f0e9d1; --k2: #dad2b6; --k3: #cac1a3;
  --k-hi: rgba(255, 255, 255, 0.8); --k-rim: rgba(70, 64, 46, 0.55); --k-edge: #8d8670; --k-text: #2a2b2e;
  --lit1: #ffbd62; --lit2: #f08a2e; --lit3: #c96c18; --lit-text: #2a1400; --lit-edge: #8e4a10; --lit-glow: rgba(255, 150, 40, 0.85);
  --has: #c8352a;
  --seq-label: #36373b;
  --seq-dot: #cfe0ff; --seq-beat: rgba(174, 187, 220, 0.16); --seq-bar: rgba(174, 187, 220, 0.42); --seq-head: #ffffff;
  --seq-siren: #ff7a4a; --seq-auto: #8ec8ff;
  --seq-song-a: rgba(160, 185, 230, 0.14); --seq-song-b: rgba(160, 185, 230, 0.28); --seq-song-pick: rgba(210, 225, 255, 0.3);
  --seq-loop: rgba(210, 230, 255, 0.9); --seq-loop-dim: rgba(6, 10, 22, 0.42);
}
body[data-skin="mpc"] .seq::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 10%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #b3b8bf, #a0a6ae);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(56, 62, 72, 0.5), 0 2px 3px rgba(0, 0, 0, 0.22);
}
body[data-skin="mpc"] .seq-lcd {
  color: #aebbdc;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2c4075, #1b2a54);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 3px #17181b, 0 0 0 4px #050506, 0 3px 6px rgba(0, 0, 0, 0.4);
}
body[data-skin="mpc"] .seq-bpm {
  color: #aebbdc;
  background: linear-gradient(180deg, #2c4075, #1b2a54);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 0 2px #17181b, 0 0 0 3px #050506;
}
body[data-skin="mpc"] .tk-rec { --k1: #e07a6a; --k2: #cf5a4a; --k3: #b04336; --k-edge: #6a2018; --k-text: #fff; --k-rim: rgba(80, 22, 16, 0.65); }
body[data-skin="mpc"] .tk-dub { --k1: #f6a548; --k2: #ee8c32; --k3: #d06c1a; --k-edge: #94501a; --k-text: #2a1400; --k-rim: rgba(100, 50, 12, 0.6); }
body[data-skin="mpc"] .seq-keys [data-ptn] { --k1: #6486b3; --k2: #425f8c; --k3: #314b73; --k-edge: #1d3254; --k-text: #f2f6ff; --k-hi: rgba(255, 255, 255, 0.4); --k-rim: rgba(16, 28, 52, 0.65); }
body[data-skin="mpc"] .seq-keys [data-ptn].on { --k-text: #2a1400; }

/* ---------- SP 40 look ---------- */
body[data-skin="sp404"] .seq {
  --k1: #2c2d32; --k2: #121316; --k3: #07070a;
  --k-hi: rgba(255, 255, 255, 0.2); --k-rim: #040405; --k-edge: #000; --k-text: #ff9a3a;
  --lit1: #ffb860; --lit2: #ff7a1a; --lit3: #b84a00; --lit-text: #2a1200; --lit-edge: #7a3000; --lit-glow: rgba(255, 130, 30, 0.9);
  --has: #ff9a3a;
  --seq-label: #c9ccd2;
  --seq-dot: #ff9a3a; --seq-dot-dim: rgba(255, 154, 58, 0.4); --seq-beat: rgba(255, 255, 255, 0.1); --seq-bar: rgba(255, 255, 255, 0.34); --seq-head: #ffffff;
  --seq-siren: #ff5a3a; --seq-auto: #7ad0ff;
  --seq-song-a: rgba(255, 154, 58, 0.12); --seq-song-b: rgba(255, 154, 58, 0.24); --seq-song-pick: rgba(255, 210, 140, 0.3);
  --seq-loop: rgba(255, 210, 140, 0.95); --seq-loop-dim: rgba(0, 0, 0, 0.42);
  --ic-stop: #e8e8ec;
}
body[data-skin="sp404"] .seq::before {
  background: linear-gradient(180deg, #08090a, #17181b);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.16);
}
body[data-skin="sp404"] .seq button { text-shadow: 0 0 5px rgba(255, 130, 30, 0.7); }
body[data-skin="sp404"] .seq .on { text-shadow: none; }
body[data-skin="sp404"] .seq-lcd {
  color: #f4f8ff;
  text-shadow: 0 0 8px rgba(190, 215, 255, 0.6);
  background: radial-gradient(ellipse at 50% 0%, #1c1d22, #050507 75%);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.85), 0 0 0 2px #000, 0 0 0 3px #45464b;
}
body[data-skin="sp404"] .seq-bpm {
  color: #f4f8ff;
  text-shadow: 0 0 8px rgba(190, 215, 255, 0.7);
  background: radial-gradient(ellipse at 50% 0%, #1c1d22, #050507 75%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85), 0 0 0 2px #000, 0 0 0 3px #45464b;
}
body[data-skin="sp404"] .tk-rec { --k-text: #ff6a74; }
body[data-skin="sp404"] .tk-dub { --k-text: #ff9a3a; }
body[data-skin="sp404"] .tk-play { --k-text: #7dff9c; }
body[data-skin="sp404"] .tk-stop { --k-text: #e8e8ec; }

@media (prefers-reduced-motion: reduce) {
  .tk-play.beat, .tk-play.beat-strong, .seq[data-count="1"] .tk-rec { animation: none; }
}

/* SP 40: the hot key is the big legend on the pad; the pad number moves into the small window */
.sp-pad::after {
  content: attr(data-k);
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  text-align: center;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  color: #ff9a3a;
  text-shadow: 0 0 8px rgba(255, 130, 30, 0.7);
  pointer-events: none;
}
.sp-pad.hit::after, .sp-pad:active::after { text-shadow: none; }

/* hot key legends on the sequencer keys */
.seq button[data-hk]::before {
  content: attr(data-hk);
  position: absolute;
  top: 3px;
  right: 4px;
  padding: 1px 3px;
  border-radius: 2px;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: none;
  color: currentColor;
  opacity: 0.62;
  background: rgba(0, 0, 0, 0.14);
  pointer-events: none;
}
.seq .sk-step[data-hk]::before, .seq .sk-wide[data-hk]::before { top: 2px; right: 2px; font-size: 6.5px; padding: 1px 2px; }
.seq-label { display: flex; flex-direction: column; gap: 3px; }
.seq-label small { font-size: 7px; font-weight: 700; letter-spacing: 0.04em; text-transform: none; opacity: 0.7; white-space: nowrap; }

/* copy: pattern keys blink, and so do the pads. A pad you already sampled asks twice. */
@keyframes seq-copy-blink { 50% { filter: brightness(1.5); } }
.seq.copying .seq-keys[data-group="ptn"] .sk:not(.on) { animation: seq-copy-blink 0.7s steps(1) infinite; }
.seq-keys .sk.confirm { background: linear-gradient(180deg, #ff8a78, #ff3b2a 70%, #c61408); color: #fff; animation: none !important; }
body.copying-pads[data-skin="mpc"] .mpc-pad:not(.copy-src):not(.copy-confirm),
body.copying-pads[data-skin="sp404"] .sp-pad:not(.copy-src):not(.copy-confirm) {
  animation: seq-copy-blink 0.7s steps(1) infinite;
}
.mpc-pad.copy-src,
.sp-pad.copy-src {
  animation: none !important;
  outline: 2px solid #ffb84a;
  outline-offset: 1px;
}
.mpc-pad.copy-confirm,
.sp-pad.copy-confirm {
  animation: none !important;
  outline: 2px solid #ff3b2a;
  outline-offset: 1px;
}
.seq-row .sk-wide { flex: none; }

/* the MP's own LCD and function keys sit on top of the (now full-height) pad panel */

.zoom { display: none; }

body.overlay .plinth .zoom:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 6px 0 10px;
  border-radius: 999px;
  background: rgba(12, 8, 6, 0.82);
  color: rgba(255, 214, 160, 0.92);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 196, 110, 0.32);
  backdrop-filter: blur(4px);
}

body.overlay:not(.is-min) .dock-tray .zoom:not([hidden]) {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  gap: 6px;
  padding: 8px 10px 9px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
  color: var(--tour-ink);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  backdrop-filter: none;
}
body.overlay:not(.is-min) .dock-tray .zoom-name {
  font-size: 10px;
  font-weight: 900;
  color: var(--tour-ink);
}
body.overlay:not(.is-min) .dock-tray .zoom-keys { width: 100%; }
body.overlay:not(.is-min) .dock-tray .zoom-key {
  flex: 1;
  min-width: 0;
  height: 26px;
  font-size: 11px;
  font-weight: 900;
  color: var(--tour-ink);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 2px 2px 0 var(--tour-line);
}
body.overlay:not(.is-min) .dock-tray .zoom-key.is-on {
  color: var(--tour-pop-ink);
  background: var(--tour-pop);
  box-shadow: 2px 2px 0 var(--tour-line);
}

.midi-pick { display: none; }
body.overlay:not(.is-min) .dock-tray .midi-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 9px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
body.overlay:not(.is-min) .dock-tray .midi-pick-name {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tour-ink);
}
body.overlay:not(.is-min) .dock-tray .midi-pick select {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--tour-ink);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 2px 2px 0 var(--tour-line);
}

body.overlay:not(.is-min) .dock-tray .dock {
  height: 36px;
  padding: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--tour-ink);
  background: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  backdrop-filter: none;
}
body[data-skin="sp404"].overlay:not(.is-min) .dock-tray .dock:not(.dock-close):not(.dock-more):not(.is-armed) {
  background: rgba(255, 214, 160, 0.06);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 196, 120, 0.78),
    0 0 0 1px rgba(0, 0, 0, 0.7);
}
body.overlay:not(.is-min) .dock-tray .dock-close {
  color: var(--tour-pop-ink);
  background: var(--tour-pop);
  box-shadow: 0 4px 0 var(--tour-line), 0 8px 16px rgba(0, 0, 0, 0.22);
}
body.overlay.is-min .dock-clear,
body:not([data-skin="mpc"]):not([data-skin="sp404"]) .dock-clear {
  display: none !important;
}
#hear-desk {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
}
#hear-desk[hidden] { display: none; }
body.overlay #hear-mac[hidden],
body.overlay.is-min #hear-mac { display: none !important; }
#hear-desk .hear-card {
  width: min(440px, calc(100vw - 28px));
  pointer-events: auto;
}
#hear-desk .note-fog { cursor: pointer; }
.hear-steps {
  margin: 10px 0 14px;
  padding: 0 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
}
.hear-steps li { margin: 0 0 8px; }
.hear-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#pocket {
  display: none;
  box-sizing: border-box;
  width: 720px;
  height: 120px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  overflow: hidden;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.096), transparent 46%),
    color-mix(in srgb, var(--face) 27.6%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 0 0 3px color-mix(in srgb, var(--shell) 42%, transparent);
}
#pocket[hidden] { display: none !important; }
body.is-pocket #stage { display: none !important; }
body.is-pocket #pocket {
  display: flex;
}
html:has(body.is-pocket),
body.is-pocket,
body.desktop.is-pocket,
body.overlay.is-pocket,
body.preview.is-pocket {
  background: transparent !important;
  overflow: hidden;
}
body.desktop.is-pocket #pocket,
body.overlay.is-pocket #pocket {
  width: 100%;
  height: 100%;
}
body.desktop.is-pocket #pocket { padding-left: 68px; }
body.preview.is-pocket:not(.desktop) {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: transparent !important;
}
body.preview.is-pocket:not(.desktop) #pocket {
  width: 720px;
  height: 120px;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 18px 40px rgba(0, 0, 0, 0.45);
}
body[data-skin="sp404"] #pocket,
body[data-skin="synthwave"] #pocket { color: #f4ead8; }
body[data-skin="reggae"] #pocket { color: #f6efe2; }
#pocket .pocket-meter {
  flex: 0 0 54px;
  width: 54px;
  padding: 2px 2px 0;
}
#pocket .pocket-meter span { font-size: 8px; letter-spacing: 0.14em; margin-top: 0; }
#pocket .pocket-skin,
#pocket .pocket-presets button,
#pocket-full,
#pocket-close {
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
#pocket .pocket-skin {
  flex: 0 0 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
#pocket .pocket-skin .swatch { width: 22px; height: 14px; border-radius: 3px; }
#pocket .pocket-skin span {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#pocket .pocket-presets {
  flex: 1 1 96px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 2px;
  border-radius: 8px;
  background: #1a120c;
  color: #f0d7a4;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65), 0 0 0 1px #3a2a1c;
}
#pocket .pocket-presets button {
  flex: none;
  width: 18px;
  height: 28px;
  padding: 0;
  border-radius: 4px;
  background: transparent;
  color: #f0d7a4;
  font-size: 16px;
  line-height: 1;
}
#pocket .pocket-presets span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#pocket .pocket-knob {
  flex: none;
  width: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  touch-action: none;
  cursor: ns-resize;
}
#pocket .pocket-cap {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, var(--kn-sk1, #e6d3b0), var(--kn-sk2, #b08958) 55%, var(--kn-sk3, #6a4a2c));
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}
#pocket .pocket-cap b {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 2px;
  height: 10px;
  border-radius: 1px;
  background: #1a100a;
  transform: translateX(-50%) rotate(var(--rot, -135deg));
  transform-origin: 50% 12px;
}
#pocket .pocket-knob span,
#pocket .pocket-level-wrap > span {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#pocket .pocket-level-wrap {
  flex: 0 0 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#pocket .pocket-level {
  position: relative;
  width: 64px;
  height: 16px;
  border-radius: 8px;
  background: #1a120c;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.35);
  touch-action: none;
  cursor: ew-resize;
}
#pocket .pocket-level i {
  position: absolute;
  top: 1px;
  left: calc(var(--t, 0.8) * (100% - 14px));
  width: 12px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f3e2b8, #c4924a 55%, #7a5424);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
#pocket-full,
#pocket-close {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tour-pop-ink, #2a160c);
  background: var(--tour-pop, #e2b657);
  box-shadow: 0 3px 0 var(--tour-line, #6a4a22);
}
#pocket-close {
  color: #f6efe2;
  background: #3a221c;
  box-shadow: 0 3px 0 #1a0e0c;
}
#pocket-full:active,
#pocket-close:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tour-line, #6a4a22); }
#pocket-close:active { box-shadow: 0 1px 0 #1a0e0c; }

body.overlay:not(.is-min) .dock-tray .dock-clear.is-armed {
  color: #fff4ea;
  background: #8b2d24;
  box-shadow: 0 4px 0 #4a1410, 0 8px 16px rgba(0, 0, 0, 0.22);
}

.zoom-name {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.zoom-keys {
  display: flex;
  align-items: center;
  gap: 3px;
}

.zoom-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  background: #1a140e;
  color: rgba(255, 214, 160, 0.72);
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 0 1px rgba(255, 196, 110, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.zoom-key.is-on {
  background: linear-gradient(180deg, #4a3620, #2c1e12);
  color: #ffd49a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 196, 110, 0.55),
    inset 0 1px 0 rgba(255, 230, 180, 0.28),
    0 0 8px rgba(255, 180, 80, 0.18);
}

body.overlay.is-min .zoom { display: none !important; }

/* ==========================================================================
   Input fader, Bypass and Presets
   ========================================================================== */
.faders-compact { gap: 3px; }
.faders-compact .fader { width: 36px; }
.faders-compact .f-name { font-size: 8.5px; letter-spacing: 0.08em; }

.rocker-bypass.on .rocker-cap { box-shadow: inset 0 0 8px rgba(255, 90, 60, 0.55), 0 1px 0 rgba(255, 255, 255, 0.4); }
.rocker-bypass.on .rocker-cap::after { background: radial-gradient(circle at 35% 35%, #ffd9c8, #d8604a); }

.presets {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 178px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
}
.pst-row { display: flex; align-items: stretch; gap: 4px; flex: none; }
.pst-io {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 5px;
  margin-top: 6px;
}
.pst-io-btn {
  --k1: #f6ead8;
  --k2: #dcc6a8;
  --k3: #b89a78;
  --k-hi: rgba(255, 255, 255, 0.85);
  --k-rim: rgba(74, 48, 28, 0.5);
  --k-edge: #6e5340;
  --k-text: #3a2a1c;
  isolation: isolate;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  height: 20px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: var(--k2);
  background-image: linear-gradient(180deg, var(--k1), var(--k2) 70%, var(--k3));
  color: var(--k-text);
  font: 800 8px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 var(--k-hi),
    0 0 0 1px var(--k-rim),
    0 2px 0 var(--k-edge),
    0 3px 3px rgba(0, 0, 0, 0.28);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.pst-io-btn .tx {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), transparent 34%);
}
.pst-io-btn .tx::before {
  content: "";
  position: absolute;
  inset: 2px 3px 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.02) 55%, rgba(0, 0, 0, 0.08));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    inset -1px -1px 0 rgba(0, 0, 0, 0.18);
}
.pst-io-btn > span {
  position: relative;
  z-index: 1;
}
.pst-io-btn:hover { filter: brightness(1.06); }
.pst-io-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--k-rim);
}
.pst-io-btn:active .tx { filter: brightness(0.94); }
.pst-io-btn:focus-visible { outline: 2px solid #ffb84a; outline-offset: 2px; }
body[data-skin="mpc"] .pst-io-btn {
  --k1: #f0e9d1; --k2: #dad2b6; --k3: #cac1a3;
  --k-hi: rgba(255, 255, 255, 0.8); --k-rim: rgba(70, 64, 46, 0.55); --k-edge: #8d8670; --k-text: #2a2b2e;
  border-radius: 2px;
}
body[data-skin="mpc"] .pst-io-btn .tx::before { border-radius: 1px; }
body[data-skin="sp404"] .pst-io-btn {
  --k1: #2c2d32; --k2: #121316; --k3: #07070a;
  --k-hi: rgba(255, 255, 255, 0.2); --k-rim: #040405; --k-edge: #000; --k-text: #ff9a3a;
  border-radius: 6px;
  text-shadow: 0 0 5px rgba(255, 130, 30, 0.55);
}
body[data-skin="sp404"] .pst-io-btn .tx::before { border-radius: 4px; }

.pst-step {
  flex: none;
  width: 22px;
  border: 0;
  border-radius: 4px;
  background: #c4b29a;
  color: #5c463a;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.pst-step:active { transform: translateY(1px); }

.pst-win {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 6px 8px 5px;
  border: 0;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(180deg, #1a120b, #120d08);
  box-shadow: inset 0 0 0 1px #3a2a1c, inset 0 8px 16px rgba(0, 0, 0, 0.45);
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 170, 50, 0.75);
  text-transform: uppercase;
}
.pst-num { font-size: 9px; letter-spacing: 0.14em; opacity: 0.72; }
.pst-name { font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pst-win.custom { opacity: 0.7; }
.pst-win.push .pst-num { color: #ff8a5a; }
body:not(.is-on) .pst-win { color: #6a5438; text-shadow: none; }

.pst-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 268px;
  overflow: hidden;
  padding: 4px;
  border-radius: 6px;
  background: #1a120b;
  box-shadow: inset 0 0 0 1px #3a2a1c, 0 8px 22px rgba(0, 0, 0, 0.55);
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
}
.pst-menu[hidden] { display: none; }
#preset-list { overflow-y: auto; min-height: 0; }
.presets.is-open { z-index: 40; }
.pst-head { padding: 4px 6px 2px; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #8a6a44; }
.pst-item {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 3px 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #e6c78a;
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.pst-item span:first-child { flex: none; opacity: 0.55; }
.pst-item:hover { background: rgba(255, 170, 50, 0.14); }
.pst-item.on { color: var(--amber); background: rgba(255, 170, 50, 0.22); text-shadow: 0 0 6px rgba(255, 170, 50, 0.6); }

.pst-slip {
  position: absolute;
  z-index: 32;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 10px 10px 8px;
  border-radius: 10px;
  color: var(--tour-ink);
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, var(--tour-blush), transparent 70%),
    linear-gradient(165deg, var(--tour-paper), var(--tour-paper2));
  box-shadow:
    inset 0 0 0 1.5px var(--tour-line),
    inset 0 0 0 4px rgba(255, 255, 255, 0.16),
    4px 5px 0 var(--tour-pop),
    0 12px 22px rgba(0, 0, 0, 0.38);
  transform: rotate(-1.2deg);
  transform-origin: 18% 0;
}
.pst-slip[hidden] { display: none; }
.pst-kicker {
  display: inline-block;
  margin: 0 0 2px;
  padding: 2px 7px 1px;
  border-radius: 4px;
  background: var(--tour-pop);
  color: var(--tour-pop-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--tour-line);
}
.pst-slip label {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pst-slip input {
  width: 100%;
  border: 0;
  border-radius: 4px;
  padding: 5px 6px;
  background: #1a120b;
  color: var(--amber);
  font: 11px/1.3 "SF Mono", "Courier New", ui-monospace, monospace;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px #3a2a1c;
}
.pst-slip-row { display: flex; gap: 6px; margin-top: 8px; }
.pst-slip-row button {
  flex: 1;
  min-height: 26px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, #efe4d4 0%, #c4b29a 100%);
  color: #3e2c22;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 3px rgba(0, 0, 0, 0.28);
}
.pst-slip-row button:active { transform: translateY(1px); }

/* ==========================================================================
   Analog character for the drum machines. Real-hardware materials, kept honest:
   fine ABS / rubber grain, painted panels with slotted screws, cut-out key
   openings, two-part keycaps (sloped skirt + flat top), convex rubber pads,
   and wear only where hands and edges would actually wear it.
   Surface only: sizes and layout are untouched.
   ========================================================================== */
/* generated surface textures (SVG noise, scratches, chips, dents, dust). Used by the MP and SP 40 skins. */
body[data-skin="mpc"], body[data-skin="sp404"] {
  --tx-grain-dk: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.95%200.95'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200.7%200%200%200%20-0.33'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-grain-lt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8%200.8'%20numOctaves='2'%20seed='9'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.65%200%200%200%20-0.31'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-mottle: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.028%200.028'%20numOctaves='3'%20seed='21'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.35%20%200%200%200%200%200.28%20%200%200%200%200%200.12%20%200.4%200%200%200%20-0.17'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-mottle-lt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.02'%20numOctaves='3'%20seed='14'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%200.92%20%200.35%200%200%200%20-0.15'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-brush: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='160'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.004%200.9'%20numOctaves='2'%20seed='5'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.7%200%200%200%20-0.32'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-brush-dk: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='160'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.004%200.8'%20numOctaves='2'%20seed='6'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200.7%200%200%200%20-0.32'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-scr-lt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='764'%20height='408'%20viewBox='0%200%20764%20408'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M345.6%20228.4Q346.3%20238.7%20348.1%20248.8'%20stroke='white'%20stroke-width='0.4'%20opacity='0.14'/%3E%3Cpath%20d='M231.8%2037.0Q239.8%2033.3%20248.1%2030.6'%20stroke='white'%20stroke-width='0.4'%20opacity='0.23'/%3E%3Cpath%20d='M635.4%2025.8Q638.8%2025.3%20642.0%2024.4'%20stroke='white'%20stroke-width='0.6'%20opacity='0.23'/%3E%3Cpath%20d='M149.2%2095.3Q153.6%20104.7%20158.0%20114.0'%20stroke='white'%20stroke-width='0.8'%20opacity='0.30'/%3E%3Cpath%20d='M641.9%20288.8Q644.5%20296.7%20645.2%20304.9'%20stroke='white'%20stroke-width='0.3'%20opacity='0.27'/%3E%3Cpath%20d='M0.4%2085.6Q8.2%2079.9%2015.4%2073.5'%20stroke='white'%20stroke-width='0.4'%20opacity='0.26'/%3E%3Cpath%20d='M206.1%2035.6Q206.5%2045.7%20207.1%2055.9'%20stroke='white'%20stroke-width='0.8'%20opacity='0.15'/%3E%3Cpath%20d='M388.8%20402.0Q404.3%20403.9%20419.9%20404.3'%20stroke='white'%20stroke-width='0.3'%20opacity='0.30'/%3E%3Cpath%20d='M162.9%20105.4Q164.1%20110.6%20164.4%20116.0'%20stroke='white'%20stroke-width='0.4'%20opacity='0.12'/%3E%3Cpath%20d='M281.7%20253.8Q304.3%20262.2%20326.4%20271.9'%20stroke='white'%20stroke-width='0.4'%20opacity='0.23'/%3E%3Cpath%20d='M237.5%2093.2Q254.0%2095.5%20270.1%2099.6'%20stroke='white'%20stroke-width='0.6'%20opacity='0.28'/%3E%3Cpath%20d='M461.1%20172.0Q464.2%20171.9%20467.2%20171.3'%20stroke='white'%20stroke-width='0.6'%20opacity='0.17'/%3E%3Cpath%20d='M629.3%20243.4Q635.1%20251.9%20640.4%20260.8'%20stroke='white'%20stroke-width='0.8'%20opacity='0.23'/%3E%3Cpath%20d='M214.1%20374.3Q223.5%20375.9%20232.7%20378.2'%20stroke='white'%20stroke-width='0.3'%20opacity='0.15'/%3E%3Cpath%20d='M281.8%20233.4Q291.4%20236.5%20301.2%20239.1'%20stroke='white'%20stroke-width='0.8'%20opacity='0.23'/%3E%3Cpath%20d='M107.2%2014.3Q115.2%2011.2%20123.1%207.8'%20stroke='white'%20stroke-width='0.8'%20opacity='0.23'/%3E%3Cpath%20d='M368.4%20298.0Q369.8%20308.1%20371.8%20318.0'%20stroke='white'%20stroke-width='0.3'%20opacity='0.28'/%3E%3Cpath%20d='M563.1%20287.1Q564.6%20293.5%20567.6%20299.3'%20stroke='white'%20stroke-width='0.6'%20opacity='0.22'/%3E%3Cpath%20d='M477.5%20156.0Q483.4%20154.0%20489.5%20152.3'%20stroke='white'%20stroke-width='0.8'%20opacity='0.20'/%3E%3Cpath%20d='M353.4%20220.8Q370.2%20216.9%20386.6%20211.7'%20stroke='white'%20stroke-width='0.3'%20opacity='0.19'/%3E%3Cpath%20d='M109.4%20249.6Q145.6%20254.0%20180.5%20265.0'%20stroke='white'%20stroke-width='0.4'%20opacity='0.18'/%3E%3Cpath%20d='M508.7%2081.0Q508.0%2087.7%20505.3%2093.8'%20stroke='white'%20stroke-width='0.4'%20opacity='0.22'/%3E%3Cpath%20d='M241.8%2055.6Q241.2%2059.7%20242.0%2063.8'%20stroke='white'%20stroke-width='0.4'%20opacity='0.27'/%3E%3Cpath%20d='M292.3%20212.1Q298.8%20225.3%20300.0%20239.9'%20stroke='white'%20stroke-width='0.3'%20opacity='0.17'/%3E%3C/svg%3E");
  --tx-scr-dk: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='764'%20height='408'%20viewBox='0%200%20764%20408'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M398.8%20329.1Q401.3%20351.7%20411.0%20372.3'%20stroke='black'%20stroke-width='0.3'%20opacity='0.23'/%3E%3Cpath%20d='M190.2%20332.6Q189.6%20334.4%20189.5%20336.4'%20stroke='black'%20stroke-width='0.6'%20opacity='0.14'/%3E%3Cpath%20d='M421.1%2057.1Q452.4%2073.3%20486.8%2081.3'%20stroke='black'%20stroke-width='0.4'%20opacity='0.16'/%3E%3Cpath%20d='M94.4%20292.0Q124.4%20284.9%20153.9%20275.6'%20stroke='black'%20stroke-width='0.8'%20opacity='0.14'/%3E%3Cpath%20d='M620.5%20331.9Q620.7%20336.4%20621.1%20341.0'%20stroke='black'%20stroke-width='0.6'%20opacity='0.15'/%3E%3Cpath%20d='M425.4%20390.6Q425.8%20393.5%20426.3%20396.3'%20stroke='black'%20stroke-width='0.8'%20opacity='0.18'/%3E%3Cpath%20d='M688.9%20102.1Q690.4%20113.3%20691.0%20124.7'%20stroke='black'%20stroke-width='0.3'%20opacity='0.13'/%3E%3Cpath%20d='M756.8%207.8Q758.2%2013.3%20759.7%2018.7'%20stroke='black'%20stroke-width='0.6'%20opacity='0.12'/%3E%3Cpath%20d='M431.0%20279.9Q435.7%20304.4%20441.4%20328.7'%20stroke='black'%20stroke-width='0.5'%20opacity='0.22'/%3E%3Cpath%20d='M37.8%20377.8Q46.4%20374.4%2055.5%20372.5'%20stroke='black'%20stroke-width='0.8'%20opacity='0.20'/%3E%3Cpath%20d='M184.7%20217.2Q194.6%20233.7%20201.8%20251.7'%20stroke='black'%20stroke-width='0.4'%20opacity='0.19'/%3E%3Cpath%20d='M394.0%20181.6Q393.2%20188.8%20391.5%20195.8'%20stroke='black'%20stroke-width='0.5'%20opacity='0.19'/%3E%3Cpath%20d='M734.6%20235.8Q731.1%20242.1%20728.3%20248.8'%20stroke='black'%20stroke-width='0.4'%20opacity='0.16'/%3E%3Cpath%20d='M271.6%20241.3Q284.7%20236.5%20297.8%20231.9'%20stroke='black'%20stroke-width='0.4'%20opacity='0.17'/%3E%3Cpath%20d='M340.4%20205.7Q338.8%20228.2%20338.2%20250.7'%20stroke='black'%20stroke-width='0.5'%20opacity='0.15'/%3E%3Cpath%20d='M204.1%20211.2Q239.1%20209.4%20273.9%20206.3'%20stroke='black'%20stroke-width='0.3'%20opacity='0.21'/%3E%3C/svg%3E");
  --tx-chips-mpc: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='764'%20height='408'%20viewBox='0%200%20764%20408'%3E%3Cpolygon%20points='7.4,112.0%205.9,112.6%203.5,112.9%203.5,111.9%204.7,111.2%205.4,111.0'%20fill='%238c8571'%20opacity='0.85'/%3E%3Cpolygon%20points='7.4,112.0%205.9,112.6%203.5,112.9%203.5,111.9%204.7,111.2%205.4,111.0'%20fill='none'%20stroke='%23fffdf2'%20stroke-width='0.6'%20opacity='0.8'%20transform='translate%280.5%200.6%29'/%3E%3Ccircle%20cx='5.0'%20cy='112.0'%20r='3.4'%20fill='rgba%280,0,0,0.07%29'/%3E%3Cpolygon%20points='760.7,281.0%20760.2,281.7%20759.0,282.7%20758.3,282.0%20756.8,281.6%20756.5,280.7%20757.7,279.7%20758.9,280.1%20760.0,280.2'%20fill='%238c8571'%20opacity='0.85'/%3E%3Cpolygon%20points='760.7,281.0%20760.2,281.7%20759.0,282.7%20758.3,282.0%20756.8,281.6%20756.5,280.7%20757.7,279.7%20758.9,280.1%20760.0,280.2'%20fill='none'%20stroke='%23fffdf2'%20stroke-width='0.6'%20opacity='0.8'%20transform='translate%280.5%200.6%29'/%3E%3Ccircle%20cx='759.0'%20cy='281.0'%20r='3.8'%20fill='rgba%280,0,0,0.07%29'/%3E%3Cpolygon%20points='10.5,395.4%209.5,396.1%205.7,396.6%204.4,396.1%205.3,394.3%206.7,393.7%207.9,393.7'%20fill='%238c8571'%20opacity='0.85'/%3E%3Cpolygon%20points='10.5,395.4%209.5,396.1%205.7,396.6%204.4,396.1%205.3,394.3%206.7,393.7%207.9,393.7'%20fill='none'%20stroke='%23fffdf2'%20stroke-width='0.6'%20opacity='0.8'%20transform='translate%280.5%200.6%29'/%3E%3Ccircle%20cx='7.0'%20cy='395.0'%20r='4.6'%20fill='rgba%280,0,0,0.07%29'/%3E%3Cpolygon%20points='752.0,401.1%20751.1,401.8%20750.4,402.4%20748.8,402.2%20748.0,400.7%20748.8,399.7%20749.8,400.1%20751.2,399.7'%20fill='%238c8571'%20opacity='0.85'/%3E%3Cpolygon%20points='752.0,401.1%20751.1,401.8%20750.4,402.4%20748.8,402.2%20748.0,400.7%20748.8,399.7%20749.8,400.1%20751.2,399.7'%20fill='none'%20stroke='%23fffdf2'%20stroke-width='0.6'%20opacity='0.8'%20transform='translate%280.5%200.6%29'/%3E%3Ccircle%20cx='750.0'%20cy='401.0'%20r='3.4'%20fill='rgba%280,0,0,0.07%29'/%3E%3C/svg%3E");
  --tx-chips-sp: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='764'%20height='408'%20viewBox='0%200%20764%20408'%3E%3Cpolygon%20points='7.0,117.7%206.1,118.7%205.1,119.3%203.2,118.8%203.8,117.8%203.8,116.7%205.2,117.2%206.4,117.4'%20fill='%23c9cbd0'%20opacity='0.85'/%3E%3Cpolygon%20points='7.0,117.7%206.1,118.7%205.1,119.3%203.2,118.8%203.8,117.8%203.8,116.7%205.2,117.2%206.4,117.4'%20fill='none'%20stroke='%23ffffff'%20stroke-width='0.6'%20opacity='0.8'%20transform='translate%280.5%200.6%29'/%3E%3Ccircle%20cx='5.0'%20cy='118.0'%20r='3.4'%20fill='rgba%280,0,0,0.07%29'/%3E%3Cpolygon%20points='761.2,289.8%20761.4,291.0%20759.9,291.1%20757.6,291.2%20756.5,290.5%20756.3,289.7%20758.6,289.1%20759.1,288.8%20760.6,289.0'%20fill='%23c9cbd0'%20opacity='0.85'/%3E%3Cpolygon%20points='761.2,289.8%20761.4,291.0%20759.9,291.1%20757.6,291.2%20756.5,290.5%20756.3,289.7%20758.6,289.1%20759.1,288.8%20760.6,289.0'%20fill='none'%20stroke='%23ffffff'%20stroke-width='0.6'%20opacity='0.8'%20transform='translate%280.5%200.6%29'/%3E%3Ccircle%20cx='759.0'%20cy='290.0'%20r='3.8'%20fill='rgba%280,0,0,0.07%29'/%3E%3Cpolygon%20points='10.3,394.5%209.5,396.1%207.3,396.6%205.7,396.3%203.7,395.2%205.3,393.3%207.6,392.9%208.8,393.7'%20fill='%23c9cbd0'%20opacity='0.85'/%3E%3Cpolygon%20points='10.3,394.5%209.5,396.1%207.3,396.6%205.7,396.3%203.7,395.2%205.3,393.3%207.6,392.9%208.8,393.7'%20fill='none'%20stroke='%23ffffff'%20stroke-width='0.6'%20opacity='0.8'%20transform='translate%280.5%200.6%29'/%3E%3Ccircle%20cx='7.0'%20cy='395.0'%20r='4.6'%20fill='rgba%280,0,0,0.07%29'/%3E%3Cpolygon%20points='753.4,401.8%20753.0,402.7%20751.0,403.3%20750.1,402.8%20748.5,402.6%20749.3,401.2%20749.6,400.6%20751.5,400.5%20752.0,401.2'%20fill='%23c9cbd0'%20opacity='0.85'/%3E%3Cpolygon%20points='753.4,401.8%20753.0,402.7%20751.0,403.3%20750.1,402.8%20748.5,402.6%20749.3,401.2%20749.6,400.6%20751.5,400.5%20752.0,401.2'%20fill='none'%20stroke='%23ffffff'%20stroke-width='0.6'%20opacity='0.8'%20transform='translate%280.5%200.6%29'/%3E%3Ccircle%20cx='751.0'%20cy='402.0'%20r='3.4'%20fill='rgba%280,0,0,0.07%29'/%3E%3C/svg%3E");
  --tx-dings: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='764'%20height='408'%20viewBox='0%200%20764%20408'%3E%3Cdefs%3E%3CradialGradient%20id='d'%3E%3Cstop%20offset='0'%20stop-color='black'%20stop-opacity='.55'/%3E%3Cstop%20offset='.6'%20stop-color='black'%20stop-opacity='.25'/%3E%3Cstop%20offset='1'%20stop-color='black'%20stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx='12'%20cy='351'%20r='3.1'%20fill='url%28%23d%29'/%3E%3Cpath%20d='M11.2%20352.6A1.8%201.8%200%200%201%2011.5%20349.3'%20stroke='white'%20stroke-opacity='.75'%20stroke-width='.7'%20fill='none'/%3E%3Cpath%20d='M12.9%20349.4A1.8%201.8%200%200%201%2012.7%20352.6'%20stroke='black'%20stroke-opacity='.5'%20stroke-width='.7'%20fill='none'/%3E%3Ccircle%20cx='751'%20cy='222'%20r='2.5'%20fill='url%28%23d%29'/%3E%3Cpath%20d='M751.9%20223.2A1.5%201.5%200%200%201%20749.5%20221.7'%20stroke='white'%20stroke-opacity='.75'%20stroke-width='.7'%20fill='none'/%3E%3Cpath%20d='M750.2%20220.7A1.5%201.5%200%200%201%20752.5%20222.1'%20stroke='black'%20stroke-opacity='.5'%20stroke-width='.7'%20fill='none'/%3E%3Ccircle%20cx='738'%20cy='399'%20r='2.7'%20fill='url%28%23d%29'/%3E%3Cpath%20d='M737.1%20397.7A1.6%201.6%200%200%201%20739.6%20399.3'%20stroke='white'%20stroke-opacity='.75'%20stroke-width='.7'%20fill='none'/%3E%3Cpath%20d='M738.9%20400.4A1.6%201.6%200%200%201%20736.4%20398.9'%20stroke='black'%20stroke-opacity='.5'%20stroke-width='.7'%20fill='none'/%3E%3C/svg%3E");
  --tx-dust-chassis: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='764'%20height='408'%20viewBox='0%200%20764%20408'%3E%3Ccircle%20cx='475.9'%20cy='302.6'%20r='0.61'%20fill='white'%20opacity='0.29'/%3E%3Ccircle%20cx='704.7'%20cy='11.8'%20r='0.46'%20fill='white'%20opacity='0.29'/%3E%3Ccircle%20cx='688.3'%20cy='46.2'%20r='0.46'%20fill='white'%20opacity='0.15'/%3E%3Ccircle%20cx='438.5'%20cy='5.4'%20r='0.35'%20fill='white'%20opacity='0.16'/%3E%3Ccircle%20cx='585.0'%20cy='65.1'%20r='0.61'%20fill='white'%20opacity='0.13'/%3E%3Ccircle%20cx='96.8'%20cy='0.7'%20r='0.64'%20fill='white'%20opacity='0.14'/%3E%3Ccircle%20cx='750.6'%20cy='355.9'%20r='0.38'%20fill='white'%20opacity='0.29'/%3E%3Ccircle%20cx='517.9'%20cy='83.6'%20r='0.67'%20fill='white'%20opacity='0.24'/%3E%3Ccircle%20cx='682.8'%20cy='121.9'%20r='0.41'%20fill='white'%20opacity='0.13'/%3E%3Ccircle%20cx='49.8'%20cy='123.0'%20r='0.52'%20fill='white'%20opacity='0.10'/%3E%3Ccircle%20cx='258.2'%20cy='126.5'%20r='0.62'%20fill='white'%20opacity='0.20'/%3E%3Ccircle%20cx='367.7'%20cy='287.5'%20r='0.28'%20fill='white'%20opacity='0.30'/%3E%3Cpath%20d='M367.7%20287.5q-0.0%20-2.0%20-0.0%20-9.9'%20stroke='white'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='13.8'%20cy='321.4'%20r='0.41'%20fill='white'%20opacity='0.22'/%3E%3Cpath%20d='M13.8%20321.4q2.5%203.8%205.0%201.5'%20stroke='white'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='729.8'%20cy='80.2'%20r='0.59'%20fill='white'%20opacity='0.29'/%3E%3Ccircle%20cx='263.1'%20cy='144.8'%20r='0.49'%20fill='white'%20opacity='0.26'/%3E%3Cpath%20d='M263.1%20144.8q-0.1%20-1.8%20-0.1%20-9.6'%20stroke='white'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='656.8'%20cy='14.9'%20r='0.68'%20fill='white'%20opacity='0.12'/%3E%3Ccircle%20cx='466.7'%20cy='374.6'%20r='0.40'%20fill='white'%20opacity='0.28'/%3E%3Ccircle%20cx='238.7'%20cy='129.3'%20r='0.33'%20fill='white'%20opacity='0.12'/%3E%3Ccircle%20cx='526.5'%20cy='406.7'%20r='0.32'%20fill='white'%20opacity='0.11'/%3E%3Ccircle%20cx='407.6'%20cy='165.6'%20r='0.36'%20fill='white'%20opacity='0.22'/%3E%3Ccircle%20cx='348.1'%20cy='172.1'%20r='0.28'%20fill='white'%20opacity='0.28'/%3E%3Cpath%20d='M348.1%20172.1q-4.9%203.2%20-9.9%200.4'%20stroke='white'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='99.8'%20cy='298.5'%20r='0.68'%20fill='white'%20opacity='0.23'/%3E%3Ccircle%20cx='81.5'%20cy='177.3'%20r='0.32'%20fill='white'%20opacity='0.27'/%3E%3Ccircle%20cx='346.2'%20cy='407.7'%20r='0.63'%20fill='white'%20opacity='0.30'/%3E%3Ccircle%20cx='373.0'%20cy='297.6'%20r='0.47'%20fill='white'%20opacity='0.16'/%3E%3Ccircle%20cx='111.9'%20cy='153.8'%20r='0.69'%20fill='white'%20opacity='0.29'/%3E%3Ccircle%20cx='381.5'%20cy='138.1'%20r='0.29'%20fill='white'%20opacity='0.15'/%3E%3Ccircle%20cx='662.7'%20cy='147.4'%20r='0.60'%20fill='white'%20opacity='0.25'/%3E%3Ccircle%20cx='507.3'%20cy='309.9'%20r='0.41'%20fill='white'%20opacity='0.24'/%3E%3Ccircle%20cx='371.1'%20cy='314.1'%20r='0.56'%20fill='white'%20opacity='0.16'/%3E%3C/svg%3E");
  --tx-dust-dk: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='764'%20height='408'%20viewBox='0%200%20764%20408'%3E%3Ccircle%20cx='173.2'%20cy='392.6'%20r='0.29'%20fill='black'%20opacity='0.21'/%3E%3Cpath%20d='M173.2%20392.6q0.1%208.5%200.2%2011.0'%20stroke='black'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='160.0'%20cy='261.9'%20r='0.41'%20fill='black'%20opacity='0.17'/%3E%3Ccircle%20cx='146.9'%20cy='338.9'%20r='0.28'%20fill='black'%20opacity='0.14'/%3E%3Cpath%20d='M146.9%20338.9q-0.4%206.4%20-0.7%206.8'%20stroke='black'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='689.2'%20cy='154.7'%20r='0.29'%20fill='black'%20opacity='0.14'/%3E%3Ccircle%20cx='48.2'%20cy='253.0'%20r='0.38'%20fill='black'%20opacity='0.20'/%3E%3Ccircle%20cx='528.2'%20cy='203.0'%20r='0.48'%20fill='black'%20opacity='0.24'/%3E%3Ccircle%20cx='108.6'%20cy='26.3'%20r='0.58'%20fill='black'%20opacity='0.17'/%3E%3Ccircle%20cx='722.8'%20cy='236.2'%20r='0.51'%20fill='black'%20opacity='0.23'/%3E%3Ccircle%20cx='272.5'%20cy='358.3'%20r='0.30'%20fill='black'%20opacity='0.21'/%3E%3Cpath%20d='M272.5%20358.3q-1.6%20-1.1%20-3.3%20-8.3'%20stroke='black'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='725.8'%20cy='344.1'%20r='0.43'%20fill='black'%20opacity='0.13'/%3E%3Ccircle%20cx='403.9'%20cy='208.0'%20r='0.27'%20fill='black'%20opacity='0.24'/%3E%3Ccircle%20cx='535.8'%20cy='89.7'%20r='0.34'%20fill='black'%20opacity='0.10'/%3E%3Ccircle%20cx='203.9'%20cy='172.7'%20r='0.38'%20fill='black'%20opacity='0.23'/%3E%3Ccircle%20cx='133.9'%20cy='161.7'%20r='0.31'%20fill='black'%20opacity='0.20'/%3E%3Ccircle%20cx='154.2'%20cy='312.7'%20r='0.36'%20fill='black'%20opacity='0.10'/%3E%3Ccircle%20cx='261.1'%20cy='69.4'%20r='0.40'%20fill='black'%20opacity='0.13'/%3E%3Ccircle%20cx='340.8'%20cy='170.5'%20r='0.46'%20fill='black'%20opacity='0.14'/%3E%3Cpath%20d='M340.8%20170.5q2.0%204.2%204.1%202.4'%20stroke='black'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='398.0'%20cy='146.9'%20r='0.53'%20fill='black'%20opacity='0.18'/%3E%3Ccircle%20cx='748.8'%20cy='25.7'%20r='0.26'%20fill='black'%20opacity='0.12'/%3E%3Ccircle%20cx='438.3'%20cy='303.5'%20r='0.37'%20fill='black'%20opacity='0.24'/%3E%3Cpath%20d='M438.3%20303.5q1.4%200.6%202.8%20-4.7'%20stroke='black'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='668.6'%20cy='13.5'%20r='0.59'%20fill='black'%20opacity='0.21'/%3E%3Ccircle%20cx='443.1'%20cy='72.5'%20r='0.59'%20fill='black'%20opacity='0.17'/%3E%3Cpath%20d='M443.1%2072.5q-3.0%200.7%20-5.9%20-4.6'%20stroke='black'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3C/svg%3E");
  --tx-scr-panel-lt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='360'%20viewBox='0%200%20400%20360'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M369.9%20341.5Q376.4%20340.8%20382.8%20340.1'%20stroke='white'%20stroke-width='0.4'%20opacity='0.16'/%3E%3Cpath%20d='M5.6%20223.3Q13.8%20225.6%2022.3%20225.0'%20stroke='white'%20stroke-width='0.6'%20opacity='0.18'/%3E%3Cpath%20d='M23.0%20281.9Q33.1%20303.0%2038.0%20325.7'%20stroke='white'%20stroke-width='0.5'%20opacity='0.27'/%3E%3Cpath%20d='M112.5%20350.9Q119.8%20348.9%20127.2%20347.8'%20stroke='white'%20stroke-width='0.4'%20opacity='0.15'/%3E%3Cpath%20d='M71.4%20116.4Q78.0%20117.3%2084.5%20118.5'%20stroke='white'%20stroke-width='0.8'%20opacity='0.16'/%3E%3Cpath%20d='M236.0%2039.3Q240.3%2045.7%20243.8%2052.6'%20stroke='white'%20stroke-width='0.4'%20opacity='0.14'/%3E%3Cpath%20d='M313.5%20254.6Q304.2%20283.3%20302.2%20313.5'%20stroke='white'%20stroke-width='0.6'%20opacity='0.15'/%3E%3Cpath%20d='M390.0%2020.1Q389.7%2022.0%20389.6%2024.0'%20stroke='white'%20stroke-width='0.3'%20opacity='0.21'/%3E%3Cpath%20d='M395.3%20269.6Q394.6%20277.9%20394.2%20286.2'%20stroke='white'%20stroke-width='0.5'%20opacity='0.19'/%3E%3C/svg%3E");
  --tx-scr-panel-dk: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='360'%20viewBox='0%200%20400%20360'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M219.2%20124.5Q217.9%20130.4%20218.1%20136.5'%20stroke='black'%20stroke-width='0.3'%20opacity='0.13'/%3E%3Cpath%20d='M177.9%2080.9Q177.7%20105.4%20180.4%20129.8'%20stroke='black'%20stroke-width='0.4'%20opacity='0.16'/%3E%3Cpath%20d='M68.2%20156.2Q68.7%20163.8%2067.2%20171.2'%20stroke='black'%20stroke-width='0.6'%20opacity='0.14'/%3E%3Cpath%20d='M204.8%2079.1Q203.7%2082.4%20202.4%2085.7'%20stroke='black'%20stroke-width='0.5'%20opacity='0.17'/%3E%3Cpath%20d='M258.1%20143.0Q270.4%20136.5%20284.2%20135.4'%20stroke='black'%20stroke-width='0.5'%20opacity='0.18'/%3E%3Cpath%20d='M220.8%2058.8Q222.2%2068.4%20224.4%2077.8'%20stroke='black'%20stroke-width='0.4'%20opacity='0.17'/%3E%3Cpath%20d='M6.1%20271.8Q4.6%20275.4%202.5%20278.7'%20stroke='black'%20stroke-width='0.3'%20opacity='0.20'/%3E%3C/svg%3E");
  --tx-glass: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='380'%20height='140'%20viewBox='0%200%20380%20140'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M144.8%2032.3Q162.1%2037.3%20178.7%2044.1'%20stroke='white'%20stroke-width='0.5'%20opacity='0.19'/%3E%3Cpath%20d='M278.0%2080.7Q285.7%2079.9%20293.2%2081.5'%20stroke='white'%20stroke-width='0.4'%20opacity='0.30'/%3E%3Cpath%20d='M121.2%2036.1Q128.6%2036.0%20135.9%2034.7'%20stroke='white'%20stroke-width='0.4'%20opacity='0.13'/%3E%3Cpath%20d='M136.9%2066.5Q140.3%2067.1%20143.7%2066.5'%20stroke='white'%20stroke-width='0.8'%20opacity='0.12'/%3E%3Cpath%20d='M219.6%2060.9Q231.7%2058.2%20243.4%2054.2'%20stroke='white'%20stroke-width='0.6'%20opacity='0.27'/%3E%3Cellipse%20cx='292'%20cy='92'%20rx='34'%20ry='24'%20fill='white'%20opacity='.035'%20transform='rotate%28-20%20292%2092%29'/%3E%3Cellipse%20cx='88'%20cy='40'%20rx='20'%20ry='30'%20fill='white'%20opacity='.025'%20transform='rotate%2825%2088%2040%29'/%3E%3Ccircle%20cx='318.1'%20cy='57.3'%20r='0.46'%20fill='white'%20opacity='0.30'/%3E%3Ccircle%20cx='54.0'%20cy='23.2'%20r='0.41'%20fill='white'%20opacity='0.29'/%3E%3Ccircle%20cx='359.6'%20cy='80.7'%20r='0.53'%20fill='white'%20opacity='0.45'/%3E%3Ccircle%20cx='92.5'%20cy='23.6'%20r='0.59'%20fill='white'%20opacity='0.52'/%3E%3Ccircle%20cx='91.8'%20cy='133.2'%20r='0.53'%20fill='white'%20opacity='0.33'/%3E%3Ccircle%20cx='235.7'%20cy='130.7'%20r='0.54'%20fill='white'%20opacity='0.29'/%3E%3Ccircle%20cx='299.1'%20cy='119.9'%20r='0.43'%20fill='white'%20opacity='0.39'/%3E%3Ccircle%20cx='124.5'%20cy='97.8'%20r='0.35'%20fill='white'%20opacity='0.43'/%3E%3Ccircle%20cx='88.3'%20cy='36.5'%20r='0.78'%20fill='white'%20opacity='0.38'/%3E%3Ccircle%20cx='176.2'%20cy='21.2'%20r='0.48'%20fill='white'%20opacity='0.39'/%3E%3Ccircle%20cx='216.6'%20cy='40.9'%20r='0.56'%20fill='white'%20opacity='0.30'/%3E%3Ccircle%20cx='172.3'%20cy='127.3'%20r='0.39'%20fill='white'%20opacity='0.24'/%3E%3Ccircle%20cx='180.5'%20cy='113.2'%20r='0.64'%20fill='white'%20opacity='0.59'/%3E%3Ccircle%20cx='100.4'%20cy='67.5'%20r='0.75'%20fill='white'%20opacity='0.34'/%3E%3C/svg%3E");
  --tx-rubber: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='1.25%201.25'%20numOctaves='1'%20seed='33'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200.9%200%200%200%20-0.4'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-rubber-lt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='1.1%201.1'%20numOctaves='1'%20seed='34'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.7%200%200%200%20-0.34'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-rubber-scuff: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cfilter%20id='b'%20x='-50%25'%20y='-50%25'%20width='200%25'%20height='200%25'%3E%3CfeGaussianBlur%20stdDeviation='3.2'/%3E%3C/filter%3E%3Cellipse%20cx='75.9'%20cy='105.2'%20rx='17.3'%20ry='9.9'%20fill='white'%20opacity='0.025'%20transform='rotate%2867%2075.9%20105.2%29'%20filter='url%28%23b%29'/%3E%3Cellipse%20cx='43.8'%20cy='129.7'%20rx='17.7'%20ry='14.1'%20fill='white'%20opacity='0.039'%20transform='rotate%28119%2043.8%20129.7%29'%20filter='url%28%23b%29'/%3E%3Cellipse%20cx='23.2'%20cy='70.4'%20rx='10.3'%20ry='9.8'%20fill='white'%20opacity='0.026'%20transform='rotate%28147%2023.2%2070.4%29'%20filter='url%28%23b%29'/%3E%3Cellipse%20cx='11.9'%20cy='109.9'%20rx='12.7'%20ry='8.9'%20fill='white'%20opacity='0.046'%20transform='rotate%283%2011.9%20109.9%29'%20filter='url%28%23b%29'/%3E%3Cellipse%20cx='9.7'%20cy='146.4'%20rx='15.1'%20ry='8.3'%20fill='white'%20opacity='0.050'%20transform='rotate%28170%209.7%20146.4%29'%20filter='url%28%23b%29'/%3E%3Cellipse%20cx='18.0'%20cy='67.7'%20rx='9.9'%20ry='6.5'%20fill='white'%20opacity='0.041'%20transform='rotate%2829%2018.0%2067.7%29'%20filter='url%28%23b%29'/%3E%3Cpath%20d='M127.9%2052.1Q133.0%2055.4%20139.1%2056.1'%20stroke='white'%20stroke-width='0.3'%20opacity='0.21'/%3E%3Cpath%20d='M4.5%20153.1Q18.9%20155.7%2032.8%20160.0'%20stroke='white'%20stroke-width='0.5'%20opacity='0.15'/%3E%3Cpath%20d='M13.9%20124.6Q13.3%20126.8%2013.0%20129.1'%20stroke='white'%20stroke-width='0.8'%20opacity='0.21'/%3E%3Cpath%20d='M95.3%2086.2Q112.2%2082.0%20129.3%2086.0'%20stroke='white'%20stroke-width='0.3'%20opacity='0.13'/%3E%3Cpath%20d='M73.8%2012.7Q76.9%2012.3%2079.7%2011.0'%20stroke='white'%20stroke-width='0.6'%20opacity='0.20'/%3E%3C/svg%3E");
  --tx-rubber-dust: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Ccircle%20cx='108.3'%20cy='125.6'%20r='0.43'%20fill='white'%20opacity='0.20'/%3E%3Ccircle%20cx='159.5'%20cy='46.3'%20r='0.30'%20fill='white'%20opacity='0.15'/%3E%3Ccircle%20cx='52.4'%20cy='42.9'%20r='0.29'%20fill='white'%20opacity='0.17'/%3E%3Ccircle%20cx='91.1'%20cy='32.3'%20r='0.27'%20fill='white'%20opacity='0.14'/%3E%3Ccircle%20cx='62.2'%20cy='117.4'%20r='0.53'%20fill='white'%20opacity='0.18'/%3E%3Cpath%20d='M62.2%20117.4q-0.7%20-1.6%20-1.3%20-9.2'%20stroke='white'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='63.4'%20cy='105.3'%20r='0.35'%20fill='white'%20opacity='0.28'/%3E%3Ccircle%20cx='126.7'%20cy='152.6'%20r='0.33'%20fill='white'%20opacity='0.21'/%3E%3Ccircle%20cx='128.2'%20cy='62.4'%20r='0.30'%20fill='white'%20opacity='0.23'/%3E%3Cpath%20d='M128.2%2062.4q-0.6%201.1%20-1.1%20-3.9'%20stroke='white'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='72.7'%20cy='76.8'%20r='0.29'%20fill='white'%20opacity='0.20'/%3E%3Ccircle%20cx='59.1'%20cy='143.4'%20r='0.55'%20fill='white'%20opacity='0.28'/%3E%3Ccircle%20cx='4.1'%20cy='60.3'%20r='0.29'%20fill='white'%20opacity='0.24'/%3E%3Ccircle%20cx='20.5'%20cy='45.4'%20r='0.39'%20fill='white'%20opacity='0.25'/%3E%3Ccircle%20cx='48.2'%20cy='108.4'%20r='0.27'%20fill='white'%20opacity='0.14'/%3E%3Ccircle%20cx='120.3'%20cy='16.2'%20r='0.27'%20fill='white'%20opacity='0.20'/%3E%3Ccircle%20cx='2.6'%20cy='69.9'%20r='0.35'%20fill='white'%20opacity='0.12'/%3E%3Ccircle%20cx='45.7'%20cy='74.7'%20r='0.29'%20fill='white'%20opacity='0.22'/%3E%3Ccircle%20cx='109.4'%20cy='10.9'%20r='0.48'%20fill='white'%20opacity='0.23'/%3E%3Cpath%20d='M109.4%2010.9q-3.2%205.8%20-6.4%205.7'%20stroke='white'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='152.0'%20cy='148.6'%20r='0.45'%20fill='white'%20opacity='0.22'/%3E%3C/svg%3E");
  --tx-rubber-dust-dk: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Ccircle%20cx='144.9'%20cy='109.8'%20r='0.52'%20fill='black'%20opacity='0.28'/%3E%3Ccircle%20cx='101.7'%20cy='144.8'%20r='0.56'%20fill='black'%20opacity='0.21'/%3E%3Ccircle%20cx='65.8'%20cy='159.0'%20r='0.29'%20fill='black'%20opacity='0.16'/%3E%3Ccircle%20cx='71.9'%20cy='33.4'%20r='0.36'%20fill='black'%20opacity='0.28'/%3E%3Ccircle%20cx='68.4'%20cy='100.4'%20r='0.53'%20fill='black'%20opacity='0.20'/%3E%3Cpath%20d='M68.4%20100.4q-1.9%202.1%20-3.8%20-1.9'%20stroke='black'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3Ccircle%20cx='15.1'%20cy='30.5'%20r='0.49'%20fill='black'%20opacity='0.16'/%3E%3Ccircle%20cx='26.1'%20cy='18.8'%20r='0.26'%20fill='black'%20opacity='0.24'/%3E%3Ccircle%20cx='35.1'%20cy='38.0'%20r='0.25'%20fill='black'%20opacity='0.23'/%3E%3Ccircle%20cx='21.9'%20cy='103.5'%20r='0.46'%20fill='black'%20opacity='0.19'/%3E%3Ccircle%20cx='102.2'%20cy='88.9'%20r='0.40'%20fill='black'%20opacity='0.13'/%3E%3Ccircle%20cx='138.1'%20cy='110.4'%20r='0.60'%20fill='black'%20opacity='0.22'/%3E%3Ccircle%20cx='18.6'%20cy='97.2'%20r='0.43'%20fill='black'%20opacity='0.19'/%3E%3Ccircle%20cx='134.3'%20cy='18.4'%20r='0.56'%20fill='black'%20opacity='0.10'/%3E%3Ccircle%20cx='50.5'%20cy='116.8'%20r='0.58'%20fill='black'%20opacity='0.21'/%3E%3Ccircle%20cx='8.7'%20cy='106.8'%20r='0.29'%20fill='black'%20opacity='0.19'/%3E%3Ccircle%20cx='11.7'%20cy='119.6'%20r='0.28'%20fill='black'%20opacity='0.15'/%3E%3Cpath%20d='M11.7%20119.6q-1.6%200.4%20-3.2%20-5.2'%20stroke='black'%20stroke-width='.35'%20fill='none'%20opacity='.35'/%3E%3C/svg%3E");
  --tx-key-wear: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='80'%20viewBox='0%200%20120%2080'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M10.8%2076.1Q12.8%2076.7%2014.7%2077.4'%20stroke='white'%20stroke-width='0.3'%20opacity='0.17'/%3E%3Cpath%20d='M86.6%2077.3Q86.6%2079.9%2086.5%2082.6'%20stroke='white'%20stroke-width='0.6'%20opacity='0.25'/%3E%3Cpath%20d='M92.8%203.2Q93.4%2011.3%2094.4%2019.4'%20stroke='white'%20stroke-width='0.4'%20opacity='0.13'/%3E%3Cpath%20d='M27.8%2040.2Q26.3%2043.4%2026.0%2046.9'%20stroke='white'%20stroke-width='0.3'%20opacity='0.13'/%3E%3Cellipse%20cx='70'%20cy='36'%20rx='24'%20ry='13'%20fill='white'%20opacity='.07'%20transform='rotate%28-12%2070%2036%29'/%3E%3C/svg%3E");
  --tx-key-wear-dk: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='80'%20viewBox='0%200%20120%2080'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M115.9%2044.8Q115.7%2053.3%20114.2%2061.7'%20stroke='black'%20stroke-width='0.4'%20opacity='0.13'/%3E%3Cpath%20d='M74.2%2027.0Q74.8%2032.7%2075.4%2038.4'%20stroke='black'%20stroke-width='0.8'%20opacity='0.16'/%3E%3Cpath%20d='M46.2%202.4Q48.0%202.7%2049.8%202.9'%20stroke='black'%20stroke-width='0.4'%20opacity='0.16'/%3E%3C/svg%3E");
}

.seq .tx, .mpc-pad .tx, .sp-pad .tx, .utilbar .tx {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}
.seq button { z-index: 0; border-radius: 3px; }
.seq .tx, .utilbar .tx { z-index: 0; }
.seq button > span,
.seq button > i,
.utilbar button > span,
.utilbar button > i {
  position: relative;
  z-index: 1;
}

/* the lamp over the whole unit: a soft light from the top and a little falloff at the edges */
body[data-skin="mpc"] .plinth::after,
body[data-skin="sp404"] .plinth::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--see, 1);
}
body[data-skin="mpc"] .plinth::after {
  background:
    radial-gradient(ellipse 70% 45% at 22% 0%, rgba(255, 255, 246, 0.2), transparent 72%),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(60, 46, 20, 0.1) 100%);
}
body[data-skin="sp404"] .plinth::after {
  background:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(255, 255, 255, 0.1), transparent 72%),
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.26) 100%);
}

/* ---------- glass over every display: a faint reflection, a few hairlines, dust. Text stays crisp. ---------- */
.seq-lcd, .mpc-screen, .sp-round { position: relative; }
.seq-lcd::after, .mpc-screen::after, .sp-round::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    var(--tx-glass),
    linear-gradient(115deg, rgba(255, 255, 255, 0.075) 0 26%, transparent 26.4%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 20%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.24) 100%);
  background-size: 100% 100%, auto, auto, auto;
}
/* a pixel grid, like a real dot-matrix LCD */
body[data-skin="mpc"] .seq-lcd::before, body[data-skin="mpc"] .mpc-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px);
}
.seq-lcd > canvas, .seq-lcd > .seq-line { position: relative; z-index: 0; }

/* ---------- keycaps ----------
   The button is the cap's skirt (its sloped sides). .tx shades the skirt and wears its corners;
   .tx::before is the flat top face, with a 1px bevel catching the light. */
.seq button {
  box-shadow:
    inset 0 1px 0 var(--k-hi),
    0 0 0 1px var(--k-rim),
    0 0 0 2px rgba(0, 0, 0, 0.22),
    0 3px 0 var(--k-edge),
    0 5px 4px rgba(0, 0, 0, 0.32),
    0 8px 9px rgba(0, 0, 0, 0.16);
}
.seq button .tx, .utilbar button .tx {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 24%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent 30%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 18% 82%, rgba(0, 0, 0, 0.12)),
    var(--tx-grain-dk),
    var(--tx-grain-lt);
  background-size: auto, auto, auto, 140px 140px, 140px 140px;
  background-position: 0 0, 0 0, 0 0, var(--gp, 0 0), calc(var(--gx, 0px) + 40px) 17px;
}
.seq button .tx::before, .utilbar button .tx::before {
  content: "";
  position: absolute;
  inset: 3px 3px 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02) 55%, rgba(0, 0, 0, 0.07));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.32),
    inset -1px -1px 0 rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.13);
}
/* wear: the corners rub through, and the keys you press most carry a sheen from fingers */
.seq button .tx::after, .utilbar button .tx::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: var(--w, 0.55);
  background:
    radial-gradient(ellipse 22px 14px at 50% 56%, var(--sheen, rgba(255, 255, 255, 0.12)), transparent 100%),
    radial-gradient(circle at 2px 2px, var(--wear, rgba(110, 88, 48, 0.4)), transparent 9px),
    radial-gradient(circle at calc(100% - 2px) calc(100% - 2px), var(--wear, rgba(110, 88, 48, 0.4)), transparent 10px);
}
.seq button:nth-child(2n) { --w: 0.35; --gp: 31px 17px; --gx: 20px; }
.seq button:nth-child(3n) { --w: 0.8; --gp: 64px 40px; --gx: 55px; }
.seq button:nth-child(5n) { --w: 0.5; --gp: 12px 51px; --gx: 83px; }
.seq button:nth-child(7n) { --w: 0.95; --gp: 90px 6px; --gx: 8px; }
.tk-play, .tk-rec, .seq [data-act="bpm+"], .seq [data-act="bpm-"] { --w: 1; }
.seq button:active .tx { filter: brightness(0.94); }

body[data-skin="mpc"] .seq-keys [data-ptn] { --wear: rgba(205, 220, 245, 0.45); --sheen: rgba(255, 255, 255, 0.1); }
body[data-skin="mpc"] .tk-rec, body[data-skin="mpc"] .tk-dub { --wear: rgba(255, 226, 190, 0.4); }

/* ---------- the panels ---------- */
body[data-skin="mpc"] {
  --mpc-face:
    radial-gradient(circle at 6px 6px, #f2f0e8 0 1.2px, #7c7f85 1.6px 3px, #3a3c40 3.2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 6px) 6px, #f2f0e8 0 1.2px, #7c7f85 1.6px 3px, #3a3c40 3.2px 3.6px, transparent 4px),
    radial-gradient(circle at 6px calc(100% - 6px), #f2f0e8 0 1.2px, #7c7f85 1.6px 3px, #3a3c40 3.2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #f2f0e8 0 1.2px, #7c7f85 1.6px 3px, #3a3c40 3.2px 3.6px, transparent 4px),
    linear-gradient(35deg, transparent 40%, rgba(24, 24, 28, 0.85) 43% 57%, transparent 60%),
    linear-gradient(-20deg, transparent 40%, rgba(24, 24, 28, 0.85) 43% 57%, transparent 60%),
    linear-gradient(80deg, transparent 40%, rgba(24, 24, 28, 0.85) 43% 57%, transparent 60%),
    linear-gradient(-55deg, transparent 40%, rgba(24, 24, 28, 0.85) 43% 57%, transparent 60%),
    var(--tx-scr-panel-lt),
    var(--tx-scr-panel-dk),
    radial-gradient(ellipse 120% 50% at 50% 100%, rgba(40, 36, 24, 0.08), transparent 70%),
    var(--tx-grain-dk),
    var(--tx-grain-lt),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 10%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #b3b8bf, #a0a6ae);
  --mpc-face-size:
    auto, auto, auto, auto,
    6px 6px, 6px 6px, 6px 6px, 6px 6px,
    100% 100%, 100% 100%,
    auto, 140px 140px, 140px 140px,
    auto, auto, auto;
  --mpc-face-pos:
    0 0, 0 0, 0 0, 0 0,
    3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px),
    0 0, 0 0,
    0 0, 0 0, 40px 17px,
    0 0, 0 0, 0 0;
  --mpc-face-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat,
    no-repeat, repeat, repeat,
    no-repeat, repeat, no-repeat;
}
body[data-skin="mpc"] .mpc-panel,
body[data-skin="mpc"] .seq::before {
  background: var(--mpc-face);
  background-repeat: var(--mpc-face-repeat);
  background-size: var(--mpc-face-size);
  background-position: var(--mpc-face-pos);
}

/* printed grooves between the rows of the sequencer */
.seq-lcd, .seq-transport, .seq-tempo, .seq-row { position: relative; }
.seq-lcd::before { z-index: 0; }
.seq-transport::after, .seq-tempo::after, .seq-len::after, .seq-ptns::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -7px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 1px, rgba(255, 255, 255, 0.34) 1px 2px);
}
body[data-skin="sp404"] .seq-transport::after, body[data-skin="sp404"] .seq-tempo::after, body[data-skin="sp404"] .seq-len::after, body[data-skin="sp404"] .seq-ptns::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0 1px, rgba(255, 255, 255, 0.1) 1px 2px);
}

/* ---------- MPC chassis (the frame around the panels) ---------- */
body[data-skin="mpc"] .plinth::before {
  background:
    var(--tx-dings),
    var(--tx-chips-mpc),
    var(--tx-dust-dk),
    var(--tx-scr-dk),
    var(--tx-scr-lt),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 98, 48, 0.1) 100%),
    var(--tx-mottle),
    var(--tx-grain-dk),
    var(--tx-grain-lt),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 12%),
    linear-gradient(180deg, transparent calc(100% - 12px), rgba(0, 0, 0, 0.1) calc(100% - 12px)),
    linear-gradient(180deg, #dddcd5, #cfcec6);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, auto, 320px 320px, 140px 140px, 140px 140px, auto, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 40px 17px, 0 0, 0 0, 0 0;
}

/* the pad bay: a darker well, set into the panel */
body[data-skin="mpc"] .mpc-bay {
  background:
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(30, 26, 16, 0.22), transparent 70%),
    var(--tx-grain-dk),
    var(--tx-grain-lt),
    linear-gradient(180deg, #8c929b, #a1a7af);
  background-size: auto, 140px 140px, 140px 140px, auto;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------- MPC pads: grey rubber, softly convex, shiny only where fingers land ---------- */
.mpc-pad {
  background: linear-gradient(145deg, #aeafac, #909190 60%, #81827f);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.34),
    inset 1px 1px 2px rgba(255, 255, 255, 0.42),
    inset -2px -3px 4px rgba(0, 0, 0, 0.3),
    0 0 0 3px #666c74,
    0 0 0 4px rgba(255, 255, 255, 0.26),
    0 3px 4px 3px rgba(0, 0, 0, 0.28);
}
.mpc-pad .tx {
  background:
    radial-gradient(ellipse 72% 62% at 36% 28%, rgba(255, 255, 255, 0.3), transparent 72%),
    radial-gradient(ellipse 100% 100% at 64% 72%, transparent 52%, rgba(0, 0, 0, 0.26) 100%),
    var(--tx-rubber),
    var(--tx-rubber-lt);
  background-size: auto, auto, 120px 120px, 120px 120px;
  background-position: 0 0, 0 0, calc(var(--i) * 17px) calc(var(--i) * 9px), calc(var(--i) * 5px) calc(var(--i) * 13px);
}
.mpc-pad .tx::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: var(--w, 0.4);
  background: radial-gradient(ellipse 34% 28% at var(--ox, 46%) var(--oy, 52%), rgba(255, 255, 255, 0.34), transparent 100%);
}
.mpc-pad:nth-child(3n) { --w: 0.75; --ox: 42%; --oy: 50%; }
.mpc-pad:nth-child(4n) { --w: 0.25; --ox: 55%; --oy: 47%; }
.mpc-pad:nth-child(5n) { --w: 1; --ox: 48%; --oy: 56%; }
.mpc-pad:nth-child(7n) { --w: 0.55; --ox: 40%; --oy: 44%; }
.mpc-pad.hit .tx, .mpc-pad:active .tx { opacity: 0.45; }
.mpc-pad::after {
  color: rgba(22, 22, 26, 0.84);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 1;
}

/* ---------- SP 40 ---------- */
body[data-skin="sp404"] .plinth::before {
  background:
    var(--tx-dings),
    var(--tx-chips-sp),
    var(--tx-scr-lt),
    radial-gradient(circle at 13px 13px, #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) 13px, #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at 13px calc(100% - 13px), #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    linear-gradient(40deg, transparent 44%, rgba(20, 20, 24, 0.85) 46% 54%, transparent 56%),
    linear-gradient(-25deg, transparent 44%, rgba(20, 20, 24, 0.85) 46% 54%, transparent 56%),
    linear-gradient(75deg, transparent 44%, rgba(20, 20, 24, 0.85) 46% 54%, transparent 56%),
    linear-gradient(-60deg, transparent 44%, rgba(20, 20, 24, 0.85) 46% 54%, transparent 56%),
    var(--tx-brush),
    var(--tx-brush-dk),
    var(--tx-grain-dk),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 12%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(0, 0, 0, 0.05) 1px 2px),
    linear-gradient(180deg, #80818a, #686a72 50%, #5a5c63);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, no-repeat, repeat, no-repeat;
  background-size:
    100% 100%, 100% 100%, 100% 100%,
    auto, auto, auto, auto,
    8px 8px, 8px 8px, 8px 8px, 8px 8px,
    360px 160px, 360px 160px, 140px 140px,
    auto, auto, auto;
  background-position:
    0 0, 0 0, 0 0,
    0 0, 0 0, 0 0, 0 0,
    9px 9px, calc(100% - 9px) 9px, 9px calc(100% - 9px), calc(100% - 9px) calc(100% - 9px),
    0 0, 0 0, 0 0,
    0 0, 0 0, 0 0;
}
body[data-skin="sp404"] .seq::before,
body[data-skin="sp404"] .sp-panel {
  background:
    var(--tx-scr-panel-lt),
    radial-gradient(ellipse 60% 40% at 30% 25%, rgba(255, 255, 255, 0.04), transparent 70%),
    var(--tx-grain-lt),
    var(--tx-grain-dk),
    linear-gradient(180deg, #4a4c52, #3a3c41);
  background-size: 100% 100%, auto, 140px 140px, 140px 140px, auto;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.18);
}
body[data-skin="sp404"] .seq button {
  --wear: rgba(255, 255, 255, 0.2);
  --sheen: rgba(255, 255, 255, 0.07);
}
body[data-skin="sp404"] .seq button .tx::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01) 55%, rgba(0, 0, 0, 0.14));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.14), inset -1px -1px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.sp-pad {
  background: linear-gradient(180deg, #27282d, #0d0d0f 78%, #060608);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -4px 6px rgba(0, 0, 0, 0.6),
    0 0 0 2px #050506,
    0 0 0 3px rgba(255, 255, 255, 0.11),
    0 5px 6px 2px rgba(0, 0, 0, 0.55);
}
.sp-pad .tx {
  background:
    radial-gradient(ellipse 70% 52% at 38% 26%, rgba(255, 255, 255, 0.11), transparent 72%),
    radial-gradient(ellipse 100% 100% at 60% 72%, transparent 50%, rgba(0, 0, 0, 0.34) 100%),
    var(--tx-rubber-lt),
    var(--tx-rubber);
  background-size: auto, auto, 120px 120px, 120px 120px;
  background-position: 0 0, 0 0, calc(var(--i) * 17px) calc(var(--i) * 9px), calc(var(--i) * 5px) calc(var(--i) * 13px);
}
.sp-pad .tx::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: var(--w, 0.4);
  background: radial-gradient(ellipse 36% 28% at var(--ox, 46%) var(--oy, 52%), rgba(255, 255, 255, 0.16), transparent 100%);
}
.sp-pad:nth-child(3n) { --w: 0.75; --ox: 42%; --oy: 50%; }
.sp-pad:nth-child(4n) { --w: 0.25; --ox: 55%; --oy: 47%; }
.sp-pad:nth-child(5n) { --w: 1; --ox: 48%; --oy: 56%; }
.sp-pad:nth-child(7n) { --w: 0.55; --ox: 40%; --oy: 44%; }
.sp-pad.hit .tx, .sp-pad:active .tx { opacity: 0.4; }
.sp-pad::before, .sp-pad::after { z-index: 1; }

/* ---------- the receiver panel carries the machine's look ---------- */
body[data-skin="mpc"] .face::before,
body[data-skin="mpc"] .drops::before {
  background:
    radial-gradient(circle at 9px 9px, #f2f0e8 0 1.4px, #7c7f85 1.8px 3.4px, #3a3c40 3.6px 4.1px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, #f2f0e8 0 1.4px, #7c7f85 1.8px 3.4px, #3a3c40 3.6px 4.1px, transparent 4.5px),
    radial-gradient(circle at 9px calc(100% - 9px), #f2f0e8 0 1.4px, #7c7f85 1.8px 3.4px, #3a3c40 3.6px 4.1px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #f2f0e8 0 1.4px, #7c7f85 1.8px 3.4px, #3a3c40 3.6px 4.1px, transparent 4.5px),
    linear-gradient(35deg, transparent 40%, rgba(24, 24, 28, 0.85) 43% 57%, transparent 60%),
    linear-gradient(-20deg, transparent 40%, rgba(24, 24, 28, 0.85) 43% 57%, transparent 60%),
    linear-gradient(80deg, transparent 40%, rgba(24, 24, 28, 0.85) 43% 57%, transparent 60%),
    linear-gradient(-55deg, transparent 40%, rgba(24, 24, 28, 0.85) 43% 57%, transparent 60%),
    linear-gradient(90deg, #c8352a 0 22%, transparent 22%),
    var(--tx-scr-panel-lt),
    var(--tx-scr-panel-dk),
    radial-gradient(ellipse 130% 50% at 50% 100%, rgba(40, 36, 24, 0.09), transparent 70%),
    radial-gradient(ellipse 80% 50% at 25% 0%, rgba(255, 255, 255, 0.16), transparent 70%),
    var(--tx-grain-dk),
    var(--tx-grain-lt),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 10%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #c6cacf, #b3b8bf);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, repeat, no-repeat;
  background-size:
    auto, auto, auto, auto,
    7px 7px, 7px 7px, 7px 7px, 7px 7px,
    100% 3px,
    100% 100%, 100% 100%,
    auto, auto, 140px 140px, 140px 140px,
    auto, auto, auto;
  background-position:
    0 0, 0 0, 0 0, 0 0,
    5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px),
    0 0,
    0 0, 0 0,
    0 0, 0 0, 0 0, 40px 17px,
    0 0, 0 0, 0 0;
}
body[data-skin="mpc"] .face {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 0 0 2px rgba(56, 62, 72, 0.4), inset 0 -3px 4px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.35);
}
body[data-skin="mpc"] .screw { opacity: 0; }

body[data-skin="sp404"] .face::before,
body[data-skin="sp404"] .drops::before {
  background:
    radial-gradient(circle at 9px 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at 9px calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    linear-gradient(90deg, #ff3b2f 0 20%, transparent 20%),
    var(--tx-scr-panel-lt),
    radial-gradient(ellipse 80% 50% at 80% 0%, rgba(255, 255, 255, 0.06), transparent 70%),
    var(--tx-brush),
    var(--tx-grain-lt),
    var(--tx-grain-dk),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 18%),
    linear-gradient(180deg, #34363c, #1c1e22);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, no-repeat, no-repeat;
  background-size:
    auto, auto, auto, auto,
    100% 4px,
    100% 100%,
    auto,
    360px 160px, 140px 140px, 140px 140px,
    auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 40px 17px, 0 0, 0 0;
}
body[data-skin="sp404"] .screw { opacity: 0; }

/* real knobs: a rubber cap with fine grain and a painted line that has dulled a little */
body[data-skin="mpc"] .knob-cap::after,
body[data-skin="sp404"] .knob-cap::after {
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255, 255, 255, var(--kn-sheen)) 28deg,
      transparent 66deg,
      transparent 180deg,
      rgba(255, 255, 255, calc(var(--kn-sheen) * 0.6)) 212deg,
      transparent 250deg),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.07) 1px 2px),
    var(--tx-rubber-lt);
  background-size: auto, auto, 120px 120px;
}
body[data-skin="mpc"] .knob-cap i { background: #eeeadc; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), inset 0 -2px 2px rgba(120, 100, 60, 0.35); }
body[data-skin="sp404"] .knob-cap i { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55), 0 0 5px var(--kn-glow), inset 0 -2px 2px rgba(0, 0, 0, 0.3); }

/* ==========================================================================
   Top-panel shimmer: a barely-there light that drifts across the whole panel.
   Two soft bands on different, unrelated periods so it never visibly repeats,
   plus a slow breathing of the panel's top edge. Tinted per theme via --glow.
   ========================================================================== */
.plinth-glow {
  --glow: 255, 214, 160;
  --glow-a: 0.07;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.plinth-glow::before,
.plinth-glow::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 46%;
  will-change: transform, opacity;
}
.plinth-glow::before {
  background: linear-gradient(90deg, transparent, rgba(var(--glow), var(--glow-a)) 50%, transparent);
  animation: glow-drift 19s ease-in-out infinite;
}
.plinth-glow::after {
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(var(--glow), calc(var(--glow-a) * 0.7)) 50%, transparent);
  animation: glow-drift 29s ease-in-out -11s infinite reverse;
}
@keyframes glow-drift {
  0%   { transform: translateX(-70%) skewX(-8deg); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(240%) skewX(-8deg); opacity: 0; }
}
/* the panel's top edge breathes very slowly */
.plinth-glow {
  background: radial-gradient(ellipse 80% 38% at 50% 0%, rgba(var(--glow), calc(var(--glow-a) * 0.8)), transparent 75%);
  animation: glow-breathe 11s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
body:not(.is-on) .plinth-glow { animation: none; opacity: 0; }

/* theme tints */
body[data-skin="walnut"]    .plinth-glow { --glow: 255, 206, 140; }
body[data-skin="ebony"]     .plinth-glow { --glow: 235, 205, 160; --glow-a: 0.06; }
body[data-skin="halloween"] .plinth-glow { --glow: 255, 140, 40;  --glow-a: 0.09; }
body[data-skin="reggae"]    .plinth-glow { --glow: 255, 196, 110; --glow-a: 0.03; }
body[data-skin="ashbury"]   .plinth-glow { --glow: 255, 150, 220; --glow-a: 0.08; }
body[data-skin="synthwave"] .plinth-glow { --glow: 255, 90, 230;  --glow-a: 0.1; }
body[data-skin="papaya"]    .plinth-glow { --glow: 255, 180, 90;  --glow-a: 0.09; }
body[data-skin="avocado"]   .plinth-glow { --glow: 215, 235, 120; --glow-a: 0.08; }
body[data-skin="lagoon"]    .plinth-glow { --glow: 150, 255, 235; --glow-a: 0.09; }
body[data-skin="invasion"]  .plinth-glow { --glow: 255, 230, 190; }
body[data-skin="mpc"] .plinth-glow,
body[data-skin="sp404"] .plinth-glow { display: none; }

@media (prefers-reduced-motion: reduce) {
  .plinth-glow, .plinth-glow::before, .plinth-glow::after,
  .arm-halo, .arm-core, .needle-glow, .platter-under i, .platter-under i::after { animation: none; }
  .plinth-glow::before, .plinth-glow::after, .arm-halo, .arm-core { opacity: 0; }
  body[data-skin="reggae"] .plinth::after { animation: none; }
}

/* ==========================================================================
   Drum machines, round 3: calmer surfaces, much more dimensional keys and pads.
   (Scratches stay; the SP 40 loses its brushed-metal look for a matte powder coat.)
   ========================================================================== */

/* ---- SP 40: matte charcoal powder-coat chassis, no brushing ---- */
body[data-skin="sp404"] .plinth::before {
  background:
    var(--tx-dings),
    var(--tx-chips-sp),
    var(--tx-scr-lt),
    radial-gradient(circle at 13px 13px, #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) 13px, #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at 13px calc(100% - 13px), #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    linear-gradient(40deg, transparent 44%, rgba(10, 10, 12, 0.8) 46% 54%, transparent 56%),
    linear-gradient(-25deg, transparent 44%, rgba(10, 10, 12, 0.8) 46% 54%, transparent 56%),
    linear-gradient(75deg, transparent 44%, rgba(10, 10, 12, 0.8) 46% 54%, transparent 56%),
    linear-gradient(-60deg, transparent 44%, rgba(10, 10, 12, 0.8) 46% 54%, transparent 56%),
    var(--tx-grain-dk),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 14%),
    linear-gradient(180deg, #62646b, #55575d 55%, #4a4c52);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat;
  background-size:
    100% 100%, 100% 100%, 100% 100%,
    auto, auto, auto, auto,
    8px 8px, 8px 8px, 8px 8px, 8px 8px,
    140px 140px, auto, auto;
  background-position:
    0 0, 0 0, 0 0,
    0 0, 0 0, 0 0, 0 0,
    9px 9px, calc(100% - 9px) 9px, 9px calc(100% - 9px), calc(100% - 9px) calc(100% - 9px),
    0 0, 0 0, 0 0;
}
body[data-skin="sp404"] .face::before,
body[data-skin="sp404"] .drops::before {
  background:
    radial-gradient(circle at 9px 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at 9px calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    linear-gradient(90deg, #ff3b2f 0 20%, transparent 20%),
    var(--tx-scr-panel-lt),
    var(--tx-grain-lt),
    var(--tx-grain-dk),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 16%),
    linear-gradient(180deg, #34363b, #26282c);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto, auto, 100% 4px, 100% 100%, 140px 140px, 140px 140px, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 40px 17px, 0 0, 0 0;
}
/* the lamp: just a gentle edge falloff now, no highlight */
body[data-skin="sp404"] .plinth::after {
  background: radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.14) 100%);
}
body[data-skin="mpc"] .plinth::after {
  background: radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(60, 46, 20, 0.08) 100%);
}

/* ---- less wear: corner rub and finger sheen are fainter, scratches untouched ---- */
.seq button .tx::after { opacity: calc(var(--w, 0.55) * 0.55); }
.mpc-pad .tx::after, .sp-pad .tx::after { opacity: calc(var(--w, 0.4) * 0.6); }

/* ---- keycaps: a tall sloped skirt, a distinct raised top face, real travel when pressed ---- */
.seq button {
  box-shadow:
    inset 0 1px 0 var(--k-hi),
    inset 0 -3px 3px rgba(0, 0, 0, 0.22),
    0 0 0 1px var(--k-rim),
    0 1px 0 1px rgba(0, 0, 0, 0.3),
    0 3px 0 1px var(--k-edge),
    0 5px 0 1px rgba(0, 0, 0, 0.4),
    0 8px 6px 1px rgba(0, 0, 0, 0.38),
    0 13px 14px rgba(0, 0, 0, 0.22);
}
.seq button:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    0 0 0 1px var(--k-rim),
    0 1px 0 1px var(--k-edge),
    0 2px 2px rgba(0, 0, 0, 0.4);
}
.seq button .tx, .utilbar button .tx {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.02) 30%, transparent 60%, rgba(0, 0, 0, 0.3)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 16% 84%, rgba(0, 0, 0, 0.22)),
    var(--tx-grain-dk),
    var(--tx-grain-lt);
  background-size: auto, auto, 140px 140px, 140px 140px;
  background-position: 0 0, 0 0, var(--gp, 0 0), calc(var(--gx, 0px) + 40px) 17px;
}
.seq button .tx::before, .utilbar button .tx::before {
  inset: 4px 4px 6px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.07) 45%, rgba(0, 0, 0, 0.1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 2px rgba(0, 0, 0, 0.2),
    0 1px 1px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.22);
}
body[data-skin="sp404"] .seq button .tx::before,
body[data-skin="sp404"] .utilbar button .tx::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.03) 45%, rgba(0, 0, 0, 0.2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 2px rgba(0, 0, 0, 0.45),
    0 1px 1px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.55);
}
/* the label sits on the raised top face and lifts with it */
.seq button { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28); }
body[data-skin="sp404"] .seq button { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7); }

/* ---- pads: domed rubber standing proud of a recessed bezel ---- */
.mpc-pad {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.38),
    inset 1px 2px 2px rgba(255, 255, 255, 0.55),
    inset -2px -4px 6px rgba(0, 0, 0, 0.36),
    0 0 0 3px #596068,
    0 0 0 4px rgba(255, 255, 255, 0.3),
    0 4px 0 3px #3f454c,
    0 8px 8px 3px rgba(0, 0, 0, 0.38);
}
.mpc-pad .tx {
  background:
    radial-gradient(ellipse 66% 52% at 36% 26%, rgba(255, 255, 255, 0.4), transparent 72%),
    radial-gradient(ellipse 100% 100% at 62% 74%, transparent 46%, rgba(0, 0, 0, 0.36) 100%),
    var(--tx-rubber),
    var(--tx-rubber-lt);
  background-size: auto, auto, 120px 120px, 120px 120px;
  background-position: 0 0, 0 0, calc(var(--i) * 17px) calc(var(--i) * 9px), calc(var(--i) * 5px) calc(var(--i) * 13px);
}
.sp-pad {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 -5px 7px rgba(0, 0, 0, 0.65),
    0 0 0 2px #050506,
    0 0 0 3px rgba(255, 255, 255, 0.14),
    0 4px 0 3px #000,
    0 8px 9px 3px rgba(0, 0, 0, 0.6);
}
.sp-pad .tx {
  background:
    radial-gradient(ellipse 66% 48% at 38% 24%, rgba(255, 255, 255, 0.17), transparent 72%),
    radial-gradient(ellipse 100% 100% at 60% 74%, transparent 44%, rgba(0, 0, 0, 0.42) 100%),
    var(--tx-rubber-lt),
    var(--tx-rubber);
  background-size: auto, auto, 120px 120px, 120px 120px;
  background-position: 0 0, 0 0, calc(var(--i) * 17px) calc(var(--i) * 9px), calc(var(--i) * 5px) calc(var(--i) * 13px);
}
.mpc-pad:active, .sp-pad:active { transform: translateY(3px) scale(0.985); }

/* ==========================================================================
   Drum machines, round 4: new shapes and new proportions, drawn from the real
   hardware. The MP 2X is a wide Akai-style deck (LCD in a hooded black housing,
   short soft keys under it, a blue keypad, a knurled data wheel, long transport
   keys, and a big flat-pad plate). The SP 40 is a Roland-style slab (a round
   display dish, pill-shaped orange-legend keys, big rounded transport squares,
   tall glossy pads). Same controls and behaviour; only shapes, sizes and layout.
   ========================================================================== */

/* ---- shared: the sequencer becomes a control deck whose parts are placed by hand ---- */
body[data-skin="mpc"] .seq,
body[data-skin="sp404"] .seq {
  display: block;
  left: 14px;
  top: 14px;
  width: 404px;
  height: 380px;
}
body[data-skin="mpc"] .seq::before,
body[data-skin="sp404"] .seq::before { background: none; box-shadow: none; }
body[data-skin="mpc"] .seq > *,
body[data-skin="sp404"] .seq > * { position: absolute; margin: 0; }
body[data-skin="mpc"] .seq-transport::after, body[data-skin="mpc"] .seq-tempo::after, body[data-skin="mpc"] .seq-len::after, body[data-skin="mpc"] .seq-ptns::after,
body[data-skin="sp404"] .seq-transport::after, body[data-skin="sp404"] .seq-tempo::after, body[data-skin="sp404"] .seq-len::after, body[data-skin="sp404"] .seq-ptns::after { content: none; }
body[data-skin="mpc"] .seq-keys, body[data-skin="sp404"] .seq-keys { display: contents; }
body[data-skin="mpc"] .seq .sk, body[data-skin="sp404"] .seq .sk { width: auto; height: auto; min-width: 0; }
body[data-skin="mpc"] .seq-roll, body[data-skin="sp404"] .seq-roll { width: 100%; }
body[data-skin="mpc"] .seq-label { position: absolute; left: 1px; top: -12px; width: auto; flex-direction: row; align-items: baseline; gap: 6px; font-size: 7px; white-space: nowrap; }
body[data-skin="sp404"] .seq-label { display: none; }

/* ==========================================================================
   MP 2X
   ========================================================================== */
body[data-skin="mpc"] .seq-lcd {
  left: 14px; top: 8px; width: 330px; height: 104px;
  padding: 8px 12px;
  border-radius: 3px;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.6),
    0 0 0 7px #17181b,
    0 0 0 8px #44464b,
    0 0 0 10px #050506,
    0 8px 0 10px #050506,
    0 15px 12px 10px rgba(0, 0, 0, 0.3);
}
body[data-skin="mpc"] .seq-roll { height: auto; aspect-ratio: 712 / 128; }

/* the wordmark moves into the gap beside the LCD housing */
body[data-skin="mpc"] .mpc-brand { left: 380px; top: 22px; width: 68px; white-space: normal; }
body[data-skin="mpc"] .mpc-sub { line-height: 1.35; }

/* soft keys: short, wide and flat, like the F-keys under the LCD */
body[data-skin="mpc"] .seq-len {
  left: 14px; top: 134px; width: 330px; height: 20px;
  display: grid; grid-template-columns: repeat(8, 1fr) 1.35fr; gap: 5px;
}
body[data-skin="mpc"] .seq-len button { border-radius: 2px; font-size: 10px; }
body[data-skin="mpc"] .seq-len button .tx::before { inset: 2px 2px 4px; border-radius: 1px; }
body[data-skin="mpc"] .seq-len button {
  box-shadow: inset 0 1px 0 var(--k-hi), 0 0 0 1px var(--k-rim), 0 2px 0 1px var(--k-edge), 0 4px 3px rgba(0, 0, 0, 0.35);
}
body[data-skin="mpc"] .seq-len .sk,
body[data-skin="sp404"] .seq-len .sk {
  height: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
body[data-skin="mpc"] .seq-len .sk-wide { font-size: 8px; letter-spacing: 0.06em; }
body[data-skin="mpc"] .seq-len .sk-wide[data-hk]::before { display: none; }
body[data-skin="mpc"] .seq-len .sk-mini,
body[data-skin="sp404"] .seq-len .sk-mini { font-size: 8px; letter-spacing: 0.02em; }
body[data-skin="mpc"] .seq-len .sk-mini[data-hk]::before,
body[data-skin="sp404"] .seq-len .sk-mini[data-hk]::before { display: none; }

/* the keypad: a 3 x 3 block of small blue square keys (patterns 1-8 and Copy) */
body[data-skin="mpc"] .seq-ptns {
  left: 14px; top: 180px; width: 126px; height: 112px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 7px;
  outline: 1px solid rgba(40, 40, 46, 0.35);
  outline-offset: 6px;
  border-radius: 2px;
}
body[data-skin="mpc"] .seq-ptns button { border-radius: 3px; font-size: 13px; }
body[data-skin="mpc"] .seq-ptns .sk-wide { font-size: 8px; letter-spacing: 0.06em; }
body[data-skin="mpc"] .seq-ptns .sk-wide[data-hk]::before { display: none; }
body[data-skin="mpc"] .seq-ptns [data-act="copy"] {
  grid-column: 3; grid-row: 3; align-self: start; height: calc(50% - 3px); font-size: 7px;
}
body[data-skin="mpc"] .seq-ptns [data-act="roll"] {
  grid-column: 3; grid-row: 3; align-self: end; height: calc(50% - 3px); font-size: 7px;
}

/* the data wheel: BPM sits in a knurled black ring; drag or scroll it. - and + flank it on the left, Click / TAP / Erase on the right. */
body[data-skin="mpc"] .seq-tempo {
  left: 152px; top: 172px; width: 192px; height: 124px;
  display: grid; grid-template-columns: 46px 92px 46px; grid-template-rows: repeat(12, 1fr); gap: 0 2px;
}
body[data-skin="mpc"] .seq-tempo [data-act="bpm-"] { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 4px; }
body[data-skin="mpc"] .seq-tempo [data-act="qnt"] { grid-column: 1; grid-row: 4 / span 3; margin-bottom: 4px; }
body[data-skin="mpc"] .seq-tempo [data-act="swing"] { grid-column: 1; grid-row: 7 / span 3; margin-bottom: 4px; }
body[data-skin="mpc"] .seq-tempo [data-act="bpm+"] { grid-column: 1; grid-row: 10 / span 3; }
body[data-skin="mpc"] .seq-tempo [data-act="click"] { grid-column: 3; grid-row: 1 / span 4; margin-bottom: 6px; }
body[data-skin="mpc"] .seq-tempo [data-act="tap"] { grid-column: 3; grid-row: 5 / span 4; margin-bottom: 6px; }
body[data-skin="mpc"] .seq-tempo [data-act="erase"] { grid-column: 3; grid-row: 9 / span 4; }
body[data-skin="mpc"] .seq-tempo button { border-radius: 3px; }
body[data-skin="mpc"] .seq-tempo .sk-wide { font-size: 8px; letter-spacing: 0.05em; }
body[data-skin="mpc"] .seq-tempo .sk-wide[data-hk]::before { display: none; }
body[data-skin="mpc"] .seq-bpm {
  grid-column: 2; grid-row: 1 / span 12;
  align-self: center; justify-self: center;
  flex: none; width: 92px; height: 92px; border-radius: 50%;
  font-size: 15px; color: #d6def5; text-shadow: 0 1px 0 #000;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.14), transparent 40%),
    radial-gradient(circle, #34363b 0 26px, #0c0d0f 27px 29px, transparent 30px),
    repeating-conic-gradient(from 0deg, #4a4c52 0 2.5deg, #17181b 2.5deg 5deg);
  box-shadow:
    0 0 0 2px #0a0a0c,
    0 0 0 3px #5a5c61,
    0 0 0 8px rgba(0, 0, 0, 0.14),
    0 0 0 9px rgba(255, 255, 255, 0.35),
    0 6px 9px 6px rgba(0, 0, 0, 0.35);
}

/* transport: long, low keys along the bottom edge, REC and OVERDUB in red */
body[data-skin="mpc"] .seq-transport {
  left: 14px; top: 314px; width: 326px; height: 54px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
body[data-skin="mpc"] .seq-transport .tk { border-radius: 3px; gap: 5px; }
body[data-skin="mpc"] .tk-rec { --k1: #cf4a3c; --k2: #b8372b; --k3: #9a2a20; --k-edge: #5a1a14; }
body[data-skin="mpc"] .tk-dub { --k1: #d9604a; --k2: #c4492f; --k3: #a63a22; --k-edge: #5e2014; --k-text: #fff; }
body[data-skin="mpc"] .tk-dub { --ic-dub: #fff; }

/* the pad plate: a wider, darker recessed panel with a slim display strip and flat, square pads */
body[data-skin="mpc"] .mpc-panel { right: 14px; top: 10px; width: 300px; height: 396px; padding: 44px 12px 10px; gap: 6px; }
body[data-skin="mpc"] .mpc-lcd { height: 50px; padding: 4px 5px; }
body[data-skin="mpc"] .mpc-screen { padding: 2px 8px; }
body[data-skin="mpc"] .mpc-screen span:nth-child(1) { font-size: 11px; }
body[data-skin="mpc"] .mpc-screen span:nth-child(2) { font-size: 8px; }
body[data-skin="mpc"] .chop-st, body[data-skin="mpc"] .chop-en { font-size: 7px; }
body[data-skin="mpc"] .mpc-bay { padding: 10px; gap: 10px; border-radius: 3px; }
body[data-skin="mpc"] .mpc-pad {
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 3px rgba(0, 0, 0, 0.26),
    0 0 0 2px #596068,
    0 0 0 3px rgba(255, 255, 255, 0.26),
    0 3px 0 2px #3d434a,
    0 6px 6px 2px rgba(0, 0, 0, 0.32);
}
body[data-skin="mpc"] .mpc-pad .tx {
  background:
    radial-gradient(ellipse 80% 60% at 40% 22%, rgba(255, 255, 255, 0.22), transparent 74%),
    radial-gradient(ellipse 110% 110% at 60% 80%, transparent 55%, rgba(0, 0, 0, 0.24) 100%),
    var(--tx-rubber),
    var(--tx-rubber-lt);
  background-size: auto, auto, 120px 120px, 120px 120px;
  background-position: 0 0, 0 0, calc(var(--i) * 17px) calc(var(--i) * 9px), calc(var(--i) * 5px) calc(var(--i) * 13px);
}
/* the squared inner face of the pad */
body[data-skin="mpc"] .mpc-pad .tx::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 1px 0 rgba(255, 255, 255, 0.32);
}
body[data-skin="mpc"] .mpc-pad::after { font-size: 19px; }

/* ==========================================================================
   SP 40
   ========================================================================== */
body[data-skin="sp404"] .sp-brand { left: 28px; top: 11px; font-size: 20px; }
body[data-skin="sp404"] .sp-brand::after {
  content: "sampler";
  margin-left: 9px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8e9199;
  text-shadow: none;
}

/* the display: a wide, deeply rounded black slab with a double bezel */
body[data-skin="sp404"] .seq-lcd {
  left: 14px; top: 34px; width: 380px; height: 88px;
  padding: 8px 16px;
  border-radius: 16px;
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.85),
    0 0 0 2px #000,
    0 0 0 3px #4b4c51,
    0 0 0 8px #0b0b0d,
    0 0 0 9px #2c2d31,
    0 7px 9px 8px rgba(0, 0, 0, 0.4);
}
body[data-skin="sp404"] .seq-roll { height: 38px; }

/* the round dish: the pad number and its name */
body[data-skin="sp404"] .sp-round {
  position: absolute;
  left: 28px; top: 152px;
  width: 104px; height: 104px;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 22%, #25262b, #050506 70%);
  box-shadow:
    inset 0 3px 8px rgba(255, 255, 255, 0.06),
    0 0 0 3px #000,
    0 0 0 4px #4b4c51,
    0 0 0 9px #0b0b0d,
    0 0 0 10px #2c2d31,
    0 8px 10px 9px rgba(0, 0, 0, 0.4);
}
body[data-skin="sp404"] .sp-round span { min-width: 0; font-size: 28px; text-align: center; }
body[data-skin="sp404"] .sp-round small { flex: none; width: 82px; text-align: center; font-size: 8px; letter-spacing: 0.08em; }
body[data-skin="sp404"] .sp-round { gap: 3px; }

/* tempo: a pill readout with round - and + keys, then Click / Qnt / TAP / Erase */
body[data-skin="sp404"] .seq-tempo {
  left: 140px; top: 138px; width: 254px; height: 104px;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr; gap: 8px 6px;
}
body[data-skin="sp404"] .seq-tempo [data-act="bpm-"] { grid-column: 1; grid-row: 1; }
body[data-skin="sp404"] .seq-bpm { grid-column: 2 / 5; grid-row: 1; height: auto; flex: none; border-radius: 24px; font-size: 26px; }
body[data-skin="sp404"] .seq-tempo [data-act="bpm+"] { grid-column: 5; grid-row: 1; }
body[data-skin="sp404"] .seq-tempo [data-act="click"] { grid-column: 1; grid-row: 2; }
body[data-skin="sp404"] .seq-tempo [data-act="qnt"] { grid-column: 2; grid-row: 2; }
body[data-skin="sp404"] .seq-tempo [data-act="swing"] { grid-column: 3; grid-row: 2; }
body[data-skin="sp404"] .seq-tempo [data-act="tap"] { grid-column: 4; grid-row: 2; }
body[data-skin="sp404"] .seq-tempo [data-act="erase"] { grid-column: 5; grid-row: 2; }
body[data-skin="sp404"] .seq-tempo .sk-step { border-radius: 50%; }
body[data-skin="sp404"] .seq-tempo .sk-step .tx::before { border-radius: 50%; }
body[data-skin="sp404"] .seq-tempo button { border-radius: 14px; }
body[data-skin="sp404"] .seq-tempo .sk-step { border-radius: 50%; }

/* TAP: the amber tempo pad. Lights up on each hit; the wheel flashes when a tempo locks. */
.seq .sk-tap {
  --k1: #f6a548;
  --k2: #ee8c32;
  --k3: #d06c1a;
  --k-hi: rgba(255, 236, 180, 0.75);
  --k-rim: rgba(100, 50, 12, 0.6);
  --k-edge: #94501a;
  --k-text: #2a1400;
  --wear: rgba(255, 220, 150, 0.45);
}
body[data-skin="sp404"] .seq .sk-tap {
  --k1: #3a2410;
  --k2: #1c1208;
  --k3: #0a0602;
  --k-hi: rgba(255, 170, 60, 0.22);
  --k-rim: #040200;
  --k-edge: #000;
  --k-text: #ffb24a;
}
.seq .sk-tap.hit,
.seq .sk-tap:active {
  transform: translateY(3px);
  filter: brightness(1.18) saturate(1.15);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.28),
    0 0 0 1px var(--k-rim),
    0 1px 0 var(--k-edge),
    0 0 14px 3px rgba(255, 150, 30, 0.7);
}
body[data-skin="sp404"] .seq .sk-tap.hit,
body[data-skin="sp404"] .seq .sk-tap:active {
  --k1: #ffb24a;
  --k2: #ee8c22;
  --k3: #c46810;
  --k-text: #2a1400;
  --k-hi: rgba(255, 236, 180, 0.75);
}
@keyframes tap-wheel {
  0% { filter: brightness(1.45) saturate(1.2); }
  100% { filter: brightness(1); }
}
.seq-bpm.pulse { animation: tap-wheel 0.22s ease-out; }

/* bars, then patterns: two tight rows of small rounded keys */
body[data-skin="sp404"] .seq-len {
  left: 14px; top: 258px; width: 380px; height: 28px;
  display: grid; grid-template-columns: repeat(8, 1fr) 1.15fr; gap: 8px;
}
body[data-skin="sp404"] .seq-ptns {
  left: 14px; top: 294px; width: 380px; height: 28px;
  display: grid; grid-template-columns: repeat(8, 1fr) 1.15fr 1.15fr; gap: 6px;
}
body[data-skin="sp404"] .seq-row button { border-radius: 8px; font-size: 13px; }
body[data-skin="sp404"] .seq-row .tx::before { inset: 3px 3px 5px; border-radius: 5px; }
body[data-skin="sp404"] .seq-row .sk-wide { font-size: 9px; letter-spacing: 0.08em; }
body[data-skin="sp404"] .seq-row .sk-wide[data-hk]::before { display: none; }

/* transport: four big rounded squares, like the large keys on the real unit */
body[data-skin="sp404"] .seq-transport {
  left: 14px; top: 332px; width: 380px; height: 44px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
body[data-skin="sp404"] .seq-transport .tk { border-radius: 12px; flex-direction: row; gap: 8px; }
body[data-skin="sp404"] .seq-transport .tx::before { inset: 4px 4px 6px; border-radius: 9px; }
body[data-skin="sp404"] .seq-transport .tk span { font-size: 9px; }

/* the pad plate: tall, glossy pads with deeply rounded corners */
body[data-skin="sp404"] .sp-panel { right: 14px; top: 34px; width: 316px; height: 360px; padding: 46px 10px 8px; }
body[data-skin="sp404"] .sp-bay { padding: 2px; gap: 10px; }
body[data-skin="sp404"] .sp-pad { border-radius: 10px; }
body[data-skin="sp404"] .sp-pad .tx::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
body[data-skin="sp404"] .sp-pad::before { width: 34px; height: 11px; margin-left: -17px; bottom: 14px; border-radius: 3px; font-size: 8px; }

/* round 4 touch-ups */
body[data-skin="mpc"] .seq-tempo button { height: 100%; align-self: stretch; }
body[data-skin="mpc"] .seq-ptns .sk.has::after { left: auto; right: 5px; top: 4px; bottom: auto; margin: 0; }
body[data-skin="mpc"] .mpc-mark { display: inline-block; }
body[data-skin="sp404"] .seq-tempo button { height: 100%; align-self: stretch; }

/* ==========================================================================
   Round 5: SP receiver matches its chassis; quieter key texture; deeper pad shadows
   ========================================================================== */
body[data-skin="mpc"], body[data-skin="sp404"] {
  --tx-grain-faint-dk: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.95%200.95'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200.28%200%200%200%20-0.11'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-grain-faint-lt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8%200.8'%20numOctaves='2'%20seed='9'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.24%200%200%200%20-0.1'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
}

/* SP 40 bottom panel: the same matte charcoal as the top panel */
body[data-skin="sp404"] .face::before,
body[data-skin="sp404"] .drops::before {
  background:
    radial-gradient(circle at 9px 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at 9px calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    linear-gradient(90deg, #ff3b2f 0 20%, transparent 20%),
    var(--tx-scr-panel-lt),
    var(--tx-grain-dk),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 14%),
    linear-gradient(180deg, #62646b, #55575d 55%, #4a4c52);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto, auto, 100% 4px, 100% 100%, 140px 140px, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* keys: much quieter surface; the shaping gradients stay, the grain is a whisper */
body[data-skin="mpc"] .seq button .tx,
body[data-skin="mpc"] .utilbar button .tx {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.02) 30%, transparent 60%, rgba(0, 0, 0, 0.3)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 16% 84%, rgba(0, 0, 0, 0.22)),
    var(--tx-grain-faint-dk);
  background-size: auto, auto, 140px 140px;
  background-position: 0 0, 0 0, var(--gp, 0 0);
}
body[data-skin="sp404"] .seq button .tx,
body[data-skin="sp404"] .utilbar button .tx {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.02) 30%, transparent 60%, rgba(0, 0, 0, 0.3)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 16% 84%, rgba(0, 0, 0, 0.22)),
    var(--tx-grain-faint-lt);
  background-size: auto, auto, 140px 140px;
  background-position: 0 0, 0 0, var(--gp, 0 0);
}
body[data-skin="mpc"] .seq button .tx::after,
body[data-skin="sp404"] .seq button .tx::after,
body[data-skin="mpc"] .utilbar button .tx::after,
body[data-skin="sp404"] .utilbar button .tx::after { opacity: calc(var(--w, 0.55) * 0.3); }
body[data-skin="sp404"] .seq button .tx::before,
body[data-skin="sp404"] .utilbar button .tx::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0.2));
}

/* pads: a real drop shadow under each one (a hard contact edge, then a soft, wide fall-off) */
body[data-skin="mpc"] .mpc-pad {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 3px rgba(0, 0, 0, 0.26),
    0 0 0 2px #596068,
    0 0 0 3px rgba(255, 255, 255, 0.26),
    0 4px 0 2px #3d434a,
    0 8px 7px 2px rgba(0, 0, 0, 0.5),
    0 15px 16px 2px rgba(0, 0, 0, 0.32);
}
body[data-skin="sp404"] .sp-pad {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 -5px 7px rgba(0, 0, 0, 0.65),
    0 0 0 2px #050506,
    0 0 0 3px rgba(255, 255, 255, 0.14),
    0 5px 0 3px #000,
    0 10px 9px 3px rgba(0, 0, 0, 0.75),
    0 18px 18px 3px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Round 6: SP bottom panel = the pad well; MP pad bay = its bottom panel; stickers
   ========================================================================== */

/* SP 40 receiver: the same near-black as the recessed pad well */
body[data-skin="sp404"] .face::before,
body[data-skin="sp404"] .drops::before {
  background:
    radial-gradient(circle at 9px 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at 9px calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    linear-gradient(90deg, #ff3b2f 0 20%, transparent 20%),
    var(--tx-scr-panel-lt),
    var(--tx-grain-lt),
    var(--tx-grain-dk),
    linear-gradient(180deg, #62646b, #55575d 55%, #4a4c52);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, auto, auto, 100% 4px, 100% 100%, 140px 140px, 140px 140px, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 40px 17px, 0 0;
}
body[data-skin="sp404"] .face {
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* MP 2X pad bay: the same silver-grey as the bottom panel */
body[data-skin="mpc"] .mpc-bay {
  background:
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(30, 26, 16, 0.12), transparent 70%),
    var(--tx-grain-dk),
    var(--tx-grain-lt),
    linear-gradient(180deg, #c6cacf, #b3b8bf);
  background-size: auto, 140px 140px, 140px 140px, auto;
  background-position: 0 0, 0 0, 40px 17px, 0 0;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* stickers: die-cut vinyl, stuck on a bit crooked, with a gloss, a few scuffs and a little shadow */
.stickers { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--see, 1); }
body[data-skin="mpc"] .stickers-mpc,
body[data-skin="mpc"] .stickers-under:not(.stickers-usp) { display: block; }
.stk {
  position: absolute;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 1px 0.6px rgba(0, 0, 0, 0.5)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.28));
}
.stk svg { display: block; width: 100%; height: auto; }
body.overlay.is-min .stickers { display: none !important; }

/* sticker placement: 2 on the top panel (one big, one small), 3 on the receiver (big, medium, small) */
.stk-tm1 { left: 394px; top: 82px; width: 44px; --r: -10deg; }
.stk-tm2 { left: 354px; top: 238px; width: 98px; --r: -5deg; }
.stk-ts1 { left: 166px; top: 3px; width: 122px; --r: -3deg; }
.stk-ts2 { left: 406px; top: 296px; width: 44px; --r: 12deg; }
.stk-fm1 { left: 556px; top: 10px; width: 128px; --r: 4deg; }
.stk-fm2 { left: 686px; top: 312px; width: 68px; --r: -11deg; }
.stk-fm3 { left: 12px; top: 492px; width: 56px; --r: 5deg; }
.stk-fs1 { left: 590px; top: 6px; width: 84px; --r: -4deg; }
.stk-fs2 { left: 688px; top: 308px; width: 68px; --r: 8deg; }
.stk-fs3 { left: 14px; top: 488px; width: 32px; --r: -9deg; }
.stk-tm2 { left: 366px; top: 252px; width: 92px; --r: -5deg; }
.stk-fm1 { left: 574px; top: 12px; width: 126px; --r: 4deg; }
.stk-ts2 { left: 408px; top: 216px; width: 44px; --r: 12deg; }
.stk-fs2 { left: 692px; top: 322px; width: 66px; --r: 8deg; }


/* ==========================================================================
   Round 7: SP 40 surfaces almost smooth (about 90% less grain on the receiver, pad well and pads)
   ========================================================================== */
body[data-skin="sp404"] {
  --tx-whisper-dk: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.95%200.95'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200.07%200%200%200%20-0.033'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-whisper-lt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8%200.8'%20numOctaves='2'%20seed='9'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.065%200%200%200%20-0.031'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-whisper-rubber: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='1.25%201.25'%20numOctaves='1'%20seed='33'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200.09%200%200%200%20-0.04'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tx-whisper-rubber-lt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='1.1%201.1'%20numOctaves='1'%20seed='34'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.07%200%200%200%20-0.034'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
}
body[data-skin="sp404"] .face::before,
body[data-skin="sp404"] .drops::before {
  background:
    radial-gradient(circle at 9px 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at 9px calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    linear-gradient(90deg, #ff3b2f 0 20%, transparent 20%),
    var(--tx-scr-panel-lt),
    var(--tx-whisper-lt),
    var(--tx-whisper-dk),
    linear-gradient(180deg, #62646b, #55575d 55%, #4a4c52);
}
body[data-skin="sp404"] .sp-panel {
  background:
    var(--tx-scr-panel-lt),
    radial-gradient(ellipse 60% 40% at 30% 25%, rgba(255, 255, 255, 0.04), transparent 70%),
    var(--tx-whisper-lt),
    var(--tx-whisper-dk),
    linear-gradient(180deg, #2c2e32, #212326);
  background-size: 100% 100%, auto, 140px 140px, 140px 140px, auto;
}
body[data-skin="sp404"] .sp-pad .tx {
  background:
    radial-gradient(ellipse 66% 48% at 38% 24%, rgba(255, 255, 255, 0.17), transparent 72%),
    radial-gradient(ellipse 100% 100% at 60% 74%, transparent 44%, rgba(0, 0, 0, 0.42) 100%),
    var(--tx-whisper-rubber-lt),
    var(--tx-whisper-rubber);
  background-size: auto, auto, 120px 120px, 120px 120px;
  background-position: 0 0, 0 0, calc(var(--i) * 17px) calc(var(--i) * 9px), calc(var(--i) * 5px) calc(var(--i) * 13px);
}
body[data-skin="sp404"] .sp-pad .tx::after { opacity: calc(var(--w, 0.4) * 0.15); }
body[data-skin="sp404"] .face::before,
body[data-skin="sp404"] .drops::before {
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, auto, auto, 100% 4px, 100% 100%, 140px 140px, 140px 140px, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 40px 17px, 0 0;
}

/* crate-digger sticker set: placement and sizes (2 top, 3 receiver per machine; big, medium, small) */
.stk-tm1 { left: 396px; top: 84px; width: 44px; --r: 14deg; }
.stk-tm2 { left: 366px; top: 244px; width: 92px; --r: -6deg; }
.stk-ts1 { left: 166px; top: 4px; width: 126px; --r: -3deg; }
.stk-ts2 { left: 408px; top: 214px; width: 46px; --r: 10deg; }
.stk-fm1 { left: 572px; top: 12px; width: 130px; --r: 3deg; }
.stk-fm2 { left: 688px; top: 312px; width: 70px; --r: -9deg; }
.stk-fm3 { left: 14px; top: 486px; width: 46px; --r: 7deg; }
.stk-fs1 { left: 590px; top: 6px; width: 84px; --r: -4deg; }
.stk-fs2 { left: 690px; top: 316px; width: 68px; --r: 8deg; }
.stk-fs3 { left: 14px; top: 488px; width: 42px; --r: -8deg; }

/* worn crate-digger stickers: each svg now carries an 8-unit margin for the die-cut border, so widths are a little larger */
.stk-tm1 { left: 390px; top: 74px; width: 52px; --r: 12deg; }
.stk-tm2 { left: 350px; top: 238px; width: 108px; --r: -6deg; }
.stk-ts1 { left: 160px; top: -2px; width: 134px; --r: -2.5deg; }
.stk-ts2 { left: 398px; top: 204px; width: 60px; --r: 9deg; }
.stk-fm1 { left: 618px; top: -2px; width: 112px; --r: 3deg; }
.stk-fm2 { left: 680px; top: 300px; width: 84px; --r: -8deg; }
.stk-fm3 { left: 8px; top: 480px; width: 58px; --r: 7deg; }
.stk-fs1 { left: 612px; top: 0px; width: 120px; --r: -4deg; }
.stk-fs2 { left: 684px; top: 306px; width: 76px; --r: 7deg; }
.stk-fs3 { left: 8px; top: 478px; width: 62px; --r: -8deg; }

/* sequencer screen: a very quiet glow on the notes (read by machine.js) */
body[data-skin="mpc"] .seq { --seq-glow: 12; --seq-glow-color: rgba(140, 180, 255, 0.85); }
body[data-skin="sp404"] .seq { --seq-glow: 13; --seq-glow-color: rgba(255, 140, 40, 0.85); }

/* Lion of Judah sticker, between Siren and Voice on the SP 40 receiver */
.stk-fs4 { left: 321px; top: 316px; width: 92px; --r: -7deg; }

/* Steal-your-face sticker, between Siren and Voice on the MP 2X receiver */
.stk-fm4 { left: 302.4px; top: 135.2px; width: 299.2px; --r: 0deg; }

/* big Steal-Your-Face sticker: sits UNDER the receiver controls, cut around the knobs and panels */
.stickers.stickers-under { z-index: 1; }
body[data-skin="mpc"] .stickers-under:not(.stickers-usp) { display: block; }
body[data-skin="mpc"] .face > .meter-row,
body[data-skin="mpc"] .face > .knob-row,
body[data-skin="mpc"] .face > .tools-row,
body[data-skin="mpc"] .face > .switch-row { position: relative; z-index: 2; }
body.overlay.is-min .stickers-under { display: none !important; }
.stk-fm4 { left: 302.4px; top: 135.2px; width: 299.2px; --r: 0deg; }

/* navy/grey/black boombox, tucked under the L meter and Tone knobs, cut around them (angled up) */
.stk-fm5 { left: -8.62px; top: 137.43px; width: 191.25px; --r: -6deg; }

/* big MP skull: starts at the old bolt, runs down to the receiver, tucked under the pads */
.stk-tm1 { left: 286px; top: 116px; width: 408px; --r: 3.5deg; }
body[data-skin="mpc"] .plinth .mpc-pad,
body[data-skin="mpc"] .plinth .seq-tempo button,
body[data-skin="mpc"] .plinth .seq-bpm { position: relative; z-index: 2; }
body[data-skin="mpc"] .plinth .seq-transport,
body[data-skin="mpc"] .plinth .seq-len,
body[data-skin="mpc"] .plinth .seq-ptns { z-index: 2; }

.stk-fm2 { left: 653.50px; top: 285.50px; width: 105.00px; --r: -8deg; }
.stk-fm3 { left: 6.50px; top: 472.50px; width: 87.00px; --r: 7deg; }

.stk-fm2 { left: 653.50px; top: 285.50px; width: 105.00px; --r: -8deg; }
.stk-fm3 { left: 6.50px; top: 468.50px; width: 87.00px; --r: 7deg; }

.stk-fm2 { left: 653.50px; top: 285.50px; width: 105.00px; --r: -8deg; }
.stk-fm3 { left: 6.50px; top: 468.50px; width: 87.00px; --r: 7deg; }

/* ===== SP 40 sticker upgrade ===== */
.stickers.stickers-usp { z-index: 1; }
body[data-skin="sp404"] .stickers-usp { display: block; }
body[data-skin="sp404"] .stk-fs1 { z-index: 0; }
body.overlay.is-min .stickers-usp { display: none !important; }
body[data-skin="sp404"] .face > .meter-row,
body[data-skin="sp404"] .face > .knob-row,
body[data-skin="sp404"] .face > .tools-row,
body[data-skin="sp404"] .face > .switch-row { position: relative; z-index: 2; }
body[data-skin="sp404"] .plinth .seq,
body[data-skin="sp404"] .plinth .sp-panel,
body[data-skin="sp404"] .plinth .sp-round,
body[data-skin="sp404"] .plinth .sp-brand { z-index: 2; }
.stk-ts1 { left: 151.40px; top: -5.80px; width: 187.20px; --r: -2.5deg; }
.stk-ts3 { left: 487.00px; top: -12.00px; width: 226.00px; --r: -3deg; }
.stk-fs5 { left: 110.40px; top: 339.20px; width: 115.20px; --r: -8deg; }
.stk-fs1 { left: 578.00px; top: 9.33px; width: 168.00px; --r: -4deg; }
.stk-fs2 { left: 680.85px; top: 117.50px; width: 90.30px; --r: 6deg; }
.stk-fs3 { left: 5.50px; top: 459.50px; width: 93.00px; --r: -8deg; }
.stk-fs4 { left: 284px; top: 120px; width: 336px; --r: 0deg; }

/* ==========================================================================
   SP 40: "fat knobs" (the chunky rubber caps everyone slips onto their SP-404).
   Wide, tall, ribbed on the side and around the rim, bright colour-coded caps.
   ========================================================================== */
body[data-skin="sp404"] .knob,
body[data-skin="sp404"] .selector {
  --fat: #f4c430; --fat-hi: #ffe98a; --fat-lo: #c18f0c; --fat-side: #7d5a06; --fat-ind: #1a1408;
}
body[data-skin="sp404"] .knob[data-param="wow"],
body[data-skin="sp404"] .knob[data-param="age"],
body[data-skin="sp404"] .knob[data-param="warmth"] {
  --fat: #e83a2c; --fat-hi: #ff8f78; --fat-lo: #a8160c; --fat-side: #650a05; --fat-ind: #fff;
}
body[data-skin="sp404"] .knob[data-param="filter"] {
  --fat: #2f7bff; --fat-hi: #8fc0ff; --fat-lo: #1450c4; --fat-side: #0a2c78; --fat-ind: #fff;
}
body[data-skin="sp404"] .selector {
  --fat: #26c26a; --fat-hi: #8bf0b2; --fat-lo: #118040; --fat-side: #07461f; --fat-ind: #fff;
}
/* MP 2X: same fat shape, graphite knobs, classic blue Voice cap */
body[data-skin="mpc"] .knob,
body[data-skin="mpc"] .selector {
  --fat: var(--kn-top2); --fat-hi: var(--kn-top1); --fat-lo: var(--kn-top3);
  --fat-wall-top: var(--kn-sk2); --fat-side: var(--kn-sk3); --fat-ind: var(--kn-ind);
}
body[data-skin="mpc"] .selector {
  --fat: #2f6fe0; --fat-hi: #8fc0ff; --fat-lo: #1450c4;
  --fat-wall-top: #3a62b8; --fat-side: #0a2c78; --fat-ind: #fff;
}
/* the sidewall of the cylinder (does not turn, so the shadow stays put) */
body:is([data-skin="sp404"], [data-skin="mpc"]) .knob-ring,
body:is([data-skin="sp404"], [data-skin="mpc"]) .selector-ring {
  inset: 5px;
  background-color: var(--fat-side);
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0 1.6px, transparent 1.6px 4px),
    linear-gradient(180deg, var(--fat-wall-top, var(--fat-lo)), var(--fat-side));
  box-shadow:
    0 9px 11px rgba(0, 0, 0, 0.7),
    0 2px 3px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22);
}
/* the fat rounded top */
body:is([data-skin="sp404"], [data-skin="mpc"]) .knob-cap,
body:is([data-skin="sp404"], [data-skin="mpc"]) .selector-cap {
  inset: 1.5px 6px 10.5px;
  background-color: var(--fat);
  background-image: radial-gradient(circle at 38% 28%, var(--fat-hi), var(--fat) 52%, var(--fat-lo) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.5),
    inset 0 -5px 7px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.55);
}
/* ribbed rim */
body:is([data-skin="sp404"], [data-skin="mpc"]) .knob-spin::before {
  background: repeating-conic-gradient(rgba(0, 0, 0, 0.24) 0 2.2deg, transparent 2.2deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 76%, #000 78%);
  mask: radial-gradient(circle, transparent 0 76%, #000 78%);
}
/* soft dish on top + a fixed light */
body:is([data-skin="sp404"], [data-skin="mpc"]) .knob-cap::after,
body:is([data-skin="sp404"], [data-skin="mpc"]) .selector-cap::after {
  inset: 7px;
  background:
    conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.34) 30deg, transparent 70deg, transparent 180deg, rgba(255, 255, 255, 0.16) 214deg, transparent 252deg),
    radial-gradient(circle, rgba(0, 0, 0, 0.12) 0 58%, transparent 62%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 1px 0 rgba(255, 255, 255, 0.28);
}
body:is([data-skin="sp404"], [data-skin="mpc"]) .knob-cap i,
body:is([data-skin="sp404"], [data-skin="mpc"]) .selector .knob-cap i {
  top: 6px;
  width: 5px;
  height: 16px;
  border-radius: 3px;
  background: var(--fat-ind);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* SP 40 pad legends: whitish with a soft glow (the lit/hit state keeps its dark-on-bright look) */
body[data-skin="sp404"] .sp-pad:not(.hit):not(:active)::after {
  color: #fff7ea;
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.67),
    0 0 8px rgba(255, 244, 220, 0.49),
    0 0 15px rgba(255, 214, 150, 0.28);
}

/* ===== machine effects live on the last four bar keys ===== */
.fxbar { display: none !important; }
.seq-len [data-fx] {
  position: relative;
}
.seq-len [data-fx].armed[data-level="1"] {
  --fx-b1: #c8f4f0; --fx-b2: #5ec8c0; --fx-b3: #2a9a94;
  --fx-edge: #1a6e6a; --fx-glow: rgba(80, 210, 200, 0.7);
}
.seq-len [data-fx].armed[data-level="2"] {
  --fx-b1: #7a9cff; --fx-b2: #3d5ae0; --fx-b3: #243fb0;
  --fx-edge: #162878; --fx-glow: rgba(80, 110, 255, 0.85);
}
.seq-len [data-fx].armed[data-level="3"] {
  --fx-b1: #8a5cff; --fx-b2: #4a28d4; --fx-b3: #2a1288;
  --fx-edge: #16085a; --fx-glow: rgba(130, 80, 255, 0.9);
}
body[data-skin="mpc"] .seq-len [data-fx].armed:not([data-level="0"]),
body[data-skin="mpc"] .seq-len [data-fx].armed.on:not([data-level="0"]),
body[data-skin="sp404"] .seq-len [data-fx].armed:not([data-level="0"]),
body[data-skin="sp404"] .seq-len [data-fx].armed.on:not([data-level="0"]) {
  --k-text: #f4f8ff; --k-hi: rgba(255, 255, 255, 0.55);
  color: #f4f8ff;
  background: linear-gradient(180deg, var(--fx-b1), var(--fx-b2) 70%, var(--fx-b3));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(12, 32, 80, 0.65),
    0 2px 0 1px var(--fx-edge),
    0 4px 3px rgba(0, 0, 0, 0.35),
    0 0 12px 1px var(--fx-glow);
  text-shadow: 0 1px 0 rgba(10, 28, 72, 0.45);
  animation: none;
}

/* tiny LEDs on a pad that has an effect stamped on it — same blues as the FX keys */
.fx-dots {
  position: absolute; top: 4px; right: 4px; z-index: 3;
  display: flex; gap: 2px; pointer-events: none;
}
.fx-dots b {
  display: none;
  width: 6px; height: 6px; border-radius: 50%;
}
.fx-dots b[data-level="1"] {
  display: block;
  background: #5ec8c0;
  box-shadow: 0 0 0 1px rgba(20, 80, 76, 0.45), 0 0 6px #5ec8c0;
}
.fx-dots b[data-level="2"] {
  display: block;
  background: #3d5ae0;
  box-shadow: 0 0 0 1px rgba(16, 28, 90, 0.5), 0 0 7px #7a9cff;
}
.fx-dots b[data-level="3"] {
  display: block;
  background: #4a28d4;
  box-shadow: 0 0 0 1px rgba(18, 8, 70, 0.55), 0 0 8px #8a5cff;
}
body[data-skin="mpc"] .fx-dots b[data-k="vin"],
body[data-skin="sp404"] .fx-dots b[data-k="comp"] { display: none !important; }

body.fx-assign .mpc-pad,
body.fx-assign .sp-pad { animation: fx-pad 1s ease-in-out infinite; }
@keyframes fx-pad {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

/* the how-to card: same plastic as the machine it popped out of */
.mpc-bay, .sp-bay { position: relative; }
.fx-tip {
  position: absolute; left: 10px; right: 10px; top: 10px; z-index: 30;
  width: auto; padding: 10px 12px 11px;
  opacity: 1;
  transform: rotate(-1.4deg);
  pointer-events: auto;
}
.fx-tip[hidden] { display: none; }
.fx-tip-kicker {
  display: inline-block; margin-bottom: 6px; padding: 2px 7px;
  font: 800 8px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.18em; text-transform: uppercase;
  transform: rotate(-2deg);
}
.fx-tip-lcd {
  padding: 8px 10px 7px; margin-bottom: 8px;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
}
.fx-tip-title { display: block; font-size: 16px; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; }
.fx-tip-line { display: block; margin-top: 2px; font-size: 10px; font-style: normal; letter-spacing: 0.12em; }
.fx-tip-copy { margin: 0 0 8px; font: 600 11px/1.35 "Helvetica Neue", Arial, sans-serif; }
.fx-tip-copy b { font-weight: 800; }
.fx-tip-ok {
  appearance: none; cursor: pointer;
  height: 22px; padding: 0 12px;
  font: 800 10px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
}

body[data-skin="mpc"] .fx-tip {
  background: linear-gradient(180deg, #e8e6df, #d4d0c6);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px #9aa0a8,
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 0 0 1px #6f757d,
    0 8px 18px rgba(0,0,0,0.35);
}
body[data-skin="mpc"] .fx-tip-kicker { background: #2c4075; color: #dfe7ff; }
body[data-skin="mpc"] .fx-tip-lcd {
  background: linear-gradient(180deg, #2c4075, #1b2a54);
  color: #dfe7ff;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55), 0 0 0 1px #0a0b10;
}
body[data-skin="mpc"] .fx-tip-line { color: #aebbdc; }
body[data-skin="mpc"] .fx-tip-copy { color: #2a2d32; }
body[data-skin="mpc"] .fx-tip-ok {
  color: #2a1400; background: linear-gradient(#f0f0ea, #c8c8c0); border: 1px solid #6f757d; border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #8a8e94;
}

body[data-skin="sp404"] .fx-tip {
  background: linear-gradient(180deg, #3a3a38, #262624);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px #111,
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px #000,
    0 8px 18px rgba(0,0,0,0.5);
}
body[data-skin="sp404"] .fx-tip-kicker { background: #1a1208; color: #ffb347; }
body[data-skin="sp404"] .fx-tip-lcd {
  background: linear-gradient(180deg, #1a140c, #0c0a07);
  color: #ffb14a;
  text-shadow: 0 0 8px rgba(255, 160, 40, 0.55);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7), 0 0 0 1px #000;
}
body[data-skin="sp404"] .fx-tip-line { color: #c47a28; }
body[data-skin="sp404"] .fx-tip-copy { color: #d8d0c0; }
body[data-skin="sp404"] .fx-tip-ok {
  color: #ffe6b8; background: linear-gradient(#4a4540, #2b2825); border: 1px solid #111; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 0 #111;
}


/* sample care: the same card as the how-to, once, the first time a sound comes in */
.care-tip { transform: rotate(1.2deg); }
.care-tip-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.care-tip-link {
  color: inherit; font-weight: 800; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer;
}
.care-tip .care-tip-link { font: 800 10px/1.2 "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.04em; }
body[data-skin="mpc"] .care-tip .care-tip-link { color: #2c4075; }
body[data-skin="sp404"] .care-tip .care-tip-link { color: #ffb347; }
.care-note { opacity: 0.85; }
.care-note .care-tip-link { white-space: nowrap; }

/* ===== drum kit strip: bolted on the crown of the pad plate ===== */
.kitbar { display: none; }
body:is([data-skin="mpc"], [data-skin="sp404"]) .kitbar {
  position: absolute;
  z-index: 6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 7px;
}
body[data-skin="mpc"] .kitbar {
  right: 26px;
  top: 16px;
  width: 276px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #d5dae0, #a8aeb6 55%, #8e949c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 3px 4px rgba(0, 0, 0, 0.28);
}
body[data-skin="sp404"] .kitbar {
  right: 24px;
  top: 42px;
  width: 296px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 36%),
    linear-gradient(180deg, #3a3c42, #16181c 58%, #0c0d10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 3px rgba(0, 0, 0, 0.55),
    0 0 0 1px #000,
    0 0 0 2px rgba(255, 140, 50, 0.22),
    0 3px 5px rgba(0, 0, 0, 0.4);
}
.kitbar .kit-rivet {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4f6f8, #8a9098 45%, #3a3e44 78%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.kitbar .kit-window {
  flex: 1;
  min-width: 0;
  height: 22px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  overflow: hidden;
}
body[data-skin="mpc"] .kit-window {
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 50% 0%, #243456, #070b14 72%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(120, 160, 220, 0.18),
    0 0 0 1px #0a0c10,
    0 0 0 2px #6a7078;
}
body[data-skin="sp404"] .kit-window {
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 0%, #2a1608, #070605 74%);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.8),
    0 0 0 1px #000,
    0 0 0 2px #3a2a18;
}
.kitbar .kit-kicker {
  flex: none;
  font: 800 6px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body[data-skin="mpc"] .kit-kicker { color: #7f93b4; }
body[data-skin="sp404"] .kit-kicker { color: #c47a28; }
.kitbar .kit-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body[data-skin="mpc"] .kit-name {
  color: #ffd9a0;
  text-shadow: 0 0 6px rgba(255, 176, 64, 0.75);
}
body[data-skin="sp404"] .kit-name {
  color: #ffb14a;
  text-shadow: 0 0 7px rgba(255, 140, 40, 0.7);
}
.kitbar .kit-keys { flex: none; display: flex; gap: 3px; }
.kitbar button {
  appearance: none;
  position: relative;
  width: 24px;
  height: 24px;
  padding: 2px 0 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  border: 0;
  border-radius: 3px;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  color: #1a120c;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 42%),
    linear-gradient(180deg, var(--cap-hi), var(--cap) 58%, var(--cap-lo));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 2px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 2px 0 var(--cap-edge);
}
body[data-skin="sp404"] .kitbar button { border-radius: 6px; }
.kitbar button:nth-child(1) { --cap: #c46a58; --cap-hi: #e8a090; --cap-lo: #8a3a2e; --cap-edge: #4a1c16; }
.kitbar button:nth-child(2) { --cap: #e0b44a; --cap-hi: #ffe08a; --cap-lo: #a07818; --cap-edge: #5a4010; }
.kitbar button:nth-child(3) { --cap: #4e9a90; --cap-hi: #8ecfc4; --cap-lo: #2a645c; --cap-edge: #143430; }
.kitbar button:nth-child(4) { --cap: #a56bb4; --cap-hi: #d4a8dc; --cap-lo: #6a4080; --cap-edge: #3a2450; }
body[data-skin="mpc"] .kitbar button { color: #f3efe6; }
body[data-skin="mpc"] .kitbar button:nth-child(1) { --cap: #2a2e34; --cap-hi: #4a5058; --cap-lo: #101214; --cap-edge: #050608; }
body[data-skin="mpc"] .kitbar button:nth-child(2) { --cap: #6e747c; --cap-hi: #a4aab2; --cap-lo: #3c424a; --cap-edge: #1c2026; }
body[data-skin="mpc"] .kitbar button:nth-child(3) { --cap: #243656; --cap-hi: #3e5a8a; --cap-lo: #121c30; --cap-edge: #080e18; }
body[data-skin="mpc"] .kitbar button:nth-child(4) { --cap: #6e2430; --cap-hi: #9a4050; --cap-lo: #3a1218; --cap-edge: #18080c; }
body[data-skin="mpc"] .kitbar button.on { color: #f7f3ea; }
.kitbar .bulb {
  width: 8px;
  height: 4px;
  border-radius: 3px 3px 1px 1px;
  background: radial-gradient(circle at 50% 20%, #4a4e56, #121418 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 0 rgba(0, 0, 0, 0.45);
}
.kitbar button:hover { filter: brightness(1.06); }
.kitbar button:active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35), 0 1px 0 var(--cap-edge); }
.kitbar button.on {
  color: #1a1008;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 2px rgba(0, 0, 0, 0.2),
    0 0 8px 1px color-mix(in srgb, var(--cap-hi) 70%, white),
    0 2px 0 var(--cap-edge);
}
.kitbar button.on .bulb {
  background: radial-gradient(circle at 50% 20%, #fff8e0, #ffb020 58%, #c45a00);
  box-shadow: 0 0 5px 1px rgba(255, 170, 40, 0.9), inset 0 1px 0 #fff;
}
.kitbar button:focus-visible { outline: 2px solid #ffd27a; outline-offset: 1px; }
.kitbar .kit-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Rsmp / Lofi / Undo / Redo — same caps as the transport, parked where the title was */
.utilbar { display: none; }
body:is([data-skin="mpc"], [data-skin="sp404"]) .readout {
  z-index: 3;
  isolation: isolate;
}
body:is([data-skin="mpc"], [data-skin="sp404"]) .utilbar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 16px;
}
body[data-skin="mpc"] .utilbar {
  height: 48px;
  gap: 6px;
  --k1: #f0e9d1; --k2: #dad2b6; --k3: #cac1a3;
  --k-hi: rgba(255, 255, 255, 0.8); --k-rim: rgba(70, 64, 46, 0.55); --k-edge: #8d8670; --k-text: #2a2b2e;
  --ic-rec: #ff3b2a;
}
body[data-skin="sp404"] .utilbar {
  height: 44px;
  gap: 8px;
  --k1: #2c2d32; --k2: #121316; --k3: #07070a;
  --k-hi: rgba(255, 255, 255, 0.2); --k-rim: #040405; --k-edge: #000; --k-text: #ff9a3a;
  --ic-rec: #ff3b2a; --ic-stop: #e8e8ec;
}
.utilbar button {
  appearance: none;
  -webkit-appearance: none;
  isolation: isolate;
  position: relative;
  z-index: 0;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--k-text);
  background-color: var(--k2);
  background-image: linear-gradient(180deg, var(--k1), var(--k2) 70%, var(--k3));
  box-shadow:
    inset 0 1px 0 var(--k-hi),
    0 0 0 1px var(--k-rim),
    0 0 0 2px rgba(0, 0, 0, 0.22),
    0 3px 0 var(--k-edge),
    0 5px 4px rgba(0, 0, 0, 0.32),
    0 8px 9px rgba(0, 0, 0, 0.16);
  transition: transform 0.05s, box-shadow 0.05s, filter 0.12s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.utilbar button:hover { filter: brightness(1.06); }
.utilbar button:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--k-rim), 0 0 0 var(--k-edge), 0 1px 1px rgba(0, 0, 0, 0.3);
}
.utilbar button:focus-visible { outline: 2px solid #ffb84a; outline-offset: 2px; }
.utilbar button.dim {
  filter: grayscale(0.12) brightness(0.62);
}
.utilbar button.dim:hover { filter: grayscale(0.04) brightness(0.8); }
body[data-skin="mpc"] .utilbar .tk { border-radius: 3px; gap: 5px; }
body[data-skin="sp404"] .utilbar button { border-radius: 12px; text-shadow: 0 0 5px rgba(255, 130, 30, 0.7); }
body[data-skin="sp404"] .utilbar .tk { flex-direction: row; gap: 8px; }
body[data-skin="sp404"] .utilbar .tx::before { inset: 4px 4px 6px; border-radius: 9px; }
body[data-skin="sp404"] .utilbar .tk span { font-size: 9px; }
body[data-skin="sp404"] .utilbar .on { text-shadow: none; }

/* Effects keys sit on the face, as tall as the meters, each key its own cap.
   MP: Live-style squircles in the cream / rec-red / dub-orange 2X set.
   SP: separate rubber keys, clipped like the ones beside the 404 screen. */
body:is([data-skin="mpc"], [data-skin="sp404"]) .meter-row {
  align-items: stretch;
}
body:is([data-skin="mpc"], [data-skin="sp404"]) .readout {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  padding-top: 0;
}
body[data-skin="mpc"] .readout .seq-stutter,
body[data-skin="sp404"] .readout .seq-stutter {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  align-self: stretch;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
}
body[data-skin="mpc"] .readout .seq-stutter {
  gap: 7px;
  --k1: #f0e9d1; --k2: #dad2b6; --k3: #cac1a3;
  --k-hi: rgba(255, 255, 255, 0.85); --k-rim: rgba(70, 64, 46, 0.55); --k-edge: #8d8670; --k-text: #2a2b2e;
}
body[data-skin="sp404"] .readout .seq-stutter {
  gap: 8px;
  --k1: #2c2d32; --k2: #121316; --k3: #07070a;
  --k-hi: rgba(255, 255, 255, 0.22); --k-rim: #040405; --k-edge: #000; --k-text: #ff9a3a;
}
.seq-stutter .stut-rail {
  align-self: stretch;
  margin: 3px 0;
  border-radius: 1px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.85), transparent 40%, transparent 60%, rgba(255, 255, 255, 0.14)),
    linear-gradient(180deg, #6a6e76, #2a2c32 40%, #0a0b0e 70%, #4a4e56);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.seq-stutter .stut {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px 5px;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--k-text);
}
.seq-stutter .fx-mark,
.seq-stutter .fx-name,
.seq-stutter .fx-ico,
.seq-stutter .bulb {
  position: relative;
  z-index: 1;
}
.seq-stutter .fx-ico {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  overflow: visible;
}
.seq-stutter .fx-name {
  font-size: 8px;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
/* MP: one family of soft transport squircles, cream like the 2X */
body[data-skin="mpc"] .seq-stutter .stut:not(.stut-knob) { border-radius: 10px; }
body[data-skin="mpc"] .seq-stutter .stut:not(.stut-knob) .tx::before {
  inset: 3px 3px 5px;
  border-radius: 7px;
}
body[data-skin="mpc"] .seq-stutter .fx-name { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
/* SP: keys beside the screen, clipped corners up top, rounder rubber below */
body[data-skin="sp404"] .seq-stutter .stut:nth-child(-n+5):nth-child(odd) { border-radius: 15px 4px 15px 4px; }
body[data-skin="sp404"] .seq-stutter .stut:nth-child(-n+5):nth-child(even) { border-radius: 4px 15px 4px 15px; }
body[data-skin="sp404"] .seq-stutter .stut:nth-child(n+6):not(.stut-knob) { border-radius: 12px; }
body[data-skin="sp404"] .seq-stutter .stut:not(.stut-knob) .tx::before {
  inset: 3px 3px 5px;
  border-radius: inherit;
}
body[data-skin="sp404"] .seq-stutter .fx-name {
  text-shadow: 0 0 5px rgba(255, 130, 30, 0.55);
}
.seq-stutter [data-stut="8"]  { --bulb: #f0a030; --bulb-hot: #fff2c4; --bulb-glow: rgba(240, 160, 48, 0.95); --wash: rgba(240, 160, 48, 0.22); }
.seq-stutter [data-stut="16"] { --bulb: #e24a28; --bulb-hot: #ffd2c2; --bulb-glow: rgba(226, 74, 40, 0.98); --wash: rgba(226, 74, 40, 0.24); }
.seq-stutter .stut-knob {
  --bulb: #d6b84a;
  --bulb-hot: #fff7c8;
  --bulb-glow: rgba(214, 184, 74, 0.95);
  --wash: rgba(214, 184, 74, 0.22);
  gap: 1px;
  padding: 0;
  cursor: ns-resize;
  touch-action: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.seq-stutter .stut-knob:hover,
.seq-stutter .stut-knob:active {
  transform: none;
  filter: none;
  background: none;
  box-shadow: none;
}
.seq-stutter .stut-fat {
  position: relative;
  z-index: 1;
  display: block;
  width: 46px;
  height: 46px;
  flex: none;
}
.seq-stutter .stut-fat .knob-stack {
  position: relative;
  z-index: 1;
  display: block;
  width: 46px;
  height: 46px;
  margin: 0;
}
/* a short ring of light around the skirt. It lives on the knob, not the panel. */
.seq-stutter .stut-knob { overflow: visible; }
.seq-stutter .stut-fat::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--stut-bloom, 1));
  transform-origin: center;
  background: transparent;
  border: 1px solid rgba(255, 196, 120, 0.55);
  box-shadow: 0 0 1.5px rgba(220, 140, 40, 0.7);
  animation: stut-ring 7.4s ease-in-out infinite;
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, background 0.16s ease-out, border-color 0.16s ease-out;
}
body[data-skin="sp404"] .seq-stutter .stut-fat::after {
  border-color: rgba(255, 150, 90, 0.6);
  box-shadow: 0 0 1.5px rgba(255, 70, 30, 0.75);
}
.seq-stutter .stut-knob.on { z-index: 3; }
.seq-stutter .stut-knob.on .stut-fat::after {
  border-color: transparent;
  border-width: 0;
  background: radial-gradient(circle,
    rgba(255, 228, 156, 0.95) 0%,
    rgba(255, 188, 68, 0.82) 68%,
    rgba(230, 140, 32, 0.4) 88%,
    rgba(220, 120, 24, 0) 100%);
  box-shadow: none;
  animation: stut-ring-on 2.4s ease-in-out infinite;
}
body[data-skin="sp404"] .seq-stutter .stut-knob.on .stut-fat::after {
  border-color: transparent;
  border-width: 0;
  background: radial-gradient(circle,
    rgba(255, 186, 120, 0.95) 0%,
    rgba(255, 96, 36, 0.84) 68%,
    rgba(230, 48, 16, 0.42) 88%,
    rgba(200, 30, 10, 0) 100%);
  box-shadow: none;
}
@keyframes stut-ring {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}
@keyframes stut-ring-on {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}
.seq-stutter .stut-fat .knob-ring { inset: 8%; }
.seq-stutter .stut-fat .knob-cap { inset: 2% 12% 20%; }
.seq-stutter .stut-fat .knob-cap::after { inset: 14%; }
.seq-stutter .stut-fat .knob-cap i {
  top: 8%;
  width: 9%;
  height: 30%;
}
body[data-skin="mpc"] .seq-stutter .stut-fat {
  --fat: var(--kn-top2); --fat-hi: var(--kn-top1); --fat-lo: var(--kn-top3);
  --fat-wall-top: var(--kn-sk2); --fat-side: var(--kn-sk3); --fat-ind: var(--kn-ind);
}
body[data-skin="sp404"] .seq-stutter .stut-fat {
  --fat: #e83a2c; --fat-hi: #ff8f78; --fat-lo: #a8160c; --fat-side: #650a05; --fat-ind: #fff;
}
.seq-stutter .stut-knob.on .knob-cap i {
  background: var(--bulb-hot);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.45), 0 0 5px 1px var(--bulb-glow);
}
.seq-stutter .stut-read {
  position: relative;
  z-index: 1;
  font-size: 8px;
  letter-spacing: 0.06em;
  min-height: 9px;
  line-height: 1;
}
body[data-skin="mpc"] .seq-stutter .stut-read { color: #2a2b2e; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
body[data-skin="sp404"] .seq-stutter .stut-read { color: #ff9a3a; text-shadow: 0 0 4px rgba(255, 130, 30, 0.45); }
.seq-stutter .mic {
  --bulb: #c43c2c;
  --bulb-hot: #ffd0c8;
  --bulb-glow: rgba(220, 55, 42, 0.35);
  --wash: transparent;
}
.seq-stutter .bulb {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.45), transparent 36%),
    radial-gradient(circle at 42% 42%, color-mix(in srgb, var(--bulb) 38%, #1a1612), #0c0a08 78%);
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 1px 1px rgba(0, 0, 0, 0.45);
}
.seq-stutter .mic .bulb {
  width: 10px;
  height: 10px;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 190, 180, 0.4), transparent 40%),
    radial-gradient(circle at 42% 40%, #7a2c26, #2a100e 55%, #0c0606 82%);
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 180, 160, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.75),
    0 0 0 2px rgba(255, 80, 60, 0.12),
    0 1px 1px rgba(0, 0, 0, 0.5);
}
.seq-stutter .stut.on:not(.stut-knob) {
  transform: none;
  color: var(--k-text);
  box-shadow:
    inset 0 1px 0 var(--k-hi),
    0 0 0 1px var(--bulb),
    0 0 8px 1px var(--bulb-glow),
    0 3px 0 var(--k-edge),
    0 5px 4px rgba(0, 0, 0, 0.28);
}
.seq-stutter .stut.on:not(.stut-knob) .tx::before,
.seq-stutter .stut.armed .tx::before {
  background:
    radial-gradient(ellipse 80% 55% at 50% 28%, var(--wash), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 48%, rgba(0, 0, 0, 0.14));
}
.seq-stutter .stut.on:not(.mic):not(.rsmp) .fx-ico,
.seq-stutter .stut.armed:not(.mic):not(.rsmp) .fx-ico {
  color: var(--bulb);
  filter: drop-shadow(0 0 2px var(--bulb-glow));
}
.seq-stutter .stut.on .bulb {
  background:
    radial-gradient(circle at 30% 24%, #fff, var(--bulb-hot) 26%, transparent 48%),
    radial-gradient(circle at 40% 42%, var(--bulb-hot), var(--bulb) 50%, #2a1008 82%);
  box-shadow:
    inset 0 0 1px rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 0 2px color-mix(in srgb, var(--bulb) 35%, transparent),
    0 0 7px 2px var(--bulb-glow);
}
.seq-stutter .mic.on:not(.hot):not(.mon) {
  --bulb: #d43a2c;
  --bulb-hot: #ffb4a8;
  --bulb-glow: rgba(220, 55, 42, 0.75);
  --wash: rgba(220, 55, 42, 0.28);
}
.seq-stutter .mic.mon {
  --bulb: #f0a030;
  --bulb-hot: #fff1c8;
  --bulb-glow: rgba(240, 160, 48, 0.95);
  --wash: rgba(240, 160, 48, 0.28);
}
.seq-stutter .choke {
  --bulb: #3a1210;
  --bulb-hot: #6a221c;
  --bulb-glow: transparent;
  --wash: transparent;
  --k1: #241014;
  --k2: #12080a;
  --k3: #070304;
  --k-text: #f6ebe6;
}
.seq-stutter .choke > span {
  font-size: 9px;
  letter-spacing: 0.02em;
}
.seq-stutter .choke.on {
  --bulb: #ff2a18;
  --bulb-hot: #fff4f0;
  --bulb-glow: rgba(255, 36, 20, 0.95);
  --wash: rgba(255, 40, 24, 0.42);
  --k1: #c43222;
  --k2: #7a160e;
  --k3: #3a0806;
  --k-text: #fff6f2;
}
.seq-stutter .mic.hot {
  --bulb: #ff2a20;
  --bulb-hot: #ffe4dc;
  --bulb-glow: rgba(255, 40, 32, 1);
  --wash: rgba(255, 40, 32, 0.38);
}
.seq-stutter .mic.hot .fx-ico,
.seq-stutter .rsmp.hot .fx-ico { animation: mic-filament 1.35s ease-in-out infinite; }
.seq-stutter .stut > .fx-name { font-size: 8px; letter-spacing: 0.08em; }
body[data-skin="mpc"] .seq-stutter .mic {
  --k1: #cf4a3c; --k2: #b8372b; --k3: #9a2a20;
  --k-edge: #5a1a14; --k-text: #fff8f4;
  --k-rim: rgba(80, 22, 16, 0.65); --k-hi: rgba(255, 255, 255, 0.5);
}
body[data-skin="mpc"] .seq-stutter .mic .fx-name { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
body[data-skin="mpc"] .seq-stutter .mic.mon {
  --k1: #e0a040; --k2: #c48420; --k3: #8a5a14; --k-text: #fff8e8; --k-edge: #6a4010;
}
body[data-skin="mpc"] .seq-stutter .mic.hot { --k1: #ff4a38; --k2: #d02818; --k3: #8a140c; }
body[data-skin="mpc"] .seq-stutter .rsmp {
  --k1: #d9604a; --k2: #c4492f; --k3: #a63a22;
  --k-edge: #5e2014; --k-text: #fff;
  --k-rim: rgba(90, 30, 16, 0.6); --k-hi: rgba(255, 255, 255, 0.45);
}
body[data-skin="mpc"] .seq-stutter .rsmp .fx-name { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
body[data-skin="mpc"] .seq-stutter .rsmp.on { --k1: #ff6a48; --k2: #e04828; --k3: #a62814; }
.seq-stutter [data-fx="flt"] { --bulb: #3ec8c0; --bulb-hot: #d8fffb; --bulb-glow: rgba(60, 200, 190, 0.55); --wash: rgba(60, 200, 190, 0.16); }
.seq-stutter [data-fx="dly"] { --bulb: #4a6cff; --bulb-hot: #dce4ff; --bulb-glow: rgba(70, 100, 255, 0.55); --wash: rgba(70, 100, 255, 0.16); }
.seq-stutter [data-fx="rev"] { --bulb: #7a4cff; --bulb-hot: #e4d8ff; --bulb-glow: rgba(120, 70, 255, 0.55); --wash: rgba(120, 70, 255, 0.16); }
.seq-stutter [data-fx="comp"] { --bulb: #e0b44a; --bulb-hot: #fff3c4; --bulb-glow: rgba(224, 180, 74, 0.55); --wash: rgba(224, 180, 74, 0.16); }
.seq-stutter [data-fx="vin"] { --bulb: #e07a3a; --bulb-hot: #ffe0c4; --bulb-glow: rgba(224, 122, 58, 0.55); --wash: rgba(224, 122, 58, 0.16); }
.seq-stutter [data-act="lof"] { --bulb: #e0b44a; --bulb-hot: #fff3c4; --bulb-glow: rgba(224, 180, 74, 0.55); --wash: rgba(224, 180, 74, 0.16); }
/* Stamp levels 1–3: aqua / cobalt / indigo — LOFI uses the same ladder as VINL, FLT, ECHO, SPRG. */
.seq-stutter [data-fx].armed[data-level="1"],
.seq-stutter [data-act="lof"].armed[data-level="1"] {
  --bulb: #5ec8c0; --bulb-hot: #eafffc; --bulb-glow: rgba(80, 210, 200, 0.95); --wash: rgba(80, 210, 200, 0.34);
  --fx-b1: #c8f4f0; --fx-b2: #5ec8c0; --fx-b3: #2a9a94;
  --fx-edge: #1a6e6a; --fx-glow: rgba(80, 210, 200, 0.7);
}
.seq-stutter [data-fx].armed[data-level="2"],
.seq-stutter [data-act="lof"].armed[data-level="2"] {
  --bulb: #5a7cff; --bulb-hot: #e4eaff; --bulb-glow: rgba(80, 110, 255, 0.95); --wash: rgba(70, 100, 255, 0.36);
  --fx-b1: #7a9cff; --fx-b2: #3d5ae0; --fx-b3: #243fb0;
  --fx-edge: #162878; --fx-glow: rgba(80, 110, 255, 0.85);
}
.seq-stutter [data-fx].armed[data-level="3"],
.seq-stutter [data-act="lof"].armed[data-level="3"] {
  --bulb: #8a5cff; --bulb-hot: #efe4ff; --bulb-glow: rgba(130, 80, 255, 0.95); --wash: rgba(120, 70, 255, 0.38);
  --fx-b1: #8a5cff; --fx-b2: #4a28d4; --fx-b3: #2a1288;
  --fx-edge: #16085a; --fx-glow: rgba(130, 80, 255, 0.9);
}
body[data-skin="mpc"] .seq-stutter [data-fx].armed:not([data-level="0"]),
body[data-skin="mpc"] .seq-stutter [data-act="lof"].armed:not([data-level="0"]),
body[data-skin="sp404"] .seq-stutter [data-fx].armed:not([data-level="0"]),
body[data-skin="sp404"] .seq-stutter [data-act="lof"].armed:not([data-level="0"]) {
  --k-text: #f4f8ff;
  --k-hi: rgba(255, 255, 255, 0.55);
  color: #f4f8ff;
  background: linear-gradient(180deg, var(--fx-b1), var(--fx-b2) 70%, var(--fx-b3));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(12, 32, 80, 0.65),
    0 2px 0 1px var(--fx-edge),
    0 4px 3px rgba(0, 0, 0, 0.35),
    0 0 12px 1px var(--fx-glow);
  text-shadow: 0 1px 0 rgba(10, 28, 72, 0.45);
  animation: none;
}
body[data-skin="mpc"] .seq-stutter [data-fx].armed[data-level="0"],
body[data-skin="mpc"] .seq-stutter [data-act="lof"].armed[data-level="0"] {
  --k-text: #f4f8ff;
  color: #f4f8ff;
  background: linear-gradient(180deg, #8a9098, #5a6068 70%, #3a4048);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(20, 24, 32, 0.65),
    0 2px 0 1px #2a2e34,
    0 4px 3px rgba(0, 0, 0, 0.35);
}
body[data-skin="sp404"] .seq-stutter [data-fx].armed[data-level="0"],
body[data-skin="sp404"] .seq-stutter [data-act="lof"].armed[data-level="0"] {
  color: #ffe8c8;
  text-shadow: 0 0 6px rgba(255, 130, 30, 0.65);
  background: linear-gradient(180deg, #4a2820, #2a1410 70%, #180a08);
}
.seq-stutter .rsmp {
  --bulb: #e24a28;
  --bulb-hot: #ffd0c8;
  --bulb-glow: rgba(226, 74, 40, 0.4);
  --wash: transparent;
}
.seq-stutter .rsmp.on {
  --bulb: #ff3b2a;
  --bulb-hot: #ffd0c8;
  --bulb-glow: rgba(255, 50, 40, 0.95);
  --wash: rgba(255, 50, 40, 0.32);
}
body[data-skin="sp404"] .seq-stutter .mic.on .fx-ico,
body[data-skin="sp404"] .seq-stutter .rsmp.on .fx-ico,
body[data-skin="sp404"] .seq-stutter .mic.mon .fx-ico,
body[data-skin="sp404"] .seq-stutter .mic.hot .fx-ico {
  color: var(--bulb-hot);
  filter: drop-shadow(0 0 3px var(--bulb-glow));
}
@keyframes mic-filament {
  0%, 100% { filter: brightness(1.05); box-shadow: inset 0 0 1px #fff, 0 0 0 1px rgba(0,0,0,0.5), 0 0 8px 2px rgba(255,40,32,1); }
  45% { filter: brightness(0.55); box-shadow: inset 0 0 1px rgba(255,255,255,0.4), 0 0 0 1px rgba(0,0,0,0.55), 0 0 3px 1px rgba(255,40,32,0.45); }
  52% { filter: brightness(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .seq-stutter .mic.hot .fx-ico,
  .seq-stutter .rsmp.hot .fx-ico,
  .seq-stutter .stut-fat::after { animation: none; }
  .seq-stutter .stut-fat::after { opacity: 0.5; }
  .seq-stutter .stut-knob.on .stut-fat::after { opacity: 0.92; }
}
.seq-lcd button.lcd-a,
.seq-lcd button.lcd-a:hover,
.seq-lcd button.lcd-a:active,
.seq-lcd button.lcd-a:focus-visible {
  appearance: none;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  transform: none;
  text-shadow: none;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: opacity 0.12s, color 0.12s;
}
.seq-lcd button.lcd-a { color: inherit; opacity: 0.42; }
.seq-lcd .lcd-a .lcd-a-mode { font-size: 0.85em; letter-spacing: 0.08em; }
.seq-lcd button.lcd-a:hover:not(.read):not(.write),
.seq-lcd button.lcd-a:focus-visible:not(.read):not(.write) { opacity: 0.85; }
.seq-lcd button.lcd-a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.seq-lcd button.lcd-a.read { opacity: 1; color: #ffc46a; }
.seq-lcd button.lcd-a.write { opacity: 1; color: #ff5a48; }
.seq-lcd button.lcd-trk.on { opacity: 1; color: #ff8a3a; }
.seq-lcd button.lcd-trk.has::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: 1px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
}
body[data-skin="mpc"] .seq-lcd button.lcd-trk.on { color: #9ad0ff; }
body[data-skin="sp404"] .seq-lcd button.lcd-trk.on { color: #ffb14a; }
.seq-lcd .lcd-a.has::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: 1px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
}
body[data-skin="mpc"] .seq-lcd button.lcd-a.read { color: #cfe0ff; }
body[data-skin="mpc"] .seq-lcd button.lcd-a.write { color: #ff8a78; }
body[data-skin="sp404"] .seq-lcd button.lcd-a,
body[data-skin="sp404"] .seq-lcd button.lcd-a:hover,
body[data-skin="sp404"] .seq-lcd button.lcd-a:active,
body[data-skin="sp404"] .seq-lcd button.lcd-a.read,
body[data-skin="sp404"] .seq-lcd button.lcd-a.write {
  text-shadow: none;
}
body[data-skin="sp404"] .seq-lcd button.lcd-a.read { color: #ffb14a; }
body[data-skin="sp404"] .seq-lcd button.lcd-a.write { color: #ff5a3a; }

.seq-lcd .kit-load,
.seq-lcd .kit-save {
  appearance: none;
  position: relative;
  z-index: 2;
  height: 13px;
  padding: 0 5px;
  border: 0;
  border-radius: 1px;
  font: 800 8px/1 "SF Mono", "Courier New", ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: inherit;
  background: rgba(223, 231, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(223, 231, 255, 0.28);
  text-shadow: none;
  filter: none;
  transform: none;
  cursor: pointer;
}
.seq-lcd .kit-load:hover,
.seq-lcd .kit-load:active,
.seq-lcd .kit-load:focus-visible,
.seq-lcd .kit-save:hover,
.seq-lcd .kit-save:active,
.seq-lcd .kit-save:focus-visible {
  filter: none;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(223, 231, 255, 0.55);
}
.seq-lcd .kit-load.armed {
  color: #1b2a54;
  background: #dfe7ff;
  box-shadow: 0 0 8px rgba(223, 231, 255, 0.55);
}
body[data-skin="sp404"] .seq-lcd .kit-load,
body[data-skin="sp404"] .seq-lcd .kit-save {
  color: #ffb14a;
  background: rgba(255, 177, 74, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 177, 74, 0.4);
  text-shadow: 0 0 6px rgba(255, 160, 40, 0.45);
}
body[data-skin="sp404"] .seq-lcd .kit-load:hover,
body[data-skin="sp404"] .seq-lcd .kit-load:active,
body[data-skin="sp404"] .seq-lcd .kit-load:focus-visible,
body[data-skin="sp404"] .seq-lcd .kit-save:hover,
body[data-skin="sp404"] .seq-lcd .kit-save:active,
body[data-skin="sp404"] .seq-lcd .kit-save:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255, 177, 74, 0.75);
}
body[data-skin="sp404"] .seq-lcd .kit-load.armed {
  color: #1a1208;
  background: #ffb14a;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(255, 160, 40, 0.7);
}

.user-pip {
  display: none;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  width: 11px;
  height: 5px;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg, #f3d48c, #c9a24a);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  transform: rotate(-12deg);
  pointer-events: none;
}
.mpc-pad.user-sample .user-pip,
.sp-pad.user-sample .user-pip { display: block; }
.mpc-pad.is-keys,
.sp-pad.is-keys {
  outline: 2px solid #c4963a;
  outline-offset: -4px;
}
.mpc-pad.is-16,
.sp-pad.is-16 {
  outline: 2px solid #c4482a;
  outline-offset: -4px;
}
.pad-mode {
  position: absolute;
  top: 3px;
  right: 4px;
  z-index: 3;
  font: 800 9px/1 "SF Mono", "Courier New", ui-monospace, monospace;
  color: #1a120c;
  background: #e7c56a;
  padding: 2px 3px 1px;
  border-radius: 2px;
  pointer-events: none;
}
.pad-mode[hidden] { display: none !important; }
.mpc-pad.rsmp-dest,
.sp-pad.rsmp-dest { z-index: 2; overflow: hidden; }
.mpc-pad.rsmp-dest::after,
.sp-pad.rsmp-dest::before,
.sp-pad.rsmp-dest::after { z-index: 2; }
.rsmp-glow {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 168, 64, 0.46) 0%, rgba(232, 120, 28, 0.28) 62%, rgba(210, 96, 18, 0.16) 100%);
  box-shadow: inset 0 0 14px rgba(255, 150, 40, 0.28);
  animation: rsmp-under 1.35s ease-in-out infinite;
}
.mpc-pad.rsmp-dest .rsmp-glow,
.sp-pad.rsmp-dest .rsmp-glow { display: block; }
.mpc-pad.rsmp-live .rsmp-glow,
.sp-pad.rsmp-live .rsmp-glow {
  background: radial-gradient(ellipse at 50% 45%, rgba(186, 58, 44, 0.48) 0%, rgba(150, 36, 28, 0.28) 64%, rgba(120, 24, 20, 0.14) 100%);
  box-shadow: inset 0 0 14px rgba(160, 40, 32, 0.26);
}
@keyframes rsmp-under {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rsmp-glow { animation: none; opacity: 0.9; }
}
.mpc-pad.drop-over,
.sp-pad.drop-over {
  outline: 2px solid #ffd27a;
  outline-offset: 1px;
}
body.sample-load .mpc-pad,
body.sample-load .sp-pad { animation: fx-pad 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  body.sample-load .mpc-pad,
  body.sample-load .sp-pad { animation: none; }
}

/* ===== SP 40 receiver: 20% darker charcoal with a micro powder-coat / knurl texture ===== */
body[data-skin="sp404"] .face::before,
body[data-skin="sp404"] .drops::before {
  background:
    radial-gradient(circle at 9px 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at 9px calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    linear-gradient(90deg, #ff3b2f 0 20%, transparent 20%),
    var(--tx-scr-panel-lt),
    /* micro texture: a pin-prick dot grid, a fine cross-weave and a tight speckle */
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 0 0.5px, transparent 0.8px),
    radial-gradient(circle at 2.5px 2.5px, rgba(0, 0, 0, 0.16) 0 0.5px, transparent 0.8px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 2px),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='2.2'%20numOctaves='1'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.12%200%200%200%20-0.05'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E"),
    var(--tx-whisper-lt),
    var(--tx-whisper-dk),
    linear-gradient(162deg, #404247 0%, #34363a 42%, #2b2d30 78%, #26282b 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, auto, auto, 100% 4px, 100% 100%, 3px 3px, 3px 3px, auto, auto, 64px 64px, 140px 140px, 140px 140px, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 40px 17px, 0 0;
}

/* ===== SP 40 glue: one material, one light, from the top panel through the receiver to the shell ===== */
/* top panel: the same charcoal + micro texture as the receiver, a touch lighter so the light falls top to bottom */
body[data-skin="sp404"] .plinth::before {
  background:
    var(--tx-dings),
    var(--tx-chips-sp),
    var(--tx-scr-lt),
    radial-gradient(circle at 13px 13px, #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) 13px, #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at 13px calc(100% - 13px), #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #e4e6ea 0 2.5px, #6b6d73 3px 5px, transparent 5.5px),
    linear-gradient(40deg, transparent 44%, rgba(10, 10, 12, 0.8) 46% 54%, transparent 56%),
    linear-gradient(-25deg, transparent 44%, rgba(10, 10, 12, 0.8) 46% 54%, transparent 56%),
    linear-gradient(75deg, transparent 44%, rgba(10, 10, 12, 0.8) 46% 54%, transparent 56%),
    linear-gradient(-60deg, transparent 44%, rgba(10, 10, 12, 0.8) 46% 54%, transparent 56%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 0 0.5px, transparent 0.8px),
    radial-gradient(circle at 2.5px 2.5px, rgba(0, 0, 0, 0.16) 0 0.5px, transparent 0.8px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 2px),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='2.2'%20numOctaves='1'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.12%200%200%200%20-0.05'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E"),
    var(--tx-grain-dk),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 14%),
    linear-gradient(162deg, #4a4c51 0%, #424449 50%, #3c3e42 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
  background-size:
    100% 100%, 100% 100%, 100% 100%,
    auto, auto, auto, auto,
    8px 8px, 8px 8px, 8px 8px, 8px 8px,
    3px 3px, 3px 3px, auto, auto, 64px 64px,
    140px 140px, auto, auto;
  background-position:
    0 0, 0 0, 0 0,
    0 0, 0 0, 0 0, 0 0,
    9px 9px, calc(100% - 9px) 9px, 9px calc(100% - 9px), calc(100% - 9px) calc(100% - 9px),
    0 0, 0 0, 0 0, 0 0, 0 0,
    0 0, 0 0, 0 0;
}
/* receiver picks up exactly where the top panel leaves off */
body[data-skin="sp404"] .face::before,
body[data-skin="sp404"] .drops::before {
  background-image:
    radial-gradient(circle at 9px 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at 9px calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #e4e6ea 0 1.6px, #6b6d73 2px 3.6px, transparent 4px),
    linear-gradient(90deg, #ff3b2f 0 20%, transparent 20%),
    var(--tx-scr-panel-lt),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 0 0.5px, transparent 0.8px),
    radial-gradient(circle at 2.5px 2.5px, rgba(0, 0, 0, 0.16) 0 0.5px, transparent 0.8px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 2px),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='2.2'%20numOctaves='1'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.12%200%200%200%20-0.05'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E"),
    var(--tx-whisper-lt),
    var(--tx-whisper-dk),
    linear-gradient(162deg, #3d3f43 0%, #35373a 48%, #2d2f32 100%);
}

/* the receiver's display wears the same ice-white LCD and black bezel as the top panel's screens */
body[data-skin="sp404"] .vfd {
  background: radial-gradient(ellipse at 50% 0%, #1c1d22, #050507 75%);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.85), 0 0 0 2px #000, 0 0 0 3px #4b4c51, 0 0 0 5px #0b0b0d, 0 0 0 6px #2c2d31;
}
body[data-skin="sp404"] .vfd span { color: #f4f8ff; text-shadow: 0 0 8px rgba(190, 215, 255, 0.6); }
body[data-skin="sp404"] .vfd span + span { color: #ffa24a; text-shadow: 0 0 7px rgba(255, 140, 40, 0.55); }

/* ===== SP 40 graffiti sticker: one die-cut piece wrapped across both panels, down the left side ===== */
.stickers-gf { z-index: 1; }
.gfw { position: absolute; left: -20px; width: 194px; overflow: hidden; pointer-events: none; }
.gfw svg { position: absolute; left: 0; width: 194px; height: 438px; display: block; filter: drop-shadow(0 1px 0.6px rgba(0, 0, 0, 0.5)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3)); }
.gfw-top { top: 254px; height: 154px; }
.gfw-top svg { top: 0; }
.gfw-bottom { top: -10px; height: 284px; }
.gfw-bottom svg { top: -154px; }

/* Slaps / Stock: a tiny chassis paddle. Stock is the factory look; Slaps puts the stickers on. */
body:not([data-skin="mpc"]):not([data-skin="sp404"]) .stickers,
body.is-stock .stickers { display: none !important; }
.slaps-sw {
  display: none;
  position: absolute;
  z-index: 6;
  width: 48px;
  margin: 0;
  padding: 4px 3px 5px;
  border: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(180deg, #d8d4c8, #b8b3a6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(40, 36, 28, 0.35),
    0 2px 0 #8a8578,
    0 3px 4px rgba(0, 0, 0, 0.28);
  -webkit-tap-highlight-color: transparent;
}
body:is([data-skin="mpc"], [data-skin="sp404"]) .slaps-sw { display: flex; }
body.overlay.is-min .slaps-sw { display: none !important; }
.slaps-leg {
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: #6a6558;
}
.slaps-sw.on .slaps-hi { color: #2a2b2e; }
.slaps-sw:not(.on) .slaps-lo { color: #2a2b2e; }
.slaps-gate {
  position: relative;
  width: 20px;
  height: 34px;
  border-radius: 4px;
  background: #1c1a16;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.slaps-paddle {
  position: absolute;
  left: 2px;
  top: 16px;
  width: 16px;
  height: 15px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, #fff8ee, #d4cbb8 55%, #b7ae9a);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 2px 2px rgba(0, 0, 0, 0.45);
  transition: top 0.14s ease;
}
.slaps-sw.on .slaps-paddle { top: 3px; }
.slaps-sw:active .slaps-paddle { filter: brightness(0.92); }
body[data-skin="mpc"] .slaps-sw { left: 386px; top: 74px; }
body[data-skin="sp404"] .slaps-sw {
  left: 698px;
  top: 326px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 42%),
    linear-gradient(180deg, #3a3b40, #26272c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px #050506,
    0 2px 0 #0a0a0c,
    0 3px 4px rgba(0, 0, 0, 0.45);
}
body[data-skin="sp404"] .slaps-leg { color: #6e7178; }
body[data-skin="sp404"] .slaps-sw.on .slaps-hi { color: #ff9a3a; text-shadow: 0 0 6px rgba(255, 130, 30, 0.7); }
body[data-skin="sp404"] .slaps-sw:not(.on) .slaps-lo { color: #e8e8ec; }
body[data-skin="sp404"] .slaps-gate { background: #050506; }
body[data-skin="sp404"] .slaps-paddle {
  background: linear-gradient(180deg, #5a5c62, #2c2d32 60%, #17181b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 2px rgba(0, 0, 0, 0.6);
}

/* ---------- MIDI note roll (double-click the LCD) ---------- */
#note-desk {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: grid;
  place-items: center;
  padding: 18px;
  --note-cell: 28px;
  --note-row: 28px;
  --seq-dot: #ffb84a;
  --seq-beat: rgba(255, 255, 255, 0.12);
  --seq-bar: rgba(255, 255, 255, 0.32);
  --seq-head: #ffffff;
  --seq-loop-dim: rgba(0, 0, 0, 0.38);
}
#note-desk[hidden] { display: none; }
.note-fog {
  position: absolute;
  inset: 0;
  background: rgba(12, 8, 5, 0.62);
}
.note-card {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100vw - 28px));
  padding: 16px 18px 14px;
  color: var(--tour-ink);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 70% 40% at 12% 0%, var(--tour-blush), transparent 70%),
    linear-gradient(165deg, var(--tour-paper), var(--tour-paper2));
  box-shadow:
    inset 0 0 0 2px var(--tour-line),
    inset 0 0 0 5px rgba(255, 255, 255, 0.16),
    7px 9px 0 var(--tour-pop),
    0 24px 44px rgba(0, 0, 0, 0.5);
  transform: rotate(-0.7deg);
  animation: keys-pop 0.22s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}
.note-kicker {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 8px 2px;
  font: 800 10px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tour-pop-ink);
  background: var(--tour-pop);
  box-shadow: 3px 3px 0 var(--tour-line);
}
.note-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.note-head .note-toolbar { order: 3; flex: 1 1 100%; }
.note-head h2 {
  margin: 4px 0 0;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 0.04em;
}
.note-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.note-clear {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--tour-ink);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 0 1px var(--tour-line);
}
.note-clear:active { transform: translateY(1px); }
.note-x {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--tour-pop-ink);
  background: var(--tour-pop);
  box-shadow: 0 4px 0 var(--tour-line), 0 8px 16px rgba(0, 0, 0, 0.25);
}
.note-x:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--tour-line); }
.note-hint {
  margin: 8px 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tour-muted);
  letter-spacing: 0.02em;
}
.note-stage {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 6px;
  color: #ffd27a;
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2a2318, #16110b);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.65), 0 0 0 3px #17181b, 0 0 0 4px #050506;
}
.note-gutter {
  flex: 0 0 138px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}
.note-corner {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.45;
}
.note-corner em {
  font-style: normal;
  letter-spacing: 0.12em;
  opacity: 0.75;
}
.note-lanes { flex: 1; }
.note-lane {
  height: var(--note-row);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
}
.note-lane:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
.note-lane b {
  flex: 0 0 14px;
  opacity: 0.55;
  font-size: 10px;
}
.note-lane span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.88;
}
.note-vol {
  flex: 0 0 38px;
  width: 38px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  cursor: ew-resize;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.note-vol i {
  display: block;
  height: 100%;
  width: calc(var(--vol, 1) * 100%);
  border-radius: 2px;
  background: var(--seq-dot);
  box-shadow: 0 0 7px color-mix(in srgb, var(--seq-dot) 55%, transparent);
  pointer-events: none;
}
.note-scroll {
  flex: 1;
  min-width: 0;
  overflow: auto;
  max-height: min(520px, calc(100vh - 220px));
}
.note-sheet { min-width: 100%; }
.note-ruler {
  height: 22px;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(8, 6, 4, 0.88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: ew-resize;
  touch-action: none;
}
.note-playflag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 12px;
  height: 22px;
  margin-left: -6px;
  pointer-events: none;
}
.note-playflag::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--seq-head);
  filter: drop-shadow(0 0 4px var(--seq-head));
}
.note-playflag::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 0;
  width: 2px;
  background: var(--seq-head);
  box-shadow: 0 0 8px var(--seq-head);
}
.note-tick {
  flex: 0 0 var(--note-cell);
  width: var(--note-cell);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.4;
}
.note-tick.bar { opacity: 0.9; }
.note-grid {
  position: relative;
  height: calc(16 * var(--note-row));
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, var(--seq-beat) 1px, transparent 1px),
    linear-gradient(90deg, var(--seq-bar) 2px, transparent 2px);
  background-size:
    100% var(--note-row),
    calc(var(--note-cell) * 4) 100%,
    calc(var(--note-cell) * 16) 100%;
  cursor: crosshair;
}
.note-chip, .note-ghost {
  position: absolute;
  z-index: 2;
  width: calc(var(--note-cell) - 4px);
  height: calc(var(--note-row) - 6px);
  border: 0;
  padding: 0;
  border-radius: 3px;
  background: var(--seq-dot);
  box-shadow: 0 0 10px color-mix(in srgb, var(--seq-dot) 55%, transparent);
  cursor: grab;
}
.note-chip.is-now {
  outline: 2px solid var(--seq-head);
  outline-offset: 1px;
  filter: brightness(1.4);
  z-index: 3;
}
.note-chip.is-drag { cursor: grabbing; z-index: 3; opacity: 0.85 !important; }
.note-chip.is-drop { outline: 2px solid var(--seq-head); outline-offset: 1px; }
.note-ghost {
  pointer-events: none;
  opacity: 0.28;
  box-shadow: none;
}
.note-loop-dim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--seq-loop-dim);
}
.note-playcol {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: var(--note-cell);
  pointer-events: none;
  background: color-mix(in srgb, var(--seq-head) 18%, transparent);
}
.note-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  width: 2px;
  margin-left: -1px;
  background: var(--seq-head);
  box-shadow: 0 0 8px 1px var(--seq-head), 0 0 16px var(--seq-head);
  pointer-events: none;
}
body[data-skin="mpc"] :is(#note-desk, #song-desk) {
  --seq-dot: #cfe0ff;
  --seq-beat: rgba(174, 187, 220, 0.16);
  --seq-bar: rgba(174, 187, 220, 0.42);
  --seq-head: #ffffff;
  --seq-loop-dim: rgba(6, 10, 22, 0.42);
}
body[data-skin="mpc"] .note-stage {
  color: #aebbdc;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2c4075, #1b2a54);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 3px #17181b, 0 0 0 4px #050506;
}
body[data-skin="sp404"] :is(#note-desk, #song-desk) {
  --seq-dot: #ff9a3a;
  --seq-beat: rgba(255, 255, 255, 0.1);
  --seq-bar: rgba(255, 255, 255, 0.34);
  --seq-head: #ffd27a;
  --seq-loop-dim: rgba(0, 0, 0, 0.42);
}
body[data-skin="sp404"] .note-stage {
  color: #f4f8ff;
  text-shadow: 0 0 8px rgba(190, 215, 255, 0.45);
  background: radial-gradient(ellipse at 50% 0%, #1c1d22, #050507 75%);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.85), 0 0 0 2px #000, 0 0 0 3px #45464b;
}

/* ---------- song arranger (the Song button) ---------- */
#song-desk {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: none;
  --seq-dot: #ffb84a;
  --seq-head: #ffffff;
}
#song-desk[hidden] { display: none; }
#song-desk .note-fog {
  pointer-events: none;
  background: rgba(12, 8, 5, 0.34);
}
#song-desk .song-card { pointer-events: auto; }
.song-card { transform: rotate(0.6deg); }
.song-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.song-pages { display: flex; gap: 4px; }
.song-pages button,
.song-leave {
  border: 0;
  cursor: pointer;
  font: 800 11px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tour-ink);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 1px var(--tour-line);
}
.song-pages button.on {
  color: var(--tour-pop-ink);
  background: var(--tour-pop);
  box-shadow: 2px 2px 0 var(--tour-line);
}
.song-leave { margin-left: auto; }
.song-leave:active,
.song-pages button:active { transform: translateY(1px); }
.song-clock {
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
  padding: 7px 10px;
  border-radius: 6px;
  background: #1a140f;
  color: #f0d7a4;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55), 0 0 0 1px #3a2c22;
}
.song-bank {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.song-key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 46px;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  color: #2a241c;
  background: linear-gradient(180deg, #f7f1e6, #d7ccba);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b7ad9c, 0 3px 0 rgba(0, 0, 0, 0.28);
}
.song-key b {
  font: 800 15px/1 "Helvetica Neue", Arial, sans-serif;
}
.song-key small {
  font: 700 8px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.62;
}
.song-key.has::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a5a32;
}
.song-key.used {
  background: linear-gradient(180deg, #f3d078, #e0a83a);
}
.song-key.used::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 5px;
  border-radius: 0 2px 2px 0;
  background: #c4553a;
}
.song-key.on {
  color: #1a140c;
  background: linear-gradient(180deg, #ffe7a8, #f0b84a);
  box-shadow: inset 0 1px 0 #fff6d8, 0 2px 0 #b8882e, 0 3px 0 rgba(0, 0, 0, 0.28);
}
.song-key:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b7ad9c; }
.song-scroll {
  overflow-x: auto;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #241910, #120e0b);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.song-chain {
  position: relative;
  display: flex;
  gap: 8px;
  min-height: 118px;
  min-width: 100%;
  padding: 22px 10px 10px;
  box-sizing: border-box;
}
.song-lane {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  cursor: ew-resize;
  touch-action: none;
}
.song-lane::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 8px;
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(244, 230, 196, 0.62) 0 8px, transparent 8px 14px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.song-empty {
  margin: auto;
  color: rgba(240, 215, 164, 0.72);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-align: center;
}
.song-block {
  position: relative;
  z-index: 1;
  flex: var(--w) 1 86px;
  min-width: 86px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 8px 7px;
  border-radius: 4px 7px 5px 3px;
  color: #2a2118;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 28%),
    repeating-linear-gradient(180deg, transparent 0 11px, rgba(90, 60, 30, 0.08) 11px 12px),
    linear-gradient(165deg, #f4e6c4, #e4c98a);
  box-shadow:
    inset 0 0 0 1px rgba(90, 60, 20, 0.28),
    2px 3px 0 rgba(0, 0, 0, 0.35);
  cursor: grab;
  user-select: none;
}
.song-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: repeating-linear-gradient(
    180deg,
    #c4553a 0 5px,
    #f4e6c4 5px 8px
  );
  border-radius: 3px 0 0 3px;
}
.song-block b {
  margin-left: 8px;
  font: 800 22px/1 "Helvetica Neue", Arial, sans-serif;
}
.song-block small,
.song-block em {
  margin-left: 8px;
  font: 700 10px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-style: normal;
}
.song-block em { color: #8a3d28; }
.song-stepper {
  display: flex;
  gap: 4px;
  margin: 6px 0 0 8px;
}
.song-stepper button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font: 800 14px/1 "Helvetica Neue", Arial, sans-serif;
  color: #2a2118;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 20, 0.35);
}
.song-stepper button:active { transform: translateY(1px); }
.song-block.is-on {
  outline: 2px solid #fff4d2;
  outline-offset: 1px;
}
.song-block.is-now {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 34%),
    repeating-linear-gradient(180deg, transparent 0 11px, rgba(90, 60, 30, 0.08) 11px 12px),
    linear-gradient(165deg, #fff1c8, #f0c15a);
}
.song-block.is-now::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: calc((100% - 7px) * var(--heard, 0));
  background: linear-gradient(90deg, rgba(196, 85, 58, 0.34), rgba(255, 244, 210, 0.05));
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}
.song-block.is-drag { cursor: grabbing; opacity: 0.72; }
.song-block.is-drop { outline: 2px dashed #fff4d2; outline-offset: 2px; }
.song-playhead {
  position: absolute;
  top: 2px;
  bottom: 6px;
  left: 0;
  z-index: 5;
  width: 2px;
  margin-left: -1px;
  background: var(--seq-head);
  box-shadow: 0 0 8px 1px var(--seq-head);
  pointer-events: none;
}
.song-playhead::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--seq-head);
}

/* ===== pad mixer: Mix rail + desk that sits on the 4×4 bay ===== */
.mix-rail { display: none; }
body:is([data-skin="mpc"], [data-skin="sp404"]) .mix-rail {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 1px;
}
.mix-rail,
.mix-btn,
.mix-mode,
.mix-desk,
.mix-mute,
.mix-fader,
.mix-cue { pointer-events: auto; }
.mix-rail { position: relative; z-index: 5; }
.kit-pages {
  display: flex;
  flex: none;
  gap: 2px;
  margin-left: 2px;
}
.mix-btn,
.mix-mode {
  appearance: none;
  position: relative;
  z-index: 1;
  height: 22px;
  padding: 0 4px;
  border: 0;
  font: 800 7.5px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.kit-page { min-width: 14px; padding: 0 5px; }
.midi-go {
  width: 22px;
  padding: 0;
  margin-left: 2px;
  display: grid;
  place-items: center;
}
.midi-go svg { display: block; width: 14px; height: 14px; }
.midi-arm {
  outline: 2px solid #c9842a;
  outline-offset: 2px;
}
.mpc-pad.midi-arm,
.sp-pad.midi-arm {
  outline: none;
  box-shadow: inset 0 0 0 3px #e7a14a, 0 0 10px rgba(201, 132, 42, 0.45);
}
.midi-card {
  position: fixed;
  z-index: 40;
  width: 250px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  color: var(--tour-ink);
  background:
    radial-gradient(ellipse 70% 40% at 12% 0%, var(--tour-blush), transparent 70%),
    linear-gradient(165deg, var(--tour-paper), var(--tour-paper2));
  box-shadow:
    inset 0 0 0 2px var(--tour-line),
    inset 0 0 0 5px rgba(255, 255, 255, 0.16),
    6px 8px 0 var(--tour-pop),
    0 22px 40px rgba(0, 0, 0, 0.45);
  transform: rotate(-1.4deg);
}
.midi-card[hidden] { display: none !important; }
.midi-kicker {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 6px;
  background: var(--tour-pop);
  color: var(--tour-pop-ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--tour-line);
  cursor: grab;
}
.midi-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--tour-ink);
  cursor: grab;
}
.midi-card.is-dragging .midi-drag { cursor: grabbing; }
.midi-card.is-dragging { user-select: none; }
.midi-card p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tour-ink);
}
.midi-status {
  min-height: 2.6em;
  font-weight: 800;
}
.midi-lib-label {
  margin: 2px 0 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.midi-lib {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 168px;
  margin: 0 0 8px;
  overflow-y: auto;
  padding: 0 2px 2px 0;
}
.midi-lib::-webkit-scrollbar { width: 8px; }
.midi-lib::-webkit-scrollbar-thumb {
  background: #1c140e;
  border-radius: 8px;
}
.midi-lib-btn {
  display: grid;
  grid-template-columns: 62px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  text-align: left;
  color: var(--tour-ink);
  background: linear-gradient(165deg, #f7f1e4, #e4d2b4);
  box-shadow: 2px 3px 0 #1c140e;
  cursor: pointer;
  font: inherit;
}
.midi-lib-btn:nth-child(odd) { transform: rotate(-0.35deg); }
.midi-lib-btn:nth-child(even) { transform: rotate(0.35deg); }
.midi-lib-btn.on {
  background: #1c140e;
  color: #f0d7a4;
}
.midi-lib-make {
  grid-row: 1 / span 2;
  align-self: center;
  padding: 5px 0;
  background: #e7a14a;
  color: #1c140e;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 #1c140e;
}
.midi-lib-btn.on .midi-lib-make { background: #f0d7a4; }
.midi-lib-name {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.midi-lib-line {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}
.midi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.midi-done,
.midi-file {
  appearance: none;
  border: 0;
  padding: 6px 12px;
  border-radius: 8px;
  font: 800 12px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.midi-done {
  background: var(--tour-pop);
  color: var(--tour-pop-ink);
  box-shadow: 3px 3px 0 var(--tour-line);
}
.midi-file {
  background: transparent;
  color: var(--tour-ink);
  box-shadow: inset 0 0 0 2px var(--tour-line);
}
.midi-assign { flex: 1 1 100%; }
.midi-card.is-assign .midi-assign {
  background: #1c140e;
  color: #f0d7a4;
  box-shadow: inset 0 0 0 2px #1c140e;
}
.midi-card.is-assign {
  transform: none;
  display: flex;
  flex-direction: column;
  padding: 8px 8px 6px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 2px var(--tour-line),
    0 12px 28px rgba(0, 0, 0, 0.5);
}
.midi-card.is-assign .midi-copy,
.midi-card.is-assign h2 { display: none; }
.midi-card.is-assign .midi-kicker { margin-bottom: 4px; }
.midi-card.is-assign .midi-status {
  min-height: 0;
  margin-bottom: 4px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.midi-card.is-assign .midi-lib { max-height: 72px; flex: 0 0 auto; }
.midi-card.is-assign .midi-actions { margin-top: 6px; }
.midi-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-height: 0;
  flex: 1;
}
.midi-split[hidden] { display: none; }
.midi-pane {
  min-height: 0;
  overflow: auto;
  padding: 6px 6px 4px;
  border-radius: 8px;
  background: #1c140e;
  color: #f0d7a4;
  box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.16), inset 0 0 14px rgba(0, 0, 0, 0.35);
}
.midi-pane h3 {
  margin: 0 0 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e7a14a;
}
.midi-map,
.midi-heard {
  list-style: none;
  margin: 0;
  padding: 0;
  font: 700 10px/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.01em;
}
.midi-map-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.midi-map-line {
  flex: 1;
  min-width: 0;
}
.midi-clear {
  flex: 0 0 auto;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid rgba(231, 161, 74, 0.45);
  border-radius: 4px;
  background: rgba(12, 8, 4, 0.55);
  color: #e7a14a;
  font: 700 8px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.midi-clear:hover {
  border-color: rgba(255, 220, 160, 0.7);
  color: #ffe7b8;
}
.midi-heard li:first-child:not(.midi-quiet) { color: #ffe7b8; }
.midi-map .midi-quiet,
.midi-heard .midi-quiet { color: rgba(240, 215, 164, 0.62); font-weight: 600; }
.mix-btn .tx { display: none; }
.mix-legend { display: none; }
.mix-desk {
  position: absolute;
  inset: 0;
  z-index: 8;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: inherit;
  padding: inherit;
}
.mix-desk[hidden] { display: none; }
.mix-strip {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.mix-mute {
  appearance: none;
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 16px;
  height: 13px;
  padding: 0;
  border: 0;
  font: 800 8px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.mix-fader {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 17px;
  height: 16px;
  cursor: ew-resize;
  touch-action: none;
}
.mix-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 6px;
  border-radius: 2px;
  background: #1a1c20;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.mix-track b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--v, 1) * 100%);
  border-radius: 2px;
  background: #8aa0d0;
  pointer-events: none;
}
.mix-knob {
  position: absolute;
  top: 1px;
  left: calc(var(--v, 1) * (100% - 12px));
  width: 12px;
  height: 14px;
  border-radius: 2px;
  background: #e8e4d8;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #333, 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.mix-cue {
  appearance: none;
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 1px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mix-num {
  flex: none;
  font: 800 8px/1 "SF Mono", "Courier New", ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.mix-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 7px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.mpc-pad.is-muted, .sp-pad.is-muted { filter: grayscale(0.28) brightness(0.72); }
.note-vol.is-mute { opacity: 0.38; }

/* Mixer mute mode: hardware M on the pad (pad scope) or tracks 1–8 (track scope) */
.pad-mix-mute {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 17px;
  height: 13px;
  border-radius: 2px;
  font: 800 8px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.02em;
  color: #2a2b2e;
  background: linear-gradient(180deg, #ece8df, #c8c4bc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 0 1px #5c6168, 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.pad-mix-mute[hidden] { display: none !important; }
.pad-mix-mute.on {
  color: #fff4f0;
  background: linear-gradient(180deg, #e85a48, #a81e14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px #5a1410, 0 0 8px rgba(226, 74, 58, 0.65);
}
body.mix-mute-pad.mix-mutes .mpc-pad:not(.is-muted),
body.mix-mute-pad.mix-mutes .sp-pad:not(.is-muted) {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 0 0 2px rgba(110, 181, 217, 0.35);
}
body.mix-mute-track.mix-mutes .mpc-pad:nth-child(-n+8):not(.is-muted),
body.mix-mute-track.mix-mutes .sp-pad:nth-child(-n+8):not(.is-muted) {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 0 0 2px rgba(110, 181, 217, 0.42);
}

/* Track row: low / high lane mute LEDs while mixer is in track-mute mode */
.sk-trk {
  position: relative;
}
.sk-trk .trk-label {
  position: relative;
  z-index: 1;
}
.sk-trk .trk-mute {
  display: none;
  position: absolute;
  z-index: 2;
  width: 11px;
  height: 9px;
  border-radius: 2px;
  font: 800 6px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  place-items: center;
  color: #2a2b2e;
  background: linear-gradient(180deg, #ece8df, #c0bdb4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 1px #5c6168;
  pointer-events: none;
}
.sk-trk .trk-mute[hidden] { display: none !important; }
body.mix-mute-track.mix-mutes .sk-trk .trk-mute:not([hidden]) {
  display: grid;
}
.sk-trk .trk-mute-lo { left: 3px; bottom: 4px; }
.sk-trk .trk-mute-hi { right: 3px; top: 4px; }
.sk-trk .trk-mute.on {
  color: #fff4f0;
  background: linear-gradient(180deg, #e85a48, #a81e14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px #5a1410, 0 0 6px rgba(226, 74, 58, 0.55);
}
body.mix-mute-track.mix-mutes .sk-trk.mix-trk-mute-mode {
  box-shadow: inset 0 0 0 1px rgba(110, 181, 217, 0.35);
}

body[data-skin="mpc"] .mix-btn,
body[data-skin="mpc"] .mix-mode {
  color: #2a2b2e;
  border-radius: 3px;
  background: linear-gradient(#f0f0ea, #c8c8c0);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #6f757d, 0 2px 0 #8a8e94;
}
body[data-skin="mpc"] .mix-btn:hover,
body[data-skin="mpc"] .mix-mode:hover { filter: brightness(1.05); }
body[data-skin="mpc"] .mix-btn:active,
body[data-skin="mpc"] .mix-mode:active { transform: translateY(1px); }
body[data-skin="mpc"] .mix-btn.on,
body[data-skin="mpc"] .mix-mode.on {
  color: #dfe7ff;
  background: linear-gradient(#2c4075, #1b2a54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 1px #0a0b10, 0 0 8px rgba(80, 110, 200, 0.45);
}
body[data-skin="mpc"] .mix-mode.on.hi {
  color: #1a120c;
  background: linear-gradient(180deg, color-mix(in srgb, #6eb5d9 72%, white), color-mix(in srgb, #6eb5d9 88%, black));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 2px #6eb5d9, 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 12px 1px color-mix(in srgb, #6eb5d9 45%, transparent);
}
body.mix-mute-track.mix-mutes .mpc-pad:nth-child(-n+8).is-muted,
body.mix-mute-track.mix-mutes .sp-pad:nth-child(-n+8).is-muted {
  filter: none;
  background: linear-gradient(145deg, #7a9eae, #4a6a7a 60%, #2a4a5a);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 0 3px #6f757d, 0 0 12px rgba(110, 181, 217, 0.45);
}
.mix-strip.mix-track-lane .mix-name { font-size: 10px; letter-spacing: 0.04em; }
body[data-skin="mpc"] .mix-legend { color: #2a2d32; }
body.mix-mutes .mpc-pad.is-muted {
  filter: none;
  background: linear-gradient(145deg, #c45a4e, #8a2218 60%, #6a1610);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 0 3px #6f757d, 0 0 12px rgba(226, 74, 58, 0.55);
}
body.mix-patterns .mpc-pad.mix-on {
  background: linear-gradient(145deg, #7a92d4, #2c4075 60%, #1b2a54);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 0 0 3px #6f757d, 0 0 12px rgba(80, 110, 200, 0.55);
}
body.mix-patterns .mpc-pad.mix-has:not(.mix-on) {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 0 3px #6f757d, 0 0 8px rgba(80, 110, 200, 0.28);
}
body.mix-patterns .mpc-pad::after {
  content: attr(data-ptn);
  font-size: 18px;
}
body.mix-patterns .mpc-pad.mix-on::after {
  color: #f4f8ff;
  text-shadow: none;
}
body[data-skin="mpc"] .mix-desk {
  background: linear-gradient(180deg, #8f959e, #a3a9b1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35);
}
body[data-skin="mpc"] .mix-strip {
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), transparent 40%),
    linear-gradient(180deg, #7d828a, #6a6f76);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 2px rgba(0,0,0,0.2);
}
body[data-skin="mpc"] .mix-mute {
  color: #2a2b2e;
  border-radius: 2px;
  background: linear-gradient(#e8e6df, #c4c2ba);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #5c6168;
}
body[data-skin="mpc"] .mix-mute.on {
  color: #fff4f0;
  background: linear-gradient(#e24a3a, #a81e14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 6px rgba(226, 74, 58, 0.55);
}
body[data-skin="mpc"] .mix-track {
  border-radius: 2px;
  background: #2a2c30;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.2);
}
body[data-skin="mpc"] .mix-track b {
  background: linear-gradient(180deg, #dfe7ff, #7a90c8);
}
body[data-skin="mpc"] .mix-knob {
  border-radius: 2px;
  background: linear-gradient(#f4f2ea, #c8c4b8);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #4a4e54, 0 1px 2px rgba(0,0,0,0.4);
}
body[data-skin="mpc"] .mix-num { color: #dfe7ff; }
body[data-skin="mpc"] .mix-name { color: #1b2a54; }
body[data-skin="mpc"] .mix-strip.is-mute { filter: saturate(0.7) brightness(0.88); }
body[data-skin="mpc"] .mix-strip.is-zero .mix-name { opacity: 0.45; }

body[data-skin="sp404"] .sp-panel .mix-rail > .mix-btn,
body[data-skin="sp404"] .sp-panel .mix-rail > .mix-mode:not(.midi-go) {
  flex: 1 1 auto;
  text-align: center;
}
body[data-skin="sp404"] .sp-panel .kit-pages,
body[data-skin="sp404"] .sp-panel .midi-go { margin-left: 0; }
body[data-skin="sp404"] .mix-btn,
body[data-skin="sp404"] .mix-mode {
  color: #ff9a3a;
  border-radius: 6px;
  background: linear-gradient(#2c2d32, #121316);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 0 1px #000, 0 2px 0 #111;
  text-shadow: 0 0 5px rgba(255, 130, 30, 0.55);
}
body[data-skin="sp404"] .mix-btn:hover,
body[data-skin="sp404"] .mix-mode:hover { filter: brightness(1.08); }
body[data-skin="sp404"] .mix-btn:active,
body[data-skin="sp404"] .mix-mode:active { transform: translateY(1px); }
body[data-skin="sp404"] .mix-mode.on.hi {
  color: #1a120c;
  background: linear-gradient(180deg, color-mix(in srgb, #7bc9a0 72%, white), color-mix(in srgb, #7bc9a0 88%, black));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 2px #7bc9a0, 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 12px 1px color-mix(in srgb, #7bc9a0 45%, transparent);
  text-shadow: none;
}
body[data-skin="sp404"] .mix-btn.on,
body[data-skin="sp404"] .mix-mode.on {
  color: #2a1400;
  background: linear-gradient(#ffd27a, #f0a030);
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 1px #6b3a00, 0 0 8px rgba(255,170,60,0.55);
}
body[data-skin="sp404"] .mix-legend { color: #c8c0b0; }
body.mix-mutes .sp-pad.is-muted {
  filter: none;
  background: linear-gradient(180deg, #e24a3a, #8a2218 70%, #4a100c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 2px #050506, 0 0 14px rgba(255, 80, 50, 0.55);
}
body.mix-patterns .sp-pad.mix-on {
  background: linear-gradient(180deg, #ffb860, #ff7a1a 62%, #b84a00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 0 2px #050506, 0 0 14px rgba(255, 130, 30, 0.7);
}
body.mix-patterns .sp-pad.mix-has:not(.mix-on) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 2px #050506, 0 0 8px rgba(255, 154, 58, 0.35);
}
body.mix-patterns .sp-pad::after {
  content: attr(data-ptn);
  font-size: 20px;
}
body.mix-patterns .sp-pad::before { visibility: hidden; }
body.mix-patterns .sp-pad.mix-on::after {
  color: #2a1400;
  text-shadow: none;
}
body[data-skin="sp404"] .mix-desk {
  background: #08090a;
}
body[data-skin="sp404"] .mix-strip {
  border-radius: 6px;
  background: linear-gradient(180deg, #232429, #0b0b0d 78%, #060608);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 1px #050506, 0 2px 3px rgba(0,0,0,0.45);
}
body[data-skin="sp404"] .mix-mute {
  color: #d8d0c0;
  border-radius: 3px;
  background: linear-gradient(#3a3a38, #1c1c1a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px #000;
}
body[data-skin="sp404"] .mix-mute.on {
  color: #fff4ee;
  background: linear-gradient(#e24a3a, #a81e14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 7px rgba(255, 80, 50, 0.6);
}
body[data-skin="sp404"] .mix-track {
  border-radius: 2px;
  background: #050506;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.08);
}
body[data-skin="sp404"] .mix-track b {
  background: linear-gradient(180deg, #ffc878, #ff8a28);
}
body[data-skin="sp404"] .mix-knob {
  border-radius: 2px;
  background: linear-gradient(#4a4540, #2b2825);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 1px #000, 0 1px 2px rgba(0,0,0,0.55);
}
body[data-skin="sp404"] .mix-num { color: #f4f8ff; }
body[data-skin="sp404"] .mix-name { color: #ff9a3a; }
body[data-skin="sp404"] .mix-strip.is-mute { filter: saturate(0.65) brightness(0.82); }
body[data-skin="sp404"] .mix-strip.is-zero .mix-name { opacity: 0.4; }

/* ==========================================================================
   Finishes. Same machine, same light from the upper left, same brass.
   ========================================================================== */
body[data-skin="cellar"] {
  --face: #e4d2b0;
  --shell: #24160e;
  --label: #2a160c;
  --label-dim: #5c4030;
  --brand: #2a160c;
  --scale: #5c4638;
  --plate-label: rgba(255, 236, 210, 0.96);
  --ctrl-label: rgba(255, 236, 210, 0.96);
  --kn-sk1: #f6e2b0;
  --kn-sk2: #c4963e;
  --kn-sk3: #6e4c1c;
  --kn-sheen: 0.26;
  --bezel-1: #e6c98a;
  --bezel-2: #7a5a28;
  --foot-1: #f0d7a0;
  --foot-2: #a67c3a;
  --foot-3: #3a2410;
}
body[data-skin="cellar"] {
  --den:
    radial-gradient(ellipse 42% 36% at 18% 0%, rgba(255, 176, 90, 0.28), transparent 62%),
    radial-gradient(ellipse 80% 46% at 50% 100%, rgba(30, 14, 6, 0.55), transparent 62%),
    linear-gradient(180deg, #2a1810 0%, #100c0a 72%);
}
body[data-skin="cellar"] .cabinet::before {
  background:
    repeating-radial-gradient(ellipse 160% 50% at 18% 30%, transparent 0 14px, rgba(20, 8, 2, 0.2) 15px 17px, transparent 18px 34px),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 0% 36%, rgba(255, 196, 120, 0.14), transparent 46%),
    linear-gradient(180deg, #7a5234, #5a3822 42%, #3a2416);
  box-shadow: inset 0 0 0 1px rgba(232, 196, 130, 0.5), inset 0 0 0 3px rgba(20, 10, 4, 0.75), inset 0 0 0 4px rgba(196, 148, 64, 0.55);
}
body[data-skin="cellar"] .plinth {
  background-color: #100c0a;
  background-image:
    radial-gradient(ellipse at 16% 18%, rgba(255, 176, 70, 0.2), transparent 36%),
    repeating-radial-gradient(circle at 42% 46%, #161310 0 2px, #0a0908 3px 6px);
}
body[data-skin="cellar"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.05), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.35));
  box-shadow: inset 0 0 0 2px rgba(214, 170, 90, 0.55), inset 0 0 28px rgba(0, 0, 0, 0.28);
}
body[data-skin="cellar"] .face::before,
body[data-skin="cellar"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 248, 230, 0.45), transparent 22%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0 1px, rgba(80, 50, 20, 0.05) 1px 3px),
    linear-gradient(180deg, #ead7b6, #cbb892);
}
body[data-skin="cellar"] .face {
  box-shadow: inset 0 0 0 1px rgba(120, 80, 30, 0.5), inset 0 0 0 3px rgba(255, 236, 200, 0.28), 0 8px 16px rgba(0, 0, 0, 0.36);
}
body[data-skin="cellar"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a120c 0 7px, transparent 7.5px),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 42%),
    linear-gradient(160deg, #f1d98a, #c9923a);
  box-shadow: inset 0 0 0 5px #6e2c22, inset 0 0 0 6px #f3e0b0, inset 0 0 0 8px #6e2c22;
}
body[data-skin="cellar"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #fff6df, #ffb03a 48%, #6a3810);
  box-shadow: 0 0 10px #ffb03a;
}
body[data-skin="cellar"] .vfd span { color: #ffb03a; text-shadow: 0 0 7px rgba(255, 160, 40, 0.7); }
body[data-skin="cellar"] .swatch { background: linear-gradient(135deg, #6b4428, #24160e); }
body[data-skin="cellar"] .silk { font-size: 0; }
body[data-skin="cellar"] .silk::after { content: "Cellar · model 2233"; font-size: 11px; }

body[data-skin="porch"] {
  --face: #8d6a4e;
  --shell: #24382c;
  --label: #1c140c;
  --label-dim: #4a3828;
  --brand: #1c1810;
  --scale: #3e4a38;
  --plate-label: rgba(255, 236, 210, 0.94);
  --ctrl-label: rgba(255, 236, 210, 0.94);
  --kn-sk1: #f3e0a8;
  --kn-sk2: #b8893a;
  --kn-sk3: #5c4218;
  --kn-sheen: 0.24;
  --bezel-1: #d7c49a;
  --bezel-2: #5c4630;
  --foot-1: #efe2bf;
  --foot-2: #6a8a62;
  --foot-3: #1c2a20;
}
body[data-skin="porch"] {
  --den:
    radial-gradient(ellipse 38% 32% at 76% 0%, rgba(255, 196, 110, 0.24), transparent 60%),
    linear-gradient(180deg, #1c3024 0%, #0c1610 74%);
}
body[data-skin="porch"] .cabinet::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(0, 0, 0, 0.38) 52px 54px, rgba(255, 236, 200, 0.08) 54px 55px),
    linear-gradient(180deg, rgba(255, 244, 220, 0.1), transparent 24%),
    linear-gradient(180deg, #6e9468, #3e6248 48%, #2a4636);
  box-shadow: inset 0 0 0 1px rgba(239, 226, 191, 0.45), inset 0 0 0 3px rgba(16, 28, 20, 0.7), inset 0 0 0 4px rgba(201, 162, 58, 0.4);
}
body[data-skin="porch"] .plinth {
  background-color: #142018;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(0, 0, 0, 0.28) 28px 30px),
    linear-gradient(180deg, #24382c, #101810);
}
body[data-skin="porch"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 236, 190, 0.06), transparent 16%, transparent 80%, rgba(0, 0, 0, 0.32));
  box-shadow: inset 0 0 0 2px rgba(201, 162, 58, 0.5), inset 0 0 24px rgba(0, 0, 0, 0.3);
}
body[data-skin="porch"] .face::before,
body[data-skin="porch"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 220, 180, 0.22), transparent 20%),
    repeating-linear-gradient(0deg, rgba(255, 220, 170, 0.05) 0 1px, rgba(40, 18, 8, 0.08) 1px 3px),
    linear-gradient(180deg, #a67c58, #6e4e38);
}
body[data-skin="porch"] .face {
  box-shadow: inset 0 0 0 1px rgba(60, 30, 16, 0.55), inset 0 0 0 3px rgba(232, 196, 140, 0.25), 0 8px 16px rgba(0, 0, 0, 0.36);
}
body[data-skin="porch"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a120c 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f0d48a, #c9a23a);
  box-shadow: inset 0 0 0 5px #2f4a34, inset 0 0 0 6px #efe2bf, inset 0 0 0 8px #2f4a34;
}
body[data-skin="porch"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #f4ffe4, #b6d98a 48%, #2a4a28);
  box-shadow: 0 0 10px #b6d98a;
}
body[data-skin="porch"] .vfd span { color: #d6e6a8; text-shadow: 0 0 7px rgba(180, 210, 110, 0.55); }
body[data-skin="porch"] .swatch { background: linear-gradient(135deg, #527058, #1c2e24); }
body[data-skin="porch"] .silk { font-size: 0; }
body[data-skin="porch"] .silk::after { content: "Yard · model 2233"; font-size: 11px; }

body[data-skin="sleeve"] {
  --face: #f0e2c4;
  --shell: #8a6a28;
  --label: #2a140c;
  --label-dim: #5c3820;
  --brand: #2a140c;
  --scale: #5c4630;
  --plate-label: rgba(42, 20, 12, 0.9);
  --ctrl-label: rgba(42, 20, 12, 0.88);
  --kn-sk1: #f7e7c0;
  --kn-sk2: #d4a24a;
  --kn-sk3: #6a4018;
  --kn-sheen: 0.3;
  --bezel-1: #2a140c;
  --bezel-2: #c9a23a;
  --foot-1: #f0d48a;
  --foot-2: #8a6230;
  --foot-3: #2a160c;
}
body[data-skin="sleeve"] {
  --den:
    radial-gradient(ellipse 46% 34% at 16% 0%, rgba(255, 196, 120, 0.3), transparent 60%),
    linear-gradient(180deg, #3a2414 0%, #140e0a 74%);
}
body[data-skin="sleeve"] .cabinet::before {
  background:
    radial-gradient(circle, rgba(40, 18, 4, 0.22) 0 0.7px, transparent 0.9px) 0 0 / 5px 5px,
    repeating-linear-gradient(92deg, rgba(40, 16, 4, 0.16) 0 2px, transparent 2px 11px),
    radial-gradient(ellipse at 0% 30%, rgba(255, 236, 180, 0.2), transparent 40%),
    linear-gradient(180deg, #d4ae62, #a68434 40%, #6e5018);
  box-shadow: inset 0 0 0 1px rgba(42, 16, 8, 0.7), inset 0 0 0 3px rgba(255, 232, 180, 0.35), inset 0 0 0 4px rgba(90, 28, 22, 0.65);
}
body[data-skin="sleeve"] .plinth {
  background-color: #0e0c0a;
  background-image:
    radial-gradient(ellipse at 20% 16%, rgba(255, 210, 140, 0.08), transparent 32%),
    repeating-radial-gradient(circle at 40% 48%, #1a1814 0 2px, #0c0b09 3px 5px);
}
body[data-skin="sleeve"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 220, 160, 0.04), transparent 14%, transparent 78%, rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 0 0 2px rgba(201, 162, 58, 0.45), inset 0 0 22px rgba(0, 0, 0, 0.4);
}
body[data-skin="sleeve"] .face::before,
body[data-skin="sleeve"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 18%),
    repeating-linear-gradient(0deg, rgba(90, 50, 20, 0.05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #f6ead0, #e0cfaa);
}
body[data-skin="sleeve"] .face {
  box-shadow: inset 0 0 0 1px rgba(90, 40, 16, 0.4), inset 0 0 0 3px rgba(255, 248, 230, 0.45), 0 8px 16px rgba(0, 0, 0, 0.32);
}
body[data-skin="sleeve"] .label {
  background:
    radial-gradient(circle at 50% 50%, #f6efe2 0 16px, transparent 16.5px),
    linear-gradient(160deg, #f7f1e4, #e6d7bc);
  box-shadow: inset 0 0 0 5px #8a3428, inset 0 0 0 6px #f6efe2, inset 0 0 0 8px #8a3428;
  color: #2a140c;
}
body[data-skin="sleeve"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #fff1d4, #e6b040 48%, #6a3810);
  box-shadow: 0 0 10px #e6b040;
}
body[data-skin="sleeve"] .vfd span { color: #ffb03a; text-shadow: 0 0 7px rgba(255, 160, 40, 0.65); }
body[data-skin="sleeve"] .swatch { background: linear-gradient(135deg, #d4ae62, #3a2410); }
body[data-skin="sleeve"] .silk { font-size: 0; }
body[data-skin="sleeve"] .silk::after { content: "Sleeve · model 2233"; font-size: 11px; }

body[data-skin="teak"] {
  --face: #f3ead4;
  --shell: #6b4a30;
  --label: #2e1c10;
  --label-dim: #5c4634;
  --brand: #2e1c10;
  --scale: #5c4a38;
  --plate-label: rgba(46, 28, 16, 0.88);
  --ctrl-label: rgba(46, 28, 16, 0.86);
  --kn-sk1: #efe6c8;
  --kn-sk2: #b7a06a;
  --kn-sk3: #5c4a2c;
  --kn-sheen: 0.22;
  --bezel-1: #e7dcc0;
  --bezel-2: #6e5a3c;
  --foot-1: #f3ead4;
  --foot-2: #8a6844;
  --foot-3: #3a2818;
}
body[data-skin="teak"] {
  --den:
    radial-gradient(ellipse 48% 34% at 14% 0%, rgba(255, 210, 150, 0.26), transparent 58%),
    linear-gradient(180deg, #4a3424 0%, #1a120c 74%);
}
body[data-skin="teak"] .cabinet::before {
  background:
    repeating-linear-gradient(90deg, rgba(40, 18, 6, 0.16) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(87deg, transparent 0 18px, rgba(60, 30, 10, 0.14) 19px, transparent 24px),
    radial-gradient(ellipse at 0% 34%, rgba(255, 230, 190, 0.16), transparent 44%),
    linear-gradient(180deg, #c4966a, #8a5e3c 42%, #5a3c26);
  box-shadow: inset 0 0 0 1px rgba(243, 228, 196, 0.55), inset 0 0 0 3px rgba(50, 28, 12, 0.65), inset 0 0 0 4px rgba(160, 130, 70, 0.45);
}
body[data-skin="teak"] .plinth {
  background-color: #3a2818;
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #6a4830, #3a2818 50%, #2a1c12);
}
body[data-skin="teak"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 230, 190, 0.08), transparent 16%, transparent 78%, rgba(0, 0, 0, 0.28));
  box-shadow: inset 0 0 0 2px rgba(196, 164, 96, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.22);
}
body[data-skin="teak"] .face::before,
body[data-skin="teak"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 20%),
    repeating-linear-gradient(0deg, rgba(90, 60, 20, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f7f0de, #e4d5b4);
}
body[data-skin="teak"] .face {
  box-shadow: inset 0 0 0 1px rgba(110, 80, 40, 0.4), inset 0 0 0 3px rgba(255, 248, 230, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
}
body[data-skin="teak"] .label {
  background:
    radial-gradient(circle at 50% 50%, #2a1c10 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f3e6c4, #d4b56a);
  box-shadow: inset 0 0 0 5px #6a3a28, inset 0 0 0 6px #f6efe0, inset 0 0 0 8px #6a3a28;
}
body[data-skin="teak"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #f4ffe6, #c5d6a0 48%, #3a4a28);
  box-shadow: 0 0 8px #c5d6a0;
}
body[data-skin="teak"] .vfd span { color: #e6b15a; text-shadow: 0 0 6px rgba(210, 150, 60, 0.55); }
body[data-skin="teak"] .swatch { background: linear-gradient(135deg, #c4966a, #5a3c26); }
body[data-skin="teak"] .silk { font-size: 0; }
body[data-skin="teak"] .silk::after { content: "Teak · model 2233"; font-size: 11px; }

body[data-skin="booth"] {
  --face: #d8c4a4;
  --shell: #4a221c;
  --label: #2a100c;
  --label-dim: #5c342c;
  --brand: #2a100c;
  --scale: #5c3830;
  --plate-label: rgba(255, 236, 220, 0.94);
  --ctrl-label: rgba(255, 236, 220, 0.94);
  --kn-sk1: #f6e0b4;
  --kn-sk2: #c9923e;
  --kn-sk3: #6a3c18;
  --kn-sheen: 0.32;
  --bezel-1: #e6c9a0;
  --bezel-2: #6a3828;
  --foot-1: #f0d0b0;
  --foot-2: #8a4034;
  --foot-3: #2a1410;
}
body[data-skin="booth"] {
  --den:
    radial-gradient(ellipse 34% 28% at 82% 0%, rgba(255, 120, 60, 0.2), transparent 58%),
    linear-gradient(180deg, #2a1210 0%, #0c0808 74%);
}
body[data-skin="booth"] .cabinet::before {
  background:
    linear-gradient(115deg, rgba(255, 220, 190, 0.16), transparent 28%),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 100% 80%, rgba(0, 0, 0, 0.28), transparent 42%),
    linear-gradient(180deg, #9a4a3c, #6a3028 40%, #3a1814);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 180, 0.35), inset 0 0 0 3px rgba(30, 8, 6, 0.75), inset 0 0 0 4px rgba(214, 170, 90, 0.45);
}
body[data-skin="booth"] .plinth {
  background-color: #0c0a09;
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(255, 160, 90, 0.12), transparent 34%),
    linear-gradient(180deg, #1a1412, #0a0908);
}
body[data-skin="booth"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 200, 160, 0.05), transparent 14%, transparent 80%, rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 0 0 2px rgba(214, 170, 90, 0.5), inset 0 0 26px rgba(0, 0, 0, 0.4);
}
body[data-skin="booth"] .face::before,
body[data-skin="booth"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 244, 224, 0.4), transparent 20%),
    repeating-linear-gradient(0deg, rgba(80, 30, 20, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #e6d4b8, #c4aa88);
}
body[data-skin="booth"] .face {
  box-shadow: inset 0 0 0 1px rgba(90, 30, 24, 0.45), inset 0 0 0 3px rgba(255, 228, 200, 0.28), 0 8px 16px rgba(0, 0, 0, 0.36);
}
body[data-skin="booth"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a100c 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f0d09a, #c47a3a);
  box-shadow: inset 0 0 0 5px #6a241c, inset 0 0 0 6px #f6e3c0, inset 0 0 0 8px #6a241c;
}
body[data-skin="booth"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #ffe6d4, #e07040 48%, #6a2018);
  box-shadow: 0 0 10px #e07040;
}
body[data-skin="booth"] .vfd span { color: #ffb070; text-shadow: 0 0 7px rgba(255, 140, 70, 0.6); }
body[data-skin="booth"] .swatch { background: linear-gradient(135deg, #9a4a3c, #2a100c); }
body[data-skin="booth"] .silk { font-size: 0; }
body[data-skin="booth"] .silk::after { content: "Booth · model 2233"; font-size: 11px; }

body[data-skin="attic"] {
  --face: #e6dcc8;
  --shell: #8a6a48;
  --label: #3a2c1c;
  --label-dim: #6a5640;
  --brand: #3a2c1c;
  --scale: #6a5644;
  --plate-label: rgba(42, 28, 16, 0.9);
  --ctrl-label: rgba(42, 28, 16, 0.88);
  --kn-sk1: #f4e6c4;
  --kn-sk2: #c4a15a;
  --kn-sk3: #6a4a22;
  --kn-sheen: 0.22;
  --bezel-1: #ead8b4;
  --bezel-2: #7a6244;
  --foot-1: #f0e2c8;
  --foot-2: #a88860;
  --foot-3: #4a3824;
}
body[data-skin="attic"] {
  --den:
    radial-gradient(ellipse 44% 32% at 14% 0%, rgba(255, 210, 150, 0.22), transparent 60%),
    linear-gradient(180deg, #4a3828 0%, #1a140e 74%);
}
body[data-skin="attic"] .cabinet::before {
  background:
    repeating-linear-gradient(2deg, #e4d2b2 0 26px, #c8aa7c 26px 27px, #d8c09a 27px 54px, rgba(70, 40, 16, 0.45) 54px 56px),
    radial-gradient(ellipse at 0% 28%, rgba(255, 236, 200, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(90, 50, 20, 0.12), transparent 30%);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 210, 0.45), inset 0 0 0 3px rgba(50, 32, 16, 0.7), inset 0 0 0 4px rgba(176, 140, 72, 0.5);
}
body[data-skin="attic"] .plinth {
  background-color: #4a3828;
  background-image:
    repeating-linear-gradient(2deg, #6a5038 0 18px, rgba(20, 10, 4, 0.45) 18px 20px),
    linear-gradient(180deg, #5a4430, #3a2c1e);
}
body[data-skin="attic"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 230, 190, 0.08), transparent 16%, transparent 78%, rgba(0, 0, 0, 0.28));
  box-shadow: inset 0 0 0 2px rgba(196, 160, 90, 0.45), inset 0 0 22px rgba(0, 0, 0, 0.24);
}
body[data-skin="attic"] .face::before,
body[data-skin="attic"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 20%),
    repeating-linear-gradient(0deg, rgba(90, 60, 30, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #efe4d0, #d8c8aa);
}
body[data-skin="attic"] .face {
  box-shadow: inset 0 0 0 1px rgba(90, 60, 30, 0.4), inset 0 0 0 3px rgba(255, 248, 230, 0.35), 0 8px 16px rgba(0, 0, 0, 0.28);
}
body[data-skin="attic"] .label {
  background:
    radial-gradient(circle at 50% 50%, #2a1c10 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f3e2b4, #c9a25a);
  box-shadow: inset 0 0 0 5px #6a4030, inset 0 0 0 6px #f6ecd4, inset 0 0 0 8px #6a4030;
}
body[data-skin="attic"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #fff4dc, #e6b15a 48%, #6a4018);
  box-shadow: 0 0 10px #e6b15a;
}
body[data-skin="attic"] .vfd span { color: #e6b15a; text-shadow: 0 0 6px rgba(210, 150, 60, 0.55); }
body[data-skin="attic"] .swatch { background: linear-gradient(135deg, #e4d2b2, #5a4030); }
body[data-skin="attic"] .silk { font-size: 0; }
body[data-skin="attic"] .silk::after { content: "Attic · model 2233"; font-size: 11px; }

body[data-skin="denim"] {
  --face: #e4d8c4;
  --shell: #2c3c58;
  --label: #2a2218;
  --label-dim: #5c5044;
  --brand: #2a2218;
  --scale: #4a4034;
  --plate-label: rgba(244, 236, 220, 0.94);
  --ctrl-label: rgba(244, 236, 220, 0.94);
  --kn-sk1: #f6e6c0;
  --kn-sk2: #c4a15a;
  --kn-sk3: #6a4c22;
  --kn-sheen: 0.24;
  --bezel-1: #e6d4b0;
  --bezel-2: #6a5a40;
  --foot-1: #f0e2c4;
  --foot-2: #4a6288;
  --foot-3: #1a2434;
}
body[data-skin="denim"] {
  --den:
    radial-gradient(ellipse 40% 30% at 16% 0%, rgba(255, 210, 150, 0.16), transparent 58%),
    linear-gradient(180deg, #1a2434 0%, #0c1018 74%);
}
body[data-skin="denim"] .cabinet::before {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(65deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 0% 30%, rgba(255, 230, 190, 0.12), transparent 40%),
    linear-gradient(180deg, #5a6e90, #3a4c6c 42%, #243044);
  box-shadow: inset 0 0 0 1px rgba(232, 210, 160, 0.45), inset 0 0 0 3px rgba(12, 16, 28, 0.75), inset 0 0 0 4px rgba(196, 160, 80, 0.4);
}
body[data-skin="denim"] .plinth {
  background-color: #12161e;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #1c2434, #10141c);
}
body[data-skin="denim"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.05), transparent 14%, transparent 80%, rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 0 0 2px rgba(196, 160, 80, 0.45), inset 0 0 24px rgba(0, 0, 0, 0.35);
}
body[data-skin="denim"] .face::before,
body[data-skin="denim"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 248, 230, 0.4), transparent 18%),
    repeating-linear-gradient(0deg, rgba(60, 40, 20, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #efe4d0, #d4c4aa);
}
body[data-skin="denim"] .face {
  box-shadow: inset 0 0 0 1px rgba(60, 40, 20, 0.4), inset 0 0 0 3px rgba(255, 244, 220, 0.32), 0 8px 16px rgba(0, 0, 0, 0.32);
}
body[data-skin="denim"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a140c 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f4e2b0, #c9a24a);
  box-shadow: inset 0 0 0 5px #2a3a58, inset 0 0 0 6px #f3e6c4, inset 0 0 0 8px #2a3a58;
}
body[data-skin="denim"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #fff6e0, #e6c07a 48%, #6a4a18);
  box-shadow: 0 0 10px #e6c07a;
}
body[data-skin="denim"] .vfd span { color: #e6c07a; text-shadow: 0 0 6px rgba(210, 160, 70, 0.55); }
body[data-skin="denim"] .swatch { background: linear-gradient(135deg, #5a6e90, #1a2434); }
body[data-skin="denim"] .silk { font-size: 0; }
body[data-skin="denim"] .silk::after { content: "Denim · model 2233"; font-size: 11px; }

body[data-skin="oxblood"] {
  --face: #f0e2cc;
  --shell: #4a1824;
  --label: #2a140c;
  --label-dim: #5c3828;
  --brand: #2a140c;
  --scale: #5c3828;
  --plate-label: rgba(255, 236, 220, 0.94);
  --ctrl-label: rgba(255, 236, 220, 0.94);
  --kn-sk1: #f6e2b8;
  --kn-sk2: #c9923e;
  --kn-sk3: #6a3c18;
  --kn-sheen: 0.28;
  --bezel-1: #e8c9a4;
  --bezel-2: #6a3030;
  --foot-1: #f0d4b4;
  --foot-2: #8a3844;
  --foot-3: #2a1014;
}
body[data-skin="oxblood"] {
  --den:
    radial-gradient(ellipse 36% 28% at 18% 0%, rgba(255, 160, 120, 0.16), transparent 58%),
    linear-gradient(180deg, #2a1014 0%, #0c0808 74%);
}
body[data-skin="oxblood"] .cabinet::before {
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.2) 0 0.55px, transparent 0.75px) 0 0 / 4px 4px,
    radial-gradient(ellipse at 0% 26%, rgba(255, 210, 180, 0.16), transparent 40%),
    linear-gradient(180deg, #8a3848, #5a2030 44%, #3a1420);
  box-shadow: inset 0 0 0 1px rgba(240, 200, 170, 0.35), inset 0 0 0 3px rgba(20, 8, 10, 0.75), inset 0 0 0 4px rgba(196, 150, 80, 0.45);
}
body[data-skin="oxblood"] .plinth {
  background-color: #100c0c;
  background-image:
    radial-gradient(ellipse at 20% 14%, rgba(255, 140, 100, 0.1), transparent 34%),
    linear-gradient(180deg, #1a1212, #0c0a0a);
}
body[data-skin="oxblood"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 190, 160, 0.05), transparent 14%, transparent 80%, rgba(0, 0, 0, 0.42));
  box-shadow: inset 0 0 0 2px rgba(196, 150, 80, 0.45), inset 0 0 26px rgba(0, 0, 0, 0.4);
}
body[data-skin="oxblood"] .face::before,
body[data-skin="oxblood"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 248, 230, 0.45), transparent 18%),
    repeating-linear-gradient(0deg, rgba(80, 30, 20, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f6ead4, #e0ccb0);
}
body[data-skin="oxblood"] .face {
  box-shadow: inset 0 0 0 1px rgba(90, 30, 24, 0.4), inset 0 0 0 3px rgba(255, 236, 210, 0.32), 0 8px 16px rgba(0, 0, 0, 0.34);
}
body[data-skin="oxblood"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a100c 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f0d4a4, #c47a48);
  box-shadow: inset 0 0 0 5px #6a2030, inset 0 0 0 6px #f6e6cc, inset 0 0 0 8px #6a2030;
}
body[data-skin="oxblood"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #ffe6d8, #e09060 48%, #6a2818);
  box-shadow: 0 0 10px #e09060;
}
body[data-skin="oxblood"] .vfd span { color: #e09060; text-shadow: 0 0 7px rgba(220, 120, 70, 0.55); }
body[data-skin="oxblood"] .swatch { background: linear-gradient(135deg, #8a3848, #2a1014); }
body[data-skin="oxblood"] .silk { font-size: 0; }
body[data-skin="oxblood"] .silk::after { content: "Oxblood · model 2233"; font-size: 11px; }

body[data-skin="sage"] {
  --face: #e7e0cc;
  --shell: #3e4e40;
  --label: #243028;
  --label-dim: #4a5c4e;
  --brand: #243028;
  --scale: #4a5648;
  --plate-label: rgba(236, 244, 230, 0.94);
  --ctrl-label: rgba(236, 244, 230, 0.94);
  --kn-sk1: #f4e6c4;
  --kn-sk2: #c49848;
  --kn-sk3: #6a4a20;
  --kn-sheen: 0.22;
  --bezel-1: #e6dcc4;
  --bezel-2: #5a6a58;
  --foot-1: #efe6d0;
  --foot-2: #6a7a64;
  --foot-3: #1c2820;
}
body[data-skin="sage"] {
  --den:
    radial-gradient(ellipse 38% 30% at 78% 0%, rgba(212, 140, 70, 0.16), transparent 58%),
    linear-gradient(180deg, #1c2820 0%, #0c1410 74%);
}
body[data-skin="sage"] .cabinet::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(255, 244, 220, 0.22) 72px 74px, transparent 74px 75px),
    linear-gradient(180deg, rgba(255, 250, 236, 0.14), transparent 22%),
    radial-gradient(ellipse at 0% 30%, rgba(255, 236, 200, 0.1), transparent 40%),
    linear-gradient(180deg, #8a9a84, #5a6a58 46%, #3a4a40);
  box-shadow: inset 0 0 0 1px rgba(239, 232, 210, 0.4), inset 0 0 0 3px rgba(16, 24, 18, 0.7), inset 0 0 0 4px rgba(196, 140, 70, 0.35);
}
body[data-skin="sage"] .plinth {
  background-color: #1a221c;
  background-image:
    linear-gradient(180deg, rgba(255, 236, 200, 0.04), transparent 20%),
    linear-gradient(180deg, #243028, #141c16);
}
body[data-skin="sage"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 230, 190, 0.05), transparent 14%, transparent 80%, rgba(0, 0, 0, 0.34));
  box-shadow: inset 0 0 0 2px rgba(196, 150, 80, 0.4), inset 0 0 22px rgba(0, 0, 0, 0.3);
}
body[data-skin="sage"] .face::before,
body[data-skin="sage"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 18%),
    repeating-linear-gradient(0deg, rgba(40, 60, 40, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f2ecda, #d8d0b8);
}
body[data-skin="sage"] .face {
  box-shadow: inset 0 0 0 1px rgba(40, 60, 40, 0.35), inset 0 0 0 3px rgba(255, 250, 236, 0.4), 0 8px 16px rgba(0, 0, 0, 0.28);
}
body[data-skin="sage"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a140c 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f0d0a8, #d4894a);
  box-shadow: inset 0 0 0 5px #3a4a3c, inset 0 0 0 6px #f3ecda, inset 0 0 0 8px #3a4a3c;
}
body[data-skin="sage"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #ffe6d0, #d4894a 48%, #6a3818);
  box-shadow: 0 0 10px #d4894a;
}
body[data-skin="sage"] .vfd span { color: #e09858; text-shadow: 0 0 6px rgba(210, 130, 60, 0.55); }
body[data-skin="sage"] .swatch { background: linear-gradient(135deg, #8a9a84, #1c2820); }
body[data-skin="sage"] .silk { font-size: 0; }
body[data-skin="sage"] .silk::after { content: "Sage · model 2233"; font-size: 11px; }

body[data-skin="soot"] {
  --face: #c4b09a;
  --shell: #1c1b1a;
  --label: #1a120c;
  --label-dim: #4a3c30;
  --brand: #1a120c;
  --scale: #4a3c30;
  --plate-label: rgba(255, 232, 200, 0.94);
  --ctrl-label: rgba(255, 232, 200, 0.94);
  --kn-sk1: #f3e0b4;
  --kn-sk2: #b89048;
  --kn-sk3: #5c4018;
  --kn-sheen: 0.2;
  --bezel-1: #d8c4a8;
  --bezel-2: #4a4038;
  --foot-1: #e0d0b8;
  --foot-2: #5a5048;
  --foot-3: #141210;
}
body[data-skin="soot"] {
  --den:
    radial-gradient(ellipse 32% 26% at 16% 0%, rgba(255, 176, 70, 0.2), transparent 56%),
    linear-gradient(180deg, #141210 0%, #080808 74%);
}
body[data-skin="soot"] .cabinet::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 0 0.5px, transparent 0.7px) 0 0 / 3px 3px,
    radial-gradient(ellipse at 0% 24%, rgba(255, 190, 110, 0.14), transparent 38%),
    linear-gradient(180deg, #3a3836, #1c1b1a 46%, #10100e);
  box-shadow: inset 0 0 0 1px rgba(220, 200, 170, 0.22), inset 0 0 0 3px rgba(0, 0, 0, 0.8), inset 0 0 0 4px rgba(196, 150, 70, 0.35);
}
body[data-skin="soot"] .plinth {
  background-color: #141210;
  background-image:
    radial-gradient(ellipse at 16% 12%, rgba(255, 176, 70, 0.12), transparent 32%),
    linear-gradient(180deg, #1c1a18, #0c0c0a);
}
body[data-skin="soot"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 190, 120, 0.04), transparent 12%, transparent 80%, rgba(0, 0, 0, 0.45));
  box-shadow: inset 0 0 0 2px rgba(196, 150, 70, 0.35), inset 0 0 28px rgba(0, 0, 0, 0.45);
}
body[data-skin="soot"] .face::before,
body[data-skin="soot"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 220, 180, 0.16), transparent 22%),
    repeating-linear-gradient(0deg, rgba(40, 24, 12, 0.06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #d4c0a8, #b09880);
}
body[data-skin="soot"] .face {
  box-shadow: inset 0 0 0 1px rgba(40, 24, 12, 0.5), inset 0 0 0 3px rgba(255, 220, 180, 0.16), 0 8px 16px rgba(0, 0, 0, 0.4);
}
body[data-skin="soot"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a120c 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f1d48a, #c9923a);
  box-shadow: inset 0 0 0 5px #2a241c, inset 0 0 0 6px #e6d4b4, inset 0 0 0 8px #2a241c;
}
body[data-skin="soot"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #fff6df, #ffb03a 48%, #6a3810);
  box-shadow: 0 0 12px #ffb03a;
}
body[data-skin="soot"] .vfd span { color: #ffb03a; text-shadow: 0 0 7px rgba(255, 160, 40, 0.7); }
body[data-skin="soot"] .swatch { background: linear-gradient(135deg, #3a3836, #c4b09a); }
body[data-skin="soot"] .silk { font-size: 0; }
body[data-skin="soot"] .silk::after { content: "Soot · model 2233"; font-size: 11px; }

body[data-skin="copper"] {
  --face: #f0e2c8;
  --shell: #6a4030;
  --label: #2a160c;
  --label-dim: #5c4030;
  --brand: #2a160c;
  --scale: #5c4030;
  --plate-label: rgba(255, 236, 214, 0.94);
  --ctrl-label: rgba(255, 236, 214, 0.94);
  --kn-sk1: #f6e6c0;
  --kn-sk2: #c9a24a;
  --kn-sk3: #6a4a1c;
  --kn-sheen: 0.3;
  --bezel-1: #f0d4b0;
  --bezel-2: #6a4830;
  --foot-1: #f0d8b8;
  --foot-2: #a86840;
  --foot-3: #2a1810;
}
body[data-skin="copper"] {
  --den:
    radial-gradient(ellipse 40% 30% at 12% 0%, rgba(255, 180, 110, 0.2), transparent 58%),
    linear-gradient(180deg, #2a1810 0%, #100c0a 74%);
}
body[data-skin="copper"] .cabinet::before {
  background:
    repeating-linear-gradient(90deg, rgba(255, 230, 200, 0.14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 0% 22%, rgba(255, 220, 180, 0.22), transparent 36%),
    radial-gradient(ellipse at 80% 100%, rgba(40, 70, 58, 0.28), transparent 42%),
    linear-gradient(180deg, #d4926a, #8a5438 40%, #5a3424);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 180, 0.4), inset 0 0 0 3px rgba(30, 14, 8, 0.7), inset 0 0 0 4px rgba(180, 140, 70, 0.45);
}
body[data-skin="copper"] .plinth {
  background-color: #1a1210;
  background-image:
    radial-gradient(ellipse at 18% 10%, rgba(255, 160, 90, 0.12), transparent 32%),
    linear-gradient(180deg, #2a1c16, #120e0c);
}
body[data-skin="copper"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 200, 150, 0.06), transparent 14%, transparent 78%, rgba(0, 0, 0, 0.38));
  box-shadow: inset 0 0 0 2px rgba(201, 160, 80, 0.45), inset 0 0 24px rgba(0, 0, 0, 0.35);
}
body[data-skin="copper"] .face::before,
body[data-skin="copper"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 248, 230, 0.46), transparent 18%),
    repeating-linear-gradient(0deg, rgba(90, 50, 20, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f6ead2, #e0ccae);
}
body[data-skin="copper"] .face {
  box-shadow: inset 0 0 0 1px rgba(90, 50, 20, 0.4), inset 0 0 0 3px rgba(255, 240, 214, 0.34), 0 8px 16px rgba(0, 0, 0, 0.32);
}
body[data-skin="copper"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a120c 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f3e2b0, #c9b06a);
  box-shadow: inset 0 0 0 5px #6a4030, inset 0 0 0 6px #f4e6cc, inset 0 0 0 8px #6a4030;
}
body[data-skin="copper"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #f4ffe4, #c9b06a 46%, #3a4a28);
  box-shadow: 0 0 10px #c9b06a;
}
body[data-skin="copper"] .vfd span { color: #e6c888; text-shadow: 0 0 6px rgba(200, 170, 80, 0.55); }
body[data-skin="copper"] .swatch { background: linear-gradient(135deg, #d4926a, #3a4a38); }
body[data-skin="copper"] .silk { font-size: 0; }
body[data-skin="copper"] .silk::after { content: "Copper · model 2233"; font-size: 11px; }

body[data-skin="plum"] {
  --face: #f0e0cc;
  --shell: #4a2434;
  --label: #2a1418;
  --label-dim: #5c3840;
  --brand: #2a1418;
  --scale: #5c3840;
  --plate-label: rgba(255, 236, 224, 0.94);
  --ctrl-label: rgba(255, 236, 224, 0.94);
  --kn-sk1: #f6e2b8;
  --kn-sk2: #c99248;
  --kn-sk3: #6a3c1c;
  --kn-sheen: 0.26;
  --bezel-1: #e8d0b4;
  --bezel-2: #6a3848;
  --foot-1: #f0d4bc;
  --foot-2: #8a4860;
  --foot-3: #2a141c;
}
body[data-skin="plum"] {
  --den:
    radial-gradient(ellipse 36% 28% at 14% 0%, rgba(255, 170, 140, 0.16), transparent 58%),
    linear-gradient(180deg, #241018 0%, #0c080a 74%);
}
body[data-skin="plum"] .cabinet::before {
  background:
    repeating-linear-gradient(92deg, rgba(255, 220, 210, 0.08) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 0% 24%, rgba(255, 210, 190, 0.16), transparent 38%),
    linear-gradient(180deg, #9a5870, #6a3850 42%, #3a2030);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 200, 0.32), inset 0 0 0 3px rgba(24, 8, 14, 0.75), inset 0 0 0 4px rgba(196, 150, 80, 0.4);
}
body[data-skin="plum"] .plinth {
  background-color: #140e12;
  background-image:
    radial-gradient(ellipse at 16% 12%, rgba(255, 150, 130, 0.1), transparent 32%),
    linear-gradient(180deg, #22141a, #100c0e);
}
body[data-skin="plum"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 190, 170, 0.05), transparent 14%, transparent 80%, rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 0 0 2px rgba(196, 150, 80, 0.42), inset 0 0 24px rgba(0, 0, 0, 0.38);
}
body[data-skin="plum"] .face::before,
body[data-skin="plum"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.44), transparent 18%),
    repeating-linear-gradient(0deg, rgba(80, 30, 40, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f6e6d2, #e0c8b0);
}
body[data-skin="plum"] .face {
  box-shadow: inset 0 0 0 1px rgba(80, 30, 40, 0.38), inset 0 0 0 3px rgba(255, 236, 214, 0.32), 0 8px 16px rgba(0, 0, 0, 0.32);
}
body[data-skin="plum"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a100c 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f3d8b4, #d09078);
  box-shadow: inset 0 0 0 5px #6a3048, inset 0 0 0 6px #f6e6d0, inset 0 0 0 8px #6a3048;
}
body[data-skin="plum"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #ffe8dc, #e09078 48%, #6a3028);
  box-shadow: 0 0 10px #e09078;
}
body[data-skin="plum"] .vfd span { color: #e8a090; text-shadow: 0 0 6px rgba(220, 130, 110, 0.55); }
body[data-skin="plum"] .swatch { background: linear-gradient(135deg, #9a5870, #2a141c); }
body[data-skin="plum"] .silk { font-size: 0; }
body[data-skin="plum"] .silk::after { content: "Plum · model 2233"; font-size: 11px; }

body[data-skin="sand"] {
  --face: #f3ead8;
  --shell: #a89878;
  --label: #3a3024;
  --label-dim: #6a5c48;
  --brand: #3a3024;
  --scale: #6a5c48;
  --plate-label: rgba(42, 32, 20, 0.9);
  --ctrl-label: rgba(42, 32, 20, 0.88);
  --kn-sk1: #f7ecc8;
  --kn-sk2: #d4b56a;
  --kn-sk3: #7a5c30;
  --kn-sheen: 0.24;
  --bezel-1: #f0e4cc;
  --bezel-2: #8a7a60;
  --foot-1: #f6edd8;
  --foot-2: #b8a888;
  --foot-3: #5a4c38;
}
body[data-skin="sand"] {
  --den:
    radial-gradient(ellipse 46% 34% at 20% 0%, rgba(255, 220, 160, 0.24), transparent 60%),
    linear-gradient(180deg, #5a4c38 0%, #1c1812 74%);
}
body[data-skin="sand"] .cabinet::before {
  background:
    repeating-linear-gradient(1deg, #eadcc4 0 22px, #d4c4a4 22px 23px, #e0d0b4 23px 48px, rgba(80, 60, 30, 0.28) 48px 50px),
    radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 0.4px, transparent 0.6px) 0 0 / 7px 7px,
    radial-gradient(ellipse at 0% 30%, rgba(255, 244, 220, 0.3), transparent 42%);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 230, 0.5), inset 0 0 0 3px rgba(70, 54, 32, 0.65), inset 0 0 0 4px rgba(196, 164, 96, 0.4);
}
body[data-skin="sand"] .plinth {
  background-color: #6a5844;
  background-image:
    repeating-linear-gradient(1deg, #7a6850 0 16px, rgba(40, 28, 12, 0.35) 16px 18px),
    linear-gradient(180deg, #8a7460, #5a4838);
}
body[data-skin="sand"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 236, 200, 0.1), transparent 16%, transparent 78%, rgba(0, 0, 0, 0.22));
  box-shadow: inset 0 0 0 2px rgba(212, 184, 120, 0.45), inset 0 0 18px rgba(0, 0, 0, 0.18);
}
body[data-skin="sand"] .face::before,
body[data-skin="sand"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 18%),
    repeating-linear-gradient(0deg, rgba(90, 70, 40, 0.035) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #f7f0e2, #e6d8c0);
}
body[data-skin="sand"] .face {
  box-shadow: inset 0 0 0 1px rgba(90, 70, 40, 0.32), inset 0 0 0 3px rgba(255, 250, 236, 0.45), 0 8px 16px rgba(0, 0, 0, 0.24);
}
body[data-skin="sand"] .label {
  background:
    radial-gradient(circle at 50% 50%, #2a1c10 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f6e8c4, #d4b56a);
  box-shadow: inset 0 0 0 5px #6a5840, inset 0 0 0 6px #f6efe2, inset 0 0 0 8px #6a5840;
}
body[data-skin="sand"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #fff8e8, #e6c888 48%, #6a5428);
  box-shadow: 0 0 10px #e6c888;
}
body[data-skin="sand"] .vfd span { color: #e6c070; text-shadow: 0 0 6px rgba(210, 160, 70, 0.5); }
body[data-skin="sand"] .swatch { background: linear-gradient(135deg, #eadcc4, #6a5844); }
body[data-skin="sand"] .silk { font-size: 0; }
body[data-skin="sand"] .silk::after { content: "Sand · model 2233"; font-size: 11px; }

body[data-skin="olive"] {
  --face: #efe6d0;
  --shell: #3a3c28;
  --label: #242418;
  --label-dim: #4a4c38;
  --brand: #242418;
  --scale: #4a4c38;
  --plate-label: rgba(236, 236, 214, 0.94);
  --ctrl-label: rgba(236, 236, 214, 0.94);
  --kn-sk1: #f4e8c4;
  --kn-sk2: #c4a44a;
  --kn-sk3: #5c4a1c;
  --kn-sheen: 0.22;
  --bezel-1: #e6dcc0;
  --bezel-2: #5a5c40;
  --foot-1: #f0e6cc;
  --foot-2: #6a6c48;
  --foot-3: #1a1c14;
}
body[data-skin="olive"] {
  --den:
    radial-gradient(ellipse 38% 28% at 16% 0%, rgba(220, 190, 90, 0.14), transparent 58%),
    linear-gradient(180deg, #1c1e14 0%, #0c0e0a 74%);
}
body[data-skin="olive"] .cabinet::before {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 0% 28%, rgba(255, 230, 170, 0.1), transparent 40%),
    linear-gradient(180deg, #7a7a50, #4e5038 44%, #2e301e);
  box-shadow: inset 0 0 0 1px rgba(236, 228, 190, 0.35), inset 0 0 0 3px rgba(16, 18, 8, 0.75), inset 0 0 0 4px rgba(180, 150, 60, 0.4);
}
body[data-skin="olive"] .plinth {
  background-color: #1c1e14;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #2a2c1c, #14160e);
}
body[data-skin="olive"] .plinth::before {
  background: linear-gradient(180deg, rgba(230, 210, 140, 0.05), transparent 14%, transparent 80%, rgba(0, 0, 0, 0.36));
  box-shadow: inset 0 0 0 2px rgba(180, 150, 60, 0.4), inset 0 0 22px rgba(0, 0, 0, 0.32);
}
body[data-skin="olive"] .face::before,
body[data-skin="olive"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 252, 236, 0.48), transparent 18%),
    repeating-linear-gradient(0deg, rgba(50, 50, 20, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f6f0dc, #e0d6bc);
}
body[data-skin="olive"] .face {
  box-shadow: inset 0 0 0 1px rgba(50, 50, 20, 0.32), inset 0 0 0 3px rgba(255, 250, 230, 0.38), 0 8px 16px rgba(0, 0, 0, 0.28);
}
body[data-skin="olive"] .label {
  background:
    radial-gradient(circle at 50% 50%, #1a160c 0 7px, transparent 7.5px),
    linear-gradient(160deg, #f0e0a8, #c4a44a);
  box-shadow: inset 0 0 0 5px #3a3c28, inset 0 0 0 6px #f3ecd4, inset 0 0 0 8px #3a3c28;
}
body[data-skin="olive"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #fff8dc, #d4b45a 48%, #5a4818);
  box-shadow: 0 0 10px #d4b45a;
}
body[data-skin="olive"] .vfd span { color: #e0c060; text-shadow: 0 0 6px rgba(200, 160, 50, 0.5); }
body[data-skin="olive"] .swatch { background: linear-gradient(135deg, #7a7a50, #1a1c14); }
body[data-skin="olive"] .silk { font-size: 0; }
body[data-skin="olive"] .silk::after { content: "Olive · model 2233"; font-size: 11px; }

body[data-skin="broadsheet"] {
  --face: #e8e0d0;
  --shell: #b8ae9c;
  --label: #1a1814;
  --label-dim: #4a463c;
  --brand: #1a1814;
  --scale: #4a463c;
  --plate-label: rgba(244, 240, 228, 0.94);
  --ctrl-label: rgba(244, 240, 228, 0.94);
  --kn-sk1: #f6e8c4;
  --kn-sk2: #c9a24a;
  --kn-sk3: #6a4818;
  --kn-sheen: 0.24;
  --bezel-1: #1a1814;
  --bezel-2: #a84840;
  --foot-1: #f0e4c8;
  --foot-2: #8a8070;
  --foot-3: #1a1814;
}
body[data-skin="broadsheet"] {
  --den:
    radial-gradient(ellipse 40% 30% at 14% 0%, rgba(255, 200, 120, 0.16), transparent 58%),
    linear-gradient(180deg, #2a2824 0%, #0e0e0c 74%);
}
body[data-skin="broadsheet"] .cabinet::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(30, 26, 20, 0.16) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(30, 26, 20, 0.1) 46px 47px),
    radial-gradient(ellipse at 0% 24%, rgba(255, 244, 220, 0.28), transparent 40%),
    linear-gradient(180deg, #efe6d6, #d4cbb8 50%, #c4baa8);
  box-shadow: inset 0 0 0 1px rgba(20, 16, 12, 0.75), inset 0 0 0 3px rgba(168, 56, 48, 0.7), inset 0 0 0 4px rgba(20, 16, 12, 0.85);
}
body[data-skin="broadsheet"] .plinth {
  background-color: #12110f;
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(255, 200, 120, 0.08), transparent 30%),
    linear-gradient(180deg, #1c1a16, #0c0c0a);
}
body[data-skin="broadsheet"] .plinth::before {
  background: linear-gradient(180deg, rgba(255, 220, 160, 0.04), transparent 12%, transparent 80%, rgba(0, 0, 0, 0.42));
  box-shadow: inset 0 0 0 2px rgba(168, 56, 48, 0.45), inset 0 0 24px rgba(0, 0, 0, 0.4);
}
body[data-skin="broadsheet"] .face::before,
body[data-skin="broadsheet"] .drops::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 16%),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(30, 26, 20, 0.1) 7px 8px),
    linear-gradient(180deg, #f2ece0, #ddd4c4);
}
body[data-skin="broadsheet"] .face {
  box-shadow: inset 0 0 0 1px rgba(20, 16, 12, 0.4), inset 0 0 0 3px rgba(255, 250, 240, 0.4), 0 8px 16px rgba(0, 0, 0, 0.28);
}
body[data-skin="broadsheet"] .label {
  background:
    radial-gradient(circle at 50% 50%, #f6f1e6 0 16px, transparent 16.5px),
    linear-gradient(160deg, #f7f2e6, #e6dcc8);
  box-shadow: inset 0 0 0 5px #a84840, inset 0 0 0 6px #f4efe4, inset 0 0 0 8px #a84840;
  color: #1a1814;
}
body[data-skin="broadsheet"].is-on .power-jewel {
  background: radial-gradient(circle at 35% 30%, #fff1d4, #e6b040 48%, #6a3810);
  box-shadow: 0 0 10px #e6b040;
}
body[data-skin="broadsheet"] .vfd span { color: #ffb03a; text-shadow: 0 0 7px rgba(255, 160, 40, 0.65); }
body[data-skin="broadsheet"] .swatch { background: linear-gradient(135deg, #efe6d6, #a84840 55%, #12110f); }
body[data-skin="broadsheet"] .silk { font-size: 0; }
body[data-skin="broadsheet"] .silk::after { content: "Broadsheet · model 2233"; font-size: 11px; }



/* Swing: the number rides on the key like a stamped value. Lit once it leaves straight. */
.seq .sk-swing { font-variant-numeric: tabular-nums; cursor: ns-resize; }
.seq .sk-swing .swing-read {
  font-style: normal;
  font-weight: 800;
  margin-left: 2px;
  opacity: 0.62;
}
.seq .sk-swing.on .swing-read { opacity: 1; }
body[data-skin="mpc"] .seq-tempo .sk-swing,
body[data-skin="sp404"] .seq-tempo .sk-swing { white-space: nowrap; }
body[data-skin="sp404"] .seq-tempo .sk-wide { font-size: 9px; letter-spacing: 0.03em; }

/* Your own stickers (LOAD → Sticker). Same Slaps layer rules as the house ones: hidden on a stock
   machine and off the turntables. Images only. */
body[data-skin="mpc"] .stickers-mine-mpc,
body[data-skin="sp404"] .stickers-mine-sp404 { display: block; z-index: 6; }
.stk.stk-mine { height: auto; max-height: 72px; object-fit: contain; }

/* A bag's faceplate worn on the sampler: the plate's colours wash the case. Hue only
   (mix-blend-mode: color), under the controls, so the print and the grain stay. */
.plate-wash { display: none; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; mix-blend-mode: color; opacity: 0.78; }
body.wash-mpc[data-skin="mpc"] .plate-wash,
body.wash-sp404[data-skin="sp404"] .plate-wash { display: block; }
body.wash-mpc[data-skin="mpc"] .cabinet > .plate-wash { background: var(--wash-mpc-shell); }
body.wash-mpc[data-skin="mpc"] .plinth > .plate-wash,
body.wash-mpc[data-skin="mpc"] .face > .plate-wash { background: var(--wash-mpc-face); }
body.wash-sp404[data-skin="sp404"] .cabinet > .plate-wash { background: var(--wash-sp404-shell); }
body.wash-sp404[data-skin="sp404"] .plinth > .plate-wash,
body.wash-sp404[data-skin="sp404"] .face > .plate-wash { background: var(--wash-sp404-face); }

/* Touch screens: small machine buttons get a hit area at least 32 px tall on the glass.
   --fit is the zoom the layout put on the room, so the area grows as the machine shrinks. */
@media (pointer: coarse) {
  .kit-load, .kit-save, .kit-keys button, .kit-page, .pst-io-btn, .pst-step { position: relative; }
  /* the LCD roll sits over the line LOAD and SAVE live on; keep their hit area on top */
  .seq-lcd .seq-line:has(.kit-load) { z-index: 1; }
  .kit-load, .kit-save { z-index: 4; }
  .kit-load::after, .kit-save::after, .kit-keys button::after, .kit-page::after, .pst-io-btn::after, .pst-step::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    top: 50%;
    height: max(100%, calc(32px / var(--fit, 1)));
    transform: translateY(-50%);
  }
}
.io-actions button[hidden],
.io-booth[hidden],
.pst-slip-row button[hidden] { display: none !important; }
#load-slip { max-height: calc(100vh - 16px); overflow-y: auto; }
.io-keep { margin: 4px 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.08); }
.io-keep .bars-note { margin: 0; opacity: 0.9; }
.io-keep-pay { margin-top: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; color: #fff; background: #b83a2a; }

/* Web drums boot: a pad loader covers the page until the machine has painted (webBoot.js).
   Hidden everywhere else, including the extension and the desktop app. */
.web-loader { display: none; }
html.web-boot .web-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: radial-gradient(120% 90% at 50% 30%, #1b1c20 0%, #0b0b0d 70%);
  transition: opacity 0.3s ease;
}
html.web-boot.web-lift .web-loader { opacity: 0; pointer-events: none; }
.web-loader-pads {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #d9d6cf, #b9b5ac);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 18px 40px rgba(0, 0, 0, 0.55);
}
.web-loader-pads i {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(180deg, #8f8c86, #6f6c66);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: web-pad 1.6s steps(1, end) infinite;
}
/* Light the pads in step order, one sixteenth at a time, like a pattern running. */
.web-loader-pads i:nth-child(1) { animation-delay: 0s; }
.web-loader-pads i:nth-child(2) { animation-delay: 0.1s; }
.web-loader-pads i:nth-child(3) { animation-delay: 0.2s; }
.web-loader-pads i:nth-child(4) { animation-delay: 0.3s; }
.web-loader-pads i:nth-child(5) { animation-delay: 0.4s; }
.web-loader-pads i:nth-child(6) { animation-delay: 0.5s; }
.web-loader-pads i:nth-child(7) { animation-delay: 0.6s; }
.web-loader-pads i:nth-child(8) { animation-delay: 0.7s; }
.web-loader-pads i:nth-child(9) { animation-delay: 0.8s; }
.web-loader-pads i:nth-child(10) { animation-delay: 0.9s; }
.web-loader-pads i:nth-child(11) { animation-delay: 1s; }
.web-loader-pads i:nth-child(12) { animation-delay: 1.1s; }
.web-loader-pads i:nth-child(13) { animation-delay: 1.2s; }
.web-loader-pads i:nth-child(14) { animation-delay: 1.3s; }
.web-loader-pads i:nth-child(15) { animation-delay: 1.4s; }
.web-loader-pads i:nth-child(16) { animation-delay: 1.5s; }
@keyframes web-pad {
  0% { background: linear-gradient(180deg, #ffb35c, #f07a1f); box-shadow: 0 0 14px rgba(255, 150, 60, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
  6.25%, 100% { background: linear-gradient(180deg, #8f8c86, #6f6c66); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
}
.web-loader-word {
  margin: 0;
  font: 600 12px/1 "Courier New", ui-monospace, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ffb35c;
  text-shadow: 0 0 10px rgba(255, 150, 60, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .web-loader-pads i { animation: none; }
  .web-loader-pads i:nth-child(1), .web-loader-pads i:nth-child(6), .web-loader-pads i:nth-child(11), .web-loader-pads i:nth-child(16) { background: linear-gradient(180deg, #ffb35c, #f07a1f); }
  html.web-boot .web-loader { transition: none; }
}