/* Nano Genetics / Nordic blue identity. Load after each page's component styles. */
:root {
  --ng-navy: #101f2c;
  --ng-deep: #0b1925;
  --ng-surface: #152c3d;
  --ng-raised: #203c50;
  --ng-text: #eef6fc;
  --ng-muted: #b3c7d5;
  --ng-ice: #b9dfee;
  --ng-sky: #77c8ef;
  --ng-light: #e4f0f7;
  --ng-light-ink: #173346;
  --ng-light-muted: #426177;
  --ng-light-line: #a8c2d3;
  --ng-border: #527187;
  --ng-rule: rgba(143, 181, 207, .36);
  --ng-rule-soft: rgba(143, 181, 207, .22);
  --bg: var(--ng-navy);
  --surface: var(--ng-surface);
  --text: var(--ng-text);
  --ink: var(--ng-text);
  --muted: var(--ng-muted);
  --dim: var(--ng-muted);
  --accent: var(--ng-ice);
  --lime: var(--ng-ice);
  --blue: var(--ng-sky);
  --line: var(--ng-rule);
  --atlas-bg: var(--ng-navy);
  --atlas-ink: var(--ng-text);
  --atlas-dim: var(--ng-muted);
  --atlas-lime: var(--ng-ice);
  --atlas-gold: var(--ng-sky);
  --atlas-line: var(--ng-rule);
  --atlas-surface: var(--ng-surface);
  --ob-bg: var(--ng-navy);
  --ob-ink: var(--ng-text);
  --ob-muted: var(--ng-muted);
  --ob-lime: var(--ng-ice);
  --ob-line: var(--ng-rule);
  --ob-lilac: var(--ng-sky);
  --hs-bg: var(--ng-navy);
  --hs-ink: var(--ng-text);
  --hs-muted: var(--ng-muted);
  --hs-line: var(--ng-rule);
  --hs-blue: var(--ng-ice);
  --hs-ivory: var(--ng-light);
}
body { background: var(--ng-navy); color: var(--ng-text); }
::selection { background: var(--ng-ice); color: var(--ng-light-ink); }
:where(button, input, select, textarea) { accent-color: var(--ng-sky); }
.skip:focus { color: var(--ng-light-ink); }

/* Shared navigation: the palette follows the same hierarchy on every page. */
.site-header {
  --nav-ink: var(--ng-text);
  --nav-muted: var(--ng-muted);
  --nav-accent: var(--ng-ice);
  --nav-line: var(--ng-rule);
}
.site-header .site-nav-panel {
  background: var(--ng-surface);
  border-color: var(--ng-border);
  box-shadow: 0 24px 52px #071321d9;
}
.site-header .site-nav-item { border-color: var(--ng-rule-soft); }
.site-header .site-nav-item:hover,
.site-header .site-nav-item:focus-visible { background: #b9dfee0d; }
.site-header .site-nav-index { color: var(--ng-sky); }
.site-header .site-nav-support { background: #b9dfee08; border-color: var(--ng-border); }
.site-header .site-nav-support:hover { background: #b9dfee14; border-color: var(--ng-ice); }
@media (max-width: 1160px) {
  .site-header .site-nav-group { border-color: var(--ng-rule); }
  .site-header .site-nav-panel { border-color: var(--ng-rule); box-shadow: none; }
}

/* Buttons and selectable controls keep dark text on the light active state. */
.button, .primary, .atlas-button, .ob-button, .hs-button,
.systems-hero .button.primary {
  background: var(--ng-ice);
  color: var(--ng-light-ink);
  border-color: var(--ng-ice);
}
.button:hover, .primary:hover, .atlas-button:hover, .ob-button:hover, .hs-button:hover,
.systems-hero .button.primary:hover { background: #d6effb; color: var(--ng-light-ink); }
.secondary { background: transparent; color: var(--ng-text); border-color: var(--ng-border); }
.secondary:hover { background: var(--ng-raised); color: var(--ng-text); }
.segmented button[aria-pressed=true], .signal-controls button[aria-pressed=true],
.filter.is-active, .atlas-scenarios button[aria-pressed=true],
.ob-scenarios button[aria-pressed=true], .hs-presets button[aria-pressed=true] {
  background: var(--ng-ice); border-color: var(--ng-ice); color: var(--ng-light-ink);
}

/* Homepage: cool editorial surfaces, luminous details, original artwork. */
.systems-hero.hero h1 em { color: var(--ng-ice); }
.hero-art:before { background: radial-gradient(ellipse, #365f834d, transparent 65%); }
.orbit { border-color: #89b6d22b; }
.hero-logo { box-shadow: 0 20px 80px #08152266; }
.frontier-image-label, .systems-hero .frontier-image-label,
.frontier-picture>span { background: #102c40e8; border-color: #a8d4ec70; color: var(--ng-text); }
.frontier-card, .research-tile { background: var(--ng-surface); border-color: var(--ng-rule); }
.frontier-card:hover, .research-tile:hover { border-color: var(--ng-sky); }
.connection-grid { background: var(--ng-surface); }
.connection-number, .sensor-symbol { color: var(--ng-sky); }
.sensor-section, .research-portal { background: #132838; }
.sensor-card { background: #183244; border-color: var(--ng-rule); }
.sensor-card:hover { border-color: var(--ng-sky); }
.research-tools a { border-color: var(--ng-rule); }
.fields, .human-section, .systems-gateway, .observatory-portal {
  background: var(--ng-light); color: var(--ng-light-ink); border-color: var(--ng-light-line);
}
.fields .section-heading>p, .field p:not(.eyebrow),
.human-section .section-heading>p, .human-grid p,
.systems-gateway-copy>p:not(.eyebrow):not(.systems-concept-note),
.systems-gateway-copy .systems-concept-note,
.observatory-edition, .observatory-heading p, .observatory-bottom p,
.observatory-bottom small { color: var(--ng-light-muted); }
.field, .field+.field, .human-grid article, .systems-studio-steps,
.observatory-bottom>a { border-color: var(--ng-light-line); }
.field-symbol, .systems-gateway-copy .eyebrow, .systems-studio-steps b,
.observatory-intro .eyebrow, .observatory-pulse { color: #356888; }
.observatory-intro .live-dot { background: #356888; }
.systems-layer-art figcaption { background: #edf6fbed; color: var(--ng-light-muted); border-color: var(--ng-light-line); }
.systems-gateway .button.primary, .observatory-portal .button.primary {
  background: var(--ng-light-ink); border-color: var(--ng-light-ink); color: var(--ng-text);
}
.systems-gateway .button.primary:hover, .observatory-portal .button.primary:hover {
  background: #2c536c; border-color: #2c536c; color: var(--ng-text);
}
.systems-secondary { text-decoration-color: var(--ng-light-line); }
.fields :focus-visible, .systems-gateway a:focus-visible,
.observatory-portal a:focus-visible { outline-color: #356888; }
.observatory-image-index, .observatory-material .observatory-image-index {
  background: #102c40db; border-color: #c1e2f180; color: var(--ng-text);
}
.observatory-image-title { color: var(--ng-text); }
.observatory-diptych>a::after,
.observatory-diptych .observatory-material::after {
  background: linear-gradient(0deg, #081e32ed, transparent 62%);
}
.future, .principles { background: var(--ng-ice); color: var(--ng-light-ink); }
.future .large, .principles .lead { color: var(--ng-light-ink); }
.principles .eyebrow, .principles p { color: var(--ng-light-muted); }
.future-bottom, .status { border-color: #84afc7; }

/* Homepage live demonstrations: canvas and SVG use the same two blue tones. */
.lab-visual { background: radial-gradient(ellipse at center, #24465e, #0d2232 70%); }
.lab-panel, .signal-insight { background: var(--ng-surface); }
.segmented { background: var(--ng-deep); }
.key-c { background: #77aedf; }
.sequence span { border-color: var(--ng-border); }
.binary { color: var(--ng-muted); }
.signal-lab { border-color: var(--ng-rule); box-shadow: 0 25px 90px #07132140; }
.signal-console { background: #102737; }
.signal-controls button { border-color: var(--ng-border); }
.signal-legend span+span { color: var(--ng-muted); }
.insight-step { border-color: var(--ng-rule); color: #c8dce9; }
#signal-grid path { stroke: #294b64; }
#reference-path { stroke: #77aedf; }
#signal-path { stroke: var(--ng-ice); }

/* Human Interface chapters. */
.hero-index { background: #19384e; }
.architecture { background: var(--ng-surface); }
.node-number { border-color: var(--ng-border); box-shadow: 0 0 20px #a8d6e80b; }
.connector { color: #89b6d2; }
.chapter-art, .evidence-card { background: var(--ng-surface); }
.evidence-section { background: #132838; }
.filter { border-color: var(--ng-border); }
.level { color: var(--ng-muted); border-color: var(--ng-border); }
.level.research { color: var(--ng-ice); border-color: #6a9dbb; }
.level.vision { color: var(--ng-sky); border-color: #507fa4; }
.vision-card, .prototype-flow li { background: #1b3548; }
.text-link, .atlas-textlink { border-color: var(--ng-rule); }

/* Research Atlas and its interactive development map. */
.atlas-art, .atlas-experiment { background: var(--ng-surface); }
.atlas-result { background: #1d3b51; border-color: var(--ng-border); }
.atlas-builder, .atlas-glossary { background: #132838; }
.atlas-scenarios button { border-color: var(--ng-border); }
.atlas-builder-box { background: var(--ng-deep); border-color: var(--ng-border); }
.atlas-stages, .atlas-stages button { border-color: var(--ng-border); }
.atlas-stages button[aria-pressed=true] { background: #23445c; }
.atlas-stages button:hover { background: #1b3548; }
.atlas-builder-note { background: var(--ng-surface); }
.atlas-roadmap article { background: var(--ng-surface); }
@media (max-width: 440px) {
  .atlas-stages button:nth-child(-n+2) { border-color: var(--ng-border); }
}

/* Connection Observatory: two scales of research with one visual identity. */
.ob-hero h1 em, .ob-directory span, .ob-vision-note h3 { color: var(--ng-sky); }
.ob-human-story { background: var(--ng-light); color: var(--ng-light-ink); }
.ob-human-art { background: #d5e5ef; }
.ob-human-art figcaption { background: #d8e9f3; color: var(--ng-light-muted); }
.ob-human-copy .ob-eyebrow { color: #356888; }
.ob-human-copy>p:not(.ob-eyebrow):not(.ob-story-lead) { color: var(--ng-light-muted); }
.ob-human-copy .ob-link { border-color: #8aacc3; }
.ob-human-copy .ob-link:hover { color: #285c7e; }
.ob-human-copy .ob-link:focus-visible { outline-color: #356888; }
.ob-mechanism .ob-vision-note { border-color: var(--ng-rule); }
.ob-observatory { background: #132838; }
.ob-lab { background: var(--ng-deep); border-color: var(--ng-border); box-shadow: 0 30px 80px #07132140; }
.ob-lab-top { background: var(--ng-raised); }
.ob-synthetic { color: #c8dce9; }
.ob-synthetic>span:first-child { border-color: var(--ng-ice); }
.ob-lab[data-running="true"] .ob-synthetic>span:first-child { background: var(--ng-ice); }
.ob-lab-actions button, .ob-scenarios button { border-color: var(--ng-border); }
.ob-lab-actions button:hover { background: #b9dfee12; }
.ob-scenarios button:hover:not([aria-pressed="true"]) { border-color: var(--ng-sky); }
.ob-orbits { stroke: #89b6d222; }
.ob-connections { stroke: #587e9a; }
.ob-flow { stroke: var(--ng-sky); }
.ob-node-core { fill: var(--ng-surface); stroke: #80a3bf; }
.ob-node-number { fill: #c8dce9; }
.ob-node-label { fill: var(--ng-muted); }
.ob-node:hover .ob-node-core { fill: #29495f; }
.ob-node[aria-pressed="true"] .ob-node-core { fill: var(--ng-ice); stroke: var(--ng-ice); }
.ob-node[aria-pressed="true"] .ob-node-number { fill: var(--ng-light-ink); }
.ob-node[aria-pressed="true"] .ob-node-label { fill: var(--ng-text); }
.ob-network-hint, .ob-node-explainer dd, .ob-legend, .ob-slider p,
.ob-readouts span, .ob-readouts small, .ob-model-note { color: var(--ng-muted); }
.ob-node-explainer dt { color: var(--ng-ice); }
.ob-trace-panel { background: #091925c7; }
.ob-legend i { background: #769cbf; }
.ob-legend .ob-filtered-key { background: var(--ng-ice); }
#ob-trace text { fill: var(--ng-muted); }
.ob-trace-grid { stroke: #89b6d228; }
.ob-raw-path { stroke: #769cbf; }
.ob-filtered-path { stroke: var(--ng-ice); }
.ob-slider output, .ob-readouts strong { color: var(--ng-ice); }
.ob-slider input { accent-color: var(--ng-sky); }
.ob-readouts { background: var(--ng-surface); }
.ob-lab[data-output="detected"] .ob-output-readout strong { color: var(--ng-sky); }
.ob-model-note { background: #102333; }
.ob-material-story { background: #122435; }
.ob-material-copy .ob-eyebrow, .ob-material-copy h2 em, .ob-path-number { color: var(--ng-sky); }
.ob-material-copy .ob-story-lead { color: var(--ng-text); }
.ob-material-copy>p:not(.ob-eyebrow):not(.ob-story-lead), .ob-material-path p { color: var(--ng-muted); }
.ob-material-copy .ob-link, .ob-material-path>div { border-color: var(--ng-rule); }
.ob-material-art { border-color: var(--ng-rule); background: var(--ng-surface); }
.ob-material-art figcaption { background: #1b3548; color: var(--ng-muted); }
.ob-research-notes small { color: var(--ng-ice); }

/* Human Systems keeps its existing blue direction and adopts the shared ice surface. */
.hs-motion-art { background: #c6d9e6; }
.hs-motion-art figcaption { background: #20394d; color: #d6e5ef; }
.hs-edge { color: var(--ng-light-ink); }
.hs-edge-copy .hs-kicker, .hs-edge-copy h2 em { color: #356888; }
.hs-edge-copy .hs-lead, .hs-edge-copy .hs-text-link { color: var(--ng-light-ink); }
.hs-edge-copy>p:not(.hs-kicker):not(.hs-lead), .hs-edge-principles p { color: var(--ng-light-muted); }
.hs-edge-copy a:focus-visible { outline-color: #356888; }
.hs-edge-art { background: #d8e9f3; }
.hs-edge-art figcaption { background: #d8e9f3; color: var(--ng-light-muted); }
.hs-edge-principles article { border-color: var(--ng-light-line); }
.hs-edge-principles article>span { color: #356888; }
.hs-studio-section { background: #132838; }
.hs-studio { background: var(--ng-deep); border-color: var(--ng-border); }
.hs-studio-top { background: var(--ng-raised); }
.hs-controls { background: var(--ng-surface); }
.hs-presets button[aria-pressed=true] small { color: var(--ng-light-muted); }
.hs-duration input { accent-color: var(--ng-sky); }
.hs-budget-bars { background: #2b4c64; }
.hs-budget-bars [data-bar=emg], .hs-dot-emg { background: #77b7e8; }
.hs-budget-bars [data-bar=env], .hs-dot-env { background: #b4bdf0; }
.hs-route li:not(:last-child):after { background: var(--ng-deep); }
.hs-assumptions .hs-formula { color: var(--ng-text); }

/* Support: same visual language for the roadmap and account information. */
.status-strip, .surface { background: #132838; }
.cards article { background: var(--ng-surface); }
.hero-art { border-color: var(--ng-rule); }
.hero-art:has(.art-caption) { background: var(--ng-surface); box-shadow: 0 24px 100px #07132180; }
.notice { background: #1d3b51; border-color: #6a9dbb; }
.notice p { color: #d6e5ef; }
.bank-card { background: var(--ng-deep); }