@charset "UTF-8";
/* ============================================================================
   RLND 09 Web Edition — style.css
   Shell visiva (Fase 1) — replica flat-design fedele del pannello di una drum
   machine a 11 voci, nell'idioma estetico di fine anni '80.
   CSS3 puro: nessun framework, nessun font/asset esterno. Il comportamento
   (Fase 2) vive in app.js, che non scrive MAI stili inline: commuta classi
   (.is-current, .is-playing, .is-selected) e attributi ARIA. Così l'aspetto
   resta in un solo posto e la piastra non ha "due verità" sulla grafica.

   CONCETTO: non è una pagina web, è una PIASTRA DI METALLO FISSA.
   Un solo pannello sempre interamente visibile: MAI scroll, in nessuna
   direzione e a nessuna dimensione.

   MAPPA DEL LAYOUT (una sola piastra, nessuna "card"):
     body                    100dvh, overflow: hidden (blocco pagina)
       └─ .tr909             piastra panna, aspect-ratio fissa (hardware)
            ├─ .tr909__header      logo RLND 09 + spia (serigrafia)
            ├─ .tr909__main        colonna flex, min-height: 0
            │    ├─ .voices         (grows)  fascia scura + 11 voci con manopole
            │    │                          + tasto SELECT in fondo a ogni voce
            │    ├─ .transport      START / STOP-CONT + display TEMPO + MEMORY
            │    │                  (20 slot) + 2 manopole grandi
            │    └─ .keys           tasto CLEAR + 16 tasti panna con striscia colore
            └─ .tr909__footer      "Powered by Jupa Prod"

   REGOLA D'ORO (nessun controllo esce mai dallo schermo):
     1. html/body hanno height: 100% + overflow: hidden: la pagina non scrolla mai;
     2. .tr909 ha larghezza = min(viewport, altezza * proporzione) e aspect-ratio:
        il pannello conserva SEMPRE le proporzioni della macchina vera;
     3. ogni misura interna deriva da UNA sola unità --u (= 1% della larghezza
        del pannello): comprimendo --u si comprime tutta la UI in modo coerente;
     4. ogni figlio flex/grid che deve "cedere" spazio ha min-width/min-height: 0
        e le tracce di griglia usano minmax(0, 1fr), mai 1fr "nudo".
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Token di design — palette originale (§1.2) + unità dimensionale --u
   ---------------------------------------------------------------------------- */
:root {
  /* --- Scocca e serigrafie --- */
  --case:        #eae8e3;   /* scocca panna vintage */
  --case-hi:     #f7f5f1;   /* luce sul metallo */
  --case-lo:     #dcd8d0;   /* ombra sul metallo */
  --case-line:   #c6c2b8;   /* filo di separazione fra le voci */
  --case-shadow: #a9a59b;   /* ombra "fisica" sotto i tasti */
  --ink:         #2b2b2b;   /* serigrafie scure */
  --ink-soft:    #6c6860;   /* etichette secondarie sotto le manopole */

  /* --- Fascia superiore con i nomi degli strumenti (grigio/bluastra) --- */
  --strip:       #3d444e;
  --strip-hi:    #4b535e;
  --strip-lo:    #2a3038;

  /* --- Arancione acceso delle serigrafie principali e varianti --- */
  --orange:      #e8620f;
  --orange-2:    #ff7d2a;

  /* --- Codice colore dei 16 step (striscia decorativa sotto i tasti) --- */
  --step-red:    #b3401f;   /* 1-4 e 9-12 */
  --step-red-2:  #8f2f16;
  --step-gray:   #3a3a3a;   /* 5-8 e 13-16 */
  --step-gray-2: #262626;

  /* --- Display rosso del TEMPO e LED di step --- */
  --display:     #3c0d07;
  --display-2:   #240603;
  --led:         #ff3b18;
  --led-glow:    rgba(255, 80, 30, .85);

  /* --- Tavolo attorno alla piastra (letterbox desktop) --- */
  --stage:       #17181a;

  /* --- Tipografia --- */
  --font-black: "Arial Black", "Arial Bold", "Helvetica Neue", Impact, Arial, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Courier New", monospace;

  /* --- Geometria del pannello --- */
  --ratio: 2;                        /* larghezza / altezza della piastra */
  /* Cornice "tavolo" (visibile solo su desktop). Un solo min(), niente max():
     vmin è sempre >= 0, quindi il floor a 0px era inutile e ogni livello di
     annidamento in meno è un livello di fragilità in meno su WebKit. */
  --frame: min(1.1vmin, 16px);

  /* 1% della larghezza della piastra: unica unità di misura dell'intera UI.
     La formula è scritta perché OGNI operatore binario abbia whitespace su
     entrambi i lati (regola CSS Values 4: `calc(100dvh-2px)` è invalido) e
     senza parentesi di raggruppamento (WebKit le accetta, ma è un costrutto
     in più da digerire). Qui il rischio non è una regola scartata: se la
     formula non è valida a computed-value time, diventano invalide TUTTE le
     dichiarazioni che usano var(--u) e la piastra torna HTML nudo.
     FALLBACK vh: --u è definito con vh (universale) e viene sovrascritto con
     dvh solo dentro @supports (height: 100dvh) — vedi il blocco dopo :root. */
  --u: min(
        calc(100vw / 100 - 2 * var(--frame) / 100),
        calc(100vh * var(--ratio) / 100 - 2 * var(--frame) * var(--ratio) / 100),
        22px
      );

  /* --- Scala dimensionale derivata (fra parentesi: quota sul pannello) --- */
  --gap:          calc(var(--u) * .7);    /* gutter fra le bande */
  --radius:       calc(var(--u) * .45);   /* raggio angoli */
  --dial:         calc(var(--u) * 4.2);   /* Ø manopola voce  (cella da ~3.85u) */
  --dial-lg:      calc(var(--u) * 12);    /* Ø manopola TEMPO/VOLUME (~24% altezza) */
  --lamp:         calc(var(--u) * 1.2);   /* LED di step */
  --stripe-h:     calc(var(--u) * 2.4);   /* striscia colore sotto i tasti */
  --strip-h:      calc(var(--u) * 4.6);   /* altezza fascia dei nomi */
  --pad-key:      calc(var(--u) * 10);    /* lato START / STOP-CONT (~20% altezza) */
  --select-h:     calc(var(--u) * 2);     /* altezza tasto SELECT sotto le manopole */
  --key-h:        calc(var(--u) * 2);     /* altezza tasti MEMORY (UP/DOWN/SAVE/LOAD) */
  --key-w:        calc(var(--u) * 6.4);   /* larghezza tasto CLEAR del sequencer */

  --font-voice:   calc(var(--u) * 1);
  --font-code:    calc(var(--u) * .78);
  --font-knob:    calc(var(--u) * .86);
  --font-brand:   calc(var(--u) * 2.2);
  --font-step:    calc(var(--u) * 1.3);
  --font-display: calc(var(--u) * 3.6);
  --font-btn:     calc(var(--u) * 1.15);
  --font-footer:  calc(var(--u) * .82);
}

/* ----------------------------------------------------------------------------
   1b. UPGRADE dvh (Safari iOS 15.4+, Chrome 108+, Firefox 101+)
   Con dvh la piastra non finisce mai sotto la barra degli indirizzi di iOS.
   Il blocco è dentro @supports: su un browser che non conosce dvh la condizione
   è falsa, il blocco viene ignorato e resta intatto il fallback vh di --u.
   Mai mettere dvh "nudo" in una custom property: su WebKit datato la sostituzione
   di var() fallirebbe a computed-value time e invaliderebbe ogni regola che usa --u.
   ---------------------------------------------------------------------------- */
@supports (height: 100dvh) {
  :root {
    --u: min(
          calc(100vw / 100 - 2 * var(--frame) / 100),
          calc(100dvh * var(--ratio) / 100 - 2 * var(--frame) * var(--ratio) / 100),
          22px
        );
  }
}

/* ----------------------------------------------------------------------------
   1c. RETE DI SICUREZZA per engine che non conoscono min()/max()/clamp()
   Se la formula di --u non è supportata, la piastra resta dimensionata (1000 x
   500 px) invece di collassare in "HTML nudo": è il caso limite da cui difendersi,
   perché senza --u diventano invalide TUTTE le dichiarazioni che la usano.
   ---------------------------------------------------------------------------- */
@supports not (width: min(10px, 20px)) {
  :root {
    --u: 10px;
  }
}

/* ----------------------------------------------------------------------------
   2. Reset e blocco della pagina (§1.1: niente zoom, niente scroll, niente
   rimbalzo). html e body non possono scorrere: la piastra è sempre intera.
   ---------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  position: fixed;               /* blocca ogni rimbalzo elastico (iOS) */
  top: 0;                        /* longhand invece di `inset: 0` */
  right: 0;                      /* (inset shorthand: iOS >= 14.1) */
  bottom: 0;
  left: 0;
  height: 100vh;                 /* FALLBACK: iOS/WebKit senza dvh */
  height: 100dvh;                /* §1.1: dynamic viewport height (come --u) */
  overflow: hidden;              /* la pagina non scrolla MAI */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;  /* niente flash grigio sui pad */
  -webkit-touch-callout: none;               /* il long-press non apre il menu */
  touch-action: manipulation;    /* disattiva il doppio-tap zoom */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--frame);         /* cornice "tavolo", solo su desktop */
  background-color: var(--stage);
  background-image:
    radial-gradient(ellipse at 50% -20%, #2b2c30 0%, transparent 60%),
    radial-gradient(ellipse at 50% 130%, #101113 0%, transparent 70%);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

/* Testo per i lettori di schermo (i titoli di sezione restano nell'outline) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);           /* fallback: WebKit datato */
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   3. Overlay "Please rotate your device" (§1.1)
   Visibile SOLO in portrait: copre la viewport e blocca i click sulla piastra.
   ---------------------------------------------------------------------------- */
#rotate-overlay {
  display: none;
  position: fixed;
  top: 0;                        /* longhand invece di `inset: 0` */
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;                 /* FALLBACK: iOS/WebKit senza dvh */
  height: 100dvh;
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--case);
  background-color: #14130f;
  background-image: radial-gradient(circle at 50% 32%, #2c2a26 0%, #14130f 72%);
  touch-action: none;
}

@media (orientation: portrait) {
  #rotate-overlay {
    display: flex;
  }
}

.rotate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 340px;
}

.rotate-icon {
  display: block;
  width: clamp(44px, 14vmin, 72px);
  height: clamp(44px, 14vmin, 72px);
  animation: rotate-hint 2.6s ease-in-out infinite;
}

.rotate-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--case-lo);
  stroke-width: 3;
  stroke-linecap: round;
}

.rotate-title {
  font-size: clamp(15px, 4.4vmin, 22px);
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
}

.rotate-hint {
  font-size: clamp(11px, 3vmin, 15px);
  color: #b9b3a3;
}

/* Il telefono disegnato ruota di 90° per suggerire il gesto */
@keyframes rotate-hint {
  0%, 40%   { transform: rotate(0deg); }
  70%, 100% { transform: rotate(90deg); }
}

/* ----------------------------------------------------------------------------
   4. Scocca (chassis) — la piastra di metallo
   Larghezza = min(viewport, altezza * proporzione), altezza derivata da
   aspect-ratio: la macchina conserva le proporzioni reali e non trabocca mai.
   Tutto il contenuto è una colonna flex con min-height: 0 sui figli.
   ---------------------------------------------------------------------------- */
.tr909 {
  position: relative;
  flex: 0 0 auto;                /* la piastra non si deforma mai: resta 100u */
  width: calc(var(--u) * 100);   /* = min(larghezza, altezza * --ratio) */
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--ratio);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow: hidden;              /* nessun trabocco, in nessuna direzione */
  padding: calc(var(--u) * 1.1);
  border: 1px solid #bdbab1;
  border-radius: calc(var(--radius) * 2);
  /* Pannello panna: luce dall'alto, leggera ombra sul fondo, filo metallico */
  background-color: var(--case);
  background-image:
    linear-gradient(180deg, var(--case-hi) 0%, var(--case) 34%, var(--case-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 5px rgba(0, 0, 0, .07),
    0 calc(var(--u) * .6) calc(var(--u) * 1.6) rgba(0, 0, 0, .5);
}

/* Viti agli angoli: la piastra è avvitata al case, non un riquadro web */
.screw {
  position: absolute;
  width: calc(var(--u) * 1.15);
  height: calc(var(--u) * 1.15);
  border-radius: 50%;
  background-image: radial-gradient(circle at 38% 32%, #c9c6bd 0%, #9c998f 55%, #74716a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 1px 1px rgba(0, 0, 0, .25);
}

/* Taglio a croce inciso sulla testa della vite */
.screw::after {
  content: "";
  position: absolute;
  top: 20%;                      /* longhand al posto di `inset: 20%` */
  right: 20%;
  bottom: 20%;
  left: 20%;
  background-image:
    linear-gradient(45deg, transparent 44%, rgba(0, 0, 0, .35) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(0, 0, 0, .35) 44% 56%, transparent 56%);
}

.screw--tl { top: calc(var(--u) * .55); left: calc(var(--u) * .55); }
.screw--tr { top: calc(var(--u) * .55); right: calc(var(--u) * .55); }
.screw--bl { bottom: calc(var(--u) * .55); left: calc(var(--u) * .55); }
.screw--br { bottom: calc(var(--u) * .55); right: calc(var(--u) * .55); }

/* -------------------------------- Header ----------------------------------
   Serigrafia sul metallo: logo RLND 09 a sinistra, spia di alimentazione a destra.
   ---------------------------------------------------------------------------- */
.tr909__header {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-inline: calc(var(--u) * 1.6);
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: .5em;
  min-width: 0;
  font-family: var(--font-black);
  font-size: var(--font-brand);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.brand__maker {
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--ink);
}

.brand__model {
  color: var(--orange);
  letter-spacing: .02em;
  text-shadow: 0 calc(var(--u) * .1) 0 rgba(0, 0, 0, .12);
}

.brand__sub {
  font-family: var(--font-ui);
  font-size: .52em;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
}

.header__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: calc(var(--u) * .9);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Spia di alimentazione: unico elemento acceso appena caricata la scocca */
.header__led {
  width: var(--lamp);
  height: var(--lamp);
  border-radius: 50%;
  background-color: var(--led);
  box-shadow: 0 0 calc(var(--u) * .5) var(--led-glow), 0 0 calc(var(--u) * 1) var(--led-glow);
}

/* --------------------------------- Main ----------------------------------- */
.tr909__main {
  flex: 1 1 auto;
  min-height: 0;               /* chiave: permette ai figli di comprimersi */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   5. VOCI (fascia superiore) — una sola striscia continua scura con i nomi
   degli strumenti in arancione/bianco; sotto, le manopole appoggiate
   direttamente sul panno della piastra (nessun riquadro, nessuna card).

   La griglia ha 11 colonne in proporzione al numero di manopole di ogni voce
   (4fr 4fr 3fr 3fr 3fr 1fr×6 = 23fr per 23 manopole): ogni unità fr vale
   larghezza/23, quindi TUTTE le manopole hanno lo stesso diametro (~4.2u),
   come sul pannello vero.
   Le etichette delle voci si toccano (column-gap: 0) e formano la striscia
   scura continua; l'intero blocco è centrato verticalmente sul metallo.
   ---------------------------------------------------------------------------- */
.voices {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.voices__grid {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: grid;
  /* Una traccia fr per manopola: 4+4+3+3+3 (BD/SD/tom) + 1+1 (RS/CP) + 2+1 (CH/OH)
     + 2+2 (RD/CR) = 26fr per 26 manopole. Aggiungere un knob = alzare la sua
     traccia: il pannello si ridistribuisce da solo, perché le ghiere hanno
     width: 100% e max-width: var(--dial) — mai tagliate, mai fuori dallo schermo. */
  grid-template-columns: 4fr 4fr 3fr 3fr 3fr 1fr 1fr 2fr 1fr 2fr 2fr;
  grid-template-rows: auto;             /* altezza del contenuto... */
  align-content: center;                /* ...centrata verticalmente sul metallo */
  column-gap: 0;                        /* la striscia scura resta continua */
  overflow: hidden;
}

/* Una voce = una colonna: nome (striscia scura) + manopole (panno) */
.voice {
  min-width: 0;
  min-height: 0;
  display: grid;
  /* Tre righe: striscia del nome (fissa) · manopole (assorbe il respiro extra
     e resta centrata) · tasto SELECT (min-content: si appoggia alla base della
     colonna senza rubare spazio alle manopole né spostare la striscia). */
  grid-template-rows: var(--strip-h) auto min-content;
  overflow: hidden;
}

.voice + .voice {
  border-left: 1px solid var(--case-line);
}

/* Numero di manopole della voce → numero di colonne del banco (proporzione
   coerente con le tracce fr di .voices__grid: 4 / 3 / 2 / 1). */
.voice--4 { --knobs: 4; }
.voice--3 { --knobs: 3; }
.voice--2 { --knobs: 2; }
.voice--1 { --knobs: 1; }

/* Etichetta della voce sulla striscia scura: nome in arancione, codice in bianco */
.voice__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .15);
  min-width: 0;
  overflow: hidden;
  color: var(--orange-2);
  background-image: linear-gradient(180deg, var(--strip-hi) 0%, var(--strip) 55%, var(--strip-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  text-align: center;
  line-height: 1.05;
}

.voice__label {
  font-family: var(--font-black);
  font-size: var(--font-voice);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Le voci con una sola manopola hanno la colonna stretta (≈4.25u):
   il nome va a capo su due righe invece di troncare ("Closed Hat"),
   così il testo resta quello vero del pannello. */
.voice--1 .voice__label {
  font-size: calc(var(--u) * .82);
  line-height: .98;
  white-space: normal;                 /* ammesso l'a-capo su 2 righe */
  text-overflow: clip;
  overflow-wrap: break-word;
}

.voice__code {
  font-size: var(--font-code);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e9e6df;
  opacity: .78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Banco delle manopole: una colonna per manopola, tutte della stessa larghezza */
.voice__knobs {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--knobs, 1), minmax(0, 1fr));
  align-content: center;
  justify-items: center;
  padding: calc(var(--u) * .5) calc(var(--u) * .05);
  overflow: hidden;
}

/* --- Tasto SELECT (§ UI): piccola chiave fisica in fondo alla colonna.
   Porta in edit QUESTA voce: i 16 step mostrano il suo pattern. La larghezza è
   fluida (max 7u) e si restringe da sola sulle colonne da 1fr, quindi non esce
   mai dalla colonna nemmeno sulla larghezza minima. --- */
.voice__select {
  justify-self: center;
  align-self: center;
  width: calc(100% - var(--u) * .8);
  max-width: calc(var(--u) * 7);
  height: var(--select-h);
  margin-bottom: calc(var(--u) * .3);
  padding: 0 calc(var(--u) * .2);
  font-family: var(--font-black);
  font-size: calc(var(--u) * .54);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  -webkit-appearance: none;       /* iOS: la grafica del tasto è tutta in CSS */
  appearance: none;
  background-color: var(--case);
  background-image: linear-gradient(180deg, var(--case-hi) 0%, var(--case) 55%, var(--case-lo) 100%);
  border: 1px solid var(--case-line);
  border-radius: calc(var(--radius) * .7);
  box-shadow:
    0 calc(var(--u) * .26) 0 var(--case-shadow),
    0 calc(var(--u) * .4) calc(var(--u) * .5) rgba(0, 0, 0, .15),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .06s ease, box-shadow .08s ease, filter .1s ease;
}

.voice__select:active {
  transform: translateY(calc(var(--u) * .26));
  filter: brightness(.98);
  box-shadow:
    0 0 0 var(--case-shadow),
    inset 0 1px calc(var(--u) * .25) rgba(0, 0, 0, .15);
}

.voice__select:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: calc(var(--u) * .25);
}

/* Voce in edit: la chiave resta "premuta" (il JS commuta aria-pressed), così
   lo stato è leggibile sia a occhio sia dai lettori di schermo. */
.voice__select[aria-pressed="true"] {
  transform: translateY(calc(var(--u) * .26));
  background-image: linear-gradient(180deg, #5b646f 0%, #414852 55%, #2f353d 100%);
  border-color: var(--step-red);
  color: #ffb27a;
  box-shadow:
    0 0 0 var(--case-shadow),
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 0 calc(var(--u) * 1.2) rgba(255, 122, 42, .5);
}

/* ----------------------------------------------------------------------------
   6. MANOPOLE — grigio scuro con riga indicatrice arancione, 3D minimale.
   Markup neutro: classi e data-attribute sono già il gancio della Fase 4.
   ---------------------------------------------------------------------------- */
.knob {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .3);
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;       /* iOS: senza questo Safari ridisegna i <button> */
  appearance: none;
  color: var(--ink);
  font-family: inherit;
  cursor: ns-resize;              /* convenzione per i controlli rotativi */
  touch-action: none;             /* niente scroll/zoom quando si gira un knob */
  transition: transform .08s ease;
}

.knob:active {
  transform: scale(.94);
}

/* Ghiera: cerchio pieno anche quando la colonna è stretta (max-width +
   aspect-ratio), quindi mai tagliata di lato. */
.knob__dial {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--dial);
  aspect-ratio: 1;
  border: 1px solid #23272d;
  border-radius: 50%;
  /* zigrinatura appena accennata + corpo bombato grigio scuro */
  background-image:
    repeating-conic-gradient(from 0deg,
      rgba(255, 255, 255, .07) 0deg 2deg,
      rgba(0, 0, 0, .22) 2deg 4deg),
    radial-gradient(circle at 50% 26%, #6b717a 0%, #4a5058 46%, #2e333a 100%);
  box-shadow:
    0 calc(var(--u) * .16) calc(var(--u) * .26) rgba(0, 0, 0, .4),
    inset 0 1px 1px rgba(255, 255, 255, .22),
    inset 0 calc(var(--u) * -0.2) calc(var(--u) * .4) rgba(0, 0, 0, .5);
}

/* Riga indicatrice ARANCIONE: layer a tutta ghiera ruotato di --angle.
   Ruotando il layer, la tacca ruota attorno al centro come un potenziometro. */
.knob__dial::before {
  content: "";
  position: absolute;
  top: 0;                        /* longhand al posto di `inset: 0` */
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background-image: linear-gradient(var(--orange), var(--orange-2));
  background-repeat: no-repeat;
  background-position: 50% 8%;
  background-size: calc(var(--u) * .34) 34%;
  transform: rotate(var(--angle, 0deg));
  pointer-events: none;
}

/* Ghiera dei cursori grandi (TEMPO / VOLUME): stessa famiglia, più chiara */
.knob--lg .knob__dial {
  max-width: var(--dial-lg);
  border-color: #1f2329;
  background-image:
    repeating-conic-gradient(from 0deg,
      rgba(255, 255, 255, .10) 0deg 2deg,
      rgba(0, 0, 0, .26) 2deg 4deg),
    radial-gradient(circle at 50% 26%, #7b818b 0%, #525862 46%, #2b3037 100%);
}

.knob--lg .knob__dial::before {
  background-size: calc(var(--u) * .62) 32%;
}

.knob__label {
  max-width: 100%;
  font-size: var(--font-knob);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le etichette delle manopole grandi sono serigrafie più marcate */
.knob--lg .knob__label {
  font-size: calc(var(--u) * 1.15);
  letter-spacing: .12em;
  color: var(--ink);
}

/* Focus visibile solo da tastiera, sulla ghiera (non sul rettangolo del tasto) */
.knob:focus-visible .knob__dial {
  outline: 2px solid var(--orange);
  outline-offset: calc(var(--u) * .35);
}

/* ----------------------------------------------------------------------------
   7. RIGA CENTRALE (trasporto) — da sinistra a destra:
   START + STOP/CONT (bottoni quadrati panna) · display LED rosso del TEMPO ·
   manopola TEMPO molto grande · manopola VOLUME molto grande all'estrema destra.
   ---------------------------------------------------------------------------- */
.transport {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-inline: calc(var(--u) * 2.2);
  overflow: hidden;
}

.transport__group {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  min-width: 0;
  min-height: 0;
}

/* --- MEMORY (§ Fase 5): 20 slot di pattern. Display LED a 2 cifre + quattro
   tasti fisici. Vive nel vuoto al centro della riga di trasporto: usa spazio
   che c'era già, non aggiunge nessuna banda, quindi il contenimento 100dvh
   resta intatto. */
.memory {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .25);
}

.memory__caption {
  font-size: calc(var(--u) * .82);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.memory__body {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .7);
  min-width: 0;
}

.memory__display {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 5);
  border: 1px solid #150403;
  border-radius: calc(var(--radius) * .6);
  background-color: var(--display);
  background-image: linear-gradient(180deg, var(--display-2) 0%, var(--display) 70%, #4d1209 100%);
  box-shadow:
    inset 0 calc(var(--u) * .3) calc(var(--u) * .5) rgba(0, 0, 0, .75),
    0 1px 0 rgba(255, 255, 255, .55);
}

/* Cifre "LED": rosso acceso con alone, come il display del TEMPO */
.memory__value {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 2.6);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--led);
  text-shadow: 0 0 calc(var(--u) * .5) var(--led-glow), 0 0 calc(var(--u) * 1.2) var(--led-glow);
  transition: opacity .12s ease;
}

/* Feedback di scrittura/lettura: il JS aggiunge .is-flash per un istante */
.memory__value.is-flash {
  opacity: .25;
}

.memory__keys {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--u) * 5));
  grid-auto-rows: var(--key-h);
  gap: calc(var(--u) * .45);
}

/* --- Tasti MEMORY: piccoli, panna, etichetta serigrafata --- */
.mkey {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * .3);
  font-family: var(--font-black);
  font-size: calc(var(--u) * .7);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  -webkit-appearance: none;       /* iOS: la grafica del tasto è tutta in CSS */
  appearance: none;
  background-color: var(--case);
  background-image: linear-gradient(180deg, var(--case-hi) 0%, var(--case) 55%, var(--case-lo) 100%);
  border: 1px solid var(--case-line);
  border-radius: calc(var(--radius) * .7);
  box-shadow:
    0 calc(var(--u) * .32) 0 var(--case-shadow),
    0 calc(var(--u) * .5) calc(var(--u) * .6) rgba(0, 0, 0, .15),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .06s ease, box-shadow .08s ease, filter .1s ease;
}

.mkey:active {
  transform: translateY(calc(var(--u) * .32));
  filter: brightness(.98);
  box-shadow:
    0 0 0 var(--case-shadow),
    inset 0 1px calc(var(--u) * .3) rgba(0, 0, 0, .15);
}

.mkey:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: calc(var(--u) * .25);
}

/* SAVE / LOAD scrivono e leggono la memoria: serigrafia arancione come i
   comandi principali del pannello. */
#btn-mem-save,
#btn-mem-load {
  color: var(--step-red);
}

/* --- Bottoni START / STOP-CONT ---
   Grandi, quadrati, color panna: sono i tasti fisici della 909. */
.pad-btn {
  flex: 0 0 auto;
  height: var(--pad-key);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .1);
  padding: calc(var(--u) * .3);
  font-family: var(--font-black);
  font-size: var(--font-btn);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  -webkit-appearance: none;       /* iOS: la grafica del tasto è tutta in CSS */
  appearance: none;
  background-color: var(--case);
  background-image: linear-gradient(180deg, var(--case-hi) 0%, var(--case) 55%, var(--case-lo) 100%);
  border: 1px solid var(--case-line);
  border-radius: calc(var(--radius) * .8);
  box-shadow:
    0 calc(var(--u) * .45) 0 var(--case-shadow),
    0 calc(var(--u) * .7) calc(var(--u) * .8) rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  cursor: pointer;
  touch-action: manipulation;     /* tap immediato, niente ritardo/zoom */
  transition: transform .06s ease, box-shadow .08s ease, filter .1s ease;
}

/* Il tasto scende nel suo alloggiamento quando è premuto */
.pad-btn:active {
  transform: translateY(calc(var(--u) * .45));
  box-shadow:
    0 0 0 var(--case-shadow),
    inset 0 1px calc(var(--u) * .3) rgba(0, 0, 0, .18);
}

.pad-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: calc(var(--u) * .3);
}

/* Stato "in esecuzione": la Fase 2 aggiunge .is-playing al click su START */
.pad-btn.is-playing {
  background-image: linear-gradient(180deg, #f4d3bd 0%, #e2a37e 55%, #c47c52 100%);
  border-color: var(--step-red);
  color: #58200e;
}

/* --- Display LED del TEMPO: riquadro rosso scuro con cifre accese --- */
.tempo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .25);
}

.tempo__caption {
  font-size: calc(var(--u) * .82);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.tempo__display {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 6);
  border: 1px solid #150403;
  border-radius: calc(var(--radius) * .6);
  background-color: var(--display);
  background-image: linear-gradient(180deg, var(--display-2) 0%, var(--display) 70%, #4d1209 100%);
  box-shadow:
    inset 0 calc(var(--u) * .3) calc(var(--u) * .5) rgba(0, 0, 0, .75),
    0 1px 0 rgba(255, 255, 255, .55);
}

/* Cifre "LED": rosso acceso con alone, come i segmenti della 909 */
.tempo__value {
  font-family: var(--font-mono);
  font-size: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--led);
  text-shadow: 0 0 calc(var(--u) * .5) var(--led-glow), 0 0 calc(var(--u) * 1.2) var(--led-glow);
}

/* In play il display pulsa: dettaglio hardware, disattivato sotto reduced-motion */
.tempo__display.is-playing .tempo__value {
  animation: tempo-blink 1.6s steps(1, end) infinite;
}

@keyframes tempo-blink {
  0%, 88%  { opacity: 1; }
  89%, 99% { opacity: .72; }
}

/* ----------------------------------------------------------------------------
   8. SEQUENCER (16 tasti) — tasti quadrati color panna con l'alloggiamento del
   LED in alto; sotto ogni tasto la striscia grafica con il codice colore
   originale (1-4 / 9-12 arancione scuro, 5-8 / 13-16 grigio scuro) e il numero.
   ---------------------------------------------------------------------------- */
.keys {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  /* Riga flex: tasto CLEAR + i 16 step. L'<h2> di sezione è .sr-only
     (position: absolute), quindi NON entra nella riga: nessun effetto
     collaterale sulla larghezza. */
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * .7);
  padding-inline: calc(var(--u) * 2.2);
  overflow: hidden;
}

/* --- Tasto CLEAR (§ UI): chiave fisica panna con alloggiamento LED, identica
   per linguaggio ai 16 step. Si stira sull'altezza della fila (tasti +
   striscia numerata): nessuna dipendenza da un'altezza in pixel, quindi resta
   allineato qualunque sia l'aspect-ratio dei tasti. --- */
.key-btn {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  width: var(--key-w);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--u) * .3);
  -webkit-appearance: none;       /* iOS: la grafica del tasto è tutta in CSS */
  appearance: none;
  background-color: var(--case);
  background-image: linear-gradient(180deg, var(--case-hi) 0%, var(--case) 55%, var(--case-lo) 100%);
  border: 1px solid var(--case-line);
  border-radius: calc(var(--radius) * .8);
  box-shadow:
    0 calc(var(--u) * .38) 0 var(--case-shadow),
    0 calc(var(--u) * .6) calc(var(--u) * .7) rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .06s ease, box-shadow .08s ease, filter .1s ease;
}

.key-btn:active {
  transform: translateY(calc(var(--u) * .38));
  filter: brightness(.98);
  box-shadow:
    0 0 0 var(--case-shadow),
    inset 0 1px calc(var(--u) * .3) rgba(0, 0, 0, .15);
}

.key-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: calc(var(--u) * .3);
}

/* Stesso alloggiamento LED dei 16 step: accende solo mentre è premuto */
.key-btn__lamp {
  position: absolute;
  top: 11%;
  left: 50%;
  width: var(--lamp);
  height: var(--lamp);
  border-radius: 50%;
  background-color: #4a1512;
  box-shadow:
    inset 0 0 calc(var(--u) * .3) rgba(0, 0, 0, .9),
    0 1px 0 rgba(255, 255, 255, .7);
  transform: translateX(-50%);
  transition: background-color .08s ease, box-shadow .08s ease;
}

.key-btn:active .key-btn__lamp {
  background-color: var(--led);
  box-shadow:
    0 0 calc(var(--u) * .6) var(--led-glow),
    0 0 calc(var(--u) * 1.4) var(--led-glow);
}

.key-btn__label {
  font-family: var(--font-black);
  font-size: var(--font-btn);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.keys__grid {
  flex: 1 1 auto;                /* prende lo spazio lasciato dal tasto CLEAR */
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: calc(var(--u) * .55);
  overflow: hidden;
}

/* Ogni step = tasto + striscia colore; il modificatore --red/--gray resta
   sul contenitore così i tasti fisici restano tutti panna identici. */
.step-cell {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .3);
  min-width: 0;
  min-height: 0;
}

/* Tasto fisico: quadrato, panna, con "spazietto" per il LED in alto */
.step {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  -webkit-appearance: none;       /* iOS: la grafica del tasto è tutta in CSS */
  appearance: none;
  border: 1px solid var(--case-line);
  border-radius: calc(var(--radius) * .9);
  background-color: var(--case);
  background-image: linear-gradient(180deg, var(--case-hi) 0%, var(--case) 52%, var(--case-lo) 100%);
  box-shadow:
    0 calc(var(--u) * .38) 0 var(--case-shadow),
    0 calc(var(--u) * .6) calc(var(--u) * .7) rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  cursor: pointer;
  touch-action: none;            /* il pad non trascina/zooma la pagina */
  transition: transform .06s ease, box-shadow .08s ease, filter .1s ease;
}

.step:active {
  transform: translateY(calc(var(--u) * .38));
  filter: brightness(.98);
  box-shadow:
    0 0 0 var(--case-shadow),
    inset 0 1px calc(var(--u) * .3) rgba(0, 0, 0, .15);
}

.step:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: calc(var(--u) * .3);
}

/* Alloggiamento del LED: incavo scuro in alto sul tasto panna */
.step__lamp {
  position: absolute;
  top: 11%;
  left: 50%;
  width: var(--lamp);
  height: var(--lamp);
  border-radius: 50%;
  background-color: #4a1512;
  box-shadow:
    inset 0 0 calc(var(--u) * .3) rgba(0, 0, 0, .9),
    0 1px 0 rgba(255, 255, 255, .7);
  transform: translateX(-50%);
  transition: background-color .08s ease, box-shadow .08s ease;
}

/* LED acceso: la Fase 2 commuta [aria-pressed] sui tasti */
.step:active .step__lamp,
.step[aria-pressed="true"] .step__lamp {
  background-color: var(--led);
  box-shadow:
    0 0 calc(var(--u) * .6) var(--led-glow),
    0 0 calc(var(--u) * 1.4) var(--led-glow);
}

/* Striscia colore decorativa sotto il tasto: qui vivono i numeri 1-16 */
.step__stripe {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--stripe-h);
  min-width: 0;
  border-radius: calc(var(--radius) * .5);
  font-family: var(--font-black);
  font-size: var(--font-step);
  font-weight: 900;
  line-height: 1;
  color: #f4f1ea;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 1px 1px rgba(0, 0, 0, .12);
  overflow: hidden;
}

/* Codice colore originale §1.2 della 909 */
.step-cell--red .step__stripe {
  background-image: linear-gradient(180deg, var(--step-red) 0%, var(--step-red-2) 100%);
}

.step-cell--gray .step__stripe {
  background-image: linear-gradient(180deg, var(--step-gray) 0%, var(--step-gray-2) 100%);
}

/* --------------------------------- Footer ---------------------------------
   Sottile filo serigrafato sul metallo (non una barra riquadrata).
   ---------------------------------------------------------------------------- */
.tr909__footer {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-inline: calc(var(--u) * 1.6);
  font-size: var(--font-footer);
  line-height: 1.1;
  color: var(--ink-soft);
  overflow: hidden;
}

.footer__meta,
.footer__brand {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer__brand {
  flex: 0 0 auto;
  letter-spacing: .06em;
}

/* Link branding §1.3 — target="_blank" + rel="noopener noreferrer" nel markup */
.footer__brand a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.footer__brand a:hover,
.footer__brand a:focus-visible {
  color: var(--orange-2);
}

/* ----------------------------------------------------------------------------
   9. Stati hover (solo dispositivi con puntatore preciso)
   ---------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .step:hover,
  .pad-btn:hover,
  .key-btn:hover,
  .voice__select:hover,
  .mkey:hover {
    filter: brightness(1.03);
  }

  .knob:hover .knob__dial {
    box-shadow:
      0 calc(var(--u) * .2) calc(var(--u) * .34) rgba(0, 0, 0, .45),
      inset 0 1px 1px rgba(255, 255, 255, .28),
      inset 0 calc(var(--u) * -0.2) calc(var(--u) * .4) rgba(0, 0, 0, .5);
  }
}

/* ----------------------------------------------------------------------------
   10. Adattamento ai pannelli molto bassi (§1.1)
   Nessuna misura è in pixel: comprimendo --u si comprime TUTTA la piastra.
   Qui si toglie solo la serigrafia secondaria per lasciare respiro alle voci.
   ---------------------------------------------------------------------------- */
@media (max-height: 640px) and (orientation: landscape) {
  :root {
    --ratio: 2.05;                 /* un filo più alto: manopole più leggibili */
    --strip-h: calc(var(--u) * 3.3);
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --ratio: 2.1;
    --strip-h: calc(var(--u) * 3.1);
    --pad-key: calc(var(--u) * 8);
    --select-h: calc(var(--u) * 1.8);   /* il tasto SELECT si abbassa con il resto */
    --key-h: calc(var(--u) * 1.8);      /* idem per i tasti MEMORY */
  }

  .brand__sub,
  .header__label {
    display: none;
  }

  .voice__code {
    display: none;                 /* resta il nome dello strumento */
  }

  .voice__name {
    justify-content: center;
  }
}

@media (max-height: 420px) and (orientation: landscape) {
  :root {
    --ratio: 2.15;
    --gap: calc(var(--u) * .55);
    --strip-h: calc(var(--u) * 3);
    --stripe-h: calc(var(--u) * 2);
    --pad-key: calc(var(--u) * 7.5);
    --select-h: calc(var(--u) * 1.7);
    --key-h: calc(var(--u) * 1.7);
  }

  .footer__meta {
    display: none;                 /* resta il credit Jupa Prod (§1.3) */
  }

  .tempo__caption,
  .memory__caption {
    display: none;                 /* il display LED resta leggibile da solo */
  }
}

/* ----------------------------------------------------------------------------
   11. FASE 2 — Sequencer Engine (app.js): stati commutati dal JavaScript.
   Il JS non scrive mai stili: aggiunge/toglie classi e cambia attributi ARIA;
   l'aspetto (LED, playhead, voce in edit) continua a vivere solo qui.
   ---------------------------------------------------------------------------- */

/* Playhead: il tasto che sta suonando ADESSO. L'alone è sul tasto fisico e il
   LED nell'alloggiamento diventa ambra (step off) o bianco-caldo (step on). */
.step.is-current {
  border-color: var(--orange);
  filter: brightness(1.04);
  box-shadow:
    0 calc(var(--u) * .38) 0 var(--case-shadow),
    0 0 calc(var(--u) * 2.2) rgba(255, 122, 42, .8);
  transition: transform .06s ease, box-shadow .06s ease, filter .06s ease;
}

.step.is-current .step__lamp {
  background-color: #ff8a3c;
  box-shadow:
    0 0 calc(var(--u) * .7) var(--led-glow),
    0 0 calc(var(--u) * 1.6) var(--led-glow);
}

/* Step attivo (pattern) + playhead: flash bianco-caldo, così si distingue a
   colpo d'occhio uno step acceso che suona da uno spento su cui si scorre. */
.step[aria-pressed="true"].is-current .step__lamp {
  background-color: #ffd9b0;
  box-shadow:
    0 0 calc(var(--u) * .8) rgba(255, 206, 140, .95),
    0 0 calc(var(--u) * 2) var(--led-glow);
}

/* Voce in edit: i 16 tasti mostrano il pattern di QUESTA voce (in Fase 4 ci si
   agganciano anche i knob). La striscia dei nomi si accende. */
.voice.is-selected .voice__name {
  background-image: linear-gradient(180deg, #5b646f 0%, #414852 55%, #2f353d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 0 calc(var(--u) * 1.6) rgba(255, 122, 42, .5);
}

.voice.is-selected .voice__label {
  color: #ffb27a;                 /* nome della voce in edit */
}

.voice.is-selected .voice__code {
  opacity: 1;
  color: #fff;
}

/* ----------------------------------------------------------------------------
   12. Accessibilità: chi preferisce meno movimento resta comunque operativo
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rotate-icon {
    animation: none;
    transform: rotate(90deg);
  }

  .tempo__display.is-playing .tempo__value {
    animation: none;
  }

  .knob,
  .step,
  .step.is-current,
  .pad-btn,
  .step__lamp,
  .key-btn,
  .key-btn__lamp,
  .mkey,
  .voice__select,
  .memory__value,
  .voice__name {
    transition: none;
  }
}