/* ScanIDCard, "the drawing sheet". The page is a draftsman's board: cards and sheets lie on it at true proportion,
   measured with teal dimension lines in mono, and the amber stamp says "actual size". One idea per section, a wide
   left margin for its heading, details folded beneath. Paper grain is CSS only (laid lines on white surfaces).
   Fonts are served by this site (web/fonts/, SIL OFL, latin subset; the build hashes their names): Archivo at its
   expanded width (112) for headings, Public Sans for text, IBM Plex Mono for labels and measurements.
   Tokens, type scale and motion: DESIGN.md. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700 800; font-stretch: 112%; font-display: swap; src: url("/assets/archivo-display.0730975b94.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/public-sans.5ed4d31c98.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/ibm-plex-mono-400.08949f728d.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/ibm-plex-mono-600.0d1f0b8d07.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  /* Surfaces */
  --board: #ECEFF1;
  --sheet: #FFFFFF;
  --table: #26313B;
  --ink: #15202B;
  /* Lines and text */
  --text-2: #3E4A55;
  --text-3: #56626E;
  --line: #D3DADF;
  --line-2: #BCC6CE;
  --seg: #E1E6EA;
  --soft: #F5F7F8;
  /* The two marks */
  --teal: #0B6E5F;
  --teal-dark: #085246;
  --teal-wash: #E2F0EC;
  --mint: #7FD6C5;
  --ring: #19B39A;
  --amber: #F6C453;
  --amber-ink: #3A2A05;
  --amber-soft: #FCF0CF;
  --white: #FFFFFF;
  /* Paper grain: laid lines and chain lines, faint */
  --grain: repeating-linear-gradient(0deg, rgba(21, 32, 43, 0.022) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(21, 32, 43, 0.03) 0 1px, transparent 1px 31px);
  /* The cutting mat under the hero and the page preview: a 24 px grid, every fifth line stronger */
  --mat: repeating-linear-gradient(0deg, rgba(11, 110, 95, 0.1) 0 1px, transparent 1px 120px), repeating-linear-gradient(90deg, rgba(11, 110, 95, 0.1) 0 1px, transparent 1px 120px), repeating-linear-gradient(0deg, rgba(11, 110, 95, 0.045) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(11, 110, 95, 0.045) 0 1px, transparent 1px 24px);
  --font-display: "Archivo", "Helvetica Neue", "Arial Nova", "Segoe UI Variable Display", "Segoe UI", Roboto, Arial, system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: 40px;
  --lift: 0 0 0 1px var(--line), 0 24px 40px -34px rgba(21, 32, 43, 0.55);
}
@media (max-width: 720px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--board); color: var(--ink); font: 16px/1.55 var(--font-body); }
@media (min-width: 900px) { body { font-size: 17px; } }
img, canvas, svg { display: block; }
a { color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-dark); text-decoration-thickness: 2px; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: 6px; background: var(--white); color: var(--ink); font-weight: 600; }
.skip-link:focus { top: 8px; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; }
.display { font-family: var(--font-display); font-stretch: 112%; font-weight: 780; letter-spacing: -0.025em; text-wrap: balance; }
.icon { flex: none; }

/* Privacy bar and header */
.privacy-bar { background: var(--ink); color: #DCE3EA; font-size: 13px; }
.privacy-bar .wrap { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.lock-icon { color: var(--mint); }
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand .logo { color: var(--teal); }
.brand .display { font-size: 19px; letter-spacing: -0.01em; }
.nav { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.nav a { color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover, .nav a[aria-current] { color: var(--teal); border-bottom-color: var(--teal); }
@media (max-width: 960px) { .nav { gap: 20px; font-size: 14px; } }
@media (max-width: 860px) { .nav { display: none; } }
@media (max-width: 520px) { .site-header .wrap { height: 56px; } .brand .display { font-size: 17px; } }

/* Buttons */
.button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 8px; font-weight: 650; font-size: 16px;
  text-decoration: none; cursor: pointer; text-align: center; line-height: 1.2;
}
.button.primary { background: var(--teal); color: var(--white); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2); }
.button.primary:hover { background: var(--teal-dark); color: var(--white); }
.button.secondary { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.button.secondary:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.button.dark { background: var(--ink); color: var(--white); }
.button.dark:hover { background: #26323E; color: var(--white); }
.button.small { min-height: 44px; padding: 0 16px; font-size: 15px; }
.button.big { min-height: 54px; padding: 0 24px; font-size: 17px; }
.button:disabled { opacity: 0.55; cursor: default; }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.file-button:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.text-button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--teal); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.text-button:hover { color: var(--teal-dark); }

/* The hero: the tool's start screen, on the cutting mat */
.tool { position: relative; padding-top: 24px; padding-bottom: 40px; }
.tool:not(.embedded):has(.start-screen:not([hidden]))::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: var(--mat); border-bottom: 1px solid var(--line);
}
.tool:not(.embedded):has(.start-screen:not([hidden])) { padding-top: 44px; padding-bottom: 56px; }
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; row-gap: 22px; align-items: start;
  grid-template-areas: "head scene" "act scene" "meta scene"; grid-template-rows: auto auto 1fr;
}
.hero-head { grid-area: head; display: flex; flex-direction: column; gap: 18px; padding-top: 16px; }
.hero-scene { grid-area: scene; }
.hero-act { grid-area: act; display: flex; flex-direction: column; gap: 12px; }
.hero-meta { grid-area: meta; display: flex; flex-direction: column; gap: 4px; }
.eyebrow { color: var(--teal); font-weight: 600; }
.hero h1 { font-size: clamp(34px, 3.4vw + 12px, 64px); line-height: 0.98; }
.hero h1:focus { outline: none; }
.lede { font-size: 19px; line-height: 1.5; color: var(--text-2); max-width: 30em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.spec-line { color: var(--text-3); font-size: 11px; padding-top: 4px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "scene" "act" "meta"; grid-template-rows: none; row-gap: 16px; }
  .hero-head { padding-top: 0; gap: 10px; }
}
@media (max-width: 520px) {
  .tool:not(.embedded):has(.start-screen:not([hidden])) { padding-top: 18px; padding-bottom: 36px; }
  .hero h1 { font-size: 30px; line-height: 1.02; letter-spacing: -0.03em; }
  .lede { font-size: 16px; }
  .hero-actions .button { flex: 1 1 100%; }
  .hero-actions .button.secondary { min-height: 48px; }
  .hero-scene figcaption .mono { display: none; }
  .art .sc-label { display: none; }
}

.doc-choice { font-size: 15px; color: var(--text-2); }
.doc-choice summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none; }
.doc-choice summary::-webkit-details-marker { display: none; }
.link-like { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.doc-choice fieldset { border: 0; margin: 0; padding: 4px 0 0; display: grid; gap: 4px; }
.choice { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 6px 0; cursor: pointer; color: var(--ink); }
.choice input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--teal); }
.choice small { display: block; color: var(--text-3); font-size: 14px; }
.custom { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; padding: 8px 0 0 28px; }
.custom label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.custom input, .custom select { min-height: 44px; width: 7.5em; padding: 0 10px; border: 1.5px solid var(--line-2); border-radius: 6px; background: var(--white); }

.calm-note { padding: 10px 14px; border-radius: 6px; background: var(--amber-soft); color: var(--amber-ink); font-size: 15px; }
.calm-note:empty { display: none; }

/* The scan (src/art.ts, scanScene). The drawing is the final state; .sc-live plays it once, 4.2 s from first paint.
   The card's numbers (origin, the tilt) are sceneMotion()'s; tests/art.test.ts checks they agree. */
.scene { margin: 0; }
.scene .art { width: 100%; height: auto; overflow: visible; }
.hero-scene figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding-top: 6px; color: var(--text-3); }
.hero-scene figcaption .mono { font-size: 10.5px; }
.replay { min-height: 44px; margin-left: auto; padding: 0 2px; border: 0; background: none; color: var(--teal); font-weight: 600; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.art .sc-photo { fill: var(--table); }
.art .sc-grain { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 0.8; }
.art .sc-label { fill: var(--text-3); font-weight: 600; letter-spacing: 0.09em; }
.art .sc-label-dark { fill: #A9B8C3; }
.art .sc-crop { fill: none; stroke: var(--teal); stroke-width: 0.5; }
.art .sc-sheet { fill: var(--sheet); stroke: rgba(21, 32, 43, 0.16); stroke-width: 0.4; }
.art .sc-outline { fill: rgba(127, 214, 197, 0.07); stroke: var(--mint); stroke-width: 1.1; stroke-linejoin: round; opacity: 0.6; }
.art .sc-handle { fill: var(--white); stroke: var(--ring); stroke-width: 1.7; opacity: 0.6; }
.art .sc-band { opacity: 0; }
.art .sc-band-fill { fill: rgba(127, 214, 197, 0.16); }
.art .sc-band-line { fill: var(--mint); }
.art .sc-dim, .art .sc-tick { fill: none; stroke: var(--teal); stroke-width: 0.6; stroke-linecap: round; }
.art .sc-dimtext { fill: var(--teal); font-weight: 600; letter-spacing: 0.02em; }
.art .sc-stamp rect { fill: var(--amber); }
.art .sc-stamp text { fill: var(--amber-ink); font-weight: 600; letter-spacing: 0.03em; }
@media (prefers-reduced-motion: no-preference) {
  .sc-live .sc-front, .sc-live .sc-handle, .sc-live .sc-outline, .sc-live .sc-band, .sc-live .sc-back, .sc-live .sc-dim, .sc-live .sc-tick, .sc-live .sc-dimtext, .sc-live .sc-stamp {
    animation-duration: 4.2s; animation-delay: 0.3s; animation-fill-mode: both; animation-timing-function: linear;
  }
  /* 1. The card lies in the photo until its corners are found and the scan has passed, then straightens onto the sheet. */
  .sc-live .sc-front { transform-box: view-box; transform-origin: 305.95px 117.71px; animation-name: sc-card; }
  /* 2. Four handles drop onto the corners, one after another, and stay as a faint record of where they were found. */
  .sc-live .sc-handle { transform-box: fill-box; transform-origin: center; animation-name: sc-handle; }
  .sc-live .sc-h2 { animation-delay: 0.42s; }
  .sc-live .sc-h3 { animation-delay: 0.54s; }
  .sc-live .sc-h4 { animation-delay: 0.66s; }
  .sc-live .sc-outline { stroke-dasharray: 1; animation-name: sc-outline; }
  /* 3. The scan line sweeps the card, top to bottom, inside its outline. */
  .sc-live .sc-band { transform-box: fill-box; animation-name: sc-band; }
  /* 4. The back joins, the dimension lines draw in, the stamp lands. */
  .sc-live .sc-back { animation-name: sc-back; }
  .sc-live .sc-dim { stroke-dasharray: 1; animation-name: sc-dim; }
  .sc-live .sc-tick, .sc-live .sc-dimtext { animation-name: sc-label; }
  .sc-live .sc-stamp { transform-box: fill-box; transform-origin: center; animation-name: sc-stamp; }
}
@keyframes sc-card {
  0%, 52% { transform: translate(-210.95px, 34.29px) rotate(-14deg) skewX(-8deg) scale(1.55); animation-timing-function: cubic-bezier(0.55, 0, 0.2, 1); }
  72% { transform: translate(0px, -1.2px) rotate(0deg) skewX(0deg) scale(1.012); animation-timing-function: ease-out; }
  77%, 100% { transform: translate(0px, 0px) rotate(0deg) skewX(0deg) scale(1); }
}
@keyframes sc-handle {
  0%, 10% { opacity: 0; transform: scale(2.6); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  17%, 50% { opacity: 1; transform: scale(1); }
  57%, 100% { opacity: 0.6; transform: scale(1); }
}
@keyframes sc-outline {
  0%, 21% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: ease-in-out; }
  33%, 50% { stroke-dashoffset: 0; opacity: 1; }
  57%, 100% { stroke-dashoffset: 0; opacity: 0.6; }
}
@keyframes sc-band {
  0%, 30% { opacity: 1; transform: translateY(-100%); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  49% { opacity: 1; transform: translateY(0%); }
  53%, 100% { opacity: 0; transform: translateY(0%); }
}
@keyframes sc-back {
  0%, 69% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  78%, 100% { opacity: 1; transform: translateY(0px); }
}
@keyframes sc-dim {
  0%, 76% { stroke-dashoffset: 1; animation-timing-function: ease-in-out; }
  87%, 100% { stroke-dashoffset: 0; }
}
@keyframes sc-label {
  0%, 83% { opacity: 0; }
  90%, 100% { opacity: 1; }
}
@keyframes sc-stamp {
  0%, 89% { opacity: 0; transform: scale(1.4) rotate(-5deg); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  93% { opacity: 1; transform: scale(0.97) rotate(0deg); animation-timing-function: ease-out; }
  96%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Flow screens */
.screen-head { display: flex; align-items: center; gap: 12px; padding: 0 0 10px; }
.back-button { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; }
.back-button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.step-label { color: var(--teal); font-weight: 600; font-size: 11px; }
.screen-title { font-family: var(--font-display); font-stretch: 112%; font-weight: 760; font-size: 23px; line-height: 1.15; letter-spacing: -0.02em; }
.screen-title:focus { outline: none; }
.progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0 0 18px; }
.progress i { height: 3px; background: var(--line-2); }
.progress i.on { background: var(--teal); }
.progress[data-steps="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.progress[data-steps="3"] i:nth-child(4) { display: none; }
@media (min-width: 900px) { .screen-title { font-size: 30px; } .progress { max-width: 560px; } }

.pick { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 580px; margin: 8px auto 0; padding: 32px 22px 26px; border-radius: 4px; background-color: var(--sheet); background-image: var(--grain); box-shadow: var(--lift); text-align: center; }
.pick-card { width: min(66%, 250px); }
.pick-art { width: 100%; height: auto; transform: rotate(-4deg); }
.pick-text { color: var(--text-2); max-width: 400px; }
.pick-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.pick-actions .button { flex: 1 1 200px; min-height: 54px; font-size: 17px; }
.done-front { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 15px; }
.done-front canvas { width: 64px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.done-front span { display: flex; align-items: center; gap: 6px; }
.check-icon { color: var(--teal); }
.busy { margin: 24px auto; max-width: 580px; padding: 18px; border-radius: 4px; background: var(--white); box-shadow: 0 0 0 1px var(--line); text-align: center; font-weight: 600; color: var(--text-2); }

/* Check the corners: the photo on the dark table, handles ringed in teal */
.editor { display: grid; gap: 16px; }
@media (min-width: 960px) { .editor { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; } }
.stage-frame {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; overflow: hidden;
  background: var(--table) repeating-linear-gradient(97deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 7px);
}
.stage { position: relative; max-width: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.stage canvas[data-photo] { width: 100%; height: auto; border-radius: 4px; }
.stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.stage polygon { fill: rgba(25, 179, 154, 0.08); stroke: var(--ring); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.handle { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; }
.handle::after { content: ""; position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3.5px var(--ring), 0 3px 8px rgba(0, 0, 0, 0.45); }
.handle:active { cursor: grabbing; }
.handle:focus-visible { outline: none; }
.handle:focus-visible::after { box-shadow: 0 0 0 3.5px var(--ring), 0 0 0 7px var(--white), 0 3px 8px rgba(0, 0, 0, 0.45); }
[data-doubtful="true"] .stage polygon { stroke: var(--amber); fill: rgba(246, 196, 83, 0.1); }
[data-doubtful="true"] .handle::after { box-shadow: 0 0 0 4px var(--amber), 0 0 0 9px rgba(246, 196, 83, 0.35), 0 3px 8px rgba(0, 0, 0, 0.45); }
[data-doubtful="true"] .handle:focus-visible::after { box-shadow: 0 0 0 4px var(--amber), 0 0 0 8px var(--white), 0 3px 8px rgba(0, 0, 0, 0.45); }
@media (prefers-reduced-motion: no-preference) {
  [data-doubtful="true"] .handle::after { animation: breathe 2.4s ease-in-out infinite; }
  @keyframes breathe { 50% { transform: scale(1.12); } }
}
.loupe { position: absolute; left: 6px; top: 6px; width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 3px var(--white), 0 10px 24px rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 2; }
.loupe.is-right { left: auto; right: 6px; }
.stage-note { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #E8EDF1; font-size: 15px; }
.stage-note::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--mint); }
[data-doubtful="true"] .stage-note::before, [data-found="false"] .stage-note::before { background: var(--amber); }
.editor-side { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.editor-help { color: var(--text-2); font-size: 15px; padding-left: 14px; border-left: 2px solid var(--teal); }
@media (max-width: 959px) { .editor-help { display: none; } }
.editor-actions { display: flex; gap: 10px; }
.editor-actions .button { min-height: 54px; font-size: 17px; }
.editor-actions .retake { flex: 1; }
.editor-actions [data-apply] { flex: 1.6; }
.caption { text-align: center; color: var(--text-3); font-size: 11px; }
.side-screen > .calm-note { margin-top: 12px; }

/* Your page: the sheet on the mat as it will print, its controls in labeled groups */
.page-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .page-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; } .page-view { position: sticky; top: 16px; } }
.page-view { display: flex; flex-direction: column; gap: 16px; padding: 22px 14px 14px; border-radius: 10px; background-color: var(--board); background-image: var(--mat); box-shadow: inset 0 0 0 1px var(--line); }
.sheet-wrap { display: flex; justify-content: center; padding: 4px 0 6px; }
.sheet { position: relative; width: min(100%, 290px); background: var(--white); border-radius: 1px; box-shadow: 0 0 0 1px rgba(21, 32, 43, 0.08), 0 22px 40px -26px rgba(21, 32, 43, 0.55); }
@media (min-width: 960px) { .sheet { width: min(100%, 440px); } }
.sheet canvas { width: 100%; height: auto; }
.stamp { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; padding: 6px 11px; border-radius: 2px; background: var(--amber); color: var(--amber-ink); font-weight: 600; font-size: 10px; }
@media (min-width: 960px) { .stamp { font-size: 11px; } }
.dimension { position: absolute; display: flex; align-items: center; gap: 4px; height: 9px; transform: translateY(-50%); border-left: 1px solid var(--teal); border-right: 1px solid var(--teal); }
.dimension::before, .dimension::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--teal); }
.dimension span { font-size: 9px; letter-spacing: 0.02em; text-transform: none; color: var(--teal); font-weight: 600; white-space: nowrap; }
@media (min-width: 960px) { .dimension span { font-size: 11px; } }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.side-chip { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.side-chip canvas { width: 46px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.chip-name { padding: 0 6px; font-weight: 650; font-size: 15px; }
.chip-button { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--soft); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; }
.chip-button:hover { background: var(--seg); }
@media (max-width: 520px) {
  .chip-button[data-rotate], .chip-button[data-flip] { width: 44px; padding: 0; justify-content: center; }
  .chip-button[data-rotate] span, .chip-button[data-flip] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.page-controls { display: flex; flex-direction: column; gap: 20px; }
.seg-group { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.legend { padding: 0 0 8px; color: var(--text-3); font-weight: 600; }
.page-controls > .seg-group > .legend { display: block; width: 100%; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.seg-group .seg-group .legend { padding: 0; border: 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; border-radius: 8px; background: var(--seg); }
.seg label { position: relative; display: flex; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 6px; border-radius: 6px; font-size: 15px; font-weight: 600; color: var(--text-2); text-align: center; line-height: 1.2; cursor: pointer; }
.seg input:checked + span { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(21, 32, 43, 0.2), inset 0 -2px 0 var(--teal); }
.seg input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 1px; }
.seg.looks { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.seg.looks label { grid-column: span 2; }
.seg.looks label:nth-child(n + 4) { grid-column: span 3; }
.tone { margin-top: -8px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.tone summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; font-weight: 600; cursor: pointer; list-style: none; }
.tone summary::-webkit-details-marker { display: none; }
.tone summary .mono { color: var(--text-3); font-size: 11px; font-weight: 400; }
.tone summary::after, .more summary::after, .faq summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 4px 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.tone[open] summary::after, .more[open] summary::after, .faq details[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.slider-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 12px; padding: 4px 14px 10px; border-top: 1px solid var(--seg); }
.slider-row label { font-size: 15px; font-weight: 600; }
.slider-row output { min-width: 3ch; color: var(--text-3); text-align: right; }
.slider-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 36px; margin: 0; accent-color: var(--teal); }
.slider-row [data-tone-reset] { grid-column: 3; grid-row: 1; }
.slider-row [data-tone-reset]:disabled { color: var(--text-3); text-decoration: none; cursor: default; }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--text-2); cursor: pointer; }
.check-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--teal); }

.panel { display: flex; flex-direction: column; padding: 2px 16px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 6px 0; cursor: pointer; }
.row + .mark-fields, .row + .redact { border-top: 1px solid var(--seg); }
.panel > .row:not(:first-child), .mark-fields + .row { border-top: 1px solid var(--seg); }
.row-text { display: flex; flex-direction: column; }
.row-title { font-weight: 650; }
.row-sub { font-size: 14px; color: var(--text-3); }
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 48px; height: 28px; margin: 0; border-radius: 14px; background: var(--line-2); cursor: pointer; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.switch:checked { background: var(--teal); }
.switch:checked::after { left: 23px; }
@media (prefers-reduced-motion: no-preference) { .switch::after { transition: left 0.15s ease; } }
.mark-fields { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .legend { padding: 0; font-size: 11px; }
.field input { min-height: 46px; padding: 0 12px; border-radius: 6px; border: 1.5px solid var(--line-2); background: #F8FAFB; font-size: 16px; }
.field input:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.field-note { font-size: 14px; color: var(--text-3); }
.field-note:empty { display: none; }
.field-note.calm { padding: 8px 12px; border-radius: 6px; background: var(--amber-soft); color: var(--amber-ink); }
.redact { display: flex; flex-direction: column; gap: 14px; padding: 12px 0 16px; }
.redact-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.redact-side .legend { padding: 0; }
.redact-surface { position: relative; width: 100%; touch-action: none; cursor: crosshair; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); user-select: none; -webkit-user-select: none; }
.redact-surface canvas { width: 100%; height: auto; border-radius: 3px; }
.redact-boxes { position: absolute; inset: 0; }
.redact-box { position: absolute; padding: 0; border: 0; background: #000000; cursor: move; touch-action: none; }
.redact-box.drawing { opacity: 0.8; }
.redact-box:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
.redact-actions { display: flex; align-items: center; gap: 12px; }

.seg.sizes { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.downloads { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.downloads .button { width: 100%; }
.downloads .button.big { min-height: 58px; font-size: 18px; }
.downloads .button.secondary { min-height: 52px; font-size: 17px; }
.file-note { font-size: 14px; color: var(--teal-dark); text-align: center; }
.file-note:empty { display: none; }
.file-note.calm { padding: 10px 14px; border-radius: 6px; background: var(--amber-soft); color: var(--amber-ink); text-align: left; }
.print-note { margin-top: 4px; font-size: 14px; color: var(--text-3); text-align: center; }
.start-over { align-self: center; }

/* The tool in a guide: a work order. The preset reads like the corner of a drawing. */
.tool-band { padding: 0 0 16px; }
.tool.embedded { padding-top: 8px; padding-bottom: 40px; }
.tool-card {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: start; padding: 30px 34px 32px;
  border-top: 3px solid var(--teal); border-radius: 2px; background-color: var(--sheet); background-image: var(--grain); box-shadow: var(--lift);
}
.tool-copy { display: flex; flex-direction: column; gap: 16px; }
.tool-title { font-size: clamp(26px, 1.6vw + 16px, 36px); line-height: 1.05; font-weight: 760; }
.tool-title:focus { outline: none; }
.tool-lede { color: var(--text-2); max-width: 34em; }
.tool-side { display: flex; flex-direction: column; gap: 8px; }
.preset, .title-block { margin: 0; display: grid; border: 1px solid var(--ink); }
.preset > div, .title-block > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 10px; min-width: 0; }
.preset > div + div { border-top: 1px solid var(--ink); }
.preset dt, .title-block dt { color: var(--text-3); font-size: 10px; font-weight: 600; }
.preset dd, .title-block dd { margin: 0; font-weight: 650; font-size: 16px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .tool-card { grid-template-columns: minmax(0, 1fr); padding: 24px 22px; gap: 20px; } }
@media (max-width: 520px) { .tool-card { padding: 22px 16px; margin: 0 calc(var(--gutter) * -1); } .tool-card .hero-actions .button { flex: 1 1 100%; } }

/* Breadcrumb trail */
.trail ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 16px 0 0; list-style: none; font-size: 14px; color: var(--text-3); }
.trail li + li::before { content: "/"; margin: 0 10px; color: var(--line-2); }
.trail a { color: var(--text-3); }

/* Guides: the answer, its drawing, the title block */
main { counter-reset: figure; }
.article-hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; row-gap: 24px; align-items: start;
  grid-template-areas: "copy art" "block art"; grid-template-rows: auto 1fr; padding-top: 28px; padding-bottom: 32px;
}
.article-copy { grid-area: copy; display: flex; flex-direction: column; gap: 18px; }
.article-art { grid-area: art; min-width: 0; }
.title-block { grid-area: block; align-self: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.title-block > div { border-top: 1px solid var(--ink); }
.title-block > div:nth-child(-n + 2) { border-top: 0; }
.title-block > div:nth-child(2n) { border-left: 1px solid var(--ink); }
.article-copy h1 { font-size: clamp(32px, 2.6vw + 14px, 54px); line-height: 1.02; }
.answer { font-size: 20px; line-height: 1.5; color: var(--text-2); max-width: 32em; }
.answer strong { color: var(--ink); font-weight: 650; }
.article-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.article-art > .figure, .article-art > .switcher { padding: 22px 22px 16px; border-radius: 2px; background-color: var(--sheet); background-image: var(--grain); box-shadow: var(--lift); }
@media (max-width: 900px) {
  .article-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art" "block"; grid-template-rows: none; padding-top: 18px; padding-bottom: 24px; }
  .answer { font-size: 18px; }
}
@media (max-width: 520px) {
  .article-art > .figure, .article-art > .switcher { padding: 16px 14px 12px; margin: 0 calc(var(--gutter) * -1); }
  .article-copy h1 { font-size: 30px; letter-spacing: -0.03em; }
}

/* Sections: the heading in the left margin, the one idea on the right, details folded beneath */
.band { border-top: 1px solid var(--line); }
.band.white { background-color: var(--sheet); background-image: var(--grain); }
.band.dark { background: var(--ink); color: #E8EDF1; border-top-color: var(--ink); }
.section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; row-gap: 22px; padding-top: 60px; padding-bottom: 68px; }
.section-head { display: flex; flex-direction: column; gap: 12px; align-self: start; position: sticky; top: 20px; }
.section-head h2.display { font-size: clamp(26px, 1.3vw + 16px, 36px); line-height: 1.06; font-weight: 760; }
.section-lede { color: var(--text-2); font-size: 17px; max-width: 26em; }
.section-body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.section-body > p { color: var(--text-2); max-width: 38em; }
.band.dark .section-head h2 { color: var(--white); }
.band.dark .section-lede, .band.dark .section-body > p { color: #C3CDD5; }
.band.dark a { color: var(--mint); }
.band.dark :focus-visible { outline-color: var(--mint); }
@media (max-width: 900px) { .section { grid-template-columns: minmax(0, 1fr); padding-top: 40px; padding-bottom: 44px; } .section-head { position: static; } }
.kicker { color: var(--text-3); font-weight: 600; }
.kicker.teal { color: var(--teal); }
.kicker.mint, .band.dark .kicker { color: var(--mint); }

.more { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.more summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; cursor: pointer; list-style: none; font-weight: 650; color: var(--ink); }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { color: var(--teal); }
.more-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 20px; color: var(--text-2); font-size: 16px; max-width: 42em; }
.more-body ul, .more-body ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.band.dark .more { border-color: rgba(255, 255, 255, 0.2); }
.band.dark .more summary { color: var(--white); }
.band.dark .more-body { color: #C3CDD5; }

/* A real sequence */
.seq { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--ink); }
.seq li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 16px 20px 18px 0; }
.seq-n { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--teal); border-radius: 50%; color: var(--teal); font-weight: 600; font-size: 12px; letter-spacing: 0; }
.seq h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.seq p { color: var(--text-2); font-size: 15.5px; }

/* Ledger rows: a label and a short title on the left, the text on the right */
.ledger { margin: 0; border-top: 1px solid var(--ink); }
.ledger-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 6px 28px; padding: 15px 0 16px; border-bottom: 1px solid var(--line); }
.ledger dt { display: flex; flex-direction: column; gap: 3px; font-weight: 700; font-size: 17px; line-height: 1.3; }
.ledger dt .mono { color: var(--teal); font-weight: 600; font-size: 10.5px; }
.ledger dd { margin: 0; color: var(--text-2); font-size: 15.5px; }
.ledger dd p + p, .ledger dd ol + p { margin-top: 6px; }
.ledger dd ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
@media (max-width: 620px) { .ledger-row { grid-template-columns: minmax(0, 1fr); } }
.band.dark .ledger { border-top-color: rgba(255, 255, 255, 0.4); }
.band.dark .ledger-row { border-bottom-color: rgba(255, 255, 255, 0.14); }
.band.dark .ledger dt { color: var(--white); }
.band.dark .ledger dt .mono { color: var(--mint); }
.band.dark .ledger dd { color: #C3CDD5; }

/* Tables of numbers */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--ink); }
.numbers { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.numbers caption { caption-side: bottom; padding-top: 10px; text-align: left; font-size: 14px; color: var(--text-3); }
.numbers th, .numbers td { padding: 10px 16px 10px 0; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.numbers thead th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.numbers tbody th { font-weight: 650; }
@media (max-width: 520px) { .numbers th, .numbers td { white-space: normal; padding-right: 10px; } .numbers { font-size: 14px; } }

.note-box { padding: 14px 16px; border-left: 3px solid var(--teal); background: var(--teal-wash); color: #0E4A41; font-size: 15.5px; max-width: 44em; }
.note-box.amber { border-left-color: #C99A2E; background: var(--amber-soft); color: var(--amber-ink); }
.note-box p + p { margin-top: 8px; }
.band.dark .note-box.teal { background: rgba(127, 214, 197, 0.1); color: #D5F0EA; border-left-color: var(--mint); }

/* Drawings: numbered figures, ink-line precision */
.figure { margin: 0; display: flex; flex-direction: column; gap: 10px; counter-increment: figure; }
.figure .art { width: 100%; height: auto; }
.figure figcaption { font-size: 14px; color: var(--text-3); }
.figure figcaption:not(:empty)::before { content: "Fig. " counter(figure) " · "; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.hero-scene { counter-increment: figure; }
.band.dark .figure figcaption { color: #AFBAC4; }
.band.dark .figure figcaption::before { color: var(--mint); }
.art text { font-family: var(--font-mono); letter-spacing: 0.04em; }
.art .card { fill: #DDE8E5; stroke: rgba(21, 32, 43, 0.32); stroke-width: 0.3; }
.art .card-band { fill: #A9CFC6; }
.art .card-photo { fill: #C3CED2; }
.art .card-head { fill: #93A3A9; }
.art .card-line { fill: rgba(21, 32, 43, 0.3); }
.art .card-line.dark { fill: rgba(21, 32, 43, 0.62); }
.art .card-stripe { fill: var(--table); }
.art .card-bar { fill: rgba(21, 32, 43, 0.6); }
.art .card-mask { fill: #000000; }
.art .card-digits { fill: var(--ink); font-weight: 600; }
.art .card-spec { fill: rgba(21, 32, 43, 0.22); font-weight: 600; letter-spacing: 0.22em; }
.art .card-markline { fill: rgba(11, 92, 80, 0.75); font-weight: 600; }
.art .card-bandtext { fill: rgba(21, 32, 43, 0.62); font-weight: 600; letter-spacing: 0.12em; }
.art .dim, .art .dim-lead { stroke: var(--teal); stroke-width: 0.4; fill: none; stroke-linecap: round; }
.art .dim-text, .art .callout { fill: var(--teal); font-weight: 600; }
.art .format { fill: none; stroke-width: 0.5; }
.art .format.f0 { fill: rgba(246, 196, 83, 0.16); stroke: #C99A2E; }
.art .format.f1 { fill: rgba(127, 214, 197, 0.18); stroke: #4FA896; }
.art .format.f2 { fill: #DDE8E5; stroke: var(--teal); }
.art .format-name { fill: var(--ink); font-weight: 600; }
.art .paper { fill: var(--white); stroke: var(--line-2); stroke-width: 0.5; }
.art .paper-name, .art .sheet-label { fill: var(--text-3); }
.art .glass { fill: #CFE3EC; stroke: #8FB3C2; stroke-width: 0.5; }
.art .glass-guide { stroke: var(--ink); stroke-width: 1; fill: none; }
.art .glass-zone { fill: none; stroke: var(--teal); stroke-width: 0.5; stroke-dasharray: 2 1.5; }
.art .glass-text { fill: var(--ink); font-weight: 600; }
.art .flow { stroke: var(--teal); stroke-width: 1.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.art .table { fill: var(--table); }
.art .corner-dot { fill: var(--white); stroke: var(--ring); stroke-width: 1.4; }
.art .phone { fill: var(--ink); }
.art .phone-screen { fill: #3A4652; }
.art .phone-shutter { fill: var(--white); }
.art .booklet { fill: #2F4A57; }
.art .booklet-emblem { fill: none; stroke: #C9B37A; stroke-width: 1; }
.art .booklet-text { fill: #C9B37A; font-weight: 600; letter-spacing: 0.2em; }
.art .ruler { fill: #F3E3B0; stroke: #C99A2E; stroke-width: 0.4; }
.art .ruler-tick { stroke: var(--ink); stroke-width: 0.25; fill: none; }
.art .ruler-text { fill: var(--ink); }
.art .ruler-mark { stroke: var(--teal); stroke-width: 0.6; stroke-dasharray: 1.5 1; fill: none; }
.art .number-band { fill: rgba(255, 255, 255, 0.7); stroke: rgba(21, 32, 43, 0.2); stroke-width: 0.3; }
.art .bar { fill: var(--teal); }
.art .bar.full { fill: #9FB3BE; }
.art .bar-label { fill: var(--ink); font-weight: 600; }
.art .bar-value { fill: var(--text-3); }
.art .form-line { fill: rgba(21, 32, 43, 0.18); }
.art .form-title { fill: var(--ink); font-weight: 600; }
.art .clip { fill: none; stroke: #8C98A3; stroke-width: 1.6; stroke-linecap: round; }
.art .mrz { fill: rgba(255, 255, 255, 0.55); }
.art .mrz-text { fill: var(--ink); letter-spacing: 0.06em; }
.band.dark .art .glass-text { fill: #E8EDF1; }

/* A demo without script: radio buttons pick which drawing shows (kit.ts, switcher). Without :has, all show. */
.switcher { display: flex; flex-direction: column; gap: 14px; }
.switcher .seg-group { max-width: 560px; }
.switcher .seg span { font-size: 14px; }
.switcher:has(input[value="0"]:checked) .switch-panel:not([data-panel="0"]),
.switcher:has(input[value="1"]:checked) .switch-panel:not([data-panel="1"]),
.switcher:has(input[value="2"]:checked) .switch-panel:not([data-panel="2"]),
.switcher:has(input[value="3"]:checked) .switch-panel:not([data-panel="3"]),
.switcher:has(input[value="4"]:checked) .switch-panel:not([data-panel="4"]) { display: none; }

.brand-steps { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--ink); }
.brand-steps ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.brand-steps li::marker { font-family: var(--font-mono); font-size: 13px; color: var(--teal); }
.brand-steps p:not(.kicker) { color: var(--text-2); font-size: 15.5px; }

/* Home: how it works as two drawings, and the questions */
.home-figures { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 28px; align-items: end; }
@media (max-width: 700px) { .home-figures { grid-template-columns: minmax(0, 1fr); } }
.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--ink); }
.faq summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; cursor: pointer; list-style: none; font-weight: 650; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal); }
.faq details p { padding: 0 0 18px; color: var(--text-2); max-width: 42em; }

/* Citations and the source list */
.cite { font-size: 0.7em; line-height: 0; margin-left: 1px; }
.cite a { text-decoration: none; font-weight: 700; padding: 0 2px; }
.sources { padding-top: 44px; padding-bottom: 24px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; row-gap: 12px; align-items: start; }
.sources h2 { grid-row: span 2; padding-top: 2px; }
.sources ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-3); }
.sources li { overflow-wrap: anywhere; }
.sources li::marker { font-family: var(--font-mono); font-size: 12px; color: var(--teal); }
.source-publisher { font-weight: 650; color: var(--text-2); }
.sources-note { font-size: 14px; color: var(--text-3); }
@media (max-width: 900px) { .sources { grid-template-columns: minmax(0, 1fr); } .sources h2 { grid-row: auto; } }

/* Related pages: an index, each with its address in mono */
.related { padding-top: 36px; padding-bottom: 72px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; row-gap: 12px; align-items: start; }
.related h2 { padding-top: 2px; }
.index-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.index-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.index-list a { display: flex; flex-direction: column; gap: 2px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.index-name { font-weight: 700; }
.index-path { color: var(--teal); font-size: 10.5px; overflow-wrap: anywhere; }
.index-list a:hover .index-name { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .related { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .index-list { grid-template-columns: minmax(0, 1fr); } }

/* Legal pages: one column of prose */
.prose { max-width: 760px; display: flex; flex-direction: column; gap: 16px; padding-top: 36px; padding-bottom: 72px; }
.prose h1 { font-size: clamp(32px, 2vw + 20px, 48px); line-height: 1.04; }
.prose h2 { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--font-display); font-stretch: 112%; font-weight: 760; font-size: 22px; letter-spacing: -0.015em; }
.prose p, .prose li { color: var(--text-2); }
.prose ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose .updated { font-size: 14px; color: var(--text-3); }
.lead-text { font-size: 19px; }
.prose .lead-text { color: var(--ink); }

.site-footer { border-top: 1px solid var(--ink); background-color: var(--sheet); background-image: var(--grain); }
.site-footer .wrap { display: flex; flex-direction: column; gap: 28px; padding-top: 40px; padding-bottom: 40px; font-size: 14px; color: var(--text-3); }
.footer-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.footer-title { color: var(--text-3); padding-bottom: 10px; font-weight: 600; }
.footer-group ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.footer-group a { display: inline-flex; min-height: 32px; align-items: center; color: var(--text-2); text-decoration: none; }
.footer-group a:hover, .footer-group a[aria-current] { color: var(--teal); }
.footer-notes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--seg); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .replay { display: none; } }