:root{--paper:#f6f1e6;--card:#fffcf5;--ink:#1f1b14;--muted:#776f60;--rule:#e2d9c6;--staff:#8a8172;--accent:#2c5a8c;--accent-soft:#2c5a8c1a;--gold:#b8892a;--ok:#4e8a55;--melodic:#c79a2b;--harmonic:#b8473c;--serif:"EB Garamond", "Iowan Old Style", Georgia, serif;--sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--music:"Noto Music", "Bravura Text", "Apple Symbols", "Segoe UI Symbol", serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--paper:#16140f;--card:#1f1c16;--ink:#ece4d2;--muted:#9b917e;--rule:#37322a;--staff:#7d7465;--accent:#7fb0e6;--accent-soft:#7fb0e621;--gold:#d9ad4f;--ok:#6fb276;--melodic:#dcb246;--harmonic:#e0705f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--ink);font-family:var(--serif);margin:0;font-size:18px;line-height:1.5}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.45}a{color:inherit}.app{max-width:920px;margin:0 auto;padding:0 16px 48px}.dim{color:var(--muted)}.small{font-size:15px}.row{flex-wrap:wrap;gap:10px;display:flex}.masthead{justify-content:space-between;align-items:center;margin-bottom:20px;padding:18px 0 14px;display:flex}.wordmark{letter-spacing:-.01em;font-size:30px;font-weight:600;text-decoration:none}.wordmark span{color:var(--gold);font-style:italic;font-weight:400}.wordmark small{background:var(--ink);color:var(--paper);font-family:var(--sans);letter-spacing:.04em;vertical-align:6px;border-radius:6px;margin-left:8px;padding:2px 7px;font-size:13px;font-weight:600}.settings{gap:2px;display:flex}.icon-btn{min-width:38px;height:38px;color:var(--muted);opacity:.55;font-family:var(--sans);background:0 0;border:none;border-radius:999px;padding:0 8px;font-size:14px;transition:background-color .15s,opacity .15s}.icon-btn.on{color:var(--ink);opacity:1}.icon-btn:hover{background:var(--card)}.primary,.ghost-btn,.link{font-family:var(--sans);border-radius:999px;padding:10px 18px;font-size:15px;transition:transform .12s,background-color .15s,opacity .15s}.primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink);white-space:nowrap;font-weight:600}.primary.gold{background:var(--gold);border-color:var(--gold);color:#1f1b14}.primary .count{opacity:.7;margin-left:6px;font-weight:400}.ghost-btn{border:1px solid var(--rule);background:0 0}.ghost-btn:hover:not(:disabled){background:var(--card)}.primary:active:not(:disabled),.ghost-btn:active:not(:disabled){transform:scale(.97)}.link{color:var(--muted);background:0 0;border:none;padding:6px 0}.link:hover{color:var(--ink)}.intro{margin-bottom:22px}.eyebrow{font-family:var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-size:13px}.lede{max-width:36em;margin:0;font-size:20px}.home-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.segmented{background:var(--rule);border-radius:999px;padding:3px;display:inline-flex}.segmented button{font-family:var(--sans);color:var(--muted);background:0 0;border:none;border-radius:999px;padding:7px 14px;font-size:14px;transition:background-color .15s,color .15s}.segmented button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px #00000014}.species-list{border-top:1px solid var(--rule);margin:0 0 18px;padding:0;list-style:none}.species-row{border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;gap:16px;padding:12px 0;display:flex}.species-label{align-items:baseline;gap:14px;min-width:0;font-size:20px;display:flex}.numeral{width:34px;color:var(--gold);text-align:center;flex:none;font-size:22px;font-style:italic}.levels{flex:none;gap:8px;display:flex}.level{border:1px solid var(--rule);background:var(--card);border-radius:12px;place-items:center;width:48px;height:48px;font-size:19px;transition:transform .12s,border-color .15s;display:grid;position:relative}.level:hover{border-color:var(--ink)}.level:active{transform:scale(.95)}.level .tag{font-family:var(--sans);opacity:.85;font-size:10px;position:absolute;bottom:3px}.level.won{background:var(--ok);border-color:var(--ok);color:#fff}.level.lost{background:var(--harmonic);border-color:var(--harmonic);color:#fff}.level.started{border-color:var(--melodic);border-width:2px}.game-head{margin-bottom:18px}.game-head h2{margin:4px 0 2px;font-size:30px;font-weight:500;line-height:1.2}.game-head p{margin:0;font-size:16px}.card{background:var(--card);border:1px solid var(--rule);border-radius:16px}.score{padding:8px 0;overflow:hidden}.staff-scroll{-webkit-overflow-scrolling:touch;padding:0 8px;overflow-x:auto}.staff{touch-action:none;-webkit-user-select:none;user-select:none;display:block}.staff .staff-line,.staff .ledger{stroke:var(--staff);stroke-width:.9px}.staff .ledger{stroke-width:1.1px}.staff .barline{stroke:var(--staff);stroke-width:1px}.staff .barline-heavy{fill:var(--staff)}.staff .clef{font-family:var(--music);fill:var(--ink);font-size:40px}.staff .bar-number{font-family:var(--sans);fill:var(--muted);font-size:9px}.staff .note{fill:var(--ink);color:var(--ink)}.staff .note .stem,.staff .stem,.staff .tie,.staff .flag{stroke:currentColor;stroke-width:1.3px}.staff .tie,.staff .flag{fill:currentColor;stroke-width:.6px}.staff .note.cantus{fill:var(--ink)}.staff .hole{fill:var(--card)}.staff .note.user{fill:var(--accent);color:var(--accent)}.staff .note.mark-ok{fill:var(--ok);color:var(--ok)}.staff .note.mark-melodic{fill:var(--melodic);color:var(--melodic)}.staff .note.mark-harmonic{fill:var(--harmonic);color:var(--harmonic)}.staff .note.flagged ellipse:not(.hole){stroke:var(--harmonic);stroke-width:2.5px;paint-order:stroke}.staff .accidental{font-family:var(--music);font-size:19px}.staff .keysig{fill:var(--ink)}.staff .ghost{fill:none;stroke:var(--accent);stroke-width:1.2px;stroke-dasharray:2.5 2;opacity:.55}.staff .ghost.short ellipse{fill:var(--accent-soft)}.staff .ghost.active{opacity:1;stroke-width:1.6px}.staff .selection{fill:var(--accent-soft)}.staff .preview{opacity:.35}.staff .preview .note{fill:var(--accent)}.staff .rest{fill:var(--ink)}.staff .figure{font-family:var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums;font-size:10px}.staff .figure.dissonant{fill:var(--ink);font-style:italic}.staff .playhead{stroke:var(--gold);stroke-width:1.5px}.staff .hit{fill:#0000;cursor:ns-resize}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 6px;display:flex}.nudge{font-family:var(--sans);align-items:center;gap:4px;display:flex}.nudge button{border:1px solid var(--rule);background:var(--card);border-radius:10px;width:40px;height:40px;font-size:13px}.nudge .pitch{text-align:center;font-variant-numeric:tabular-nums;min-width:52px;font-size:15px}.hint{font-size:14px;font-family:var(--sans);margin:4px 0 18px}@media (hover:none){.hint .keys{display:none}}.result{margin:16px 0;padding:18px 20px}.result h3{margin:0 0 4px;font-size:24px;font-weight:500}.result p{margin:0 0 14px}.result.won{border-color:var(--ok)}.feedback{align-items:flex-start;gap:28px;margin:18px 0 22px;display:flex}.tries{flex:none;gap:4px;display:grid}.try-row{gap:4px;display:flex}.sq{border:1px solid var(--rule);vertical-align:-3px;background:0 0;border-radius:4px;width:16px;height:16px;display:inline-block}.sq.mark-ok{background:var(--ok);border-color:var(--ok)}.sq.mark-melodic{background:var(--melodic);border-color:var(--melodic)}.sq.mark-harmonic{background:var(--harmonic);border-color:var(--harmonic)}.violations{flex:1;min-width:0}.violations h4,.rules h4{font-family:var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;font-size:12px;font-weight:600}.violations ul{margin:0;padding:0;list-style:none}.violations li{cursor:pointer;border-radius:8px;align-items:baseline;gap:8px;margin:0 -8px;padding:5px 8px;font-size:17px;display:flex}.violations li:hover{background:var(--card)}.violations .dot{border-radius:50%;flex:none;width:9px;height:9px;transform:translateY(-1px)}.v-harmonic .dot{background:var(--harmonic)}.v-melodic .dot{background:var(--melodic)}.violations .bar{font-family:var(--sans);color:var(--muted);flex:none;min-width:40px;font-size:12px}.rules{padding:4px 20px}.rules summary{cursor:pointer;padding:12px 0;font-size:18px}.rules ul{margin:0 0 16px;padding-left:20px}.rules li{margin-bottom:4px}.composing{color:var(--muted);text-align:center;padding:60px 0;font-style:italic;animation:1.6s ease-in-out infinite breathe}@keyframes breathe{50%{opacity:.45}}dialog.help{border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:18px;max-width:min(580px,100vw - 32px);max-height:calc(100dvh - 48px);padding:0}dialog.help::backdrop{background:#14100a73}.help-body{padding:22px 26px 18px;position:relative}.help-body h2{margin:0 0 8px;font-size:28px;font-weight:500}.help-body h3{margin:18px 0 6px;font-weight:500}.help-body p{margin:0 0 10px}.help-body ul{margin:0 0 10px;padding-left:20px}.help-body .legend{padding:0;list-style:none}.help-body .legend li{align-items:baseline;gap:10px;margin-bottom:6px;display:flex}.help-body .legend .sq{flex:none}.close{border:1px solid var(--rule);width:36px;height:36px;font-family:var(--sans);background:0 0;border-radius:50%;font-size:14px;position:absolute;top:14px;right:14px}.toast{background:var(--ink);color:var(--paper);font-family:var(--sans);opacity:0;pointer-events:none;border-radius:999px;padding:10px 18px;font-size:15px;transition:opacity .2s,transform .2s;position:fixed;bottom:28px;left:50%;transform:translate(-50%,12px)}.toast.show{opacity:1;transform:translate(-50%)}footer{margin-top:40px;font-size:14px}@media (width<=640px){body{font-size:17px}.lede{font-size:19px}.species-row{flex-direction:column;align-items:stretch;gap:6px;padding:10px 0}.segmented .dim{display:none}.level{height:44px}.levels{grid-template-columns:repeat(5,1fr);display:grid}.level{width:auto}.feedback{flex-direction:column;gap:16px}.toolbar .primary{flex:100%;order:3}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}