:root{font-family:Trebuchet MS,Gill Sans,sans-serif;color:#1d1f2a;background:radial-gradient(circle at top,rgba(255,215,170,.6),transparent 34%),linear-gradient(180deg,#f6f0de 0%,#efe5cc 52%,#e4d6b1 100%);line-height:1.5;font-weight:400;color-scheme:light}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,textarea,select{font:inherit}#root{min-height:100vh}.app-shell{width:min(1120px,calc(100% - 2rem));margin:0 auto;padding:3rem 0 4rem}.hero{padding:1rem 0 2rem}.eyebrow{margin:0 0 .5rem;font-size:.82rem;letter-spacing:.26em;text-transform:uppercase;color:#7d5d2c}.hero h1{margin:0;max-width:12ch;font-size:clamp(2.4rem,8vw,5.6rem);line-height:.95;letter-spacing:-.05em}.hero-copy{max-width:42rem;margin:1rem 0 0;font-size:1.05rem;color:#4e4d48}.trainer-card{background:rgba(255,251,243,.88);border:1px solid rgba(101,76,39,.15);border-radius:32px;padding:1.5rem;box-shadow:0 20px 60px #4d371224;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.trainer-header{display:flex;justify-content:space-between;gap:1.5rem;align-items:start}.trainer-header h2{margin:0;font-size:1.35rem}.trainer-subtitle{margin:.35rem 0 0;color:#685f4c}.score-panel{display:grid;grid-template-columns:repeat(3,minmax(5.5rem,1fr));gap:.75rem;min-width:min(100%,19rem)}.score-panel div{padding:.9rem 1rem;border-radius:18px;background:#fff8ea;border:1px solid rgba(129,93,39,.15)}.score-label{display:block;margin-bottom:.25rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#81693f}.score-panel strong{font-size:1.6rem}.trainer-controls{margin-top:1.5rem;display:grid;grid-template-columns:minmax(0,2fr) minmax(18rem,1fr);gap:1rem}.range-picker,.timed-panel{display:grid;gap:1rem}.range-copy,.timed-copy{display:grid;gap:.25rem}.range-picker-label{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:#81693f}.range-picker-text{margin:0;color:#685f4c}.range-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.range-option,.timed-toggle{display:grid;gap:.2rem;padding:.9rem 1rem;border:0;border-radius:18px;text-align:left;background:#fff8ea;color:#2f2d27;box-shadow:inset 0 0 0 1px #765b2a1f;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease,color .14s ease}.range-option small{color:#6c6558}.range-option:hover,.timed-toggle:hover,.answer-button:hover:not(:disabled),.next-button:hover{transform:translateY(-1px);box-shadow:0 12px 24px #523a151f}.range-option:focus-visible,.timed-toggle:focus-visible,.answer-button:focus-visible,.next-button:focus-visible{outline:3px solid #d48b23;outline-offset:3px}.range-option.is-active,.timed-toggle.is-active{background:#191611;color:#fff5df}.range-option.is-active small{color:#e4cfaa}.timer-card{padding:1rem;border-radius:18px;background:#fff8ea;border:1px solid rgba(129,93,39,.15)}.timer-row{display:flex;justify-content:space-between;gap:1rem;align-items:center}.timer-label{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:#81693f}.timer-row strong{font-size:1.5rem}.timer-track{height:.7rem;margin-top:.9rem;border-radius:999px;background:rgba(118,91,42,.12);overflow:hidden}.timer-fill{height:100%;width:100%;background:#c9b690;transition:width .2s linear,background-color .2s ease}.timer-fill.is-active{background:linear-gradient(90deg,#d48b23 0%,#8e3e2b 100%)}.staff-panel{margin-top:1.5rem;padding:1rem;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(250,241,220,.94));border:1px solid rgba(129,93,39,.12)}.staff-display{display:grid;gap:.75rem}.staff-canvas{width:100%;overflow:hidden}.staff-canvas svg{width:100%;height:auto;display:block}.staff-loading{margin:0;color:#776951;font-size:.92rem}.staff-meta{display:flex;justify-content:space-between;gap:1rem;color:#776951;font-size:.92rem}.range-label{text-transform:uppercase;letter-spacing:.08em;color:#9a7c45}.answer-pad{margin-top:1.5rem;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.8rem}.answer-button,.next-button{border:0;border-radius:18px;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease,color .14s ease}.answer-button{padding:1rem .75rem;min-height:4rem;background:#fff;color:#2f2d27;box-shadow:inset 0 0 0 1px #765b2a1f;font-size:1.1rem;font-weight:700}.answer-button:disabled{cursor:default}.answer-button.is-selected{background:#f7d598}.answer-button.is-correct{background:#235f4b;color:#fffaf1}.answer-button.is-wrong{background:#8e3e2b;color:#fffaf1}.feedback-row{margin-top:1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}.feedback,.hint{margin:0}.feedback{font-weight:600}.feedback.correct{color:#235f4b}.feedback.incorrect{color:#8e3e2b}.hint{color:#6c6558}.next-button{padding:.9rem 1.2rem;background:#191611;color:#fff5df;white-space:nowrap}@media (max-width: 960px){.trainer-controls{grid-template-columns:1fr}}@media (max-width: 860px){.trainer-header,.feedback-row{flex-direction:column;align-items:stretch}.score-panel{width:100%}}@media (max-width: 640px){.app-shell{width:min(100% - 1rem,1120px);padding-top:1.5rem}.trainer-card{padding:1rem;border-radius:24px}.range-options,.answer-pad{grid-template-columns:repeat(2,minmax(0,1fr))}.next-button{width:100%}}