@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap");
.c3m-app {
  --c3m-amber:#ff9b2f; --c3m-brass:#b87935; --c3m-light:#f0c47c;
  --c3m-cream:#f5dba8; --c3m-ink:#1b0d07; --c3m-wood:#261209;
  width:min(100%,1740px); margin-inline:auto; padding:16px clamp(7px,1.5vw,26px) 34px;
  color:var(--c3m-cream);
  background:radial-gradient(ellipse at 50% 4%,rgba(218,120,38,.13),transparent 36rem);
  font-family:"Oswald","Arial Narrow",Arial,sans-serif; line-height:1.35;
}
.c3m-app *,.c3m-app *::before,.c3m-app *::after { box-sizing:border-box; }
.c3m-app button,.c3m-app input,.c3m-app select { font:inherit; }
.c3m-app button,.c3m-app a,.c3m-app input,.c3m-app select { outline-offset:3px; }
.c3m-app button:focus-visible,.c3m-app a:focus-visible,.c3m-app input:focus-visible,.c3m-app select:focus-visible {
  outline:3px solid #ffe093; outline-offset:2px;
}
.c3m-app button { -webkit-tap-highlight-color:transparent; }
.c3m-app svg { width:1.25em; height:1.25em; }
.c3m-app [hidden] { display:none!important; }
.c3m-sr-only {
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
  white-space:nowrap!important; border:0!important;
}

.c3m-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  width:min(100%,1510px); margin:0 auto 11px; padding-inline:3px;
}
.c3m-brand { display:inline-flex; align-items:center; gap:11px; }
.c3m-brand>span:last-child,.c3m-brand strong,.c3m-brand small { display:block; }
.c3m-brand-mark {
  display:grid; width:46px; height:46px; place-items:center; border:1px solid #e1a65a;
  border-radius:50%; color:#ffecc3;
  background:radial-gradient(circle at 36% 28%,#f0c477,#8a4c20 48%,#2a1107 70%);
  box-shadow:inset 0 0 0 4px #211006,0 0 18px rgba(255,142,34,.18);
  font-size:14px; font-weight:900; letter-spacing:.08em;
}
.c3m-brand strong { color:#ffe1a6; font-size:clamp(20px,2vw,27px); letter-spacing:.03em; text-shadow:0 2px 8px #000; }
.c3m-brand small { margin-top:1px; color:#a88e6b; font-size:11px; letter-spacing:.11em; text-transform:uppercase; }
.c3m-status { display:inline-flex; align-items:center; gap:8px; color:#c4aa80; font-size:12px; letter-spacing:.05em; }
.c3m-status>span { width:8px; height:8px; border-radius:50%; background:#f3a343; box-shadow:0 0 13px #ff7b16; }

.c3m-machine { position:relative; isolation:isolate; width:min(100%,1672px); margin-inline:auto; }
.c3m-reference-stage {
  position:relative; width:100%; aspect-ratio:1672/941; container-name:c3m-stage;
  container-type:inline-size; isolation:isolate; overflow:hidden;
  filter:drop-shadow(0 28px 35px rgba(0,0,0,.68));
}
.c3m-shell-image {
  position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%;
  object-fit:fill; pointer-events:none; user-select:none; -webkit-user-drag:none;
  filter:saturate(1.06) contrast(1.025) brightness(.96);
  -webkit-mask:none; mask:none;
  clip-path:polygon(24.1029% 2.1254%,21.89% 2.6567%,20.6938% 3.1881%,19.0789% 4.2508%,17.8828% 5.3135%,
    16.9258% 6.3762%,15.7297% 7.9702%,14.7727% 9.5643%,13.6962% 11.6897%,12.8589% 13.8151%,
    12.201% 15.9405%,11.6029% 18.5972%,11.1842% 21.254%,10.945% 23.9107%,8.1938% 25.5048%,
    7.9545% 26.5675%,7.6555% 28.1615%,7.7153% 30.2869%,7.7153% 32.4123%,7.7153% 35.0691%,
    7.7153% 38.2572%,7.7153% 42.508%,7.5957% 46.7588%,6.6986% 48.8842%,6.4593% 50.4782%,
    6.3995% 52.0723%,6.2799% 54.1977%,6.1005% 58.4485%,5.8014% 63.762%,5.5622% 69.0755%,
    5.2632% 74.3889%,4.9641% 79.7024%,4.8445% 85.0159%,4.8445% 90.3294%,4.8445% 93.5175%,
    4.9043% 95.6429%,5.0837% 96.1743%,94.4378% 96.1743%,94.6172% 95.6429%,94.677% 93.5175%,
    94.677% 90.3294%,94.7368% 85.0159%,94.6172% 79.7024%,94.378% 74.3889%,94.1388% 69.0755%,
    93.8995% 63.762%,93.6603% 58.4485%,93.4809% 54.1977%,93.4211% 52.0723%,93.3612% 50.4782%,
    93.122% 48.8842%,92.2847% 46.7588%,92.2249% 42.508%,92.2249% 38.2572%,92.2249% 35.0691%,
    92.2249% 32.4123%,92.2249% 30.2869%,92.2249% 28.1615%,91.9856% 26.5675%,91.6866% 25.5048%,
    88.9354% 23.9107%,88.6962% 21.254%,88.2775% 18.5972%,87.6794% 15.9405%,87.0215% 13.8151%,
    86.1842% 11.6897%,85.1077% 9.5643%,84.1507% 7.9702%,82.9545% 6.3762%,81.9976% 5.3135%,
    80.8612% 4.2508%,79.3062% 3.1881%,78.1699% 2.6567%,76.256% 2.1254%);
}
.c3m-shell-mirror {
  z-index:2; overflow:hidden; pointer-events:none;
  clip-path:inset(28.5866% 12.1411% 51.2221% 65.9091%);
}
.c3m-shell-mirror>img {
  display:block; width:100%; height:100%; max-width:none; object-fit:fill;
  filter:saturate(1.06) contrast(1.025) brightness(.96);
  transform:scaleX(-1); user-select:none; -webkit-user-drag:none;
}
.c3m-gauge-overlay { z-index:4; pointer-events:none; }
.c3m-gauge-face {
  position:absolute; inset:14%; overflow:hidden; border-radius:50%;
  background:#cb9a52 url('./gauge-patina.png') center/cover;
  box-shadow:inset 0 0 .45cqw #4c260a;
}
.c3m-gauge-face svg { position:absolute; inset:0; width:100%; height:100%; }
.c3m-gauge-queue .c3m-gauge-face { inset:12.5%; }
.c3m-gauge-face line { stroke:#382010; stroke-width:1.25; }
.c3m-gauge-face text { fill:#382010; font:700 7px Georgia,serif; text-anchor:middle; }
.c3m-gauge-face .c3m-gauge-unit { font-size:7px; letter-spacing:.5px; }
.c3m-gauge-needle {
  --gauge-angle:-120deg;
  transform:rotate(var(--gauge-angle));
  transform-box:view-box; transform-origin:50px 50px;
  transition:transform 220ms ease;
}
.c3m-gauge-needle path { fill:#492011; }
.c3m-gauge-hub { fill:#a17236; stroke:#5b391c; stroke-width:1; }
.c3m-gauge-caption {
  z-index:5; display:flex; align-items:center; justify-content:center; gap:clamp(4px,.4cqw,7px);
  overflow:hidden; padding:0 clamp(7px,.55cqw,10px); border:1px solid #634621; border-radius:2px;
  clip-path:polygon(5% 0,95% 0,100% 25%,100% 75%,95% 100%,5% 100%,0 75%,0 25%);
  color:#f1d4a2;
  /* Flat weathered metal from the original chassis, without the reference plate's raised seam. */
  background:#d8c6b1 url('./rockola.png') 10.37% 36.88% / 1857.78% auto;
  background-blend-mode:multiply;
  box-shadow:inset 0 0 .22cqw rgba(24,13,6,.55);
  font-size:clamp(9px,.7cqw,12px); line-height:1; text-shadow:0 1px 1px #211307;
}
.c3m-gauge-caption span { font-weight:700; letter-spacing:.045em; }
.c3m-gauge-caption strong { min-width:2.5em; color:#ffe6ba; font-size:1em; text-align:right; }
.c3m-layer {
  position:absolute; z-index:2; left:var(--left,0); top:var(--top,0);
  width:var(--width,auto); height:var(--height,auto);
}

/* Pantalla superior dentro del área útil marcada, sin tocar el aro del disco. */
.c3m-dome-screen {
  left:40.13158%; top:7.54516%; width:19.67703%; height:18.27843%; z-index:6;
  display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden;
  padding-top:clamp(19px,2.1cqw,36px); border:0; color:#f3d7a4;
  clip-path:ellipse(50% 100% at 50% 100%);
  background:linear-gradient(rgba(255,167,69,.035) 1px,transparent 1px) 0 0/100% 4px,
    radial-gradient(circle at 50% 25%,#241308,#0b0603 69%,#030201);
  box-shadow:inset 0 0 0 clamp(1px,.22cqw,4px) rgba(20,9,4,.94),inset 0 0 2.2cqw rgba(255,111,20,.14);
  isolation:isolate;
}
.c3m-dome-screen::after {
  position:absolute; z-index:9; inset:0; border-radius:inherit;
  background:linear-gradient(112deg,rgba(255,255,255,.12),transparent 19% 72%,rgba(255,172,76,.04));
  pointer-events:none; content:"";
}
.c3m-dome-screen>header {
  position:absolute; z-index:10; top:clamp(21px,2.15cqw,37px); right:18%; left:18%;
  display:flex; min-width:0; min-height:clamp(17px,1.55cqw,26px);
  align-items:center; justify-content:flex-end; gap:.35cqw;
  margin:0; padding:clamp(3px,.35cqw,6px) clamp(4px,.4cqw,7px) 2px;
  border:0; color:#d59548;
  font-size:clamp(6px,.46cqw,9px); font-weight:800; letter-spacing:.12em; white-space:nowrap;
}
.c3m-dome-screen>header button {
  flex:0 0 auto; margin:0; padding:2px; border:0; color:#f0bd72;
  background:transparent; font-size:inherit; line-height:1; cursor:pointer;
}
.c3m-art-surface {
  overflow:hidden;
  background:
    repeating-radial-gradient(circle at center,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 50% 50%,#d28b3d 0 6%,#5f2616 6.5% 17%,#111 18% 44%,#030303 45% 100%);
}
.c3m-art-surface>img {
  position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}
.c3m-dome-art {
  position:absolute; z-index:0; inset:0; pointer-events:none;
  transition:opacity 160ms ease;
}
.c3m-dome-art::after {
  position:absolute; z-index:2; inset:0;
  background:
    linear-gradient(to bottom,rgba(4,2,1,.62),rgba(4,2,1,.07) 37%,rgba(4,2,1,.42) 61%,rgba(4,2,1,.94)),
    linear-gradient(to right,rgba(2,1,1,.42),transparent 28% 72%,rgba(2,1,1,.42));
  content:"";
}
.c3m-dome-screen>header,.c3m-screen-body,.c3m-transport { position:relative; z-index:10; }
.c3m-dome-screen>header { background:transparent; }
.c3m-dome-screen.is-queue .c3m-dome-art { opacity:0; }
.c3m-dome-screen.is-queue .c3m-screen-body {
  padding-top:clamp(11px,.9cqw,16px); background:radial-gradient(circle at 50% 20%,#241308,#090503 72%);
}
.c3m-screen-body { min-width:0; min-height:0; overflow:hidden; }
.c3m-now-playing {
  display:flex; height:100%; align-items:flex-end;
  padding:clamp(4px,.42cqw,7px) clamp(7px,.68cqw,12px);
}
.c3m-track-copy { min-width:0; width:100%; text-shadow:0 1px 2px #000,0 2px 7px rgba(0,0,0,.95); }
.c3m-eyebrow {
  display:block; overflow:hidden; color:#d8913e; font-size:clamp(5px,.38cqw,8px);
  font-weight:800; letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap;
}
.c3m-track-copy h1 {
  display:-webkit-box; overflow:hidden; margin:3px 0 2px; color:#ffe0a0;
  font-size:clamp(10px,.88cqw,16px); line-height:1.02; text-shadow:0 1px 4px #000;
  -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.c3m-track-copy p {
  overflow:hidden; margin:0; color:#f0d2a0; font-size:clamp(7px,.5cqw,10px);
  text-overflow:ellipsis; white-space:nowrap;
}
.c3m-upper-screen {
  z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  box-sizing:border-box;
  gap:2%; overflow:hidden; padding:clamp(5px,.48cqw,8px) clamp(6px,.55cqw,10px) clamp(6px,.6cqw,11px); color:#f2c777;
  background:linear-gradient(rgba(255,155,47,.05) 1px,transparent 1px) 0 0/100% 4px,
    radial-gradient(ellipse at 50% 70%,rgba(126,58,19,.38),rgba(8,5,3,.96) 70%);
  box-shadow:inset 0 0 1.1cqw #000,inset 0 0 0 max(1px,.1cqw) rgba(184,119,52,.58);
  isolation:isolate; text-align:center; text-shadow:0 1px 4px #000;
}
.c3m-screen-masks { position:absolute; pointer-events:none; }
/* Both curved edges follow the glass, including the concave edge beside the dome. */
.c3m-upper-left,.c3m-upper-right { min-width:0; border-radius:0; padding-inline:.7cqw; padding-bottom:.6cqw; box-shadow:none; }
.c3m-upper-left { padding-right:1.35cqw; }
.c3m-upper-right { padding-left:1.35cqw; }
.c3m-upper-art {
  position:absolute; z-index:0; inset:0;
  background:linear-gradient(rgba(255,155,47,.055) 1px,transparent 1px) 0 0/100% 4px,
    radial-gradient(ellipse at 50% 70%,rgba(126,58,19,.42),rgba(8,5,3,.97) 72%);
}
.c3m-upper-art>img {
  inset:auto;
  top:12%;
  width:48%;
  height:52%;
  object-fit:contain;
  object-position:50% 50%;
  background:transparent;
}
.c3m-upper-left .c3m-upper-art>img { right:9%; left:auto; }
.c3m-upper-right .c3m-upper-art>img { right:auto; left:9%; }
.c3m-upper-art::after {
  position:absolute; z-index:2; inset:0;
  background:linear-gradient(112deg,rgba(255,255,255,.14),transparent 22% 68%,rgba(255,154,58,.08)),
    linear-gradient(to bottom,rgba(2,1,1,.12),rgba(2,1,1,.78));
  content:"";
}
.c3m-upper-screen>span:not(.c3m-upper-art),.c3m-upper-screen>strong { position:relative; z-index:3; max-width:92%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c3m-upper-screen>span:not(.c3m-upper-art) { color:#d58e40; font-size:clamp(5px,.38cqw,8px); font-weight:800; letter-spacing:.1em; }
.c3m-upper-screen>strong { color:#ffe0a0; font-size:clamp(7px,.56cqw,11px); line-height:1.05; }
.c3m-credits { display:flex; overflow:hidden; gap:.42cqw; margin-top:3px; font-size:clamp(5px,.36cqw,7px); white-space:nowrap; }
.c3m-credits span,.c3m-credits a { color:#d8b477; }
.c3m-transport {
  display:grid;
  grid-template-columns:minmax(18px,1.3cqw) auto minmax(24px,1fr) auto minmax(18px,1.3cqw);
  align-items:center; gap:clamp(2px,.25cqw,5px); min-height:clamp(22px,1.85cqw,33px);
  padding:2px clamp(5px,.52cqw,9px) clamp(3px,.32cqw,6px);
  border-top:1px solid rgba(91,54,25,.72); color:#af956d; background:rgba(5,3,2,.74);
  backdrop-filter:blur(2px); font-size:clamp(6px,.38cqw,8px);
}
.c3m-transport button {
  display:grid; width:clamp(18px,1.35cqw,24px); aspect-ratio:1; place-items:center; padding:0;
  border:1px solid #9d672f; border-radius:4px; color:#160b06;
  background:linear-gradient(#e4a24e,#9a5220); box-shadow:inset 0 1px rgba(255,235,184,.36),0 1px 3px #000; cursor:pointer;
}
.c3m-transport button:last-child { color:#e2bf87; background:#25140c; }
.c3m-transport button:disabled { cursor:default; opacity:.42; }
.c3m-transport button svg { width:62%; height:62%; }
.c3m-transport input { min-width:0; width:100%; height:12px; accent-color:var(--c3m-amber); }
.c3m-screen-empty {
  display:flex; height:100%; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:5px; color:#917a5a; font-size:clamp(5px,.4cqw,8px); text-align:center;
}
.c3m-screen-empty svg { color:#b97834; }
.c3m-screen-empty strong { color:#debd83; font-size:clamp(7px,.53cqw,10px); }
.c3m-queue-list { display:grid; align-content:center; gap:1px; height:100%; margin:0; padding:3px 7px; list-style:none; }
.c3m-queue-list li {
  display:grid; grid-template-columns:14px minmax(0,1fr) 17px; align-items:center; gap:3px;
  min-height:clamp(15px,1.22cqw,21px); border-bottom:1px solid rgba(145,89,41,.25);
  color:#d2954a; font-size:clamp(5px,.36cqw,7px);
}
.c3m-queue-list li div,.c3m-queue-list li strong,.c3m-queue-list li small { min-width:0; }
.c3m-queue-list li strong,.c3m-queue-list li small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c3m-queue-list li strong { color:#efd098; font-size:inherit; }
.c3m-queue-list li small { color:#947a58; font-size:inherit; }
.c3m-queue-list li button { border:0; background:transparent; cursor:pointer; }
.c3m-queue-list li .c3m-queue-play { display:block; min-width:0; width:auto; height:auto; padding:1px 2px; overflow:hidden; color:inherit; text-align:left; }
.c3m-queue-list li>button:last-child { display:grid; width:17px; height:17px; place-items:center; padding:0; color:#b58b59; }
.c3m-queue-list li svg { width:10px; }

/* El disco y el brazo visibles son los originales de la imagen. */
.c3m-disc {
  left:43.36124%; top:27.73645%; width:12.55981%; height:22.31668%; z-index:5;
  display:grid; place-items:center; overflow:hidden; padding:0; border:0; border-radius:50%;
  color:#2a1308; background:transparent; cursor:pointer;
}
.c3m-disc::before {
  position:absolute; z-index:0; inset:13%; border-radius:50%;
  background:radial-gradient(circle,transparent 0 18%,rgba(2,2,2,.38) 19% 100%),
    repeating-radial-gradient(circle,transparent 0 3px,rgba(0,0,0,.2) 4px 5px);
  mix-blend-mode:multiply; content:""; pointer-events:none;
}
.c3m-disc-glint {
  position:absolute; z-index:1; inset:13%; border-radius:50%; opacity:0;
  background:conic-gradient(from 25deg,transparent 0 19%,rgba(255,224,169,.12) 25%,transparent 31% 66%,rgba(255,181,91,.08) 72%,transparent 78%);
  pointer-events:none; transition:opacity 180ms ease;
}
.c3m-machine.is-playing .c3m-disc-glint { opacity:.5; animation:c3m-spin 4.2s linear infinite; }
@keyframes c3m-spin { to { transform:rotate(360deg); } }

/* La foto aporta el vidrio; estas capas aportan el filamento animado. */
.c3m-tube {
  z-index:3; overflow:visible; border-radius:45% 45% 20% 20%;
  background:linear-gradient(90deg,transparent 0 27%,rgba(255,147,43,.13) 45% 58%,transparent 76%),
    radial-gradient(ellipse at 50% 52%,rgba(255,87,10,.34),transparent 58%);
  pointer-events:none;
}
.c3m-tube::before,.c3m-tube::after {
  position:absolute; right:24%; left:24%; height:3.2%; border-radius:999px;
  background:#ffb35b; box-shadow:0 0 .45cqw #ff6511,0 0 .85cqw rgba(255,94,13,.64);
  content:""; opacity:.72;
}
.c3m-tube::before { top:29%; }
.c3m-tube::after { bottom:31%; }
.c3m-tube i { position:absolute; inset:18% 35%; border-inline:1px solid rgba(255,190,110,.44); }
.c3m-machine.is-playing .c3m-tube { animation:c3m-tube-glow 2.15s ease-in-out infinite var(--delay,0s); }
@keyframes c3m-tube-glow { 50% { filter:brightness(1.75); opacity:.9; } }

.c3m-mini-screen {
  z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3%;
  overflow:hidden; border:1px solid rgba(157,101,46,.54); border-radius:10%; color:#edb863;
  background:linear-gradient(rgba(255,155,47,.06) 1px,transparent 1px) 0 0/100% 4px,
    radial-gradient(circle,rgba(126,58,19,.36),rgba(8,5,3,.96) 68%);
  box-shadow:inset 0 0 1cqw #000,0 0 .55cqw rgba(255,116,29,.12);
  text-align:center; text-shadow:0 0 .4cqw rgba(255,126,39,.72); isolation:isolate;
}
.c3m-mini-art { position:absolute; z-index:0; inset:0; }
.c3m-mini-art::after { position:absolute; z-index:2; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.06),rgba(0,0,0,.46)); content:""; }
.c3m-mini-screen strong,.c3m-mini-screen small { position:relative; z-index:3; transition:opacity 120ms ease; }
.c3m-mini-screen strong { display:block; width:92%; overflow:hidden; font-size:clamp(6px,.5cqw,10px); letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; }
.c3m-mini-screen small { color:#a67b4b; font-size:clamp(5px,.36cqw,7px); }
.c3m-mini-art.has-artwork~strong,.c3m-mini-art.has-artwork~small { opacity:0; }
.c3m-mini-left { left:34.3900%; top:30.9245%; width:6.57895%; height:11.90223%; }
.c3m-mini-right { left:59.0311%; top:30.9245%; width:6.57895%; height:11.90223%; }

.c3m-control-console {
  z-index:7; overflow:hidden; border:max(1px,.09cqw) solid #7d4a24; border-radius:max(5px,.48cqw);
  background:
    radial-gradient(circle at 12% 8%,#9b6332 0 max(1px,.12cqw),transparent max(2px,.19cqw)),
    radial-gradient(circle at 88% 8%,#9b6332 0 max(1px,.12cqw),transparent max(2px,.19cqw)),
    radial-gradient(circle at 12% 92%,#9b6332 0 max(1px,.12cqw),transparent max(2px,.19cqw)),
    radial-gradient(circle at 88% 92%,#9b6332 0 max(1px,.12cqw),transparent max(2px,.19cqw)),
    repeating-linear-gradient(94deg,rgba(255,255,255,.018) 0 1px,transparent 1px 28px),
    linear-gradient(145deg,#5b321b,#241108 52%,#100704);
  box-shadow:inset 0 0 0 max(2px,.2cqw) #160905,inset 0 0 max(9px,.85cqw) #000,0 max(1px,.1cqw) max(4px,.35cqw) #000;
  pointer-events:none;
}

.c3m-knob-control,.c3m-lever-control { z-index:8; display:flex; align-items:center; justify-content:center; }
.c3m-knob-control>.c3m-control-name,.c3m-knob-control>strong,
.c3m-lever-control>span,.c3m-lever-control>small {
  position:absolute; width:max-content; max-width:8cqw; overflow:hidden; color:#efc27d;
  font-size:clamp(7px,.54cqw,10px); font-weight:800; letter-spacing:.06em;
  text-overflow:ellipsis; text-shadow:0 1px 2px #000; text-transform:uppercase; white-space:nowrap;
}
.c3m-knob-control>.c3m-control-name { bottom:101%; }
.c3m-knob-control>strong { top:101%; color:#ffe0a0; font-size:clamp(6px,.46cqw,9px); }
.c3m-action-control { flex-direction:column; justify-content:space-between; gap:.12cqw; }
.c3m-action-control>.c3m-control-name,.c3m-action-control>strong {
  position:static; width:100%; max-width:none; flex-shrink:0; text-align:center;
  font-size:clamp(12px,.9cqw,16px); line-height:1.1; letter-spacing:.025em;
}
.c3m-action-control>strong { color:#c8a879; font-size:clamp(11px,.8cqw,14px); text-transform:none; font-weight:500; }
.c3m-action-control .c3m-knob { width:3.58cqw; height:3.58cqw; flex:0 0 3.58cqw; cursor:pointer; }
.c3m-knob-reset .c3m-knob { width:3.23cqw; height:3.23cqw; flex-basis:3.23cqw; }
.c3m-action-control .c3m-knob:active:not(:disabled) { transform:translateY(1px); }
.c3m-knob {
  position:relative; display:grid; width:100%; height:100%; place-items:center;
  padding:0; border:0; border-radius:50%; background:transparent; cursor:grab; touch-action:none;
}
.c3m-knob:active { cursor:grabbing; }
.c3m-knob-control.is-unavailable { opacity:.5; }
.c3m-knob-control.is-unavailable .c3m-knob { cursor:not-allowed; }
.c3m-knob-range {
  position:absolute; z-index:4; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ns-resize; -webkit-appearance:none; appearance:none;
}
.c3m-knob-face {
  position:absolute; inset:0; overflow:hidden; border:0; border-radius:50%; isolation:isolate;
  background:transparent;
  box-shadow:0 .1cqw .16cqw #090401;
}
.c3m-knob-texture {
  position:absolute; z-index:1;
  top:var(--texture-top); left:var(--texture-left);
  width:var(--texture-width); height:auto; max-width:none;
  filter:saturate(1.06) contrast(1.025) brightness(.96);
  opacity:1;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}
.c3m-knob-indicator {
  position:absolute; z-index:3; inset:1%; border-radius:50%;
  transform:rotate(var(--angle)); transform-origin:50% 50%; transition:transform 170ms ease;
  pointer-events:none;
}
.c3m-knob-indicator::before {
  position:absolute; top:1%; left:50%; width:max(2px,4%); height:8%; border-radius:1px;
  background:#e3c48c;
  content:""; transform:translateX(-50%);
}
.c3m-knob-face::after {
  position:absolute; z-index:4; inset:0; border-radius:50%;
  box-shadow:inset 0 0 max(1px,.06cqw) #120803; content:""; pointer-events:none;
}
.c3m-knob:focus-visible,.c3m-knob:has(input:focus-visible) { outline:max(2px,.16cqw) solid #ffe093; outline-offset:max(1px,.12cqw); }
.c3m-lever-control { z-index:9; }
.c3m-lever-control>span { top:0; right:0; left:0; width:100%; max-width:none; text-align:center; }
.c3m-lever-control>span { font-size:clamp(10px,.76cqw,13px); letter-spacing:.015em; line-height:1; }
.c3m-lever-control>small { width:100%; max-width:none; left:0; color:#d2aa70; font-size:clamp(10px,.7cqw,12px); line-height:1; letter-spacing:0; text-align:center; }
.c3m-lever-control>.c3m-lever-up { top:22%; }
.c3m-lever-control>.c3m-lever-down { top:85%; }
.c3m-lever {
  position:absolute; top:39%; width:36%; height:41%; padding:0; border:0; border-radius:45%;
  background:transparent; box-shadow:none; cursor:pointer;
}
.c3m-lever-mode>.c3m-lever,.c3m-lever-panel>.c3m-lever { left:32%; right:auto; }
.c3m-lever::before {
  position:absolute; inset:0 32%; border-radius:45%;
  background:radial-gradient(ellipse,rgba(61,37,20,.96),rgba(18,9,5,.98) 74%);
  box-shadow:inset 0 0 .48cqw #000; content:"";
}
.c3m-lever-ball {
  position:absolute; top:72%; left:50%; width:54%; height:auto; aspect-ratio:1; border-radius:50%;
  background:#72502e url('./control-metal-right.jpg') 23% 38% / 1120% auto;
  box-shadow:inset 0 0 0 max(1px,.08cqw) rgba(255,224,157,.18),0 .12cqw .22cqw #000;
  transform:translate(-50%,-50%); transition:top 190ms cubic-bezier(.2,.8,.2,1);
}
.c3m-lever.is-on .c3m-lever-ball,.c3m-lever[aria-checked="true"] .c3m-lever-ball { top:28%; transform:translate(-50%,-50%); }

/* Cuatro columnas anchas por seis filas: 24 selecciones legibles. */
.c3m-matrix {
  position:absolute; z-index:9; left:17.584%; top:52.497%; width:63.278%; height:24.655%;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(5px,.55cqw,10px);
  box-sizing:border-box; overflow:hidden; padding:clamp(6px,.55cqw,10px);
  border:max(1px,.1cqw) solid #865127; border-radius:max(4px,.36cqw);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 52px),
    radial-gradient(ellipse at 50% 0,rgba(187,103,39,.16),transparent 58%),
    linear-gradient(180deg,#3a1e0f,#160a05);
  box-shadow:inset 0 0 0 max(2px,.18cqw) #0b0503,inset 0 0 max(10px,1.1cqw) #000,0 max(1px,.1cqw) max(4px,.35cqw) #000;
  pointer-events:auto;
}
.c3m-matrix-column {
  display:grid; min-width:0; min-height:0; grid-template-rows:repeat(6,minmax(0,1fr));
  gap:clamp(2px,.24cqw,4px); padding:clamp(3px,.26cqw,5px);
  border:1px solid rgba(153,91,41,.72); border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 34% 67%,rgba(0,0,0,.14)),#201006;
  box-shadow:inset 0 0 .6cqw rgba(0,0,0,.9);
}
.c3m-track {
  position:relative; display:grid; min-width:0; min-height:0;
  grid-template-columns:clamp(25px,2.05cqw,34px) minmax(0,1fr); gap:clamp(3px,.3cqw,5px);
  align-items:stretch; margin:0; border:0; border-radius:2px; background:transparent;
}
.c3m-track-number,.c3m-track-choice { min-width:0; height:100%; margin:0; cursor:pointer; }
.c3m-track-number {
  display:grid; place-items:center; padding:0; border:max(1px,.06cqw) solid #42220d; border-radius:8%;
  color:#f1d49c; background:linear-gradient(145deg,#8f5527,#2b1207 63%);
  box-shadow:inset 0 0 0 .08cqw rgba(220,158,79,.46),0 .08cqw .16cqw #000;
  font-size:clamp(8px,.58cqw,11px); font-weight:900; line-height:1;
}
.c3m-track-choice {
  display:grid; place-items:center; overflow:hidden; padding:1px clamp(5px,.48cqw,8px); border:max(1px,.055cqw) solid #5e3519; border-radius:4%;
  color:#261208; background:linear-gradient(90deg,rgba(78,39,16,.22),transparent 9% 91%,rgba(78,39,16,.18)),
    linear-gradient(#ead3a5,#ae7c42);
  box-shadow:inset 0 0 0 .09cqw rgba(73,35,13,.62),0 .09cqw .18cqw rgba(0,0,0,.6); text-align:center;
}
.c3m-track-choice:hover { filter:brightness(1.13); }
.c3m-track.is-current .c3m-track-choice,.c3m-track.is-current .c3m-track-number {
  border-color:#ffc267; box-shadow:inset 0 0 0 .08cqw #72431d,0 0 .52cqw rgba(255,148,37,.82);
}
.c3m-track-text,.c3m-track-text strong,.c3m-track-text small { display:block; min-width:0; }
.c3m-track-text { width:100%; overflow:hidden; line-height:1; }
.c3m-track-text strong {
  overflow:hidden; color:#231006; font-family:"Oswald","Arial Narrow",sans-serif;
  font-size:clamp(9px,.65cqw,12px); font-weight:900; letter-spacing:-.01em;
  line-height:1.04; text-overflow:ellipsis; text-shadow:0 1px rgba(255,255,255,.28);
  text-transform:uppercase; white-space:nowrap;
}
.c3m-track-text small {
  display:block; overflow:hidden; margin-top:1px; color:#5c371b; font-size:clamp(7px,.48cqw,9px); font-weight:700;
  line-height:1.02; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap;
}
.c3m-category .c3m-track-choice { background:linear-gradient(90deg,rgba(255,255,255,.17),transparent 10% 90%,rgba(75,34,12,.18)),linear-gradient(#f1d8a6,#bd8648); }
.c3m-category .c3m-track-text strong { font-size:clamp(10px,.74cqw,13px); }
.c3m-category .c3m-track-text small { font-size:clamp(7px,.5cqw,10px); }
.c3m-track.is-loading .c3m-track-choice {
  background:linear-gradient(90deg,#a77b47 18%,#d9bd8e 40%,#a77b47 62%) 0 0/220% 100%;
  animation:c3m-shimmer 1.4s linear infinite;
}
@keyframes c3m-shimmer { to { background-position:-220% 0; } }
.c3m-track-number:focus-visible,.c3m-track-choice:focus-visible { outline:max(2px,.14cqw) solid #fff0bb; outline-offset:max(-3px,-.18cqw); }

.c3m-bottom-controls { z-index:10; display:grid; grid-template-columns:24% 40% 24%; gap:6%; align-items:stretch; isolation:isolate; }
/* Opaque backing covers the original inscription, including spaces around the button. */
.c3m-bottom-controls::before { position:absolute; z-index:-1; top:-1%; bottom:-1%; left:30%; width:40%; border-radius:18%; background:#211207; box-shadow:inset 0 0 .8cqw #0a0502; content:""; }
.c3m-bottom-controls>button { position:relative; min-width:0; width:100%; height:100%; }
.c3m-random-trigger {
  z-index:10; display:flex; align-items:center; justify-content:center; overflow:hidden; box-sizing:border-box;
  padding:0 clamp(12px,.85cqw,16px);
  border:1px solid rgba(205,145,68,.68); border-radius:999px;
  color:#dca85d; background:linear-gradient(180deg,#432411,#130a05);
  box-shadow:inset 0 0 0 .14cqw rgba(10,5,3,.58),0 .12cqw .24cqw #000;
  font-size:clamp(7px,.65cqw,12px); font-weight:800; letter-spacing:.045em;
  text-shadow:0 2px 2px #000; text-transform:uppercase; cursor:pointer;
}
.c3m-random-trigger:hover:not(:disabled) { color:#ffd38b; background:#33200f; }
.c3m-random-trigger span { display:block; overflow:hidden; line-height:1.08; text-overflow:ellipsis; white-space:nowrap; }
.c3m-random-trigger small { display:none; }
.c3m-random-trigger:disabled { color:#9f7646; cursor:not-allowed; }
.c3m-random-trigger[aria-busy="true"]:disabled { cursor:wait; }

.c3m-page-trigger {
  z-index:10; display:flex; align-items:center; justify-content:center; gap:clamp(5px,.55cqw,10px);
  overflow:hidden; padding:0 clamp(8px,.8cqw,14px); border:max(1px,.08cqw) solid #9a612d; border-radius:max(5px,.42cqw);
  color:#f0c982; background:linear-gradient(180deg,#543019,#1a0c06 76%);
  box-shadow:inset 0 0 0 max(1px,.1cqw) #0f0603,inset 0 1px rgba(255,221,158,.18),0 .12cqw .28cqw #000;
  font-size:clamp(8px,.72cqw,13px); font-weight:900; letter-spacing:.08em; text-shadow:0 2px 2px #000; text-transform:uppercase; cursor:pointer;
}
.c3m-page-trigger svg { width:1.15em; flex:0 0 auto; }
.c3m-page-trigger span { min-width:0; white-space:normal; line-height:1.15; }
.c3m-page-trigger:hover:not(:disabled) { color:#ffe1a1; background:linear-gradient(180deg,#77451f,#281106 78%); }
.c3m-page-trigger:disabled { opacity:.34; cursor:not-allowed; }
.c3m-page-readout {
  z-index:10; display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:#f1c67b; font-size:clamp(7px,.58cqw,11px); font-weight:900; letter-spacing:.075em;
  text-align:center; text-overflow:ellipsis; text-shadow:0 2px 3px #000; white-space:nowrap;
}

.c3m-search,.c3m-catalog {
  width:min(100%,1475px); margin-inline:auto; border-inline:1px solid #77502b;
  background:repeating-linear-gradient(92deg,transparent 0 78px,rgba(255,255,255,.018) 79px 80px,transparent 81px 155px),
    radial-gradient(ellipse at 50% 0,rgba(170,87,30,.14),transparent 60%),linear-gradient(180deg,#2a160c,#160b06);
  box-shadow:inset 0 0 0 4px rgba(10,5,3,.48);
}
.c3m-search {
  margin-top:0; padding:clamp(15px,1.6vw,24px) clamp(14px,2vw,31px) 15px;
  border-top:1px solid #9b6631; border-radius:0 0 9px 9px;
}
.c3m-search>label { display:block; margin-bottom:7px; color:#d8b57f; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.c3m-search-row { display:grid; grid-template-columns:minmax(220px,1fr) minmax(180px,240px) 132px; gap:9px; }
.c3m-search-row input,.c3m-search-row select {
  width:100%; height:45px; border:1px solid #81552d; border-radius:6px; color:#f4d8a5;
  background:#100805; box-shadow:inset 0 2px 7px rgba(0,0,0,.68); font-size:14px;
}
.c3m-search-row input { padding:0 13px; }
.c3m-search-row select { padding:0 37px 0 12px; }
.c3m-search-row input::placeholder { color:#806b50; }
.c3m-search-row>button {
  border:1px solid #bc7a35; color:#1b0d06; background:linear-gradient(#e1a04c,#9e5723);
  box-shadow:inset 0 1px rgba(255,239,199,.32),0 2px 5px rgba(0,0,0,.5); font-weight:800; cursor:pointer;
}
.c3m-search-row>button { display:inline-flex; height:45px; align-items:center; justify-content:center; gap:7px; border-radius:6px; font-size:14px; }
.c3m-search-row>button:disabled { cursor:wait; opacity:.62; }
.c3m-catalog { margin-top:-2.1%; padding:12px clamp(14px,2vw,31px) 18px; border-bottom:1px solid #57391f; }
.c3m-catalog-head { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.c3m-catalog-head>div>span { display:block; color:#d28b3e; font-size:11px; font-weight:800; letter-spacing:.15em; }
.c3m-catalog-head h2 { margin:3px 0 0; color:#f0ce94; font-size:clamp(16px,1.5vw,21px); }
.c3m-catalog-head p { margin:0; color:#a78b66; font-size:12px; }
.c3m-catalog-nav { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; color:#bc9e72; font-size:14px; }
.c3m-catalog-nav button {
  display:inline-flex; min-height:36px; align-items:center; gap:6px; padding:5px 10px;
  border:1px solid #7c4d26; border-radius:5px; color:#f0cb8b; background:#211007; cursor:pointer;
}
.c3m-catalog-nav button:hover { border-color:#bd7b38; background:#32180b; }
.c3m-catalog-nav button svg { width:16px; }
.c3m-catalog-nav>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c3m-archive-player { margin:0 0 18px; padding:16px; border:1px solid #946335; border-radius:8px; background:#110b07; }
.c3m-archive-player header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.c3m-archive-player header strong { font-size:18px; color:#f2d499; }
.c3m-archive-player p { max-width:80ch; font-family:Arial,sans-serif; font-size:14px; color:#cbb899; }
.c3m-archive-player button { padding:8px 14px; border:1px solid #946335; border-radius:4px; background:#302013; color:#ffe0a6; cursor:pointer; }
.c3m-archive-player iframe { display:block; width:100%; height:300px; border:0; background:#111; }
.c3m-message { margin-top:10px; padding:10px 12px; border:1px solid #8d652d; border-radius:6px; color:#ebca89; background:#30200d; font-size:13px; }
.c3m-message[data-kind="error"] { border-color:#8e3d2c; color:#f1b0a1; background:#32130d; }
.c3m-footnote {
  display:flex; width:min(100%,1475px); align-items:center; justify-content:space-between; gap:20px;
  margin-inline:auto; padding:17px 4px 0; color:#7f6d57; font-size:12px;
}
.c3m-footnote p { margin:0; }
.c3m-footnote nav { display:flex; flex-wrap:wrap; gap:13px; }
.c3m-footnote a { color:#ab8b61; }

/* Explorador completo de géneros. */
.c3m-genre-dialog {
  width:min(920px,calc(100vw - 28px)); max-width:920px; max-height:min(820px,calc(100dvh - 28px));
  margin:auto; padding:0; overflow:hidden; border:1px solid #bb7b38; border-radius:14px;
  color:#f1d39d; background:#160b06; box-shadow:0 30px 95px #000,inset 0 0 0 4px #090403;
}
.c3m-genre-dialog::backdrop { background:rgba(5,3,2,.84); backdrop-filter:blur(5px) saturate(.65); }
.c3m-dialog-panel {
  display:grid; grid-template-rows:auto auto auto auto minmax(0,1fr);
  max-height:min(820px,calc(100dvh - 28px)); padding:clamp(15px,2.5vw,28px);
  background:radial-gradient(ellipse at 50% -10%,rgba(203,111,37,.2),transparent 55%),
    repeating-linear-gradient(92deg,transparent 0 74px,rgba(255,255,255,.016) 75px 76px,transparent 77px 149px),
    linear-gradient(180deg,#351c10,#160b06 70%);
}
.c3m-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:13px; border-bottom:1px solid #70451f; }
.c3m-dialog-header span { display:block; color:#d38d40; font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.c3m-dialog-header h2 { margin:3px 0 0; color:#ffe0a3; font-size:clamp(21px,3vw,31px); line-height:1.08; }
.c3m-dialog-close,.c3m-dialog-header [data-c3m-close-genres] {
  display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; padding:0;
  border:1px solid #9b6630; border-radius:50%; color:#edc98e; background:#211108; cursor:pointer;
}
.c3m-dialog-close:hover,.c3m-dialog-header [data-c3m-close-genres]:hover { color:#fff0c2; background:#3a1e0e; }
.c3m-dialog-search,.c3m-genre-search { position:relative; display:grid; gap:5px; margin-top:14px; }
.c3m-genre-search>span { color:#c8a775; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.c3m-dialog-search input,.c3m-genre-search input,.c3m-genre-filter {
  width:100%; height:47px; padding:0 15px; border:1px solid #87562c; border-radius:7px;
  color:#f7dba8; background:#0e0704; box-shadow:inset 0 2px 8px #000;
}
.c3m-dialog-search input::placeholder,.c3m-genre-search input::placeholder,.c3m-genre-filter::placeholder { color:#877155; }
.c3m-genre-groups {
  display:flex; overflow-x:auto; gap:6px; margin:12px 0 10px; padding:1px 1px 7px;
  scrollbar-color:#865325 #160b06;
}
.c3m-genre-groups button {
  flex:0 0 auto; padding:7px 11px; border:1px solid #5c391e; border-radius:999px;
  color:#bca079; background:#1d0f08; font-size:12px; cursor:pointer;
}
.c3m-genre-groups button:hover,.c3m-genre-groups button[aria-pressed="true"],.c3m-genre-groups button.is-active {
  border-color:#d08a3c; color:#231006; background:#d69747;
}
.c3m-genre-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; gap:7px;
  min-height:180px; overflow:auto; padding:2px 5px 8px 2px; scrollbar-color:#865325 #160b06;
}
.c3m-genre-grid button {
  min-width:0; min-height:42px; padding:7px 10px; overflow:hidden; border:1px solid #704821;
  border-radius:5px; color:#e2c18b; background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 40%),#25130a;
  font-size:12px; line-height:1.16; text-align:left; text-overflow:ellipsis; cursor:pointer;
}
.c3m-genre-grid button:hover,.c3m-genre-grid button:focus-visible { border-color:#d18a3d; color:#ffe3ae; background:#3c2010; }
.c3m-genre-grid button[aria-pressed="true"],.c3m-genre-grid button.is-current { color:#221006; background:linear-gradient(#e2a450,#aa6027); }
.c3m-genre-option strong,.c3m-genre-option small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c3m-genre-option strong { font-size:12px; }
.c3m-genre-option small { margin-top:3px; color:#9f825d; font-size:10px; }
.c3m-genre-option[aria-pressed="true"] small,.c3m-genre-option.is-selected small { color:#573115; }
.c3m-genre-count { margin:10px 0 0; padding-top:10px; border-top:1px solid #543318; color:#9e845f; font-size:12px; text-align:right; }

@media (min-width:961px) {
  .c3m-app { width:100%; max-width:none; padding:10px clamp(3px,.5vw,9px) 28px; overflow-x:clip; }
  .c3m-machine { width:100%; max-width:none; }
  .c3m-reference-stage { width:109.5%; margin-inline:-4.75%; }
  .c3m-topbar,.c3m-catalog,.c3m-search,.c3m-footnote { width:calc(100% - 18px); max-width:none; }
  .c3m-track-text strong { font-size:clamp(10px,.72cqw,13px); }
  .c3m-track-text small { font-size:clamp(8px,.52cqw,10px); }
  .c3m-upper-screen>strong { font-size:clamp(11px,.82cqw,14px); }
  .c3m-upper-screen>span:not(.c3m-upper-art) { font-size:clamp(10px,.7cqw,12px); letter-spacing:.025em; }
  .c3m-track-copy h1 { font-size:clamp(11px,.94cqw,17px); }
  /* Clear the dome's curved left edge without moving the artwork or transport. */
  .c3m-now-playing { padding-left:1.55cqw; padding-right:1.05cqw; }
}

@media (max-width:960px) {
  .c3m-app { padding-inline:7px; }
  .c3m-machine { width:100%; }
  .c3m-reference-stage {
    display:grid; width:100%; aspect-ratio:auto; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
    padding:28px 13px 18px; overflow:hidden; border:1px solid #99632e; border-radius:70px 70px 12px 12px;
    background:radial-gradient(ellipse at 50% -3%,rgba(228,132,47,.2),transparent 40%),
      repeating-linear-gradient(94deg,transparent 0 64px,rgba(255,255,255,.018) 65px 66px,transparent 67px 132px),
      linear-gradient(180deg,#472619,#251209 42%,#150a05);
    box-shadow:inset 0 0 0 5px #140905,inset 0 0 0 8px #79451e,0 24px 55px rgba(0,0,0,.55); filter:none;
  }
  .c3m-reference-stage::before {
    position:absolute; z-index:0; top:10px; right:13px; left:13px; height:74px;
    border:8px solid #9f5926; border-bottom:0; border-radius:62px 62px 0 0;
    box-shadow:inset 0 0 0 3px #2a1107,0 3px 5px #000; content:""; pointer-events:none;
  }
  .c3m-shell-image,.c3m-shell-mirror,.c3m-upper-screen,.c3m-gauge-caption,.c3m-control-console,.c3m-source-scale { display:none; }
  .c3m-layer { position:relative; inset:auto; left:auto; top:auto; width:auto; height:auto; }
  .c3m-dome-screen {
    z-index:2; display:grid; min-height:305px; grid-column:1/-1; grid-row:1;
    padding-top:0; border:2px solid #ad7135; border-radius:54px 54px 12px 12px; clip-path:none;
  }
  .c3m-dome-screen>header { top:8px; right:18px; left:18px; min-height:34px; margin:0; padding:5px 0; font-size:11px; }
  .c3m-dome-screen.is-queue .c3m-screen-body { padding-top:43px; }
  .c3m-now-playing { align-items:flex-end; padding:18px; }
  .c3m-eyebrow { font-size:10px; }
  .c3m-track-copy h1 { margin-block:7px 4px; font-size:clamp(20px,4.4vw,31px); }
  .c3m-track-copy p { font-size:13px; }
  .c3m-credits { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:9px; font-size:11px; }
  .c3m-transport { grid-template-columns:40px 42px minmax(60px,1fr) 42px 40px; gap:7px; min-height:53px; padding:6px 12px 10px; font-size:11px; }
  .c3m-transport button { width:38px; }
  .c3m-screen-empty { min-height:190px; gap:7px; padding:15px; font-size:12px; }
  .c3m-screen-empty strong { font-size:15px; }
  .c3m-queue-list { min-height:190px; padding:8px 13px; }
  .c3m-queue-list li { grid-template-columns:26px minmax(0,1fr) 28px; min-height:35px; gap:8px; font-size:11px; }
  .c3m-queue-list li button { width:28px; height:28px; }
  .c3m-disc {
    z-index:2; width:min(210px,52vw); height:auto; aspect-ratio:1;
    grid-column:2/4; grid-row:2/span 2; justify-self:center;
  }
  .c3m-disc::before {
    position:absolute; inset:1%; border:7px solid #8c5729; border-radius:50%; background:#170d08;
    box-shadow:inset 0 0 0 4px #c07d38,0 9px 18px #000; content:"";
  }
  .c3m-disc-glint { inset:12%; } .c3m-tube,.c3m-mini-screen,.c3m-gauge-overlay { display:none; }
  .c3m-knob-control,.c3m-lever-control {
    z-index:2; min-width:0; min-height:92px; flex-direction:column; gap:5px; padding:8px 4px;
    border:1px solid #70451f; border-radius:8px; background:linear-gradient(145deg,rgba(77,41,21,.83),rgba(22,10,5,.91));
    box-shadow:inset 0 0 0 3px rgba(10,5,3,.6);
  }
  .c3m-knob-control,.c3m-lever-control { grid-row:auto; }
  .c3m-knob-control>.c3m-control-name,.c3m-knob-control>strong,
  .c3m-lever-control>span,.c3m-lever-control>small {
    position:static; width:100%; max-width:none; color:#d9b77f; font-size:9px; text-align:center;
  }
  .c3m-knob-control>strong { color:#f4d497; }
  .c3m-action-control>.c3m-control-name { font-size:14px; }
  .c3m-action-control>strong { font-size:12px; }
  .c3m-action-control .c3m-knob { width:52px; height:52px; flex-basis:52px; }
  .c3m-knob { width:52px; height:52px; flex:0 0 52px; }
  .c3m-knob-range,.c3m-knob-range+.c3m-knob-face { position:absolute; inset:auto; top:27px; left:calc(50% - 26px); width:52px; height:52px; }
  .c3m-knob-control:has(.c3m-knob-range) { min-height:104px; justify-content:space-between; }
  .c3m-knob-face { box-shadow:inset 0 0 0 3px #190b05,0 3px 7px #000; }
  .c3m-lever-control>span,.c3m-lever-control>small { position:static; width:100%; max-width:none; text-align:center; }
  .c3m-lever-control>.c3m-lever { position:relative; inset:auto; width:46px; height:58px; flex:0 0 58px; }
  .c3m-matrix {
    position:relative; z-index:2; inset:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    width:auto; height:auto; grid-column:1/-1; grid-row:6; gap:9px; margin-top:7px; padding:11px;
    border:1px solid #774920; border-radius:8px; background:rgba(12,6,3,.68); box-shadow:inset 0 0 17px #000;
  }
  .c3m-matrix-column { grid-template-rows:repeat(6,58px); gap:7px; padding:6px; }
  .c3m-matrix .c3m-track {
    position:relative; inset:auto; left:auto; top:auto; width:auto; height:auto;
    grid-template-columns:42px minmax(0,1fr); gap:0; border:1px solid #714725;
    border-radius:5px; background:linear-gradient(#e2c995,#a9753d); overflow:hidden;
  }
  .c3m-track-number { border:0; border-right:1px solid #5d3519; border-radius:0; font-size:11px; }
  .c3m-track-choice { border:0; border-radius:0; padding:6px 8px; text-align:left; }
  .c3m-track-text strong { font-size:11px; line-height:1.12; }
  .c3m-track-text small { display:block; overflow:hidden; margin-top:4px; color:#684520; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
  .c3m-bottom-controls { grid-column:1/-1; grid-row:8; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .c3m-bottom-controls::before { display:none; }
  .c3m-bottom-controls .c3m-random-trigger { min-height:52px; grid-column:1/-1; grid-row:2; border-radius:6px; font-size:15px; }
  .c3m-page-readout { z-index:2; min-height:34px; grid-column:1/-1; grid-row:7; font-size:12px; }
  .c3m-page-trigger { z-index:2; min-height:52px; border-radius:6px; font-size:12px; }
  .c3m-page-previous { grid-column:1; grid-row:1; }
  .c3m-page-next { grid-column:2; grid-row:1; }
  .c3m-catalog { margin-top:10px; border-radius:8px; }
  .c3m-search { margin-top:0; border-radius:8px; }
}

@media (max-width:720px) {
  .c3m-brand small { display:none; }
  .c3m-status { max-width:142px; justify-content:flex-end; text-align:right; }
  .c3m-reference-stage { grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:50px 50px 10px 10px; }
  .c3m-reference-stage::before { border-radius:44px 44px 0 0; }
  .c3m-dome-screen { min-height:290px; border-radius:42px 42px 10px 10px; }
  .c3m-disc { grid-column:1/-1; grid-row:2; }
  .c3m-knob-control,.c3m-lever-control { grid-row:auto; }
  .c3m-matrix { grid-row:8; }
  .c3m-page-readout { grid-row:9; }
  .c3m-bottom-controls { grid-row:10; }
  .c3m-search-row { grid-template-columns:1fr; }
  .c3m-catalog-head { align-items:flex-start; flex-direction:column; gap:5px; }
  .c3m-footnote { align-items:flex-start; flex-direction:column; }
  .c3m-genre-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .c3m-app { padding-inline:5px; } .c3m-topbar { align-items:flex-start; }
  .c3m-brand-mark { width:40px; height:40px; } .c3m-brand strong { font-size:19px; }
  .c3m-status { max-width:112px; font-size:10px; }
  .c3m-reference-stage { gap:8px; padding-inline:9px; }
  .c3m-dome-screen { min-height:315px; }
  .c3m-now-playing { padding:10px; }
  .c3m-track-copy h1 { font-size:18px; }
  .c3m-track-copy p { font-size:11px; } .c3m-credits { font-size:9px; }
  .c3m-transport { grid-template-columns:38px 32px minmax(42px,1fr) 32px 38px; gap:4px; padding-inline:7px; }
  .c3m-matrix { grid-template-columns:1fr; padding:8px; }
  .c3m-knob-control,.c3m-lever-control { min-height:88px; }
  .c3m-genre-dialog { width:calc(100vw - 12px); max-height:calc(100dvh - 12px); border-radius:9px; }
  .c3m-dialog-panel { max-height:calc(100dvh - 12px); padding:13px; }
  .c3m-dialog-header h2 { font-size:21px; } .c3m-dialog-close,.c3m-dialog-header [data-c3m-close-genres] { width:38px; height:38px; }
  .c3m-genre-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
  .c3m-app *,.c3m-app *::before,.c3m-app *::after {
    scroll-behavior:auto!important; animation-duration:.01ms!important;
    animation-iteration-count:1!important; transition-duration:.01ms!important;
  }
}

/* WordPress/Divi: scoped container and native-text reset. */
.c3m-app { background-color:#100b07; }
.c3m-app h1,.c3m-app h2,.c3m-app h3,.c3m-app p { padding:0; font-family:inherit; }
.c3m-app button { text-transform:none; letter-spacing:inherit; }
.c3m-app img { max-width:none; }