:root{--bg:#0e1117;--bg-2:#12161f;--panel:#1d24339e;--panel-solid:#1b2230;--panel-2:#2832468c;--ink:#eef3fb;--ink-dim:#a6b6cd;--ink-faint:#6b7a93;--accent:#f0a868;--accent-2:#ffce8a;--accent-deep:#c97b3e;--teal:#5fd3c4;--good:#6ee7a8;--bad:#ff8a8a;--line:#ffffff14;--line-strong:#ffffff24;--radius:20px;--radius-sm:13px;--shadow:0 18px 50px #00000073;--focus:0 0 0 3px var(--accent), 0 14px 34px #f0a86866;--glass:blur(16px) saturate(1.25);font-size:16px}html[data-platform=tv]{font-size:22px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;letter-spacing:.1px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,system-ui,sans-serif;overflow:hidden}.ambient{z-index:-1;pointer-events:none;background:var(--bg);position:fixed;inset:0;overflow:hidden}.glow{will-change:transform;border-radius:50%;position:absolute;transform:translateZ(0)}.glow-1{background:radial-gradient(circle,#5fd3c442,#0000 66%);width:70vw;height:70vw;animation:5s ease-in-out infinite alternate drift-1;top:-22vw;left:-12vw}.glow-2{background:radial-gradient(circle,#4ea0d633,#0000 70%);width:62vw;height:62vw;animation:7s ease-in-out infinite alternate drift-2;top:14vh;right:-16vw}.glow-3{background:radial-gradient(circle,#f0a8681a,#0000 72%);width:52vw;height:52vw;animation:9s ease-in-out infinite alternate drift-3;bottom:-24vw;left:22vw}@keyframes drift-1{0%{transform:translate(0,0)scale(1)}to{transform:translate(18vw,12vh)scale(1.28)}}@keyframes drift-2{0%{transform:translate(0,0)scale(1.15)}to{transform:translate(-16vw,10vh)scale(.9)}}@keyframes drift-3{0%{transform:translate(0,0)scale(1)}to{transform:translate(14vw,-14vh)scale(1.3)}}.app-shell{z-index:1;height:100vh;display:flex;position:relative}.rail{width:14rem;-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border-right:1px solid var(--line);background:linear-gradient(#12161fb8,#0e11178c);flex-direction:column;flex:none;gap:.4rem;padding:1.4rem .85rem;display:flex}.brand{padding:.3rem .6rem 1.3rem}.logo{align-items:center;gap:.55rem;display:inline-flex}.logo-word{letter-spacing:.2px;font-size:1.3rem;font-weight:800}.logo-word-accent{background:linear-gradient(180deg, var(--accent-2), var(--accent-deep));color:#0000;-webkit-background-clip:text;background-clip:text}.nav-items{flex-direction:column;flex:1;gap:.25rem;display:flex}.nav-item{border-radius:var(--radius-sm);color:var(--ink-dim);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:.75rem;width:100%;padding:.7rem .85rem;font-size:1rem;font-weight:600;display:flex}.nav-icon{display:inline-flex}.nav-item.active{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong);background:linear-gradient(120deg,#f0a86829,#f0a8680f)}.nav-item.active .nav-icon{color:var(--accent)}.rail-streak{color:var(--accent-2);align-items:center;gap:.4rem;padding:.55rem .85rem;font-weight:800;display:flex}.content{flex:1;overflow:hidden auto}.screen{max-width:1560px;padding:2.2rem 2.6rem 4rem}.screen-title{letter-spacing:-.3px;margin:0 0 1.3rem;font-size:2rem;font-weight:800}.section-h{color:var(--ink-dim);align-items:center;gap:.4rem;margin:1.9rem 0 .8rem;font-size:1.15rem;display:flex}.section-h svg{color:var(--accent)}.focusable{outline:none;transition:transform .14s,box-shadow .14s,background .14s}.focusable.focused{box-shadow:var(--focus);z-index:3;position:relative;transform:scale(1.045)}.btn{border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;color:var(--ink);background:var(--panel-2);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.05rem;font-size:.95rem;font-weight:700;display:inline-flex}.btn.big{padding:.85rem 1.5rem;font-size:1.05rem}.btn-primary{background:linear-gradient(135deg, var(--accent-2), var(--accent));color:#2a1c0e;border-color:#0000;box-shadow:0 8px 22px #f0a86847}.btn-ghost{background:#ffffff0a}.btn-active{background:linear-gradient(135deg, #7ee8da, var(--teal));color:#06231f;border-color:#0000}.btn:disabled{opacity:.4;cursor:default}.search-row{gap:.7rem;max-width:760px;margin-bottom:.9rem;display:flex}.search-field{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--panel);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);color:var(--ink-faint);flex:1;align-items:center;gap:.6rem;padding:0 1rem;display:flex}.search-input{color:var(--ink);background:0 0;border:none;flex:1;padding:.85rem 0;font-size:1.05rem}.search-input:focus{outline:none}.search-field:focus-within{box-shadow:var(--focus)}.toggle{border-radius:var(--radius-sm);border:1px solid var(--line-strong);color:var(--ink-dim);cursor:pointer;white-space:nowrap;background:#ffffff0a;align-items:center;gap:.55rem;padding:.6rem .9rem;font-size:.9rem;font-weight:700;display:inline-flex}.toggle.on{color:var(--ink)}.toggle.on svg{color:var(--good)}.toggle-track{background:var(--line-strong);border-radius:999px;width:38px;height:22px;transition:background .15s;position:relative}.toggle.on .toggle-track{background:var(--good)}.toggle-knob{background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:3px;left:3px}.toggle.on .toggle-knob{transform:translate(16px)}.chip-row{flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem;display:flex}.chip{border:1px solid var(--line);color:var(--ink-dim);cursor:pointer;background:#ffffff0d;border-radius:999px;padding:.5rem .95rem;font-size:.9rem;font-weight:600}.meta-line{color:var(--ink-faint);margin-bottom:1rem;font-size:.85rem}.info-block{background:var(--panel);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink-dim);align-items:center;gap:.6rem;max-width:720px;padding:1.2rem 1.4rem;line-height:1.55;display:flex}.info-block.error{color:var(--bad);border-color:#ff8a8a66}.info-block.success{color:var(--good);border-color:#6ee7a859}.card-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.3rem;display:grid}.video-card{background:var(--panel);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;display:flex;overflow:hidden}.video-thumb{aspect-ratio:16/9;background-position:50%;background-size:cover;background-color:var(--panel-2);cursor:pointer;border:none;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.play-badge{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;border-radius:50%;place-items:center;width:3rem;height:3rem;display:grid}.duration-badge{color:#fff;background:#000000c7;border-radius:6px;padding:2px 7px;font-size:.78rem;position:absolute;bottom:8px;right:8px}.mock-badge{background:linear-gradient(135deg, var(--accent-2), var(--accent));color:#2a1c0e;letter-spacing:.5px;border-radius:6px;padding:3px 8px;font-size:.66rem;font-weight:800;position:absolute;top:8px;left:8px}.video-meta{flex:1;padding:.85rem .95rem .4rem}.video-title{margin-bottom:.4rem;font-weight:700;line-height:1.3}.video-sub{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.video-channel{color:var(--ink-dim);font-size:.85rem}.diff-badge{text-transform:uppercase;letter-spacing:.4px;border-radius:999px;padding:2px 8px;font-size:.68rem;font-weight:800}.diff-beginner{color:var(--good);background:#6ee7a829}.diff-intermediate{color:var(--accent-2);background:#ffce8a29}.diff-advanced{color:var(--bad);background:#ff8a8a29}.video-summary{color:var(--ink-faint);margin-top:.5rem;font-size:.82rem;line-height:1.45}.video-actions{gap:.5rem;padding:.65rem .95rem .95rem;display:flex}.video-actions .btn{flex:1}.root-chip.active{background:linear-gradient(135deg, var(--accent-2), var(--accent));color:#2a1c0e;border-color:#0000}.chord-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;display:grid}.chord-card{background:var(--panel);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;align-items:center;gap:.4rem;padding:.9rem .9rem 1rem;display:flex}.chord-head{justify-content:space-between;align-items:center;width:100%;display:flex}.chord-name{font-size:1.3rem;font-weight:800}.pin-btn{border:1px solid var(--line);color:var(--ink-faint);cursor:pointer;background:#ffffff0a;border-radius:10px;padding:.35rem;display:inline-flex}.pin-btn.pinned{color:#2a1c0e;background:linear-gradient(135deg, var(--accent-2), var(--accent));border-color:#0000}.chord-diagram-wrap{cursor:pointer;background:0 0;border:none;border-radius:12px;place-items:center;padding:.2rem;display:grid}.chord-diagram{display:block}.cd-grid{stroke:#ffffff4d;stroke-width:1px}.cd-nut{fill:var(--ink-dim)}.cd-fretlabel{fill:var(--ink-dim);font-size:8px;font-weight:700}.cd-mark{font-size:9px}.cd-mark.open{fill:var(--ink-dim)}.cd-mark.mute{fill:var(--ink-faint)}.cd-dot,.cd-barre{fill:var(--accent)}.cd-dot-text{fill:#2a1c0e;font-size:7.5px;font-weight:800}.chord-controls{flex-direction:column;align-items:center;gap:.5rem;width:100%;display:flex}.play-chord{color:var(--teal);cursor:pointer;background:#5fd3c41f;border:1px solid #5fd3c466;border-radius:999px;align-items:center;gap:.4rem;padding:.4rem 1.1rem;font-size:.85rem;font-weight:700;display:inline-flex}.chord-variants{align-items:center;gap:.5rem;display:flex}.vbtn{border:1px solid var(--line-strong);color:var(--ink);cursor:pointer;background:#ffffff0a;border-radius:9px;padding:.3rem .45rem;display:inline-flex}.vlabel{text-align:center;min-width:54px;color:var(--ink-dim);font-size:.82rem;font-weight:700}.app-boot{background:var(--bg);position:fixed;inset:0}.auth-screen{z-index:1;background:radial-gradient(900px 600px at 50% 20%, #5fd3c414, transparent 60%), var(--bg);place-items:center;min-height:100vh;padding:2rem;display:grid;position:relative}.auth-card{background:var(--panel);width:100%;max-width:380px;-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;align-items:center;gap:.5rem;padding:2.2rem 2rem;display:flex}.auth-card h1{margin:.6rem 0 0;font-size:1.6rem}.auth-sub{color:var(--ink-dim);text-align:center;margin:0 0 .8rem;font-size:.92rem}.auth-field{flex-direction:column;gap:.3rem;width:100%;margin-bottom:.7rem;display:flex}.auth-field span{color:var(--ink-dim);font-size:.82rem;font-weight:600}.auth-field input{border-radius:var(--radius-sm);border:1px solid var(--line-strong);color:var(--ink);background:#ffffff0a;padding:.75rem .9rem;font-size:1.02rem}.auth-field input:focus{box-shadow:var(--focus);outline:none}.auth-error{width:100%;color:var(--bad);margin-bottom:.5rem;font-size:.88rem}.auth-submit{justify-content:center;width:100%;margin-top:.3rem}.auth-toggle{color:var(--teal);cursor:pointer;background:0 0;border:none;margin-top:.9rem;font-size:.9rem;font-weight:600}.rail-user{border-radius:var(--radius-sm);border:1px solid var(--line);width:100%;color:var(--ink-dim);cursor:pointer;background:#ffffff0a;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.4rem;padding:.6rem .85rem;font-weight:700;display:flex}.rail-username{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.approval-banner{border-radius:var(--radius);color:var(--accent-2);background:#ffce8a1f;border:1px solid #f0a86866;align-items:center;gap:.6rem;margin:1.4rem 2.6rem 0;padding:.9rem 1.2rem;line-height:1.5;display:flex}.approval-banner svg{flex:none}.user-list{flex-direction:column;gap:.6rem;max-width:620px;display:flex}.user-row{background:var(--panel);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border:1px solid var(--line);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.1rem;display:flex}.user-id{flex-direction:column;gap:.3rem;display:flex}.user-name{font-size:1.05rem;font-weight:700}.user-tags{gap:.4rem;display:flex}.tag{text-transform:uppercase;letter-spacing:.4px;border-radius:999px;padding:2px 8px;font-size:.7rem;font-weight:800}.tag-admin{color:var(--teal);background:#5fd3c429}.tag-ok{color:var(--good);background:#6ee7a829}.tag-pending{color:var(--accent-2);background:#ffce8a29}.disconnected{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:radial-gradient(900px 600px at 50% 30%,#f0a86814,#0000 60%),#0a0c11eb;place-items:center;padding:2rem;display:grid;position:fixed;inset:0}.disconnected-card{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);max-width:460px;box-shadow:var(--shadow);flex-direction:column;align-items:center;gap:.6rem;padding:2.4rem 2rem;display:flex}.disconnected-card h1{margin:.6rem 0 0;font-size:1.7rem}.disconnected-card p{color:var(--ink-dim);margin:0 0 .8rem;line-height:1.6}.player-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;background:#06080cf5;flex-direction:column;display:flex;position:fixed;inset:0}.player-bar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.3rem;display:flex}.player-title{font-size:1.05rem;font-weight:700}.player-actions{flex:none;align-items:center;gap:.6rem;display:flex}.player-frame{flex:1;place-items:center;padding:1rem;display:grid}.player-frame iframe{border:0;border-radius:14px;width:100%;max-width:1280px;height:100%}.player-mock{text-align:center;color:var(--ink-dim);line-height:1.9}.player-mock code{background:var(--panel-solid);color:var(--accent-2);border-radius:6px;padding:2px 6px}.tools-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.4rem;display:grid}.tool-card{background:var(--panel);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}.tool-card h2{align-items:center;gap:.55rem;margin:0 0 .4rem;display:flex}.tool-card h2 svg{color:var(--accent)}.tool-hint{color:var(--ink-dim);margin:0 0 1.1rem}.string-row{grid-template-columns:repeat(3,1fr);gap:.7rem;display:grid}.string-btn{border:1px solid var(--line-strong);cursor:pointer;background:#ffffff0a;border-radius:16px;flex-direction:column;align-items:center;gap:.2rem;padding:1rem .5rem;display:flex}.string-btn.ringing{background:linear-gradient(135deg, var(--accent-2), var(--accent));color:#2a1c0e;border-color:#0000}.string-note{font-size:1.9rem;font-weight:800}.string-label{color:var(--ink-dim);font-size:.8rem}.string-btn.ringing .string-label{color:#5a3d1e}.mic-tuner{flex-direction:column;gap:.8rem;margin-top:1.3rem;display:flex}.pitch-readout{text-align:center;background:#ffffff0a;border-radius:16px;padding:1.1rem}.pitch-note{font-size:3rem;font-weight:800}.pitch-meter{background:var(--line-strong);border-radius:999px;width:150px;height:8px;margin:.6rem auto;position:relative}.pitch-meter:before{content:"";background:var(--ink-dim);width:2px;height:16px;position:absolute;top:-4px;left:50%}.pitch-needle{background:var(--accent);border-radius:50%;width:14px;height:14px;margin-left:-7px;transition:transform 80ms linear;position:absolute;top:-3px;left:50%}.pitch-cents{color:var(--ink-dim);font-weight:700}.pitch-readout.in-tune{box-shadow:inset 0 0 0 2px var(--good)}.pitch-readout.in-tune .pitch-needle{background:var(--good)}.pitch-readout.in-tune .pitch-cents{color:var(--good)}.beat-dots{justify-content:center;gap:.7rem;margin-bottom:1rem;display:flex}.beat-dot{background:var(--line-strong);border-radius:50%;width:18px;height:18px;transition:transform 80ms,background 80ms}.beat-dot.on{background:var(--teal);transform:scale(1.4)}.beat-dot.on.down{background:var(--accent)}.bpm-display{text-align:center;font-size:2.7rem;font-weight:800}.bpm-display span{color:var(--ink-dim);font-size:1rem;font-weight:600}.bpm-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;margin-top:1rem;display:flex}.streak-hero{text-align:center;background:linear-gradient(160deg, #f0a8681f, var(--panel));-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border-radius:var(--radius);border:1px solid var(--line);margin-bottom:1.4rem;padding:1.8rem;position:relative}.streak-flame{color:var(--accent)}.streak-big{color:var(--accent);font-size:4.6rem;font-weight:900;line-height:1}.streak-cap{color:var(--ink-dim);text-transform:uppercase;letter-spacing:1px;font-weight:700}.streak-total{color:var(--ink-faint);margin-top:.5rem}.log-actions{margin-bottom:1rem}.badge-row{flex-wrap:wrap;gap:1rem;display:flex}.badge{background:var(--panel);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border:1px solid var(--line);text-align:center;border-radius:16px;flex-direction:column;align-items:center;gap:.4rem;min-width:116px;padding:1.1rem 1.3rem;display:flex}.badge.locked{opacity:.4}.badge.earned{border-color:#f0a86880;box-shadow:0 8px 22px #f0a86824}.badge.earned .badge-icon{color:var(--accent)}.badge.locked .badge-icon{color:var(--ink-faint)}.badge-label{color:var(--ink-dim);font-size:.8rem}.home-hero{align-items:center;gap:1.2rem;margin-bottom:1.3rem;display:flex}.home-hero h1{letter-spacing:-.5px;margin:0;font-size:2.5rem}.home-tagline{color:var(--ink-dim);margin:.2rem 0 0;font-size:1.1rem}.home-stats{flex-wrap:wrap;gap:.7rem;margin-bottom:1.8rem;display:flex}.stat-pill{background:var(--panel);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border:1px solid var(--line);border-radius:999px;align-items:center;gap:.45rem;padding:.5rem .95rem;font-size:.92rem;font-weight:700;display:inline-flex}.stat-pill svg{color:var(--accent)}.stat-pill.done svg{color:var(--good)}.tile-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.2rem;margin-bottom:2rem;display:grid}.tile{background:linear-gradient(160deg, var(--panel-2), var(--panel));-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;text-align:left;flex-direction:column;gap:.35rem;width:100%;min-height:158px;padding:1.6rem 1.3rem;display:flex}.tile-icon{width:52px;height:52px;color:var(--accent);background:#f0a86821;border-radius:15px;place-items:center;margin-bottom:.4rem;display:grid}.tile-title{font-size:1.2rem;font-weight:800}.tile-desc{color:var(--ink-dim);font-size:.9rem}@media (width<=680px){.rail{width:4.6rem}.logo-word,.nav-label,.rail-streak span{display:none}.nav-item{justify-content:center}.screen{padding:1.3rem}.home-hero h1{font-size:1.9rem}}@media (prefers-reduced-motion:reduce){.glow{animation:none}.focusable{transition:none}}