:root{--bg:#f2f5f9;--card:#fff;--ink:#131820;--muted:#6d7787;--line:#dce3ec;--blue:#3467f2;--blue2:#ebf0ff;--green:#0e9b73;--red:#e64b55;--gold:#f3ae2b;--shadow:0 18px 55px rgba(27,42,70,.08)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Tahoma,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}header{height:76px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:13px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px}.brand b,.brand small{display:block}.brand small{color:var(--muted);font-size:12px;margin-top:2px}.header-actions,.langs{display:flex;align-items:center;gap:9px}.langs{padding:4px;border:1px solid var(--line);border-radius:12px}.langs button,.icon{border:0;background:transparent;border-radius:9px;padding:8px 10px;color:var(--muted)}.langs button.active{background:var(--ink);color:#fff}.icon{border:1px solid var(--line);font-size:18px}.streak{padding:9px 14px;background:#fff7e1;border-radius:99px;color:#8b6200}.shell{display:grid;grid-template-columns:245px 1fr;min-height:calc(100vh - 76px)}aside{background:var(--card);border-inline-end:1px solid var(--line);padding:25px 16px;display:flex;flex-direction:column}.profile{display:flex;gap:10px;align-items:center;padding:10px}.profile #avatar{width:44px;height:44px;border-radius:50%;background:var(--blue2);color:var(--blue);font-size:20px;font-weight:800;display:grid;place-items:center}.profile div:nth-child(2){flex:1}.profile b,.profile small{display:block}.profile small{color:var(--muted);font-size:11px;margin-top:3px}.mini{border:0;background:transparent;color:var(--blue);font-size:11px}nav{display:grid;gap:7px;margin-top:28px}.nav{border:0;background:transparent;border-radius:12px;padding:13px 15px;text-align:start;color:var(--muted);font-weight:650;display:flex;gap:12px}.nav.active,.nav:hover{background:var(--blue2);color:var(--blue)}.side-card{margin-top:auto;background:#111827;color:#fff;border-radius:18px;padding:17px;text-align:center}.ring{width:82px;height:82px;margin:14px auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) 0%,#293144 0)}.ring:before{content:"";position:absolute;width:63px;height:63px;border-radius:50%;background:#111827}.ring span{position:relative;font-weight:800}.side-card small{color:#aab3c3}main{padding:38px;max-width:1500px;width:100%;margin:auto}.view{display:none}.view.active{display:block}.hero{display:grid;grid-template-columns:1.5fr .6fr;gap:40px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:45px;box-shadow:var(--shadow)}.eyebrow{color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.05em}.hero h1{font-size:45px;line-height:1.25;margin:14px 0}.hero h1 em{color:var(--blue);font-style:normal}.hero p{color:var(--muted);font-size:17px;line-height:1.8;max-width:700px}.primary,.secondary,.danger,.cards button{border-radius:12px;padding:12px 19px;font-weight:750}.primary{border:0;background:var(--blue);color:#fff}.secondary{border:1px solid var(--line);background:var(--card);color:var(--ink)}.danger{border:1px solid #ffd0d3;background:#fff3f4;color:var(--red)}.hero-score{background:#101722;color:#fff;border-radius:22px;padding:26px;text-align:center}.hero-score>small{color:#9da8ba}.hero-score strong{display:block;font-size:55px;margin:12px}.hero-score strong i{font-size:13px;color:#8590a2}.hero-score>div{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #2b3546;padding-top:15px}.hero-score span b,.hero-score span small{display:block}.hero-score small{font-size:11px;color:#9da8ba}.cards,.game-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}.cards article,.game-cards article,.weak-card,.practice-card,.heat-card,.best{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px}.cards article>span{color:var(--blue);font-weight:800;font-size:12px}.cards article>b{display:block;font-size:20px;margin:13px 0}.cards p,.game-cards p{color:var(--muted);min-height:45px}.cards button{border:1px solid var(--line);background:transparent}.weak-card{display:flex;justify-content:space-between;align-items:center}.weak-card h2{margin:8px 0}.weak-card p{color:var(--muted)}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.section-head h1{font-size:36px;margin:8px 0 0}.section-head select{min-width:240px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.lesson{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;position:relative}.lesson.locked{opacity:.55}.lesson.done{border-color:#9fe0cb}.lesson .number{width:38px;height:38px;border-radius:11px;background:var(--blue2);color:var(--blue);display:grid;place-items:center;font-weight:800}.lesson h3{margin:15px 0 8px}.lesson p{color:var(--muted);font-size:13px}.lesson footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.lesson footer span{font-size:12px;color:var(--muted)}.lesson button{border:0;background:var(--ink);color:#fff;padding:9px 14px;border-radius:10px}.practice-card{padding:28px}.live-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:25px;border-bottom:1px solid var(--line);padding-bottom:18px}.live-metrics span{text-align:center;border-inline-end:1px solid var(--line)}.live-metrics span:last-child{border:0}.live-metrics b,.live-metrics small{display:block}.live-metrics b{font-size:23px}.live-metrics small{color:var(--muted);font-size:11px}.prompt{min-height:115px;padding:24px;background:#f7f9fc;border-radius:15px;font-size:29px;line-height:1.8;letter-spacing:.02em;word-break:break-word}.prompt .correct{color:var(--green)}.prompt .wrong{color:#fff;background:var(--red);border-radius:3px}.prompt .current{border-bottom:3px solid var(--blue);background:var(--blue2)}#typingInput{position:absolute;opacity:0;pointer-events:none}.finger-hint{text-align:center;color:var(--blue);font-weight:650;min-height:24px}.keyboard{direction:ltr;display:grid;gap:7px;max-width:940px;margin:10px auto}.key-row{display:flex;justify-content:center;gap:7px}.key{height:52px;min-width:52px;padding:5px;border:1px solid #cfd7e3;background:#fff;border-radius:9px;box-shadow:0 3px 0 #cbd3df;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px}.key small{font-size:9px;color:var(--muted)}.key.home-key{border-bottom-color:var(--blue);border-bottom-width:4px}.key.active{background:var(--blue);color:#fff;transform:translateY(2px);box-shadow:0 1px 0 #1f49b9}.key.finger-lp,.key.finger-rp{border-top:3px solid #e76f79}.key.finger-lr,.key.finger-rr{border-top:3px solid #f5a33a}.key.finger-lm,.key.finger-rm{border-top:3px solid #52a7e8}.key.finger-li,.key.finger-ri{border-top:3px solid #57b989}.key.space{width:330px}.hands{display:flex;justify-content:center;gap:180px;color:var(--muted);margin-top:18px}.test-options{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.test-options button{height:120px;border:1px solid var(--line);background:var(--card);border-radius:18px;font-size:28px;font-weight:800}.test-options button span{font-size:13px;color:var(--muted)}.best{margin-top:20px;color:var(--muted)}.game-cards{grid-template-columns:1fr 1fr}.game-cards article{text-align:center;padding:35px}.game-art{font-size:70px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stat-grid article{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}.stat-grid small,.stat-grid strong,.stat-grid span{display:block}.stat-grid small{color:var(--muted)}.stat-grid strong{font-size:40px;margin:10px 0}.heat-card{margin-top:18px}.heatmap{display:flex;flex-wrap:wrap;gap:9px}.heat{padding:12px 16px;border-radius:9px;background:var(--blue2)}.modal{position:fixed;inset:0;background:rgba(7,12,20,.72);display:grid;place-items:center;z-index:30;padding:25px}.modal.hidden{display:none}.dialog,.game-shell{background:var(--card);border-radius:22px;padding:25px;width:min(570px,95vw);position:relative}.close{position:absolute;inset-inline-end:15px;top:15px;border:0;background:transparent;font-size:25px}.dialog input{width:100%;padding:13px;border:1px solid var(--line);border-radius:11px;margin:15px 0}.profile-item{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid var(--line)}.game-shell{width:min(1100px,96vw);background:#0c1422;color:#fff}.game-top,.game-top>div{display:flex;align-items:center;justify-content:space-between;gap:22px}.game-top{margin-bottom:14px}.game-top button{background:#253044;color:#fff;border:0;border-radius:10px;font-size:22px}#gameCanvas{width:100%;height:auto;background:linear-gradient(#071b3c,#0c4061 62%,#052d3d 63%);border-radius:15px}.game-input{display:flex;gap:10px;margin-top:12px}.game-input input{flex:1;background:#172338;border:1px solid #33445e;color:#fff;border-radius:11px;padding:13px}.result-dialog{text-align:center}.trophy{font-size:60px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);margin:25px 0}.result-grid b,.result-grid small{display:block}.result-grid b{font-size:30px}.dark{--bg:#0d121b;--card:#151c27;--ink:#f4f7fb;--muted:#98a4b6;--line:#283243;--blue2:#1b294d}.dark .prompt{background:#0e1520}.dark .key{background:#1b2432;border-color:#354156;box-shadow:0 3px 0 #080c12}.dark .studio{}@media(max-width:1050px){.shell{grid-template-columns:88px 1fr}aside .profile div:nth-child(2),aside .profile button,.nav span,.side-card{display:none}.nav{justify-content:center;font-size:20px}.hero{grid-template-columns:1fr}.cards,.lesson-grid{grid-template-columns:1fr 1fr}}@media(max-width:720px){header{padding:0 14px}.brand small,.streak{display:none}.shell{display:block}aside{padding:8px;position:sticky;top:76px;z-index:9}aside .profile{display:none}nav{display:flex;overflow:auto;margin:0}.nav{min-width:55px}main{padding:18px}.hero{padding:25px}.hero h1{font-size:30px}.cards,.lesson-grid,.game-cards,.stat-grid,.test-options{grid-template-columns:1fr}.keyboard{transform:scale(.75);transform-origin:center top;margin-bottom:-80px}.key{min-width:43px;height:48px}.hands{gap:25px}}