/* Gõ 10 Ngón v2 · Calm Natural Study Corner */
:root{--bg:#f8f7f1;--surface:#fffefa;--ink:#344436;--muted:#778477;--line:#e6e8dc;--leaf:#668e5d;--leaf-dark:#486e44;--soft-leaf:#eaf1df;--peach:#f8eddf;--shadow:0 9px 35px rgba(56,78,49,.055);font-size:14px;color-scheme:light}
body,html[data-theme='light'] body{background:var(--bg);color:var(--ink)}
.layout,html[data-theme='light'] .layout{display:block;max-width:none;min-height:100vh}
.sidebar,html[data-theme='light'] .sidebar{position:sticky;top:0;z-index:15;min-height:unset;height:75px;width:100%;padding:0 clamp(22px,5.2vw,85px);display:flex;flex-direction:row;align-items:center;gap:35px;background:rgba(255,254,250,.94);border:0;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.logo{padding:0;margin:0;color:var(--ink);font-size:21px;letter-spacing:-.7px}.logo-icon{color:#fff;background:#8ba379;border-radius:9px;width:40px;height:35px;display:grid;place-items:center;font-size:23px}.accent{color:var(--leaf-dark)}.side-caption{display:none}.sidebar nav{display:flex;gap:6px;margin:auto}.nav-item,html[data-theme='light'] .nav-item{font-size:12px;color:#67746a;min-height:39px;padding:9px 13px;border-radius:24px;gap:6px;white-space:nowrap}.nav-icon{font-size:18px;width:20px}.nav-item.active,html[data-theme='light'] .nav-item.active,.nav-item:hover,html[data-theme='light'] .nav-item:hover{background:var(--soft-leaf);box-shadow:none;color:var(--leaf-dark)}.sidebar-bottom{display:block;margin:0}.mini-note{display:none}.theme-btn{width:auto;text-align:center;border:1px solid var(--line);background:#f7f8f1;color:#6a7f69;padding:9px 15px;border-radius:22px;font-size:11px;white-space:nowrap}
.main-area{display:flex;flex-direction:column;min-height:calc(100vh - 75px)}.topbar,html[data-theme='light'] .topbar{height:48px;padding:0 clamp(22px,5.2vw,85px);background:transparent;border:0}.breadcrumb,.breadcrumb strong,html[data-theme='light'] .breadcrumb strong{font-size:11px;font-weight:500;color:#94a08f}.top-actions{color:#96a392}.online-dot{background:#91b886;box-shadow:none}.round-btn,html[data-theme='light'] .round-btn{background:#fffdfa;border:1px solid #e1e8d8;color:#617e5c;margin:0}.content{max-width:1370px;width:100%;padding:17px clamp(20px,4vw,55px) 70px;margin:auto;flex:1}
.hero{display:flex;min-height:392px;align-items:center;overflow:hidden;border-radius:26px;border:1px solid #eae9da;background:linear-gradient(115deg,#fffef7 0%,#fcf9ef 57%,#eff3e6 100%);padding:45px clamp(26px,4vw,65px);box-shadow:var(--shadow)}.hero-content{max-width:585px}.eyebrow{background:#eff4e5;color:#66825a;letter-spacing:1.15px;border-radius:30px;font-size:10px;padding:9px 14px}.hero h1{font-size:clamp(30px,3.3vw,46px);line-height:1.37;color:#354a34;letter-spacing:-1.7px;margin:16px 0}.hero h1 span{color:#73926a}.hero p{color:#758174;font-size:13px;line-height:2;max-width:495px}.hero-art{transform:none;opacity:1;top:auto;right:0;width:47%;height:100%;display:flex;align-items:end;justify-content:center;pointer-events:none}.hero-art img{width:100%;height:100%;max-height:380px;object-fit:contain;object-position:bottom}.primary-btn{border:1px solid #76965e;background:linear-gradient(135deg,#89ab72,#638c56);color:white;box-shadow:0 8px 20px #75946b29;border-radius:25px;padding:11px 21px}.primary-btn:hover{filter:brightness(1.04)}.ghost-btn,.outline-btn,html[data-theme='light'] .outline-btn{background:#fffefa;border:1px solid #b6c8aa;color:#597552;border-radius:25px}.ghost-btn:hover,.outline-btn:hover{background:#eef4e9}.hero-tags{color:#859382;font-size:10px;gap:16px}.hero-tags span::first-letter{color:#719465}
.section-kicker,.side-caption{color:#86a172;font-weight:700;letter-spacing:1.5px}.welcome-row h2,.heading-row h2,.chart-card h2{color:#405440}.muted,.page-head p{color:var(--muted)}.soft{color:#87a67c}.stat-card,.lesson-card,.custom-panel,.chart-card,.history-card,.typing-panel,.keyboard-wrap,.support-card,html[data-theme='light'] .stat-card,html[data-theme='light'] .lesson-card,html[data-theme='light'] .custom-panel,html[data-theme='light'] .chart-card,html[data-theme='light'] .history-card,html[data-theme='light'] .typing-panel,html[data-theme='light'] .keyboard-wrap,html[data-theme='light'] .support-card{background:var(--surface);border:1px solid var(--line);border-radius:19px;color:var(--ink);box-shadow:var(--shadow)}.stat-card{min-height:147px}.stat-mark{color:#7ea173}.stat-value{color:#40573c}.stat-value small{color:#82987a}.stat-label,.lesson-card h3,html[data-theme='light'] .stat-label,html[data-theme='light'] .lesson-card h3{color:#40543e}.stat-meta,.lesson-card p,.lesson-bottom,.test-card p,.custom-panel p{color:#929b90}.daily-goal,.tip-banner,html[data-theme='light'] .daily-goal,html[data-theme='light'] .tip-banner{background:#edf3e6;border:1px solid #dce8d1;color:#496647;border-radius:18px}.daily-goal p,.tip-banner p,html[data-theme='light'] .tip-banner p{color:#72866f}.goal-progress{color:#587e56}.progress-track{background:#e8e9df;height:8px}.progress-track div{background:linear-gradient(90deg,#a5c28c,#769d69)}.lesson-card{transition:transform .2s,border-color .2s}.lesson-card:hover{background:#fffefa;border-color:#b3cead;transform:translateY(-2px)}.lesson-number,html[data-theme='light'] .lesson-number{background:#edf3e6;color:#6c9164}.lesson-status,.lesson-card.finished .lesson-status,.lesson-level,.lesson-bottom strong,.text-link{color:#729568}.coffee-strip,html[data-theme='light'] .coffee-strip{background:#fbf4e9;border:1px solid #eee2d0;border-radius:18px;color:#735e46}.coffee-strip p{color:#97846e}.page-head h1{color:#425842}.page-head p{line-height:1.9}
.test-card,html[data-theme='light'] .test-card{background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow)}.test-card:hover{border-color:#a8c399}.test-icon,.test-card span{color:#769567}.practice-bar h2{color:#41563c}.practice-metrics>div,html[data-theme='light'] .practice-metrics>div{background:#fffefa;border:1px solid #e3e8dd;border-radius:16px;box-shadow:var(--shadow)}.practice-metrics span{color:#899987}.practice-metrics strong{color:#3c513b}.practice-metrics small{color:#72936c}.typing-instruction{color:#879683}.typing-text,html[data-theme='light'] .typing-text{color:#a9b0a6;font-weight:500;line-height:2.1;letter-spacing:.4px}.typing-text span.correct{color:#548b65}.typing-text span.wrong{color:#ae736a;background:#fae7df}.typing-text span.current,html[data-theme='light'] .typing-text span.current{color:#486a45;background:#e2efd8;box-shadow:0 0 0 2px #c9dfb8}.input-caption{color:#7f957a}.typing-panel textarea,.custom-panel textarea,html[data-theme='light'] .typing-panel textarea,html[data-theme='light'] .custom-panel textarea{background:#fdfdf8;color:#364a39;border:1px solid #dbe5d6;border-radius:12px;font-size:15px}.typing-panel textarea:focus{border-color:#93b586;box-shadow:0 0 0 3px #cfe1c954}.typing-hint,.keyboard-title span{color:#839382}.typing-hint span{color:#6b8c62}.keyboard-wrap{margin-top:15px}.key,html[data-theme='light'] .key{background:#f8f9f4;color:#687669;border:1px solid #e1e5db;border-bottom:3px solid #d4dbce;border-radius:7px}.key.next,html[data-theme='light'] .key.next{background:#c9e3b9;border-color:#a2c695;color:#345734;box-shadow:0 5px 15px #b3ccaa60}.finger-guide{color:#879384}.finger-dot.pinky{background:#d8a6ac}.finger-dot.ring{background:#ddc390}.finger-dot.middle{background:#a6c9da}.finger-dot.index{background:#9dbf88}.finger-dot.thumb{background:#d3b9a4}.result-card,html[data-theme='light'] .result-card{background:#eef5e6;border:1px solid #cedfc4;color:#3f603d;border-radius:19px}.result-card p{color:#748f73}.result-stats small{color:#7e967b}.bar-chart{border-bottom-color:#dbe6d6}.chart-col span{color:#678d67}.chart-col>div{background:linear-gradient(#b5d3a4,#7ea270)}.history-card table td,html[data-theme='light'] td{color:#61705f}.history-card table th{color:#93a090;border-color:#e3e8dd}.history-card table td{border-color:#e3e8dd}.goal-edit, .support-page>p,.support-card p{color:#7f8c7c}.goal-edit input,html[data-theme='light'] .goal-edit input{background:#fff;color:#425743;border:1px solid #d8e2d2}.support-card-header,html[data-theme='light'] .support-card-header{color:#40523e}.bank-info,.bank-info strong,html[data-theme='light'] .bank-info strong{color:#5f715c}.not-configured,html[data-theme='light'] .not-configured{color:#7e8c7d;border-color:#ccd9c4}.link-button{color:#729364}footer{border-top:1px solid #e6eadf;color:#899785;text-align:center;font-size:11px}
/* night mode: dark olive rather than neon */
html[data-theme='dark']{--bg:#1d2822;--surface:#26352b;--ink:#e7eee2;--muted:#acbdab;--line:#3d5040;--leaf:#a7c99a;--leaf-dark:#b9d5aa;--soft-leaf:#354c39;--peach:#34382d;--shadow:0 8px 30px #101d1530;color-scheme:dark}
html[data-theme='dark'] body{background:var(--bg);color:var(--ink)}
html[data-theme='dark'] .sidebar{background:#24352aee;border-color:var(--line)}html[data-theme='dark'] .logo,html[data-theme='dark'] .nav-item,html[data-theme='dark'] .nav-item.active,html[data-theme='dark'] .theme-btn{color:#e4eede}html[data-theme='dark'] .theme-btn,html[data-theme='dark'] .round-btn{background:#354a39;border-color:#4c634b}html[data-theme='dark'] .hero{background:linear-gradient(110deg,#2f4435,#344c3e 65%,#455848);border-color:#4b6349}html[data-theme='dark'] .hero h1,html[data-theme='dark'] .hero h1 span,html[data-theme='dark'] .hero p,html[data-theme='dark'] .welcome-row h2,html[data-theme='dark'] .heading-row h2,html[data-theme='dark'] .page-head h1,html[data-theme='dark'] .stat-value,html[data-theme='dark'] .stat-label,html[data-theme='dark'] .lesson-card h3,html[data-theme='dark'] .practice-bar h2,html[data-theme='dark'] .practice-metrics strong{color:#e9f1e5}html[data-theme='dark'] .eyebrow,html[data-theme='dark'] .daily-goal,html[data-theme='dark'] .tip-banner,html[data-theme='dark'] .result-card{background:#354d3b;color:#dcebd2;border-color:#506e50}html[data-theme='dark'] .stat-card,html[data-theme='dark'] .lesson-card,html[data-theme='dark'] .typing-panel,html[data-theme='dark'] .keyboard-wrap,html[data-theme='dark'] .practice-metrics>div,html[data-theme='dark'] .test-card,html[data-theme='dark'] .custom-panel,html[data-theme='dark'] .chart-card,html[data-theme='dark'] .history-card,html[data-theme='dark'] .support-card{background:var(--surface);border-color:var(--line);color:var(--ink)}html[data-theme='dark'] .lesson-card:hover{background:#304334}html[data-theme='dark'] .ghost-btn,html[data-theme='dark'] .outline-btn{background:#354b39;color:#e4eddf;border-color:#587454}html[data-theme='dark'] .typing-panel textarea,html[data-theme='dark'] .custom-panel textarea,html[data-theme='dark'] .key,html[data-theme='dark'] .goal-edit input{background:#213026;border-color:#4d654e;color:#e6efe2}html[data-theme='dark'] .typing-text{color:#9eae9d}html[data-theme='dark'] .coffee-strip{background:#3c392f;border-color:#625b44;color:#f1e7d7}html[data-theme='dark'] .support-card-header,html[data-theme='dark'] .bank-info strong{color:#e8f0e3}
@media(max-width:1100px){.sidebar{padding:0 24px;gap:12px}.sidebar nav{gap:0}.nav-item{font-size:11px;padding:7px 9px}.content{padding:15px 25px 65px}.hero-art{width:43%;opacity:.87}.hero-content{max-width:60%}.hero h1{font-size:36px}}
@media(max-width:750px){.sidebar,html[data-theme='light'] .sidebar{height:auto;min-height:0;position:sticky;top:0;display:flex;flex-direction:column;gap:0;padding:10px 10px 7px;border-bottom:1px solid var(--line)}.sidebar .logo{display:flex;font-size:17px;margin:0 auto 8px}.sidebar nav{width:100%;gap:2px;display:flex;justify-content:space-around}.nav-item,.sidebar .nav-item{display:flex;flex-direction:column;flex:1;gap:0;min-height:47px;padding:5px 1px;font-size:9px}.nav-icon{font-size:17px}.sidebar-bottom{display:none}.topbar{height:37px;padding:0 18px}.mobile-logo{display:none}.breadcrumb{display:block;font-size:10px}.top-actions .desktop-only,.online-dot{display:none}.content{padding:11px 14px 45px}.hero{min-height:0;padding:25px 23px 0;display:block;border-radius:19px}.hero-content{max-width:none}.hero h1{font-size:30px;margin:14px 0}.hero p{font-size:11px}.hero-art{position:relative;right:auto;top:auto;height:185px;width:100%;opacity:1;justify-content:center}.hero-art img{height:190px;max-width:360px}.hero-tags{gap:10px;margin-top:15px}.hero-actions{margin-top:18px}.hero-actions button{font-size:11px}.welcome-row,.heading-row{margin-top:30px}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-card{min-height:137px}.daily-goal{padding:17px}.practice-metrics{grid-template-columns:repeat(2,1fr);gap:8px}.practice-metrics>div{padding:11px}.typing-text{font-size:17px}.keyboard-wrap{padding:13px 9px}.key-row{gap:3px}.key{font-size:9px;padding:8px 0}.finger-guide{gap:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.privacy-note{margin-top:12px;max-width:800px;font-size:12px;line-height:1.8;color:var(--ink)}.privacy-note summary{cursor:pointer;width:fit-content}.privacy-note p{margin:8px 0}
/* Mockup calm: live dashboard, learning path and guided keyboard. */
:root{--warm:#fcf8f0;--soft-line:#e9e3d8}
body{background:radial-gradient(ellipse at 12% 0%,#f1f2e4,transparent 40%),#faf7f0}
.content{max-width:1680px;padding:18px 30px 48px}.sidebar{padding:0 40px}.topbar{padding:0 40px}.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px;align-items:start}.home-main,.home-side{min-width:0}.study-stage{display:grid;grid-template-columns:1fr 1.08fr;overflow:hidden;border:1px solid #e3ddcf;border-radius:22px;background:#fbf8f2;box-shadow:0 10px 24px #6d603416}.study-stage .hero{min-height:580px;padding:38px 30px 230px;border:0;border-radius:0;background:radial-gradient(ellipse at top left,#fffaf1,#f2ecd9);box-shadow:none;position:relative;align-items:flex-start}.hero-content{max-width:100%;position:relative;z-index:1}.study-stage .hero h1{font-size:clamp(27px,2.45vw,40px);line-height:1.3;letter-spacing:-1px;margin:19px 0 8px}.study-stage .hero h1 span{color:#53663e}.hero p{font-size:13px;line-height:1.8;margin-top:18px}.hero .eyebrow{font-size:9px;background:#edf0de}.leaf-stroke{display:block;width:75px;height:11px;border-top:3px solid #91a568;border-radius:50%;transform:rotate(-6deg)}.study-art{position:absolute;bottom:-10px;left:0;width:100%;height:255px;object-fit:contain;object-position:bottom;pointer-events:none}.hero-actions{gap:8px;margin-top:20px}.hero-actions button{font-size:11px;padding:10px 15px}.hero-tags{font-size:9px;gap:8px;margin-top:15px}.practice-preview{align-self:center;padding:20px 15px;margin:10px;border:1px solid var(--soft-line);border-radius:18px;background:#fffdfa;box-shadow:0 2px 10px #554d2b08}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.preview-heading strong{font-size:16px}.preview-heading>span{font-size:9px;padding:8px;border:1px solid var(--soft-line);border-radius:10px}.preview-note{font-size:10px;color:var(--muted);line-height:1.7}.preview-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:15px 0}.preview-metrics>div{border:1px solid var(--soft-line);border-radius:12px;padding:10px 4px;text-align:center;font-size:9px;background:#faf8f3}.preview-metrics strong{display:block;font-size:20px;margin-top:5px;color:var(--ink)}.preview-text{font-family:ui-monospace,monospace;font-size:23px;font-weight:600;letter-spacing:2px;padding:20px 12px;margin:12px 0 20px;border:1px solid var(--soft-line);border-radius:12px;overflow-wrap:anywhere;color:#5d5a55;background:#fbf9f5}.preview-text mark{background:#deedc4;color:#5e7c3e;border-radius:5px;padding:3px}.cursor{color:#749d59}.preview-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px;font-size:10px}.preview-bottom .primary-btn{font-size:10px;padding:8px 15px;min-height:34px}.feature-list h2{font-size:20px;margin:1px 0 18px;letter-spacing:-.5px}.feature-item{display:flex;gap:11px;align-items:center;border:1px solid #e9e3d9;padding:12px;border-radius:17px;background:#fffdfa;box-shadow:0 3px 5px #6a573009;margin-bottom:9px}.feature-symbol{display:grid;place-items:center;border-radius:12px;background:#edf1dc;color:#72914c;font-size:27px;flex:0 0 48px;height:48px;font-weight:600}.tone-1{background:#e7eff4;color:#4a7897}.tone-2{background:#f9edce;color:#ab8233}.feature-item h3{font-size:13px;margin:0 0 4px}.feature-item p{font-size:10px;line-height:1.6;margin:0;color:#707466}.style-note{text-align:center;background:linear-gradient(160deg,#ecf3ed,#f9f5e3);border:4px solid #fff;border-radius:17px;padding:15px;font-size:12px;line-height:1.8}.coffee-card{padding:24px;background:linear-gradient(135deg,#fffdf9,#f4efdf);border:1px solid #e6dfcf;border-radius:22px;margin-top:22px;box-shadow:var(--shadow)}.coffee-card>span{font-size:55px;display:block}.coffee-card h2{font-size:20px;line-height:1.4;margin:9px 0}.coffee-card p{font-size:12px;line-height:1.8;color:#7c7e70}.coffee-card .primary-btn{font-size:11px;width:100%;margin-top:8px}.coffee-card small{display:block;margin-top:12px;color:var(--muted);font-size:9px;text-align:center}.overview-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:20px;background:var(--line);border:1px solid var(--line);border-radius:15px;overflow:hidden}.overview-strip>div{padding:15px 10px;background:var(--surface);text-align:center}.overview-strip strong{font-size:24px;color:var(--ink)}.overview-strip small{display:block;font-size:10px;font-weight:500;color:var(--muted);margin-top:3px}.dashboard-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}.mini-dashboard{min-width:0;padding:20px;background:var(--surface);border:1px solid var(--soft-line);border-radius:18px;box-shadow:var(--shadow)}.mini-dashboard .heading-row{margin:0 0 9px}.mini-dashboard h2{font-size:16px;margin:0}.mini-dashboard .text-link{font-size:10px;min-height:0;padding:0}.mini-dashboard>.muted{font-size:10px}.daily-goal{margin:18px 0}.roadmap{list-style:none;margin:22px 0;padding:0}.roadmap li{position:relative;display:flex;align-items:center;gap:14px;margin:0;padding:0 0 13px;min-width:0}.roadmap li:not(:last-child):before{content:'';position:absolute;left:11px;top:25px;bottom:-1px;border-left:2px dashed #d4dec6}.roadmap-node{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border:2px solid #c7d1bd;color:#829375;background:var(--surface);font-size:10px;border-radius:50%;z-index:1}.done .roadmap-node{background:#8baa63;border-color:#8baa63;color:#fff}.in-progress .roadmap-node{border-color:#90a56d;background:#f4f6df}.roadmap-card{display:flex;align-items:center;gap:12px;width:100%;min-width:0;padding:15px 17px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:13px;text-align:left}.done .roadmap-card{background:#f0f5e4}.in-progress .roadmap-card{border-color:#b9c99f;background:#fffdf5}.roadmap-card:hover{border-color:#8aa565;box-shadow:0 3px 12px #6d854518}.roadmap-key{display:grid;place-items:center;flex:0 0 45px;min-height:36px;font-weight:700;font-family:ui-monospace,monospace;color:#7c9a58;font-size:12px;background:#edf2e4;border-radius:7px}.roadmap-description{flex:1;min-width:0}.roadmap-description strong{font-size:13px;display:block}.roadmap-description small{font-size:11px;line-height:1.5;color:var(--muted);display:block;margin-top:5px}.roadmap-status{font-size:10px;white-space:nowrap;border-radius:15px;background:#edf2de;color:#6f8c47;padding:5px 9px}.in-progress .roadmap-status{background:#fcf0d9;color:#9b783a}.mini-dashboard .roadmap-card{padding:12px 9px;gap:8px}.mini-dashboard .roadmap-description strong{font-size:10px}.mini-dashboard .roadmap-description small{font-size:9px}.mini-dashboard .roadmap-status{display:none}.mini-dashboard .roadmap-key{flex-basis:32px;font-size:9px}.posture-guide{display:flex;align-items:start;gap:20px;padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:16px}.posture-guide h2{font-size:18px;margin:0 0 10px}.posture-guide p{font-size:13px;line-height:1.9;margin:5px 0}.keyboard-and-hands{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:15px;align-items:center}.keyboard-and-hands>.keyboard{width:100%;max-width:none;margin:0}.keyboard .key-row{gap:4px;margin:5px 0}.keyboard .key{font-family:inherit;max-width:none;font-size:10px;min-height:32px;padding:7px 1px;flex:1 1 0}.keyboard .key.modifier{flex:1.5 1 0;font-size:9px}.keyboard .key.space{flex:6 1 0;font-size:9px;max-width:none}.keyboard .home-key{background:#e6edda;border-color:#becfab;color:#607e45}.keyboard .home-key:after{content:'';display:block;width:8px;margin:1px auto -3px;border-bottom:2px solid #8ba26c}.hand-guide{padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:#859375;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.hand-guide strong{font-size:10px;color:var(--leaf-dark);margin-bottom:6px}.hand-guide svg{display:block;width:100%;height:auto}.hand-guide>span{display:flex;align-items:center;gap:6px;font-size:9px;margin:4px 0}.hand-guide b{display:grid;place-items:center;width:21px;height:23px;border-radius:7px;color:#5c7a39;background:#ddecbb}.hand-guide .right-key{color:#3b7596;background:#d5e8f4}.hand-guide small{font-size:8px;margin-top:7px}.hand-dot{fill:#e2e4d9}.hand-dot.active{fill:#8bb45a;stroke:#567c33;stroke-width:1.5}.practice-preview .keyboard-and-hands{grid-template-columns:minmax(0,1fr) 90px;gap:8px}.practice-preview .keyboard .key{font-size:7px;min-height:24px;padding:5px 0;border-radius:4px}.practice-preview .keyboard .modifier{font-size:6px}.practice-preview .keyboard .key-row{gap:2px;margin:3px 0}.practice-preview .hand-guide{padding:8px 5px}.practice-preview .hand-guide strong{font-size:8px}.practice-preview .hand-guide>span{font-size:7px;gap:3px}.practice-preview .hand-guide small{font-size:7px}.practice-preview .hand-guide b{width:15px;height:18px;font-size:8px}.practice-metrics{grid-template-columns:repeat(5,1fr)}.practice-bar-actions{align-items:center;flex-wrap:wrap;justify-content:flex-end}.lesson-select-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}select{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;max-width:100%}.stats-filter{display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:12px;margin-bottom:20px}.trend-chart{position:relative;min-width:0;margin:20px 0}.trend-chart svg{width:100%;display:block;overflow:visible}.trend-chart text{font-size:10px;fill:var(--muted)}.chart-grid{stroke:var(--line);stroke-width:1}.chart-area{fill:#afc982;opacity:.15}.chart-line{fill:none;stroke:#85a65d;stroke-width:2.5;stroke-linejoin:round}.chart-dot{fill:#88aa60;stroke:#668d40;stroke-width:1}.chart-caption{font-size:9px;color:var(--muted);text-align:center}.chart-empty{position:absolute;top:40%;left:12%;width:80%;text-align:center;font-size:11px;color:var(--muted);background:var(--surface);padding:10px}.result-card{max-width:750px;margin:25px auto;padding:35px}.result-burst{font-size:46px}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:25px 0}.result-stats strong{border:1px solid var(--line);background:var(--surface);border-radius:13px;padding:15px;font-size:24px}.privacy-note{margin:12px auto 0;text-align:left}.privacy-note summary{margin:auto}.privacy-note p{text-align:left}html[data-theme='dark'] .study-stage,html[data-theme='dark'] .practice-preview,html[data-theme='dark'] .feature-item,html[data-theme='dark'] .style-note,html[data-theme='dark'] .coffee-card,html[data-theme='dark'] .preview-metrics>div,html[data-theme='dark'] .preview-text,html[data-theme='dark'] .roadmap-card{background:var(--surface);border-color:var(--line);color:var(--ink)}html[data-theme='dark'] .study-stage .hero{background:linear-gradient(135deg,#2d4234,#344c3e)}html[data-theme='dark'] .roadmap-key,html[data-theme='dark'] .roadmap-status{background:#40553a;color:#d0e5bc}html[data-theme='dark'] .chart-empty{background:var(--surface)}html[data-theme='dark'] .feature-item p,html[data-theme='dark'] .coffee-card p{color:var(--muted)}html[data-theme='dark'] .mini-dashboard{border-color:var(--line)}
@media(min-width:1700px){.study-stage .hero{min-height:620px}.practice-preview{padding:25px 20px}.preview-text{font-size:28px}}
@media(max-width:1250px){.home-grid{grid-template-columns:minmax(0,1fr) 250px;gap:16px}.study-stage{grid-template-columns:1fr}.study-stage .hero{min-height:400px;padding:30px 45% 30px 28px}.study-art{width:47%;height:100%;left:auto;right:0}.study-stage .hero .hero-content{max-width:none}.study-stage .hero h1{font-size:32px}.practice-preview{margin:0 12px 12px}.practice-preview .keyboard .key{font-size:9px;min-height:28px}.practice-preview .keyboard-and-hands{grid-template-columns:minmax(0,1fr) 120px}.dashboard-cards{grid-template-columns:1fr}.feature-item{padding:10px}.feature-symbol{flex-basis:40px;height:42px;font-size:24px}}
@media(max-width:900px){.home-grid{grid-template-columns:1fr}.home-side{display:grid;grid-template-columns:1fr 1fr;gap:20px}.coffee-card{margin:0;align-self:start}.feature-list h2{font-size:18px}.study-stage{grid-template-columns:1fr 1fr}.study-stage .hero{min-height:590px;padding:28px 24px 230px}.study-art{width:100%;height:240px;left:0;right:auto}.study-stage .hero h1{font-size:29px}.practice-preview{margin:12px 12px 12px 0}.practice-preview .keyboard-and-hands{grid-template-columns:1fr}.practice-preview .hand-guide{display:none}.dashboard-cards{grid-template-columns:1fr 1fr}.practice-bar{align-items:start}.practice-bar-actions{max-width:55%}.lesson-select-label{width:100%;display:block}.lesson-select-label select{width:100%;display:block;margin-top:5px}}
@media(max-width:650px){.content{padding:10px 12px 35px}.study-stage{grid-template-columns:1fr}.study-stage .hero{min-height:410px;padding:25px 24px 185px}.study-stage .hero h1{font-size:30px}.study-stage .hero p{font-size:12px}.study-art{height:195px;object-position:right bottom;opacity:.8}.hero-tags{position:relative;z-index:1}.practice-preview{margin:0 10px 10px}.practice-preview .keyboard-and-hands{grid-template-columns:minmax(0,1fr) 90px}.practice-preview .hand-guide{display:flex}.practice-preview .keyboard .key{font-size:7px;min-height:24px}.preview-text{font-size:21px}.home-side,.dashboard-cards{display:block}.feature-list{margin-top:25px}.coffee-card{margin-top:20px}.mini-dashboard{margin-top:15px}.overview-strip{grid-template-columns:1fr 1fr}.overview-strip strong{font-size:22px}.practice-metrics{grid-template-columns:repeat(3,1fr)}.practice-metrics>div:last-child{grid-column:span 2}.practice-bar{display:block}.practice-bar-actions{max-width:none;justify-content:flex-start;margin-top:14px}.keyboard-and-hands{grid-template-columns:1fr}.keyboard-and-hands .hand-guide{max-width:260px;width:100%;margin:5px auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px}.hand-guide svg{grid-row:span 4;grid-column:2}.roadmap-card{gap:8px;padding:12px}.roadmap-description strong{font-size:11px}.roadmap-description small{font-size:10px}.roadmap-status{font-size:8px;padding:4px;white-space:normal;max-width:65px}.roadmap-key{flex-basis:30px;font-size:10px}.roadmap li{gap:8px}.posture-guide{padding:18px;gap:12px}.posture-guide .feature-symbol{display:none}.result-stats{grid-template-columns:repeat(2,1fr)}.result-card{padding:22px 15px}.stats-filter{justify-content:flex-start}.daily-goal{align-items:start}.goal-progress{min-width:110px}.feature-item p{font-size:11px}}
@media(max-width:750px){html[data-theme] .sidebar .nav-item{flex:1 1 0;min-width:0;padding:5px 1px;font-size:9px;white-space:normal}html[data-theme] .sidebar nav{min-width:0;width:100%;gap:2px}.sidebar .nav-icon{flex-shrink:0}}
.progress-detail{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);margin-top:16px}