:root{color:#1c211c;background:#f3f0e8;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #1c211c;--muted: #6d7168;--paper: #fbfaf6;--line: #d9d5ca;--green: #1d5d45;--green-soft: #dce9df;--rust: #9a4b2e}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#f3f0e8}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}h1,h2,p{margin-top:0}h1,h2{font-family:Iowan Old Style,Baskerville,Georgia,serif;font-weight:600}h1{color:var(--ink);font-size:clamp(2.25rem,6vw,4.7rem);line-height:.98;letter-spacing:-.04em}.centered-shell{min-height:100vh;display:grid;place-items:center;padding:40px 20px;background:radial-gradient(circle at 15% 10%,rgba(29,93,69,.1),transparent 30%),linear-gradient(135deg,transparent 49.7%,rgba(28,33,28,.06) 50%,transparent 50.3%);background-size:auto,42px 42px}.login-card,.intro-card,.complete-card{width:min(900px,100%);border:1px solid var(--line);background:#fbfaf6f7;box-shadow:0 28px 80px #3230281f;padding:clamp(34px,7vw,76px)}.login-card{width:min(680px,100%)}.lead{max-width:620px;color:var(--muted);line-height:1.65;font-size:1.05rem}.eyebrow{margin-bottom:22px;color:var(--green);font-size:.72rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase}.login-card form{display:grid;gap:10px;margin-top:36px}.login-card label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.login-card input{width:100%;border:1px solid var(--line);border-radius:0;background:#fff;padding:17px 18px;font-size:1.05rem;letter-spacing:.08em;outline:none}.login-card input:focus{border-color:var(--green);box-shadow:0 0 0 3px #1d5d451f}.primary-button,.secondary-button{min-height:48px;border:1px solid var(--ink);padding:12px 22px;font-weight:700;transition:transform .15s,background .15s,color .15s}.primary-button{background:var(--ink);color:#fff}.secondary-button{background:transparent;color:var(--ink)}.primary-button:hover:not(:disabled),.secondary-button:hover:not(:disabled){transform:translateY(-1px);background:var(--green);border-color:var(--green);color:#fff}.primary-button:disabled,.secondary-button:disabled{opacity:.35}.login-card .primary-button{margin-top:10px}.form-error,.save-error{color:#a13028;font-weight:600}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:38px 0;background:var(--line);border:1px solid var(--line)}.intro-grid>div{min-height:145px;background:var(--paper);padding:24px}.intro-grid span{color:var(--rust);font-family:Iowan Old Style,Baskerville,Georgia,serif;font-size:1.4rem}.intro-grid p{margin:18px 0 0;color:#464b44;line-height:1.55}.privacy-note{color:var(--muted);font-size:.9rem}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1120px)/2));background:var(--ink);color:#fff;font-size:.87rem}.topbar>div{display:flex;align-items:center;gap:12px}.mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #899086;color:#cad5cb;font-family:Georgia,serif;font-size:1.15rem}.progress-copy{color:#c7cbc4}.progress-bar{position:sticky;top:0;z-index:20;height:4px;background:#d5d2c9}.progress-bar span{display:block;height:100%;background:var(--rust);transition:width .3s}.study-content{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:38px 0 88px}.piece-heading{max-width:760px;margin-bottom:22px}.piece-heading h1{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:16px}.piece-heading p{color:var(--muted)}.prompt-card{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:20px;border:1px solid var(--ink);background:var(--paper);padding:16px;box-shadow:5px 5px #cbc7bb}.prompt-card>div{display:grid;gap:6px}.prompt-card span{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.prompt-card strong{font-family:Iowan Old Style,Baskerville,Georgia,serif;font-size:1.35rem}.prompt-card.ready{border-color:var(--green);box-shadow:7px 7px 0 var(--green-soft)}.candidate-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}.candidate-card{border:1px solid var(--line);background:var(--paper);padding:16px;transition:border-color .2s,box-shadow .2s}.candidate-card.listened{border-color:#9eaa9f}.candidate-card>header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}.candidate-label{font-family:Iowan Old Style,Baskerville,Georgia,serif;font-size:1.32rem;font-weight:600}.candidate-status{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.candidate-status.ready{color:var(--green);font-weight:700}.candidate-hint{margin:12px 0 0;color:var(--rust);font-size:.8rem}.audio-player{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:14px;min-height:54px}.audio-player.disabled{opacity:.45}.midi-player{display:block;width:100%}.piano-roll{display:block;width:100%;height:92px;margin-bottom:9px;border:1px solid #d5d1c6;background:#f5f2e9}.compact .piano-roll{height:82px}.roll-background{fill:#f8f6ef}.roll-beat{stroke:#5b53461a;stroke-width:1}.roll-bar{stroke:#5b534647;stroke-width:1.2}.roll-note{fill:var(--rust);opacity:.78}.roll-playhead{stroke:var(--ink);stroke-width:2}.midi-controls{display:grid;grid-template-columns:40px 1fr auto auto auto;align-items:center;gap:10px;min-height:42px}.midi-message{display:block;margin-top:6px;color:var(--muted);font-size:.75rem}.midi-message.error{color:var(--rust)}.play-button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--ink);color:#fff}.play-button:hover:not(:disabled){background:var(--green)}.audio-track{height:5px;background:#d8d6ce;overflow:hidden}.audio-progress{height:100%;background:var(--green)}.audio-time,.listen-status,.playback-rate{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.72rem;white-space:nowrap}.playback-rate{border:1px solid var(--line);padding:3px 5px}.listen-status{min-width:105px;text-align:right}.listen-status.reached{color:var(--green);font-weight:700}.preference-panel{margin-top:18px;border:1px solid var(--ink);background:var(--paper);padding:20px}.preference-panel>header{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:18px}.preference-panel h2{margin:4px 0 0;font-size:1.35rem}.preference-panel>header p{max-width:390px;color:var(--muted);font-size:.78rem;text-align:right}.preference-axis{display:grid;gap:4px}.axis-row{display:grid;grid-template-columns:30px 1fr 68px;align-items:center;gap:12px;min-height:42px}.axis-row strong{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:.76rem}.axis-row output{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}.axis-row.unplaced output{color:var(--muted)}.axis-row input{width:100%;height:34px;margin:0;border:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:grab;touch-action:pan-y}.axis-row input::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:#d3cec1}.axis-row input::-moz-range-track{height:8px;border-radius:99px;background:#d3cec1}.axis-row input::-webkit-slider-thumb{width:24px;height:24px;margin-top:-8px;border:3px solid var(--paper);border-radius:50%;appearance:none;-webkit-appearance:none;background:var(--rust);box-shadow:0 1px 5px #1c211c59}.axis-row input::-moz-range-thumb{width:20px;height:20px;border:3px solid var(--paper);border-radius:50%;background:var(--rust);box-shadow:0 1px 5px #1c211c59}.axis-row input:active{cursor:grabbing}.axis-row input:focus-visible{outline:3px solid rgba(29,93,69,.22);outline-offset:2px}.axis-row input:disabled{cursor:not-allowed;opacity:.32}.axis-row.locked output{color:var(--muted);font-size:.66rem}.axis-ticks{display:grid;grid-template-columns:repeat(11,1fr);margin:0 74px 0 42px;color:var(--muted);font-size:.62rem;font-variant-numeric:tabular-nums}.axis-ticks span{text-align:center}.axis-ticks span:first-child{text-align:left}.axis-ticks span:last-child{text-align:right}.study-navigation{position:sticky;bottom:0;z-index:15;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin-top:32px;border:1px solid var(--line);background:#fbfaf6f5;padding:15px;box-shadow:0 -8px 30px #32302814;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.study-navigation span{color:var(--muted);text-align:center;font-size:.8rem}.completion-mark{display:grid;place-items:center;width:60px;height:60px;margin-bottom:28px;border-radius:50%;background:var(--green);color:#fff;font-size:1.7rem}.complete-card h2{margin-top:38px;font-size:1.45rem}.loading-screen{min-height:100vh;display:grid;place-content:center;justify-items:center;color:var(--muted)}.loading-note{color:var(--green);font-family:Georgia,serif;font-size:3rem}@media(max-width:720px){.centered-shell{padding:16px}.login-card,.intro-card,.complete-card{padding:30px 22px}.intro-grid{grid-template-columns:1fr}.topbar{padding:0 14px}.topbar>div:first-child span:last-child{display:none}.study-content{width:min(100% - 24px,1120px);padding-top:42px}.prompt-card{grid-template-columns:1fr;gap:16px}.candidate-list{grid-template-columns:1fr}.candidate-card>header{align-items:flex-start}.midi-controls{grid-template-columns:40px 1fr auto auto}.listen-status{grid-column:2 / -1;text-align:left}.preference-panel>header{align-items:start;flex-direction:column;gap:8px}.preference-panel>header p{text-align:left}.study-navigation{grid-template-columns:1fr 1fr}.study-navigation span{grid-row:1;grid-column:1 / -1}.choice-summary{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}