:root {
  --color-code-keyword: #f0b86e;
  --color-code-string: #a8d49d;
  --color-code-number: #d8b9ef;
  --color-code-comment: #91a298;
  --color-code-definition: #8fcad4;
  --color-code-variable: #eef4ee;
  --color-code-punctuation: #c7d3ca;
  --color-code-invalid: #ffb49d;
  --color-code-border: #3e5146;
  --color-code-active-line: #213229;
  --color-code-selection: #315743;
  --color-code-search: #655b2c;
  --color-code-search-selected: #7c6c2c;

  --color-canvas: #d8cbb2;
  --color-surface: #fffaf0;
  --color-surface-subtle: #f3ead7;
  --color-surface-strong: #e8dcc5;
  --color-ink: #292720;
  --color-muted: #706858;
  --color-primary: #245449;
  --color-primary-hover: #173b34;
  --color-primary-soft: #dce7dc;
  --color-border: #aa9d84;
  --color-border-soft: #d5c8af;
  --color-focus: #b86f19;
  --color-danger: #8b382b;
  --color-code: #17211e;
  --color-code-ink: #f2eee3;
  --color-code-muted: #bcb9aa;
  --color-pencil: #777064;
  --paper-rule: rgb(67 101 98 / 12%);
  --paper-margin: rgb(157 72 55 / 30%);
  --paper-texture: radial-gradient(circle at 18% 26%, rgb(88 70 45 / 5%) 0 1px, transparent 1.4px), radial-gradient(circle at 72% 68%, rgb(255 255 255 / 42%) 0 1px, transparent 1.5px), linear-gradient(97deg, transparent 0 48%, rgb(91 68 37 / 2%) 49%, transparent 50%);
  --scratch-mark: url('/practice/scratch.svg');
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-control: 4px;
  --radius-card: 2px;
  --shadow-card: 1px 2px 0 rgb(85 69 43 / 18%), 5px 7px 18px rgb(57 45 28 / 17%);
  --shadow-paper: 1px 1px 0 #eee3cf, 3px 3px 0 #c9baa0, 7px 9px 22px rgb(57 45 28 / 22%);
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-body: Georgia, "Times New Roman", serif;
  --font-typewriter: "Courier New", Courier, monospace;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color: var(--color-ink); background: var(--color-canvas); font-family: var(--font-body); line-height: 1.6; }
body { margin: 0; min-width: 300px; color: var(--color-ink); background-color: var(--color-canvas); background-image: var(--paper-texture); font-size: 16px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-primary); text-underline-offset: 3px; }
p { max-width: 70ch; }
h1, h2, h3 { color: var(--color-ink); font-family: var(--font-typewriter); line-height: 1.2; }
h1 { letter-spacing: -.045em; }
.muted, .small { color: var(--color-muted); font-size: 14px; line-height: 1.5; }
.eyebrow { margin: 0 0 var(--space-2); color: var(--color-pencil); font-family: var(--font-typewriter); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-control);
  background: linear-gradient(var(--color-surface), var(--color-surface-strong));
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-typewriter);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}
button:hover:not(:disabled), .button:hover { background: var(--color-surface-subtle); border-color: var(--color-primary); }
button.primary, .button.primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }
button.primary:hover:not(:disabled), .button.primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
button:disabled, .button[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.field-label { display: inline-block; margin: 0 0 var(--space-2); color: var(--color-ink); font-size: 14px; font-weight: 700; }
input:not([type="checkbox"]):not([type="file"]), select, textarea {
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  padding: 10px 12px;
}
textarea { resize: vertical; }
input:disabled, select:disabled, textarea:disabled, textarea[readonly] { background: var(--color-surface-subtle); color: var(--color-muted); }

.card { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-card); background-color: var(--color-surface); background-image: var(--paper-texture); box-shadow: var(--shadow-paper); }
details { border-top: 1px solid var(--color-border-soft); padding: var(--space-4) 0; }
summary { color: var(--color-ink); cursor: pointer; font-weight: 700; }
[role="status"] { color: var(--color-muted); }
#notice:not(:empty) { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-primary-soft); }
.update-banner { margin: 0; padding: var(--space-3) clamp(18px, 4vw, 56px); border-bottom: 1px solid var(--color-border); background: var(--color-primary-soft); color: var(--color-ink); font-size: 14px; text-align: center; }

.action-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.action-group--equal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; }
.action-group--equal > button, .action-group--equal > .button { width: 100%; }

header { display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--color-border); background-color: var(--color-surface-subtle); background-image: var(--paper-texture); padding: var(--space-4) clamp(18px, 4vw, 56px); box-shadow: 0 2px 8px rgb(57 45 28 / 13%); }
header > a, header .home { color: var(--color-ink); font-weight: 750; text-decoration: none; }
header .brand { margin-right: auto; color: var(--color-muted); }
dialog { width: min(700px, calc(100% - 32px)); max-height: 85vh; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-6); background: var(--color-surface); color: var(--color-ink); }
dialog::backdrop { background: rgb(20 35 28 / 62%); }
dialog .close { float: right; }

@media (max-width: 540px) {
  .action-group--equal { grid-template-columns: 1fr; }
  .action-group--equal > button, .action-group--equal > .button { width: 100%; }
  dialog { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* A shared typewriter-key response, identical for pointer and keyboard activation. */
button, .button { box-shadow: inset 0 1px 0 rgb(255 255 255 / 68%), 0 4px 0 var(--color-ink), 0 6px 8px rgb(57 45 28 / 22%); transition: transform 100ms ease, box-shadow 100ms ease, background-color 120ms ease; }
button.primary, .button.primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 4px 0 var(--color-primary-hover), 0 6px 8px rgb(57 45 28 / 24%); }
button:active:not(:disabled), .button:active { transform: translateY(3px); box-shadow: inset 0 1px 2px rgb(0 0 0 / 22%), 0 1px 0 var(--color-ink); }
button:disabled { box-shadow: none; }
.sound-toggle { margin-left: auto; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { button, .button { transition: none; } button:active:not(:disabled), .button:active { transform: none; } }

/* A short connection between the practice task and work worth doing. */
.field-context { margin: var(--space-4) 0; padding-left: var(--space-4); border-left: 2px solid var(--paper-margin); color: var(--color-muted); font-size: 16px; line-height: 1.6; max-width: 65ch; }