/* Option A: The Living Console. Page chrome, hero, console component, night shift, pillars, missions, terms. */
.logo-mark { -webkit-mask-image: url("shared/brand/logo-mark-light.svg"); mask-image: url("shared/brand/logo-mark-light.svg"); }
.logo-word { -webkit-mask-image: url("shared/brand/logo-light.svg"); mask-image: url("shared/brand/logo-light.svg"); }

/* THEME: token sets captured from console.forgecode.dev (light = :root, dark = data-theme dark) */
html[data-theme="light"], html:not([data-theme]) {
  color-scheme: light;
  --color-accent-cyan: #0891b2;
  --color-accent-cyan-strong: #0e7490;
  --color-accent-cyan-surface: color-mix(in srgb, #06b6d4 12%, #faf9f5);
  --color-accent-gradient: linear-gradient(135deg, #ea580c, #f97316);
  --color-accent-muted: #ffedd5;
  --color-accent-primary: #f97316;
  --color-accent-primary-strong: #9a3412;
  --color-accent-primary-surface: color-mix(in srgb, #f97316 12%, #faf9f5);
  --color-accent-secondary: #ea580c;
  --color-accent-yellow: #7a7208;
  --color-bg-base: #faf9f5;
  --color-bg-gradient: #faf9f5;
  --color-bg-overlay: #0000000a;
  --color-bg-sidebar-primary: #f2f0e8;
  --color-bg-subtle: #f2f0e8;
  --color-bg-surface: #fff;
  --color-black: #000;
  --color-border: oklch(92.2% 0 0);
  --color-border-default: #e4e0d0;
  --color-border-overlay: #0000001f;
  --color-border-strong: #ccc7b0;
  --color-border-subtle: #f2f0e8;
  --color-danger-bg: #dc2626;
  --color-danger-bg-hover: #b91c1c;
  --color-danger-text: #fff;
  --color-error: #dc2626;
  --color-error-strong: #b91c1c;
  --color-highlight-from: #ea580c;
  --color-highlight-to: #fb923c;
  --color-icon-disabled: #ccc7b0;
  --color-icon-muted: #7a7260;
  --color-inline-code-bg: color-mix(in srgb, #ea580c 8%, transparent);
  --color-interactive-bg: #f97316;
  --color-interactive-bg-active: #c2410c;
  --color-interactive-bg-hover: #ea580c;
  --color-interactive-shadow: color-mix(in srgb, #f97316 30%, transparent);
  --color-interactive-shadow-hover: color-mix(in srgb, #f97316 50%, transparent);
  --color-interactive-text: #fff;
  --color-label-primary: #c2410c;
  --color-label-secondary: #ea580c;
  --color-mono-text: #c2410c;
  --color-status-error: #c44030;
  --color-status-warn: #c48030;
  --color-success: #16a34a;
  --color-text-disabled: #ccc7b0;
  --color-text-inverse: #fff;
  --color-text-inverse-muted: #ffffff9e;
  --color-text-muted: #a8a088;
  --color-text-primary: #232427;
  --color-text-secondary: #574f3e;
  --color-text-subtle: #7a7260;
  --color-user-message: #574f3e;
  --color-warning: #ea580c;
  --bg: #f2f0e8; --bg2: #f2f0e8; --panel: #ffffff; --panel2: #faf9f5;
  --fg: #232427; --ink: #232427; --night-mid: #ebe8dc;
  --red: #dc2626; --green: #16a34a; --cyan: #0891b2;
  --orange-ink: #c2410c; --red-ink: #b91c1c; --cyan-ink: #0e7490; --cyan-sub: #0891b2;
  --orange-soft: color-mix(in srgb, var(--orange) 12%, transparent);
  --shadow: 0 30px 80px -30px rgba(60,50,20,.25), 0 0 0 1px rgba(0,0,0,.04);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --color-accent-cyan: #22d3ee;
  --color-accent-cyan-strong: #22d3ee;
  --color-accent-cyan-surface: color-mix(in srgb, #06b6d4 15%, #1c1d1f);
  --color-accent-gradient: linear-gradient(135deg, #ea580c, #f97316);
  --color-accent-muted: #7c2d12;
  --color-accent-primary: #f97316;
  --color-accent-primary-strong: #fb923c;
  --color-accent-primary-surface: color-mix(in srgb, #f97316 15%, #1c1d1f);
  --color-accent-secondary: #fb923c;
  --color-accent-yellow: #fde047;
  --color-bg-base: #1c1d1f;
  --color-bg-gradient: #1c1d1f;
  --color-bg-overlay: #ffffff0a;
  --color-bg-sidebar-primary: #17181a;
  --color-bg-subtle: #232427;
  --color-bg-surface: #2a2b2e;
  --color-black: #000;
  --color-border: oklch(100% 0 0/.1);
  --color-border-default: #ffffff1f;
  --color-border-overlay: #ffffff0f;
  --color-border-strong: #fff3;
  --color-border-subtle: #ffffff0f;
  --color-danger-bg: #ef4444;
  --color-danger-bg-hover: #dc2626;
  --color-danger-text: #fff;
  --color-error: #f87171;
  --color-error-strong: #f87171;
  --color-highlight-from: #fb923c;
  --color-highlight-to: #fdba74;
  --color-icon-disabled: #574f3e;
  --color-icon-muted: #a8a088;
  --color-inline-code-bg: color-mix(in srgb, #fdba74 10%, transparent);
  --color-interactive-bg: #f97316;
  --color-interactive-bg-active: #ea580c;
  --color-interactive-bg-hover: #fb923c;
  --color-interactive-shadow: color-mix(in srgb, #f97316 40%, transparent);
  --color-interactive-shadow-hover: color-mix(in srgb, #f97316 60%, transparent);
  --color-interactive-text: #fff;
  --color-label-primary: #fb923c;
  --color-label-secondary: #fdba74;
  --color-mono-text: #f5dfa8;
  --color-status-error: #c44030;
  --color-status-warn: #c48030;
  --color-success: #4ade80;
  --color-text-disabled: #574f3e;
  --color-text-inverse: #232427;
  --color-text-inverse-muted: #ffffff9e;
  --color-text-muted: #7a7260;
  --color-text-primary: #e4e0d0;
  --color-text-secondary: #ccc7b0;
  --color-text-subtle: #a8a088;
  --color-user-message: #e4e0d0;
  --color-warning: #fb923c;
  --bg: #17181a; --bg2: #17181a; --panel: #141414; --panel2: #1c1d1f;
  --fg: #ffffff; --ink: #e4e0d0; --night-mid: #101113;
  --red: #f87171; --green: #4ade80; --cyan: #22d3ee;
  --orange-ink: #fdba74; --red-ink: #fca5a5; --cyan-ink: #a5f3fc; --cyan-sub: #5aa9b5;
  --orange-soft: color-mix(in srgb, var(--orange) 14%, transparent);
  --shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
}
html, body { background: var(--bg); color: var(--color-text-primary); }

:root {
  --mute: var(--color-text-subtle);
  --dim: var(--color-text-muted);
  --line: var(--color-border-subtle);
  --line2: var(--color-border-default);
  --orange: var(--primitive-orange-500);
  --r: 12px;
}
html { background: var(--bg); }
body { background: var(--bg); overflow-x: hidden; }
.wrap { width: min(1280px, 100% - 3rem); }
h1, h2 { letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 4.9vw, 4.4rem); font-weight: 600; line-height: 1.0; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 500; line-height: 1.05; }
.lede { font-size: 1.15rem; color: var(--color-text-secondary); max-width: 58ch; margin: 1.1rem 0 0; }
.mono { font-family: var(--font-mono); }
/* Primary CTA: light text on orange in both themes. Deliberately theme-independent primitives:
   orange-600 at rest (white 3.6:1) and orange-700 on hover (5.2:1); the semibold weight keeps the label crisp. */
.btn-primary { background: var(--primitive-orange-600); color: var(--color-interactive-text); font-weight: 600; }
.btn-primary:hover { background: var(--primitive-orange-700); }
.btn-sm { padding: .55rem .95rem; font-size: .92rem; }
.btn-lg { padding: 1rem 1.5rem; font-size: 1.08rem; }

/* NAV */
.nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 2rem; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; }
.brand .logo-mark { width: 24px; height: 24px; }
.brand .logo-word { height: 18px; }
.nav-links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--color-text-secondary); font-size: .95rem; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }

/* HERO */
.hero { position: relative; padding: 4.5rem 0 4rem; min-height: calc(100dvh - 64px); display: grid; align-items: center; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero-cta { display: flex; margin-top: 1.8rem; align-items: center; }
.hero-stage { position: relative; min-height: 520px; }
.hero-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.hero-stage .console { opacity: 0; }
/* Hero console stays straight: no tilt, no hover transform. */
.hero-console { transform: none; }
.hero-static-mark { display: none; }
@media (max-width: 980px) {
  .hero { min-height: 0; padding: 3rem 0 3rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-stage { min-height: 0; }
}

/* CONSOLE COMPONENT (rebuilt console chrome: sidebar, panel, status bar) */
.console { position: relative; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-rows: 1fr 32px; font-size: 13px; color: var(--color-text-secondary); }
.console-body { display: grid; grid-template-columns: 48px 1fr; min-height: 0; }
.c-side { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--fg) 3.5%, transparent) 6px 7px); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 6px; }
.c-side .logo-mark { width: 18px; height: 18px; color: var(--ink); margin-bottom: 10px; }
.c-ico { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--mute); position: relative; }
.c-ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.c-ico.on { color: var(--orange); }
.c-ico.on::before { content: ""; position: absolute; left: -9px; top: 6px; bottom: 6px; width: 2px; background: var(--orange); border-radius: 2px; }
.c-ico.av { margin-top: auto; width: 26px; height: 26px; border-radius: 50%; background: #1d6fd1; color: #fff; font: 600 12px var(--font-sans); }
.c-main { position: relative; min-width: 0; background: var(--color-bg-base); margin: 8px 8px 8px 0; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; display: flex; }
.c-list { flex: 1 1 auto; min-width: 0; }
.c-status { display: flex; align-items: center; gap: 1.1rem; padding: 0 12px; font: 11.5px var(--font-mono); color: var(--mute); border-top: 1px solid var(--line); background: var(--bg2); }
.c-status .sb-mark { width: 14px; height: 14px; color: var(--orange); }
.c-status .sb-mark.busy { animation: beat var(--beat, 1.4s) ease-in-out infinite; }
.c-status .right { margin-left: auto; }
.c-status .sbi { display: inline-flex; align-items: center; gap: .4rem; }
@keyframes beat { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.18); opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--orange) 70%, transparent)); } }

/* panel chrome */
.p-head { display: flex; align-items: center; gap: .6rem; padding: 14px 18px 10px; font-weight: 600; font-size: 14px; color: var(--ink); }
.p-head .cnt { color: var(--dim); font-weight: 400; }
.p-head .tools { margin-left: auto; display: flex; gap: 10px; color: var(--dim); }
.p-head .tools i { width: 14px; height: 14px; border: 1.4px solid currentColor; border-radius: 3px; display: block; opacity: .7; }
.tabs { display: flex; gap: 1.2rem; padding: 0 18px; font: 600 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line); }
.tabs span { padding: 8px 0 9px; }
.tabs span.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--orange); }
.tabs .srch { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 12px; align-self: center; padding: 4px 10px 5px; border: 1px dashed var(--line2); border-radius: 8px; }

/* table */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font: 600 10.5px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 10px 10px; border-bottom: 1px dashed var(--line2); }
.tbl td { padding: 9px 10px; border-bottom: 1px dashed var(--line); vertical-align: top; color: var(--color-text-secondary); }
.tbl td.ttl { color: var(--ink); }
.tbl td.ttl b { font-weight: 500; }
.tbl td.num, .tbl th.num { font-family: var(--font-mono); white-space: nowrap; }
.tbl tr.sel td { background: var(--orange-soft); }
.tbl tr.sel td.ttl { color: var(--orange); box-shadow: inset 2px 0 0 var(--orange); }
.tbl .id { font: 11px var(--font-mono); color: var(--dim); margin-right: 6px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 3px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 5%, transparent); font-size: 11.5px; white-space: nowrap; color: var(--color-text-secondary); }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill.todo { color: var(--mute); }
.pill.prog { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.pill.rev { color: var(--orange); background: var(--orange-soft); }
.pill.done { color: var(--green); background: color-mix(in srgb, var(--green) 9%, transparent); }
.pill.hi { color: var(--orange); }
.pill.lo { color: var(--mute); }
.pill.blk { color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }
.pill.run { color: var(--orange); border: 1px dashed color-mix(in srgb, var(--orange) 50%, transparent); background: transparent; }
.pill.run::before { background: var(--orange); animation: blink 1s steps(2) infinite; }
.pill.idle { color: var(--mute); border: 1px dashed var(--line2); background: transparent; }
.pill.none::before { display: none; }
@keyframes blink { 50% { opacity: .2; } }
.add { padding: 10px 18px; color: var(--dim); font-size: 12px; }

/* right side detail panel */
.detail { flex: 0 0 44%; background: var(--bg2); border-left: 1px solid var(--line2); display: flex; flex-direction: column; min-width: 0; }
.d-head { display: flex; align-items: center; gap: .5rem; padding: 12px 16px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 13px; }
.d-head .x { margin-left: auto; color: var(--dim); font-weight: 400; }
.d-body { flex: 1; overflow: hidden; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.d-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--bg2)); pointer-events: none; }
.msg { font-size: 12.5px; line-height: 1.45; }
.msg.me { color: var(--ink); background: var(--color-bg-surface); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); }
.msg .who { display: block; font: 10.5px var(--font-mono); color: var(--dim); margin-bottom: 3px; }
.msg code { font-size: 11.5px; background: color-mix(in srgb, var(--fg) 6%, transparent); padding: 1px 5px; border-radius: 4px; color: var(--color-text-primary); }
.tool { font: 11.5px var(--font-mono); color: var(--mute); padding: 5px 9px; border-left: 2px solid var(--line2); background: color-mix(in srgb, var(--fg) 2.5%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool b { color: var(--orange); font-weight: 400; }
.tool.ok b { color: var(--green); }
.tool.fail b { color: var(--red); }
.tool.learn b { color: var(--cyan); }
.d-foot { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; font: 11.5px var(--font-mono); color: var(--mute); }
.d-foot .chip { padding: 3px 8px; border-radius: 6px; background: var(--color-bg-surface); }
.d-foot .chip.o { color: var(--orange); }
.d-foot .run { margin-left: auto; color: var(--ink); padding: 4px 10px; border: 1px solid var(--line2); border-radius: 7px; }

/* NIGHT SHIFT (pinned, scroll-scrubbed) */
.night { position: relative; background: linear-gradient(180deg, var(--bg), var(--night-mid) 40%, var(--bg)); }
.night-pin { min-height: 100dvh; display: grid; align-items: center; padding: 2rem 0; }
.night-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; align-items: center; }
.night-lede { font-size: 1.02rem; margin-top: .9rem; }
.clock { display: flex; align-items: baseline; gap: .7rem; margin-top: 1.6rem; font: 400 clamp(2.6rem, 4vw, 3.6rem)/1 var(--font-mono); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.clock .clk-day { font-size: 1rem; color: var(--dim); }
.rail { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 2px; position: relative; }
.rail::before { content: ""; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 1px; background: var(--line2); }
.rail li { display: grid; grid-template-columns: 54px 1fr; gap: .6rem; padding: .35rem 0 .35rem 1.1rem; position: relative; font-size: .86rem; color: var(--dim); transition: color .3s; }
.rail li::before { content: ""; position: absolute; left: 0; top: .72rem; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line2); transition: background .3s, border-color .3s, box-shadow .3s; }
.rail li b { font: 400 .8rem var(--font-mono); color: inherit; }
.rail li.on { color: var(--ink); }
.rail li.on::before { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.rail li.past { color: var(--mute); }
.rail li.past::before { background: var(--mute); border-color: var(--mute); }
.night-caption { display: none; }
.night-console { height: min(580px, 72dvh); min-height: 500px; grid-template-rows: 1fr 32px; }
.night-console .c-main.scenes { display: block; }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; display: flex; flex-direction: column; }
.scene.issue { flex-direction: row; }
.scene[data-s="0"] { opacity: 1; visibility: visible; }
.c-ico.on { color: var(--orange); }
@media (max-width: 980px) {
  .night-pin { min-height: 0; }
  .night-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .rail { display: none; }
  .night-caption { display: block; font: .9rem var(--font-mono); color: var(--ink); margin: .6rem 0 0; min-height: 2.6em; }
  .night-console { height: 520px; }
  .scene.issue .c-list { display: none; }
  .detail { flex-basis: 100%; border-left: 0; }
}

/* Slack scene */
.scene.slack { background: #1a1d21; color: #d1d2d3; font-family: var(--font-sans); }
.sl-head { display: flex; gap: .8rem; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 700; color: #fff; font-size: 14px; }
.sl-head .sl-sub { font-weight: 400; color: #9a9b9d; font-size: 12px; }
.sl-msg { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 12px 16px; font-size: 13.5px; line-height: 1.5; }
.sl-msg b { color: #fff; font-weight: 700; }
.sl-msg time { font-size: 11.5px; color: #9a9b9d; margin-left: .3rem; }
.sl-msg p { margin: 2px 0 0; }
.sl-msg mark { background: rgba(29,155,209,.2); color: #8fd1f5; border-radius: 3px; padding: 0 3px; }
.sl-msg code { font-size: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: #f0a56f; padding: 0 4px; border-radius: 3px; }
.sl-av { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 15px; }
.sl-av.fc { background: var(--orange); }
.sl-av.fc .logo-mark { width: 22px; height: 22px; color: #1c1d1f; }
.sl-msg.dim { opacity: .55; }
.sl-msg.fc[data-step="reply"] { opacity: 0; transform: translateY(8px); }
.sl-list { margin: 8px 0 0; padding-left: 1.2rem; display: grid; gap: 3px; font-size: 13px; }
.sl-meta { color: #9a9b9d; font-size: 12px; margin-top: 8px !important; }

/* Factories scene */
.f-search { margin: 0 18px 8px; padding: 7px 10px; border-bottom: 1px dashed var(--line2); color: var(--dim); font-size: 12.5px; }
.f-grp { padding: 10px 18px 4px; font: 600 10.5px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.f-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 8px 18px; border-bottom: 1px dashed var(--line); transition: opacity .4s; }
.f-row.sel { background: var(--orange-soft); }
.f-row b { display: block; color: var(--ink); font-weight: 500; font-size: 13px; }
.f-row small { color: var(--dim); font-size: 11.5px; }
.f-ic svg { width: 18px; height: 18px; stroke: var(--mute); fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.f-st { font: 11px var(--font-mono); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--mute); }
.f-st.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.f-st.off { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.f-row.off { opacity: .55; }
.f-note { margin: auto 18px 14px; padding: 10px 12px; border-left: 2px solid var(--cyan); background: color-mix(in srgb, var(--cyan) 6%, transparent); color: var(--color-text-secondary); font: 11.5px/1.5 var(--font-mono); opacity: 0; transform: translateY(6px); }

/* Automations scene */
.tbl.auto .pill.mono { font: 11px var(--font-mono); color: var(--color-text-secondary); }
.tbl td.hot { color: var(--red); }
.a-event { margin: auto 18px 14px; padding: 10px 12px; border-left: 2px solid var(--red); background: color-mix(in srgb, var(--red) 7%, transparent); color: var(--color-text-secondary); font: 11.5px/1.5 var(--font-mono); opacity: 0; transform: translateY(6px); }
.a-event b { color: var(--red); font-weight: 400; }
.a-event code { color: var(--ink); }
.morning { margin: auto 18px 14px; display: grid; gap: 6px; }

/* PILLARS (bento, 2 wide + 2 narrow) */
.pillars { padding: 7rem 0 5rem; }
.pillars h2 { max-width: 34ch; }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-top: 2.6rem; }
.cell { grid-column: span 5; padding: 1.6rem 1.7rem 1.5rem; border: 1px solid var(--line2); border-radius: var(--r); background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 2.5%, transparent), transparent); display: flex; flex-direction: column; gap: .7rem; min-height: 300px; }
.cell.wide { grid-column: span 7; }
.cell h3 { font-size: 1.28rem; font-weight: 500; letter-spacing: -.01em; }
.cell > p { margin: 0; color: var(--color-text-secondary); font-size: .98rem; max-width: 60ch; }
#cell-proactive { background: radial-gradient(60% 80% at 60% 50%, color-mix(in srgb, var(--orange) 9%, transparent), transparent 70%); }
#cell-learn { background: radial-gradient(50% 90% at 80% 60%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 70%); }
.wires { width: 100%; height: auto; margin-top: auto; }
.dur-strip { position: relative; margin-top: auto; height: 96px; font-size: 11px; color: var(--mute); }
.dur-line { position: absolute; left: 4%; right: 8%; top: 54px; height: 1px; background: repeating-linear-gradient(90deg, var(--line2) 0 5px, transparent 5px 11px); }
.dur-cursor { position: absolute; left: 4%; top: 48px; width: 13px; height: 13px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px var(--orange-soft); transform: translateX(-50%); }
.dur-strip .dot { position: absolute; left: var(--x); top: 70px; transform: translateX(-50%); white-space: nowrap; }
.dur-strip .dot::before { content: ""; position: absolute; left: 50%; top: -16px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--green); }
.dur-strip .dot.off::before { background: var(--mute); }
.dur-strip .dot.warn::before { background: var(--red); }
.dur-strip .dot:nth-child(2), .dur-strip .dot:nth-child(4) { top: 24px; }
.dur-strip .dot:nth-child(2)::before, .dur-strip .dot:nth-child(4)::before { top: auto; bottom: -16px; }
.sleep-log { list-style: none; margin: auto 0 0; padding: 0; font-size: 11.5px; color: var(--color-text-secondary); display: grid; gap: 5px; }
.sleep-log li { opacity: 0; transform: translateY(6px); padding-left: 0; }
.sleep-log b { color: var(--orange); font-weight: 400; margin-right: .6rem; }
.learn-loop { margin-top: auto; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: .4rem; position: relative; padding-bottom: 3rem; }
.ll-stage { border: 1px solid var(--line2); border-radius: 10px; padding: .6rem .8rem; display: grid; gap: 3px; background: var(--bg2); }
.ll-stage.gate { border-style: dashed; }
.ll-stage.ship { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.ll-k { font: 600 10px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ll-stage code { font-size: 11px; color: var(--ink); }
.ll-arrow { height: 1px; background: repeating-linear-gradient(90deg, var(--line2) 0 4px, transparent 4px 9px); position: relative; }
.ll-arrow::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left-color: var(--mute); }
.ll-back { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: .6rem; align-items: center; font: 11px var(--font-mono); color: var(--mute); padding: .5rem .2rem 0; border-top: 1px dashed color-mix(in srgb, var(--cyan) 35%, transparent); }
.ll-back .cy { color: var(--cyan); }
@media (max-width: 980px) {
  .cell, .cell.wide { grid-column: span 12; min-height: 0; }
  .learn-loop { grid-template-columns: 1fr; }
  .ll-arrow { display: none; }
  .ll-back { position: static; flex-wrap: wrap; margin-top: .6rem; }
}

/* MISSIONS (autopilot board) */
.missions { padding: 4rem 0 6rem; }
.m-head { max-width: 760px; }
.board { margin-top: 2.4rem; border: 1px solid var(--line2); border-radius: var(--r); background: var(--bg2); overflow: hidden; }
.b-top { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink); }
.b-top .logo-mark { width: 16px; height: 16px; color: var(--orange); }
.b-top .b-fac { font-size: .78rem; color: var(--dim); }
.b-top .b-par { margin-left: auto; font-size: .78rem; color: var(--orange); }
.cols { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 420px; }
.col { border-right: 1px solid var(--line); padding: .8rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.col:last-child { border-right: 0; }
.col-h { font: 600 10.5px var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--mute); display: flex; justify-content: space-between; padding: .1rem .2rem .5rem; }
.card { background: var(--color-bg-base); border: 1px solid var(--line2); border-radius: 9px; padding: .65rem .75rem; font-size: .84rem; color: var(--ink); display: grid; gap: .45rem; will-change: transform; }
.card .meta { display: flex; gap: .5rem; align-items: center; font: 10.5px var(--font-mono); color: var(--dim); flex-wrap: wrap; }
.card .meta .pr { color: var(--green); }
.card .meta .ag { color: var(--orange); }
.card .meta .bl { color: var(--red); }
.card .meta .rv { color: var(--orange); }
.card.prog { border-color: color-mix(in srgb, var(--orange) 55%, transparent); }
.card.rev { border-color: color-mix(in srgb, var(--orange) 35%, transparent); border-style: dashed; }
.card.done { opacity: .75; }
.card .bar { height: 2px; background: var(--line2); border-radius: 2px; overflow: hidden; }
.card .bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--orange); transition: width .6s var(--ease-out); }
@media (max-width: 980px) { .cols { grid-template-columns: repeat(2, 1fr); } .col:nth-child(2) { border-right: 0; } .col:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 520px) { .cols { grid-template-columns: 1fr; } .col { border-right: 0; border-bottom: 1px solid var(--line); } }

/* TERMS */
.terms { padding: 2rem 0 6rem; }
.terms-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: center; }
.inl { font-size: .95em; background: color-mix(in srgb, var(--fg) 6%, transparent); padding: .05em .4em; border-radius: 4px; color: var(--ink); }
.t-console { height: 460px; }
.f-grp.cy { color: var(--cyan); }
.f-row.own b { color: var(--ink); }
.f-row.own { box-shadow: inset 2px 0 0 var(--cyan); }
.t-term { margin: 14px 18px 0; padding: 10px 12px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); font-size: 11.5px; line-height: 1.6; color: var(--ink); }
.t-term .pr { color: var(--cyan); }
.t-term .out { color: var(--mute); }
.prov { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; align-items: center; justify-content: center; margin-top: 3.2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.plogo { display: block; height: 22px; aspect-ratio: var(--ar); background: var(--color-text-secondary); opacity: .6; transition: opacity .2s;
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.plogo:hover { opacity: 1; }
@media (max-width: 980px) { .terms-grid { grid-template-columns: 1fr; } .t-console { height: 440px; } .prov { gap: 1rem 1.6rem; } .plogo { height: 18px; } }

/* CTA + FOOTER */
.cta { padding: 5rem 0 6rem; border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 70%); pointer-events: none; }
.cta-in { position: relative; text-align: center; display: grid; justify-items: center; gap: 1rem; }
.cta-in .lede { margin: 0; }
.cta-mark .logo-mark { width: 64px; height: 64px; color: var(--orange); }
/* Footer: shared markup on every page (absolute links), brand + tagline left, link columns right */
.foot { border-top: 1px solid var(--line2); padding: 3.2rem 0 1.6rem; color: var(--dim); font-size: .92rem; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2.5rem; }
.foot-logo { display: inline-flex; color: var(--ink); text-decoration: none; }
.foot-logo .logo-word { height: 20px; }
.foot-tag { margin: .9rem 0 0; color: var(--color-text-secondary); max-width: 34ch; line-height: 1.5; }
.foot-nav { display: flex; gap: 4.5rem; }
.foot-col { display: grid; gap: .65rem; align-content: start; }
.foot-h { margin: 0 0 .2rem; font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); }
.foot-col a { color: var(--ink); text-decoration: none; width: fit-content; padding-block: .1rem; transition: color .15s; }
.foot-col a:hover, .foot-col a:focus-visible { color: var(--orange); }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line2); font-size: .82rem; color: var(--color-text-secondary); }
.foot-mark .logo-mark { display: block; width: 16px; height: 16px; color: var(--orange); }
@media (max-width: 760px) {
  .foot { padding-top: 2.4rem; }
  .foot-in { flex-direction: column; gap: 2rem; }
  .foot-nav { gap: 3rem; }
  .foot-base { margin-top: 2rem; }
}

/* REDUCED MOTION: meaningful static state */
@media (prefers-reduced-motion: reduce) {
  .hero-stage canvas { display: none; }
  .hero-stage .console { opacity: 1; transform: none; }
  .night-console .scene { position: relative; opacity: 1; visibility: visible; inset: auto; }
  .night-console { height: auto; }
  .night-console .c-main.scenes { display: grid; gap: 0; }
  .scene + .scene { border-top: 1px solid var(--line2); }
  .f-note, .a-event, .sl-msg.fc[data-step="reply"], .sleep-log li { opacity: 1; transform: none; }
  .rail li { color: var(--ink); }
  .pk, .sb-mark.busy, .cta-mark .logo-mark { animation: none !important; }
}

/* hero console: tighter, issue list + stream must both fit */
.hero-console { height: 560px; }
.hero-console .c-list { flex: 1 1 56%; }
.hero-console .detail { flex-basis: 44%; }
.hero-console .tbl th:nth-child(3), .hero-console .tbl td:nth-child(3), .hero-console .tbl th:nth-child(5), .hero-console .tbl td:nth-child(5) { display: none; }
.hero-console .tbl td { font-size: 12px; padding: 8px 8px; }
.hero-console .tabs .srch { display: none; }
.hero-console .d-head span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-console .d-foot .chip { white-space: nowrap; }
.hero-console .d-foot .chip:nth-child(2) { display: none; }
.brand .logo-word { height: 20px; }
@media (max-width: 980px) { .hero-console { height: 520px; } .hero-console .detail { display: none; } }
.hero-console .tbl { table-layout: fixed; }
.hero-console .tbl td.ttl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-console .tbl th:nth-child(2), .hero-console .tbl td:nth-child(2) { width: 104px; }
.hero-console .tbl th:nth-child(4), .hero-console .tbl td:nth-child(4) { width: 96px; }
.hero-console .pill.blk { font-size: 10.5px; }

/* pass 2: mobile polish */
.c-status { white-space: nowrap; overflow: hidden; }
.c-status .sbi { flex-shrink: 0; }
.c-status .right { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.b-top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.b-top .b-fac, .b-top .b-par { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
  .b-top .b-fac { display: none; }
  .night h2 { font-size: 1.7rem; }
  .night-lede { display: none; }
  .clock { margin-top: .6rem; font-size: 2.2rem; }
  .night-caption { min-height: 0; margin-top: .3rem; }
  .night-console { height: min(460px, 60dvh); min-height: 400px; }
  .night-pin { padding: 1rem 0; }
  .hero-console .tbl th:nth-child(2), .hero-console .tbl td:nth-child(2) { width: 92px; }
  .hero-console .tbl th:nth-child(4), .hero-console .tbl td:nth-child(4) { width: 84px; }
  .c-status { gap: .8rem; font-size: 10.5px; }
  .c-status .sbi:nth-child(3) { display: none; }
}
.night-pin { padding-top: 80px; }
.tool { overflow: clip; }
@media (max-width: 640px) { .night-pin { padding-top: 76px; } .night h2 { max-width: 14ch; } .night-console { height: min(440px, 56dvh); min-height: 380px; } }
.t-console { height: 520px; }
.t-console .c-main { overflow: visible; }
.dur-strip { height: 120px; }
.dur-line { top: 70px; } .dur-cursor { top: 64px; } .dur-strip .dot { top: 86px; } .dur-strip .dot:nth-child(2), .dur-strip .dot:nth-child(4) { top: 40px; }
.dur-facts { margin: .6rem 0 0; display: grid; gap: .35rem; font-size: 11.5px; }
.dur-facts div { display: grid; grid-template-columns: 130px 1fr; gap: .6rem; }
.dur-facts dt { color: var(--mute); } .dur-facts dd { margin: 0; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .night-grid { align-items: start; }
  .night-copy { position: sticky; top: 80px; }
  .scene::before { content: attr(data-t); display: block; padding: 6px 18px; font: 11px var(--font-mono); color: var(--orange); border-bottom: 1px dashed var(--line2); }
  .scene.issue::before { position: absolute; top: 0; left: 0; right: 0; }
  .scene.issue { padding-top: 26px; position: relative; }
  .c-ico[data-nav="chat"] { color: var(--orange); }
}

/* Vendored icons rendered via mask so they take currentColor. Console nav glyphs live in icons/lucide/ and match
   the product side nav (forge-desktop src/renderer/side-nav.tsx, lucide-react): Chats MessagesSquare, Missions BowArrow,
   Factories Factory, Automations CalendarClock, Reports Table. Remaining icons/*.svg are Tabler. */
.ti { display: block; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.f-ic .ti { width: 18px; height: 18px; color: var(--mute); }

/* night shift pass 2: bigger console, tighter rail, ghost morphs */
.night-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2.2rem; }
.night-console { height: min(680px, 78dvh); min-height: 560px; font-size: 13.5px; }
.night-console .tbl { font-size: 13px; }
.night-console .tbl td { padding: 10px 10px; }
.night-console .sl-msg { font-size: 14px; }
.night-console .msg { font-size: 13px; }
.night-console .tool { font-size: 12px; }
.night h2 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
.night-lede { font-size: .95rem; }
.clock { font-size: clamp(2.2rem, 3vw, 2.8rem); margin-top: 1.2rem; }
.rail { margin-top: 1rem; }
.rail li { font-size: .8rem; padding: .25rem 0 .25rem 1rem; grid-template-columns: 44px 1fr; gap: .4rem; }
.rail li b { font-size: .74rem; }
.ghost { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; overflow: hidden; border-radius: 6px; border: 1px solid var(--line2); box-shadow: 0 18px 40px -10px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--orange) 25%, transparent); will-change: transform; }
.ghost > * { width: 100%; }
.ghost.slack { color: #d1d2d3; font-family: var(--font-sans); } .ghost .sl-msg { font-size: 14px; } .ghost .sl-msg.fc[data-step] { opacity: 1; transform: none; }

/* Hero console edge: no dark spread ring; soft drop shadow + low-contrast theme hairline only. */
.hero-console { border-color: var(--line2); box-shadow: 0 40px 100px -30px rgba(60,50,20,.32), -20px 0 60px -40px color-mix(in srgb, var(--orange) 25%, transparent); }
html[data-theme="dark"] .hero-console { border-color: var(--line); box-shadow: 0 40px 100px -30px rgba(0,0,0,.8), -20px 0 60px -40px color-mix(in srgb, var(--orange) 25%, transparent); }
@media (min-width: 981px) { .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* pass 2: mobile night shift = stacked, readable scenes (no pinned mini console) */
@media (max-width: 980px) {
  .night-console { height: auto; min-height: 0; }
  .night-console .c-main.scenes { display: grid; }
  .night-console .scene { position: relative; inset: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; min-height: 0; }
  .night-console .scene + .scene { border-top: 1px solid var(--line2); }
  .night-console .scene::before { content: attr(data-t); display: block; padding: 8px 14px; font: 11.5px var(--font-mono); color: var(--orange); background: var(--bg2); border-bottom: 1px solid var(--line); }
  .night-console .scene.issue { flex-direction: column; }
  .night-console .scene.issue::before { position: static; }
  .night-console .scene.issue { padding-top: 0; }
  .night-console .c-side { display: none; }
  .night-console .console-body { grid-template-columns: 1fr; }
  .night-console .c-main { margin: 8px; overflow: visible; }
  .night-console .c-list { width: 100%; }
  .night-console .detail { flex: 1 1 100%; width: 100%; border-left: 0; }
  .night-console .scene.issue .c-list { display: none; }
  .night-grid { grid-template-columns: 1fr; }
  .night-console .scene { width: 100%; }
  .night-console .tbl { font-size: 12.5px; }
  .night-console .tbl th:nth-child(3), .night-console .tbl td:nth-child(3), .night-console .tbl th:nth-child(5), .night-console .tbl td:nth-child(5) { display: none; }
  .night-console .tbl.auto th:nth-child(3), .night-console .tbl.auto td:nth-child(3) { display: table-cell; }
  .night-console .tbl.auto th:nth-child(4), .night-console .tbl.auto td:nth-child(4) { display: none; }
  .night-console .f-note, .night-console .a-event, .night-console .sl-msg.fc[data-step="reply"] { opacity: 1; transform: none; margin-top: 10px; }
  .night-console .d-body { max-height: none; }
  .night-console .d-body::after { display: none; }
  .night-console .morning { margin-top: 10px; }
  .night-caption, .clock { display: none; }
  .rail { display: grid; }
  .rail li { color: var(--ink); }
  .night-pin { padding-top: 1.5rem; }
}
@media (max-width: 980px) {
  .night-console .c-main { overflow: hidden; }
  .night-console .scene, .night-console .c-list, .night-console .detail { max-width: 100%; min-width: 0; }
  .night-console .tbl { table-layout: fixed; width: 100%; }
  .night-console .tbl td { overflow-wrap: anywhere; }
  .night-console .tbl td:nth-child(2) { width: 110px; }
  .night-console .sl-msg p, .night-console .sl-list li, .night-console .f-note, .night-console .a-event, .night-console .f-row small { overflow-wrap: anywhere; white-space: normal; }
  .night-console .scene::before { white-space: normal; }
  .night-console .f-row { grid-template-columns: 24px 1fr auto; }
  .night-console .tool { white-space: normal; overflow: visible; text-overflow: clip; }
  .night-console .tabs .srch, .night-console .p-head .tools { display: none; }
}
@media (max-width: 980px) { .night-console .tbl td:nth-child(2) { width: 96px; } .night-console .tbl .id { display: block; } .night-console .tbl th:nth-child(4), .night-console .tbl td:nth-child(4) { width: 92px; } }
@media (prefers-reduced-motion: reduce) { .ghost { display: none; } .hero-stage .console { transform: none !important; } }
@media (max-width: 980px) { .ghost { display: none; } }
.f-log { margin: auto 18px 14px; display: grid; gap: 5px; font-size: 11.5px; line-height: 1.5; color: var(--color-text-secondary); }
.fl { padding: 6px 10px; border-left: 2px solid var(--line2); background: color-mix(in srgb, var(--fg) 2.5%, transparent); }
.fl b { font-weight: 400; color: var(--mute); margin-right: .5rem; }
.fl.fail { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 7%, transparent); } .fl.fail b { color: var(--red); }
.fl.ok { border-left-color: var(--green); background: color-mix(in srgb, var(--green) 7%, transparent); } .fl.ok b { color: var(--green); }
.f-st.warn { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 50%, transparent); }
.a-event { line-height: 1.6; } .a-event br { content: ""; display: block; margin-top: 4px; }
@media (prefers-reduced-motion: reduce), (max-width: 980px) { .f-log .fl { opacity: 1; transform: none; } }

/* VELOCITY: harness vs factory */
.velocity { padding: 6rem 0 1rem; }
.velocity h2 { max-width: 30ch; }
.vel-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; margin-top: 2.2rem; }
.vel-col { border: 1px solid var(--line2); border-radius: var(--r); padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .8rem; }
.vel-col h3 { font-size: 1.15rem; font-weight: 500; }
.vel-col ul { margin: 0; padding-left: 1.1rem; color: var(--color-text-secondary); display: grid; gap: .45rem; font-size: .97rem; }
.vel-col.fac { border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: radial-gradient(70% 80% at 80% 0%, color-mix(in srgb, var(--orange) 10%, transparent), transparent 70%); }
.vel-col.fac h3, .vel-col.fac ul { color: var(--ink); }
.vel-m { margin: auto 0 0; padding-top: .6rem; border-top: 1px dashed var(--line2); font-size: .8rem; color: var(--mute); }
.vel-col.fac .vel-m { color: var(--orange); }
@media (max-width: 980px) { .vel-grid { grid-template-columns: 1fr; } .velocity { padding-top: 4rem; } }
.pillars { padding-top: 5rem; }
.src-hidden { visibility: hidden !important; }
@media (max-width: 980px) {
  .night-console .tbl.auto th:nth-child(3), .night-console .tbl.auto td:nth-child(3) { display: none; }
  .night-console .tbl.auto td:nth-child(2) { width: auto; }
  .night-console .tbl.auto .pill.mono { white-space: normal; overflow-wrap: anywhere; display: inline; line-height: 1.8; }
}

.pv { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-text-secondary); font-weight: 500; font-size: 1rem; white-space: nowrap; }
.pv b { font-weight: 500; }
.pv i { display: block; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.pv .pico { width: 1.35em; height: 1.35em; }
.pv .pwm { width: 5.2em; height: 1.1em; }
.prov .pv { opacity: .75; transition: opacity .2s; } .prov .pv:hover { opacity: 1; color: var(--color-text-primary); }
/* trimmed sections + CTA swarm */
.vel-col ul { list-style: none; padding-left: 0; font-family: var(--font-mono); font-size: .9rem; }
.vel-col ul li::before { content: "> "; color: var(--mute); }
.vel-col.fac ul li::before { color: var(--orange); }
.cta-mark { position: relative; width: 220px; height: 220px; }
#cta-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 600px) { .cta-mark { width: 150px; height: 150px; } }
/* velocity: single comparison timeline */
.velocity h2 .hl { color: var(--orange); }
.vel-viz { position: relative; margin-top: 2.4rem; border: 1px solid var(--line2); border-radius: var(--r); padding: 1.4rem 1.6rem 1.6rem; display: grid; gap: 1.2rem; overflow: hidden; }
.vel-axis, .vel-row { display: grid; grid-template-columns: 190px minmax(0,1fr) 190px; gap: 1.4rem; align-items: center; }
.vel-axis { font-size: 11px; color: var(--mute); }
.vel-axis::before { content: ""; }
.vel-axis span { display: none; }
.vel-axis { background: none; }
.vel-axis { grid-template-columns: 190px repeat(4, minmax(0,1fr)) 190px; }
.vel-axis span { display: block; } .vel-axis span:last-child { text-align: right; }
.vel-who { display: grid; gap: 2px; } .vel-who b { font-weight: 500; font-size: 1.05rem; } .vel-who span { font-size: 11px; color: var(--mute); }
.vel-lanes { display: grid; gap: 7px; }
.lane { position: relative; height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--fg) 3.5%, transparent); }
.seg { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border-radius: 6px; background: var(--color-text-secondary); opacity: .55; transform-origin: left; }
.fac .seg { background: var(--orange); opacity: .9; } .fac .seg.red { background: var(--red); }
.stop { position: absolute; left: 39%; top: -4px; font-size: 11px; color: var(--mute); font-style: normal; white-space: nowrap; padding-left: 8px; border-left: 2px solid var(--mute); line-height: 18px; }
.vel-m { margin: 0; font-size: .82rem; color: var(--mute); text-align: right; }
.vel-row.fac .vel-m { color: var(--orange); font-size: 1rem; }
.vel-row.fac { padding-top: 1.2rem; border-top: 1px dashed var(--line2); }
.vel-night { position: absolute; top: 0; bottom: 0; left: calc(1.6rem + 190px + 1.4rem + (100% - 3.2rem - 380px - 2.8rem) * .38); width: calc((100% - 3.2rem - 380px - 2.8rem) * .5); background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 5%, transparent), transparent); border-left: 1px dashed color-mix(in srgb, var(--fg) 8%, transparent); pointer-events: none; }
@media (max-width: 980px) {
  .vel-axis, .vel-row { grid-template-columns: minmax(0,1fr); gap: .5rem; }
  .vel-axis { grid-template-columns: repeat(4, minmax(0,1fr)); } .vel-axis::before { display: none; }
  .vel-m { text-align: left; } .vel-night { display: none; } .vel-viz { padding: 1.1rem; }
}
/* pillars: label + plain title, balanced bento */
.cell-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin-bottom: -.3rem; }
.cell { min-height: 360px; }
.dur-strip, .dur-facts { display: none; }
.dur-viz { margin-top: auto; flex: 1; display: grid; align-content: space-between; gap: .7rem; border: 1px solid var(--line2); border-radius: 12px; padding: .9rem 1rem; background: var(--bg2); font-size: 11.5px; transition: border-color .3s, background .3s; min-height: 170px; }
.dur-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.sbx { display: inline-flex; gap: .45rem; align-items: center; color: var(--color-text-secondary); }
.sbx .logo-mark { width: 14px; height: 14px; color: var(--orange); }
.dur-st b { display: none; font-weight: 400; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.s-run, .s-res { color: var(--green); background: color-mix(in srgb, var(--green) 9%, transparent); } .s-crash { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); } .s-boot { color: var(--orange); background: var(--orange-soft); }
.dur-viz[data-s="run"] .s-run, .dur-viz[data-s="crash"] .s-crash, .dur-viz[data-s="boot"] .s-boot, .dur-viz[data-s="res"] .s-res { display: inline-block; }
.dl { display: grid; grid-template-columns: 62px 1fr; gap: .7rem; align-items: center; }
.dl code { color: var(--ink); font-size: 11px; }
.bar { position: relative; height: 8px; border-radius: 5px; background: color-mix(in srgb, var(--fg) 5%, transparent); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 5px; background: var(--orange); transition: width 1.4s linear, background .3s; }
.bar .ck { position: absolute; left: calc(var(--p) - 2px); top: -4px; width: 2px; height: 16px; background: var(--ink); opacity: 0; transition: opacity .3s; }
.dur-viz[data-s="run"] .bar i { width: calc(var(--p) - 18%); }
.dur-viz[data-s="crash"], .dur-viz[data-s="boot"] { border-color: color-mix(in srgb, var(--red) 50%, transparent); background: color-mix(in srgb, var(--red) 5%, transparent); }
.dur-viz[data-s="crash"] .bar i, .dur-viz[data-s="boot"] .bar i { width: calc(var(--p) - 12%); background: var(--red); transition: background .2s; }
.dur-viz[data-s="boot"] .bar i { background: var(--mute); }
.dur-viz[data-s="crash"] .ck, .dur-viz[data-s="boot"] .ck, .dur-viz[data-s="res"] .ck { opacity: .8; left: calc(var(--p) - 12%); }
.dur-viz[data-s="res"] .bar i { width: calc(var(--p) + 14%); }
.dur-foot { display: flex; justify-content: space-between; gap: .5rem; color: var(--mute); font-size: 11px; flex-wrap: wrap; }
.sleep-log { font-size: 12px; gap: 9px; }
@media (max-width: 980px) { .cell { min-height: 0; } }
.sleep-log { flex: 1; align-content: space-between; border: 1px solid var(--line2); border-radius: 12px; padding: .9rem 1rem .9rem 1.4rem; background: var(--bg2); position: relative; min-height: 170px; }
.sleep-log::before { content: ""; position: absolute; left: .75rem; top: 1.1rem; bottom: 1.1rem; border-left: 1px dashed color-mix(in srgb, var(--orange) 40%, transparent); }
.learn-loop { flex: 1; align-content: center; border: 1px solid var(--line2); border-radius: 12px; padding: 1rem 1rem 3.2rem; background: var(--bg2); }
.ll-back { left: 1rem; right: 1rem; bottom: .8rem; }
/* pillars v3: diagram language (stations, dashed wires, packets) */
.dia { width: 100%; height: auto; margin-top: auto; overflow: visible; font-size: 11px; }
.dia .wire, .dia .wire use { fill: none; stroke: color-mix(in srgb, var(--fg) 22%, transparent); stroke-width: 1.2; stroke-dasharray: 4 6; stroke-linecap: round; }
.dia .wire.hot { stroke: color-mix(in srgb, var(--orange) 55%, transparent); } .dia .wire.red { stroke: color-mix(in srgb, var(--red) 60%, transparent); } .dia .wire.cy { stroke: color-mix(in srgb, var(--cyan) 55%, transparent); }
.dia .wire { animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.dia .stn rect { fill: var(--panel); stroke: color-mix(in srgb, var(--fg) 18%, transparent); }
.dia .stn text { fill: var(--ink); } .dia .stn .sub { fill: var(--color-text-muted); font-size: 10px; }
.dia .stn.trig rect { fill: var(--panel2); } .dia .stn.trig text { fill: var(--color-text-subtle); }
.dia .stn.pipe rect, .dia .stn.merge rect { stroke: color-mix(in srgb, var(--orange) 55%, transparent); }
.dia .stn.fac rect { stroke: var(--orange); stroke-width: 1.5; fill: color-mix(in srgb, var(--orange) 8%, var(--panel)); }
.dia .stn.bad rect { stroke: var(--red); fill: color-mix(in srgb, var(--red) 10%, var(--panel)); } .dia .stn.bad text { fill: var(--red-ink); }
.dia .stn.ok rect { stroke: color-mix(in srgb, var(--green) 50%, transparent); }
.dia .stn.gate rect { stroke: color-mix(in srgb, var(--orange) 55%, transparent); stroke-dasharray: 4 4; }
.dia .stn.learn rect { stroke: color-mix(in srgb, var(--cyan) 60%, transparent); fill: color-mix(in srgb, var(--cyan) 8%, var(--panel)); } .dia .stn.learn text { fill: var(--cyan-ink); } .dia .stn.learn .sub { fill: var(--cyan-sub); }
.dia .gt { fill: var(--ink); }
.dia .lbl { fill: var(--orange); font-size: 11px; letter-spacing: .04em; } .dia .lbl.red { fill: var(--red); } .dia .lbl.cy { fill: var(--cyan); }
.dia .pk.o { fill: var(--orange); } .dia .pk.r { fill: var(--red); } .dia .pk.c { fill: var(--cyan); } .dia .pk.w { fill: var(--ink); }
.dia .pol-bg { fill: var(--panel); stroke: color-mix(in srgb, var(--fg) 18%, transparent); } .dia .pol-knob { fill: color-mix(in srgb, var(--orange) 18%, transparent); stroke: var(--orange); }
.dia .policy text { fill: var(--ink); }
@media (prefers-reduced-motion: reduce) { .dia .wire { animation: none; } .dia .pk { display: none; } }
/* durable as lanes */
.dur-viz { gap: 1rem; }
.bar { height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--fg) 18%, transparent) 0 4px, transparent 4px 10px); border-radius: 0; overflow: visible; }
.bar i { height: 2px; top: 0; background: repeating-linear-gradient(90deg, var(--orange) 0 4px, transparent 4px 10px); border-radius: 0; }
.bar i::after { content: ""; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: inherit; background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 15%, transparent); }
.dur-viz[data-s="crash"] .bar i { background: repeating-linear-gradient(90deg, var(--red) 0 4px, transparent 4px 10px); }
.dur-viz[data-s="crash"] .bar i::after { background: var(--red); box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 20%, transparent); }
.dur-viz[data-s="boot"] .bar i, .dur-viz[data-s="boot"] .bar i::after { background: var(--color-text-muted); box-shadow: none; }
.bar .ck { top: -7px; height: 16px; width: 10px; left: calc(var(--p) - 12% - 5px); background: none; border: 1.5px solid var(--ink); border-radius: 2px; transform: rotate(45deg) scale(.7); }
.sbx { border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent); border-radius: 8px; padding: 4px 10px; }
.dur-viz[data-s="crash"] .sbx { border-color: var(--red); color: var(--red-ink); animation: crashpulse .5s ease-out 2; }
@keyframes crashpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 60%, transparent); } 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--red) 0%, transparent); } }
.tenure { display: flex; flex-wrap: wrap; gap: .4rem .4rem; margin: .7rem 0 0; font-size: 10.5px; color: var(--mute); }
.tenure span { border: 1px solid var(--line2); border-radius: 999px; padding: 3px 10px; }
.tenure b { color: var(--orange); font-weight: 400; }
.dia .night { fill: color-mix(in srgb, var(--cyan) 5%, transparent); } .dia .land.ok { fill: var(--green); } .dia .land.red { fill: var(--red); }
.dia .sub2 { fill: var(--color-text-muted); font-size: 10px; }
/* use cases */
.usecases { padding: 4rem 0 2rem; }
.uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }
.uc { border: 1px solid var(--line2); border-radius: var(--r); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 2%, transparent), transparent); }
.uc h3 { font-size: 1.08rem; font-weight: 500; }
.uc-txt { display: grid; gap: .7rem; align-content: center; }
/* real Slack window for slack scenes; console chrome hides while one is active */
.night-console { transition: grid-template-rows .25s; }
.night-console .console-body { transition: grid-template-columns .25s; }
.night-console.is-slack { grid-template-rows: 1fr 0px; border-color: #3a3d42; }
.night-console.is-slack .console-body { grid-template-columns: 0px 1fr; }
.night-console.is-slack .c-side, .night-console.is-slack .c-status { visibility: hidden; }
.night-console.is-slack .c-main { margin: 0; border: 0; border-radius: 0; }
.scene.slack { background: #1a1d21; }
.sk-win { display: grid; grid-template-columns: 190px minmax(0,1fr) minmax(0,1.25fr); height: 100%; min-height: 0; font: 13px/1.45 Lato, "Helvetica Neue", Arial, var(--font-sans); color: #d1d2d3; }
.sk-side { background: #3f0e40; color: #cfc3cf; display: flex; flex-direction: column; padding: 0 0 10px; overflow: hidden; border-right: 1px solid #52265a; }
.sk-ws { font-weight: 900; color: #fff; font-size: 15px; padding: 12px 14px; border-bottom: 1px solid #52265a; margin-bottom: 8px; }
.sk-ws i { font-style: normal; font-size: 10px; opacity: .7; }
.sk-nav { display: grid; padding: 0 0 6px; } .sk-nav span, .sk-ch, .sk-dm { padding: 3px 16px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-sec { padding: 10px 16px 4px; font-size: 13px; color: #b8a8b8; }
.sk-ch.on { background: #1164a3; color: #fff; font-weight: 700; margin: 0 8px; padding: 3px 8px; border-radius: 6px; }
.sk-dm { display: flex; gap: 8px; align-items: center; }
.sk-dm i, .sk-rep i { width: 18px; height: 18px; border-radius: 4px; display: inline-grid; place-items: center; font: 700 10px var(--font-sans); color: #fff; font-style: normal; flex: none; }
.fcav { background: var(--orange); } .fcav .logo-mark { width: 12px; height: 12px; color: var(--panel2); display: block; }
.sk-chan, .sk-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sk-thread { border-left: 1px solid #35373b; }
.sk-chh, .sk-th { display: flex; align-items: baseline; gap: .6rem; padding: 12px 16px; border-bottom: 1px solid #35373b; white-space: nowrap; overflow: hidden; }
.sk-chh b, .sk-th b { color: #fff; font-weight: 900; font-size: 15px; } .sk-chh span, .sk-th span { color: #9a9b9d; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.sk-th i { margin-left: auto; font-style: normal; color: #9a9b9d; }
.sk-feed { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding-bottom: 8px; }
.sk-m { display: grid; grid-template-columns: 36px 1fr; gap: 9px; padding: 8px 16px; }
.sk-m b { color: #fff; font-weight: 900; } .sk-m time, .sk-tbody time { color: #9a9b9d; font-size: 11.5px; margin-left: .4rem; } .sk-m p { margin: 1px 0 0; }
.sk-av { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font: 700 15px var(--font-sans); color: #fff; font-style: normal; }
.sk-rep { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; color: #1d9bd1; font-weight: 700; font-size: 12.5px; }
.sk-rep em { font-style: normal; font-weight: 400; color: #9a9b9d; }
.sk-tbody { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.sk-tbody .sl-msg { padding: 10px 16px; }
.sk-div { display: flex; align-items: center; gap: 10px; padding: 2px 16px; color: #9a9b9d; font-size: 12px; } .sk-div::after { content: ""; flex: 1; border-top: 1px solid #35373b; }
.sk-app { display: inline-block; font: 700 9.5px/1 var(--font-sans); background: rgba(255,255,255,.12); color: #c5c6c7; padding: 2px 4px; border-radius: 3px; vertical-align: 1px; }
.sk-react { display: flex; gap: 5px; margin-top: 6px; } .sk-react span { border: 1px solid #35373b; background: rgba(255,255,255,.05); border-radius: 12px; padding: 0 7px; font-size: 12px; color: #d1d2d3; }
.sk-react span:first-child { border-color: #1d9bd1; background: rgba(29,155,209,.15); }
.sk-comp { margin: 8px 14px 12px; border: 1px solid #565856; border-radius: 8px; padding: 10px 12px; color: #9a9b9d; font-size: 13px; }
.sk-thread .sl-list { font-size: 12.5px; } .sk-thread .sl-msg { font-size: 13px; }
@media (max-width: 1200px) { .sk-win { grid-template-columns: 150px minmax(0,1fr); } .sk-chan { display: none; } }
@media (max-width: 980px) { .sk-win { grid-template-columns: 1fr; } .sk-side { display: none; } }
.sk-ws { display: flex; align-items: center; gap: 8px; } .sk-ws img { flex: none; }
.rail-ic { vertical-align: -2px; margin-right: 3px; }
/* factory anatomy (after Tushar's diagram) */
.dia .wc rect { fill: var(--panel); stroke: color-mix(in srgb, var(--orange) 70%, transparent); }
.dia .wc use { color: var(--orange); animation: wpulse 2.4s ease-in-out infinite; }
.dia .wc.dim rect { stroke: color-mix(in srgb, var(--orange) 25%, transparent); } .dia .wc.dim use { color: color-mix(in srgb, var(--orange) 30%, transparent); animation: none; }
.dia .wc.bad rect { fill: color-mix(in srgb, var(--red) 16%, var(--panel)); stroke: var(--red); }
@keyframes wpulse { 50% { opacity: .45; } }
.dia .stn.prod rect { stroke: var(--orange); stroke-width: 1.5; fill: color-mix(in srgb, var(--orange) 10%, var(--panel)); } .dia .stn.prod text { fill: var(--orange-ink); }
.dia .stn.mon rect { stroke: var(--red); } .dia .stn.mon text { fill: var(--red-ink); }
.dia .stn.metric rect { stroke: color-mix(in srgb, var(--orange) 60%, transparent); } .dia .stn.metric text { fill: var(--orange-ink); }
.dia .stn.learn text { font-size: 11px; }
.dia rect.wire { fill: none; }
.vel-viz.v2 { display: block; padding: 1.6rem 1.8rem; }
.velo .hd { fill: var(--ink); font-size: 14px; } .velo .hd.hot { fill: var(--orange); }
.velo .vm { fill: var(--color-text-subtle); font-size: 13px; } .velo .vm.hot { fill: var(--orange); font-size: 14px; }
.velo .axis { stroke: color-mix(in srgb, var(--fg) 8%, transparent); stroke-width: 8; stroke-linecap: round; }
.velo .seg-h { fill: var(--color-text-subtle); opacity: .6; } .velo .seg-f { fill: var(--orange); opacity: .85; }
.velo .stop { stroke: var(--color-text-subtle); stroke-width: 1.5; } .velo .divider { stroke: color-mix(in srgb, var(--fg) 8%, transparent); stroke-dasharray: 3 5; }
.velo .col { fill: var(--panel); stroke: color-mix(in srgb, var(--fg) 10%, transparent); }
.velo .tk rect { fill: var(--panel2); stroke: color-mix(in srgb, var(--fg) 20%, transparent); } .velo .tk text { fill: var(--ink); font-size: 7.5px; }
.velo .tk.feat rect { stroke: color-mix(in srgb, var(--orange) 70%, transparent); } .velo .tk.bug rect { stroke: var(--red); } .velo .tk.chore rect { stroke: color-mix(in srgb, var(--fg) 30%, transparent); }
@media (max-width: 980px) { .vel-viz.v2 { padding: 1rem; overflow-x: auto; } .velo { min-width: 0; } }
@media (max-width: 980px) { .velo.dia-d { min-width: 0; } .vel-viz.v2::after { content: "scroll \2192"; display: block; font: 11px var(--font-mono); color: var(--mute); margin-top: .5rem; } }
@media (max-width: 980px) { .scene.slack .sk-win { height: auto; } .sk-feed, .sk-tbody { overflow: visible; } .night-console .scene.slack { padding-top: 0; } }
/* theme toggle */
.theme-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--line2); background: transparent; color: var(--color-text-secondary); cursor: pointer; padding: 0; }
.theme-btn:hover { color: var(--ink); border-color: var(--color-border-strong); }
.theme-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; display: none; }
html:not([data-theme-mode]) .ti-sys, html[data-theme-mode="system"] .ti-sys, html[data-theme-mode="light"] .ti-light, html[data-theme-mode="dark"] .ti-dark { display: block; }
.nav-in { gap: 1rem; } .nav-links { margin-right: .6rem; }
/* ===== MOBILE PASS ===== */
.dia-m { display: none; }
@media (max-width: 760px) {
  .dia-d { display: none !important; }
  .dia-m { display: block; width: 100%; height: auto; max-width: 340px; margin: .4rem auto 0; font-size: 12px; }
  .dia-m .stn text { font-size: 12.5px; } .dia-m .stn .sub, .dia-m .sub2, .dia-m .gt { font-size: 12px; }
  .dia-m .lbl { font-size: 12px; } .dia-m .tk text { font-size: 10px; }
  .velo.dia-m .hd { font-size: 15px; } .velo.dia-m .vm { font-size: 13px; }
  .vel-viz.v2 { overflow: visible; padding: 1.1rem; } .vel-viz.v2::after { display: none; } .velo.dia-d { min-width: 0; }
  .wrap { width: calc(100% - 2.2rem); }
  /* readable minimums */
  .pill, .pill.blk, .tabs span, .tbl th, .tbl .id, .c-status, .sbi, .tenure, .tenure b, .cell-k, .col-h, .meta, .meta span, .f-grp, .f-st, .t-term, .fl, .a-event, .chip, .d-foot, .who, .msg code, .sk-app, .sk-tbody time, .sbx, .dur-st b, .dl code, .dur-foot, small { font-size: 12px !important; }
  .sk-app { font-size: 10px !important; padding: 2px 5px; }
  .pill { white-space: normal; }
  .night-console .tbl td, .night-console .tbl th { padding-left: 8px; padding-right: 8px; }
  .night-console .tbl th:nth-child(3), .night-console .tbl td:nth-child(3), .night-console .tbl th:nth-child(5), .night-console .tbl td:nth-child(5) { display: none; }
  .c-status { gap: .7rem; overflow: hidden; white-space: nowrap; } .c-status .right { display: none; }
  .hero-console { height: 440px; }
  .hero-console .tbl th:nth-child(3), .hero-console .tbl td:nth-child(3) { display: none; }
  /* durable lanes */
  .dur-viz { padding: .9rem; } .dl { grid-template-columns: 70px 1fr; }
  .dur-head { flex-wrap: wrap; } .dur-foot { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
  /* tenure / rail */
  .tenure span { padding: 3px 9px; }
  /* use cases */
  /* missions board: one column per row, readable */
  .cols { grid-template-columns: 1fr !important; }
  .col { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  /* nav */
  .nav-in { gap: .6rem; } .brand .logo-word { height: 16px; } .nav .theme-btn { margin-left: auto; } .nav .btn { margin-left: 0; }
  /* terms console */
  .t-console { height: auto; } .t-console .c-side { display: none; } .t-console .console-body { grid-template-columns: 1fr; } .t-console .c-main { margin: 8px; }
  .prov { justify-content: center; }
  h1 { font-size: 2.35rem; } h2 { font-size: 1.85rem; }
}
@media (max-width: 760px) {
  .pill { white-space: nowrap; }
  .hero-console .tbl th:last-child, .hero-console .tbl td:last-child { display: none; }
  .dia-m .stn.trig text { font-size: 12px; }
}
/* Slack light theme in light mode (aubergine sidebar stays) */
html[data-theme="light"] .scene.slack, html[data-theme="light"] .sk-win { background: #fff; color: #1d1c1d; }
html[data-theme="light"] .sk-thread, html[data-theme="light"] .sk-chan { background: #fff; }
html[data-theme="light"] .sk-chh, html[data-theme="light"] .sk-th { border-color: #e2e2e2; }
html[data-theme="light"] .sk-thread { border-left-color: #e2e2e2; }
html[data-theme="light"] .sk-chh b, html[data-theme="light"] .sk-th b, html[data-theme="light"] .sk-m b, html[data-theme="light"] .scene.slack .sl-msg b { color: #1d1c1d; }
html[data-theme="light"] .scene.slack .sl-msg, html[data-theme="light"] .sk-m p { color: #1d1c1d; }
html[data-theme="light"] .scene.slack time, html[data-theme="light"] .sk-chh span, html[data-theme="light"] .sk-th span, html[data-theme="light"] .sk-th i, html[data-theme="light"] .sk-div, html[data-theme="light"] .sl-meta, html[data-theme="light"] .sk-rep em { color: #616061; }
html[data-theme="light"] .sk-div::after { border-color: #e2e2e2; }
html[data-theme="light"] .sk-react span { background: #f8f8f8; border-color: #e2e2e2; color: #1d1c1d; }
html[data-theme="light"] .sk-react span:first-child { background: #e8f5fa; border-color: #1d9bd1; }
html[data-theme="light"] .sk-comp { border-color: #bbbabb; color: #868686; }
html[data-theme="light"] .sk-app { background: #e8e8e8; color: #616061; }
html[data-theme="light"] .scene.slack .sl-msg code { background: #f6f6f6; border-color: #e2e2e2; color: #c01343; }
html[data-theme="light"] .scene.slack .sl-msg mark { background: #e8f5fa; color: #1264a3; }
html[data-theme="light"] .night-console.is-slack { border-color: #ddd; }
@media (max-width: 980px) { .velo.dia-m { min-width: 0 !important; } }
@media (max-width: 760px) { .hero-console .pill.blk { white-space: normal; } .hero-console .tbl td:nth-child(4) { max-width: 92px; } .night-console .pill { white-space: normal; } }
/* comparison: never a sideways scroller */
.vel-viz.v2 { overflow: visible !important; } .vel-viz.v2::after { display: none !important; content: none !important; }
.velo.dia-d { min-width: 0 !important; width: 100%; }
.vel-panel { display: none; }
@media (max-width: 760px) {
  .vel-viz.v2 { border: 0; padding: 0; background: none; display: grid; gap: 1rem; }
  .vel-panel { display: block; border: 1px solid var(--line2); border-radius: var(--r); padding: 1rem 1rem 1.1rem; overflow: hidden; }
  .vel-panel.fac { border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--orange) 8%, transparent), transparent 70%); }
  .vel-panel svg { display: block; width: 100%; height: auto; max-width: 340px; margin: 0 auto; overflow: hidden; }
  .vel-panel .stn text { font-size: 12.5px; } .vel-panel .sub2, .vel-panel .lbl { font-size: 12px; } .vel-panel .tk text { font-size: 10px; }
}
.vel-panel svg.velo { min-width: 0 !important; }
.dia-m { max-width: 100%; }
/* self-improving stores */
.dia .store rect { fill: var(--panel); stroke: color-mix(in srgb, var(--cyan) 40%, transparent); }
.dia .store .sk { fill: var(--cyan-ink); font-size: 11.5px; } .dia .store .sd { fill: var(--color-text-secondary); font-size: 11px; }
.dia .store .tick { fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; }
.dia .store { animation: storeup 4s ease-in-out infinite; }
@keyframes storeup { 0%, 70%, 100% { opacity: .75; } 8% { opacity: 1; } }
.dia .store:nth-child(n) .tick { animation: tickin 4s ease-in-out infinite; animation-delay: inherit; }
@keyframes tickin { 0%, 4% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
.dia-m .store .sk, .dia-m .store .sd { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .dia .store, .dia .store .tick { animation: none; opacity: 1; } }
/* night shift: autoplay (no pin). JS adds .ap; one scene at a time, rail steps are buttons */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.night.ap .night-pin { min-height: 0; padding: 6rem 0 4rem; }
.rail-btn { all: unset; box-sizing: border-box; display: grid; grid-template-columns: inherit; gap: inherit; width: 100%; cursor: pointer; position: relative; padding-bottom: 5px; border-radius: 4px; }
.rail li { grid-template-columns: 1fr !important; }
.rail-btn { grid-template-columns: 44px 1fr; gap: .4rem; }
.rail-btn:hover { color: var(--ink); }
.rail-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.rail-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; opacity: 0; }
.rail-prog::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
.night.ap .rail li.on .rail-prog { opacity: 1; }
.night.ap .rail li.on .rail-prog::after { animation: railprog var(--hold, 3.5s) linear forwards; }
.night.ap.paused .rail li.on .rail-prog::after, .night.ap.still .rail li.on .rail-prog::after { animation-play-state: paused; }
.night.ap.still .rail li.on .rail-prog::after { animation: none; transform: scaleX(1); }
.night.ap.restart .rail li.on .rail-prog::after { animation: none; }
@keyframes railprog { to { transform: scaleX(1); } }
.ns-pause { display: none; }
.night.ap.paused:not(.still) .ns-pause { display: inline; color: var(--orange); }
/* scenes: never two at once. Outgoing fades out first, incoming waits for it */
.night.ap .night-console .scene { opacity: 0 !important; visibility: hidden !important; transition: opacity .22s ease, visibility 0s linear .22s; }
.night.ap .night-console .scene.on { opacity: 1 !important; visibility: visible !important; transition: opacity .3s ease .5s, visibility 0s linear .5s; }
.night.ap .night-console .scene.on::before { display: block; }
.night.ap .night-console { cursor: pointer; }
@media (max-width: 980px) {
  .night.ap .night-pin { padding: 4.5rem 0 3rem; }
  .night.ap .night-console .c-main.scenes { display: block; min-height: 420px; }
  .night.ap .night-console .scene { position: relative; transition: none; }
  .night.ap .night-console .scene:not(.on) { display: none; }
  .night.ap .night-console .scene.on { animation: scenein .35s ease both; transition: none; }
  .night.ap .night-console .scene + .scene { border-top: 0; }
  .night.ap .night-console .c-status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .night.ap .night-console { height: min(680px, 78dvh); }
  .night.ap .night-console .c-main.scenes { display: block; }
  .night.ap .night-console .scene { position: absolute; inset: 0; transition: none !important; }
  .night.ap .night-console .scene + .scene { border-top: 0; }
  .night.ap .night-copy { position: static; }
  .night.ap .rail li { color: var(--dim); } .night.ap .rail li.on { color: var(--ink); }
  .night.ap .f-note, .night.ap .a-event, .night.ap .sl-msg.fc[data-step="reply"] { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .night.ap .night-console { height: auto; }
  .night.ap .night-console .c-main.scenes { display: block; }
  .night.ap .night-console .scene { position: relative; inset: auto; animation: none; }
}
@keyframes scenein { from { opacity: 0; } to { opacity: 1; } }
/* ===== PROACTIVE: live trigger feed > factory mark > mission issue ===== */
.pf { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) 86px minmax(0, 1fr); align-items: stretch; gap: 0; }
.pf-feed { border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); padding: .7rem .7rem .55rem; min-width: 0; }
.pf-h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 0 .2rem .55rem; border-bottom: 1px dashed var(--line2); margin-bottom: .45rem; }
.pf-live { display: inline-flex; align-items: center; gap: 6px; color: var(--orange); }
.pf-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: blink 1.2s steps(2) infinite; }
.pf-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pf-ev { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .42rem .4rem; border-radius: 8px; border: 1px solid transparent; max-height: 64px; overflow: hidden; transition: max-height .45s ease, opacity .45s ease, padding .45s ease, background .3s, border-color .3s; }
.pf-ev + .pf-ev { margin-top: 2px; }
.pf-ev.off { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; }
.pf-ev.cur { background: var(--orange-soft); border-color: color-mix(in srgb, var(--orange) 35%, transparent); }
.pf-ev.bad.cur { background: color-mix(in srgb, var(--red) 9%, transparent); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.pf-ev.bad { border-left: 2px solid var(--red); }
.pf-txt { min-width: 0; display: grid; gap: 1px; }
.pf-txt b { font: 400 11px var(--font-mono); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-txt span { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-ev.bad .pf-txt b { color: var(--red-ink); }
.pf-ic { width: 16px; height: 16px; display: inline-block; flex: none; background: var(--ink); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.pf-ic.gh { --src: url(shared/brand/github.svg); }
.pf-ic.fo { --src: url(shared/brand/discourse.svg); }
.pf-ic.se { --src: url(shared/brand/sentry.svg); background: var(--red); }
.pf-ic.pr { --src: url(icons/terminal-2.svg); background: var(--orange); }
.pf-ic.sl { -webkit-mask: none; mask: none; background: url(shared/brand/slack-color.svg) center / contain no-repeat; }
.pf-st { font: 11px var(--font-mono); white-space: nowrap; }
.pf-st em { font-style: normal; display: none; padding: 2px 7px; border-radius: 999px; }
.pf-ev[data-s="new"] .s-new, .pf-ev[data-s="ack"] .s-ack, .pf-ev[data-s="iss"] .s-iss { display: inline-block; }
.s-new { color: var(--orange); border: 1px dashed color-mix(in srgb, var(--orange) 60%, transparent); }
.pf-ev.bad .s-new { color: var(--red); border-color: color-mix(in srgb, var(--red) 60%, transparent); }
.s-ack { color: var(--color-text-secondary); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.s-iss { color: var(--orange-ink); background: var(--orange-soft); }
/* link: dashed wire, packet, the factory mark, pickup stamp */
.pf-link { position: relative; display: grid; place-items: center; }
.pf-wire { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--orange) 55%, transparent) 0 4px, transparent 4px 10px); background-size: 20px 2px; animation: pfwire 1.2s linear infinite; }
@keyframes pfwire { to { background-position: 20px 0; } }
.pf-mark { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 11px; border: 1.5px solid var(--orange); background: color-mix(in srgb, var(--orange) 8%, var(--panel)); display: grid; place-items: center; transition: box-shadow .3s; }
.pf-mark .logo-mark { width: 24px; height: 24px; color: var(--orange); }
.pf[data-s="ack"] .pf-mark { animation: pfpulse .9s ease-out; }
@keyframes pfpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange) 55%, transparent); transform: scale(1); } 30% { transform: scale(1.12); } 100% { box-shadow: 0 0 0 16px transparent; transform: scale(1); } }
.pf-pk { position: absolute; z-index: 2; top: 50%; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--orange); opacity: 0; }
.pf.is-bad .pf-pk { background: var(--red); }
.pf[data-s="ack"] .pf-pk { animation: pfpk .8s ease-in forwards; }
@keyframes pfpk { 0% { left: 0; opacity: 1; } 45% { left: 50%; opacity: 1; } 55% { left: 50%; opacity: 0; } 56% { left: 50%; opacity: 1; } 100% { left: 100%; opacity: 1; } }
.pf-stamp { position: absolute; top: calc(50% + 30px); left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--orange-ink); text-align: center; line-height: 1.35; width: 84px; opacity: 0; transition: opacity .3s; }
.pf:not([data-s="wait"]):not([data-s="ack"]) .pf-stamp { opacity: 1; } /* only after the mark pulse */
/* mission issue card */
.pf-card { position: relative; border: 1px dashed var(--line2); border-radius: 12px; background: var(--panel); min-width: 0; display: grid; transition: border-color .3s; }
.pf-card > * { grid-area: 1 / 1; }
.pf-wait { align-self: center; justify-self: center; font-size: 11.5px; color: var(--mute); display: inline-flex; align-items: center; gap: 7px; transition: opacity .3s; }
.pf-wait::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mute); animation: blink 1.2s steps(2) infinite; }
.pf[data-s="wait"] .pf-wait, .pf[data-s="ack"] .pf-wait { opacity: 1; } .pf-wait { opacity: 0; }
.pf-wait .w2 { display: none; color: var(--orange-ink); } .pf[data-s="ack"] .pf-wait .w1 { display: none; } .pf[data-s="ack"] .pf-wait .w2 { display: inline; }
.pf[data-s="ack"] .pf-wait::before { background: var(--orange); }
.pf[data-s="ack"] .pf-card { border-color: color-mix(in srgb, var(--orange) 50%, transparent); }
.pf-issue { padding: .85rem .9rem .8rem; display: flex; flex-direction: column; gap: .55rem; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; min-width: 0; }
.pf:is([data-s="iss"], [data-s="run"], [data-s="done"]) .pf-issue { opacity: 1; transform: none; }
.pf:is([data-s="iss"], [data-s="run"], [data-s="done"]) .pf-card { border-style: solid; border-color: color-mix(in srgb, var(--orange) 50%, transparent); }
.pf-top { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: 11px; }
.pf-id { color: var(--orange-ink); font-weight: 700; }
.pf-sts { margin-left: auto; } .pf-sts .pill { display: none; }
.pf[data-s="iss"] .pf-sts .todo, .pf[data-s="run"] .pf-sts .prog, .pf[data-s="done"] .pf-sts .done { display: inline-flex; }
.pf-title { font-weight: 500; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.pf-from { display: flex; align-items: center; gap: .45rem; font-size: 11px; color: var(--mute); min-width: 0; }
.pf-from .pf-ic, .pf-out .pf-ic { width: 13px; height: 13px; }
.pf-from span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-track { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; margin-top: .1rem; }
.pf-track span { padding: 4px 7px; border-radius: 6px; border: 1px dashed var(--line2); color: var(--mute); white-space: nowrap; transition: color .3s, background .3s, border-color .3s; }
.pf[data-s="iss"] .t1, .pf[data-s="run"] .t1, .pf[data-s="done"] .t1, .pf[data-s="run"] .t2, .pf[data-s="done"] .t2 { color: var(--ink); border-style: solid; border-color: color-mix(in srgb, var(--fg) 18%, transparent); }
.pf[data-s="run"] .t2 { color: var(--orange-ink); border-color: var(--orange); background: var(--orange-soft); }
.pf[data-s="done"] .t3 { color: var(--green); border-style: solid; border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 8%, transparent); }
.pf-run, .pf-out { display: flex; align-items: center; gap: .5rem; font-size: 11px; color: var(--color-text-secondary); min-height: 22px; }
.pf-foot { display: grid; margin-top: auto; } .pf-foot > * { grid-area: 1 / 1; }
.pf-run { opacity: 0; transition: opacity .3s; } .pf[data-s="run"] .pf-run { opacity: 1; }
.pf-out { opacity: 0; transition: opacity .3s; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 7%, transparent); color: var(--ink); justify-self: start; max-width: 100%; }
.pf-out span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf[data-s="done"] .pf-out { opacity: 1; }
.pf-run span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) and (min-width: 761px) { .pf { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); } .pf-txt span { font-size: 12.5px; } .pf-stamp { width: 68px; } }
@media (max-width: 760px) {
  .pf { grid-template-columns: 1fr; grid-template-rows: auto 92px auto; }
  .pf-wire { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; margin: 0 0 0 -1px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--orange) 55%, transparent) 0 4px, transparent 4px 10px); background-size: 2px 20px; animation: pfwirev 1.2s linear infinite; }
  @keyframes pfwirev { to { background-position: 0 20px; } }
  .pf-pk { left: 50%; top: 0; margin: -4px 0 0 -4px; }
  .pf[data-s="ack"] .pf-pk { animation: pfpkv .8s ease-in forwards; }
  @keyframes pfpkv { 0% { top: 0; opacity: 1; } 45% { top: 50%; opacity: 1; } 55% { top: 50%; opacity: 0; } 56% { top: 50%; opacity: 1; } 100% { top: 100%; opacity: 1; } }
  .pf-stamp { top: 50%; left: calc(50% + 34px); transform: translateY(-50%); text-align: left; width: auto; white-space: nowrap; }
  .pf-h, .pf-txt b, .pf-st, .pf-top, .pf-from, .pf-track, .pf-run, .pf-out, .pf-wait, .pf-stamp { font-size: 12px !important; }
  .pf-txt span { font-size: 13.5px; white-space: normal; overflow: visible; line-height: 1.3; }
  .pf-ev { max-height: 90px; align-items: start; } .pf-ev .pf-ic { margin-top: 2px; }
  .pf-card { min-height: 196px; }
}
@media (prefers-reduced-motion: reduce) { .pf-wire, .pf-live::before, .pf-wait::before { animation: none !important; } .pf-pk { display: none; } .pf-mark, .pf .pill.run::before { animation: none !important; } .pf-ev, .pf-issue { transition: none; } }
/* Slack <-> console chrome swap (runs on an empty surface, between the outgoing fade and the incoming fade):
   console sidebar and status bar never show while the frame is resizing, they fade in once it has settled */
.night-console .c-side, .night-console .c-status { transition: opacity .14s ease .24s; }
.night-console.is-slack .c-side, .night-console.is-slack .c-status { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .night-console, .night-console .console-body, .night-console .c-side, .night-console .c-status { transition: none; } }
/* ===== PILLARS: one pillar at a time (tabs + stage). Only the .on panel animates ===== */
.pl-box { margin-top: 2.4rem; }
.pl-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.pl-tab { all: unset; box-sizing: border-box; position: relative; display: grid; gap: 4px; padding: .85rem 1rem 1rem; border-radius: 10px 10px 0 0; border-bottom: 1px solid var(--line2); cursor: pointer; color: var(--color-text-secondary); transition: color .25s, background .25s; }
.pl-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); transition: color .25s; }
.pl-t { font-size: 1.06rem; font-weight: 500; }
.pl-tab:hover { color: var(--ink); }
.pl-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.pl-tab[aria-selected="true"] { color: var(--ink); background: color-mix(in srgb, var(--fg) 3%, transparent); }
.pl-tab[aria-selected="true"] .pl-k { color: var(--orange); }
.pl-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--line2); overflow: hidden; opacity: 0; }
.pl-prog::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
.pl-tab[aria-selected="true"] .pl-prog { opacity: 1; }
.pillars.ap .pl-tab[aria-selected="true"] .pl-prog::after { animation: railprog var(--hold, 7s) linear forwards; }
.pillars.ap.paused .pl-tab[aria-selected="true"] .pl-prog::after { animation-play-state: paused; }
.pillars.ap.restart .pl-tab[aria-selected="true"] .pl-prog::after { animation: none; }
.pillars.still .pl-tab[aria-selected="true"] .pl-prog::after { animation: none; transform: scaleX(1); }
/* stage: panels stacked in one cell, so the stage keeps the tallest panel's height (no jumps) */
.pl-stage { display: grid; margin-top: 1rem; border: 1px solid var(--line2); border-radius: var(--r); background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 2.5%, transparent), transparent); overflow: hidden; }
.pl-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: 3rem; align-items: center; padding: 2.6rem 2.8rem; min-height: 470px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.pl-panel.on { opacity: 1; visibility: visible; transition: opacity .4s ease .15s, visibility 0s linear 0s; }
.pl-panel:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }
/* inactive (or offscreen) panels are fully stopped */
.pl-panel:not(.on) *, .pl-panel:not(.on) *::before, .pl-panel:not(.on) *::after, .pillars.off .pl-panel *, .pillars.off .pl-panel *::before, .pillars.off .pl-panel *::after { animation-play-state: paused !important; }
.pl-copy { display: grid; gap: .8rem; align-content: center; }
.pl-copy .cell-k { margin: 0; }
.pl-copy h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.pl-copy p { margin: 0; color: var(--color-text-secondary); font-size: 1.05rem; max-width: 36ch; }
.pl-viz { min-width: 0; display: grid; align-items: center; }
#pl-panel-0 { background: radial-gradient(55% 75% at 70% 50%, color-mix(in srgb, var(--orange) 8%, transparent), transparent 70%); }
#pl-panel-3 { background: radial-gradient(50% 80% at 72% 50%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 70%); }
/* proactive: bigger, nothing truncates */
.pl-viz .pf { margin: 0; grid-template-columns: minmax(0, 1.15fr) 92px minmax(0, 1fr); }
.pl-viz .pf-txt span { white-space: normal; overflow: visible; line-height: 1.3; font-size: 13.5px; }
.pl-viz .pf-txt b { white-space: normal; }
.pl-viz .pf-ev { max-height: 90px; align-items: start; } .pl-viz .pf-ev .pf-ic { margin-top: 2px; }
.pl-viz .pf-from span:last-child, .pl-viz .pf-out span:last-child, .pl-viz .pf-run span:last-child { white-space: normal; overflow: visible; }
.pl-viz .pf-title { font-size: 16px; }
.pl-viz .pf-card { min-height: 290px; }
.pl-viz .pf-feed { min-height: 330px; }
/* durable: larger lanes */
.pl-viz .dur-viz { margin: 0; min-height: 320px; padding: 1.3rem 1.5rem; font-size: 13px; gap: 1.3rem; align-content: space-between; }
.pl-viz .dl { grid-template-columns: 84px 1fr; } .pl-viz .dl code { font-size: 13px; }
.pl-viz .dur-foot { font-size: 12.5px; } .pl-viz .dur-st b { font-size: 12.5px; padding: 3px 10px; }
.pl-viz .sbx { font-size: 13px; }
/* always on: uptime strip */
.pl-viz-2 .dia-d { margin: 0 auto; max-width: 640px; font-size: 11px; }
/* self-improving: the factory improves list, items tick in one by one */
.imp { border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--cyan) 5%, var(--panel)); padding: 1.2rem 1.3rem 1.1rem; display: grid; gap: 1rem; font-size: 13px; max-width: 640px; width: 100%; justify-self: center; }
.imp-h { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.imp .sbx { border-color: color-mix(in srgb, var(--cyan) 60%, transparent); color: var(--cyan-ink); }
.imp .sbx .logo-mark { color: var(--cyan); }
.imp-ctx { color: var(--mute); font-size: 12px; }
.imp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.imp-list li { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .7rem .9rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); background: var(--panel); }
.imp-list b { font-weight: 400; color: var(--cyan-ink); }
.imp-list span { color: var(--ink); overflow-wrap: anywhere; }
.imp-list em { font-style: normal; font-size: 12px; color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.imp-list em::before { content: ""; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -2px); }
.imp-foot { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; color: var(--mute); font-size: 12px; padding-top: .7rem; border-top: 1px dashed color-mix(in srgb, var(--cyan) 40%, transparent); }
.imp-foot .cy { color: var(--cyan); }
.imp.play .imp-list li { animation: impin .45s ease both; animation-delay: calc(.5s + var(--i) * .75s); }
.imp.play .imp-list em { animation: impok .3s ease both; animation-delay: calc(.85s + var(--i) * .75s); }
.imp.play .imp-foot { animation: impin .45s ease both; animation-delay: 4.4s; }
@keyframes impin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes impok { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.imp-list li.now { border-color: var(--cyan); }
@media (max-width: 1100px) {
  .pl-panel { grid-template-columns: 1fr; gap: 1.6rem; align-content: start; padding: 2rem; }
  .pl-copy p { max-width: 60ch; }
}
@media (max-width: 760px) {
  .pl-box { margin-top: 1.6rem; }
  .pl-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .pl-tab { border: 1px solid var(--line2); border-radius: 10px; padding: .55rem .75rem .65rem; overflow: hidden; gap: 2px; }
  .pl-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--orange) 55%, transparent); background: var(--orange-soft); }
  .pl-prog { bottom: 0; }
  .pl-k { font-size: 12px; } .pl-t { font-size: .95rem; }
  .pl-stage { margin-top: .8rem; }
  .pl-panel { padding: 1.2rem 1rem 1.3rem; gap: 1.2rem; min-height: 0; }
  .pl-copy { gap: .55rem; } .pl-copy h3 { font-size: 1.4rem; } .pl-copy p { font-size: 1rem; }
  .pl-viz .pf { grid-template-columns: 1fr; }
  .pl-viz .pf-feed { min-height: 0; } .pl-viz .pf-card { min-height: 196px; }
  .pl-viz .dur-viz { min-height: 0; padding: 1rem; font-size: 12px; gap: 1rem; } .pl-viz .dl { grid-template-columns: 70px 1fr; } .pl-viz .dl code { font-size: 12px; }
  .pl-viz .dur-foot, .pl-viz .dur-st b, .pl-viz .sbx { font-size: 12px; }
  .imp { padding: 1rem; font-size: 12.5px; }
  .imp-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px .6rem; padding: .6rem .7rem; }
  .imp-list b { grid-column: 1; } .imp-list span { grid-column: 1; } .imp-list em { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-panel, .pl-panel.on { transition: none; }
  .imp .imp-list li, .imp .imp-list em, .imp .imp-foot { animation: none !important; opacity: 1; transform: none; }
}
/* without JS: every pillar stacked, no tabs */
.pillars:not(.js) .pl-tabs { display: none; }
.pillars:not(.js) .pl-panel { grid-area: auto; opacity: 1; visibility: visible; }
.pillars:not(.js) .pl-panel + .pl-panel { border-top: 1px solid var(--line2); }
/* proactive card: nothing may exceed the card (outcome chip, status pills, title) at any width */
.pf-card, .pf-foot { grid-template-columns: minmax(0, 1fr); }
.pf-issue, .pf-foot, .pf-run, .pf-out, .pf-from, .pf-top, .pf-track { min-width: 0; max-width: 100%; }
.pf-out { justify-self: start; border-radius: 12px; align-items: flex-start; }
.pf-out .pf-ic { margin-top: 1px; }
.pf-out span:last-child, .pf-run span:last-child, .pf-from span:last-child { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.35; }
.pf-title { overflow-wrap: anywhere; }
.pf-top { flex-wrap: wrap; } .pf-sts { flex: none; } .pf-top .pill { white-space: nowrap; }
.pf-track span { white-space: normal; }
/* single-column stage (<=1100): only the active panel takes space, so short pillars leave no empty stage */
@media (max-width: 1100px) {
  .pillars.js .pl-stage { display: block; }
  .pillars.js .pl-panel:not(.on) { display: none; }
  .pillars.js .pl-panel.on { animation: scenein .35s ease both; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) { .pillars.js .pl-panel.on { animation: none; } }
/* use cases: roles and programs */
.uc-lede { margin: .8rem 0 0; max-width: 62ch; color: var(--color-text-secondary); }
.uc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.uc-hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 1.5rem 2.5rem; align-items: center; }
.uc-hero h3 { font-size: 1.5rem; letter-spacing: -.01em; }
.uc-p { margin: 0; color: var(--color-text-secondary); font-size: .95rem; max-width: 52ch; }
.uc-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem 1.2rem; margin: .3rem 0 0; }
.uc-stats.sm { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: auto; }
.uc-stats div { border-top: 1px solid var(--line2); padding-top: .5rem; min-width: 0; }
.uc-stats dt { font-size: 12px; color: var(--color-text-secondary); }
.uc-stats dd { margin: .15rem 0 0; font-size: 1.35rem; color: var(--ink); }
.uc-stats.sm dd { font-size: 1.1rem; }
.uc-panel { border: 1px solid var(--line2); border-radius: var(--r); background: var(--panel); padding: 1rem; display: grid; gap: .9rem; min-width: 0; }
.uc-ph { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: 12px; color: var(--color-text-secondary); }
.uc-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: 12px; }
.uc-log li { display: grid; grid-template-columns: 3.4em 6.6em minmax(0,1fr); gap: .6rem; align-items: baseline; }
.uc-log time { color: var(--color-text-secondary); }
.uc-log b { font-weight: 400; color: var(--orange-ink); white-space: nowrap; }
.uc-log b.bad { color: var(--red-ink); } .uc-log b.ok { color: color-mix(in srgb, var(--green) 70%, var(--ink)); }
.uc-log span { color: var(--ink); min-width: 0; }
.uc-pol { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; border-top: 1px solid var(--line2); padding-top: .8rem; }
.uc-pol-k { font-size: 12px; color: var(--color-text-secondary); }
.uc-seg { display: inline-flex; border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); border-radius: 999px; padding: 3px; gap: 3px; font-size: 12px; max-width: 100%; flex-wrap: wrap; }
.uc-seg span { padding: 4px 12px; border-radius: 999px; color: var(--color-text-secondary); white-space: nowrap; }
.uc-seg span.on { background: color-mix(in srgb, var(--orange) 18%, transparent); box-shadow: inset 0 0 0 1px var(--orange); color: var(--ink); }
.uc-issues { display: grid; grid-template-columns: repeat(12, minmax(0,22px)); gap: 5px; }
.uc-issues i { aspect-ratio: 1; border-radius: 3px; border: 1px solid var(--line2); }
.uc-issues i.d { background: color-mix(in srgb, var(--green) 55%, transparent); border-color: transparent; }
.uc-issues i.r { background: color-mix(in srgb, var(--orange) 35%, transparent); border-color: var(--orange); }
.uc-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 8%, transparent); overflow: hidden; }
.uc-bar span { display: block; height: 100%; background: var(--orange); }
.uc-barl { display: flex; justify-content: space-between; gap: .5rem; font-size: 12px; color: var(--color-text-secondary); margin-top: -.3rem; }
.uc-goals { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: .5rem; font-size: 12px; }
.uc-goals li { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .8rem; align-items: baseline; border-top: 1px solid var(--line2); padding-top: .5rem; }
.uc-goals span { color: var(--color-text-secondary); } .uc-goals b { font-weight: 400; color: var(--ink); } .uc-goals em { font-style: normal; color: color-mix(in srgb, var(--green) 70%, var(--ink)); }
@media (max-width: 980px) { .uc-grid { grid-template-columns: 1fr; } .uc-hero { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .uc-goals li { grid-template-columns: minmax(0,1fr) auto; } .uc-goals em { grid-column: 2; } .uc-stats.sm { gap: .6rem; } .uc-log li { grid-template-columns: 3.4em minmax(0,1fr); } .uc-log li span { grid-column: 2; } }