:root{--primary:#2563eb;--primary-dark:#1d4ed8;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--dark:#0f172a;--muted:#64748b;--bg:#f4f8ff;--card:#ffffff;--border:#dbeafe;--shadow:0 15px 40px rgba(37,99,235,.12)}body{font-family:Inter,sans-serif;background:linear-gradient(to bottom,#f8fbff,#eef5ff);color:var(--dark)}.page-title{font-size:2.4rem;font-weight:900;margin-bottom:30px;color:#0f172a}.main-card{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-radius:28px;padding:30px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.6);margin-bottom:30px}.section-title{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-size:.95rem;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:var(--muted)}.section-icon{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:#fff}.option-card{background:#fff;border:2px solid #dbeafe;border-radius:24px;padding:22px;height:100%}.label{font-size:.8rem;font-weight:800;letter-spacing:.5px;color:#64748b;text-transform:uppercase;margin-bottom:12px}.select-box{width:100%;border:none;border-radius:16px;padding:15px;background:#f8fbff;border:2px solid #dbeafe;font-weight:700}.select-box:focus{outline:0;border-color:#60a5fa;box-shadow:0 0 0 4px rgba(37,99,235,.1)}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.mode-btn{border:none;border-radius:18px;padding:14px;background:#f1f5f9;font-weight:800;color:#334155;transition:.25s ease}.mode-btn.active{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff}.action-btn{border:none;width:100%;padding:16px;border-radius:18px;font-weight:800;transition:.25s ease}.btn-start{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.btn-stop{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.btn-reset{background:#fff;border:2px solid #dbeafe;color:#0f172a}.btn-again{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff}.typing-display{background:#fff;border:2px solid #dbeafe;border-radius:24px;padding:30px;min-height:320px;max-height:420px;overflow-y:auto;line-height:2;font-size:1.08rem;color:#334155;word-break:break-word}.typing-area{width:100%;border:none;border-radius:24px;padding:25px;min-height:240px;resize:none;background:#f8fbff;border:2px solid #dbeafe;line-height:1.9;font-size:1rem}.typing-area:focus{outline:0;border-color:#60a5fa;background:#fff;box-shadow:0 0 0 5px rgba(37,99,235,.1)}.timer-box{background:linear-gradient(135deg,#0f172a,#1e3a8a);border-radius:30px;padding:30px;color:#fff;position:sticky;top:20px}.timer-circle{width:220px;height:220px;margin:auto;border-radius:50%;background:radial-gradient(circle at center,#0f172a 58%,transparent 59%),conic-gradient(#3b82f6 360deg,#ffffff22 0deg);display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:25px}.timer-value{font-size:4rem;font-weight:900;line-height:1}.timer-label{font-size:.8rem;opacity:.75;font-weight:700;letter-spacing:1px}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.result-card{background:#fff;border-radius:24px;padding:24px;text-align:center;border:1px solid #e2e8f0;box-shadow:0 10px 25px rgba(15,23,42,.05)}.result-card h2{font-size:2.4rem;font-weight:900;margin-bottom:8px}.result-card p{margin:0;color:#64748b;font-weight:700}.accuracy-good{color:#10b981}.accuracy-mid{color:#f59e0b}.accuracy-bad{color:#ef4444}.wrong-char{background:rgba(239,68,68,.18);color:#dc2626;border-radius:4px;text-decoration:underline;padding:1px 2px}.missing-char{background:rgba(148,163,184,.15);color:#64748b;border-radius:4px;padding:1px 2px}.hidden-section{display:none}@media(max-width:991px){.result-grid{grid-template-columns:repeat(2,1fr)}.mode-grid{grid-template-columns:1fr}}@media(max-width:576px){.page-title{font-size:2rem}.timer-circle{width:170px;height:170px}.timer-value{font-size:3rem}.result-grid{grid-template-columns:1fr}}