/* ==========================================================================
   Chill Zone — stili del componente
   Classi e variabili prefissate con "cz-" per non collidere col sito ospitante.
   ========================================================================== */

.cz-root{
  --cz-line: #bdb5d3;          /* corda a riposo */
  --cz-line-active: #6a35e8;   /* corda in vibrazione */
  --cz-accent: #6a35e8;        /* viola: selezione, azione principale */
  --cz-on-accent: #ffffff;     /* testo sopra il viola */
  --cz-bg: #ffffff;            /* sfondo della pagina */
  --cz-fg: #15101f;            /* testo */
  --cz-muted: #5e5873;         /* etichette e suggerimenti */
  --cz-rule: #d9d4e6;          /* bordi sottili */
  --cz-ink: #15101f;           /* chitarra: contorni e parti scure */
  --cz-string: #ffffff;        /* chitarra: colore delle corde (di solito lo sfondo della pagina) */
  --cz-rec: #d62b52;           /* stato di registrazione */
  --cz-on-rec: #ffffff;
  --cz-font: 'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 420px;
  color: var(--cz-fg);
  font-family: var(--cz-font);
}

.cz-stage{
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
}

.cz-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;          /* su touch il dito suona le corde invece di scorrere la pagina */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; /* niente menu di selezione con il tocco prolungato su iOS */
  -webkit-user-select: none;
  user-select: none;
}

.cz-line{
  fill: none;
  stroke: var(--cz-line);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke .12s ease;
}
.cz-line.cz-active{ stroke: var(--cz-line-active); stroke-width: 1.9; }
.cz-line.cz-muted{ stroke-dasharray: 2 7; opacity: .55; }

.cz-label{
  position: absolute;
  left: 0;
  transform: translateY(-125%);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--cz-muted);
  pointer-events: none;
  transition: color .12s ease;
}
.cz-label.cz-hit{ color: var(--cz-accent); }

.cz-hint{
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  color: var(--cz-muted);
  pointer-events: none;
}
.cz-hint[hidden]{ display: none; }

/* senza questa regola un display:flex dell'autore batterebbe l'attributo hidden */
.cz-root [hidden]{ display: none !important; }

/* ---- Zone di accordo: fasce verticali sotto le corde ---- */
.cz-zones{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cz-zone{
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--cz-rule);
  transition: background-color .12s ease;
}
.cz-zone:first-child{ border-left: 0; }
.cz-zone.cz-zone-on{
  background: color-mix(in srgb, var(--cz-accent) 9%, transparent);
}
.cz-zone-name{
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--cz-muted);
  transition: color .12s ease;
}
.cz-zone.cz-zone-on .cz-zone-name{ color: var(--cz-accent); font-weight: 600; }

/* ---- Barra: accordi + registratore ---- */
.cz-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--cz-rule);
}
.cz-left{ display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; min-width: 0; }
.cz-chords, .cz-transport{ display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

/* interruttore Zone / Manuale: capsula unica con il segmento attivo pieno */
.cz-mode{
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--cz-rule);
  border-radius: 999px;
}
.cz-mode .cz-btn{ border-color: transparent; }

.cz-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--cz-rule);
  background: transparent;
  color: var(--cz-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.cz-btn:hover:not(:disabled){ border-color: var(--cz-accent); color: var(--cz-accent); }
.cz-mode .cz-btn:hover:not(:disabled){ border-color: transparent; }
.cz-btn:focus-visible{ outline: 2px solid var(--cz-accent); outline-offset: 2px; }
.cz-btn:disabled{ opacity: .4; cursor: default; }

/* selezione: viola pieno */
.cz-chords .cz-btn[aria-pressed="true"],
.cz-mode .cz-btn[aria-pressed="true"],
.cz-chords .cz-btn[aria-pressed="true"]:hover,
.cz-mode .cz-btn[aria-pressed="true"]:hover{
  background: var(--cz-accent);
  border-color: var(--cz-accent);
  color: var(--cz-on-accent);
}
/* azione principale: Registra */
.cz-transport .cz-btn:first-child:not(:disabled){
  background: var(--cz-accent);
  border-color: var(--cz-accent);
  color: var(--cz-on-accent);
}
.cz-transport .cz-btn:first-child:hover:not(:disabled){ opacity: .88; color: var(--cz-on-accent); }
.cz-key{
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: .6;
}

.cz-transport .cz-btn.cz-rec-on,
.cz-transport .cz-btn.cz-rec-on:hover:not(:disabled){
  background: var(--cz-rec);
  border-color: var(--cz-rec);
  color: var(--cz-on-rec);
  opacity: 1;
}

/* ---- Alternativa per tastiera e lettori di schermo ----
   Un pulsante per corda: nascosto alla vista, ma raggiungibile con Tab e con
   VoiceOver / TalkBack. Quando prende il focus compare come una riga di pulsanti. */
.cz-sr{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cz-sr:focus-within{
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
}
.cz-sr-live{ margin: 0; }
.cz-sr:focus-within .cz-sr-live{ flex-basis: 100%; font-size: 12px; color: var(--cz-muted); }

.cz-zone-name, .cz-label{ -webkit-user-select: none; user-select: none; }
.cz-btn{ touch-action: manipulation; }   /* niente attesa del doppio tap per lo zoom */

/* ---- Touch: bersagli da almeno 44px, niente suggerimenti da tastiera ---- */
@media (pointer: coarse){
  .cz-btn{ min-height: 44px; padding: 0 18px; font-size: 14px; }
  .cz-key{ display: none; }
  .cz-zone-name{ font-size: 13px; bottom: 4px; }
  .cz-bar{ gap: 12px; }
}

/* ---- Schermi stretti: i gruppi vanno a capo a tutta larghezza ---- */
@media (max-width: 560px){
  .cz-left, .cz-transport{ width: 100%; }
  .cz-chords{ flex: 1 1 100%; }
}

/* ---- Telefono in orizzontale: il palco non deve riempire tutto lo schermo,
   altrimenti resta un'area per scorrere la pagina ---- */
@media (max-height: 520px){
  .cz-root{ min-height: 0; }
  .cz-stage{ min-height: 200px; }
}

/* ---- Messaggio di stato (salvataggio, esportazione) ---- */
.cz-status{
  margin: 0;
  padding-top: 8px;
  min-height: 1.4em;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cz-muted);
}
@media (pointer: coarse){ .cz-status{ font-size: 13px; } }

/* ==========================================================================
   Skin "guitar": chitarra a pagina intera. Si attiva con { skin: 'guitar' }.
   ========================================================================== */
.cz-guitar{ min-height: 0; }
.cz-guitar .cz-stage{ min-height: 0; }
.cz-guitar .cz-svg{ cursor: default; }

/* disegno: viola pieno con contorni in inchiostro, come il modello */
.cz-art-a{ fill: var(--cz-accent); }
.cz-art-i{ fill: var(--cz-ink); }
.cz-art-n{ fill: none; }
.cz-art-s{ stroke: var(--cz-ink); stroke-width: 1.6px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* corde: spessore in pixel dello schermo, qualunque sia la scala della chitarra */
.cz-guitar .cz-line{
  stroke: var(--cz-string);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.cz-guitar .cz-line.cz-active{ stroke: var(--cz-string); stroke-width: 2.4px; }
.cz-guitar .cz-line.cz-muted{ opacity: .5; }

/* fasce degli accordi sopra la chitarra, trasparenti finché non sono attive */
.cz-zone-band{ fill: transparent; stroke: none; transition: fill .12s ease; pointer-events: none; }
.cz-zone-band.cz-zone-on{ fill: color-mix(in srgb, var(--cz-string) 22%, transparent); }

.cz-zone-tag{
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 5px 12px;
  border: 1px solid var(--cz-rule);
  border-radius: 999px;
  background: var(--cz-bg);
  color: var(--cz-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.cz-zone-tag.cz-zone-on{ background: var(--cz-ink); border-color: var(--cz-ink); color: var(--cz-bg); }   /* il viola si confonderebbe col corpo della chitarra */

/* angolo libero in basso a destra: suggerimento e nome dell'accordo */
.cz-corner{
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
  text-align: right;
}
.cz-guitar .cz-hint{ position: static; max-width: 24ch; }
.cz-chordname{
  font-size: clamp(56px, 12vw, 148px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--cz-accent);
  user-select: none;
  -webkit-user-select: none;
}

/* ==========================================================================
   Scelta dell'accordo (nota base + tipo) e capotasto
   ========================================================================== */
.cz-chords{
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  min-width: 0;
}
.cz-chord-group{ display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.cz-chip{ min-height: 30px; min-width: 34px; padding: 0 10px; font-size: 12px; }
@media (pointer: coarse){ .cz-chip{ min-height: 40px; min-width: 40px; font-size: 13px; } }

/* selettore del capotasto: capsula con − valore + */
.cz-capo{ align-items: center; }
.cz-capo-label{ padding: 0 8px 0 12px; font-size: 13px; font-weight: 500; color: var(--cz-muted); }
.cz-capo-val{ min-width: 1.4ch; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cz-step{ min-width: 30px; min-height: 28px; padding: 0; font-size: 16px; }
@media (pointer: coarse){ .cz-step{ min-width: 44px; min-height: 44px; } }

/* chitarra: tasti, barra del capotasto e il pin da trascinare */
.cz-fret{ stroke: var(--cz-string); stroke-opacity: .35; stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.cz-capo-bar{ fill: var(--cz-accent); stroke: var(--cz-bg); stroke-width: 1.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
.cz-capo-pin{
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  padding: 8px 14px;
  border: 1px solid var(--cz-rule);
  border-radius: 999px;
  background: var(--cz-bg);
  color: var(--cz-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.cz-capo-pin:hover{ border-color: var(--cz-accent); color: var(--cz-accent); }
.cz-capo-pin.cz-capo-on{ background: var(--cz-accent); border-color: var(--cz-accent); color: var(--cz-on-accent); }
.cz-capo-pin.cz-dragging{ cursor: grabbing; }
.cz-capo-pin:focus-visible{ outline: 2px solid var(--cz-accent); outline-offset: 3px; }
@media (pointer: coarse){ .cz-capo-pin{ padding: 14px 18px; font-size: 14px; } }
.cz-capoinfo{ min-height: 1.3em; font-size: 14px; font-weight: 500; color: var(--cz-muted); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Suggerimento ("coachmark"): un giro di accordi da provare
   ========================================================================== */
.cz-suggest{ border-color: var(--cz-accent); color: var(--cz-accent); }
.cz-suggest[aria-expanded="true"],
.cz-suggest[aria-expanded="true"]:hover:not(:disabled){ background: var(--cz-accent); border-color: var(--cz-accent); color: var(--cz-on-accent); }
.cz-coach{
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4;
  width: min(300px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  border: 1px solid var(--cz-accent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--cz-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--cz-fg);
  font-size: 13px;
  line-height: 1.4;
  box-sizing: border-box;
}
.cz-coach[hidden]{ display: none; }
.cz-coach p{ margin: 0; }
.cz-coach-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cz-coach-eyebrow{ font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cz-accent); }
.cz-coach-x{
  width: 32px; height: 32px; margin: -6px -8px -6px 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--cz-muted); font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.cz-coach-x:hover{ color: var(--cz-fg); }
.cz-coach-x:focus-visible{ outline: 2px solid var(--cz-accent); outline-offset: 2px; }
.cz-coach-chords{ display: flex; flex-wrap: wrap; gap: 6px; }
.cz-coach-chip{ min-width: 48px; min-height: 40px; font-size: 16px; font-weight: 600; }
.cz-coach-chip.cz-cur{ background: var(--cz-accent); border-color: var(--cz-accent); color: var(--cz-on-accent); }
.cz-coach-chip.cz-next:not(.cz-cur){ border-style: dashed; border-color: var(--cz-accent); color: var(--cz-accent); }
.cz-coach-songs{ font-weight: 500; }
.cz-coach-how{ color: var(--cz-muted); }
.cz-coach-rhythm{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cz-coach-label{ margin-right: 4px; color: var(--cz-muted); }
.cz-arrow{ font-size: 18px; font-weight: 600; line-height: 1; }
.cz-arrow.cz-up{ color: var(--cz-muted); opacity: .6; }
.cz-coach-again{ align-self: flex-start; }
/* su schermi larghi la chitarra lascia una colonna alla scheda, così non si sovrappongono mai */
@media (min-width: 761px){
  .cz-coach-open .cz-svg{ width: calc(100% - 320px); }
}
@media (max-width: 560px){
  /* su telefono: scheda compatta in basso, la chitarra resta visibile sopra */
  .cz-coach{ width: 100%; top: auto; bottom: 0; gap: 6px; padding: 10px 12px 12px; border-radius: 14px; }
  .cz-coach-how{ display: none; }
  .cz-coach-chip{ min-height: 36px; min-width: 44px; font-size: 15px; }
  .cz-coach-songs{ font-size: 12px; }
  .cz-coach-again{ display: none; }
}

/* ==========================================================================
   Accordi rapidi con il numero del tasto (Manuale) e ritmo (Zone)
   ========================================================================== */
.cz-quick-group{ flex: 1 1 100%; }
.cz-quick{ gap: 7px; padding-left: 5px; }
.cz-key{
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 5px;
  border: 1px solid currentColor;
  font-size: 10px; font-weight: 600; line-height: 1;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
.cz-quick[aria-pressed="true"] .cz-key{ opacity: 1; }
@media (pointer: coarse){ .cz-key{ display: none; } .cz-quick{ padding-left: 10px; } }   /* sul touch non c'è tastiera */

/* ritmo nella scheda: frecce grandi quanto gli accordi */
.cz-coach-rhythm{ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
.cz-coach-rhead{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cz-coach-rhead .cz-coach-label{ margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cz-muted); }
.cz-coach-next{ border: 0; background: transparent; color: var(--cz-accent); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; padding: 4px 0; }
.cz-coach-next:hover{ text-decoration: underline; }
.cz-coach-next:focus-visible{ outline: 2px solid var(--cz-accent); outline-offset: 2px; }
.cz-beatrow{
  display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 3px;
  padding: 6px; margin: 0 -6px;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--cz-fg); font: inherit; text-align: left;
}
.cz-beatrow .cz-arrow{
  display: grid; place-items: center;
  width: 28px; height: 44px; flex: none;
  border-radius: 9px;
  border: 1px solid var(--cz-rule);
  font-size: 26px; font-weight: 600; line-height: 1;
  transition: background-color .1s ease, color .1s ease, border-color .1s ease, transform .1s ease;
}
.cz-beatrow .cz-arrow.cz-up{ color: var(--cz-muted); border-color: transparent; background: color-mix(in srgb, var(--cz-muted) 14%, transparent); opacity: 1; }
.cz-beatrow .cz-arrow.cz-beat{ background: var(--cz-accent); border-color: var(--cz-accent); color: var(--cz-on-accent); transform: scale(1.08); }
.cz-coach-legend{ font-size: 11px; color: var(--cz-muted); }
@media (prefers-reduced-motion: reduce){ .cz-beatrow .cz-arrow{ transition: none; } }

/* ==========================================================================
   Effetti di "Prova una canzone": stelle attorno alla chitarra e contorno viola
   ========================================================================== */
.cz-stars{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cz-star{
  position: absolute;
  display: block;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  color: var(--cz-accent);
}
.cz-star svg{ display: block; width: 100%; height: 100%; fill: currentColor; }
.cz-stars-on .cz-star{ animation: cz-star-in .7s cubic-bezier(.2,.8,.2,1) var(--d) forwards, cz-star-float var(--t) ease-in-out var(--d) infinite alternate; }
.cz-stars-on .cz-star:nth-child(3n){ color: var(--cz-ink); }
.cz-stars-on .cz-star:nth-child(3n) svg{ opacity: .85; }
@keyframes cz-star-in{
  from{ transform: translate(-50%, -50%) scale(0) rotate(-90deg); opacity: 0; }
  to{ transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}
@keyframes cz-star-float{
  0%{ translate: 0 0; filter: opacity(1); }
  50%{ filter: opacity(.45); }
  100%{ translate: var(--dx) var(--dy); filter: opacity(1); }
}
@media (prefers-reduced-motion: reduce){
  .cz-stars-on .cz-star{ animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Chitarra viola in Manuale e Zone. Con "Prova una canzone" resta viola ma cambia tonalità
   (--cz-song, più intensa) e prende un contorno chiaro. */
.cz-art-a{ transition: fill .5s ease, stroke .5s ease; }
.cz-song .cz-art-a{
  fill: var(--cz-song, color-mix(in srgb, var(--cz-accent) 58%, #3a1a9a));
  stroke: var(--cz-accent);
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: reduce){ .cz-art-a{ transition: none; } }

/* ==========================================================================
   Audio: interruttore on/off. Spento, la chitarra è a metà opacità
   ========================================================================== */
.cz-switch{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 0 6px 0 14px;
  border: 1px solid var(--cz-rule); border-radius: 999px;
  background: transparent; color: var(--cz-fg);
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .12s ease;
}
.cz-switch:hover{ border-color: var(--cz-accent); }
.cz-switch:focus-visible{ outline: 2px solid var(--cz-accent); outline-offset: 2px; }
.cz-switch-track{
  position: relative;
  width: 38px; height: 22px;
  border-radius: 999px;
  background: var(--cz-rule);
  transition: background-color .15s ease;
}
.cz-switch-track::after{
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cz-fg);
  transition: transform .15s ease, background-color .15s ease;
}
.cz-switch[aria-checked="true"] .cz-switch-track{ background: var(--cz-accent); }
.cz-switch[aria-checked="true"] .cz-switch-track::after{ transform: translateX(16px); background: var(--cz-on-accent); }
@media (pointer: coarse){ .cz-switch{ min-height: 44px; } }
@media (prefers-reduced-motion: reduce){ .cz-switch, .cz-switch-track, .cz-switch-track::after{ transition: none; } }

.cz-svg{ transition: opacity .3s ease; }
.cz-off .cz-svg{ opacity: .5; }
@media (prefers-reduced-motion: reduce){ .cz-svg{ transition: none; } }

/* messaggio "Attiva l'audio" */
.cz-toast{
  position: absolute;
  left: 50%; top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  pointer-events: none;   /* non blocca la pennata: solo il pulsante è cliccabile */
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 16px);
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--cz-accent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cz-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--cz-fg);
  font-size: 13px; line-height: 1.3;
  animation: cz-toast-in .2s ease;
}
.cz-toast[hidden]{ display: none; }
.cz-toast-btn{
  flex: none;
  pointer-events: auto;
  min-height: 32px; padding: 0 14px;
  border: 0; border-radius: 999px;
  background: var(--cz-accent); color: var(--cz-on-accent);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cz-toast-btn:focus-visible{ outline: 2px solid var(--cz-fg); outline-offset: 2px; }
@media (pointer: coarse){ .cz-toast-btn{ min-height: 40px; } }
@media (max-width: 560px){ .cz-toast-msg{ display: none; } .cz-toast{ padding-left: 8px; } .cz-toast::before{ content: 'Audio spento'; font-weight: 500; padding-left: 8px; } }
@keyframes cz-toast-in{ from{ opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } to{ opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce){ .cz-toast{ animation: none; } }

/* ritmo che segue la pennata: strumenti, segnale di cambio accordo, errore di verso */
.cz-coach-rtools{ display: inline-flex; align-items: center; gap: 12px; }
.cz-coach-metro[aria-pressed="true"]{ color: var(--cz-fg); text-decoration: underline; }
.cz-coach-chip.cz-change:not(.cz-cur){ animation: cz-change 0.9s ease-in-out infinite; }
@keyframes cz-change{ 50%{ background: color-mix(in srgb, var(--cz-accent) 28%, transparent); transform: scale(1.08); } }
.cz-beatrow .cz-arrow.cz-miss{ border-color: var(--cz-fg); animation: cz-miss .22s linear; }
@keyframes cz-miss{ 25%{ translate: -3px 0; } 75%{ translate: 3px 0; } }
@media (prefers-reduced-motion: reduce){
  .cz-coach-chip.cz-change:not(.cz-cur){ animation: none; border-width: 2px; }
  .cz-beatrow .cz-arrow.cz-miss{ animation: none; }
}

/* la freccia piena è la pennata appena fatta, quella tratteggiata la prossima */
.cz-beatrow .cz-arrow.cz-next:not(.cz-beat){ border-style: dashed; border-color: var(--cz-accent); color: var(--cz-accent); }

/* freccia del ritmo sopra il dito (la pagina decide dove mostrarla: di base è spenta) */
.cz-cue{
  display: none;
  position: absolute; z-index: 5;
  transform: translate(-50%, calc(-100% - 36px));
  width: 40px; height: 48px;
  place-items: center;
  border-radius: 12px;
  background: var(--cz-accent); color: var(--cz-on-accent);
  font-size: 28px; font-weight: 600; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  pointer-events: none;
  transition: left .06s linear, top .06s linear;
}
.cz-cue.cz-up{ background: var(--cz-bg); color: var(--cz-accent); border: 2px solid var(--cz-accent); }
.cz-cue[hidden]{ display: none !important; }
.cz-cue.cz-pulse{ animation: cz-cue-pulse .33s ease-out infinite; }
@keyframes cz-cue-pulse{ from{ scale: 1.12; } to{ scale: 1; } }
@media (prefers-reduced-motion: reduce){ .cz-cue{ transition: none; } .cz-cue.cz-pulse{ animation: none; } }