:root{--blue:#1558d6;--blue2:#0d3d99;--ink:#172033;--muted:#68758a;--line:#dce4ef;--bg:#f4f7fb;--card:#fff;--green:#15955a;--red:#d64040;--shadow:0 12px 34px rgba(18,42,76,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.nav{max-width:1200px;margin:auto;padding:13px 18px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px}.brand{font-size:23px;font-weight:950;text-decoration:none;color:var(--blue)}.brand span{color:#111}
main{max-width:1200px;margin:auto;padding:0 18px 50px}.hero{text-align:center;padding:40px 0 25px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:950;color:var(--blue)}.hero h1{font-size:clamp(30px,5vw,50px);margin:9px 0;letter-spacing:-1.5px}.hero p{max-width:900px;margin:auto;color:var(--muted);font-family:"Raavi","Nirmala UI",sans-serif;font-size:17px;line-height:1.8}.no-speed{display:inline-block;margin-top:15px;background:#eaf8f0;color:#37735a;padding:9px 13px;border-radius:8px;font-size:10px;font-weight:800}
.top-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow)}.lesson-card,.settings-card,.practice,.keyboard-card,.learning,.seo{padding:19px}.section-title{display:flex;gap:10px;align-items:flex-start}.step{width:29px;height:29px;border-radius:50%;background:#eaf2ff;color:var(--blue);display:grid;place-items:center;font-weight:950;font-size:12px;flex:none}.section-title h2{margin:0}.section-title p,.settings-card>p{margin:4px 0 0;color:var(--muted);font-size:10px}.lessons{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:15px}.lesson{border:1px solid var(--line);border-radius:11px;padding:11px;text-align:left;background:#fff;cursor:pointer}.lesson:hover,.lesson.active{border-color:#8eb3f5;background:#f2f7ff}.lesson b{display:block;font-size:11px}.lesson span{display:block;margin-top:4px;color:var(--muted);font-family:"Raavi","Nirmala UI",sans-serif;font-size:13px}.lesson small{display:block;color:var(--blue);font-size:9px;margin-top:5px}
label{display:block;text-transform:uppercase;font-size:10px;font-weight:950;color:#647084;margin:12px 0 6px}select,textarea,input{font:inherit}select{width:100%;height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px;color:var(--ink)}.font-preview{margin-top:12px;padding:16px;border-radius:10px;background:#f6f8fb;border:1px solid var(--line);font-family:"Raavi","Nirmala UI",sans-serif;font-size:25px;text-align:center}.tip{margin-top:11px;padding:10px;background:#f8fbff;border-left:3px solid var(--blue);font-size:10px;color:var(--muted);line-height:1.6}
.practice{margin-top:16px}.practice-head,.keyboard-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.practice-actions{display:flex;gap:6px}.btn{border:0;border-radius:9px;padding:10px 13px;font-size:10px;font-weight:950;cursor:pointer}.primary{background:linear-gradient(135deg,#1558d6,#3f80ef);color:#fff}.secondary{background:#edf4ff;color:var(--blue);border:1px solid #cadbf8}.danger{background:#fff0f0;color:var(--red);border:1px solid #efcaca}.live-box{margin-top:15px;border:1px solid #cfd9e6;border-radius:13px;overflow:hidden}.live-label{height:35px;background:#f7f9fc;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 11px;font-size:9px;font-weight:950;color:#6b7789}.live-label span:first-child{color:var(--blue)}textarea{width:100%;height:180px;border:0;resize:vertical;padding:17px;font-family:"Raavi","Nirmala UI",sans-serif;font-size:28px;line-height:1.8;outline:none;color:#101a2b}.lesson-prompt{margin-top:12px;padding:11px 13px;background:#f8fbff;border:1px solid #e3ebf6;border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px}.lesson-prompt span{display:block;color:var(--muted);font-family:"Raavi","Nirmala UI",sans-serif;font-size:13px;margin-top:4px}
.keyboard-card{margin-top:16px}.key-indicator{background:#f3f6fa;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:10px;color:var(--muted)}.key-indicator b{color:var(--blue);font-family:"Raavi","Nirmala UI",sans-serif;font-size:18px}.keyboard{margin-top:17px;background:#1a2435;border-radius:14px;padding:13px;overflow-x:auto}.key-row{display:flex;justify-content:center;gap:6px;margin:6px 0;min-width:850px}.key{height:57px;min-width:56px;border:1px solid #46546a;border-radius:8px;background:#263349;color:#eaf0f8;box-shadow:0 3px 0 #111a27;cursor:pointer;transition:.08s;display:flex;flex-direction:column;align-items:center;justify-content:center}.key:hover{background:#315078}.key:active,.key.pressed{transform:translateY(3px);box-shadow:0 0 0 #111a27;background:#1d9a62}.key.lesson-key{background:#174d93;border-color:#5f9eea}.key .char{font-family:"Raavi","Nirmala UI",sans-serif;font-size:24px;line-height:1}.key .latin{font-size:8px;color:#aebbd0;margin-top:4px}.key.wide{min-width:130px}.key.space{min-width:350px}.key-help{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:9px}
.learning{margin-top:16px}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:15px}.guide-grid>div{border:1px solid var(--line);border-radius:11px;padding:14px}.guide-icon{font-size:27px}.guide-grid h3{font-size:13px;margin:7px 0}.guide-grid p,.seo p,.seo li{font-size:12px;line-height:1.8;color:#566276}.seo{margin-top:16px}.seo h2{font-size:24px}.seo h3{margin-top:25px}.seo details{border-top:1px solid var(--line);padding:12px 0}.seo summary{font-weight:900;cursor:pointer}.seo details p{margin:8px 0 0}
footer{max-width:1200px;margin:auto;padding:25px 18px 40px;display:flex;justify-content:space-between;color:#7d8797;font-size:10px}
@media(max-width:900px){.top-grid{grid-template-columns:1fr}.guide-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.nav span{display:none}.lessons,.guide-grid{grid-template-columns:1fr}.practice-head,.keyboard-head,.lesson-prompt{flex-direction:column}.practice-actions{width:100%}.practice-actions .btn{flex:1}.hero p{font-size:15px}.keyboard{margin-left:-5px;margin-right:-5px}.key-row{min-width:800px}}