/* wpmarena (working name). Quiet, big and mono: the text to type is the only thing on the first screen. */
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../fonts/RobotoMono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --mono: "Roboto Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bg: #323437; --surface: #2c2e31; --sub: #646669; --text: #d1d0c5; --main: #5eead4; --err: #ca4754;
  --err-dim: color-mix(in srgb, var(--err) 45%, var(--bg));
  --main-ink: color-mix(in srgb, var(--bg) 85%, black);
  --fsm: 1; --fs: calc(clamp(22px, 1.75vw, 36px) * var(--fsm)); --lh: 1.5;
  --ui: clamp(14px, .82vw, 17px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--mono); transition: background .2s; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--main); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.wrap { width: min(var(--wrapw, 1540px), 100% - 8rem); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--main); color: var(--main-ink); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the first screen is exactly one screen tall; everything else is below */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

.top { position: relative; display: flex; align-items: center; gap: 48px; padding: clamp(18px, 3vh, 34px) 0 0; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand svg { color: var(--main); flex: none; }
.brand-bg { fill: var(--surface); stroke: none; }
.brand-text { display: grid; line-height: 1; }
.brand-text small { font-size: 12px; color: var(--sub); letter-spacing: .02em; margin-bottom: 3px; }
.brand-text b { font-size: clamp(26px, 2vw, 36px); font-weight: 500; letter-spacing: -.03em; color: var(--text); }
.icons { display: flex; gap: 10px; }
.ib { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 0; background: transparent; color: var(--sub); border-radius: 12px; cursor: pointer; text-decoration: none; transition: color .15s, background .15s; }
.ib svg { width: 22px; height: 22px; }
.ib:hover { color: var(--text); }
.ib.is-on { color: var(--main); }
.ib.is-soon { opacity: .45; cursor: default; }
.ib.is-soon:hover { color: var(--sub); }
.me { margin-left: auto; }

.stage { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(8px, 4.5vh, 56px) 0 2vh; }   /* the words sit in the upper-middle of the screen, well clear of the taskbar and the footer */
.config { align-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; font-size: var(--ui); margin-bottom: clamp(20px, 5vh, 56px); }
.grp { display: flex; flex-wrap: wrap; gap: 2px; background: var(--surface); padding: 5px 10px; border-radius: 12px; }
.opt { border: 0; background: transparent; color: var(--sub); padding: 9px 14px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: color .15s; }
.opt svg { width: 1.05em; height: 1.05em; }
.opt:hover { color: var(--text); }
.opt[aria-pressed="true"] { color: var(--main); }
.amt { padding: 9px 13px; }

.test { position: relative; }
.lang { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--sub); font-size: calc(var(--ui) * 1.15); margin-bottom: 2.2vh; }
.lang svg { width: 1.1em; height: 1.1em; }
.live { height: calc(var(--fs) * 1.4); margin-bottom: calc(var(--fs) * .45); display: flex; gap: 22px; align-items: baseline; color: var(--main); font-size: calc(var(--fs) * 1.05); padding-left: 2px; opacity: 0; transition: opacity .2s; }
.live.on { opacity: 1; }
#liveWpm { font-size: calc(var(--fs) * .62); color: var(--sub); }
.words-wrap { position: relative; }
.words { position: relative; height: calc(var(--fs) * var(--lh) * 3); overflow: hidden; font-size: var(--fs); line-height: var(--lh); cursor: text; transition: filter .2s, opacity .2s; }
.blurred .words { filter: blur(5px); opacity: .55; }
.inner { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; transition: transform .12s ease-out; }
.word { position: relative; display: inline-block; margin: 0 .5em 0 0; color: var(--sub); }
.word.err { box-shadow: inset 0 -2px 0 var(--err); }
.word span { transition: color .08s; }
.word span.ok { color: var(--text); }
.word span.bad { color: var(--err); }
.word span.extra { color: var(--err-dim); }
.caret { position: absolute; left: 0; top: 0; width: 2px; height: calc(var(--fs) * var(--lh) * .8); margin-top: calc(var(--fs) * var(--lh) * .1); background: var(--main); border-radius: 2px; animation: blink 1.05s steps(1) infinite; pointer-events: none; }
.smooth .caret { transition: left .09s, top .09s; }
.caret.typing { animation: none; }
.caret[data-style="block"] { background: color-mix(in srgb, var(--main) 55%, transparent); width: .62em; border-radius: 3px; }
.caret[data-style="underline"] { height: 3px; width: .62em; margin-top: calc(var(--fs) * var(--lh) * .86); }
.caret[data-style="outline"] { background: transparent; box-shadow: inset 0 0 0 2px var(--main); width: .62em; border-radius: 3px; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.focus-hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); font-size: calc(var(--ui) * 1.15); opacity: 0; pointer-events: none; z-index: 2; transition: opacity .2s; }
.blurred .focus-hint { opacity: 1; }
.hidden-input { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; }
.restart-row { display: flex; justify-content: center; margin-top: clamp(18px, 4vh, 44px); }
.restart { border: 0; background: transparent; color: var(--sub); width: 52px; height: 44px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; transition: color .15s, background .15s; }
.restart:hover, .restart:focus-visible { color: var(--text); background: var(--surface); }
.restart svg { width: 22px; height: 22px; }

/* results */
.results { padding-top: 1vh; width: 100%; max-width: 1180px; margin-inline: auto; }
.r-top { display: grid; grid-template-columns: auto minmax(0, 760px); justify-content: center; gap: 8px 5vw; align-items: center; }
.r-big { display: grid; line-height: 1; }
.r-big:first-child { grid-row: 1; } .r-big:nth-child(2) { grid-row: 2; }
.lab { color: var(--sub); font-size: calc(var(--ui) * 1.25); }
.r-big .val { color: var(--main); font-size: clamp(70px, 6.2vw, 120px); letter-spacing: -.03em; }
.r-chart { grid-column: 2; grid-row: 1 / span 2; min-height: 200px; }
.r-chart svg { width: 100%; height: clamp(200px, 22vh, 300px); stroke-width: 1; overflow: visible; }
.r-row { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 18px 5vw; margin-top: 3vh; }
.r-row > div { display: grid; }
.r-row .lab { font-size: var(--ui); }
.r-row .v { color: var(--main); font-size: calc(var(--ui) * 1.9); line-height: 1.3; }
.pb { color: var(--sub); font-size: var(--ui); margin: 2vh 0 0; min-height: 1.4em; text-align: center; }
.pb.saved { margin-top: .6vh; min-height: 0; } .pb.saved a { color: var(--main); } .pb.bad { color: var(--err); } .pb.bad a { color: var(--text); }
.r-big { justify-items: start; }
.chal { color: var(--main); text-align: center; font-size: calc(var(--ui) * 1.1); margin: 1.2vh 0 0; min-height: 1.4em; }
.r-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 3vh; }
.btn { text-decoration: none; border: 0; background: var(--surface); color: var(--sub); padding: 14px 22px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-size: var(--ui); transition: color .15s, background .15s; }
.btn svg { width: 1.1em; height: 1.1em; }
.btn:hover, .btn:focus-visible { background: var(--main); color: var(--main-ink); }

/* bottom of the first screen */
.herofoot { padding: 0 0 clamp(14px, 2.6vh, 26px); color: var(--sub); font-size: calc(var(--ui) * .86); }
.keys { text-align: center; margin: 0 0 clamp(10px, 2vh, 22px); }
.keys kbd { background: var(--surface); color: var(--sub); padding: 3px 9px; border-radius: 6px; font: inherit; font-size: .92em; }
.foot-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px 28px; }
.foot-row > :first-child { justify-self: start; } .foot-row > :last-child { justify-self: end; }
.foot-row nav { display: flex; gap: 26px; }
.foot-row a { text-decoration: none; transition: color .15s; }
.foot-row a:hover { color: var(--text); }
.more { display: inline-flex; align-items: center; gap: 8px; }
.more svg { width: 1.2em; height: 1.2em; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: translateY(0); } 85% { transform: translateY(3px); } }
.v { display: inline-flex; align-items: center; gap: 8px; }
.pal { width: 1.15em; height: 1.15em; }

/* below the first screen */
.info { padding: 12vh 0 4vh; }
.info.wrap { width: min(920px, 100% - 8rem); }
.info h2 { font-size: 22px; font-weight: 500; color: var(--main); margin: 54px 0 12px; }
.info h2:first-child { margin-top: 0; }
.info p { color: var(--text); opacity: .88; margin: 0 0 16px; }
.info b { color: var(--text); font-weight: 500; }
.table-wrap { overflow-x: auto; border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 13px 18px; }
th { color: var(--sub); font-weight: 400; font-size: 13.5px; border-bottom: 1px solid var(--bg); }
td:nth-child(2) { color: var(--main); white-space: nowrap; }
tbody tr + tr td { border-top: 1px solid var(--bg); }
details { background: var(--surface); border-radius: 12px; margin-bottom: 10px; padding: 0 18px; }
summary { cursor: pointer; list-style: none; padding: 15px 0; color: var(--text); display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--main); }
details[open] summary::after { content: "\2212"; }
details p { margin: 0 0 16px; font-size: 15px; }
.endfoot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; color: var(--sub); font-size: 13.5px; padding: 28px 0 34px; border-top: 1px solid var(--surface); margin-top: 8vh; }
.endfoot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
.endfoot a { text-decoration: none; transition: color .15s; } .endfoot a:hover { color: var(--text); }

/* settings */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; z-index: 30; padding: 16px; overflow: auto; }
.panel { background: var(--bg); border: 1px solid var(--surface); border-radius: 16px; padding: 24px 28px 28px; width: min(880px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.p-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.p-head h2 { margin: 0; font-size: 20px; font-weight: 500; color: var(--main); }
.p-sec { color: var(--sub); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin: 22px 0 10px; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.themes button { border: 2px solid transparent; border-radius: 10px; height: 46px; padding: 0 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; line-height: 1; white-space: nowrap; background: var(--tb); color: var(--tm); }
.themes button > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.themes button[aria-checked="true"] { border-color: var(--tm); }
.themes .dots { display: inline-flex; gap: 3px; }
.themes .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); display: inline-block; }
.p-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--surface); font-size: 15px; color: var(--sub); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { border: 0; background: var(--surface); color: var(--sub); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.seg button[aria-checked="true"] { background: var(--main); color: var(--main-ink); }
.seg button:disabled { opacity: .5; cursor: default; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--main); color: var(--main-ink); padding: 10px 18px; border-radius: 10px; font-size: 14px; z-index: 40; }

@media (max-width: 900px) {
  .wrap { width: calc(100% - 2rem); }
  .top { gap: 8px; }
  .brand-text small { display: none; }
  .icons { margin-left: auto; gap: 2px; } .me { margin-left: 0; }
  .ib { width: 40px; height: 40px; } .ib svg { width: 20px; height: 20px; }
  .config { gap: 8px; margin-bottom: 4vh; }
  .grp { padding: 3px 5px; }
  .opt { padding: 8px 9px; }
  .r-top { grid-template-columns: 1fr 1fr; gap: 14px; }
  .r-chart { grid-column: 1 / -1; grid-row: auto; }
  .r-big .val { font-size: 64px; }
  .foot-row { grid-template-columns: 1fr; justify-items: center; text-align: center; } .foot-row > :first-child, .foot-row > :last-child { justify-self: center; }
  .info.wrap { width: calc(100% - 2rem); }
  .p-row { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* content pages */
.page { max-width: 980px; padding: 6vh 0 2vh; }
.crumbs { display: flex; gap: 10px; color: var(--sub); font-size: calc(var(--ui) * .9); margin-bottom: 14px; }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--text); }
.page h1 { font-size: clamp(30px, 3vw, 46px); font-weight: 500; letter-spacing: -.03em; margin: 0 0 16px; color: var(--text); }
.page h2 { font-size: 22px; font-weight: 500; color: var(--main); margin: 44px 0 12px; }
.page p { color: var(--text); opacity: .88; margin: 0 0 16px; max-width: 800px; }
.page .lede { font-size: 1.12em; opacity: 1; }
.page .big { font-size: 1.5em; }
.page a, .info a { color: var(--main); text-decoration-color: color-mix(in srgb, var(--main) 40%, transparent); text-underline-offset: 3px; }
.muted { color: var(--sub) !important; font-size: 14px; }
.related { display: flex; flex-wrap: wrap; gap: 10px; }
.related a { background: var(--surface); padding: 10px 16px; border-radius: 10px; text-decoration: none; color: var(--sub); transition: color .15s, background .15s; }
.related a:hover { background: var(--main); color: var(--main-ink); }
.cert-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 12px; margin: 18px 0 8px; max-width: 900px; }
.cert-form label { display: grid; gap: 6px; color: var(--sub); font-size: 13.5px; }
.cert-form input { background: var(--surface); border: 2px solid transparent; border-radius: 10px; color: var(--text); font: inherit; font-size: 16px; padding: 12px 14px; width: 100%; }
.cert-form input:focus { outline: none; border-color: var(--main); }
.cert-wrap { margin: 18px 0 8px; max-width: 900px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--surface); }
.cert-wrap svg { display: block; width: 100%; height: auto; stroke: none; }
@media (max-width: 760px) { .cert-form { grid-template-columns: 1fr 1fr; } .cert-form label:first-child { grid-column: 1 / -1; } }
@page { size: A4 landscape; margin: 8mm; }
@media print { body * { visibility: hidden; } #certView, #certView * { visibility: visible; } #certView { position: absolute; left: 0; top: 0; width: 100%; } }
/* bot / friend caret */
.caret.bot { background: color-mix(in srgb, var(--text) 60%, var(--bg)); animation: none; width: 2px; transition: left .12s linear, top .12s linear; }
.caret.bot::before { content: attr(data-label); position: absolute; left: -2px; top: -1.15em; font-size: .38em; letter-spacing: .04em; color: var(--sub); white-space: nowrap; }
.restart-row { align-items: center; gap: 6px; }
.restart.on { color: var(--main); }
.racelabel { font-size: calc(var(--ui) * .9); min-width: 0; white-space: nowrap; }
.restart.race-btn { width: auto; padding: 0 16px; display: inline-flex; align-items: center; gap: 9px; }
.restart.race-btn svg { width: 20px; height: 20px; }
#chalBanner { margin: 0 0 14px; }.caret.bot { width: 3px; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--text) 80%, var(--bg)) 0 5px, transparent 5px 8px); border-radius: 0; }
.caret.bot::before { content: none; }

/* settings page */
.settings-page { width: min(1120px, 100% - 8rem); margin: 0 auto; padding: 7vh 0 3vh; }
.settings-page h1 { font-size: clamp(30px, 3vw, 46px); font-weight: 500; letter-spacing: -.03em; margin: 0 0 8px; color: var(--text); }
.s-lede { color: var(--sub); margin: 0; }
.s-sec { margin-top: 52px; }
.s-sec > h2 { font-size: 22px; font-weight: 500; color: var(--main); margin: 0 0 14px; }
.s-row { display: grid; grid-template-columns: minmax(200px, 330px) 1fr; gap: 12px 40px; align-items: center; padding: 20px 0; border-top: 1px solid var(--surface); }
.s-row .lab b { display: block; font-weight: 500; color: var(--text); font-size: 16px; }
.s-row .lab span { color: var(--sub); font-size: 14px; }
.settings-page .seg button { padding: 10px 16px; font-size: 15px; }
@media (max-width: 760px) { .settings-page { width: calc(100% - 2rem); } .s-row { grid-template-columns: 1fr; gap: 10px; } }

/* phones: smaller option bars so the words get the space, and the words sit high enough to stay above the on-screen keyboard */
.hidden-input { font-size: 16px; }   /* 16px or more stops iOS from zooming in when the keyboard opens */
@media (pointer: coarse) { .keys { display: none; } }
@media (max-width: 600px) {
  :root { --fs: calc(20px * var(--fsm)); --ui: 13px; }
  .top { padding-top: 12px; gap: 6px; }
  .brand svg { width: 34px; height: 34px; } .brand-text b { font-size: 17px; }
  .ib { width: 34px; height: 34px; } .ib svg { width: 19px; height: 19px; }
  .icons .ib:first-child, .icons .ib:nth-child(4) { display: none; }   /* the logo already goes home and the footer has About: room for the leaderboard, rooms, settings, bell and account */
  /* a phone keyboard covers the lower 40 to 45% of the screen, so the words sit in the upper-middle: clear of the keyboard, not glued to the header */
  .stage { justify-content: flex-start; padding-top: 8svh; }
  .config { gap: 5px; margin-bottom: 6svh; align-self: stretch; }
  .grp { padding: 2px 3px; border-radius: 10px; gap: 0; justify-content: center; }
  #toggles, #modes { flex: 1 1 auto; }
  #amounts { flex: 1 1 100%; justify-content: space-between; }
  .opt { padding: 6px 7px; font-size: 12px; gap: 5px; border-radius: 8px; }
  .opt svg { display: none; }
  .amt { padding: 6px 8px; flex: 1; justify-content: center; }
  .lang { font-size: 12px; margin-bottom: 3svh; gap: 6px; }
  .words { height: calc(var(--fs) * var(--lh) * 4); }
  .restart-row { margin-top: 18px; }
  .restart.race-btn { padding: 0 10px; } .racelabel { font-size: 12px; }
  .herofoot { padding-bottom: 10px; }
  .herofoot .foot-row { gap: 8px; }
}

/* hints, focus warning, background picture */
.no-tips .keys { display: none; }
.no-focuswarn .blurred .words { filter: none; opacity: 1; }
.no-focuswarn .focus-hint { display: none; }
html.has-bg::before { content: ""; position: fixed; inset: -40px; z-index: -2; background: var(--bgimg) center / cover no-repeat; filter: blur(var(--bgblur, 0px)); }
html.has-bg::after { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg); opacity: var(--bgdim, .35); pointer-events: none; }

/* notification bell and panel */
.bell { position: relative; margin-left: auto; }
.bell + .notif + .me { margin-left: 0; }
.icons + .bell { margin-left: auto; }
.bell .dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--main); box-shadow: 0 0 0 2px var(--bg); }
.notif { position: absolute; right: 0; top: 100%; width: min(380px, calc(100vw - 2rem)); max-height: min(70vh, 520px); overflow: auto; background: var(--surface); border: 1px solid color-mix(in srgb, var(--sub) 25%, transparent); border-radius: 14px; padding: 6px; z-index: 35; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.notif[hidden] { display: none; }
.n-head { padding: 10px 12px 6px; color: var(--sub); font-size: 13px; letter-spacing: .06em; }
.n-head b { font-weight: 500; }
.n-item { padding: 12px; border-radius: 10px; }
.n-item + .n-item { border-top: 1px solid color-mix(in srgb, var(--sub) 18%, transparent); }
.n-item.new { background: color-mix(in srgb, var(--main) 9%, transparent); }
.n-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.n-top b { color: var(--text); font-weight: 500; }
.n-top span { color: var(--sub); font-size: 12px; white-space: nowrap; }
.n-item p { margin: 4px 0 6px; color: var(--sub); font-size: 14px; line-height: 1.5; }
.n-item a { color: var(--main); font-size: 14px; text-underline-offset: 3px; }
.n-empty { padding: 14px 12px; color: var(--sub); margin: 0; }

/* on-screen keyboard map */
.keymap { display: flex; justify-content: center; margin-top: clamp(16px, 3.5vh, 38px); }
.keymap[hidden] { display: none; }
.km { display: inline-flex; flex-direction: column; gap: calc(var(--u) * .12); --u: 2.4rem; }
.km-row { display: flex; gap: calc(var(--u) * .12); }
.km-hands { display: flex; gap: calc(var(--u) * .9); }
.km-half { display: flex; flex-direction: column; gap: calc(var(--u) * .12); }
.km-alice .km-hands { gap: calc(var(--u) * 1.4); }
.km-alice .km-l { transform: rotate(9deg); transform-origin: 100% 100%; }
.km-alice .km-r { transform: rotate(-9deg); transform-origin: 0 100%; }
.km-spacerow { justify-content: center; }
.key { width: var(--u); height: var(--u); border-radius: calc(var(--u) * .22); background: var(--surface); color: var(--sub); display: grid; place-items: center; font-style: normal; font-size: calc(var(--u) * .38); transition: background .12s, color .12s, box-shadow .12s; }
.key b { grid-area: 1 / 1; font-weight: 400; }
.key.space { width: calc(var(--u) * 6.5); }
.key .up { display: none; }
.km-lg-uppercase .key.letter .lo { display: none; } .km-lg-uppercase .key.letter .up { display: inline; }
.km-lg-dynamic.km-shifted .lo { display: none; } .km-lg-dynamic.km-shifted .up { display: inline; }
.km-lg-blank .lo, .km-lg-blank .up { display: none !important; }
.key.down { background: color-mix(in srgb, var(--text) 22%, var(--surface)); color: var(--text); }
.key.next { box-shadow: inset 0 0 0 2px var(--main); color: var(--main); }
.key.ok { background: var(--main); color: var(--main-ink); }
.key.bad { background: var(--err); color: var(--bg); }
@media (pointer: coarse) { .keymap { display: none !important; } }
@media (max-width: 600px) { .keymap { display: none !important; } }

/* more settings controls */
.s-field { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.s-field input[type=text], .s-field select { background: var(--surface); border: 2px solid transparent; border-radius: 10px; color: var(--text); font: inherit; font-size: 15px; padding: 10px 14px; min-width: min(320px, 100%); }
.s-field input[type=text]:focus, .s-field select:focus { outline: none; border-color: var(--main); }
.s-field input[type=file] { color: var(--sub); font: inherit; font-size: 14px; max-width: 100%; }
.s-field input[type=file]::file-selector-button { background: var(--surface); color: var(--text); border: 0; border-radius: 10px; padding: 10px 16px; margin-right: 12px; font: inherit; font-size: 14px; cursor: pointer; }
.s-field input[type=file]::file-selector-button:hover { background: var(--main); color: var(--main-ink); }
.s-range { display: flex; align-items: center; gap: 16px; }
.s-range input { flex: 1; max-width: 340px; accent-color: var(--main); }
.s-range output { min-width: 64px; color: var(--text); font-variant-numeric: tabular-nums; }
.s-note { color: var(--sub); font-size: 13.5px; margin: 10px 0 0; max-width: 760px; }
.km-preview { display: flex; justify-content: center; padding: 28px 0 4px; }
.km-preview[hidden] { display: none; }
.btn.danger:hover, .btn.danger:focus-visible { background: var(--err); color: var(--bg); }
.btn.mini { padding: 9px 18px; border-radius: 10px; }
@media (max-width: 600px) { .km-preview { display: none; } }

/* Phosphor icons are filled shapes, not strokes */
svg.ph { fill: currentColor; stroke: none; }
.ib svg.ph { width: 24px; height: 24px; }
.opt svg.ph { width: 1.15em; height: 1.15em; }
.restart svg.ph { width: 24px; height: 24px; }
.restart.race-btn svg.ph { width: 22px; height: 22px; }
.lang svg.ph { width: 1.2em; height: 1.2em; }
@media (max-width: 900px) { .ib svg.ph { width: 22px; height: 22px; } }
@media (max-width: 600px) { .ib svg.ph { width: 21px; height: 21px; } }

/* language switcher under the test options, and language links on the settings page */
.lang { position: relative; z-index: 6; }
.langbtn { border: 0; background: transparent; color: var(--sub); font: inherit; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 10px; cursor: pointer; transition: color .15s, background .15s; }
.langbtn:hover, .langbtn:focus-visible { color: var(--text); background: var(--surface); }
.langmenu { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; margin: 8px 0 0; padding: 8px; list-style: none; background: var(--surface); border: 1px solid color-mix(in srgb, var(--sub) 25%, transparent); border-radius: 14px; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px; z-index: 30; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); width: max-content; max-width: 92vw; }
.langmenu[hidden] { display: none; }
.langmenu a { display: block; padding: 9px 14px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: .95em; white-space: nowrap; }
.langmenu a:hover, .langmenu a:focus-visible { background: var(--main); color: var(--main-ink); }
.langmenu a[aria-current] { color: var(--main); }
.seg a { background: var(--surface); color: var(--sub); padding: 10px 16px; border-radius: 9px; text-decoration: none; font-size: 15px; transition: color .15s, background .15s; }
.seg a:hover, .seg a:focus-visible { background: var(--main); color: var(--main-ink); }
.seg a[aria-checked="true"] { background: var(--main); color: var(--main-ink); }

/* Chinese, Japanese and Korean pages: fall back to the system's own CJK fonts */
html:lang(ja) body, html:lang(ja) button, html:lang(ja) input { font-family: var(--mono), "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif; }
html:lang(ko) body, html:lang(ko) button, html:lang(ko) input { font-family: var(--mono), "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif; }
html:lang(zh-Hans) body, html:lang(zh-Hans) button, html:lang(zh-Hans) input { font-family: var(--mono), "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
html:lang(zh-Hant) body, html:lang(zh-Hant) button, html:lang(zh-Hant) input { font-family: var(--mono), "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif; }
html:lang(ja) .words, html:lang(ko) .words, html:lang(zh-Hans) .words, html:lang(zh-Hant) .words { letter-spacing: .02em; }
.comp { position: absolute; top: calc(100% + 2px); left: 0; z-index: 4; background: var(--surface); color: var(--main); border-radius: 8px; padding: 2px 10px; font-size: .62em; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); white-space: nowrap; }
.comp[hidden] { display: none; }

@media (max-width: 380px) { .brand-text { display: none; } }

/* the account icon in the top bar: your first letter on a colour made from your name, instead of the person icon */
.me { position: relative; }
.me.in svg { display: none; }
.me-letter { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; line-height: 1; background: hsl(var(--h) 45% 40%); color: #fff; }
.me.in:hover .me-letter { background: hsl(var(--h) 50% 48%); }
@media (max-width: 600px) { .me-letter { width: 26px; height: 26px; font-size: 13px; } }

/* footer social links (written from /admin/) and the cookie choice */
.social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.social:empty { display: none; }
.endfoot .social a { color: var(--text); opacity: .85; }
.endfoot .social a:hover { opacity: 1; color: var(--main); }
.endfoot .social a[href="#cookies"] { color: var(--sub); }
.cookiebar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; width: min(760px, calc(100% - 24px)); display: flex; gap: 14px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface); color: var(--text); border: 1px solid color-mix(in srgb, var(--sub) 35%, transparent); border-radius: 14px; padding: 14px 18px; box-shadow: 0 10px 40px #0006; font-size: 13.5px; }
.cookiebar p { margin: 0; flex: 1 1 320px; color: var(--sub); }
.cookiebar a { color: var(--text); }
.cookiebar div { display: flex; gap: 8px; }
.cookiebar .btn { background: var(--bg); color: var(--text); }
.cookiebar .btn.go { background: var(--main); color: var(--main-ink); }

/* phones: the options show when the page loads, with little empty space around them. While you type they fold away (class "typing", set by test.js)
   so the words sit high, above the keyboard and its arrow bar, and they come back when you stop. */
@media (max-width: 600px) {
  .stage { padding-top: 6px; }
  .config { margin-bottom: 14px; }
  .lang { margin-bottom: 8px; }
  .config, .lang { max-height: 220px; transition: max-height .25s ease, margin .25s ease, opacity .25s ease; }
  body.typing .config, body.typing .lang { max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; pointer-events: none; }
  body.typing .stage { padding-top: 10px; }
  .testing .herofoot { opacity: .14; transition: opacity .25s; }   /* phones only: the bottom links fade while you type. The menu icons stay fully visible. Nothing fades on a computer. */
}

/* link cards on the hub pages (lessons, guides, all tests) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 1rem 0 1.6rem; }
.card-link { display: grid; gap: 4px; align-content: start; background: var(--surface); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--text); transition: background .15s, transform .15s; }
.card-link:hover, .card-link:focus-visible { background: color-mix(in srgb, var(--surface) 78%, var(--main)); transform: translateY(-2px); }
.card-link b { font-weight: 500; font-size: 1rem; }
.card-link span { color: var(--sub); font-size: .85rem; }
.card-link em { font-style: normal; color: var(--main); font-size: .85rem; }
.lesson-card.done { box-shadow: inset 4px 0 0 var(--main); }
.lesson-state:empty { display: none; }
.lesson-progress { background: var(--surface); border-radius: 14px; padding: 14px 18px; margin: 1.2rem 0; }
.lesson-progress a { color: var(--main); }

/* the keyboard picture on a lesson page: bright keys are new, faint keys are known, the colour is the finger */
.lkb { --k: 38px; display: grid; gap: 4px; margin: 1rem 0 .6rem; overflow-x: auto; padding-bottom: 6px; width: max-content; max-width: 100%; }
.lkr { display: flex; gap: 4px; }
.lk { width: var(--k); height: var(--k); display: grid; place-items: center; border-radius: 8px; font-size: 13px; background: var(--surface); color: color-mix(in srgb, var(--sub) 70%, var(--bg)); opacity: .55; flex: none; }
.lk.f1 { --fc: #e08ad0; } .lk.f2 { --fc: #f0a35c; } .lk.f3 { --fc: #8fd6b5; } .lk.f4 { --fc: #7fb6ee; }
.lk.known { opacity: 1; background: color-mix(in srgb, var(--fc, var(--sub)) 20%, var(--surface)); color: var(--text); }
.lk.new { opacity: 1; background: var(--fc, var(--main)); color: #1b1b1b; font-weight: 600; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc, var(--main)) 50%, transparent); }
.lk.space { width: calc(var(--k) * 6); font-size: 11px; --fc: var(--main); }
@media (max-width: 600px) { .lkb { --k: 28px; } .lk { font-size: 11px; border-radius: 6px; } }
/* typing lessons keep the page simple: no option bars or language line */
.fixed-list .config, .fixed-list .lang { display: none; }

.lessonbar { margin: 0 0 clamp(14px, 3vh, 30px); display: grid; gap: 4px; justify-items: start; }
.lessonbar > p { margin: 0; color: var(--sub); font-size: calc(var(--ui) * .95); }
.lessonbar > p b { color: var(--main); font-weight: 500; margin-right: .8rem; }
.lessonbar .lkb { margin: 8px 0 2px; --k: 34px; }
.lessonbar .muted { font-size: calc(var(--ui) * .8); opacity: .8; }
.fixed-list .stage { padding-top: clamp(12px, 3vh, 28px); }