@font-face { font-family: "Bravura"; src: url("../assets/fonts/bravura/Bravura.woff2") format("woff2"); font-display: swap; }
body { min-width: 320px; }
h1 { font-size: 3rem; overflow-wrap: anywhere; }
h2 { font-size: 1.9rem; }
.eyebrow, .kicker { letter-spacing: 0; }
.root-staff { position: relative; border-block: 1px solid var(--line); background: rgba(255,253,248,.86); }
.notation-stage { margin: 0; overflow: hidden; }
.notation-stage svg { display: block; width: 100%; height: auto; }
.root-labels { display: grid; grid-template-columns: 1fr 1fr; padding: 0 0 8px 36%; color: var(--teal-dark); font-weight: 700; text-align: center; font-size: .9rem; }
.root-target { position: absolute; top: 12%; height: 76%; padding: 0; border: 2px dashed transparent; border-radius: 6px; background: transparent; cursor: crosshair; touch-action: manipulation; }
.root-target:hover, .root-target:focus-visible { border-color: var(--teal); background: rgba(27,119,108,.05); outline: none; }
.root-target.is-empty { border-color: var(--line); }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }
.answer-column { display: grid; gap: 8px; min-width: 0; }
.answer-column label { font-weight: 700; margin-top: 8px; }
.answer-column input, .answer-column select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--surface); font: inherit; }
.answer-column input:focus, .answer-column select:focus { border-color: var(--teal); outline: 3px solid rgba(27,119,108,.15); }
.result-item { grid-template-columns: 42px minmax(0,1fr); }
.result-body { min-width: 0; }
.result-heading { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.result-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; padding: 0; list-style: none; font-size: .9rem; }
.result-checks li { overflow-wrap: anywhere; }
.correct { color: var(--teal-dark); }
.wrong { color: var(--accent-dark); }
.result-notation { grid-column: auto; }
.result-notation-canvas { overflow: hidden; }
@media (max-width: 600px) {
  h1 { font-size: 2.2rem; } h2 { font-size: 1.5rem; }
  .app-header { margin-bottom: 28px; }
  .answers { gap: 14px; }
  .root-labels { font-size: .75rem; }
  .result-item { padding: 12px; gap: 8px; grid-template-columns: 28px minmax(0,1fr); }
  .result-number { font-size: 1rem; }
  .result-notation, .result-checks { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }