@font-face{font-family:Roboto Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/Tuninator-Example/assets/roboto-mono-latin-400-normal-GekRknry.woff2) format("woff2"),url(/Tuninator-Example/assets/roboto-mono-latin-400-normal-DBZPkcnn.woff) format("woff")}@font-face{font-family:Roboto Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/Tuninator-Example/assets/roboto-mono-latin-500-normal-pxIOXZmA.woff2) format("woff2"),url(/Tuninator-Example/assets/roboto-mono-latin-500-normal-D6j6AMzd.woff) format("woff")}@font-face{font-family:VT323;font-style:normal;font-display:swap;font-weight:400;src:url(/Tuninator-Example/assets/vt323-latin-400-normal-wDgJuOC9.woff2) format("woff2"),url(/Tuninator-Example/assets/vt323-latin-400-normal-Dqn9ZSPj.woff) format("woff")}:root{color-scheme:dark;--bg: #000000;--bg-raised: #0a0a0a;--bg-sunken: #050505;--border: #2a2a2a;--border-soft: #171717;--line: color-mix(in srgb, var(--accent) 22%, var(--border));--text: #e6e6e6;--text-muted: #8a8a8a;--accent: #00ffff;--accent-warm: #ff00ff;--good: #00ff00;--near: #ffd700;--bad: #ff4500;--violet: #b967ff;--violet-dim: #7b2ff7;--radius: 0;--cut: 10px;--cut-sm: 6px;--glow-1: 0 0 4px color-mix(in srgb, currentColor 70%, transparent);--glow-2: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);--grid-line: color-mix(in srgb, var(--accent) 4%, transparent);--grid-pitch: 32px;--scanline: rgba(0, 0, 0, .26);--focus: var(--accent);--font-display: "VT323", "Share Tech Mono", ui-monospace, monospace;--font-sans: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--canvas-ground: #000000;--canvas-guide: rgba(138, 138, 138, .16);--canvas-guide-text: rgba(138, 138, 138, .5);--canvas-barline: rgba(0, 255, 255, .34);--canvas-barline-text: rgba(0, 255, 255, .6);--canvas-playhead: rgba(255, 0, 255, .85);--canvas-hint: rgba(230, 230, 230, .45);--canvas-plate: rgba(0, 0, 0, .62);--canvas-plate-text: rgba(230, 230, 230, 1);--canvas-highlight: rgba(255, 255, 255, 1);--canvas-hue-base: 176;--canvas-hue-span: 156;--canvas-sat: 96}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:14px;line-height:1.5}.app{max-width:1280px;margin:0 auto;padding:20px 20px 40px;display:flex;flex-direction:column;gap:14px}.app-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}.title h1{margin:0;font-size:24px;letter-spacing:-.02em}.title p{margin:2px 0 0;color:var(--text-muted);font-size:13px}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;background:var(--bg-raised);border:1px solid var(--border-soft);border-radius:var(--radius)}.spacer{flex:1 1 auto}.btn{appearance:none;border:1px solid var(--border);background:var(--bg-raised);color:var(--text);padding:8px 14px;border-radius:0;font:inherit;font-weight:500;cursor:pointer;transition:background .12s ease,border-color .12s ease}.btn:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 14%,var(--bg-raised))}.btn:disabled{opacity:.55;cursor:progress}.btn.primary{background:color-mix(in srgb,var(--accent) 22%,var(--bg-raised));border-color:color-mix(in srgb,var(--accent) 55%,transparent)}.btn.is-active{background:color-mix(in srgb,var(--accent-warm) 24%,var(--bg-raised));border-color:color-mix(in srgb,var(--accent-warm) 60%,transparent);color:var(--text)}.gesture-prompt{display:block;width:100%;text-align:center}.gesture-prompt[hidden]{display:none}.field{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted)}.field select{appearance:none;background:var(--bg-raised);color:var(--text);border:1px solid var(--border);border-radius:0;padding:7px 10px;font:inherit;cursor:pointer}.check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);cursor:pointer}.status-bar{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted);min-height:24px}.pill{padding:3px 10px;border-radius:999px;font-family:var(--font-mono);font-size:11.5px;border:1px solid var(--border);background:var(--bg-raised);color:var(--text-muted);white-space:nowrap}.pill[data-state=listening]{color:var(--good);border-color:color-mix(in srgb,var(--good) 50%,transparent);background:color-mix(in srgb,var(--good) 14%,transparent)}.pill[data-state=starting],.pill[data-state=stopping]{color:var(--near);border-color:color-mix(in srgb,var(--near) 50%,transparent);background:color-mix(in srgb,var(--near) 14%,transparent)}.pill[data-state=error]{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent);background:color-mix(in srgb,var(--bad) 14%,transparent)}.error-banner{border:1px solid color-mix(in srgb,var(--bad) 55%,transparent);background:color-mix(in srgb,var(--bad) 10%,var(--bg-raised));border-radius:var(--radius);padding:12px 14px}.error-banner[hidden]{display:none}.error-head{display:flex;align-items:center;gap:10px}.error-head strong{color:var(--bad)}.error-head code{font-family:var(--font-mono);font-size:11.5px;padding:2px 7px;border-radius:0;background:var(--bg-sunken);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad)}.error-message{margin:6px 0 0;font-size:13px}.error-hint{margin:4px 0 0;font-size:12.5px;color:var(--text-muted)}.panel{background:var(--bg-raised);border:1px solid var(--border-soft);border-radius:var(--radius);padding:12px 14px 14px;min-width:0}.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}.panel-head h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.muted{color:var(--text-muted);font-size:12px;font-family:var(--font-mono)}.canvas-wrap{position:relative;width:100%;height:340px;border-radius:0;overflow:hidden;background:var(--bg);border:1px solid var(--border-soft)}#timeline-canvas{display:block;width:100%;height:100%}.grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(260px,1fr) minmax(240px,.9fr);gap:14px;align-items:start}@media(max-width:980px){.grid{grid-template-columns:1fr}}.tuner{display:flex;align-items:center;gap:18px}.gauge{position:relative;width:150px;height:86px;flex:0 0 auto}.gauge-arc{position:absolute;inset:0;border-radius:150px 150px 0 0;background:radial-gradient(closest-side,transparent 62%,color-mix(in srgb,var(--accent) 20%,transparent) 63%)}.gauge-ticks span{position:absolute;left:50%;bottom:4px;width:1px;height:68px;background:color-mix(in srgb,var(--text-muted) 45%,transparent);transform-origin:50% 100%;transform:rotate(var(--a))}.gauge-ticks span.center{background:color-mix(in srgb,var(--good) 70%,transparent);width:2px}.needle{position:absolute;left:50%;bottom:4px;width:3px;height:72px;margin-left:-1.5px;border-radius:0;background:var(--text-muted);transform-origin:50% 100%;transform:rotate(0);transition:transform .06s linear,background .15s ease}.needle[data-tuned=in]{background:var(--good);box-shadow:0 0 10px color-mix(in srgb,var(--good) 60%,transparent)}.needle[data-tuned=near]{background:var(--near)}.needle[data-tuned=out]{background:var(--bad)}.gauge-labels{position:absolute;bottom:-4px;left:0;right:0;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}.readout{min-width:0}.note-name{font-size:46px;line-height:1;font-weight:600;letter-spacing:-.03em;font-family:var(--font-mono);color:var(--text-muted)}.note-name[data-tuned=in]{color:var(--good)}.note-name[data-tuned=near]{color:var(--near)}.note-name[data-tuned=out]{color:var(--text)}.note-detail{margin-top:4px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}.cents{margin-top:2px;font-family:var(--font-mono);font-size:15px}.meters{display:grid;grid-template-columns:82px 1fr;gap:8px 10px;margin:16px 0 0;align-items:center}.meters dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.meters dd{margin:0;display:flex;align-items:center;gap:8px;min-width:0}.mono{font-family:var(--font-mono);font-size:13px}.meter{flex:1 1 auto;height:7px;border-radius:0;background:var(--bg-sunken);border:1px solid var(--border-soft);overflow:hidden}.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--good));transition:width .08s linear}.meter-fill.level{background:linear-gradient(90deg,var(--accent),var(--near),var(--accent-warm))}.meters dd.stacked{flex-direction:column;align-items:stretch;gap:5px}.channel-meters{display:flex;flex-direction:column;gap:4px;width:100%}.channel-row{display:flex;align-items:center;gap:8px}.channel-row .channel-label,.channel-row .channel-db{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.channel-row .channel-label{min-width:28px}.channel-row .channel-db{min-width:54px;text-align:right}.channel-row[data-silent=yes] .meter-fill{background:var(--border)}.channel-row[data-silent=yes] .channel-label,.channel-row[data-silent=yes] .channel-db{color:var(--bad)}.channel-row[data-selected=yes] .channel-label{color:var(--text);font-weight:600}.channel-row[data-selected=yes] .channel-label:after{content:" ◂"}.channel-note{font-size:11.5px;color:var(--text-muted)}.channel-note[data-warn=yes]{color:var(--near)}.active-events{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.empty{margin:0;color:var(--text-muted);font-size:13px;font-style:italic}.event-card{border:1px solid var(--border-soft);border-left:3px solid var(--accent);border-radius:0;padding:8px 10px;background:var(--bg-sunken)}.event-card[data-kind=chord]{border-left-color:var(--violet)}.event-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.event-name{font-family:var(--font-mono);font-size:17px;font-weight:600}.chip{font-family:var(--font-mono);font-size:10.5px;padding:1px 7px;border-radius:999px;border:1px solid var(--border);color:var(--text-muted)}.chip.subtle{opacity:.65}.chip[data-state=started]{color:var(--accent-warm);border-color:color-mix(in srgb,var(--accent-warm) 45%,transparent)}.chip[data-state=enriching]{color:var(--violet);border-color:var(--violet-dim)}.chip[data-state=resolved]{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)}.chip[data-state=ended]{color:var(--text-muted)}.event-meta{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;margin:6px 0 0;font-size:11.5px}.event-meta dt{color:var(--text-muted);font-family:var(--font-mono)}.event-meta dd{margin:0;font-family:var(--font-mono)}.event-tones,.event-alt{margin-top:5px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.event-alt.trail{margin-top:2px;opacity:.7;text-decoration-line:line-through;text-decoration-color:color-mix(in srgb,var(--text-muted) 45%,transparent)}.event-log{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto;font-family:var(--font-mono);font-size:11.5px}.log-line{display:flex;align-items:baseline;gap:7px;padding:2px 4px;border-radius:0}.log-line[data-phase=start] .log-marker{color:var(--good)}.log-line[data-phase=change] .log-marker{color:var(--violet)}.log-line[data-phase=resolved] .log-marker{color:var(--accent)}.log-line[data-phase=end] .log-marker{color:var(--text-muted)}.log-line[data-phase=note]{color:var(--accent)}.log-marker{width:10px;flex:0 0 auto}.log-label{min-width:44px;color:var(--text)}.log-detail{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-footer{color:var(--text-muted);font-size:12px;border-top:1px solid var(--border-soft);padding-top:12px}.app-footer p{margin:0}.app-footer code{font-family:var(--font-mono);background:var(--bg-raised);padding:1px 5px;border-radius:0;border:1px solid var(--border-soft)}body{position:relative;background-color:var(--bg);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:var(--grid-pitch) var(--grid-pitch)}.fx{position:absolute;inset:0;pointer-events:none;z-index:50}.fx:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,var(--scanline) 0 1px,transparent 1px 3px);animation:fx-flicker 7s linear infinite}.fx:after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");background-size:120px 120px}@keyframes fx-flicker{0%,to{opacity:1}3%{opacity:.88}3.6%{opacity:1}41%{opacity:.93}41.7%{opacity:1}}.title h1{font-family:var(--font-display);font-size:40px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-shadow:1.5px 0 0 color-mix(in srgb,var(--accent-warm) 65%,transparent),-1.5px 0 0 color-mix(in srgb,var(--accent) 65%,transparent)}.title p{font-family:var(--font-mono);letter-spacing:.02em}.panel-head h2{font-family:var(--font-display);font-size:17px;font-weight:400;letter-spacing:.1em;color:var(--accent);text-shadow:var(--glow-1)}.panel-head h2:before{content:"// ";opacity:.5}.note-name{font-family:var(--font-display);font-size:62px;font-weight:400;letter-spacing:.02em}.note-name[data-tuned=in],.note-name[data-tuned=near]{text-shadow:var(--glow-1),var(--glow-2)}.mono,.cents,#frequency-value,.event-meta dd,.gauge-labels{font-variant-numeric:tabular-nums}.panel,.toolbar,.error-banner{position:relative}.panel:before,.panel:after,.timeline-panel:before,.timeline-panel:after{content:"";position:absolute;width:12px;height:12px;pointer-events:none;border-color:var(--accent);border-style:solid;opacity:.75}.panel:before{top:-1px;left:-1px;border-width:1px 0 0 1px}.panel:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}.sys-rail{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:4px 2px}.sys-rail b{color:var(--accent);font-weight:400}.btn,.field select{background-color:var(--bg-raised);background-image:linear-gradient(-45deg,var(--bg) 0 calc(var(--cut-sm) - 1.5px),var(--line) calc(var(--cut-sm) - 1.5px) var(--cut-sm),transparent var(--cut-sm));background-repeat:no-repeat;background-position:bottom right;background-size:var(--cut-sm) var(--cut-sm);border-color:var(--line);font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.09em}.btn:before{content:"[";color:var(--accent);margin-right:6px;opacity:.7}.btn:after{content:"]";color:var(--accent);margin-left:6px;opacity:.7}.btn:hover:not(:disabled){border-color:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 22%,transparent)}.btn.primary{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}.btn.is-active{color:var(--accent-warm);border-color:color-mix(in srgb,var(--accent-warm) 65%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--accent-warm) 20%,transparent)}.toolbar{border-color:var(--line)}.field span,.check{text-transform:uppercase;letter-spacing:.1em;font-size:10.5px}.check input[type=checkbox]{accent-color:var(--accent)}:where(button,select,input,a,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}.pill:focus-visible,.chip:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus)}.pill{border-radius:0;clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));letter-spacing:.1em}.chip{border-radius:0;text-transform:uppercase;letter-spacing:.08em}#state-pill,#error-code{text-transform:none;font-variant-caps:all-small-caps}.pill[data-state=listening]{text-shadow:var(--glow-1)}.meters dt{display:flex;align-items:center;gap:6px;letter-spacing:.1em}.meters dt:before{content:"";flex:0 0 auto;width:7px;height:8px;background:var(--accent);opacity:.8;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}.gauge-arc{border-radius:150px 150px 0 0}.event-card .event-meta{max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .18s ease,opacity .18s ease,margin-top .18s ease}.event-card:hover .event-meta,.event-card:focus-within .event-meta{max-height:12em;opacity:1;margin-top:6px}.event-card{transition:border-color .14s ease,box-shadow .14s ease}.event-card:hover,.event-card:focus-within{border-color:var(--line);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 12%,transparent)}.app-footer details summary{cursor:pointer;text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--accent)}.app-footer details[open] summary{margin-bottom:6px}.log-line:before{content:"│";color:color-mix(in srgb,var(--accent) 30%,transparent);flex:0 0 auto}.log-line[data-phase=start]{color:var(--text)}.active-events,.event-log{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 40%,transparent) var(--bg-sunken)}.active-events::-webkit-scrollbar,.event-log::-webkit-scrollbar{width:8px}.active-events::-webkit-scrollbar-track,.event-log::-webkit-scrollbar-track{background:var(--bg-sunken)}.active-events::-webkit-scrollbar-thumb,.event-log::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 34%,transparent);border-radius:0}.canvas-wrap{border-color:var(--line)}.error-banner{border-color:color-mix(in srgb,var(--bad) 60%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--bad) 14%,transparent)}.error-head strong{font-family:var(--font-display);font-size:25px;line-height:1.1;letter-spacing:.03em;text-transform:none;text-shadow:var(--glow-1)}::selection{background:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--text)}.channel-row .channel-label{text-transform:uppercase;letter-spacing:.1em}.channel-row .channel-db{font-variant-numeric:tabular-nums}.channel-row[data-silent=yes] .channel-label,.channel-row[data-silent=yes] .channel-db{text-shadow:var(--glow-1)}.channel-row[data-selected=yes] .channel-label{color:var(--accent);font-weight:500;text-shadow:var(--glow-1)}.channel-note{font-family:var(--font-mono)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}@media(prefers-contrast:more){:root{--text: #ffffff;--text-muted: #bdbdbd;--scanline: transparent;--grid-line: transparent}.fx{display:none}.title h1{text-shadow:none}}