/* The information current is the shared environment. The existing layout and
   interaction geometry stay intact; only the reading surfaces and signals change. */
:root {
  color-scheme: dark;
  --canvas: #111716;
  --paper: #18201e;
  --ink: #edf3f2;
  --muted: #adbfbb;
  --blue: #a5c5ff;
  --blue-dark: #c4d9ff;
  --blue-pale: #1d2e43;
  --human: #d69b72;
  --human-pale: #332820;
  --line: #34413d;
  --flow-quiet: #819892;
  --flow-action: #2458e6;
  --flow-action-hover: #1745c3;
  --flow-panel: #18201e;
}
body { background: var(--canvas); color: var(--ink); }
::selection { color: #111716; background: #c5daff; }
:focus-visible { outline-color: #b9d3ff; }
.skip-link { color: #111716; background: #edf3f2; }

/* Keep the motion control's place even when a static renderer hides its button. */
.site-header { background: rgba(17, 23, 22, .97); }
.header-inner { gap: 24px; }
.site-nav { margin-left: auto; color: var(--muted); }
.site-nav a:hover, .site-nav a[aria-current="location"] { color: var(--blue); }
.nav-cta { color: var(--ink); border-color: #71837d; }
.nav-cta:hover { color: var(--ink); background: #26332e; }
.field-control-slot { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; }
.field-control-slot .motion-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #586b63;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}
.field-control-slot .motion-toggle:hover { color: var(--ink); background: #23302a; border-color: #a5c5ff; }
.field-control-slot .motion-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.button-primary, .button-light { color: #fff; background: var(--flow-action); }
.button-primary:hover, .button-light:hover { color: #fff; background: var(--flow-action-hover); }
.text-link { color: var(--ink); }
.text-link:hover { color: var(--blue); }

/* One calm continuous background. This atmosphere is static CSS, without blur. */
.intelligence-field { position: absolute; inset: 0; width: 100%; height: 900px; pointer-events: none; }
.intelligence-field.field-ready { position: fixed; inset: 0; height: auto; }
.intelligence-field canvas { pointer-events: none; }
.field-static-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.field-atmosphere { background: radial-gradient(ellipse at 80% 42%, #28445429 0, #17252412 42%, transparent 70%); }
.hero::before { background: none; }
.page-seams svg { stroke: #87aeb7; opacity: .14; }
.hero h1 span, .blue { color: var(--blue); }
.hero-lede, .hero-note, .hero-field-caption { color: var(--muted); }
.hero-note > span, .field-human-note { color: var(--human); }
.field-human-note > span:last-child { color: var(--muted); }
.hero-field-caption strong { color: var(--ink); }
.hero-principles { border-color: var(--line); }
.hero-principles p, .hero-principles ul { color: var(--muted); }
.hero-principles strong { color: var(--ink); }
.eyebrow, .section-index, .micro-label { color: var(--muted); }
.signal { background: var(--blue); }
.section-intro { color: var(--muted); }
.workflow-section, .integration-section { background: transparent; }

/* Existing tools and people remain stable landmarks against the open field. */
.integration-system > svg { color: #b4c7c0; }
.integration-system::after { border-color: #99afa5; background: var(--canvas); }
[data-mode="connected"] .integration-system::after { border-color: var(--blue); background: var(--blue); }
.integration-paths .manual-connections { stroke: #c29774; }
.integration-paths .system-connections { stroke: #97b9ee; }
.integration-paths .decision-connection { stroke: var(--human); }
.integration-paths .integration-signal { stroke: #e0ecff; }
.connection-layer { color: var(--blue); background: var(--canvas); }
.person-symbol { background: var(--canvas); border-color: #b68562; }
.integration-person, .relay-label, .integration-principle { color: var(--human); }
.integration-system > span, #integration-role-detail, #integration-summary { color: var(--muted); }

/* One quiet working panel provides stable contrast for the detailed example. */
.workflow-lab { background: #18201ef7; border-color: #3e4d46; box-shadow: none; }
.workflow-tabs { background: #1e2924; border-color: #3e4d46; }
.workflow-tab { color: var(--muted); }
.workflow-tab:hover { color: var(--blue); background: #26372d; }
.workflow-tab[aria-selected="true"] { color: var(--blue); }
.workflow-tab::after { background: var(--blue); }
.lab-heading, .allocation-control, .task-rows, .allocation-board { border-color: var(--line); }
.lab-heading h3, .range-heading label, .task-label, .allocation-story h4 { color: var(--ink); }
.mode-switch { background: #101713; border-color: #48594f; }
.mode-switch button { color: var(--muted); }
.mode-switch button:hover { color: var(--ink); }
.mode-switch button[aria-pressed="true"] { color: var(--ink); background: #344039; box-shadow: none; }
.mode-switch #mode-connected, .integration-controls #integration-after { color: var(--blue); }
.mode-switch #mode-connected[aria-pressed="true"],
.integration-controls #integration-after[aria-pressed="true"] { color: #fff; background: var(--flow-action); }
.task-row { border-color: #34413b; }
.owner-track::before { background: #34413b; }
.owner-chip { color: #d0ddd5; background: #28342c; border-color: #62796a; }
.owner-chip.is-machine { color: #bdd5ff; background: #1d2e43; border-color: #6e91c1; }
.is-decision .owner-chip { color: #e7b38d; background: #332820; border-color: #a37d60; }
.machine-label { color: var(--blue); }
.human-label, .task-label .decision-label { color: var(--human); }
#workflow-play { color: var(--blue); border-color: #728c7c; }
#workflow-play:hover { color: #d3e3ff; border-color: var(--blue); }
#range-position, .range-endpoints, #range-help, .lane-headings { color: var(--muted); }
#automation-range { accent-color: var(--blue); }
#automation-range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--blue) 0 var(--range-fill), #667c6e var(--range-fill) 100%); }
#automation-range::-webkit-slider-thumb { background: var(--blue); border-color: #18201e; box-shadow: 0 0 0 1px var(--blue); }
#automation-range::-moz-range-track { background: #667c6e; }
#automation-range::-moz-range-progress { background: var(--blue); }
#automation-range::-moz-range-thumb { background: var(--blue); border-color: #18201e; box-shadow: 0 0 0 1px var(--blue); }
.allocation-story { background: #1d2922; border-color: var(--line); }
.division-counts > div, .human-promise { border-color: #405147; }
.division-counts .micro-label, .division-counts strong { color: var(--blue); }
.division-counts > div:last-child .micro-label, .division-counts > div:last-child strong,
.human-symbol, .human-promise strong { color: var(--human); }
.division-counts > div > span:last-child, #workflow-introduction,
.human-promise p, .lab-count-note, .example-note { color: var(--muted); }
.lab-footer { background: #141d18; border-color: var(--line); color: var(--muted); }
.lab-footer strong { color: var(--ink); }
.workflow-fallback article { background: #18201ee6; border-color: var(--line); }
.workflow-fallback p { color: var(--muted); }

/* The allocation flow belongs to the working panel and shares its palette. */
.routing-flow {
  --routing-ink: #edf3f2;
  --routing-muted: #adbfbb;
  --routing-cool: #a5c5ff;
  --routing-warm: #d69b72;
  background: var(--flow-panel);
  border-color: var(--line);
}
.routing-node-symbol { background: var(--flow-panel); box-shadow: 0 0 0 5px var(--flow-panel); }
.routing-node-input .routing-node-symbol, .routing-node-output .routing-node-symbol { background: #adbfbb; }
.routing-path-shared { stroke: #adbfbb70; }
.routing-path-system { stroke: #a5c5ff82; }
.routing-path-human { stroke: #d69b72a3; }

/* A slight tonal change replaces the former bright-to-dark chapter rectangle. */
.human-section { background: linear-gradient(100deg, #18201ee6, #18201e70); border-block: 1px solid #34413d; color: var(--ink); }
.human-section .section-index { color: var(--muted); }
.human-copy h2 span { color: var(--human); }
.human-copy > p:not(.eyebrow), .responsibility-column ul { color: var(--muted); }
.human-copy .text-link span { color: var(--blue); }
.responsibility-column, .responsibility-note { border-color: #576d60; }
.responsibility-icon { color: var(--blue); background: #1d2b38; border-color: #6e91c1; }
.people-icon { color: var(--human); background: #332820; border-color: #a37d60; }
.responsibility-column .micro-label { color: var(--blue); }
.people-column .micro-label { color: var(--human); }
.responsibility-column li { border-color: #3d4f44; }
.responsibility-note { color: var(--muted); }
.responsibility-note span { color: var(--human); }
.muted-heading { color: #a5bcb2; }
.approach-promise { color: var(--ink); }
.approach-steps li { border-color: #617568; }
.step-number, .approach-steps li::before { color: var(--blue); }
.approach-steps p { color: var(--muted); }
.contact-section { color: var(--ink); background: linear-gradient(180deg, transparent, #18201e73); }
.contact-inner { border-color: #53685b; }
.contact-inner .eyebrow, .contact-inner > div > p:not(.eyebrow), .contact-action > p { color: var(--muted); }
.email-link { color: var(--ink); }
.contact-section a:focus-visible, .human-section a:focus-visible { outline-color: #b9d3ff; }
.site-footer { background: transparent; }
.footer-main > p, .footer-bottom { color: var(--muted); }
.footer-main > a:last-child { color: var(--ink); }
.footer-main > a:last-child span { color: var(--blue); }

@media (max-width: 1199px) and (min-width: 801px) {
  .header-inner { gap: 18px; }
  .site-nav { gap: 20px; }
}
@media (max-width: 800px) {
  .header-inner { column-gap: 12px; }
  .field-control-slot { margin-left: auto; }
  .js .menu-toggle { color: var(--ink); padding-left: 6px; gap: 10px; }
  .js .site-nav { background: #17201c; border-color: #52665a; box-shadow: 0 16px 20px #0003; margin-left: 0; }
  .js .site-nav a { color: var(--ink); }
  .js .site-nav a:hover, .js .site-nav a[aria-current="location"] { color: var(--blue); background: #223129; }
  .js .site-nav .nav-cta { background: var(--flow-action); color: #fff; border-color: var(--flow-action); }
  .field-atmosphere { background: radial-gradient(ellipse at 78% 68%, #28445425, transparent 66%); }
}
@media (max-width: 380px) {
  .header-inner { column-gap: 8px; }
  .js .menu-toggle { padding-left: 4px; gap: 8px; font-size: 11px; }
}
@media (max-width: 560px) {
  .intelligence-field { height: 810px; }
  .intelligence-field.field-ready { height: auto; }
}
@media print {
  :root { color-scheme: light; --canvas: #fff; --ink: #202722; --muted: #46584c; --blue: #2458e6; --human: #965130; --line: #bbb; }
  body, .workflow-fallback article, .human-section, .contact-section { background: white; color: var(--ink); }
  .site-header { background: white; }
  .brand img { filter: brightness(0); }
  .site-nav, .site-nav a, .text-link, .email-link, .footer-main > a:last-child { color: var(--ink); }
  .intelligence-field, .field-control-slot { display: none !important; }
}

/* Real layout anchors give the retained review branch and arrival clear space. */
.human-section { padding-bottom: 48px; }
.chapter-current { position: relative; z-index: 2; pointer-events: none; }
.review-current { height: 144px; margin-top: 40px; }
.contact-inner { padding-bottom: 24px; }
.contact-current { height: 110px; margin-bottom: 26px; }
.chapter-current-static { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #a5c5ff; stroke-width: 2; stroke-dasharray: .1 7; stroke-linecap: round; opacity: .55; }
.chapter-current-static .current-warm { stroke: var(--human); }
.field-ready ~ main .chapter-current-static { visibility: hidden; }
.current-review-node, .current-arrival-node { position: absolute; width: 10px; height: 10px; border: 1px solid var(--human); border-radius: 50%; background: var(--canvas); transform: translate(-50%, -50%); }
.current-review-node { left: 50%; top: 68%; }
.current-review-label { position: absolute; left: 50%; top: 84%; transform: translateX(-50%); color: var(--human); font-size: 10px; letter-spacing: .02em; white-space: nowrap; }
.current-arrival-node { left: 97%; top: 55%; border-color: #a5c5ff; background: #c7e0ec; width: 6px; height: 6px; }
@media (max-width: 800px) { .human-section { padding-bottom: 32px; } .review-current { margin-top: 28px; } .contact-current { margin-bottom: 16px; } }
@media (max-width: 560px) { .field-static-image { transform: translateY(16px); } }
@media print { .chapter-current { display: none; } }