:root { --bg:#f5f7ff; --ink:#3f4770; --muted:#7d86a8; --line:#dbe1f3; --card:#fcfbff; --accent:#879ee5; --soft:#e9eeff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
button,input { font:inherit; }
.site-header { width:min(1180px,calc(100% - 48px)); margin:auto; height:88px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); text-decoration:none; font-size:21px; font-weight:800; letter-spacing:-1.2px; display:flex; align-items:center; gap:8px; }.brand-mark { display:grid; place-items:center; color:#fff; background:var(--accent); width:25px;height:25px;border-radius:50%; font-size:17px; }
nav { display:flex; gap:28px; margin-left:60px; } nav a { color:var(--muted); text-decoration:none; font-size:13px; font-weight:700; } nav a:hover { color:var(--ink); }.theme-toggle,.restart { border:0;background:transparent;color:var(--ink);cursor:pointer; }.theme-toggle { font-size:21px; }
main { width:min(1180px,calc(100% - 48px)); margin:auto; }.hero { padding:20px 0 16px; }.eyebrow { color:var(--accent); font-family:'DM Mono',monospace; font-size:13px; letter-spacing:.1em; text-transform:uppercase; display:flex;align-items:center;gap:8px; }.eyebrow span { width:19px;height:1px;background:currentColor; } h1,h2,p { margin:0; }h1 { color:var(--accent); font-size:clamp(38px,5vw,58px); line-height:.95; letter-spacing:-.075em; margin:10px 0 11px; max-width:680px; } .intro { max-width:510px;color:var(--muted);line-height:1.55;font-size:17px; }
.test-shell { background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 18px 45px rgba(45,54,43,.05); }.test-toolbar { height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px; }.mode-picker{ display:flex;gap:4px;background:var(--soft);padding:4px;border-radius:8px; }.mode{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700;padding:7px 12px;border-radius:5px;cursor:pointer; }.mode.active{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1);}.language-picker{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:24px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.language-picker select{border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);padding:7px 28px 7px 9px;font:600 12px Manrope,Arial,sans-serif;cursor:pointer}.sound-toggle,.restart{border:0;background:transparent;color:var(--ink);cursor:pointer}.sound-toggle{font-size:12px;font-weight:700;display:flex;gap:7px;align-items:center;margin-right:18px}.restart{font-size:12px;font-weight:700;display:flex;gap:7px;align-items:center;}
.test-stage { padding:22px 40px 30px; }.status-row{display:flex;justify-content:flex-start;align-items:center;gap:20px;margin-bottom:16px;text-align:left;}.status-row>div{display:flex;flex-direction:column;gap:4px;align-items:flex-start;}.timer-label{font-family:'DM Mono',monospace;color:var(--muted);font-size:9px;letter-spacing:.12em;}.status-row strong{font-size:18px;letter-spacing:-.04em;}.stage-note{font-size:12px;color:var(--muted);}.word-area{position:relative;}.words{min-height:420px;overflow:visible;font-family:'DM Mono',monospace;font-size:30px;line-height:1.65;letter-spacing:.01em;word-spacing:.08em;color:#a6aca4;user-select:none;text-align:center;cursor:text;outline:none;}.words:focus{box-shadow:inset 0 -2px 0 var(--accent);}.word.current{color:var(--ink);background:var(--soft);border-radius:3px;}.word.correct,.typed-correct{color:#82cfa9;}.typed-incorrect{color:#c54f35;text-decoration:underline wavy #e37b62 1px;}.status-row .sound-toggle{margin-left:auto;padding:4px 6px;background:#151515;color:#fff;border-radius:5px;font-size:12px}.status-row .sound-toggle span{display:none}.typing-input{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none;}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);}.metric{padding:22px 28px;border-right:1px solid var(--line);display:grid;grid-template-columns:auto auto;gap:2px 8px;align-items:baseline;}.metric:last-child{border-right:0}.metric span{grid-column:1/-1;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;}.metric strong{font-size:30px;letter-spacing:-.06em;}.metric small{font-size:11px;color:var(--muted);}
.result-card{margin:24px 0 80px;background:var(--ink);color:#fff;border-radius:18px;padding:32px 36px;display:flex;align-items:center;justify-content:space-between;gap:26px;}.result-card .eyebrow{color:#f2a78f}.result-card h2{font-size:31px;letter-spacing:-.06em;margin:8px 0}.result-card p{color:#c2cbc2;font-size:13px}.result-score{text-align:center;display:flex;flex-direction:column}.result-score strong{font-size:55px;line-height:.85;letter-spacing:-.07em}.result-score span{font-family:'DM Mono',monospace;font-size:10px;margin-top:8px;color:#c2cbc2}.primary-button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:14px 17px;font-weight:800;font-size:13px;cursor:pointer}.primary-button span{padding-left:10px;font-size:17px}.hidden{display:none;}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;padding:30px 0 100px}.number{font-family:'DM Mono',monospace;color:var(--accent);font-size:12px}.benefits h2{font-size:24px;letter-spacing:-.055em;margin:17px 0 12px}.benefits p{color:var(--muted);font-size:13px;line-height:1.75;max-width:290px}footer{border-top:1px solid var(--line);padding:25px max(24px,calc((100% - 1180px)/2));font-family:'DM Mono',monospace;color:var(--muted);font-size:10px;letter-spacing:.12em}footer span{color:var(--accent);padding:0 9px}
body.dark{--bg:#20243f;--ink:#f2f4ff;--muted:#b5bddc;--line:#3a4167;--card:#2b3052;--accent:#a9bbff;--soft:#353c63}body.dark .result-card{background:#171b33}body.dark .words{color:#7881aa}body.dark .word.current{background:#404973}body.dark .typing-input{background:#20243f}
@media(max-width:680px){.site-header,main{width:min(100% - 28px,1180px)}nav{display:none}.hero{padding:28px 0 20px}.test-toolbar{height:auto;min-height:72px;padding:12px 16px;flex-wrap:wrap;gap:10px}.language-picker{margin-left:auto;margin-right:0}.test-stage{padding:22px 18px 24px}.stage-note{display:none}.words{min-height:420px;font-size:30px;line-height:1.65}.metrics{grid-template-columns:repeat(2,1fr)}.metric{padding:17px;border-bottom:1px solid var(--line)}.metric:nth-child(2){border-right:0}.result-card{padding:25px;align-items:flex-start;flex-direction:column}.result-score{text-align:left;flex-direction:row;align-items:baseline;gap:9px}.result-score span{margin:0}.benefits{grid-template-columns:1fr;gap:32px;padding-bottom:65px}}