:root{
  --paper:#f3f0df;
  --paper-2:#fffdf3;
  --ink:#22242a;
  --muted:#6d6d61;
  --line:#cfc8a4;
  --line-dark:#9d956d;
  --green:#2f8f3a;
  --green-soft:#dff4d7;
  --red:#b43c2f;
  --red-soft:#f8d8d2;
  --blue:#23579e;
  --blue-soft:#d9e7ff;
  --yellow:#ffdc5d;
  --shadow:0 16px 36px rgba(42,38,19,.14);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:
    linear-gradient(90deg,rgba(115,99,39,.06) 1px,transparent 1px),
    linear-gradient(rgba(115,99,39,.06) 1px,transparent 1px),
    var(--paper);
  background-size:18px 18px;
}
button,input,select,textarea{font:inherit}
button{border:0;cursor:pointer;font-weight:700;touch-action:manipulation}
.page{width:min(980px,100%);margin:0 auto;padding:12px 10px 34px}
.topbar{display:flex;gap:10px;align-items:stretch;justify-content:space-between;margin-bottom:10px}
.brand,.global-pill,.setup-card,.race-card,.typing-card,.results-card{
  background:rgba(255,253,243,.94);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.brand{display:flex;gap:10px;align-items:center;padding:12px;min-width:0;flex:1}
.logo{width:42px;height:42px;border-radius:10px;background:var(--blue);color:white;display:grid;place-items:center;font-weight:900;letter-spacing:-1px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.kicker{margin:0 0 3px;text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:800;color:var(--muted)}
h1,h2{margin:0;line-height:1.08}
h1{font-size:25px;letter-spacing:-.8px}
h2{font-size:16px}
.global-pill{width:120px;padding:9px 10px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right}
.global-pill span,.global-pill small{font-size:10px;color:var(--muted)}
.global-pill strong{font-size:28px;color:var(--blue);line-height:1}
.setup-card{padding:10px;margin-bottom:10px;display:grid;gap:9px}
.field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--muted)}
input,select,textarea{
  width:100%;border:1px solid var(--line-dark);border-radius:10px;background:#fffef8;color:var(--ink);outline:none;
  padding:12px 11px;font-size:16px;
}
select{appearance:auto}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(35,87,158,.13)}
.setup-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.primary,.secondary,.ghost,.danger{border-radius:10px;padding:12px 10px;min-height:44px}
.primary{background:linear-gradient(#3f8dff,#23579e);color:white;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.secondary{background:#efe7bd;color:#514915;border:1px solid #c9bd7c}
.ghost{background:#fff8d7;color:#5e541f;border:1px solid #c9bd7c}
.danger{background:#ffe3df;color:var(--red);border:1px solid #e4a49b}
.race-card{padding:11px;margin-bottom:10px;overflow:hidden}
.race-head,.typing-header,.results-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.race-head h2,.typing-header h2,.results-head h2{font-size:16px}
.mini-badge{flex:0 0 auto;background:#efe7bd;border:1px solid #c9bd7c;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800;color:#5e541f}
.track-board{display:grid;grid-template-columns:48px 1fr;align-items:center;border:1px solid var(--line-dark);border-radius:12px;overflow:hidden;background:#fbf6da}
.lane-label{height:62px;display:grid;place-items:center;background:#e6dab0;border-right:1px solid var(--line-dark);font-size:12px;font-weight:900;color:#594f21}
.lane{height:62px;position:relative;overflow:hidden;background:
  linear-gradient(#fdf8df,#f2e7bc 50%,#fdf8df 51%);
}
.lane:before,.lane:after{content:"";position:absolute;left:0;right:0;height:1px;background:#c6bd87}.lane:before{top:10px}.lane:after{bottom:10px}
.lane-dashes{position:absolute;left:12px;right:58px;top:50%;border-top:2px dashed #b2a66d}
.car{position:absolute;left:7px;top:14px;font-size:30px;line-height:1;transition:left .16s ease;filter:drop-shadow(0 3px 1px rgba(0,0,0,.17));z-index:2}
.finish{position:absolute;right:0;top:0;bottom:0;width:48px;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#1f1f1f 0 6px,#fff 6px 12px);font-size:9px;font-weight:900;color:#ffdd3c;writing-mode:vertical-rl;text-shadow:0 1px 2px #000}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.stats-strip div,.typed-counter{background:#fff8d7;border:1px solid #d0c27e;border-radius:11px;padding:8px;text-align:center}
.stats-strip span,.typed-counter span{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}.stats-strip strong{font-size:22px;color:var(--blue)}
.typing-card{padding:11px;margin-bottom:10px}
.typed-counter{min-width:88px}.typed-counter strong{display:block;font-size:14px;color:var(--blue)}
.target-text{
  height:255px;overflow:auto;border:1px solid var(--line-dark);border-radius:12px;background:#fffef8;padding:13px;
  font-family:Georgia,'Times New Roman',serif;font-size:19px;line-height:1.75;white-space:pre-wrap;box-shadow:inset 0 2px 10px rgba(80,70,25,.08);
}
.target-text.hidden{height:122px;mask-image:linear-gradient(#000 65%,transparent)}
.char{border-radius:3px;padding:1px 0}.char.done.good{background:var(--green-soft);color:#0b651d}.char.done.bad{background:var(--red-soft);color:#8d2117;text-decoration:underline}.char.current{background:var(--yellow);outline:1px solid #b89500}
textarea{height:150px;resize:vertical;margin-top:9px;line-height:1.55;background:#fffffb;font-size:17px}
.mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.hint{font-size:12px;color:var(--muted);line-height:1.45;margin-top:9px}
.results-card{padding:11px}.results-list{display:grid;gap:8px}.result-item{display:grid;grid-template-columns:1fr 68px 76px;gap:7px;align-items:center;background:#fffef8;border:1px solid var(--line);border-radius:12px;padding:9px}.result-item strong{display:block}.result-item span{color:var(--muted);font-size:11px}.result-item .hide-mobile{display:none}
@media(min-width:760px){
  .page{padding:26px 18px 56px}.topbar{margin-bottom:16px}.brand{padding:18px}.logo{width:54px;height:54px;border-radius:13px}h1{font-size:38px}.global-pill{width:210px;padding:16px}.global-pill strong{font-size:43px}.setup-card{grid-template-columns:1fr 1.45fr auto;padding:16px;gap:12px;align-items:end;margin-bottom:16px}.setup-actions{width:230px}.race-card,.typing-card,.results-card{padding:18px;margin-bottom:16px}.race-head h2,.typing-header h2,.results-head h2{font-size:21px}.track-board{grid-template-columns:72px 1fr}.lane-label,.lane{height:76px}.car{top:18px;font-size:36px}.finish{width:62px}.stats-strip{gap:10px}.stats-strip div{padding:12px}.stats-strip strong{font-size:30px}.target-text{height:360px;font-size:20px;padding:18px}textarea{height:190px}.mobile-actions{grid-template-columns:170px 170px}.result-item{grid-template-columns:1fr repeat(4,92px)}.result-item .hide-mobile{display:block}
}
@media(min-width:1080px){.page{width:min(1160px,96vw)}.typing-card{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}.typing-header{grid-column:1/-1}.target-text{height:490px}textarea{height:490px;margin-top:0}.mobile-actions,.hint{grid-column:2}.results-card{margin-top:0}}

/* Clean-content + mobile scale refinements */
select{font-size:14px}
.target-text{font-size:18px;line-height:1.68;word-break:break-word}
textarea{font-size:16px}
@media(max-width:420px){
  .page{padding:8px 7px 28px}
  .brand{padding:10px}.logo{width:38px;height:38px}.kicker{font-size:9px}h1{font-size:22px}h2{font-size:15px}
  .global-pill{width:104px;padding:8px}.global-pill strong{font-size:24px}.global-pill small{font-size:9px}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .target-text{height:235px;font-size:17px;line-height:1.62;padding:11px}
  textarea{height:132px;font-size:16px}
}