:root{--font:"Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--display:"Melodrama", "Times New Roman", Georgia, serif;--mono:"Satoshi", ui-monospace, monospace;--radius:14px;--bg:#0d0e11;--surface:#15171b;--surface-2:#1c1f24;--line:#262a31;--stage:#08090b;--text:#f3efe7;--muted:#8b909a;--faint:#545a64;--lamp:#a3b18a;--lamp-2:#7f8f68;--lamp-ink:#1c2117;--lamp-text:#b3c09b;--scale:#c9a66b;--scale-white:#e3d0a8;--scale-black:#5e5341;--held-white:#6f9e45;--held-white-edge:#4f7630;--held-black:#b4e07a;--preview:#62b0f5;--preview-2:#2f86d4;--preview-ink:#06233d;--warn:#ff8a6b;--key-white:#ebe7de;--key-white-edge:#b9b4aa;--key-black:#1a1c20;--key-black-edge:#000;--key-label:#6f6a61;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--bg:#f4f1ea;--surface:#fffdf9;--surface-2:#f1ede5;--line:#e1dbcf;--stage:#ebe6dc;--text:#17181b;--muted:#6a6f78;--faint:#a7a296;--lamp:#8fa478;--lamp-2:#6e835a;--lamp-ink:#1a1f15;--lamp-text:#5b7046;--scale:#a07c3f;--scale-white:#ead7ae;--scale-black:#6c5d43;--held-white:#6f9e45;--held-white-edge:#4f7630;--held-black:#a5d268;--preview:#1f6fc8;--preview-2:#154f91;--preview-ink:#fff;--warn:#c8492a;--key-white:#fff;--key-white-edge:#cfc9bd;--key-black:#22252a;--key-black-edge:#0c0d0f;--key-label:#9a948a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0}button,select,input{font:inherit;color:inherit}.app{grid-template-rows:auto minmax(calc(234px + clamp(110px,16vh,190px)),1fr) auto auto auto;row-gap:0;max-width:1600px;height:100dvh;margin:0 auto;padding:0 clamp(16px,2.5vw,36px) 18px;display:grid}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:18px 0 8px;display:flex}.brand{font-family:var(--display);align-items:center;gap:10px;font-size:24px;font-weight:600;display:flex}.brand__lamp{background:var(--lamp);border-radius:50%;width:10px;height:10px}.topbar__controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.device{background:var(--surface);border:1px solid var(--line);border-radius:10px;align-items:center;gap:8px;height:36px;padding:0 10px;display:flex}.device select{cursor:pointer;background:0 0;border:0;outline:none;max-width:260px;font-size:14px}.device select option{background:var(--surface)}.device__dot{background:var(--faint);border-radius:50%;width:8px;height:8px}.device__dot.is-on{background:var(--lamp)}.pedal{border:1px solid var(--line);height:36px;color:var(--faint);letter-spacing:.02em;border-radius:10px;align-items:center;padding:0 12px;font-size:13px;font-weight:600;transition:all 80ms;display:inline-flex}.pedal.is-on{color:var(--lamp-ink);background:var(--lamp);border-color:var(--lamp)}.seg{background:var(--surface);border:1px solid var(--line);border-radius:10px;height:36px;padding:3px;display:inline-flex}.seg button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:7px;padding:0 11px;font-size:14px}.seg button.is-on{background:var(--surface-2);color:var(--text);box-shadow:0 0 0 1px var(--line)}.seg button:disabled{cursor:not-allowed;opacity:.5}.btn{border:1px solid var(--line);background:var(--surface-2);cursor:pointer;white-space:nowrap;border-radius:10px;height:36px;padding:0 14px;font-size:14px}.btn:hover:not(:disabled){border-color:var(--faint)}.btn:disabled{opacity:.4;cursor:default}.btn--ghost{background:0 0}.btn--icon{width:36px;padding:0;font-size:16px}.btn[aria-pressed=true]{background:var(--lamp);color:var(--lamp-ink);border-color:var(--lamp)}.btn--piano{font-variant-numeric:tabular-nums;min-width:72px}.btn--piano.is-waiting{opacity:.75}:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}.instrument{border-radius:var(--radius);background:var(--stage);border:1px solid var(--line);grid-template-rows:minmax(220px,1fr) auto;min-height:0;padding:0 10px 12px;display:grid;position:relative;overflow:hidden}.waterfall{min-height:0;position:relative;container-type:size}.waterfall__canvas{width:100%;height:100%;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#00000026 0%,#0006 15%,#000 60%);mask-image:linear-gradient(#00000026 0%,#0006 15%,#000 60%)}.waterfall__overlay{pointer-events:none;justify-content:center;display:flex;position:absolute;inset:0}.waterfall__overlay .empty{pointer-events:auto}.hero{text-align:center;flex-direction:column;justify-content:flex-start;align-items:center;padding:clamp(12px,3vh,36px) 0 0;transition:opacity .4s;display:flex}.hero--stale{opacity:.55}.hero--idle{justify-content:center}.hero__name{font-family:var(--display);letter-spacing:-.02em;color:var(--text);text-shadow:0 0 24px var(--stage), 0 0 48px var(--stage);white-space:nowrap;font-weight:500;line-height:.9}.hero__name--xl{font-size:clamp(56px,min(16vw,20vh,36cqh),240px)}.hero__name--lg{font-size:clamp(48px,min(11vw,15vh,30cqh),180px)}.hero__name--md{font-size:clamp(36px,min(7vw,9vh,24cqh),110px)}.hero__name--ghost{color:var(--faint);opacity:.5;text-shadow:none}.hero__extra{color:var(--warn);letter-spacing:-.01em;vertical-align:super;margin-left:.2em;font-size:.36em;font-weight:600}.hero__meta{background:color-mix(in srgb, var(--stage) 88%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;flex-direction:column;align-items:center;gap:6px;margin-top:8px;padding:6px 16px 8px;display:flex}.hero__detail{color:var(--muted);margin:0;font-size:clamp(15px,1.4vw,20px);font-weight:500}.hero__notes{color:var(--lamp-text);flex-wrap:wrap;justify-content:center;gap:14px;min-height:1.4em;margin:0;font-size:clamp(14px,1.2vw,18px);font-weight:700;display:flex}.hero__alts{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:2px 0 0;display:flex}.hero__alts-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-right:4px;font-size:14px}.chip{border:1px solid var(--line);background:var(--surface);font-family:var(--display);border-radius:999px;padding:3px 12px;font-size:clamp(16px,1.4vw,22px);font-weight:500}.acc{vertical-align:.75em;margin:0 .02em 0 .01em;font-family:Satoshi,system-ui,sans-serif;font-size:.5em;font-weight:500;line-height:0}.match__name .acc,.chip .acc{vertical-align:.3em;font-size:.75em}.empty{text-align:center;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface);align-self:center;max-width:560px;padding:28px}.empty h2{font-family:var(--display);margin:0 0 10px;font-size:32px;font-weight:500}.empty p{color:var(--muted);margin:0 0 10px;line-height:1.5}.empty strong{color:var(--text);font-weight:600}.empty__sub{font-size:14px;color:var(--faint)!important}.empty__error{font-family:var(--mono);font-size:12px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.scale{grid-template-columns:minmax(300px,.8fr) 1.6fr;display:grid}.scale>div{min-width:0;padding:14px 18px}.scale__selected{border-right:1px solid var(--line)}.panel__head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;min-height:30px;margin-bottom:10px;display:flex}.panel__head h2{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0;font-size:13px;font-weight:600}.panel__actions{align-items:center;gap:12px;display:flex}.switch{color:var(--muted);cursor:pointer;align-items:center;gap:8px;font-size:14px;display:inline-flex}.switch input{opacity:0;pointer-events:none;position:absolute}.switch__track{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;width:34px;height:20px;transition:background .12s;position:relative}.switch__track:after{content:"";background:var(--muted);border-radius:50%;width:14px;height:14px;transition:transform .12s,background .12s;position:absolute;top:2px;left:2px}.switch input:checked+.switch__track{background:var(--lamp);border-color:var(--lamp)}.switch input:checked+.switch__track:after{background:var(--lamp-ink);transform:translate(14px)}.switch input:focus-visible+.switch__track{outline:2px solid var(--lamp);outline-offset:2px}.pcs{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.pc{border:1px solid var(--line);background:var(--surface-2);height:40px;color:var(--muted);cursor:pointer;border-radius:10px;font-size:17px;font-weight:600}.pc:hover{border-color:var(--faint)}.pc.is-on{background:var(--lamp);color:var(--lamp-ink);border-color:var(--lamp)}.pc.is-on.is-outside{background:var(--warn);border-color:var(--warn)}.hint{color:var(--faint);margin:10px 0 0;font-size:14px}.badge{color:var(--warn);border:1px solid;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}.matches{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.match{border:1px solid var(--line);border-radius:10px;justify-content:space-between;align-items:flex-start;gap:10px;min-width:0;padding:10px 12px;display:flex}.match__body{flex:1;min-width:0}.match--top{background:var(--surface-2)}.match.is-locked{border-color:var(--scale);background:color-mix(in srgb, var(--scale) 10%, transparent)}.match__name{white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:700;overflow:hidden}.match--top .match__name{font-family:var(--display);font-size:clamp(22px,2vw,28px);font-weight:500;line-height:1.05}.match__notes{letter-spacing:.05em;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:12px;overflow:hidden}.match__same,.match__warn{white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-size:12px;overflow:hidden}.match__same{color:var(--scale)}.match__warn{color:var(--warn)}.match__fit{background:var(--line);border-radius:2px;max-width:160px;height:3px;margin-top:7px;overflow:hidden}.match__fit span{background:var(--scale);border-radius:2px;height:100%;display:block}.match__fit--hidden{visibility:hidden}.matches{grid-auto-rows:1fr}.match--empty{border-style:dashed;background:0 0!important}.match__hint{font-family:var(--font);color:var(--faint);font-size:14px;font-weight:500}.btn--lock{flex-shrink:0;min-width:64px}.btn--small{border-radius:8px;height:28px;padding:0 10px;font-size:13px}.keyboard{border-top:3px solid var(--lamp-2);height:clamp(110px,16vh,190px);position:relative}.keyboard.is-playable{touch-action:none;-webkit-user-select:none;user-select:none}.key{cursor:pointer;border:0;flex-direction:column;justify-content:flex-end;align-items:center;padding:0;transition:background-color 60ms,box-shadow 60ms;display:flex;position:absolute;top:0}.key--white{background:var(--key-white);height:100%;box-shadow:inset -1px 0 0 var(--key-white-edge), inset 0 -4px 0 var(--key-white-edge);z-index:1;border-radius:0 0 6px 6px;padding-bottom:10px}.key--white.in-scale{background:var(--scale-white)}.key--black{background:linear-gradient(#2b2e34, var(--key-black) 30%);height:62%;box-shadow:inset 0 -3px 0 var(--key-black-edge), 0 2px 3px #00000080;z-index:2;border-radius:0 0 4px 4px;padding-bottom:8px;transform:translate(-50%)}.key--black.in-scale{background:var(--scale-black)}.key--white.is-preview{background:var(--preview);box-shadow:inset -1px 0 0 var(--preview-2), inset 0 -4px 0 var(--preview-2)}.key--black.is-preview{background:var(--preview);box-shadow:inset 0 -3px 0 var(--preview-2), 0 2px 3px #00000080}.key--white.is-held{background:var(--held-white);box-shadow:inset -1px 0 0 var(--held-white-edge), inset 0 -4px 0 var(--held-white-edge)}.key--black.is-held{background:var(--held-black);box-shadow:inset 0 -3px #0000004d,0 2px 3px #00000080}.key--white.is-suggested,.key--black.is-suggested{box-shadow:inset 0 0 0 2px var(--preview)}.key--white.is-preview.is-held{box-shadow:inset 0 0 0 3px var(--preview)}.key--black.is-preview.is-held{box-shadow:inset 0 0 0 2px var(--preview)}.key__label{color:var(--key-label);pointer-events:none;font-size:11px;font-weight:600}.key--black .key__label{color:#b7b2a8}.key__label--held{font-size:13px;font-weight:700;color:var(--lamp-ink)!important}.key__label--suggested{color:var(--preview-2)}.key--black .key__label--suggested{color:var(--preview)}.key__label--preview{font-size:13px;font-weight:700;color:var(--preview-ink)!important}.key__dot{background:var(--lamp-2);pointer-events:none;border-radius:50%;width:7px;height:7px;margin-bottom:6px;box-shadow:0 0 0 2px #00000026}.key.is-held .key__dot{background:var(--lamp-ink)}.key--black .key__dot{background:var(--lamp)}.key__root{background:var(--lamp-ink);width:17px;height:17px;color:var(--lamp);pointer-events:none;border-radius:50%;margin-bottom:5px;font-size:10px;font-weight:800;line-height:17px}.key__root--preview{background:var(--preview-ink);color:var(--preview)}.keyboard__overflow{z-index:3;color:var(--lamp-text);font-size:12px;font-weight:700;position:absolute;top:-24px}.keyboard__overflow--left{left:4px}.keyboard__overflow--right{right:4px}.chordbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;margin:8px 0 10px;display:flex}.csearch{flex-wrap:wrap;align-items:center;gap:10px;min-width:0;display:flex;position:relative}.csearch__field{border:1px solid var(--line);background:var(--surface);width:280px;max-width:100%;height:36px;color:var(--muted);border-radius:10px;align-items:center;gap:8px;padding:0 10px;display:flex}.csearch__field:focus-within{border-color:var(--preview)}.csearch__icon{flex-shrink:0}.csearch__field input{min-width:0;font:inherit;color:var(--text);background:0 0;border:0;outline:none;flex:1;font-size:14px}.csearch__field input::placeholder{color:var(--faint)}.csearch__hint{border:1px solid var(--line);font:inherit;color:var(--faint);border-radius:5px;padding:0 6px;font-size:12px}.csearch__results{z-index:30;border:1px solid var(--line);background:var(--surface);border-radius:12px;width:400px;max-width:calc(100vw - 32px);max-height:300px;margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% + 6px);left:0;overflow-y:auto;box-shadow:0 12px 32px #00000059}.csearch__result{cursor:pointer;border-radius:8px;grid-template-columns:76px minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:7px 10px;display:grid}.csearch__result.is-active{background:color-mix(in srgb, var(--preview) 18%, transparent)}.csearch__none{color:var(--muted);padding:10px;font-size:14px}.csearch__sym{font-family:var(--display);white-space:nowrap;font-size:20px;font-weight:500;line-height:1.1}.csearch__sym .acc{vertical-align:.35em;font-size:.7em}.csearch__name{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.csearch__notes{color:var(--text);white-space:nowrap;font-size:13px;font-weight:600}.csearch__pin{border:1px solid var(--preview);background:color-mix(in srgb, var(--preview) 14%, transparent);border-radius:10px;align-items:center;gap:10px;height:36px;padding:0 4px 0 12px;display:flex}.csearch__pin button{width:26px;height:26px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:7px;font-size:18px;line-height:1}.csearch__pin button:hover{color:var(--text)}.legend{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:20px;font-size:13px;display:flex}.legend span{align-items:center;gap:7px;display:inline-flex}.lg{border-radius:3px;width:14px;height:14px;font-style:normal;display:inline-block}.lg--held{background:var(--held-white)}.lg--scale{background:var(--scale-white);border:1px solid var(--scale)}.lg--dot{background:var(--lamp-2);border-radius:50%;width:8px;height:8px}.lg--preview{background:var(--preview)}.lg--suggest{box-shadow:inset 0 0 0 2px var(--preview)}.lg--root{background:var(--lamp-ink);width:16px;height:16px;color:var(--lamp);text-align:center;border-radius:50%;font-size:9px;font-weight:800;line-height:16px}@media (height<=700px),(width<=860px){.app{height:auto;min-height:100dvh}.instrument{grid-template-rows:300px auto}}@media (width<=860px){.scale{grid-template-columns:1fr}.scale__selected{border-right:0;border-bottom:1px solid var(--line)}.matches{grid-template-columns:1fr}.key__label{font-size:8px}}.midimap{position:relative}.midimap__group{display:inline-flex}.midimap__group .btn:first-child{border-radius:10px 0 0 10px}.midimap__group .btn:last-child{border-left:0;border-radius:0 10px 10px 0}.btn--map{color:var(--muted);background:0 0;padding:0 10px;font-size:13px}.btn--map.is-mapped{color:var(--lamp-text)}.btn--map[aria-pressed=true]{color:var(--lamp-ink)}.midimap__learn{z-index:10;border:1px solid var(--line);background:var(--surface);width:280px;color:var(--muted);border-radius:12px;flex-direction:column;gap:6px;padding:14px;font-size:13px;line-height:1.45;display:flex;position:absolute;top:calc(100% + 8px);box-shadow:0 12px 32px #00000059}.midimap__learn--right{right:0}.midimap__learn--left{left:0}.midimap__learn strong{color:var(--text);font-size:14px;animation:1.2s ease-in-out infinite pulse}.midimap__actions{justify-content:flex-end;gap:8px;margin-top:6px;display:flex}@keyframes pulse{50%{opacity:.5}}.toast{z-index:5;background:var(--lamp);color:var(--lamp-ink);pointer-events:none;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;animation:1.4s forwards toast;position:absolute;top:12px;right:14px}@keyframes toast{0%{opacity:0;transform:translateY(-4px)}12%,70%{opacity:1;transform:none}to{opacity:0}}.prog{grid-template-columns:minmax(0,1fr) min(30%,340px);height:90px;margin-bottom:10px;display:grid;overflow:hidden}.prog__section{flex-direction:column;gap:6px;min-width:0;padding:10px 18px;display:flex}.prog__section+.prog__section{border-left:1px solid var(--line)}.prog h2{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:12px;font-weight:600;overflow:hidden}.prog__head{justify-content:space-between;align-items:center;gap:12px;min-height:20px;display:flex}.prog__suggest{flex-shrink:0;align-items:center;gap:10px;display:flex}.prog__next{color:var(--faint);white-space:nowrap;font-size:12px;font-weight:600}.prog__next b{font-family:var(--display);color:var(--preview);margin:0 3px;font-size:15px;font-weight:500}.prog__next .acc{vertical-align:.35em;font-size:.7em}.prog__suggest-btn{height:20px;color:var(--faint);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:0 8px;font-size:12px;font-weight:500}.prog__suggest-btn:hover{color:var(--muted);border-color:var(--line)}.prog__suggest-btn[aria-pressed=true]{color:var(--preview);border-color:color-mix(in srgb, var(--preview) 45%, transparent)}.prog__in{text-transform:none;letter-spacing:0;color:var(--faint);font-weight:500}.prog__empty{color:var(--faint);white-space:nowrap;margin:0;font-size:14px;line-height:44px}.prog__track{justify-content:flex-end;gap:22px;margin:0;padding:0;list-style:none;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 18%);mask-image:linear-gradient(90deg,#0000,#000 18%)}.prog__track li{color:var(--muted);flex-direction:column;flex-shrink:0;align-items:center;display:flex}.prog__track li.is-current{color:var(--text)}.prog__track li.is-current .prog__roman{color:var(--lamp-text)}.prog__sym{font-family:var(--display);white-space:nowrap;font-size:26px;font-weight:500;line-height:1.1}.prog__sym .acc{vertical-align:.35em;font-size:.7em}.prog__roman{color:var(--faint);letter-spacing:.03em;white-space:nowrap;font-size:12px;font-weight:600;line-height:1.2}.prog__chips{gap:8px;margin:0;padding:0;list-style:none;display:flex}.prog__chips li{flex:1 1 0;min-width:0}.prog__chip{border:1px solid var(--line);cursor:default;background:0 0;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:44px;display:flex;overflow:hidden}.prog__chip .prog__sym{text-overflow:ellipsis;max-width:100%;padding:0 6px;font-size:20px;overflow:hidden}.prog__chip:hover,.prog__chip:focus-visible{border-color:var(--scale)}.prog__chip.is-played{background:var(--held-white);border-color:var(--held-white);color:var(--lamp-ink)}.prog__chip.is-played .prog__roman{color:var(--lamp-ink)}.prog__chip.is-suggested{border-color:var(--preview);box-shadow:inset 0 0 0 1px var(--preview)}@media (width<=860px){.prog{grid-template-columns:1fr;height:auto}.prog__section+.prog__section{border-left:0;border-top:1px solid var(--line)}}.app.app--live{grid-template-rows:minmax(0,1fr);max-width:none;height:100dvh;padding:14px}.app--live .instrument{grid-template-rows:minmax(0,1fr) auto}.app--live .keyboard{height:clamp(110px,20vh,240px)}.app--live .waterfall__canvas{-webkit-mask-image:none;mask-image:none}.live-controls{z-index:20;background:color-mix(in srgb, var(--surface) 85%, transparent);border:1px solid var(--line);border-radius:14px;gap:8px;padding:6px;transition:opacity .4s;display:flex;position:fixed;top:22px;right:26px}.app.is-idle{cursor:none}.app.is-idle .live-controls{opacity:0;pointer-events:none}.viz{min-height:0;position:relative;overflow:hidden}.viz__canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.viz__overlay{justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.instrument--bare{padding:0;grid-template-rows:minmax(0,1fr)!important}.app.is-idle .live-controls.is-pinned{opacity:1;pointer-events:auto}.live-controls{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 52px)}