:root {
  color-scheme: dark;
  --page: #07131f;
  --panel: #0c1d2a;
  --line: #20394a;
  --text: #f2f5fa;
  --muted: #a8bac9;
  --cyan: #35d8d0;
  --purple: #a98cff;
  --green: #63d3ad;
  --amber: #f3ba72;
  --width: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 85% 8%, rgb(108 85 232 / 13%), transparent 32rem), var(--page);
  color: var(--text);
  font: 16px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
}
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.wrap { width: min(var(--width), calc(100% - 3rem)); margin-inline: auto; }
.skip {
  position: absolute;
  z-index: 5;
  top: .5rem;
  left: .5rem;
  transform: translateY(-160%);
  padding: .6rem 1rem;
  border-radius: .5rem;
  background: var(--text);
  color: var(--page);
}
.skip:focus { transform: translateY(0); }

.global-header {
  position: sticky;
  z-index: 3;
  top: 0;
  border-bottom: 1px solid rgb(76 104 124 / 32%);
  background: rgb(7 19 31 / 94%);
  backdrop-filter: blur(14px);
}
.global-nav {
  position: relative;
  display: flex;
  min-height: 64px;
  padding-block: .5rem;
  align-items: center;
  justify-content: center;
}
.global-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.global-links a { display: inline-flex; min-height: 2.5rem; align-items: center; gap: .5rem; padding-block: .5rem; color: var(--muted); font-size: .94rem; text-align: center; text-decoration: none; }
.global-links a:hover, .global-links a[aria-current="page"] { color: var(--text); }
.nav-mark { display: block; width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }
.nav-portrait { border: 1px solid #8571ce; border-radius: 50%; object-fit: cover; object-position: 50% 42%; }
.nav-shockware-light, .hero-shockware-light, .hero-axiomorphic-light { display: none; }
.theme-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  width: 104px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  padding: .35rem;
  border: 1px solid #3c5770;
  border-radius: .65rem;
  background: #102536;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
}
.theme-toggle:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.theme-toggle__icon {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.theme-toggle__moon, .theme-toggle__night { display: none; }
.theme-toggle__label { position: absolute; inset-inline: 0; text-align: center; }
html.theme-ready[data-theme="light"] .theme-toggle__sun,
html.theme-ready[data-theme="light"] .theme-toggle__day { display: none; }
html.theme-ready[data-theme="light"] .theme-toggle__moon,
html.theme-ready[data-theme="light"] .theme-toggle__night { display: inline; }
.global-nav > nav { width: min(100%, calc(100% - 9rem)); }

main { overflow: hidden; }
.hero { padding: 1rem 0 3.2rem; border-bottom: 1px solid var(--line); }
.hero-brand {
  display: flex;
  min-height: 8rem;
  align-items: center;
  padding-block: .5rem;
}
.hero-divider { width: 100%; margin: 0 0 2rem; border: 0; border-top: 1px solid var(--line); }
.hero-logo { display: block; width: min(100%, 500px); height: auto; margin: 0; object-fit: contain; object-position: left center; }
.hero-logo.hero-shockware-light, .hero-logo.hero-axiomorphic-light { display: none; }
.hero-portrait { display: block; width: 128px; height: 128px; margin: 0; border: 3px solid #8571ce; border-radius: 50%; object-fit: cover; object-position: 50% 42%; }
.hero-content { width: 100%; }
.eyebrow {
  margin: 0 0 .8rem;
  color: var(--cyan);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 900px;
  margin-bottom: 1rem;
  font-size: clamp(2.7rem, 7vw, 5rem);
  line-height: 1.04;
  letter-spacing: -.05em;
}
h2 { text-transform: uppercase; }
h1 .gradient {
  background: linear-gradient(100deg, #55d9df, #9c84ff 64%, #ce72ef);
  background-clip: text;
  color: transparent;
}
.lead { max-width: 760px; margin-bottom: 1.4rem; color: var(--muted); font-size: 1.18rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .6rem 1rem;
  border: 1px solid #3c5770;
  border-radius: .65rem;
  background: #102536;
  font-weight: 650;
  text-decoration: none;
}
.button.primary { border-color: transparent; background: linear-gradient(105deg, #176f85, #624ac7); }
.button:hover { filter: brightness(1.13); }
.icon-button {
  width: 46px;
  min-width: 46px;
  padding: .5rem;
  border-color: #5c4d96;
  color: var(--text);
}
.icon-button svg { width: 24px; height: 24px; fill: currentColor; }
.section { padding: 3.8rem 0; border-bottom: 1px solid var(--line); }
.section-title { max-width: 720px; margin-bottom: 1.8rem; }
.section-title h2 {
  margin-bottom: .45rem;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.section-title p:last-child { margin-bottom: 0; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.card {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: linear-gradient(145deg, #112333, #0c1d2a);
}
.card h3 { margin-bottom: .4rem; font-size: 1.1rem; }
.card p { margin-bottom: 0; color: var(--muted); }
.service-card { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .85rem; row-gap: .25rem; align-content: start; }
.service-card > h3, .service-card > p, .service-card > .service-more { grid-column: 2; }
.service-card .service-icon { grid-column: 1; grid-row: 1 / span 4; width: 2rem; height: 2rem; color: var(--cyan); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.service-card .service-more { border: 0; border-radius: 0; background: transparent; }
.service-card .service-more[open] { background: transparent; }
.service-card .service-more summary { min-height: 0; padding: .4rem 0 0; color: var(--cyan); font-size: .9rem; }
.service-card .service-more .details-body { padding: .35rem 0 0; font-size: .91rem; }
.highlight { border-color: #51447f; background: linear-gradient(140deg, #1e1b36, #101d2a); }
.callout {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1.35rem;
  border: 1px solid #386e68;
  border-radius: .85rem;
  background: linear-gradient(110deg, #102a2d, #151e35);
}
.callout p { margin: 0; color: var(--muted); }
.callout strong { color: var(--text); }
.callout-brand { display: inline-flex; min-height: 2.5rem; align-items: center; justify-content: center; gap: .5rem; color: var(--muted); font-size: .94rem; font-weight: 650; text-decoration: none; }
.callout-brand:hover { color: var(--text); }
.callout-brand .nav-mark { width: 22px; height: 22px; flex-basis: 22px; }
.footer { padding: 1.7rem 0 2.2rem; }
.footer-inner { color: var(--muted); font-size: .92rem; }
.footer-inner p { margin: 0; }

.definition {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2.6rem;
  border-block: 1px solid var(--line);
}
.definition article { padding: 1.35rem 1.5rem 1.35rem 0; }
.definition article + article { padding-left: 1.8rem; border-left: 1px solid var(--line); }
.definition h2 { margin-bottom: .3rem; color: var(--cyan); font-size: .8rem; letter-spacing: .15em; }
.definition article + article h2 { color: var(--purple); }
.definition p { margin: 0; }
.definition span { display: block; color: var(--muted); }
.concept-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.concept-flow li { position: relative; display: grid; min-height: 12rem; place-items: center; border: 1px solid #278c91; border-radius: .9rem; background: #102b32; color: var(--cyan); font-size: 1.15rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.concept-flow li:nth-child(2) { border-color: #7464bd; background: #17182c; color: #b6a5ff; }
.concept-flow li:nth-child(3) { border-color: #7962c4; background: #19192f; background-image: linear-gradient(135deg, #19192f, #1b1932); }
.concept-flow li:nth-child(3) span { background: linear-gradient(100deg, #55d9df, #9c84ff 64%, #ce72ef); background-clip: text; color: transparent; }
.concept-flow li:not(:last-child)::after { position: absolute; top: 50%; left: calc(100% + 1.1rem); color: #8aa5bb; content: "→"; font-size: 1.8rem; transform: translateY(-50%); }
.glossary { margin-top: 1rem; }
.glossary-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; margin: 0; }
.glossary-terms > div { padding: .75rem; border: 1px solid var(--line); border-radius: .6rem; }
.glossary-terms dt { margin-bottom: .2rem; color: var(--text); font-weight: 700; }
.glossary-terms dd { margin: 0; color: var(--muted); }
.workflow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.workflow li { position: relative; padding: 1.2rem .8rem; border: 1px solid #315c70; border-radius: .8rem; background: #102b38; text-align: center; }
.workflow li:nth-child(2) { border-color: #6652a0; background: #211d3c; }
.workflow li:nth-child(3) { border-color: #42637a; background: #142b3a; }
.workflow li:nth-child(4) { border-color: #856344; background: #2a251e; }
.workflow li:nth-child(5) { border-color: #387e6e; background: #122c2c; }
.workflow li:not(:last-child)::after { position: absolute; z-index: 1; top: 50%; left: calc(100% - .35rem); color: #8aa5bb; content: "→"; transform: translateY(-50%); }
.workflow strong, .workflow span { display: block; }
.workflow strong { font-size: 1.1rem; }
.workflow span { color: var(--muted); font-size: .9rem; }
.fail-loop { margin: 1rem 0 0; padding: .7rem 1rem; border-top: 1px dashed #775b49; color: #f0c393; text-align: center; }
.fail-loop strong { color: #ff9e89; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
details { border: 1px solid var(--line); border-radius: .75rem; background: var(--panel); }
details[open] { background: #112333; }
summary { display: flex; min-height: 62px; align-items: center; gap: .8rem; padding: .8rem 1rem; cursor: pointer; font-weight: 650; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { margin-left: auto; color: var(--cyan); content: "+"; font-size: 1.3rem; }
details[open] summary::after { content: "−"; }
.details-body { padding: 0 1rem 1rem; color: var(--muted); }
.details-body p:last-child, .details-body ul:last-child { margin-bottom: 0; }
.details-body strong { color: var(--text); }
.artifact-tree {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: .8rem 0 1rem;
  padding: 1rem;
  overflow-wrap: anywhere;
  border: 1px solid #302b4a;
  border-radius: .7rem;
  background: #090f1c;
  color: #d7dcf0;
  font: .9rem/1.7 "Cascadia Code", Consolas, monospace;
  white-space: pre-wrap;
}
.artifact-tree code { color: inherit; white-space: inherit; }
.details-body code:not(pre code) { overflow-wrap: anywhere; }
.artifact-list { display: grid; gap: .55rem; padding-left: 1.3rem; }
.artifact-list li::marker { color: var(--purple); }
.artifact-list strong { color: var(--text); }
.media-note { color: var(--muted); font-size: .91rem; }
.timeline { display: grid; gap: .9rem; }
.role { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }
.role time { color: var(--purple); font-weight: 650; }
.role-period { color: var(--purple); font-weight: 650; }
.role h3 { margin-bottom: .15rem; font-size: 1.05rem; }
.role p { margin-bottom: 0; color: var(--muted); }

.castiel-page .nav-mark { width: 22px; height: 22px; flex-basis: 22px; }
.castiel-page .hero-portrait { width: 128px; height: 128px; }

html[data-theme="light"] body {
  --page: #f5f8fc;
  --panel: #ffffff;
  --line: #d8e3ef;
  --text: #132033;
  --muted: #53647a;
  --cyan: #087f94;
  --purple: #6746b5;
  --green: #167b61;
  --amber: #a95a0a;
  background: radial-gradient(ellipse at 85% 8%, rgb(64 126 210 / 11%), transparent 32rem), var(--page);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body .global-header {
  border-bottom-color: rgb(54 82 111 / 18%);
  background: rgb(245 248 252 / 94%);
}
html[data-theme="light"] body .nav-shockware-dark,
html[data-theme="light"] body .hero-shockware-dark,
html[data-theme="light"] body .hero-axiomorphic-dark { display: none; }
html[data-theme="light"] body .nav-shockware-light,
html[data-theme="light"] body .hero-logo.hero-shockware-light,
html[data-theme="light"] body .hero-logo.hero-axiomorphic-light { display: block; }
html[data-theme="light"] body .nav-mark:not(.nav-portrait) { border-radius: 50%; }
html[data-theme="light"] body .button {
  border-color: #c6d3e2;
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] body .button.primary {
  border-color: transparent;
  background: linear-gradient(105deg, #176f85, #624ac7);
  color: #ffffff;
}
html[data-theme="light"] body .button.icon-button { border-color: #a89acb; }
html[data-theme="light"] body .card {
  border-color: var(--line);
  background: linear-gradient(145deg, #ffffff, #f7faff);
}
html[data-theme="light"] body .role { border-color: var(--line); background: #ffffff; }
html[data-theme="light"] body .theme-toggle {
  border-color: #c6d3e2;
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] body .highlight {
  border-color: #c9c1e8;
  background: linear-gradient(140deg, #f0edfc, #ffffff);
}
html[data-theme="light"] body .callout {
  border-color: #b7d7d4;
  background: linear-gradient(110deg, #eaf7f5, #f5f3ff);
}
html[data-theme="light"] body .concept-flow li:first-child {
  border-color: #8bc6c8;
  background: #eaf8f7;
  color: #087f82;
}
html[data-theme="light"] body .concept-flow li:nth-child(2) {
  border-color: #b5a6dc;
  background: #f1eef9;
  color: #6746b5;
}
html[data-theme="light"] body .concept-flow li:nth-child(3) {
  border-color: #b5a6dc;
  background: linear-gradient(135deg, #f1eef9, #ffffff);
}
html[data-theme="light"] body .workflow li { border-color: #acd0da; background: #edf7fa; }
html[data-theme="light"] body .workflow li:nth-child(2) { border-color: #c7b9e5; background: #f2effa; }
html[data-theme="light"] body .workflow li:nth-child(3) { border-color: #b4c7d6; background: #eff4f8; }
html[data-theme="light"] body .workflow li:nth-child(4) { border-color: #e3c49f; background: #fbf4eb; }
html[data-theme="light"] body .workflow li:nth-child(5) { border-color: #a9d1c3; background: #edf7f2; }
html[data-theme="light"] body details[open] { background: #f5f8fc; }
html[data-theme="light"] body .service-card .service-more[open] { background: transparent; }
html[data-theme="light"] body .fail-loop { border-top-color: #d8b7a4; color: #734617; }
html[data-theme="light"] body .fail-loop strong { color: #9e3a2b; }
html[data-theme="light"] body .artifact-tree {
  border-color: #d8e3ef;
  background: #f1f4f8;
  color: #34465b;
}
html[data-theme="light"] body .artifact-list li::marker { color: var(--purple); }

@media (max-width: 820px) {
  .global-nav { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: .25rem; min-height: 56px; padding-block: .5rem; }
  .global-nav > nav { grid-row: 2; width: 100%; }
  .theme-toggle { position: static; grid-row: 1; justify-self: end; transform: none; }
}
@media (max-width: 760px) {
  .wrap { width: min(100% - 2rem, var(--width)); }
  .global-nav { display: flex; min-height: 56px; padding: .45rem 3.25rem .45rem 0; }
  .global-nav > nav { width: 100%; }
  .global-links { gap: .3rem 1rem; }
  .theme-toggle {
    position: fixed;
    z-index: 10;
    top: max(.75rem, env(safe-area-inset-top));
    right: max(.75rem, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    transform: none;
  }
  .theme-toggle__icon { left: 50%; transform: translateX(-50%); }
  .theme-toggle__label { display: none !important; }
  .hero { padding-top: .5rem; }
  .hero-brand { min-height: 6rem; }
  .grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glossary-terms { grid-template-columns: 1fr; }
  .workflow { grid-template-columns: 1fr; gap: 1.3rem; }
  .workflow li { padding-block: .75rem; }
  .workflow li:not(:last-child)::after { top: auto; left: 50%; bottom: -1.25rem; content: "↓"; transform: translateX(-50%); }
  .concept-flow { grid-template-columns: 1fr; gap: 1.4rem; }
  .concept-flow li { min-height: 6rem; }
  .concept-flow li:not(:last-child)::after { top: auto; left: 50%; bottom: -1.3rem; content: "↓"; font-size: 1.4rem; transform: translateX(-50%); }
  .definition { grid-template-columns: 1fr; }
  .definition article { padding: 1rem 0; }
  .definition article + article { padding: 1rem 0; border-top: 1px solid var(--line); border-left: 0; }
  .role { grid-template-columns: 1fr; gap: .25rem; }
  .callout { grid-template-columns: 1fr; }
  .section { padding-block: 3rem; }
}
@media (max-width: 480px) { .grid, .steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}