@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/hanken-300-700.woff2) format('woff2')}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sourcecodepro-400.woff2) format('woff2')}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/sourcecodepro-500.woff2) format('woff2')}
:root {
  --surface: #fcfdff;
  --surface-raised: #ffffff;
  --surface-sunken: #f2f4f9;
  --line: #cdd2dc;
  --line-strong: #808793;
  --ink: #222428;
  --ink-muted: #515762;
  --accent: #2338ff;
  --accent-text: #1c31ce;
  --on-accent: #ffffff;
  --accent-soft: #e3ecff;
  --highlight: #2338ff;
  --on-highlight: #ffffff;
  --focus-ring: #2338ff;
  --shadow-raised: none;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --radius-detail: 6px;
  --radius-control: 12px;
  --radius-container: 16px;
  --radius-overlay: 24px;
  --radius-full: 9999px;
  color-scheme: light;
}
.theme-cobalt {
  --surface: #2338ff;
  --surface-raised: #1e2fe6;
  --surface-sunken: #1c31ce;
  --line: #537eff;
  --line-strong: #d7e3ff;
  --ink: #ffffff;
  --ink-muted: #d7e3ff;
  --accent: #ffffff;
  --accent-text: #ffffff;
  --on-accent: #2338ff;
  --accent-soft: #1e2fe6;
  --highlight: #ffffff;
  --on-highlight: #2338ff;
  --focus-ring: #ffffff;
}
/* OpenDesigner site, light only. Colors, spacing and radius come from the brand tokens above (generated by build.py).
   Direction (owner, 2026-10-14): modern and flat, with iOS geometry: continuous rounded corners, capsule buttons and Apple's
   letter spacing by size (see the block at the end). Hairlines instead of shadows, small monospace uppercase labels.
   Two faces: Hanken Grotesk and Source Code Pro. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--surface-raised); color: var(--ink);
  font: 400 16px/24px "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
code, pre, .code, .tree code, .mono, .num, .kicker { font-family: "Source Code Pro", ui-monospace, Menlo, Consolas, monospace; }
.num { font-variant-numeric: tabular-nums; }
.kicker { font-size: 11px; line-height: 16px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 20; background: var(--surface-raised); padding: 8px 16px; border: 1px solid var(--line); }
.skip:focus { left: 16px; }
svg.arrow { width: 14px; height: 14px; flex: none; }

/* type roles */
.t-hero { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.12; font-weight: 400; letter-spacing: -0.03em; margin: 0; max-width: 24ch; text-wrap: balance; }
.t-hero strong { font-weight: 600; }
.t-h1 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.12; font-weight: 400; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.t-h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.t-h3 { font-size: 21px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 20px; }
.lede { font-size: 17px; line-height: 27px; letter-spacing: -0.005em; color: var(--ink-muted); max-width: 62ch; margin: 20px 0 0; text-wrap: pretty; }

/* top bar */
.bar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface-raised) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar-in { display: flex; align-items: center; gap: 40px; height: 60px; max-width: 1440px; margin-inline: auto; padding-inline: 24px; }
.brand { color: var(--ink); display: flex; width: 224px; flex: none; }
.lockup { height: 22px; width: auto; }
.top-nav { display: flex; gap: 24px; flex: 1; }
.top-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; }
.top-nav a:hover { color: var(--accent-text); }
.top-nav a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.gh-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); text-decoration: none; font: 500 12px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.gh-btn:hover { border-color: var(--line-strong); }
.gh-count:not(:empty) { padding-left: 8px; border-left: 1px solid var(--line); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .top-nav { gap: 16px; justify-content: flex-end; } .top-nav a:nth-child(n+3) { display: none; } .bar-in { gap: 16px; padding-inline: 16px; } .brand { width: auto; } }

/* docs shell: sidebar, content, table of contents */
.layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); max-width: 1440px; margin-inline: auto; }
.side { border-right: 1px solid var(--line); }
.side-desk { position: sticky; top: 60px; max-height: calc(100vh - 60px); overflow-y: auto; padding: 32px 24px 48px; }
.side-mobile { display: none; }
.side-group + .side-group { margin-top: 24px; }
.side-h { margin: 0 0 8px; }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side a { display: block; padding: 5px 10px; margin-inline: -10px; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 20px; }
.side a:hover { background: var(--surface-sunken); }
.side a[aria-current] { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.main { min-width: 0; padding: 40px 56px 96px; }
@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .side { border-right: 0; border-bottom: 1px solid var(--line); }
  .side-desk { display: none; }
  .side-mobile { display: block; padding: 0 24px; }
  .side-mobile summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font: 500 12px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
  .side-mobile nav { padding: 8px 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
  .side-mobile .side-group + .side-group { margin-top: 0; }
  .main { padding: 32px 24px 80px; }
}
@media (max-width: 640px) { .main { padding: 28px 16px 64px; } .side-mobile { padding: 0 16px; } }

/* buttons: flat, square, monospace label */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; font: 500 12px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer; color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-text); border-color: var(--accent-text); }
.btn.secondary { background: var(--accent-soft); }
.btn.secondary:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface-raised)); }
.btn.ghost { background: var(--surface-sunken); color: var(--ink-muted); }
.btn.ghost:hover { color: var(--ink); }
.btn.text { color: var(--accent-text); padding-inline: 8px; background: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }
.copy { font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); cursor: pointer; flex: none; }
.code { position: relative; margin: 24px 0; }
/* The copy button sits on the first line of code, its centre on the line's centre, with equal top and side insets (11 px).
   The code reserves room beside it instead of an empty band above it (owner, 2026-10-15). */
.code pre { margin: 0; padding: 16px 104px 16px 20px; background: var(--surface-sunken); border: 1px solid var(--line); overflow-x: auto; font-size: 13.5px; line-height: 22px; }
.code .copy { position: absolute; top: 11px; right: 11px; min-height: 32px; }
@media (max-width: 640px) { .code pre { padding: 16px 92px 16px 16px; } }
:not(pre) > code { font-size: 0.9em; background: var(--surface-sunken); border: 1px solid var(--line); padding: 0 5px; overflow-wrap: anywhere; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; color: var(--ink); text-decoration: none; }
.more:hover { color: var(--accent-text); }
.more svg, .intro svg, .rows svg { flex: none; }

/* photos: free Unsplash photos in a cobalt duotone */
.duo { margin: 0; }
.duo-frame { position: relative; background: var(--accent); overflow: hidden; isolation: isolate; }
.duo-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(1.04); mix-blend-mode: screen; }
.duo-glasswall img { filter: grayscale(1) contrast(1.6) brightness(0.82); }
.duo figcaption { font-size: 12px; line-height: 16px; color: var(--ink-muted); margin-top: 8px; }
.duo figcaption a { color: var(--ink-muted); }

/* landing */
.hero { padding: 16px 0 8px; }
.intro { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0 0 32px; background: var(--surface-sunken); font-size: 14px; line-height: 20px; }
.intro > span { padding: 8px 14px 8px 0; color: var(--ink-muted); flex: 1 1 220px; }
.intro-dot { width: 7px; height: 7px; flex: 0 0 7px !important; margin: 0 12px 0 14px; background: var(--ok); padding: 0 !important; }
.intro a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-left: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
.intro a:hover { color: var(--accent-text); }
.works { margin: 24px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.block { padding-top: 40px; margin-top: 56px; border-top: 1px solid var(--line); }
.block > .kicker, .block-head .kicker { display: block; margin-bottom: 12px; }
.block-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.block-head > div { min-width: 0; }
.block > .t-h2 { margin-bottom: 32px; }
@media (max-width: 640px) { .block { padding-top: 32px; margin-top: 40px; } }
.stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.stages li { border-top: 1px solid var(--line); padding-top: 16px; }
.stages .num { font-size: 12px; color: var(--ink-muted); display: block; margin-bottom: 12px; }
.stages h3 { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.stages p { color: var(--ink-muted); margin: 8px 0 0; font-size: 15px; line-height: 24px; }
@media (max-width: 900px) { .stages { grid-template-columns: 1fr; gap: 24px; } }
.roles { display: grid; gap: 0; border-top: 1px solid var(--line); }
.role { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
.role-photo .duo-frame { aspect-ratio: 1; width: 112px; }
.role-photo figcaption { display: none; }
.role-text { min-width: 0; }
.role h3 { font-size: 18px; line-height: 26px; font-weight: 500; margin: 0 0 8px; }
.role ul { margin: 0 0 12px; padding-left: 18px; color: var(--ink-muted); display: grid; gap: 6px; font-size: 15px; line-height: 24px; }
.role .more { margin: 0; }
.roles-credit { font-size: 12px; line-height: 16px; color: var(--ink-muted); margin: 10px 0 0; }
.roles-credit a { color: var(--ink-muted); }
@media (max-width: 560px) { .role { grid-template-columns: 72px 1fr; gap: 16px; } .role-photo .duo-frame { width: 72px; } }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.split .lede { margin-bottom: 28px; }
.tree { list-style: none; margin: 0; padding: 0 20px; background: var(--surface-raised); border: 1px solid var(--line); }
.tree li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.tree li:first-child { border-top: 0; }
.tree code { font-size: 13.5px; background: none; border: 0; padding: 0; }
.tree span { color: var(--ink-muted); text-align: right; font-size: 14px; }
.shot { margin: 0; }
.shot .frame { display: flex; gap: 7px; padding: 12px 14px; background: var(--surface-sunken); border: 1px solid var(--line); border-bottom: 0; }
.shot .frame span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.shot img { width: 100%; border: 1px solid var(--line); }
.shot figcaption { font-size: 12px; line-height: 16px; color: var(--ink-muted); margin-top: 10px; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-bottom: 1px solid var(--line); }
.rows li { border-top: 1px solid var(--line); }
.rows a { display: flex; align-items: center; gap: 12px; min-height: 52px; color: var(--ink); text-decoration: none; }
.rows .row-n { font-size: 12px; color: var(--ink-muted); width: 24px; flex: none; }
.rows .row-t { flex: 1; font-size: 16px; line-height: 24px; }
.rows .row-s { font-size: 12px; color: var(--ink-muted); }
.rows svg { color: var(--ink-muted); }
.rows a:hover .row-t { color: var(--accent-text); }
.rows a:hover svg { color: var(--accent-text); }
@media (max-width: 760px) { .rows { grid-template-columns: 1fr; } }
.status { list-style: none; margin: 20px 0 0; padding: 0; }
.status li { padding: 12px 0 12px 22px; border-top: 1px solid var(--line); position: relative; font-size: 15px; line-height: 24px; }
.status li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 7px; height: 7px; background: var(--accent); }

/* GitHub card */
.ghcard { padding: 24px; background: var(--surface-raised); border: 1px solid var(--line); }
.gh-top { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.gh-top a { color: var(--ink); text-decoration: none; } .gh-top svg { width: 20px; height: 20px; }
.gh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.gh-stats dt { font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.gh-stats dd { margin: 4px 0 0; font-size: 17px; line-height: 26px; font-variant-numeric: tabular-nums; font-family: "Source Code Pro", ui-monospace, monospace; }

@media (max-width: 560px) { .gh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gh-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ghcard .note { font-size: 12px; line-height: 16px; color: var(--ink-muted); margin: 16px 0 0; }

/* FAQ */
.faq { border-bottom: 1px solid var(--line); }
.qa { border-top: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3, .qa summary h2 { margin: 0; font-size: 17px; line-height: 26px; font-weight: 500; letter-spacing: -0.005em; }
.qa summary::after { content: "+"; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 18px; color: var(--ink-muted); flex: none; }
.qa[open] summary::after { content: "\2212"; }
.qa .ans { color: var(--ink-muted); padding: 0 0 20px; max-width: 70ch; }
.qa .ans p { margin: 0 0 12px; }

/* docs pages */
.doc-grid { display: grid; grid-template-columns: minmax(0, 760px) 200px; gap: 64px; justify-content: space-between; }
@media (max-width: 1240px) { .doc-grid { grid-template-columns: minmax(0, 760px); } .toc { display: none; } }
.toc { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.toc .side-h { margin-bottom: 10px; }
.toc ul { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--line); display: grid; gap: 8px; }
.toc a { color: var(--ink-muted); text-decoration: none; font-size: 13px; line-height: 20px; }
.toc a:hover { color: var(--ink); }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 20px; }
.crumb a { color: var(--ink-muted); text-decoration: none; }
.crumb a:hover { color: var(--accent-text); }
.meta { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin: 16px 0 0; }
.meta a { color: var(--ink-muted); }
.prose { margin-top: 36px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; margin: 56px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.prose h3 { font-size: 18px; line-height: 26px; font-weight: 600; margin: 32px 0 8px; }
.prose p, .prose li { font-size: 17px; line-height: 27px; }
.prose p { margin: 0 0 16px; }
.prose li { margin: 6px 0; } .prose ul, .prose ol { padding-left: 22px; margin: 0 0 16px; }
.prose li::marker { color: var(--ink-muted); }
.prose blockquote { margin: 24px 0; padding: 12px 20px; border-left: 2px solid var(--accent); }
.prose blockquote p { margin: 0; color: var(--ink); }
.prose .qa summary h2 { border: 0; padding: 0; margin: 0; font-size: 17px; }
.table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 22px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--line); }
.prose thead th { border-top: 0; background: var(--surface-sunken); font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
.prevnext a { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 500; }
.prevnext a span { font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.prevnext a:hover { border-color: var(--accent); }
.prevnext .next { text-align: right; grid-column: 2; }
@media (max-width: 560px) { .prevnext { grid-template-columns: 1fr; } .prevnext .next { grid-column: 1; } }

/* showcase: uniform tiles per category, tags, filters and the lightbox */
.page-head { padding: 16px 0 8px; max-width: 860px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.filter { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); cursor: pointer; font: 500 12px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .02em; }
.filter .num { color: var(--ink-muted); }
.filter:hover { border-color: var(--line-strong); }
.filter.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface-raised); }
.filter.is-on .num { color: color-mix(in srgb, var(--surface-raised) 70%, transparent); }
.show-cat .t-h2 { margin-bottom: 24px; }
.t-h3.sub { margin: 32px 0 16px; font-size: 16px; }
.pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 32px 24px; }
.pieces.portrait { grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }
.piece { margin: 0; min-width: 0; }
.piece-link { display: block; overflow: hidden; border: 1px solid var(--line); background: var(--surface-sunken); }
.piece-link img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border: 0; transition: transform .25s ease; }
.piece-link:hover img { transform: scale(1.015); }
.piece figcaption { display: grid; gap: 4px; margin-top: 10px; font-size: 13.5px; line-height: 20px; color: var(--ink-muted); }
.piece figcaption strong { color: var(--ink); font-weight: 500; font-size: 14px; }
.piece-meta { font-size: 12.5px; color: var(--ink-subtle, var(--ink-muted)); }
.piece-note { color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A piece with several frames: they sit side by side in its own frame. Swipe on touch; chevrons appear under a mouse or on
   keyboard focus; the dots show how many frames there are and which one is showing (the longer dot). */
.slides { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-sunken); }
.sl-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sl-track::-webkit-scrollbar { display: none; }
.slides .slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; border: 0; border-radius: 0; }
.sl-arrow { position: absolute; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .94); color: #14161c; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 2px 8px rgb(0 0 0 / .16); cursor: pointer;
  opacity: 0; transition: opacity 160ms ease, transform 160ms var(--ease-out-strong, ease-out); }
.sl-prev { left: 10px; } .sl-next { right: 10px; }
.sl-arrow:disabled { visibility: hidden; }
.sl-arrow:active { transform: scale(0.94); }
.slides:focus-within .sl-arrow { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .slides:hover .sl-arrow { opacity: 1; } }
.piece-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.piece-head strong { min-width: 0; }
.sl-dots { position: relative; flex: none; display: flex; gap: 10px; padding: 0 6px; }
.sl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .22; }
.sl-pill { position: absolute; left: 0; top: 0; width: 18px; height: 6px; border-radius: 3px; background: var(--ink); transition: transform 320ms var(--ease-out-strong, ease-out); }  /* centred on dot n by site.js: translateX(n * 16px) */
@media (prefers-reduced-motion: reduce) { .sl-pill, .sl-arrow { transition: none; } }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; color: var(--ink-muted); }
.tag.review { border-style: dashed; color: var(--warn); border-color: var(--warn); }
.lb { border: 0; padding: 0; margin: 0; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: #0c0d10; color: var(--surface-raised); }
.lb::backdrop { background: #0c0d10; }
.lb[open] { display: grid; grid-template-rows: auto 1fr; }
.lb-bar { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 14px 20px; border-bottom: 1px solid rgb(255 255 255 / .12); }
.lb-text { display: grid; gap: 2px; min-width: 0; }
.lb-title { font-size: 15px; font-weight: 500; }
.lb-blurb { font-size: 13px; line-height: 18px; color: rgb(255 255 255 / .7); }
.lb-tags { color: rgb(255 255 255 / .55); }
.lb-actions { display: flex; gap: 6px; flex: none; }
.lb-actions a, .lb-actions button { min-height: 34px; padding: 0 12px; border: 1px solid rgb(255 255 255 / .25); background: transparent; color: var(--surface-raised); font: 500 12px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }
.lb-actions a:hover, .lb-actions button:hover { background: rgb(255 255 255 / .12); }
.lb-stage { display: grid; place-items: center; padding: 20px; min-height: 0; }
.lb-img { max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; object-fit: contain; }
@media (max-width: 640px) { .lb-bar { flex-direction: column; } .lb-blurb { display: none; } .lb-stage { padding: 12px; } .lb-img { max-height: calc(100vh - 150px); } }

/* footer */
.foot { border-top: 1px solid var(--line); }
.foot-in { display: grid; grid-template-columns: 1.4fr repeat(7, minmax(0, 1fr)); gap: 32px; max-width: 1440px; margin-inline: auto; padding: 48px 24px 0; }
.foot-brand { color: var(--ink); } .foot-brand p { color: var(--ink-muted); max-width: 30ch; font-size: 14px; line-height: 20px; }
.foot-h { margin: 0 0 12px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot ul a { color: var(--ink); text-decoration: none; font-size: 14px; line-height: 20px; } .foot ul a:hover { color: var(--accent-text); text-decoration: underline; }
.foot-legal { max-width: 1440px; margin: 40px auto 0; padding: 20px 24px 32px; font-size: 12px; line-height: 18px; color: var(--ink-muted); border-top: 1px solid var(--line); }
@media (max-width: 1100px) { .foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-in { grid-template-columns: 1fr 1fr; padding-inline: 16px; } .foot-legal { padding-inline: 16px; } }

/* Reduced motion means gentler, not none (house standard STD-accessibility-motion-02): movement stops, short fades and color
   changes stay. Each moving thing has its own reduced rule (here, home.css, craft.css, deco.css). */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .piece-link img { transition: none; } .piece-link:hover img { transform: none; } }

/* stickers: die-cut labels, as if printed and stuck on the page: a thick white margin, a hairline edge, a small shadow and a slight tilt.
   Owner request 2026-10-14: stickers instead of tags. Each color carries a meaning (see the showcase legend), never decoration. */
.sticker { --st-bg: var(--accent); --st-fg: var(--on-accent); --tilt: -2deg;
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 4px; white-space: nowrap;
  font: 700 12px/16px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: .01em; text-transform: none;
  color: var(--st-fg); background-color: var(--st-bg); background-image: linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / 0) 62%);
  border: 3px solid #fff; border-radius: 999px;
  box-shadow: 0 0 0 1px rgb(20 21 23 / .14), 0 1px 1px rgb(20 21 23 / .14), 0 5px 10px -3px rgb(20 21 23 / .32);
  transform: rotate(var(--tilt)); }
.sticker:nth-child(4n+2) { --tilt: 1.5deg; } .sticker:nth-child(4n+3) { --tilt: -1deg; } .sticker:nth-child(4n) { --tilt: 2.5deg; }
.sticker.ink { --st-bg: var(--ink); --st-fg: #fff; }
.sticker.paper { --st-bg: #fff; --st-fg: var(--ink); box-shadow: 0 0 0 1px rgb(20 21 23 / .22), inset 0 0 0 1px var(--line), 0 5px 10px -3px rgb(20 21 23 / .28); }
.sticker.lime { --st-bg: #d4f53c; --st-fg: #1a2200; }
.sticker.sky { --st-bg: #cfe0ff; --st-fg: #12205e; }
.sticker.pink { --st-bg: #ffc6e3; --st-fg: #4d0d2f; }
.sticker.lg { font-size: 14px; line-height: 18px; padding: 5px 14px 6px; border-width: 4px; }
.stickers { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; padding: 4px 2px; }
@media (prefers-reduced-motion: reduce) { .sticker { transform: none; } }
.doc-stickers { margin: 0 0 18px; }
.legend { margin-top: 18px; gap: 10px 8px; }
.legend .kicker { margin-right: 6px; }

/* hero command, team checks, start cards */
.cmd { display: flex; align-items: center; gap: 12px; margin-top: 16px; max-width: 640px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); background: var(--surface-sunken); min-width: 0; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: none; border: 0; padding: 0; font-size: 13px; }
@media (max-width: 560px) { .cmd .kicker { display: none; } }
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.checks strong { color: var(--ink); font-weight: 500; }
.check { width: 18px; height: 18px; margin-top: 3px; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2L9.5 3.6' fill='none' stroke='%231c31ce' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat; }
.starts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.start { position: relative; display: grid; gap: 6px; align-content: start; padding: 20px 20px 44px; color: var(--ink); text-decoration: none; border-right: 1px solid var(--line); min-width: 0; }
.start:last-child { border-right: 0; }
.start strong { font-size: 17px; line-height: 24px; font-weight: 500; }
.start > span:not(.kicker) { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.start svg { position: absolute; left: 20px; bottom: 18px; color: var(--ink-muted); }
.start:hover { background: var(--surface-sunken); }
.start:hover strong, .start:hover svg { color: var(--accent-text); }
@media (max-width: 1100px) { .starts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .start:nth-child(2) { border-right: 0; } .start:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .starts { grid-template-columns: 1fr; } .start { border-right: 0; border-bottom: 1px solid var(--line); } .start:last-child { border-bottom: 0; } }
@media (max-width: 560px) { .intro a { flex: 1 0 100%; border-left: 0; border-top: 1px solid var(--line); } }


/* iOS geometry and letter spacing. Owner, 2026-10-14: "use iOS style rounded edges with iOS kerning everywhere instead of sharp corners".
   Radii are the brand tokens (6 / 12 / 16 / 24) with capsules for buttons; where the browser supports it, corners are continuous
   (corner-shape: squircle), drawn a little larger because a squircle reads smaller than a circle of the same radius.
   Letter spacing follows Apple's SF Pro tracking table by size (HIG, Typography, iOS tracking values, in 1/1000 em):
   11 +6 · 12 0 · 13 -6 · 14 -11 · 15 -16 · 16 -20 · 17 -26 · 18 -25 · 20 -23 · 21 -18 · 22 -12 · 24 +3 · 28 +14 · 32 +13 · 34 +12 · 40 +10 · 48 +8 · 56 +6.
   Monospace keeps its own spacing. */
:root { --r-detail: var(--radius-detail); --r-control: var(--radius-control); --r-card: var(--radius-container); --r-panel: var(--radius-overlay); --r-pill: 999px; }
@supports (corner-shape: squircle) { :root { --r-detail: 8px; --r-control: 16px; --r-card: 22px; --r-panel: 32px; } }

body { letter-spacing: -0.02em; }
code, pre, .mono, .num, .code, .tree code { letter-spacing: 0; }
.t-hero { letter-spacing: 0.008em; } .t-hero strong { letter-spacing: inherit; }
.t-h1 { letter-spacing: 0.01em; }
.t-h2 { letter-spacing: 0.008em; }
.t-h3 { letter-spacing: -0.018em; } .t-h3.sub { letter-spacing: -0.02em; }
.lede, .prose p, .prose li, .start strong, .qa summary h2, .qa summary h3, .prose .qa summary h2 { letter-spacing: -0.026em; }
.prose h2 { letter-spacing: 0; }
.prose h3, .role h3 { letter-spacing: -0.025em; }
.stages h3 { letter-spacing: -0.023em; }
.stages p, .role ul, .more, .status li, .checks li, .lb-title { letter-spacing: -0.016em; }
.rows .row-t { letter-spacing: -0.02em; }
.side a, .top-nav a, .start > span:not(.kicker), .tree span, .intro, .works, .foot ul a, .foot-brand p, .piece figcaption strong { letter-spacing: -0.011em; }
.toc a, .meta, .piece figcaption, .lb-blurb, .duo figcaption, .shot figcaption, .roles-credit { letter-spacing: -0.006em; }
.foot-legal { letter-spacing: 0; }

/* controls in the iOS manner: capsules, sentence case, semibold */
.btn { font: 600 15px/20px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.016em; text-transform: none; border-radius: var(--r-pill); padding: 0 20px; }
.gh-btn { font: 600 14px/20px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.011em; text-transform: none; border-radius: var(--r-pill); }
.copy { font: 600 13px/18px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.006em; text-transform: none; border-radius: var(--r-pill); padding: 0 12px; }
.filter { font: 500 13px/18px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.006em; border-radius: var(--r-pill); padding: 0 12px; }
.lb-actions a, .lb-actions button { font: 600 13px/18px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.006em; text-transform: none; border-radius: var(--r-pill); }
.crumb { font: 500 13px/18px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.006em; text-transform: none; }
.side-mobile summary { font: 600 15px/20px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.016em; text-transform: none; }
.skip, .intro { border-radius: var(--r-pill); overflow: hidden; }
.intro-dot, .status li::before, .check { border-radius: 50%; }

/* surfaces */
.cmd, .side a, .side-mobile nav a { border-radius: var(--r-control); }
.cmd { padding-left: 16px; }
:not(pre) > code { border-radius: var(--r-detail); }
.code pre, .tree, .prevnext a, .table-wrap, .piece-link, .duo-frame, .lb-img { border-radius: var(--r-card); }
.ghcard, .starts { border-radius: var(--r-panel); overflow: hidden; }
.shot .frame { border-radius: var(--r-panel) var(--r-panel) 0 0; }
.shot img { border-radius: 0 0 var(--r-panel) var(--r-panel); }
.role-photo .duo-frame { border-radius: var(--r-card); }
@supports (corner-shape: squircle) {
  .cmd, .side a, :not(pre) > code, .code pre, .tree, .prevnext a, .table-wrap, .piece-link, .duo-frame, .lb-img, .ghcard, .starts, .shot .frame, .shot img { corner-shape: squircle; }
}
@media (max-width: 560px) { .intro { border-radius: var(--r-card); } }

/* stickers, round 2 (owner, 2026-10-14): straight in rows; a single sticker sits tilted on a container's corner, like a real one;
   every sticker carries a small graphic, and each kind has its own shape and type within the site's two faces. */
.stickers .sticker, .legend .sticker { transform: none; }
.sticker::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.sticker:not([data-icon])::before { display: none; }
.sticker[data-icon="building"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14V3h7v11M10 7h3v7M1.5 14h13M5.5 5.5h2M5.5 8.5h2M5.5 11.5h2'/%3E%3C/svg%3E"); }
.sticker[data-icon="person"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5' r='2.6'/%3E%3Cpath d='M3 14c.6-2.8 2.6-4.3 5-4.3s4.4 1.5 5 4.3'/%3E%3C/svg%3E"); }
.sticker[data-icon="brush"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 2.5 7.5 8.5'/%3E%3Cpath d='M7.2 8.8c-1.6-.3-3.3.6-3.6 2.4-.2 1.2-.7 1.9-1.6 2.3 2.7.9 5.6.3 6-2.2.1-.9-.3-1.9-.8-2.5z'/%3E%3C/svg%3E"); }
.sticker[data-icon="tag"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2.5h6l6 6-5.5 5.5-6-6z'/%3E%3Ccircle cx='5.2' cy='5.7' r='.9'/%3E%3C/svg%3E"); }
.sticker[data-icon="wrench"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 2.2a3.2 3.2 0 0 0-3.4 4.4L2.6 11.1a1.5 1.5 0 0 0 2.1 2.1l4.5-4.5a3.2 3.2 0 0 0 4.4-3.4l-2 2-1.9-.4-.4-1.9z'/%3E%3C/svg%3E"); }
.sticker[data-icon="layers"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2 14 5 8 8 2 5z'/%3E%3Cpath d='M2 8l6 3 6-3M2 11l6 3 6-3'/%3E%3C/svg%3E"); }
.sticker[data-icon="play"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.2v9.6L12.5 8z'/%3E%3C/svg%3E"); }
.sticker[data-icon="compass"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M10.4 5.6 9 9 5.6 10.4 7 7z'/%3E%3C/svg%3E"); }
.sticker[data-icon="bulb"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5h4M6.5 14.5h3M5.2 10c-1-1-1.7-2.2-1.7-3.6a4.5 4.5 0 0 1 9 0c0 1.4-.7 2.6-1.7 3.6-.4.4-.6 1-.6 1.6H5.8c0-.6-.2-1.2-.6-1.6z'/%3E%3C/svg%3E"); }
.sticker[data-icon="book"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5c1.8-.6 3.8-.6 5.5.6 1.7-1.2 3.7-1.2 5.5-.6v9.5c-1.8-.6-3.8-.6-5.5.6-1.7-1.2-3.7-1.2-5.5-.6z'/%3E%3Cpath d='M8 4.1v9.5'/%3E%3C/svg%3E"); }
.sticker[data-icon="check"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E"); }
.sticker[data-icon="cross"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E"); }
/* kinds: audience is a pill in the bold face; a style is an ink pill in monospace capitals; an industry is a paper label with a tag mark */
.sticker.ink { font: 600 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.sticker.paper { border-radius: 8px; font-weight: 600; }
/* status stickers stuck on the corner of a showcase tile */
.piece { position: relative; }
.piece-stuck { position: absolute; top: -10px; right: -8px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.piece-stuck .sticker { transform: rotate(4deg); font: 600 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; }
.piece-stuck .sticker + .sticker { transform: rotate(-3deg); margin-right: 10px; }
/* the docs page's section sticker, stuck on the page header */
.doc { position: relative; }
.doc-stickers { position: absolute; top: -6px; right: 0; margin: 0; }
.doc-stickers .sticker { transform: rotate(5deg); }
@media (max-width: 640px) { .doc-stickers { position: static; margin: 0 0 14px; } .doc-stickers .sticker { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .piece-stuck .sticker, .doc-stickers .sticker { transform: none; } }
@media (max-width: 400px) { .top-nav a:nth-child(n+2) { display: none; } }
@media (max-width: 420px) { .bar-in { gap: 12px; } .gh-btn > span:not(.gh-count) { display: none; } .gh-btn { padding: 0 10px; } }

/* Press feedback (house standard from Emil Kowalski's work): pressable things scale to 0.97 on press, 160 ms ease-out. */
.btn, .copy, .gh-btn, .filter, .tablist [role="tab"], .lb-actions button { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.btn:active, .copy:active, .gh-btn:active, .filter:active, .tablist [role="tab"]:active, .lb-actions button:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .btn:active, .copy:active, .gh-btn:active, .filter:active, .tablist [role="tab"]:active, .lb-actions button:active { transform: none; } }

/* No widows (owner, 2026-10-15: "the word 'it' is always on the next line"). Headings and short centred lines balance their lines;
   paragraphs, list items and captions avoid a lone last word. site/check_layout.py check 9 measures it at every width. */
h1, h2, h3, h4, .t-hero, .t-h1, .t-h2, .t-h3, .h-title, .h-h2, .h-h3, .h-end-lede, .h-cmd-label, figcaption, .kicker { text-wrap: balance; }
p, li, dd, .lede, .h-lede, .prose p, .prose li { text-wrap: pretty; }
/* short card text balances (Chrome's "pretty" leaves some lone last words); long captions use "pretty", which works past six lines */
.bento-card > p, .who-card > p, .craft-card > p, .h-step > p { text-wrap: balance; }
.fig > figcaption { text-wrap: pretty; }
@media (max-width: 380px) { .t-h1 { font-size: 28px; } }
/* Phone audit, 2026-10-15: commands wrap instead of scrolling under the Copy button; inline code keeps its chip on every line it wraps to. */
.code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Code never splits inside a word (build.py code_html marks each word). The Copy button keeps its room on the first lines only,
   and a wrapped line is indented so it reads as the same line (phone audit, 2026-10-15). */
code .w { white-space: nowrap; }
.code pre { padding-right: 16px; overflow-wrap: normal; text-indent: 2ch hanging each-line; }
.code pre::before { content: ""; float: right; width: 80px; height: 28px; }
/* Showcase on phones: the stamp stays inside the screen; the tag filters scroll in one row instead of five */
@media (max-width: 640px) {
  .piece-stuck { right: 4px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .filters::-webkit-scrollbar { display: none; }
  .filters .filter { flex: none; }
}
:not(pre) > code { -webkit-box-decoration-break: clone; box-decoration-break: clone; overflow-wrap: break-word; }
/* Figure kit: illustrations drawn in code from the brand tokens (site/figures/*.html, inlined by build.py as {{figure:name}}).
   Three frames: .fig-panel (dot grid), .fig-scene (a free Unsplash photo with film grain, a card floating on it) and .dodont.
   Numbers and labels inside figures are monospace; text is the brand face. Status colors below are the only colors not in tokens.json. */
:root { --ok: #1a6b3a; --ok-soft: #e4f3e8; --warn: #8a5300; --warn-soft: #fff2d6; --bad: #a32d2d; --bad-soft: #fde7e7; }
.fig { margin: 32px 0; }
.fig > figcaption { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin-top: 12px; }
.fig > figcaption a { color: var(--ink-muted); }
.mono, .num, .kicker { font-family: "Source Code Pro", ui-monospace, Menlo, monospace; }
.num { font-variant-numeric: tabular-nums; }
.kicker { font-size: 11px; line-height: 16px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; }

/* frames */
.fig-panel { position: relative; overflow: hidden; border: 1px solid var(--line); padding: 28px; background-color: var(--surface);
  }
.fig-scene { grid-template-columns: minmax(0, 1fr); position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-detail); background: var(--accent) center / cover no-repeat; padding: 48px 24px; display: grid; place-items: center; min-height: 340px; }
.fig-scene::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.fig-scene > * { position: relative; z-index: 2; }
@media (max-width: 640px) { .fig-panel { padding: 16px; } .fig-scene { padding: 32px 16px; min-height: 280px; } }

/* the floating product card, as in a dashboard widget */
.fig-card { width: 100%; max-width: 440px; background: var(--surface-raised); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--radius-detail); overflow: hidden;
  box-shadow: 0 1px 2px rgb(20 21 23 / .08), 0 24px 48px -24px rgb(20 21 23 / .4); }
.fig-card.wide { max-width: 640px; }
.fig-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.fig-card-b { padding: 16px; }
.fig-card-f { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.fig-card .big { font-size: 28px; line-height: 36px; letter-spacing: -.01em; }
.menu-dots { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--radius-detail); display: grid; place-items: center; color: var(--ink); font-size: 14px; letter-spacing: 1px; }

/* chips and tags */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 8px; font-family: "Source Code Pro", ui-monospace, monospace; letter-spacing: .02em; border-radius: var(--radius-detail); font-size: 12px; line-height: 16px; font-weight: 500; background: var(--surface-sunken); color: var(--ink-muted); white-space: nowrap; }
.chip.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.accent { background: var(--accent-soft); color: var(--accent-text); }
.chip.ink { background: var(--ink); color: var(--surface-raised); }
.tag-missing { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-detail); font-size: 12px; line-height: 16px; color: var(--ink-muted); background: var(--surface-raised); }

/* do / don't comparisons */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dodont > div { border: 1px solid var(--line); border-radius: var(--radius-detail); background: var(--surface-raised); padding: 16px; min-width: 0; }
.dd-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; line-height: 20px; margin: 0; }
.dd-h { flex-wrap: wrap; }
.dd-h::before { display: inline-flex; align-items: center; padding: 2px 10px 3px; border: 3px solid #fff; border-radius: 999px; font: 700 12px/16px "Hanken Grotesk", system-ui, sans-serif; box-shadow: 0 0 0 1px rgb(20 21 23 / .14), 0 4px 8px -3px rgb(20 21 23 / .3); transform: rotate(-2deg); flex: none; }
.do .dd-h { color: var(--ink); }
.do .dd-h::before { content: "Do"; background: #d4f53c; color: #1a2200; }
.dont .dd-h { color: var(--ink); }
.dont .dd-h::before { content: "Don\2019 t"; background: #ffc6e3; color: #4d0d2f; transform: rotate(1.5deg); }
.dd-why { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 6px 0 14px; }
.dd-art { border: 1px solid var(--line); border-radius: var(--radius-detail); background: var(--surface-sunken); padding: 14px; overflow: hidden; }
@media (max-width: 640px) { .dodont { grid-template-columns: 1fr; } }

/* annotated diagrams: numbered markers on the art, explained in a legend */
.ann-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .ann-grid { grid-template-columns: 1fr; } }
.ann-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 600 12px/1 "Source Code Pro", ui-monospace, monospace; box-shadow: 0 0 0 3px var(--surface-raised); }
.ann-dot.abs { position: absolute; z-index: 2; }
.ann-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ann-legend li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px; line-height: 20px; }
.ann-legend strong { font-weight: 600; }
.ann-legend span { color: var(--ink-muted); }

/* flows: boxes joined by arrows, horizontal on desktop and vertical on phones */
.flow { display: flex; align-items: stretch; gap: 8px; }
.flow-box { flex: 1; min-width: 0; display: grid; gap: 4px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-detail); background: var(--surface-raised); font-size: 14px; line-height: 20px; }
.flow-box.accent { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.flow-box.card { display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; }
.flow-box.card > .fig-card-f { margin-top: auto; }
.flow-box .kicker { margin-bottom: 2px; }
.flow-arrow { flex: none; align-self: center; width: 20px; height: 20px; color: var(--line-strong); }
@media (max-width: 640px) { .flow { flex-direction: column; } .flow-arrow { transform: rotate(90deg); margin-inline: auto; } }

/* the landing hero: the interview card with the engine's output beside it */
.hero-fig { margin: 48px 0 0; }
.hero-fig .fig-scene { padding: 40px 32px; min-height: 460px; }
.hero-comp { display: flex; gap: 20px; align-items: flex-start; justify-content: center; width: 100%; max-width: 900px; }
.hero-side { display: grid; gap: 16px; width: 340px; flex: none; margin-top: 36px; }
.hero-side .code-lines { font-size: 12px; line-height: 20px; padding: 12px 14px; }
.shape-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.opt { display: grid; gap: 6px; justify-items: center; padding: 12px 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-detail); background: var(--surface); font-size: 13px; line-height: 18px; }
.opt.is-rec { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.opt-art { width: 56px; height: 36px; background: var(--accent); display: block; }
.opt-l { font-weight: 500; } .opt-s { font-size: 12px; color: var(--ink-muted); }
.rec { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 14px; font-size: 14px; line-height: 20px; }
/* Narrow: one column, every card on the same centre line and the same width as the question card (owner caught an off-axis pair, 2026-10-15). */
.hero-fig .fig-scene { container-type: inline-size; }
@media (max-width: 900px) { .hero-fig .fig-scene { padding: 24px 16px; } }
@container (max-width: 880px) { .hero-comp { flex-direction: column; align-items: center; } .hero-comp > .fig-card, .hero-side .fig-card { width: 100%; min-width: 0; max-width: 540px !important; } .hero-side { width: 100%; max-width: 540px; margin: 0; grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .shape-opts { grid-template-columns: repeat(2, 1fr); } }

/* small pieces of real UI used inside figures */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-detail); font-size: 14px; font-weight: 500; background: var(--accent); color: var(--on-accent); }
.ui-btn.secondary { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line-strong); }
.ui-input { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-detail); background: var(--surface-raised); font-size: 14px; color: var(--ink-muted); }
.ui-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.swatch { display: inline-block; width: 28px; height: 28px; border-radius: var(--radius-detail); border: 1px solid rgb(0 0 0 / .08); }
.ramp { display: flex; gap: 3px; }
.ramp span { flex: 1; height: 28px; border-radius: 4px; }
.fig-bar { height: 8px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; }
.fig-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; line-height: 20px; }
.kv dt { color: var(--ink-muted); } .kv dd { margin: 0; }
.rule { border-top: 1px dashed var(--line); margin: 12px 0; }
.fig table.mini { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 18px; }
.fig table.mini th, .fig table.mini td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line); }
.fig table.mini thead th { border-top: 0; font-weight: 600; color: var(--ink-muted); }
.code-lines { margin: 0; padding: 12px 14px; font-size: 12.5px; line-height: 20px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-detail); overflow-x: auto; white-space: pre; }
/* Code inside a figure wraps instead of scrolling: a figure never shows its own scrollbar. */
.fig .code-lines { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
.code-lines .c { color: var(--ink-muted); } .code-lines .k { color: var(--accent-text); } .code-lines .bad { color: var(--bad); } .code-lines .ok { color: var(--ok); }

/* inside a docs page: the prose styles stop at the figure's edge */
.prose .fig p { font-size: 14px; line-height: 20px; margin: 0; }
.prose .fig .dd-why { margin: 6px 0 14px; }
.prose .fig ul, .prose .fig ol { margin: 0; padding-left: 18px; }
.prose .fig li { font-size: 14px; line-height: 20px; margin: 2px 0; }
.prose .fig .ann-legend { padding-left: 0; }
.prose .fig .ann-legend li { margin: 0; }
.ann-legend .ann-dot { color: var(--on-accent); }
.fig-card-f .chip, .fig-card-b .chip { white-space: normal; height: auto; }


/* iOS geometry for figures (see the iOS block at the end of site.css): concentric corners, capsules for chips and buttons */
.fig-panel { border-radius: var(--r-card); }
.fig-scene { border-radius: var(--r-panel); }
.fig-card { border-radius: var(--r-card); }
.fig-card-h { border-radius: 0; }
.chip, .ui-btn, .fig-bar, .fig-bar > span, .tag-missing { border-radius: var(--r-pill); }
.ui-input, .opt, .flow-box, .dd-art, .code-lines, .dodont > div { border-radius: var(--r-control); }
.dodont > div { border-radius: var(--r-card); }
.swatch, .ramp span { border-radius: var(--r-detail); }
.fig p, .fig li, .fig span, .fig strong, .fig div { letter-spacing: inherit; }
.fig { letter-spacing: -0.011em; }
.fig .kicker { letter-spacing: .07em; }
.fig .mono, .fig .num, .fig code, .fig pre, .fig .code-lines, .fig .chip { letter-spacing: 0; }
@supports (corner-shape: squircle) {
  .fig-panel, .fig-scene, .fig-card, .ui-input, .opt, .flow-box, .dd-art, .code-lines, .dodont > div, .swatch { corner-shape: squircle; }
}

/* do / don't: one sticker per panel, stuck on its corner, with a check or a cross (owner, 2026-10-14) */
.dodont > div { position: relative; padding-top: 22px; }
.dd-h::before { position: absolute; top: -12px; left: 12px; padding-left: 22px; background-repeat: no-repeat; background-position: 8px 50%; background-size: 11px; }
.do .dd-h::before { background-repeat: no-repeat; background-position: 8px 50%; background-size: 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a2200' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E"); transform: rotate(-3deg); }
.dont .dd-h::before { background-repeat: no-repeat; background-position: 8px 50%; background-size: 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234d0d2f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E"); transform: rotate(2.5deg); }
.dd-h { gap: 0; }

/* Layout checker findings, 2026-10-15: long paths and file names wrap inside small boxes and chips instead of spilling or being cut;
   a grid of 8 cards splits evenly (4 + 4, or 2 per row) instead of leaving a partial last row. */
.fig .mono, .fig code, .flow-box, .dd-art span { overflow-wrap: anywhere; }
.fig .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.fig-panel { container-type: inline-size; }
.grid-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 760px) { .grid-even { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 360px) { .grid-even { grid-template-columns: minmax(0, 1fr); } }

/* Do and Don't panels: the drawing fills the panel, so both grey boxes end on one line (alignment audit, 2026-10-15). */
.dodont > div { display: flex; flex-direction: column; }
.dodont .dd-art { flex: 1; }
/* Phone audit, 2026-10-15: a chip never breaks inside a word ("Defaul / t"); only chips marked .wrap (long file names) may wrap. */
.fig .chip { white-space: nowrap; overflow-wrap: normal; }
.fig .chip.wrap { white-space: normal; overflow-wrap: anywhere; }
.tag-missing { white-space: nowrap; }
/* the small status tables stack on phones: the status sits under its row's text, not squeezed beside it */
@media (max-width: 560px) {
  table.mini, table.mini tbody, table.mini tr, table.mini td { display: block; }
  table.mini thead { display: none; }
  table.mini tr { padding: 12px 0; border-top: 1px solid var(--line); }
  table.mini td { border: 0 !important; padding: 0 !important; }
  table.mini td + td { margin-top: 8px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Phone audit, 2026-10-15 (internal pages). Measured at 320, 375, 390 and 430 px with a phone profile.
   --------------------------------------------------------------------------------------------------------------- */
/* Small text in a figure is 12 px or more (figures/README.md): the kicker grows from 11 to 12 px inside figures. */
.fig .kicker { font-size: 12px; line-height: 16px; }
/* Labels and short keys never break inside a word ("CORNER / S", "compos / e"); only names in .mono and code may. */
.fig .kicker, .fig .kv dt { overflow-wrap: normal; }
/* A word or token in .nw stays whole: a flag never splits as "-" / "-why", a name never at its hyphen ("radius-" / "8);"). */
.fig .nw { white-space: nowrap; }
/* The interview card's suggestion: on a phone the chip sits above its reason instead of beside a 130 px column. */
@media (max-width: 480px) { .rec { grid-template-columns: minmax(0, 1fr); gap: 8px; } .rec > .chip { justify-self: start; } }
/* The parts-of-a-system drawing (design-systems-parts.html): under 314 px of panel, its labels and markers grow back to 12 px or more. */
@container (max-width: 313px) {
  .fig svg.dsp-art .lbl, .fig svg.dsp-art .lbl-g text { font-size: 17px; }
  .fig svg.dsp-art .mk circle { r: 14px; }
  .fig svg.dsp-art .mk text { font-size: 16px; }
}
/* A swatch row (accessibility-contrast.html): swatch, name and ratio on one row; in a narrow panel the ratio moves under the name. */
.fig .ct-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
@container (max-width: 300px) {
  .fig .ct-row { grid-template-columns: 56px minmax(0, 1fr); }
  .fig .ct-row > :first-child { grid-row: span 2; }
  .fig .ct-row > .chip { justify-self: start; }
}
/* Token tiers (design-tokens-tiers.html): the tier name sits beside its token on wide panels and above it on phones. */
.fig .tier { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; }
.fig .tier > .kicker { grid-row: span 2; }
@container (max-width: 420px) { .fig .tier { grid-template-columns: minmax(0, 1fr); } .fig .tier > .kicker { grid-row: auto; } }
/* Stacked Do and Don't panels on phones: room for the next panel's sticker, so it never touches the panel above. */
@media (max-width: 640px) { .dodont { gap: 28px; } }
:root{--ok:#00652c;--ok-soft:#ebf7ed;--warn:#845d00;--warn-soft:#f8f4ec;--bad:#a82321;--bad-soft:#fff1ef;}
/* The home page (/): what OpenDesigner is, why, how, examples and install. Built on the same tokens, radii and tracking as the
   docs (site.css), without the docs sidebar. Owner, 2026-10-15: the root is the project's landing page; the docs home moved to /docs/. */
.home { overflow-x: clip; }
.h-hero, .h-sec, .h-end { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .h-hero, .h-sec, .h-end { padding-inline: 16px; } }

/* hero */
.h-hero { padding-top: 72px; text-align: center; }
.h-flag { margin: 0 0 28px; display: flex; justify-content: center; }
.h-flag .sticker { transform: rotate(-3deg); }
.h-title { font-size: clamp(38px, 6.2vw, 76px); line-height: 1.04; font-weight: 400; letter-spacing: -0.01em; margin: 0 auto; max-width: 15em; text-wrap: balance; }
.h-title strong { font-weight: 600; }
.h-lede { font-size: 19px; line-height: 30px; letter-spacing: -0.024em; color: var(--ink-muted); max-width: 62ch; margin: 24px auto 0; text-wrap: pretty; }
.h-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.btn.lg { min-height: 52px; padding: 0 26px; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; }
.btn.text svg { width: 18px; height: 18px; }
.h-cmd { margin: 20px auto 0; text-align: left; }
.h-works { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 22px; margin: 28px auto 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); letter-spacing: -0.016em; }
@media (max-width: 640px) { .h-hero { padding-top: 40px; } .h-lede { font-size: 17px; line-height: 27px; } .h-works { gap: 6px 14px; font-size: 14px; } }

/* hero illustration: three cards on a photo, answer to rules to a built card */
.home-hero { margin: 56px 0 0; text-align: left; }
.home-hero .fig-scene { padding: 56px 40px; min-height: 0; place-items: start center; }
.home-hero > figcaption { text-align: center; max-width: 72ch; margin-inline: auto; }
.hh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 1080px; align-items: start; }
.hh .fig-card { max-width: none; }
.hh-file { margin-top: 40px; }
.hh-ui { margin-top: 80px; }
.hh-q { margin: 0 0 14px; font-size: 16px; line-height: 23px; font-weight: 500; letter-spacing: -0.02em; }
.hh-you { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 14px; }
.hh-bubble { background: var(--accent); color: var(--on-accent); padding: 7px 12px; border-radius: 16px 16px 4px 16px; font-size: 15px; line-height: 20px; font-weight: 500; }
.hh-answers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hh-answers li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.hh-answers .kicker { width: 64px; flex: none; }
.hh-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: none; }
.hh-file .code-lines { border: 0; border-radius: 0; background: var(--surface-raised); font-size: 12.5px; }
.hh-md { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; letter-spacing: -0.011em; }
.hh-md .kicker { display: block; margin-bottom: 4px; }
.hh-app { padding: 16px; background: var(--x-bg); color: var(--x-text); }
.hh-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hh-title { font-size: 17px; line-height: 22px; font-weight: 650; }
.hh-pill { background: var(--x-soft); color: var(--x-soft-text); border-radius: var(--x-r); padding: 2px 8px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.hh-sub { margin: 4px 0 0; color: var(--x-muted); font-size: 14px; line-height: 20px; }
.hh-amt { margin: 12px 0 8px; font-size: 24px; line-height: 30px; font-weight: 650; letter-spacing: 0; }
.hh-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--x-sep); font-size: 14px; line-height: 20px; }
.hh-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.hh-btn { display: inline-flex; align-items: center; height: var(--x-h); padding: 0 12px; border: 1px solid var(--x-border); border-radius: var(--x-r); background: var(--x-raised); font-size: 14px; font-weight: 500; white-space: nowrap; }
.hh-btn.primary { background: var(--x-primary); border-color: var(--x-primary); color: var(--x-on); }
@media (max-width: 960px) {
  .home-hero .fig-scene { padding: 24px 14px; }
  .hh { grid-template-columns: minmax(0, 1fr); max-width: 480px; gap: 14px; }
  .hh-file, .hh-ui { margin-top: 0; }
}

/* sections */
.h-sec { padding-top: 128px; }
@media (max-width: 640px) { .h-sec { padding-top: 88px; } }
.h-head { max-width: 780px; margin-bottom: 44px; }
.h-head .h-lede, .h-split .h-lede { margin: 16px 0 0; text-align: left; font-size: 18px; line-height: 28px; }
.h-head-row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.h-head-row > div { max-width: 780px; }
.h-h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; font-weight: 400; letter-spacing: 0.008em; margin: 12px 0 0; text-wrap: balance; }
.h-sec .fig { margin: 0; }
.h-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.h-split .tree { margin-top: 28px; }
@media (max-width: 1100px) { .h-split { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.h-fine { margin: 16px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); letter-spacing: -0.006em; }
.h-fine a { color: var(--ink-muted); }
.h-exports { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 20px 0 0; }
.h-exports .kicker { margin-right: 6px; }

/* how it works: four step cards, each with a small real-looking vignette */
.h-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.h-step { display: flex; flex-direction: column; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); min-width: 0; }
.h-n { font-size: 12px; line-height: 16px; color: var(--accent-text); font-weight: 500; }
.h-step h3 { margin: 14px 0 8px; font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -0.023em; }
.h-step p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); letter-spacing: -0.016em; }
.h-step .vg { margin-top: auto; padding-top: 24px; }
@media (max-width: 1100px) { .h-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .h-steps { grid-template-columns: minmax(0, 1fr); } }
.vg-files, .vg-qs { list-style: none; margin: 0; padding: 4px 12px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-control); font-size: 13px; line-height: 18px; }
.vg-files li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.vg-files li:first-child, .vg-qs li:first-child { border-top: 0; }
.vg-files .mono { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vg-qs { counter-reset: q; }
.vg-qs li { counter-increment: q; display: flex; gap: 8px; padding: 7px 8px; margin-inline: -8px; border-top: 1px solid var(--line); }
.vg-qs li::before { content: counter(q); font-family: "Source Code Pro", ui-monospace, monospace; color: var(--ink-muted); width: 12px; flex: none; }
.vg-qs li.on { background: var(--accent-soft); color: var(--accent-text); border-radius: var(--r-detail); font-weight: 500; border-top-color: transparent; }
.vg-qs li.on + li { border-top-color: transparent; }
.vg-term { background: var(--surface-raised); font-size: 12px; line-height: 19px; white-space: pre-wrap; }
.h-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 16px 0 0; padding: 14px 22px; border: 1px solid var(--line); border-radius: var(--r-card); font-size: 15px; line-height: 22px; color: var(--ink-muted); letter-spacing: -0.016em; }
.h-zoom strong { color: var(--ink); font-weight: 500; }
.h-zoom .more { margin-left: auto; }
@media (max-width: 640px) { .h-zoom .more { margin-left: 0; } }

/* tabs (demo and install). Without the script every panel shows, one after another. */
[role="tabpanel"][hidden] { display: none; }
.tablist { display: flex; flex-wrap: wrap; gap: 8px; }
.tablist [role="tab"] { cursor: pointer; font: 600 14px/20px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.011em; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-pill); min-height: 40px; padding: 0 16px; }
.tablist [role="tab"]:hover { border-color: var(--line-strong); }
.tablist [role="tab"][aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface-raised); }
.demo-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.demo-tabs [role="tab"] { display: grid; gap: 2px; text-align: left; padding: 14px 18px; border-radius: var(--r-card); min-height: 0; }
.demo-tabs [role="tab"] strong { font-size: 17px; line-height: 22px; letter-spacing: -0.026em; }
.demo-tabs [role="tab"] span { font-weight: 400; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.demo-tabs [role="tab"][aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.demo-tabs [role="tab"][aria-selected="true"] span { color: var(--accent-text); }
@media (max-width: 760px) { .demo-tabs { grid-template-columns: minmax(0, 1fr); } }
.demo-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; margin-top: 16px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
@media (max-width: 960px) { .demo-panel { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 24px; } }
.demo-answers dl { margin: 10px 0 24px; }
.demo-answers dl > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); align-items: baseline; }
.demo-answers dt { font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.demo-answers dd { margin: 0; font-size: 15px; line-height: 22px; letter-spacing: -0.016em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.demo-values dd { font-family: "Source Code Pro", ui-monospace, monospace; font-size: 14px; letter-spacing: 0; }
.demo-note { margin: 0; padding: 12px 14px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-control); font-size: 14px; line-height: 21px; color: var(--ink-muted); letter-spacing: -0.011em; }
.demo-stage { display: grid; place-items: center; padding: 40px 24px; border-radius: var(--r-card); border: 1px solid var(--line); min-width: 0;
  background: var(--surface-sunken) radial-gradient(circle, color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.2px) 0 0 / 16px 16px; }
@media (max-width: 640px) { .demo-stage { padding: 20px 12px; } .demo-answers dl > div { grid-template-columns: 104px minmax(0, 1fr); } }

/* the example card: every value comes from the example's own tokens (--x-*) */
.x-card { width: 100%; max-width: 400px; background: var(--x-raised); color: var(--x-text); border: 1px solid var(--x-sep); border-radius: var(--x-rc); padding: calc(var(--x-inset) * 2); font-size: var(--x-body); line-height: 1.45; letter-spacing: 0;
  box-shadow: 0 1px 2px rgb(20 21 23 / .06), 0 18px 40px -24px rgb(20 21 23 / .35); }
.x-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.x-title { font-size: var(--x-title); line-height: 1.25; font-weight: var(--x-wh); }
.x-chip { background: var(--x-soft); color: var(--x-soft-text); border-radius: var(--x-r); padding: 2px 8px; font-size: var(--x-label); line-height: 1.4; font-weight: 500; white-space: nowrap; }
.x-sub { margin: 4px 0 0; color: var(--x-muted); }
.x-big { margin: 14px 0 6px; font-size: var(--x-headline); line-height: 1.15; font-weight: var(--x-wh); }
.x-field { display: grid; gap: 6px; margin: 16px 0 8px; }
.x-field > span:first-child { font-size: var(--x-label); font-weight: 500; }
.x-input { display: flex; align-items: center; height: var(--x-h); padding: 0 12px; border: 1px solid var(--x-border); border-radius: var(--x-r); background: var(--x-raised); }
.x-hint { font-size: var(--x-label); color: var(--x-muted); }
.x-rows { margin-top: 8px; }
.x-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--x-sep); }
.x-rows > div > span:last-child { color: var(--x-muted); }
.x-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.x-btn { display: inline-flex; align-items: center; justify-content: center; height: var(--x-h); padding: 0 14px; border: 1px solid var(--x-border); border-radius: var(--x-r); background: var(--x-raised); font-weight: 500; white-space: nowrap; }
.x-btn.primary { background: var(--x-primary); border-color: var(--x-primary); color: var(--x-on); }
.x-card .num, .hh-app .num { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* inside: a bento of cards */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bento-card { display: flex; flex-direction: column; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); min-width: 0; }
.bento-card.span-2 { grid-column: span 2; }
.bento-card h3 { margin: 0 0 8px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.025em; }
.bento-card p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); letter-spacing: -0.016em; }
.bento-card .vg { margin-top: auto; padding-top: 20px; }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento-card.span-2 { grid-column: auto; } }
.vg-log { padding: 12px 14px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-control); }
.vg-log p { margin: 0 0 8px; color: var(--ink); }
.vg-log p:last-child { margin: 0; }
.vg-log .mono { font-size: 13px; }
.bento-card .vg-why { font-size: 14px; line-height: 21px; color: var(--ink); }
.vg-floor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vg-aa { display: grid; place-items: center; width: 52px; height: 40px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-control); font-size: 22px; font-weight: 600; }
.vg-target { width: 24px; height: 24px; border: 1.5px dashed var(--accent); border-radius: var(--r-detail); background: var(--accent-soft); }
.vg-floor .num { font-size: 15px; }
.bento-card p.vg-lock, .bento-card p.vg-from { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--ink); }
.vg-lock .mono { font-size: 14px; margin-right: 4px; }
.bento-card .vg-big { margin: 0; font-size: 64px; line-height: 64px; font-weight: 300; color: var(--accent-text); letter-spacing: 0; }
.bento-card .stickers { padding: 2px 0; }

/* showcase strip */
.ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.ex { color: var(--ink); text-decoration: none; min-width: 0; }
.ex-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-sunken); }
.ex-img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .25s ease; }
.ex:hover .ex-img img { transform: scale(1.015); }
.ex-cap { display: flex; gap: 8px; align-items: baseline; margin-top: 10px; font-size: 14px; line-height: 20px; letter-spacing: -0.011em; }
.ex-cap strong { font-weight: 600; }
.ex-cap span { color: var(--ink-muted); }
@media (max-width: 900px) { .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ex-grid { grid-template-columns: minmax(0, 1fr); } }

/* who it's for */
.who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.who-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-panel); color: var(--ink); text-decoration: none; background: var(--surface-raised); }
.who-card:hover { border-color: var(--accent); }
.who-card h3 { margin: 0 0 8px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.025em; }
.who-card p { margin: 0 0 20px; font-size: 15px; line-height: 23px; color: var(--ink-muted); letter-spacing: -0.016em; }
.who-card .more { margin-top: auto; font-size: 14px; }
.who-card:hover .more { color: var(--accent-text); }
@media (max-width: 1100px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .who { grid-template-columns: minmax(0, 1fr); } }

/* install */
.inst-panel { margin-top: 20px; max-width: 860px; }
.inst-panel > p { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink-muted); letter-spacing: -0.02em; }
.inst-panel .code { margin: 16px 0; }
.inst-panel .code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.inst-then { font-weight: 500; color: var(--ink) !important; }

/* the closing panel: a card on a photo */
.h-end { margin-top: 128px; }
.h-end-photo { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: 96px 24px; border-radius: var(--r-panel); background: var(--accent) center 72% / cover no-repeat; }
.h-end-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.h-end-card { width: 100%; max-width: 640px; padding: 40px; text-align: center; background: var(--surface-raised); border-radius: var(--r-panel);
  box-shadow: 0 1px 2px rgb(20 21 23 / .1), 0 30px 60px -30px rgb(20 21 23 / .5); }
.h-end-card .h-h2 { margin-bottom: 24px; }
.h-end-card .cmd { margin-inline: auto; text-align: left; }
.h-end-card .h-cta { margin-top: 20px; }
.h-credit { margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.h-credit a { color: var(--ink-muted); }
@media (max-width: 640px) { .h-end-photo { padding: 40px 12px; } .h-end-card { padding: 28px 18px; } }
.home + .foot { margin-top: 96px; }

/* continuous corners where supported */
@supports (corner-shape: squircle) {
  .h-step, .demo-panel, .demo-stage, .demo-tabs [role="tab"], .bento-card, .ex-img, .who-card, .h-end-photo, .h-end-card, .vg-files, .vg-qs, .vg-log, .h-zoom, .x-card { corner-shape: squircle; }
}

/* sub-blocks inside a section */
.h-h3 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.012em; }
.h-sub { margin: 64px 0 28px; }
.h-files { margin-top: 64px; }
.h-files .h-lede { font-size: 17px; line-height: 27px; }

/* learn the craft: four guide cards, each with a small vignette */
.craft { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.craft-card { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface-raised); color: var(--ink); text-decoration: none; }
.craft-card:hover { border-color: var(--accent); }
.craft-card h3 { margin: 16px 0 6px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.025em; }
.craft-card p { margin: 0 0 16px; font-size: 15px; line-height: 23px; color: var(--ink-muted); letter-spacing: -0.016em; }
.craft-card .more { margin-top: auto; font-size: 14px; }
.craft-card:hover .more { color: var(--accent-text); }
.craft-card .vg { position: relative; display: block; height: 96px; border-radius: var(--r-card); background: var(--surface-sunken); overflow: hidden; }
.craft-card .vg i { position: absolute; display: block; }
@media (max-width: 1100px) { .craft { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .craft { grid-template-columns: minmax(0, 1fr); } }
/* motion: one dot glides out with a strong ease-out, the others show the track */
.craft-motion .vg i { left: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--line-strong); }
.craft-motion .vg i:nth-child(1) { top: 20px; } .craft-motion .vg i:nth-child(2) { top: 41px; background: var(--accent); } .craft-motion .vg i:nth-child(3) { top: 62px; }
/* plays only while the card is hovered or focused: nothing loops while people read */
.craft-card:hover .vg i:nth-child(2), .craft-card:focus-visible .vg i:nth-child(2) { animation: craft-glide 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
@keyframes craft-glide { 0%, 12% { transform: translateX(0); opacity: 1; } 55%, 80% { transform: translateX(160px); opacity: 1; } 92% { transform: translateX(160px); opacity: 0; } 100% { transform: translateX(0); opacity: 0; } }
/* ux: a do card and a don't card */
.craft-ux .vg i { top: 18px; width: calc(50% - 24px); height: 60px; border-radius: var(--r-control); background: var(--surface-raised); border: 1px solid var(--line); }
.craft-ux .vg i:nth-child(1) { left: 16px; box-shadow: inset 0 -14px 0 var(--ok-soft); }
.craft-ux .vg i:nth-child(2) { right: 16px; box-shadow: inset 0 -14px 0 var(--bad-soft); }
.craft-ux .vg i:nth-child(3) { display: none; }
/* ui: nested radius, inner = outer minus padding */
.craft-ui .vg i:nth-child(1) { inset: 16px 24px; border-radius: 20px; background: var(--surface-raised); border: 1px solid var(--line); }
.craft-ui .vg i:nth-child(2) { inset: 28px 36px; border-radius: 8px; background: var(--accent-soft); }
.craft-ui .vg i:nth-child(3) { display: none; }
/* resources: a short reading list */
.craft-res .vg i { left: 20px; height: 8px; border-radius: 4px; background: var(--line-strong); }
.craft-res .vg i:nth-child(1) { top: 26px; width: 58%; background: var(--accent); } .craft-res .vg i:nth-child(2) { top: 44px; width: 72%; } .craft-res .vg i:nth-child(3) { top: 62px; width: 46%; }
@media (prefers-reduced-motion: reduce) { .craft-motion .vg i:nth-child(2) { animation: none; transform: translateX(160px); } }
@supports (corner-shape: squircle) { .craft-card, .craft-card .vg { corner-shape: squircle; } }

/* where it runs: each tool's own mark (Simple Icons, CC0) with its name; two products share a mark, so names stay */
.h-works { display: grid; justify-items: center; gap: 14px; margin: 32px auto 0; }
.h-works .kicker { margin: 0; }
.hosts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.hosts li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 22px; letter-spacing: -0.016em; color: var(--ink); }
.hosts .logo { color: var(--ink); flex: none; }
@media (max-width: 640px) { .hosts { gap: 10px 18px; } .hosts li { font-size: 14px; } }
.tablist [role="tab"] { display: inline-flex; align-items: center; gap: 6px; }
.tablist [role="tab"] .logo { flex: none; }
.tablist [role="tab"] .logo + .logo { margin-left: -2px; }
[role="tabpanel"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--r-card); }
.hh-bubble { display: inline-flex; align-items: center; gap: 8px; }
.hh-bubble .hh-sw { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .8); }
/* the closing panel never grows wider than the phone */
.h-end-photo { grid-template-columns: minmax(0, 640px); justify-content: center; }
.h-end-card { min-width: 0; }
.h-end-lede { margin: 0 auto; max-width: 40ch; font-size: 17px; line-height: 26px; color: var(--ink-muted); letter-spacing: -0.026em; }
.h-files { align-items: center; }
.bento-card .vg-big { font-size: 48px; line-height: 48px; }

/* hero, round 2 (Mobbin study 2026-10-15: GitBook and Hex announcement pills, incident.io and Charma integration tiles) */
.h-announce { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; margin: 0 0 28px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-raised); font-size: 14px; line-height: 20px; letter-spacing: -0.011em; }
.h-pill-tag { padding: 4px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.h-announce a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 12px; color: var(--ink); text-decoration: none; font-weight: 500; }
.h-announce a:hover { color: var(--accent-text); }
.hosts li { flex-direction: column; gap: 8px; width: 92px; text-align: center; font-size: 13px; line-height: 18px; color: var(--ink-muted); letter-spacing: -0.006em; }
.host-tile { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); box-shadow: 0 1px 2px rgb(20 21 23 / .05); }
.hosts { gap: 16px 8px; }
@media (max-width: 640px) { .hosts li { width: 76px; } .host-tile { width: 44px; height: 44px; border-radius: 12px; } }
@supports (corner-shape: squircle) { .host-tile { corner-shape: squircle; } }
/* the cards rise toward the result: the built screen is the largest and the highest */
.hh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.hh-ask { margin-top: 72px; }
.hh-file { margin-top: 36px; }
.hh-ui { margin-top: 0; box-shadow: 0 2px 4px rgb(20 21 23 / .1), 0 40px 80px -32px rgb(20 21 23 / .55); }
@media (max-width: 960px) { .hh { grid-template-columns: minmax(0, 1fr); } .hh-ask, .hh-file, .hh-ui { margin-top: 0; } }
.hh-bubble { background: var(--ink); color: #fff; }
.hh-bubble .hh-sw { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .9); }
.hosts li { width: auto; min-width: 84px; white-space: nowrap; }
@media (max-width: 640px) {
  .hosts { gap: 14px 0; }
  .hosts li { width: 25%; min-width: 0; white-space: normal; font-size: 12px; line-height: 16px; }
  .h-announce { border-radius: var(--r-card); }
}

/* hero, round 3 (owner, 2026-10-15): one primary action, one quiet secondary link, the command as a third, labelled option.
   GitHub lives in the header only. */
.h-cta { align-items: center; gap: 12px 28px; }
.h-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.h-link:hover { color: var(--accent-text); }
.h-link svg { transform: rotate(45deg); }
.h-cmd-wrap { display: grid; justify-items: center; gap: 8px; margin-top: 32px; }
.h-cmd-label { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); letter-spacing: -0.006em; }
.h-cmd-wrap .h-cmd { margin: 0; width: 100%; max-width: 560px; }
/* the three hero cards: equal columns, one top edge, one height; each card's last block sits on the bottom edge */
.hh { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.hh-ask, .hh-file, .hh-ui { margin-top: 0; display: flex; flex-direction: column; }
.hh-ui { box-shadow: 0 1px 2px rgb(20 21 23 / .08), 0 24px 48px -24px rgb(20 21 23 / .4); }
.hh .fig-card-h { min-height: 49px; box-sizing: border-box; }
.hh-ask .fig-card-b { flex: 1; }
.hh-file .hh-md { flex: 1; }
.hh-ui .hh-app { flex: 1; display: flex; flex-direction: column; }
.hh-ui .hh-actions { margin-top: auto; padding-top: 14px; }
@media (max-width: 960px) { .hh { grid-template-columns: minmax(0, 1fr); } }
.h-files { align-items: start; }
.home-hero .fig-scene { padding: 40px; }
@media (max-width: 1100px) { .hh { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 16px; } }
@media (max-width: 640px) { .home-hero .fig-scene { padding: 16px; } }

/* Motion (owner, 2026-10-15: "use the Emil Kowalski skill to introduce motion to the landing page"). House standards from his
   work: a purpose for every movement, strong ease-out curves, transform and opacity only, nothing from scale(0), stagger 30-80 ms,
   no animation on keyboard actions, hover gated to fine pointers, and reduced motion means gentler, not none. */
:root { --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); }
/* 1. The hero arrives once, in reading order, then its three cards explain the flow: answer, rules, screen. CSS only, so it never
      waits for the script, and `both` keeps each piece hidden until its turn. */
@keyframes h-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.h-announce, .h-title, .h-hero > .h-lede, .h-cta, .h-cmd-wrap { animation: h-rise 640ms var(--ease-out-strong) both; }
.h-title { animation-delay: 60ms; } .h-hero > .h-lede { animation-delay: 120ms; } .h-cta { animation-delay: 180ms; } .h-cmd-wrap { animation-delay: 240ms; }
/* 1b. The headline acts out what it says: its letters arrive loosely spaced and settle together (site.js, "gather"). Until the
       script takes over, the title waits hidden; if the script never runs, it rises on its own at 1.2 s. */
@media (prefers-reduced-motion: no-preference) { .h-title.g-wait { animation-delay: 1200ms; } }
.g-w { white-space: nowrap; }
.g-c { display: inline-block; }
.home-hero .fig-scene { animation: h-fade 800ms var(--ease-out-strong) 200ms both; }
@keyframes h-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes h-card { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.hh > .fig-card { animation: h-card 700ms var(--ease-out-strong) both; }
.hh > .hh-ask { animation-delay: 420ms; } .hh > .hh-file { animation-delay: 540ms; } .hh > .hh-ui { animation-delay: 660ms; }
/* 2. Sections reveal once as they scroll in (site.js adds .reveal-wait only to content below the fold). Transitions, so a fast
      scroll can interrupt and retarget them. */
.reveal-wait { opacity: 0; transform: translateY(12px); }
.home .reveal { transition: opacity 600ms var(--ease-out-strong), transform 600ms var(--ease-out-strong); transition-delay: calc(var(--i, 0) * 50ms); }
/* 3. Link cards lift a little under a mouse, never on touch. */
@media (hover: hover) and (pointer: fine) {
  .who-card, .craft-card, .ex { transition: transform 200ms var(--ease-out-strong), border-color 200ms ease; }
  .who-card:hover, .craft-card:hover, .ex:hover { transform: translateY(-2px); }
}
/* 4. A tab panel fades in when clicked (not when chosen with the arrow keys: keyboard actions stay instant). */
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
[role="tabpanel"].is-entering { animation: panel-in 220ms var(--ease-out-strong); }
/* Reduced motion: no movement; the hero and the reveals only fade, and quickly. */
@media (prefers-reduced-motion: reduce) {
  .h-announce, .h-title, .h-hero > .h-lede, .h-cta, .h-cmd-wrap, .hh > .fig-card, .home-hero .fig-scene { animation: h-fade 200ms ease both; animation-delay: 0ms; }
  .reveal-wait { transform: none; }
  .home .reveal { transition: opacity 200ms ease; transition-delay: 0ms; }
  .who-card:hover, .craft-card:hover, .ex:hover { transform: none; }
  [role="tabpanel"].is-entering { animation: h-fade 150ms ease; }
}

/* Screens on photos (owner, 2026-10-15): every product screen sits in a rounded container with a photo and grain, inside a soft
   glass bezel, like the hero. One component for the real screens, the overview page and the examples. */
.stage { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: clamp(16px, 4.5%, 56px);
  border-radius: var(--r-panel); background: var(--accent) center / cover no-repeat; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .26; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.stage-in { position: relative; z-index: 2; width: 100%; padding: 6px; border-radius: 18px; background: rgb(255 255 255 / .34);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), 0 2px 4px rgb(10 14 40 / .12), 0 32px 64px -28px rgb(10 14 40 / .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.stage-in img, .stage-in picture { display: block; width: 100%; height: auto; border-radius: 12px; }
@supports (corner-shape: squircle) { .stage, .stage-in, .stage-in img { corner-shape: squircle; } }
.shot.staged { margin: 0; }
.shot.staged figcaption { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.shot.staged figcaption a { color: var(--ink-muted); }
/* real screens: one large, two below, on one grid so every outer edge lines up */
.screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.screen { margin: 0; min-width: 0; }
.screen.big { grid-column: 1 / -1; }
.screen.big .stage { padding: clamp(16px, 5%, 72px); }
.screen figcaption { display: flex; gap: 8px; align-items: baseline; margin-top: 12px; font-size: 15px; line-height: 22px; letter-spacing: -0.016em; }
.screen figcaption strong { font-weight: 600; }
.screen figcaption span { color: var(--ink-muted); }
@media (max-width: 760px) { .screens { grid-template-columns: minmax(0, 1fr); } }
/* the examples' card on a photo too */
.demo-stage { background-color: var(--accent); background-position: center; background-size: cover; border: 0; position: relative; isolation: isolate; overflow: hidden; }
.demo-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .26; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.demo-stage .x-card { position: relative; z-index: 1; box-shadow: 0 2px 4px rgb(10 14 40 / .12), 0 32px 64px -28px rgb(10 14 40 / .6); }

/* Alignment and hierarchy audit, 2026-10-15 (measured at 390-1920 px) */
/* 1. the header and footer share the sections' 1200 px content edges on the home page */
body:has(> main.home) :is(.bar-in, .foot-in, .foot-legal) { max-width: 1200px; }
/* 2. step cards: title, text and vignette rows line up across the row */
.h-steps { grid-auto-rows: auto; }
.h-step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.h-step h3 { margin: 14px 0 8px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.025em; }
.h-step .vg { margin-top: 0; padding-top: 24px; display: flex; }
.h-step .vg > * { flex: 1; }
/* 3. example tabs: name over description */
.tablist.demo-tabs [role="tab"] { display: grid; align-content: start; gap: 2px; }
/* 4. hero cards: each card's last block sits on its bottom edge */
.hh-ask .fig-card-b { display: flex; flex-direction: column; }
.hh-answers { margin-top: auto; }
/* 6. kickers take no browser margin */
.home p.kicker { margin: 0; }
/* 7. heading rows line up on the text's baseline */
.h-head-row { align-items: last baseline; }
/* 8. a clear type step: h2 48, sub-heading 30, card titles 18 */
.h-h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; font-weight: 400; letter-spacing: 0.006em; }
/* 9. line lengths and widows */
.h-head .h-lede, .h-split .h-lede { max-width: 54ch; }
.h-sec .fig > figcaption, .h-fine { max-width: 72ch; }
.h-step h3, .bento-card h3, .who-card h3, .craft-card h3 { text-wrap: balance; }
.h-step p, .bento-card p, .who-card p, .craft-card p { text-wrap: pretty; }
/* consistency: one padding, one fill and nested radii (inner = outer - inset) for every card */
.craft-card { padding: 24px; }
.h-step, .bento-card, .demo-panel, .who-card, .craft-card { background: var(--surface-raised); }
.h-step .vg > *, .bento-card .vg > *, .craft-card .vg, .demo-stage { border-radius: var(--r-detail); }
.hosts li { width: 96px; min-width: 0; white-space: normal; }
.tablist:not(.demo-tabs) [role="tab"][aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.h-split .status { margin-top: 44px; }
.tree li { align-items: baseline; }
@media (max-width: 400px) { .demo-stage { padding: 12px 8px; } .x-card { padding: var(--x-inset); } }

/* the headline keeps three lines or fewer down to 320 px (widow check) */
@media (max-width: 380px) { .h-title { font-size: 33px; line-height: 1.08; } }
.piece figcaption span, .screen figcaption { text-wrap: balance; }

/* booking (owner, 2026-10-15: a free 20-minute intro call; paid sessions later, no prices yet) and the contribution links */
.nav-book { font: 600 14px/20px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.011em; color: var(--ink); text-decoration: none; padding: 8px 4px; }
.nav-book:hover { color: var(--accent-text); }
.bar-in { gap: 24px; } .bar-in .top-nav { flex: 1; }
@media (max-width: 720px) { .nav-book { display: none; } }
.h-book { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding: 40px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface-raised); }
.h-book .h-lede { margin-top: 16px; }
.h-book-act { display: grid; justify-items: start; gap: 12px; }
@media (max-width: 860px) { .h-book { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; } }
.h-soon { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.h-contrib { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 20px 0 0; font-size: 15px; line-height: 22px; letter-spacing: -0.016em; }
.h-contrib a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }
.h-contrib a:hover { color: var(--accent-text); }
.h-end-card .h-cta { gap: 12px 24px; }
/* the /book page */
.h-first { padding-top: 56px; }
.book-title { max-width: 18ch; margin-top: 8px; }
.book-lede { margin-top: 16px !important; }
.book-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; margin: 40px 0 20px; align-items: stretch; }
@media (max-width: 860px) { .book-grid { grid-template-columns: minmax(0, 1fr); } }
.book-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface-raised); }
.book-card.later { background: var(--surface-sunken); }
.book-card h2 { margin: 12px 0 8px; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: 0.003em; }
.book-card > p { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink-muted); letter-spacing: -0.02em; }
.book-dl { margin: 20px 0 24px; border-top: 1px solid var(--line); }
.book-dl > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.book-dl dt { font: 500 11px/18px "Source Code Pro", ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.book-dl dd { margin: 0; font-size: 15px; line-height: 22px; letter-spacing: -0.016em; }
@media (max-width: 560px) { .book-dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.book-act { margin-top: auto; }
.book-card .h-soon { margin-top: auto; }
@supports (corner-shape: squircle) { .h-book, .book-card { corner-shape: squircle; } }
/* text blocks in a section share one left edge (the hero's centred lede margin must not leak into left-aligned sections) */
.h-sec .h-lede, .h-book .h-lede { margin-left: 0; margin-right: 0; }
.hosts li { width: auto; min-width: 96px; white-space: nowrap; padding-inline: 4px; }
@media (max-width: 640px) { .hosts li { width: auto; min-width: 88px; } }
/* Opposite actions sit as far apart as the row allows, the secondary on the left and the primary on the right, on one row
   at every width (owner, 2026-10-15: "maximum distance between two opposite CTAs so that there is no wrong action"). */
.x-actions, .hh-actions { justify-content: space-between; flex-wrap: nowrap; }
.x-btn, .hh-btn { height: auto; min-height: var(--x-h); padding-block: 6px; white-space: normal; text-align: center; line-height: 1.2; }
@media (max-width: 640px) {
  .demo-panel { padding: 16px; }
  .demo-stage { padding: 20px 8px; }
  .h-pill-tag { display: none; }  /* the announcement stays one line on phones */
  .h-announce a { padding: 4px 8px; }
}
/* a button label never wraps; at the smallest phones the large buttons and booking cards tighten instead */
.btn { white-space: nowrap; }
@media (max-width: 380px) { .btn.lg { padding: 0 18px; font-size: 15px; } .book-card { padding: 20px; } }
/* The craft guide (Craft section of the docs): live motion, UX and UI examples. Figures in site/figures/craft-*.html.
   Every demo is CSS only. Its motion values are the house standards' (skills/opendesigner/references/standards/), named next to it.
   Loops animate transform and opacity only, pause while their figure is hovered or focused, and rest on their end state when the
   reader asks for reduced motion: the base styles are the end states, and the keyframes start from the hidden state.
   Small drawn interfaces use shadow rings instead of solid borders (STD-visual-details-14); windows clip with contain: paint. */

.cr {
  --cr-out: cubic-bezier(0.23, 1, 0.32, 1);
  --cr-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --cr-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --cr-ring: color-mix(in srgb, var(--ink) 13%, transparent);
  --cr-lift: 0 0 0 1px var(--cr-ring), 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ink) 34%, transparent);
}
.cr .dd-art { overflow: visible; }

/* labels, the pause hint and the reduced-motion note */
.cr-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font: 400 12px/16px "Source Code Pro", ui-monospace, Menlo, monospace; letter-spacing: 0; color: var(--ink-muted); }
.cr-meta > * { min-width: 0; overflow-wrap: anywhere; }
.cr-meta b { font-weight: 500; color: var(--ink); }
.cr-meta.stack { flex-direction: column; align-items: flex-start; }
.cr-stage { position: relative; display: grid; gap: 12px; min-width: 0; border-radius: var(--r-control); }
.cr-stage:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.cr-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.cr-hint { display: inline-flex; align-items: center; gap: 8px; }
.cr-hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.cr-hint-paused, .cr-rm { display: none; }
.cr:is(:hover, :focus-within) .cr-loop { animation-play-state: paused; }
.cr:is(:hover, :focus-within) .cr-hint::before { background: var(--warn); }
.cr:is(:hover, :focus-within) .cr-hint-play { display: none; }
.cr:is(:hover, :focus-within) .cr-hint-paused { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .cr .cr-loop { animation: none !important; }
  .cr .cr-hint { display: none; }
  .cr .cr-rm { display: inline; }
}

/* small pieces of drawn interface */
.cr-ui { font-size: 14px; line-height: 20px; color: var(--ink); }
.cr-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface-raised); box-shadow: 0 0 0 1px var(--cr-ring); font-weight: 600; font-size: 13px; line-height: 18px; color: var(--ink); white-space: nowrap; }
.cr-pill.solid { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.cr-pill.danger { background: var(--bad); color: var(--on-accent); box-shadow: none; }
.cr-pop { background: var(--surface-raised); border-radius: var(--r-control); box-shadow: var(--cr-lift); }
.cr-win { position: relative; border-radius: var(--r-control); background: var(--surface-raised); box-shadow: 0 0 0 1px var(--cr-ring); contain: paint; }
.cr-skel { display: grid; gap: 8px; padding: 14px; }
.cr-skel i { display: block; height: 8px; border-radius: 4px; background: var(--surface-sunken); }
.cr-skel i:nth-child(1) { width: 46%; height: 10px; background: color-mix(in srgb, var(--ink) 14%, var(--surface-sunken)); }
.cr-skel i:nth-child(2) { width: 88%; } .cr-skel i:nth-child(3) { width: 72%; } .cr-skel i:nth-child(4) { width: 80%; } .cr-skel i:nth-child(5) { width: 56%; }
.cr-center { display: grid; justify-items: center; }

/* 1. the easing race: three dots cross one track in the same time */
.cr-lane { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.cr-lane:first-child { border-top: 0; padding-top: 0; }
.cr-lane:last-child { padding-bottom: 0; }
.cr-lane-b { display: grid; gap: 10px; min-width: 0; }
.cr-curve { width: 44px; height: 44px; display: block; }
.cr-curve .ax { fill: none; stroke: var(--line); stroke-width: 1.5; }
.cr-curve .ln { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.cr-track { position: relative; height: 16px; container-type: inline-size; }
.cr-track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: var(--line); }
.cr-track::after { content: ""; position: absolute; right: 0; top: 0; width: 2px; height: 16px; border-radius: 1px; background: var(--line-strong); }
.cr-dot { position: absolute; left: 0; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: currentColor; transform: translateX(calc(100cqw - 14px)); }
.cr-dot.cr-loop { animation: cr-race 2.4s var(--cr-ease) infinite; }
@keyframes cr-race {
  0% { transform: translateX(0); opacity: 1; }
  41.67%, 80% { transform: translateX(calc(100cqw - 14px)); opacity: 1; }
  88% { transform: translateX(calc(100cqw - 14px)); opacity: 0; }
  89% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* 2-4. a trigger and the menu it opens: duration, scale(0) and origin */
.cr-scene { position: relative; height: 158px; }
.cr-trigger { width: 64px; }
.cr-menu { position: absolute; top: 40px; left: 0; width: 164px; padding: 4px; display: grid; gap: 2px; transform-origin: 32px -6px; }
.cr-menu > span { padding: 6px 10px; border-radius: var(--r-detail); font-size: 14px; line-height: 20px; white-space: nowrap; }
.cr-menu > .on { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.cr-menu.o-center { transform-origin: center; }
.cr-origin { position: absolute; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 1px var(--surface-raised); pointer-events: none; }
.cr-origin::after { content: ""; position: absolute; left: 5px; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cr-d180 { animation: cr-d180 2.4s var(--cr-out) infinite; }
.cr-d400 { animation: cr-d400 2.4s var(--cr-out) infinite; }
@keyframes cr-d180 { 0% { opacity: 0; transform: scale(0.95); } 7.5%, 70% { opacity: 1; transform: none; } 77.5%, 100% { opacity: 0; transform: scale(0.95); } }
@keyframes cr-d400 { 0% { opacity: 0; transform: scale(0.95); } 16.67%, 70% { opacity: 1; transform: none; } 86.67%, 100% { opacity: 0; transform: scale(0.95); } }
.cr-zero { animation: cr-zero 2.4s var(--cr-out) infinite; }
.cr-soft { animation: cr-soft 2.4s var(--cr-out) infinite; }
@keyframes cr-zero { 0% { transform: scale(0); } 8.33%, 70% { transform: none; } 78.33%, 100% { transform: scale(0); } }
@keyframes cr-soft { 0% { opacity: 0; transform: scale(0.95); } 8.33%, 70% { opacity: 1; transform: none; } 78.33%, 100% { opacity: 0; transform: scale(0.95); } }
.cr-grow { animation: cr-grow 3s var(--cr-out) infinite; }
@keyframes cr-grow { 0% { opacity: 0; transform: scale(0.9); } 20%, 65% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; transform: scale(0.9); } }

/* 5. press feedback and hold to confirm (real buttons) */
.cr-press-art { display: grid; justify-items: center; gap: 14px; padding: 22px 14px 16px; }
.cr-btn { appearance: none; border: 0; margin: 0; min-height: 44px; padding: 0 22px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font: 600 15px/20px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.016em; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cr-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cr-btn.pressable { transition: transform 160ms var(--cr-out); }
.cr-btn.pressable:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .cr-btn.pressable:active { transform: none; background: var(--accent-text); } }
.cr-hold { position: relative; background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent); }
.cr-hold-fill { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--bad); color: var(--on-accent); clip-path: inset(0 100% 0 0); pointer-events: none; }
.cr-hold.snappy { transition: transform 160ms var(--cr-out); }
.cr-hold.snappy .cr-hold-fill { transition: clip-path 200ms var(--cr-out); }
.cr-hold.snappy:active .cr-hold-fill { transition: clip-path 2s linear; clip-path: inset(0 0 0 0); }
.cr-hold.even .cr-hold-fill { transition: clip-path 2s linear; }
.cr-hold.even:active .cr-hold-fill { clip-path: inset(0 0 0 0); }
.cr-hold:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  /* the fill is a progress bar the person holds, not movement: it keeps its timing; the press scale gives way to color */
  .cr .cr-hold.snappy .cr-hold-fill { transition: clip-path 200ms var(--cr-out) !important; }
  .cr .cr-hold.snappy:active .cr-hold-fill, .cr .cr-hold.even .cr-hold-fill { transition: clip-path 2s linear !important; }
  .cr-hold:active { transform: none; }
}

/* 6. toasts: in and out along one edge */
.cr-toastwin { height: 136px; }
.cr-toast { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 10px 14px; border-radius: var(--r-control); background: var(--surface-raised); box-shadow: var(--cr-lift); font-size: 14px; line-height: 20px; white-space: nowrap; }
.cr-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.cr-t-same { animation: cr-t-same 3s var(--cr-out) infinite; }
.cr-t-away { animation: cr-t-away 3s var(--cr-out) infinite; }
@keyframes cr-t-same { 0% { opacity: 0; transform: translateY(calc(100% + 12px)); } 10%, 70% { opacity: 1; transform: none; } 78.33%, 100% { opacity: 0; transform: translateY(calc(100% + 12px)); } }
@keyframes cr-t-away { 0% { opacity: 0; transform: translateY(calc(100% + 12px)); } 10%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-150%); } }

/* 7. stagger */
.cr-list { display: grid; gap: 6px; }
.cr-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: var(--r-control); background: var(--surface-raised); box-shadow: 0 0 0 1px var(--cr-ring); font-size: 14px; line-height: 20px; }
.cr-row > i { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); flex: none; }
.cr-row > span { flex: 1; min-width: 0; }
.cr-row > small { font: 400 12px/16px "Source Code Pro", ui-monospace, monospace; color: var(--ink-muted); }
.cr-rise { animation: cr-rise 2.4s var(--cr-out) calc(var(--i, 0) * 50ms) infinite both; }
.cr-rise-all { animation: cr-rise 2.4s var(--cr-out) infinite both; }
@keyframes cr-rise { 0% { opacity: 0; transform: translateY(8px); } 12.5%, 75% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; transform: translateY(8px); } }

/* 8. interruptible: a switch on a transition, a switch on keyframes */
.cr-switches { display: grid; justify-items: center; gap: 10px; padding: 12px 0 4px; }
.cr-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; font-size: 15px; line-height: 20px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.cr-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cr-sw { position: relative; width: 52px; height: 32px; border-radius: var(--r-pill); background: var(--line-strong); flex: none; }
.cr-sw::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0; }
.cr-knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-raised); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 30%, transparent); }
.cr-switch input:focus-visible + .cr-sw { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cr-switch input:checked + .cr-sw::before { opacity: 1; }
.cr-switch input:checked + .cr-sw .cr-knob { transform: translateX(20px); }
.cr-sw-t .cr-knob { transition: transform 400ms ease; }
.cr-sw-t .cr-sw::before { transition: opacity 400ms ease; }
.cr-sw-k .cr-knob { animation: cr-knob-off 400ms ease both; }
.cr-sw-k .cr-sw::before { animation: cr-fill-off 400ms ease both; }
.cr-sw-k input:checked + .cr-sw .cr-knob { animation: cr-knob-on 400ms ease both; }
.cr-sw-k input:checked + .cr-sw::before { animation: cr-fill-on 400ms ease both; }
@keyframes cr-knob-on { from { transform: none; } to { transform: translateX(20px); } }
@keyframes cr-knob-off { from { transform: translateX(20px); } to { transform: none; } }
@keyframes cr-fill-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes cr-fill-off { from { opacity: 1; } to { opacity: 0; } }

/* 9. reduced motion: cut versus fade */
.cr-sheetwin { height: 132px; }
.cr-sheet { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.cr-sheet b { font-weight: 600; }
.cr-sheet span { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.cr-cut { animation: cr-cut 2.4s linear infinite; }
.cr-fade { animation: cr-fade 2.4s ease infinite; }
@keyframes cr-cut { 0%, 9.99% { opacity: 0; } 10%, 69.99% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes cr-fade { 0% { opacity: 0; } 8.33%, 70% { opacity: 1; } 78.33%, 100% { opacity: 0; } }

/* frequency ladder and the rendering steps (static) */
.cr-freq { display: grid; }
.cr-freq-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 8px 24px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.cr-freq-row:first-child { border-top: 0; padding-top: 0; }
.cr-freq-row:last-child { padding-bottom: 0; }
.cr-freq-k { display: grid; gap: 2px; min-width: 0; }
.cr-freq-k strong { font-weight: 600; font-size: 15px; line-height: 22px; }
.cr-freq-k span:not(.kicker) { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cr-freq-v { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.cr-freq-v .fig-bar { width: 100%; }
@media (max-width: 560px) { .cr-freq-row { grid-template-columns: minmax(0, 1fr); } }
.cr-steps { display: grid; gap: 20px; }
.cr-steps-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; font-size: 14px; line-height: 20px; }
.cr-steps .flow-box { font-size: 14px; line-height: 20px; }
.cr-steps .flow-box span:not(.kicker) { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.cr-steps .flow-box.is-skipped { background: var(--surface-sunken); border-style: dashed; color: var(--ink-muted); }
.cr-steps-note { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* UX: the keyboard list */
.cr-cmd { padding: 6px; }
.cr-cmd-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.cr-cmd-list { position: relative; display: grid; }
.cr-cmd-list > span { position: relative; z-index: 1; height: 32px; display: flex; align-items: center; padding: 0 10px; font-size: 14px; line-height: 20px; white-space: nowrap; }
.cr-hl { position: absolute; left: 0; right: 0; top: 0; height: 32px; border-radius: var(--r-detail); background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); transform: translateY(128px); }
.cr-key { position: relative; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--r-detail); background: var(--surface-raised); box-shadow: 0 0 0 1px var(--cr-ring), 0 1px 0 1px var(--cr-ring); font: 500 13px/1 "Source Code Pro", ui-monospace, monospace; color: var(--ink); }
.cr-key::after { content: ""; position: absolute; inset: -3px; border-radius: 8px; box-shadow: 0 0 0 2px var(--accent); opacity: 0; }
.cr-key.cr-loop::after { animation: cr-keyflash 2.4s linear infinite; }
.cr:is(:hover, :focus-within) .cr-key.cr-loop::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cr .cr-key.cr-loop::after { animation: none !important; } }
.cr-hl-jump { animation: cr-hl-jump 2.4s step-end infinite; }
.cr-hl-ease { animation: cr-hl-ease 2.4s var(--cr-out) infinite; }
@keyframes cr-hl-jump { 0% { transform: translateY(0); } 25% { transform: translateY(32px); } 37.5% { transform: translateY(64px); } 50% { transform: translateY(96px); } 62.5%, 100% { transform: translateY(128px); } }
@keyframes cr-hl-ease {
  0%, 25% { transform: translateY(0); } 33.33%, 37.5% { transform: translateY(32px); } 45.83%, 50% { transform: translateY(64px); }
  58.33%, 62.5% { transform: translateY(96px); } 70.83%, 99.9% { transform: translateY(128px); } 100% { transform: translateY(0); }
}
@keyframes cr-keyflash { 0%, 24.9% { opacity: 0; } 25%, 29% { opacity: 1; } 29.1%, 37.4% { opacity: 0; } 37.5%, 41.5% { opacity: 1; } 41.6%, 49.9% { opacity: 0; } 50%, 54% { opacity: 1; } 54.1%, 62.4% { opacity: 0; } 62.5%, 66.5% { opacity: 1; } 66.6%, 100% { opacity: 0; } }

/* UX: tooltips. The first one waits; once the toolbar is warm, neighbours open with no delay and no animation (STD-enter-exit-origin-10).
   --cr-warm turns to 1 after the pointer or focus has rested in the toolbar for the first tooltip's delay plus its 125 ms entrance. */
@property --cr-warm { syntax: "<number>"; inherits: true; initial-value: 0; }
.cr-toolsart { display: grid; justify-items: center; gap: 12px; padding: 44px 14px 16px; }
.cr-tools { --cr-warm: 0; position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-control); background: var(--surface-raised); box-shadow: var(--cr-lift); transition: --cr-warm 0s; }
.cr-tool { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-detail); background: none; color: var(--ink); cursor: default; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cr-tool svg { width: 18px; height: 18px; display: block; }
.cr-tool:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cr-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; padding: 4px 8px; border-radius: var(--r-detail); background: var(--ink); color: var(--surface-raised); font: 600 12px/16px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0; white-space: nowrap; pointer-events: none; opacity: 0; transform-origin: 50% 100%; }
@keyframes cr-tip-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes cr-tip-fade { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  .cr-tools.slow .cr-tool:hover .cr-tip { animation: cr-tip-in 125ms var(--cr-out) 500ms both; }
  .cr-tools.warm:hover { --cr-warm: 1; transition: --cr-warm 0s 625ms; }
  .cr-tools.warm .cr-tool:hover .cr-tip { animation: cr-tip-in calc((1 - var(--cr-warm)) * 125ms) var(--cr-out) calc((1 - var(--cr-warm)) * 500ms) both; }
}
.cr-tools.slow .cr-tool:focus-visible .cr-tip { animation: cr-tip-in 125ms var(--cr-out) 500ms both; }
.cr-tools.warm:focus-within { --cr-warm: 1; transition: --cr-warm 0s 625ms; }
.cr-tools.warm .cr-tool:focus-visible .cr-tip { animation: cr-tip-in calc((1 - var(--cr-warm)) * 125ms) var(--cr-out) calc((1 - var(--cr-warm)) * 500ms) both; }
@media (prefers-reduced-motion: reduce) {
  /* gentler, not none: the tooltips keep their timing and fade without scaling. site.css stops every transition under reduced
     motion, so the warm-up timer is switched back on here: it is a delay, not movement. */
  .cr .cr-tools { transition: --cr-warm 0s !important; }
  .cr .cr-tools.warm:focus-within { transition: --cr-warm 0s 625ms !important; }
  .cr .cr-tools .cr-tool:focus-visible .cr-tip { animation-name: cr-tip-fade !important; animation-duration: 125ms !important; animation-delay: 500ms !important; animation-fill-mode: both !important; }
  .cr .cr-tools.warm .cr-tool:focus-visible .cr-tip { animation-duration: calc((1 - var(--cr-warm)) * 125ms) !important; animation-delay: calc((1 - var(--cr-warm)) * 500ms) !important; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .cr .cr-tools.warm:hover { transition: --cr-warm 0s 625ms !important; }
  .cr .cr-tools .cr-tool:hover .cr-tip { animation-name: cr-tip-fade !important; animation-duration: 125ms !important; animation-delay: 500ms !important; animation-fill-mode: both !important; }
  .cr .cr-tools.warm .cr-tool:hover .cr-tip { animation-duration: calc((1 - var(--cr-warm)) * 125ms) !important; animation-delay: calc((1 - var(--cr-warm)) * 500ms) !important; }
}
.cr-touch-note { display: none; font-size: 13px; line-height: 18px; color: var(--ink-muted); text-align: center; }
@media (hover: none) { .cr-touch-note { display: block; } }

/* UX: a toast stack that expands while hovered or focused (STD-components-toasts-drawers-10, -11, -12) */
.cr-stackwin { height: 264px; }
.cr-stack { position: absolute; right: 16px; bottom: 16px; width: 228px; max-width: calc(100% - 32px); height: 48px; }
.cr-stack > div { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; border-radius: var(--r-control); background: var(--surface-raised); box-shadow: var(--cr-lift); font-size: 14px; line-height: 20px; white-space: nowrap; transform-origin: 50% 0; transition: transform 400ms ease; }
.cr-stack > div > span { flex: 1; min-width: 0; }
.cr-stack > .t0 { z-index: 3; }
.cr-stack > .t1 { z-index: 2; transform: translateY(-14px) scale(0.95); }
.cr-stack > .t2 { z-index: 1; transform: translateY(-28px) scale(0.9); }
.cr-stack:focus-within > .t1 { transform: translateY(-62px); }
.cr-stack:focus-within > .t2 { transform: translateY(-124px); }
@media (hover: hover) and (pointer: fine) {
  .cr-stack::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 0; }
  .cr-stack:hover::after { height: 124px; }
  .cr-stack:hover > .t1 { transform: translateY(-62px); }
  .cr-stack:hover > .t2 { transform: translateY(-124px); }
}
.cr-undo { appearance: none; border: 0; margin: 0; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--surface-raised); font: 600 13px/18px "Hanken Grotesk", system-ui, sans-serif; cursor: pointer; touch-action: manipulation; flex: none; }
.cr-undo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cr-pile { position: absolute; left: 12px; right: 12px; top: 12px; display: grid; gap: 6px; }
.cr-pile > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; padding: 7px 8px 7px 12px; border-radius: var(--r-control); background: var(--surface-raised); box-shadow: var(--cr-lift); font-size: 13px; line-height: 18px; }
.cr-pile > div > span:first-child { flex: 1 1 112px; min-width: 0; }
.cr-pile .chip { flex: none; }

/* UX: a phone with a drawer that opens on the drawer curve, and one with a centred dialog */
.cr-phones { display: grid; justify-items: center; }
.cr-phone { position: relative; width: 168px; height: 300px; border-radius: 30px; background: var(--surface-raised); box-shadow: 0 0 0 6px var(--ink), 0 0 0 7px var(--cr-ring); contain: paint; }
.cr-phone .cr-skel { padding: 28px 16px 16px; }
.cr-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 40%, transparent); }
.cr-drawer { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; padding: 10px 16px 16px; display: grid; align-content: start; gap: 8px; border-radius: 22px 22px 0 0; background: var(--surface-raised); font-size: 13px; line-height: 18px; }
.cr-drawer::before { content: ""; justify-self: center; width: 36px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.cr-drawer b { font-weight: 600; font-size: 15px; line-height: 20px; }
.cr-drawer .cr-pill { justify-self: stretch; margin-top: 6px; }
.cr-dialog { position: absolute; left: 14px; right: 14px; top: 50%; translate: 0 -50%; padding: 14px; display: grid; gap: 6px; border-radius: 18px; background: var(--surface-raised); font-size: 13px; line-height: 18px; }
.cr-dialog b { font-weight: 600; font-size: 15px; line-height: 20px; }
.cr-dialog .cr-pill { min-height: 28px; font-size: 12px; }
.cr-dialog .cr-pill.ghost { box-shadow: none; background: var(--surface-sunken); }
.cr-dialog-row { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.cr-sheet-up { animation: cr-sheet-up 3s var(--cr-drawer) infinite; }
.cr-scrim-in { animation: cr-scrim-in 3s var(--cr-drawer) infinite; }
@keyframes cr-sheet-up { 0% { transform: translateY(100%); } 16.67%, 66.67% { transform: none; } 83.33%, 100% { transform: translateY(100%); } }
@keyframes cr-scrim-in { 0% { opacity: 0; } 16.67%, 66.67% { opacity: 1; } 83.33%, 100% { opacity: 0; } }

/* UX: forms, dialogs and the hover note */
.cr-form { display: grid; gap: 6px; padding: 14px; }
.cr-form label, .cr-form .lab { font-size: 13px; line-height: 18px; font-weight: 600; }
.cr-field { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-control); background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line-strong); font-size: 16px; line-height: 22px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.cr-field.bad { box-shadow: 0 0 0 2px var(--bad); }
.cr-err { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--bad); }
.cr-err svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.cr-form .cr-pill { justify-self: start; margin-top: 8px; }
.cr-modalwin { min-height: 236px; }
.cr-modalwin .cr-scrim { z-index: 1; }
.cr-alert { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: min(220px, calc(100% - 24px)); padding: 14px; display: grid; gap: 6px; border-radius: var(--r-control); background: var(--surface-raised); box-shadow: var(--cr-lift); font-size: 13px; line-height: 18px; }
.cr-alert b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cr-alert .cr-pill { justify-self: end; min-height: 28px; font-size: 12px; }
.cr-alert .cr-dialog-row .cr-pill { justify-self: auto; }
.cr-alert .cr-pill.ghost { box-shadow: none; background: var(--surface-sunken); }
.cr-inbox { display: grid; gap: 0; padding: 6px 12px 12px; }
.cr-inbox > div { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 2px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; }
.cr-inbox > div:first-child { border-top: 0; }
.cr-inbox > div > i { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); flex: none; }
.cr-inbox > div > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cr-inbox > div.gone { opacity: .45; text-decoration: line-through; text-decoration-color: var(--ink-muted); }
.cr-toast.still { position: absolute; right: 12px; bottom: 12px; left: 12px; justify-content: space-between; white-space: normal; padding: 6px 6px 6px 14px; }
.cr-toast.still > span:first-child { flex: 1; min-width: 0; }
.cr-toast.still > .cr-pill { flex: none; }
.cr-toast.still .cr-undo { min-height: 30px; }

/* UX: swipe to dismiss */
.cr-swipe { display: grid; gap: 10px; }
.cr-lanebox { position: relative; height: 72px; border-radius: var(--r-control); background: var(--surface-raised); box-shadow: 0 0 0 1px var(--cr-ring); contain: paint; }
.cr-lanebox .cr-toast { left: 12px; right: auto; bottom: 10px; z-index: 1; }
.cr-lanebox .cr-ghost { opacity: .35; }
.cr-mark { position: absolute; top: 6px; bottom: 6px; width: 0; border-left: 2px dashed var(--line-strong); }
.cr-mark span { position: absolute; top: -2px; right: 6px; font: 500 11px/14px "Source Code Pro", ui-monospace, monospace; color: var(--ink-muted); white-space: nowrap; }
.cr-flick { position: absolute; height: 2px; background: var(--accent); top: 50%; }
.cr-flick::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--accent); border-right: 0; }
.cr-swipe .cr-meta { justify-content: flex-start; }

/* UI details: annotated drawings at actual size */
.cr-ann { position: relative; }
.cr-ann .ann-dot.abs { transform: translate(-50%, -50%); }
.cr-spec { display: grid; gap: 18px; padding: 8px 0; }
.cr-spec-display { font-size: 34px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.cr .cr-spec .cr-spec-display { letter-spacing: -0.02em; }
.cr-spec-label { font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; }
.cr .cr-spec .cr-spec-label { letter-spacing: 0.07em; }
.cr-spec-body { font-size: 16px; line-height: 1.5; max-width: 65ch; margin: 0; }
.cr .cr-spec .cr-spec-body { letter-spacing: 0; }
.cr-ann-wrap { position: relative; padding-left: 30px; }
.cr-ann-wrap > .ann-dot { position: absolute; left: 0; top: 2px; }
.cr-amounts { display: grid; gap: 0; font-size: 16px; line-height: 24px; }
.cr-amounts > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.cr-amounts > div:first-child { border-top: 0; }
.cr-amounts .v { text-align: right; white-space: nowrap; }
.cr-amounts .tab { font-variant-numeric: tabular-nums; }
.cr-amounts .pn1 { margin-inline: -0.11em; }
.cr .cr-amounts { letter-spacing: 0; }
.cr-guide { position: relative; }
.cr-guide::after { content: ""; position: absolute; top: 0; bottom: 0; right: 2ch; border-right: 1px dashed var(--accent); opacity: .7; }
.cr-card-demo { padding: 16px; border-radius: var(--r-control); background: var(--surface-raised); display: grid; gap: 4px; font-size: 14px; line-height: 20px; }
.cr-card-demo b { font-weight: 600; font-size: 15px; }
.cr-card-demo span { color: var(--ink-muted); }
.cr-card-demo.hard { box-shadow: none; border: 1px solid var(--line-strong); }
.cr-card-demo.soft { box-shadow: var(--cr-lift); }
.cr-cards { display: grid; gap: 14px; padding: 6px; }
.cr-settings { display: grid; gap: 0; padding: 4px 14px; }
.cr-settings > div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.cr-settings > div:first-child { border-top: 0; }
.cr-settings em { font-style: italic; }
.cr-settings u { text-decoration: underline; text-underline-offset: 3px; }
.cr-settings a { color: var(--accent-text); }
.cr-settings .muted { color: var(--ink-muted); }
.cr-edgewin { height: 196px; }
.cr-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-weight: 600; font-size: 14px; background: color-mix(in srgb, var(--surface-raised) 86%, transparent); }
.cr-bar.line { box-shadow: 0 1px 0 var(--line-strong); }
.cr-bar.fadeedge::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: linear-gradient(var(--surface-raised), color-mix(in srgb, var(--surface-raised) 0%, transparent)); pointer-events: none; }
.cr-feed { position: absolute; left: 0; right: 0; top: 34px; display: grid; gap: 8px; padding: 0 14px; }
.cr-feed > div { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-control); background: var(--surface-sunken); font-size: 13px; line-height: 18px; }
.cr-feed > div > i { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); flex: none; }
.cr-measure { position: relative; display: grid; place-items: center; min-height: 168px; }
.cr-hit { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-detail); outline: 1.5px dashed var(--accent); outline-offset: -1px; background: var(--accent-soft); }
.cr-hit-floor { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; outline: 1.5px solid var(--ok); outline-offset: -1px; border-radius: 4px; }
.cr-hit-icon { position: relative; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; background: var(--surface-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--cr-ring); }
.cr-hit-icon svg { width: 14px; height: 14px; }
.cr-focus-demo { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14px; outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cr-dim { font: 500 12px/16px "Source Code Pro", ui-monospace, monospace; color: var(--ink-muted); white-space: nowrap; }
.cr-fills { display: grid; gap: 14px; }
.cr-fill { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cr-fill > .s { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 104px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; line-height: 18px; }
.cr-fill > .m { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.cr-fill > .m .mono { font-size: 12px; color: var(--ink-muted); }
.cr-fill > .chip { flex: none; }
.cr-fills { container-type: inline-size; }
@container (max-width: 360px) { .cr-fill { flex-wrap: wrap; row-gap: 6px; } .cr-fill > .m { flex-basis: 100%; order: 3; } }
.cr-src { display: grid; gap: 10px; }
.cr-phones .cr-stage { justify-items: center; }
.cr-measures { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 24px 32px; padding: 8px 0; }
.cr-mitem { display: grid; justify-items: center; gap: 10px; }
.cr-mitem > .cr-field { justify-content: flex-start; }
/* Decoration, direction A "Press proof" (owner's choice, 2026-10-15, from three previews): the marks a print designer leaves on
   a proof sheet. Flat cobalt and ink, 1-1.5 px rules, monospace labels, crop marks, a rubber stamp, numbered section tabs,
   line pictograms and spec callouts that show real values. Every mark explains the product; nothing floats for its own sake.
   Two faces only (Hanken Grotesk, Source Code Pro). Decorative SVGs are aria-hidden; rotation stops under reduced motion. */
.rot { transform: rotate(var(--r, 0deg)); }
@media (prefers-reduced-motion: reduce) { .rot { transform: none; } }

/* crop marks and a registration target around the hero picture, and nowhere else */
.a-plate { position: relative; }
.a-crop { position: absolute; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1; z-index: 3; }
.a-crop.tl { left: 0; top: 0; } .a-crop.tr { right: 0; top: 0; transform: scaleX(-1); }
.a-crop.bl { left: 0; bottom: 0; transform: scaleY(-1); } .a-crop.br { right: 0; bottom: 0; transform: scale(-1); }
.a-reg { position: absolute; left: 50%; top: -34px; width: 22px; height: 22px; margin-left: -11px; fill: none; stroke: var(--ink); stroke-width: 1; }
.a-reg-q { fill: var(--ink); stroke: none; }
@media (max-width: 640px) { .a-crop, .a-reg { display: none; } }

/* the rubber stamp on the rules card (the card lets it hang over its corner) */
.hh-file { overflow: visible; position: relative; }
.hh-file > .fig-card-h { border-radius: var(--r-card) var(--r-card) 0 0; }
.hh-file > .fig-card-f { border-radius: 0 0 var(--r-card) var(--r-card); }
.a-stamp { --r: -5deg; position: absolute; z-index: 3; right: -20px; bottom: -30px; width: 84px; height: 84px; }
@media (max-width: 1100px) { .a-stamp { display: none; } }

/* numbered section tabs */
.a-idx { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.a-idx-n { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--accent); color: var(--on-accent); letter-spacing: .04em; }
.a-idx::after { content: ""; width: 80px; height: 13px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='13'%3E%3Cg fill='none' stroke='%23222428'%3E%3Cpath d='M0 6.5H66M73.5 0V13M67 6.5H80'/%3E%3Ccircle cx='73.5' cy='6.5' r='3.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat; }

/* line pictograms on the step cards */
.h-step { position: relative; }
.a-pict { position: absolute; top: 20px; right: 20px; width: 48px; height: 32px; fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
.a-pict .a-pf { stroke: var(--line-strong); stroke-width: 1; }

/* spec callouts on each example card, with the example's own token values */
.x-card { position: relative; }
.a-call { position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 2px 7px; border-radius: 6px; background: #fff;
  font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .02em; color: var(--accent-text); box-shadow: 0 1px 2px rgb(10 14 40 / .18); }
.a-call b { font-weight: 500; color: var(--ink); }
.a-call::before { content: ""; position: absolute; width: 1px; background: #fff; }
.a-call::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--accent-text); }
.a-call-top { left: -2px; bottom: calc(100% + 12px); }
.a-call-top::before { left: 9px; top: 100%; height: 12px; } .a-call-top::after { left: 7px; top: calc(100% + 10px); }
.a-call-bot { right: 18px; top: calc(100% + 14px); }
.a-call-bot::before { right: 30px; bottom: 100%; height: 28px; } .a-call-bot::after { right: 28px; bottom: calc(100% + 26px); }
.a-dim { position: absolute; z-index: 2; right: -18px; bottom: calc(var(--x-inset) * 2); height: var(--x-h); width: 7px; border: 1px solid #fff; border-left: 0; }
.a-dim span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); padding: 0 4px; border-radius: 4px; background: #fff; font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; color: var(--accent-text); }
.demo-stage { padding-block: 64px; }
@media (max-width: 640px) { .a-call, .a-dim { display: none; } .demo-stage { padding-block: 24px; } }

/* showcase: status is a rectangular rubber stamp; tags are a punched audience tag, a ruled style label and a dashed industry label */
.a-rstamp { --r: 3deg; display: inline-block; padding: 2px 7px; background: #fff; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 4px;
  outline: 1px solid var(--accent); outline-offset: 2px; font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; filter: url(#a-ink); }
.piece-stuck .a-rstamp + .a-rstamp { --r: -2deg; margin-right: 10px; }
.a-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.a-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; white-space: nowrap; font: 600 12px/16px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0; }
.a-aud { position: relative; padding-left: 18px; background: var(--accent); color: var(--on-accent); border-radius: 6px 11px 11px 6px; }
.a-aud::before { content: ""; position: absolute; left: 7px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--surface-raised); }
.a-sty { border: 1.25px solid var(--ink); color: var(--ink); font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.a-ind { border: 1.25px dashed var(--ink); color: var(--ink); background: #fff; }
.legend .a-tag, .legend .a-rstamp { flex: none; }

/* docs: a catalogue-card tab with the page's place in its group */
.a-card { --r: 3deg; display: inline-flex; align-items: stretch; border: 1.5px solid var(--ink); border-radius: 6px; background: #fff; overflow: hidden; }
.a-card-k { display: grid; place-items: center; padding: 6px 10px; font: 500 11px/16px "Source Code Pro", ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.a-card-n { display: flex; align-items: center; white-space: nowrap; padding: 0 9px; background: var(--accent); color: var(--on-accent); font: 500 14px/20px "Source Code Pro", ui-monospace, monospace; letter-spacing: 0; }
.a-card-n small { font-size: 11px; }
.doc-stickers .a-card { transform: rotate(3deg); }
@media (max-width: 640px) { .doc-stickers .a-card { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .doc-stickers .a-card { transform: none; } }

/* the remaining labels (style names, do and don't) as flat printed labels instead of thick die-cut stickers */
.sticker { border: 1.25px solid var(--ink); box-shadow: none; background-image: none; border-radius: 6px; padding: 2px 8px; }
.sticker.paper { box-shadow: none; }
.dd-h::before { border: 1.5px solid currentColor !important; box-shadow: none !important; border-radius: 4px !important; padding: 1px 7px !important; background: #fff !important;
  font: 500 11px/16px "Source Code Pro", ui-monospace, monospace !important; letter-spacing: .07em; text-transform: uppercase; outline: 1px solid currentColor; outline-offset: 2px; }
.do .dd-h::before { color: var(--ok) !important; } .dont .dd-h::before { color: var(--bad) !important; }