:root{--font-display: "Fraunces", "Instrument Serif", Georgia, serif;--font-serif: "Instrument Serif", "Fraunces", Georgia, serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--bg: #efe8d8;--paper: #f7f1e3;--paper-edge: #e8dfca;--ink: #1a1814;--ink-soft: #3a342c;--muted: #78706a;--rule: #cdc3ad;--rule-soft: #ddd2bb;--accent: #2a4d7a;--accent-bright: #5a89c0;--accent-warm: #b34a1e;--white-key: #fbf8ef;--white-key-shadow: #ddd4bd;--black-key: #15110d;--held-white: #5a89c0;--held-black: #7ba6d8;--target-white: #fcd5a3;--target-white-edge: #d9a96e;--target-black: #e8a85c;--match-white: #e07a1a;--match-white-edge: #a04f08;--match-black: #c25e0a;--felt: #8a2a2a;--felt-shadow: #5d1a1a}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-serif);background:var(--bg);color:var(--ink);font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;background-image:radial-gradient(ellipse at top,rgba(255,250,235,.6),transparent 60%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-attachment:fixed}main{max-width:1180px;margin:0 auto;padding:1.75rem 3rem 2rem;min-height:100vh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--rule);position:relative}header:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--rule-soft)}.masthead{display:flex;align-items:center;gap:.85rem;min-width:0}.brand-mark{font-family:"Bravura Text","Noto Music","Symbola",var(--font-display);font-size:2.6rem;line-height:1;color:var(--ink);margin-top:-.25rem;transform:translateY(2px)}.brand-text{display:flex;flex-direction:column;gap:.05rem;min-width:0}.wordmark{font-family:var(--font-display);font-size:2.4rem;font-weight:400;font-style:italic;line-height:.95;letter-spacing:-.015em;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1;font-feature-settings:"ss01","kern","liga"}.tagline{font-family:var(--font-serif);font-size:.85rem;color:var(--muted);letter-spacing:.01em;margin-top:.05rem}.tagline em{font-style:italic}.source-toggle{display:flex;align-items:baseline;gap:.5rem;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;flex-shrink:0}.source-label{color:var(--muted);margin-right:.35rem}.source-btn{background:none;border:none;font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer;padding:.3rem .4rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}.source-btn:hover,.source-btn:focus-visible{color:var(--ink);outline:none}.source-btn.active{color:var(--ink);border-bottom-color:var(--ink)}.source-toggle .divider{color:var(--rule);-webkit-user-select:none;user-select:none}#device-select,#size-select{font:inherit;font-family:var(--font-mono);text-transform:none;letter-spacing:.05em;background:var(--paper);border:1px solid var(--rule);padding:.3rem .6rem;color:var(--ink);margin-left:.85rem;cursor:pointer;border-radius:2px}#size-select{margin-left:.5rem}.display{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.25rem 0 1rem}.primary{font-family:var(--font-serif);font-size:clamp(4rem,12vw,9rem);font-style:italic;font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--ink);height:clamp(4rem,12vw,9rem);display:flex;align-items:center;justify-content:center;transition:color .22s ease,opacity .22s ease;font-feature-settings:"kern","liga","ss01";text-indent:-.04em}.primary.empty{color:var(--rule);font-family:var(--font-display);font-style:italic;font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;letter-spacing:0;font-size:0;text-indent:0}.primary.empty:before{content:"Listen";font-size:clamp(1.6rem,3.4vw,2.4rem);display:inline-block;letter-spacing:.01em}.primary.empty:after{content:"";display:inline-block;width:2.5rem;height:1px;background:var(--rule);margin-left:.7rem;vertical-align:middle;position:relative;top:-.1em}.meta{margin-top:.9rem;min-height:2.75rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}.notes{font-family:var(--font-mono);font-size:.92rem;letter-spacing:.24em;color:var(--ink-soft);text-transform:uppercase;font-weight:500}.alternates{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;opacity:.7}.keyboard-wrap{margin:.5rem 0 1rem;padding:0}.playback-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;min-height:2.75rem;margin:.5rem 0 2rem}.playback-row-side{display:flex;align-items:center;gap:1.5rem}.playback-row-left{justify-self:start}.playback-row-right{justify-self:end}.playback-row-side>div{display:flex;align-items:center;gap:.5rem}.keyboard-frame{position:relative;background:linear-gradient(to bottom,var(--paper-edge) 0%,var(--paper) 100%);border:1px solid var(--rule);border-radius:4px;padding:.65rem .65rem .5rem;box-shadow:0 1px #ffffff80 inset,0 6px 14px #1a181414}.keyboard-felt{height:6px;border-radius:2px;margin-bottom:.55rem;background:linear-gradient(to bottom,var(--felt) 0%,var(--felt) 60%,var(--felt-shadow) 100%);box-shadow:inset 0 1px #ffffff2e,inset 0 -1px #00000059;position:relative}.keyboard-felt:before,.keyboard-felt:after{content:"";position:absolute;top:50%;width:3px;height:3px;border-radius:50%;background:#ffffff59;transform:translateY(-50%)}.keyboard-felt:before{left:4px}.keyboard-felt:after{right:4px}.keyboard{position:relative;height:150px;width:100%;-webkit-user-select:none;user-select:none}.key{position:absolute;top:0;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background-color 70ms ease-out,border-color 70ms ease-out}.key:active{filter:brightness(.9)}.key.white{background:var(--white-key);border:1px solid var(--rule);height:100%;z-index:1;border-radius:0 0 3px 3px;box-shadow:inset 0 -3px 0 var(--white-key-shadow),inset 0 1px #fff9}.key.white.held{background:var(--held-white);border-color:var(--held-white);box-shadow:inset 0 -3px #0000002e}.key.black{background:linear-gradient(to bottom,#2a221a 0%,var(--black-key) 60%,#0a0805 100%);height:65%;z-index:2;border-radius:0 0 3px 3px;box-shadow:inset 0 -3px #00000080,inset 0 1px #ffffff0d}.key.black.held{background:var(--held-black);box-shadow:inset 0 -3px #0000004d}.key.white.target{background:var(--target-white);border-color:var(--target-white-edge)}.key.black.target{background:var(--target-black)}.key.white.held.target{background:var(--match-white);border-color:var(--match-white-edge);box-shadow:inset 0 -5px #0000004d}.key.black.held.target{background:var(--match-black);box-shadow:inset 0 -5px #0006}.key-finger{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:.72rem;font-weight:500;line-height:1;pointer-events:none;opacity:0;transition:opacity 80ms ease-out}.key-finger.visible{opacity:.9}.key.white .key-finger{color:var(--ink-soft)}.key.black .key-finger{color:#ffffffd9}.keyboard.fingerings-hidden .key-finger{display:none}.key-selector{display:flex;flex-direction:column;gap:.7rem;padding:0 0 1.1rem;margin-top:.25rem}.key-selector-heading{display:flex;align-items:center;gap:.85rem;margin-bottom:.1rem}.key-selector-heading-rule{flex:1;height:1px;background:var(--rule)}.key-selector-heading-text{font-family:var(--font-display);font-size:.78rem;font-style:italic;font-weight:400;letter-spacing:.04em;color:var(--ink-soft);font-variation-settings:"opsz" 14,"SOFT" 100,"WONK" 1}.key-selector-controls{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}.key-roots{display:flex;flex-wrap:wrap;gap:.15rem;font-family:var(--font-mono)}.key-root-btn{background:none;border:1px solid transparent;font:inherit;font-family:var(--font-display);font-size:.95rem;font-style:italic;font-variation-settings:"opsz" 60,"SOFT" 100,"WONK" 1;letter-spacing:0;color:var(--muted);cursor:pointer;padding:.25rem .5rem;border-radius:2px;min-width:2.1rem;text-align:center;line-height:1.1;transition:color .14s ease,background-color .14s ease,border-color .14s ease}.key-root-btn:hover{color:var(--ink)}.key-root-btn.active{color:var(--ink);background:var(--paper);border-color:var(--rule)}.key-mode-toggle{display:flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em}.key-mode-btn{background:none;border:none;font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer;padding:.35rem .4rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}.key-mode-btn:hover{color:var(--ink)}.key-mode-btn.active{color:var(--ink);border-bottom-color:var(--ink)}.key-mode-toggle .divider{color:var(--rule);-webkit-user-select:none;user-select:none}.key-mode-group{display:flex;align-items:center;gap:.85rem}.key-preview{display:flex;align-items:center}.key-preview-btn{background:var(--ink);color:var(--paper);border:none;border-radius:50%;width:1.7rem;height:1.7rem;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 2px 6px #1a181426;transition:background-color .14s ease,transform .14s ease,opacity .14s ease}.key-preview-btn:hover:not(:disabled){background:var(--accent)}.key-preview-btn.playing{background:var(--accent)}.key-preview-btn:active:not(:disabled){transform:scale(.92)}.key-preview-btn:disabled{cursor:default;opacity:.3}.key-preview-btn .play-glyph{font-size:.6rem;transform:translate(.07rem)}.key-palette{display:flex;flex-wrap:wrap;gap:.4rem;align-items:stretch;min-height:2.6rem}.key-palette-hint{font-family:var(--font-serif);font-style:italic;font-size:.95rem;color:var(--muted);align-self:center;padding:.25rem 0}.key-chord-btn{flex:1 1 0;min-width:5.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:.5rem .5rem .55rem;cursor:pointer;font:inherit;color:var(--ink);transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}.key-chord-btn:hover{border-color:var(--ink-soft);background:var(--white-key)}.key-chord-btn.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.key-chord-btn .roman{font-family:var(--font-display);font-style:italic;font-size:1.05rem;font-weight:400;line-height:1;letter-spacing:.01em;font-variation-settings:"opsz" 60,"SOFT" 100,"WONK" 1}.key-chord-btn .chord-name{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);line-height:1}.key-chord-btn:hover .chord-name{color:var(--ink-soft)}.key-chord-btn.active .chord-name{color:var(--paper-edge)}.lookup{display:flex;flex-direction:column;gap:.7rem;padding:0 0 1.25rem;margin-top:.5rem}.lookup-heading{display:flex;align-items:center;gap:.85rem;margin-bottom:.3rem;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.32em;color:var(--muted)}.lookup-heading-rule{flex:1;height:1px;background:var(--rule)}.lookup-heading-text{font-family:var(--font-display);font-size:.78rem;font-style:italic;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--ink-soft);font-variation-settings:"opsz" 14,"SOFT" 100,"WONK" 1}.lookup-row{display:flex;align-items:center;gap:1.5rem}.lookup-row-1{position:relative;flex-direction:row;align-items:stretch;column-gap:.6rem;row-gap:0;flex-wrap:wrap}.lookup-input-wrap{position:relative;display:flex;align-items:center;flex:1;min-width:0}.lookup-input{flex:1;font:inherit;font-family:var(--font-serif);font-size:.92rem;background:var(--paper);border:1px solid var(--rule-soft);padding:.5rem 2rem .5rem .85rem;color:var(--ink);border-radius:2px;outline:none;transition:border-color .14s ease,box-shadow .14s ease}.lookup-input:focus{border-color:var(--ink);box-shadow:0 0 0 3px #1a18140f}.lookup-input::placeholder{color:var(--muted);font-style:italic}.lookup-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-family:var(--font-display);font-size:1.3rem;cursor:pointer;padding:.15rem .4rem;line-height:1;opacity:0;pointer-events:none;transition:opacity .14s ease,color .14s ease}.lookup-clear:hover{color:var(--ink)}.lookup.has-target .lookup-clear{opacity:1;pointer-events:auto}.lookup-suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:10;background:var(--paper);border:1px solid var(--rule);border-radius:2px;list-style:none;margin:0;padding:.25rem 0;max-height:16rem;overflow-y:auto;box-shadow:0 6px 20px #1a18141a}.lookup-suggestion{padding:.45rem .95rem;font-family:var(--font-serif);font-size:.95rem;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;transition:background-color .1s ease}.lookup-suggestion[data-kind=scale]:after,.lookup-suggestion[data-kind=chord]:after{font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}.lookup-suggestion[data-kind=scale]:after{content:"scale"}.lookup-suggestion[data-kind=chord]:after{content:"chord"}.lookup-suggestion:hover,.lookup-suggestion.highlighted{background:#1a18140f}.lookup-hint{flex-basis:100%;margin-top:.45rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;color:var(--muted);min-height:1em;opacity:0;transition:opacity .14s ease}.lookup-hint.visible{opacity:1}.lookup-browse{margin-top:.1rem;padding:.95rem 1rem 1rem;background:var(--paper);border:1px solid var(--rule);border-radius:3px;display:flex;flex-direction:column;gap:.85rem;box-shadow:0 1px #ffffff80 inset,0 4px 14px #1a18140f}.browse-controls{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;padding-bottom:.7rem;border-bottom:1px solid var(--rule-soft)}.browse-roots{display:flex;flex-wrap:wrap;gap:.15rem}.browse-root-btn{background:none;border:1px solid transparent;font:inherit;font-family:var(--font-display);font-size:.95rem;font-style:italic;font-variation-settings:"opsz" 60,"SOFT" 100,"WONK" 1;color:var(--muted);cursor:pointer;padding:.2rem .5rem;border-radius:2px;min-width:2.1rem;text-align:center;line-height:1.1;transition:color .14s ease,background-color .14s ease,border-color .14s ease}.browse-root-btn:hover{color:var(--ink)}.browse-root-btn[aria-pressed=true]{color:var(--ink);background:var(--bg);border-color:var(--rule)}.browse-tabs{display:flex;align-items:center;gap:.3rem;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em}.browse-tab-btn{background:none;border:none;font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer;padding:.3rem .4rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}.browse-tab-btn:hover{color:var(--ink)}.browse-tab-btn[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}.browse-tabs .divider{color:var(--rule);-webkit-user-select:none;user-select:none}.browse-groups{display:flex;flex-direction:column;gap:.85rem}.browse-group{display:grid;grid-template-columns:9.5rem 1fr;gap:.85rem;align-items:baseline}.browse-group-title{font-family:var(--font-display);font-size:.85rem;font-style:italic;font-weight:400;color:var(--ink-soft);font-variation-settings:"opsz" 24,"SOFT" 100,"WONK" 1;letter-spacing:.01em;padding-top:.25rem;border-right:1px solid var(--rule-soft);padding-right:.85rem;text-align:right}.browse-group-entries{display:flex;flex-wrap:wrap;gap:.3rem}.browse-entry-btn{background:var(--bg);border:1px solid var(--rule);font:inherit;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink);cursor:pointer;padding:.32rem .65rem;border-radius:2px;line-height:1.2;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.browse-entry-btn:hover{background:var(--white-key);border-color:var(--ink-soft)}.browse-entry-btn.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.inversion-controls.disabled,.octave-controls.disabled{opacity:.4;pointer-events:none}.inversion-btn,.octave-btn{background:none;border:none;font:inherit;font-family:var(--font-mono);font-size:.85rem;color:var(--muted);cursor:pointer;padding:.2rem .45rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease,opacity .14s ease}.inversion-btn:hover,.octave-btn:hover{color:var(--ink)}.inversion-btn:disabled,.octave-btn:disabled{opacity:.3;cursor:default;color:var(--muted)}.inversion-label,.octave-label{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink);min-width:3rem;text-align:center}.octave-label{min-width:3.5rem}.play-controls.disabled,.play-mode-toggle.disabled{opacity:.4;pointer-events:none}.play-btn{background:var(--ink);color:var(--paper);border:none;border-radius:50%;width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 1px #fff3 inset,0 4px 10px #1a18142e;transition:background-color .14s ease,transform .14s ease,box-shadow .14s ease}.play-btn:hover{background:var(--accent)}.play-btn:active{transform:scale(.94);box-shadow:0 2px 6px #1a18142e}.play-glyph{font-size:1rem;line-height:1;transform:translate(.1rem)}.play-mode-toggle,.fingering-toggle{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em}.mode-btn{background:none;border:none;font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer;padding:.35rem .4rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}.mode-btn:hover{color:var(--ink)}.mode-btn.active{color:var(--ink);border-bottom-color:var(--ink)}.play-mode-toggle .divider{color:var(--rule);-webkit-user-select:none;user-select:none}.reset-controls.disabled{opacity:.4;pointer-events:none}.reset-btn{background:none;border:none;font:inherit;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;color:var(--muted);cursor:pointer;padding:.35rem .4rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}.reset-btn:hover:not(:disabled){color:var(--ink);border-bottom-color:var(--ink)}.reset-btn:disabled{cursor:default}footer{margin-top:auto;padding-top:1.4rem;border-top:1px solid var(--rule);position:relative;display:flex;flex-direction:column;align-items:center;gap:.65rem;text-align:center}footer:before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--rule-soft)}.footer-ornament{font-family:var(--font-display);font-size:1.05rem;color:var(--rule);font-style:italic;line-height:1;-webkit-user-select:none;user-select:none}#status{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.24em;color:var(--muted)}@media (max-width: 720px){main{padding:1.25rem 1.25rem 1.5rem}header{flex-direction:column;align-items:flex-start;gap:1rem}.wordmark{font-size:2rem}.brand-mark{font-size:2.2rem}.source-toggle{margin-left:-.25rem}#device-select,#size-select{margin-left:.5rem}.display{padding:1.5rem 0 1rem;min-height:160px}.keyboard{height:110px}.keyboard-frame{padding:.5rem .5rem .4rem}.meta{margin-top:1rem}.playback-row{display:flex;flex-direction:column;align-items:center;gap:1rem}.playback-row-side{flex-direction:column;gap:1rem;justify-self:auto}.playback-row-side>div{justify-content:center}.key-selector-controls{flex-direction:column;align-items:stretch;gap:.75rem}.key-roots,.key-mode-toggle{justify-content:center}.key-palette{gap:.3rem}.key-chord-btn{flex:1 1 calc(25% - .3rem);min-width:0;padding:.4rem .3rem .45rem}.key-chord-btn .roman{font-size:.95rem}.key-chord-btn .chord-name{font-size:.6rem;letter-spacing:.12em}.lookup-browse{padding:.75rem .7rem .85rem}.browse-controls{flex-direction:column;align-items:stretch;gap:.7rem}.browse-roots,.browse-tabs{justify-content:center}.browse-group{grid-template-columns:1fr;gap:.35rem}.browse-group-title{text-align:left;padding-right:0;padding-top:0;border-right:none;border-bottom:1px solid var(--rule-soft);padding-bottom:.25rem}}