/* Aperçu web de VIBRATOR — piste C « ANODISÉ ». Polices : celles du site (Archivo, IBM Plex Mono) ;
   la maquette utilise Archivo + DM Mono. Toutes les cotes en unités design (scène 1280 × 900). */
.vb-root {
  --vb-panel: #e6c9d4; --vb-ink: #141114; --vb-light: #f2e6eb; --vb-mint: #18c48f; --vb-dimlift: 0;   /* thème : posé par l'interface */
  --vb-body: #1b171a; --vb-cap: #262024; --vb-pointer: #f2e6eb; --vb-bed: #141114;
  --vb-sans: 'Archivo Variable', 'Archivo', system-ui, sans-serif;
  --vb-mono: 'IBM Plex Mono', 'DM Mono', Menlo, Consolas, monospace;
  position: relative;
  overflow: hidden;
  background: var(--vb-panel);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.vb-stage {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  background: var(--vb-panel);
  color: var(--vb-ink);
  font-family: var(--vb-mono);
}
.vb-stage > * { position: absolute; box-sizing: border-box; }

/* Filets (masque exporté du plugin), à la couleur d'encre du thème */
.vb-lines { left: 0; top: 0; width: 100%; height: 100%; background: var(--vb-ink); pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* Marque + en-têtes de modules */
.vb-logo { display: flex; align-items: center; padding-left: 17px; }
.vb-nerve-link { display: block; flex: none; margin-right: 18px; pointer-events: auto; cursor: pointer; }
.vb-nerve { display: block; }
.vb-name { display: flex; flex-direction: column; align-items: flex-start; background: var(--vb-ink); color: var(--vb-panel);
  border-radius: 5px; padding: 7px 11px; }   /* plaque à la couleur du logo NERVE */
.vb-word { display: flex; }
.vb-letter { display: inline-block; font-family: var(--vb-sans); font-weight: 800; font-stretch: 125%; font-size: 22px; line-height: 18px; letter-spacing: 0.04em; }
.vb-letter:last-child { margin-right: -0.04em; }
.vb-sub { margin-top: 3px; font-size: 8px; line-height: 8px; white-space: nowrap; }
.vb-mhead { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; pointer-events: none; }
.vb-code, .vb-tag { font-size: 9.5px; }
.vb-title { font-family: var(--vb-sans); font-weight: 800; font-stretch: 118%; font-size: 13px; letter-spacing: 0.06em; }
.vb-tag { margin-left: auto; }
.vb-mhead.tight { gap: 5px; }
.vb-mhead.tight .vb-title { font-stretch: 100%; letter-spacing: 0.03em; }

/* Légende + valeur (cellules) */
.vb-stack { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.vb-cap { font-size: 9px; letter-spacing: 0.14em; white-space: nowrap; }
.vb-val { font-size: 15px; white-space: nowrap; }
.vb-val13 { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.vb-inline { display: flex; align-items: center; gap: 6px; }
.vb-inline .vb-cap { font-size: 10px; letter-spacing: 0; }
.vb-cell { cursor: pointer; }
.vb-dragcell { cursor: ns-resize; }
.vb-cell:hover, .vb-btn:not(.vb-off):hover, .vb-preset:hover { background: color-mix(in srgb, var(--vb-ink) 6%, transparent); }

/* Pastille de valeur */
.vb-pill { display: inline-block; padding: 0 5px; background: var(--vb-ink); color: var(--vb-light); font-size: 10px; line-height: 14px; white-space: nowrap; }
.vb-pillrow { display: flex; justify-content: center; }

/* Knob */
.vb-knob { display: flex; flex-direction: column; align-items: center; }
.vb-knob svg { cursor: ns-resize; }
.vb-klabel { width: 100%; text-align: center; font-family: var(--vb-sans); font-weight: 700; font-stretch: 110%; font-size: 10.5px; line-height: 14px; letter-spacing: 0.06em; white-space: nowrap; }
.vb-knob .vb-klabel { margin-top: 1px; }
.vb-knob.dim .vb-klabel, .vb-knob.dim .vb-pill { opacity: calc(0.45 + 0.55 * var(--vb-dimlift)); }   /* grisés : vcol::dimmed */

/* Liste verticale */
.vb-list { display: flex; flex-direction: column; align-items: center; }
.vb-rows { border: 1px solid var(--vb-ink); padding: 0; }
.vb-row { display: flex; align-items: center; gap: 6px; height: 15px; padding-left: 7px; font-size: 10px; cursor: pointer; white-space: nowrap; }
.vb-row.on { color: var(--vb-light); }
.vb-led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--vb-ink); box-sizing: border-box; flex: none; }
.vb-row.on .vb-led, .vb-led.on { border: 0; background: var(--vb-mint); box-shadow: 0 0 5px var(--vb-mint); }
.vb-lcap { margin-top: 6px; }

/* Relief discret des boutons (listes, banques, octave, RUN), comme drawKeyCap / drawKeyPressed du plugin. */
.vb-key {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(20, 17, 20, 0.25);
}
.vb-row.on, .vb-banks span.on, .vb-octave span.mid {
  background: var(--vb-ink);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.vb-runkey { border: 1px solid var(--vb-ink); justify-content: space-between; padding: 6px 10px; box-sizing: border-box; }
/* RUN : légende et valeur à marges égales (comme le plugin), pictogramme ■ / ▶ à la hauteur des capitales */
.vb-runkey .vb-cap { font-size: 8.5px; line-height: 7px; }
.vb-runval { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 10px; }
.vb-runval::before { content: ''; width: 9px; height: 9px; background: var(--vb-ink); flex: none; }
.vb-runval.on::before { width: 8px; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Banques, octave */
.vb-banks, .vb-octave { display: flex; border: 1px solid var(--vb-ink); font-size: 11px; }
.vb-banks span { flex: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vb-banks span + span { border-left: 1px solid var(--vb-ink); }
.vb-banks span.on { color: var(--vb-light); }
.vb-octave span { flex: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vb-octave span.mid { flex: 2; color: var(--vb-light); cursor: default; }

/* Molettes */
.vb-wheel { display: flex; flex-direction: column; align-items: center; gap: 0; }
.vb-wheel svg { cursor: ns-resize; }
.vb-wheel .vb-klabel { margin-top: 4px; }
.vb-wheel .vb-pillrow { margin-top: 2px; }

/* Séquenceur, clavier */
.vb-canvas { cursor: pointer; }
.vb-keys svg { display: block; cursor: pointer; }
.vb-knum { font-family: var(--vb-mono); font-size: 9.5px; fill: var(--vb-ink); pointer-events: none; }
.vb-kname { font-family: var(--vb-mono); font-size: 10px; fill: #4a4045; pointer-events: none; }  /* gravé sur l'alu des touches */

/* Header */
.vb-preset { display: flex; flex-direction: column; justify-content: center; padding: 0 14px; cursor: pointer; }
.vb-preset .vb-cap { font-size: 9.5px; }
.vb-pname { font-family: var(--vb-sans); font-weight: 700; font-stretch: 106%; font-size: 20px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-btn { display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.08em; cursor: pointer; }
.vb-btn.vb-stack { align-items: flex-start; letter-spacing: 0; }
.vb-off { opacity: calc(0.3 + 0.7 * var(--vb-dimlift)); cursor: default; }
.vb-arrow::before { content: ''; border: 6px solid transparent; }
.vb-arrow.left::before { border-right: 10.5px solid var(--vb-ink); border-left: 0; }
.vb-arrow.right::before { border-left: 10.5px solid var(--vb-ink); border-right: 0; }

/* Menu des presets (hors scène, non mis à l'échelle) */
.vb-menu { position: absolute; z-index: 20; width: 500px; column-count: 2; column-gap: 0; column-rule: 1px solid #2c272c; background: #141114; color: #f2e6eb;
  font-family: 'IBM Plex Mono', Menlo, monospace; font-size: 12px; line-height: 15px; padding: 4px 0; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.vb-menu-h, .vb-menu-i { break-inside: avoid; }
.vb-menu-h { break-after: avoid; padding: 6px 14px 3px; color: #18c48f; font-size: 11px; letter-spacing: 0.14em; }
.vb-menu-i { padding: 1px 14px 1px 24px; cursor: pointer; }
.vb-menu-i:hover { background: #18c48f; color: #141114; }
.vb-menu-i.on::before { content: '✓'; margin-left: -14px; width: 14px; display: inline-block; }

/* Tooltip (hors scène) */
.vb-tip { position: absolute; z-index: 30; max-width: 300px; padding: 8px 11px; background: rgba(20, 17, 20, 0.96); border-left: 2px solid #18c48f;
  color: #f2e6eb; font: 12.5px/1.4 system-ui, sans-serif; pointer-events: none; white-space: pre-line; }
.vb-tip b { display: block; color: #18c48f; font: 12px 'IBM Plex Mono', Menlo, monospace; letter-spacing: 0.04em; }