:root{--bg:#ece9e3;--paper:#fffdf8;--ink:#1d1b18;--muted:#6f6a62;--rh:#2463d6;--rh-held:#a9c3f2;--lh:#d9701a;--lh-held:#f3c79c;--cursor:#2463d61a;--cursor-edge:#2463d68c;--panel:#fbfaf7;--border:#d9d4ca;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--bg);margin:0}.status{text-align:center;color:var(--muted);padding:4rem 1rem}.score-area{padding:8px 16px 24px}.sheet-wrapper{max-width:1100px;margin:0 auto}.sheet{background:var(--paper);cursor:pointer;border-radius:2px;min-height:400px;position:relative;box-shadow:0 1px 2px #00000014,0 8px 30px #00000014}.sheet-svg svg{width:100%;height:auto;display:block}.sheet-svg .note,.sheet-svg .rest{transition:fill .12s}.sheet-svg .note:hover .notehead,.sheet-svg .rest:hover,.sheet-svg .hl-attacked.hand-right .notehead,.sheet-svg .hl-attacked.hand-right .accid{fill:var(--rh)}.sheet-svg .hl-attacked.hand-left .notehead,.sheet-svg .hl-attacked.hand-left .accid{fill:var(--lh)}.sheet-svg .hl-held.hand-right .notehead{fill:var(--rh-held)}.sheet-svg .hl-held.hand-left .notehead{fill:var(--lh-held)}.cursor{pointer-events:none;border-radius:11px;width:22px;position:absolute;transform:translate(-50%)}.cursor-selected{background:var(--cursor);box-shadow:inset 0 0 0 1px var(--cursor-edge)}.cursor-hover{background:var(--cursor-edge);opacity:.5;width:2px}.piano-panel{background:var(--panel);border-top:1px solid var(--border);padding:10px 16px 14px;position:fixed;inset:auto 0 0;box-shadow:0 -6px 24px #0000000f}.piano-bar{flex-wrap:wrap;align-items:center;gap:16px;max-width:1100px;margin:0 auto 8px;display:flex}.position{font-variant-numeric:tabular-nums;min-width:14em;font-weight:600}.nav{gap:4px;display:flex}.nav button{font:inherit;border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:6px;width:34px;height:30px}.nav button:hover{border-color:var(--muted)}.legend{color:var(--muted);gap:14px;margin:0 0 0 auto;padding:0;font-size:13px;list-style:none;display:flex}.legend li{align-items:center;gap:6px;display:flex}.swatch{border-radius:3px;width:12px;height:12px}.swatch.hand-right{background:var(--rh)}.swatch.hand-left{background:var(--lh)}.swatch-held{background:linear-gradient(135deg, var(--rh-held) 50%, var(--lh-held) 50%)}.piano{width:100%;max-width:1100px;max-height:170px;margin:0 auto;display:block}.key{stroke:#3a3732;stroke-width:1px;transition:fill .12s}.key-white{fill:#fff}.key-black{fill:#23211e}.key.key-attacked.hand-right{fill:var(--rh)}.key.key-attacked.hand-left{fill:var(--lh)}.key.key-held.hand-right{fill:var(--rh-held)}.key.key-held.hand-left{fill:var(--lh-held)}.key-label{fill:var(--muted);text-anchor:middle;pointer-events:none;font-size:10px}.segmented{border:1px solid var(--border);background:#fff;border-radius:7px;display:flex;overflow:hidden}.segmented button{font:inherit;border:0;border-left:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;padding:5px 10px;font-size:13px}.segmented button:first-child{border-left:0}.segmented button[aria-pressed=true]{background:var(--ink);color:#fff}.key-label-on{fill:#fff;font-weight:600}.key-held+.key-label-on{fill:var(--ink)}.key-label-black{font-size:8px}.intro{padding:28px 16px 12px}.intro-inner{max-width:1100px;margin:0 auto}.brand{letter-spacing:-.01em;margin:0;font-size:26px;font-weight:700}.tagline{color:var(--muted);margin:4px 0 18px;font-size:17px}.library{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px;display:flex}.library-label{color:var(--muted);margin-right:4px;font-size:13px;font-weight:600}.chip{font:inherit;border:1px solid var(--border);color:var(--ink);cursor:pointer;background:#fff;border-radius:999px;padding:5px 12px;font-size:14px}.chip:hover{border-color:var(--muted)}.chip[aria-pressed=true],.chip-file{background:var(--ink);border-color:var(--ink);color:#fff}.chip-file{cursor:default;text-overflow:ellipsis;white-space:nowrap;max-width:22em;overflow:hidden}.file-picker{flex-wrap:wrap;align-items:center;gap:8px 14px;display:flex}button.primary{font:inherit;border:1px solid var(--rh);background:var(--rh);color:#fff;cursor:pointer;border-radius:7px;padding:7px 14px;font-size:14px;font-weight:600}button.primary:hover{filter:brightness(1.08)}button.primary:disabled{opacity:.55;cursor:default}.file-hint{color:var(--muted);font-size:13px}.file-problem{color:#8a2b0b;background:#fbe4dc;border-radius:7px;margin:10px 0 0;padding:8px 12px;font-size:14px}.drop-overlay{z-index:20;border:3px dashed var(--rh);pointer-events:none;background:#2463d61f;place-items:center;display:grid;position:fixed;inset:0}.drop-overlay p{background:var(--paper);border-radius:10px;padding:14px 22px;font-size:18px;font-weight:600;box-shadow:0 8px 30px #0000001f}.measure-frame{pointer-events:none;border-radius:6px;position:absolute}.measure-frame-selected{background:var(--cursor);box-shadow:inset 0 0 0 1px var(--cursor-edge)}.measure-frame-hover{box-shadow:inset 0 0 0 1px var(--cursor-edge);opacity:.5}.site-footer{padding:16px 16px 32px}.site-footer-above-piano{padding-bottom:260px}.site-footer nav{flex-wrap:wrap;gap:6px 18px;max-width:1100px;margin:0 auto;font-size:13px;display:flex}.page+.site-footer nav{max-width:760px}.site-footer a,.link-button{color:var(--muted)}.link-button{font:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.site-footer a:hover,.link-button:hover{color:var(--ink)}.page{max-width:760px;margin:0 auto;padding:32px 16px 16px;line-height:1.55}.page h1{margin:14px 0 12px;font-size:28px}.page h2{margin:26px 0 6px;font-size:18px}.page p{margin:4px 0}.back-link{color:var(--rh);font-size:14px}.draft-note{color:#6b4e00;background:#fff4d6;border-radius:7px;padding:10px 14px}.table-scroll{margin:16px 0;overflow-x:auto}.credits{border-collapse:collapse;background:var(--paper);width:100%;font-size:14px}.credits th,.credits td{border-bottom:1px solid var(--border);text-align:left;vertical-align:top;padding:8px 10px}.credits-composer{color:var(--muted);font-size:13px;display:block}.feedback{background:var(--paper);width:min(480px,100vw - 32px);color:var(--ink);border:0;border-radius:12px;padding:22px;box-shadow:0 16px 50px #00000040}.feedback::backdrop{background:#1d1b1859}.feedback h2{margin:0 0 6px;font-size:20px}.feedback-intro{color:var(--muted);margin:0 0 14px;font-size:14px}.feedback label{margin-bottom:12px;font-size:14px;font-weight:600;display:block}.feedback textarea,.feedback input{width:100%;font:inherit;border:1px solid var(--border);background:#fff;border-radius:7px;margin-top:4px;padding:8px 10px;font-weight:400;display:block}.feedback textarea{resize:vertical}.feedback .honeypot{width:1px;height:1px;position:absolute;left:-10000px;overflow:hidden}.feedback-status{font-size:14px}.feedback-error{color:#8a2b0b}.feedback-actions{justify-content:flex-end;gap:8px;margin-top:6px;display:flex}.feedback-actions button:not(.primary){font:inherit;border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:7px;padding:7px 14px;font-size:14px}@media (width<=640px){.intro{padding-top:18px}.tagline{font-size:15px}.piano-bar{gap:8px 10px}.position{flex-basis:100%;min-width:0}.legend{display:none}.site-footer-above-piano{padding-bottom:300px}}