:root{--bg-base: #0a0910;--bg-surface: #12101d;--bg-elevated: #191527;--bg-panel: #14111f;--bg-hover: #221c36;--border-subtle: rgba(255, 255, 255, .07);--border-default: rgba(255, 255, 255, .12);--border-strong: rgba(255, 255, 255, .22);--text-primary: #ece8fb;--text-secondary: #a99fc6;--text-tertiary: #857ba0;--text-muted: #5f5878;--accent: #7c5cff;--accent-hover: #6a48f5;--in: #37d67a;--flat: #5aa2ff;--sharp: #ffb020;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Helvetica, Arial, sans-serif;--font-mono: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);--transition: .16s ease;--maxw: 860px}[hidden]{display:none!important}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.site-header{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,4vw,40px);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:#0a0910db;backdrop-filter:blur(12px);z-index:40}.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.01em}.brand-mark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--accent) 0%,#b45cff 100%);box-shadow:0 0 0 1px #ffffff14 inset}.brand-name{font-size:1.05rem}.nav{display:flex;gap:4px;align-items:center}.nav-btn{background:transparent;border:1px solid transparent;color:var(--text-secondary);font-family:inherit;font-size:.85rem;padding:7px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}.nav-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.nav-icon{border-color:var(--border-subtle)}.trust-banner{display:flex;align-items:center;gap:8px;justify-content:center;width:100%;border:0;border-bottom:1px solid var(--border-subtle);background:#7c5cff0f;color:var(--text-secondary);font-family:inherit;font-size:.82rem;padding:9px 16px;cursor:pointer}.trust-banner .dot{width:7px;height:7px;border-radius:50%;background:var(--in);box-shadow:0 0 8px var(--in)}.trust-more{color:var(--accent);text-decoration:underline}.main-content{flex:1 0 auto;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(20px,4vw,40px) clamp(16px,4vw,40px) 56px}.panel{animation:fade .24s ease}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.panel-start{text-align:center;padding-top:clamp(12px,4vw,36px)}.hero-title{font-size:clamp(1.9rem,5vw,2.8rem);font-weight:700;letter-spacing:-.02em;margin:0 0 12px}.hero-sub{color:var(--text-secondary);max-width:560px;margin:0 auto 26px;font-size:1.02rem}.start-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0 8px}.or-line{color:var(--text-muted);font-size:.85rem;margin:26px 0 14px}.dropzone{border:1.5px dashed var(--border-default);border-radius:var(--radius-lg);padding:30px 24px;max-width:540px;margin:0 auto;cursor:pointer;transition:var(--transition);background:var(--bg-surface)}.dropzone:hover,.dropzone:focus-visible,.dropzone.drag{border-color:var(--accent);background:var(--bg-elevated);outline:none}.dz-title{font-weight:600;font-size:1.02rem;margin-bottom:6px}.dz-sub{color:var(--text-tertiary);font-size:.84rem;margin-bottom:14px}.pill{background:var(--bg-hover);border:1px solid var(--border-default);color:var(--text-primary);font-family:inherit;font-size:.82rem;padding:7px 16px;border-radius:100px;cursor:pointer;transition:var(--transition)}.pill:hover{background:var(--accent);border-color:var(--accent);color:#fff}.note{color:var(--text-tertiary);font-size:.82rem;margin-top:18px}.note-muted{color:var(--text-muted)}.btn{font-family:inherit;font-size:.9rem;font-weight:550;padding:11px 18px;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--bg-elevated);color:var(--text-primary);cursor:pointer;transition:var(--transition)}.btn:hover{background:var(--bg-hover);border-color:var(--border-strong)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:650}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-lg{font-size:1.02rem;padding:14px 30px;border-radius:14px}.btn-sm{font-size:.82rem;padding:8px 14px}.btn-ghost{background:transparent}.btn-record{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:650}.btn-record.recording{background:transparent;color:var(--sharp);border-color:var(--sharp);animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #ffb02066}50%{box-shadow:0 0 0 7px #ffb02000}}.seg{display:inline-flex;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:10px;padding:3px;gap:2px}.seg-wrap{flex-wrap:wrap;justify-content:center}.seg-btn{background:transparent;border:0;color:var(--text-secondary);font-family:inherit;font-size:.85rem;font-weight:550;padding:7px 14px;border-radius:7px;cursor:pointer;transition:var(--transition)}.seg-btn:hover{color:var(--text-primary)}.seg-btn.on{background:var(--accent);color:#fff}.seg-solo{border:1px solid var(--border-subtle);background:var(--bg-surface)}.panel-live{text-align:center}.readout{padding:6px 0 2px}.readout-note-wrap{display:flex;align-items:baseline;justify-content:center;gap:4px;line-height:1}.readout-note{font-size:clamp(4.2rem,18vw,7rem);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text-tertiary);transition:color .18s ease}.readout-note[data-tier=in]{color:var(--in)}.readout-note[data-tier=flat]{color:var(--flat)}.readout-note[data-tier=sharp]{color:var(--sharp)}.readout-oct{font-size:clamp(1.4rem,5vw,2.2rem);font-weight:600;color:var(--text-muted)}.readout-cents{font-size:1.1rem;font-weight:600;color:var(--text-tertiary);font-variant-numeric:tabular-nums;min-height:1.4em;margin-top:2px}.readout-cents[data-tier=in]{color:var(--in)}.readout-cents[data-tier=flat]{color:var(--flat)}.readout-cents[data-tier=sharp]{color:var(--sharp)}.dial-canvas{width:100%;max-width:460px;height:220px;display:block;margin:2px auto 0}.readout-sub{display:flex;justify-content:center;gap:16px;align-items:baseline;margin:2px 0 20px;font-variant-numeric:tabular-nums}.readout-hz{font-size:1.1rem;font-weight:600;color:var(--text-secondary)}.readout-status{font-size:.9rem;color:var(--text-tertiary)}.readout-status[data-tier=in]{color:var(--in)}.readout-status[data-tier=flat]{color:var(--flat)}.readout-status[data-tier=sharp]{color:var(--sharp)}.controls{display:flex;flex-wrap:wrap;gap:18px 22px;justify-content:center;align-items:flex-start;padding:16px 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);margin-bottom:18px}.control{display:flex;flex-direction:column;gap:7px;align-items:center}.control-wide{flex:1 1 100%}.control>label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.pipe{margin-bottom:18px}.pipe-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:10px}.string-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:12px}.string-btn{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:66px;padding:9px 14px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;cursor:pointer;transition:var(--transition)}.string-btn:hover{border-color:var(--border-strong);background:var(--bg-elevated)}.string-name{font-size:1.05rem;font-weight:650}.string-hz{font-size:.68rem;color:var(--text-muted);font-variant-numeric:tabular-nums}.string-btn.playing{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.string-btn.detected{border-color:var(--flat)}.string-btn.in-tune{border-color:var(--in);box-shadow:0 0 0 1px var(--in) inset}.string-btn.in-tune .string-name{color:var(--in)}.pipe-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.live-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.panel-analyzing{padding:60px 0}.analyzing-inner{max-width:460px;margin:0 auto;text-align:center}.progress-label{color:var(--text-secondary);margin-bottom:14px}.progress-track{height:8px;background:var(--bg-surface);border-radius:100px;overflow:hidden}.progress-bar{height:100%;width:0;background:var(--accent);border-radius:100px;transition:width .16s ease}.report-preview{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;background:#08070d;box-shadow:var(--shadow-lg)}.report-preview img{width:100%;height:auto;display:block}.report-summary{margin:22px 0;text-align:center}.rs-big{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap}.rs-note-name{font-size:2.4rem;font-weight:700}.rs-note-name[data-tier=in]{color:var(--in)}.rs-note-name[data-tier=off]{color:var(--sharp)}.rs-cents{font-size:1.2rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}.rs-cents[data-tier=in]{color:var(--in)}.rs-hint{color:var(--text-tertiary);font-size:.9rem;margin-top:8px}.report-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.site-footer{flex-shrink:0;border-top:1px solid var(--border-subtle);padding:20px 16px;text-align:center}.footer-inner{color:var(--text-tertiary);font-size:.82rem}.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--bg-surface);border-left:1px solid var(--border-default);z-index:60;transform:translate(100%);transition:transform .22s ease;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}.drawer.open{transform:none}#drawer-content{display:flex;flex-direction:column;height:100%}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-subtle)}.drawer-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary)}.drawer-controls{display:flex;align-items:center;gap:12px}.count{color:var(--text-muted);font-size:.78rem}.drawer-close{background:transparent;border:0;color:var(--text-secondary);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 4px}.drawer-close:hover{color:var(--text-primary)}.drawer-filters{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;border-bottom:1px solid var(--border-subtle)}.filter-pill{background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-muted);font-family:inherit;font-size:.72rem;padding:4px 10px;border-radius:100px;cursor:pointer}.filter-pill.on{color:var(--text-primary);border-color:var(--border-default)}.filter-pill.clear:hover{color:var(--sharp)}.drawer-list{flex:1;overflow-y:auto;padding:8px 12px;font-family:var(--font-mono);font-size:.74rem}.event{display:grid;grid-template-columns:auto auto 1fr;gap:8px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.03)}.event .ts{color:var(--text-muted)}.event .cat{color:var(--text-tertiary);text-transform:uppercase;font-size:.66rem}.event[data-level=ok] .msg{color:var(--in)}.event[data-level=warn] .msg{color:var(--sharp)}.event[data-level=err] .msg{color:#ff6b6b}.modal-host{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:#040308bd;backdrop-filter:blur(4px)}.modal-card{position:relative;background:var(--bg-panel);border:1px solid var(--border-default);border-radius:var(--radius-lg);max-width:620px;width:100%;max-height:86vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:var(--bg-panel)}.modal-head h2{margin:0;font-size:1.15rem}.modal-close{background:transparent;border:0;color:var(--text-secondary);font-size:1.6rem;line-height:1;cursor:pointer}.modal-close:hover{color:var(--text-primary)}.modal-body{padding:20px 22px 26px;color:var(--text-secondary);font-size:.92rem}.modal-body h3{color:var(--text-primary);font-size:.95rem;margin:20px 0 8px}.modal-body ul,.modal-body ol{padding-left:20px;margin:8px 0}.modal-body li{margin:7px 0}.steps li strong{color:var(--text-primary)}.tick li::marker{content:"✓ ";color:var(--in)}.cross li::marker{content:"✕ ";color:var(--sharp)}.modal-foot-note{margin-top:16px;font-size:.84rem;color:var(--text-muted)}.gloss{color:var(--accent);border:0;border-bottom:1px dotted currentColor;background:transparent;font:inherit;padding:0;cursor:help}.gloss-tip{position:absolute;z-index:90;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:10px 12px;font-size:.82rem;color:var(--text-secondary);box-shadow:var(--shadow-lg);line-height:1.45}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:var(--bg-elevated);border:1px solid var(--border-default);color:var(--text-primary);padding:11px 18px;border-radius:var(--radius-md);font-size:.86rem;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:100;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%)}@media(max-width:560px){.nav-btn{padding:7px 9px;font-size:.8rem}.controls{gap:14px}.report-actions .btn,.live-actions .btn,.start-actions .btn{flex:1 1 auto}.dial-canvas{height:190px}}