/* Cinematic component palette shared by the homepage and demo. Aurbliq owns public tokens. */
.kinetic-page {
  --proto-paper: #fcfbf9;
  --proto-ink: #2b2521;
  --proto-muted: #665d55;
  --proto-dark: #29221e;
  --proto-line: #ddd5cb;
  --k-page: #fcfbf9;
  --k-ink: #2b2521;
  --k-muted: #665d55;
  --k-line: #ddd5cb;
}
html.dark .kinetic-page {
  --k-page: #201e1c;
  --k-surface: #2c2926;
  --k-card: #37312c;
  --k-ink: #f7eee4;
  --k-muted: #d5c2b1;
  --k-line: #776d64;
}
.kinetic-page .k-home-after { color: var(--k-ink); }
.kinetic-page .k-hero { background: #211b18; }
.kinetic-page .k-film::after { background: linear-gradient(90deg, rgba(24,17,12,.58), rgba(24,17,12,.22) 48%, rgba(24,17,12,.04) 78%), linear-gradient(0deg, rgba(24,17,12,.82), transparent 65%); }
.kinetic-page .k-film-lines:hover { color: var(--a-film-hover); }
.kinetic-page .k-film-lines:focus-visible { outline-color: var(--a-film-focus); }
.kinetic-page [data-business-hero] a:focus-visible { outline-color: var(--a-film-focus-strong); }
html.dark .kinetic-page .k-hero { background: #161311; }
html.dark .kinetic-page .k-film::after { background: linear-gradient(90deg, rgb(12 9 8 / 62%), rgb(12 9 8 / 18%)), linear-gradient(0deg, rgb(12 9 8 / 92%), transparent 70%); }
@media (max-width: 760px) {
  .kinetic-page .k-film::after,
  html.dark .kinetic-page .k-film::after {
    background: linear-gradient(0deg, rgb(16 12 15 / 92%) 0%, rgb(16 12 15 / 72%) 32%, rgb(16 12 15 / 12%) 72%, transparent 100%);
  }
}


/* proto-session.css */
.kinetic-page .k-session { background: var(--chapter-ground, var(--a-linen)); }
.kinetic-page .k-session-stage { background: var(--a-linen); }
.kinetic-page .k-s-canvas { color: var(--a-art-ink); }
.kinetic-page .k-s-cursor { filter: drop-shadow(0 4px 6px rgb(var(--a-art-ink-rgb) / .22)); }
.kinetic-page .k-s-bg { background: #120f0d; }
.kinetic-page .k-s-marquee { color: var(--s-ink, #f4f0e9); }
.kinetic-page .k-s-marquee p { -webkit-text-stroke: 1.5px var(--s-ink, #f4f0e9); }
.kinetic-page .k-s-type { color: var(--s-ink, #f4f0e9); }
.kinetic-page .k-s-cue--outline { -webkit-text-stroke: 2px var(--s-ink, #f4f0e9); }
.kinetic-page .k-s-plus { color: var(--a-art-muted); }
.kinetic-page .k-s-placeholder { color: var(--a-art-muted); }
.kinetic-page .k-s-send { background: var(--a-art-soft); color: var(--a-art-muted); }
.kinetic-page .k-s-island[data-s-group="buildingCrm"] { color: var(--a-art-ink); }
.kinetic-page .k-s-toast-icon { color: var(--a-art-ink); }
.kinetic-page .k-s-pill { background: var(--a-art-soft); color: var(--a-art-muted); }
.kinetic-page .k-s-pill b,
.kinetic-page .k-s-stat b { color: var(--a-art-ink); }
.kinetic-page .k-s-stat,
.kinetic-page .k-s-muted { color: var(--a-art-muted); }
.kinetic-page .k-s-live { color: var(--a-art-ink); }
.kinetic-page .k-s-tile { background: color-mix(in srgb, var(--a-art-paper), #ffffff calc(var(--hover, 0) * 100%)); box-shadow: 0 0 0 calc(var(--hover, 0) * 2.5px) var(--a-art-ink), 0 calc(var(--hover, 0) * 14px) calc(var(--hover, 0) * 30px) rgb(var(--a-art-ink-rgb) / .12); }
.kinetic-page .k-s-tile .k-icon { color: var(--a-art-ink); }
.kinetic-page .k-s-tile span { color: var(--a-art-muted); }
.kinetic-page .k-s-links path,
.kinetic-page .k-s-flow-lines path { stroke: var(--a-art-ink); }
.kinetic-page .k-s-table { color: var(--a-art-muted); box-shadow: 0 0 0 1.5px var(--a-art-line), 0 10px 24px rgb(var(--a-art-ink-rgb) / .07); }
.kinetic-page .k-s-table strong { color: var(--a-art-ink); }
.kinetic-page .k-s-table span::before { background: var(--a-art-line); }
.kinetic-page .k-s-table[data-s-focus-table] { box-shadow: 0 0 0 calc(1.5px + var(--focus, 0) * 1.5px) color-mix(in srgb, var(--a-art-line), var(--a-art-signal) calc(var(--focus, 0) * 100%)), 0 calc(10px + var(--focus, 0) * 8px) 24px rgb(var(--a-art-ink-rgb) / .1); }
.kinetic-page .k-s-run-btn { background: color-mix(in srgb, var(--a-art-ink), var(--a-art-heat) calc(var(--press, 0) * 100%)); }
.kinetic-page .k-s-node { box-shadow: 0 0 0 calc(1.5px + var(--done, 0) * 1.5px) color-mix(in srgb, var(--a-art-line), var(--a-art-signal) calc(var(--done, 0) * 100%)), 0 10px 24px rgb(var(--a-art-ink-rgb) / .07); }
.kinetic-page .k-s-node span { color: var(--a-art-muted); }
.kinetic-page .k-s-node--rule { background: var(--a-art-ink); }
.kinetic-page .k-s-node--rule span { color: var(--a-art-inverse-muted); }
.kinetic-page .k-s-result-icon { color: var(--a-art-ink); }
.kinetic-page .k-s-matrix > b { color: var(--a-art-muted); }
.kinetic-page .k-s-matrix > i { background: var(--a-art-soft); color: var(--a-art-muted); }
.kinetic-page .k-s-matrix > i.is-edit { background: var(--a-art-ink); }
.kinetic-page .k-s-matrix > i.is-none { box-shadow: inset 0 0 0 1.5px var(--a-art-line); color: var(--a-art-muted); }
.kinetic-page .k-s-rule-row { border-top: 1.5px solid var(--a-art-line); }
.kinetic-page .k-s-switch { background: var(--a-art-line); }
.kinetic-page .k-s-switch > i { box-shadow: 0 2px 5px rgb(var(--a-art-ink-rgb) / .2); }
.kinetic-page .k-s-kpis p { background: var(--a-art-paper); }
.kinetic-page .k-s-kpis span { color: var(--a-art-muted); }
.kinetic-page .k-s-chart-label { color: var(--a-art-muted); }
.kinetic-page .k-s-bars i { background: color-mix(in srgb, var(--a-art-ink), var(--a-art-signal) calc(var(--hover, 0) * 100%)); }
.kinetic-page .k-s-days { color: var(--a-art-muted); }
.kinetic-page .k-s-tip { background: var(--a-art-ink); }
.kinetic-page .k-s-col { background: var(--a-art-paper); }
.kinetic-page .k-s-deal { box-shadow: 0 2px 6px rgb(var(--a-art-ink-rgb) / .06); }
.kinetic-page .k-s-deal span { color: var(--a-art-muted); }
.kinetic-page .k-s-deal--drag { box-shadow: 0 calc(2px + var(--lift, 0) * 16px) calc(6px + var(--lift, 0) * 26px) rgb(var(--a-art-ink-rgb) / calc(.06 + var(--lift, 0) * .12)), 0 0 0 calc(var(--lift, 0) * 2.5px) var(--a-art-ink); }
.kinetic-page .k-s-drop { box-shadow: inset 0 0 0 2px var(--a-art-line); color: var(--a-art-muted); }
.kinetic-page .k-s-routes path { stroke: var(--a-art-line); }
.kinetic-page .k-s-site { box-shadow: 0 0 0 1.5px var(--a-art-line), 0 8px 18px rgb(var(--a-art-ink-rgb) / .07); }
.kinetic-page .k-s-site span { color: var(--a-art-muted); }
.kinetic-page .k-s-site.is-supplier { background: var(--a-art-paper); }
.kinetic-page .k-s-site.is-plant { background: var(--a-art-ink); }
.kinetic-page .k-s-site.is-plant span { color: var(--a-art-inverse-muted); }
.kinetic-page .k-s-site.is-customer { box-shadow: 0 0 0 2px var(--a-art-ink); }
.kinetic-page .k-s-site em { color: var(--a-art-ink); }
.kinetic-page .k-s-site[data-s-late] { box-shadow: 0 0 0 calc(1.5px + var(--late, 0) * 1.5px) color-mix(in srgb, var(--a-art-line), var(--a-art-signal) calc(var(--late, 0) * 100%)), 0 8px 18px rgb(var(--a-art-ink-rgb) / .07); }
.kinetic-page .k-s-ship { background: var(--a-art-ink); }
.kinetic-page .k-s-alert { background: var(--a-art-ink); }
.kinetic-page .k-s-alert-btn { color: var(--a-art-ink); }
.kinetic-page .k-s-finale span { background: var(--a-art-ink); }
.kinetic-page .k-session-chapters::before { background: var(--a-art-line); }
.kinetic-page .k-session-chapters i { background: var(--proto-orange); }
.kinetic-page .k-session-chapters li { border-left: 1.5px solid var(--a-art-line); }
.kinetic-page .k-session-toggle { border: 1.5px solid var(--a-art-line); }
html.dark .kinetic-page .k-session { background: var(--chapter-ground, var(--a-linen)); }
html.dark .kinetic-page .k-session-stage { background: var(--a-linen); }
html.dark .kinetic-page .k-workspace-control { background: var(--chapter-ground, var(--a-linen)); }

/* proto-architecture.css — both surrounding themes resolve Aurbliq roles. */
.kinetic-page .k-architecture {
  --architecture-surface: var(--a-linen); --architecture-node: var(--a-paper);
  --architecture-ink: var(--a-ink); --architecture-muted: var(--a-muted);
  --architecture-line: var(--a-line); --architecture-signal: var(--a-accent);
}
.kinetic-page .k-architecture-computer { box-shadow: 0 2px 0 #fff4 inset, 0 20px 45px rgb(var(--a-art-shadow-rgb) / 4%); }
.kinetic-page .k-architecture-proto { border: 1px solid var(--a-accent); background: var(--a-clay); box-shadow: 0 7px 0 rgb(var(--a-art-shadow-rgb) / 3%); color: var(--a-ink); }
.kinetic-page .k-architecture-caption { color: var(--a-muted); }
.kinetic-page .k-architecture-caption .k-diagram-toggle:hover { color: var(--a-accent); }