/* Speed Keys Typing Test: calm and light, one blue accent; the words are the picture. */
body{background:var(--paper)}
.pill{font-weight:700}
.card h2{font-weight:800;color:var(--ink)}

/* ---------------------------------------------------------------- home */
.home{align-items:center;justify-content:center;gap:clamp(.5em,2.6vh,1.3em);padding:1em;text-align:center}
.logo{display:flex;align-items:center;justify-content:center;gap:.35em;margin:0;font:800 clamp(1.9em,min(9vw,8vh),3.2em)/1 var(--round);color:var(--ink);letter-spacing:-.01em}
.logo .name small{display:block;font:600 .4em/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-top:.25em}
.logo .name{text-align:left}
.keycap{display:grid;place-items:center;width:1.25em;height:1.25em;border-radius:.24em;background:#fff;color:var(--accent);font-size:.9em;
  box-shadow:0 0 0 1px var(--line) inset,0 .08em 0 #CBD5E1,0 .14em .3em rgba(30,38,51,.12)}
.tagline{margin:.5em 0 0;color:var(--ink-soft);font-size:1.05em}
.setup{display:flex;flex-direction:column;align-items:center;gap:clamp(.35em,1.6vh,.75em);width:min(30em,100%)}
.tabs{display:flex;background:var(--paper-2);border-radius:999px;padding:4px;gap:2px}
.tab{border:0;background:none;border-radius:999px;min-height:44px;padding:.3em 1.1em;color:var(--ink-soft);font-weight:600}
.tab[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(30,38,51,.14)}
.tab:focus-visible,.level:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.panel{display:flex;flex-direction:column;align-items:center;gap:.3em;width:100%}
.panel .note{margin:0;min-height:1.4em}
#tests .choice{min-width:5em}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:.35em;width:100%}
.level{border:1px solid var(--line);background:#fff;border-radius:.7em;min-height:48px;padding:.25em .2em;display:flex;flex-direction:column;align-items:center;line-height:1.1;color:var(--ink)}
.level b{font:700 1.05em/1.1 var(--round)}
.level small{font-size:.68em;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.level .st{font-size:.7em;color:#F59E0B;letter-spacing:.05em}
.level[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;background:#EFF5FF}
.level:disabled{opacity:.45;cursor:default}
.level:disabled .st{color:var(--ink-dim)}
.kid-choice{min-width:6.4em;padding:.4em .8em}
.kid-choice b{display:block;font:800 1.25em/1.1 var(--round);color:var(--accent)}
.kid-choice[aria-pressed=true] b{color:#fff}
.choice[aria-pressed=true] small{color:#DBEAFE}
.go{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap;font-size:.92em}
.link{color:var(--accent-lo)}
@media (max-height:520px) and (min-aspect-ratio:5/4){
  .home{flex-direction:row;gap:2em}
  .home .brand{max-width:36%}
  .logo{flex-direction:column;font-size:clamp(1.6em,9vh,2.6em)}
  .logo .name{text-align:center}
}
@media (max-height:420px){
  .tab{min-height:40px;padding:.2em .9em}
  .choice{min-height:40px;padding:.3em .7em}
  .level{min-height:42px}
  .level small{display:none}
  .pill{padding:.5em 1.8em;min-height:44px}
  .links .link{min-height:40px;padding:.2em .5em}
  .tagline{font-size:.92em}
}

/* ---------------------------------------------------------------- game */
#game{top:var(--vvt,0);bottom:auto;height:var(--vvh,100%);display:grid;grid-template:"bar" auto "prog" auto "stage" 1fr / 1fr;user-select:none;-webkit-user-select:none}
.bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:max(.6em,env(safe-area-inset-top)) max(.8em,env(safe-area-inset-right)) .4em max(.8em,env(safe-area-inset-left))}
.meters{display:flex;gap:clamp(.6em,4vw,2.4em);justify-content:center;flex:1}
.meter{text-align:center;line-height:1.05;min-width:3.6em}
.meter small{display:block;font-size:.68em;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.meter b{font:700 clamp(1.3em,4vh,1.8em)/1.1 var(--round);font-variant-numeric:tabular-nums;color:var(--ink)}
#game.timed .meter:first-child b{color:var(--accent)}
#game.kids .meters{visibility:hidden}
.progress{grid-area:prog;height:3px;margin:0 1em;background:var(--paper-2);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);transition:transform .2s linear}
.stage{grid-area:stage;position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.3em,2vh,1em);padding:.4em max(1em,env(safe-area-inset-left)) max(.6em,env(safe-area-inset-bottom));cursor:text;overflow:hidden}
.mode{margin:0;color:var(--ink-soft);font-size:.9em}
.words{--fs:clamp(20px,min(3.4vw,5vh),34px);font:400 var(--fs)/1.6 var(--sans);height:calc(var(--fs) * 1.6 * 3 + 2px);overflow:hidden;width:100%;max-width:calc(var(--fs) * 30);
  background:#fff;border:1px solid var(--line);border-radius:.6em;padding:0 .7em;box-sizing:border-box;position:relative}
.flow{position:relative;transition:transform .18s ease-out;color:var(--ink-dim);white-space:normal;overflow-wrap:break-word}
.w{white-space:nowrap}
.c{border-radius:3px}
.c.ok{color:var(--ink)}
.c.bad{color:var(--bad);background:var(--bad-bg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
.c.sp.bad{background:var(--bad-bg);text-decoration:none;box-shadow:inset 0 -3px 0 var(--bad)}
.caret{position:absolute;left:0;top:0;width:2px;background:var(--accent);border-radius:1px;transition:transform 70ms linear;animation:blink 1.1s steps(1) infinite;pointer-events:none}
@keyframes blink{50%{opacity:.25}}
.hint{margin:0;min-height:1.45em;color:var(--ink-soft);font-size:.95em}
.hint.tap{color:var(--accent-lo);font-weight:600}
.typer{position:absolute;left:50%;top:0;width:2px;height:2px;padding:0;border:0;opacity:0;font-size:16px;color:transparent;background:transparent;caret-color:transparent;pointer-events:none;outline:none}

/* kids */
.kid{display:flex;flex-direction:column;align-items:center;gap:.2em;min-height:0}
.big{font:800 min(34vh,38vw)/1 var(--round);min-height:1em;display:grid;place-items:center;user-select:none}
.big.word{font-size:min(14vh,16vw);min-height:2.4em;color:var(--ink-soft)!important}
.big.pop{animation:kpop .22s ease-out}
.big.shake{animation:kshake .3s}
@keyframes kpop{50%{transform:scale(1.12)}}
@keyframes kshake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.next{display:flex;gap:.35em;font:700 clamp(1.2em,5vh,2em)/1 var(--round);color:var(--ink-dim);min-height:1em}
.next .got{color:var(--good)}
.next .now{color:var(--ink);text-decoration:underline;text-underline-offset:.15em}
.dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:90vw}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.dots i.on{background:#F59E0B;box-shadow:none}

/* the keyboard picture: practice and kids, only where there is room and no on-screen keyboard */
.kbd{display:flex;flex-direction:column;align-items:center;gap:4px;font:600 13px/1 var(--sans);color:var(--ink-dim)}
.krow{display:flex;gap:4px}
.k{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--line) inset,0 2px 0 #DCE3EC;text-transform:uppercase}
.k.wide{width:58px;text-transform:none}
.k.space{width:220px;text-transform:none}
.k.bump{text-decoration:underline;text-underline-offset:3px}
.k.on{color:var(--ink);background:#EFF5FF}
.k.next{background:var(--accent);color:#fff;box-shadow:0 2px 0 var(--accent-lo)}
@media (max-height:619px),(pointer:coarse),(max-width:560px){.kbd{display:none!important}}

@media (max-height:420px){
  .bar{padding-top:max(.3em,env(safe-area-inset-top));padding-bottom:.2em}
  .meter b{font-size:1.2em}
  .mode{display:none}
  .stage{gap:.2em;padding-top:.2em}
}
#burst{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}

/* ---------------------------------------------------------------- cards */
.card .brandline{margin:-.6em 0 .2em;text-align:center;font-size:.72em;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.card .score{display:flex;align-items:baseline;justify-content:center;gap:.25em;margin:0 0 .2em}
.card .score b{font:800 3em/1 var(--round);color:var(--accent);font-variant-numeric:tabular-nums}
.card .score span{font-weight:600;color:var(--ink-soft)}
.card .facts{display:flex;justify-content:center;gap:1.4em;color:var(--ink-soft);font-size:.82em;text-align:center}
.card .facts b{display:block;color:var(--ink);font:700 1.45em/1.15 var(--round);font-variant-numeric:tabular-nums}
.chart{display:block;width:100%;height:auto;max-height:84px;margin:.6em 0 0}
.chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.chart .area{fill:rgba(37,99,235,.1)}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .err{fill:var(--bad)}
.chart .lbl{font:600 10px var(--sans);fill:var(--ink-dim)}
.starrow{display:flex;justify-content:center;gap:.15em;font-size:2em;color:#E2E8F0;line-height:1}
.starrow .on{color:#F59E0B}
.card .howto{display:flex;flex-direction:column;gap:.5em;margin:0;padding:0;list-style:none}
.card .howto li{display:flex;gap:.7em;align-items:center}
.card .howto .k{flex:none;width:2em;height:2em;font-size:.9em;color:var(--accent);text-transform:none}
.card .links{display:flex;flex-wrap:wrap;justify-content:center}
@media (max-height:500px){
  .card{padding:.7em 1em .6em}
  .card h2{font-size:1.25em;margin-bottom:.25em}
  .card .brandline{margin:-.2em 0 .1em}
  .card .score b{font-size:2.2em}
  .chart{max-height:52px;margin-top:.3em}
  .starrow{font-size:1.5em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .actions .pill{padding:.45em 1.4em;min-height:44px}
}