:root{--bg:#070708;--panel-bg:#0e0e109e;--panel-border:#ffffff14;--control-bg:#ffffff0d;--control-hover:#ffffff17;--control-border:#ffffff1c;--text:#ffffffeb;--text-dim:#fff9;--text-faint:#fff6;--gold:#f2c14e;--gold-soft:#f2c14e21;--gold-line:#f2c14e61;--icon-cut:#16161a;--ease-out:cubic-bezier(.23, 1, .32, 1);--font:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--wave-bottom:3vh;--wave-height:140px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.camera{opacity:0;transition:opacity .4s var(--ease-out);background:#000;position:fixed;inset:0}.camera[data-live=true]{opacity:1}.camera__video,.camera__overlay{width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.camera__video{object-fit:cover}.camera:after{content:"";pointer-events:none;background:linear-gradient(#0000 68%,#00000073);position:absolute;inset:0}.camera__overlay{z-index:1}.waveform{left:0;bottom:var(--wave-bottom);z-index:3;width:100%;height:var(--wave-height);pointer-events:none;position:fixed}.panel{z-index:4;border:1px solid var(--panel-border);background:var(--panel-bg);-webkit-backdrop-filter:blur(16px)saturate(1.3);scrollbar-width:none;width:204px;max-height:calc(100dvh - 40px);animation:panel-in .28s var(--ease-out) both;border-radius:8px;padding:12px;position:fixed;top:20px;left:20px;overflow-y:auto;box-shadow:0 12px 32px #00000059}@keyframes panel-in{0%{opacity:0;transform:translate(-8px)}}.panel__brand{letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);align-items:center;gap:8px;margin:2px 0 14px;font-size:10px;display:flex}.panel__dot{background:var(--text-faint);border-radius:50%;width:6px;height:6px}.panel__dot[data-status=loading]{animation:1s ease-in-out infinite alternate blink}.panel__dot[data-status=live]{background:var(--gold);box-shadow:0 0 8px var(--gold)}.panel__dot[data-status=failed]{background:#e5484d}@keyframes blink{to{opacity:.25}}.field{grid-template-columns:44px 1fr;align-items:center;gap:8px;margin-bottom:8px;display:grid}.field__label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);font-size:10px}.select{appearance:none;border:1px solid var(--control-border);background:var(--control-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffffff' fill-opacity='.6'/%3E%3C/svg%3E") no-repeat right 10px center / 8px 5px;width:100%;height:32px;color:var(--text);font:inherit;cursor:pointer;border-radius:5px;padding:0 26px 0 10px;font-size:13px;transition:background-color .15s,border-color .15s}.select option{color:#eee;background:#161618}.field--stacked{grid-template-columns:1fr;gap:6px}.keys{grid-template-rows:24px 28px;grid-template-columns:repeat(14,1fr);gap:3px 2px;display:grid}.key{border:1px solid var(--control-border);background:var(--control-bg);height:100%;color:var(--text-dim);font:inherit;cursor:pointer;border-radius:4px;grid-row:2;padding:0;font-size:12px;transition:background-color .15s,color .15s,border-color .15s}.key--black{background:#00000059;grid-row:1;margin:0 3px;font-size:10px}.key[aria-checked=true]{border-color:var(--gold);background:var(--gold);color:#17130a;font-weight:500}.panel__tabs{grid-template-columns:1fr 1fr;gap:6px;margin-top:4px;display:grid}.btn-guide[aria-expanded=true]{border-color:var(--gold-line);color:var(--text)}.segmented{border:1px solid var(--control-border);border-radius:6px;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;display:grid}.segmented__item{height:28px;color:var(--text-dim);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:4px;font-size:12px;transition:background-color .15s,color .15s}.segmented__item[aria-checked=true]{background:var(--gold);color:#17130a;font-weight:500}.settings__hint{min-height:2.6em;color:var(--text-faint);margin:6px 2px 10px;font-size:10.5px;line-height:1.5}.switch{border:1px solid var(--control-border);background:var(--control-bg);width:100%;color:var(--text-dim);font:inherit;text-align:left;cursor:pointer;border-radius:5px;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;padding:7px 10px;font-size:12px;transition:background-color .15s,color .15s;display:flex}.switch__text small{color:var(--text-faint);margin-top:2px;font-size:10px;display:block}.switch__track{background:#fff3;border-radius:7px;flex:none;width:26px;height:14px;transition:background-color .15s;position:relative}.switch__thumb{width:10px;height:10px;transition:transform .16s var(--ease-out);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px}.switch[aria-checked=true]{color:var(--text)}.switch[aria-checked=true] .switch__track{background:var(--gold)}.switch[aria-checked=true] .switch__thumb{background:#17130a;transform:translate(12px)}.btn-guide{border:1px solid var(--control-border);width:100%;height:32px;color:var(--text-dim);font:inherit;letter-spacing:.02em;cursor:pointer;transition:transform .16s var(--ease-out), background-color .15s ease, color .15s ease;background:0 0;border-radius:5px;font-size:12px}.btn-guide:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine){.select:hover,.key:not([aria-checked=true]):hover,.segmented__item:not([aria-checked=true]):hover,.switch:hover,.btn-guide:hover{background-color:var(--control-hover);color:var(--text)}}.select:focus-visible,.key:focus-visible,.segmented__item:focus-visible,.switch:focus-visible,.btn-guide:focus-visible,.landing__cta:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.panel__guide{transition:grid-template-rows .24s var(--ease-out), opacity .18s ease;grid-template-rows:1fr;display:grid}.panel__guide[data-open=false]{opacity:0;grid-template-rows:0fr}.panel__guide-inner{min-height:0;overflow:hidden}.guide__title{letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin:16px 0 6px 2px;font-size:10px;font-weight:400}.guide__list{gap:2px;margin:0;padding:0;list-style:none;display:grid}.guide__head,.guide__row{grid-template-columns:28px 1fr auto;align-items:center;gap:9px;padding:0 10px 0 16px;display:grid}.guide[data-left-keys] :is(.guide__head,.guide__row){grid-template-columns:20px 28px 1fr auto}.guide__head{letter-spacing:.08em;color:var(--text-faint);margin-bottom:2px;font-size:9px}.guide__head span:last-child{grid-column:3/5}.guide__row{height:34px;color:var(--text-dim);border-radius:5px;transition:background-color .12s,box-shadow .12s;position:relative}.guide__row:before{content:"→";color:var(--gold);opacity:0;transition:opacity .12s ease, transform .16s var(--ease-out);font-size:11px;position:absolute;left:4px;transform:translate(-3px)}.guide__key{width:20px;height:20px;color:var(--text-faint);border-radius:4px;place-items:center;font-size:11px;transition:background-color .12s,color .12s,box-shadow .12s;display:grid}.guide__key[data-current]{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-line)}.guide__key[data-held]{background:var(--gold);color:#17130a}.guide__chord{color:var(--text);font-size:15px;font-weight:500}.guide__icon{color:#fff;opacity:.72;width:28px;height:28px}.guide__syllable{color:var(--text-faint);font-size:11px}.guide__row[data-active]{background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold-line), 0 0 18px #f2c14e29}.guide__row[data-active]:before{opacity:1;transform:none}.guide__row[data-active] :is(.guide__chord,.guide__icon,.guide__syllable){color:var(--gold);opacity:1}.guide__tips{color:var(--text-faint);margin:10px 2px 2px;font-size:10.5px;line-height:1.7}.recorder{z-index:5;border:1px solid var(--gold-line);-webkit-backdrop-filter:blur(12px);text-align:center;background:#0a0a0cb8;border-radius:10px;justify-items:center;gap:6px;padding:16px 28px;display:grid;position:fixed;top:18%;left:50%;transform:translate(-50%)}.recorder small{color:var(--text-dim);font-size:12px}.recorder strong{color:var(--gold);font-size:clamp(20px,3vw,30px);font-weight:500}.current-note{right:clamp(20px,3vw,44px);bottom:calc(var(--wave-bottom) + var(--wave-height) - 10px);z-index:3;pointer-events:none;position:fixed}.current-note__key{text-align:right;color:var(--gold);opacity:.55;animation:note-hit .2s var(--ease-out);margin-bottom:6px;font-size:clamp(16px,1.6vw,22px)}.current-note__inner{color:#fff;opacity:.22;animation:note-hit .2s var(--ease-out);align-items:baseline;gap:.4em;font-weight:300;line-height:1;display:flex}@keyframes note-hit{0%{opacity:.6;transform:translateY(4px)}}.current-note__name{letter-spacing:-.02em;font-size:clamp(64px,9vw,132px)}.current-note__syllable{font-size:clamp(18px,2vw,28px)}.hint{left:50%;bottom:calc(var(--wave-bottom) + var(--wave-height) + 8px);z-index:3;letter-spacing:.08em;color:var(--text-dim);text-shadow:0 1px 8px #0009;opacity:0;pointer-events:none;margin:0;font-size:12px;transition:opacity .3s;position:fixed;transform:translate(-50%)}.hint[data-visible=true]{opacity:1;transition-delay:.6s}.landing{z-index:5;padding:24px 16px calc(var(--wave-height) + 24px);text-align:center;transition:opacity .3s var(--ease-out), visibility 0s linear 0s;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.landing[data-hidden=true]{opacity:0;visibility:hidden;transition:opacity .25s var(--ease-out), visibility 0s linear .25s}.landing__hand{width:92px;height:92px;margin-bottom:28px;overflow:visible}.landing__hand line{stroke:#ffffff47;stroke-width:.6px}.landing__hand circle{fill:#fff;filter:drop-shadow(0 0 2px #ffffffb3)}.landing__title{letter-spacing:-.02em;margin:0;font-size:clamp(36px,6vw,64px);font-weight:300}.landing__tagline{color:var(--text-dim);margin:12px 0 36px;font-size:15px}.landing__cta{border:1px solid var(--gold);background:var(--gold);color:#17130a;min-width:200px;height:48px;font:inherit;letter-spacing:.02em;cursor:pointer;transition:transform .16s var(--ease-out), background-color .15s ease, opacity .15s ease;border-radius:999px;padding:0 28px;font-size:14px;font-weight:500}.landing__cta:active{transform:scale(.97)}.landing__cta:disabled{cursor:progress;opacity:.7}@media (hover:hover) and (pointer:fine){.landing__cta:hover:not(:disabled){background:#f6cf6f}}.landing__error{color:#ff8f8f;max-width:34ch;min-height:1.5em;margin:16px 0 0;font-size:13px}.landing__note{color:var(--text-faint);margin:8px 0 0;font-size:12px}@media (width<=720px){:root{--wave-height:110px}.panel{width:184px;padding:10px;top:12px;left:12px}.guide__row{gap:8px;height:30px}}@media (prefers-reduced-motion:reduce){.panel,.current-note__inner{animation-name:fade-in}.panel__dot[data-status=loading]{animation:none}.btn-guide:active,.landing__cta:active{transform:none}}@keyframes fade-in{0%{opacity:0}}