:root {
  --graphite: #25272A; --graphite-2: #3A3C40; --steel: #8D8F90;
  --bone: #ECE6DA; --bone-2: #F5F0E6; --text: #1F2022; --faded: #68635A;
  --signal: #C21F1B; --rule: #25272A40;
  --type: "American Typewriter", "Courier New", Courier, ui-monospace, monospace;
  --ui: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
  --pad: 18px; --lh: 2.4rem;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--graphite); }
body { margin: 0; color: var(--text); font: 400 1rem/1.45 var(--type); }
h1, h2, h3, p, dl, dd, ol { margin: 0; padding: 0; }
ol { list-style: none; }
button, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; background: none; border: 0; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

#app { max-width: 880px; margin: 0 auto; background: var(--bone); min-height: 100dvh; display: flex; flex-direction: column; padding: 0 var(--pad); }
.masthead { padding: 18px 0 14px; text-align: center; }
h1 { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(1.45rem, 6.4vw, 2.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; text-align: left; text-wrap: balance; }
h1 img { width: 1.8em; height: 1.8em; flex: none; display: block; }

.platen { margin-inline: calc(var(--pad) * -1); height: 58px; background: var(--graphite); border-bottom: 4px solid var(--steel); display: flex; align-items: flex-end; justify-content: space-between; padding: 0 18px 12px; position: relative; }
.platen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 24px; height: 4px; background: var(--signal); }
.guide { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1; }
.screw { width: 16px; height: 16px; border-radius: 50%; background: var(--steel); position: relative; z-index: 1; }
.screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 7px; height: 2px; background: var(--graphite); transform: rotate(-35deg); }

#options { padding-top: 12px; }
#mode-options { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
#mode-options button { min-height: 44px; font-size: .9375rem; border-bottom: 1px solid var(--rule); color: var(--faded); }
#mode-options [data-pressed="true"] { color: var(--text); font-weight: 700; border-bottom: 3px solid var(--signal); }

#test { display: flex; flex-direction: column; padding-top: 18px; }
#prompt { font-size: clamp(1.4rem, 5.6vw, 1.75rem); line-height: var(--lh); height: calc(var(--lh) * 3); overflow: hidden; cursor: text; color: var(--faded); }
[data-word] { display: inline-block; margin-right: .6em; }
[data-char-state="correct"] { color: var(--text); }
[data-char-state="incorrect"], [data-char-state="extra"] { color: var(--signal); text-decoration: underline 2px; text-underline-offset: 3px; }
[data-char-state="missed"] { color: var(--faded); text-decoration: line-through; }
[data-word-state="current"] { font-weight: 700; }
[data-cursor] { box-shadow: -2px 0 0 var(--signal); }
[data-cursor-after] { box-shadow: 2px 0 0 var(--signal); }

label[for="typing-input"] { margin-top: 10px; font-size: .875rem; color: var(--faded); }
#typing-input { display: block; width: 100%; height: 52px; margin-top: 4px; padding: 13px 14px; background: var(--graphite); color: var(--bone-2); caret-color: var(--signal); border: 0; border-bottom: 3px solid var(--steel); border-radius: 2px; resize: none; overflow: hidden; white-space: pre; font-size: 16px; line-height: 22px; }
#typing-input:focus { outline: none; border-bottom-color: var(--signal); }
#typing-input:disabled { opacity: 1; }
#status { min-height: 1.45em; margin-top: 8px; text-align: center; font-size: .9375rem; color: var(--faded); }

#live-stats { display: grid; grid-template-columns: 1fr 1fr; align-items: end; margin-top: 2px; }
#live-stats .time { grid-column: 1 / -1; text-align: center; }
#live-stats .time dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#live-stats .time dd { font-size: clamp(6rem, 30vw, 9rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--graphite); }
#live-stats div:not(.time) { display: flex; justify-content: center; align-items: baseline; gap: 8px; font-size: .9375rem; color: var(--faded); padding: 6px 0; }
#live-stats div:not(.time) dd { font-size: 1.375rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

.deck { display: grid; gap: 10px; margin-top: 14px; }
#duration-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#duration-options button { min-height: 52px; border: 2px solid var(--graphite); border-radius: 3px; font-size: 1.125rem; font-weight: 700; }
#duration-options [data-pressed="true"] { background: var(--graphite); color: var(--bone-2); }
#duration-options button:disabled { border-color: var(--rule); color: var(--faded); cursor: default; }
#duration-options button:disabled[data-pressed="true"] { background: none; border-color: var(--graphite); color: var(--text); }
#restart, #again { min-height: 54px; background: var(--signal); color: #fff; border-radius: 3px; font-size: 1.25rem; font-weight: 700; }
#share-copy { min-height: 54px; border: 2px solid var(--graphite); border-radius: 3px; font-size: 1.125rem; font-weight: 700; }

#app[data-state="finished"] #test > :not(#status) { display: none; }
#results { padding-top: 10px; }
h2 { font-size: 1.375rem; font-weight: 700; line-height: 1.2; padding-bottom: 6px; border-bottom: 2px solid var(--graphite); }
h3 { font-size: 1.0625rem; font-weight: 700; margin-top: 22px; }
#new-best { margin-top: 12px; color: var(--signal); font-weight: 700; font-size: 1.125rem; }
#results dl { margin-top: 2px; }
#results dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
#results dl dd { font-weight: 700; font-variant-numeric: tabular-nums; }
#results .headline { flex-direction: column; align-items: center; gap: 0; padding: 8px 0 14px; }
#results .headline dd { order: -1; font-size: clamp(6rem, 30vw, 9rem); line-height: 1; letter-spacing: -.02em; }
#most-missed { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; font-weight: 700; }
#share-text { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; background: var(--bone-2); border: 1px solid var(--rule); border-radius: 2px; resize: none; font-size: 1rem; }
#history { margin-top: 34px; padding-bottom: 28px; }
#history-list li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
#history-list:empty::before { content: "No tests yet."; display: block; padding: 9px 0; color: var(--faded); }

.basket { margin: auto calc(var(--pad) * -1) 0; height: 64px; background: var(--graphite); overflow: hidden; }
.basket svg { display: block; width: 100%; height: 100%; }

/* Phone with the keyboard up: keep the words and the input together. */
@media (max-width: 719px) {
  #app:has(#typing-input:focus) .masthead, #app:has(#typing-input:focus) .platen,
  #app:has(#typing-input:focus) #options, #app:has(#typing-input:focus) #history,
  #app:has(#typing-input:focus) .basket, #app:has(#typing-input:focus) .deck,
  #app:has(#typing-input:focus) label[for="typing-input"], #app:has(#typing-input:focus) #status { display: none; }
  #app:has(#typing-input:focus) #test { padding-top: 8px; }
  #app:has(#typing-input:focus) #live-stats { order: -1; grid-template-columns: repeat(3, 1fr); margin: 0 0 6px; }
  #app:has(#typing-input:focus) #live-stats .time { grid-column: auto; }
  #app:has(#typing-input:focus) #live-stats .time dd { font-size: 2.25rem; }
  #app:has(#typing-input:focus) #prompt { --lh: 2.1rem; }
}
@media (min-width: 720px) {
  :root { --pad: 48px; --lh: 2.9rem; }
  #app { margin-top: 28px; min-height: calc(100dvh - 28px); border-radius: 2px 2px 0 0; }
  .platen { height: 64px; }
  #mode-options { display: flex; justify-content: center; gap: 28px; }
  #mode-options button { border-bottom-color: transparent; padding: 0 2px; }
  #prompt { font-size: 1.875rem; }
  #live-stats { grid-template-columns: 1fr auto 1fr; }
  #live-stats .time { grid-column: 2; grid-row: 1; }
  #live-stats div:not(.time) dd { font-size: 1.75rem; }
  .deck { grid-template-columns: 3fr 1fr; }
  #results .deck { grid-template-columns: 1fr 1fr; }
  #results dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  #results .headline { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Content pages */
.wordmark { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(1.45rem, 6.4vw, 2.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; text-align: left; color: inherit; text-decoration: none; }
.wordmark img { width: 1.8em; height: 1.8em; flex: none; display: block; }
.prose { width: 100%; max-width: 40rem; margin: 0 auto; padding: 8px 0 32px; line-height: 1.6; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose ul { padding-left: 1.25em; list-style: disc; }
.prose li { margin-bottom: 6px; }
.prose h1 { display: block; font-size: clamp(1.75rem, 7vw, 2.4rem); margin: 8px 0 16px; text-align: left; }
.prose h2 { margin: 30px 0 12px; }
.prose h3 { margin: 20px 0 4px; line-height: 1.3; }
.prose a, .site-note a { color: var(--signal); text-underline-offset: 3px; }
.prose .back a { display: inline-flex; align-items: center; min-height: 44px; }
.prose kbd { font: inherit; font-weight: 700; }
.site-note { padding-bottom: 14px; font-size: .9375rem; color: var(--faded); }
.site-footer { padding-bottom: 18px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 22px; border-top: 1px solid var(--rule); padding-top: 6px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; color: var(--text); text-underline-offset: 3px; }
@media (max-width: 719px) {
  #app:has(#typing-input:focus) .site-note, #app:has(#typing-input:focus) .site-footer { display: none; }
}

/* Retention: results panel, sheet, stats extras */
.banner { margin: 10px 0; padding: 10px 12px; background: var(--bone-2); border-left: 4px solid var(--signal); font-size: .9375rem; }
.compare { margin-top: 10px; text-align: center; color: var(--faded); font-size: .9375rem; }
.versus { margin-top: 10px; padding: 10px 12px; background: var(--bone-2); border: 1px solid var(--rule); font-size: .9375rem; }
#results .actions { grid-template-columns: 1fr 1fr; }
#again { grid-column: 1 / -1; min-height: 56px; background: var(--graphite); color: var(--bone-2); border-radius: 3px; font-size: 1.125rem; font-weight: 700; }
#btn-challenge, #btn-share, #btn-change { min-height: 48px; border: 2px solid var(--graphite); border-radius: 3px; font-size: .9375rem; font-weight: 700; padding: 0 8px; }
#btn-change { grid-column: 1 / -1; border-width: 0; font-weight: 400; text-decoration: underline; color: var(--faded); }
.sheet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sheet-row a, .sheet-row button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--graphite); border-radius: 3px; color: var(--text); text-decoration: none; }
.sheet-status { font-size: .875rem; color: var(--faded); }
.sheet-copy, #backup-box { width: 100%; padding: 8px; margin-top: 8px; font: inherit; font-size: .8125rem; background: var(--bone-2); border: 1px solid var(--rule); }
.countdown { margin-top: 12px; text-align: center; color: var(--faded); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.spark { display: block; width: 100%; height: 40px; color: var(--signal); }
.note, .stat-line { color: var(--faded); font-size: .9375rem; margin-top: 6px; }
#history h3 { margin-top: 18px; font-size: 1rem; }
#bests { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .9375rem; }
#bests th, #bests td { padding: 7px 4px; border-bottom: 1px solid var(--rule); text-align: right; font-weight: 400; }
#bests th:first-child { text-align: left; }
#bests thead th { font-weight: 700; }
#weakest { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: .9375rem; }
#history details { margin-top: 14px; }
#history summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
#friends-list { list-style: none; font-size: .9375rem; }
#friends-list li { padding: 6px 0; border-bottom: 1px solid var(--rule); }

/* First-visit help: fixed so it never shifts the game. */
.help-btn { position: fixed; z-index: 40; top: 8px; right: 8px; width: 44px; height: 44px; border: 1px solid var(--h-ink); border-radius: 50%; background: var(--h-bg); color: var(--h-ink); font-size: 1.25rem; font-weight: 700; line-height: 1; }
.help-card { position: fixed; z-index: 50; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-height: 56dvh; overflow: auto; padding: 12px 14px; background: var(--h-bg); color: var(--h-ink); border: 1px solid var(--h-ink); border-radius: 6px; box-shadow: 0 8px 24px #0004; animation: help-in .2s ease-out; }
.help-text { margin: 8px 0 0; font-size: 1rem; line-height: 1.35; }
.help-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.help-row .help-quiet:first-child { margin-right: auto; }
.help-quiet { min-height: 44px; padding: 0 8px; background: none; color: var(--h-soft); font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; }
.help-primary { min-height: 44px; padding: 0 18px; border-radius: 3px; background: var(--h-accent); color: var(--h-bg); font-weight: 700; }
.help-link { min-height: 44px; padding: 0 4px; background: none; color: var(--h-accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.help-strip { position: fixed; z-index: 40; top: 8px; left: 8px; right: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; background: var(--h-bg); border: 1px solid var(--h-ink); border-radius: 4px; }
.help-dialog { width: min(440px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 12px 16px 16px; background: var(--h-bg); color: var(--h-ink); border: 1px solid var(--h-ink); border-radius: 6px; }
.help-dialog::backdrop { background: #0006; }
.help-top { display: flex; align-items: center; justify-content: space-between; }
.help-top h2 { margin: 0; padding: 0; border: 0; font-size: 1.375rem; }
.help-legend { list-style: none; margin: 8px 0 0; padding: 0; font-size: .9375rem; }
.help-legend li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--h-line); line-height: 1.3; }
.help-more { display: inline-flex; align-items: center; min-height: 44px; color: var(--h-accent); text-underline-offset: 3px; }
.help-stage { display: flex; gap: 10px; justify-content: center; }
.help-frame { flex: 1 1 0; min-width: 0; }
.help-frame-label { display: block; font-size: .8125rem; color: var(--h-soft); }
.demo { position: relative; flex: 1 1 auto; min-width: 0; padding: 4px 0; }
.demo-pointer { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid var(--h-accent); border-radius: 50%; background: var(--h-tint); transition: transform .3s ease; pointer-events: none; }
@keyframes help-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes help-pulse { 50% { transform: scale(1.08); } }
@media (min-width: 720px) { .help-card { left: auto; right: 16px; width: 330px; max-height: calc(100dvh - 90px); } }
:root { --h-bg: var(--bone); --h-ink: var(--text); --h-soft: var(--faded); --h-accent: var(--signal); --h-line: var(--rule); --h-tint: #C21F1B1f; }
.help-btn { border-color: var(--bone); background: var(--graphite); color: var(--bone-2); }
#typing-input[data-help-pulse] { animation: help-pulse .7s ease-in-out 2; }
@media (max-width: 719px) { body:has(#typing-input:focus) .help-btn { display: none; } }
.demo-prompt { font-size: 1.375rem; line-height: 1.6; color: var(--faded); }
.demo-prompt [data-word] { margin-right: .5em; }
.demo-bar { display: flex; align-items: baseline; justify-content: space-between; margin-top: 2px; font-size: .9375rem; color: var(--faded); }
.demo-clock { font-size: 1.75rem; font-weight: 700; color: var(--graphite); font-variant-numeric: tabular-nums; }
.demo-keycap { min-width: 96px; padding: 2px 8px; border: 2px solid var(--graphite); border-radius: 3px; text-align: center; font-weight: 700; color: var(--text); }
.sw { display: inline-block; min-width: 3.2em; font-size: 1.125rem; }

/* Keep the fixed ? button off the title on narrow phones. */
@media (max-width: 480px) { .masthead { padding-inline: 56px; } }