/* Creator Factory design system
   Single stylesheet for the public site and the app. No framework.
   Sections: 1 tokens, 2 reset, 3 type, 4 browser surfaces, 5 layout,
   6 components, 7 public shell, 8 app shell, 9 motion, 10 print. */

/* 1. Tokens */
:root {
  --cf-bg: #07070A;
  --cf-surface: #0F0D14;
  --cf-surface-raised: #171221;
  --cf-text: #F7F5FB;
  --cf-text-muted: #ABA4B6;
  --cf-purple: #8B5CF6;
  --cf-purple-bright: #A855F7;
  --cf-purple-soft: #C4B5FD;
  --cf-border: #2B2138;
  --cf-success: #34D399;
  --cf-warning: #F59E0B;
  --cf-danger: #FB7185;

  /* Derived */
  --cf-purple-ink: #201834;              /* purple at 14% over surface */
  --cf-purple-ink-a: rgba(139, 92, 246, .14);
  --cf-border-strong: #3F3254;
  --cf-text-faint: #8C8597;              /* 5.4:1 on surface, 5.1:1 on raised */
  --cf-on-purple: #0B0712;               /* 4.7:1 on purple */
  --cf-ring: 0 0 0 3px rgba(139, 92, 246, .45);
  --cf-shadow: 0 24px 48px -24px rgba(12, 6, 30, .8);
  --cf-shadow-sm: 0 8px 24px -12px rgba(12, 6, 30, .8);

  /* Type */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(2.5rem, 11vw, 4rem);
  --fs-h2: clamp(2rem, 3.6vw, 3rem);
  --fs-h3: 1.5rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  /* Shape */
  --r-pill: 999px;
  --r-input: 12px;
  --r-sheet: 20px;
  --r-frame: 24px;
  --r-stamp: 6px;

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
  --section: 64px;
  --gutter: 20px;
  --gap: 16px;

  /* Layers and motion */
  --z-nav: 50; --z-drawer: 60; --z-dialog: 70; --z-toast: 80;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-hover: 180ms; --t-press: 120ms; --t-overlay: 260ms; --t-reveal: 360ms;

  color-scheme: dark;
}
@media (min-width: 768px) {
  :root { --fs-h1: clamp(3.5rem, 7vw, 6.5rem); --section: 96px; --gutter: 32px; --gap: 24px; }
}

/* 2. Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cf-bg);
  color: var(--cf-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
dialog { padding: 0; border: 0; background: none; color: inherit; }
[hidden] { display: none !important; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
hr { border: 0; border-top: 1px solid var(--cf-border); margin: 0; }

/* 3. Type */
h1, h2, h3, h4, .cf-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
  padding-bottom: .06em;                  /* room for descenders at tight leading */
}
h1, .cf-h1 { font-size: var(--fs-h1); }
h2, .cf-h2 { font-size: var(--fs-h2); line-height: 1.08; }
h3, .cf-h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
h4, .cf-h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
p { text-wrap: pretty; }
.cf-lead { font-size: 1.125rem; line-height: 1.55; color: var(--cf-text-muted); max-width: 62ch; }
.cf-small { font-size: var(--fs-small); line-height: 1.5; }
.cf-micro, .cf-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cf-text-muted);
}
.cf-muted { color: var(--cf-text-muted); }
.cf-faint { color: var(--cf-text-faint); }
.cf-num, .cf-table, .cf-counter, .cf-stat, .cf-event__time, [data-count], time {
  font-variant-numeric: tabular-nums;
}
.cf-measure { max-width: 68ch; }
strong { font-weight: 600; }
.cf-prose { max-width: 68ch; }
.cf-prose > * + * { margin-top: 1em; }
.cf-prose h2 { margin-top: 2em; font-size: 1.75rem; }
.cf-prose h3 { margin-top: 1.6em; }
.cf-prose ul { list-style: disc; padding-left: 1.25em; }
.cf-prose ol { list-style: decimal; padding-left: 1.25em; }
.cf-prose a, .cf-link { color: var(--cf-purple-soft); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.cf-prose a:hover, .cf-link:hover { color: var(--cf-text); }

/* 4. Browser surfaces */
::selection { background: rgba(139, 92, 246, .38); color: var(--cf-text); }
html { caret-color: var(--cf-purple-bright); accent-color: var(--cf-purple); scrollbar-color: var(--cf-border-strong) var(--cf-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cf-bg); }
::-webkit-scrollbar-thumb { background: var(--cf-border-strong); border-radius: 999px; border: 2px solid var(--cf-bg); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cf-purple-bright); outline-offset: 2px; box-shadow: var(--cf-ring); border-radius: 4px; }
.cf-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cf-skip { position: absolute; left: 16px; top: -64px; z-index: 90; padding: 10px 16px; background: var(--cf-purple); color: var(--cf-on-purple); border-radius: var(--r-pill); font-weight: 600; }
.cf-skip:focus-visible { top: 16px; }
/* Focus ring follows the element's own shape */
.cf-btn:focus-visible, .cf-chip:focus-visible, .cf-nav__link:focus-visible, .cf-search .cf-input:focus-visible { border-radius: var(--r-pill); }
.cf-tab:focus-visible { border-radius: 8px 8px 0 0; }
.cf-side__link:focus-visible { border-radius: 10px; }
.cf-avatar:focus-visible, .cf-top__avatar:focus-visible { border-radius: 50%; }

/* 5. Layout: container, lattice, rhythm */
.cf-container { width: 100%; max-width: calc(1360px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.cf-container--narrow { max-width: calc(880px + var(--gutter) * 2); }
.cf-section { padding-block: var(--section); }
.cf-section--tight { padding-block: calc(var(--section) * .5); }
.cf-section > .cf-container > h2 { margin-bottom: var(--s-8); }
.cf-stack { display: flex; flex-direction: column; gap: var(--stack, var(--s-4)); }
.cf-stack--sm { --stack: var(--s-2); }
.cf-stack--lg { --stack: var(--s-8); }
.cf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.cf-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.cf-split { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.cf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.cf-grid > * { grid-column-end: span 12; min-width: 0; }
.cf-col-sm-6 { grid-column-end: span 6; }
.cf-col-sm-4 { grid-column-end: span 4; }
.cf-col-sm-3 { grid-column-end: span 3; }
@media (min-width: 768px) {
  .cf-col-1 { grid-column-end: span 1; }  .cf-col-2 { grid-column-end: span 2; }
  .cf-col-3 { grid-column-end: span 3; }  .cf-col-4 { grid-column-end: span 4; }
  .cf-col-5 { grid-column-end: span 5; }  .cf-col-6 { grid-column-end: span 6; }
  .cf-col-7 { grid-column-end: span 7; }  .cf-col-8 { grid-column-end: span 8; }
  .cf-col-9 { grid-column-end: span 9; }  .cf-col-10 { grid-column-end: span 10; }
  .cf-col-11 { grid-column-end: span 11; } .cf-col-12 { grid-column-end: span 12; }
  .cf-start-2 { grid-column-start: 2; } .cf-start-3 { grid-column-start: 3; }
  .cf-start-4 { grid-column-start: 4; } .cf-start-5 { grid-column-start: 5; }
  .cf-start-7 { grid-column-start: 7; } .cf-start-8 { grid-column-start: 8; }
  .cf-start-9 { grid-column-start: 9; }
}
@media (min-width: 1024px) {
  .cf-col-lg-3 { grid-column-end: span 3; } .cf-col-lg-4 { grid-column-end: span 4; }
  .cf-col-lg-5 { grid-column-end: span 5; } .cf-col-lg-6 { grid-column-end: span 6; }
  .cf-col-lg-7 { grid-column-end: span 7; } .cf-col-lg-8 { grid-column-end: span 8; }
  .cf-col-lg-9 { grid-column-end: span 9; }
}
.cf-rule { border: 0; border-top: 1px solid var(--cf-border); }
.cf-rule--strong { border-top-color: var(--cf-border-strong); }
.cf-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.cf-scroll-x > .cf-table { min-width: 640px; }

/* 6. Components */

/* 6.1 Sheet: the panel surface */
.cf-sheet {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--r-sheet);
  overflow: clip;
}
.cf-sheet__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--cf-border);
}
.cf-sheet__head h2, .cf-sheet__head h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.cf-sheet__meta { font-size: var(--fs-small); color: var(--cf-text-muted); font-variant-numeric: tabular-nums; }
.cf-sheet__body { padding: var(--s-5); }
.cf-sheet__body--flush { padding: 0; }
.cf-sheet__foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--cf-border); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.cf-sheet--raised { background: var(--cf-surface-raised); }
.cf-sheet--selectable { cursor: pointer; transition: border-color var(--t-hover), background var(--t-hover); }
.cf-sheet--selectable:hover { border-color: var(--cf-border-strong); }
.cf-sheet--selectable.is-selected, .cf-sheet--selectable:has(input:checked) { border-color: var(--cf-purple); background: var(--cf-purple-ink); }
.cf-sheet--selectable:has(input:focus-visible) { outline: 2px solid var(--cf-purple-bright); outline-offset: 2px; box-shadow: var(--cf-ring); }
.cf-sheet--locked { border-style: dashed; color: var(--cf-text-muted); }
.cf-sheet--locked .cf-sheet__head h2, .cf-sheet--locked .cf-sheet__head h3 { color: var(--cf-text-muted); }
@media (min-width: 768px) {
  .cf-sheet__head { padding: var(--s-6) var(--s-6) var(--s-5); }
  .cf-sheet__body { padding: var(--s-6); }
  .cf-sheet__foot { padding: var(--s-5) var(--s-6); }
  .cf-sheet__body--flush { padding: 0; }
}

/* 6.2 Sheet head: page header with day counter */
.cf-head { display: grid; gap: var(--s-6); padding-block: var(--s-8) var(--s-6); border-bottom: 1px solid var(--cf-border); }
.cf-head__title h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.cf-head__context { margin-top: var(--s-3); color: var(--cf-text-muted); max-width: 60ch; }
.cf-head__side { display: flex; flex-direction: column; gap: var(--s-2); }
.cf-head__meta { font-size: var(--fs-small); color: var(--cf-text-muted); font-variant-numeric: tabular-nums; }
.cf-counter { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; padding-bottom: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-counter small { font-size: 1rem; font-weight: 600; color: var(--cf-text-muted); letter-spacing: -.01em; }
@media (min-width: 768px) {
  .cf-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-block: var(--s-12) var(--s-8); }
  .cf-head__side { text-align: right; align-items: flex-end; }
}

/* 6.2b Hero sheet: first viewport as a sheet head, copy left, media right */
.cf-hero { display: grid; gap: var(--s-8); padding-block: var(--s-10) var(--s-12); }
.cf-hero__copy { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.cf-hero__copy .cf-lead { max-width: 52ch; }
.cf-hero__media { min-width: 0; position: relative; }
.cf-hero__media .cf-frame--wide { width: 100%; }
@media (min-width: 1024px) {
  .cf-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; padding-block: var(--s-16) var(--s-24); min-height: calc(100vh - 72px); }
  .cf-hero__media .cf-wall { height: 100%; min-height: 560px; }
}

/* 6.3 Info strip: one line of real state */
.cf-strip { border-top: 1px solid var(--cf-border); border-bottom: 1px solid var(--cf-border); display: flex; flex-direction: column; }
.cf-strip__item { padding: var(--s-3) 0; font-size: var(--fs-small); display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; min-width: 0; }
.cf-strip__item + .cf-strip__item { border-top: 1px solid var(--cf-border); }
.cf-strip__key { color: var(--cf-text-muted); }
.cf-strip__val { font-weight: 500; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .cf-strip { flex-direction: row; }
  .cf-strip__item { flex: 1 1 0; padding: var(--s-4) var(--s-5); }
  .cf-strip__item:first-child { padding-left: 0; }
  .cf-strip__item + .cf-strip__item { border-top: 0; border-left: 1px solid var(--cf-border); }
}

/* 6.4 Table: ruled rows, micro headers, tabular numbers */
.cf-table { width: 100%; font-size: var(--fs-small); }
.cf-table th { text-align: left; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-text-muted); padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--cf-border-strong); white-space: nowrap; }
.cf-table td { padding: 14px var(--s-3); border-bottom: 1px solid var(--cf-border); vertical-align: middle; }
.cf-table th:first-child, .cf-table td:first-child { padding-left: 0; }
.cf-table th:last-child, .cf-table td:last-child { padding-right: 0; }
.cf-sheet__body--flush .cf-table th:first-child, .cf-sheet__body--flush .cf-table td:first-child { padding-left: var(--s-5); }
.cf-sheet__body--flush .cf-table th:last-child, .cf-sheet__body--flush .cf-table td:last-child { padding-right: var(--s-5); }
.cf-table tbody tr:last-child td { border-bottom: 0; }
.cf-sheet__body--flush .cf-table tbody tr:last-child td { border-bottom: 0; }
.cf-table tbody tr { transition: background var(--t-hover); }
.cf-table tbody tr:hover { background: rgba(139, 92, 246, .06); }
.cf-table tbody tr.is-selected, .cf-table tbody tr[aria-selected="true"] { background: var(--cf-purple-ink); }
.cf-table tbody + tbody { border-top: 2px solid var(--cf-border-strong); }
.cf-table .cf-table__num, .cf-table td.cf-num, .cf-table th.cf-num { text-align: right; font-variant-numeric: tabular-nums; }
.cf-table__title { font-weight: 500; color: var(--cf-text); }
.cf-table__sub { display: block; color: var(--cf-text-muted); font-size: var(--fs-micro); margin-top: 2px; }
.cf-table tfoot td { font-weight: 600; border-top: 2px solid var(--cf-border-strong); border-bottom: 0; }
.cf-table--compact td { padding-block: var(--s-2); }
.cf-table .cf-frame { width: 40px; border-radius: 8px; }
.cf-table .cf-frame::before, .cf-table .cf-frame::after { display: none; }
@media (min-width: 768px) {
  .cf-sheet__body--flush .cf-table th:first-child, .cf-sheet__body--flush .cf-table td:first-child { padding-left: var(--s-6); }
  .cf-sheet__body--flush .cf-table th:last-child, .cf-sheet__body--flush .cf-table td:last-child { padding-right: var(--s-6); }
}
@media (max-width: 767px) {
  .cf-table--stack thead { display: none; }
  .cf-table--stack tbody, .cf-table--stack tr, .cf-table--stack td { display: block; }
  .cf-table--stack tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--cf-border); }
  .cf-table--stack tbody tr:last-child { border-bottom: 0; }
  .cf-table--stack td { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-1) 0; border: 0; text-align: left; }
  .cf-table--stack td > * { grid-column: 2; }
  .cf-table--stack td.cf-num, .cf-table--stack .cf-table__num { text-align: left; }
  .cf-table--stack td::before { content: attr(data-label); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-text-muted); padding-top: 3px; }
  .cf-table--stack td:not([data-label]) { grid-template-columns: 1fr; }
  .cf-table--stack td:not([data-label])::before { display: none; }
  .cf-table--stack tfoot { display: block; }
  .cf-table--stack tfoot tr { display: flex; justify-content: space-between; gap: var(--s-3); border-top: 2px solid var(--cf-border-strong); }
  .cf-sheet__body--flush .cf-table--stack tr { padding-inline: var(--s-5); }
  .cf-sheet__body--flush .cf-table--stack td, .cf-sheet__body--flush .cf-table--stack td:first-child, .cf-sheet__body--flush .cf-table--stack td:last-child { padding-inline: 0; }
}

/* 6.5 Scene row: assignment or collaboration line */
.cf-scenes { display: flex; flex-direction: column; }
.cf-scene { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "num main" "num outputs" "num meta"; gap: var(--s-2) var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--cf-border); align-items: start; }
.cf-scene:last-child { border-bottom: 0; }
.cf-scene__num { grid-area: num; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; color: var(--cf-text-muted); font-variant-numeric: tabular-nums; line-height: 1.3; }
.cf-scene__main { grid-area: main; min-width: 0; }
.cf-scene__title { font-weight: 600; font-size: 1rem; }
.cf-scene__sub { color: var(--cf-text-muted); font-size: var(--fs-small); }
.cf-scene__outputs { grid-area: outputs; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--fs-small); color: var(--cf-text-muted); }
.cf-scene__outputs li { display: inline-flex; align-items: center; gap: 6px; }
.cf-scene__outputs .ph { font-size: 16px; }
.cf-scene__outputs .is-done { color: var(--cf-text); }
.cf-scene__meta { grid-area: meta; display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); color: var(--cf-text-muted); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.cf-scene.is-selected { background: var(--cf-purple-ink); margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); }
@media (min-width: 768px) {
  .cf-scene { grid-template-columns: 56px minmax(0, 1fr) auto auto; grid-template-areas: "num main stamp due" "num outputs stamp due"; align-items: center; padding: var(--s-5) 0; }
  .cf-scene__meta { grid-area: due; display: contents; }
  .cf-scene__meta .cf-stamp { grid-area: stamp; }
  .cf-scene__meta time, .cf-scene__due { grid-area: due; text-align: right; white-space: nowrap; color: var(--cf-text-muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
}

/* 6.6 Stamp: boxed real state */
.cf-stamp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--r-stamp);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
  border: 1px solid var(--cf-text-muted); color: var(--cf-text-muted); background: rgba(171, 164, 182, .1);
  white-space: nowrap; vertical-align: middle;
}
.cf-stamp--purple { border-color: var(--cf-purple); color: var(--cf-purple-soft); background: rgba(139, 92, 246, .12); }
.cf-stamp--success { border-color: var(--cf-success); color: var(--cf-success); background: rgba(52, 211, 153, .1); }
.cf-stamp--warning { border-color: var(--cf-warning); color: var(--cf-warning); background: rgba(245, 158, 11, .1); }
.cf-stamp--danger { border-color: var(--cf-danger); color: var(--cf-danger); background: rgba(251, 113, 133, .1); }
.cf-stamp--muted { border-color: var(--cf-border-strong); color: var(--cf-text-muted); background: rgba(171, 164, 182, .06); }
.cf-stamp--lg { font-size: var(--fs-small); padding: 6px 12px; letter-spacing: .1em; }
.cf-stamp .ph { font-size: 14px; }
.cf-stamp.is-pressed { animation: cf-press 320ms var(--ease-out) both; }
@keyframes cf-press { from { transform: scale(1.08) rotate(3deg); opacity: .6; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* 6.7 Frame: media with corner marks */
.cf-frame { position: relative; overflow: hidden; border-radius: var(--r-frame); background: var(--cf-surface-raised); aspect-ratio: 9 / 16; isolation: isolate; }
.cf-frame--wide { aspect-ratio: 16 / 9; }
.cf-frame--square { aspect-ratio: 1 / 1; }
.cf-frame--portrait { aspect-ratio: 3 / 4; }
.cf-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 7, 10, .72), rgba(7, 7, 10, 0) 45%); pointer-events: none; z-index: 1; }
.cf-frame::before {
  content: ""; position: absolute; inset: 14px; pointer-events: none; z-index: 2;
  --m: var(--cf-purple);
  background:
    linear-gradient(var(--m), var(--m)) top left / 12px 2px,
    linear-gradient(var(--m), var(--m)) top left / 2px 12px,
    linear-gradient(var(--m), var(--m)) top right / 12px 2px,
    linear-gradient(var(--m), var(--m)) top right / 2px 12px,
    linear-gradient(var(--m), var(--m)) bottom left / 12px 2px,
    linear-gradient(var(--m), var(--m)) bottom left / 2px 12px,
    linear-gradient(var(--m), var(--m)) bottom right / 12px 2px,
    linear-gradient(var(--m), var(--m)) bottom right / 2px 12px;
  background-repeat: no-repeat;
}
.cf-frame--plain::before { display: none; }
.cf-frame--flat::after { display: none; }
.cf-frame__meta { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 3; font-size: var(--fs-small); font-weight: 500; line-height: 1.35; }
.cf-frame__meta span { display: block; color: var(--cf-text-muted); font-size: var(--fs-micro); font-weight: 400; }
.cf-figure { display: flex; flex-direction: column; gap: var(--s-3); }
.cf-figure figcaption { font-size: var(--fs-small); color: var(--cf-text-muted); display: flex; justify-content: space-between; gap: var(--s-3); }
.cf-figure figcaption strong { color: var(--cf-text); font-weight: 500; }
.cf-handle { display: inline-flex; align-items: center; gap: 6px; }
.cf-handle img { width: 16px; height: 16px; }

/* 6.8 Work wall: diagonal marquee of frames */
.cf-wall { position: relative; overflow: hidden; height: 100%; min-height: 420px; --wall-frame: 150px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.cf-wall__rows { position: absolute; inset: -20% -10%; display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); transform: rotate(-8deg); }
.cf-wall__row { display: flex; gap: var(--s-4); width: max-content; animation: cf-marquee 48s linear infinite; }
.cf-wall__row:nth-child(even) { animation-direction: reverse; animation-duration: 56s; }
.cf-wall__track { display: flex; gap: var(--s-4); }
.cf-wall .cf-frame { width: var(--wall-frame); flex: none; }
.cf-wall .cf-frame::after { display: none; }
.cf-wall.is-paused .cf-wall__row { animation-play-state: paused; }
@keyframes cf-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--s-2))); } }
@media (min-width: 768px) { .cf-wall { --wall-frame: 168px; } }

/* 6.9 Production line: the custody thread */
.cf-line { display: flex; flex-direction: column; gap: 0; }
.cf-line__node { position: relative; padding: 0 0 var(--s-6) 32px; min-width: 0; }
.cf-line__node:last-child { padding-bottom: 0; }
.cf-line__dot { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cf-border-strong); background: var(--cf-bg); z-index: 1; }
.cf-line__node::before { content: ""; position: absolute; left: 6px; top: 20px; bottom: 0; border-left: 1px dashed var(--cf-border-strong); }
.cf-line__node:last-child::before { display: none; }
.cf-line__node.is-done .cf-line__dot { background: var(--cf-purple); border-color: var(--cf-purple); }
.cf-line__node.is-done::before { border: 0; width: 2px; left: 6px; background: var(--cf-purple); transform-origin: top; }
.cf-line__node.is-current .cf-line__dot { border-color: var(--cf-purple-bright); background: var(--cf-purple-ink); box-shadow: 0 0 0 4px rgba(139, 92, 246, .2); }
.cf-line__node.is-locked { color: var(--cf-text-muted); }
.cf-line__node.is-locked .cf-line__dot { border-style: dashed; }
.cf-line__title { font-weight: 600; line-height: 1.3; }
.cf-line__text { font-size: var(--fs-small); color: var(--cf-text-muted); margin-top: 2px; }
.cf-line__text .cf-stamp { margin-top: 6px; }
.cf-line.is-in .cf-line__node.is-done::before { animation: cf-line-grow 460ms var(--ease-out) both; animation-delay: min(calc(var(--i, 0) * 70ms), 280ms); }
.cf-line.is-in .cf-line__node.is-current .cf-line__dot { animation: cf-node-pulse 900ms var(--ease-out) 1 both; animation-delay: min(calc(var(--i, 0) * 70ms), 280ms); }
@keyframes cf-line-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cf-node-pulse { 0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, .5); } 70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); } 100% { box-shadow: 0 0 0 4px rgba(139, 92, 246, .2); } }
@media (min-width: 768px) {
  .cf-line:not(.cf-line--vertical) { flex-direction: row; }
  .cf-line:not(.cf-line--vertical) .cf-line__node { flex: 1 1 0; padding: 30px var(--s-4) 0 0; }
  .cf-line:not(.cf-line--vertical) .cf-line__node:last-child { padding-right: 0; }
  .cf-line:not(.cf-line--vertical) .cf-line__dot { top: 0; left: 0; }
  .cf-line:not(.cf-line--vertical) .cf-line__node::before { top: 6px; left: 20px; right: 0; bottom: auto; border-left: 0; border-top: 1px dashed var(--cf-border-strong); }
  .cf-line:not(.cf-line--vertical) .cf-line__node.is-done::before { border: 0; height: 2px; width: auto; left: 20px; background: var(--cf-purple); transform-origin: left; }
  .cf-line:not(.cf-line--vertical).is-in .cf-line__node.is-done::before { animation-name: cf-line-grow-x; }
  @keyframes cf-line-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* 6.10 Buttons: pills */
.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 500; font-size: .9375rem; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; color: var(--cf-text); background: var(--cf-surface-raised);
  transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover), transform var(--t-press), opacity var(--t-hover);
  text-decoration: none; cursor: pointer; position: relative; user-select: none;
}
.cf-btn .ph { font-size: 20px; }
.cf-btn:hover { background: var(--cf-purple-ink); }
.cf-btn:active { transform: translateY(1px) scale(.985); }
.cf-btn:focus-visible { border-radius: var(--r-pill); }
.cf-btn--primary { background: var(--cf-purple); color: var(--cf-on-purple); font-weight: 600; }
.cf-btn--primary:hover { background: var(--cf-purple-bright); }
.cf-btn--secondary { background: transparent; border-color: var(--cf-border-strong); }
.cf-btn--secondary:hover { border-color: var(--cf-purple); background: var(--cf-purple-ink); }
.cf-btn--ghost { background: transparent; padding-inline: 14px; }
.cf-btn--ghost:hover { background: var(--cf-purple-ink); }
.cf-btn--danger { background: transparent; border-color: var(--cf-danger); color: var(--cf-danger); }
.cf-btn--danger:hover { background: rgba(251, 113, 133, .12); }
.cf-btn--lg { height: 52px; padding: 0 28px; font-size: 1rem; }
.cf-btn--sm { height: 36px; padding: 0 14px; font-size: var(--fs-small); }
.cf-btn--sm .ph { font-size: 16px; }
.cf-btn--icon { width: 44px; padding: 0; }
.cf-btn--icon.cf-btn--sm { width: 36px; }
.cf-btn--block { width: 100%; }
.cf-btn:disabled, .cf-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.cf-btn.is-loading { pointer-events: none; }
.cf-btn.is-loading .ph { display: none; }
.cf-btn.is-loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: cf-spin 700ms linear infinite; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
.cf-btn-group { display: inline-flex; border: 1px solid var(--cf-border-strong); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.cf-btn-group .cf-btn { height: 36px; border: 0; background: transparent; padding-inline: 14px; font-size: var(--fs-small); }
.cf-btn-group .cf-btn[aria-pressed="true"] { background: var(--cf-purple-ink); color: var(--cf-purple-soft); }

/* 6.11 Fields */
.cf-form { display: flex; flex-direction: column; gap: var(--s-5); }
.cf-form__row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .cf-form__row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.cf-fieldset { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-2); }
.cf-fieldset > legend { font-weight: 600; font-size: 1rem; padding-bottom: var(--s-2); }
.cf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-field__label { font-size: var(--fs-small); font-weight: 500; display: flex; justify-content: space-between; gap: var(--s-3); }
.cf-field__label .cf-field__optional { color: var(--cf-text-faint); font-weight: 400; }
.cf-input {
  width: 100%; min-height: 44px; padding: 10px 14px;
  background: var(--cf-surface-raised); border: 1px solid var(--cf-border); border-radius: var(--r-input);
  color: var(--cf-text); font-size: 1rem; line-height: 1.4;
  transition: border-color var(--t-hover), box-shadow var(--t-hover), background var(--t-hover);
}
.cf-input::placeholder { color: var(--cf-text-faint); }
.cf-input:hover { border-color: var(--cf-border-strong); }
.cf-input:focus-visible { outline: 2px solid var(--cf-purple-bright); outline-offset: 0; border-color: var(--cf-purple); box-shadow: var(--cf-ring); border-radius: var(--r-input); }
.cf-input:disabled { opacity: .5; cursor: not-allowed; }
.cf-input:read-only:not(select) { background: var(--cf-surface); color: var(--cf-text-muted); }
textarea.cf-input { min-height: 120px; resize: vertical; }
select.cf-input { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--cf-text-muted) 50%), linear-gradient(135deg, var(--cf-text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; cursor: pointer; }
.cf-field__help { font-size: var(--fs-small); color: var(--cf-text-muted); }
.cf-field__error { display: none; align-items: flex-start; gap: 6px; font-size: var(--fs-small); color: var(--cf-danger); }
.cf-field__error .ph { font-size: 16px; flex: none; margin-top: 2px; }
.cf-field.is-error .cf-field__error { display: flex; }
.cf-field.is-error .cf-input, .cf-input[aria-invalid="true"] { border-color: var(--cf-danger); }
.cf-field.is-error .cf-input:focus-visible { box-shadow: 0 0 0 3px rgba(251, 113, 133, .35); outline-color: var(--cf-danger); }
.cf-field.is-success .cf-input { border-color: var(--cf-success); }
.cf-input-wrap { position: relative; }
.cf-input-wrap .ph { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-size: 20px; color: var(--cf-text-muted); pointer-events: none; }
.cf-input-wrap .cf-input { padding-left: 42px; }
.cf-input-wrap--suffix .ph { left: auto; right: 14px; }
.cf-input-wrap--suffix .cf-input { padding-left: 14px; padding-right: 42px; }
.cf-search { position: relative; }
.cf-search .cf-input { padding-left: 42px; min-height: 40px; border-radius: var(--r-pill); }
.cf-search .ph { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-size: 20px; color: var(--cf-text-muted); pointer-events: none; }
.cf-check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-small); line-height: 1.5; cursor: pointer; }
.cf-check input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--cf-purple); cursor: pointer; }
.cf-check input:focus-visible { outline-offset: 2px; border-radius: 4px; }
.cf-check__text span { display: block; color: var(--cf-text-muted); }
.cf-check--boxed { padding: var(--s-3) var(--s-4); border: 1px solid var(--cf-border); border-radius: var(--r-input); transition: border-color var(--t-hover), background var(--t-hover); }
.cf-check--boxed:hover { border-color: var(--cf-border-strong); }
.cf-check--boxed:has(input:checked) { border-color: var(--cf-purple); background: var(--cf-purple-ink); }
.cf-toggle { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); cursor: pointer; }
.cf-toggle input { appearance: none; width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--cf-border-strong); position: relative; flex: none; transition: background var(--t-hover); cursor: pointer; margin: 0; }
.cf-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cf-text); transition: translate var(--t-hover) var(--ease-out); }
.cf-toggle input:checked { background: var(--cf-purple); }
.cf-toggle input:checked::after { translate: 18px 0; background: var(--cf-on-purple); }
.cf-toggle input:focus-visible { border-radius: var(--r-pill); }
.cf-toggle input:disabled { opacity: .4; cursor: not-allowed; }
.cf-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); text-align: center; padding: var(--s-8) var(--s-5); border: 1px dashed var(--cf-border-strong); border-radius: var(--r-input); background: var(--cf-surface-raised); color: var(--cf-text-muted); font-size: var(--fs-small); cursor: pointer; transition: border-color var(--t-hover), background var(--t-hover); position: relative; }
.cf-drop .ph { font-size: 28px; color: var(--cf-text-muted); }
.cf-drop strong { color: var(--cf-text); font-weight: 500; }
.cf-drop:hover, .cf-drop.is-over { border-color: var(--cf-purple); background: var(--cf-purple-ink); }
.cf-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cf-drop:has(input:focus-visible) { outline: 2px solid var(--cf-purple-bright); outline-offset: 2px; box-shadow: var(--cf-ring); }
.cf-drop__files { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-small); }
.cf-drop__file { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--cf-border); border-radius: 10px; }
.cf-drop__file .ph { font-size: 18px; color: var(--cf-text-muted); }
.cf-drop__file span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-code { display: flex; gap: var(--s-2); }
.cf-code .cf-input { width: 44px; height: 52px; padding: 0; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
@media (min-width: 400px) { .cf-code .cf-input { width: 48px; } }
.cf-form__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding-top: var(--s-2); }
.cf-form__status { font-size: var(--fs-small); color: var(--cf-danger); display: flex; align-items: center; gap: 6px; }
.cf-form__status:empty { display: none; }
.cf-notice { display: flex; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--cf-border); border-radius: var(--r-input); font-size: var(--fs-small); background: var(--cf-surface); }
.cf-notice .ph { font-size: 20px; flex: none; color: var(--cf-text-muted); }
.cf-notice--warning { border-color: rgba(245, 158, 11, .5); }
.cf-notice--warning .ph { color: var(--cf-warning); }
.cf-notice--danger { border-color: rgba(251, 113, 133, .5); }
.cf-notice--danger .ph { color: var(--cf-danger); }
.cf-notice--success { border-color: rgba(52, 211, 153, .5); }
.cf-notice--success .ph { color: var(--cf-success); }
.cf-notice--purple { border-color: var(--cf-purple); background: var(--cf-purple-ink); }
.cf-notice--purple .ph { color: var(--cf-purple-soft); }

/* 6.12 Event line */
.cf-events { display: flex; flex-direction: column; }
.cf-event { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--cf-border); font-size: var(--fs-small); align-items: baseline; }
.cf-event:last-child { border-bottom: 0; }
.cf-event__time { color: var(--cf-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-event__text { min-width: 0; }
.cf-event__text strong { font-weight: 500; }
.cf-event__text a { color: var(--cf-purple-soft); }
.cf-event--wide { grid-template-columns: 120px minmax(0, 1fr); }
.cf-event.is-unread .cf-event__text { color: var(--cf-text); font-weight: 500; }

/* 6.13 Progress: hairline with a purple segment */
.cf-progress { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.cf-progress__track { flex: 1; position: relative; height: 1px; background: var(--cf-border-strong); }
.cf-progress__bar { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; transform-origin: left center; transform: scaleX(var(--value, 0%)); background: var(--cf-purple); border-radius: 2px; transition: transform 600ms var(--ease-out); }
.cf-progress__num { min-width: 3ch; text-align: right; color: var(--cf-text-muted); }
.cf-progress--warning .cf-progress__bar { background: var(--cf-warning); }

/* 6.14 Tabs */
.cf-tabs__list { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--cf-border); overflow-x: auto; scrollbar-width: none; }
.cf-tabs__list::-webkit-scrollbar { display: none; }
.cf-tab { position: relative; padding: 12px 14px; font-size: var(--fs-small); font-weight: 500; color: var(--cf-text-muted); white-space: nowrap; border-radius: 8px 8px 0 0; transition: color var(--t-hover), background var(--t-hover); display: inline-flex; align-items: center; gap: 8px; }
.cf-tab .ph { font-size: 18px; }
.cf-tab:hover { color: var(--cf-text); background: var(--cf-purple-ink); }
.cf-tab[aria-selected="true"] { color: var(--cf-text); }
.cf-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cf-purple); }
.cf-tab__count { font-size: var(--fs-micro); color: var(--cf-text-faint); font-variant-numeric: tabular-nums; }
.cf-tabs__panel { padding-top: var(--s-5); }
.cf-tabs--steps .cf-tab { flex: 1 1 0; justify-content: center; min-width: 0; }
@media (max-width: 639px) { .cf-tabs--steps .cf-tab { padding-inline: 6px; } .cf-tabs--steps .cf-tab .ph { display: none; } }

/* 6.15 Accordion */
.cf-acc { border-top: 1px solid var(--cf-border); }
.cf-acc__item { border-bottom: 1px solid var(--cf-border); }
.cf-acc__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; font-weight: 500; transition: color var(--t-hover); }
.cf-acc__item summary:hover { color: var(--cf-purple-soft); }
.cf-acc__item summary:focus-visible { border-radius: 8px; outline-offset: 4px; }
.cf-acc__item summary .ph { font-size: 20px; flex: none; color: var(--cf-text-muted); transition: transform var(--t-overlay) var(--ease-out); }
.cf-acc__item[open] summary .ph { transform: rotate(180deg); }
.cf-acc__body { padding: 0 0 var(--s-5); color: var(--cf-text-muted); max-width: 68ch; }
.cf-acc__body > * + * { margin-top: .75em; }
html.js .cf-acc__item.is-animating { overflow: hidden; }

/* 6.16 Dialog and drawer (native dialog) */
.cf-dialog { max-width: min(520px, calc(100vw - 32px)); width: 100%; max-height: calc(100vh - 32px); margin: auto; background: var(--cf-surface); border: 1px solid var(--cf-border-strong); border-radius: var(--r-sheet); box-shadow: var(--cf-shadow); overflow: auto; }
.cf-dialog--wide { max-width: min(760px, calc(100vw - 32px)); }
.cf-dialog::backdrop, .cf-drawer::backdrop { background: rgba(7, 7, 10, .72); }
.cf-dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-3); }
.cf-dialog__head h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.cf-dialog__body { padding: var(--s-2) var(--s-5) var(--s-5); color: var(--cf-text-muted); }
.cf-dialog__body p + p { margin-top: .75em; }
.cf-dialog__foot { display: flex; justify-content: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--cf-border); flex-wrap: wrap; }
.cf-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(440px, 100vw); max-width: none; height: 100dvh; max-height: none; background: var(--cf-surface); border-left: 1px solid var(--cf-border-strong); display: flex; flex-direction: column; box-shadow: var(--cf-shadow); }
.cf-drawer--left { inset: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--cf-border-strong); }
.cf-drawer--wide { width: min(640px, 100vw); }
.cf-drawer__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--cf-border); min-height: 64px; }
.cf-drawer__head h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.cf-drawer__body { padding: var(--s-5); overflow: auto; flex: 1; }
.cf-drawer__foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--cf-border); display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap; }
.cf-dialog:not([open]), .cf-drawer:not([open]) { display: none; }
.cf-dialog[open] { animation: cf-dialog-in var(--t-overlay) var(--ease-out); }
.cf-drawer[open] { animation: cf-drawer-in var(--t-overlay) var(--ease-out); }
.cf-drawer--left[open] { animation-name: cf-drawer-in-left; }
.cf-dialog[open]::backdrop, .cf-drawer[open]::backdrop { animation: cf-fade-in var(--t-overlay) ease-out; }
.cf-dialog.is-closing { animation: cf-dialog-out 180ms ease-in forwards; }
.cf-drawer.is-closing { animation: cf-drawer-out 180ms ease-in forwards; }
.cf-drawer--left.is-closing { animation-name: cf-drawer-out-left; }
.cf-dialog.is-closing::backdrop, .cf-drawer.is-closing::backdrop { animation: cf-fade-out 180ms ease-in forwards; }
@keyframes cf-fade-in { from { opacity: 0; } }
@keyframes cf-fade-out { to { opacity: 0; } }
@keyframes cf-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes cf-dialog-out { to { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes cf-drawer-in { from { transform: translateX(100%); } }
@keyframes cf-drawer-out { to { transform: translateX(100%); } }
@keyframes cf-drawer-in-left { from { transform: translateX(-100%); } }
@keyframes cf-drawer-out-left { to { transform: translateX(-100%); } }
.cf-scrim { position: fixed; inset: 0; background: rgba(7, 7, 10, .72); z-index: calc(var(--z-drawer) - 1); animation: cf-fade-in var(--t-overlay) ease-out; }

/* 6.17 Toast */
.cf-toasts { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); max-width: min(380px, calc(100vw - 32px)); }
.cf-toast { display: flex; align-items: flex-start; gap: var(--s-3); padding: 12px 14px; background: var(--cf-surface-raised); border: 1px solid var(--cf-border-strong); border-radius: 14px; box-shadow: var(--cf-shadow-sm); font-size: var(--fs-small); animation: cf-toast-in var(--t-overlay) var(--ease-out); }
.cf-toast .ph { font-size: 20px; flex: none; color: var(--cf-purple-soft); }
.cf-toast--success .ph { color: var(--cf-success); }
.cf-toast--danger .ph { color: var(--cf-danger); }
.cf-toast--warning .ph { color: var(--cf-warning); }
.cf-toast__text { flex: 1; }
.cf-toast__close { color: var(--cf-text-muted); display: inline-flex; padding: 2px; border-radius: 6px; }
.cf-toast__close:hover { color: var(--cf-text); }
.cf-toast.is-leaving { animation: cf-toast-out 180ms ease-in forwards; }
@keyframes cf-toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes cf-toast-out { to { opacity: 0; transform: translateY(6px); } }

/* 6.18 Empty state and skeleton */
.cf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-10) var(--s-5); color: var(--cf-text-muted); }
.cf-empty .ph { font-size: 32px; color: var(--cf-text-faint); }
.cf-empty p { max-width: 40ch; }
.cf-empty .cf-btn { margin-top: var(--s-2); }
.cf-skeleton { background: var(--cf-surface-raised); border-radius: 8px; position: relative; overflow: hidden; }
.cf-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .1), transparent); transform: translateX(-100%); animation: cf-shimmer 1.6s ease-in-out infinite; }
@keyframes cf-shimmer { to { transform: translateX(100%); } }
.cf-skeleton--text { height: 14px; width: 100%; }
.cf-skeleton--text.is-short { width: 55%; }
.cf-skeleton--title { height: 22px; width: 45%; }
.cf-skeleton--row { height: 44px; border-radius: 0; }
.cf-skeleton--frame { aspect-ratio: 9 / 16; border-radius: var(--r-frame); }
.cf-skeleton--wide { aspect-ratio: 16 / 9; border-radius: var(--r-frame); }
.cf-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
.cf-skeleton--btn { height: 44px; width: 140px; border-radius: var(--r-pill); }
.cf-skeleton-group { display: flex; flex-direction: column; gap: 10px; }

/* 6.19 Avatar and chip */
.cf-avatar { --size: 40px; width: var(--size); height: var(--size); border-radius: 50%; overflow: hidden; background: var(--cf-purple-ink); position: relative; flex: none; display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: calc(var(--size) * .36); color: var(--cf-purple-soft); letter-spacing: 0; }
.cf-avatar::before { content: attr(data-initials); }
.cf-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-avatar.is-fallback img { display: none; }
.cf-avatar--32 { --size: 32px; }
.cf-avatar--56 { --size: 56px; }
.cf-avatar--96 { --size: 96px; }
.cf-person { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.cf-person__name { font-weight: 500; font-size: var(--fs-small); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-person__sub { font-size: var(--fs-micro); color: var(--cf-text-muted); line-height: 1.3; }
.cf-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--cf-border-strong); font-size: var(--fs-small); color: var(--cf-text-muted); white-space: nowrap; transition: border-color var(--t-hover), background var(--t-hover), color var(--t-hover); }
.cf-chip .ph { font-size: 16px; }
button.cf-chip, label.cf-chip { cursor: pointer; }
button.cf-chip:hover, label.cf-chip:hover { border-color: var(--cf-purple); color: var(--cf-text); }
.cf-chip.is-selected, .cf-chip[aria-pressed="true"], .cf-chip:has(input:checked) { border-color: var(--cf-purple); background: var(--cf-purple-ink); color: var(--cf-purple-soft); }
.cf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cf-chip:has(input:focus-visible) { outline: 2px solid var(--cf-purple-bright); outline-offset: 2px; box-shadow: var(--cf-ring); }
.cf-chip--primary { color: var(--cf-text); border-color: var(--cf-purple); }
.cf-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); position: relative; }

/* 6.20 Video player mock */
.cf-player { display: grid; gap: var(--s-4); }
.cf-player__screen { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-frame); overflow: hidden; background: var(--cf-surface-raised); isolation: isolate; }
.cf-player__screen img { width: 100%; height: 100%; object-fit: cover; }
.cf-player__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 7, 10, .8), rgba(7, 7, 10, .1) 40%, rgba(7, 7, 10, 0)); z-index: 1; pointer-events: none; }
.cf-player__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: 72px; height: 72px; border-radius: 50%; background: var(--cf-purple); color: var(--cf-on-purple); display: grid; place-items: center; box-shadow: var(--cf-shadow-sm); transition: background var(--t-hover), transform var(--t-press); }
.cf-player__play .ph { font-size: 32px; }
.cf-player__play:hover { background: var(--cf-purple-bright); }
.cf-player__play:active { transform: scale(.96); }
.cf-player__play:focus-visible { border-radius: 50%; }
.cf-player__bar { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
.cf-player__bar .cf-progress { flex: 1; }
.cf-player__bar .cf-progress__track { background: rgba(247, 245, 251, .3); }
.cf-player__bar .cf-btn { height: 32px; width: 32px; padding: 0; background: rgba(15, 13, 20, .7); color: var(--cf-text); }
.cf-player__bar .cf-btn .ph { font-size: 18px; }
.cf-player__title { position: absolute; left: 16px; right: 16px; top: 14px; z-index: 2; font-size: var(--fs-small); font-weight: 500; }
.cf-player__chapters { display: flex; flex-direction: column; }
.cf-player__chapter { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--cf-border); font-size: var(--fs-small); color: var(--cf-text-muted); transition: color var(--t-hover); align-items: baseline; }
.cf-player__chapter:last-child { border-bottom: 0; }
.cf-player__chapter:hover { color: var(--cf-text); }
.cf-player__chapter[aria-current="true"] { color: var(--cf-text); font-weight: 500; }
.cf-player__chapter time { font-variant-numeric: tabular-nums; color: var(--cf-text-faint); }
.cf-player__chapter[aria-current="true"] time { color: var(--cf-purple-soft); }
@media (min-width: 1024px) { .cf-player--side { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }

/* 6.21 Stat (app only) */
.cf-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf-stat__label { font-size: var(--fs-small); color: var(--cf-text-muted); }
.cf-stat__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 5.5vw, 2rem); white-space: nowrap; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; padding-bottom: .04em; }
.cf-stat__value small { font-size: .875rem; font-weight: 600; color: var(--cf-text-muted); margin-left: 4px; letter-spacing: 0; }
.cf-stat__sub { font-size: var(--fs-micro); color: var(--cf-text-faint); font-variant-numeric: tabular-nums; }
.cf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
@media (min-width: 768px) { .cf-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.cf-stats--ruled > * { padding-left: var(--s-4); border-left: 1px solid var(--cf-border); }

/* 6.22 Definition list, key-value rows */
.cf-kv { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr); font-size: var(--fs-small); }
.cf-kv dt { color: var(--cf-text-muted); padding: 10px 0; border-bottom: 1px solid var(--cf-border); }
.cf-kv dd { padding: 10px 0; border-bottom: 1px solid var(--cf-border); font-variant-numeric: tabular-nums; text-align: right; }
.cf-kv dt:nth-last-of-type(1), .cf-kv dd:last-of-type { border-bottom: 0; }
.cf-kv--total dt:nth-last-of-type(1), .cf-kv--total dd:last-of-type { border-top: 2px solid var(--cf-border-strong); font-weight: 600; color: var(--cf-text); }
.cf-list { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-small); }
.cf-list--check li { display: flex; gap: var(--s-2); align-items: flex-start; }
.cf-list--check .ph { flex: none; font-size: 18px; margin-top: 2px; color: var(--cf-purple-soft); }
body[data-role] .cf-list--check .ph { color: var(--cf-success); }
.cf-list--check .is-missing .ph { color: var(--cf-text-faint); }
.cf-list--check .is-missing { color: var(--cf-text-muted); }
.cf-list--rows > li { padding: var(--s-3) 0; border-bottom: 1px solid var(--cf-border); }
.cf-list--rows > li:last-child { border-bottom: 0; }

/* 7. Public shell */
.cf-nav { position: sticky; top: 0; z-index: var(--z-nav); height: 72px; background: rgba(7, 7, 10, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--cf-border); }
.cf-nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); }
.cf-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.03em; white-space: nowrap; line-height: 1.2; }
.cf-wordmark__dot { color: var(--cf-purple); }
.cf-nav .cf-wordmark { view-transition-name: wordmark; }
.cf-nav__links { display: none; align-items: center; gap: var(--s-1); }
.cf-nav__link { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; color: var(--cf-text-muted); transition: color var(--t-hover), background var(--t-hover); white-space: nowrap; }
.cf-nav__link:hover { color: var(--cf-text); background: var(--cf-purple-ink); }
.cf-nav__link[aria-current="page"] { color: var(--cf-text); }
.cf-nav__actions { display: flex; align-items: center; gap: var(--s-2); }
.cf-nav__login { display: none; }
.cf-nav__menu { display: inline-flex; }
@media (min-width: 480px) { .cf-nav__login { display: inline-flex; } }
@media (min-width: 1024px) {
  .cf-nav__links { display: flex; }
  .cf-nav__menu { display: none; }
  .cf-nav__cta { display: inline-flex; }
}
@media (max-width: 1023px) { .cf-nav__cta { display: none; } }
.cf-nav-drawer { width: min(360px, 100vw); }
.cf-nav-drawer__links { display: flex; flex-direction: column; }
.cf-nav-drawer__links a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--cf-border); font-size: 1.125rem; font-weight: 500; }
.cf-nav-drawer__links a .ph { color: var(--cf-text-muted); font-size: 20px; }
.cf-nav-drawer__links a[aria-current="page"] { color: var(--cf-purple-soft); }
.cf-nav-drawer__links a:hover { color: var(--cf-purple-soft); }
.cf-ctabar { display: none; }               /* opt in per page with body.has-ctabar */
@media (max-width: 1023px) {
  body.has-ctabar .cf-ctabar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(7, 7, 10, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--cf-border); gap: var(--s-3); }
  .cf-ctabar .cf-btn { flex: 1; }
  body.has-ctabar { padding-bottom: 76px; }
}
.cf-footer { border-top: 1px solid var(--cf-border); padding-block: var(--s-16) var(--s-8); margin-top: var(--section); font-size: var(--fs-small); }
.cf-footer__top { display: grid; gap: var(--s-10); }
.cf-footer__brand p { color: var(--cf-text-muted); max-width: 32ch; margin-top: var(--s-3); }
.cf-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
.cf-footer__col h2 { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; line-height: 1.5; padding: 0; margin-bottom: var(--s-3); }
.cf-footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.cf-footer__col a { color: var(--cf-text-muted); transition: color var(--t-hover); }
.cf-footer__col a:hover { color: var(--cf-text); }
.cf-footer__bottom { margin-top: var(--s-12); padding-top: var(--s-5); border-top: 1px solid var(--cf-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); color: var(--cf-text-muted); }
.cf-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.cf-footer__bottom a:hover { color: var(--cf-text); }
@media (min-width: 768px) {
  .cf-footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .cf-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 8. App shell */
.cf-app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.cf-side { position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer); width: min(300px, 88vw); background: var(--cf-surface); border-right: 1px solid var(--cf-border); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform var(--t-overlay) var(--ease-out); overflow-y: auto; }
.cf-side.is-open { transform: none; }
.cf-side__brand { display: flex; align-items: center; gap: var(--s-3); height: 64px; padding: 0 var(--s-5); border-bottom: 1px solid var(--cf-border); flex: none; }
.cf-side__mark { display: none; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -.03em; }
.cf-side__role { display: block; padding: var(--s-4) var(--s-5) var(--s-2); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-text-muted); }
.cf-side [data-role] { display: none; }
.cf-side__nav { flex: 1; padding: 0 var(--s-3) var(--s-4); }
.cf-side__nav li + li { margin-top: 2px; }
.cf-side .cf-wordmark { view-transition-name: wordmark; }
.cf-side__link { position: relative; display: flex; align-items: center; gap: var(--s-3); height: 42px; padding: 0 12px; border-radius: 10px; font-size: var(--fs-small); font-weight: 500; color: var(--cf-text-muted); transition: color var(--t-hover), background var(--t-hover); white-space: nowrap; }
.cf-side__link .ph { font-size: 20px; flex: none; }
.cf-side__link:hover { color: var(--cf-text); background: rgba(139, 92, 246, .08); }
.cf-side__link[aria-current="page"] { color: var(--cf-text); background: var(--cf-purple-ink); }
.cf-side__link[aria-current="page"]::before { content: ""; position: absolute; left: calc(var(--s-3) * -1); top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--cf-purple); }
.cf-side__count { margin-left: auto; font-size: var(--fs-micro); font-variant-numeric: tabular-nums; color: var(--cf-text-faint); }
.cf-side__link[aria-current="page"] .cf-side__count { color: var(--cf-purple-soft); }
.cf-side__user { margin-top: auto; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--cf-border); display: flex; align-items: center; gap: var(--s-3); flex: none; }
.cf-side__user .cf-person { flex: 1; min-width: 0; }
.cf-side__user a.cf-person__sub { color: var(--cf-text-muted); }
.cf-side__user a.cf-person__sub:hover { color: var(--cf-text); }
.cf-side__close { display: inline-flex; margin-left: auto; }
body[data-role="learner"] .cf-side [data-role="learner"],
body[data-role="talent"] .cf-side [data-role="talent"],
body[data-role="brand"] .cf-side [data-role="brand"],
body[data-role="admin"] .cf-side [data-role="admin"],
.cf-app[data-role="learner"] .cf-side [data-role="learner"],
.cf-app[data-role="talent"] .cf-side [data-role="talent"],
.cf-app[data-role="brand"] .cf-side [data-role="brand"],
.cf-app[data-role="admin"] .cf-side [data-role="admin"] { display: block; }
.cf-side__role span[data-role] { display: none; }
.cf-main { min-width: 0; display: flex; flex-direction: column; }
.cf-top { position: sticky; top: 0; z-index: var(--z-nav); height: 64px; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--gutter); background: rgba(7, 7, 10, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--cf-border); }
.cf-top__menu { display: inline-flex; }
.cf-top__title { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -.02em; line-height: 1.2; padding: 0; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-top__search { display: none; width: min(320px, 30vw); }
.cf-top__search .cf-input { min-height: 40px; }
body[data-role="brand"] .cf-top__search, body[data-role="admin"] .cf-top__search,
.cf-app[data-role="brand"] .cf-top__search, .cf-app[data-role="admin"] .cf-top__search { display: block; }
@media (max-width: 767px) { .cf-top__search { display: none !important; } }
.cf-top__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.cf-top__bell { position: relative; }
.cf-top__count { position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cf-purple); color: var(--cf-on-purple); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.cf-top__avatar { display: inline-flex; border-radius: 50%; }
.cf-top__avatar:focus-visible { border-radius: 50%; }
.cf-content { flex: 1; width: 100%; max-width: calc(1360px + var(--gutter) * 2); margin-inline: auto; padding: var(--s-6) var(--gutter) var(--s-16); }
.cf-content > * + * { margin-top: var(--s-6); }
.cf-content .cf-head { padding-top: var(--s-2); }
@media (min-width: 1024px) {
  .cf-app { grid-template-columns: 72px minmax(0, 1fr); }
  .cf-side { position: sticky; top: 0; height: 100vh; height: 100dvh; width: auto; transform: none; transition: none; z-index: 1; }
  .cf-side__brand { justify-content: center; padding: 0; }
  .cf-side__brand .cf-wordmark { display: none; }
  .cf-side__mark { display: block; }
  .cf-side__role { display: none !important; }
  .cf-side__nav { padding-inline: var(--s-3); }
  .cf-side__link { justify-content: center; padding: 0; }
  .cf-side__link .cf-side__label, .cf-side__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cf-side__user { padding: var(--s-4) 0; justify-content: center; }
  .cf-side__user .cf-person > div { display: none; }
  .cf-side__close, .cf-top__menu { display: none; }
  .cf-content { padding-top: var(--s-8); }
}
@media (min-width: 1280px) {
  .cf-app { grid-template-columns: 264px minmax(0, 1fr); }
  .cf-side__brand { justify-content: flex-start; padding: 0 var(--s-5); }
  .cf-side__brand .cf-wordmark { display: block; }
  .cf-side__mark { display: none; }
  .cf-side__role { display: block !important; }
  .cf-side__link { justify-content: flex-start; padding: 0 12px; }
  .cf-side__link .cf-side__label, .cf-side__count { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .cf-side__user { padding: var(--s-4) var(--s-5); justify-content: flex-start; }
  .cf-side__user .cf-person > div { display: block; }
}
/* Demo mode: the shell rendered inside a bordered container (styleguide only) */
.cf-app--demo { min-height: 0; border: 1px solid var(--cf-border-strong); border-radius: var(--r-sheet); overflow: clip; background: var(--cf-bg); }
.cf-app--demo .cf-side { position: static; height: auto; min-height: 0; transform: none; transition: none; z-index: 1; width: auto; }
.cf-app--demo .cf-top { position: static; }
.cf-app--demo .cf-side__close { display: none; }
.cf-app--demo .cf-wordmark { view-transition-name: none; }
.cf-app--demo .cf-content { padding-bottom: var(--s-8); }
@media (max-width: 1023px) { .cf-app--demo .cf-side { border-right: 0; border-bottom: 1px solid var(--cf-border); } .cf-app--demo .cf-side__nav { padding-bottom: var(--s-2); } }

/* 9. Motion grammar */
html.js .cf-reveal > * { opacity: 0; transform: translateY(8px); }
html.js .cf-reveal.is-in > * { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: min(calc(var(--i, 0) * 40ms), 400ms); }
html.js .cf-reveal--self { opacity: 0; transform: translateY(8px); }
html.js .cf-reveal--self > * { opacity: 1; transform: none; }
html.js .cf-reveal--self.is-in { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
html.js .cf-reveal.is-in > .cf-stamp { transition: none; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.js .cf-reveal > *, html.js .cf-reveal--self { opacity: 1; transform: none; }
  .cf-wall__row { animation: none; }
  .cf-skeleton::after { animation: none; }
  .cf-btn.is-loading::before { animation: none; border-right-color: currentColor; opacity: .5; }
  .cf-progress__bar { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* 10. Print */
@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #111; }
  .cf-nav, .cf-footer, .cf-ctabar, .cf-toasts, .cf-side, .cf-top__actions, .cf-top__menu, .cf-skip, .cf-wall { display: none !important; }
  .cf-app { grid-template-columns: 1fr; }
  .cf-sheet, .cf-input, .cf-stamp, .cf-notice { border-color: #999; background: #fff; color: #111; box-shadow: none; }
  .cf-table th, .cf-table td, .cf-event, .cf-kv dt, .cf-kv dd { border-color: #ccc; color: #111; }
  .cf-btn { border: 1px solid #999; background: none; color: #111; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  .cf-frame::before, .cf-frame::after { display: none; }
  html.js .cf-reveal > * { opacity: 1; transform: none; }
}

/* 11. Shared corrections
   Applied after the page build, from defects that recurred across many pages.
   Each one replaced a workaround that individual pages were repeating. */

/* Ruled tables read across on one baseline: a row with a multi-line cell no
   longer floats its short cells to the vertical centre. */
.cf-table td { vertical-align: top; }
.cf-table--compact td, .cf-table td.cf-mid { vertical-align: middle; }

/* A sheet head's meta slot can carry a stamp beside a control. */
.cf-sheet__meta { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); flex-wrap: wrap; }

/* Key and value rows need a gutter so a long key cannot touch its value. */
.cf-kv { column-gap: var(--s-4); }

/* A tab strip scrolls itself instead of widening its container. */
.cf-tabs, .cf-tabs__list { min-width: 0; }

/* Scene rows align to the title line, not to the middle of the block. */
@media (min-width: 768px) { .cf-scene { align-items: start; } }

/* Stat values wrap rather than overflow a narrow column. */
.cf-stat__value { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 559px) { .cf-stats { grid-template-columns: minmax(0, 1fr); } }

/* Frame captions clear the corner marks instead of being crossed by them. */
.cf-frame__meta { left: 32px; right: 32px; bottom: 30px; }
.cf-frame--plain .cf-frame__meta { left: 16px; right: 16px; bottom: 14px; }

/* Two-part captions sit on one baseline and stack when the line is cramped. */
.cf-figure figcaption { align-items: baseline; flex-wrap: wrap; }

/* The player title is pinned to the top of the poster, so the scrim darkens
   both ends rather than the bottom alone. */
.cf-player__screen::after {
  background: linear-gradient(to bottom,
    rgba(7, 7, 10, .74) 0%, rgba(7, 7, 10, .1) 26%,
    rgba(7, 7, 10, 0) 48%, rgba(7, 7, 10, .1) 62%, rgba(7, 7, 10, .82) 100%);
}

/* Wide tables scroll inside their wrapper instead of squeezing. */
.cf-scroll-x > .cf-table:not(.cf-table--stack) { min-width: 640px; }

/* A link that is the whole row of a rows list fills that row, so the tap
   target is the row rather than the run of text inside it. */
.cf-list--rows > li > a:only-child {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: 44px; margin-block: calc(var(--s-3) * -1 + 2px);
}

@media (max-width: 767px) {
  /* Touch targets reach 44px. */
  .cf-btn--sm { height: 44px; }
  .cf-btn--icon.cf-btn--sm { width: 44px; }
  .cf-check { min-height: 44px; }
  .cf-check--boxed { min-height: 0; }
  .cf-player__bar .cf-btn { position: relative; }
  .cf-player__bar .cf-btn::after { content: ""; position: absolute; inset: -6px; }

  /* In a stacked table an inline element keeps its own width: a stamp reads
     as a stamp, not as a full-width bar. */
  .cf-table--stack td > .cf-stamp,
  .cf-table--stack td > .cf-chip,
  .cf-table--stack td > .cf-btn,
  .cf-table--stack td > .cf-handle { justify-self: start; }

  /* A footer row with more than two cells wraps instead of forcing the page wide. */
  .cf-table--stack tfoot tr { flex-wrap: wrap; }

  /* Chips, toggles and segmented buttons are controls, so they reach the
     touch minimum too. */
  button.cf-chip, a.cf-chip, label.cf-chip { min-height: 44px; }
  .cf-toggle { min-height: 44px; align-items: center; }
  .cf-btn-group .cf-btn { height: 44px; }
}