@font-face { font-family: 'Mzeqala'; src: url('/fonts/Mzeqala.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/InstrumentSans.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --desk: #1d1915;
  --desk-2: #27211b;
  --desk-line: #3a322a;
  --wood: #4a3a2c;
  --paper: #fbf7ee;
  --ink: #23305a;
  --chalk: #efe7d8;
  --chalk-2: #e3d8c3;
  --muted: #b9ad97;
  --accent: #e8b07a;
  --hl: #f6d77a;
  --rule: #cfdbe9;
  --margin: #e7a99c;
  --shadow: #0d0b09;
  --hand: 'Mzeqala', 'Instrument Sans', system-ui, sans-serif;
  --ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --r1: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --r2: 15px 255px 15px 225px / 225px 15px 255px 15px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desk); color: var(--chalk); font: 15px/1.45 var(--ui); }
a { color: var(--accent); }
a:hover { color: #f3cba3; }
input, textarea, button, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pre { white-space: pre-line; }

/* Hand-drawn buttons: irregular radius, 2px ink border, offset shadow, tilt on hover, press-in on click. */
.hb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 16px; cursor: pointer;
  font-family: var(--hand); font-size: 23px; line-height: 1; color: var(--chalk);
  background: transparent; border: 2px solid var(--chalk); border-radius: var(--r1);
  box-shadow: 2px 3px 0 var(--shadow);
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  -webkit-text-stroke: 0.35px currentColor;
}
.hb.alt { border-radius: var(--r2); }
.hb:hover { transform: rotate(-1.6deg) translateY(-1px); }
.hb:active { transform: translate(2px, 3px); box-shadow: none; }
.hb:disabled { opacity: .5; cursor: default; transform: none; }
.hb.primary { color: var(--ink); background: var(--hl); border-color: var(--hl); border-radius: var(--r2); }
.hb.paper { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.hb.ink { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.hb.round { width: 46px; padding: 0; border-radius: 50% 45% 55% 48% / 52% 48% 50% 46%; }
.hb svg { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}