/* Daylight — generated by packages/design/apply.mjs from tokens.json classic and components.css (S-858). Do not edit:
   change tokens.json or components.css and run apply.mjs. Light on :root; .dark is the retired classic dark set (unused). */
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/geist/geist-sans-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --background: 240 20% 98%;
  --background-elevated: 240 14% 95%;
  --foreground: 240 14% 9%;
  --card: 0 0% 100%;
  --card-foreground: 240 14% 9%;
  --muted: 240 12% 96%;
  --muted-foreground: 240 6% 39%;
  --accent: 224 90% 50%;
  --accent-foreground: 0 0% 100%;
  --accent-soft: 224 100% 96%;
  --primary: 240 14% 9%;
  --primary-foreground: 0 0% 100%;
  --primary-hover: 240 9% 24%;
  --border: 240 10% 91%;
  --border-strong: 240 8% 84%;
  --input: 240 6% 54%;
  --ring: 224 90% 56%;
  --success: 158 88% 23%;
  --success-soft: 150 62% 95%;
  --warning: 28 92% 31%;
  --warning-soft: 42 96% 93%;
  --destructive-soft: 352 92% 96%;
  --innovate-red: 3 100% 61%;
  --shadow-hair: 0 1px 0 0 rgb(16 16 26 / 0.04);
  --shadow-card: 0 1px 2px rgb(16 16 26 / 0.04), 0 1px 1px rgb(16 16 26 / 0.02);
  --shadow-lift: 0 2px 4px -1px rgb(16 16 26 / 0.05), 0 12px 28px -8px rgb(16 16 26 / 0.12);
  --shadow-hero: 0 1px 2px rgb(16 16 26 / 0.04), 0 16px 40px -12px rgb(16 16 26 / 0.12), 0 40px 80px -32px rgb(16 16 26 / 0.14);
  --shadow-rail: 8px 0 24px -16px rgb(16 16 26 / 0.06);
  --aurora-1: 224 90% 62%;
  --aurora-2: 28 100% 65%;
  --aurora-3: 280 70% 60%;
  --destructive: 350 76% 42%;
  --destructive-foreground: 0 0% 100%;
  --font-sans: 'Geist Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius-card: 14px;
  --radius-button: 10px;
  --radius-input: 10px;
  --radius-nav: 8px;
  --radius-code: 5px;
  --radius-pill: 9999px;
  --text-display: 600 3.5rem/1 var(--font-sans);
  --tracking-display: -0.035em;
  --text-title: 600 1.5rem/2rem var(--font-sans);
  --tracking-title: -0.022em;
  --text-heading: 600 1.125rem/1.625rem var(--font-sans);
  --tracking-heading: -0.014em;
  --text-subheading: 600 1rem/1.5rem var(--font-sans);
  --tracking-subheading: -0.01em;
  --text-body: 400 0.9375rem/1.5rem var(--font-sans);
  --tracking-body: -0.003em;
  --text-small: 400 0.8125rem/1.25rem var(--font-sans);
  --tracking-small: 0em;
  --text-label: 500 0.75rem/1rem var(--font-sans);
  --tracking-label: 0.01em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
  --dur-reveal: 520ms;
  --stagger: 45ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --wash: radial-gradient(60% 100% at 12% 0%, hsl(var(--aurora-1) / 0.09), transparent 72%), radial-gradient(48% 90% at 92% 0%, hsl(var(--aurora-2) / 0.08), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --stagger: 0ms;
  }
}
.dark {
  --background: 220 18% 7%;
  --background-elevated: 220 16% 10%;
  --foreground: 220 14% 92%;
  --card: 220 16% 11%;
  --card-foreground: 220 14% 92%;
  --muted: 220 14% 16%;
  --muted-foreground: 220 9% 62%;
  --accent: 217 91% 66%;
  --accent-foreground: 220 18% 7%;
  --primary: 217 91% 66%;
  --primary-foreground: 220 18% 7%;
  --border: 220 14% 18%;
  --border-strong: 220 14% 25%;
  --input: 220 9% 45%;
  --ring: 217 91% 70%;
  --innovate-red: 3 100% 65%;
  --shadow-hair: 0 1px 0 0 rgb(0 0 0 / 0.45);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px -2px rgb(0 0 0 / 0.45);
  --shadow-lift: 0 4px 16px -4px rgb(0 0 0 / 0.55), 0 12px 32px -12px rgb(0 0 0 / 0.6);
  --shadow-hero: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 36px -8px rgb(0 0 0 / 0.55), 0 32px 72px -24px rgb(0 0 0 / 0.65);
  --shadow-rail: 8px 0 24px -16px rgb(0 0 0 / 0.5);
  --aurora-1: 217 91% 65%;
  --aurora-2: 28 100% 65%;
  --aurora-3: 280 70% 65%;
}
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 55% at 14% 12%, hsl(var(--aurora-1) / 0.20), transparent 70%),
    radial-gradient(46% 46% at 86% 22%, hsl(var(--aurora-2) / 0.16), transparent 70%),
    radial-gradient(52% 50% at 54% 96%, hsl(var(--aurora-1) / 0.12), transparent 70%);
  filter: saturate(115%);
  animation: aurora-drift 32s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.dark .aurora-bg {
  background:
    radial-gradient(42% 55% at 18% 18%, hsl(var(--aurora-1) / 0.34), transparent 70%),
    radial-gradient(48% 45% at 82% 30%, hsl(var(--aurora-2) / 0.22), transparent 70%),
    radial-gradient(50% 55% at 50% 92%, hsl(var(--aurora-3) / 0.28), transparent 70%);
}
@keyframes aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(2%, -1%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-bg { animation: none; }
}
/* Daylight components (S-858, docs/design/OVERHAUL.md). Hand-written; apply.mjs appends this file to classic.css.
   Tokens only: every colour is hsl(var(--token)), every size a token or a 4 px step. It loads nothing of its own and has no dark set.
   Elevation is declared once: a hairline for what sits on the page, a shadow only for what floats. */

/* ---- base ---------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { border-color: hsl(var(--border)); }
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; position: relative; color: hsl(var(--foreground)); background: hsl(var(--background)); font: var(--text-body); letter-spacing: var(--tracking-body); font-feature-settings: "ss01", "cv11"; overflow-wrap: break-word; }
::selection { background: hsl(var(--accent-soft)); color: hsl(var(--foreground)); }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1 { font: var(--text-title); letter-spacing: var(--tracking-title); }
h2 { font: var(--text-heading); letter-spacing: var(--tracking-heading); }
h3, h4 { font: var(--text-subheading); letter-spacing: var(--tracking-subheading); }
p { text-wrap: pretty; }
a { color: hsl(var(--accent)); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: hsl(var(--foreground)); }
b, strong { font-weight: 600; }
small { font: var(--text-small); }
code, kbd, samp, pre { font-family: var(--font-code); }
code { font-size: 0.875em; padding: 2px 5px; border-radius: var(--radius-code); background: hsl(var(--muted)); color: hsl(var(--foreground)); }
hr { height: 1px; margin: var(--space-6) 0; border: 0; background: hsl(var(--border)); }
time, table, .tabular { font-variant-numeric: tabular-nums; }
input, select, textarea, button { font: inherit; letter-spacing: inherit; }

/* ---- type helpers -------------------------------------------------------------------------------------------- */
.text-display { font: var(--text-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.text-title { font: var(--text-title); letter-spacing: var(--tracking-title); }
.text-heading { font: var(--text-heading); letter-spacing: var(--tracking-heading); }
.text-small { font: var(--text-small); }
.text-label { font: var(--text-label); letter-spacing: var(--tracking-label); }
.text-muted { color: hsl(var(--muted-foreground)); }

/* ---- wordmark: lowercase, the innovate-red dot (the only place that red is used) ------------------------------- */
.brand { margin: 0; font: 600 1.25rem/1 var(--font-sans); letter-spacing: -0.035em; }
.brand a { color: hsl(var(--foreground)); text-decoration: none; }
.brand-dot { color: hsl(var(--innovate-red)); }

/* ---- buttons: ink primary, hairline secondary, ghost; 120 ms, a 1 px press ------------------------------------- */
button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 36px; padding: 0 14px; border: 1px solid hsl(var(--input)); border-radius: var(--radius-button); background: hsl(var(--card)); color: hsl(var(--foreground)); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
button:hover { background: hsl(var(--muted)); border-color: hsl(var(--foreground)); }
button:active { transform: translateY(1px); }
button[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4); border: 1px solid hsl(var(--primary)); border-radius: var(--radius-button); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:hover { background: hsl(var(--primary-hover)); border-color: hsl(var(--primary-hover)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-primary { border: 1px solid hsl(var(--primary)); border-radius: var(--radius-button); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: 0.5rem 1rem; font-weight: 500; transition: background-color var(--dur-fast) var(--ease-out); }
.btn-primary:hover { background: hsl(var(--primary-hover)); color: hsl(var(--primary-foreground)); }
.btn-secondary, .btn.secondary { border-color: hsl(var(--input)); background: hsl(var(--card)); color: hsl(var(--foreground)); }
.btn-secondary:hover, .btn.secondary:hover { border-color: hsl(var(--foreground)); background: hsl(var(--muted)); color: hsl(var(--foreground)); box-shadow: none; }
.btn-ghost { border: 1px solid hsl(var(--border)); border-radius: var(--radius-button); background: transparent; color: hsl(var(--foreground)); padding: 0.5rem 1rem; font-weight: 500; transition: background-color var(--dur-fast) var(--ease-out); }
.btn-ghost:hover { background: hsl(var(--muted)); box-shadow: none; }
.btn-danger { border-color: hsl(var(--destructive)); background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.btn-sm { min-height: 32px; padding: 0 var(--space-3); font-size: 0.8125rem; }
.btn-lg { min-height: 48px; padding: 0 var(--space-5); font-size: 0.9375rem; }
.btn-block { display: flex; width: 100%; }

/* ---- fields: label above, 3:1 edge, error below --------------------------------------------------------------- */
label { font-size: 0.8125rem; font-weight: 500; line-height: 1.25rem; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="url"], input[type="number"], input:not([type]), textarea, select { display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid hsl(var(--input)); border-radius: var(--radius-input); background: hsl(var(--card)); color: hsl(var(--foreground)); caret-color: hsl(var(--accent)); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
input:hover, textarea:hover, select:hover { border-color: hsl(var(--foreground)); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; border-color: hsl(var(--accent)); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: hsl(var(--destructive)); }
::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }
textarea { min-height: 96px; resize: vertical; }
.field { display: grid; gap: 6px; }
.field-hint { margin: 0; color: hsl(var(--muted-foreground)); font: var(--text-small); }
.field-error { margin: 0; color: hsl(var(--destructive)); font: var(--text-small); }
@media (max-width: 600px) { input, textarea, select { font-size: 1rem; } }

/* ---- chips (filters, links) and badges (a status: dot + word) -------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 var(--space-3); border: 1px solid hsl(var(--input)); border-radius: var(--radius-pill); background: hsl(var(--card)); color: hsl(var(--muted-foreground)); font-size: 0.8125rem; font-weight: 500; line-height: 1rem; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.chip:hover { border-color: hsl(var(--foreground)); background: hsl(var(--card)); color: hsl(var(--foreground)); }
.chip.on, .chip[aria-current="true"] { border-color: hsl(var(--accent)); background: hsl(var(--accent-soft)); color: hsl(var(--accent)); }
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 9px 0 8px; border-radius: var(--radius-pill); background: hsl(var(--muted)); color: hsl(var(--foreground)); font-size: 0.75rem; font-weight: 500; line-height: 1rem; white-space: nowrap; }
.badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: hsl(var(--success-soft)); color: hsl(var(--success)); }
.badge-warning { background: hsl(var(--warning-soft)); color: hsl(var(--warning)); }
.badge-danger { background: hsl(var(--destructive-soft)); color: hsl(var(--destructive)); }
.badge-info { background: hsl(var(--accent-soft)); color: hsl(var(--accent)); }

/* ---- navigation: tabs; the current one is a white pill that slides between pages ------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.tab { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--space-3); border-radius: var(--radius-nav); color: hsl(var(--muted-foreground)); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.tab:hover { background: hsl(var(--background-elevated)); color: hsl(var(--foreground)); }
.tab.on, .tab[aria-current="page"] { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 0 0 1px hsl(var(--border-strong)), var(--shadow-card); }

/* ---- surfaces -------------------------------------------------------------------------------------------------- */
.card { border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); background: hsl(var(--card)); }
.card-pad { padding: var(--space-6); }
.card-base { border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); background: hsl(var(--card)); box-shadow: var(--shadow-card); }
.card-interactive { transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.card-interactive:hover { border-color: hsl(var(--border-strong)); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.panel { border-radius: var(--radius-card); background: hsl(var(--muted)); }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); margin: 0 0 var(--space-6); }
.page-title { margin: 0; font: var(--text-title); letter-spacing: var(--tracking-title); }
.page-sub { margin: var(--space-1) 0 0; color: hsl(var(--muted-foreground)); }

/* ---- data: stat tiles, progress, tables ------------------------------------------------------------------------ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--space-3); }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px var(--space-4); border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); background: hsl(var(--card)); }
.stat-label { color: hsl(var(--muted-foreground)); font: var(--text-label); letter-spacing: var(--tracking-label); }
.stat-value { font-size: 1.5rem; font-weight: 600; line-height: 2rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-hint { color: hsl(var(--muted-foreground)); font: var(--text-small); }
.progress { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: hsl(var(--background-elevated)); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: hsl(var(--accent)); transform-origin: left center; }
.progress.done > span { background: hsl(var(--success)); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--text-small); }
th { padding: 10px 14px; border-bottom: 1px solid hsl(var(--border-strong)); color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 600; line-height: 1rem; letter-spacing: 0.01em; text-align: left; white-space: nowrap; }
td { padding: 12px 14px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
tbody tr:hover { background: hsl(var(--muted)); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); background: hsl(var(--card)); }

/* ---- states: empty, loading, notices, toast -------------------------------------------------------------------- */
.empty { margin: 0; padding: var(--space-6); border: 1px dashed hsl(var(--border-strong)); border-radius: var(--radius-card); color: hsl(var(--muted-foreground)); }
.skeleton { position: relative; overflow: hidden; border-radius: var(--radius-code); background: hsl(var(--background-elevated)); color: transparent; user-select: none; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, hsl(var(--card) / 0.75), transparent); }
.notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--space-4); padding: var(--space-3) 14px; border: 1px solid hsl(var(--border-strong)); border-radius: var(--radius-button); background: hsl(var(--muted)); color: hsl(var(--foreground)); overflow-wrap: anywhere; }
.notice-info { border-color: hsl(var(--accent)); background: hsl(var(--accent-soft)); }
.notice-success { border-color: hsl(var(--success)); background: hsl(var(--success-soft)); }
.notice-warning { border-color: hsl(var(--warning)); background: hsl(var(--warning-soft)); }
.notice-danger { border-color: hsl(var(--destructive)); background: hsl(var(--destructive-soft)); }
.toast { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 40; max-width: min(420px, calc(100vw - 32px)); padding: var(--space-3) var(--space-4); border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: var(--shadow-lift); }

/* ---- disclosure: a chevron that turns ------------------------------------------------------------------------- */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary:not(.btn)::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 2px 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur) var(--ease-out); }
details[open] > summary:not(.btn)::before { transform: rotate(45deg); }

/* ---- the page wash (see tokens.json classic.wash) --------------------------------------------------------------- */
.wash { position: fixed; inset: 0 0 auto 0; z-index: -1; height: 560px; pointer-events: none; background: var(--wash); }

/* ---- motion: one reveal on load, a grow for progress, a cross-fade between pages; all of it off when reduced ----- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes wash-drift { to { opacity: 0.3; transform: translate3d(0, -160px, 0); } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur); animation-timing-function: var(--ease-out); }
  .tab.on, .tab[aria-current="page"] { view-transition-name: tab-current; }
  ::view-transition-group(tab-current) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease-out); }
  .reveal > * { animation: rise var(--dur-reveal) var(--ease-out) backwards; }
  .reveal > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
  .reveal > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
  .reveal > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
  .reveal > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
  .reveal > :nth-child(n + 6) { animation-delay: calc(var(--stagger) * 5); }
  .progress > span { animation: grow 720ms var(--ease-out) 120ms backwards; }
  .skeleton::after { animation: shimmer 1400ms var(--ease-in-out) infinite; }
  @supports (animation-timeline: scroll()) {
    .wash { animation: wash-drift linear both; animation-timeline: scroll(root block); animation-range: 0 640px; }
  }
}