@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap');
:root {
  color-scheme: light;

  /* ---- chrome tokens ----------------------------------------------------
     The tool's own shell only. The .site-* Preview rules are driven by the
     exported website tokens (--surface-*, --content-*, --action-*, --feedback-*)
     and must never reference a --ui-* name. See
     plans/2026-08-19-chrome-tokenization.zh.md.
     ---------------------------------------------------------------------- */

  /* light surfaces: neutral by design. The user judges generated color against
     this background, so a tinted shell would bias every reading. */
  --ui-canvas: #ffffff;
  --ui-canvas-alt: #f7f9f9;
  --ui-surface: #ffffff;
  --ui-surface-quiet: #f7f9f9;
  --ui-surface-soft: #f7f9f9;
  --ui-surface-inset: #f7f9f9;
  --ui-track: #eff3f4;
  --ui-track-quiet: #e7ecee;
  --ui-panel-soft: #eff3f4;

  /* dark surfaces: kept for inverted treatments (toast, overlays). The Steps
     dock that used to own them is gone. */
  --ui-dock: #0f1419;
  --ui-dock-raised: #1c2732;

  /* ink */
  --ui-ink: #0f1419;
  --ui-ink-strong: #0f1419;
  --ui-ink-inverse: #ffffff;  /* same value as --ui-surface, different job: ink on dark */
  --ui-muted: #536471;
  --ui-muted-soft: #536471;
  --ui-muted-warm: #536471;
  --ui-muted-deep: #3d4a54;

  /* accent: the only chromatic family in the chrome. Colour here means
     "press this next" -- primary action, focus ring, link. Nothing else. */
  --ui-accent: #c1462a;
  --ui-accent-strong: #a83c22;
  --ui-accent-deep: #8f3319;

  /* status */
  --ui-pass: #0f7a4d;
  --ui-pass-strong: #0b6440;
  --ui-fail: #b4291d;
  --ui-fail-soft: #a3241a;
  --ui-fail-deep: #8c1f16;
  --ui-danger: #b4291d;

  /* alpha bases: written as rgb(var(--x) / <alpha>) so one hue serves every opacity */
  --ui-ink-rgb: 15 20 25;
  --ui-line-rgb: 15 20 25;
  --ui-shadow-rgb: 15 20 25;
  --ui-shade-rgb: 15 20 25;
  --ui-warm-rgb: 15 20 25;
  --ui-accent-rgb: 168 60 34;
  --ui-danger-rgb: 180 41 29;
  --ui-light-rgb: 255 255 255;
  --ui-cream-rgb: 255 255 255;
  --ui-canvas-rgb: 255 255 255;
  --ui-black-rgb: 0 0 0;

  /* badge tints */
  --ui-badge-pass-rgb: 15 122 77;
  --ui-badge-warn-rgb: 176 116 15;
  --ui-badge-fail-rgb: 180 41 29;

  --ui-line: rgb(var(--ui-line-rgb) / .16);        /* decorative dividers */
  --ui-line-strong: rgb(var(--ui-line-rgb) / .46); /* control boundaries: 3.08:1 on the page, 3.05:1 on a card */

  --radius: 18px;
  --font-title: "IBM Plex Sans", "IBM Sans", "Helvetica Neue", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --width-page: 1240px;
  --width-reading: 760px;
  --width-export: 840px;
}

* { box-sizing: border-box; }
html { background: var(--ui-canvas); }
body {
  margin: 0;
  color: var(--ui-ink);
  background: var(--ui-canvas);
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

button, input, select { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-title); }
button { cursor: pointer; }
/* The language switch belongs to the workspace, not the preview. Pinning it to
   the viewport's right edge parks it on top of the preview rail's own controls. */
.language-switch { position: fixed; top: 17px; left: 18px; z-index: 60; display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: 99px; color: var(--ui-muted); background: rgb(var(--ui-canvas-rgb) / .92); box-shadow: 0 6px 18px rgb(var(--ui-ink-rgb) / .08); backdrop-filter: blur(10px); }
.language-switch button { padding: 0; border: 0; color: var(--ui-muted); background: transparent; font: 600 9px/1 var(--font-title); letter-spacing: .04em; }
.language-switch button.active { color: var(--ui-ink); }
.language-switch span { font-size: 9px; opacity: .45; }
/* Two columns: the workspace scrolls, the preview rail stays. Every choice on
   the left is answered on the right without scrolling for it -- that feedback
   loop is what makes the click path worth following. */
.shell { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 42%); align-items: start; }
.workspace { min-width: 0; padding: 28px 30px 64px; }
.preview-rail { position: sticky; top: 0; align-self: start; height: 100vh; min-width: 0; display: grid; border-left: 1px solid var(--ui-line); background: var(--ui-canvas-alt); }
.preview-rail .preview-section { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding: 22px 24px 24px; border-bottom: 0; }
.preview-rail .preview-grid { min-height: 0; }
.preview-rail .preview { width: 100%; min-height: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.preview-rail .preview-canvas { min-height: 0; overflow: auto; }
.preview-rail .section-head p { display: none; }

header {
  width: min(100%, 920px);
  display: grid;
  justify-items: center;
  margin: 0 auto;
  padding: 4px 0 32px;
  border-bottom: 1px solid var(--ui-line);
  text-align: center;
}
.eyebrow, .label, .mono { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { color: var(--ui-accent-strong); font-size: 11px; }
h1 { margin: 10px 0 12px; color: var(--ui-ink-strong); font: 500 clamp(38px, 6vw, 76px)/.92 var(--font-title); letter-spacing: -.055em; }
.title-main, .title-sub { display: block; }
.title-main { text-transform: uppercase; }
.title-sub { margin-top: .08em; font-size: .8em; letter-spacing: -.04em; text-transform: lowercase; }
.lede { margin: 0 auto; max-width: 720px; color: var(--ui-muted); font-size: 14px; line-height: 1.65; }
.wcag-intro { width: min(820px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); text-align: left; }
.wcag-level { min-width: 0; padding: 13px 16px 14px; border-right: 1px solid var(--ui-line); }
.wcag-level:last-child { border-right: 0; }
.wcag-level strong { display: block; color: var(--ui-ink); font: 500 12px var(--font-title); }
.wcag-level p { margin: 4px 0 0; color: var(--ui-muted); font-size: 11px; line-height: 1.45; }

.workflow { display: grid; gap: 0; }
.workflow-section { display: grid; grid-template-columns: 286px minmax(0, 1fr); gap: 32px; min-width: 0; padding: 48px 0 56px; border-bottom: 1px solid var(--ui-line); background: var(--ui-canvas); scroll-margin-top: 18px; }
.workflow-section:first-child { padding-top: 32px; }
.step-controls { --step-accent: var(--ui-muted-warm); position: sticky; top: 18px; align-self: start; padding: 19px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface-inset); box-shadow: 0 12px 35px rgb(var(--ui-warm-rgb) / .08); }
.step-controls .step-heading { margin-bottom: 18px; }
.step-controls .field:first-of-type { margin-top: 0; }
.step-content { min-width: 0; display: grid; align-content: start; gap: 40px; }
.workflow-block { min-width: 0; padding: 0; border: 0; border-radius: 0; background: var(--ui-canvas); box-shadow: none; }
.candidate-summary, .fit-report-block { width: min(100%, var(--width-reading)); border: 1px solid var(--ui-line); }
.candidate-summary .seed-summary { min-height: 300px; }

.context-result { width: min(100%, var(--width-reading)); min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; padding: 34px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--context-bg); color: var(--context-text); }
.context-result .label { font-size: 10px; opacity: .58; }
.context-result h2 { margin: 18px 0 8px; max-width: 620px; font: 500 clamp(34px, 5vw, 64px)/.98 var(--font-title); letter-spacing: -.05em; }
.context-result p { max-width: 520px; margin: 0; font-size: 14px; line-height: 1.55; opacity: .72; }
.context-result .context-status { align-self: flex-start; margin-top: 34px; }

.step-icon { width: 14px; height: 14px; display: grid; place-items: center; justify-self: start; color: currentColor; opacity: .62; }
.step-icon svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }

.export-section { width: min(100%, var(--width-export)); display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 0 auto; padding: 44px 0; border-bottom: 1px solid var(--ui-line); background: var(--ui-canvas); scroll-margin-top: 18px; }
.export-copy { max-width: 520px; }
.export-section .export-copy h2 { font-size: 24px; }
.preview-section { width: 100%; padding: 48px 0 56px; border-bottom: 1px solid var(--ui-line); background: var(--ui-canvas); scroll-margin-top: 18px; }

.step-heading { display: grid; grid-template-columns: 29px 1fr; gap: 8px; align-items: start; margin-bottom: 13px; }
/* The step mark replaces the step number and owns collapse. It carries no digit:
   order is read from the column itself. It stays monochrome on purpose -- in the
   chrome, color means "press this next", and a step heading is not that. */
.step-mark { width: 25px; height: 25px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 99px; background: none; cursor: pointer; }
.step-mark::before { content: ""; width: 15px; height: 15px; border: 2px solid var(--ui-ink); border-radius: 99px; transition: border-width 160ms ease; }
.step-mark:hover::before { transform: scale(1.2); }
.step-mark:active { transform: scale(.94); }
.workflow-section.is-collapsed .step-mark::before { border-width: 7px; }

/* An untouched step breathes, so the pulse reads as "not looked at yet". The
   first interaction anywhere inside that section stops it for good. */
[data-touched="false"] .step-mark::before { animation: step-breathe 2400ms ease-in-out infinite; }
/* The trough still reads as a ring. A breath that fades to nothing looks like a
   broken element whenever the animation is paused -- which the browser does on
   its own for any hidden tab. */
@keyframes step-breathe {
  0%, 100% { opacity: .42; transform: scale(.86); box-shadow: 0 0 0 0 rgb(var(--ui-ink-rgb) / 0); }
  50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 0 6px rgb(var(--ui-ink-rgb) / .1); }
}

/* Collapse keeps the mark and the title and hides the rest of the section. */
.workflow-section.is-collapsed { padding-block: 22px; }
.workflow-section.is-collapsed .step-heading { margin-bottom: 0; }
.workflow-section.is-collapsed .step-heading small { display: none; }
.workflow-section.is-collapsed .step-controls > *:not(.step-heading) { display: none; }
.workflow-section.is-collapsed .step-content { display: none; }

/* The global WCAG target leads the workflow ahead of 01. It governs every
   measurement below it, so it is stated before the first step, not inside one. */
.target-section { padding: 26px 0; }
.target-card { width: 286px; max-width: 100%; display: grid; gap: 7px; }
.target-card label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--ui-muted); font-size: 11px; }
.target-card label b { font: 600 8px "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; opacity: .55; }
.target-card p { margin: 0; color: var(--ui-muted); font-size: 10px; line-height: 1.45; }
.step-heading strong { display: block; font: 500 13px/1.2 var(--font-title); }
.step-heading small { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 10px; line-height: 1.35; }
.field { margin-top: 18px; }
.field label { display: flex; justify-content: space-between; color: var(--ui-muted); font-size: 11px; margin-bottom: 8px; }
.field-help { margin: 8px 0 0; color: var(--ui-muted); font-size: 10px; line-height: 1.45; }
.value { color: var(--ui-ink); font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.seed-picker { width: 100%; height: 112px; padding: 0; border: 1px solid rgb(var(--ui-light-rgb) / .28); border-radius: 13px; overflow: hidden; background: transparent; }
.seed-picker input { width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; }
.text-input, .select-trigger {
  width: 100%; color: var(--ui-ink); background: var(--ui-surface); border: 1px solid var(--ui-line-strong); border-radius: 9px; padding: 10px 11px; outline: none;
}
.text-input:focus, .select-trigger:focus { border-color: var(--ui-accent-strong); box-shadow: 0 0 0 3px rgb(var(--ui-accent-rgb) / .12); }

/* --- Dropdown (js/select.js) ---
   Every dropdown is one listbox. The menu opens under its trigger and flips above
   it only when the viewport leaves no room, so the control being changed stays
   visible; a native select would cover it. */
.select { position: relative; min-width: 0; }
.select-native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease; }
.select-trigger:hover:not(:disabled) { border-color: rgb(var(--ui-line-rgb) / .3); }
.select-trigger:disabled { color: var(--ui-muted); background: var(--ui-surface-quiet); cursor: not-allowed; }
.select-value-wrap { display: grid; min-width: 0; }
.select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Reserves the widest option so choosing a shorter one cannot resize the control
   under the pointer. Zero height keeps it out of the layout. */
.select-sizer { display: grid; height: 0; overflow: hidden; visibility: hidden; }
.select-sizer > span { min-width: 0; white-space: nowrap; }
.select-chevron { width: 10px; height: 10px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: rotate 150ms var(--ease-out); }
.select-trigger[aria-expanded="true"] .select-chevron { rotate: 180deg; }
.select-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 232px; margin: 0; padding: 5px; overflow-y: auto; list-style: none; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); box-shadow: 0 18px 40px rgb(var(--ui-ink-rgb) / .18); }
.select-menu[data-drop="up"] { top: auto; bottom: calc(100% + 6px); }
.select-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 6px; border-radius: 7px; color: var(--ui-ink); cursor: pointer; white-space: nowrap; }
.select-option[data-active="true"] { background: var(--ui-panel-soft); }
/* The current value keeps a static mark, so it does not rely on the highlight
   colour alone. */
.select-option[aria-selected="true"] { font-weight: 600; }
/* Rendered at 13px, so the 24px path is stroked at 2 to keep the mark as heavy
   as the 600-weight label beside it. */
.select-check { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: var(--ui-accent-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.range { width: 100%; accent-color: var(--ui-accent); }
.range-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 10px; background: var(--ui-track); border: 1px solid var(--ui-line); }
.mode button { color: var(--ui-muted); background: transparent; border: 0; border-radius: 7px; padding: 8px 6px; font-size: 11px; }
.mode button { transition: transform 140ms var(--ease-out); }
.mode button.active { color: var(--ui-ink); background: var(--ui-surface); box-shadow: inset 0 0 0 1px var(--ui-line); }
.role-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.role-tab { min-width: 0; display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--ui-line); border-radius: 8px; color: var(--ui-ink); background: rgb(var(--ui-cream-rgb) / .55); text-align: left; font-size: 10px; }
.role-tab i { width: 10px; height: 10px; border-radius: 99px; background: var(--role-color); box-shadow: inset 0 0 0 1px rgb(var(--ui-black-rgb) / .12); }
.role-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.role-tab em { grid-column: 2; margin-top: -5px; color: var(--ui-muted); font: 8px "SFMono-Regular", Consolas, monospace; font-style: normal; text-transform: uppercase; }
.role-tab.active { border-color: var(--ui-accent-strong); background: var(--ui-surface); box-shadow: 0 0 0 2px rgb(var(--ui-accent-rgb) / .1); }
.role-tab.disabled-role { color: var(--ui-muted); }
.role-actions { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 18px; }
.role-actions .button { min-width: 0; padding-inline: 7px; }
.full-button { width: 100%; margin-top: 8px; }
.button:disabled, input:disabled { cursor: not-allowed; opacity: .5; }
.role-config .select { margin-bottom: 8px; }
.suggestion-list { display: grid; gap: 6px; }
.suggestion { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--ui-line); border-radius: 8px; color: var(--ui-ink); background: var(--ui-surface); text-align: left; font-size: 9px; }
.suggestion i { width: 18px; height: 18px; border-radius: 5px; }
.suggestion b { color: var(--ui-muted); font: 8px "SFMono-Regular", Consolas, monospace; font-weight: 400; }
.mini-color-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px; }
.mini-picker { height: 42px; border-radius: 8px; overflow: hidden; border: 1px solid rgb(var(--ui-light-rgb) / .24); }
.mini-picker input { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; }
.context-status { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--ui-ink); border-radius: 9px; color: var(--ui-ink); background: var(--ui-surface); font: 10px/1.45 "SFMono-Regular", Consolas, monospace; }
.context-status .status-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 99px; color: rgb(var(--ui-light-rgb)); font: 700 14px/1 var(--font-title); }
.context-status strong { display: block; margin-bottom: 2px; color: var(--ui-ink); font: 700 11px/1.2 var(--font-title); letter-spacing: .04em; }
.context-status small { display: block; color: var(--ui-muted-deep); font: inherit; }
.context-status.pass .status-icon { background: var(--ui-pass); }
.context-status.pass strong { color: var(--ui-pass-strong); }
.context-status.fail { border-color: var(--ui-fail); }
.context-status.fail .status-icon { background: var(--ui-fail); }
.context-status.fail strong { color: var(--ui-fail); }
main { min-width: 0; }
.seed-summary { padding: 24px; min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; background: var(--seed); color: var(--seed-ink); }
.seed-summary .label { font-size: 10px; opacity: .7; }
.seed-summary h2 { margin: 42px 0 8px; font: 500 clamp(28px, 4vw, 48px)/.94 var(--font-title); letter-spacing: -.045em; }
.seed-summary .hex { font: 12px "SFMono-Regular", Consolas, monospace; opacity: .72; }
.role-overview-block { width: min(100%, 980px); }
.role-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.role-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--ui-line); border-radius: 10px; color: var(--ui-ink); background: rgb(var(--ui-cream-rgb) / .46); text-align: left; }
.role-card.active { border-color: var(--ui-accent-strong); box-shadow: 0 0 0 2px rgb(var(--ui-accent-rgb) / .1); }
.role-card-swatch { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; font: 600 10px var(--font-title); }
.role-card strong, .role-card small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-card strong { font: 500 11px var(--font-title); }
.role-card small { margin-top: 4px; color: var(--ui-muted); font: 8px "SFMono-Regular", Consolas, monospace; }
.empty-state { grid-column: 1 / -1; min-height: 120px; display: grid; place-items: center; padding: 24px; border: 1px dashed var(--ui-line); border-radius: 10px; color: var(--ui-muted); font-size: 11px; text-align: center; }
.scale-diagnostic-inline { color: var(--ui-accent-deep); font-size: .9em; }
.scale-diagnostic-inline::before { content: " · "; color: var(--ui-muted); }
.safe-pair { padding: 24px; background: var(--ui-surface-soft); }
.safe-pair h3, .section-head h2 { margin: 0; font: 500 19px var(--font-title); }
.safe-pair p { color: var(--ui-muted); font-size: 12px; margin: 7px 0 17px; line-height: 1.45; }
.pair-list { display: grid; gap: 8px; }
.saved-pairs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; color: var(--ui-muted); font-size: 10px; }
.saved-pairs-head b { min-width: 22px; padding: 3px 6px; border-radius: 99px; color: var(--ui-ink-inverse); background: var(--step-accent); font: 600 9px var(--font-title); text-align: center; }
.saved-default-hint { margin: 0; color: var(--ui-muted); font-size: 9px; line-height: 1.5; }
.saved-usage-guide { display: grid; gap: 7px; margin: -5px 0 17px 37px; padding: 10px 0 12px; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); }
.saved-usage-guide > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 7px; align-items: baseline; }
.saved-usage-guide strong { font: 600 8px var(--font-title); }
.saved-usage-guide span { color: var(--ui-muted); font-size: 8px; line-height: 1.4; }
.saved-pairs-actions { display: flex; flex-wrap: wrap; gap: 8px; max-width: 980px; }
.saved-generate-hint { max-width: 980px; margin: 8px 0 14px; color: var(--ui-muted); font-size: 11px; line-height: 1.45; }
.saved-pairs { display: grid; gap: 12px; max-width: 980px; }
.saved-pairs-empty { margin: 0; padding: 12px; border: 1px dashed rgb(var(--ui-shadow-rgb) / .2); border-radius: 8px; color: var(--ui-muted); font-size: 10px; line-height: 1.45; }
.saved-pair { display: grid; grid-template-areas: "sample copy remove" "fields fields fields" "status status status" "states states states"; grid-template-columns: 42px minmax(0, 1fr) 36px; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); }
.saved-pair-sample { grid-area: sample; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 7px; font: 600 11px var(--font-title); box-shadow: inset 0 0 0 1px rgb(var(--ui-shadow-rgb) / .14); }
.saved-pair-copy { grid-area: copy; min-width: 0; }
.saved-pair-copy strong, .saved-pair-copy small { display: block; }
.saved-pair-copy strong { font: 500 13px var(--font-title); }
.saved-pair-copy small { margin-top: 3px; overflow: hidden; color: var(--ui-muted); font: 9px "SFMono-Regular", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.saved-pair > em { grid-area: status; justify-self: start; font: 700 8px "SFMono-Regular", Consolas, monospace; font-style: normal; white-space: nowrap; }
.saved-pair > em.pass { color: var(--ui-pass); }
.saved-pair > em.fail { color: var(--ui-fail-soft); }
.saved-pair > button { grid-area: remove; align-self: start; justify-self: end; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; color: var(--ui-muted); background: transparent; font-size: 16px; transition: transform 140ms var(--ease-out), background-color 140ms ease; }
.saved-pair > button:active { transform: scale(.92); }
.saved-pair-fields { grid-area: fields; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px solid var(--ui-line); }
.saved-pair-fields label { display: grid; gap: 5px; min-width: 0; color: var(--ui-muted); font-size: 9px; }
.saved-pair-fields .select-trigger { min-width: 0; width: 100%; padding: 7px 8px; border-radius: 7px; font: 9px "SFMono-Regular", Consolas, monospace; }
.saved-pair-fields .select-menu { padding: 4px; border-radius: 9px; }
.saved-pair-fields .select-option { padding: 6px 4px; border-radius: 6px; font: 9px "SFMono-Regular", Consolas, monospace; }
.saved-pair-fields .select-option[aria-selected="true"] { font-weight: 700; }
.saved-pair-fields .select-check { width: 11px; height: 11px; }
.saved-pair-states { grid-area: states; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding-top: 7px; border-top: 1px solid var(--ui-line); }
.saved-pair-states > span { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: center; }
.saved-pair-states i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; box-shadow: inset 0 0 0 1px rgb(var(--ui-shadow-rgb) / .12); font: 600 8px var(--font-title); font-style: normal; }
.saved-pair-states small { overflow: hidden; color: var(--ui-muted); font: 7px/1.25 "SFMono-Regular", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.saved-pair-states .focus-ring-sample { width: 18px; height: 18px; margin: 3px; background: var(--ui-surface); box-shadow: 0 0 0 2px var(--focus-ring); }
.pair { display: grid; grid-template-columns: 50px minmax(100px, 1fr) auto; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--ui-line); border-radius: 10px; background: rgb(var(--ui-light-rgb) / .38); text-align: left; transition: transform 140ms var(--ease-out); }
.pair.needs-work { border-color: rgb(var(--ui-danger-rgb) / .62); background: rgb(var(--ui-danger-rgb) / .055); box-shadow: 0 3px 12px rgb(var(--ui-danger-rgb) / .08); }
.pair-disabled { color: var(--ui-muted); }
.pair-disabled .pair-swatch { color: var(--ui-muted); background: var(--ui-track-quiet); }
.pair-swatch { height: 34px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.pair-copy { min-width: 0; }
.pair-copy strong { display: block; font-size: 12px; font-weight: 500; }
.pair-copy em { color: var(--ui-muted); font: 10px "SFMono-Regular", Consolas, monospace; font-style: normal; margin-left: 5px; }
.pair-copy span { display: block; margin-top: 3px; color: var(--ui-muted); font: 10px "SFMono-Regular", Consolas, monospace; }
.badge { font: 10px "SFMono-Regular", Consolas, monospace; border-radius: 99px; padding: 5px 7px; color: var(--ui-pass); background: rgb(var(--ui-badge-pass-rgb) / .1); }
.fit-badges { display: grid; gap: 5px; justify-items: end; }
.fit-task { max-width: 190px; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 6px; margin-bottom: 3px; color: var(--ui-danger); font-style: normal; text-align: right; }
.fit-task b { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 99px; color: var(--ui-ink-inverse); background: var(--ui-danger); font: 700 8px/1 var(--font-title); }
.fit-task strong, .fit-task small, .fit-task em { display: block; }
.fit-task strong { font: 700 8px var(--font-title); text-transform: uppercase; }
.fit-task small { margin-top: 3px; color: var(--ui-fail-deep); font: 7px/1.35 "SFMono-Regular", Consolas, monospace; }
.fit-task em { margin-top: 4px; color: var(--ui-danger); font: 600 8px var(--font-title); font-style: normal; }
.fit-work-summary { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgb(var(--ui-danger-rgb) / .42); border-radius: 9px; color: var(--ui-fail-deep); background: rgb(var(--ui-danger-rgb) / .09); }
.fit-work-summary span { width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 99px; color: var(--ui-ink-inverse); background: var(--ui-danger); font: 700 11px/1 var(--font-title); }
.fit-work-summary strong { font: 600 10px var(--font-title); }
.fit-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fit-report-head > div { min-width: 0; }
.fit-report-head .button { flex: 0 0 auto; }
.fit-optimize-hint { margin: 8px 0 14px; color: var(--ui-muted); font-size: 9px; line-height: 1.45; }
.fit-badge { font: 9px "SFMono-Regular", Consolas, monospace; font-style: normal; border-radius: 99px; padding: 4px 6px; color: var(--ui-pass); background: rgb(var(--ui-badge-pass-rgb) / .1); white-space: nowrap; }
.fit-badge.warn { color: var(--ui-accent-strong); background: rgb(var(--ui-badge-warn-rgb) / .1); }
.fit-badge.fail { color: var(--ui-danger); background: rgb(var(--ui-badge-fail-rgb) / .1); }

.section-head { display:flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head > div:first-child { width: min(100%, var(--width-reading)); }
.section-head p { color: var(--ui-muted); font-size: 11px; margin: 0; line-height: 1.5; }
.scale-guide { display: grid; grid-template-columns: 1.2fr 1fr .72fr 1.2fr 1fr; margin-bottom: 12px; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); }
.scale-guide span { padding: 10px 11px; border-right: 1px solid var(--ui-line); }
.scale-guide span:last-child { border-right: 0; }
.scale-guide b { display: block; color: var(--ui-ink); font: 500 11px var(--font-title); }
.scale-guide em { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 10px; font-style: normal; }
.scale-guide .recommended b { color: var(--ui-pass); }
.scale-key { margin: -4px 0 12px; color: var(--ui-muted); font-size: 10px; }
.scale { display: grid; grid-template-columns: repeat(11, minmax(48px, 1fr)); gap: 6px; }
.swatch { min-width: 0; padding: 0; border: 1px solid rgb(var(--ui-line-rgb) / .12); border-radius: 10px; overflow: hidden; appearance: none; background: transparent; box-shadow: none; transition: transform 140ms var(--ease-out); }
.swatch-color { position: relative; height: 92px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 8px; }
.swatch-hex { width: auto; max-width: 100%; padding: 3px 5px; border-radius: 5px; overflow: hidden; color: var(--ui-ink); background: rgb(var(--ui-light-rgb) / .84); font: 10px "SFMono-Regular", Consolas, monospace; opacity: 1; text-overflow: ellipsis; }
.swatch-rec { position: absolute; top: 7px; left: 7px; width: auto; padding: 3px 5px; border-radius: 99px; color: rgb(var(--ui-light-rgb)); background: var(--ui-pass); font: 700 8px/1 var(--font-title); letter-spacing: .06em; }
.swatch-meta { display: block; width: 100%; min-height: 67px; padding: 7px 8px 8px; color: var(--ui-ink); background: var(--ui-surface); font: 10px "SFMono-Regular", Consolas, monospace; }
.swatch-meta b { display: block; margin-bottom: 3px; font-weight: 600; }
.token-use { display: block; overflow: hidden; margin-bottom: 5px; font: 500 10px var(--font-title); text-overflow: ellipsis; white-space: nowrap; }
.contrast-values { display: block; color: var(--ui-ink); font-size: 9px; opacity: .68; white-space: nowrap; }

.preview-tabs { width: 184px; flex: 0 0 auto; }
.preview-grid { width: 100%; display: block; }
/* The caption is app chrome; the canvas below it is the generated page and
   fills the frame edge to edge, so surface.page reads as the page background
   rather than as one panel floating on the app's own paper color. */
.preview[hidden] { display: none; }
.preview-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--ui-ink); }
.preview-top strong { font: 500 18px var(--font-title); }
.preview-top > span { color: var(--ui-muted); font: 9px "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.preview { width: min(850px, 100%); }
.preview-canvas { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 13px; box-shadow: 0 16px 42px rgb(var(--ui-shade-rgb) / .12); }

/* Website preview. Every color below comes from the exported website token
   names, so the page and the export can never drift. surface.page owns the
   largest area; surface.raised is only for cards and surface.sunken only for
   the one alternating band and the spec zone. The landing page carries no
   status fills — semantic color lives in the spec zone as state evidence. */
.site-preview { min-height: 590px; overflow: hidden; color: var(--content-primary); background: var(--surface-page); font-size: 10px; }
.site-preview h3, .site-preview h5 { margin: 0; }
.site-preview p { margin: 0; }
.site-link { color: var(--content-link); text-decoration: none; border-bottom: 1px solid transparent; }
.site-link:hover { color: var(--content-link-hover); border-bottom-color: currentColor; }

.site-button { border: 1px solid transparent; border-radius: 7px; padding: 9px 14px; font: 600 9px var(--font-title); cursor: default; }
.site-button.compact { padding: 6px 10px; font-size: 8px; }
.site-button.primary { color: var(--action-primary-foreground); background: var(--action-primary-background); border-color: var(--action-primary-background); }
.site-button.primary.is-hover { background: var(--action-primary-background-hover); border-color: var(--action-primary-background-hover); }
.site-button.primary.is-pressed { background: var(--action-primary-background-pressed); border-color: var(--action-primary-background-pressed); }
.site-button.primary.is-focused { outline: 2px solid var(--action-primary-focus-ring); outline-offset: 2px; }
.site-button.secondary { color: var(--content-primary); background: transparent; border-color: transparent; padding-inline: 4px; }
.site-button.secondary.is-hover { text-decoration: underline; text-underline-offset: 3px; }
.site-button.destructive { color: var(--action-destructive-foreground); background: var(--action-destructive-background); border-color: var(--action-destructive-background); }
.site-button.inverse { color: var(--content-primary); background: var(--content-inverse); border-color: var(--content-inverse); }
.site-preview button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 26px; border-bottom: 1px solid var(--border-default); }
.site-brand { display: flex; align-items: center; gap: 8px; font: 600 12px var(--font-title); }
.site-brand i { width: 20px; height: 20px; border-radius: 6px; background: var(--action-primary-background); }
.site-nav-links { display: flex; gap: 18px; }
.site-nav-links a { color: var(--content-secondary); text-decoration: none; font-size: 9px; }
.site-nav-links a.active { color: var(--content-primary); font-weight: 600; }
.site-nav-actions { display: flex; align-items: center; gap: 12px; font-size: 9px; }

.site-hero { padding: 56px 26px 48px; }
.site-eyebrow { color: var(--content-muted); font: 600 8px "SFMono-Regular", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.site-hero h3 { max-width: 460px; margin: 14px 0 12px; font: 600 38px/1 var(--font-title); letter-spacing: -.04em; }
.site-lede { max-width: 420px; color: var(--content-secondary); font-size: 11px; line-height: 1.55; }
.site-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.site-trust { margin-top: 14px; color: var(--content-muted); font-size: 8px; }

.site-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; padding: 0 26px 46px; }
.site-card { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 16px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-raised); }
.site-card h5 { font: 600 11px var(--font-title); }
.site-card p { color: var(--content-secondary); font-size: 9px; line-height: 1.55; }
.site-card .site-link { margin-top: auto; font-size: 9px; }
.site-accent-badge { padding: 3px 7px; border: 1px solid var(--accent-secondary-border); border-radius: 99px; color: var(--accent-secondary-text); background: var(--accent-secondary-surface); font: 600 7px "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }

.site-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: center; padding: 34px 26px; border-block: 1px solid var(--border-default); background: var(--surface-sunken); }
.site-band blockquote { margin: 0; font: 500 16px/1.35 var(--font-title); letter-spacing: -.02em; }
.site-band cite { display: block; margin-top: 10px; color: var(--content-secondary); font: 8px "SFMono-Regular", Consolas, monospace; font-style: normal; }
.site-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.site-metrics dt { color: var(--content-secondary); font-size: 8px; }
.site-metrics dd { margin: 5px 0 0; font: 600 20px var(--font-title); letter-spacing: -.03em; }

.site-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 34px 26px; padding: 22px; border-radius: 12px; color: var(--content-inverse); background: var(--content-primary); }
.site-cta strong { display: block; font: 600 14px var(--font-title); }
.site-cta p { margin-top: 5px; opacity: .82; font-size: 9px; }

.site-signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; padding: 0 26px 46px; }
.site-signup h5 { font: 600 15px var(--font-title); letter-spacing: -.02em; }
.site-signup-copy p { margin-top: 7px; color: var(--content-secondary); font-size: 9px; line-height: 1.55; }
.site-form label { display: block; margin-bottom: 6px; font: 500 8px var(--font-title); }
.site-form-row { display: flex; gap: 8px; }
.site-form input { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--field-border); border-radius: 7px; outline: 0; color: var(--field-text); background: var(--field-background); font-size: 9px; }
.site-form input::placeholder { color: var(--field-placeholder); }
.site-form input:focus-visible { border-color: var(--field-border-focus); outline: 2px solid var(--field-focus-ring); outline-offset: 1px; }
.site-form-note { margin-top: 8px; color: var(--content-muted); font-size: 8px; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; border-top: 1px solid var(--border-default); color: var(--content-muted); font-size: 8px; }
.site-footer-links { display: flex; gap: 14px; }
.site-footer-links a { font-size: 8px; }

/* The spec zone is the receipt, not the product: it is visibly separated from
   the page above and is the only place semantic fills appear. */
.spec-zone { padding: 26px; border-top: 3px solid var(--border-strong); background: var(--surface-sunken); }
.spec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.spec-head strong { display: block; font: 600 12px var(--font-title); }
.spec-head p { margin-top: 4px; color: var(--content-secondary); font-size: 9px; }
.spec-head code { color: var(--content-secondary); font: 8px "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.spec-block { min-width: 0; padding: 15px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-raised); }
.spec-block h5 { margin: 0 0 4px; font: 600 10px var(--font-title); }
.spec-note { margin: 0 0 11px; color: var(--content-muted); font-size: 8px; line-height: 1.5; }
.spec-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 11px; }
.spec-item { display: grid; justify-items: center; gap: 5px; }
.spec-item small { color: var(--content-muted); font-size: 7px; text-transform: uppercase; letter-spacing: .06em; }

.spec-field { margin-top: 11px; }
.spec-field label { display: block; margin-bottom: 5px; color: var(--content-muted); font: 500 7px var(--font-title); text-transform: uppercase; letter-spacing: .06em; }
.spec-field input { width: 100%; padding: 8px 9px; border: 1px solid var(--field-border); border-radius: 6px; outline: 0; color: var(--field-text); background: var(--field-background); font-size: 9px; }
.spec-field.is-focused input { border-color: var(--field-border-focus); outline: 2px solid var(--field-focus-ring); outline-offset: 1px; }
.spec-field.is-invalid input { border-color: var(--field-border-invalid); }
.spec-field.is-invalid.is-focused input { outline-color: var(--focus-ring-danger-context); }
.spec-field.is-invalid small { display: block; margin-top: 5px; color: var(--field-helper-invalid); font-size: 8px; }

.spec-notice { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 9px; border-radius: 7px; margin-top: 7px; }
.spec-notice-icon { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 99px; font: 700 8px/1 var(--font-title); }
.spec-notice-copy strong, .spec-notice-copy small { display: block; }
.spec-notice-copy strong { font: 600 8px var(--font-title); }
.spec-notice-copy small { margin-top: 2px; font-size: 8px; line-height: 1.4; opacity: .85; }
.spec-chip { padding: 3px 6px; border-radius: 99px; font: 700 7px "SFMono-Regular", Consolas, monospace; }
.spec-notice.success { border: 1px solid var(--feedback-success-border); color: var(--feedback-success-text); background: var(--feedback-success-surface); }
.spec-notice.success .spec-notice-icon { color: var(--feedback-success-icon); }
.spec-notice.success .spec-chip { color: var(--feedback-success-on-bold); background: var(--feedback-success-bold); }
.spec-notice.warning { border: 1px solid var(--feedback-warning-border); color: var(--feedback-warning-text); background: var(--feedback-warning-surface); }
.spec-notice.warning .spec-notice-icon { color: var(--feedback-warning-icon); }
.spec-notice.warning .spec-chip { color: var(--feedback-warning-on-bold); background: var(--feedback-warning-bold); }
.spec-notice.danger { border: 1px solid var(--feedback-danger-border); color: var(--feedback-danger-text); background: var(--feedback-danger-surface); }
.spec-notice.danger .spec-notice-icon { color: var(--feedback-danger-icon); }
.spec-notice.danger .spec-chip { color: var(--feedback-danger-on-bold); background: var(--feedback-danger-bold); }
.spec-notice.information { border: 1px solid var(--feedback-information-border); color: var(--feedback-information-text); background: var(--feedback-information-surface); }
.spec-notice.information .spec-notice-icon { color: var(--feedback-information-icon); }
.spec-notice.information .spec-chip { color: var(--feedback-information-on-bold); background: var(--feedback-information-bold); }

/* The overlay is a scrim and carries no text of its own; the dialog above it
   is a raised surface, so no ink token has to be invented for it. */
.spec-overlay { display: grid; place-items: center; padding: 16px; border-radius: 8px; background: var(--surface-overlay); }
.spec-dialog { width: 100%; padding: 13px; border: 1px solid var(--border-default); border-radius: 8px; color: var(--content-primary); background: var(--surface-raised); }
.spec-dialog strong { display: block; font: 600 9px var(--font-title); }
.spec-dialog p { margin-top: 4px; color: var(--content-secondary); font-size: 8px; line-height: 1.45; }
.spec-dialog-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 11px; }

.spec-palette { grid-column: 1 / -1; }
.semantic-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 7px; }
.semantic-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--surface-page); }
.semantic-card-swatch { width: 42px; height: 32px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--semantic-border); border-radius: 6px; background: var(--semantic-subtle); }
.semantic-card-swatch i { background: var(--semantic-subtle); }
.semantic-card-swatch b { display: grid; place-items: center; color: var(--semantic-on); background: var(--semantic-bold); font: 700 8px/1 var(--font-title); }
.semantic-card strong, .semantic-card small { display: block; }
.semantic-card strong { overflow: hidden; font: 500 8px var(--font-title); text-overflow: ellipsis; white-space: nowrap; }
.semantic-card small { margin-top: 3px; color: var(--content-muted); font: 7px "SFMono-Regular", Consolas, monospace; }

.export-copy h2 { margin: 0 0 5px; font: 500 19px var(--font-title); }
.export-copy p { margin: 0; color: var(--ui-muted); font-size: 11px; }
.actions { display:flex; gap: 8px; flex-shrink: 0; }
.button { border: 1px solid var(--ui-line); border-radius: 8px; padding: 9px 12px; color: var(--ui-ink); background: var(--ui-surface); font-size: 11px; transition: transform 140ms var(--ease-out); }
.button.primary { color: var(--ui-ink-inverse); background: var(--ui-accent-strong); border-color: var(--ui-accent-strong); }
.button:active, .pair:active, .swatch:active, .demo-button:active, .demo-link:active, .mode button:active { transform: scale(.97); }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ui-ink); color: var(--ui-ink-inverse); border-radius: 99px; padding: 10px 14px; font-size: 12px; transition: opacity 200ms ease, transform 200ms var(--ease-out); box-shadow: 0 8px 25px rgb(var(--ui-black-rgb) / .35); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.footer { width: min(100%, var(--width-export)); margin: 16px auto 0; color: var(--ui-muted-soft); font: 10px/1.5 "SFMono-Regular", Consolas, monospace; }
.footer a { color: var(--ui-accent-strong); }

/* The ring is the solid accent, not a tint of it. At 38% over white it rendered
   1.86:1, under the 3:1 WCAG 1.4.11 asks of a non-text indicator. Solid measures
   6.30:1 on the page and 5.96:1 on a card. */
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ui-accent-strong); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { filter: brightness(1.04); }
  .saved-pair > button:hover { color: var(--ui-danger); background: rgb(var(--ui-danger-rgb) / .09); }
}
@media (prefers-reduced-motion: reduce) {
  .button, .pair, .swatch, .mode button, .step-mark { transition-duration: 0ms; }
  [data-touched="false"] .step-mark::before { animation: none; opacity: 1; transform: none; }
}

/* The rail only earns its column while the workspace still fits beside it. At
   1024px the step content column fell to 216px while the 50-950 scale strip
   needs 588px, so the split gives up well above the old 900px line. */
@media (max-width: 1200px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .preview-rail { position: static; height: auto; border-left: 0; border-top: 1px solid var(--ui-line); }
  .preview-rail .preview-canvas { overflow: visible; }
  .preview-rail .section-head p { display: block; }
}

@media (max-width: 900px) {
  .shell { width: min(100% - 40px, 660px); padding-top: 18px; }
  header { padding-bottom: 24px; }
  .workflow-section { grid-template-columns: 1fr; gap: 24px; padding: 34px 0 42px; }
  .preview-section { padding: 34px 0 42px; }
  .step-controls { position: static; }
  .step-content { gap: 32px; }
  .export-section { display: block; }
  .scale-guide { overflow-x: auto; grid-template-columns: repeat(5, 120px); }
  .scale { overflow-x: auto; grid-template-columns: repeat(11, 76px); padding-bottom: 5px; }
  .actions { margin-top: 16px; }
  .role-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-features { grid-template-columns: 1fr; }
  .site-band, .site-signup { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .semantic-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .language-switch { position: absolute; top: 10px; left: 12px; }
  .shell { width: calc(100% - 24px); }
  .safe-pair, .seed-summary { padding: 16px; }
  .workflow-section { padding: 28px 0 36px; }
  .preview-section { padding: 28px 0 36px; }
  .step-controls, .context-result { padding: 16px; }
  h1 { font-size: 44px; }
  .section-head { display: block; }
  .section-head p { margin-top: 7px; }
  .preview-tabs { width: 100%; margin-top: 14px; }
  .wcag-intro { grid-template-columns: 1fr; }
  .wcag-level { border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .wcag-level:last-child { border-bottom: 0; }
  .role-overview { grid-template-columns: 1fr; }
  .fit-report-head { display: grid; }
  .fit-report-head .button { width: 100%; }
  .saved-pair-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-top { display: block; }
  .preview-top > span { display: block; margin-top: 4px; }
  .site-nav { flex-wrap: wrap; }
  .site-nav-links { display: none; }
  .site-hero { padding: 34px 16px 30px; }
  .site-hero h3 { font-size: 28px; }
  .site-features, .site-signup { padding-inline: 16px; }
  .site-band, .site-footer, .site-nav { padding-inline: 16px; }
  .site-cta { display: block; margin-inline: 16px; }
  .site-cta .site-button { margin-top: 12px; }
  .site-metrics { grid-template-columns: 1fr; }
  .spec-zone { padding: 18px 16px; }
  .semantic-card-grid { grid-template-columns: 1fr; }
}

/* --- Phase 4: Quick start, generation result, and website tokens --- */
/* Quick start is one centered column: three choices, one action, and the result
   at the foot of the same card. A second column would only hold empty space. */
.quick-start-section { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; }
.quick-start-section .step-controls { position: static; width: min(460px, 100%); }
.quick-start-section .step-content { width: min(460px, 100%); }
.quick-start-section .step-heading > b { background: var(--ui-accent-strong); }
/* A select that stretches to the card width parks its chevron far from the
   value it belongs to; these size to their own options instead. */
.quick-start-section .field .select { width: max-content; min-width: 148px; max-width: 100%; }
/* The result is the foot of the card, not a separate panel. */
.quick-start-section .generation-result { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--ui-line); }
.quick-start-section .generation-status { grid-template-columns: 30px minmax(0, 1fr); }
.quick-start-section .generation-status-actions { grid-column: 1 / -1; }
.quick-start-note {
  padding: 15px 17px;
  border: 1px dashed var(--ui-line);
  border-radius: 10px;
  color: var(--ui-muted);
  background: var(--ui-canvas-alt);
}
.quick-start-note p { margin: 0; font-size: 11px; line-height: 1.6; }
.generation-result { min-width: 0; display: grid; gap: 14px; }
.generation-empty, .website-tokens-empty { margin: 0; color: var(--ui-muted); font-size: 12px; }
.generation-status {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-canvas-alt);
}
.generation-status .status-icon {
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border-radius: 99px;
  color: var(--ui-ink-inverse);
  font: 700 14px/1 var(--font-title);
}
.generation-status.ready .status-icon { background: var(--ui-pass); }
.generation-status.ready-with-warnings .status-icon { background: var(--ui-accent-strong); }
.generation-status.needs-attention .status-icon { background: var(--ui-danger); }
.generation-status strong { display: block; font: 500 13px/1.2 var(--font-title); letter-spacing: .02em; }
.generation-status small { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 10px; line-height: 1.45; }
.generation-status-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.generation-status-actions .button { white-space: nowrap; text-decoration: none; }
.generation-summary {
  margin: 0;
  padding: 9px 12px;
  color: var(--ui-ink);
  background: rgb(var(--ui-danger-rgb) / .07);
  border-top: 3px solid var(--ui-danger);
  font: 600 11px/1.4 var(--font-title);
}
.generation-tasks { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.generation-tasks li {
  padding: 9px 11px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-canvas-alt);
  display: grid;
  gap: 3px;
}
.generation-tasks li::before {
  content: "!";
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 99px;
  color: var(--ui-ink-inverse);
  background: var(--ui-danger);
  font: 700 10px/1 var(--font-title);
}
.generation-tasks li strong { font: 600 10px/1.3 var(--font-title); letter-spacing: .02em; }
.generation-tasks li span { color: var(--ui-ink); font-size: 11px; }
.generation-tasks li em { color: var(--ui-muted); font-size: 10px; font-style: normal; line-height: 1.45; }
.generation-note { margin: 0; color: var(--ui-muted); font-size: 10px; line-height: 1.5; }
.generation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tokens-theme-note { margin: 0 0 12px; color: var(--ui-muted); font-size: 10px; }
.website-token-status { margin-bottom: 14px; }
.website-token-status .generation-status { padding: 11px 13px; }
.token-group { margin-bottom: 22px; }
.token-group h3 {
  margin: 0 0 8px;
  font: 500 12px/1.3 var(--font-title);
  letter-spacing: .03em;
}
.token-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 11px;
}
.token-table-scroll { max-width: 100%; overflow-x: auto; }
.token-table th {
  padding: 6px 10px;
  color: var(--ui-muted);
  text-align: left;
  font: 600 9px/1.3 var(--font-title);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ui-line);
}
.token-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgb(var(--ui-line-rgb) / .09);
  vertical-align: middle;
}
.token-table tr:last-child td { border-bottom: 0; }
.token-name { width: 34%; }
.token-name code, .token-table td code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
}
.token-table td small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 9px; }
.token-swatch {
  display: inline-block;
  width: 15px; height: 15px;
  margin-right: 8px;
  border: 1px solid rgb(var(--ui-ink-rgb) / .18);
  border-radius: 4px;
  vertical-align: middle;
}
.custom-pairs-block { margin-top: 8px; }
.saved-compat-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px dashed var(--ui-line);
  border-radius: 8px;
  color: var(--ui-muted);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .generation-status { grid-template-columns: 30px 1fr; }
  .generation-status-actions { grid-column: 1 / -1; }
  .token-name { width: 40%; }
}
/* --- Phase 5: Preview consumes the website token contract --- */
.semantic-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 140ms var(--ease-out), border-color 140ms ease;
}
.semantic-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.semantic-card:active { transform: scale(.98); }
/* The measured result is a compact meaning-bearing chip, so it uses the feedback
   role's bold fill with its measured ink. The app's own green and red would be
   unmeasured colors sitting on a generated surface. */
.semantic-card em {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 5px;
  border-radius: 99px;
  font: 700 8px/1.2 var(--font-title);
  font-style: normal;
  letter-spacing: .02em;
}
.semantic-card em.pass { color: var(--feedback-success-on-bold); background: var(--feedback-success-bold); }
.semantic-card em.fail { color: var(--feedback-danger-on-bold); background: var(--feedback-danger-bold); }
@media (prefers-reduced-motion: reduce) {
  .semantic-card { transition-duration: 0ms; }
  .semantic-card:hover { transform: none; }
  .semantic-card:active { transform: none; }
}

/* --- Phase 6: layered export and project actions --- */
.export-actions { display: grid; gap: 8px; justify-items: end; }
.export-actions .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.export-hint { margin: 10px 0 0; color: var(--ui-muted); font-size: 10px; line-height: 1.55; }
.export-section { align-items: start; }
label.button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 900px) {
  .export-section { flex-direction: column; align-items: stretch; gap: 18px; }
  .export-actions, .export-actions .actions { justify-items: stretch; justify-content: stretch; }
  .export-actions .actions button, .export-actions label.button { flex: 1; }
}