:root{
  --bg: #0b0f10;
  --text: #e5e7eb;
  --accent: #22c55e;
  --accent-strong: #16a34a;
  --error: #ef4444;
  --dim: #6b7280;
  --radius: 8px;
  --max-width: 1100px;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Fira Code", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.45; }

a{ color:var(--accent);text-decoration:none }
a:hover{ text-decoration:underline }

.container{ max-width:var(--max-width);margin:2.25rem auto;padding:1.25rem }

.card{ background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); padding:1rem; border-radius:var(--radius); }

.header{ display:flex;align-items:center;justify-content:space-between;gap:1rem }
.logo{ font-weight:700;color:var(--text) }
.logo .accent{ color:var(--accent) }

h1,h2,h3{ color:var(--text);margin:.4rem 0 }
p{ color:var(--text);opacity:.95 }
.small{ font-size:.9rem;color:var(--dim) }

.btn{ display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-radius:6px; background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04);color:var(--text);cursor:pointer }
.btn:focus{outline:2px solid rgba(34,197,94,0.18);outline-offset:2px}
.btn.primary{ background:linear-gradient(180deg,rgba(34,197,94,0.12),rgba(34,197,94,0.06)); border-color:rgba(34,197,94,0.18);color:var(--accent);box-shadow:0 6px 20px rgba(34,197,94,0.06) }
.input{width:100%;padding:.6rem .75rem;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text) }

details summary{list-style:none;cursor:pointer;margin:0}
details summary::-webkit-details-marker{display:none}
summary.btn:focus{outline:2px solid rgba(34,197,94,0.18);outline-offset:2px;border-radius:6px}
details>.typing-area{margin-top:.75rem}

.begin-controls{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.time-config{min-width:200px}
.time-options{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.5rem}
.time-options label{display:inline-flex;align-items:center;gap:.35rem;color:var(--text);font-size:.95rem}
.time-options input[type="radio"]{accent-color:var(--accent)}
.custom-time-input{width:90px}
.custom-time-input:disabled{opacity:0.6}

.text-dim{ color:var(--dim) }
.text-error{ color:var(--error) }
.accent{ color:var(--accent) }
.kbd{ font-family:var(--mono);background:rgba(255,255,255,0.02);padding:.15rem .4rem;border-radius:4px;border:1px solid rgba(255,255,255,0.03);color:var(--text);font-size:.85rem }

.typing-area{ display:flex;flex-direction:column;gap:.75rem }
.word-list{ display:flex;flex-wrap:wrap;gap:.5rem;align-items:center }
.word{ padding:.25rem .4rem;border-radius:4px;color:var(--text);background:transparent;transition:all .12s ease }
.word.current{ background:rgba(22,163,74,0.12);color:var(--accent-strong);box-shadow:0 6px 18px rgba(22,163,74,0.08);transform:translateY(-1px) }
.word.error{ color:var(--error);text-decoration:underline wavy var(--error) }

.word.correct{ color:var(--accent); background:rgba(34,197,94,0.06); box-shadow:0 6px 18px rgba(34,197,94,0.04) }
.input.input-error{ border-color:var(--error); box-shadow:0 6px 18px rgba(239,68,68,0.06) }

.stats{ display:flex;gap:1.25rem;align-items:center;color:var(--text) }
.stat{ font-weight:700;color:var(--text) }
.stat .label{ font-weight:400;color:var(--dim);font-size:.85rem }

.footer{ text-align:center;color:var(--dim);font-size:.9rem;margin-top:2rem }

.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }

@media (max-width:520px){
  .container{ padding:.75rem;margin:1rem }
  .header{ flex-direction:column;align-items:flex-start }
}