:root{--bg:#eef0f3;--surface:#fff;--ink:#1b2030;--muted:#5e6576;--line:#d5d9e0;--brass:#a8761f;--brass-soft:#f4e7cc;--warn:#b93d0b;--warn-soft:#fde9db;--focus:#2f5bd3;--display:"Bricolage Grotesque", system-ui, sans-serif;--body:"Atkinson Hyperlegible", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#13161d;--surface:#1c2029;--ink:#e8eaf0;--muted:#9aa1b0;--line:#2e3442;--brass:#e2b24f;--brass-soft:#3a2f18;--warn:#f28a4b;--warn-soft:#3a2116;--focus:#8fb0ff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--ink);font:17px/1.55 var(--body);margin:0}h1,h2{font-family:var(--display);letter-spacing:-.02em;margin:0;font-weight:800;line-height:1.1}h2{font-size:1.25rem}a{color:inherit}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}button,select,input{font:inherit;color:inherit}button{border:1.5px solid var(--line);background:var(--surface);cursor:pointer;border-radius:10px;padding:.5rem .9rem}button:hover:not(:disabled){border-color:var(--muted)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:700}button.danger{color:var(--warn)}select,input[type=text],input:not([type]),input[type=number],input[type=email],input[type=password]{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;width:100%;padding:.5rem .65rem}label{color:var(--muted);gap:.3rem;font-size:.9rem;display:grid}label small{font-size:.8rem}.row{flex-wrap:wrap;gap:.5rem;display:flex}.error{color:var(--warn)}.saxkeys{flex:none;display:block}.sk-key{fill:#0000;stroke:var(--muted);stroke-width:1.3px}.sk-key.main{stroke-width:1.6px}.sk-key.on{fill:var(--ink);stroke:var(--ink)}.saxkeys.lit .sk-key.on{fill:var(--brass);stroke:var(--brass)}.sk-divider{stroke:var(--line);stroke-width:1.5px;stroke-dasharray:3 3}.site{justify-content:space-between;align-items:center;padding:1rem clamp(1rem,4vw,2.5rem);display:flex}.site form{margin:0}.logout{color:var(--muted);background:0 0;border-color:#0000;padding:.4rem .7rem}.logout:hover:not(:disabled){color:var(--ink)}.login{gap:1.5rem;max-width:400px;margin:0 auto;padding:3rem 1rem 4rem;display:grid}.login h1{font-size:clamp(2rem,6vw,2.6rem)}.login-form{gap:1rem;display:grid}.login-form input{padding:.7rem .75rem;font-size:1.05rem}.login-form .error{margin:0}.login-form .primary{justify-self:start;padding:.75rem 1.4rem}.brand{font-family:var(--display);letter-spacing:-.03em;font-size:1.3rem;font-weight:800;text-decoration:none}.home{max-width:760px;margin:0 auto;padding:0 1rem 4rem}.intro{justify-content:space-between;align-items:center;gap:2rem;padding:2rem 0 2.5rem;display:flex}.intro h1{max-width:12ch;font-size:clamp(2.1rem,6vw,3.4rem)}.intro p{color:var(--muted);max-width:46ch;margin:1rem 0 0}.intro-keys{justify-items:center;gap:.4rem;margin:0;display:grid}.intro-keys figcaption{font-family:var(--display);font-size:1.2rem;font-weight:800}@media (max-width:560px){.intro-keys{display:none}}.upload{gap:1rem;display:grid}.drop{text-align:center;border:2px dashed var(--line);background:var(--surface);cursor:pointer;color:var(--muted);border-radius:16px;place-items:center;gap:.2rem;padding:2.2rem 1rem;display:grid;position:relative}.drop strong{color:var(--ink);font-size:1.15rem}.drop.dragging,.drop:hover{border-color:var(--brass)}.drop.has-file{border-style:solid;border-color:var(--brass)}.drop input{opacity:0;cursor:pointer;position:absolute;inset:0}.drop:focus-within{outline:3px solid var(--focus);outline-offset:2px}.fields{grid-template-columns:2fr 1fr 1.3fr;gap:.75rem;display:grid}@media (max-width:640px){.fields{grid-template-columns:1fr 1fr}.fields label:first-child{grid-column:1/-1}}.upload>.primary{justify-self:start;padding:.75rem 1.4rem}.library{margin-top:3rem}.library ul{border-top:1.5px solid var(--line);margin:1rem 0 0;padding:0;list-style:none}.library li{border-bottom:1.5px solid var(--line)}.library a{justify-content:space-between;gap:1rem;padding:.85rem .25rem;text-decoration:none;display:flex}.library a:hover .song-title{text-decoration:underline;-webkit-text-decoration-color:var(--brass);text-decoration-color:var(--brass);text-underline-offset:4px}.song-title{font-weight:700}.song-meta{color:var(--muted);white-space:nowrap}.empty{color:var(--muted)}.song{max-width:1280px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem) 4rem}.song.state{gap:1rem;max-width:640px;padding-top:2rem;display:grid}.reading{gap:.6rem;display:grid}.reading-bar{background:linear-gradient(90deg, var(--brass) 0 30%, var(--line) 30%);background-size:200% 100%;border-radius:3px;height:6px;animation:1.6s linear infinite reading}@keyframes reading{0%{background-position:100% 0}to{background-position:-100% 0}}.hint{color:var(--muted)}.song-head{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.back{color:var(--muted);font-size:.9rem}.song-head h1{margin-top:.2rem;font-size:clamp(1.6rem,4vw,2.4rem)}.source-line{color:var(--muted);margin:.2rem 0 0}.save{color:var(--muted);white-space:nowrap;padding-top:1.5rem;font-size:.85rem}.save.error{color:var(--warn)}.toolbar{flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin:1.25rem 0 1rem;display:flex}.play{min-width:8.5rem;padding:.7rem 1.2rem;font-size:1.05rem}.speed{color:var(--ink);align-items:center;gap:.6rem;display:flex}.speed input{width:140px;accent-color:var(--brass)}.speed span{color:var(--muted);min-width:4.5rem}.check{color:var(--ink);cursor:pointer;align-items:center;gap:.4rem;display:flex}.check input{accent-color:var(--brass);width:1.1rem;height:1.1rem}.settings{margin-left:auto;position:relative}.settings summary{cursor:pointer;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:.5rem .9rem;list-style:none}.settings summary::-webkit-details-marker{display:none}.settings-body{z-index:20;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;gap:.9rem;width:min(320px,90vw);padding:1rem;display:grid;position:absolute;top:calc(100% + 6px);right:0}.octave{color:var(--muted);gap:.3rem;font-size:.9rem;display:grid}.review-note{border-left:4px solid var(--warn);background:var(--warn-soft);margin:0 0 1rem;padding:.7rem .9rem}.sheet{background:#fff;border-radius:14px;margin-bottom:1rem;padding:.5rem;overflow-x:auto}.sheet .error{padding:1rem}.stage{grid-template-columns:300px minmax(0,1fr);align-items:start;gap:1.5rem;display:grid}.now{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;gap:1rem;padding:1.25rem;display:grid;position:sticky;top:1rem}.now-main{align-items:center;gap:1.25rem;display:flex}.now-rest{width:128px;height:360px;color:var(--muted);border:2px dashed var(--line);border-radius:12px;place-items:center;display:grid}.now-text p{margin:0}.now-name{font-family:var(--display);letter-spacing:-.03em;font-size:3.2rem;font-weight:800;line-height:1}.now-name sub{color:var(--muted);font-size:1.1rem;font-family:var(--body);margin-left:.15rem;font-weight:400}.now-enh{color:var(--muted);margin-top:.4rem!important}.now-dur{font-weight:700;margin-top:.8rem!important}.now-alt{color:var(--brass);font-size:.9rem}.now-measure{color:var(--muted);font-size:.9rem;margin-top:.3rem!important}.now-next{border-top:1.5px solid var(--line);color:var(--muted);align-items:center;gap:.6rem;padding-top:.8rem;display:flex}.now-next strong{color:var(--ink);font-size:1.1rem}.editor{border-top:1.5px solid var(--line);gap:.7rem;padding-top:.9rem;display:grid}.editor-head{justify-content:space-between;align-items:center;display:flex}.editor-title{margin:0;font-weight:700}button.ghost{color:var(--muted);border-color:#0000;padding:.3rem .5rem}.editor-grid{grid-template-columns:repeat(2,1fr);gap:.45rem;display:grid}.editor-grid button{padding:.45rem .4rem;font-size:.92rem}.measures{flex-wrap:wrap;align-items:stretch;display:flex}.measure{border-left:2px solid var(--ink);grid-template-rows:auto 1fr;margin-bottom:.75rem;padding:0 .5rem .75rem .4rem;display:grid}.measure header{align-items:baseline;gap:.5rem;min-height:1.4rem;display:flex}.mnum{color:var(--muted);font-size:.8rem}.mwarn{color:var(--warn);max-width:26ch;font-size:.78rem;line-height:1.25}.measure.warn{border-left-color:var(--warn)}.notes{align-items:stretch;gap:.3rem;display:flex}.note{background:0 0;border:1.5px solid #0000;border-radius:10px;align-content:start;justify-items:center;gap:.3rem;width:62px;padding:.4rem .2rem .45rem;display:grid}.note:hover:not(.playing){background:var(--surface);border-color:var(--line)}.nname{white-space:nowrap;font-size:.88rem;font-weight:700;line-height:1.2}.nrest{height:101px;color:var(--muted);place-items:center;font-size:1.8rem;display:grid}.nlen{height:4px;width:calc(var(--len) * 25%);background:var(--muted);opacity:.55;border-radius:2px;justify-self:start;min-width:6px}.note.rest .nname{color:var(--muted);font-weight:400}.note.held .nname{color:var(--muted);font-style:italic;font-weight:400}.note.held .saxkeys{opacity:.4}.note.selected{background:var(--surface);border-color:var(--ink)}.note.warn{border-color:var(--warn);background:var(--warn-soft)}.note.playing{background:var(--brass-soft);border-color:var(--brass)}.note.playing .nlen{background:var(--brass);opacity:1}@media (max-width:860px){.stage{grid-template-columns:minmax(0,1fr)}.notes{flex-wrap:wrap}.measure{max-width:100%}.now{z-index:10;gap:.6rem;padding:.75rem .9rem;top:.5rem}.now-main .saxkeys,.now-rest{width:60px;height:169px}.now-name{font-size:2.2rem}.now-next{padding-top:.5rem}.now-next .saxkeys{display:none}.editor{z-index:30;background:var(--surface);border-top:1.5px solid var(--line);max-height:55vh;padding:.9rem 1rem calc(1rem + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;position:fixed;bottom:0;left:0;right:0;overflow-y:auto}.song:has(.editor) .measures{padding-bottom:55vh}.settings{margin-left:0}.settings-body{left:0;right:auto}}@media (max-width:860px) and (max-height:800px){.now{position:static}}@media (prefers-reduced-motion:reduce){.reading-bar{animation:none}html{scroll-behavior:auto}}