:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#111317;--panel:#1a1d23;--panel-2:#21252d;--text:#eef0f3;--muted:#a3abb5;--line:#3a3f48;--accent:#6aa7ff;--ok:#3ecf6e;--wrong:#ff5c5c;--hint:#ffa94d;--radius:10px}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:18px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.page{max-width:520px;margin:0 auto;padding:20px 16px 40px}h1{margin:.2em 0 .4em;font-size:1.6rem;line-height:1.25}h2{margin:1.4em 0 .6em;font-size:1.2rem}a{color:var(--accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.intro{color:var(--muted)}.btn{border-radius:var(--radius);min-height:44px;font:inherit;cursor:pointer;border:0;padding:10px 18px}.btn--primary{background:var(--accent);color:#0b1220;font-weight:600}.btn--link{color:var(--muted);background:0 0;padding:10px 0;text-decoration:underline}.connection{background:var(--panel);border-radius:var(--radius);margin:12px 0;padding:12px 14px}.connection p{margin:.3em 0}.connection__help{color:var(--muted);font-size:.9rem}.connection__choose{margin-top:8px;font-size:.9rem;display:block}select{font:inherit;background:var(--panel-2);min-height:44px;color:var(--text);border:1px solid var(--line);border-radius:8px;margin-left:6px;padding:6px}.dot{vertical-align:middle;border-radius:50%;width:12px;height:12px;display:inline-block}.dot--green{background:var(--ok)}.paused{border-left:4px solid var(--hint);background:#3a2a12;border-radius:8px;margin:12px 0;padding:10px 12px}.path{gap:10px;margin:0;padding:0;list-style:none;display:grid}.stage{border-radius:var(--radius);background:var(--panel);min-height:44px;color:inherit;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;display:flex}a.stage:hover{background:var(--panel-2)}.stage--done{border-left:4px solid var(--ok)}.stage--next{border-left:4px solid var(--accent);background:var(--panel-2)}.stage--locked{opacity:.55}.stage__icon{font-size:1.3rem}.stage__text{flex-direction:column;display:flex}.stage__text span{color:var(--muted);font-size:.92rem}.stage-header{flex-direction:column;display:flex}.back{min-height:44px;color:var(--muted);align-items:center;text-decoration:none;display:inline-flex}.drill{text-align:center;flex-direction:column;align-items:center;display:flex}.chord-name{margin:.2em 0;font-size:2.2rem;font-weight:700}.box-slot{width:100%;max-width:320px}.next-chord,.counter,.timing{color:var(--muted);margin:.3em 0}.hints-toggle{min-height:44px;color:var(--muted);align-items:center;gap:6px;font-size:.9rem;display:inline-flex}.hints-toggle input{width:20px;height:20px}.tip{width:100%;min-height:3em}.tip__line{text-align:left;border-radius:8px;margin:.4em 0;padding:10px 12px}.tip--error{border-left:4px solid var(--wrong);background:#3a1c1c}.tip--hint{border-left:4px solid var(--hint);background:#3a2a12}.tip--success{border-left:4px solid var(--ok);background:#173222}.card__buttons{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.btn--secondary{background:var(--panel);color:var(--text);border:1px solid var(--line)}.chordbox{width:100%;height:auto;display:block}.chordbox--compact{max-width:180px;margin:0 auto}.chordbox__nut{fill:#dfe3e8}.chordbox__fret{stroke:#5b616b;stroke-width:2px}.string{stroke:#9aa0a6;stroke-width:3px}.string--ok{stroke:var(--ok)}.string--wrong{stroke:var(--wrong)}.string--muted-played{stroke:var(--hint)}.chordbox__open{fill:none;stroke:#cfd4da;stroke-width:2.5px}.chordbox__mute{fill:#cfd4da;font-size:16px}.target circle{fill:var(--accent)}.target text{fill:#0b1220;font-size:15px;font-weight:700}.target--pending circle{fill:none;stroke:#fff;stroke-width:3px;stroke-dasharray:5 4}.target--pending text{fill:#fff}.actual{fill:var(--wrong)}.chordbox__symbol{font-size:18px;font-weight:700}.symbol--ok{fill:var(--ok)}.symbol--wrong{fill:var(--wrong)}.symbol--muted-played{fill:var(--hint)}.chordbox__hint{fill:var(--muted);font-size:13px}.footer{color:var(--muted);text-align:center;margin-top:40px;font-size:.85rem}.footer a{color:var(--muted)}@media (width<=380px){body{font-size:16px}.chord-name{font-size:1.8rem}}.box-slot--small{max-width:170px}.pattern-title{margin:.6em 0 0;font-size:1.5rem;font-weight:700}.pattern-feel{color:var(--muted);margin:0 0 .6em}.steps{justify-content:center;gap:12px;margin:6px 0;display:flex}.step{border:2px solid var(--line);border-radius:8px;min-width:52px;padding:6px 8px;font-size:1.6rem;font-weight:700}.step--ok{border-color:var(--ok);color:var(--ok)}.step--wrong{border-color:var(--wrong);color:var(--wrong)}.step--pending{color:var(--muted)}.detected{margin:.4em 0 .2em}.chips{flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 .4em;display:flex}.chip{background:var(--panel-2);border-radius:999px;padding:2px 10px;font-size:.85rem}.pattern-list{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px;font-size:.9rem;display:flex}.btn--chip{background:var(--panel);color:var(--text);border:1px solid var(--line)}.btn--chip.is-current{border-color:var(--accent)}.chord-intro{text-align:center;font-size:1.4rem;font-weight:700}.song{flex-direction:column;align-items:center;display:flex}.chord-name--small{font-size:1.6rem}.lyrics{width:100%;margin-top:10px}.lyrics__part{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:1em 0 .3em;font-size:.95rem}.lyrics__line{margin:.3em 0;line-height:1.4}.seg{vertical-align:bottom;border-radius:6px;flex-direction:column;padding:0 2px;display:inline-flex}.seg__chord{color:var(--accent);white-space:nowrap;font-size:.8rem;font-weight:700}.seg--current{background:var(--panel-2);outline:2px solid var(--accent)}.dialog-backdrop{z-index:10;background:#0009;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog{background:var(--panel-2);text-align:center;border-radius:14px;width:100%;max-width:420px;padding:22px 18px;box-shadow:0 10px 40px #00000080}.dialog__title{margin:0 0 6px;font-size:1.4rem;font-weight:700}.dialog__note{color:var(--muted);margin:0 0 16px}.next-bar{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px;display:flex}.legal p{color:var(--text)}.legal__date{color:var(--muted);font-size:.9rem}.btn--inline{min-height:0;margin-left:6px;padding:4px 6px;font-size:.9rem}.preview{flex-direction:column;align-items:center;margin:4px 0 8px;display:flex}.preview__how{color:var(--muted);text-align:left;margin-top:4px;font-size:.85rem}.preview__how summary{cursor:pointer;text-align:center}