:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f5eee1;--bg-deep:#ede0cd;--surface:#fffaf2;--surface-2:#fbf3e6;--surface-3:#f3e8d7;--ink:#2d231b;--ink-soft:#43352a;--muted:#6b5948;--muted-2:#75614d;--border:#e4d4bd;--border-strong:#cfb99b;--accent:#9a4a22;--accent-deep:#7c3413;--accent-soft:#f5e1d0;--accent-line:#d9a57e;--on-accent:#fffaf3;--olive:#5f6b45;--olive-soft:#e9ecdc;--olive-deep:#485233;--compound:#486657;--compound-soft:#e2ece5;--warning:#83540c;--warning-soft:#f8ecd1;--danger:#9d2f24;--danger-deep:#7f2119;--danger-soft:#f8e5e1;--success:#346848;--success-deep:#285439;--success-soft:#e3efe6;--focus:#1e6c86;--shadow-sm:0 1px 2px #3d2b1b0f, 0 6px 18px #3d2b1b0d;--shadow-md:0 2px 4px #3d2b1b0f, 0 18px 40px #3d2b1b1a;--shadow-lg:0 24px 70px #2a1c113d;--radius-sm:10px;--radius:16px;--radius-lg:24px;--radius-pill:999px;--max-width:1180px;--header-height:74px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:Segoe UI Variable,Segoe UI,Tahoma,Noto Sans Thai,Leelawadee UI,sans-serif;font-size:16px;line-height:1.6}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 10% -5%, #d1a06933, transparent 38%), radial-gradient(circle at 92% 4%, #7a865624, transparent 34%), linear-gradient(180deg, #f8f1e5 0%, var(--bg) 34%, #f3ebdd 100%);min-width:320px;min-height:100vh;color:var(--ink);background-attachment:fixed;margin:0}h1,h2,h3,h4,p,figure,ol,ul,dl,dd{margin:0}ol,ul{padding:0;list-style:none}img{max-width:100%;display:block}a{color:var(--accent-deep);text-underline-offset:3px;text-decoration-thickness:1.5px}a:hover{color:var(--accent)}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}::selection{background:var(--accent-soft);color:var(--accent-deep)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:100;border-radius:var(--radius-pill);background:var(--ink);color:#fff;padding:10px 16px;transition:transform .16s;position:fixed;top:10px;left:10px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.app-shell{flex-direction:column;min-height:100vh;display:flex}.site-header{z-index:40;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#faf4eae0;border-bottom:1px solid #cfb99b8c;position:sticky;top:0}.header-inner{width:min(var(--max-width), 100% - 40px);min-height:var(--header-height);align-items:center;gap:28px;margin:0 auto;display:flex}.brand{color:var(--ink);flex:none;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.brand:hover{color:var(--ink)}.brand-mark{background:radial-gradient(circle at 32% 24%,#a85a2c,#7e3d1c 60%,#5f2c12 100%);border-radius:50%;flex:none;width:42px;height:42px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff2e,0 4px 12px #5028123d}.brand-string{background:#fff4e2a6;width:1px;position:absolute;top:-4px;bottom:-4px}.brand-string--one{left:14px}.brand-string--two{left:21px}.brand-string--three{left:28px}.brand-copy{flex-direction:column;line-height:1.15;display:flex}.brand-name{letter-spacing:.01em;font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Georgia,serif;font-size:1.08rem;font-weight:700}.brand-sub{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-top:2px;font-size:.7rem}.desktop-nav{align-items:center;gap:4px;margin-left:auto;display:flex}.nav-link{border-radius:var(--radius-pill);min-height:42px;color:var(--muted);white-space:nowrap;align-items:center;gap:7px;padding:8px 12px;font-size:.88rem;font-weight:600;text-decoration:none;transition:background .15s,color .15s;display:inline-flex}.nav-link svg{width:18px;height:18px}.nav-link:hover{background:var(--surface-3);color:var(--ink)}.nav-link--active{background:var(--accent-soft);color:var(--accent-deep)}.header-progress-link{border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--muted);white-space:nowrap;align-items:center;gap:7px;padding:8px 12px;font-size:.78rem;font-weight:600;text-decoration:none;display:inline-flex}.header-progress-link:hover{border-color:var(--accent-line);color:var(--accent-deep)}.header-progress-link svg{width:16px;height:16px}.sync-status{border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--muted);white-space:nowrap;flex:none;align-items:center;gap:6px;padding:6px 10px;font-size:.72rem;font-weight:650;display:inline-flex}.sync-status-dot{background:var(--success);border-radius:50%;flex:none;width:7px;height:7px}.sync-status--syncing .sync-status-dot{background:var(--warning);animation:1.2s ease-in-out infinite sync-pulse}.sync-status--offline{color:var(--danger-deep);background:var(--danger-soft);border-color:#9d2f2447}.sync-status--offline .sync-status-dot{background:var(--danger)}@keyframes sync-pulse{0%,to{opacity:1}50%{opacity:.3}}.site-main{width:min(var(--max-width), 100% - 40px);flex:1;margin:0 auto;padding:34px 0 80px}.site-footer{border-top:1px solid var(--border);background:#fffaf2b3}.footer-inner{width:min(var(--max-width), 100% - 40px);justify-content:space-between;align-items:flex-end;gap:32px;margin:0 auto;padding:30px 0 40px;display:flex}.footer-title{font-family:Iowan Old Style,Palatino Linotype,Georgia,serif;font-size:1.02rem;font-weight:700}.footer-note{max-width:620px;color:var(--muted);margin-top:6px;font-size:.82rem}.footer-links{text-align:right;flex-direction:column;gap:6px;font-size:.82rem;display:flex}.mobile-nav{display:none}.page{flex-direction:column;gap:30px;animation:.26s both page-in;display:flex}@keyframes page-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.page-header{flex-direction:column;gap:16px;display:flex}.back-link{min-height:36px;color:var(--muted);align-self:flex-start;align-items:center;gap:7px;font-size:.85rem;font-weight:600;text-decoration:none;display:inline-flex}.back-link:hover{color:var(--accent-deep)}.back-link svg{width:17px;height:17px}.back-link--plain{padding:10px 0}.page-header-row{justify-content:space-between;align-items:flex-start;gap:28px;display:flex}.page-header-copy{max-width:760px}.eyebrow{color:var(--accent-deep);letter-spacing:.13em;text-transform:uppercase;font-size:.72rem;font-weight:750}.page-title{letter-spacing:-.025em;text-wrap:balance;margin-top:6px;font-size:clamp(1.9rem,3.4vw,2.85rem);line-height:1.14}.page-intro{color:var(--muted);max-width:70ch;margin-top:12px;font-size:1rem}.page-header-actions{flex-wrap:wrap;flex:none;justify-content:flex-end;align-items:center;gap:10px;display:flex}.header-progress{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);align-items:center;gap:14px;padding:12px 16px;display:flex}.header-progress>div:last-child{flex-direction:column;line-height:1.3;display:flex}.header-progress strong{font-size:1.08rem}.header-progress span{color:var(--muted);font-size:.76rem}.section{flex-direction:column;gap:18px;display:flex}.section-heading-row,.panel-heading-row{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.section-title{letter-spacing:-.015em;font-size:clamp(1.22rem,2vw,1.55rem);line-height:1.25}.section-subtitle{color:var(--muted);margin-top:4px;font-size:.86rem}.text-link{color:var(--accent-deep);white-space:nowrap;align-items:center;gap:5px;font-size:.84rem;font-weight:650;text-decoration:none;display:inline-flex}.text-link:hover{text-decoration:underline}.text-link svg{width:15px;height:15px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px}.panel-heading-row{align-items:center;margin-bottom:14px}.fine-print{color:var(--muted-2);font-size:.78rem;line-height:1.6}.muted{color:var(--muted)}.button{border-radius:var(--radius-pill);text-align:center;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:10px 18px;font-size:.9rem;font-weight:700;line-height:1.2;text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;display:inline-flex}.button svg{flex:none;width:18px;height:18px}.button:hover{transform:translateY(-1px)}.button:active{transform:none}.button--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 4px 14px #7a3a1a38}.button--primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--on-accent)}.button--ghost{background:var(--surface);border-color:var(--border-strong);color:var(--ink-soft)}.button--ghost:hover{background:var(--surface-2);border-color:var(--accent-line);color:var(--accent-deep)}.button--success{background:var(--success);border-color:var(--success);color:#fff}.button--success:hover{background:var(--success-deep);border-color:var(--success-deep);color:#fff}.button--danger{background:var(--danger);border-color:var(--danger);color:#fff}.button--danger:hover{background:var(--danger-deep);color:#fff}.button--small{min-height:38px;padding:7px 14px;font-size:.82rem}.button--full{width:100%}.icon-button{border:1px solid var(--border);background:var(--surface);width:40px;height:40px;color:var(--muted);border-radius:50%;justify-content:center;align-items:center;text-decoration:none;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.icon-button:hover{background:var(--surface-2);border-color:var(--accent-line);color:var(--accent-deep)}.icon-button svg{width:18px;height:18px}.icon-button--danger{color:var(--danger)}.tag{border-radius:var(--radius-pill);background:var(--accent-soft);min-height:26px;color:var(--accent-deep);white-space:nowrap;border:1px solid #0000;align-items:center;gap:5px;padding:3px 10px;font-size:.72rem;font-weight:700;line-height:1.3;display:inline-flex}.tag svg{width:14px;height:14px}.tag--quiet{background:var(--surface-2);border-color:var(--border);color:var(--muted);font-weight:650}.tag--simple{background:var(--accent-soft);color:var(--accent-deep)}.tag--compound{background:var(--compound-soft);color:var(--compound)}.tag--warning{background:var(--warning-soft);color:var(--warning);white-space:normal}.tag--focus{background:var(--surface-2);border-color:var(--border);color:var(--ink-soft);font-weight:600}.chord-chip{border:1px solid var(--border-strong);background:var(--surface);min-height:30px;color:var(--ink-soft);border-radius:8px;align-items:center;padding:3px 11px;font-family:Iowan Old Style,Palatino Linotype,Georgia,serif;font-size:.92rem;font-weight:700;display:inline-flex;box-shadow:0 1px #3c28180d}.alert{border-radius:var(--radius-sm);padding:12px 14px;font-size:.85rem}.alert--danger{background:var(--danger-soft);color:var(--danger-deep);border:1px solid #9d2f244d}.info-callout,.notice-banner{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);color:var(--muted);align-items:flex-start;gap:12px;padding:16px 18px;font-size:.88rem;display:flex}.info-callout svg,.notice-banner svg{width:21px;height:21px;color:var(--accent);flex:none;margin-top:2px}.notice-banner{background:linear-gradient(120deg, var(--olive-soft), var(--surface-2));border-color:#cfd6b7}.notice-banner strong{color:var(--ink);font-size:.92rem;display:block}.notice-banner p{margin-top:3px}.source-note{color:var(--muted);align-items:flex-start;gap:8px;font-size:.78rem;display:flex}.source-note svg{flex:none;width:16px;height:16px;margin-top:2px}.empty-state{border:1px dashed var(--border-strong);border-radius:var(--radius-lg);text-align:center;background:#fffaf299;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:300px;padding:40px 24px;display:flex}.empty-state--large{min-height:56vh}.empty-state h1,.empty-state h2{font-size:1.45rem}.empty-state p{max-width:52ch;color:var(--muted)}.empty-icon{background:var(--accent-soft);width:56px;height:56px;color:var(--accent-deep);border-radius:50%;justify-content:center;align-items:center;margin-bottom:4px;display:inline-flex}.empty-icon svg{width:26px;height:26px}.empty-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;display:flex}.empty-inline{border-radius:var(--radius);background:var(--surface-2);color:var(--muted);flex-direction:column;align-items:flex-start;gap:10px;padding:18px;font-size:.88rem;display:flex}.empty-inline>svg{width:24px;height:24px;color:var(--accent)}.pager{justify-content:space-between;gap:16px;padding-top:4px;display:flex}.pager-link{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);max-width:46%;color:var(--ink);box-shadow:var(--shadow-sm);align-items:center;gap:14px;padding:16px 18px;text-decoration:none;transition:border-color .15s,transform .15s;display:flex}.pager-link:hover{border-color:var(--accent-line);color:var(--ink);transform:translateY(-1px)}.pager-link svg{width:20px;height:20px;color:var(--accent);flex:none}.pager-link--next{text-align:right;margin-left:auto}.pager-link span{flex-direction:column;min-width:0;display:flex}.pager-link small{color:var(--muted);font-size:.72rem}.pager-link strong{text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;overflow:hidden}.progress-ring{flex:none;place-items:center;display:inline-grid;position:relative}.progress-ring svg{width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg)}.progress-ring-track,.progress-ring-value{fill:none;stroke-width:4px}.progress-ring-track{stroke:var(--border)}.progress-ring-value{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .5s}.progress-ring-text{color:var(--ink-soft);font-size:.74rem;font-weight:750;position:relative}.progress-bar{border-radius:var(--radius-pill);background:var(--surface-3);width:100%;height:8px;overflow:hidden}.progress-bar>span{border-radius:inherit;background:linear-gradient(90deg, var(--accent), #bd7040);height:100%;transition:width .4s;display:block}.hero{border:1px solid var(--border);box-shadow:var(--shadow-md);background:radial-gradient(circle at 88% 0,#9a4a2221,#0000 42%),radial-gradient(circle at 4% 96%,#5f6b451f,#0000 38%),linear-gradient(135deg,#fffaf2,#f7edde);border-radius:30px;grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);gap:36px;padding:clamp(28px,4vw,48px);display:grid;position:relative;overflow:hidden}.hero:after{content:"";pointer-events:none;border:1px solid #9a4a2229;border-radius:50%;width:380px;height:380px;position:absolute;bottom:-140px;right:-90px}.hero-copy{z-index:1;max-width:680px;position:relative}.hero h1{letter-spacing:-.035em;text-wrap:balance;margin-top:10px;font-size:clamp(2.15rem,4.4vw,3.6rem);line-height:1.08}.hero-lead{max-width:60ch;color:var(--muted);margin-top:18px;font-size:1rem}.hero-actions{flex-wrap:wrap;gap:10px;margin-top:26px;display:flex}.hero-stats{border-top:1px solid var(--border);color:var(--muted);flex-wrap:wrap;gap:22px;margin-top:30px;padding-top:20px;font-size:.8rem;display:flex}.hero-stats strong{color:var(--ink);font-size:1.3rem;line-height:1.2;display:block}.hero-aside{flex-direction:column;justify-content:center;gap:14px;display:flex}.hero-progress-card{border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:#fffaf2d1;align-items:center;gap:18px;padding:22px;display:flex}.hero-progress-label{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:.76rem;font-weight:700}.hero-progress-value{margin-top:2px;font-size:1.18rem;font-weight:750}.hero-progress-note{color:var(--muted-2);margin-top:3px;font-size:.72rem}.hero-mini-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.mini-stat{border:1px solid var(--border);border-radius:var(--radius);background:#fffaf2b3;flex-direction:column;gap:2px;padding:16px;display:flex}.mini-stat strong{font-size:1rem}.mini-stat>span:last-child{color:var(--muted);font-size:.7rem}.mini-stat-icon{background:var(--olive-soft);width:30px;height:30px;color:var(--olive-deep);border-radius:50%;justify-content:center;align-items:center;margin-bottom:4px;display:inline-flex}.mini-stat-icon svg{width:16px;height:16px}.weekly-panel{flex-direction:column;gap:18px;display:flex}.weekly-head{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.weekly-chart{justify-content:space-between;align-items:flex-end;gap:10px;min-height:150px;padding:8px 4px 0;display:flex}.weekly-chart--large{min-height:200px}.weekly-day{flex-direction:column;flex:1 1 0;align-items:center;gap:6px;min-width:0;display:flex}.weekly-bar-track{background:linear-gradient(#0000,#e4d4bd59);border-radius:8px;justify-content:center;align-items:flex-end;width:100%;height:110px;display:flex}.weekly-chart--large .weekly-bar-track{height:155px}.weekly-bar{background:linear-gradient(180deg, #c37c4a, var(--accent));border-radius:7px 7px 3px 3px;width:min(34px,62%);min-height:4px;transition:height .4s;display:block}.weekly-bar--today{background:linear-gradient(180deg, #8a9666, var(--olive))}.weekly-weekday{color:var(--muted);font-size:.72rem;font-weight:650}.weekly-minutes{color:var(--muted-2);min-height:1em;font-size:.66rem}.weekly-minutes--top{color:var(--muted);font-weight:650}.weekly-caption{color:var(--muted-2);font-size:.72rem}.unit-grid{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;display:grid}.unit-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);flex-direction:column;gap:8px;padding:20px;text-decoration:none;transition:transform .16s,border-color .16s,box-shadow .16s;display:flex}.unit-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow-md);color:var(--ink);transform:translateY(-3px)}.unit-card-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.unit-number{color:var(--accent-deep);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;font-weight:800}.unit-card h3{font-size:1.06rem;line-height:1.3}.unit-card p{color:var(--muted);font-size:.8rem}.unit-card-progress{border-top:1px solid var(--border);color:var(--muted);align-items:center;gap:12px;margin-top:auto;padding-top:14px;font-size:.76rem;display:flex}.reference-strip{border:1px dashed var(--border-strong);border-radius:var(--radius-lg);color:var(--ink);background:#e9ecdc80;align-items:center;gap:16px;padding:18px 20px;text-decoration:none;transition:border-color .15s,background .15s;display:flex}.reference-strip:hover{border-color:var(--olive);background:var(--olive-soft);color:var(--ink)}.reference-strip-icon{background:var(--olive);color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:42px;height:42px;display:inline-flex}.reference-strip-copy{flex-direction:column;flex:1;gap:2px;display:flex}.reference-strip-copy strong{font-size:.92rem}.reference-strip-copy span{color:var(--muted);font-size:.78rem}.reference-strip>svg{color:var(--olive-deep);flex:none}.home-columns{grid-template-columns:1.2fr .8fr;gap:18px;display:grid}.continue-panel{background:linear-gradient(150deg, #f5e1d08c, transparent 58%), var(--surface);flex-direction:column;gap:10px;display:flex}.continue-title{font-size:1.35rem;line-height:1.28}.continue-summary{color:var(--muted);max-width:62ch;font-size:.9rem}.continue-meta{color:var(--muted);flex-wrap:wrap;gap:8px;margin-top:2px;font-size:.76rem;display:flex}.continue-meta span{border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--border);padding:3px 9px}.continue-actions{flex-wrap:wrap;gap:10px;margin-top:10px;display:flex}.favorite-list{flex-direction:column;display:flex}.favorite-list li{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:10px 0;display:flex}.favorite-list li:last-child{border-bottom:0}.favorite-list li>a{color:var(--ink);flex:1;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;display:flex}.favorite-list li>a:hover strong{color:var(--accent-deep)}.favorite-list li>a>span:first-child{flex-direction:column;display:flex}.favorite-list strong{font-size:.9rem}.favorite-list small{color:var(--muted);font-size:.74rem}.favorite-unit{color:var(--muted-2);white-space:nowrap;font-size:.72rem}.local-note{border-radius:var(--radius);background:var(--surface-2);color:var(--muted);align-items:flex-start;gap:12px;padding:18px 20px;font-size:.8rem;display:flex}.local-note svg{width:20px;height:20px;color:var(--accent);flex:none}.course-list{flex-direction:column;gap:14px;display:flex}.course-unit{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);grid-template-columns:62px minmax(0,1fr) auto;align-items:start;gap:22px;padding:24px;display:grid}.course-unit-index{color:var(--accent-line);padding-top:3px;font-family:Iowan Old Style,Palatino Linotype,Georgia,serif;font-size:2.1rem;line-height:1}.course-unit-topline{flex-wrap:wrap;gap:7px;margin-bottom:8px;display:flex}.course-unit-title{font-size:1.35rem;line-height:1.25}.course-unit-title a{color:var(--ink);text-decoration:none}.course-unit-title a:hover{color:var(--accent-deep)}.course-unit-subtitle{color:var(--accent-deep);margin-top:2px;font-size:.86rem;font-weight:650}.course-unit-description{color:var(--muted);max-width:80ch;margin-top:10px;font-size:.86rem}.course-unit-progress{color:var(--muted);white-space:nowrap;align-items:center;gap:14px;margin-top:16px;font-size:.76rem;display:flex}.course-unit-progress .progress-bar{max-width:360px}.course-unit-actions{flex-direction:column;align-items:flex-end;gap:10px;padding-top:4px;display:flex}.reference-panel{border:1px dashed var(--border-strong);border-radius:var(--radius-lg);background:linear-gradient(120deg, var(--olive-soft), #fffaf2b3);align-items:center;gap:20px;padding:24px;display:flex}.reference-panel-icon{background:var(--olive);color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:48px;height:48px;display:inline-flex}.reference-panel>div{flex:1}.unit-toolbar{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;padding:16px 20px;display:flex}.unit-toolbar-meta,.unit-toolbar-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.lesson-list{flex-direction:column;gap:10px;display:flex}.lesson-row{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);grid-template-columns:50px minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px 20px;transition:border-color .15s,background .15s;display:grid}.lesson-row:hover{border-color:var(--border-strong)}.lesson-row--done{background:linear-gradient(90deg, var(--success-soft), var(--surface) 45%);border-color:#34684847}.lesson-number{border:1px solid var(--border);width:44px;height:44px;color:var(--muted-2);background:var(--surface-2);border-radius:50%;place-items:center;font-family:Iowan Old Style,Palatino Linotype,Georgia,serif;font-size:1.02rem;display:grid}.lesson-row--done .lesson-number{background:var(--success-soft);color:var(--success);border-color:#34684852}.lesson-row-main{min-width:0}.lesson-row-title-line{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.lesson-row-title{color:var(--ink);font-size:1rem;font-weight:700;text-decoration:none}.lesson-row-title:hover{color:var(--accent-deep);text-decoration:underline}.lesson-row-summary{-webkit-line-clamp:2;color:var(--muted);-webkit-box-orient:vertical;margin-top:3px;font-size:.82rem;display:-webkit-box;overflow:hidden}.lesson-row-meta{color:var(--muted-2);flex-wrap:wrap;gap:12px;margin-top:6px;font-size:.72rem;display:flex}.complete-button{border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);min-height:38px;color:var(--muted);white-space:nowrap;align-items:center;gap:6px;padding:7px 12px;font-size:.76rem;font-weight:650;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.complete-button:hover{border-color:var(--success);color:var(--success)}.complete-button svg{width:16px;height:16px}.complete-button--done{background:var(--success);border-color:var(--success);color:#fff}.complete-button--done:hover{background:var(--success-deep);border-color:var(--success-deep);color:#fff}.lesson-header-actions{flex-wrap:wrap;justify-content:flex-end;gap:9px;display:flex}.lesson-meta-row,.song-detail-meta{flex-wrap:wrap;gap:7px;margin-top:-8px;display:flex}.lesson-layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:22px;display:grid}.lesson-main{flex-direction:column;gap:18px;min-width:0;display:flex}.lesson-block{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);padding:24px}.block-heading{align-items:flex-start;gap:14px;margin-bottom:16px;display:flex}.step-number{background:var(--accent-soft);width:34px;height:34px;color:var(--accent-deep);border-radius:50%;flex:none;place-items:center;font-family:Iowan Old Style,Palatino Linotype,Georgia,serif;font-size:1.05rem;font-weight:700;display:grid}.lesson-summary{color:var(--ink-soft);max-width:78ch;font-size:.95rem}.focus-list{flex-wrap:wrap;gap:7px;margin-top:14px;display:flex}.notes-list{flex-direction:column;gap:8px;margin-top:16px;padding-left:0;display:flex}.notes-list li{color:var(--muted);padding-left:20px;font-size:.86rem;position:relative}.notes-list li:before{content:"";background:var(--accent-line);border-radius:50%;width:6px;height:6px;position:absolute;top:.68em;left:4px}.notes-list--spacious li{padding-top:3px;padding-bottom:3px;font-size:.9rem}.chord-row{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:7px;margin-top:18px;padding-top:16px;display:flex}.chord-row--wrap{border-top:0;margin-top:0;padding-top:0}.chord-row-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-right:4px;font-size:.76rem;font-weight:700}.lesson-practice-copy{color:var(--muted);max-width:74ch;font-size:.9rem}.practice-callout{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(120deg, #f5e1d0b8, transparent 70%), var(--surface-2);justify-content:space-between;align-items:center;gap:18px;margin-top:16px;padding:18px;display:flex}.practice-callout>div{flex-direction:column;gap:2px;display:flex}.practice-callout strong{font-size:.96rem}.practice-callout span{color:var(--muted);font-size:.8rem}.lesson-sidebar{top:calc(var(--header-height) + 18px);flex-direction:column;gap:16px;display:flex;position:sticky}.lesson-side-panel{flex-direction:column;gap:10px;display:flex}.side-title{font-size:1rem;line-height:1.3}.side-status{color:var(--muted);font-size:.82rem}.side-copy{color:var(--muted);font-size:.84rem}.side-pdf{margin-top:4px}.tempo-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:radial-gradient(circle at 100% 0%, #5f6b451f, transparent 50%), var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;gap:12px;padding:22px;display:flex}.tempo-card-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.tempo-card-title{letter-spacing:-.03em;margin-top:2px;font-size:2rem;line-height:1.05}.tempo-card-title span{color:var(--muted);letter-spacing:.04em;font-size:.82rem;font-weight:700}.tempo-facts{border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-direction:column;gap:8px;padding:12px 0;display:flex}.tempo-facts>div{justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.tempo-facts dt{color:var(--muted);flex:none;font-size:.76rem}.tempo-facts dd{color:var(--ink-soft);text-align:right;flex-wrap:wrap;justify-content:flex-end;gap:6px;font-size:.8rem;display:flex}.tempo-conversion{border-radius:var(--radius-sm);background:var(--warning-soft);color:var(--warning);padding:10px 12px;font-size:.76rem}.source-viewer{flex-direction:column;gap:14px;display:flex}.source-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;display:grid}.source-grid--compact{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.source-card{flex-direction:column;gap:6px;min-width:0;display:flex}.source-image-button{border:1px solid var(--border);border-radius:var(--radius);width:100%;box-shadow:var(--shadow-sm);background:#fff;padding:0;display:block;position:relative;overflow:hidden}.source-image-button img{object-fit:contain;object-position:top center;background:#fff;width:100%;height:300px;transition:transform .22s}.source-grid--compact .source-image-button img{height:220px}.source-image-button:hover img{transform:scale(1.015)}.source-zoom-label{border-radius:var(--radius-pill);color:#fff;opacity:0;background:#2d231bd1;padding:4px 9px;font-size:.68rem;font-weight:650;transition:opacity .15s,transform .15s;position:absolute;bottom:8px;right:8px;transform:translateY(3px)}.source-image-button:hover .source-zoom-label,.source-image-button:focus-visible .source-zoom-label,.song-chart-button:hover .source-zoom-label,.song-chart-button:focus-visible .source-zoom-label{opacity:1;transform:none}.source-card figcaption{color:var(--muted-2);text-align:center;font-size:.7rem}.lightbox{z-index:80;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#1c130cd6;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.lightbox-panel{border-radius:var(--radius-lg);color:#f8efe2;width:min(1080px,100%);max-height:94vh;box-shadow:var(--shadow-lg);background:#1f1812;border:1px solid #ffffff29;flex-direction:column;display:flex;overflow:hidden}.song-lightbox-panel{width:min(980px,100%)}.lightbox-bar{border-bottom:1px solid #ffffff1f;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;display:flex}.lightbox-title{text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;font-weight:650;overflow:hidden}.lightbox-actions{align-items:center;gap:8px;display:flex}.lightbox-actions .icon-button{color:#f8efe2;background:0 0;border-color:#fff3}.lightbox-actions .icon-button:hover{background:#ffffff1a}.lightbox-close{border-radius:var(--radius-pill);color:#f8efe2;background:0 0;border:1px solid #ffffff3d;min-height:38px;padding:7px 14px;font-size:.8rem;font-weight:650}.lightbox-close:hover{background:#ffffff1a}.lightbox-canvas{flex:1;justify-content:center;align-items:center;min-height:0;padding:18px 64px;display:flex;position:relative;overflow:auto}.lightbox-canvas img{object-fit:contain;background:#fff;border-radius:4px;max-width:100%;max-height:calc(94vh - 120px)}.lightbox-nav{z-index:1;color:#fff;background:#1f1812cc;border:1px solid #ffffff3d;border-radius:50%;place-items:center;width:42px;height:42px;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.lightbox-nav:hover{background:#ffffff24}.lightbox-nav--prev{left:12px}.lightbox-nav--next{right:12px}.lightbox-hint{color:#f8efe29e;text-align:center;padding:10px 16px 14px;font-size:.72rem}.metronome-card{border-radius:var(--radius-lg);color:#fbf1e3;background:radial-gradient(circle at 82% -10%,#634839,#0000 50%),radial-gradient(circle at 0 100%,#3c2b20,#0000 55%),linear-gradient(150deg,#35261d,#241a14);border:1px solid #5a4332;flex-direction:column;gap:18px;padding:clamp(20px,3vw,30px);display:flex;box-shadow:0 20px 50px #2c1c1047}.metronome-head{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.metronome-card .eyebrow{color:#d9a97f}.metronome-title{letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:0;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1}.metronome-title span{color:#c8a98d;letter-spacing:.08em;font-size:.82rem;font-weight:700}.metronome-badges{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}.metronome-card .tag{color:#f0dcc6;background:#fff5e61a;border-color:#fff5e62e}.metronome-card .tag--compound{color:#d3e7d8;background:#83a98f33;border-color:#a0c7ac57}.metronome-card .tag--simple{color:#f4d8bf;background:#ce8d5b33;border-color:#dea57759}.beat-panel{border-radius:var(--radius);background:#fffaf00b;border:1px solid #fff5e624;flex-direction:column;align-items:center;gap:8px;padding:18px;display:flex}.beat-dots{justify-content:center;align-items:center;gap:clamp(9px,2.3vw,18px);min-height:34px;display:flex}.beat-dot{background:#fff5e621;border:1px solid #fff5e633;border-radius:50%;width:clamp(13px,2vw,17px);height:clamp(13px,2vw,17px);transition:transform 90ms,background 90ms,box-shadow 90ms;display:block}.beat-dot--accent{border-color:#eeb986b3}.beat-dot--active{background:#e6a467;border-color:#f4c393;transform:scale(1.22);box-shadow:0 0 0 5px #e6a46729,0 0 18px #e6a46773}.beat-status{color:#f6e8d6;text-align:center;min-height:1.4em;font-size:.88rem;font-weight:650}.beat-meaning{color:#c8ae95;text-align:center;font-size:.72rem}.metronome-controls{grid-template-columns:auto minmax(0,1fr);align-items:stretch;gap:12px;display:grid}.tempo-buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}.tempo-button{border-radius:var(--radius);color:#fbf1e3;background:#fff5e614;border:1px solid #fff5e633;min-width:58px;min-height:54px;font-size:1rem;font-weight:750;transition:background .15s,border-color .15s}.tempo-button:hover{background:#fff5e626;border-color:#fff5e657}.metro-selectors{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.metro-selector{border-radius:var(--radius);color:#f4e4d1;text-align:left;background:#fffaf00d;border:1px solid #fff5e629;flex-direction:column;align-items:flex-start;gap:2px;min-height:54px;padding:8px 11px;transition:background .15s;display:flex}.metro-selector:hover:not(:disabled){background:#fffaf01a}.metro-selector span{color:#bfa68e;letter-spacing:.03em;font-size:.64rem}.metro-selector strong{font-size:.8rem;font-weight:700}.loop-panel{border-top:1px solid #fff5e621;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;display:flex}.loop-copy{flex-direction:column;gap:1px;display:flex}.loop-title{font-size:.8rem;font-weight:700}.loop-sub{color:#b99f87;font-size:.68rem}.loop-options{flex-wrap:wrap;gap:6px;display:flex}.loop-option{border-radius:var(--radius-pill);color:#ddc9b3;background:0 0;border:1px solid #fff5e62e;min-height:34px;padding:5px 11px;font-size:.72rem;font-weight:650}.loop-option:hover{background:#fffaf014}.loop-option--active{color:#2b1c11;background:#e6a467;border-color:#e6a467}.metronome-note{border-radius:var(--radius-sm);color:#e9cfb2;background:#e8b88121;padding:10px 12px;font-size:.76rem}.transport{gap:10px;display:flex}.transport-main{flex:1}.metronome-card .button--ghost{color:#f4e6d5;background:0 0;border-color:#fff5e642}.metronome-card .button--ghost:hover:not(:disabled){color:#fff;background:#fffaf017;border-color:#fff5e670}.transport-stop{min-width:104px}.song-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.search-field{flex:300px;align-items:center;min-width:min(360px,100%);display:flex;position:relative}.search-field svg{width:18px;height:18px;color:var(--muted-2);pointer-events:none;position:absolute;left:14px}.search-field input{border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);width:100%;min-height:46px;color:var(--ink);box-shadow:var(--shadow-sm);padding:10px 16px 10px 42px;font-size:.88rem}.search-field input::placeholder{color:var(--muted-2)}.filter-chips{flex-wrap:wrap;gap:6px;display:flex}.filter-chip{border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);min-height:36px;color:var(--muted);padding:6px 13px;font-size:.76rem;font-weight:650;transition:background .15s,color .15s,border-color .15s}.filter-chip:hover{border-color:var(--accent-line);color:var(--accent-deep)}.filter-chip--active{background:var(--ink);border-color:var(--ink);color:#fff}.result-count{color:var(--muted);font-size:.82rem}.song-grid{grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:16px;display:grid}.song-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;transition:transform .16s,border-color .16s,box-shadow .16s;display:flex;overflow:hidden}.song-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}.song-card-image{border-bottom:1px solid var(--border);background:#fff;height:176px;display:block;overflow:hidden}.song-card-image img{object-fit:cover;object-position:top center;width:100%;height:100%;transition:transform .26s}.song-card:hover .song-card-image img{transform:scale(1.02)}.song-card-body{flex-direction:column;gap:5px;padding:16px 18px 18px;display:flex}.song-card-topline{justify-content:space-between;align-items:center;gap:10px;display:flex}.favorite-button{border:1px solid var(--border);background:var(--surface);width:34px;height:34px;color:var(--muted-2);border-radius:50%;place-items:center;transition:color .15s,border-color .15s,background .15s;display:grid}.favorite-button:hover{color:#a84037;border-color:#c67c76}.favorite-button--on{background:var(--danger-soft);color:var(--danger);border-color:#9d2f2447}.favorite-button svg{width:17px;height:17px}.favorite-active{color:var(--danger);background:var(--danger-soft);border-color:#9d2f2466}.song-card-title{font-size:1.06rem;line-height:1.3}.song-card-title a{color:var(--ink);text-decoration:none}.song-card-title a:hover{color:var(--accent-deep)}.song-card-artist{color:var(--muted);font-size:.8rem}.song-facts{border-top:1px solid var(--border);grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;padding-top:10px;display:grid}.song-facts dt{color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em;font-size:.66rem}.song-facts dd{color:var(--ink-soft);margin-top:1px;font-size:.76rem;font-weight:650}.song-tuning{color:var(--warning);margin-top:6px;font-size:.72rem;font-weight:650}.song-library-note{border-top:1px solid var(--border);padding-top:4px}.song-detail-layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:20px;display:grid}.song-chart-panel{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;gap:10px;padding:14px;display:flex}.song-chart-button{border:1px solid var(--border);border-radius:var(--radius);background:#fff;width:100%;padding:0;display:block;position:relative;overflow:hidden}.song-chart-button img{object-fit:contain;object-position:top center;background:#fff;width:100%;max-height:76vh}.song-chart-caption{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:4px 4px 2px;display:flex}.song-chart-caption p{color:var(--muted);font-size:.72rem}.song-sidebar{top:calc(var(--header-height) + 18px);flex-direction:column;gap:16px;display:flex;position:sticky}.practice-header-stats{align-items:stretch;gap:10px;display:flex}.practice-header-stats>div{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-width:108px;box-shadow:var(--shadow-sm);flex-direction:column;padding:10px 14px;display:flex}.practice-header-stats span{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.66rem}.practice-header-stats strong{font-variant-numeric:tabular-nums;font-size:1.12rem}.practice-layout{grid-template-columns:minmax(0,1fr) 350px;align-items:start;gap:20px;display:grid}.practice-main,.practice-sidebar{flex-direction:column;gap:16px;min-width:0;display:flex}.practice-sidebar{top:calc(var(--header-height) + 18px);position:sticky}.practice-timer-note{border-radius:var(--radius-pill);background:var(--surface-2);color:var(--muted);text-align:center;padding:10px 14px;font-size:.78rem}.practice-source-panel{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);padding:22px}.practice-chart-link{border:1px solid var(--border);border-radius:var(--radius);background:#fff;display:block;position:relative;overflow:hidden}.practice-chart-link img{object-fit:contain;object-position:top;width:100%;max-height:440px}.practice-chart-link span{border-radius:var(--radius-pill);color:#fff;background:#2d231bd6;padding:5px 11px;font-size:.7rem;font-weight:650;position:absolute;bottom:10px;right:10px}.timefeel-note{border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent-deep);align-items:flex-start;gap:9px;padding:11px 12px;font-size:.75rem;display:flex}.timefeel-note--compound{background:var(--compound-soft);color:var(--compound)}.timefeel-note svg{flex:none;width:18px;height:18px;margin-top:1px}.side-summary{flex-direction:column;gap:12px;display:flex}.chooser-grid{grid-template-columns:1fr 1fr;gap:18px;display:grid}.picker-card{flex-direction:column;gap:12px;display:flex}.picker-icon{background:var(--accent-soft);width:46px;height:46px;color:var(--accent-deep);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.picker-icon svg{width:22px;height:22px}.picker-fields{flex-direction:column;gap:10px;margin:4px 0 6px;display:flex}.field{flex-direction:column;gap:5px;display:flex}.field>span{color:var(--muted);font-size:.74rem;font-weight:650}.field select{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);width:100%;min-height:44px;padding:9px 12px;font-size:.86rem}.picker-details summary{cursor:pointer;color:var(--accent-deep);font-size:.86rem;font-weight:700;list-style-position:inside}.picker-details-body{margin-top:14px}.picker-details .picker-card{box-shadow:none;background:0 0;border:0;padding:0}.chooser-note{flex-direction:column;gap:8px;display:flex}.stat-grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.stat-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;gap:4px;padding:20px;display:flex}.stat-card--accent{background:linear-gradient(140deg, #f5e1d0cc, transparent 70%), var(--surface);flex-direction:row;align-items:center;gap:16px}.stat-card>span:not(.stat-icon):not(.progress-ring){color:var(--muted);font-size:.74rem;font-weight:650}.stat-card strong{font-size:1.32rem;line-height:1.2}.stat-card small{color:var(--muted-2);font-size:.7rem}.stat-card--accent>div{flex-direction:column;gap:2px;display:flex}.stat-icon{background:var(--olive-soft);width:38px;height:38px;color:var(--olive-deep);border-radius:50%;justify-content:center;align-items:center;margin-bottom:6px;display:inline-flex}.stat-icon svg{width:19px;height:19px}.progress-columns{grid-template-columns:1fr 1fr;align-items:start;gap:18px;display:grid}.unit-progress-list{flex-direction:column;gap:15px;margin-top:6px;display:flex}.unit-progress-topline{justify-content:space-between;gap:12px;margin-bottom:6px;font-size:.8rem;display:flex}.unit-progress-topline a{color:var(--ink-soft);font-weight:650;text-decoration:none}.unit-progress-topline a:hover{color:var(--accent-deep)}.unit-progress-topline span{color:var(--muted);white-space:nowrap;font-size:.74rem}.session-list{flex-direction:column;display:flex}.session-list li{border-bottom:1px solid var(--border);justify-content:space-between;gap:14px;padding:10px 0;font-size:.84rem;display:flex}.session-list li:last-child{border-bottom:0}.session-list span{color:var(--muted)}.favorite-simple-list{flex-direction:column;gap:4px;display:flex}.favorite-simple-list li{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:8px 0;display:flex}.favorite-simple-list li:last-child{border-bottom:0}.favorite-simple-list li>a:first-child{color:var(--ink);flex-direction:column;flex:1;text-decoration:none;display:flex}.favorite-simple-list li>a:first-child:hover span{color:var(--accent-deep)}.favorite-simple-list span{font-size:.88rem;font-weight:650}.favorite-simple-list small{color:var(--muted);font-size:.72rem}.data-panel{flex-direction:column;gap:12px;display:flex}.backup-block{border-top:1px solid var(--border);padding-top:12px}.backup-title{font-size:.86rem;font-weight:700}.backup-note{color:var(--muted);margin-top:2px;font-size:.78rem}.backup-actions{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.backup-actions .button{flex:130px}.backup-message{margin-top:8px;font-size:.78rem;font-weight:650}.backup-message--ok{color:var(--success-deep)}.backup-message--error{color:var(--danger-deep)}.confirm-box{border-radius:var(--radius);background:var(--danger-soft);border:1px solid #9d2f244d;padding:14px}.confirm-box p{color:var(--danger-deep);font-size:.86rem;font-weight:650}.confirm-actions{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.reference-summary{flex-direction:column;gap:14px;display:flex}.reference-page-list{grid-template-columns:1fr 1fr;gap:10px;display:grid}.reference-page-list li{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);gap:12px;padding:14px;display:flex}.reference-page-number{background:var(--olive-soft);width:32px;height:32px;color:var(--olive-deep);border-radius:50%;flex:none;place-items:center;font-size:.8rem;font-weight:750;display:grid}.reference-page-list strong{font-size:.88rem}.reference-page-list p{color:var(--muted);margin-top:2px;font-size:.78rem}.reference-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;display:flex}.reference-footer .fine-print{max-width:62ch}.source-doc-list{flex-direction:column;display:flex}.source-doc-list li{border-bottom:1px solid var(--border);align-items:center;gap:14px;padding:12px 0;display:flex}.source-doc-list li:last-child{border-bottom:0}.source-doc-index{border:1px solid var(--border);background:var(--surface-2);width:34px;height:34px;color:var(--accent-deep);border-radius:50%;flex:none;place-items:center;font-size:.78rem;font-weight:750;display:grid}.source-doc-index svg{width:17px;height:17px}.source-doc-list li>div{flex-direction:column;flex:1;gap:1px;display:flex}.source-doc-list strong{font-size:.86rem}.source-doc-list span{color:var(--muted);font-size:.74rem}.source-doc-list a{white-space:nowrap;align-items:center;gap:4px;font-size:.76rem;font-weight:650;text-decoration:none;display:inline-flex}.source-doc-list a svg{width:14px;height:14px}.source-doc-note{border-top:1px solid var(--border);color:var(--muted);margin-top:12px;padding-top:12px;font-size:.78rem}.source-doc-note code,.code-block code{background:var(--surface-3);color:var(--ink-soft);border-radius:5px;padding:2px 6px;font-family:Cascadia Code,Consolas,monospace;font-size:.78em}.code-block{border-radius:var(--radius);background:var(--ink);color:#f5e9d9;flex-direction:column;gap:6px;padding:16px;font-family:Cascadia Code,Consolas,monospace;font-size:.82rem;display:flex}.code-block code{color:inherit;background:0 0;padding:0}@media (width<=1080px){.desktop-nav{gap:0}.nav-link{padding:8px 9px}.header-progress-link{display:none}.hero{grid-template-columns:1fr}.hero-aside{grid-template-columns:1.2fr 1fr;align-items:stretch;display:grid}.lesson-layout,.song-detail-layout,.practice-layout{grid-template-columns:minmax(0,1fr)}.lesson-sidebar,.song-sidebar,.practice-sidebar{grid-template-columns:1fr 1fr;align-items:start;display:grid;position:static}.practice-sidebar{grid-template-columns:1.2fr .8fr}.stat-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=900px){.desktop-nav{display:none}.header-inner{justify-content:space-between}.site-header{position:static}.site-main{padding-bottom:110px}.mobile-nav{z-index:50;padding:7px 8px calc(7px + env(safe-area-inset-bottom));border-top:1px solid var(--border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffaf2f5;justify-content:space-around;gap:2px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 30px #3d2b1b14}.mobile-nav-link{border-radius:var(--radius-sm);min-height:50px;color:var(--muted);flex-direction:column;flex:1;align-items:center;gap:2px;padding:4px 2px;font-size:.64rem;font-weight:650;text-decoration:none;display:flex}.mobile-nav-link svg{width:21px;height:21px}.mobile-nav-link--active{background:var(--accent-soft);color:var(--accent-deep)}.site-footer{padding-bottom:70px}.footer-inner{flex-direction:column;align-items:flex-start;gap:16px}.footer-links{text-align:left}.home-columns,.progress-columns{grid-template-columns:1fr}.course-unit{grid-template-columns:44px minmax(0,1fr);gap:16px}.course-unit-index{font-size:1.5rem}.course-unit-actions{flex-direction:row;grid-column:2;justify-content:flex-start;align-items:center}.reference-panel{flex-wrap:wrap}.reference-panel>.button{width:100%}.lesson-sidebar,.song-sidebar,.practice-sidebar{grid-template-columns:1fr}}@media (width<=720px){:root{--header-height:66px}.header-inner,.site-main,.footer-inner{width:min(100% - 28px, var(--max-width))}.site-main{padding-top:22px}.brand-sub{display:none}.sync-status{gap:0;padding:7px}.sync-status-label{display:none}.hero{border-radius:var(--radius-lg);padding:24px 20px}.hero-aside{grid-template-columns:1fr}.hero-stats{gap:16px}.page-header-row{flex-direction:column;gap:18px}.page-header-actions,.lesson-header-actions{justify-content:flex-start}.week-head,.section-heading-row,.panel-heading-row{align-items:flex-start}.section-heading-row{flex-direction:column;gap:8px}.weekly-chart{gap:5px}.weekly-bar-track{height:88px}.weekly-chart--large .weekly-bar-track{height:120px}.lesson-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px}.lesson-number{display:none}.complete-button{justify-self:start}.lesson-block,.source-viewer,.practice-source-panel,.lesson-block{padding:18px}.practice-callout{flex-direction:column;align-items:stretch}.practice-callout .button{width:100%}.metronome-controls{grid-template-columns:1fr}.tempo-buttons{max-width:170px}.loop-panel{flex-direction:column;align-items:flex-start}.source-grid,.source-grid--compact{grid-template-columns:1fr 1fr}.source-image-button img,.source-grid--compact .source-image-button img{height:190px}.song-grid{grid-template-columns:1fr}.song-card-image{height:200px}.reference-page-list,.chooser-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}.stat-card--accent{grid-column:1/-1}.pager{flex-direction:column}.pager-link,.pager-link--next{text-align:left;width:100%;max-width:none;margin-left:0}.pager-link--next{justify-content:space-between}.lightbox{padding:10px}.lightbox-canvas{padding:12px 44px}.lightbox-canvas img{max-height:calc(94vh - 150px)}.song-chart-caption,.reference-footer{flex-direction:column;align-items:flex-start}}@media (width<=520px){.page{gap:22px}.hero-actions .button{width:100%}.hero-stats{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.hero-stats strong{font-size:1.08rem}.source-grid,.source-grid--compact,.stat-grid{grid-template-columns:1fr}.stat-card--accent{grid-column:auto}.practice-header-stats{width:100%}.practice-header-stats>div{flex:1;min-width:0}.metro-selectors{grid-template-columns:1fr}.filter-chips{flex-wrap:nowrap;width:100%;padding-bottom:4px;overflow-x:auto}.filter-chip{flex:none}.search-field{min-width:100%}.lightbox-canvas{padding:10px 38px}.lightbox-nav{width:34px;height:34px}.lightbox-nav--prev{left:2px}.lightbox-nav--next{right:2px}.lightbox-hint{display:none}.course-unit{grid-template-columns:1fr}.course-unit-index{display:none}.course-unit-actions{grid-column:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}