/* Modules du NYX-16 : châssis, écran, touches, potentiomètres, pads, séquenceur, clavier. */

/* ---------- Châssis ---------- */
.machine {
  border-radius: var(--r-device);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--light) 22%, transparent) 0 1px,
      transparent 1px 2px,
      color-mix(in srgb, var(--alu-lo) 18%, transparent) 2px 3px,
      transparent 3px 5px
    ),
    linear-gradient(180deg, var(--alu-hi) 0%, var(--alu) 14%, var(--alu) 72%, var(--alu-lo) 100%);
  box-shadow:
    inset 0 1px 0 var(--light),
    inset 0 -2px 1px color-mix(in srgb, var(--alu-edge) 70%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--light) 70%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--alu-edge) 50%, transparent),
    0 0.3rem 0 var(--alu-lo),
    0 0.42rem 0 var(--alu-side),
    0 0.55rem 0.2rem color-mix(in srgb, var(--shade) 28%, transparent),
    0 1.6rem 2.4rem -0.6rem color-mix(in srgb, var(--shade) 42%, transparent),
    0 4rem 6rem -1.5rem color-mix(in srgb, var(--shade) 30%, transparent);
}

.screw {
  --a: 30deg;
  position: absolute;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--a), transparent 43%, var(--alu-side) 43% 57%, transparent 57%),
    linear-gradient(calc(var(--a) + 90deg), transparent 43%, var(--alu-side) 43% 57%, transparent 57%),
    radial-gradient(circle at 35% 28%, var(--alu-hi), var(--alu-lo) 62%, var(--alu-edge));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--shade) 22%, transparent),
    0 0 0 2.5px color-mix(in srgb, var(--alu-lo) 60%, transparent),
    0 1px 0 2.5px color-mix(in srgb, var(--light) 60%, transparent);
}
.screw--tl {
  top: 0.55rem;
  left: 0.55rem;
}
.screw--tr {
  --a: 72deg;
  top: 0.55rem;
  right: 0.55rem;
}
.screw--bl {
  --a: 12deg;
  bottom: 0.55rem;
  left: 0.55rem;
}
.screw--br {
  --a: 51deg;
  bottom: 0.55rem;
  right: 0.55rem;
}

/* Cuvette : panneau légèrement enfoncé qui regroupe des commandes. */
.well {
  border-radius: var(--r-well);
  background: linear-gradient(180deg, var(--alu-lo), var(--well) 12%, var(--well));
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--shade) 22%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--light) 80%, transparent),
    0 1px 0 color-mix(in srgb, var(--light) 90%, transparent);
  padding: 0.8rem 0.9rem 0.9rem;
}

/* ---------- Plaque de nom ---------- */
.nameplate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.7rem;
  padding-left: 0.6rem;
}

.nameplate__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1rem;
  row-gap: 0.1rem;
  font-weight: 400;
}

.nameplate__model {
  font-family: var(--font-silk);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--ink);
}

.nameplate__name {
  font-family: var(--font-silk);
  font-stretch: 75%;
  font-weight: 700;
  font-size: max(11px, 0.78rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nameplate__sub {
  grid-column: 2;
  font-stretch: 75%;
  font-weight: 600;
  font-size: max(10px, 0.66rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.2rem;
}

/* ---------- LED ---------- */
.led {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--led-off) 70%, var(--light)) 0 12%, var(--led-off) 45%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--shade) 45%, transparent),
    0 1px 0 color-mix(in srgb, var(--light) 70%, transparent);
  transition: background var(--t-press), box-shadow var(--t-press);
}

.led.is-on,
[aria-selected="true"] > .led,
[aria-pressed="true"] > .led {
  background: radial-gradient(circle at 40% 35%, var(--light) 0 14%, var(--led-on) 45%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--signal-deep) 60%, transparent),
    0 0 0.35rem 0.05rem color-mix(in srgb, var(--led-glow) 80%, transparent),
    0 0 0.9rem 0.1rem color-mix(in srgb, var(--led-glow) 35%, transparent);
}

.led--power {
  grid-row: span 2;
  align-self: start;
  margin-top: 0.55rem;
}

.led--power.is-on {
  background: radial-gradient(circle at 40% 35%, var(--light) 0 14%, var(--led-green) 50%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--shade) 30%, transparent),
    0 0 0.4rem color-mix(in srgb, var(--led-green) 70%, transparent);
}

/* ---------- Prises jack : liens vers les autres thèmes ---------- */
.jacks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
}

.jacks__title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--ink-soft);
  padding-left: 0.4rem;
  border-left: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
}

.jacks__list {
  display: flex;
  gap: 0.35rem;
}

.jack {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.15rem 0.35rem;
  text-decoration: none;
  border-radius: var(--r-key);
}

.jack__socket {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--graphite-lo) 0 27%, var(--graphite-hi) 29% 33%, transparent 35%),
    radial-gradient(circle at 40% 30%, var(--alu-hi), var(--alu-lo) 55%, var(--alu-edge) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--shade) 25%, transparent),
    0 0.12rem 0.2rem color-mix(in srgb, var(--shade) 30%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--shade) 25%, transparent);
  transition: box-shadow var(--t-release);
}

.jack__label {
  font-stretch: 75%;
  font-weight: 700;
  font-size: max(10px, 0.62rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.jack:hover .jack__socket,
.jack:focus-visible .jack__socket {
  box-shadow:
    0 0 0 2px var(--signal),
    0 0.12rem 0.2rem color-mix(in srgb, var(--shade) 30%, transparent);
}

.jack:hover .jack__label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Écran ---------- */
.display {
  display: flex;
  min-height: 0;
}

.bezel {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 1.5rem 0.75rem 0.75rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, var(--graphite-hi), var(--graphite) 8%, var(--graphite) 92%, var(--graphite-lo));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--light) 18%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shade) 60%, transparent),
    0 0 0 1px color-mix(in srgb, var(--shade) 30%, transparent),
    0 0 0 0.3rem color-mix(in srgb, var(--alu-lo) 70%, transparent),
    0 0.3rem 0.8rem -0.2rem color-mix(in srgb, var(--shade) 40%, transparent);
}

.bezel__label {
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  color: var(--oled-dim);
}

.screen {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 18rem;
  overflow: hidden;
  border-radius: 0.45rem;
  background: var(--oled);
  color: var(--oled-fg);
  font-family: var(--font-screen);
  font-size: max(12.5px, 0.98rem);
  line-height: 1.5;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--light) 6%, transparent),
    inset 0 0.4rem 1rem color-mix(in srgb, var(--oled) 90%, transparent);
}

/* Grille de pixels et reflet de la vitre, au-dessus du contenu. */
.screen::before,
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.screen::before {
  background: repeating-linear-gradient(
    0deg,
    color-mix(in srgb, var(--oled) 28%, transparent) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
}

.screen::after {
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--light) 7%, transparent) 0 22%, transparent 22.2%),
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--light) 4%, transparent), transparent 60%);
}

.screen:focus {
  outline: none;
}

.screen__status {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.9rem 0.45rem;
  border-bottom: 1px solid var(--oled-faint);
  font-size: max(11px, 0.72rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status__pattern {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin-right: auto;
  font-weight: 800;
}

.status__icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: var(--oled-accent);
  stroke-width: 1.4;
  stroke-linecap: square;
}

#status-num {
  padding: 0 0.3rem;
  background: var(--oled-fg);
  color: var(--oled);
}

.status__page {
  color: var(--oled-dim);
}

.status__transport {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--oled-dim);
}

.status__play {
  width: 0.6rem;
  height: 0.6rem;
  background: var(--oled-dim);
}

.status__vol {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.8rem;
}

.status__vol i {
  width: 3px;
  background: var(--oled-faint);
}
.status__vol i:nth-child(1) {
  height: 25%;
}
.status__vol i:nth-child(2) {
  height: 42%;
}
.status__vol i:nth-child(3) {
  height: 60%;
}
.status__vol i:nth-child(4) {
  height: 80%;
}
.status__vol i:nth-child(5) {
  height: 100%;
}
.status__vol i.is-on {
  background: var(--oled-fg);
}

.screen__view {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.panel {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--oled-dim) transparent;
}

.panel:focus-visible {
  outline: 1px dashed var(--oled-accent);
  outline-offset: -4px;
}

.panel__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page {
  padding: 0.95rem 1.15rem 1.1rem;
}

.page > * + * {
  margin-top: 0.6rem;
}

.scr-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: max(11px, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oled-dim);
  font-family: var(--font-silk);
  font-weight: 600;
}

.scr-eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  background: var(--oled-accent);
}

.scr-title {
  font-size: 1.45em;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.page .scr-title {
  margin-top: 0.3rem;
}

.scr-hero {
  font-size: 2.6em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.scr-accent {
  color: var(--oled-accent);
}

.scr-dim {
  color: var(--oled-dim);
}

.page p {
  max-width: 68ch;
  text-wrap: pretty;
}

.scr-list li {
  position: relative;
  padding-left: 1.3em;
  max-width: 70ch;
}

.scr-list li + li {
  margin-top: 0.3rem;
}

.scr-list li::before {
  content: "›";
  position: absolute;
  left: 0.2em;
  color: var(--oled-accent);
  font-weight: 800;
}

.scr-spec > div {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.4rem 0;
  border-top: 1px dotted var(--oled-faint);
}

.scr-spec > div:last-child {
  border-bottom: 1px dotted var(--oled-faint);
}

.scr-spec dt {
  color: var(--oled-dim);
  font-family: var(--font-silk);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.82em;
  letter-spacing: 0.08em;
  padding-top: 0.1em;
}

.scr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.scr-tags li {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--oled-dim);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scr-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.2rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--oled-accent);
  color: var(--oled-accent);
  font-weight: 800;
  font-size: 0.86em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.scr-link:hover,
.scr-link:focus-visible {
  background: var(--oled-accent);
  color: var(--oled);
  outline: none;
}

.scr-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Liste de projets : comme une liste de pistes. */
.scr-rows {
  border-top: 1px dotted var(--oled-faint);
}

.scr-row {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.8rem;
  width: 100%;
  min-height: 2.4rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px dotted var(--oled-faint);
  text-align: left;
  font-family: var(--font-screen);
  text-decoration: none;
}

.scr-row__num {
  color: var(--oled-accent);
  font-weight: 800;
}

.scr-row__name {
  font-weight: 800;
  text-transform: uppercase;
}

.scr-row__meta {
  color: var(--oled-dim);
  font-size: 0.82em;
  text-align: right;
}

.scr-row:hover,
.scr-row:focus-visible {
  background: var(--oled-fg);
  color: var(--oled);
  outline: none;
}

.scr-row:hover .scr-row__meta,
.scr-row:focus-visible .scr-row__meta,
.scr-row:hover .scr-row__num,
.scr-row:focus-visible .scr-row__num {
  color: var(--oled);
}

/* Fiche projet : deux colonnes quand l'écran est large. */
.project {
  display: grid;
  gap: 0.6rem 1.6rem;
}

.project__main > * + * {
  margin-top: 0.6rem;
}

.project__main .scr-title {
  margin-top: 0.3rem;
}

@container screen (min-width: 40rem) {
  .project {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
  }
}
.screen__view {
  container: screen / inline-size;
}

/* Mini séquenceur recopié sur l'écran (pattern Musique). */
.minigrid {
  display: grid;
  grid-template-columns: 2.6em repeat(16, minmax(0, 1fr));
  gap: 3px;
  max-width: 34rem;
  padding: 0.5rem 0;
  font-size: 0.72em;
  color: var(--oled-dim);
  letter-spacing: 0.08em;
}

.minigrid i {
  display: block;
  height: 0.7rem;
  border: 1px solid var(--oled-faint);
}

.minigrid i.is-on {
  background: var(--oled-fg);
  border-color: var(--oled-fg);
}

.minigrid i.is-now {
  border-color: var(--oled-accent);
}

.minigrid i.is-on.is-now {
  background: var(--oled-accent);
}

.screen__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0.9rem;
  border-top: 1px solid var(--oled-faint);
  font-size: max(10.5px, 0.66rem);
  letter-spacing: 0.1em;
  color: var(--oled-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

.scope {
  width: 9rem;
  height: 1.3rem;
}

/* Valeur d'un potentiomètre, en surimpression. */
.screen__pop {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.2rem 1rem;
  padding: 0.9rem 1.3rem 0.9rem 1rem;
  background: var(--oled);
  border: 1px solid var(--oled-fg);
  box-shadow: 0 0 0 0.35rem var(--oled);
  opacity: 0;
  transform: translate(-50%, -46%);
  transition:
    opacity 140ms linear,
    transform 180ms var(--ease-key);
  pointer-events: none;
}

.pop__arc {
  grid-row: span 2;
  width: 3.6rem;
  height: 3.6rem;
  fill: none;
  stroke-width: 5;
}

.pop__track {
  stroke: var(--oled-faint);
}

.pop__fill {
  stroke: var(--oled-accent);
  transition: stroke-dashoffset 80ms linear;
}

.pop__label {
  font-size: 0.76em;
  letter-spacing: 0.14em;
  color: var(--oled-dim);
  text-transform: uppercase;
}

.pop__value {
  font-size: 2em;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pop__value small {
  font-size: 0.4em;
  font-weight: 600;
  margin-left: 0.4em;
  color: var(--oled-dim);
  letter-spacing: 0.1em;
}

/* Démarrage de l'écran. */
.screen__boot {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  background: var(--oled);
  transition:
    opacity 260ms linear,
    visibility 0s linear 260ms;
}

.boot__logo {
  font-weight: 800;
  font-size: 2.4em;
  letter-spacing: 0.08em;
}

.boot__bar {
  width: 9rem;
  height: 3px;
  background: var(--oled-faint);
}

.boot__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--oled-accent);
  transform-origin: left;
  animation: boot-fill 620ms steps(12) both;
}

@keyframes boot-fill {
  from {
    transform: scaleX(0);
  }
}

.noscript {
  padding: 1rem 1.2rem;
}

.noscript a {
  color: var(--oled-accent);
}

/* ---------- Touches ---------- */
.key {
  --cap: var(--cap-cream);
  --cap-ink: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.key__cap {
  display: grid;
  place-items: center;
  width: var(--cap-w, 3.3rem);
  max-width: 100%;
  height: var(--cap-h, 2.3rem);
  border-radius: var(--r-key);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cap) 62%, var(--light)) 0%,
    var(--cap) 22%,
    var(--cap) 70%,
    color-mix(in srgb, var(--cap) 86%, var(--shade)) 100%
  );
  color: var(--cap-ink);
  font-family: var(--font-silk);
  font-weight: 800;
  font-size: max(12px, 0.9rem);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--light) 65%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--shade) 14%, transparent),
    0 0 0 1px color-mix(in srgb, var(--shade) 32%, transparent),
    0 2px 0 color-mix(in srgb, var(--cap) 50%, var(--shade)),
    0 3px 4px color-mix(in srgb, var(--shade) 32%, transparent);
  transform: translateY(0);
  transition:
    transform var(--t-release) var(--ease-key),
    box-shadow var(--t-release) var(--ease-key),
    filter var(--t-release);
}

.key__cap svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.key__cap svg path[d^="M8 2"],
.key__cap svg path[d^="M4 2"] {
  fill: none;
}

.key:hover .key__cap {
  filter: brightness(1.04);
}

.key:active .key__cap,
.key.is-down .key__cap {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--light) 40%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shade) 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--shade) 38%, transparent),
    0 0 0 color-mix(in srgb, var(--cap) 50%, var(--shade)),
    0 1px 1px color-mix(in srgb, var(--shade) 30%, transparent);
  transition-duration: var(--t-press);
}

.key:focus-visible {
  outline: none;
}

.key:focus-visible .key__cap {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.key__label {
  white-space: nowrap;
}

.key--graphite {
  --cap: var(--graphite-hi);
  --cap-ink: var(--cap-ink-light);
}

.key--play {
  --cap: var(--signal);
  --cap-ink: var(--ink);
}

/* Touche verrouillée (pattern choisi, lecture en cours) : reste un peu enfoncée. */
[aria-selected="true"] > .key__cap,
.key--play[aria-pressed="true"] > .key__cap,
.key--mute[aria-pressed="true"] > .key__cap,
.key--tiny[aria-pressed="true"] > .key__cap {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--light) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shade) 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--shade) 38%, transparent),
    0 1px 0 color-mix(in srgb, var(--cap) 50%, var(--shade)),
    0 2px 2px color-mix(in srgb, var(--shade) 28%, transparent);
}

/* Rangée des patterns et des pages. */
.tabsrow {
  display: flex;
  align-items: flex-end;
  gap: 1.2rem;
}

.pagekeys {
  display: flex;
  gap: 0.5rem;
  padding-right: 1.2rem;
  border-right: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}

.key--small {
  --cap-w: 2.6rem;
  --cap-h: 2.1rem;
}

.patterns {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.55rem;
  flex: 1;
}

.key--pattern {
  --cap-w: 100%;
  --cap-h: 2.1rem;
}

.key--pattern .key__label {
  font-size: max(9px, 0.6rem);
}

/* ---------- Potentiomètres ---------- */
.controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 0.6rem;
}

.knob-unit {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.knob {
  --turn: 0.5;
  position: relative;
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 50%;
  touch-action: none;
  cursor: ns-resize;
}

.knob__scale {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -136deg, var(--ink-soft) 0deg 2deg, transparent 2deg 27deg);
  -webkit-mask:
    radial-gradient(circle, transparent 0 80%, var(--shade) 81% 97%, transparent 98%),
    conic-gradient(var(--shade) 0 137deg, transparent 137deg 223deg, var(--shade) 223deg);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle, transparent 0 80%, var(--shade) 81% 97%, transparent 98%),
    conic-gradient(var(--shade) 0 137deg, transparent 137deg 223deg, var(--shade) 223deg);
  mask-composite: intersect;
}

.knob__body {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(var(--alu-hi) 0 5deg, var(--alu-lo) 5deg 10deg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--shade) 35%, transparent),
    0 0.2rem 0 color-mix(in srgb, var(--alu-side) 80%, transparent),
    0 0.35rem 0.6rem color-mix(in srgb, var(--shade) 38%, transparent);
  transform: rotate(calc(-135deg + var(--turn) * 270deg));
  transition: transform 60ms linear;
}

/* Chapeau usiné : stries concentriques, éclairage fixe (il ne tourne pas avec le bouton). */
.knob__body::before {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, color-mix(in srgb, var(--light) 50%, transparent) 0 1px, transparent 1px 2.5px),
    radial-gradient(circle at 50% 50%, var(--knob-cap, var(--alu)) 0 60%, color-mix(in srgb, var(--knob-cap, var(--alu)) 85%, var(--shade)));
  box-shadow:
    inset 0 1px 1px color-mix(in srgb, var(--light) 80%, transparent),
    inset 0 -1px 2px color-mix(in srgb, var(--shade) 25%, transparent);
}

.knob__mark {
  position: absolute;
  z-index: 1;
  top: 13%;
  left: 50%;
  width: 0.2rem;
  height: 30%;
  margin-left: -0.1rem;
  border-radius: 0.1rem;
  background: var(--ink);
}

.knob--signal {
  --knob-cap: var(--signal);
}

.knob--signal .knob__mark {
  background: var(--light);
}

.knob:focus-visible {
  outline: none;
}

.knob:focus-visible .knob__body {
  outline: 2px solid var(--signal);
  outline-offset: 0.3rem;
}

.knob-unit__label {
  margin-top: 0.1rem;
}

.key--mute {
  --cap-w: 2.6rem;
  --cap-h: 2.2rem;
  align-self: center;
}

/* ---------- Pads ---------- */
.pads {
  display: grid;
  gap: 0.6rem;
}

.pads__title {
  color: var(--ink-soft);
}

.pads__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.pad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.pad__well {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0.22rem;
  border-radius: calc(var(--r-pad) + 0.22rem);
  background: linear-gradient(180deg, var(--alu-edge), var(--alu-lo));
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--shade) 40%, transparent),
    0 1px 0 color-mix(in srgb, var(--light) 90%, transparent);
}

.pad__rubber {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pad);
  background:
    radial-gradient(90% 70% at 42% 25%, color-mix(in srgb, var(--rubber) 60%, var(--light)), transparent 70%),
    linear-gradient(180deg, var(--rubber), var(--rubber-lo));
  box-shadow:
    inset 0 -0.2rem 0.25rem color-mix(in srgb, var(--rubber-lo) 90%, var(--shade)),
    inset 0 1px 0 var(--light),
    0 0.12rem 0.2rem color-mix(in srgb, var(--shade) 35%, transparent);
  transition:
    transform var(--t-release) var(--ease-key),
    box-shadow var(--t-release),
    background var(--t-screen);
}

.pad:active .pad__rubber {
  transform: scale(0.955) translateY(1px);
  box-shadow:
    inset 0 -0.08rem 0.15rem color-mix(in srgb, var(--rubber-lo) 90%, var(--shade)),
    inset 0 1px 0 var(--light),
    0 0 0.05rem color-mix(in srgb, var(--shade) 35%, transparent);
  transition-duration: var(--t-press);
}

.pad.is-lit .pad__rubber {
  background:
    radial-gradient(70% 70% at 50% 55%, color-mix(in srgb, var(--signal) 42%, var(--rubber)), transparent 75%),
    radial-gradient(90% 70% at 42% 25%, color-mix(in srgb, var(--rubber) 60%, var(--light)), transparent 70%),
    linear-gradient(180deg, var(--rubber), var(--rubber-lo));
  box-shadow:
    inset 0 -0.2rem 0.25rem color-mix(in srgb, var(--rubber-lo) 80%, var(--signal)),
    inset 0 0 0 1px color-mix(in srgb, var(--signal) 50%, transparent),
    inset 0 1px 0 var(--light),
    0 0 1rem color-mix(in srgb, var(--signal) 40%, transparent);
}

.pad.is-hit .pad__rubber {
  animation: pad-hit 300ms var(--ease-key);
}

@keyframes pad-hit {
  0% {
    transform: scale(0.94) translateY(1px);
  }
  55% {
    transform: scale(1.015);
  }
  100% {
    transform: none;
  }
}

.pad:focus-visible {
  outline: none;
}

.pad:focus-visible .pad__well {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.pad__label {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: max(9px, 0.56rem);
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.pad__label b {
  color: var(--signal-ink);
  font-weight: 800;
}

/* ---------- Grille de haut-parleur et mode d'emploi ---------- */
.grille {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.2rem;
  align-items: stretch;
  min-height: 0;
}

.grille__holes {
  min-height: 3rem;
  border-radius: 0.8rem;
  background: radial-gradient(
      circle,
      var(--graphite-lo) 0 0.13rem,
      color-mix(in srgb, var(--alu-edge) 80%, transparent) 0.15rem,
      transparent 0.19rem
    )
    center / 0.62rem 0.62rem;
  -webkit-mask: radial-gradient(closest-side, var(--shade) 70%, transparent);
  mask: radial-gradient(closest-side, var(--shade) 70%, transparent);
}

.manual {
  align-self: center;
  display: grid;
  gap: 0.35rem;
  font-size: max(11px, 0.72rem);
  color: var(--ink-soft);
}

.manual > div {
  display: grid;
  grid-template-columns: 4.3rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
}

.manual dt {
  font-stretch: 75%;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Séquenceur ---------- */
.sequencer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "transport steps";
  gap: 0.55rem 1.2rem;
}

.sequencer__title {
  grid-area: title;
  color: var(--ink-soft);
}

.transport {
  grid-area: transport;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 1rem;
}

.key--play,
.key--stop {
  --cap-w: 4.6rem;
  --cap-h: 2.9rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
}

.key--play .led {
  grid-column: 1 / -1;
}

.key--play .key__cap,
.key--stop .key__cap {
  grid-column: 1 / -1;
}

.key--play .key__label,
.key--stop .key__label {
  grid-column: 1 / -1;
  justify-self: center;
}

.key--stop {
  grid-template-rows: 0.5rem auto auto;
}

.key--stop .key__cap {
  grid-row: 2;
}

.key--stop .key__label {
  grid-row: 3;
}

.key--play .key__cap svg,
.key--stop .key__cap svg {
  width: 1rem;
  height: 1rem;
}

.seqpages {
  display: none;
  gap: 0.5rem;
}

.key--tiny {
  --cap-w: 2.6rem;
  --cap-h: 2rem;
}

.steps {
  grid-area: steps;
  display: grid;
  grid-template-columns: 3.4rem repeat(16, minmax(0, 1fr));
  align-items: center;
  gap: 0.34rem 0.28rem;
}

.steps__led {
  justify-self: center;
  width: 0.42rem;
  height: 0.42rem;
}

.steps__track {
  font-stretch: 75%;
  font-weight: 800;
  font-size: max(10px, 0.66rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.05;
}

.steps__track small {
  display: block;
  font-weight: 600;
  font-size: 0.85em;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}

.step {
  --cap: var(--cap-red);
  display: block;
  height: 2.05rem;
  min-width: 0;
}

.step[data-group="1"] {
  --cap: var(--cap-orange);
}
.step[data-group="2"] {
  --cap: var(--cap-yellow);
}
.step[data-group="3"] {
  --cap: var(--cap-cream);
}

.step .key__cap {
  position: relative;
  width: 100%;
  height: 100%;
  place-items: start;
  padding: 0.28rem 0.32rem;
}

/* LED de pas : une fenêtre sombre sur la touche, blanc chaud quand le pas joue. */
.step .led {
  width: 0.95rem;
  height: 0.3rem;
  border-radius: 0.15rem;
  background: color-mix(in srgb, var(--shade) 42%, var(--cap));
  box-shadow:
    inset 0 1px 1px color-mix(in srgb, var(--shade) 50%, transparent),
    0 1px 0 color-mix(in srgb, var(--light) 45%, transparent);
}

.step.is-on .led {
  background: linear-gradient(180deg, var(--light), var(--led-hot) 60%, var(--led-glow));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--signal-deep) 55%, transparent),
    0 0 0.35rem 0.05rem color-mix(in srgb, var(--led-hot) 90%, transparent),
    0 0 0.8rem 0.1rem color-mix(in srgb, var(--led-glow) 70%, transparent);
}
.step.is-now .key__cap {
  filter: brightness(1.12) saturate(1.1);
}

.step.is-now.is-on .led {
  box-shadow:
    0 0 0 1px var(--light),
    0 0 0.5rem 0.15rem var(--led-hot),
    0 0 1.2rem 0.3rem var(--led-glow);
}

/* ---------- Clavier ---------- */
.piano {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.55rem;
}

.piano__title {
  color: var(--ink-soft);
}

.piano__keys {
  --cols: 22;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: 0.3rem 0.3rem;
  min-height: 5.6rem;
  padding: 0.35rem;
  margin: -0.35rem;
  border-radius: var(--r-key);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.piano__keys:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 0;
}

.pkey {
  --cap: var(--cap-cream);
  --cap-ink: var(--ink-soft);
  display: block;
  min-width: 0;
  grid-row: 2;
}

.pkey--sharp {
  --cap: var(--graphite-hi);
  --cap-ink: var(--cap-ink-light);
  grid-row: 1;
}

.pkey .key__cap {
  width: 100%;
  height: 100%;
  place-items: end center;
  padding-bottom: 0.2rem;
  font-size: max(9px, 0.58rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pkey.is-down .key__cap {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--signal) 55%, var(--cap)),
    color-mix(in srgb, var(--signal) 35%, var(--cap))
  );
}

/* ---------- Poche et tablette ---------- */
@media (min-width: 768px) {
  .u-narrow {
    display: none;
  }
}

@media (max-width: 1023px), (max-height: 599px) {
  .screen {
    height: 26rem;
  }
}

@media (max-width: 767px) {
  .machine {
    border-radius: 1.4rem;
  }

  .screw {
    width: 0.8rem;
    height: 0.8rem;
  }

  .nameplate {
    padding: 0 1rem;
  }

  .nameplate__model {
    font-size: 1.9rem;
  }

  .nameplate__name {
    font-size: 11px;
  }

  .nameplate__sub {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }

  .u-wide {
    display: none;
  }

  .jacks {
    justify-content: center;
    padding-top: 0.2rem;
  }

  .bezel {
    padding: 1.3rem 0.5rem 0.5rem;
    border-radius: 0.9rem;
  }

  .screen {
    height: clamp(19rem, 48svh, 27rem);
    font-size: 13.5px;
  }

  .screen__status {
    gap: 0.6rem;
    padding-inline: 0.7rem;
  }

  .status__vol {
    display: none;
  }

  .page {
    padding: 0.8rem 0.85rem 1rem;
  }

  .scr-hero {
    font-size: 2em;
  }

  .scr-spec > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .scr-row {
    grid-template-columns: 2em minmax(0, 1fr);
  }

  .scr-row__meta {
    grid-column: 2;
    text-align: left;
  }

  .tabsrow {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }

  .patterns {
    gap: 0.3rem;
  }

  .key--pattern {
    --cap-h: 2.75rem;
  }

  .key--pattern .key__label {
    font-size: 8.5px;
    font-stretch: 62%;
    letter-spacing: 0.06em;
  }

  .pagekeys {
    order: 2;
    padding: 0;
    border: 0;
  }

  .pagekeys .key {
    flex: 1;
    flex-direction: row;
    justify-content: center;
  }

  .pagekeys .key--small {
    --cap-w: 100%;
    --cap-h: 2.75rem;
  }

  .pagekeys .key__label {
    display: none;
  }

  .pads__grid {
    gap: 0.5rem;
  }

  .sequencer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "transport"
      "steps";
    padding: 0.8rem 0.7rem 0.9rem;
  }

  .transport {
    flex-direction: row;
    align-items: flex-end;
    padding-top: 0;
  }

  .key--play,
  .key--stop {
    --cap-w: 4.2rem;
    --cap-h: 2.75rem;
  }

  .seqpages {
    display: flex;
    margin-left: auto;
  }

  .key--tiny {
    --cap-h: 2.75rem;
  }

  .step {
    height: 2.75rem;
  }

  .controls {
    padding-inline: 0.5rem;
  }

  .knob {
    width: 3.9rem;
    height: 3.9rem;
  }

  .key--mute {
    --cap-h: 2.75rem;
  }

  .piano__keys {
    min-height: 7.5rem;
  }

  .pkey .key__cap {
    font-size: 0;
  }
}