@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/static/fonts/Archivo-100_900.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 100 700; font-display: swap; src: url("/static/fonts/IBMPlexSans-var.woff2") format("woff2"); }

:root {
  --paper: #ffffff;
  --ink: #121418;
  --ink-2: #4f5663;
  --muted: #8a919c;
  --orange: #f26b1d;
  --red: #e5383b;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--paper); color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }

.hud { position: fixed; left: 0; right: 0; display: flex; justify-content: space-between; gap: 16px; pointer-events: none;
  padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.hud > * { pointer-events: auto; }
/* The text sits on the drawing area: a stroke may start under it, so only the button and the link take touches. */
.hud .intro, #status { pointer-events: none; user-select: none; -webkit-user-select: none; }
.top { top: 0; align-items: flex-start; padding-top: max(20px, env(safe-area-inset-top)); }
.bottom { bottom: 0; align-items: baseline; padding-bottom: max(16px, env(safe-area-inset-bottom));
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bottom a { color: var(--muted); text-underline-offset: 3px; }
.bottom a:hover { color: var(--ink); }

.intro { display: grid; gap: 6px; max-width: 34rem; }
h1 { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; font-size: clamp(20px, 3.2vw, 26px); letter-spacing: -0.01em; line-height: 1.1; }
#hint { font-size: clamp(14px, 2.2vw, 16px); line-height: 1.45; color: var(--ink-2); transition: opacity .4s; text-wrap: pretty; }
#hint.score { color: var(--ink); font-weight: 500; }
#hint b { font-weight: 700; }

#mode { font: inherit; font-size: 14px; color: var(--ink-2); background: var(--paper); border: 1px solid #d9dce1; border-radius: 999px;
  padding: 6px 14px; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
#mode:hover { color: var(--ink); border-color: var(--ink-2); }
#mode[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#mode:focus-visible, .bottom a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { #hint { transition: none; } }