:root{--bg:#0f1115;--panel:#181b22;--panel-2:#20242d;--text:#e8eaf0;--muted:#8b92a3;--accent:#f5b942;--good:#3ecf6e;--bad:#ef5350;font-size:18px}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit;background:var(--panel-2);border:1px solid #343a47;border-radius:8px;padding:.5rem .9rem}button{cursor:pointer}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);color:#1a1405;border-color:var(--accent);font-weight:600}.shell{flex-direction:column;min-height:100vh;display:flex}.nav{background:var(--panel);flex-wrap:wrap;align-items:center;gap:.25rem;padding:.5rem 1rem;display:flex}.nav a{color:var(--muted);border-radius:8px;padding:.4rem .8rem}.nav a:hover,.nav a.active{color:var(--text);background:var(--panel-2)}.nav .spacer{flex:1}.view{flex:1;padding:1.5rem 2rem}h1{margin-top:0}.cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;display:grid}.card{background:var(--panel);border-radius:12px;padding:1.2rem;display:block}.card:hover{outline:2px solid var(--accent)}.card h3{margin:0 0 .4rem}.card p{color:var(--muted);margin:0;font-size:.85rem}.login{flex-direction:column;gap:.8rem;max-width:320px;margin:20vh auto;display:flex}.login .error{color:var(--bad);min-height:1.2em}.muted{color:var(--muted)}.micerr{color:var(--bad);margin-right:.5rem;font-size:.8rem}button.on{border-color:var(--good);color:var(--good)}.meter{background:var(--panel-2);vertical-align:middle;border-radius:5px;width:120px;height:10px;margin-right:.6rem;display:inline-block;position:relative;overflow:hidden}.meter-fill{background:var(--muted);width:0;height:100%}.meter-fill.over{background:var(--good)}.meter-gate{background:var(--accent);width:2px;position:absolute;top:0;bottom:0}.tuner{text-align:center;max-width:560px;margin:0 auto}.tuner-note{font-size:7rem;font-weight:700;line-height:1.1}.tuner.intune .tuner-note{color:var(--good)}.tuner-needle{width:100%;max-width:440px}.tuner-needle .tick{stroke:var(--muted);stroke-width:1.5px}.tuner-needle .needle{stroke:var(--accent);stroke-width:3px;transition:transform 80ms linear}.tuner.intune .needle{stroke:var(--good)}.tuner-cents{min-height:1.6em;font-size:1.4rem}.tuner-strings{justify-content:center;gap:.6rem;margin:1rem 0;display:flex}.tstr{background:var(--panel-2);border-radius:50%;justify-content:center;align-items:center;width:3.2rem;height:3.2rem;font-size:1.4rem;font-weight:600;display:flex;position:relative}.tstr.near{outline:3px solid var(--accent)}.tstr .chk{color:var(--good);font-size:1rem;display:none;position:absolute;top:-6px;right:-4px}.tstr.done{background:#1d3a29}.tstr.done .chk{display:block}h2{margin:0 0 .6rem;font-size:1.1rem}.warn{color:var(--accent);background:#3a2a10;border-radius:8px;margin:.5rem 0;padding:.6rem .9rem}.set-group{background:var(--panel);border-radius:12px;max-width:720px;margin-bottom:1rem;padding:1rem 1.2rem}.set-row{align-items:center;gap:.6rem;padding:.3rem 0;display:flex}.set-row label{flex:1}.set-row input[type=number]{width:8rem}.set-row select{background:var(--panel-2);color:var(--text);border:1px solid #343a47;border-radius:8px;max-width:22rem;padding:.4rem}button.reset{padding:.2rem .5rem}.nf-head{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.nf-head h1{margin:0}.spacer{flex:1}.nf-filters{flex-wrap:wrap;align-items:center;gap:.8rem;margin:1rem 0;font-size:.85rem;display:flex}.chip{background:var(--panel);border-radius:999px;align-items:center;gap:.3rem;padding:.2rem .6rem;display:inline-flex}.chip input{padding:.1rem .3rem}.nf-card{background:var(--panel);text-align:center;border:3px solid #0000;border-radius:20px;max-width:640px;margin:1rem auto;padding:2rem;transition:border-color .2s}.nf-card.good{border-color:var(--good)}.nf-card.bad{border-color:var(--bad)}.nf-note{font-size:9rem;font-weight:700;line-height:1.1}.nf-where{color:var(--muted);font-size:2rem}.nf-hint{min-height:7rem;color:var(--accent);margin-top:1rem;font-size:1.6rem}.nf-feedback{min-height:2rem;font-size:1.6rem}.nf-card.good .nf-feedback{color:var(--good)}.nf-card.bad .nf-feedback{color:var(--bad)}.fb{width:320px;margin:.4rem auto;display:block}.fb-string{stroke:var(--muted);stroke-width:1px}.fb-fret{stroke:#343a47;stroke-width:1px}.fb-nut{stroke:var(--text);stroke-width:3px}.fb-dot{fill:var(--accent)}.dbg-info{margin-top:1rem;font-size:.9rem}.hw-list{gap:.6rem;margin-bottom:1.5rem;display:grid}.hw-item{background:var(--panel);border-radius:10px;grid-template-columns:2fr 1fr 1fr;align-items:center;gap:1rem;padding:.9rem 1.2rem;display:grid}.hw-item:hover{outline:2px solid var(--accent)}.hw-controls{margin-top:.5rem}.hw-status{min-height:2rem;color:var(--accent);margin-top:.5rem;font-size:1.4rem}.hw-results{background:var(--panel);border-radius:14px;max-width:640px;margin-top:1rem;padding:1rem 1.5rem}.hw-results h2{margin:0 0 .5rem;font-size:2.2rem}.hw-actions{align-items:center;gap:1rem;margin-top:1rem;display:flex}.cal-out{margin-top:.5rem}.chord-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem;margin:1rem 0;display:grid}.chord-tile{background:var(--panel);border-radius:12px;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem;display:flex}.chord-tile.sel{outline:2px solid var(--accent)}.chord-diagram{display:block}.badge{background:var(--good);color:#08210f;border-radius:999px;padding:.05rem .5rem;font-size:.7rem}.chord-detail{background:var(--panel);border-radius:16px;flex-wrap:wrap;align-items:flex-start;gap:2rem;padding:1.2rem 1.6rem;display:flex}.chord-live{flex:1;min-width:280px}.score-bar{background:var(--panel-2);border-radius:9px;height:18px;margin:.6rem 0;position:relative}.score-bar #cbar{background:var(--bad);border-radius:9px;width:0;height:100%;transition:width .15s}.score-bar #cbar.ok{background:var(--good)}.score-bar #cthr{background:var(--accent);width:2px;position:absolute;top:-3px;bottom:-3px}.chord-res{min-height:2rem;font-size:1.5rem}.chord-res.good{color:var(--good)}.chord-res.bad{color:var(--bad)}.big{font-size:4rem;font-weight:700;line-height:1.1}.cal-list{flex-wrap:wrap;gap:.4rem;margin:.8rem 0;display:flex}.change-board{flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem;margin:1.5rem 0;display:flex}.change-chord{background:var(--panel);opacity:.55;border:3px solid #0000;border-radius:16px;padding:1rem}.change-chord.expected{border-color:var(--accent);opacity:1}.change-mid{text-align:center;min-width:160px}.hw-next{align-items:center;gap:.8rem;margin:.5rem 0;display:flex}.hw-strum{letter-spacing:.1em;color:var(--muted);margin-top:.4rem;font-size:1.4rem}.hw-strum span{border-radius:6px;padding:.1rem .4rem}.hw-strum span.on{background:var(--accent);color:#1a1405}.good{color:var(--good)}.home-hero{flex-wrap:wrap;align-items:center;gap:2.5rem;margin:1rem 0 1.5rem;display:flex}.start-btn{background:var(--accent);color:#1a1405;border-radius:16px;padding:1.4rem 2.6rem;font-size:1.8rem;font-weight:700}.start-btn:hover{filter:brightness(1.08)}.home-streak{text-align:center}.ring{width:130px;height:130px}.ring-bg{fill:none;stroke:var(--panel-2);stroke-width:12px}.ring-fg{fill:none;stroke:var(--accent);stroke-width:12px;stroke-linecap:round}.ring-fg.done{stroke:var(--good)}.ring-num{fill:var(--text);font-size:30px;font-weight:700}.ring-sub{fill:var(--muted);font-size:12px}.rt-list{gap:.5rem;max-width:720px;margin:1rem 0;padding:0;list-style:none;display:grid}.rt-list li{background:var(--panel);border-radius:10px;grid-template-columns:5rem 11rem 1fr;align-items:center;gap:.8rem;padding:.7rem 1rem;display:grid}.rt-min{color:var(--accent);font-weight:600}.rt-bar{flex-wrap:wrap;align-items:center;gap:1.2rem;display:flex}.rt-progress{background:var(--panel-2);border-radius:3px;height:6px;margin:.6rem 0 1rem;overflow:hidden}.rt-progress>div{background:var(--accent);width:0;height:100%;transition:width .25s linear}.set-group.wide{max-width:980px}.stat-tiles{flex-wrap:wrap;gap:1rem;margin-bottom:1rem;display:flex}.tile{background:var(--panel);text-align:center;border-radius:12px;min-width:140px;padding:.8rem 1.6rem}.tile small{color:var(--muted);font-size:1.3rem;font-weight:400}.cal-heat{max-width:100%;height:auto}.bar-chart,.fret-heat{width:100%;height:auto;display:block}.bar-chart .bar{fill:var(--muted)}.bar-chart .bar.goal{fill:var(--good)}.bar-chart .goal-line{stroke:var(--accent);stroke-dasharray:5 4;stroke-width:1.5px}.axis{fill:var(--muted);font-size:11px}.cell-note{fill:#fff;pointer-events:none;font-size:12px}.cell-pct{fill:#fff;pointer-events:none;font-size:9px}.cell-note.dark,.cell-pct.dark{fill:#1a1405}.heat-legend{color:var(--muted);align-items:center;gap:.5rem;max-width:320px;margin-top:.4rem;font-size:.8rem;display:flex}.heat-legend div{border-radius:5px;flex:1;height:10px}.line-chart{width:100%;height:auto;display:block}.line-path{stroke-width:2px}.line-legend{color:var(--muted);gap:1rem;margin-bottom:.3rem;font-size:.8rem;display:flex}.line-legend i{vertical-align:middle;border-radius:50%;width:10px;height:10px;margin-right:.3rem;display:inline-block}.trends-grid,.stats-two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;display:grid}.stats-table{border-collapse:collapse;width:100%}.stats-table th,.stats-table td{text-align:left;border-bottom:1px solid var(--panel-2);padding:.3rem .8rem .3rem 0}.stats-table th{color:var(--muted);font-size:.85rem;font-weight:500}.chroma-bars{align-items:flex-end;gap:6px;height:90px;margin:.5rem 0;display:flex}.cb{max-width:40px;height:100%;color:var(--muted);flex-direction:column;flex:1;justify-content:flex-end;align-items:center;font-size:.7rem;display:flex}.cb-fill{background:var(--accent);border-radius:4px 4px 0 0;width:100%;height:0}.mic-big{padding:.8rem 1.6rem;font-size:1.2rem}.view a:not(.card):not(.hw-item):not(.start-btn):not(.btn){color:var(--accent)}.view a:not(.card):not(.hw-item):not(.start-btn):not(.btn):hover{text-decoration:underline}.btn{font:inherit;background:var(--panel-2);color:var(--text);border:1px solid #343a47;border-radius:8px;padding:.5rem .9rem;display:inline-block}.btn:hover{border-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.card:focus-visible,.hw-item:focus-visible,.chord-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.nf-head button,.nf-head .btn,.hw-controls button,.rt-bar button{padding:.7rem 1.2rem;font-size:1.1rem}.nf-filters.hw-controls{font-size:1rem}.shortcuts{margin-top:1.5rem;font-size:.85rem}kbd{background:var(--panel-2);font:inherit;border:1px solid #343a47;border-radius:4px;padding:.05rem .4rem;font-size:.85em}.shortcut-overlay{z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.shortcut-box{background:var(--panel);border-radius:14px;gap:.5rem;min-width:18rem;padding:1.2rem 2rem;display:grid}.shortcut-box h2{margin:0 0 .4rem}.nf-card{position:relative}.nf-card.paused{opacity:.45}.nf-card.paused:after{content:"Paused – Space to resume";color:var(--text);justify-content:center;align-items:center;font-size:1.6rem;display:flex;position:absolute;inset:0}@media (width>=1100px){.chords-layout{grid-template-columns:1fr minmax(380px,460px);align-items:start;gap:1.5rem;display:grid}.chord-side{position:sticky;top:1rem}}.saved{min-width:5rem;font-size:.85rem}.saved.ok{color:var(--good)}.saved.err{color:var(--bad)}.hw-laps{border-collapse:collapse;margin:.5rem 0}.hw-laps th,.hw-laps td{text-align:left;padding:.25rem 1rem .25rem 0}.hw-laps th{color:var(--muted,#7f8798);font-weight:600}.rhythm-grid{letter-spacing:.15em;font-family:monospace}.rhythm-extra{min-height:1.6rem;color:var(--bad);font-weight:700}.rhythm-row{gap:.35rem;max-width:100%;margin:.5rem 0;display:flex}.rcell{text-align:center;background:var(--panel);border:2px solid #0000;border-radius:10px;flex-direction:column;flex:1 1 0;min-width:0;padding:.8rem 0;font-size:1.6rem;display:flex}.rcell.beat{border-left-color:var(--muted,#7f8798)}.rcell.rest{opacity:.4}.rcell .rletter{color:var(--muted,#7f8798);font-size:.9rem}.rcell.now{border-color:var(--accent)}.rcell.hit{background:#1f6b3a}.rcell.off{background:#8a6a12}.rcell.miss{background:#7a2a2a}.rcell.miss:after{content:"✗";font-size:.9rem}.interstitial{text-align:center;padding:2rem 0}.fb-num{fill:var(--muted);text-anchor:middle;font-size:9px}.fb-label{fill:#0b1220;text-anchor:middle;pointer-events:none;font-size:9px;font-weight:700}.fb-dot.fb-root{fill:var(--accent);stroke:var(--text);stroke-width:1.5px}.fb-dot.fb-done{fill:var(--good)}.fb-dot.fb-bad{fill:var(--bad)}.fb-dot.fb-next{stroke:var(--text);stroke-width:2px;animation:.9s ease-in-out infinite fb-pulse}@keyframes fb-pulse{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.fb-dot.fb-next{animation:none}}.fb-dot.dim{fill:var(--panel-2)}.fb.wide{width:min(100%,640px)}.sc-board{background:var(--panel);border-radius:14px;max-width:760px;padding:.8rem}.sc-board .fb{width:100%;max-width:720px}.sc-play{margin:1rem 0}.sc-msg{min-height:1.6rem;font-size:1.2rem}.sc-msg.bad{color:var(--bad)}.nf-mode{gap:.4rem;margin-left:.5rem;display:inline-flex}.nf-mode button.on{background:var(--accent);color:#0b1220}.oct-chips{flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.2rem 0;display:flex}.oct-chip{background:var(--panel-2);border:2px solid #0000;border-radius:999px;padding:.3rem 1rem;font-size:1.6rem}.oct-chip.done{background:var(--good);color:#08210f}.rec-panel{background:var(--panel);border-top:2px solid var(--accent);z-index:20;flex-wrap:wrap;align-items:center;gap:1rem;max-height:40vh;padding:.5rem 1rem;display:flex;position:fixed;bottom:0;left:0;right:0;overflow:auto}.rec-item{align-items:center;gap:.5rem;display:inline-flex}#rec.recording{background:var(--bad);color:#fff}.editor-text{background:var(--panel);width:100%;min-height:10rem;color:var(--text);border:2px solid var(--panel-2);resize:vertical;border-radius:10px;padding:.7rem;font-family:monospace;font-size:1rem}.editor-text.bad{border-color:var(--bad)}.editor-help{background:var(--panel);border-radius:10px;margin:1rem 0;padding:.7rem 1rem}.editor-help summary{cursor:pointer;font-weight:600}.editor-help code{background:var(--panel-2);border-radius:4px;padding:.1rem .3rem}.my-content-list{flex-direction:column;gap:.3rem;margin:.5rem 0 1.2rem;display:flex}.my-content-item{background:var(--panel);border-radius:8px;align-items:center;gap:.6rem;padding:.4rem .8rem;display:flex}.my-content-item .spacer{flex:1}.drop-zone{border:2px dashed var(--panel-2);text-align:center;border-radius:12px;margin:1rem 0;padding:2rem}.drop-zone.over{border-color:var(--accent)}.chord-map-table{border-collapse:collapse;width:100%;margin:.8rem 0}.chord-map-table td,.chord-map-table th{text-align:left;border-bottom:1px solid var(--panel-2);padding:.3rem .6rem}.hw-edit{cursor:pointer;text-decoration:underline}