/* Shared presentation layer. Measurement colors inside source drawings remain intact. */
:root {
  --space: #050916;
  --surface: #101a30;
  --surface-raised: #15233b;
  --cyan: #7de9ff;
  --violet: #b5a2ff;
  --text: #e7efff;
  --muted: #a7b7d1;
  --lime: var(--cyan);
  --line: #83b8ff30;
  --panel: var(--surface);
  --workbench-bar-height: 108px;
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  background: var(--space);
  color: var(--text);
}
body {
  color: var(--text);
  background-color: var(--space);
  background-image:
    radial-gradient(ellipse at 85% 5%, #624aa52c, transparent 46%),
    radial-gradient(ellipse at 2% 22%, #09608828, transparent 38%),
    radial-gradient(1px 1px at 26px 44px, #b4d5ff85 98%, transparent),
    radial-gradient(1px 1px at 143px 162px, #c7baff60 98%, transparent),
    radial-gradient(1px 1px at 70px 118px, #b4d5ff45 98%, transparent);
  background-size: auto, auto, 277px 263px, 391px 347px, 463px 419px;
  background-attachment: fixed;
  scrollbar-color: #50698d #091223;
  accent-color: var(--cyan);
}
a { color: var(--cyan); }
::selection { background: #76d6ff45; color: #fff; }
body :focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
body h1, body h2, body h3 { color: #edf3ff; }
body h1 { font-weight: 350; letter-spacing: -.035em; }
body h2 { font-weight: 450; }
body .eyebrow { color: var(--cyan); letter-spacing: .2em; }
body .lede { color: var(--muted); }
body .topbar { border-color: var(--line); background: #080f2073; }
body .brand { color: #d6e6ff; letter-spacing: .2em; }
body .brand span, body .brand-mark { color: var(--cyan); }
body .world-link { color: #bed6f5; border-color: #739bdc35; background: #14233c50; }
body .world-link:hover { color: #fff; background: #1d3654; text-decoration: none; }
body .progress-note { color: #cbdcf3; }
body .progress-note small { color: #a2b5d1; }
body .dot { background: var(--cyan); box-shadow: 0 0 12px #66e7ff90; }

/* A consistent navigation shell, including the world scene. */
body .workbench-bar {
  display: block;
  height: auto;
  padding: 0 28px;
  background: #070e20ed;
  border-bottom: 1px solid #8ebaff42;
  box-shadow: 0 6px 35px #01040d60, 0 1px 0 #75ccff0b inset;
  backdrop-filter: blur(12px);
}
body .workbench-bar-top { display:flex; align-items:center; gap:20px; min-height:62px; }
body .workbench-home { display:flex; align-items:center; gap:10px; flex-shrink:0; }
body .workbench-brand-text { font: 9px/1.55 "Segoe UI",sans-serif; letter-spacing:.13em; color:#c9e8ff; }
body .workbench-directory { display:block; padding:9px 13px; border:1px solid #6ac9e981; border-radius:7px; background:#153348; color:#d9faff; font-size:12px; }
body .workspace-primary { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; padding:0 0 8px; }
body .workspace-primary a { display:flex; justify-content:center; align-items:center; padding:9px 5px; min-height:36px; border-radius:6px; font-size:12px; color:#b8cbe6; border:1px solid transparent; text-align:center; }
body .workspace-primary a:hover { background:#163049; color:#e3faff; }
body .workspace-primary a[aria-current] { color:#dffaff; border-color:#71d8ff80; background:linear-gradient(120deg,#123f53,#29274b); box-shadow:inset 0 -2px #7de9ff; }
body.has-workbench-bar > header.topbar[hidden] { display:none; }
.workspace-launchpad { margin:0 0 30px; padding:22px; border:1px solid #76c4f541; border-radius:14px; background:linear-gradient(115deg,#13304b9c,#171531c9); }
.workspace-launch-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.workspace-launch-heading h2 { margin:0; font-size:23px; }
.workspace-launch-heading a { font-size:12px; white-space:nowrap; }
.workspace-launchpad > p { margin:8px 0 18px; color:#abc3df; font-size:13px; }
.workspace-launch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
body .workspace-launch-link { display:grid; align-content:start; gap:7px; text-decoration:none; color:#dff3ff; padding:15px; border:1px solid #83b8ff40; border-radius:9px; background:#0c172acc; min-width:0; }
body .workspace-launch-link:hover { background:#173349; border-color:#82e3ff; box-shadow:0 0 20px #48baff16; }
.workspace-launch-link strong { font-size:14px; font-weight:500; }
.workspace-launch-link > span:not(.workspace-launch-symbol) { color:#a9bed8; font-size:12px; line-height:1.5; }
.workspace-launch-symbol { color:#8ce7ff; font:25px/1 "Segoe UI Symbol",sans-serif; }
.workspace-jump-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.workspace-jump-list .workspace-launch-link { padding:12px 14px; gap:3px; }
.directory-direct:empty { display:none; }
.directory-direct { margin-bottom:25px; }
@media(max-width:1000px) {
 body .workbench-bar { padding:0 16px; }
 body .workbench-bar-top { gap:12px; }
 body .workbench-brand-text { display:none; }
 .workspace-launch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 body .workbench-bar { padding:0 10px; }
 body .workbench-bar-top { gap:8px; min-height:60px; }
 body .workbench-home { display:none; }
 body .workbench-location { font-size:11px; }
 body .workbench-location > span:first-child { white-space:normal; }
 body .workbench-view { font-size:10px; max-width:150px; }
 body .workbench-directory { padding:8px; font-size:11px; }
 body .workbench-bar button { font-size:11px; padding:8px; }
 body .workspace-primary { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
 body .workspace-primary a { font-size:11px; min-height:32px; padding:7px 3px; }
 .workspace-launchpad { padding:14px; }
 .workspace-launch-heading { align-items:flex-start; flex-direction:column; gap:8px; }
 .workspace-launch-heading h2 { font-size:22px; }
 .workspace-launch-grid { gap:8px; }
 body .workspace-launch-link { padding:12px; }
 .workspace-launch-link strong { font-size:13px; }
 .workspace-jump-list { grid-template-columns:1fr; }
}
body .workbench-home { color: var(--cyan) !important; text-shadow: 0 0 20px #55dcff70; }
body .workbench-location > span:first-child { color: #e3edff; font-weight: 500; }
body .workbench-view { color: #a7bce0; }
body .workbench-view::before { color: #7885bd; }
body .workbench-directory { color: #b9cce9; }
body .workbench-bar button, body .workbench-close {
  border-color: #69cfe06b;
  background: linear-gradient(120deg, #173249, #282345);
  color: #cef5ff;
  box-shadow: 0 0 18px #53bcff0b, inset 0 1px #b3e5ff12;
}
body .workspace-skip { background: var(--cyan); color: #061324 !important; }
body .workbench-dialog {
  background: linear-gradient(135deg, #111d32fa, #100e24fc);
  color: var(--text);
  border-color: #7edaff60;
  border-radius: 16px;
  box-shadow: 0 35px 100px #000b, 0 0 50px #759aff12;
}
body .workbench-dialog::backdrop { background: #020612ca; }
body .workbench-dialog h2, body .nav-card h3 { font-family: "Segoe UI", Arial, sans-serif; }
body .workbench-dialog label, body .directory-search-label { color: #c5d8ee; }
body .workbench-search-status, body .directory-count { color: var(--muted); }
body .workbench-group-title { color: var(--cyan); letter-spacing: .18em; }
body .nav-card {
  background: linear-gradient(140deg, #172a418c, #12172eeb);
  border: 1px solid #7eb6e93b;
  box-shadow: inset 0 1px #cee9ff08;
  border-radius: 12px;
}
body .nav-card h3 a { color: #e0edff; }
body .nav-card p { color: #adbed8; }
body .nav-view-links a { background: #0b172bea; color: #bdcfe9; border-color: #6886b345; }
body .nav-card a:hover, body .workbench-full-directory { color: var(--cyan); }
body .nav-card a[aria-current] { color: #a1f1ff; }
body .nav-view-links a[aria-current] { background: #173c50; color: #dcfaff; border-color: #7ee4ff90; }

/* Glass panels retain an opaque enough base for reading. */
body :is(.ops-card, .ops-layout aside, #detail, .inspector, .domain-card,
  .component-card, .flow-card, .handoff-card, .action-card, .boundary-card,
  .dep-panel, .device-panel, .ds-card, .lab-panel, .formula-card, .discovery-card,
  .pt-card, .study-panel, .stock-card, .ledger-panel, .event-card, .scope-card,
  .reproduction-stage, .exhibit-card, .person-card, .museum-story-panel,
  .discovery-notebook, .chart-panel) {
  background: linear-gradient(135deg, #172941dc 0%, #10172de8 72%);
  border-color: #8cbaf33d;
  box-shadow: inset 0 1px #d5eaff0b, 0 12px 36px #01061424;
}
body :is(.ops-card, .nav-card, .domain-card, .component-card, .handoff-card) {
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
body :is(.nav-card, .domain-card, .component-card):hover {
  border-color: #7bdcff8c;
  box-shadow: inset 0 1px #d5eaff18, 0 0 26px #529fff12;
}
body :is(.ops-layout p, #detail p, .description, .plain-list, .flow-card p,
  .handoff-card p, .component-card span, .person-card p) { color: #bacbe2; }
body :is(.record-id, .detail-kind, .label, .small, .count, .section-caption,
  .inspector-top, .band-label, .domain-card .number, .domain-card small,
  .component-card small, .ops-journal small) { color: #a1b5d4; }
body .ops-card .symbol { color: var(--cyan); text-shadow: 0 0 24px #64daff42; }
body :is(.ops-metric, .device-metric, .ds-metric, .pt-metric, .study-metric, .fact) {
  background: linear-gradient(130deg, #16405775, #26244a7d);
  border: 1px solid #80bcf12c;
  border-radius: 10px;
}
body .ops-metric strong { color: #b4f3ff; font-weight: 450; }
body .ops-metric small { color: #bdcde2; }
body .ops-progress { background: #080e22; }
body .ops-progress span { background: linear-gradient(90deg, #65d9f6, #b59bff); }
body :is(.ops-note, .note, .lab-note, .device-note, .ds-note, .pt-note, .origin-note, .trace-note) {
  background: #11253cbb;
  color: #bdd1ed;
  border-left-color: #80bbf8;
}
body .ops-error { color: #ffcfb7 !important; border-left-color: #f0ad7d; }
body .ops-step, body .ops-journal, body .ops-source { border-color: #7294bf45; }
body .ops-source a, body .ops-layout summary { color: #afdfff; }
body .ops-source p { color: #acbdd7; }
body .ops-list li, body .material-chips span, body .field-chips span {
  background: #1c2a46;
  color: #c7d5ee;
  border-color: #7895c642;
}
body :is(.ops-flow span, .next-step, .links button, .detail-links button,
  .detail-links a.atlas-link) { background: #192d46; color: #d0e4fa; border-color: #79afda4d; }
body .ops-flow b, body .arrow, body .scene-button { color: var(--cyan); }
body .ops-table th { color: #a5deff; font-weight: 600; }
body .ops-table th, body .ops-table td { border-color: #7699c634; }
body .ops-table td { color: #c3cfe3; }
body .page-footer, body .inspector-footer { border-color: var(--line); color: #9bafcc; }
body #ops-status { color: #b0dffe; }

/* Selection is expressed by a border and fill as well as color. */
body button { color: #c7ddf4; }
body :is(.ops-layout button, .ops-links a, .ops-button, .atlas-link, .scene-button,
  .assembly-selector button, .flow-switch button, .world-link, .view-tools button) {
  background: linear-gradient(125deg, #18334b, #252442);
  border-color: #70b3d85c;
  color: #d2efff;
  border-radius: 7px;
}
body :is(.ops-layout button, .ops-links a, .atlas-link):hover {
  background: #234763;
  border-color: #89ddfa;
}
body .tabs { gap: 6px; border-color: var(--line); }
body .tabs button { background: #101b3090; border: 1px solid #6f8db334; color: #a6bedc; }
body .tabs button span { color: #b8cce6; }
body button[aria-pressed=true], body .tabs button[aria-pressed=true],
body .nav-view-links a[aria-current], body .domain-card[aria-pressed=true] {
  background: linear-gradient(120deg, #194054, #313058);
  border-color: #8adeffb0;
  color: #e2faff;
  box-shadow: inset 0 0 0 1px #73cfe315, 0 0 18px #5bcdfa16;
}
body .tabs button[aria-pressed=true] span,
body .domain-card[aria-pressed=true] :is(small, .number) { color: #cef3ff; }
body .primary-action, body .center-node { background: #9be8ff; color: #0c1b30; }
body button:disabled { opacity: .48; box-shadow: none; }
body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea,
  .ops-layout input, .ops-layout select, .ops-layout textarea, .workbench-dialog input, .directory-search) {
  background: #091429;
  border-color: #789ac059;
  color: #e0edff;
  border-radius: 7px;
}
body input::placeholder, body textarea::placeholder { color: #8299bb; }
body option { background: #101b30; color: #e0edff; }
body .ops-layout label { color: #c5d7ee; }
body .ops-layout :focus-visible { outline-color: var(--cyan); }

/* Frames around the scene, with a static projected-grid treatment. */
body :is(.lathe-stage, .board-stage, .circuit-stage, .exhibit-stage, .lab-stage,
  .journey-stage, .rack-stage, .museum-canvas-wrap, .museum-floor-stage, .making-canvas-wrap) {
  background: radial-gradient(ellipse at 50% 38%, #193453, #090f22 78%);
  border-color: #73b4e04d;
}
body .ops-town-canvas, body .ops-sightline {
  background: #081222;
  border-color: #7bd6f774;
  border-radius: 9px;
  box-shadow: 0 0 28px #42c3ff0d, 0 1px 0 #d3f2ff20;
}
body .scenario-tag, body .view-switch, body .map-label {
  background: #09152be8;
  color: #c6e0fc;
  border-color: #8ebcfd58;
}
body .world { background: radial-gradient(ellipse at 40% 42%, #1b3654, #080e20 80%); }
body #record-export-dialog { background: #111b31; color: #e0edff; border-color: #7ac8ee70; }
body #record-export-dialog p, body #record-export-dialog .export-meta { color: #b5cce9; }
body #record-export-dialog textarea { background: #080f23; color: #c4e3ff; border-color: #719dcb70; }
body #record-export-dialog :is(button,a) { background: #203650; color: #cbf1ff; border-color: #76c4e577; }
body #record-export-dialog .export-status { color: #aae1ff; }
body .scene-heading p, body .type-line { color: var(--cyan); }
body.future-theme :is(h1,h2,h3) { font-family: "Segoe UI", Arial, sans-serif; }
body.future-theme :is(.museum-eyebrow, .museum-subheading, .component-controls label,
  .museum-controls label, .component-gallery-toolbar label) { color: #b4c8e5; }
body.future-theme :is(.component-inspector, .component-making, .component-interface-sheet,
  .temperature-comparison, .part-navigator, .making-model, .making-first,
  .museum-tour, .museum-browse, .museum-interactive, .museum-apparatus article,
  .discovery-method-focus, .research-review-focus, .method-exhibit-grid article,
  .museum-next-question, .cad-project-summary, .cad-native-item, .relation-map,
  .loop-box, .equations) {
  background: linear-gradient(130deg, #14273ce8, #15182fe8);
  border-color: #7fa9e043;
}
body.future-theme :is(.making-stages>li, .making-prediction, .notebook-observation,
  .museum-evidence, .temperature-insight, .component-hint) {
  background: #172943;
  border-color: #86acd251;
  color: #c1d6ed;
}
body.future-theme :is(.dependency-links a, .component-related button, .dep-chips a,
  .dep-chips button, .museum-method-links a, .museum-workshop-links>a, .making-inputs span) {
  background: #1a2d49;
  border-color: #79a5ce50;
  color: #c4e1f6;
}
body.future-theme button {
  background-color: #1a3047;
  border-color: #81b0d64d;
  color: #c8e2f8;
}
body.future-theme button[aria-pressed=true],
body.future-theme .museum-tour-stops button[aria-current=step] {
  background: linear-gradient(120deg, #194054, #313058);
  border-color: #8adeffb0;
  color: #e2faff;
  box-shadow: inset 0 0 0 1px #73cfe315, 0 0 18px #5bcdfa16;
}
body.future-theme .ops-card { position: relative; }
body.future-theme .ops-card::before {
  content: '';
  position: absolute;
  pointer-events: none;
  left: -1px;
  top: 17px;
  width: 2px;
  height: 32px;
  background: linear-gradient(#82ebffb0, #aaa1ff30);
  box-shadow: 0 0 12px #5ad8ff42;
}

/* Living systems is one research deck with ten switchable views. */
.future-hero { position: relative; isolation: isolate; min-height: 230px; padding: 20px 0 30px; }
.future-hero-copy { position: relative; z-index: 1; max-width: 730px; }
.future-hero h1 { max-width: 650px; font-size: clamp(32px, 3.8vw, 58px); line-height: 1.08; margin-bottom: 20px; }
@supports(background-clip:text) {
  .future-hero h1 { background: linear-gradient(115deg, #f0f8ff 15%, #bbf0ff 55%, #c5b5ff); background-clip: text; color: transparent; }
}
.future-hero .lede { max-width: 600px; font-size: 14px; line-height: 1.75; }
.future-hero .progress-note { margin-top: 23px; font: 10px Consolas, monospace; letter-spacing: .1em; }
.future-orbit { position: absolute; right: 0; top: -20px; height: 280px; width: 380px; opacity: .82; z-index: -1; pointer-events: none; }
.future-breadcrumb { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; font: 10px Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #94acd0; }
.future-breadcrumb a { color: #97defb; }
.future-breadcrumb span::before { content: '/'; color: #7786b3; margin-right: 12px; }
.structure-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 30px; }
.structure-map > div { padding: 20px; border: 1px solid #7aade04d; border-radius: 10px; background: linear-gradient(125deg, #1431498c, #201b398c); }
.structure-map small { font: 10px Consolas, monospace; letter-spacing: .15em; color: #9bdff7; }
.structure-map h2 { margin: 12px 0 8px; font-size: 20px; }
.structure-map p { color: #acbfdc; font-size: 13px; margin: 0; }
.structure-example { color: #b6c9e4; font-size: 13px; margin: -8px 0 30px; }
@media(min-width:1500px) { .future-hero-copy { max-width: 860px; } .future-orbit { right: 7%; } }
@media(max-width:1100px) { .future-orbit { width: 290px; opacity: .38; right: -8px; } .future-hero-copy { max-width: 680px; } }
@media(max-width:760px) {
  body { background-attachment: scroll; }
  .future-hero { min-height: 0; padding: 16px 0 22px; }
  .future-orbit { width: 200px; height: 180px; opacity: .16; right: 0; top: 20px; }
  .future-hero h1 { font-size: 37px; }
  .future-breadcrumb { margin-bottom: 18px; }
  .structure-map { grid-template-columns: 1fr; gap: 9px; }
  .structure-map > div { padding: 17px; }
  body .workbench-bar { backdrop-filter: none; }
}
@media(prefers-reduced-motion:reduce) { body *, body *::before, body *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media(forced-colors:active) {
  body { background-image: none; }
  .future-orbit { display: none; }
  .future-hero h1 { background: none; color: CanvasText; }
  body :is(button, a, input, select, textarea, .ops-card, .nav-card) { forced-color-adjust: auto; box-shadow: none; }
}