/* ConsultorIA showroom. Tokens follow onmax.me (app/assets/css/main.css + Nuxt UI neutral). See reference-style/STYLE-EVIDENCE.md. */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* onmax.me main.css */
  --radius: 0.125rem;
  --radius-md: calc(var(--radius) * 1.5);
  --radius-xl: calc(var(--radius) * 3);
  --bg: #fff;
  --bg-muted: oklch(0.97 0 0);
  --bg-elevated: oklch(0.985 0 0);
  --border: oklch(0.92 0 0);
  --border-accented: oklch(0.87 0 0);
  /* Form controls need 3:1 against the page (WCAG 1.4.11); onmax.me uses border-accented (1.5:1). */
  --border-control: oklch(0.64 0 0);

  /* Nuxt UI neutral text roles. muted and dimmed are one step darker than onmax.me for AA contrast. */
  --text-highlighted: oklch(0.205 0 0);
  --text: oklch(0.371 0 0);
  --text-muted: oklch(0.439 0 0);
  --text-dimmed: oklch(0.556 0 0);
  --bg-inverted: oklch(0.205 0 0);
  --text-inverted: #fff;

  /* Nuxt UI warning (yellow) marks where work waits. error (red) and success (green) for states. */
  --warning-bg: oklch(0.987 0.026 102.212);
  --warning-border: oklch(0.795 0.184 86.047);
  --warning-text: oklch(0.476 0.114 61.907);
  --error: oklch(0.505 0.213 27.518);
  --error-bg: oklch(0.971 0.013 17.38);
  --success: oklch(0.448 0.119 151.328);

  /* Motion tokens. Enter is the onmax .enter curve; exits are shorter and quieter. */
  --ease-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-ui: 150ms;
  --dur-beat: 320ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.145 0 0);
    --bg-muted: oklch(0.2 0 0);
    --bg-elevated: oklch(0.18 0 0);
    --border: oklch(0.26 0 0);
    --border-accented: oklch(0.371 0 0);
    --border-control: oklch(0.5 0 0);
    --text-highlighted: #fff;
    --text: oklch(0.922 0 0);
    --text-muted: oklch(0.708 0 0);
    --text-dimmed: oklch(0.62 0 0);
    --bg-inverted: #fff;
    --text-inverted: oklch(0.205 0 0);
    --warning-bg: oklch(0.286 0.066 53.813);
    --warning-border: oklch(0.681 0.162 75.834);
    --warning-text: oklch(0.945 0.129 101.54);
    --error: oklch(0.704 0.191 22.216);
    --error-bg: oklch(0.258 0.092 26.042);
    --success: oklch(0.792 0.209 151.711);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
::selection { color: var(--bg); background: var(--text-highlighted); }
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
html:not(.js) [data-js-only] { display: none !important; }
:focus-visible { outline: 2px solid var(--text-highlighted); outline-offset: 2px; border-radius: var(--radius); }
section[id], [id].scroll-target { scroll-margin-top: 2rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { flex-shrink: 0; }

/* ---------- shell: header, main column, footer (onmax.me app.vue) */
.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 60;
  transform: translateY(-6rem);
  padding: 0.5rem 1rem; border-radius: var(--radius-md);
  background: var(--bg-inverted); color: var(--text-inverted);
  font-size: 0.875rem; text-decoration: none;
  transition: transform 150ms ease;
}
.skip-link:focus { transform: translateY(0); }

.shell { display: flex; flex-direction: column; min-height: 100svh; }
.container { width: 100%; max-width: 42rem; margin-inline: auto; padding-inline: 1.5rem; }

.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem; min-height: 5rem; padding-block: 1.25rem;
  font-size: 0.875rem; line-height: 1.25rem;
}
@media (min-width: 640px) { .site-header { flex-wrap: nowrap; height: 5rem; padding-block: 0; } }
/* The original prototype's mark: a square "cı" tile, then Consultor and a lighter IA. Neutral tokens. */
.brand {
  display: inline-flex; align-items: center; flex-shrink: 0; color: var(--text-highlighted); text-decoration: none;
  font-size: 1.125rem; line-height: 1; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-right: 0.5rem; padding-right: 0.125rem;
  border-radius: var(--radius-xl); background: var(--bg-inverted); color: var(--text-inverted);
  font-size: 1.25rem; font-weight: 500; letter-spacing: -0.06em; line-height: 1;
}
.brand-mark span { font-size: 1rem; }
.brand-ai { font-weight: 450; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; white-space: nowrap; }
@media (min-width: 640px) { .site-nav { gap: 1.25rem; } }
.site-nav a {
  display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem;
  color: var(--text-muted); text-decoration: none; transition: color 150ms ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text-highlighted); }

main { flex: 1; }
main:focus { outline: none; }

.site-footer {
  margin-top: 4rem; padding-block: 2rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.75rem;
  font-size: 0.875rem; line-height: 1.25rem; color: var(--text-dimmed);
}
@media (min-width: 640px) { .site-footer { flex-direction: row; align-items: center; justify-content: space-between; } }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.site-footer a { color: inherit; text-decoration: none; transition: color 150ms ease; display: inline-block; padding-block: 0.625rem; margin-block: -0.625rem; }
.site-footer a:hover { color: var(--text-highlighted); }

/* ---------- type */
.page-top { padding-top: 3rem; padding-bottom: 1.5rem; }
@media (min-width: 640px) { .page-top { padding-top: 5rem; } }
.label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--text-highlighted); }
.label .sep, .label .kind { color: var(--text-dimmed); font-weight: 400; }
.lead {
  margin-top: 1rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 500;
  letter-spacing: -0.025em; text-wrap: balance; color: var(--text-highlighted);
}
.prose { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.75rem; color: var(--text-muted); text-wrap: pretty; }
.prose > * + * { margin-top: 1.25rem; }
.prose strong, .hl { color: var(--text-highlighted); font-weight: 400; }
.prose--tight > * + * { margin-top: 0.75rem; }
.section { padding-block: 2.5rem; }
.section-h { margin-bottom: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; color: var(--text-dimmed); }
.section-h + .prose { margin-top: 0; }
.small { font-size: 0.875rem; line-height: 1.5rem; color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.link {
  color: var(--text-highlighted); text-decoration: underline;
  text-decoration-color: var(--border-accented); text-decoration-thickness: 1px;
  text-underline-offset: 0.2em; transition: text-decoration-color 150ms ease;
}
.link:hover { text-decoration-color: var(--text-highlighted); }
.link .icon { display: inline; vertical-align: -0.125em; margin-left: 0.125rem; }
.back { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--text-muted); text-decoration: none; padding-block: 0.625rem; margin-block: -0.625rem; transition: color 150ms ease; }
.back:hover { color: var(--text-highlighted); }

/* ---------- buttons (Nuxt UI UButton, color neutral: solid and outline) */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; font-size: 0.875rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: 2.25rem; padding: 0.375rem 0.75rem; border: 0; border-radius: var(--radius-md);
  background: var(--bg-inverted); color: var(--text-inverted);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  user-select: none;
}
@media (hover: hover) { .btn:hover { background: color-mix(in oklch, var(--bg-inverted) 90%, var(--bg)); } }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 3px solid color-mix(in oklch, var(--bg-inverted) 25%, transparent); outline-offset: 0; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; transform: none; background: var(--bg-muted); color: var(--text-dimmed); box-shadow: inset 0 0 0 1px var(--border); }
.btn--outline { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-control); }
@media (hover: hover) { .btn--outline:hover { background: var(--bg-elevated); } }
.btn--outline:focus-visible { outline: 2px solid var(--text-highlighted); outline-offset: 2px; }
.btn--block { width: 100%; }
@media (pointer: coarse) { .btn { min-height: 2.75rem; } }
.text-btn {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.625rem 0; margin-block: -0.625rem;
  border: 0; background: none; font-size: 0.875rem; color: var(--text-muted); transition: color 150ms ease;
}
.text-btn:hover { color: var(--text-highlighted); }

/* ---------- rows and tiles (onmax.me Projects.vue, ai-workflows.vue) */
.tile {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.5rem; height: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elevated); color: var(--text-highlighted);
}
.tile--num { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1; }
.list-rows > li { display: flex; gap: 0.75rem; padding-block: 0.625rem; font-size: 0.875rem; line-height: 1.25rem; }
.list-rows .row-title { display: block; font-weight: 500; color: var(--text-highlighted); }
.list-rows .row-text { display: block; margin-top: 0.125rem; line-height: 1.5rem; color: var(--text-muted); }

.row { margin-inline: -0.75rem; padding-inline: 0.75rem; border-radius: var(--radius); transition: background-color 150ms ease; }
@media (hover: hover) { .row:hover { background: var(--bg-muted); } }

/* problems */
.problems > li { display: flex; gap: 0.75rem; padding-block: 0.875rem; font-size: 0.875rem; line-height: 1.25rem; }
.problems .tile { margin-top: -0.125rem; }
.problem-body { min-width: 0; flex: 1; }
.problem-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.125rem 1rem; }
.problem-title { font-weight: 500; color: var(--text-highlighted); }
.problem-sectors { color: var(--text-dimmed); }
@media (max-width: 559px) { .problem-sectors { flex-basis: 100%; } }
.problem-quote { margin-top: 0.25rem; color: var(--text); line-height: 1.5rem; }
.problem-quote .link { margin-left: 0.25rem; }

/* ---------- frames (onmax.me work.vue: rounded-xl, border, bg-muted) */
.frame { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-muted); }
.frame-pad { padding: 1.25rem; }
@media (min-width: 640px) { .frame-pad { padding: 1.5rem; } }

.wait-tag {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.375rem;
  border: 1px solid var(--warning-border); border-radius: var(--radius-md); background: var(--warning-bg); color: var(--warning-text);
  font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap;
}

/* before / after */
.flow { display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .flow { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.flow-h { margin-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
.flow ol { display: grid; gap: 0.375rem; counter-reset: step; }
.flow li {
  display: flex; gap: 0.625rem; padding: 0.5rem 0.625rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg); font-size: 0.875rem; line-height: 1.25rem; color: var(--text-highlighted);
}
.flow .step-n { flex-shrink: 0; width: 1rem; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.25rem; color: var(--text-dimmed); }
.flow .step-body { min-width: 0; }
.flow .step-detail { display: block; margin-top: 0.125rem; color: var(--text-muted); line-height: 1.25rem; }
.flow li.is-stuck { border-color: var(--warning-border); background: var(--warning-bg); box-shadow: inset 3px 0 0 var(--warning-border); }
.flow li.is-stuck .step-n { color: var(--warning-text); }
.flow li.is-stuck .wait-tag { margin-top: 0.375rem; background: var(--bg); }
.flow .step-title { display: block; font-weight: 500; }

.case-kind { margin-left: auto; color: var(--text-dimmed); text-align: right; }
.person { display: flex; gap: 0.5rem; align-items: flex-start; }
.person .icon { margin-top: 0.4375rem; color: var(--text-highlighted); }
.prose .person > * + *, .prose.person > * + * { margin-top: 0; }

/* definition rows */
.dl-rows > div { display: grid; gap: 0.125rem; padding-block: 0.625rem; border-top: 1px solid var(--border); font-size: 0.875rem; line-height: 1.5rem; }
.dl-rows > div:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 640px) { .dl-rows > div { grid-template-columns: 11rem 1fr; gap: 1rem; } }
.dl-rows dt { font-weight: 500; color: var(--text-highlighted); }
.dl-rows dd { color: var(--text-muted); }

/* ---------- panels for demos */
.panel { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg); overflow: hidden; }
.panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.625rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-muted);
  font-size: 0.8125rem; line-height: 1.25rem; color: var(--text-muted);
}
.panel-bar strong { font-weight: 500; color: var(--text-highlighted); }
.panel-body { padding: 1.25rem 1rem; }
@media (min-width: 640px) { .panel-body { padding: 1.5rem; } }
.sample-tag { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.status { min-height: 1.5rem; margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.5rem; color: var(--text-muted); }
.status:empty { min-height: 0; margin-top: 0; }

/* progress */
.progress { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 1rem; font-size: 0.8125rem; line-height: 1.25rem; color: var(--text-dimmed); }
.progress li { display: flex; align-items: center; gap: 0.375rem; }
.progress .dot { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; border: 1px solid var(--border-accented); border-radius: 999px; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1; }
.progress .is-reached, .progress [aria-current="step"], .progress .is-done { color: var(--text-highlighted); }
.progress .is-reached .dot, .progress [aria-current="step"] .dot { border-color: var(--text-highlighted); background: var(--text-highlighted); color: var(--bg); }
.progress .is-done .dot { border-color: var(--text-highlighted); }
.step-heading { font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: var(--text-highlighted); }
.step-heading:focus { outline: none; }
.step-heading:focus-visible { outline: 2px solid var(--text-highlighted); }
.step-text { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.5rem; color: var(--text-muted); }

/* checkbox rows */
.check-rows { margin-block: 0.75rem; }
.check-row {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; margin-inline: -0.75rem;
  border-radius: var(--radius); font-size: 0.875rem; line-height: 1.25rem; color: var(--text-highlighted); cursor: pointer;
  transition: background-color 150ms ease;
}
@media (hover: hover) { .check-row:hover { background: var(--bg-muted); } }
.check-row input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--text-highlighted); flex-shrink: 0; }
.check-row .from { margin-left: auto; color: var(--text-dimmed); font-size: 0.8125rem; text-align: right; }
.check-row.is-stocked .name { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-dimmed); }
.draft-list { margin-block: 0.75rem; border-top: 1px solid var(--border); }
.draft-list li { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; color: var(--text-highlighted); }
.draft-list li .icon { color: var(--text-dimmed); }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1rem; }

/* fields (Nuxt UI UInput / UTextarea outline) */
.field { display: grid; gap: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; }
.field-label { font-weight: 500; color: var(--text-highlighted); }
.field-label .opt { font-weight: 400; color: var(--text-dimmed); }
.field-hint { color: var(--text-muted); font-size: 0.8125rem; line-height: 1.25rem; }
.field-error { display: flex; gap: 0.375rem; align-items: flex-start; color: var(--error); font-size: 0.8125rem; line-height: 1.25rem; }
.field-error .icon { margin-top: 0.1875rem; }
.input {
  width: 100%; min-width: 0; padding: 0.375rem 0.625rem; border: 0; border-radius: var(--radius-md);
  background: var(--bg); color: var(--text-highlighted); box-shadow: inset 0 0 0 1px var(--border-control);
  font-size: 0.875rem; line-height: 1.5rem; transition: box-shadow 150ms ease;
}
textarea.input { resize: vertical; min-height: 5.5rem; }
.input::placeholder { color: var(--text-dimmed); }
.input:hover { box-shadow: inset 0 0 0 1px var(--text-muted); }
.input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--text-highlighted); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--error); }
.input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px var(--error); }
select.input { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1rem) 55%, calc(100% - 0.6875rem) 55%; background-size: 0.3125rem 0.3125rem; background-repeat: no-repeat; }
@media (max-width: 639px), (pointer: coarse) { .input { font-size: 1rem; } }
.fields { display: grid; gap: 1rem; }
.fields-2 { display: grid; gap: 1rem; }
@media (min-width: 560px) { .fields-2 { grid-template-columns: 1fr 1fr; } }
.fields-3 { display: grid; gap: 1rem; }
@media (min-width: 560px) { .fields-3 { grid-template-columns: 1.3fr 1fr 1fr; } }

/* segmented (sample picker) */
.segmented { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.segmented button {
  min-height: 2.25rem; padding: 0.375rem 0.75rem; border: 0; border-radius: var(--radius-md);
  background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-control);
  font-size: 0.875rem; line-height: 1.25rem; transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.segmented button:active { transform: scale(0.97); }
.segmented button[aria-pressed="true"] { background: var(--bg-inverted); color: var(--text-inverted); box-shadow: none; }
@media (pointer: coarse) { .segmented button { min-height: 2.75rem; } }

/* notices */
.notice { margin-top: 1rem; padding: 0.75rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.5rem; }
.notice--warning { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-text); }
.notice--warning .notice-title { display: flex; align-items: center; gap: 0.375rem; font-weight: 500; }
.notice--warning ul { margin-top: 0.25rem; padding-left: 1.25rem; list-style: disc; }
.notice--ok { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--success); }
.notice--ok .icon { margin-top: 0.25rem; }
.notice--error { border-color: var(--error); background: var(--error-bg); color: var(--error); }

/* tables */
.table-wrap { margin-top: 1rem; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.25rem; }
.table-caption { margin-top: 1rem; color: var(--text-muted); font-size: 0.8125rem; line-height: 1.25rem; }
.table-caption + .table-wrap { margin-top: 0.25rem; }
.data-table th, .data-table td { padding: 0.5rem 0.375rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.data-table th:first-child, .data-table td:first-child { padding-left: 0; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table thead th { font-weight: 500; color: var(--text-highlighted); font-size: 0.8125rem; }
.data-table tbody th { font-weight: 500; color: var(--text-highlighted); }
.data-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.data-table .qty { white-space: nowrap; }
.data-table .unit { margin-left: 0.375rem; color: var(--text-muted); }
.data-table .input { width: 4.5rem; padding-block: 0.25rem; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 419px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table tbody { display: block; border-top: 1px solid var(--border); }
  .data-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 0.375rem 1rem; padding-block: 0.625rem; border-bottom: 1px solid var(--border); }
  .data-table tbody th, .data-table tbody td { padding: 0; border: 0; }
  .data-table tbody .qty { grid-column: 1 / -1; grid-row: 2; }
  .data-table tbody .num::before { content: "Unit price "; font-family: var(--font-sans); color: var(--text-muted); }
}
.total-row { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; font-size: 0.875rem; }
.total-row strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-highlighted); }
.total-row strong.is-pending { font-family: var(--font-sans); font-weight: 400; color: var(--text-muted); text-align: right; }
.review-tag { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--warning-text); }
.review-tag.is-reviewed { color: var(--success); }

details.disclosure { margin-top: 1rem; font-size: 0.875rem; line-height: 1.5rem; color: var(--text-muted); }
details.disclosure summary { cursor: pointer; color: var(--text-highlighted); width: fit-content; padding-block: 0.375rem; text-decoration: underline; text-decoration-color: var(--border-accented); text-underline-offset: 0.2em; }
details.disclosure summary:hover { text-decoration-color: var(--text-highlighted); }
details.disclosure ul { margin-top: 0.5rem; }
details.disclosure li { font-family: var(--font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
details.disclosure p { margin-top: 0.5rem; }

.pg-float {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; align-items: baseline; gap: 0.375rem;
  padding: 0.5rem 0.875rem; border-radius: 999px; background: var(--bg-inverted); color: var(--text-inverted); font-size: 0.8125rem; text-decoration: none;
  box-shadow: 0 6px 20px -6px oklch(0 0 0 / 0.35); opacity: 0; pointer-events: none; transform: translate(-50%, 0.75rem);
  transition: opacity 200ms var(--ease-enter), transform 260ms var(--ease-enter);
}
.pg-float .mono { font-size: 0.9375rem; font-weight: 500; color: var(--warning-border); }
.pg-float.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.copy-fallback { display: grid; gap: 0.375rem; margin-top: 0.75rem; font-size: 0.8125rem; color: var(--text-muted); }
.copy-fallback textarea, .copy-fallback input { font-family: var(--font-mono); font-size: 0.8125rem; }

/* ---------- explainer: the rendered lesson video and its timed script */
.player { margin: 0; }
.video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-muted); }
.player figcaption { margin-top: 0.5rem; }
.scenes { margin-top: 0.75rem; border-top: 1px solid var(--border); }
.scenes button {
  display: flex; width: 100%; align-items: baseline; gap: 0.75rem; padding: 0.625rem 0.75rem; margin-inline: -0.75rem; width: calc(100% + 1.5rem);
  border: 0; border-radius: var(--radius); background: none; text-align: left; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); transition: background-color 150ms ease, color 150ms ease;
}
@media (hover: hover) { .scenes button:hover { background: var(--bg-muted); color: var(--text-highlighted); } }
.scenes button span { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dimmed); font-variant-numeric: tabular-nums; }
.scenes button[aria-pressed="true"] { color: var(--text-highlighted); font-weight: 500; }
.disclosure-note { display: flex; gap: 0.5rem; margin-top: 1rem; padding: 0.75rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-muted); font-size: 0.875rem; line-height: 1.5rem; color: var(--text); }
.disclosure-note .icon { margin-top: 0.25rem; color: var(--text-highlighted); }

.script { margin-top: 1.5rem; }
.script-h { font-size: 0.875rem; font-weight: 500; color: var(--text-highlighted); }
.script-scenes { margin-top: 0.5rem; }
.script-scene { padding-block: 0.75rem; border-top: 1px solid var(--border); }
.script-scene-h { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--text-highlighted); }
.script-scene-h .mono { margin-right: 0.375rem; font-size: 0.75rem; color: var(--text-dimmed); font-weight: 400; }
.narration { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.75rem; color: var(--text-muted); }
.js .script-scene:not(.is-current) .narration { color: var(--text-muted); }
.js .script-scene.is-current .narration span { color: var(--text-dimmed); transition: color 120ms linear; }
.js .script-scene.is-current .narration .passed { color: var(--text-highlighted); }
.narration .cue { text-decoration: underline; text-decoration-color: var(--text-dimmed); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.beats { margin-top: 0.5rem; }
.beats li { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.25rem; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.25rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.beats li .t { width: 2.5rem; flex-shrink: 0; color: var(--text-dimmed); }
.beats li .icon { color: var(--text-dimmed); }
.beats li.is-done { color: var(--text-highlighted); }

/* Grey rows on hover: keep secondary text at AA on bg-muted */
@media (hover: hover) { .row:hover, .check-row:hover, .scenes button:hover { --text-dimmed: var(--text-muted); } }

/* ---------- home: hero */
.page-top--home { padding-bottom: 1.25rem; }
.page-top--home .prose { margin-top: 0.75rem; }

/* ---------- home: "How it works" layers (isometric stack, bottom to top, each label beside its layer)
   Geometry: the stack is rotateX(58deg) rotateZ(-45deg). A layer raised by z sits z * sin(58deg) = 0.848z
   higher on screen, and its right corner sits half a diagonal (0.7071 * size) right of the centre.
   The labels use the same variables, so they line up with their layer at every breakpoint. */
.lx { padding-block: 2.75rem 2.5rem; }
.lx-scene {
  --size: 6.5rem; --gap: 5.5rem; --cx: 4.75rem; --lead: 0.875rem; --h: 16.25rem;
  --hd: calc(var(--size) * 0.7071); --rise: calc(var(--gap) * 0.848); --ph: calc(var(--size) * 0.7495);
  --cy: calc(var(--h) - 0.5rem - var(--ph) / 2);
  position: relative; height: var(--h); margin-top: 0.5rem; user-select: none;
}
@media (max-width: 359px) { .lx-scene { --size: 5.5rem; --gap: 6rem; --cx: 3.9rem; --lead: 0.625rem; --h: 15.75rem; } }
@media (min-width: 640px) { .lx-scene { --size: 10rem; --gap: 5.5rem; --cx: 7.5rem; --lead: 1.5rem; --h: 18.5rem; } }
.lx-stack {
  position: absolute; left: calc(var(--cx) - var(--size) / 2); top: calc(var(--cy) - var(--size) / 2);
  width: var(--size); height: var(--size); transform: rotateX(58deg) rotateZ(-45deg); transform-style: preserve-3d; pointer-events: none;
}
.lx-plane { position: absolute; inset: 0; border: 1px solid var(--border-accented); border-radius: var(--radius-xl); background: var(--bg); transform-style: preserve-3d; transform: translateZ(var(--z)); }
.lx-p1 { --z: 0px; background: var(--bg-muted); }
.lx-p2 { --z: var(--gap); background: color-mix(in oklch, var(--bg-elevated) 88%, transparent); }
.lx-p3 { --z: calc(var(--gap) * 2); }
.lx-tile {
  position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: calc(var(--s) * 0.82); height: calc(var(--s) * 0.64);
  border: 1px solid var(--border-accented); border-radius: var(--radius-md); background: var(--bg); color: var(--text-dimmed);
  transform: rotate(var(--r)) translateZ(1px);
}
.lx-tile svg { transform: rotate(45deg); }
/* The check lies in the result layer and follows its axes, like the rows: no counter-rotation. */
@media (min-width: 640px) { .lx-tile { width: var(--s); height: calc(var(--s) * 0.78); } }
/* Two faint posts at the outer corners tie the three layers into one structure. */
.lx-post { position: absolute; width: 0; height: calc(var(--gap) * 2); border-left: 1px dashed var(--border-accented); transform-origin: top; transform: rotateX(90deg); }
/* Middle layer: lanes. A token travels the lane while the fill grows behind it (transform only). */
.lx-lane { position: absolute; left: 14%; right: 14%; top: var(--y); height: 0.625rem; margin-top: -0.3125rem; border-radius: 999px; background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--border-accented); }
.lx-lane-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--border-accented); transform-origin: left center; }
.lx-token { position: absolute; right: -0.25rem; top: 50%; width: 1.125rem; height: 1.125rem; margin-top: -0.5625rem; border-radius: var(--radius-md); background: var(--text-highlighted); box-shadow: 0 0 0 3px var(--bg-elevated); }
@media (min-width: 640px) { .lx-lane { height: 0.75rem; margin-top: -0.375rem; } .lx-token { width: 1.375rem; height: 1.375rem; margin-top: -0.6875rem; } }
.lx-rows { position: absolute; left: 15%; right: 15%; top: 22%; display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .lx-rows { gap: 0.625rem; } }
.lx-row { display: block; width: var(--w); height: 0.375rem; border-radius: 999px; background: var(--text-highlighted); }
@media (min-width: 640px) { .lx-row { height: 0.5rem; } }
.lx-check { position: absolute; right: 13%; bottom: 13%; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--bg-inverted); color: var(--text-inverted); }

.lx-steps { position: absolute; inset: 0; }
.lx-step {
  position: absolute; left: calc(var(--cx) + var(--hd) + var(--lead)); right: 0; top: calc(var(--cy) - var(--rise) * var(--k));
  display: flex; gap: 0.5rem; align-items: flex-start; transform: translateY(-50%);
  font-size: 0.8125rem; line-height: 1.125rem; color: var(--text-muted);
}
@media (min-width: 640px) { .lx-step { gap: 0.625rem; font-size: 0.875rem; line-height: 1.375rem; } }
.lx-step::before { content: ""; position: absolute; right: calc(100% + 0.25rem); top: 50%; width: calc(var(--lead) - 0.25rem); height: 1px; background: var(--border-accented); transform-origin: left center; }
.lx-n { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.125rem; height: 1.125rem; border: 1px solid var(--border-accented); border-radius: var(--radius-md); font-size: 0.625rem; line-height: 1; color: var(--text-highlighted); }
@media (min-width: 640px) { .lx-n { width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; font-size: 0.6875rem; } }
.lx-title { display: block; font-weight: 500; color: var(--text-highlighted); }
@media (max-width: 359px) { .lx-n { display: none; } }

/* Motion. Short travel, the onmax ease-out (quint), a tight stagger set in layers.js.
   Every beat keeps its box: only opacity and transform change, plus a 2px blur on the labels. */
.lx-scene [data-beat] { transition: opacity 520ms var(--ease-enter), transform 640ms var(--ease-enter); }
.lx-scene .lx-plane:not(.is-on) { opacity: 0; transform: translateZ(calc(var(--z) - 1rem)); }
.lx-scene .lx-tile:not(.is-on) { opacity: 0; transform: rotate(calc(var(--r) + 10deg)) translateZ(1.25rem); }
.lx-scene .lx-post:not(.is-on) { opacity: 0; }
.lx-scene .lx-row:not(.is-on) { opacity: 0; transform: translateX(-0.5rem); }
.lx-scene .lx-lane-fill, .lx-scene .lx-token { transition: opacity 400ms var(--ease-enter), transform 1300ms cubic-bezier(0.645, 0.045, 0.355, 1); }
.lx-scene .lx-lane-fill:not(.is-on) { transform: scaleX(0); }
.lx-scene .lx-token:not(.is-on) { opacity: 0; transform: translateX(calc(var(--size) * -0.66)); }
.lx-scene .lx-check:not(.is-on) { opacity: 0; transform: scale(0.8); }
.lx-scene .lx-step { transition: opacity 480ms var(--ease-enter), transform 560ms var(--ease-enter), filter 480ms var(--ease-enter); }
.lx-scene .lx-step:not(.is-on) { opacity: 0; transform: translateY(calc(-50% + 0.375rem)); filter: blur(2px); }
.lx-step::before { transition: transform 480ms var(--ease-enter) 80ms; }
.lx-step:not(.is-on)::before { transform: scaleX(0); }
.lx-scene.is-seeking [data-beat], .lx-scene.is-seeking .lx-step::before { transition: none !important; }
/* Before layers.js takes over, a page with motion starts empty instead of flashing the end state. */
.motion [data-layers]:not([data-ready]) [data-beat] { opacity: 0; transition: none; }
.motion [data-layers]:not([data-ready]) .lx-step::before { transform: scaleX(0); transition: none; }

/* ---------- home: problems */
.problem-title { font-weight: 500; color: var(--text-highlighted); }

/* ---------- home: example cards (six; every text line is one line, so nothing jumps) */
.ex-grid { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 640px) { .ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.25rem; } }
.ex-card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 0.875rem; align-items: center; }
@media (max-width: 359px) { .ex-card { grid-template-columns: 6rem minmax(0, 1fr); column-gap: 0.75rem; } }
@media (min-width: 640px) { .ex-card { display: block; } }
.ex-visual { display: grid; place-items: center; height: 5.25rem; padding: 0.5rem; overflow: hidden; }
@media (min-width: 640px) { .ex-visual { height: 7.5rem; padding: 0.75rem; } }
/* Centred absolutely so a picture wider than a small frame scales around the frame's centre. */
.ex-visual { position: relative; }
.vx-inner { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 0.625rem; transform: translate(-50%, -50%) scale(0.62); }
@media (max-width: 359px) { .vx-inner { transform: translate(-50%, -50%) scale(0.5); } }
@media (min-width: 640px) { .vx-inner { transform: translate(-50%, -50%); } }
.ex-text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--text-highlighted); }
@media (min-width: 640px) { .ex-name { margin-top: 0.75rem; } }
.ex-kind { font-size: 0.8125rem; line-height: 1.25rem; color: var(--text-muted); }
.ex-line { margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.25rem; color: var(--text); }
@media (min-width: 640px) { .ex-line { font-size: 0.875rem; line-height: 1.375rem; } }
.ex-links { display: flex; align-items: center; gap: 0 0.5rem; margin-top: 0.25rem; overflow: visible; }
.ex-links .sep { color: var(--text-dimmed); }
.vx-arrow { flex-shrink: 0; color: var(--text-dimmed); }
.ex-visual i, .ex-visual b { display: block; border-radius: 999px; background: var(--border-accented); }
/* message to order: a chat bubble, then table rows with one flagged */
.vx-msg { display: grid; gap: 0.3125rem; width: 3.5rem; padding: 0.5rem; border-radius: 0.625rem 0.625rem 0.625rem 0.125rem; background: var(--bg); border: 1px solid var(--border-accented); }
.vx-msg i { height: 0.25rem; } .vx-msg i:nth-child(2) { width: 75%; } .vx-msg i:nth-child(3) { width: 55%; }
.vx-table { display: grid; gap: 0.25rem; width: 4rem; padding: 0.375rem; border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--border-accented); }
.vx-table i { height: 0.625rem; border-radius: var(--radius); background: var(--bg-muted); box-shadow: inset 0.875rem 0 0 var(--border-accented); }
.vx-table i.is-flag { background: var(--warning-bg); box-shadow: inset 0.875rem 0 0 var(--warning-border); }
/* kitchen: a paper note, then a phone checklist */
.vx-paper { display: grid; gap: 0.3125rem; width: 3.25rem; padding: 0.5rem; background: var(--bg); border: 1px solid var(--border-accented); border-radius: var(--radius); transform: rotate(-5deg); }
.vx-paper i { height: 0.1875rem; } .vx-paper i:nth-child(2) { width: 80%; } .vx-paper i:nth-child(3) { width: 60%; }
.vx-phone { display: grid; gap: 0.3125rem; align-content: start; width: 2.75rem; height: 4.75rem; padding: 0.5rem 0.4375rem; border: 2px solid var(--text-highlighted); border-radius: 0.5rem; background: var(--bg); }
.vx-phone b { height: 0.5rem; border-radius: var(--radius); background: var(--bg-muted); box-shadow: inset 0.5rem 0 0 var(--border-accented); }
.vx-phone b.is-done { box-shadow: inset 0.5rem 0 0 var(--text-highlighted); }
/* explainer: a script page, then a video frame with a caption */
.vx-script { display: grid; gap: 0.3125rem; width: 3rem; padding: 0.5rem; background: var(--bg); border: 1px solid var(--border-accented); border-radius: var(--radius); }
.vx-script i { height: 0.1875rem; } .vx-script i:nth-child(odd) { width: 85%; }
.vx-video { position: relative; display: grid; place-items: center; width: 5rem; height: 3.5rem; border-radius: var(--radius-md); background: oklch(0.205 0 0); }
.vx-play { width: 0; height: 0; border-left: 0.6875rem solid #fff; border-top: 0.4375rem solid transparent; border-bottom: 0.4375rem solid transparent; margin-left: 0.1875rem; }
.vx-play--s { border-left-width: 0.4375rem; border-top-width: 0.28rem; border-bottom-width: 0.28rem; margin-left: 0.125rem; }
.vx-cap { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.375rem; display: flex; gap: 0.1875rem; }
.vx-cap i { flex: 1; height: 0.1875rem; background: oklch(1 0 0 / 0.45); }
.vx-cap i.is-word { background: #fff; }
/* thai: a playlist of lesson videos */
.vx-playlist { display: grid; gap: 0.3125rem; width: 8.5rem; }
.vx-thumb { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem; border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--border-accented); }
.vx-thumb::before { content: ""; order: -1; flex-shrink: 0; width: 1.75rem; height: 1.125rem; border-radius: var(--radius); background: oklch(0.205 0 0); }
.vx-thumb .vx-play { position: absolute; margin: 0 0 0 0.6875rem; }
.vx-thumb { position: relative; }
.vx-thumb i { flex: 1; height: 0.25rem; }
.vx-thumb.is-on { box-shadow: inset 2px 0 0 var(--text-highlighted); }
/* calories: a chat message, then a small bar chart */
.vx-chat { display: grid; gap: 0.3125rem; width: 3.5rem; padding: 0.5rem; border-radius: 0.625rem 0.625rem 0.125rem 0.625rem; background: var(--bg); border: 1px solid var(--border-accented); }
.vx-chat i { height: 0.25rem; } .vx-chat i:nth-child(2) { width: 60%; }
.vx-bars { display: flex; align-items: flex-end; gap: 0.3125rem; width: 4rem; height: 3.5rem; padding: 0.375rem; border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--border-accented); }
.vx-bars b { flex: 1; height: var(--h); border-radius: var(--radius); background: var(--text-highlighted); }
/* drop: a page with a comment pin, then the next version with a check */
.vx-doc { position: relative; display: grid; gap: 0.3125rem; align-content: start; width: 3.25rem; height: 4rem; padding: 0.5rem; background: var(--bg); border: 1px solid var(--border-accented); border-radius: var(--radius); }
.vx-doc i { height: 0.1875rem; } .vx-doc i:nth-child(2) { width: 70%; }
.vx-pin { position: absolute; right: 0.375rem; bottom: 0.625rem; width: 0.75rem; height: 0.75rem; border-radius: 999px 999px 999px 0; background: var(--warning-border); }
.vx-ok { position: absolute; right: 0.375rem; bottom: 0.5rem; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 999px; background: var(--bg-inverted); color: var(--text-inverted); }

/* ---------- home: how we work */
.how-rows > li { align-items: center; }

/* ---------- voice note */
.voice { margin-top: 1rem; }
.voice-prompt { margin-bottom: 0.75rem; }
.voice-controls { display: flex; align-items: center; gap: 0.75rem; }
.voice-toggle { min-width: 11rem; justify-content: flex-start; }
.voice-toggle .i-stop, .is-recording .voice-toggle .i-mic { display: none; }
.is-recording .voice-toggle .i-stop { display: block; }
.is-recording .voice-toggle { background: var(--error); color: #fff; }
.voice-time { font-size: 0.8125rem; color: var(--text-muted); }
.voice-result { margin-top: 1rem; }
.voice-result audio { display: block; width: 100%; max-width: 24rem; height: 2.5rem; }
.voice-more { margin-top: 1rem; }
.section--tight { padding-top: 0.5rem; }

/* ---------- home: small minutes (minutes × times × people, over a working year) */
.mins-lead {
  font-size: 1.125rem; line-height: 1.625rem; font-weight: 500; letter-spacing: -0.02em;
  color: var(--text-highlighted); text-wrap: balance;
}
.mins-frame { display: grid; gap: 1.25rem; margin-top: 1rem; }
.mins-stage { display: grid; gap: 0.5rem; transition: opacity var(--dur-beat) var(--ease-enter), transform var(--dur-beat) var(--ease-enter); }
.mins-stage + .mins-stage { padding-top: 1.25rem; border-top: 1px dashed var(--border-accented); }
.motion .mins-stage:not(.is-on) { opacity: 0; transform: translateY(6px); }
.mins-k { font-size: 0.8125rem; line-height: 1.25rem; color: var(--text-muted); }
.mins-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; font-size: 0.875rem; line-height: 1.5rem; color: var(--text-muted); }
.mins-n { font-size: 1rem; font-weight: 500; color: var(--text-highlighted); }
.mins-v--big .mins-n { font-size: 1.75rem; line-height: 2.25rem; letter-spacing: -0.02em; }
.mins-v--big .mins-of { font-size: 1rem; color: var(--text-highlighted); }

/* An 8-hour day, one tick per hour. The yellow part is the repeated step. */
.daybar {
  position: relative; height: 0.875rem; border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg) repeating-linear-gradient(to right, transparent 0 calc(12.5% - 1px), var(--border) calc(12.5% - 1px) 12.5%);
  box-shadow: inset 0 0 0 1px var(--border-accented);
}
.daybar-fill {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--f, 0));
  background: var(--warning-border); box-shadow: inset -1px 0 0 var(--warning-text);
  transition: transform 200ms var(--ease-enter);
}
.is-building .daybar-fill, .is-building .year-cell > span { transition: none; }

/* A working year: 44 blocks, one 40-hour week each. */
.year { display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 3px; }
@media (min-width: 560px) { .year { grid-template-columns: repeat(44, minmax(0, 1fr)); gap: 2px; } }
.year-cell { position: relative; height: 1.5rem; border-radius: 1px; overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border-accented); }
.year-cell > span {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--f, 0));
  background: var(--warning-border); transition: transform 200ms var(--ease-enter);
}
.is-over .year-cell > span { background: var(--warning-text); }

.mins-controls { display: grid; gap: 0.75rem; margin-top: 1rem; }
@media (min-width: 560px) { .mins-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stepper { display: grid; gap: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; }
.stepper-row { display: flex; align-items: center; gap: 0.25rem; }
@media (max-width: 559px) {
  .stepper { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
  .stepper-row .input { width: 4.5rem; }
}
.stepper-row .input { text-align: center; -moz-appearance: textfield; }
.stepper-row .input::-webkit-inner-spin-button, .stepper-row .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-btn {
  display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; padding: 0; border: 0;
  border-radius: var(--radius-md); background: var(--bg); color: var(--text-highlighted);
  box-shadow: inset 0 0 0 1px var(--border-control); transition: background-color 150ms ease;
}
@media (hover: hover) { .stepper-btn:hover { background: var(--bg-muted); } }
.stepper-btn:active { transform: scale(0.96); }
@media (pointer: coarse) { .stepper-btn { width: 2.75rem; height: 2.75rem; } }
.mins-note { margin-top: 0.75rem; }
.mins-job { margin-top: 1rem; }

/* ---------- home: before / after cards. Same four pieces of work in both rows. */
.ba-list { display: grid; gap: 2.25rem; margin-top: 1.25rem; }
.ba-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; margin-bottom: 0.5rem; }
.ba-frame { display: grid; gap: 1rem; padding: 1rem 0.75rem 1.125rem; }
@media (min-width: 560px) { .ba-frame { padding: 1.25rem 1.25rem 1.25rem 1rem; } }
.ba-row { display: grid; gap: 0.5rem; }
.ba-row + .ba-row { padding-top: 1rem; border-top: 1px dashed var(--border-accented); }
@media (min-width: 560px) { .ba-row { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.5rem; } }
.ba-label { font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: var(--text-highlighted); }
@media (min-width: 560px) { .ba-label { line-height: 2.25rem; } }
.ba-track-wrap { position: relative; }
.ba-track { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-node { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; text-align: center; }
.ba-icon {
  position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-xl); background: var(--bg); color: var(--text-highlighted);
  box-shadow: inset 0 0 0 1px var(--border-accented);
}
.ba-cap { max-width: 8.5rem; padding-inline: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); text-wrap: balance; }
.is-stuck .ba-icon { background: var(--warning-bg); color: var(--warning-text); box-shadow: inset 0 0 0 1px var(--warning-border); }
.is-stuck .ba-cap { color: var(--warning-text); font-weight: 500; }
.is-done .ba-icon { background: var(--bg-inverted); color: var(--text-inverted); box-shadow: none; }
.is-done .ba-cap { color: var(--text-highlighted); font-weight: 500; }
/* The line between the steps: solid, and dashed where little gets through. */
.ba-track-wrap::before, .ba-track-wrap::after { content: ""; position: absolute; top: 1.125rem; border-top: 1px solid var(--border-accented); }
.ba-track-wrap::before { left: 16.667%; right: 50%; }
.ba-track-wrap::after { left: 50%; right: 16.667%; }
.ba-row--before .ba-track-wrap::after { border-top-style: dashed; }
.ba-row--after .ba-track-wrap::before, .ba-row--after .ba-track-wrap::after { border-top-color: var(--text-dimmed); }

/* The count: how many are waiting, how many are done. Animated as an integer where @property works. */
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }
.ba-badge {
  --n: 4; counter-reset: n var(--n);
  position: absolute; top: -0.5rem; right: -0.625rem; min-width: 1.125rem; height: 1.125rem; padding-inline: 0.25rem;
  border-radius: 999px; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.125rem; font-weight: 600; text-align: center;
}
.ba-badge::after { content: counter(n); }
.is-stuck .ba-badge { background: var(--warning-border); color: oklch(0.205 0 0); }
.is-done .ba-badge { background: var(--bg); color: var(--text-highlighted); box-shadow: inset 0 0 0 1px var(--border-accented); }

/* Four pieces of work. Each <i> spans the track, so translateX(%) is a share of the track's width. */
.ba-toks { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 2.25rem; overflow: hidden; pointer-events: none; }
.ba-toks i { position: absolute; left: 0; top: 1.125rem; width: 100%; height: 0; }
.ba-toks i::before { content: ""; position: absolute; left: -0.25rem; top: -0.25rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--text-highlighted); }
.ba-row--before .ba-toks i { transform: translateX(calc(50% - 1.875rem - var(--i) * 0.75rem)); }
.ba-row--after .ba-toks i { transform: translateX(83.333%); opacity: 0; }
.motion .ba:not(.is-played) .ba-toks i, .motion .ba:not(.is-played) .ba-badge { opacity: 0; }

.ba.is-played .ba-row--before .ba-toks i { animation: ba-queue 1s var(--ease-enter) both; animation-delay: calc(var(--i) * 0.45s); }
.ba.is-played .ba-row--after .ba-toks i { animation: ba-pass 1.3s cubic-bezier(0.45, 0, 0.55, 1) both; animation-delay: calc(0.3s + var(--i) * 0.45s); }
.ba.is-played .is-stuck .ba-badge { animation: ba-count 1.8s steps(4, end) 0.55s both, ba-pop 200ms var(--ease-enter) 1s both; }
.ba.is-played .is-done .ba-badge { animation: ba-count 1.8s steps(4, end) 1.15s both, ba-pop 200ms var(--ease-enter) 1.6s both; }
.ba.is-played .is-stuck .ba-icon { animation: ba-pulse 900ms ease-out 1s both; }
@keyframes ba-queue { from { transform: translateX(16.667%); opacity: 0; } 20% { opacity: 1; } }
@keyframes ba-pass {
  from { transform: translateX(16.667%); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  to { transform: translateX(83.333%); opacity: 0; }
}
@keyframes ba-count { from { --n: 0; } to { --n: 4; } }
@keyframes ba-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes ba-pulse { from { box-shadow: inset 0 0 0 1px var(--warning-border), 0 0 0 0 var(--warning-border); } to { box-shadow: inset 0 0 0 1px var(--warning-border), 0 0 0 0.5rem transparent; } }

.ba-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; margin-top: 0.5rem; }
.ba-foot .sep { color: var(--text-dimmed); }
.ba-freq { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; color: var(--text-highlighted); }
.ba-replay { margin-left: auto; font-size: 0.8125rem; }
html:not(.motion) .ba-replay { display: none; }
.more-h { margin-top: 2.75rem; }
.ex-grid--more { margin-top: 0; }

/* ---------- home: problems you can pick. A pressed card turns yellow, like the step where work waits. */
.pick-lead { margin-bottom: 0.25rem; font-size: 1.5rem; line-height: 2rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text-highlighted); }
.pick-grid { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
@media (min-width: 560px) { .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick-item { display: flex; flex-direction: column; gap: 0.25rem; }
.pick {
  display: flex; flex: 1; flex-direction: column; gap: 0.625rem; width: 100%; padding: 0.875rem 1rem 1rem; border: 0; border-radius: var(--radius-xl);
  background: var(--bg); color: var(--text); text-align: left; font: inherit; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-accented);
  transition: background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, transform var(--dur-ui) var(--ease-enter);
}
.pick:disabled { cursor: default; }
@media (hover: hover) { .pick:not(:disabled):hover { background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--text-dimmed); } }
.pick:not(:disabled):active { transform: scale(0.985); }
.pick-top { display: flex; align-items: center; gap: 0.625rem; }
.pick-title { flex: 1; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: var(--text-muted); }
.pick-box {
  display: grid; place-items: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: 999px;
  color: transparent; box-shadow: inset 0 0 0 1px var(--border-control); transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
html:not(.js) .pick-box { display: none; }
.pick-quote { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-highlighted); text-wrap: pretty; }
.pick-cost { margin-top: auto; font-size: 0.8125rem; line-height: 1.25rem; color: var(--text-muted); }
.pick-per { color: var(--text-dimmed); }
.pick-ex { align-self: flex-start; margin-left: 1rem; font-size: 0.8125rem; }
.pick[aria-pressed="true"] { background: var(--warning-bg); box-shadow: inset 0 0 0 1.5px var(--warning-border); }
.pick[aria-pressed="true"] .pick-box { background: var(--warning-border); color: oklch(0.205 0 0); box-shadow: none; }
.pick[aria-pressed="true"] .pick-title, .pick[aria-pressed="true"] .pick-cost, .pick[aria-pressed="true"] .pick-per { color: var(--warning-text); }
.motion .pick[aria-pressed="true"] .pick-box { animation: ba-pop 200ms var(--ease-enter); }
.pick-tally {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 1rem;
  padding: 0.875rem 1rem; border-radius: var(--radius-xl); background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur-beat) ease, box-shadow var(--dur-beat) ease;
}
.has-picks .pick-tally { background: var(--warning-bg); box-shadow: inset 0 0 0 1px var(--warning-border); }
.pick-sum { flex: 1 1 16rem; font-size: 0.875rem; line-height: 1.375rem; color: var(--text-muted); }
.pick-sum strong { font-weight: 500; color: var(--text-highlighted); }
.has-picks .pick-sum strong { color: var(--warning-text); }
.pick-go { flex-shrink: 0; gap: 0.5rem; }
.pick-note { margin-top: 0.75rem; }

/* ---------- home: the time row on each before/after card. One block is one 40-hour week. */
.ba-row--time { padding-top: 1rem; border-top: 1px dashed var(--border-accented); }
.ba-time { display: grid; gap: 0.5rem; }
.ba-time-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.ba-time-n { font-size: 1.75rem; line-height: 2.25rem; font-weight: 500; letter-spacing: -0.02em; color: var(--warning-text); font-variant-numeric: tabular-nums; }
.ba-time-of { font-size: 0.875rem; line-height: 1.5rem; color: var(--text-highlighted); }
.ba-time-why { font-size: 0.8125rem; line-height: 1.25rem; color: var(--text-muted); text-wrap: pretty; }
.ba-year { display: grid; grid-template-columns: repeat(44, minmax(0, 1fr)); gap: 2px; }
.ba-cell { position: relative; height: 0.625rem; border-radius: 1px; overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border-accented); }
.ba-cell > span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--f, 0)); background: var(--warning-border); }
.motion .ba:not(.is-played) .ba-cell > span { transform: scaleX(0); }
.ba.is-played .ba-cell > span { animation: ba-fill 260ms var(--ease-enter) both; animation-delay: calc(1.9s + var(--k) * 60ms); }
@keyframes ba-fill { from { transform: scaleX(0); } }
.motion .ba:not(.is-played) .ba-time-of, .motion .ba:not(.is-played) .ba-time-why { opacity: 0; }
.ba.is-played .ba-time-of, .ba.is-played .ba-time-why { animation: ba-in 400ms var(--ease-enter) 2.6s both; }
@keyframes ba-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- home: minutes for one task at the end of the before and after rows, then the hours saved. */
@media (min-width: 560px) {
  .ba-row--before, .ba-row--after { grid-template-columns: 3.5rem minmax(0, 1fr) 5.5rem; }
  .ba-row--time .ba-time { grid-column: 2 / -1; }
}
@media (max-width: 559px) {
  .ba-row--before, .ba-row--after { grid-template-columns: minmax(0, 1fr) auto; }
  .ba-row--before .ba-track-wrap, .ba-row--after .ba-track-wrap { grid-column: 1 / -1; grid-row: 2; }
}
.ba-min { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
@media (max-width: 559px) { .ba-min { flex-direction: row; align-items: baseline; gap: 0.375rem; } }
.ba-min-n { font-size: 1.25rem; line-height: 2.25rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text-highlighted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 559px) { .ba-min-n { font-size: 1rem; line-height: 1.25rem; } }
.ba-row--before .ba-min-n { color: var(--warning-text); }
.ba-min-per { font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); white-space: nowrap; }
.motion .ba:not(.is-played) .ba-min { opacity: 0; }
.ba.is-played .ba-row--before .ba-min { animation: ba-in 400ms var(--ease-enter) 0.7s both; }
.ba.is-played .ba-row--after .ba-min { animation: ba-in 400ms var(--ease-enter) 1.4s both; }

/* ---------- home: "More we have built" says these are real and running. */
.real-lead { margin-bottom: 0.25rem; font-size: 1.5rem; line-height: 2rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text-highlighted); }
.real .prose { margin-bottom: 1.25rem; }
.live { display: inline-flex; align-items: center; gap: 0.3125rem; margin-left: 0.5rem; font-weight: 500; color: var(--success); }
.live-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent); }

/* ---------- home: your turn. Our question in a bubble, their bubble typing, two big ways to answer. */
.btn--lg { min-height: 2.75rem; padding: 0.5rem 1.125rem; font-size: 0.9375rem; line-height: 1.375rem; }
.turn-box { padding: 1.25rem; border-radius: var(--radius-xl); background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--border); }
@media (min-width: 560px) { .turn-box { padding: 1.75rem; } }
.turn-chat { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.turn-msg { max-width: 22rem; padding: 0.625rem 0.875rem; border-radius: 1rem; font-size: 0.9375rem; line-height: 1.375rem; text-wrap: pretty; }
.turn-msg--us { justify-self: start; border-bottom-left-radius: 0.25rem; background: var(--bg); color: var(--text-highlighted); box-shadow: inset 0 0 0 1px var(--border-accented); }
.turn-msg--you { justify-self: end; min-width: 5.5rem; border-bottom-right-radius: 0.25rem; background: var(--warning-bg); box-shadow: inset 0 0 0 1.5px var(--warning-border); }
.turn-who { display: block; margin-bottom: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--text-dimmed); }
.turn-msg--you .turn-who { color: var(--warning-text); }
.turn-dots { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.375rem; }
.turn-dots i { width: 0.4375rem; height: 0.4375rem; border-radius: 999px; background: var(--warning-text); opacity: 0.45; }
.motion .turn-box:not(.is-on) .turn-msg--you { opacity: 0; transform: translateY(6px) scale(0.96); }
.turn-msg--you { transform-origin: right bottom; transition: opacity 300ms var(--ease-enter) 400ms, transform 300ms var(--ease-enter) 400ms; }
.turn-box.is-on .turn-dots i { animation: turn-dot 1.1s ease-in-out 0.8s 3 both; }
.turn-box.is-on .turn-dots i:nth-child(2) { animation-delay: 0.95s; }
.turn-box.is-on .turn-dots i:nth-child(3) { animation-delay: 1.1s; }
@keyframes turn-dot { 0%, 60%, 100% { opacity: 0.45; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.turn-lead { margin-bottom: 0.25rem; font-size: 1.75rem; line-height: 2.25rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text-highlighted); }
.turn-hints { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.turn-hints li { padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--bg); font-size: 0.8125rem; line-height: 1.25rem; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-accented); }
.turn .voice { margin-top: 1.5rem; }
.turn .voice-controls { flex-wrap: wrap; }
.turn .voice-toggle { justify-content: center; }
@media (max-width: 559px) { .turn .voice-controls .btn { flex: 1 1 100%; } .turn .voice-time:empty { display: none; } }

/* ---------- home: the short sum. 10 min × 6 people × 220 days, then the year. */
.eq { display: grid; gap: 1rem; margin-top: 1rem; }
.eq-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.eq-part { display: grid; gap: 0.125rem; }
.eq-n { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: var(--text-highlighted); }
.eq-k { font-size: 0.8125rem; line-height: 1.25rem; color: var(--text-muted); }
.eq-part--sum .eq-n { color: var(--warning-text); }
.eq-part--sum .eq-k { color: var(--text-highlighted); }
.motion .eq:not(.is-played) .eq-part { opacity: 0; transform: translateY(6px); }
.eq.is-played .eq-part { animation: ba-in 420ms var(--ease-enter) both; animation-delay: calc(var(--i) * 380ms); }
.motion .eq:not(.is-played) .year-cell > span { transform: scaleX(0); }
.eq.is-played .year-cell > span { animation: ba-fill 220ms var(--ease-enter) both; animation-delay: calc(1.3s + var(--k) * 90ms); transition: none; }

/* ---------- playground */
.pg-sec .section-h { color: var(--text-highlighted); font-weight: 500; }
.pg-team { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.pg-team .stepper { flex: 0 0 auto; }
.pg-team .stepper-row .input { width: 4.5rem; }
.pg-people { display: flex; flex-wrap: wrap; gap: 0.375rem; flex: 1 1 14rem; min-height: 2rem; }
.pg-person, .pg-more {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--bg-muted); color: var(--text-highlighted); box-shadow: inset 0 0 0 1px var(--border-accented);
}
.pg-more { width: auto; padding-inline: 0.5rem; font-size: 0.75rem; }
.motion .pg-person.is-new { animation: pg-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes pg-pop { from { opacity: 0; transform: scale(0.4) translateY(6px); } }

.pg-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pg-chip {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0.375rem 0.75rem 0.375rem 0.625rem; border: 0;
  border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 0.875rem; line-height: 1.25rem; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-control); transition: background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, transform var(--dur-ui) var(--ease-enter);
}
@media (hover: hover) { .pg-chip:hover { background: var(--bg-muted); } }
.pg-chip:active { transform: scale(0.96); }
.pg-chip[aria-pressed="true"] { background: var(--warning-bg); color: var(--warning-text); box-shadow: inset 0 0 0 1.5px var(--warning-border); }
.pg-chip--own { color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-control); border: 0; }
.pg-chip:disabled { opacity: 0.5; cursor: not-allowed; }

.pg-list { display: grid; gap: 0.5rem; margin-top: 1rem; }
.pg-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head x" "nums nums"; align-items: center; gap: 0.5rem;
  padding: 0.625rem 0.5rem 0.625rem 0.75rem; border-radius: var(--radius-xl); background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--border);
}
.pg-row-head { grid-area: head; }
.pg-row-nums { grid-area: nums; }
.pg-x { grid-area: x; }
.motion .pg-row.is-new { animation: pg-row-in 360ms var(--ease-enter) both; }
@keyframes pg-row-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.pg-row-head { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.pg-row-name { flex: 1; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--text-highlighted); }
.pg-name { flex: 1; }
.pg-x { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; color: var(--text-dimmed); }
.pg-row-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-muted); }
.pg-step { display: inline-flex; align-items: center; gap: 0.125rem; }
.pg-step .input { width: 3.25rem; padding-inline: 0.25rem; text-align: center; -moz-appearance: textfield; }
.pg-step .input::-webkit-inner-spin-button, .pg-step .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pg-step .stepper-btn { width: 2rem; height: 2rem; }
@media (pointer: coarse) { .pg-step .stepper-btn { width: 2.5rem; height: 2.5rem; } }
.pg-row-sum { margin-left: auto; padding-right: 0.25rem; text-align: right; font-weight: 500; color: var(--text-highlighted); }
.pg-empty { margin-top: 1rem; }

.pg-result { display: grid; gap: 1.25rem; }
.pg-daybar { display: flex; }
.pg-seg {
  flex: 0 0 var(--w); height: 100%; background: var(--warning-border); box-shadow: inset -1px 0 0 var(--warning-text);
  transition: flex-basis 320ms var(--ease-enter);
}
.pg-seg--1 { background: color-mix(in oklch, var(--warning-border) 65%, var(--bg)); }
.pg-seg--2 { background: color-mix(in oklch, var(--warning-border) 82%, var(--warning-text)); }
.pg-daybar.is-over .pg-seg { box-shadow: inset -1px 0 0 var(--warning-text); }
.is-over .pg-result .year-cell > span { background: var(--warning-text); }
.pg-result .year-cell > span { transition: transform 260ms var(--ease-enter) calc(var(--k) * 8ms); }
.pg-same { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
.pg-fun { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
@media (min-width: 640px) { .pg-fun { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-fun li { display: grid; align-content: start; gap: 0.25rem; padding: 0.875rem 1rem; border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--border-accented); }
.pg-fun-n { font-size: 1.5rem; line-height: 2rem; font-weight: 500; letter-spacing: -0.02em; color: var(--warning-text); }
.pg-fun-t { font-size: 0.8125rem; line-height: 1.25rem; color: var(--text-muted); }
.pg-note { margin-top: 1rem; }
.pg-job { margin-top: 1.5rem; }
.pg-float {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; align-items: baseline; gap: 0.375rem;
  padding: 0.5rem 0.875rem; border-radius: 999px; background: var(--bg-inverted); color: var(--text-inverted); font-size: 0.8125rem; text-decoration: none;
  box-shadow: 0 6px 20px -6px oklch(0 0 0 / 0.35); opacity: 0; pointer-events: none; transform: translate(-50%, 0.75rem);
  transition: opacity 200ms var(--ease-enter), transform 260ms var(--ease-enter);
}
.pg-float .mono { font-size: 0.9375rem; font-weight: 500; color: var(--warning-border); }
.pg-float.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.copy-fallback { display: grid; gap: 0.375rem; margin-top: 0.75rem; }

/* ---------- How it works, read top to bottom: what you have (1) on top, what you get (3) at the bottom.
   The layers build downwards, each one dropping into place. */
.lx-p1 { --z: calc(var(--gap) * 2); }
.lx-p3 { --z: 0px; background: var(--bg); }
.lx-p1 { background: var(--bg-muted); }
.lx-scene .lx-plane:not(.is-on) { transform: translateZ(calc(var(--z) + 1rem)); }
.lx-post { transform: rotateX(-90deg); }

/* ---------- intro (onmax.me .enter): first page view per session, first-screen blocks only */
.intro .enter { animation: enter 480ms var(--ease-enter) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
/* Blur only where the blocks are small enough to blur cheaply. */
@media (min-width: 640px) { .intro .enter { animation-name: enter-blur; } }
@keyframes enter-blur { from { opacity: 0; filter: blur(4px); transform: translateY(8px); } }

/* ---------- touch: 44px targets */
.hit { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
@media (pointer: coarse) {
  .play, .icon-btn { width: 2.75rem; height: 2.75rem; }
  .scenes button { min-height: 2.75rem; }
  details.disclosure summary { padding-block: 0.75rem; margin-block: -0.375rem; }
  input.input, select.input { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}