:root{--bg:#edf1f2;--card:#fff;--ink:#17211f;--muted:#6d7b78;--line:#d9e1df;--blue:#0f765f;--blue2:#e6f3ef;--green:#0f765f;--gold:#f4b63e;--shadow:0 18px 48px rgba(21,60,51,.09);--nav:#095b4c;--nav-deep:#064b40;--nav-soft:#137765}
body{background:var(--bg);font-family:"Segoe UI",Tahoma,Arial,sans-serif}
header{height:64px;padding:0 24px;background:linear-gradient(100deg,var(--nav-deep),var(--nav));color:#fff;border:0;box-shadow:0 5px 22px rgba(3,55,45,.2)}
.brand-mark{width:38px;height:38px;border-radius:10px;background:#fff;color:var(--nav);box-shadow:0 6px 16px rgba(0,0,0,.15)}.brand small{color:#b7d7cf}.brand b{letter-spacing:.01em}
.streak{background:rgba(255,255,255,.13);color:#fff}.langs{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08)}.langs button{color:#cbe0db}.langs button.active{background:#fff;color:var(--nav)}header .icon{border-color:rgba(255,255,255,.25);color:#fff}
.app-menubar{top:64px;height:42px;background:#f8faf9;border-color:#d7e1de;box-shadow:0 5px 16px rgba(22,57,49,.06)}.app-menubar summary{height:41px}.app-menubar details[open] summary,.app-menubar summary:hover{background:var(--blue2);color:var(--blue)}
.shell{grid-template-columns:232px minmax(0,1fr);min-height:calc(100vh - 64px)}
aside{background:linear-gradient(180deg,var(--nav),var(--nav-deep));color:#fff;border:0;padding:18px 13px;box-shadow:6px 0 24px rgba(4,68,57,.13);z-index:5}
.profile{border-radius:14px;background:rgba(255,255,255,.08);margin-bottom:7px}.profile #avatar{background:#fff;color:var(--nav)}.profile small{color:#b9d6cf}.profile .mini{color:#d7ece7}
.sidebar-toggle{height:42px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;margin-bottom:8px}.sidebar-toggle:hover{background:rgba(255,255,255,.15)}
aside nav{gap:4px;margin-top:11px}.nav{color:#c5ddd7;padding:11px 14px;border-radius:9px}.nav:hover,.nav.active{background:#fff;color:var(--nav);box-shadow:0 7px 17px rgba(0,0,0,.13)}
.side-card{background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.1);border-radius:15px}.ring:before{background:var(--nav-deep)}
main{max-width:1540px;padding:30px 34px}.view{animation:premiumIn .24s ease}@keyframes premiumIn{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}}
.hero,.weak-card,.lesson-stage,.practice-card,.heat-card,.article-grid article,.cards article,.game-cards article,.stat-grid article{border:1px solid #dbe3e1;box-shadow:0 12px 36px rgba(24,66,56,.06)}
.hero{border-radius:22px;padding:38px;background:linear-gradient(135deg,#fff 65%,#edf7f4)}.hero h1{font-size:42px}.hero h1 em,.eyebrow{color:var(--blue)}
.hero-score{background:linear-gradient(145deg,var(--nav),var(--nav-deep));color:#fff}.primary{background:var(--blue)}.secondary{color:var(--blue)}
.cards article,.game-cards article,.stat-grid article,.article-grid article{border-radius:16px}.cards article:hover,.article-grid article:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(17,91,73,.12);transition:.2s}
.lesson-stage{border-radius:14px}.lesson-stage>summary{background:#fbfcfc}.lesson-stage>summary:before{background:var(--blue2);color:var(--blue)}.lesson-row:hover{background:#f2f8f6}.lesson-row .number{background:var(--blue2);color:var(--blue)}
.lesson-drills button:first-child{background:var(--blue);border-color:var(--blue)}
.section-head h1{font-size:30px}.section-head select,select{border-color:#ccd8d4;background:#fff;border-radius:10px}
.practice-focus .shell{grid-template-columns:70px minmax(0,1fr)}.practice-focus aside{padding-inline:9px}.practice-focus main{padding:18px 28px 26px;background:#e9eeee}.practice-focus .section-head{margin:0 auto 11px;max-width:1320px}.practice-focus .section-head h1{font-size:22px}
.practice-focus .practice-card{max-width:1320px;margin:auto;padding:18px 24px 20px;border-radius:18px;background:#f8faf9;box-shadow:0 16px 45px rgba(17,65,54,.1)}
.practice-focus .live-metrics{display:flex;justify-content:center;gap:8px;background:transparent;border:0;margin-bottom:10px}.practice-focus .live-metrics span{min-width:118px;background:#fff;border:1px solid #dce4e2!important;border-radius:9px;padding:7px 14px;box-shadow:0 4px 12px rgba(18,63,53,.04)}
.training-coach{max-width:1180px;margin:0 auto 10px;grid-template-columns:92px 1fr}.coach-next{border-radius:11px;background:var(--nav);box-shadow:none}.coach-guidance{border-radius:11px;background:#fff}.coach-guidance>span{background:var(--blue2);color:var(--blue)}
.practice-focus .prompt{max-width:1180px;min-height:174px;margin:0 auto 14px;padding:25px 34px;border-radius:14px;background:#fff!important;border:1px solid #d4ddda;box-shadow:inset 0 0 0 1px #f3f6f5,0 8px 22px rgba(15,70,57,.06);font-size:39px;line-height:1.7;letter-spacing:0}.practice-focus .prompt .current{background:transparent;color:var(--blue);border-bottom:3px solid var(--blue);border-radius:0;padding:0 2px;box-shadow:none;transform:none}.prompt .correct{color:var(--blue)}
#typingInput{max-width:1180px;margin:0 auto 10px;border:2px solid #cdd9d5;background:#fff;border-radius:10px;padding:13px 16px;box-shadow:0 5px 14px rgba(17,70,57,.05)}#typingInput:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(15,118,95,.12)}
.practice-focus .keyboard{max-width:1180px;margin:0 auto;gap:7px}.practice-focus .key-row{gap:7px}.practice-focus .key{height:53px;min-width:57px;border-radius:7px;background:linear-gradient(#fff,#f4f6f5);border:1px solid #cfd7d5;color:#303a38;box-shadow:0 3px 0 #bdc8c5,0 5px 10px rgba(24,54,48,.08);font-size:20px}.practice-focus .key:hover{transform:translateY(1px);box-shadow:0 2px 0 #bdc8c5}.practice-focus .key.active{background:var(--nav)!important;color:#fff!important;border-color:var(--nav);box-shadow:0 3px 0 #043e34,0 0 0 4px rgba(15,118,95,.17)}.practice-focus .key.home-key:after{background:var(--blue)}.practice-focus .key.space{width:min(430px,42vw)}.key.shift-key{min-width:92px!important}
.practice-card.home-stage .key:not(.learned):not(.active){opacity:.78;filter:none;transform:none;color:#66716e;background:linear-gradient(#fff,#f1f4f3);border-color:#d4dcda}.practice-card.home-stage .key.learned{opacity:1;color:#27332f}.dark .practice-card.home-stage .key:not(.learned):not(.active){opacity:.72;color:#b8c5c0;background:linear-gradient(#293631,#202b27);border-color:#3b4b46}
.practice-focus .hands{margin-top:12px}.practice-focus .hands div{background:#fff;color:var(--nav);border:1px solid #d5dfdc;box-shadow:0 5px 14px rgba(14,66,54,.05)}.hands>div.hand-active{background:var(--nav)!important}
.article-grid{gap:14px}.article-grid article>span{color:var(--blue)}.article-grid button{background:var(--nav)}
.session-card,.onboarding-card{border:1px solid rgba(15,118,95,.18)}.session-avatar,.onboarding-logo{background:var(--nav)!important}.session-user:hover{border-color:var(--blue);background:var(--blue2)}
body.dark{--bg:#0d1513;--card:#17221f;--ink:#f2f7f5;--muted:#b7c5c0;--line:#34463f;--blue:#55c7a9;--blue2:#203a34}.dark main,.dark.practice-focus main{background:#0d1513}.dark .app-menubar{background:#151f1c;border-color:#30423c;color:#d8e5e0}.dark .app-menubar button{color:#c2d1cc}.dark .hero{background:linear-gradient(135deg,#17221f 65%,#19352e);border-color:#40534c}.dark .hero p,.dark .cards p,.dark .game-cards p,.dark .weak-card p,.dark .lesson-row p{color:#b7c5c0}.dark .cards article,.dark .game-cards article,.dark .weak-card,.dark .heat-card,.dark .best,.dark .lesson-row,.dark .lesson-stage>summary,.dark .practice-focus .practice-card{background:#17221f;border-color:#34463f}.dark .cards article:hover,.dark .lesson-row:hover{background:#1d2d28;border-color:#49645b}.dark .secondary,.dark .cards button,.dark select{background:#1c2925;color:#edf5f2;border-color:#40534c}.dark .practice-focus .prompt,.dark #typingInput,.dark .coach-guidance,.dark .practice-focus .live-metrics span,.dark .practice-focus .hands div{background:#202c28;border-color:#40554d;color:#edf5f2}.dark .practice-focus .key{background:linear-gradient(#293631,#202b27);border-color:#465a53;color:#edf5f2;box-shadow:0 3px 0 #09100e}.dark aside .nav:not(.active){color:#d2e0db}.dark aside .nav:not(.active):hover{background:rgba(255,255,255,.1);color:#fff}.dark .profile{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.dark.practice-focus .practice-card{background:#131f1c!important;border:1px solid #344941!important;box-shadow:0 18px 55px rgba(0,0,0,.28)}.dark.practice-focus .prompt{background:#1b2925!important;color:#f4f8f7!important;border-color:#466158!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 8px 22px rgba(0,0,0,.18)}.dark.practice-focus .prompt span{color:#e8f0ed!important;opacity:1!important}.dark.practice-focus .prompt .correct{color:#66d6b7!important}.dark.practice-focus .prompt .current{color:#7ff0cf!important;background:rgba(85,199,169,.12)!important;border-bottom-color:#69ddbd!important}.dark.practice-focus .prompt .wrong{color:#fff!important;background:#c63f4d!important}.dark.practice-focus .key{opacity:1!important;filter:none!important;transform:none;background:linear-gradient(#35443f,#293630)!important;color:#f2f7f5!important;border-color:#53665f!important;box-shadow:0 3px 0 #101815,0 5px 10px rgba(0,0,0,.2)!important}.dark.practice-focus .key.learned{background:linear-gradient(#224a40,#19372f)!important;color:#fff!important;border-color:#3a7565!important}.dark.practice-focus .key.active{background:#0f8067!important;color:#fff!important;border-color:#72e2c2!important;box-shadow:0 3px 0 #075344,0 0 0 4px rgba(105,221,189,.24)!important;transform:translateY(2px) scale(1.05)!important}.dark.practice-focus .key.space{color:#f2f7f5!important}.dark.practice-focus .key[data-shift-char] sup{color:#7fe0c4!important}.dark.practice-focus .hands div{background:#1c2c27!important;color:#dff4ed!important;border-color:#40574f!important}.dark.practice-focus .hands>div.hand-active{background:#0f765f!important;color:#fff!important}.dark.practice-focus .live-metrics span,.dark.practice-focus .coach-guidance{background:#1b2925!important;color:#f2f7f5!important;border-color:#3e544c!important}
.practice-card.typing-mistake{animation:typingMistake .18s ease}.prompt .current.mistake-pulse{color:#fff!important;background:var(--red)!important;border-bottom-color:var(--red)!important}@keyframes typingMistake{50%{box-shadow:0 0 0 3px rgba(230,75,85,.28),0 18px 55px rgba(230,75,85,.12)}}
@media(max-width:900px){.shell{grid-template-columns:78px 1fr}aside{padding-inline:9px}aside .profile,aside .nav span,aside .side-card,.sidebar-toggle b{display:none}.nav{justify-content:center;font-size:20px}.hero{grid-template-columns:1fr}.practice-focus .prompt{font-size:31px;min-height:145px}.practice-focus .key{min-width:42px;height:48px}.article-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){header{padding:0 12px}.brand small,.streak{display:none}.shell{display:block}.shell aside{display:none}main,.practice-focus main{padding:14px}.cards,.article-grid,.game-cards{grid-template-columns:1fr!important}.practice-focus .practice-card{padding:13px}.practice-focus .live-metrics span{min-width:70px;padding:6px}.training-coach{grid-template-columns:72px 1fr}.practice-focus .prompt{font-size:25px;min-height:125px;padding:18px}.practice-focus .keyboard{overflow-x:auto;padding-bottom:7px}.practice-focus .key-row{min-width:720px}.practice-focus .hands{display:none}}
.input-policy-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.input-policy-box>span{padding:7px 11px;border-radius:99px;font-size:11px;font-weight:850}
.policy-strict{background:var(--blue2);color:var(--blue)}
.policy-flow{background:#fff3d8;color:#8a5b00}
.input-policy-box label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}
.input-policy-box label[hidden]{display:none}
.input-policy-box select{padding:8px 10px;min-width:220px}
.lesson-standard,.lesson-level-standard{display:inline-flex;align-items:center;width:max-content;padding:6px 10px;border-radius:999px;background:#edf8f3;color:#17654a;font-size:11px;font-weight:800}
.lesson-standard[hidden]{display:none}
.lesson-level-standard{margin-top:6px}
.drills-beginner button{border-color:#b7dfcf}.drills-intermediate button{border-color:#9cbce9}.drills-advanced button{border-color:#d9b26f}
.dark .lesson-standard,.dark .lesson-level-standard{background:#17392f;color:#9ee0c7}
.dark .policy-flow{background:#44381a;color:#ffe49a}
@media(max-width:720px){.input-policy-box{justify-content:flex-start}.input-policy-box label{width:100%;align-items:flex-start;flex-direction:column}.input-policy-box select{width:100%}}
.practice-card[data-writing-dir] .prompt{white-space:pre-wrap!important;word-break:normal!important;overflow-wrap:normal!important;unicode-bidi:plaintext}