:root{--bg:#faf7f4;--panel:#fff;--panel-2:#f3ede7;--text:#2a2320;--text-muted:#7a6f66;--border:#e7ded5;--accent:#e4572e;--accent-soft:#e4572e1f;--gold:#d99a12;--gold-soft:#d99a1229;--basic:#2e8b6f;--advanced:#b5562b;--shadow:#28190f1a 0 8px 22px -8px, #28190f0f 0 3px 8px -4px;--sans:system-ui, "Segoe UI", Roboto, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;--mono:ui-monospace, "Cascadia Code", Consolas, monospace;font:17px/1.5 var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#17130f;--panel:#221c17;--panel-2:#2b231d;--text:#ece4db;--text-muted:#a99c8e;--border:#362c24;--accent:#f2734a;--accent-soft:#f2734a29;--gold:#e7b23e;--gold-soft:#e7b23e2e;--basic:#46b892;--advanced:#e0864f;--shadow:#0006 0 8px 22px -8px, #0000004d 0 3px 8px -4px}}*{box-sizing:border-box}html,body{min-height:100%;margin:0;padding:0}body{background:var(--bg)}#root{min-height:100vh}h1,h2,h3{margin:0;line-height:1.2}button{cursor:pointer;font-family:inherit}a{color:var(--accent)}code{font-family:var(--mono);font-size:.85em}.app{max-width:940px;margin:0 auto;padding:0 16px 64px}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:20px 4px 12px;display:flex}.header h1{letter-spacing:-.02em;font-size:clamp(1.35rem,4vw,1.9rem)}.lang-toggle{border:1px solid var(--border);background:var(--panel);border-radius:999px;display:inline-flex;overflow:hidden}.lang-btn{color:var(--text-muted);background:0 0;border:0;padding:6px 12px;font-size:.82rem;font-weight:600}.lang-btn.active{background:var(--accent);color:#fff}.tabs{z-index:5;background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:6px;padding:10px 0;display:flex;position:sticky;top:0}.tab{border:1px solid var(--border);background:var(--panel);color:var(--text-muted);border-radius:999px;padding:7px 14px;font-size:.9rem;font-weight:600;transition:all .12s}.tab:hover{color:var(--text)}.tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.main{padding-top:20px}.footer{border-top:1px solid var(--border);color:var(--text-muted);flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:16px;font-size:.82rem;display:flex}.app-status{text-align:center;padding-top:80px}.app-status h1{font-size:3rem}.app-status__message{font-weight:600}.app-status__detail{color:var(--text-muted);font-family:var(--mono);font-size:.8rem}.section{margin-bottom:28px}.section__heading{letter-spacing:-.01em;margin-bottom:8px;font-size:1.3rem}.section__lead{color:var(--text-muted);max-width:62ch;margin:0 0 18px}.bi-kr{color:var(--text-muted);margin-top:4px;font-size:.92em;display:block}.groove{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;padding:16px}.groove__header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.groove__title h3{font-size:1.12rem}.groove__title-kr{color:var(--text-muted);font-size:.85rem;display:block}.groove__meta{align-items:center;gap:8px;display:flex}.badge{white-space:nowrap;border-radius:999px;padding:3px 8px;font-size:.72rem;font-weight:700}.tier-basic{background:color-mix(in srgb, var(--basic) 18%, transparent);color:var(--basic)}.tier-advanced{background:color-mix(in srgb, var(--advanced) 20%, transparent);color:var(--advanced)}.badge--bpm{background:var(--panel-2);color:var(--text-muted);font-family:var(--mono)}.play-btn{background:var(--accent);color:#fff;border:0;border-radius:50%;place-items:center;width:40px;height:40px;font-size:1rem;transition:transform .1s;display:grid}.play-btn:hover{transform:scale(1.06)}.play-btn.is-playing{background:var(--gold)}.tempo{align-items:center;gap:8px;margin-bottom:14px;display:flex}.tempo__btn{border:1px solid var(--border);background:var(--panel-2);width:28px;height:28px;color:var(--text);border-radius:8px;place-items:center;font-size:1.15rem;line-height:1;display:grid}.tempo__btn:hover{border-color:var(--accent)}.tempo__slider{max-width:240px;accent-color:var(--accent);flex:1}.tempo__val{font-family:var(--mono);min-width:62px;font-size:.92rem;font-weight:700}.tempo__val small{color:var(--text-muted);margin-left:3px;font-size:.6rem;font-weight:600}.tempo__reset{color:var(--accent);background:0 0;border:0;font-size:.72rem;text-decoration:underline}.opts{flex-wrap:wrap;gap:16px;margin-bottom:14px;display:flex}.opt{color:var(--text-muted);cursor:pointer;align-items:center;gap:6px;font-size:.84rem;display:inline-flex}.opt input{accent-color:var(--accent)}.opt__hint{opacity:.75;font-size:.72rem}.groove__scroll{padding-bottom:4px;overflow-x:auto}.grid__label--mutable{outline:1px dashed var(--border)}.grid__label.is-muted{opacity:.4;text-decoration:line-through}.grid__row--muted .cell .hit{opacity:.18}.legend{color:var(--text-muted);flex-wrap:wrap;gap:14px;margin-top:10px;font-size:.72rem;display:flex}.legend__item{align-items:center;gap:5px;display:inline-flex}.legend__dot{background:var(--accent);border-radius:50%;width:12px;height:12px;display:inline-block}.legend__dot--accent{box-shadow:0 0 0 3px var(--accent-soft);transform:scale(1.15)}.legend__dot--ghost{background:var(--text-muted);opacity:.55;width:7px;height:7px}.legend__dot--cym{border:2px solid var(--gold);background:0 0}.arrmap{border-top:1px solid var(--border);margin-top:18px;padding-top:14px}.arrmap__title{margin-bottom:12px;font-size:.9rem}.arrmap__sub{color:var(--text-muted);font-size:.82rem;font-weight:400}.arrmap__arc{align-items:flex-end;gap:5px;height:84px;margin-bottom:14px;display:flex}.arrmap__col{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;min-width:0;height:100%;display:flex}.arrmap__bar{background:var(--accent);border-radius:5px 5px 0 0;width:68%;min-height:6px}.arrmap__lbl{color:var(--text-muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:100%;margin-top:5px;font-size:.62rem;line-height:1.15;overflow:hidden}.arrmap__notes{gap:7px;margin:0;padding:0;list-style:none;display:grid}.arrmap__note{font-size:.86rem}.arrmap__note-head{align-items:baseline;gap:8px;margin-right:6px;display:inline-flex}.arrmap__note-lbl{color:var(--accent);font-weight:700}.arrmap__dots{letter-spacing:1px;color:var(--accent);font-size:.58rem}.arrmap__dots-off{color:var(--border)}.arrmap__note-txt{color:var(--text-muted)}.grid{grid-template-columns:3.4rem repeat(var(--steps), minmax(20px, 1fr));gap:4px;min-width:320px;display:grid}.grid__row{display:contents}.grid__label{background:var(--panel-2);color:var(--text);font-size:.72rem;font-weight:700;font-family:var(--mono);border:0;border-radius:6px;place-items:center;min-height:30px;display:grid}.grid__label:hover{background:var(--accent-soft)}.grid__label--count{background:0 0}.cell{background:var(--panel-2);border-radius:6px;place-items:center;min-height:30px;display:grid;position:relative}.cell--beat:before{content:"";background:var(--gold-soft);border-radius:2px;width:2px;position:absolute;top:3px;bottom:3px;left:-3px}.cell--now{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.hit{background:var(--accent);border-radius:50%;width:58%;height:58%}.hit--cym{border:2.5px solid var(--gold);background:0 0;width:62%;height:62%}.hit--accent{box-shadow:0 0 0 3px var(--accent-soft);transform:scale(1.14)}.hit--ghost{background:var(--text-muted);opacity:.55;width:34%;height:34%}.count-cell{text-align:center;font-family:var(--mono);color:var(--text-muted);padding-top:2px;font-size:.72rem;position:relative}.count-cell--beat{color:var(--text);font-weight:700}.count-cell--now{color:var(--accent)}.groove__sticking{font-family:var(--mono);letter-spacing:.12em;margin:14px 0 4px;font-size:.85rem}.groove__sticking-label,.groove__howto-label{font-family:var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-right:6px;font-size:.66rem;font-weight:700;display:inline-block}.groove__desc{margin:12px 0 0}.groove__desc--kr{color:var(--text-muted);margin-top:4px;font-size:.92em}.groove__howto{color:var(--text-muted);margin:10px 0 0;font-size:.92rem}.chip-group{margin-bottom:10px}.chip-group__label{text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-size:.68rem;font-weight:700;display:inline-block}.chip-group__label--basic{color:var(--basic)}.chip-group__label--advanced{color:var(--advanced)}.chips{flex-wrap:wrap;gap:7px;margin-bottom:16px;display:flex}.chip{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:999px;padding:6px 13px;font-size:.86rem;font-weight:500;transition:all .1s}.chip:hover{border-color:var(--accent)}.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.chip--done{border-color:var(--basic)}.chip__check{color:var(--basic);margin-right:3px;font-weight:800}.chip.active .chip__check{color:#fff}.progress{align-items:center;gap:10px;margin-bottom:16px;display:flex}.progress__track{background:var(--panel-2);border-radius:999px;flex:1;max-width:260px;height:8px;overflow:hidden}.progress__fill{background:var(--basic);border-radius:999px;height:100%;transition:width .2s}.progress__label{color:var(--text-muted);white-space:nowrap;font-size:.76rem;font-weight:600}.gotit-row{margin-top:10px}.gotit{border:1px solid var(--border);background:var(--panel);color:var(--text-muted);border-radius:999px;padding:5px 13px;font-size:.8rem;font-weight:600}.gotit:hover{border-color:var(--basic)}.gotit--done{background:color-mix(in srgb, var(--basic) 16%, transparent);border-color:var(--basic);color:var(--basic)}.metronome{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;margin-bottom:20px;padding:16px}.metronome__top{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.metronome__title{font-size:1.05rem}.metronome__beats{gap:10px;margin-bottom:14px;display:flex}.beat-dot{background:var(--panel-2);border:2px solid var(--border);border-radius:50%;width:26px;height:26px;transition:transform 50ms,background 50ms}.beat-dot--one{border-color:var(--gold)}.beat-dot.is-on{background:var(--accent);border-color:var(--accent);transform:scale(1.18)}.beat-dot--one.is-on{background:var(--gold);border-color:var(--gold)}.metronome__bars{align-items:center;gap:8px;margin-top:12px;display:flex}.metronome__bars-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:.72rem;font-weight:700}.lesson-nav{flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:0;list-style:none;display:flex}.lesson-nav__btn{border:1px solid var(--border);background:var(--panel);color:var(--text-muted);border-radius:8px;align-items:center;gap:7px;padding:6px 11px 6px 8px;font-size:.82rem;display:inline-flex}.lesson-nav__btn.active{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}.lesson-nav__num{background:var(--panel-2);width:20px;height:20px;color:var(--accent);border-radius:50%;place-items:center;font-size:.72rem;font-weight:700;display:grid}.lesson-nav__btn.active .lesson-nav__num{background:var(--accent);color:#fff}.lesson{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;padding:22px}.lesson__title{letter-spacing:-.02em;margin-bottom:14px;font-size:1.5rem}.lesson__title-kr{color:var(--text-muted);font-size:.95rem;font-weight:500;display:block}.lesson__para{max-width:64ch;margin:0 0 12px}.lesson__para--kr{color:var(--text-muted);font-size:.95em}.lesson__points{background:var(--panel-2);border-radius:10px;margin-top:18px;padding:14px 16px}.lesson__points-heading{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:8px;font-size:.72rem}.lesson__points ul{margin:0;padding-left:20px}.lesson__points li{margin-bottom:5px}.lesson__point--kr{color:var(--text-muted);font-size:.92em}.lesson__demo{margin-top:22px}.lesson__demo-heading{color:var(--text-muted);margin-bottom:10px;font-size:.9rem}.diagram{background:var(--panel-2);border-radius:12px;margin:4px 0 18px;padding:10px}.diagram__svg{width:100%;max-width:420px;height:auto;margin:0 auto;display:block}.dg-drum{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2px}.dg-cym{fill:var(--gold-soft);stroke:var(--gold);stroke-width:2px}.dg-throne{fill:var(--text-muted);opacity:.35}.dg-lbl{fill:var(--text);font-size:11px;font-family:var(--sans);font-weight:600}.dg-lbl--beat{fill:var(--accent);font-weight:800}.dg-note{fill:var(--text-muted);font-size:10px;font-family:var(--sans)}.dg-tip{fill:var(--accent)}.dg-stick{stroke:var(--text);stroke-width:6px;stroke-linecap:round}.dg-stick--strike{stroke:var(--accent)}.dg-accent-ring{fill:none;stroke:var(--accent);stroke-width:2.5px;stroke-dasharray:4 3}.dg-finger,.dg-arrow{fill:none;stroke:var(--gold);stroke-width:3px;stroke-linecap:round}.dg-arrowhead{fill:var(--gold)}.dg-surface{stroke:var(--border);stroke-width:3px;stroke-linecap:round}.dg-tick{stroke:var(--text-muted);stroke-width:2px}.dg-tick--beat{stroke:var(--accent);stroke-width:3px}.rudiment-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;display:grid}.rudiment-card{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:16px}.rudiment-card__head{margin-bottom:10px}.rudiment-card__head h3{font-size:1.05rem}.rudiment-card__kr{color:var(--text-muted);font-size:.82rem}.sticking-row{flex-wrap:wrap;gap:4px;margin-bottom:8px;display:flex}.stick-chip{width:24px;height:24px;font-family:var(--mono);border-radius:6px;place-items:center;font-size:.78rem;font-weight:700;display:grid}.stick-chip--r{background:var(--accent-soft);color:var(--accent)}.stick-chip--l{background:var(--gold-soft);color:var(--gold)}.stick-chip--soft{opacity:.5}.rudiment-card__notation{font-family:var(--mono);letter-spacing:.16em;color:var(--text-muted);margin-bottom:10px;font-size:.8rem;display:block}.rudiment-card__desc{margin:0 0 8px;font-size:.94rem}.rudiment-card__desc--kr{color:var(--text-muted);font-size:.88rem}.rudiment-card__app{color:var(--text-muted);margin:0;font-size:.88rem}.rudiment-card__app-label{text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-right:5px;font-size:.64rem;font-weight:700}.study-guide__quiz{gap:8px;margin-bottom:28px;display:grid}.quiz-item{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:4px 14px}.quiz-item summary{cursor:pointer;padding:10px 0;font-weight:500;list-style:none}.quiz-item summary::-webkit-details-marker{display:none}.quiz-item__num{color:var(--accent);margin-right:4px;font-weight:800}.quiz-item[open] summary{border-bottom:1px solid var(--border)}.quiz-item__answer{color:var(--text);margin:0;padding:10px 0 4px}.quiz-item__answer--q-kr{color:var(--text-muted);padding-bottom:0;font-size:.9em;font-weight:600}.quiz-item__answer--kr{color:var(--text-muted);font-size:.92em}.study-guide__heading{margin-bottom:12px;font-size:1.1rem}.glossary{margin:0}.glossary__entry{border-bottom:1px solid var(--border);padding:10px 0}.glossary__entry dt{color:var(--accent);font-weight:700}.glossary__term-kr{color:var(--text-muted);font-weight:500}.glossary__entry dd{margin:4px 0 0}.glossary__def-kr{color:var(--text-muted);margin-top:2px;font-size:.92em;display:block}.drill-list{gap:10px;display:grid}.drill{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:14px 16px}.drill__head{text-align:left;background:0 0;border:0;align-items:center;gap:12px;width:100%;padding:0;display:flex}.drill__head-main{flex:1}.drill__focus{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-size:.64rem;font-weight:700;display:block}.drill__title{color:var(--text);font-size:1.05rem}.drill__reps{font-family:var(--mono);color:var(--text);white-space:nowrap;flex-direction:column;align-items:flex-end;font-size:.8rem;font-weight:700;display:flex}.drill__bpm{color:var(--gold);font-size:.66rem}.drill__chev{color:var(--text-muted);transition:transform .15s}.drill__chev.open{transform:rotate(180deg)}.drill__goal{color:var(--text-muted);margin:10px 0 0;font-size:.92rem}.drill__goal-label{text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-right:5px;font-size:.62rem;font-weight:700}.drill__body{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}.drill__steps{margin:0;padding-left:20px}.drill__steps li{margin-bottom:6px}.drill__demo{margin-top:14px}.drill__demo-hint{color:var(--text-muted);margin:0 0 8px;font-size:.82rem}@media (width<=640px){.lesson{padding:16px}.grid{grid-template-columns:2.8rem repeat(var(--steps), minmax(16px, 1fr));gap:3px}}