:root {
  --paper: #eef1f4;
  --sheet: #ffffff;
  --ink: #16233b;
  --muted: #5a6780;
  --line: #d3d9e2;
  --patina: #2f7f6f;
  --brass: #9a7415;
  --danger: #b3261e;
  /* code tokens */
  --c-key: #16233b;
  --c-type: #2f7f6f;
  --c-keyword: #6a4bb0;
  --c-string: #9a4a1f;
  --c-number: #1d63a8;
  --c-comment: #7b8598;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1626;
    --sheet: #14203a;
    --ink: #e4e9f2;
    --muted: #9aa6bd;
    --line: #26344f;
    --patina: #5cc3aa;
    --brass: #e0b64a;
    --danger: #ff8a80;
    --c-key: #e4e9f2;
    --c-type: #5cc3aa;
    --c-keyword: #b9a3f0;
    --c-string: #f0a877;
    --c-number: #7fb8f0;
    --c-comment: #7d8aa3;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 "Bricolage Grotesque", system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--patina); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }

.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;
}

/* ---------- Header ---------- */
.top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 28px clamp(16px, 4vw, 40px) 20px;
}
.wordmark {
  margin: 0;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 96;
}
/* The name is the idea: loose samples on the left, a fixed shape on the right. */
.wordmark span {
  display: inline-block;
  margin-left: 0.04em;
  padding: 0 0.12em 0.04em;
  border: 3px solid var(--ink);
  border-radius: 6px;
  color: var(--paper);
  background: var(--ink);
}
.tagline { margin: 10px 0 0; color: var(--muted); font-size: 17px; }
.links { display: flex; gap: 18px; font-weight: 600; }

/* ---------- Workbench ---------- */
.workbench {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 40px);
  /* Both panes fit the viewport so the status line stays in view. */
  height: max(480px, calc(100vh - 150px));
}
.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  min-height: 52px;
}
.pane-head h2 { margin: 0; font-size: 17px; font-weight: 600; }

.example-pick { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
select, input:not([type="checkbox"]), button {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
}
button { cursor: pointer; font-weight: 600; }

textarea, pre {
  flex: 1;
  margin: 0;
  min-height: 0;
  padding: 16px;
  font: 400 13.5px/1.6 "JetBrains Mono", ui-monospace, monospace;
  tab-size: 2;
}
textarea {
  width: 100%;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  white-space: pre;
  overflow: auto;
}
textarea:focus-visible { outline-offset: -3px; }
pre { overflow: auto; white-space: pre; }

.help { margin: 0; padding: 8px 16px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }

.options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 0;
  padding: 12px 16px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.name-field { display: flex; align-items: center; gap: 8px; }
.name-field input { width: 130px; font-family: "JetBrains Mono", monospace; font-size: 13px; }
.check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.check input { accent-color: var(--patina); width: 16px; height: 16px; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; }
.tabs button {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.tabs button[aria-selected="true"] {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
}
.copy { flex-shrink: 0; }

/* ---------- Status: the one loud element ---------- */
.status {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font: 600 15px/1.4 "JetBrains Mono", monospace;
  color: var(--patina);
}
.status.error { color: var(--danger); }

/* ---------- Code tokens ---------- */
.t-key { color: var(--c-key); }
.t-type { color: var(--c-type); font-weight: 600; }
.t-keyword { color: var(--c-keyword); }
.t-string { color: var(--c-string); }
.t-number { color: var(--c-number); }
.t-comment { color: var(--c-comment); font-style: italic; }
.t-optional { color: var(--brass); font-weight: 600; }

.foot {
  padding: 20px clamp(16px, 4vw, 40px) 28px;
  color: var(--muted);
  font-size: 14px;
  max-width: 78ch;
}
.foot p { margin: 0; }

@media (max-width: 860px) {
  .top { flex-direction: column; align-items: flex-start; }
  .workbench { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; }
  textarea, pre { min-height: 320px; max-height: 70vh; }
  .pane-head { flex-wrap: wrap; }
}