/* Music try pages (Harmonize like Bach, Duet). Scoped to .music-try; site tokens from site.css.
   Three colors only (brand kit): Pink marks your input and Spinda, Ink the generated notes;
   dashed borders mark held notes, disabled keys and baselines. */
.music-try { padding: 24px 0 80px; }
.music-try .back-to-demos { display: inline-flex; gap: 8px; font-size: 14px; margin-bottom: 20px; }
.music-intro { max-width: 780px; display: grid; gap: 12px; margin-bottom: 24px; }
.music-intro h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.04; letter-spacing: -.035em; font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.music-try .panel { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--paper); margin-bottom: 16px; }
.music-try button { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 8px 14px; min-height: 40px; font: inherit; font-size: 14px; cursor: pointer; }
.music-try button:hover:not(:disabled) { border-color: var(--ink); }
.music-try button:disabled { border-style: dashed; cursor: not-allowed; }
.music-try select { font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--paper); color: var(--ink); max-width: 100%; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.controls label { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.controls .hint { font-size: 12px; color: var(--muted); margin-left: auto; }
.melody { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; }
.melody .cell { padding: 9px 0; min-height: 0; font: 600 13px var(--mono); color: var(--ink); background: var(--paper); border-radius: 6px; }
.melody .cell.filled { background: var(--sp-naruto-pink); color: var(--sp-ink); }
.melody .cell.bar { box-shadow: inset 3px 0 var(--ink); }
.piano { --whites: 13; position: relative; height: 140px; user-select: none; touch-action: none; }
.piano .white { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 100% / var(--whites)); width: calc(100% / var(--whites) - 3px); border-radius: 0 0 8px 8px; background: var(--sp-milk); display: flex; align-items: flex-end; justify-content: center; padding: 0 0 8px; min-height: 0; }
.piano .white span { font: 11px var(--mono); color: var(--muted); }
.piano .white:active { background: var(--sp-naruto-pink); }
.piano .black { position: absolute; top: 0; height: 60%; left: calc(var(--i) * 100% / var(--whites) - 100% / var(--whites) * .32); width: calc(100% / var(--whites) * .62); background: var(--sp-ink); border: 1px solid var(--sp-ink); border-radius: 0 0 6px 6px; z-index: 2; padding: 0; min-height: 0; }
.piano .white.off { border-style: dashed; } .piano .white.off span { visibility: hidden; }
.piano .black.off { background: var(--sp-milk); }
.result-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.music-try .tabs button { border: 0; min-height: 34px; padding: 6px 12px; border-radius: 7px; font-size: 13px; }
.music-try .tabs button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.music-try .play { background: var(--sp-action); color: var(--sp-action-text); border-color: var(--sp-ink); font-weight: 600; }
.roll .grid { --n: 16; display: grid; grid-template-columns: 112px repeat(var(--n), minmax(0, 1fr)); gap: 3px; align-items: center; }
.roll .lab { font-size: 12px; font-weight: 600; color: var(--muted); }
.roll .num { font: 10px var(--mono); color: var(--muted); text-align: center; }
.roll .vnote { text-align: center; font: 600 12px var(--mono); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 6px; padding: 6px 0; transition: transform .1s; }
.roll .vS { background: var(--sp-naruto-pink); color: var(--sp-ink); } .roll .vB { background: var(--ink); color: var(--paper); }
.roll .vnote.held { background: var(--paper); color: var(--ink); border-style: dashed; }
.roll .vnote.now { transform: scale(1.12); outline: 2px solid var(--ink); outline-offset: 1px; }
.roll .chord { position: relative; overflow: hidden; display: flex; justify-content: center; padding: 6px 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.roll .chord b { font: 650 12px var(--mono); }
.roll .chord .conf { --p: 0; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p) * 100%); background: var(--sp-naruto-pink); }
.roll .agree { text-align: center; font: 600 13px var(--mono); color: var(--muted); }
.roll .agree.yes { font-weight: 800; }
.roll .empty, .summary { font-size: 13px; color: var(--muted); }
.summary { margin-top: 12px; line-height: 1.6; }
.lanes { display: grid; gap: 6px; margin-bottom: 14px; }
.lane { display: grid; grid-template-columns: 112px 1fr; gap: 8px; align-items: stretch; }
.who { font-size: 12px; font-weight: 600; color: var(--muted); align-self: center; }
.track { position: relative; height: 92px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.blk { position: absolute; height: 20px; border: 1px solid var(--ink); border-radius: 6px; font: 600 11px/20px var(--mono); text-align: center; overflow: hidden; white-space: nowrap; transition: transform .08s; }
.blk.you { background: var(--sp-naruto-pink); color: var(--sp-ink); } .blk.ai { background: var(--ink); color: var(--paper); }
.blk.now { transform: scale(1.15); outline: 2px solid var(--ink); outline-offset: 1px; z-index: 2; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.pick { display: flex; flex-direction: column; gap: 3px; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 8px; }
.pick b { font: 650 14px var(--mono); }
.pick small { font-size: 11px; color: var(--muted); }
.pick .bar { display: flex; flex-direction: column-reverse; gap: 2px; }   /* label above, bar below */
.pick .bar i { display: block; height: 6px; min-width: 2px; border: 1px solid var(--ink); border-radius: 2px; }
.pick .bar i.all { background: var(--sp-naruto-pink); } .pick .bar i.model { background: var(--ink); } .pick .bar i.stats { background: var(--paper); border-style: dashed; }
.pick .bar em { display: block; font: 10px/14px var(--mono); font-style: normal; white-space: nowrap; }
.music-results { margin-top: 40px; display: grid; gap: 12px; }
.music-results h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; font-weight: 600; }
.chart-box { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--paper); }
.cchart { display: grid; gap: 10px; }
.crow { display: grid; grid-template-columns: 220px minmax(0, 1fr) 270px; gap: 14px; align-items: center; }
.clabel { font-size: 14px; text-align: right; }
.ctrack { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.cbar { display: block; height: 20px; border: 1px solid var(--ink); border-radius: 4px; background: var(--paper); }
.cbar.spinda { background: var(--sp-naruto-pink); } .cbar.jev { background: var(--ink); } .cbar.harness, .cbar.chance { border-style: dashed; }
.cval { font-size: 13px; font-weight: 600; white-space: nowrap; }
.caside { font-size: 12px; color: var(--muted); text-align: right; }
.music-footnote { margin-top: 16px; font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 860px; }
@media (max-width: 760px) {
  .controls .hint { margin-left: 0; }
  .melody { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .piano { height: 120px; } .piano .white span { font-size: 8px; }
  .roll .grid { grid-template-columns: 46px repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
  .roll .lab { font-size: 9px; } .roll .vnote { font-size: 8px; padding: 6px 0; } .roll .chord b { font-size: 8px; }
  .crow { grid-template-columns: 1fr; gap: 4px; } .clabel, .caside { text-align: left; }
  .lane { grid-template-columns: 54px 1fr; } .who { font-size: 10px; } .blk { font-size: 8px; height: 18px; line-height: 18px; }
}