:root {
  color-scheme: dark;
  --bg: #080b0d;
  --panel: #101519;
  --panel-soft: #151b20;
  --text: #e8e6e1;
  --muted: #94979a;
  --gold: #c7a36d;
  --blue: #7ba6b3;
  --line: rgba(226, 215, 194, 0.16);
  --line-strong: rgba(199, 163, 109, 0.54);
  --max: 1540px;
  --ease: cubic-bezier(.2, .75, .25, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% 15%, rgba(66, 93, 105, 0.12), transparent 34rem),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 64px 64px, 64px 64px, auto;
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}

button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid #f2ca8c;
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 10px 14px;
  background: #fff;
  color: #111;
}
.skip-link:focus { transform: none; }

.topbar {
  min-height: 72px;
  padding: 0 clamp(20px, 3vw, 52px);
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 10, .88);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand { display: flex; align-items: center; gap: 14px; width: max-content; }
.brand-name { font-size: 25px; letter-spacing: .32em; font-weight: 300; }
.brand-name span { color: var(--gold); }
.brand-caption { color: #a7a5a0; font-size: 9px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }

.main-nav { display: flex; align-items: stretch; gap: 34px; height: 72px; }
.main-nav a {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid transparent;
}
.main-nav a:hover, .main-nav .is-current { color: #e5c18a; border-color: var(--gold); }

.topbar-status {
  justify-self: end;
  padding: 8px 13px;
  border: 1px solid var(--line);
  color: #aaa8a1;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
}
.status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #e3bd82; box-shadow: 0 0 10px #e3bd82; }

.intro {
  min-height: 205px;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 38px 24px 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.intro::before, .intro::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(123,166,179,.12);
  border-radius: 50%;
  top: -330px;
}
.intro::after { width: 690px; height: 690px; top: -460px; }
.intro-marker { position: absolute; left: 3vw; top: 58px; color: #85827b; border: 1px solid var(--line); padding: 10px 12px; font: 10px/1.3 ui-monospace, monospace; letter-spacing: .1em; }
.eyebrow { margin: 0 0 4px; color: #8d979a; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.intro h1 { margin: 0; font-weight: 250; font-size: clamp(48px, 6vw, 86px); line-height: 1; letter-spacing: .15em; color: #d9d8d3; text-shadow: 0 0 40px rgba(255,255,255,.08); }
.intro-lead { margin: 12px 0 2px; color: var(--gold); font-size: clamp(16px, 2vw, 22px); letter-spacing: .02em; }
.intro-note { margin: 0; color: var(--muted); font-size: 13px; }

.system-section { width: min(var(--max), calc(100% - 36px)); margin: 0 auto 28px; }
.section-label { display: flex; justify-content: space-between; width: 100%; margin: 0 0 10px; color: #918e87; font: 9px/1.2 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.section-label span:last-child { color: #c8aa7f; }
.map-return { margin: 0 0 9px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(216,180,125,.05); color: #c8aa7f; font: 8px ui-monospace, monospace; letter-spacing: .05em; cursor: pointer; }
.map-return[hidden] { display: none; }

.module-deck {
  display: flex;
  height: min(535px, 58vh);
  min-height: 440px;
  gap: 7px;
}
.system-overview { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1.08fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; padding: 42px 8px 46px; border: 1px solid var(--line); border-radius: 8px; background: radial-gradient(circle at 50% 50%, rgba(193,157,104,.09), transparent 34%), linear-gradient(180deg, rgba(18,25,29,.92), rgba(7,11,14,.98)); overflow: hidden; }
.overview-core { position: absolute; z-index: 1; left: 50%; top: 50%; width: 190px; height: 78px; transform: translate(-50%,-50%); display: grid; place-content: center; gap: 5px; border: 1px solid rgba(205,171,119,.48); background: #10171b; text-align: center; pointer-events: none; }
.overview-core strong { color: #d8d3c8; font-size: 15px; font-weight: 400; letter-spacing: .12em; }
.overview-core span { color: #9c8667; font: 6px ui-monospace, monospace; }
.system-map-node { position: relative; min-width: 0; padding: 13px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); color: #c8cdcc; text-align: left; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.system-map-node:hover, .system-map-node:focus-visible { transform: translateY(-2px); border-color: rgba(205,171,119,.68); background: rgba(205,171,119,.07); }
.system-map-node > span { color: #6f7778; font: 7px ui-monospace, monospace; }
.system-map-node strong { display: block; margin: 5px 0; color: #ddd9d0; font-size: 15px; font-weight: 400; letter-spacing: .08em; }
.system-map-node small { display: block; max-width: 270px; color: #a4aaa9; font-size: 9px; line-height: 1.35; }
.system-map-node em { display: block; margin-top: 8px; color: #8c7960; font: normal 7px ui-monospace, monospace; }
.system-map-node--lab { grid-column: 1; grid-row: 1; }
.system-map-node--color { grid-column: 2; grid-row: 1; padding-right: 105px; }
.system-map-node--professional { grid-column: 3; grid-row: 1 / 3; padding-top: 42px; }
.system-map-node--technology { grid-column: 1; grid-row: 2; }
.system-map-node--home { grid-column: 2; grid-row: 2; padding-right: 105px; }
.overview-loop { position: absolute; left: 20px; right: 20px; bottom: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #7e898b; font: 6px ui-monospace, monospace; }
.overview-loop i { color: #c3a16f; font-style: normal; }

.system-module {
  min-width: 0;
  flex: 1 1 10%;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(20,27,32,.96), rgba(8,12,15,.98));
  transition: flex 440ms var(--ease), border-color 300ms ease, box-shadow 300ms ease;
}

.system-module[data-module="color"] { --module-accent: #d6a66e; }
.system-module[data-module="professional"] { --module-accent: #98aeb4; }
.system-module[data-module="technology"] { --module-accent: #d8b47d; }
.system-module[data-module="lab"] { --module-accent: #82a8b3; }
.system-module[data-module="home"] { --module-accent: #b99d81; }
.system-module.is-active {
  flex: 4.2 1 42%;
  border-color: color-mix(in srgb, var(--module-accent), transparent 26%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 22px color-mix(in srgb, var(--module-accent), transparent 82%);
}
.system-module:hover { border-color: color-mix(in srgb, var(--module-accent), transparent 45%); }

.module-select {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
}
.module-index { position: absolute; z-index: 2; top: 13px; left: 13px; color: rgba(255,255,255,.42); font: 9px ui-monospace, monospace; }
.module-visual { height: 72%; min-height: 0; display: block; overflow: hidden; position: relative; border-bottom: 1px solid var(--line); }
.module-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, #0a0e11 100%); }
.module-visual img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.64) contrast(1.08); transition: transform 500ms var(--ease), filter 400ms ease; }
.system-module:hover .module-visual img, .system-module.is-active .module-visual img { transform: scale(1.025); filter: saturate(.82) contrast(1.08); }
.technology-compact-flows { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 14px; display: grid; grid-template-columns: auto 1fr; gap: 5px; }
.technology-compact-flows > span { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; border: 1px solid rgba(216,180,125,.32); border-radius: 3px; background: rgba(5,10,13,.84); color: #c4c7c5; font: 6px ui-monospace, monospace; letter-spacing: .04em; }
.technology-compact-flows b { font-weight: 500; white-space: nowrap; }
.technology-compact-flows i { color: var(--module-accent); font-style: normal; }
.module-heading { padding: 20px 16px 12px; display: grid; gap: 7px; }
.module-heading strong { font-size: clamp(15px, 1.4vw, 21px); font-weight: 400; letter-spacing: .08em; }
.module-heading strong::after { content: ""; display: block; width: 22px; height: 1px; margin-top: 8px; background: var(--module-accent); }
.module-heading small { color: #9d9d9a; font-size: 11px; line-height: 1.45; }
.module-toggle { position: absolute; bottom: 15px; right: 15px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; color: #bdbbb5; }

.module-content {
  position: absolute;
  inset: 0 0 0 38%;
  z-index: 3;
  padding: 22px 18px;
  background: linear-gradient(90deg, rgba(9,13,16,.88), rgba(17,24,29,.98));
  border-left: 1px solid var(--line-strong);
  animation: reveal 420ms var(--ease) both;
}
.module-content[hidden] { display: none; }
.module-content-label { margin: 0 0 15px; color: #a4a19a; font: 9px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.module-items { display: grid; gap: 7px; max-height: calc(100% - 30px); overflow: auto; scrollbar-width: thin; }
.module-item {
  width: 100%;
  min-height: 69px;
  padding: 10px;
  display: grid;
  grid-template-columns: 32px 1fr 8px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  background: rgba(255,255,255,.025);
  text-align: left;
  cursor: pointer;
}
.module-item:hover, .module-item.is-selected { border-color: color-mix(in srgb, var(--module-accent), transparent 45%); background: color-mix(in srgb, var(--module-accent), transparent 92%); }
.system-module[data-module="color"] .module-content { display: flex; flex-direction: column; }
.system-module[data-module="color"] .module-content[hidden] { display: none; }
.system-module[data-module="color"] .module-content-label { margin-bottom: 9px; }
.system-module[data-module="color"] .module-items { flex: 1 1 auto; min-height: 120px; max-height: none; }
.system-module[data-module="color"] .module-item { grid-template-columns: 32px 1fr auto; transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease; }
.system-module[data-module="color"] .module-item.relevance-0 { opacity: .28; }
.system-module[data-module="color"] .module-item.relevance-1 { opacity: .52; }
.system-module[data-module="color"] .module-item.relevance-2 { opacity: .68; border-color: rgba(214,166,110,.22); }
.system-module[data-module="color"] .module-item.relevance-3 { opacity: .82; border-color: rgba(214,166,110,.38); background: rgba(214,166,110,.045); }
.system-module[data-module="color"] .module-item.relevance-4 { border-color: rgba(214,166,110,.55); background: rgba(214,166,110,.085); box-shadow: inset 2px 0 0 rgba(214,166,110,.6); }
.system-module[data-module="color"] .module-item.relevance-5 { border-color: rgba(214,166,110,.76); background: rgba(214,166,110,.14); box-shadow: inset 3px 0 0 rgba(214,166,110,.9), 0 0 12px rgba(214,166,110,.08); }
.relevance { min-width: 94px; max-width: 108px; display: grid; justify-items: end; gap: 3px; text-align: right; }
.relevance-dots { display: flex; gap: 3px; }
.relevance-dots i { width: 6px; height: 6px; border: 1px solid rgba(214,166,110,.34); border-radius: 50%; background: transparent; }
.relevance-dots i.is-filled { border-color: #d8b47d; background: #d8b47d; box-shadow: 0 0 5px rgba(216,180,125,.55); }
.relevance > small { color: #b5a58d; font: 7px ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; }
.relevance > em { color: #879698; font: normal 7px/1.2 ui-monospace, monospace; }
.relevance--zero { min-width: 68px; }
.relevance--zero > small { color: #687174; }

.system-module[data-module="professional"] .module-content { left: 30%; padding: 14px; overflow: hidden; }
.system-module[data-module="professional"] .module-content-label { margin-bottom: 7px; }
.professional-map { height: calc(100% - 20px); display: flex; flex-direction: column; gap: 7px; }
.professional-scenarios { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.professional-scenarios button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.025); color: #92999a; font-size: 8px; cursor: pointer; }
.professional-scenarios button[aria-selected="true"] { border-color: rgba(152,174,180,.68); background: rgba(152,174,180,.13); color: #d8e1e1; }
.professional-formula { display: flex; gap: 10px; color: #899597; font: 7px ui-monospace, monospace; text-transform: uppercase; }
.professional-formula span:nth-child(2) { color: #8ab4bc; }
.professional-formula span:nth-child(3) { color: #d0b27f; }
.professional-route-wrap { flex: 1 1 auto; min-height: 175px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; overflow: hidden; }
.professional-route { display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: thin; }
.route-connector { flex: 0 0 auto; color: #80999e; font-size: 13px; transform: rotate(-90deg); }
.route-connector.is-optional { opacity: .45; }
.route-node { flex: 0 0 132px; min-height: 112px; padding: 10px; display: grid; align-content: start; gap: 6px; border: 1px solid rgba(152,174,180,.38); border-radius: 6px; background: rgba(152,174,180,.06); color: #c9cecc; text-align: left; cursor: pointer; }
.route-node > span, .route-side-node span { color: #7f9599; font: 7px ui-monospace, monospace; letter-spacing: .08em; }
.route-node strong, .route-side-node strong { font-size: 9px; line-height: 1.25; font-weight: 500; }
.route-node small { color: #828b8c; font-size: 7px; line-height: 1.3; }
.route-node--optional { border-style: dashed; opacity: .62; }
.route-node--repeat { border: 3px double rgba(152,174,180,.72); }
.route-node--transition, .route-node--transition.route-node--transition { border-color: #75aab5; background: rgba(74,130,142,.13); clip-path: polygon(8% 0,100% 0,92% 100%,0 100%); }
.route-node--full { border: 2px solid #c9a86f; background: rgba(201,168,111,.1); box-shadow: inset 0 0 0 2px rgba(201,168,111,.12); }
.route-node--stop { border-left: 3px solid #a58b70; }
.professional-side { width: 118px; display: grid; align-content: center; }
.route-side-node { padding: 9px; display: grid; gap: 5px; border: 1px dashed rgba(152,174,180,.42); border-radius: 6px; background: rgba(152,174,180,.035); color: #aab5b5; text-align: left; cursor: pointer; }
.professional-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; color: #778183; font-size: 7px; }
.professional-legend span { display: flex; align-items: center; gap: 4px; }
.professional-legend i { width: 18px; border-top: 1px solid #90a8ac; }
.professional-legend i.dashed { border-top-style: dashed; }
.professional-legend i.double { height: 5px; border-top: 3px double #90a8ac; }
.professional-legend i.final { height: 7px; border: 2px solid #c9a86f; }
.professional-dormant { display: flex; gap: 4px; overflow-x: auto; min-height: 25px; opacity: .25; scrollbar-width: none; }
.dormant-node { flex: 0 0 auto; padding: 4px 6px; border: 1px solid rgba(255,255,255,.09); background: transparent; color: #8a9292; font-size: 6px; }
.dormant-node span { margin-right: 4px; color: #70868a; }

.system-module[data-module="technology"] .module-content { left: 31%; padding: 14px; overflow: hidden; }
.system-module[data-module="technology"] .module-content-label { margin-bottom: 7px; }
.technology-map { height: calc(100% - 20px); display: flex; flex-direction: column; gap: 7px; }
.technology-mini-schemes { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.technology-mini-schemes > span { display: grid; grid-template-columns: auto 1fr; gap: 7px; padding: 6px 8px; border: 1px solid rgba(216,180,125,.2); background: rgba(216,180,125,.035); }
.technology-mini-schemes b { color: #d8b47d; font: 7px ui-monospace, monospace; letter-spacing: .07em; }
.technology-mini-schemes i { color: #889396; font: normal 7px ui-monospace, monospace; }
.technology-cards { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.25fr 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.technology-card { position: relative; min-width: 0; display: grid; grid-template-columns: 22px 1fr; gap: 7px; padding: 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); color: #c5c9c8; text-align: left; cursor: pointer; overflow: hidden; transition: border-color 180ms ease, background 180ms ease, opacity 180ms ease; }
.technology-card:hover, .technology-card:focus-visible { border-color: rgba(216,180,125,.62); }
.technology-card.is-selected { border-color: rgba(216,180,125,.72); background: linear-gradient(120deg, rgba(216,180,125,.11), rgba(77,111,120,.08)); }
.technology-card--primary { grid-row: 1 / 3; }
.technology-card--key { grid-column: 3; grid-row: 1; }
.technology-card--support { grid-column: 3; grid-row: 2; opacity: .78; border-style: dashed; }
.technology-card-index { color: #766a58; font: 7px ui-monospace, monospace; }
.technology-card-copy { display: block; min-width: 0; }
.technology-card-copy strong { display: block; color: #e0d7c9; font-size: 10px; font-weight: 500; letter-spacing: .055em; }
.technology-card-copy em { display: block; margin: 3px 0 5px; color: #bda57e; font: normal 8px/1.25 ui-monospace, monospace; }
.technology-card-copy small { display: block; color: #91999a; font-size: 8px; line-height: 1.35; }
.technology-card-priority { position: absolute; right: 7px; bottom: 6px; color: #667174; font: 6px ui-monospace, monospace; text-transform: uppercase; }
.technology-card-detail { display: grid; gap: 3px; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.08); }
.technology-card-detail[hidden] { display: none; }
.technology-card-detail b { color: #8da3a8; font: 6px ui-monospace, monospace; text-transform: uppercase; }
.technology-card-detail i { color: #a7aeae; font: normal 7px/1.25 ui-monospace, monospace; }
.technology-card-detail i::before { content: "— "; color: #d8b47d; }
.technology-formula { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; border: 1px solid rgba(216,180,125,.18); }
.technology-formula span { padding: 6px; background: rgba(216,180,125,.035); color: #a7a49e; font: 7px ui-monospace, monospace; text-align: center; }
.technology-dialog-details { margin-top: 14px; }

.system-module[data-module="lab"] .module-content { left: 27%; padding: 12px; overflow: hidden; }
.system-module[data-module="lab"] .module-content-label { display: none; }
.lab-map { height: 100%; display: flex; flex-direction: column; gap: 6px; }
.lab-thesis { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 12px; padding: 6px 9px; border: 1px solid rgba(132,169,176,.28); background: rgba(132,169,176,.055); }
.lab-thesis strong { color: #c8d7d8; font-size: 9px; font-weight: 500; }
.lab-thesis span { color: #8da2a6; font: 7px ui-monospace, monospace; }
.lab-research-grid { flex: 1 1 auto; min-height: 205px; display: grid; grid-template-columns: 145px 1fr; gap: 7px; }
.lab-reactor { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(132,169,176,.2); background: radial-gradient(circle, rgba(132,169,176,.12), rgba(8,14,17,.7) 62%); }
.lab-reactor-ring { position: absolute; border: 1px solid rgba(132,169,176,.34); border-radius: 50%; }
.ring-environment { width: 126px; height: 126px; border-style: dashed; }
.ring-pigments { width: 97px; height: 97px; border-color: rgba(205,166,110,.42); }
.ring-diffusion { width: 69px; height: 69px; border-style: dotted; }
.ring-reaction { width: 43px; height: 43px; border-color: rgba(185,120,96,.55); box-shadow: 0 0 18px rgba(185,120,96,.12); }
.lab-reactor-core { position: relative; z-index: 2; display: grid; gap: 4px; color: #d4b47e; font: 8px ui-monospace, monospace; text-align: center; }
.lab-reactor-core small { width: 112px; color: #9db0b2; font-size: 6px; line-height: 1.25; }
.lab-stage-path { position: absolute; bottom: 9px; color: #6f888c; font: 6px ui-monospace, monospace; }
.lab-cards { min-width: 0; display: grid; grid-template-columns: 1fr 1.12fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; }
.lab-card { min-width: 0; display: grid; grid-template-columns: 19px 1fr; gap: 5px; padding: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.022); color: #c3cccd; text-align: left; cursor: pointer; }
.lab-card:nth-child(1) { grid-column: 1; grid-row: 1; }
.lab-card:nth-child(2) { grid-column: 3; grid-row: 1; }
.lab-card:nth-child(3) { grid-column: 1; grid-row: 2; }
.lab-card:nth-child(4) { grid-column: 2; grid-row: 1 / 3; }
.lab-card:nth-child(5) { grid-column: 3; grid-row: 2; }
.lab-card:hover, .lab-card:focus-visible { border-color: rgba(132,169,176,.68); }
.lab-card.is-selected { border-color: rgba(132,169,176,.78); background: linear-gradient(125deg, rgba(132,169,176,.13), rgba(70,92,98,.05)); }
.lab-card--core { border: 2px solid rgba(205,166,110,.5); background: radial-gradient(circle at 50% 30%, rgba(132,169,176,.12), rgba(255,255,255,.02)); }
.lab-card-index { color: #61777b; font: 6px ui-monospace, monospace; }
.lab-card-copy { display: block; min-width: 0; }
.lab-card-copy strong { display: block; color: #d2dcdb; font-size: 8px; line-height: 1.2; letter-spacing: .035em; }
.lab-card-copy small { display: block; margin-top: 4px; color: #899596; font-size: 7px; line-height: 1.25; }
.lab-card-detail { display: grid; gap: 2px; margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.07); }
.lab-card-detail[hidden] { display: none; }
.lab-card-detail i { color: #98a7a8; font: normal 6px/1.2 ui-monospace, monospace; }
.lab-card-detail i::before { content: "? "; color: #d0a76f; }
.lab-card-detail b { margin-top: 2px; color: #7f989c; font: 6px ui-monospace, monospace; }
.lab-hidden-processes { flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; padding: 6px 8px; border-left: 2px solid #84a9b0; background: rgba(132,169,176,.045); }
.lab-hidden-processes strong { color: #b8cdcf; font: 7px ui-monospace, monospace; }
.lab-hidden-processes span, .lab-hidden-processes em { color: #879496; font: normal 6px/1.25 ui-monospace, monospace; }
.lab-method { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 6px; border: 1px solid rgba(205,166,110,.2); }
.lab-method span { color: #9fa8a7; font: 6px ui-monospace, monospace; white-space: nowrap; }
.lab-method i { color: #cda66e; font: normal 7px ui-monospace, monospace; }
.lab-principles { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.lab-principles span { padding: 6px 8px; background: rgba(255,255,255,.025); color: #828d8e; font: 6px/1.3 ui-monospace, monospace; }
.lab-principles b { display: block; margin-bottom: 2px; color: #b6c4c4; font-size: 6px; }
.lab-dialog-details { margin-top: 14px; }

.system-module[data-module="home"] .module-content { left: 25%; padding: 11px; overflow: hidden; }
.system-module[data-module="home"] .module-content-label { display: none; }
.home-map { height: 100%; display: flex; flex-direction: column; gap: 6px; }
.home-task-switch { flex: 0 0 auto; display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.home-task-switch button { flex: 0 0 auto; padding: 5px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.025); color: #929393; font-size: 6px; cursor: pointer; }
.home-task-switch button[aria-pressed="true"] { border-color: rgba(182,162,134,.72); background: rgba(182,162,134,.13); color: #e0c9a7; }
.home-task-summary { flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 9px; padding: 5px 7px; border-left: 2px solid #b6a286; background: rgba(182,162,134,.045); }
.home-task-summary strong { color: #d4c1a3; font: 7px ui-monospace, monospace; }
.home-task-summary span { color: #8f9695; font: 7px/1.25 ui-monospace, monospace; }
.home-route { flex: 0 0 auto; display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding: 2px 0; scrollbar-width: thin; }
.home-route > i { align-self: center; color: #b6a286; font: normal 7px ui-monospace, monospace; }
.home-route-step { flex: 1 0 95px; display: grid; gap: 2px; padding: 6px; border: 1px solid rgba(182,162,134,.34); background: rgba(182,162,134,.04); text-align: center; }
.home-route-step--optional { border-style: dashed; opacity: .62; }
.home-route-step b { color: #c8c1b7; font: 6px/1.2 ui-monospace, monospace; }
.home-route-step small { color: #747e7f; font: 5px ui-monospace, monospace; }
.home-directions { flex: 0 0 auto; display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.home-direction { min-width: 0; padding: 5px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.02); opacity: .42; }
.home-direction.relevance-1, .home-direction.relevance-2 { opacity: .58; }
.home-direction.relevance-3, .home-direction.relevance-4, .home-direction.relevance-5 { opacity: 1; border-color: rgba(182,162,134,.38); }
.home-direction--core { border: 2px solid rgba(182,162,134,.62); background: rgba(182,162,134,.08); }
.home-direction strong { display: block; color: #c4c5c2; font-size: 6px; line-height: 1.15; }
.home-direction small { display: none; }
.home-direction span { display: block; margin-top: 3px; color: #b6a286; font: 5px ui-monospace, monospace; letter-spacing: 1px; }
.home-products { flex: 1 1 auto; min-height: 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; overflow-y: auto; align-content: start; scrollbar-width: thin; }
.home-product { min-width: 0; min-height: 42px; display: grid; grid-template-columns: 1fr auto; gap: 5px; padding: 6px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); color: #c8c9c6; text-align: left; cursor: pointer; transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease; }
.home-product.relevance-0 { opacity: .24; }
.home-product.relevance-1 { opacity: .4; }
.home-product.relevance-2 { opacity: .58; }
.home-product.relevance-3 { opacity: .75; }
.home-product.relevance-4, .home-product.relevance-5 { opacity: 1; border-color: rgba(182,162,134,.42); }
.home-product.is-selected { border-color: #b6a286; background: rgba(182,162,134,.1); }
.home-product strong { display: block; font-size: 7px; line-height: 1.15; }
.home-product small { display: block; margin-top: 2px; color: #858e8e; font-size: 6px; }
.home-product em { display: block; margin-top: 2px; color: #6f8588; font: normal 5px ui-monospace, monospace; }
.home-product .relevance { min-width: 62px; }
.home-formula { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.home-formula span { padding: 6px; border: 1px solid rgba(182,162,134,.18); color: #8f9593; font: 6px ui-monospace, monospace; text-align: center; }
.home-formula b { color: #cfb58e; }
.home-dialog-details { margin-top: 14px; }
.color-task-switch { flex: 0 0 auto; margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.color-task-switch > span { display: block; margin-bottom: 6px; color: #c5a575; font: 9px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.color-task-switch > div { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.color-task-switch button { flex: 0 0 auto; padding: 5px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.025); color: #92999a; font-size: 8px; cursor: pointer; }
.color-task-switch button[aria-pressed="true"] { border-color: rgba(214,166,110,.65); background: rgba(214,166,110,.14); color: #efd0a4; }
.color-technical { flex: 0 0 auto; margin-top: 8px; padding: 8px 10px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 8px; border: 1px solid rgba(132,169,176,.25); background: rgba(54,76,82,.1); }
.color-technical > span { grid-column: 1 / -1; color: #779097; font: 7px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.color-technical strong { color: #c7ccca; font-size: 9px; font-weight: 500; text-transform: uppercase; }
.color-technical small { color: #858f91; font-size: 7px; }
.color-technical button { border: 0; background: transparent; color: #9ab2b7; font-size: 7px; cursor: pointer; white-space: nowrap; }
.color-technology-link { flex: 0 0 auto; margin-top: 6px; display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: 6px; color: #ba9b70; font: 8px ui-monospace, monospace; }
.color-technology-link i { font-style: normal; color: #d6a66e; }
.color-technology-link small { color: #858c8e; font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-item strong { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.module-item small { color: #9b9fa0; font-size: 9px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-glyph { width: 26px; height: 26px; border: 1px solid color-mix(in srgb, var(--module-accent), transparent 25%); border-radius: 50%; background: radial-gradient(circle, var(--module-accent) 1px, transparent 2px); background-size: 6px 6px; opacity: .85; }
.item-node { width: 6px; height: 6px; border-radius: 50%; background: var(--module-accent); box-shadow: 0 0 10px var(--module-accent); }

.system-console {
  min-height: 132px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1.5fr .9fr 1fr 1.15fr;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(12,16,18,.98), rgba(23,22,19,.96), rgba(10,14,17,.98));
  overflow: hidden;
}
.console-block { padding: 16px 20px; border-right: 1px solid var(--line); }
.console-block:last-child { border: 0; }
.console-label { margin: 0 0 13px; color: #8e8d88; font: 9px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .1em; }
.relation-track { display: flex; align-items: center; gap: 8px; overflow-x: auto; }
.relation-track button { padding: 5px 8px; border: 1px solid transparent; background: transparent; color: #a4a4a0; cursor: pointer; font-size: 10px; }
.relation-track button.is-current { border-color: var(--line); color: #e4c28f; }
.relation-track span { color: var(--gold); font-size: 10px; }
.console-copy { margin: 13px 0 0; color: #8e9293; font-size: 10px; }
.current-module { display: flex; gap: 14px; align-items: center; }
.current-symbol { width: 35px; height: 35px; border: 1px solid var(--gold); border-radius: 50%; background: radial-gradient(circle, var(--gold) 1px, transparent 2px); background-size: 8px 8px; }
.current-module strong, .current-module small { display: block; }
.current-module strong { font-size: 15px; letter-spacing: .08em; font-weight: 400; }
.current-module small { margin-top: 3px; color: #8f9293; font-size: 9px; }
.detail-list { margin: 0; display: grid; gap: 5px; }
.detail-list div { display: grid; grid-template-columns: 48px 1fr; gap: 8px; font-size: 9px; }
.detail-list dt { color: #9f825d; }
.detail-list dd { margin: 0; color: #b2b1ac; }
.console-schematic { padding: 5px 15px; }
.console-schematic svg { width: 100%; height: 100%; fill: none; stroke: rgba(199,163,109,.48); stroke-width: 1; }
.console-schematic circle { fill: #d5b985; stroke: none; }

.mobile-tabs { display: none; }
.materials-layer { margin-top: 8px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 13px; border: 1px solid var(--line); color: #858b8b; }
.materials-layer > span { color: #baa079; font: 8px ui-monospace, monospace; }
.materials-layer p { margin: 0; font: 7px ui-monospace, monospace; }
.materials-layer em { color: #687778; font: normal 7px ui-monospace, monospace; }

.footer { min-height: 68px; padding: 0 clamp(20px, 3vw, 52px); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: #787b7c; font-size: 10px; }

.item-dialog {
  width: min(530px, calc(100% - 32px));
  padding: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: linear-gradient(145deg, #161b1f, #0b0f12);
  color: var(--text);
  box-shadow: 0 30px 90px rgba(0,0,0,.75);
}
.item-dialog::backdrop { background: rgba(2,5,7,.78); backdrop-filter: blur(5px); }
body:has(.item-dialog[open]) { overflow: hidden; }
.dialog-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; font-size: 20px; }
.dialog-kicker { margin: 0 0 7px; color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.item-dialog h2 { margin: 0 0 16px; font-weight: 400; letter-spacing: .04em; }
.item-dialog > p:not(.dialog-kicker) { color: #b1b2ae; }
.item-dialog dl { margin: 24px 0 0; display: grid; gap: 10px; }
.item-dialog dl div { display: grid; grid-template-columns: 100px 1fr; padding-top: 9px; border-top: 1px solid var(--line); }
.item-dialog dt { color: #968066; }
.item-dialog dd { margin: 0; }
.dialog-tasks, .dialog-subsections { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.dialog-tasks h3, .dialog-subsections h3 { margin: 0 0 10px; color: #c8aa7c; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.dialog-tasks ul, .dialog-subsections ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #b1b2ae; font-size: 13px; }
.professional-dialog-details { margin-top: 14px !important; }
.professional-dialog-details[hidden] { display: none; }

@keyframes reveal { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: 1fr auto; }
  .main-nav { display: none; }
  .module-deck { display: grid; grid-template-columns: repeat(2, 1fr); height: auto; }
  .system-overview { min-height: 520px; grid-column: 1 / -1; }
  .system-module, .system-module.is-active { min-height: 360px; }
  .system-module.is-active { grid-column: 1 / -1; min-height: 480px; }
  .system-console { grid-template-columns: 1.3fr 1fr; }
  .console-block:nth-child(2) { border-right: 0; }
  .console-block:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 767px) {
  .topbar { min-height: 62px; padding: 0 18px; grid-template-columns: 1fr; }
  .topbar-status { display: none; }
  .brand-name { font-size: 20px; }
  .intro { min-height: 205px; padding-top: 34px; }
  .intro-marker { display: none; }
  .intro h1 { font-size: clamp(40px, 13vw, 62px); letter-spacing: .08em; }
  .intro-note { max-width: 300px; }
  .system-section { width: min(100% - 24px, 600px); }
  .mobile-tabs { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
  .mobile-tabs button { flex: 0 0 auto; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: #101519; color: #999; font-size: 9px; letter-spacing: .06em; }
  .mobile-tabs button[aria-selected="true"] { color: #f0cf9e; border-color: var(--line-strong); }
  .module-deck { display: block; }
  .system-overview { display: flex; flex-direction: column; min-height: 0; padding: 88px 8px 54px; }
  .overview-core { top: 10px; width: calc(100% - 16px); height: 68px; transform: translateX(-50%); }
  .system-map-node, .system-map-node--lab, .system-map-node--color, .system-map-node--professional, .system-map-node--technology, .system-map-node--home { min-height: 120px; padding: 14px; }
  .system-map-node strong { font-size: 16px; }
  .overview-loop { position: static; flex-wrap: wrap; margin-top: 5px; padding: 10px 4px 0; }
  .materials-layer { grid-template-columns: 1fr; gap: 5px; }
  .system-module { display: none; min-height: 0; }
  .system-module.is-active { display: block; min-height: 680px; }
  .module-visual { height: 310px; }
  .technology-compact-flows { left: 8px; right: 8px; grid-template-columns: 1fr; }
  .technology-compact-flows > span { font-size: 7px; }
  .module-heading { min-height: 125px; }
  .module-content { position: relative; inset: auto; min-height: 310px; border-left: 0; border-top: 1px solid var(--line-strong); }
  .system-module[data-module="color"] .module-content { min-height: 720px; }
  .system-module[data-module="professional"] .module-content { min-height: 850px; overflow: visible; }
  .system-module[data-module="technology"] .module-content { min-height: 930px; overflow: visible; }
  .technology-map { height: auto; }
  .technology-mini-schemes { grid-template-columns: 1fr; }
  .technology-mini-schemes > span { min-height: 38px; align-items: center; }
  .technology-cards { display: grid; grid-template-columns: 1fr; grid-template-rows: none; }
  .technology-card, .technology-card--primary, .technology-card--key, .technology-card--support { grid-column: auto; grid-row: auto; min-height: 125px; }
  .technology-card.is-selected { min-height: 205px; }
  .technology-card--support { opacity: .82; }
  .technology-card-copy strong { font-size: 11px; }
  .technology-card-copy small { font-size: 9px; }
  .technology-formula { grid-template-columns: 1fr 1fr; }
  .system-module[data-module="lab"] .module-content { min-height: 1580px; overflow: visible; }
  .lab-map { height: auto; }
  .lab-thesis { display: grid; gap: 5px; padding: 10px; }
  .lab-thesis strong { font-size: 11px; line-height: 1.35; }
  .lab-thesis span { font-size: 8px; }
  .lab-research-grid { display: flex; flex-direction: column; min-height: 0; }
  .lab-reactor { min-height: 240px; order: 0; }
  .lab-cards { order: 1; display: flex; flex-direction: column; }
  .lab-card, .lab-card:nth-child(1), .lab-card:nth-child(2), .lab-card:nth-child(3), .lab-card:nth-child(4), .lab-card:nth-child(5) { grid-column: auto; grid-row: auto; min-height: 125px; }
  .lab-card--core { order: -1; min-height: 205px; }
  .lab-card.is-selected { min-height: 210px; }
  .lab-card-copy strong { font-size: 10px; }
  .lab-card-copy small { font-size: 8px; }
  .lab-card-detail i, .lab-card-detail b { font-size: 7px; }
  .lab-hidden-processes { grid-template-columns: 1fr; padding: 10px; }
  .lab-hidden-processes strong { font-size: 8px; }
  .lab-hidden-processes span, .lab-hidden-processes em { font-size: 7px; }
  .lab-method { flex-direction: column; align-items: stretch; padding: 9px 12px; }
  .lab-method span { padding: 4px 0; font-size: 7px; text-align: center; white-space: normal; }
  .lab-method i { transform: rotate(90deg); text-align: center; }
  .lab-principles { grid-template-columns: 1fr; }
  .lab-principles span { padding: 9px; font-size: 7px; }
  .system-module[data-module="home"] .module-content { min-height: 1780px; overflow: visible; }
  .home-map { height: auto; }
  .home-task-switch { padding-bottom: 7px; }
  .home-task-switch button { padding: 7px 9px; font-size: 7px; }
  .home-task-summary { grid-template-columns: 1fr; padding: 9px; }
  .home-task-summary strong { font-size: 9px; }
  .home-task-summary span { font-size: 8px; }
  .home-route { flex-direction: column; overflow: visible; }
  .home-route > i { transform: rotate(90deg); }
  .home-route-step { flex: 0 0 auto; min-height: 52px; align-content: center; }
  .home-route-step b { font-size: 8px; }
  .home-directions { display: flex; flex-direction: column; }
  .home-direction { min-height: 70px; padding: 9px; }
  .home-direction--core { order: -1; min-height: 105px; }
  .home-direction strong { font-size: 9px; }
  .home-direction small { display: block; margin-top: 5px; color: #8c9493; font-size: 7px; line-height: 1.3; }
  .home-direction span { font-size: 7px; }
  .home-products { grid-template-columns: 1fr; max-height: 620px; }
  .home-product { min-height: 66px; padding: 9px; }
  .home-product strong { font-size: 9px; }
  .home-product small { font-size: 7px; }
  .home-product em { font-size: 6px; }
  .home-formula { grid-template-columns: 1fr; }
  .home-formula span { padding: 9px; font-size: 7px; }
  .professional-map { height: auto; }
  .professional-scenarios { flex-wrap: nowrap; }
  .professional-formula { flex-direction: column; gap: 3px; }
  .professional-route-wrap { display: block; overflow: visible; }
  .professional-route { display: grid; overflow: visible; padding: 4px 0; }
  .route-node { width: 100%; min-height: 82px; }
  .route-connector { transform: none; justify-self: center; }
  .professional-side { width: 100%; margin-top: 8px; }
  .professional-dormant { margin-top: 8px; }
  .system-module[data-module="color"] .module-items { max-height: 410px; }
  .color-technical { grid-template-columns: 1fr auto; }
  .color-technical small { grid-column: 1 / -1; }
  .color-technology-link { grid-template-columns: auto auto auto; }
  .color-technology-link small { grid-column: 1 / -1; white-space: normal; }
  .module-select { height: auto; min-height: 435px; }
  .module-toggle { top: 386px; bottom: auto; }
  .system-console { grid-template-columns: 1fr; }
  .console-block { border-right: 0; border-bottom: 1px solid var(--line); }
  .console-schematic { min-height: 110px; }
  .footer { padding: 18px; gap: 12px; flex-direction: column; text-align: center; }
  .item-dialog { width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; padding: 26px 18px 22px; border-radius: 16px 16px 0 0; overflow-y: auto; }
  .item-dialog dl div { grid-template-columns: 92px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}