@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/5ce348bf30bf5439-s.0zgw-jeven.3w.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/4fa387ec64143e14-s.0wkzw~je483f-.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/6306c77e7c8268e4-s.0rhz0arwfsn~5.woff2)format("woff2");unicode-range:U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7d817b4c03b0c5f1-s.0l76wvqk9d84w.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/bbc41e54d2fcbd21-s.0k4k9394f2q-k.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/797e433ab948586e-s.p.08e28id.o-okb.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Mono Fallback;src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.0%;size-adjust:134.59%}.geist_mono_3342dced-module__ksAy2q__className{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}.geist_mono_3342dced-module__ksAy2q__variable{--font-mono:"Geist Mono", "Geist Mono Fallback"}
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.mx-auto{margin-inline:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.min-h-screen{min-height:100vh}.min-w-\[60px\]{min-width:60px}.flex-shrink{flex-shrink:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-\[\#1a1a2e\]{border-color:#1a1a2e}.border-\[\#2a4a3a\]{border-color:#2a4a3a}.bg-\[\#0a0a0f\]{background-color:#0a0a0f}.bg-\[\#1a1a2e\]{background-color:#1a1a2e}.bg-\[\#1a2e1a\]{background-color:#1a2e1a}.bg-\[\#111118\]{background-color:#111118}.text-center{text-align:center}.text-\[0\.6rem\]{font-size:.6rem}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.text-\[\#4ecdc4\]{color:#4ecdc4}.text-\[\#333\]{color:#333}.text-\[\#555\]{color:#555}.text-\[\#666\]{color:#666}.text-\[\#888\]{color:#888}.uppercase{text-transform:uppercase}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}@media (hover:hover){.hover\:text-\[\#4ecdc4\]:hover{color:#4ecdc4}}:root{--bg-main:#0b0a10;--acc-primary:#6b46c1;--acc-hover:#805ad5;--acc-glow:#6b46c166;--cyan:#4ecdc4;--cyan-glow:#4ecdc466;--yellow:#ffd93d;--text-primary:#f1f1f1;--text-muted:#8a8a9e;--card-bg:#16151f99;--card-border:#2d2b3ecc}*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:#2a2a3e;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3a3a5e}::-webkit-scrollbar-corner{background:var(--bg-main)}*{scrollbar-width:thin;scrollbar-color:#2a2a3e var(--bg-main)}body{background:radial-gradient(circle at 50% 0%, #1a162b 0%, var(--bg-main) 60%);color:var(--text-primary);flex-direction:column;align-items:center;min-height:100vh;padding:1.5rem 2rem;font-family:Inter,-apple-system,sans-serif;display:flex}.header{background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:100px;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;width:100%;max-width:1400px;margin-bottom:2rem;padding:1rem 2rem;display:flex;box-shadow:0 8px 32px #0003}.header h1{-webkit-text-fill-color:transparent;letter-spacing:-.02em;background:linear-gradient(135deg,#fff 0%,#a594fd 100%);-webkit-background-clip:text;margin-right:auto;font-family:Inter,sans-serif;font-size:1.5rem;font-weight:700}#startBtn{background:var(--acc-primary);color:#fff;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 15px var(--acc-glow);border:none;border-radius:50px;padding:.6rem 1.6rem;font-family:Inter,sans-serif;font-size:.75rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}#startBtn:hover{background:var(--acc-hover);box-shadow:0 6px 20px var(--acc-glow);transform:translateY(-2px)}#startBtn.listening{color:var(--cyan);border:1px solid var(--cyan);box-shadow:0 0 15px var(--cyan-glow);animation:pulse border 2s infinite;background:0 0}.timer{color:var(--text-muted);font-family:SF Mono,Fira Code,monospace;font-size:.9rem;font-weight:500}.phase-bar{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;align-items:center;gap:1rem;width:100%;max-width:1200px;margin-bottom:1.5rem;padding:.8rem 1.2rem;display:flex}.phase-label{text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);white-space:nowrap;font-size:.65rem;font-weight:600}.phase-label.learning{color:var(--yellow)}.phase-label.locked{color:var(--cyan)}.phase-track{background:#ffffff0d;border-radius:4px;flex:1;height:4px;overflow:hidden}.phase-fill{background:var(--yellow);border-radius:4px;width:0%;height:100%;transition:width .3s ease-out}.phase-fill.locked{background:var(--cyan);width:100%;box-shadow:0 0 10px var(--cyan-glow)}.main-display{grid-template-columns:repeat(4,1fr);gap:.75rem;width:100%;max-width:1400px;margin-bottom:1.5rem;display:grid}.card{background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;border-radius:16px;min-width:0;padding:.85rem 1rem;transition:all .5s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px #0000001a}.card:hover{border-color:#6b46c1cc;transform:translateY(-3px)}.card.flash{border-color:var(--cyan);box-shadow:0 0 20px var(--cyan-glow)}.card-label{text-transform:uppercase;letter-spacing:.2em;color:var(--text-muted);margin-bottom:.6rem;font-size:.6rem;font-weight:600}.card-value{color:var(--text-primary);letter-spacing:-.03em;justify-content:center;align-items:center;min-height:2.2rem;font-family:Inter,sans-serif;font-size:1.75rem;font-weight:700;transition:color .3s;display:flex}.card-sub{color:var(--text-muted);margin-top:.4rem;font-size:.7rem;font-weight:500}.panel{background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;border-radius:16px;padding:1.2rem 1.5rem;box-shadow:0 4px 20px #0000001a}.panel .card-label{margin-bottom:1rem}.sig-notes{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.sig-note{width:38px;height:38px;color:var(--text-muted);background:#ffffff0d;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;font-size:.85rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.sig-note.in-scale{color:var(--cyan);background:#4ecdc41a;border:1px solid #4ecdc44d}.sig-note.active{background:var(--cyan);color:#000;box-shadow:0 4px 15px var(--cyan-glow);border-color:var(--cyan);transform:scale(1.15)translateY(-2px)}.sig-note.sounding{color:#000;box-shadow:0 0 10px var(--cyan-glow);background:#4ecdc4cc}.sig-note.sounding.out-of-key{color:#000;background:#ff6b6b;border-color:#ff6b6b;box-shadow:0 0 10px #ff6b6b66}.sig-note.quiet{opacity:.3}.chroma-row{background:#0003;border-radius:8px;align-items:flex-end;gap:4px;height:60px;padding:8px 4px;display:flex}.chroma-col{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;height:100%;display:flex}.chroma-fill{background:var(--cyan);opacity:.8;border-radius:2px 2px 0 0;width:100%;min-height:2px;transition:height .1s}.chroma-fill.out-of-key{opacity:.6;background:#ff6b6b}.chroma-label{color:var(--text-muted);margin-top:4px;font-size:.55rem;font-weight:500}.chord-grid{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.chord-chip{text-align:center;background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;min-width:60px;padding:.5rem .8rem;transition:all .2s}.chord-chip:hover{background:#ffffff0f;transform:translateY(-1px)}.chord-chip .chord-name{color:var(--text-primary);font-family:Inter,sans-serif;font-size:.95rem;font-weight:700}.chord-chip .chord-degree{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-top:.2rem;font-size:.55rem}.chord-chip .chord-notes{color:#666;margin-top:.1rem;font-size:.55rem}.chord-chip.major-chord{background:#4ecdc40d;border-color:#4ecdc44d}.chord-chip.minor-chord{background:#6b46c10d;border-color:#6b46c14d}.chord-chip.dim-chord{background:#ff6b6b0d;border-color:#ff6b6b4d}.tl-entry{border-bottom:1px solid #1a1a1a;align-items:center;gap:.6rem;padding:.3rem 0;font-size:.65rem;display:flex}.tl-entry:last-child{border-bottom:none}.tl-time{color:#444;font-variant-numeric:tabular-nums;min-width:40px}.tl-key{color:#4ecdc4;min-width:70px;font-weight:600}.tl-mode{color:#888}.tl-sig{color:#666;margin-left:auto}.tl-entry.current{background:#4ecdc40d;border-left:2px solid #4ecdc4;padding-left:.5rem}.tl-duration{color:#333;min-width:30px;font-size:.55rem}.chord-block{color:#fff;white-space:nowrap;background:#1a2e1a;border-right:1px solid #0a0a0f;flex-shrink:0;justify-content:center;align-items:center;min-width:40px;padding:0 .4rem;font-family:Georgia,serif;font-size:.75rem;font-weight:600;display:flex;position:relative}.chord-block.in-key{color:#4ecdc4;background:#1a2e1a}.chord-block.out-of-key{color:#ff6b6b;background:#2e1a1a}.chord-block .chord-time{color:#ffffff40;font-family:SF Mono,monospace;font-size:.45rem;font-weight:400;position:absolute;bottom:2px;left:4px}@media (min-width:1000px){body{max-width:1400px;margin:0 auto;padding:.8rem 2rem}.desktop-grid{grid-template-columns:1fr 1fr 1fr;gap:.6rem;width:100%;display:grid}.desktop-grid>*{min-width:0;max-width:none}.desktop-2col{grid-column:span 2}.desktop-full{grid-column:1/-1}}@media (max-width:999px) and (min-width:700px){.desktop-grid{grid-template-columns:1fr 1fr;gap:.6rem;width:100%;display:grid}.desktop-grid>*{min-width:0;max-width:none}.desktop-full{grid-column:1/-1}}@media (max-width:699px){.desktop-grid{flex-direction:column;gap:.5rem;width:100%;display:flex}.main-display{grid-template-columns:1fr}.card{min-width:100%}}.mic-warning{color:#ffd93d;text-align:center;margin-bottom:.4rem;font-size:.55rem;display:none}.confidence-label{letter-spacing:.05em;vertical-align:middle;margin-left:.4rem;font-size:.55rem;font-weight:600}.confidence-label.high{color:#4ecdc4}.confidence-label.medium{color:#ffd93d}.confidence-label.low{color:#ff6b6b}.roman-label{color:#888;margin-top:.1rem;font-family:Georgia,serif;font-size:.5rem}#simpleBtn{color:#888;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:#1a1a2e;border:1px solid #333;padding:.4rem 1rem;font-family:inherit;font-size:.65rem;transition:all .2s}#simpleBtn.active{color:#4ecdc4;background:#1a2e2e;border-color:#4ecdc4}body.simple-mode #debugPanel,body.simple-mode #waveformPanel,body.simple-mode #suggestedScalesPanel{display:none!important}body.simple-mode .panel:has(#chromaRow){display:none!important}body.simple-mode .panel:has(#triadGrid){display:none!important}body.simple-mode .panel:has(#sigNotes){display:none!important}body.simple-mode .panel:has(#liveNotes){display:none!important}.bpm-confidence{vertical-align:middle;border-radius:50%;width:8px;height:8px;margin-left:.3rem;display:inline-block}.bpm-confidence.high{background:#4ecdc4}.bpm-confidence.low{background:#ffd93d}#playhead{pointer-events:none;z-index:10;background:#fff;width:2px;height:100%;display:none;position:absolute;top:0;left:0}.chord-active{outline-offset:-2px;z-index:5;outline:2px solid #fff!important}#transposeControls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;margin-bottom:.6rem;display:none}#transposeControls button{color:#4ecdc4;cursor:pointer;background:#1a1a2e;border:1px solid #333;padding:.3rem .8rem;font-family:inherit;font-size:.7rem;transition:all .2s}#transposeControls button:hover{border-color:#4ecdc4}#transposeControls .transpose-label{color:#888;text-align:center;min-width:100px;font-size:.65rem}#transposeControls .capo-label{color:#666;font-size:.6rem}#speedControls{align-items:center;gap:.3rem;margin-left:.5rem;display:none}#speedControls button{color:#888;cursor:pointer;background:#1a1a2e;border:1px solid #222;padding:.2rem .5rem;font-family:inherit;font-size:.55rem;transition:all .2s}#speedControls button:hover{color:#4ecdc4;border-color:#4ecdc4}#speedControls button.active{color:#4ecdc4;background:#1a2e2e;border-color:#4ecdc4}.header-btn{color:#4ecdc4;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:#1a1a2e;border:1px solid #4ecdc4;border-radius:50px;padding:.4rem 1rem;font-family:Inter,sans-serif;font-size:.65rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:none}.header-btn:hover{background:#4ecdc41a;transform:translateY(-1px)}.header-btn.active{color:#000;background:#4ecdc4}#metronomeBtn.active{color:#000;background:#4ecdc4;border-color:#4ecdc4}.mode-pill{color:#666;background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;padding:.3rem .6rem;font-family:Inter,sans-serif;font-size:.65rem;transition:all .15s cubic-bezier(.4,0,.2,1)}.mode-pill.active-mode{color:#fff;background:#6b46c1;border-color:#9f7aea;transform:scale(1.05);box-shadow:0 0 10px #6b46c180}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}