body{margin:0;background:#121110}#root{min-height:100vh}:root{--mint: #55FFA1;--mint-dim: #33cc78;--bg: #0e0f0d;--surface: #161814;--surface2: #1e201c;--border: #2a2e28;--border-bright: #3a3e38;--text: #e8ece4;--text-dim: #7a8070;--text-muted: #4a4e48}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}.app{max-width:760px;margin:0 auto;padding:2rem 1.25rem 3rem;font-family:system-ui,-apple-system,sans-serif;min-height:100vh}header h1{margin:0;font-size:1.75rem;font-weight:800;letter-spacing:-.03em;color:var(--mint)}.tagline{margin:.35rem 0 1.5rem;color:var(--text-dim);font-size:.95rem}.tab-bar{display:flex;gap:.5rem;margin-bottom:1.75rem;border-bottom:1px solid var(--border);padding-bottom:0}.tab-btn{padding:.55rem 1.1rem;border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--text-dim);font-size:.9rem;font-weight:500;cursor:pointer;transition:color .15s,border-color .15s;margin-bottom:-1px}.tab-btn:hover{color:var(--text)}.tab-btn.active{color:var(--mint);border-bottom-color:var(--mint)}.upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:2.5rem 1.5rem;border:2px dashed var(--border-bright);border-radius:14px;cursor:pointer;transition:border-color .15s,background .15s}.upload-zone:hover:not(.disabled){border-color:var(--mint);background:#55ffa10a}.upload-zone.disabled{opacity:.45;cursor:not-allowed}.upload-zone input{display:none}.upload-title{font-weight:600}.upload-hint{font-size:.85rem;color:var(--text-dim)}.progress-wrap{display:flex;flex-direction:column;gap:.55rem;padding:.5rem 0}.progress-label{text-align:center;color:var(--mint);font-size:.9rem;font-weight:500}.progress-track{width:100%;height:6px;background:var(--surface2);border-radius:99px;overflow:hidden}.progress-fill{height:100%;background:var(--mint);border-radius:99px;transition:width .4s ease}.progress-fill.indeterminate{width:38%!important;animation:indeterminate 1.4s ease-in-out infinite}@keyframes indeterminate{0%{transform:translate(-130%)}to{transform:translate(360%)}}.status{text-align:center;color:var(--mint)}.error{color:#ff6b6b;margin-top:1rem}.result{display:flex;flex-direction:column;gap:1rem}.player{width:100%;accent-color:var(--mint)}.disclaimer{font-size:.8rem;color:var(--text-dim);margin:0}.meta-stats{margin-top:-.5rem}.timeline{margin-top:.5rem}.timeline-track{position:relative;height:48px;background:var(--surface);border-radius:8px;overflow:hidden}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;z-index:2;pointer-events:none;transform:translate(-1px)}.timeline-segment{position:absolute;top:4px;bottom:4px;border:none;border-radius:4px;font-size:.68rem;font-weight:700;cursor:pointer;padding:0 2px;overflow:hidden;min-width:24px;transition:opacity .1s}.timeline-segment:hover{opacity:.8}.timeline-segment.narrow{min-width:0;padding:0}.timeline-segment.active{outline:2px solid var(--mint);z-index:1}.timeline-segment span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline-segment[data-root=C]{background:#4a1515;color:#f99}.timeline-segment[data-root="C#"]{background:#2a0f40;color:#c9f}.timeline-segment[data-root=D]{background:#3a3000;color:#ffe066}.timeline-segment[data-root="D#"]{background:#4a1535;color:#fac}.timeline-segment[data-root=E]{background:#281840;color:#dbf}.timeline-segment[data-root=F]{background:#0a1e40;color:#8bf}.timeline-segment[data-root="F#"]{background:#0a2e10;color:#af9}.timeline-segment[data-root=G]{background:#3a1800;color:#fb8}.timeline-segment[data-root="G#"]{background:#002638;color:#8ef}.timeline-segment[data-root=A]{background:#082818;color:#6d8}.timeline-segment[data-root="A#"]{background:#282828;color:#eee}.timeline-segment[data-root=B]{background:#0a1430;color:#78c}.timeline-segment[data-root=N]{background:#1a1a18;color:#444}.timeline-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted);margin-top:.35rem}.chord-navigator{display:grid;grid-template-columns:1fr 2fr 1fr;gap:.75rem;align-items:center}.chord-nav-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:1.25rem .5rem;border:1px solid;border-radius:12px;text-align:center;transition:opacity .2s,transform .15s;min-height:90px;background:transparent;width:100%}.chord-nav-box.side{opacity:.45;cursor:pointer}.chord-nav-box.side:hover:not(:disabled){opacity:.7;transform:scale(1.03)}.chord-nav-box.side:disabled{cursor:default}.chord-nav-box.current{padding:2.25rem 1rem;min-height:160px;border-width:2px;border-radius:18px}.chord-nav-box.empty{opacity:.15!important;border-color:var(--border)!important;background:var(--surface)!important;color:var(--text-muted)!important}.chord-nav-label{font-weight:800;letter-spacing:-.02em;line-height:1}.chord-nav-box.side .chord-nav-label{font-size:1.3rem}.chord-nav-box.current .chord-nav-label{font-size:3rem}.chord-nav-time{font-size:.68rem;font-variant-numeric:tabular-nums;opacity:.55;letter-spacing:.01em}.chord-nav-rms{font-size:.62rem;font-variant-numeric:tabular-nums;opacity:.45;font-family:monospace}.chord-nav-hint{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6}.chord-nav-box[data-root=C]{background:#3a0f0f;border-color:#f55;color:#f99}.chord-nav-box[data-root="C#"]{background:#200a38;border-color:#96f;color:#c9f}.chord-nav-box[data-root=D]{background:#2e2600;border-color:gold;color:#ffe566}.chord-nav-box[data-root="D#"]{background:#3a0f2a;border-color:#f7b;color:#fac}.chord-nav-box[data-root=E]{background:#1e1230;border-color:#c9f;color:#dbf}.chord-nav-box[data-root=F]{background:#081830;border-color:#49f;color:#8bf}.chord-nav-box[data-root="F#"]{background:#08220c;border-color:#8e8;color:#af9}.chord-nav-box[data-root=G]{background:#2e1200;border-color:#f84;color:#fb8}.chord-nav-box[data-root="G#"]{background:#001e2e;border-color:#5df;color:#8ef}.chord-nav-box[data-root=A]{background:#062014;border-color:#3a5;color:#6d8}.chord-nav-box[data-root="A#"]{background:#202020;border-color:#ccc;color:#eee}.chord-nav-box[data-root=B]{background:#080e24;border-color:#35a;color:#78c}.chord-nav-box[data-root=N]{background:#141412;border-color:#333;color:#444}.chord-legend{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:-.25rem}.chord-legend-item{font-size:.7rem;font-weight:600;padding:.15rem .5rem;border-radius:4px;border:1px solid var(--border-bright);color:var(--text-dim);background:var(--surface)}.secondary{align-self:center;padding:.6rem 1.4rem;border:1px solid var(--border-bright);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font-size:.9rem;transition:border-color .15s,color .15s}.secondary:hover{border-color:var(--mint);color:var(--mint)}.stem-intro{color:var(--text-dim);font-size:.9rem;margin:0 0 1.25rem}.stem-result{display:flex;flex-direction:column;gap:1.25rem}.stem-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}@media (max-width: 480px){.stem-grid{grid-template-columns:1fr}}.stem-card{display:flex;flex-direction:column;gap:.6rem;padding:1rem;background:var(--surface);border:1px solid var(--border-bright);border-radius:10px;transition:border-color .15s}.stem-card.playing{border-color:var(--mint)}.stem-card-header{display:flex;align-items:center;gap:.5rem}.stem-emoji{font-size:1.3rem}.stem-label{font-weight:600;font-size:.95rem;flex:1}.stem-time{font-size:.72rem;color:var(--text-dim);font-variant-numeric:tabular-nums;margin-left:auto}.stem-scrubber{position:relative;height:20px;display:flex;align-items:center;cursor:pointer;padding:6px 0}.stem-scrubber:before{content:"";position:absolute;left:0;right:0;height:4px;background:var(--surface2);border-radius:99px}.stem-scrubber-fill{position:absolute;left:0;height:4px;background:var(--mint);border-radius:99px;pointer-events:none;transition:width .08s linear}.stem-scrubber-thumb{position:absolute;width:12px;height:12px;background:var(--mint);border-radius:50%;transform:translate(-50%);pointer-events:none;transition:left .08s linear;box-shadow:0 0 0 2px #55ffa140}.stem-scrubber:hover .stem-scrubber-thumb{width:14px;height:14px}.stem-play-btn{padding:.45rem 0;border:1px solid var(--border-bright);border-radius:6px;background:var(--surface2);color:var(--text);font-size:.85rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s}.stem-play-btn:hover{border-color:var(--mint)}.stem-card.playing .stem-play-btn{border-color:var(--mint);color:var(--mint)}.stem-download{font-size:.78rem;color:var(--text-dim);text-decoration:none;text-align:center}.stem-download:hover{color:var(--mint)}.stem-separator{display:flex;flex-direction:column;gap:1rem}footer{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border);font-size:.8rem;color:var(--text-dim)}footer a{color:var(--mint)}.license-note{margin:.5rem 0 0}