:root{color-scheme:dark;--bg0: #0e0d0b;--bg1: #1a1714;--ink: #efe8dc;--muted: #b7aa98;--line: #3a342c;--gold: #c4a574;--gold-dim: #8a734c;--ivory: #f3eee4;--ivory-down: #e4c98a;--ebony: #161310;--ebony-down: #6a5633;--rail: #2a231c;--shadow: rgba(0, 0, 0, .45);--sans: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1200px 500px at 50% -10%,#3a2e20 0%,transparent 55%),var(--bg0);color:var(--ink);font-family:var(--sans)}.page{max-width:1100px;margin:0 auto;padding:28px 20px 48px}.top{display:grid;gap:12px;margin-bottom:22px}.brand-row{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:1.15em;row-gap:.15em}.brand h1{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:.02em;font-size:clamp(2.2rem,5vw,3.4rem);margin:0;line-height:1}.motto{margin:0;color:var(--muted);font-family:var(--serif);font-weight:400;font-size:clamp(.82rem,1.8vw,1.12rem);line-height:1.2}.motto .pianoforte{font-family:Palatino,Palatino Linotype,Book Antiqua,New Century Schoolbook,Century Schoolbook,Times New Roman,Times,serif;font-style:italic;font-weight:400;letter-spacing:.16em;color:var(--ink)}.tag{margin:6px 0 0;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}.lede{margin:0;max-width:62ch;color:var(--muted);line-height:1.45;font-size:.98rem}.controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px 16px;margin-bottom:10px;align-items:start}.control{display:grid;gap:6px}.control.grow{min-width:180px}.tonic-block{grid-column:1 / 3}.classic-block{grid-column:3}.scale-block{grid-column:1}.accidental-block{grid-column:2}.labels-block{grid-column:3}.label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.tonics{display:flex;flex-wrap:wrap;gap:6px}.tonics button,.classic-piano,select{background:var(--bg1);color:var(--ink);border:1px solid var(--line);border-radius:6px;font:inherit}.tonics button{min-width:2.6rem;padding:6px 8px;cursor:pointer}.tonics button.tonic-low{background:#161310}.tonics button[aria-pressed=true],.classic-piano[aria-pressed=true]{background:var(--gold);color:#1a140c;border-color:var(--gold);font-weight:600}select{padding:8px 10px;min-width:12rem}.classic-piano{width:100%;min-width:12rem;padding:8px 10px;cursor:pointer}.labels-block select,.accidental-block select{width:100%}.status{margin:4px 0 12px;color:var(--gold);font-size:.95rem}.demo{display:grid;gap:8px;margin:0 0 16px;padding:12px 14px 14px;border:1px solid var(--line);border-radius:10px;background:#1a1714a6}.demo-title{margin:0;font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--ink)}.demo-note{margin:0;color:var(--muted);font-size:.88rem;line-height:1.4;max-width:none}.demo-row{display:flex;flex-wrap:wrap;gap:8px}.melody-key-row{align-items:center}.melody-key-row .label{flex-shrink:0}.degree-strip{position:relative;height:2.5rem;margin-bottom:8px}.degree-strip .degree-box{position:absolute;top:0;bottom:0;box-sizing:border-box;padding:3px 1px 2px;border:1px solid #c9c2b4;border-radius:5px;background:var(--ivory);color:#1a140c;text-align:center;overflow:hidden}.degree-strip .degree-box.song-lit{background:var(--gold);border-color:var(--gold);color:#1a140c}.degree-strip .degree-box.song-lit .note{color:#4a3d28}.degree-strip .degree-box .num{display:block;font-size:clamp(.7rem,1.6vw,1.05rem);font-weight:650;line-height:1.15}.degree-strip .degree-box .note{display:block;font-size:clamp(.55rem,1.1vw,.72rem);color:#5c5348;margin-top:1px}.demo-row button{background:var(--bg1);color:var(--ink);border:1px solid var(--line);border-radius:6px;font:inherit;padding:8px 12px;cursor:pointer}.demo-row button[aria-pressed=true],.demo-row button.demo-play{background:var(--gold);color:#1a140c;border-color:var(--gold);font-weight:600}.demo-row button:disabled{opacity:.55;cursor:wait}.board{background:linear-gradient(#3b3228,var(--rail));border-radius:12px;padding:14px 12px 18px;box-shadow:0 18px 40px var(--shadow),inset 0 1px #ffffff14}.function-rail{display:flex;align-items:stretch;flex-wrap:nowrap;gap:6px;margin-bottom:10px}.listen-key{flex:0 0 3.2rem;width:3.2rem;max-height:3.2rem;height:3.2rem;padding:0;display:grid;place-items:center;border-radius:8px;border:1px solid #4a433c;background:#3a342c;color:#8a8178;opacity:.55;cursor:not-allowed;filter:grayscale(1)}.listen-key svg{width:1.35rem;height:1.35rem;display:block}.listen-key:disabled{opacity:.55;cursor:not-allowed}.latch-key{flex:0 0 3.2rem;width:3.2rem;max-height:3.2rem;height:3.2rem;padding:2px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);background:var(--bg1);color:var(--ink);font:inherit;font-weight:650;font-size:clamp(.62rem,1.4vw,.82rem);line-height:1.1;cursor:pointer}.latch-key[aria-pressed=true]{background:var(--gold);color:#1a140c;border-color:var(--gold)}.function-pads{display:flex;flex:1;gap:6px;min-width:0}.function-pads button{flex:1;min-width:0;aspect-ratio:1;max-height:3.2rem;padding:3px 2px;border-radius:8px;border:1px solid var(--line);background:var(--bg1);color:var(--ink);font:inherit;cursor:pointer;line-height:1.1}.function-pads button.fn-low{background:#161310}.function-pads button .fn{display:block;font-weight:650;font-size:clamp(.78rem,1.6vw,1rem)}.function-pads button .fn-note{display:block;margin-top:2px;font-size:clamp(.58rem,1.1vw,.72rem);color:var(--muted)}.demo-row.chord-steps{align-items:stretch;flex-wrap:wrap;gap:6px}.demo-row.chord-steps button{flex:0 0 auto;width:3.2rem;max-width:3.2rem;aspect-ratio:1;max-height:3.2rem;padding:3px 2px;border-radius:8px;border:1px solid var(--gold-dim);background:var(--bg1);color:var(--ink);font:inherit;font-weight:500;cursor:pointer;line-height:1.05}.chord-steps button .fn{display:block;font-weight:650;font-size:clamp(.72rem,1.5vw,.95rem)}.chord-steps button .fn-note{display:block;font-size:clamp(.55rem,1.05vw,.68rem);color:var(--muted)}.chord-steps button .fn-bars{display:block;margin-top:1px;font-size:clamp(.5rem,.95vw,.62rem);color:var(--gold);font-weight:600}.demo-row.chord-steps button[aria-pressed=true]{background:var(--gold);color:#1a140c;border-color:var(--gold);font-weight:600}.chord-steps button[aria-pressed=true] .fn-note,.chord-steps button[aria-pressed=true] .fn-bars{color:#4a3d28}.function-pads button.fn-hot{border-color:var(--gold-dim)}.function-pads button[aria-pressed=true]{background:var(--gold);color:#1a140c;border-color:var(--gold)}.function-pads button[aria-pressed=true] .fn-note{color:#4a3d28}.function-pads button:disabled{opacity:.35;cursor:default}#keyboard{width:100%;height:clamp(168px,28vh,260px);display:block;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:6px;background:#0a0908}#keyboard .qwerty-label{letter-spacing:0;text-transform:none}.hint{margin:10px 0 0;color:var(--muted);font-size:.85rem}html.play-locked #play-app{display:none!important}.account{margin-top:2rem;display:grid;gap:.85rem;max-width:36rem}.acct-cta{margin:0;color:var(--ink);font-size:.95rem;line-height:1.45}.acct-cta.paid{color:var(--gold)}.acct-box{border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;background:var(--bg1)}.acct-box p{margin:0 0 .6rem;color:var(--muted);font-size:.88rem;line-height:1.45}.acct-box label{display:block;font-size:.82rem;color:var(--muted);font-weight:600;margin:0 0 .35rem}.acct-box input[type=email]{width:100%;max-width:22rem;padding:.45rem .65rem;border:1px solid var(--line);border-radius:8px;background:var(--bg0);color:var(--ink);font-size:.95rem;margin-bottom:.55rem}.legal-check{display:flex;gap:.5rem;align-items:flex-start;font-weight:500;color:var(--muted);font-size:.85rem;line-height:1.45;margin:.35rem 0 .55rem}.legal-check input{margin-top:.2rem;flex:0 0 auto}.acct-btn{background:var(--gold-dim);color:var(--ivory);border:0;border-radius:8px;padding:.55rem .9rem;font-weight:600;cursor:pointer}.acct-btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}.acct-msg{margin:.55rem 0 0;font-size:.9rem}.acct-msg.ok{color:#9dce9a}.acct-msg.bad{color:#e8a090}[hidden]{display:none!important}footer{margin-top:28px;display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:.8rem;line-height:1.4}footer a{color:var(--gold)}footer code{font-size:.85em}@media(max-width:640px){.page{padding:18px 12px 32px}.lede{font-size:.92rem}.controls{grid-template-columns:1fr}.tonic-block,.classic-block,.scale-block,.accidental-block,.labels-block{grid-column:1}select,.classic-piano{min-width:0;width:100%}.control.grow{width:100%;min-width:0}.function-rail{gap:6px}.function-pads{gap:5px}.listen-key,.latch-key{flex-basis:2.6rem;width:2.6rem;height:2.6rem;max-height:2.6rem}.latch-key{font-size:clamp(.52rem,2.4vw,.72rem)}.function-pads button{max-height:2.6rem}.function-pads button .fn{font-size:clamp(.62rem,2.2vw,.88rem)}.function-pads button .fn-note{font-size:clamp(.48rem,1.8vw,.62rem)}}