@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
}

:root {
  /* Theme palette: change these values to recolor the entire site. */
  --theme-ink: #0e1b26;
  --theme-ink-soft: #263746;
  --theme-paper: #f5f1e8;
  --theme-surface: #fffdf8;
  --theme-accent: #ff6a45;
  --theme-accent-strong: #b83b20;
  --theme-blue: #77a8ff;
  --theme-blue-strong: #1c4d92;
  --theme-gold: #f2c14f;
  --theme-teal: #16736f;
  --theme-muted: #59666f;
  --theme-line: #c8cec9;
  --theme-on-dark: #ffffff;
  --theme-on-dark-muted: #d5dee6;
  --theme-subtle: #f1f3ef;
  --theme-blue-soft: #eef4ff;
  --theme-input-line: #89949b;
  --theme-grid-line: rgba(14, 27, 38, .055);

  /* Semantic roles: components use these rather than raw colors. */
  --ink: var(--theme-ink);
  --ink-soft: var(--theme-ink-soft);
  --paper: var(--theme-paper);
  --surface: var(--theme-surface);
  --accent: var(--theme-accent);
  --accent-strong: var(--theme-accent-strong);
  --blue: var(--theme-blue);
  --blue-strong: var(--theme-blue-strong);
  --gold: var(--theme-gold);
  --teal: var(--theme-teal);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --on-dark: var(--theme-on-dark);
  --on-dark-muted: var(--theme-on-dark-muted);
  --subtle: var(--theme-subtle);
  --blue-soft: var(--theme-blue-soft);
  --input-line: var(--theme-input-line);
  --grid-line: var(--theme-grid-line);
  --max: 1180px;

  /* Colored cards. Change a role here to recolor every card that uses it. */
  --card-offset: 6px 6px 0 var(--ink);
  --role-coral-bg: var(--accent);
  --role-coral-fg: var(--ink);
  --role-coral-copy: var(--ink);
  --role-coral-link-bg: var(--ink);
  --role-coral-link-fg: var(--on-dark);
  --role-coral-link-edge: var(--accent-strong);
  --role-blue-bg: var(--blue);
  --role-blue-fg: var(--ink);
  --role-blue-copy: var(--ink-soft);
  --role-blue-link-bg: var(--ink);
  --role-blue-link-fg: var(--on-dark);
  --role-blue-link-edge: var(--blue-strong);
  --role-gold-bg: var(--gold);
  --role-gold-fg: var(--ink);
  --role-gold-copy: var(--ink-soft);
  --role-gold-link-bg: var(--ink);
  --role-gold-link-fg: var(--on-dark);
  --role-gold-link-edge: var(--accent-strong);
  --role-teal-bg: var(--teal);
  --role-teal-fg: var(--on-dark);
  --role-teal-copy: var(--on-dark);
  --role-teal-link-bg: var(--ink);
  --role-teal-link-fg: var(--on-dark);
  --role-teal-link-edge: var(--accent);
  --role-ink-bg: var(--ink);
  --role-ink-fg: var(--on-dark);
  --role-ink-copy: var(--on-dark-muted);
  --role-ink-link-bg: var(--accent);
  --role-ink-link-fg: var(--ink);
  --role-ink-link-edge: var(--surface);
}
* { box-sizing: border-box; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; scrollbar-color: var(--line) var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.55; }
::selection { background: var(--gold); color: var(--ink); }
a { color: inherit; }
button, input, select, textarea { font: inherit; caret-color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue-strong); outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
h1 { max-width: 22ch; margin-bottom: 16px; font-size: clamp(2.15rem, 4.2vw, 3.4rem); font-weight: 650; }
h2 { margin-bottom: 14px; font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 650; }
h3 { font-size: 1.2rem; font-weight: 650; }
.skip-link { position: absolute; left: -999px; top: 12px; z-index: 20; padding: 10px 14px; background: var(--surface); color: var(--ink); }
.skip-link:focus { left: 12px; }
.site-header { position: relative; width: min(var(--max), calc(100% - 40px)); min-height: 72px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; text-decoration: none; letter-spacing: -.02em; }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 2px; background: var(--ink); color: var(--accent); font-size: .85rem; font-weight: 650; letter-spacing: 0; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { padding: 6px 0; color: var(--ink-soft); font-size: .92rem; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.active { color: var(--ink); border-color: var(--accent); }
.nav-soon { margin-left: 6px; padding: 2px 6px; border: 1px solid var(--line); color: var(--ink-soft); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.menu-button { display: none; min-height: 44px; padding: 8px 13px; border: 1px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink); font-weight: 600; }
.start { width: min(var(--max), calc(100% - 40px)); margin: auto; padding: 36px 0 12px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: end; gap: 40px; }
.start .lede { max-width: 62ch; margin-bottom: 22px; color: var(--ink-soft); font-size: 1.125rem; }
.next-steps { margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; }
.next-steps a { font-weight: 600; text-underline-offset: 4px; }
.answer-sheet { position: relative; min-height: 0; padding: 22px 22px 18px; display: flex; flex-direction: column; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); transform: rotate(1.5deg); box-shadow: 6px 6px 0 var(--accent); }
.answer-sheet::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.sheet-label { display: block; margin-bottom: 22px; font: 600 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.answer-sheet > div { position: relative; z-index: 1; display: flex; gap: 10px; margin-bottom: 12px; }
.answer-sheet > div span, .answer-sheet > div b { display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-size: .75rem; }
.answer-sheet > div b { background: var(--ink); color: var(--on-dark); }
.answer-sheet p { position: relative; z-index: 1; margin: 8px 0 0; color: var(--teal); font: 600 .82rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.more-tests { width: min(var(--max), calc(100% - 40px)); margin: auto; padding: 56px 0; }
.section-heading { max-width: 40rem; }
.method-strip { padding: 56px max(20px, calc((100% - var(--max)) / 2)); display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; background: var(--surface); border-block: 1px solid var(--line); }
.method-strip p { max-width: 42ch; color: var(--ink-soft); }
.kre-list { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.kre-list li { padding: 16px 18px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 14px; border: 1px solid var(--line); background: var(--surface); }
.kre-list li > span { font: 650 1.25rem ui-monospace, monospace; color: var(--teal); }
.kre-list strong, .kre-list small { display: block; }.kre-list small { margin-top: 3px; color: var(--muted); font-size: .92rem; }
.test-links { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--ink); }
.test-links a { padding: 20px 4px; display: flex; justify-content: space-between; gap: 14px; text-decoration: none; border-bottom: 1px solid var(--line); }
.test-links a:hover b { color: var(--accent-strong); }.test-links span { color: var(--muted); }
.site-footer { width: min(var(--max), calc(100% - 40px)); margin: auto; padding: 28px 0 40px; display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: .9rem; }
.site-footer p { margin: 0; }.site-footer a { color: var(--ink); font-weight: 600; }
.page-hero { padding: 40px max(20px, calc((100% - var(--max)) / 2)) 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); align-items: end; gap: 40px; border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 22ch; margin-bottom: 14px; }
.page-hero .lede { max-width: 62ch; margin-bottom: 0; color: var(--ink-soft); font-size: 1.125rem; }
.page-hero .button { margin-top: 22px; }
.page-note { padding: 18px; border: 2px solid var(--ink); background: var(--gold); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.page-note strong, .page-note span { display: block; }.page-note span { margin-top: 5px; color: var(--ink); font-size: .92rem; }
.subnav { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); }
.subnav a { padding: 8px 12px; min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); font-size: .88rem; font-weight: 600; text-decoration: none; border: 1px solid var(--line); background: var(--surface); }
.subnav a.subnav-later { border-color: transparent; background: transparent; color: var(--ink-soft); font-weight: 500; }
.subnav a:hover, .subnav a:focus-visible, .subnav a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.content-section { width: min(var(--max), calc(100% - 40px)); margin: auto; padding: 48px 0 64px; }
.content-section.narrow { max-width: 880px; }
.intro-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 48px; align-items: start; }
.intro-grid > div:first-child { position: sticky; top: 24px; }
.step-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.step-list li { padding: 20px 0; display: grid; grid-template-columns: 52px 1fr; gap: 18px; border-bottom: 1px solid var(--line); }
.step-list > li > span { font: 650 1rem ui-monospace, monospace; color: var(--accent-strong); }
.step-list h3 { margin-bottom: 6px; }.step-list p { margin: 0; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feature-card { --card-bg: var(--surface); --card-fg: var(--ink); --card-copy: var(--ink-soft); --card-link-bg: var(--ink); --card-link-fg: var(--on-dark); --card-link-edge: var(--accent); --card-link-offset: 3px 3px 0 var(--card-link-edge); padding: 22px; display: flex; flex-direction: column; border: 2px solid var(--ink); background: var(--card-bg); color: var(--card-fg); box-shadow: var(--card-offset); }
.feature-card.coral { --card-bg: var(--role-coral-bg); --card-fg: var(--role-coral-fg); --card-copy: var(--role-coral-copy); --card-link-bg: var(--role-coral-link-bg); --card-link-fg: var(--role-coral-link-fg); --card-link-edge: var(--role-coral-link-edge); }
.feature-card.blue { --card-bg: var(--role-blue-bg); --card-fg: var(--role-blue-fg); --card-copy: var(--role-blue-copy); --card-link-bg: var(--role-blue-link-bg); --card-link-fg: var(--role-blue-link-fg); --card-link-edge: var(--role-blue-link-edge); }
.feature-card.gold { --card-bg: var(--role-gold-bg); --card-fg: var(--role-gold-fg); --card-copy: var(--role-gold-copy); --card-link-bg: var(--role-gold-link-bg); --card-link-fg: var(--role-gold-link-fg); --card-link-edge: var(--role-gold-link-edge); }
.feature-card.teal { --card-bg: var(--role-teal-bg); --card-fg: var(--role-teal-fg); --card-copy: var(--role-teal-copy); --card-link-bg: var(--role-teal-link-bg); --card-link-fg: var(--role-teal-link-fg); --card-link-edge: var(--role-teal-link-edge); }
.feature-card.ink { --card-bg: var(--role-ink-bg); --card-fg: var(--role-ink-fg); --card-copy: var(--role-ink-copy); --card-link-bg: var(--role-ink-link-bg); --card-link-fg: var(--role-ink-link-fg); --card-link-edge: var(--role-ink-link-edge); }
.feature-card.wide { grid-column: 1 / -1; }
.feature-card h3 { color: var(--card-fg); }
.feature-card p { color: var(--card-copy); }
.feature-card .text-link { margin-top: 18px; align-self: flex-start; min-height: 44px; padding: 8px 12px; display: inline-flex; align-items: center; background: var(--card-link-bg); color: var(--card-link-fg); font-weight: 650; text-decoration: none; box-shadow: var(--card-link-offset); }
.feature-card .text-link:hover, .feature-card .text-link:focus-visible { background: var(--card-link-fg); color: var(--card-link-bg); }
.setup-box { padding: clamp(24px, 5vw, 40px); border: 2px solid var(--ink); background: var(--surface); box-shadow: 4px 4px 0 var(--ink); }
.copy-area { width: 100%; min-height: 390px; margin-top: 18px; padding: 20px; resize: vertical; border: 1px solid var(--line); border-radius: 0; background: var(--subtle); color: var(--ink); font: .93rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.copy-area.setup-complete { min-height: 720px; }
.button { min-height: 44px; padding: 11px 17px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--on-dark); font-weight: 600; text-decoration: none; box-shadow: 3px 3px 0 var(--accent); cursor: pointer; }
.button:hover, .button:focus-visible { background: var(--surface); color: var(--ink); }
.button.small { min-height: 44px; padding: 8px 12px; font-size: .92rem; box-shadow: 3px 3px 0 var(--accent); }
.button.secondary { background: var(--surface); color: var(--ink); box-shadow: none; }
.button.secondary:hover, .button.secondary:focus-visible { background: var(--ink); color: var(--on-dark); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.copy-status { min-height: 1.5em; margin: 12px 0 0; color: var(--teal); font-weight: 600; }
.framework-heading { margin: 56px 0 20px; }
.framework-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.framework-card { padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.framework-card h3 { margin-bottom: 8px; }.framework-card p { color: var(--ink-soft); }
.framework-card pre { min-height: 150px; margin: 16px 0; padding: 16px; overflow: auto; white-space: pre-wrap; border: 1px solid var(--line); background: var(--subtle); font: .82rem/1.5 ui-monospace, monospace; }
.filters { margin-bottom: 26px; padding: 22px; display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 16px; border: 1px solid var(--line); background: var(--surface); }
.filters label { color: var(--ink); font-size: .85rem; font-weight: 600; }
.filters input, .filters select { width: 100%; min-height: 44px; margin-top: 6px; padding: 9px 11px; border: 1px solid var(--input-line); border-radius: 0; background: var(--surface); color: var(--ink); }
.result-count { margin-bottom: 16px; color: var(--muted); font-weight: 600; }
.prompt-list { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; list-style: none; }
.prompt-card { min-height: 0; padding: 22px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--surface); }
.prompt-card .meta { margin-bottom: 14px; color: var(--accent-strong); font: 600 .74rem/1.3 ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.prompt-card h3 { margin-bottom: 10px; }.prompt-card p { color: var(--ink-soft); }
.prompt-card .prompt-text { margin: 8px 0 20px; padding: 15px; border: 1px solid var(--line); background: var(--subtle); color: var(--ink); font-size: .92rem; }
.prompt-card .button { align-self: flex-start; margin-top: auto; }
.empty-state { padding: 28px; grid-column: 1 / -1; border: 1px solid var(--line); background: var(--surface); }
.study-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.study-map-note { margin-bottom: 24px; padding: 16px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-block: 1px solid var(--line); color: var(--ink-soft); }
.study-map-note p { max-width: 72ch; margin: 0; }
.study-map-note a { flex: 0 0 auto; color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.study-column { border: 2px solid var(--ink); background: var(--surface); }
.study-column header { padding: 24px; background: var(--ink); color: var(--on-dark); }
.study-column header h2 { max-width: 16ch; margin-bottom: 10px; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.study-column header p { max-width: 42ch; margin: 0; color: var(--on-dark); }
.topic-list { margin: 0; padding: 0 24px; list-style: none; }
.topic-list li { padding: 20px 0; display: grid; gap: 12px; border-bottom: 1px solid var(--line); }
.topic-list li:last-child { border: 0; }.topic-list strong, .topic-list span { display: block; }.topic-list span { margin-top: 3px; color: var(--ink-soft); font-size: .92rem; }
.topic-list strong { font-size: 1.05rem; line-height: 1.35; }
.topic-list .book-ref { width: fit-content; margin-top: 0; padding-bottom: 2px; color: var(--ink); border-bottom: 2px solid var(--accent); font: 600 .78rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.sample-stack { display: grid; gap: 26px; }
.sample-question { padding: clamp(24px, 5vw, 36px); border: 2px solid var(--ink); background: var(--surface); box-shadow: 4px 4px 0 var(--ink); }
.sample-question h2 { margin-bottom: 18px; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.question-label { margin-bottom: 8px; color: var(--accent-strong); font: 600 .76rem/1.3 ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.sample-question pre { margin: 0 0 22px; padding: 20px; overflow: auto; white-space: pre-wrap; border: 1px solid var(--line); background: var(--subtle); color: var(--ink); font: 600 .95rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sample-question details { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.sample-question summary { cursor: pointer; font-weight: 600; }
.sample-question details p { margin: 14px 0 0; color: var(--ink-soft); }
.resource-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.resource-card { min-height: 0; padding: 22px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--surface); }
.resource-card h2 { margin-bottom: 12px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.resource-card p { color: var(--ink-soft); }
.resource-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 16px; }
.resource-links a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.resource-section-heading { max-width: 65ch; margin: 56px 0 20px; }
.resource-section-heading p { color: var(--ink-soft); }
.external-list { border-top: 2px solid var(--ink); }
.external-list > a { padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.external-list span, .external-list strong, .external-list small { display: block; }
.external-list small { margin-top: 4px; color: var(--ink-soft); font-size: .9rem; }
.external-list b { flex: 0 0 auto; font-size: .88rem; }
.external-list > a:hover b, .external-list > a:focus-visible b { color: var(--accent-strong); }
.update-panel { padding: 22px; border: 1px solid var(--line); background: var(--surface); }
.update-panel p:last-child { margin-bottom: 0; }
.companion-band { width: min(var(--max), calc(100% - 40px)); margin: 8px auto 0; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-block: 1px solid var(--line); }
.companion-band p { max-width: 68ch; margin: 0; }
.companion-band a { flex: 0 0 auto; font-weight: 600; text-underline-offset: 4px; }
.canvas-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 22px; align-items: start; }
.canvas-panel { padding: clamp(22px, 4vw, 32px); border: 2px solid var(--ink); background: var(--surface); }
.canvas-panel.output { position: sticky; top: 22px; box-shadow: 4px 4px 0 var(--ink); }
.canvas-intro { max-width: 62ch; margin-bottom: 24px; color: var(--ink-soft); }
.canvas-fields { display: grid; gap: 20px; }
.canvas-field { display: grid; gap: 7px; }
.canvas-field label, .framework-picker legend { font-weight: 600; }
.canvas-field label span { display: inline-grid; width: 28px; height: 28px; margin-right: 8px; place-items: center; background: var(--ink); color: var(--on-dark); font: 600 .78rem ui-monospace, monospace; }
.canvas-field small, .framework-picker > small { color: var(--ink-soft); }
.canvas-field input, .canvas-field textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--input-line); border-radius: 0; background: var(--surface); color: var(--ink); }
.canvas-field textarea { min-height: 104px; resize: vertical; }
.framework-picker { margin: 0; padding: 20px; border: 1px solid var(--line); }
.framework-options { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.framework-option { padding: 11px 12px; display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.framework-option:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.framework-option input { margin-top: 4px; accent-color: var(--teal); }
.framework-option span { display: block; font-weight: 600; }
.framework-option small { display: block; margin-top: 2px; color: var(--ink-soft); font-weight: 400; }
.canvas-output { width: 100%; min-height: 480px; margin: 4px 0 18px; padding: 18px; resize: vertical; border: 1px solid var(--line); border-radius: 0; background: var(--subtle); color: var(--ink); font: .91rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.canvas-help { margin-bottom: 20px; color: var(--ink-soft); }
.privacy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.privacy-card { padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.privacy-card.avoid { background: var(--paper); }
.privacy-card ul { margin-bottom: 0; padding-left: 20px; }.privacy-card li + li { margin-top: 10px; }
.coming-soon { width: min(760px, calc(100% - 40px)); margin: auto; padding: 48px 0 72px; }
.coming-soon h1 { max-width: 22ch; }
.coming-soon .lede { max-width: 62ch; color: var(--ink-soft); font-size: 1.125rem; }
.coming-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.coming-actions a:not(.button) { font-weight: 600; text-underline-offset: 4px; }
.fine-print { margin-top: 22px; max-width: 68ch; color: var(--ink-soft); font-size: .92rem; }
.release { width: min(var(--max), calc(100% - 40px)); margin: auto; padding: 12px 0 72px; }
.release .section-heading p { max-width: 62ch; color: var(--ink-soft); }
.release-list { margin: 28px 0 0; padding: 0; display: grid; gap: 0; list-style: none; }
.release-list > li { padding: 18px 0; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }
.release-list > li.feature-card { margin-top: 8px; margin-bottom: 18px; padding: 22px; grid-template-columns: 2.5rem minmax(0, 1fr); border-bottom: 2px solid var(--ink); }
.release-order { font: 650 1.15rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent-strong); }
.release-list h3 { margin-bottom: 4px; }
.release-list p { margin: 0; color: var(--ink-soft); }
.release-list .feature-card .release-order,
.release-list .feature-card h3,
.release-list .feature-card p { color: var(--card-fg); }
@media (max-width: 820px) {
  .menu-button { display: block; }
  .site-nav { display: none; position: absolute; z-index: 10; top: 64px; left: 0; right: 0; padding: 16px; flex-direction: column; align-items: flex-start; background: var(--surface); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
  .site-nav.is-open { display: flex; }
  .site-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .start { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .answer-sheet { max-width: 320px; }
  .method-strip { grid-template-columns: 1fr; gap: 24px; }
  .test-links { grid-template-columns: 1fr; }
  .page-hero { grid-template-columns: 1fr; gap: 24px; }
  .intro-grid { grid-template-columns: 1fr; gap: 24px; }.intro-grid > div:first-child { position: static; }
  .framework-grid, .prompt-list, .study-map, .privacy-grid, .resource-grid, .canvas-layout, .feature-grid { grid-template-columns: 1fr; }
  .feature-card.wide { grid-column: auto; }
  .canvas-panel.output { position: static; }
  .study-map-note { align-items: flex-start; flex-direction: column; gap: 10px; }
  .filters { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .answer-sheet { padding: 18px; }
  .site-footer { flex-direction: column; }
  .external-list > a { align-items: flex-start; flex-direction: column; gap: 10px; }
  .companion-band { align-items: flex-start; flex-direction: column; gap: 10px; }
  .framework-options { grid-template-columns: 1fr; }
  .release-list > li.feature-card h3 { max-width: 16ch; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }