:root {
  color-scheme: dark;
  --bg: #121212;
  --surface: #1b1a19;
  --fg: #ebe8e3;
  --muted: #9a958d;
  --line: #2e2c2a;
  --stimulus: #f2c14e;
  --on-stimulus: #1a1405;
  --series: #b88b32;
  /* The only three text sizes outside the stimulus. */
  --small: 13px;
  --body: 16px;
  --title: 30px;
  --radius: 14px;
}

/* Sections below set display, which would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

html, body { margin: 0; background: var(--bg); color: var(--fg); overscroll-behavior: none; }
body { font: var(--body)/1.5 system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif; touch-action: manipulation; }

section { max-width: 440px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 14px; }
p, dl, ol { margin: 0; }
header { display: flex; flex-direction: column; gap: 4px; }
h1, h2 { font-size: var(--title); line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h1 .dot { color: var(--stimulus); }
.muted { color: var(--muted); }
.label { font-size: var(--small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }

button { display: block; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; background: none; color: var(--fg); }
button.primary { padding: 17px; border: 0; background: var(--stimulus); color: var(--on-stimulus); font-weight: 600; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.caution { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--small); line-height: 1.6; color: var(--muted); }
.caution strong { color: var(--fg); }
dl, dl.card { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

#test {
  position: fixed; inset: 0; max-width: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#notice { position: absolute; top: 16px; left: 16px; right: 16px; margin: 0; text-align: center; color: var(--muted); }
#stage { font-size: 22vw; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
#stage.on { color: var(--stimulus); }

/* Above the fixed test overlay, so an error during a test is never hidden behind it. */
#error { position: relative; z-index: 1; margin: 0; padding: 12px 16px; background: #5a1d1d; color: #fff; }

#chart svg { display: block; width: 100%; height: auto; }
#chart polyline { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#chart circle { fill: var(--series); stroke: var(--bg); stroke-width: 2; }
#list { padding: 0; list-style: none; }
#list li { padding: 10px 0; border-bottom: 1px solid var(--line); }