:root{--surface: #0d1117;--surface-raised: #151b24;--surface-key: #f2f6ff;--surface-key-black: #1b2230;--line: rgba(255, 255, 255, .12);--text: #e8f0ff;--text-dim: rgba(232, 240, 255, .62);--accent: #5ad6a8;--accent-alt: #8fb4ff;--warn: #ffb86b;--radius: 10px;--focus: #8fb4ff;--gap: 8px;--pad: 10px;--trace-height: 160px;--piano-height: 120px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--surface);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.4;-webkit-text-size-adjust:100%;overscroll-behavior:none}body{overflow:hidden}.app{position:relative;display:flex;flex-direction:column;gap:var(--gap);height:100vh;height:100dvh;padding:var(--pad) max(var(--pad),env(safe-area-inset-left)) max(var(--pad),env(safe-area-inset-bottom));overflow:hidden}.app[data-overflowing=true]{height:auto;min-height:100dvh;overflow-y:auto}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.app__header{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);flex:0 0 auto}.app__header-actions{display:flex;align-items:center;gap:var(--gap)}.app__title{margin:0;font-size:1rem;letter-spacing:.18em;text-transform:uppercase}.badge{border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--accent);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.banner{display:flex;align-items:center;gap:var(--gap);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-raised);padding:6px 10px;flex:0 0 auto}.banner--hidden{display:none}.statusbar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-raised);padding:8px 12px}.statusbar__mic{display:flex;align-items:center;gap:10px;min-width:0}.mic__status{margin:0;color:var(--text-dim);font-size:.8rem;min-width:0}.mic__status--error{color:var(--warn)}.pitch{display:flex;align-items:baseline;gap:8px;margin-left:auto}.pitch__note{font-size:1.7rem;font-variant-numeric:tabular-nums;font-weight:600;min-width:3.2ch;text-align:right}.pitch__tuning{font-size:.78rem;color:var(--text-dim);min-width:8ch}.pitch__tuning--in-tune{color:var(--accent)}.pitch__tuning--off{color:var(--accent-alt)}.pitch__tuning--uncertain{color:var(--warn)}.level{width:110px;height:6px;border-radius:999px;background:#ffffff14;overflow:hidden;flex:0 0 auto}.level__fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent-alt),var(--accent));transition:width 80ms linear}.legend{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--text-dim);font-size:.72rem}.legend__item{display:inline-flex;align-items:center;gap:6px}.legend__swatch{width:16px;height:4px;border-radius:2px;flex:0 0 auto}.legend__swatch--in-tune{height:6px;background:var(--accent)}.legend__swatch--off{background:var(--accent-alt)}.legend__swatch--uncertain{height:2px;background:repeating-linear-gradient(90deg,var(--accent-alt) 0 3px,transparent 3px 7px)}.trace{flex:0 0 auto;height:var(--trace-height);min-height:0}.trace__canvas{display:block;width:100%;height:100%;border:1px solid var(--line);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;background:var(--surface);touch-action:none}.piano-section{flex:0 0 auto;height:var(--piano-height)}.piano{position:relative;height:100%;border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);background:var(--surface-raised);touch-action:none;user-select:none;overflow:hidden}.piano__key{position:absolute;top:0;margin:0;padding:0 0 5px;border:1px solid rgba(0,0,0,.45);font:inherit;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;touch-action:none}.piano__key--white{height:100%;background:linear-gradient(180deg,#ffffff 0%,var(--surface-key) 78%,#cdd6e6 100%);color:#4b5566;border-radius:0 0 5px 5px;z-index:1}.piano__key--black{height:62%;background:linear-gradient(180deg,#2b3444 0%,var(--surface-key-black) 100%);border-radius:0 0 4px 4px;z-index:2}.piano__key--active.piano__key--white{background:linear-gradient(180deg,#d8ffee,#a8e9cf)}.piano__key--active.piano__key--black{background:linear-gradient(180deg,#2f6d57,#1d4a3b)}.piano__label{font-size:.6rem;letter-spacing:.02em;pointer-events:none}.controls{display:flex;flex-wrap:wrap;align-items:end;gap:8px 14px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-raised);padding:8px 12px}.control{display:flex;flex-direction:column;gap:3px}.control--actions{flex-direction:row;gap:8px}.control__label{color:var(--text-dim);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}.control__group{display:flex;align-items:center;gap:6px}.control__value{font-variant-numeric:tabular-nums;min-width:8ch;text-align:center}.control__input{min-height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:3px 8px}.control__input--range{padding:0;min-width:120px;accent-color:var(--accent)}.button{min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer;white-space:nowrap}.button:hover:not(:disabled){border-color:var(--accent-alt)}.button:disabled{opacity:.45;cursor:not-allowed}.button--primary{background:var(--accent);border-color:transparent;color:#07120e;font-weight:600}.button--ghost{min-height:30px;padding:3px 10px;font-size:.76rem;color:var(--text-dim)}.button--icon{min-width:36px;font-size:1.05rem;line-height:1}.banner__action{min-height:30px;padding:4px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}.panel{position:absolute;right:var(--pad);top:calc(var(--pad) + 40px);z-index:10;max-width:min(420px,calc(100vw - 2 * var(--pad)));max-height:calc(100dvh - 2 * var(--pad) - 40px);overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-raised);box-shadow:0 12px 32px #0000008c;padding:12px 14px;color:var(--text-dim);font-size:.8rem}.panel--hidden{display:none}.panel p{margin:0 0 8px}.panel__lead{color:var(--text)}.panel__note--hidden{display:none}.diag{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-variant-numeric:tabular-nums}.diag__label{color:var(--text-dim)}.diag__value{margin:0;color:var(--text);overflow-wrap:anywhere}.app[data-compact=true]{--gap: 6px;--pad: 6px}.app[data-compact=true] .badge,.app[data-compact=true] .legend__text,.app[data-compact=true] .control__label,.app[data-compact=true] .mic__status{display:none}.app[data-compact=true] .app__title{font-size:.82rem}.app[data-compact=true] .statusbar,.app[data-compact=true] .controls{padding:4px 8px;gap:6px 10px;flex-wrap:nowrap;overflow-x:auto}.app[data-compact=true] .pitch__note{font-size:1.3rem}.app[data-compact=true] .button,.app[data-compact=true] .control__input{min-height:30px;padding:3px 9px}@media (prefers-reduced-motion: reduce){.level__fill{transition:none}}.panel__close{float:right;margin:-4px -4px 4px 8px}.app__brand{display:flex;align-items:center;gap:8px;min-width:0}.app__emblem{width:28px;height:28px;flex:0 0 auto}.app__portal{color:var(--text-dim);font-size:.76rem;text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap}.app__portal:hover,.app__portal:focus-visible{color:var(--text);border-bottom-color:var(--accent)}.app[data-compact=true] .app__emblem{width:20px;height:20px}