:root{--bg: #14110f;--bg-elev: #1d1917;--bg-elev-2: #262120;--bg-inset: #100d0c;--line: #332c29;--line-soft: #272120;--fg: #f2ece6;--fg-muted: #b3a79d;--fg-dim: #7d7169;--accent: #e8a33d;--accent-soft: #3a2a12;--accent-fg: #221704;--ok: #5fc98a;--ok-soft: #14301f;--warn: #e9b949;--err: #ef6d63;--err-soft: #351a17;--info: #6fb3e8;--lv1: #5fc98a;--lv2: #6fb3e8;--lv3: #b98ce8;--lv4: #e8a33d;--r-sm: 8px;--r-md: 12px;--r-lg: 18px;--r-xl: 26px;--pad: 16px;--maxw: 1100px;--shadow: 0 6px 24px rgba(0,0,0,.4);--shadow-sm: 0 2px 8px rgba(0,0,0,.3);--font: "Noto Sans Thai", system-ui, -apple-system, sans-serif;--font-display: "Outfit", "Noto Sans Thai", system-ui, sans-serif;--mono: ui-monospace, "Cascadia Mono", "Consolas", monospace}:root[data-theme=light]{--bg: #faf6f1;--bg-elev: #ffffff;--bg-elev-2: #f2ece5;--bg-inset: #ece5dc;--line: #ded3c7;--line-soft: #eae1d7;--fg: #241d18;--fg-muted: #6b5d52;--fg-dim: #92847a;--accent: #b9761a;--accent-soft: #fbeed6;--accent-fg: #ffffff;--ok: #1f8b52;--ok-soft: #dff3e6;--err: #c73f34;--err-soft: #fae2df;--lv1: #1f8b52;--lv2: #2a6fa8;--lv3: #7b4fb5;--lv4: #b9761a;--shadow: 0 6px 24px rgba(80,60,40,.12);--shadow-sm: 0 2px 8px rgba(80,60,40,.1)}:root{--hs-wood-a: #3a2616;--hs-wood-b: #5a3a20;--hs-edge: #1f140b;--hs-neck: #2a1b10;--hs-fret: #8c8a86;--hs-nut: #efe6d6;--hs-metal: #b9b4ab;--hs-string: #d8d2c8}:root[data-theme=light]{--hs-wood-a: #8a5a32;--hs-wood-b: #b07a48;--hs-edge: #5b3a1e;--hs-neck: #6e4524;--hs-fret: #c9c6c0;--hs-nut: #fffaf0;--hs-metal: #9b968d;--hs-string: #f4efe6}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}h1,h2,h3,h4{line-height:1.35;margin:0 0 .5em;font-weight:600}h1{font-size:1.6rem;letter-spacing:-.01em}h2{font-size:1.25rem}h3{font-size:1.05rem}p{margin:0 0 .9em}a{color:var(--accent);text-decoration:none}b,strong{font-weight:600;color:var(--fg)}code{font-family:var(--mono);font-size:.9em;background:var(--bg-inset);padding:.12em .4em;border-radius:5px;color:var(--accent)}button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.app{min-height:100%;display:grid;grid-template-columns:230px 1fr}.app__main{min-width:0;padding:28px var(--pad) 80px}.wrap{max-width:var(--maxw);margin:0 auto}.side{position:sticky;top:0;align-self:start;height:100dvh;overflow-y:auto;background:var(--bg-elev);border-right:1px solid var(--line-soft);padding:20px 12px;display:flex;flex-direction:column;gap:4px}.side__brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}.side__brand span{color:var(--accent)}.side__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-dim);padding:16px 12px 6px;font-weight:600}.navlink{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);color:var(--fg-muted);font-weight:500;font-size:.93rem;transition:background .13s,color .13s}.navlink:hover{background:var(--bg-elev-2);color:var(--fg)}.navlink[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:600}.navlink svg{flex:none}.tabbar{display:none}@media(max-width:860px){.app{grid-template-columns:1fr}.side{display:none}.app__main{padding:14px var(--pad) calc(78px + env(safe-area-inset-bottom))}.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:color-mix(in srgb,var(--bg-elev) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line-soft);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;font-size:.68rem;color:var(--fg-dim);font-weight:500;border-radius:var(--r-sm)}.tabbar a[aria-current=page]{color:var(--accent)}.topbar{display:flex!important}}.topbar{display:none;align-items:center;justify-content:space-between;margin:-14px calc(var(--pad) * -1) 14px;padding:10px var(--pad);border-bottom:1px solid var(--line-soft);background:var(--bg-elev);position:sticky;top:0;z-index:40;font-family:var(--font-display);font-weight:700}.topbar span{color:var(--accent)}.card{background:var(--bg-elev);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:18px}.card--inset{background:var(--bg-inset)}.grid{display:grid;gap:14px}.grid>*{min-width:0}.grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.grid--3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.row--between{justify-content:space-between}.spacer{flex:1}.muted{color:var(--fg-muted)}.dim{color:var(--fg-dim)}.small{font-size:.85rem}.tiny{font-size:.76rem}.center{text-align:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-elev-2);color:var(--fg);font-weight:500;transition:.13s;white-space:nowrap}.btn:hover{border-color:var(--fg-dim)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}.btn--primary:hover{filter:brightness(1.08);border-color:var(--accent)}.btn--ghost{background:transparent;border-color:transparent;color:var(--fg-muted)}.btn--ghost:hover{background:var(--bg-elev-2);color:var(--fg)}.btn--sm{padding:6px 11px;font-size:.86rem;border-radius:var(--r-sm)}.btn--lg{padding:13px 24px;font-size:1.02rem;border-radius:var(--r-lg)}.btn--block{width:100%}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.8rem;font-weight:500;background:var(--bg-elev-2);border:1px solid var(--line-soft);color:var(--fg-muted)}.chip--on{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:600}.chip--ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}.pillbar{display:flex;gap:6px;flex-wrap:wrap}.pill{padding:6px 13px;border-radius:999px;font-size:.86rem;font-weight:500;background:var(--bg-elev-2);border:1px solid var(--line-soft);color:var(--fg-muted);transition:.13s}.pill:hover{color:var(--fg)}.pill--on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}.bar{height:7px;border-radius:99px;background:var(--bg-inset);overflow:hidden}.bar>i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .35s ease}.page-head{margin-bottom:20px}.page-head h1{margin-bottom:4px}.page-head p{color:var(--fg-muted);margin:0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}input[type=range]{accent-color:var(--accent);width:100%}select,input[type=text],input[type=number],input[type=search],input[type=time]{font-family:inherit;font-size:.93rem;padding:8px 11px;background:var(--bg-inset);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-sm)}.lesson-note{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r-md) var(--r-md) 0;padding:13px 16px;margin:18px 0}.lesson-note--warn{border-left-color:var(--err);background:var(--err-soft)}.lesson-note__title{font-weight:600;font-size:.88rem;margin-bottom:4px;color:var(--accent);letter-spacing:.01em}.lesson-note--warn .lesson-note__title{color:var(--err)}.lesson-note p:last-child{margin-bottom:0}.lesson-table{border-collapse:collapse;width:100%;font-size:.9rem}.lesson-table th,.lesson-table td{text-align:left;padding:8px 13px;border-bottom:1px solid var(--line-soft)}.lesson-table th{font-weight:600;font-size:.82rem;color:var(--fg-muted);background:var(--bg-inset);white-space:nowrap}.lesson-table tr:last-child td{border-bottom:0}.lesson-table td:first-child{font-weight:500}.lesson-body{max-width:720px}.lesson-body>p,.lesson-body>div>p{color:var(--fg-muted)}.lesson-body strong{color:var(--fg)}.lesson-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--line-soft);background:var(--bg-elev);transition:.13s;color:var(--fg);width:100%;text-align:left}.lesson-row:hover{border-color:var(--fg-dim)}.lesson-row--done{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}.lesson-row--locked{opacity:.5;cursor:not-allowed}.lesson-row__num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:var(--bg-inset);color:var(--fg-dim)}.lesson-row--done .lesson-row__num{background:var(--ok);color:var(--bg)}.level-card{border-radius:var(--r-lg);padding:20px;border:1px solid var(--line-soft);background:var(--bg-elev);border-top:3px solid var(--level-color, var(--accent))}.level-card__badge{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--level-color, var(--accent))}.quiz-choice{display:block;width:100%;text-align:left;padding:11px 15px;margin-bottom:8px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-elev-2);color:var(--fg);transition:.13s}.quiz-choice:hover:not(:disabled){border-color:var(--accent)}.quiz-choice--right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok);font-weight:600}.quiz-choice--wrong{border-color:var(--err);background:var(--err-soft);color:var(--err)}.quiz-choice:disabled{cursor:default}.song-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}@media(min-width:620px){.song-bars{grid-template-columns:repeat(8,1fr)}}.song-bar{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 4px;border-radius:var(--r-sm);background:var(--bg-inset);border:1px solid var(--line-soft);font-weight:600;font-size:.95rem}@keyframes string-ring{0%,to{transform:translate(0)}25%{transform:translate(-1.6px)}75%{transform:translate(1.6px)}}.string-ring{animation:string-ring 70ms linear infinite}@keyframes peg-pulse{0%,to{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 7px var(--accent))}}.peg-pulse{animation:peg-pulse 1.4s ease-in-out infinite}.peg:focus-visible{outline:none}.peg:focus-visible circle:nth-child(2){stroke:var(--fg);stroke-width:3}.tune-meter{position:relative;height:74px;margin:6px 0 4px}.tune-meter__track{position:absolute;left:0;right:0;top:36px;height:2px;background:var(--line)}.tune-meter__zone{position:absolute;top:18px;height:38px;left:45%;width:10%;background:var(--ok-soft);border:1.5px solid color-mix(in srgb,var(--ok) 60%,transparent);border-radius:10px}.tune-meter__tick{position:absolute;top:30px;width:1.5px;height:14px;background:var(--line)}.tune-meter__tick--major{top:26px;height:22px;background:var(--fg-dim)}.tune-meter__bubble{position:absolute;top:9px;width:56px;height:56px;margin-left:-28px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.45rem;color:var(--accent-fg);box-shadow:var(--shadow-sm);transition:left .12s ease-out,background-color .2s}.tune-meter__label{position:absolute;top:58px;font-size:.72rem;color:var(--fg-dim);font-weight:600}@media(prefers-reduced-motion:reduce){.string-ring,.peg-pulse{animation:none}.tune-meter__bubble{transition:none}}.headstock{max-width:340px}@media(max-width:860px){.tuner-head p{display:none}.tuner-head{margin-bottom:10px}.headstock{max-width:280px}}.path-card{border-top:3px solid var(--path-color);display:flex;flex-direction:column}.path-card>.row:last-child{margin-top:auto}.path-card__name{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--path-color)}.roadmap{position:relative;display:grid;gap:7px}.roadmap .lesson-row{position:relative}.roadmap .lesson-row--next{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.roadmap .lesson-row--next .lesson-row__num{background:var(--accent);color:var(--accent-fg)}.level-dot{flex:none;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:99px;color:var(--dot-color);border:1px solid color-mix(in srgb,var(--dot-color) 50%,transparent)}.path-switcher{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px}.path-option{display:flex;flex-direction:column;gap:5px;text-align:left;padding:10px 12px;border-radius:var(--r-md);background:var(--bg-elev-2);border:1px solid var(--line-soft);border-left:3px solid var(--path-color);color:var(--fg);transition:.13s}.path-option:hover{border-color:var(--fg-dim);border-left-color:var(--path-color)}.path-option--on{background:color-mix(in srgb,var(--path-color) 14%,var(--bg-elev));border-color:var(--path-color)}.path-option__name{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:4px}.path-option__bar{height:4px;border-radius:99px;background:var(--bg-inset);overflow:hidden}.path-option__bar>i{display:block;height:100%;background:var(--path-color)}.rec-button{width:84px;height:84px;border-radius:50%;border:3px solid var(--line);background:var(--bg-elev-2);display:inline-grid;place-items:center;transition:.15s}.rec-button span{width:46px;height:46px;border-radius:50%;background:var(--err);transition:.15s}.rec-button:hover span{transform:scale(1.06)}.rec-button:disabled{opacity:.5}@keyframes rec-blink{50%{opacity:.25}}.rec-dot{width:14px;height:14px;border-radius:50%;background:var(--err);margin:0 auto 6px;animation:rec-blink 1s steps(1) infinite}@media(prefers-reduced-motion:reduce){.rec-dot{animation:none}}.stepbar{margin:0 0 22px;padding:4px 0 12px;border-bottom:1px solid var(--line-soft)}.stepbar__dots{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.stepbar__dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:var(--bg-inset);color:var(--fg-dim);border:1.5px solid transparent;cursor:pointer}.stepbar__dot--done{background:color-mix(in srgb,var(--ok) 22%,var(--bg-inset));color:var(--ok)}.stepbar__dot--on{border-color:var(--accent);color:var(--fg);background:var(--bg-elev)}.reminder-banner{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:16px;border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 14%,var(--bg-elev));border:1px solid var(--accent);color:var(--fg);font-size:.92rem}.reminder-banner--quiet{background:var(--bg-elev);border-color:var(--line-soft);color:var(--fg-muted)}.reminder-banner--quiet:hover{border-color:var(--fg-dim);color:var(--fg)}.reminder-cal{padding:12px 14px;border-radius:var(--r-md);background:var(--bg-inset)}input[type=time]{color-scheme:dark}:root[data-theme=light] input[type=time]{color-scheme:light}#reminder{scroll-margin-top:72px}.folk-notation{margin:16px 0;padding:14px;border-radius:var(--r-md);background:var(--bg-inset);border:1px solid var(--line-soft)}.folk-notation__line{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.folk-notation__bar{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg-elev)}.folk-notation__slot{width:26px;height:30px;display:grid;place-items:center;font-size:.95rem;font-weight:600;color:var(--fg)}.folk-notation__slot--rest{color:var(--fg-dim);font-weight:400}.folk-notation__slot--strong{background:color-mix(in srgb,var(--accent) 20%,transparent)}