:root{--bg:#080d1b;--panel:#10182e;--violet:#8b5cf6;--violet2:#a78bfa;--mint:#6ee7b7;--coral:#fb7185;--text:#f7f7fc;--muted:#aaa8c9;--line:rgba(167,139,250,.25)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}button,textarea,select{font:inherit}a{color:inherit;text-decoration:none}.shell{width:min(1310px,calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(8,13,27,.86);backdrop-filter:blur(18px)}.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:13px;font-size:20px;font-weight:650}.brand b{color:var(--violet2)}.brand-mark{width:35px;display:grid;grid-template-columns:repeat(3,7px);gap:4px}.brand-mark i{width:7px;height:7px;border-radius:2px;background:var(--violet2)}.brand-mark i:nth-last-child(-n+2){background:var(--mint)}.nav{display:flex;gap:42px;color:#cac9db;font-size:14px}.nav a{padding:31px 0 27px}.nav a:hover{color:#fff}.menu-button{display:none;background:none;border:0}.menu-button span{display:block;width:24px;height:2px;margin:5px;background:#fff}
.hero{min-height:620px;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:70px;padding-block:72px 64px}.eyebrow{color:var(--violet2);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:750;display:inline-flex;align-items:center;gap:8px}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint)}.hero h1{font-size:clamp(48px,5.3vw,78px);line-height:1.04;letter-spacing:-.055em;margin:22px 0 26px}.hero h1 span{color:var(--violet)}.hero-copy>p{color:var(--muted);font-size:19px;line-height:1.7;margin:0 0 34px}.primary-button{display:inline-flex;min-width:288px;justify-content:center;align-items:center;gap:12px;padding:20px 28px;border:1px solid #c4b1ff;border-radius:12px;font-weight:750;background:linear-gradient(135deg,#9c6eff,#6138dd);box-shadow:0 12px 34px rgba(107,59,227,.34)}.trust-row{display:flex;flex-wrap:wrap;gap:20px;margin-top:23px;color:#9392aa;font-size:12px}
.demo-card,.practice-card,.live-card,.keyboard-guide{border:1px solid var(--line);background:linear-gradient(145deg,#121b34,#0c1224);border-radius:20px}.demo-card{padding:35px}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(255,255,255,.11);padding-bottom:28px}.metric-grid div{text-align:center}.metric-grid div+div{border-left:1px solid rgba(255,255,255,.11)}.metric-grid small{color:#b7b2d6;display:block;margin-bottom:11px}.metric-grid strong{color:var(--mint);font:500 48px ui-monospace,monospace}.metric-grid .error{color:var(--coral)}.sample-copy{padding-top:25px;color:#deddf0;font:17px/1.8 ui-monospace,monospace}.sample-copy p{margin:4px 0}.sample-copy mark{color:#fff;background:var(--violet)}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);padding:30px 0 65px;border-top:1px solid rgba(255,255,255,.06)}.benefits article{display:flex;align-items:center;gap:20px;padding:0 34px}.benefits article+article{border-left:1px solid rgba(255,255,255,.12)}.benefits article>span{width:58px;height:58px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--violet2);font-size:27px}.benefits h2{font-size:16px;margin:0 0 6px}.benefits p{color:var(--muted);font-size:13px;line-height:1.55;margin:0}
.practice-section,.method-section,.faq-section{background:#0b1122;border-block:1px solid rgba(255,255,255,.06)}.practice-section,.course-section,.method-section,.tips-section,.faq-section{padding-block:105px}.section-heading{text-align:center;max-width:760px;margin:0 auto 48px}.section-heading.left{text-align:left;margin-left:0}.section-heading h2,.method-section h2{font-size:clamp(35px,4vw,52px);line-height:1.1;letter-spacing:-.045em;margin:17px 0}.section-heading p,.method-section p{color:var(--muted);line-height:1.7;font-size:17px}.practice-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}.practice-card,.live-card{padding:30px}.practice-toolbar{display:flex;align-items:end;gap:24px;margin-bottom:28px}.practice-toolbar label,.practice-toolbar legend{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.practice-toolbar select{min-width:210px;color:#fff;background:#0c1328;border:1px solid var(--line);border-radius:9px;padding:10px}.practice-toolbar fieldset{display:flex;gap:5px;border:0;padding:0;margin:0}.practice-toolbar button{color:var(--muted);background:#0c1328;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 12px}.practice-toolbar button.selected{color:#fff;border-color:var(--violet);background:rgba(139,92,246,.22)}.level-chip{margin-left:auto;color:var(--mint);border:1px solid rgba(110,231,183,.25);border-radius:100px;padding:8px 12px;font-size:11px}
.text-target{min-height:230px;max-height:310px;overflow:auto;padding:23px;border-radius:13px;background:#090f20;font:19px/1.85 ui-monospace,monospace;color:#b7b6c9;overflow-wrap:anywhere}.text-target span.correct{color:var(--mint)}.text-target span.wrong{color:var(--coral);text-decoration:underline}.text-target span.current{color:#fff;background:var(--violet)}.typing-label{display:block;font-size:13px;color:#c9c7da;margin:23px 0 8px}textarea{width:100%;min-height:125px;resize:vertical;background:#0a1021;color:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;line-height:1.6;outline:none}textarea:focus{border-color:var(--violet2);box-shadow:0 0 0 3px rgba(139,92,246,.15)}.typing-help,.formula-note{color:#7f7e96;font-size:11px}.practice-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.practice-actions button,.result-banner button{border-radius:9px;padding:11px 17px}.secondary-button{color:#d8d6e9;background:transparent;border:1px solid rgba(255,255,255,.15)}.finish-button{color:#fff;background:var(--violet);border:1px solid var(--violet2)}.finish-button:disabled{opacity:.35}.timer{display:flex;align-items:center;justify-content:space-between;padding-bottom:21px;border-bottom:1px solid rgba(255,255,255,.1)}.timer small,.live-stat span,.live-stat small{color:var(--muted)}.timer strong{font:500 35px ui-monospace,monospace;color:var(--violet2)}.timer em{font-size:14px;color:var(--muted);font-style:normal}.live-stat{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.08)}.live-stat span,.live-stat small{font-size:11px;display:block}.live-stat strong{color:var(--mint);font:500 39px ui-monospace,monospace;display:inline-block;margin:5px 8px 0 0}.error-stat strong{color:var(--coral)}.result-banner{margin-top:22px;padding:22px;display:flex;align-items:center;gap:18px;border:1px solid rgba(110,231,183,.3);border-radius:16px;background:rgba(110,231,183,.06)}.result-banner[hidden]{display:none}.result-banner>span{width:42px;height:42px;display:grid;place-items:center;color:#071a13;background:var(--mint);border-radius:50%}.result-banner h3,.result-banner p{margin:0}.result-banner p{color:var(--muted);font-size:13px;margin-top:5px}.result-banner button{margin-left:auto;color:var(--mint);border:1px solid rgba(110,231,183,.35);background:transparent}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card-grid article{border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:27px;background:rgba(255,255,255,.025)}.card-grid article>span{font:12px ui-monospace,monospace;color:var(--violet2)}.card-grid .icon{display:block;font-size:29px;color:var(--mint);margin:35px 0 21px}.card-grid h3{font-size:18px}.card-grid p{color:var(--muted);font-size:14px;line-height:1.65}.card-grid a{font-size:13px;color:#d9d6ef}.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.method-section ul{list-style:none;padding:0}.method-section li{padding:12px 0;color:var(--muted)}.method-section li b{color:#fff}.keyboard-guide{padding:34px}.keys{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}kbd{padding:15px 0;text-align:center;color:#d5d2ea;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:#090f20}kbd.home{border-color:var(--violet);background:rgba(139,92,246,.25)}.hand-labels{display:grid;grid-template-columns:1fr 1fr;color:var(--mint);font-size:12px;text-align:center;margin:22px 0}.keyboard-guide small{color:var(--muted);display:block;text-align:center}.tips article>span{display:block;margin-bottom:45px}.narrow{max-width:880px}.faq-section details{border-bottom:1px solid rgba(255,255,255,.1)}summary{cursor:pointer;font-weight:650;padding:23px 0}.faq-section details p{color:var(--muted);line-height:1.7}
footer{padding-top:70px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:70px;padding-bottom:55px}.footer-grid>div:first-child p{max-width:390px;color:var(--muted);line-height:1.7;font-size:14px}.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:11px}.footer-grid h2{font-size:13px}.footer-grid>div:not(:first-child) a{color:var(--muted);font-size:13px}.footer-bottom{display:flex;justify-content:space-between;padding-block:22px;border-top:1px solid rgba(255,255,255,.08);color:#737288;font-size:11px}
.legal-page{min-height:100vh;background:radial-gradient(circle at 55% -20%,rgba(139,92,246,.17),transparent 38%),var(--bg)}.legal-header,.legal-footer{width:min(1080px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between}.legal-header{min-height:82px;border-bottom:1px solid rgba(255,255,255,.08)}.legal-header>a:last-child{color:var(--muted);font-size:13px}.legal-content{width:min(820px,calc(100% - 40px));margin:auto;padding:90px 0 100px}.legal-content h1{font-size:clamp(43px,6vw,68px);letter-spacing:-.05em;margin:19px 0 25px}.legal-intro{color:#c1bfd3;font-size:19px;line-height:1.7}.legal-body{margin-top:55px}.legal-body h2{font-size:21px;margin:38px 0 12px}.legal-body p,.legal-body li{color:var(--muted);line-height:1.8;font-size:15px}.contact-card{display:flex;align-items:center;gap:22px;padding:25px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.contact-card a{color:var(--mint)}.legal-footer{min-height:80px;padding-block:20px;border-top:1px solid rgba(255,255,255,.08);color:#7d7b91;font-size:12px}.legal-footer nav{display:flex;gap:20px}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#0b1122;border-top:1px solid rgba(255,255,255,.12);padding:18px 16px;box-shadow:0 -10px 30px rgba(0,0,0,.35)}.cookie-banner-inner{width:min(1100px,100%);margin:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}.cookie-banner-inner p{margin:0;color:var(--muted);font-size:13px;line-height:1.6;max-width:760px}.cookie-banner-inner a{color:var(--mint);text-decoration:underline}.cookie-banner-actions{display:flex;gap:10px;flex-shrink:0}.cookie-btn{padding:10px 18px;border-radius:8px;font-weight:650;font-size:13px;border:1px solid rgba(255,255,255,.14);cursor:pointer}.cookie-btn-secondary{background:transparent;color:#d9d6ef}.cookie-btn-primary{background:linear-gradient(135deg,#9c6eff,#6138dd);color:#fff;border-color:#c4b1ff}
@media(max-width:1000px){.hero,.method-grid{grid-template-columns:1fr}.benefits{grid-template-columns:1fr}.benefits article{padding:22px 0}.benefits article+article{border-left:0;border-top:1px solid rgba(255,255,255,.08)}.practice-layout{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.cookie-banner-inner{flex-direction:column;align-items:flex-start}.cookie-banner-actions{width:100%}.cookie-btn{flex:1}.shell{width:calc(100% - 32px)}.menu-button{display:block}.nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;padding:12px 16px;background:#0b1122}.nav.open{display:flex}.nav a{padding:13px}.hero{padding-block:65px}.hero h1{font-size:48px}.demo-card{padding:22px 15px}.metric-grid strong{font-size:30px}.practice-toolbar{align-items:flex-start;flex-wrap:wrap}.level-chip{margin-left:0}.card-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.legal-footer{align-items:flex-start;flex-direction:column;gap:16px}.legal-footer nav{flex-wrap:wrap}}