/* --------------------------------------------
   Home page
----------------------------------------------- */

/* --- Palette (field-guide) --- */
:root {
  background: var(--color-page-bg);

  /* Home-only text tokens (base text colors live in universal.css) */
  --color-text-disabled: #b0a898;
  --color-preview-num: rgba(0, 0, 0, 0.5);

  /* Home-only accents (base --color-accent / --color-accent-hover in universal.css) */
  --color-accent-secondary: #576f3f;
  --color-accent-code: #1d3b4f;

  /* Home-only surfaces */
  --color-surface-tab: #e0dad2;
  --color-surface-tab-hover: #d4cec4;

  /* Home-only borders */
  --color-border-card: rgba(160, 155, 140, 0.5);

  /* Gradients */
  --gradient-intro: #576f3f;
  --gradient-hero-text: linear-gradient(135deg, #d49008, #de9f02, #e8b020);

  /* Home-only code highlight tokens (base code colors in universal.css) */
  --code-sel: #7fbff5;
  --code-prop: #ffc04d;
  --code-val: #c8e864;

  /* Page background */
  --color-page-bg: #F0EDE8;

  /* Layout */
  --max-content-width: 1200px;
  --section-pad: 4rem 2rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text-disabled: #5a5242;
    --color-preview-num: rgba(255, 255, 255, 0.6);

    --color-accent-secondary: #c0c070;
    --color-accent-code: #9FB2CD;

    --color-surface-tab: #28241e;
    --color-surface-tab-hover: #383028;

    --color-border-card: #383028;

    --gradient-intro: #2a3818;

    --color-page-bg: #161210;
  }
}

/* --- Paper texture --- */
:root {
  --paper: url('paper-texture.png');
  --paper-light: url('paper-texture-light.png');
}

/* --- 1. Page-level full-bleed grid --- */
.homepage {
  display: grid;
  grid-template-columns:
    [full-start] minmax(2rem, 1fr)
    [content-start] min(70ch, 100% - 4rem)
    [content-end] minmax(2rem, 1fr)
    [full-end];
  padding-block: 2lh 0;
  padding-inline: 0;
}

.homepage > * {
  grid-column: content;
}

/* --- 2. Hero: page header + demos nav --- */

/* Hero shell — full-bleed olive background with paper texture */
.hero {
  grid-column: full;
  background-color: var(--gradient-intro);
  background-image:
    var(--paper),
    linear-gradient(var(--gradient-intro), var(--gradient-intro));
  background-blend-mode: multiply, normal;
  padding: 4rem 0 6rem;
  padding-inline: max(2rem, calc((100% - var(--max-content-width)) / 2));
  margin-block-start: -4rem;
  box-shadow:
    inset 0 0 150px rgba(0, 0, 0, 0.3),
    inset 0 0 400px rgba(0, 0, 0, 0.12);

  /* Text colors against the olive background */
  --color-text: #1a1408;
  --color-text-muted: #d4a040;
  --color-text-faint: #b08830;
  --color-accent: #c89830;
  --color-accent-hover: #d4a040;
}

@media (prefers-color-scheme: dark) {
  .hero {
    --color-text: #d0ccc0;
    --color-text-muted: #a8a090;
    --color-text-faint: #888068;
    --color-accent: #c89830;
    --color-accent-hover: #d8a848;
    box-shadow:
      inset 0 0 150px rgba(0, 0, 0, 0.45),
      inset 0 0 400px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 599px) {
  /* Phone: brighter muted text for legibility on the olive */
  .hero {
    --color-text-muted: #ebcd83;
    padding-block-end: 2rem;
  }
}

/*
   Header layout
   - <800px:    nav stacks below the title text
   - 800-999px: nav above the title, right-aligned
   - ≥1000px:   nav in the top-right corner, sharing row 1 with the title
*/
header.intro {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
  margin-block-end: 2lh;
}

@media (min-width: 1000px) {
  header.intro { grid-template-columns: 1fr auto; }
}

@media (max-width: 599px) {
  header.intro { margin-block-end: 1lh; }
}

/* Title: italic banner over big display word */
h1 {
  font-family: var(--font-banner);
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--color-accent);
  margin: 0;
  grid-column: 1 / -1;
  grid-row: 1;
}
h1 .banner { white-space: nowrap; }
h1 .display {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(2.75rem, 11vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  background: var(--gradient-hero-text);
  background-clip: text;
  color: transparent;
}

/* Description: lede + credit */
header p {
  grid-column: 1 / -1;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-block: 0.33lh;
  text-wrap: balance;
}
header p.lede {
  grid-row: 2;
  margin-block-start: 1lh;
}
header p.credit {
  grid-row: 3;
}
header a {
  color: var(--color-text-muted);
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Phone: tighten lede + credit so they read as one block */
@media (max-width: 599px) {
  header p.lede {
    margin-block-start: 0.5lh;
    margin-block-end: 0;
  }
  header p.credit { margin-block-start: 0; }
}

/* Demos nav */
.toc {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: baseline;
  justify-content: start;
  grid-column: 1 / -1;
  grid-row: 4;
  margin-block-start: 1lh;
  z-index: 1; /* paint above the h1's transparent box at ≥1000 */
}
.toc .nav-label {
  grid-column: 1 / -1;
  font-family: var(--font-banner);
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  color: #9a7820;
  padding-inline-end: 0.6em;
}
.toc a {
  padding-block: 0.3em;
  padding-inline-end: 2em;
  font-family: var(--font-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8b020;
  text-decoration: none;
  transition: color 0.15s;
}
.toc a:hover { color: #f5d680; }

@media (max-width: 380px) {
  .toc { grid-template-columns: repeat(2, auto); }
}

@media (min-width: 600px) {
  /* Enough room for all 6 links on one row */
  .toc { grid-template-columns: repeat(6, auto); }
}

@media (max-width: 799px) {
  /* Drop the "demos:" label — saves space on small screens */
  .toc .nav-label { display: none; }
}

/* ≥800px: nav at the top, right-aligned, with separator pipes */
@media (min-width: 800px) {
  .toc {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    grid-row: 1;
    justify-self: end;
    margin-block-start: 0;
    margin-block-end: 1lh;
  }
  .toc a {
    padding: 0.3em 1em;
    border-right: 1px solid rgba(232, 176, 32, 0.4);
  }
  .toc a:last-child { border-right: none; }
  h1 { grid-row: 2; }
  header p.lede { grid-row: 3; }
  header p.credit { grid-row: 4; }
}

/* ≥1000px: nav in top-right corner; title spans full width */
@media (min-width: 1000px) {
  .toc {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-block-end: 0;
  }
  h1 { grid-row: 1; }
  header p.lede { grid-row: 2; }
  header p.credit { grid-row: 3; }
}

/* Section headings — shared style */
.section-heading {
  font-family: var(--font-label);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-text-faint);
  margin-block: 0 1.5rem;
  max-width: var(--max-content-width);
  margin-inline: auto;
}

.section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.heading-link {
  position: relative;
  color: inherit;
  text-decoration: none;
}
.heading-link:hover,
.heading-link:focus-visible {
  text-decoration: underline;
}

.heading-anchor {
  position: absolute;
  right: 100%;
  margin-right: 0.4em;
  font-family: inherit;
  font-weight: inherit;
  font-size: 1.1em;
  line-height: 1;
  color: var(--color-text-faint);
  opacity: 0;
  transition: opacity 0.15s;
}
.heading-link:hover .heading-anchor,
.heading-link:focus-visible .heading-anchor {
  opacity: 1;
}

/* --- 3. Code blocks --- */
pre {
  background: var(--code-bg);
  padding: 1.25rem 1.5rem;
  border-radius: 1ch;
  border: 1px solid var(--code-border);
  overflow-x: auto;
  margin-block: 1rem;
}

pre code {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1.5;
  color: var(--code-text);
}

/* Inline code */
:not(pre) > code {
  font-family: var(--font-mono);
  font-size: 1em;
  background: var(--color-surface-inline-code);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  word-break: keep-all;
}

/* --- 4. Configurator --- */
.configurator-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: var(--max-content-width);
  margin-inline: auto;
  position: relative;
}

.configurator-layout .browser-resize-label {
  color: var(--color-text-muted);
}

.configurator-layout .resize-handle-grip {
  background: repeating-linear-gradient(
    to right,
    var(--color-text-faint) 0px,
    var(--color-text-faint) 1.5px,
    transparent 1.5px,
    transparent 3.5px
  );
}

.configurator-layout .resize-handle-bottom .resize-handle-grip {
  background: repeating-linear-gradient(
    to bottom,
    var(--color-text-faint) 0px,
    var(--color-text-faint) 1.5px,
    transparent 1.5px,
    transparent 3.5px
  );
}

.unsupported-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem;
  border-radius: 12px;
}

.unsupported-overlay p {
  margin: 0;
  color: #fff;
  font-size: var(--text-base);
  line-height: 1.5;
  text-wrap: balance;
}

.unsupported-overlay a {
  color: #9FB2CD;
  font-weight: 700;
  text-decoration: underline;
}

@supports (display: grid-lanes) {
  .unsupported-overlay {
    display: none;
  }
}

.configurator-layout input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #807468;
  outline: none;
}

.browser-resize input[type="range"] {
  background: rgba(255, 255, 240, 0.35);
}

.configurator-layout input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.configurator-layout input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.configurator-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.config-presets {
  flex: 1;
  margin-block-end: 1em;
}

.tolerance-row,
.gap-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tolerance-row label,
.gap-row label {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tolerance-row input[type="range"],
.gap-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

.unit-select {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-accent-code);
  background: var(--color-surface-inline-code);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.1rem 0.2rem;
  cursor: pointer;
}

/* Direction tabs + panel group */
.configurator-panel-group {
  display: grid;
  grid-template-columns: auto 1fr;
  background-color: #efebdc;
  background-image:
    var(--paper-light),
    linear-gradient(#efebdc, #efebdc);
  background-blend-mode: multiply, normal;
  border: 1px solid #c4b58d;
  box-shadow:
    inset 0 0 40px rgba(80, 70, 30, 0.08),
    inset 0 -10px 20px -12px rgba(80, 60, 30, 0.14),
    inset -10px 0 20px -12px rgba(80, 60, 30, 0.10),
    inset -25px -25px 30px -20px rgba(80, 60, 30, 0.12),
    0 1px 0 #d2c6a4,
    0 2px 0 #b8ac8a,
    0 3px 6px rgba(40, 30, 10, 0.18);
  color: #271a0e;
  border-radius: 16px;
  overflow: hidden;

  /* Override design tokens for light panel context */
  --color-text: #271a0e;
  --color-text-muted: #5a5040;
  --color-text-faint: #605540;
  --color-text-disabled: #b0a898;
  --color-border: #cac4a4;
  --color-border-card: #cac4a4;
  --color-surface: #e2dcc4;
  --color-surface-inline-code: #d4d0b8;
  --color-surface-tab-hover: #d2cdb5;
  --color-accent-code: #3d5a6a;
  --color-accent: #496677;
  --color-accent-hover: #3a5565;
}

@media (prefers-color-scheme: dark) {
  .configurator-panel-group {
    background: #1e2a35;
    border-color: #2a3a48;
    color: #d0d4d8;
    box-shadow:
      inset 0 0 40px rgba(0, 0, 0, 0.3),
      inset 0 -10px 20px -12px rgba(0, 0, 0, 0.4),
      inset -10px 0 20px -12px rgba(0, 0, 0, 0.3),
      inset -25px -25px 30px -20px rgba(0, 0, 0, 0.35),
      0 1px 0 #2a3a48,
      0 2px 0 #1a2830,
      0 3px 6px rgba(0, 0, 0, 0.5);

    --color-text: #d0d4d8;
    --color-text-muted: #a0a8b0;
    --color-text-faint: #707880;
    --color-text-disabled: #505860;
    --color-border: #384858;
    --color-border-card: #384858;
    --color-surface: #1a2830;
    --color-surface-inline-code: #243440;
    --color-surface-tab-hover: #2a3a48;
    --color-accent-code: #9FB2CD;
    --color-accent: #9FB2CD;
    --color-accent-hover: #b0c0d8;
  }
}

@media (max-width: 749px) {
  .configurator-panel-group {
    grid-template-columns: 1fr;
  }
}

.config-direction-tabs {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 749px) {
  .config-direction-tabs {
    flex-direction: row;
  }
}

.config-direction-tab {
  display: flex;
  flex: 1;
  cursor: pointer;
}

.config-direction-tab input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.config-direction-tab-content {
  font-family: var(--font-label);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  flex: 1;
  color: #8a7e6e;
  background: rgba(0, 0, 0, 0.07);
  box-shadow:
    inset 0 2px 8px rgba(40, 30, 10, 0.15),
    inset 0 0 20px rgba(80, 60, 30, 0.08);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

@media (prefers-color-scheme: dark) {
  .config-direction-tab-content {
    color: #707880;
    background: #162028;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3);
  }
}

.config-direction-tab-content svg {
  width: 52px;
  height: auto;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.2;
  transition: opacity 0.15s;
}

.config-direction-tab-content strong {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 749px) {
  .config-direction-tab-content {
    padding: 0.75rem 1.25rem;
    flex-direction: row;
    gap: 0.75rem;
  }

  .config-direction-tab-content svg {
    width: 48px;
  }
}

.config-direction-tab:has(input:not(:checked)) .config-direction-tab-content:hover {
  color: #5a4e40;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  .config-direction-tab:has(input:not(:checked)) .config-direction-tab-content:hover {
    color: #a0a8b0;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
  }
}

.config-direction-tab:has(input:checked) .config-direction-tab-content {
  background: transparent;
  color: #271a0e;
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  .config-direction-tab:has(input:checked) .config-direction-tab-content {
    color: #d0d4d8;
  }
}

.config-direction-tab:has(input:checked) .config-direction-tab-content svg {
  color: var(--color-accent);
}

.config-direction-tab:has(input:checked) .config-direction-tab-content strong {
  color: var(--color-accent);
}

.config-direction-tab:has(input:focus-visible) .config-direction-tab-content {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Preset grid */
.config-presets-columns,
.config-presets-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

@media (max-width: 749px) {
  .config-presets-columns,
  .config-presets-rows {
    grid-template-columns: 1fr 1fr;
  }
}

.config-presets-columns[hidden],
.config-presets-rows[hidden] {
  display: none;
}

.config-preset-btn {
  font-family: var(--font-label);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.6rem 0.5rem 0.5rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.config-preset-btn svg {
  width: 64px;
  height: 48px;
  fill: var(--color-text-muted);
  opacity: 0.6;
  transition: fill 0.15s, opacity 0.15s;
}

.config-preset-btn span {
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.2;
  transition: color 0.15s;
}

.config-preset-btn:hover {
  border-color: var(--color-text-muted);
}

.config-preset-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.config-preset-btn.active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

.config-preset-btn.active svg {
  fill: var(--color-accent);
  opacity: 1;
}

.config-preset-btn.active span {
  color: var(--color-accent);
  font-weight: 600;
}

/* Code output */
.configurator-code-wrap {
  position: relative;
  height: 100%;
}

.code-editor {
  display: grid;
  position: relative;
  height: 100%;
  border: 1.5px dotted #8a9498;
  border-radius: 10px;
  background: var(--code-bg);
  transition: border-color 0.15s;
}

.code-editor:has(textarea:focus) {
  border-style: solid;
  border-color: var(--color-accent);
}

.code-editor .hl-selector    { color: var(--code-sel); }
.code-editor .hl-property    { color: var(--code-prop); }
.code-editor .hl-value       { color: var(--code-val); }
.code-editor .hl-function    { color: #e0a0f5; }
.code-editor .hl-number      { color: var(--code-val); }
.code-editor .hl-bracket     { color: var(--code-text); }
.code-editor .hl-punctuation { color: #a8b2b8; }

.code-highlight {
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border: 1.5px solid transparent;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  pointer-events: none;
}

.code-highlight code {
  color: var(--code-text);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}


textarea.configurator-code {
  grid-area: 1 / 1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 10lh;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border: 1.5px solid transparent;
  background: transparent;
  color: transparent;
  caret-color: var(--code-text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  resize: none;
}

textarea.configurator-code:focus {
  outline: none;
}

textarea.configurator-code::selection {
  background: rgba(255, 255, 255, 0.2);
  color: transparent;
}

/* Preview area wrapper — maintains min-height so content below doesn't jump */
.browser-frame-area {
  position: relative;
  min-height: 465px;
}

/* Preview */
.browser-frame {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 100%;
  margin-inline: auto;
  transition: width 0.05s ease-out;
  display: flex;
  flex-direction: column;
  background: Canvas;
  height: 440px;
}

.browser-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 0.8rem;
  background: var(--color-surface-tab);
  border-bottom: 1px solid var(--color-border);
}

.browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c4beb2;
}

.browser-width {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #8a7e6e;
}

.browser-resize {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1.5ch;
  max-width: 500px;
  width: 100%;
  margin-inline: auto;
  margin-block-start: -0.75rem;
  padding-block: 0.25rem;
}

.browser-resize input[type="range"] {
  width: 100%;
  min-width: 0;
}

.browser-resize-label {
  font-family: var(--font-label);
  font-size: var(--text-md);
  color: #b08830;
  white-space: nowrap;
  text-align: start;
  width: 10ch;
}

/* Drag resize handle */
.resize-handle {
  position: absolute;
  top: 0;
  width: 28px;
  height: 440px;
  margin-left: -14px;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.resize-handle-grip {
  width: 7px;
  height: 28px;
  background: repeating-linear-gradient(
    to right,
    var(--color-border) 0px,
    var(--color-border) 1.5px,
    transparent 1.5px,
    transparent 3.5px
  );
  border-radius: 1px;
  transition: background 0.15s;
}

.resize-handle:hover .resize-handle-grip,
.resize-handle.dragging .resize-handle-grip {
  background: repeating-linear-gradient(
    to right,
    var(--color-text-faint) 0px,
    var(--color-text-faint) 1.5px,
    transparent 1.5px,
    transparent 3.5px
  );
}

.resize-handle-bottom:hover .resize-handle-grip,
.resize-handle-bottom.dragging .resize-handle-grip {
  background: repeating-linear-gradient(
    to bottom,
    var(--color-text-faint) 0px,
    var(--color-text-faint) 1.5px,
    transparent 1.5px,
    transparent 3.5px
  );
}

/* Bottom drag resize handle */
.resize-handle-bottom {
  position: absolute;
  left: 0;
  height: 28px;
  margin-top: -14px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.resize-handle-bottom .resize-handle-grip {
  width: 28px;
  height: 7px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-border) 0px,
    var(--color-border) 1.5px,
    transparent 1.5px,
    transparent 3.5px
  );
  border-radius: 1px;
  transition: background 0.15s;
}

/* Controls + code panel */
.configurator-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

@media (max-width: 749px) {
  .configurator-panel {
    grid-template-columns: 1fr;
  }
}

/* Tab order button */
.tab-order-btn {
  font-family: var(--font-label);
  justify-self: end;
  flex-shrink: 0;
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  border-radius: 99px;
  padding: 0.2rem 0.6rem;
  min-width: 10em;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.tab-order-btn:hover {
  background: var(--color-surface-tab-hover);
  color: var(--color-text);
}

.tab-order-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.tab-order-btn.running {
  background: var(--color-accent);
  color: #fff;
}

/* Tab focus simulation ring — Safari-style soft blue glow */
.tab-focus-ring {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 103, 244, 0.45), 0 0 8px rgba(0, 103, 244, 0.35);
  border-radius: 8px;
  filter: saturate(3) brightness(0.75);
  color: #fff;
  transition: filter 0.15s, color 0.15s;
}

.configurator-preview {
  display: grid-lanes;
  padding: 1rem;
  min-height: 200px;
  overflow-y: overlay;
  overflow-x: auto;
  flex: 1;
}

.configurator-preview::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.configurator-preview::-webkit-scrollbar-track {
  background: transparent;
}

.configurator-preview::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 99px;
  border: 4px solid transparent;
  background-clip: padding-box;
}

.configurator-preview > div {
  border-radius: 8px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-preview-num);
}

.configurator-preview > div:nth-child(1)  { background: light-dark(#e8a080, #8a4830); }
.configurator-preview > div:nth-child(2)  { background: light-dark(#e4a878, #885030); }
.configurator-preview > div:nth-child(3)  { background: light-dark(#e0b478, #886028); }
.configurator-preview > div:nth-child(4)  { background: light-dark(#d8bc78, #806828); }
.configurator-preview > div:nth-child(5)  { background: light-dark(#d0c480, #787028); }
.configurator-preview > div:nth-child(6)  { background: light-dark(#c0c880, #687430); }
.configurator-preview > div:nth-child(7)  { background: light-dark(#a8c888, #507830); }
.configurator-preview > div:nth-child(8)  { background: light-dark(#90c898, #407838); }
.configurator-preview > div:nth-child(9)  { background: light-dark(#80c8a8, #387848); }
.configurator-preview > div:nth-child(10) { background: light-dark(#78c8b8, #307858); }
.configurator-preview > div:nth-child(11) { background: light-dark(#78c4c4, #307070); }
.configurator-preview > div:nth-child(12) { background: light-dark(#78c0d0, #306878); }
.configurator-preview > div:nth-child(13) { background: light-dark(#78b8d8, #306080); }
.configurator-preview > div:nth-child(14) { background: light-dark(#80b0dc, #385888); }
.configurator-preview > div:nth-child(15) { background: light-dark(#88a8d8, #405088); }
.configurator-preview > div:nth-child(16) { background: light-dark(#90a0d4, #484888); }
.configurator-preview > div:nth-child(17) { background: light-dark(#9898d0, #504880); }
.configurator-preview > div:nth-child(18) { background: light-dark(#a898c8, #584878); }
.configurator-preview > div:nth-child(19) { background: light-dark(#b498c0, #604870); }
.configurator-preview > div:nth-child(20) { background: light-dark(#c098b8, #684868); }
.configurator-preview > div:nth-child(21) { background: light-dark(#c898b0, #704860); }
.configurator-preview > div:nth-child(22) { background: light-dark(#d098a8, #784858); }
.configurator-preview > div:nth-child(23) { background: light-dark(#d498a0, #804850); }
.configurator-preview > div:nth-child(24) { background: light-dark(#d89898, #884848); }
.configurator-preview > div:nth-child(25) { background: light-dark(#d8a090, #884840); }
.configurator-preview > div:nth-child(26) { background: light-dark(#d8a888, #885038); }
.configurator-preview > div:nth-child(27) { background: light-dark(#d8b088, #885830); }

/* --- 6. Diagrams section --- */
.diagrams {
  grid-column: full;
  background-color: light-dark(#f0ebdb, #2a2418);
  --color-surface: #fefdfa;
  background-image:
    var(--paper-light),
    linear-gradient(light-dark(#f0ebdb, #2a2418), light-dark(#f0ebdb, #2a2418));
  background-blend-mode: multiply, normal;
  padding: var(--section-pad);
  box-shadow: inset 0 0 120px rgba(80, 60, 30, 0.08);
}

@media (prefers-color-scheme: dark) {
  .diagrams {
    --color-surface: #1e1a14;
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.3);
  }
}

.field-guide {
  --color-surface-inline-code: light-dark(#eaf5c9, #2a3115);
  --field-guide-border: light-dark(#dcd6c8, #4a4840);
  --field-guide-border-strong: light-dark(#d6c9a7, #575549);
  max-width: var(--max-content-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Each field section is its own bordered grid. The page background
   shows through the gap between sections. */
.field-section {
  position: relative;
  display: grid;
  gap: 1px;
  border: 1.8px dotted var(--field-guide-border-strong);
  background: var(--field-guide-border);

  /* The section heading spans the full grid */
  > .field-section-heading {
    grid-column: 1 / -1;
  }
}

/* Outer 1px frame, 4px outside the dotted border. Pseudo-element
   instead of `outline` so we don't hijack focus styling. */
.field-section::after,
.learn-more-content .articles li::after {
  content: "";
  position: absolute;
  inset: -5.8px;
  border: 1px solid var(--field-guide-border-strong);
  pointer-events: none;
}

/* Intro and Tips: cap at 3 columns at widest */
.field-section--intro,
.field-section--tips {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* Defining Lanes: 4 columns at widest, 2 at medium, 1 at narrow.
   Explicit columns (not auto-fit) so `grid-column: 1 / -1` on the
   heading reliably spans the full row at every breakpoint. */
.field-section--values {
  grid-template-columns: 1fr;

  .field-entry--autofill,
  .field-entry--pattern {
    grid-column: auto;
  }
}

@media (min-width: 600px) {
  .field-section--values {
    grid-template-columns: 1fr 1fr;

    .field-entry--autofill,
    .field-entry--pattern {
      grid-column: 1 / -1;
    }
  }
}

@media (min-width: 960px) {
  .field-section--values {
    grid-template-columns: repeat(4, 1fr);

    .field-entry--autofill,
    .field-entry--pattern {
      grid-column: span 2;
    }
  }
}

/* Properties & Techniques: 2 columns at widest, each entry one cell */
.field-section--props {
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
}

/* Section heading — double line with italic centered label,
   styled as the title at the top of each .field-section */
.field-section-heading {
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 2.5rem;
  font-weight: 400;
}

.field-section-heading::before {
  content: "";
  position: absolute;
  inset-inline: 2rem;
  top: 50%;
  height: 0;
  border-top: 3px double var(--field-guide-border, var(--color-border-card));
}

.field-section-heading span {
  position: relative;
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--text-lg);
  font-weight: 400;
  color: light-dark(#766a5a, #a89888);
  background: var(--color-surface);
  padding-inline: 0.75rem;
}

/* Plate number — field guide figure labels */
.plate-number {
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--text-xs);
  font-weight: 400;
  color: light-dark(#c8c2ac, #4a4438);
  margin-bottom: -0.25rem;

  &[data-fig]::before {
    content: "Fig. " attr(data-fig);
  }

  &[data-label]::before {
    content: attr(data-label);
  }
}

/* Code snippets within entries */
.field-code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text);
  background: light-dark(#fff9e8, #2a2515);
  padding: 0.5em 0.65em;
  border-radius: 4px;
  border: 1px solid light-dark(#edea9f, #5a5028);
  white-space: pre-wrap;
  word-break: keep-all;
}

.field-code code {
  font-size: inherit;
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

/* Mini value diagrams */
.value-diagram {
  display: grid;
  gap: 2px;
  height: 24px;
  border-radius: 3px;
  overflow: hidden;
}

.value-diagram > div {
  background: light-dark(#9262af, #5a3878);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  font-family: var(--font-label);
  color: rgba(255, 255, 255, 0.9);
}

.value-diagram--equal      { grid-template-columns: repeat(3, 1fr); }
.value-diagram--fr         { grid-template-columns: 1fr 2fr 1fr; }
.value-diagram--autofill   { grid-template-columns: repeat(4, 1fr); }
.value-diagram--autofit    { grid-template-columns: repeat(3, 1fr); }
.value-diagram--minmax     { grid-template-columns: max-content 1fr; }
.value-diagram--mincontent { width: min-content; }
.value-diagram--maxcontent { width: max-content; }
.value-diagram--fitcontent-shrink { width: max-content; }

.value-diagram--autofill .empty {
  background: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
  border: 1px dashed light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15));
}

.value-diagram--minmax > div { padding: 0 0.6em; }
.value-diagram--mincontent .narrow { padding: 0 4px; }
.value-diagram--maxcontent .full { padding: 0 6px; white-space: nowrap; }
.value-diagram--fitcontent-shrink > div { padding: 0 6px; white-space: nowrap; }
.value-diagram--fitcontent-cap > div { padding: 4px 6px; justify-content: flex-start; text-align: left; }

.value-diagram-fitcontent {
  position: relative;
  display: grid;
  grid-template-columns: fit-content(90%);
  gap: 4px;
  padding-top: 16px;
}

.value-diagram--fitcontent-cap {
  height: auto;
  min-height: 24px;
  overflow: visible;
}

.value-diagram-fitcontent::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 0;
  right: 10%;
  border-right: 1px dashed light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
}

.value-diagram-fitcontent-ceiling-label {
  position: absolute;
  top: 0;
  right: 10%;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-faint);
}

.value-diagram-pair {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.value-diagram-labeled {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.value-diagram-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-faint);
}

/* Compact value card — Defining Lanes row */
.field-entry--value {
  padding: 0.75rem 0.75rem;
  gap: 0.35rem;

  .field-entry-desc {
    font-size: var(--text-md);
    line-height: 1.5;
  }

  .field-code {
    font-size: var(--text-2xs);
    padding-inline: 0.45em;
  }
}

/* The Classic Pattern — featured entry */
.field-entry--pattern {
  background: light-dark(#e2e8ee, #2a3440);

  .plate-number {
    font-style: italic;
  }
}

/* Field entry card */
.field-entry {
  margin: 0;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background: var(--color-surface);

  figcaption h4 {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-text);
    margin: 0.25lh 0;
  }
  .space {
    margin-inline: 4px 5px;
  }
  figcaption h5 {
    font-family: var(--font-text);
    font-size: var(--text-xl);
    font-style: italic;
    font-weight: 400;
    color: var(--color-text-muted);
    margin: 0.5em 0 0;
  }

  &.field-entry--display .field-code {
    font-size: var(--text-sm);
  }
}

.field-entry-desc {
  font-family: var(--font-label);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

.field-entry-desc code {
  font-size: 0.85em;
}

/* Diagram canvas */
.diagram-canvas {
  position: relative;
  padding: 0.75rem 0;
  overflow: visible;
  flex: 1;
  display: flex;
  flex-direction: column;
  max-height: 180px;
}

/* Diagram box base — flex centering for labels inside */
.diagram-box {
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* Field guide boxes — uniform purple, gold for highlighted variants.
   Labels inside use the shared font-label/0.65rem/white treatment. */
.field-guide .diagram-box {
  background: light-dark(#845d9c, #5a3878);
  border-radius: 3px;
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  color: rgba(255, 255, 255, 0.9);
}

.field-guide .diagram-box--spanning,
.field-guide .diagram-box--pinned {
  background: light-dark(#e4c16a, #7a6230);
  color: light-dark(rgba(0, 0, 0, 0.75), rgba(255, 255, 255, 0.85));
}

.diagram-code-label {
  white-space: nowrap;
}

/* --- Layout grids inside diagram canvases ---

   Each diagram has two presentation modes via @supports:

   1. With Grid Lanes (default in supporting browsers): `display: grid-lanes`
      auto-packs items in source order. The CSS only sets each item's
      intrinsic size (height/width) — not its position — so changing
      properties like `flow-tolerance` actually causes items to reflow.

   2. Without Grid Lanes (fallback): `@supports not (display: grid-lanes)`
      hand-places each box via :nth-child + grid-column / grid-row to fake
      what masonry would have produced. None of those placements leak into
      the Grid Lanes path.

   Items are in true source order in the HTML (1, 2, 3 ... 9), so the labels
   match the source order Grid Lanes will use to pack them. */

/* Waterfall: 3 columns, items pack top-to-bottom (vertical masonry) */
.waterfall-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 8px;
  gap: 4px;
}

/* Brick: 3 rows, items pack left-to-right (horizontal masonry) */
.brick-layout {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-columns: 1fr;
  gap: 4px;
  flex: 1;
  min-height: 120px;
}

/* Gap (Fig. V): 3 columns, 6 items packing waterfall-style */
.gap-layout {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 8px;
  gap: 0.5rem 1rem;
  width: calc(100% - 70px);
  align-self: flex-start;
  background: repeating-linear-gradient(45deg, #9262af 0 1px, transparent 1px 6px);
}

/* At narrow widths, drop the row-gap label reservation and the markers
   so the gap diagram has breathing room. */
@media (max-width: 600px) {
  .gap-layout {
    width: 100%;
  }
  .gap-layout .diagram-marker {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  .gap-layout {
    background: repeating-linear-gradient(45deg, #a878c0 0 1px, transparent 1px 6px);
  }
}

/* Tolerance (Fig. IV): 2 columns, 4 items, two halves comparing
   flow-tolerance: 0 vs 5lh */
.tolerance-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 8px;
  gap: 3px;
}

/* Spanning Lanes & Explicit Placement (Fig. VI/VII) base — also waterfall */
.field-entry--spanning .diagram-layout,
.field-entry--placement .diagram-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 8px;
  gap: 4px;
}

/* === Real Grid Lanes mode =================================================
   In supporting browsers, the diagrams are real masonry layouts. The CSS
   below ONLY supplies each item's intrinsic dimension (so the empty <div>s
   "pretend" to have a natural aspect ratio) and the actual property the
   diagram is demonstrating (flow-tolerance, grid-column for pinned/spanning
   items). Item positions are not set — Grid Lanes auto-packs them. */
@supports (display: grid-lanes) {
  .waterfall-layout,
  .brick-layout,
  .gap-layout,
  .tolerance-layout,
  .field-entry--spanning .diagram-layout,
  .field-entry--placement .diagram-layout {
    display: grid-lanes;
    flow-tolerance: 5px;
  }

  /* Each half of the tolerance demo gets the actual flow-tolerance value
     it's labeled with — real Grid Lanes does the rest. */
  .tolerance-layout--strict { flow-tolerance: 0; }
  .tolerance-layout--loose  { flow-tolerance: 4lh; }

  /* Waterfall — varied heights so masonry packs irregularly. Numbers
     don't share a common factor; rows shouldn't visibly align. */
  .waterfall-layout > .diagram-box:nth-child(1) { height: 54px; }
  .waterfall-layout > .diagram-box:nth-child(2) { height: 34px; }
  .waterfall-layout > .diagram-box:nth-child(3) { height: 70px; }
  .waterfall-layout > .diagram-box:nth-child(4) { height: 60px; }
  .waterfall-layout > .diagram-box:nth-child(5) { height: 27px; }
  .waterfall-layout > .diagram-box:nth-child(6) { height: 39px; }
  .waterfall-layout > .diagram-box:nth-child(7) { height: 48px; }
  .waterfall-layout > .diagram-box:nth-child(8) { height: 55px; }
  .waterfall-layout > .diagram-box:nth-child(9) { height: 28px; }

  /* Brick — widths over a 12-unit container with 11 gaps of 4px */
  .brick-layout > .diagram-box:nth-child(1) { width: calc((100% - 44px) / 12 * 5 + 16px); } /* span 5 */
  .brick-layout > .diagram-box:nth-child(2) { width: calc((100% - 44px) / 12 * 3 + 8px);  } /* span 3 */
  .brick-layout > .diagram-box:nth-child(3) { width: calc((100% - 44px) / 12 * 4 + 12px); } /* span 4 */
  .brick-layout > .diagram-box:nth-child(4) { width: calc((100% - 44px) / 12 * 4 + 12px); } /* span 4 */
  .brick-layout > .diagram-box:nth-child(5) { width: calc((100% - 44px) / 12 * 2 + 4px);  } /* span 2 */
  .brick-layout > .diagram-box:nth-child(6) { width: calc((100% - 44px) / 12 * 3 + 8px);  } /* span 3 */
  .brick-layout > .diagram-box:nth-child(7) { width: calc((100% - 44px) / 12 * 5 + 16px); } /* span 5 */
  .brick-layout > .diagram-box:nth-child(8) { width: calc((100% - 44px) / 12 * 3 + 8px);  } /* span 3 */
  .brick-layout > .diagram-box:nth-child(9) { width: calc((100% - 44px) / 12 * 4 + 12px); } /* span 4 */

  /* Tolerance — varied heights so columns don't add up to identical totals.
     Both halves use the same heights; the different layouts emerge from
     flow-tolerance, not from cooking the numbers. */
  .tolerance-layout > .diagram-box:nth-child(1) { height: 39px; }
  .tolerance-layout > .diagram-box:nth-child(2) { height: 28px; }
  .tolerance-layout > .diagram-box:nth-child(3) { height: 21px; }
  .tolerance-layout > .diagram-box:nth-child(4) { height: 44px; }

  /* Gap — varied "natural aspect ratio" heights. Columns won't end at the
     same y; that's how real Grid Lanes content packs. */
  .gap-layout > .diagram-box:nth-child(1) { height: 38px; }
  .gap-layout > .diagram-box:nth-child(2) { height: 26px; }
  .gap-layout > .diagram-box:nth-child(3) { height: 45px; }
  .gap-layout > .diagram-box:nth-child(4) { height: 32px; }
  .gap-layout > .diagram-box:nth-child(5) { height: 28px; }
  .gap-layout > .diagram-box:nth-child(6) { height: 41px; }

  /* Spanning + Placement — heights pretend to be content with varied
     aspect ratios so masonry produces an organic, irregular layout.
     Each item is a different height; columns won't add up to the same
     total. This is what classic Grid Lanes content looks like. */
  .field-entry--spanning  .diagram-box:nth-child(1)  { height: 40px; }
  .field-entry--spanning  .diagram-box:nth-child(2)  { height: 25px; }
  .field-entry--spanning  .diagram-box:nth-child(3)  { height: 60px; }
  .field-entry--spanning  .diagram-box:nth-child(4)  { height: 40px; }
  .field-entry--spanning  .diagram-box:nth-child(5)  { height: 50px; }
  .field-entry--spanning  .diagram-box:nth-child(6)  { height: 65px; }
  .field-entry--spanning  .diagram-box:nth-child(7)  { height: 40px; }

  .field-entry--placement .diagram-box:nth-child(1)  { height: 50px; }
  .field-entry--placement .diagram-box:nth-child(2)  { height: 30px; }
  .field-entry--placement .diagram-box:nth-child(3)  { height: 40px; }
  .field-entry--placement .diagram-box:nth-child(4)  { height: 50px; }
  .field-entry--placement .diagram-box:nth-child(5)  { height: 100px; }
  .field-entry--placement .diagram-box:nth-child(6)  { height: 60px; }
  .field-entry--placement .diagram-box:nth-child(7)  { height: 35px; }

  /* The real properties Fig. VI and Fig. VII are demonstrating. The
     toggle in each figure conditionally applies the property — when
     unchecked, the property isn't applied and the highlighted item
     flows like everything else. This is a real, live demonstration. */
  .field-entry--placement:has(input[switch]:checked) .diagram-box--pinned {
    grid-column: 3;
  }

  .field-entry--spanning:has(input[switch]:checked) .diagram-box--spanning {
    grid-column: span 2;
  }

  /* Mask the empty space below each column's last item so the hatched
     gap pattern only shows in actual gap zones, not below shorter cols.
     With 6 items in 3 columns under masonry packing, items 4–6 are each
     the last item in their respective columns. A pseudo-element on each
     extends downward in the figure's surface color, painted between the
     pattern (container background) and the item itself.

     The mask height for each item is the distance from that item's bottom
     to the container's bottom (= the tallest column's content height).
     With heights 38, 26, 45, 32, 28, 41 and 8px row-gap, the masonry
     packs to col-bottoms 74 / 66 / 94 — so the gaps to fill are 20 / 28 / 0px. */
  .gap-layout > .diagram-box {
    position: relative;
    z-index: 1;
  }

  .gap-layout > .diagram-box:nth-child(n+4)::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--color-surface);
    z-index: -1;
  }

  .gap-layout > .diagram-box:nth-child(4)::after { height: 28px; } /* col 2 */
  .gap-layout > .diagram-box:nth-child(5)::after { height: 20px; } /* col 1 */
  .gap-layout > .diagram-box:nth-child(6)::after { height: 0;    } /* col 3 (no gap) */

  /* Align the row-gap marker with col 3's actual row-gap (item 3 height
     of 45px, gap immediately after). In fake mode the marker uses its
     default position aligned with the equal-row layout. */
  .gap-layout .diagram-marker--v {
    top: 45px;
  }
}

/* === Fallback (no Grid Lanes) =============================================
   Hand-laid masonry: every item gets an explicit grid-column/grid-row that
   matches what real masonry would produce. These rules ONLY apply when
   Grid Lanes isn't supported — they don't leak into the path above. */
@supports not (display: grid-lanes) {
  /* Waterfall */
  .waterfall-layout > .diagram-box:nth-child(1) { grid-column: 1; grid-row: 1 / span 5; }
  .waterfall-layout > .diagram-box:nth-child(2) { grid-column: 2; grid-row: 1 / span 3; }
  .waterfall-layout > .diagram-box:nth-child(3) { grid-column: 3; grid-row: 1 / span 4; }
  .waterfall-layout > .diagram-box:nth-child(4) { grid-column: 2; grid-row: 4 / span 4; }
  .waterfall-layout > .diagram-box:nth-child(5) { grid-column: 3; grid-row: 5 / span 2; }
  .waterfall-layout > .diagram-box:nth-child(6) { grid-column: 1; grid-row: 6 / span 3; }
  .waterfall-layout > .diagram-box:nth-child(7) { grid-column: 3; grid-row: 7 / span 5; }
  .waterfall-layout > .diagram-box:nth-child(8) { grid-column: 2; grid-row: 8 / span 3; }
  .waterfall-layout > .diagram-box:nth-child(9) { grid-column: 1; grid-row: 9 / span 4; }

  /* Brick */
  .brick-layout > .diagram-box:nth-child(1) { grid-row: 1; grid-column: 1 / span 5; }
  .brick-layout > .diagram-box:nth-child(2) { grid-row: 2; grid-column: 1 / span 3; }
  .brick-layout > .diagram-box:nth-child(3) { grid-row: 3; grid-column: 1 / span 4; }
  .brick-layout > .diagram-box:nth-child(4) { grid-row: 2; grid-column: 4 / span 4; }
  .brick-layout > .diagram-box:nth-child(5) { grid-row: 3; grid-column: 5 / span 2; }
  .brick-layout > .diagram-box:nth-child(6) { grid-row: 1; grid-column: 6 / span 3; }
  .brick-layout > .diagram-box:nth-child(7) { grid-row: 3; grid-column: 7 / span 5; }
  .brick-layout > .diagram-box:nth-child(8) { grid-row: 2; grid-column: 8 / span 3; }
  .brick-layout > .diagram-box:nth-child(9) { grid-row: 1; grid-column: 9 / span 4; }

  /* Gap */
  .gap-layout > .diagram-box:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; }
  .gap-layout > .diagram-box:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .gap-layout > .diagram-box:nth-child(3) { grid-column: 3; grid-row: 1 / span 3; }
  .gap-layout > .diagram-box:nth-child(4) { grid-column: 2; grid-row: 3 / span 3; }
  .gap-layout > .diagram-box:nth-child(5) { grid-column: 1; grid-row: 4 / span 2; }
  .gap-layout > .diagram-box:nth-child(6) { grid-column: 3; grid-row: 4 / span 2; }

  /* Tolerance — strict (flow-tolerance: 0) packs item 3 into col 2 */
  .tolerance-layout--strict > .diagram-box:nth-child(1) { grid-column: 1; grid-row: 1 / span 4; }
  .tolerance-layout--strict > .diagram-box:nth-child(2) { grid-column: 2; grid-row: 1 / span 3; }
  .tolerance-layout--strict > .diagram-box:nth-child(3) { grid-column: 2; grid-row: 4 / span 2; }
  .tolerance-layout--strict > .diagram-box:nth-child(4) { grid-column: 1; grid-row: 5 / span 4; }

  /* Tolerance — loose (flow-tolerance: 5lh) keeps item 3 in source-order col 1 */
  .tolerance-layout--loose > .diagram-box:nth-child(1) { grid-column: 1; grid-row: 1 / span 4; }
  .tolerance-layout--loose > .diagram-box:nth-child(2) { grid-column: 2; grid-row: 1 / span 3; }
  .tolerance-layout--loose > .diagram-box:nth-child(3) { grid-column: 1; grid-row: 5 / span 2; }
  .tolerance-layout--loose > .diagram-box:nth-child(4) { grid-column: 2; grid-row: 4 / span 4; }

  /* Spanning Lanes — item 6 spans cols 1-2 (the property is "applied"
     in the static fallback, since the toggle UI is hidden) */
  .field-entry--spanning .diagram-layout > .diagram-box:nth-child(1)  { grid-column: 1;          grid-row: 1 / span 4; }
  .field-entry--spanning .diagram-layout > .diagram-box:nth-child(2)  { grid-column: 2;          grid-row: 1 / span 2; }
  .field-entry--spanning .diagram-layout > .diagram-box:nth-child(3)  { grid-column: 3;          grid-row: 1 / span 3; }
  .field-entry--spanning .diagram-layout > .diagram-box:nth-child(4)  { grid-column: 1 / span 2; grid-row: 5 / span 4; }
  .field-entry--spanning .diagram-layout > .diagram-box:nth-child(5)  { grid-column: 3;          grid-row: 4 / span 2; }
  .field-entry--spanning .diagram-layout > .diagram-box:nth-child(6)  { grid-column: 3;          grid-row: 6 / span 5; }
  .field-entry--spanning .diagram-layout > .diagram-box:nth-child(7)  { grid-column: 1;          grid-row: 9 / span 3; }

  /* Explicit Placement — item 1 pinned to col 3 */
  .field-entry--placement .diagram-layout > .diagram-box:nth-child(1)  { grid-column: 3; grid-row: 1 / span 4; }
  .field-entry--placement .diagram-layout > .diagram-box:nth-child(2)  { grid-column: 1; grid-row: 1 / span 2; }
  .field-entry--placement .diagram-layout > .diagram-box:nth-child(3)  { grid-column: 2; grid-row: 1 / span 5; }
  .field-entry--placement .diagram-layout > .diagram-box:nth-child(4)  { grid-column: 1; grid-row: 3 / span 4; }
  .field-entry--placement .diagram-layout > .diagram-box:nth-child(5)  { grid-column: 3; grid-row: 5 / span 2; }
  .field-entry--placement .diagram-layout > .diagram-box:nth-child(6)  { grid-column: 2; grid-row: 6 / span 4; }
  .field-entry--placement .diagram-layout > .diagram-box:nth-child(7)  { grid-column: 1; grid-row: 7 / span 3; }

  /* Toggle UI is hidden in the fallback — the static diagram already
     shows the property "applied", so the on/off toggle has no effect.
     Always show the "applied" code variant. */
  .field-entry--spanning .field-toggle,
  .field-entry--placement .field-toggle {
    display: none;
  }

  .field-entry--spanning .field-code--off,
  .field-entry--placement .field-code--off {
    display: none;
  }
}

/* Description row wrapper. */
.field-entry-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.field-entry-row .field-entry-desc {
  flex: 1 1 14ch;
}

/* Header row at top of toggleable figures: plate number on the left,
   toggle on the right, sharing a baseline. */
.field-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.field-toggle {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-text-faint);
  cursor: pointer;
  user-select: none;
  accent-color: var(--color-text-muted);
  transition: color 0.15s;
}

.field-toggle input[switch] {
  margin: 0;
  display: block;
}

.field-toggle > span {
  display: inline-block;
  padding-block-start: 0.18em;
}

.field-toggle:hover {
  color: var(--color-text);
}

/* Code panel under each toggleable figure: show the "applied" or
   "commented out" snippet to match the toggle state. */
.field-entry:has(input[switch]:not(:checked)) .field-code--on {
  display: none;
}

.field-entry:has(input[switch]:checked) .field-code--off {
  display: none;
}


/* --- Gap dimension markers --- */
.diagram-marker {
  position: absolute;
  --marker-color: light-dark(#271a0e, #ddd8d0);
  color: var(--marker-color);
}

/* column-gap: horizontal bracket sitting just below the layout,
   exactly the width of the column gap (1rem) and centered on the first gap */
.diagram-marker--h {
  top: calc(100% + 12px);
  left: calc((100% - 2rem) / 3);
  width: 1rem;
  height: 1px;
  background: var(--marker-color);
}

.diagram-marker--h::before,
.diagram-marker--h::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 7px;
  background: var(--marker-color);
  top: -3px;
}

.diagram-marker--h::before { left: 0; }
.diagram-marker--h::after { right: 0; }

.diagram-marker--h span {
  position: absolute;
  top: 8px;
  left: 50%;
  translate: -50% 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  white-space: nowrap;
  color: var(--marker-color);
}

/* row-gap: vertical bracket sitting just right of the layout,
   exactly the height of the row gap (0.5rem). Aligned to the actual
   gap between row 3 and row 4 (top = 3 rows * 8px + 2 gaps * 0.5rem) */
.diagram-marker--v {
  left: calc(100% + 12px);
  top: calc(24px + 1rem);
  width: 1px;
  height: 0.5rem;
  background: var(--marker-color);
}

.diagram-marker--v::before,
.diagram-marker--v::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 1px;
  background: var(--marker-color);
  left: -3px;
}

.diagram-marker--v::before { top: 0; }
.diagram-marker--v::after { bottom: 0; }

.diagram-marker--v span {
  position: absolute;
  left: 6px;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  white-space: nowrap;
  color: var(--marker-color);
}

/* --- Flow-tolerance split view --- */
.diagram-canvas--split {
  padding: 0.625rem;
}

.diagram-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 0.75rem;
}

.diagram-split-half {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.diagram-split-label {
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--color-text-faint);
  text-align: center;
}

.diagram-split-label code {
  font-size: 0.9em;
  color: var(--color-accent-code);
}

.diagram-split-divider {
  width: 1px;
  background: var(--color-border);
}


/* --- 7. Demo section --- */
.demos {
  grid-column: full;
  background-color: light-dark(#3d374b, #332940);
  background-image:
    var(--paper),
    linear-gradient(light-dark(#3d374b, #332940), light-dark(#3d374b, #332940));
  background-blend-mode: multiply, normal;
  color: #F0EDE8;
  padding: var(--section-pad);
  box-shadow:
    inset 0 0 150px rgba(0, 0, 0, 0.3),
    inset 0 0 400px rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: dark) {
  .demos {
    color: #d0d4d8;
  }
}

.demos .section-heading {
  color: rgba(255, 255, 255, 0.72);
  max-width: var(--max-content-width);
  margin-inline: auto;
}

.demos .section-heading::after {
  background: rgba(255, 255, 255, 0.15);
}

.demos > ul {
  list-style: none;
  margin: 0;
  padding: 1.5rem 2rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 400px);
  gap: 1.25rem;
  justify-content: center;
  max-width: var(--max-content-width);
  margin-inline: auto;
}

@media (min-width: 600px) {
  .demos > ul {
    grid-template-columns: repeat(2, minmax(0, 400px));
  }
}

@media (min-width: 960px) {
  .demos > ul {
    grid-template-columns: repeat(3, minmax(0, 400px));
  }
}

.demos li {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.demos li:hover {
  transform: translateY(-3px);
}

.demos li a {
  color: #F0EDE8;
  text-decoration: none;
  display: block;
  background: #2a253a;
}

.demos li img {
  display: block;
  width: 100%;
  height: auto;
}

.demos .demo-label {
  font-family: var(--font-banner);
  font-style: italic;
  display: block;
  text-align: center;
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: #F0EDE8;
  padding: 0 0.75rem 0.9rem;
}

.demos .demos-note {
  font-family: var(--font-label);
  text-align: center;
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  padding: 0.5rem 2rem 0;
}

.demos .demos-note a {
  color: #F0EDE8;
}

/* --- 7a. Watch the Talk section --- */
.watch {
  grid-column: full;
  background-color: light-dark(#1c3540, #0f1f28);
  background-image:
    var(--paper),
    linear-gradient(light-dark(#1c3540, #0f1f28), light-dark(#1c3540, #0f1f28));
  background-blend-mode: multiply, normal;
  color: #F0EDE8;
  padding: var(--section-pad);
  box-shadow:
    inset 0 0 200px rgba(0, 0, 0, 0.35),
    inset 0 0 400px rgba(0, 0, 0, 0.12);
}

.watch .section-heading {
  color: rgba(255, 255, 255, 0.72);
  max-width: var(--max-content-width);
  margin-inline: auto;
}

.watch .section-heading::after {
  background: rgba(255, 255, 255, 0.15);
}

.watch-card {
  display: block;
  max-width: 60rem;
  margin: 1.5rem auto 0;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: light-dark(#284655, #1c3540);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.watch-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.watch-card:focus-visible {
  outline: 3px solid #f5d680;
  outline-offset: 4px;
}

.watch-thumbnail {
  display: block;
  width: 100%;
  height: auto;
}

.watch-meta {
  padding: 1.4rem 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.watch-label {
  font-family: var(--font-label);
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.watch-meta h3 {
  font-family: var(--font-banner);
  font-style: italic;
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.5px;
  margin: 0;
  color: #F0EDE8;
}

.watch-meta p {
  font-family: var(--font-text);
  font-size: var(--text-xl);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin: 0.25rem 0 0;
  max-width: 38rem;
}

.watch-cta {
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.watch-cta::after {
  content: "→";
  font-style: normal;
  text-decoration: none;
  display: inline-block;
}

.watch-card:hover .watch-cta {
  color: #f5d680;
}

/* --- 8. Developer Tools section --- */
.devtools {
  grid-column: full;
  background-color: light-dark(#3a2414, #2a1810);
  background-image:
    var(--paper),
    linear-gradient(light-dark(#3a2414, #2a1810), light-dark(#3a2414, #2a1810));
  background-blend-mode: multiply, normal;
  color: #F0EDE8;
  padding: var(--section-pad);
  padding-block-end: 0;
}

.devtools .section-heading {
  color: rgba(255, 255, 255, 0.72);
  max-width: var(--max-content-width);
  margin-inline: auto;
}

.devtools .section-heading::after {
  background: rgba(255, 255, 255, 0.2);
}

.devtools-content {
  max-width: var(--max-content-width);
  margin-inline: auto;
  text-align: center;
}

.devtools-content p {
  font-size: var(--text-base);
  line-height: 1.6;
  margin-block: 0;
  color: rgba(255, 255, 255, 0.85);
}

.devtools-content img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
}


/* --- 9. Learn More / Article cards --- */
.learn-more-content {
  grid-column: full;
  background-color: light-dark(#f0ead8, #1f2a30);
  background-image:
    var(--paper-light),
    linear-gradient(light-dark(#f0ead8, #1f2a30), light-dark(#f0ead8, #1f2a30));
  background-blend-mode: multiply, normal;
  padding: var(--section-pad);
  box-shadow: inset 0 0 200px light-dark(rgba(120, 80, 30, 0.15), rgba(0, 0, 0, 0.4));

  --field-guide-border: light-dark(#dcd6c8, #4a4840);
  --field-guide-border-strong: light-dark(#d6c9a7, #575549);
}

.learn-more-content .section-heading {
  max-width: var(--max-content-width);
  margin-inline: auto;
}

.learn-more-content .articles {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 2rem;
  max-width: var(--max-content-width);
}

.learn-more-content .articles li {
  position: relative;
  display: flex;
  background: var(--field-guide-border);
  border: 1.8px dotted var(--field-guide-border-strong);
  border-radius: 0;
}

.learn-more-content .articles li a {
  flex: 1;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  padding: 1.5rem 1.5rem 1.25rem;
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.article-label {
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--text-md);
  font-weight: 400;
  color: light-dark(#9a5410, #e8a060);
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: -0.15rem;
}

.learn-more-content .articles li a h3 {
  font-family: var(--font-banner);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
  color: var(--color-text);
  letter-spacing: 0.5px;
}

.learn-more-content .articles li a p {
  margin: 0;
  padding: 0;
  font-family: var(--font-text);
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
}

.article-cta {
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.article-cta::after {
  content: "→";
  font-style: normal;
  font-size: 1em;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.learn-more-content .articles li a:hover .article-cta {
  color: var(--color-text);
}

.learn-more-content .articles li a:hover .article-cta::after {
  transform: translateX(4px);
}

/* --- 10. Closing section --- */
.closing {
  grid-column: full;
  background-color: light-dark(#d8e4ec, #1a2430);
  background-image:
    var(--paper-light),
    linear-gradient(light-dark(#d8e4ec, #1a2430), light-dark(#d8e4ec, #1a2430));
  background-blend-mode: multiply, normal;
  padding: var(--section-pad);
  box-shadow:
    inset 80px 0 120px -60px rgba(80, 60, 30, 0.2),
    inset 0 0 100px rgba(80, 60, 30, 0.08);
}

.closing .section-heading {
  max-width: var(--max-content-width);
  margin-inline: auto;
}

.closing-content {
  max-width: 38rem;
  margin-inline: auto;
}

.closing-content p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-block: 0 1.25rem;
}

@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .closing-content p:first-child::first-letter {
    initial-letter: 3;
    -webkit-initial-letter: 3;
    font-family: var(--font-display);
    color: var(--color-accent);
    margin-inline-end: 0.5rem;
  }
}

.closing-content p:last-child {
  margin-block-end: 0;
}

.closing-content a {
  color: var(--color-accent);
  text-decoration-color: var(--color-border);
  text-underline-offset: 0.15em;
}

.closing-content a:hover {
  text-decoration-color: var(--color-accent);
}

/* --- 11. Footer --- */
.site-footer {
  background-color: #271a0e;
  background-image:
    var(--paper),
    linear-gradient(#271a0e, #271a0e);
  background-blend-mode: multiply, normal;
  color: rgba(255, 255, 255, 0.6);
  padding: 2rem;
}

.footer-content {
  max-width: var(--max-content-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-byline {
  margin: 0;
  font-size: var(--text-lg);
}

.footer-byline a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
  text-decoration: none;
}

.footer-byline a:hover {
  color: #fff;
}

.footer-tagline {
  margin: 0;
  font-size: var(--text-lg);
  font-style: normal;
  color: #b89866;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  font-size: var(--text-lg);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.footer-links a:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* --- 12. Mobile adjustments --- */

@media (max-width: 599px) {
  .homepage {
    grid-template-columns:
      [full-start] minmax(1rem, 1fr)
      [content-start] min(70ch, 100% - 2rem)
      [content-end] minmax(1rem, 1fr)
      [full-end];
    padding-block: 2rem 0;
  }

  .demos > ul {
    padding-inline: 1rem;
  }
}

@media (max-width: 500px) {

  /* Configurator: shorter browser frame */
  .browser-frame {
    height: 380px;
  }

  .resize-handle {
    height: 380px;
  }

  .browser-frame-area {
    min-height: 380px;
  }

  /* Hide resize slider + drag handles */
  .browser-resize,
  .resize-handle,
  .resize-handle-bottom {
    display: none;
  }

  /* Configurator panel: tighten padding and gap */
  .configurator-panel {
    padding: 1rem;
    gap: 1rem;
  }

  /* Preset buttons: shrink icons */
  .config-preset-btn svg {
    width: 48px;
    height: 36px;
  }

  /* Direction tabs: shrink SVGs and tighten spacing */
  .config-direction-tab-content {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .config-direction-tab-content svg {
    width: 36px;
  }

  .config-direction-tab-content strong {
    font-size: var(--text-2xs);
  }

  /* Tolerance row: wrap the Play Tab Order button */
  .tolerance-row {
    flex-wrap: wrap;
  }

  .tab-order-btn {
    width: 100%;
  }

  /* Diagrams: reduce padding */
  .diagrams {
    padding: 2rem 1rem;
  }

  /* Learn More / articles: reduce padding */
  .learn-more-content {
    padding: 2rem 1rem;
  }

  /* Devtools + closing: reduce padding */
  .devtools,
  .closing {
    padding: 2rem 1rem;
  }
}