:root{
  color-scheme: dark light;

  --bg: #000;
  --bg2: #000;
  --text: #eef2f7;
  --muted: #9aa5b4;
  --faint: #697487;

  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.06);

  --card: rgba(255,255,255,.035);
  --card2: rgba(255,255,255,.05);

  --accent: #ffffff;
  --focus: rgba(255,255,255,.28);

  --shadow: 0 18px 60px rgba(0,0,0,.38);
  --shadow-button-hover: 0 10px 30px rgba(0,0,0,.24);
  --edge-ambient: rgba(142,64,48,.18);
  --edge-underlight: rgba(142,64,48,.08);

  --radius: 18px;
  --radius2: 28px;

  --max: 1120px;
  --pad: clamp(18px, 2.6vw, 30px);
  --gap: clamp(16px, 2.2vw, 26px);
  --air-hero-body: clamp(30px, 4.2vw, 52px);
  --air-section: clamp(42px, 5.8vw, 72px);
  --air-grid: clamp(18px, 2.2vw, 28px);
  --air-card-y: clamp(26px, 3vw, 32px);
  --air-card-x: clamp(24px, 3vw, 32px);
  --air-copy: 14px;
  --air-footer: clamp(64px, 9vh, 112px);
  --air-short-min: calc(100svh - 54px - 66px);
  --air-short-start: clamp(54px, 10vh, 112px);
  --air-short-end: clamp(64px, 12vh, 128px);

  --h1: clamp(48px, 8vw, 88px);
  --h2: clamp(34px, 4vw, 54px);
  --h3: clamp(20px, 2vw, 24px);
  --p: 17px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ck-live:       #49d17d;
  --ck-pending:    #ffc857;
  --ck-constraint: #e84040;
  --ck-rec-ring:   rgba(210,66,58,.82);
  --ck-rec-ring-hover: rgba(232,72,64,.92);
  --ck-rec-ring-active: rgba(224,68,60,.90);
  --ck-rec-led-active: rgba(232,72,64,.88);
  --ck-rec-glow: rgba(210,66,58,.18);
  --ck-restored:   #49d17d;
  --ck-system:     #6aa8ff;
  --ck-resolved-muted: #8aa892;
  --ck-inactive:   #6b6f76;
  --ck-parked:     #697487;

  --cockpit-amber: #C98A3E;
  --cockpit-amber-hover: #D89A4A;
  --route-arrow:       var(--cockpit-amber);
  --route-arrow-hover: var(--cockpit-amber-hover);
  --cockpit-light: rgba(255,200,87,.72);
  --cockpit-light-trace: rgba(255,200,87,.13);
  --cockpit-light-rim: rgba(255,216,142,.20);
  --cockpit-light-shadow: rgba(255,166,58,.09);
  --cockpit-dust: rgba(255,200,87,.18);
  --cockpit-dust-soft: rgba(255,200,87,.07);
}

*{
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html{
  min-height: 100%;
  scroll-behavior: smooth;
  overflow-y: scroll;
  scrollbar-gutter: auto;
  background: var(--bg);
}

html.void-mode{
  overflow: hidden;
  scrollbar-gutter: auto;
  background: #000;
}

html:has(#about),
html:has(#signals){
  overflow-y: auto;
}

html:has(#contract-route){
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html:has(#contract-route)::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

html,
body{
  min-height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body{
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: var(--sans);
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}

body:not(.void-mode)::before,
body:not(.void-mode)::after{
  content: "";
  position: fixed;
  inset: -120vh -120vw;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
}

body:not(.void-mode)::before{
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.012) 0px,
      rgba(255,255,255,.012) 1px,
      transparent 1px,
      transparent 28px
    );
  opacity: .22;
  animation: bodyDriftA 34s linear infinite;
}

body:not(.void-mode)::after{
  background:
    repeating-linear-gradient(
      -8deg,
      rgba(255,255,255,.006) 0px,
      rgba(255,255,255,.006) 1px,
      transparent 1px,
      transparent 42px
    );
  opacity: .14;
  animation: bodyDriftB 48s linear infinite;
}

body:not(.void-mode)::before,
body:not(.void-mode)::after{
  content: none;
}

@keyframes bodyDriftA{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(220px,220px,0); }
}

@keyframes bodyDriftB{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-140px,34px,0); }
}

a{
  color: inherit;
  text-decoration: none;
}

a:hover{
  opacity: .96;
}

img,
video{
  display: block;
  max-width: 100%;
}

button,
a,
.card{
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

button:focus,
a:focus,
.card:focus{
  outline: none;
}

.container{
  position: relative;
  z-index: 1;
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 0 var(--pad);
}

main{
  position: relative;
  z-index: 1;
  min-height: 0;
}

section{
  position: relative;
  padding: var(--air-section) 0;
  scroll-margin-top: 110px;
}

footer{
  position: relative;
  z-index: 1;
  margin-top: var(--air-footer);
  box-shadow: 0 -1px 0 var(--edge-ambient);
}

body.void-mode{
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: clip;
}

body.void-mode::before,
body.void-mode::after{
  display: none;
}

body.void-mode .top{
  position: relative;
  top: auto;
  z-index: 20;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border-bottom: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.78);
}

body.void-mode main{
  min-height: 0;
}

body.void-mode footer{
  position: relative;
  z-index: 20;
  margin-top: 0;
  border-top: 0;
  background: transparent;
  text-shadow: 0 1px 12px rgba(0,0,0,.78);
}

body.void-mode .top .container,
body.void-mode footer .container{
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 0 var(--pad);
}

.top{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  box-shadow: 0 1px 0 var(--edge-ambient);
}

.top-inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 54px;
}

.top .container,
footer .container,
body.void-mode .top .container,
body.void-mode footer .container{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(14px, 1.8vw, 24px);
}

.brand{
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  font-weight: 650;
  letter-spacing: .25px;
}

.brand a{
  display: inline-flex;
  align-items: center;
}

.brand-mark{
  position: relative;
  isolation: isolate;
  width: 22.32px;
  height: 22.32px;
  opacity: .92;
  --swinobear-dust-opacity: .26;
  --swinobear-edge-opacity: .11;
  --swinobear-shadow: drop-shadow(.7px 1.2px 1.6px var(--cockpit-light-shadow));
}

.brand-mark:hover,
.brand-mark:focus-visible{
  opacity: .92;
  --swinobear-dust-opacity: .29;
  --swinobear-edge-opacity: .124;
}

.brand-mark::before,
.brand-mark::after{
  content: "";
  position: absolute;
  inset: -4px -5px -3px -2px;
  z-index: -1;
  pointer-events: none;
  opacity: var(--swinobear-dust-opacity);
}

.brand-mark::before{
  background:
    radial-gradient(ellipse at 22% 20%, color-mix(in oklab, var(--cockpit-dust) 86%, transparent) 0 6%, transparent 22%),
    linear-gradient(132deg, transparent 0 36%, var(--cockpit-dust-soft) 50%, transparent 67%);
  filter: blur(1.5px);
}

.brand-mark::after{
  inset: -2px -4px -2px -1px;
  background: linear-gradient(142deg, color-mix(in oklab, var(--cockpit-light-trace) 70%, transparent) 0 22%, transparent 52%);
  filter: blur(.8px);
  opacity: var(--swinobear-edge-opacity);
}

.brand-mark img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--swinobear-shadow);
}

.theme-cycle{
  display: none;
  position: absolute;
  top: 50%;
  left: 28px;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cockpit-light);
  font: 650 10px/1 var(--mono);
  letter-spacing: 0;
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
}

html.theme-js .theme-cycle{
  display: grid;
  place-items: center;
}

.theme-cycle::before{
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--cockpit-light-trace) 42%, transparent);
  box-shadow:
    0 0 0 .5px color-mix(in oklab, var(--cockpit-amber) 42%, transparent),
    0 1px 3px color-mix(in oklab, var(--cockpit-light-shadow) 70%, transparent);
  opacity: .44;
}

.theme-cycle:hover::before,
.theme-cycle:focus-visible::before{
  opacity: .58;
}

.theme-cycle:focus-visible{
  outline: 1px solid color-mix(in oklab, var(--cockpit-amber) 70%, transparent);
  outline-offset: -10px;
}

.theme-glyph{
  display: none;
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
}

html[data-theme-choice="system"] .theme-glyph-system,
html[data-theme-choice="light"] .theme-glyph-light,
html[data-theme-choice="dark"] .theme-glyph-dark{
  display: grid;
}

.theme-glyph-system{
  color: var(--dark-headline-limestone, #F2ECDF);
  text-shadow: 0 0 5px color-mix(in oklab, var(--cockpit-amber) 22%, transparent);
}

.theme-glyph-light::before,
.theme-glyph-dark::before{
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.theme-glyph-light::before{
  background: #39362F;
}

.theme-glyph-dark::before{
  background: #E2D8C9;
}

html[data-theme="light"] .theme-glyph-system{
  color: var(--text);
  text-shadow: 0 0 4px color-mix(in oklab, var(--cockpit-amber) 16%, transparent);
}

@media (max-width: 680px){
  .brand-mark{
    width: 20.46px;
    height: 20.46px;
  }

  .theme-cycle{
    left: 24px;
  }
}

.nav{
  position: absolute;
  top: 50%;
  right: 0;
  width: max-content;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.nav a{
  position: relative;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--cockpit-light-rim) 10%, transparent) 0 26%, transparent 70%),
    linear-gradient(155deg, transparent 0 64%, color-mix(in oklab, var(--cockpit-light-trace) 18%, transparent) 100%);
  box-shadow:
    inset 0 1.5px 5px color-mix(in oklab, var(--cockpit-light-rim) 14%, transparent),
    inset 0 -2px 6px color-mix(in oklab, var(--cockpit-light-shadow) 20%, transparent),
    0 2px 6px color-mix(in oklab, var(--cockpit-light-shadow) 24%, transparent),
    0 0 8px color-mix(in oklab, var(--cockpit-light) 8%, transparent);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.nav a:hover{
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--cockpit-light-rim) 14%, transparent) 0 28%, transparent 70%),
    linear-gradient(155deg, color-mix(in oklab, var(--card) 18%, transparent) 0 100%),
    linear-gradient(155deg, transparent 0 58%, color-mix(in oklab, var(--cockpit-light-trace) 42%, transparent) 100%);
  color: var(--text);
  box-shadow:
    inset 0 1.5px 5px color-mix(in oklab, var(--cockpit-light-rim) 18%, transparent),
    inset 0 -2px 6px color-mix(in oklab, var(--cockpit-light-shadow) 24%, transparent),
    0 2px 7px color-mix(in oklab, var(--cockpit-light-shadow) 30%, transparent),
    0 0 9px color-mix(in oklab, var(--cockpit-light) 10%, transparent);
  transform: translateY(-1px);
}

.nav a:not(.is-active):not([aria-current="page"]):not(.nav-rec){
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--cockpit-light-rim) 10%, transparent) 0 26%, transparent 70%),
    linear-gradient(155deg, color-mix(in oklab, var(--card) 42%, transparent) 0 100%),
    linear-gradient(155deg, transparent 0 64%, color-mix(in oklab, var(--cockpit-light-trace) 18%, transparent) 100%);
  box-shadow:
    inset 0 2px 6px color-mix(in oklab, var(--cockpit-light-rim) 14%, transparent),
    inset 0 -2.5px 7.5px color-mix(in oklab, var(--cockpit-light-shadow) 20%, transparent),
    0 2.5px 7px color-mix(in oklab, var(--cockpit-light-shadow) 24%, transparent),
    0 0 10px color-mix(in oklab, var(--cockpit-light) 8%, transparent);
}

.nav a:not(.is-active):not([aria-current="page"]):not(.nav-rec):hover,
.nav a:not(.is-active):not([aria-current="page"]):not(.nav-rec):focus-visible{
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--cockpit-light-rim) 14%, transparent) 0 28%, transparent 70%),
    linear-gradient(155deg, color-mix(in oklab, var(--card) 48%, transparent) 0 100%),
    linear-gradient(155deg, transparent 0 58%, color-mix(in oklab, var(--cockpit-light-trace) 42%, transparent) 100%);
  box-shadow:
    inset 0 1.5px 5px color-mix(in oklab, var(--cockpit-light-rim) 18%, transparent),
    inset 0 -2px 6px color-mix(in oklab, var(--cockpit-light-shadow) 24%, transparent),
    0 2px 7px color-mix(in oklab, var(--cockpit-light-shadow) 30%, transparent),
    0 0 9px color-mix(in oklab, var(--cockpit-light) 10%, transparent);
}

.nav a.nav-gt:not(.is-active):not([aria-current="page"]){
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--cockpit-light-rim) 10%, transparent) 0 26%, transparent 70%),
    linear-gradient(155deg, color-mix(in oklab, var(--card) 42%, transparent) 0 100%),
    linear-gradient(155deg, transparent 0 68%, color-mix(in oklab, var(--cockpit-light-trace) 18%, transparent) 100%);
  box-shadow:
    inset 0 2px 6px color-mix(in oklab, var(--cockpit-light-rim) 14%, transparent),
    inset 0 -2.5px 7.5px color-mix(in oklab, var(--cockpit-light-shadow) 20%, transparent),
    0 2.5px 7px color-mix(in oklab, var(--cockpit-light-shadow) 24%, transparent),
    0 0 10px color-mix(in oklab, var(--cockpit-light) 8%, transparent);
}

.nav a.nav-gt:hover,
.nav a.nav-gt:focus-visible{
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--cockpit-light-rim) 14%, transparent) 0 28%, transparent 70%),
    linear-gradient(155deg, color-mix(in oklab, var(--card) 48%, transparent) 0 100%),
    radial-gradient(ellipse at 28% 18%, color-mix(in oklab, var(--cockpit-light) 6%, transparent) 0 22%, transparent 58%),
    linear-gradient(155deg, transparent 0 58%, color-mix(in oklab, var(--cockpit-light-trace) 42%, transparent) 100%);
  box-shadow:
    inset 0 1.5px 5px color-mix(in oklab, var(--cockpit-light-rim) 18%, transparent),
    inset 0 -2px 6px color-mix(in oklab, var(--cockpit-light-shadow) 24%, transparent),
    0 2px 7px color-mix(in oklab, var(--cockpit-light-shadow) 30%, transparent),
    0 0 9px color-mix(in oklab, var(--cockpit-light) 10%, transparent);
}

.nav a:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.nav a.nav-rec{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  line-height: 1;
  background:
    radial-gradient(circle at 50% 54%, rgba(0,0,0,.18) 0 34%, transparent 60%),
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--card) 58%, transparent) 0 61%, transparent 63%);
  box-shadow: none;
}

.nav a.nav-rec::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border: 1px solid var(--ck-rec-ring);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  box-shadow:
    inset 0 0 0 .5px color-mix(in oklab, var(--ck-rec-ring) 54%, transparent),
    inset 1px 1px 1px rgba(255,255,255,.08),
    0 1px 2px rgba(0,0,0,.22);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.nav a.is-active{
  color: var(--text);
  opacity: 1;
}

.nav a.is-active:not(.nav-rec),
.nav a[aria-current="page"]:not(.nav-rec){
  background:
    linear-gradient(155deg, color-mix(in oklab, var(--card) 70%, transparent) 0 100%),
    radial-gradient(ellipse at 26% 18%, color-mix(in oklab, var(--cockpit-amber) 12%, transparent) 0 28%, transparent 66%),
    linear-gradient(155deg, transparent 0 48%, color-mix(in oklab, var(--cockpit-amber) 12%, transparent) 100%);
  box-shadow:
    inset 0 0 0 .6px color-mix(in oklab, var(--cockpit-amber) 22%, transparent),
    inset 1px 1px 0 color-mix(in oklab, var(--cockpit-amber) 12%, transparent),
    inset 0 -1px 0 color-mix(in oklab, var(--cockpit-amber) 24%, transparent),
    0 4px 11px color-mix(in oklab, var(--cockpit-amber) 8%, transparent);
  transform: none;
}

.nav a.nav-gt.is-active,
.nav a.nav-gt[aria-current="page"]{
  background:
    linear-gradient(155deg, color-mix(in oklab, var(--card) 70%, transparent) 0 100%),
    radial-gradient(ellipse at 28% 18%, color-mix(in oklab, var(--cockpit-amber) 12%, transparent) 0 26%, transparent 62%),
    linear-gradient(155deg, transparent 0 48%, color-mix(in oklab, var(--cockpit-amber) 12%, transparent) 100%);
  box-shadow:
    inset 0 0 0 .6px color-mix(in oklab, var(--cockpit-amber) 22%, transparent),
    inset 1px 1px 0 color-mix(in oklab, var(--cockpit-amber) 12%, transparent),
    inset 0 -1px 0 color-mix(in oklab, var(--cockpit-amber) 24%, transparent),
    0 4px 11px color-mix(in oklab, var(--cockpit-amber) 8%, transparent);
}

.nav a.is-active:hover,
.nav a.is-active:focus-visible{
  transform: none;
}

.nav a.nav-rec.is-active{
  background:
    radial-gradient(circle at 50% 54%, rgba(0,0,0,.20) 0 34%, transparent 60%),
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--card) 64%, transparent) 0 61%, transparent 63%);
  color: transparent;
  box-shadow:
    inset 0 0 0 .5px color-mix(in oklab, var(--ck-rec-ring-active) 16%, transparent),
    0 3px 9px color-mix(in oklab, var(--ck-rec-glow) 28%, transparent);
}

.nav a.nav-rec.is-active::before,
.nav a.nav-rec[aria-current="page"]::before{
  width: 12px;
  height: 12px;
  border-color: var(--ck-rec-ring-active);
  border-width: 1.25px;
  background: color-mix(in oklab, var(--bg) 68%, transparent);
  box-shadow:
    inset 0 0 0 .5px color-mix(in oklab, var(--ck-rec-ring-active) 58%, transparent),
    inset 1px 1px 1px rgba(255,255,255,.10),
    0 1px 2px rgba(0,0,0,.24),
    0 0 5px color-mix(in oklab, var(--ck-rec-glow) 42%, transparent);
}

.nav a.nav-rec.is-active::after,
.nav a.nav-rec[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 48% 52%, var(--ck-rec-led-active) 0 64%, color-mix(in oklab, var(--ck-rec-led-active) 64%, black) 100%);
  box-shadow:
    inset 0 0 0 .5px color-mix(in oklab, var(--ck-rec-led-active) 68%, black),
    0 0 5px color-mix(in oklab, var(--ck-rec-glow) 70%, transparent);
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.nav a.nav-rec:hover::before,
.nav a.nav-rec:focus-visible::before{
  width: 12px;
  height: 12px;
  border-color: var(--ck-rec-ring-hover);
  border-width: 1.25px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  box-shadow:
    inset 0 0 0 .5px color-mix(in oklab, var(--ck-rec-ring-hover) 54%, transparent),
    inset 1px 1px 1px rgba(255,255,255,.08),
    0 1px 2px rgba(0,0,0,.22),
    0 0 4px color-mix(in oklab, var(--ck-rec-glow) 34%, transparent);
}

.cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  user-select: none;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.btn:hover{
  background: color-mix(in oklab, var(--card2) 88%, transparent);
  border-color: color-mix(in oklab, var(--line) 70%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-button-hover);
}

.btn.primary{
  background: color-mix(in oklab, var(--accent) 9%, transparent);
  border-color: color-mix(in oklab, var(--accent) 18%, transparent);
}

.btn:focus{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.hero .cta{
  margin-top: 26px;
}

.hero .btn{
  min-width: 0;
  padding: 14px 24px;
}

h1,
h2,
h3{
  margin: 0;
  line-height: 1.06;
  letter-spacing: -.03em;
}

h1{
  font-size: var(--h1);
}

h2{
  font-size: var(--h2);
}

h3{
  font-size: var(--h3);
}

p{
  margin: 0;
}

.sub{
  max-width: 30ch;
  margin: 0 0 18px;
  font-size: var(--p);
  color: var(--muted);
  line-height: 1.6;
}

.hero .sub{
  max-width: 38ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.68;
}

.muted{
  color: var(--muted);
  line-height: 1.65;
}

.meta,
.mono{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--faint);
  opacity: .55;
}

.sec-head{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.5vw, 14px);
  margin-bottom: clamp(20px, 3vw, 28px);
}

.sec-head h2{
  font-weight: 500;
  letter-spacing: -.02em;
}

.sec-head p{
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  text-align: left;
}

.read-page{
  --read-max: 640px;
  width: min(100%, calc(var(--read-max) + (var(--pad) * 2)));
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  flex-direction: column;
}

.read-rule{
  border-top: 1px solid rgba(255,255,255,.075);
}

.read-back{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0;
  color: var(--muted);
}

.read-back:hover,
.read-back:focus-visible{
  color: var(--text);
}

.read-back-top{
  align-self: flex-end;
}

.deep-back{
  color: var(--route-arrow) !important;
}

.deep-back:hover,
.deep-back:focus-visible{
  color: var(--route-arrow-hover) !important;
}

#tell-me-more{
  --read-max: 780px;
  padding-top: clamp(72px, 10vw, 120px);
}

.deep-back.read-back-top{
  display: flex;
  width: max-content;
  margin-left: auto;
}

#signals,
#cascades,
#flow,
#signal-corridors{
  max-width: 780px;
  margin-inline: auto;
}

main.container :is(#signals, #cascades, #flow, #signal-corridors){
  padding-top: clamp(72px, 10vw, 120px);
}

.nav a.nav-door{
  color: var(--route-arrow) !important;
}

.nav a.nav-door:hover,
.nav a.nav-door:focus-visible{
  color: var(--route-arrow-hover) !important;
}

.deep-back.read-back-bottom{
  display: flex;
  width: max-content;
  margin-right: auto;
  margin-top: 28px;
}

.read-back-bottom{
  align-self: flex-start;
  margin-top: 28px;
  margin-bottom: 0;
}

.grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--air-grid);
}

.span-12{ grid-column: span 12; }
.span-8{ grid-column: span 8; }
.span-4{ grid-column: span 4; }

.hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(64px, 8vw, 108px) 0 var(--air-hero-body);
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 28px
    );
  opacity: .22;
  animation: heroLineDrift 20s linear infinite;
}

@keyframes heroLineDrift{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 180px 180px, 84px 84px; }
}

.hero > *{
  position: relative;
  z-index: 1;
}

.hero-grid{
  display: grid;
  grid-template-columns: minmax(420px, 1fr) clamp(296px, 30vw, 338px);
  gap: clamp(26px, 3.2vw, 44px);
  align-items: start;
}

.hero-copy{
  min-width: 0;
  max-width: 560px;
  padding-right: clamp(0px, 1.2vw, 12px);
}

.badge{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 70%, transparent);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
}

.hero h1{
  max-width: none;
  margin: 18px 0 16px;
  font-size: clamp(38px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -.025em;
  font-weight: 600;
  text-wrap: balance;
  color: rgba(255,255,255,.9);
}

.hero-shell{
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 100%;
  min-height: 280px;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.008));
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

.hero-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 68% 32%, rgba(71,98,204,.040), transparent 30%),
    radial-gradient(circle at 34% 64%, rgba(86,102,166,.022), transparent 26%);
  opacity: .40;
}

.hero-shell::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.008), transparent 30%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.007) 0px,
      rgba(255,255,255,.007) 1px,
      transparent 1px,
      transparent 28px
    );
  opacity: .18;
}

.hero-shell-inner{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 26px 18px;
}

body:has(#contract-route){
  overflow-x: hidden;
  overflow-y: auto;
  background: #000;
}

body:has(#contract-route) .top{
  border-bottom: 0;
  box-shadow:
    0 18px 34px rgba(0,0,0,.24),
    0 5px 14px rgba(0,0,0,.18),
    inset 0 -10px 18px rgba(0,0,0,.10);
}

body:has(#contract-route) footer{
  border-top: 0;
  box-shadow: 0 -10px 24px rgba(0,0,0,.14);
}

.structure-bg,
.structure-bg-overlay,
.structure-fallback{
  display: none;
}

body:has(#contract-route) .structure-fallback{
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100svh;
  background: #000 url('/assets/structure/structure_portal_fallback.webp') center / cover no-repeat;
  transform: scale(1.18);
  transform-origin: center;
  pointer-events: none;
}

body:has(#contract-route) .structure-bg{
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100svh;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.18);
  transform-origin: center;
  pointer-events: none;
  background: #000;
}

body:has(#contract-route) .structure-bg-overlay{
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,0) 16%,
      rgba(0,0,0,0) 84%,
      rgba(0,0,0,.82) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,0) 82%,
      rgba(0,0,0,.82) 100%
    ),
    rgba(0,0,0,.62);
  pointer-events: none;
}

body:has(#contract-route) .structure-bg,
body:has(#contract-route) .structure-bg-overlay,
body:has(#contract-route) .structure-stage,
body:has(#contract-route) .structure-inner{
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}

body:has(#contract-route) .structure-bg::before,
body:has(#contract-route) .structure-bg::after,
body:has(#contract-route) .structure-bg-overlay::before,
body:has(#contract-route) .structure-bg-overlay::after,
body:has(#contract-route) .structure-stage::before,
body:has(#contract-route) .structure-stage::after,
body:has(#contract-route) .structure-inner::before,
body:has(#contract-route) .structure-inner::after{
  content: none;
}

body:has(#contract-route) .structure-stage{
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: calc(100svh - 54px - 66px);
  display: flex;
  align-items: center;
}

body:has(#contract-route) .structure-inner{
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
  width: 100%;
  padding:
    clamp(48px, 8vh, 96px)
    clamp(24px, 4vw, 64px)
    clamp(48px, 8vh, 96px)
    clamp(24px, 4vw, 64px);
}

body:has(#contract-route) .hero{
  position: static;
  align-self: flex-start;
  width: auto;
  max-width: 520px;
  padding: 0;
  overflow: visible;
  margin-left: clamp(0px, 4vw, 80px);
}

body:has(#contract-route) .hero h1{
  max-width: 14ch;
  margin: 0 0 14px;
  font-size: clamp(36px, 5vw, 64px);
}

body:has(#contract-route) .hero .sub{
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.68;
}

body:has(#contract-route) .structure-card{
  position: static;
  align-self: center;
  width: min(540px, 100%);
  padding: 28px 30px;
  text-align: left;
}

body:has(#contract-route) .structure-card p{
  font-size: var(--p);
  line-height: 1.7;
}

body:has(#contract-route) .structure-card p + p{
  margin-top: 14px;
}

body:has(#contract-route) .structure-case{
  position: static;
  align-self: flex-end;
  width: auto;
  max-width: 400px;
  text-align: right;
  margin-right: clamp(0px, 4vw, 80px);
}

body:has(#contract-route) .structure-case section{
  padding: 0;
}

body:has(#contract-route) #contract-route{
  padding: 0;
  margin-top: 10px;
  text-align: right;
}

body:has(#contract-route) #contract-route p{
  max-width: 100%;
}

body:has(#contract-route) footer{
  position: relative;
  z-index: 1;
  margin-top: 0;
  background: transparent;
}

@media (max-width: 680px){
  html:has(#contract-route){
    overflow: hidden;
  }

  body:has(#contract-route){
    min-height: 100svh;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: clip;
  }

  body:has(#contract-route) .structure-stage{
    min-height: 0;
    height: 100%;
    overflow: visible;
  }

  body:has(#contract-route) .structure-inner{
    gap: clamp(18px, 3vh, 28px);
    padding:
      clamp(18px, 3vh, 28px)
      clamp(18px, 5vw, 24px);
  }

  body:has(#contract-route) .structure-case{
    width: min(100%, 400px);
    margin-right: 0;
  }

  body:has(#contract-route) footer{
    z-index: 20;
    border-top: 0;
    text-shadow: 0 1px 12px rgba(0,0,0,.78);
  }
}

.card{
  position: relative;
  padding: var(--air-card-y) var(--air-card-x);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.016));
  box-shadow: none;
  overflow: hidden;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(520px 220px at 0% 0%, rgba(255,255,255,.038), transparent 62%);
  pointer-events: none;
}

.card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    inset 0 0 0 1px rgba(255,255,255,.018);
  pointer-events: none;
}

#parking .card{
  background: rgba(255,255,255,.012);
  border-color: rgba(255,255,255,.065);
}

#parking .card::before,
#parking .card::after{
  content: none;
}

#parking .card h3{
  margin-top: 12px;
}

.card-link{
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-link:hover,
.card-link:focus-visible{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.036), rgba(255,255,255,.018));
}

.card:not(.structure-card){
  border-color: color-mix(in oklab, var(--edge-ambient) 48%, rgba(255,255,255,.08));
}

.card:not(.structure-card)::before{
  content: "";
  inset: auto 18px 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--edge-ambient), transparent);
  opacity: .72;
}

.card:not(.structure-card)::after{
  content: "";
  inset: auto 20px 0;
  height: 1px;
  border-radius: 999px;
  box-shadow: 0 -5px 14px var(--edge-underlight);
}

#parking .card{
  border-color: color-mix(in oklab, var(--edge-ambient) 58%, rgba(255,255,255,.065));
}

#parking .card::before{
  content: "";
  inset: auto 16px 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--edge-ambient), transparent);
  opacity: .78;
}

#parking .card::after{
  content: "";
  inset: auto 18px 0;
  height: 1px;
  border-radius: 999px;
  box-shadow: 0 -6px 16px var(--edge-underlight);
}

.card h3{
  margin: 4px 0 14px;
  font-size: 16px;
  letter-spacing: -.02em;
}

.card p{
  margin: 0;
  line-height: 1.7;
}

.card p + p{
  margin-top: var(--air-copy);
}

#method .grid{
  align-items: start;
}

#method .card{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 110px;
}

.method-statement h3{
  margin: 8px 0 10px;
}

#contract-route span{
  color: var(--muted);
}

#contract-route a.internal-route-arrow{
  display: inline-block;
  margin-left: 5px;
  padding: 4px 6px;
  color: var(--route-arrow);
  line-height: 1;
  text-decoration: none;
}

#contract-route a.internal-route-arrow:hover,
#contract-route a.internal-route-arrow:focus-visible{
  color: var(--route-arrow-hover);
}

.micro-route{
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  color: var(--faint);
}

.micro-route a.internal-route-arrow{
  display: inline-block;
  margin-left: 4px;
  padding: 3px 5px;
  color: var(--route-arrow);
  line-height: 1;
  text-decoration: none;
}

.micro-route a.internal-route-arrow:hover,
.micro-route a.internal-route-arrow:focus-visible{
  color: var(--route-arrow-hover);
}

#about{
  width: min(100%, 640px);
  margin-inline: auto;
  padding-top: clamp(12px, 3vw, 40px);
  padding-bottom: clamp(34px, 5vw, 56px);
  text-align: left;
}

.about-copy{
  width: 100%;
  padding: clamp(22px, 3vw, 32px) 0;
  border-top: 1px solid rgba(255,255,255,.075);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.about-copy p{
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.55;
  color: rgba(255,255,255,.86);
}

.about-copy p + p{
  margin-top: 18px;
}

#trigger .card{
  min-height: 160px;
}

#trigger .grid{
  grid-template-columns: minmax(0, 1fr) clamp(264px, 29vw, 320px);
  align-items: start;
  gap: clamp(18px, 2.2vw, 26px);
}

#trigger .span-8,
#trigger .span-4{
  grid-column: auto;
}

.case-page{
  padding-block: clamp(42px, 7vw, 86px) clamp(40px, 6vw, 72px);
}

.case-hero{
  padding: 0 0 var(--air-hero-body);
}

.case-hero h1{
  max-width: 13ch;
  margin: 14px 0 16px;
  font-size: 60px;
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
  color: rgba(255,255,255,.92);
}

.case-hero p{
  max-width: 44ch;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.case-section{
  padding: clamp(26px, 4vw, 38px) 0;
}

.case-section h2{
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--faint);
  text-transform: uppercase;
}

.case-narrative p,
.case-note p{
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.72;
}

.case-narrative p + p,
.case-note p + p{
  margin-top: var(--air-copy);
}

.phase-list{
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.055);
}

.phase-list li{
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  line-height: 1.55;
}

.phase-list span:first-child{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--muted);
}

.phase-list span:last-child{
  color: rgba(255,255,255,.84);
}

.phase-result{
  margin-top: clamp(28px, 5vw, 44px);
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.72;
}

.phase-result p{
  margin: 0;
}

.phase-result p + p{
  margin-top: 24px;
}

.diagnostic-list{
  margin: 0;
}

.diagnostic-list div{
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.055);
}

.diagnostic-list div:last-child{
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.diagnostic-list dt{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--muted);
}

.diagnostic-list dd{
  margin: 0;
  color: rgba(255,255,255,.84);
  line-height: 1.6;
}

.case-note{
  padding-bottom: 0;
}

.section-flow{
  position: relative;
  height: 150px;
  margin: 0;
  overflow: hidden;
}

.section-flow::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.022) 0px,
      rgba(255,255,255,.022) 1px,
      transparent 1px,
      transparent 28px
    );
  opacity: .18;
}

#flow{
  padding-top: clamp(72px, 10vw, 120px);
  padding-bottom: clamp(140px, 18vw, 220px);
}

#flow h2{
  color: rgba(255,255,255,.80);
}

#flow .sec-head{
  margin-bottom: 34px;
}

.flow-stream{
  position: relative;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  padding: 8px 36px;
}

.flow-stream::before,
.flow-stream::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.018);
  pointer-events: none;
}

.flow-stream::before{
  left: 0;
}

.flow-stream::after{
  right: 0;
}

.flow-line{
  margin: 0;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: rgba(255,255,255,.90);
}

.flow-line-final{
  color: rgba(255,255,255,.82);
}

.flow-sub{
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}

.flow-pause,
.flow-break{
  position: relative;
}

.flow-pause{
  height: 38px;
}

.flow-break{
  height: 72px;
}

.flow-pause::before,
.flow-break::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.018);
  pointer-events: none;
}

.flow-line-quiet{
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: rgba(255,255,255,.74);
}

.flow-line-final{
  margin-top: 34px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

@media (max-width: 860px){
  #flow .sec-head{
    margin-bottom: 26px;
  }

  .flow-stream{
    max-width: 100%;
    padding: 6px 20px;
  }

  .flow-line{
    font-size: clamp(22px, 7vw, 30px);
  }

  .flow-sub{
    font-size: 15px;
    line-height: 1.65;
  }

  .flow-pause{
    height: 26px;
  }

  .flow-break{
    height: 46px;
  }

  .flow-line-final{
    margin-top: 22px;
    font-size: clamp(28px, 8vw, 38px);
  }
}

.foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  color: var(--faint);
  font-size: 13px;
}

.foot-links{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.foot-links a{
  color: var(--faint);
  font-size: 13px;
}

.foot-links a:hover{
  color: var(--text);
}

main.container{
  position: relative;
}

.drift-field{
  display: none;
}

main.container > *{
  position: relative;
  z-index: 1;
}

.vx-diagram{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: var(--mono);
  line-height: 1;
  color: var(--text);
  text-align: center;
}

.vx-stage-1{
  margin-bottom: 18px;
  font-size: 30px;
  color: rgba(255,255,255,.24);
  animation: vxStageA 6.5s ease-in-out infinite;
}

.vx-stage-1 .vx-x-distorted{
  display: inline-block;
  transform: rotate(-10deg);
}

.vx-arrow{
  font-size: 18px;
  color: rgba(255,255,255,.28);
  animation: vxArrowPulse 2.8s ease-in-out infinite;
}

.vx-arrow-1{
  margin-bottom: 18px;
}

.vx-stage-2{
  margin-bottom: 18px;
  font-size: 34px;
  color: rgba(255,255,255,.88);
  transform: scaleX(1.06);
  animation: vxStageB 6.5s ease-in-out infinite;
}

.vx-arrow-2{
  margin-bottom: 16px;
  animation-delay: .18s;
}

.vx-stage-3{
  font-size: 44px;
  color: rgba(255,255,255,.86);
  transform: scaleX(1.12) translateY(-1px);
  animation: vxStageC 6.5s ease-in-out infinite;
}

@keyframes vxStageA{
  0%,100%{ opacity: .72; transform: translateY(0); }
  40%{ opacity: .92; transform: translateY(-1px); }
  60%{ opacity: .78; transform: translateY(1px); }
}

@keyframes vxStageB{
  0%,100%{ opacity: .92; transform: scaleX(1.06) translateY(0); }
  50%{ opacity: 1; transform: scaleX(1.08) translateY(-1px); }
}

@keyframes vxStageC{
  0%,100%{ opacity: .84; transform: scaleX(1.12) translateY(-1px); }
  50%{ opacity: 1; transform: scaleX(1.14) translateY(-2px); }
}

@keyframes vxArrowPulse{
  0%,100%{ opacity: .38; transform: translateY(0); }
  50%{ opacity: .78; transform: translateY(2px); }
}

.case-toggle{
  margin-top: 18px;
  scroll-margin-top: 92px;
}

.case-toggle summary{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 0 22px;
  list-style: none;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.015));
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease;
  overflow: hidden;
}

.case-toggle summary::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(640px 180px at 0% 0%, rgba(255,255,255,.03), transparent 62%);
  pointer-events: none;
}

.case-toggle summary::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.016),
    inset 0 1px 0 rgba(255,255,255,.02);
  pointer-events: none;
}

.case-toggle summary:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.13);
}

.case-toggle summary{
  border-color: color-mix(in oklab, var(--edge-ambient) 42%, rgba(255,255,255,.10));
}

.case-toggle summary::before{
  inset: auto 18px 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--edge-ambient), transparent);
  opacity: .54;
}

.case-toggle summary::after{
  inset: auto 20px 0;
  height: 1px;
  border-radius: 999px;
  box-shadow: 0 -4px 12px var(--edge-underlight);
}

.case-toggle summary::-webkit-details-marker{
  display: none;
}

.case-title{
  position: relative;
  z-index: 1;
  font-weight: 600;
  color: var(--text);
}

.case-action{
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
}

.case-action-close{
  display: none;
}

.case-toggle[open] .case-action-open{
  display: none;
}

.case-toggle[open] .case-action-close{
  display: inline;
}

.case-toggle[open] summary{
  transform: translateY(-6px);
}

.case-body{
  position: relative;
  z-index: 1;
  margin-top: 8px;
}

#signals{
  padding-top: clamp(72px, 10vw, 120px);
  text-align: left;
}

#signals .sec-head{
  margin-bottom: 28px;
}

#signals .sec-head p{
  margin-top: 6px;
}

.radar-feed{
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.signal{
  max-width: 100%;
  padding-left: 18px;
  border-left: 2px solid rgba(255,255,255,.08);
}

.signal + .signal{
  margin-top: 34px;
}

.signal-tags{
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.signal-tags span{
  margin-right: 6px;
}

.signal h3{
  margin: 6px 0 14px;
  font-size: 16px;
  line-height: 1.35;
}

.signal-block{
  margin: 0 0 14px;
}

.signal-key{
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  opacity: .55;
  text-transform: lowercase;
}

.signal-value{
  max-width: 760px;
}

.signal-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
}

.signal-dot{
  --diode-color: var(--ck-inactive);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.34) 0 9%, transparent 31%),
    radial-gradient(circle at 48% 52%, var(--diode-color) 0 58%, color-mix(in oklab, var(--diode-color) 64%, black) 100%);
  box-shadow:
    inset 0 0 0 .5px color-mix(in oklab, var(--diode-color) 66%, black),
    inset 1px 1px 1px rgba(255,255,255,.11),
    0 1px 2px rgba(0,0,0,.24),
    0 0 5px color-mix(in oklab, var(--diode-color) 18%, transparent);
}

.status-active .signal-dot{
  --diode-color: var(--ck-live);
}

.status-watch .signal-dot{
  --diode-color: var(--ck-pending);
}

.status-update .signal-dot{
  --diode-color: var(--ck-system);
}

.status-resolved .signal-dot{
  --diode-color: var(--ck-resolved-muted);
}

.status-false .signal-dot{
  --diode-color: var(--ck-inactive);
}

.operator-photo{
  display: block;
  width: 164px;
  height: auto;
  margin: 0 0 14px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

.operator-name{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 10px;
}

.ck-dot{
  --diode-color: var(--ck-live);
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.34) 0 9%, transparent 31%),
    radial-gradient(circle at 48% 52%, var(--diode-color) 0 58%, color-mix(in oklab, var(--diode-color) 64%, black) 100%) !important;
  box-shadow:
    inset 0 0 0 .5px color-mix(in oklab, var(--diode-color) 66%, black),
    inset 1px 1px 1px rgba(255,255,255,.11),
    0 1px 2px rgba(0,0,0,.24),
    0 0 6px color-mix(in oklab, var(--diode-color) 18%, transparent);
}

.signal-line{
  margin: 32px 0 40px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}

.signal-line::before{
  content: "●";
  margin-right: 8px;
  opacity: .5;
}

.system-note{
  margin: 90px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
  opacity: .7;
}

.final-static{
  margin-top: 24px;
  opacity: .9;
}

.final-static p + p{
  margin-top: 8px;
  opacity: .7;
}

.void-page{
  position: relative;
  min-height: 100%;
  min-height: calc(100svh - 74px - 66px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.void-page::before{
  content: none;
}

.void-fallback{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  background: #000 url('/assets/home/home_subskin_fallback.webp') center / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}

.void-bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.void-head{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  padding: clamp(28px, 4vw, 40px) 24px;
  text-align: center;
}

.void-head .meta{
  margin-bottom: 12px;
}

.void-head h1{
  margin: 0;
}

.void-sub{
  max-width: 24ch;
  margin: 14px auto 0;
  color: var(--muted);
}

.void-head .cta{
  justify-content: center;
}

.void-email{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .04em;
}

@media (max-width: 680px){
  .void-page{
    min-height: calc(100svh - 96px - 72px);
  }

  .void-head{
    padding: 24px 20px;
  }
}

.content-gap{
  height: var(--air-copy);
}

main:has(#about),
main:has(#nda),
main:has(#signals),
main.container:has(#logbook),
main.container:has(#op),
main.container:has(#privacy),
main.container:has(#impressum){
  min-height: var(--air-short-min);
  display: flex;
  align-items: stretch;
}

:is(#about, #nda, #signals, #logbook, #op, #privacy, #impressum){
  min-height: var(--air-short-min);
  padding-block: var(--air-short-start) var(--air-short-end);
}

:is(#about, #nda, #signals){
  justify-content: center;
}

:is(#logbook, #op, #privacy, #impressum){
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

body:has(:is(#about, #nda, #signals, #logbook, #op, #privacy, #impressum)) footer{
  margin-top: 0;
}

#about .case-hero h1{
  max-width: 12ch;
}

#tell-me-more .case-hero h1{
  max-width: min(100%, 18ch);
}

#logbook .sec-head,
#logbook .grid{
  width: min(100%, 760px);
  margin-inline: auto;
}

#logbook .grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#logbook .span-4{
  grid-column: auto;
}

#op .sec-head,
#op .grid{
  width: min(100%, 520px);
  margin-inline: auto;
}

#op .grid{
  grid-template-columns: 1fr;
  justify-items: stretch;
}

#op .span-4{
  grid-column: auto;
}

#op .card{
  width: 100%;
}

#privacy .sec-head,
#privacy .grid,
#impressum .sec-head,
#impressum .grid{
  width: min(100%, 720px);
  margin-inline: auto;
}

@media (max-width: 1100px){
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  .hero-copy{
    width: 100%;
    max-width: none;
    padding-right: 0;
  }

  .hero h1{
    max-width: 11ch;
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .hero-shell{
    justify-self: center;
    width: min(340px, 100%);
    min-height: 240px;
    margin-top: 0;
    transform: none;
  }
}

@media (max-width: 860px){
  :root{
    --air-section: 44px;
    --air-short-start: clamp(42px, 8vh, 72px);
    --air-short-end: clamp(52px, 9vh, 84px);
    --air-footer: clamp(52px, 8vh, 84px);
  }

  .hero{
    padding: 56px 0 64px;
  }

  .hero-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-copy{
    width: 100%;
    max-width: none;
  }

  .hero .sub{
    max-width: 22ch;
    font-size: 14px;
  }

  #trigger .grid{
    grid-template-columns: 1fr;
  }

  #trigger .span-8,
  #trigger .span-4,
  .span-8,
  .span-4,
  .span-12{
    grid-column: span 12;
  }

  .flow-lab{
    grid-template-columns: 1fr;
  }

  .flow-stage{
    min-height: auto;
  }

  section{
    padding: var(--air-section) 0;
  }

  main:has(#about),
  main:has(#nda),
  main:has(#signals),
  main.container:has(#logbook),
  main.container:has(#op),
  main.container:has(#privacy),
  main.container:has(#impressum){
    min-height: 0;
    display: block;
  }

  :is(#about, #nda, #signals, #logbook, #op, #privacy, #impressum){
    min-height: 0;
    justify-content: flex-start;
    padding-block: var(--air-short-start) var(--air-short-end);
  }

  body:has(:is(#about, #nda, #signals, #logbook, #op, #privacy, #impressum)) footer{
    margin-top: var(--air-footer);
  }

  #logbook .grid{
    grid-template-columns: 1fr;
  }

  #logbook .sec-head,
  #logbook .grid,
  #op .sec-head,
  #op .grid,
  #privacy .sec-head,
  #privacy .grid,
  #impressum .sec-head,
  #impressum .grid{
    width: 100%;
  }

  #about .case-hero h1{
    max-width: 11.5ch;
  }

  #tell-me-more .case-hero h1{
    max-width: 100%;
  }

  .sec-head{
    margin-bottom: 20px;
  }

  .sec-head p{
    max-width: 32ch;
    font-size: 13px;
  }

  .case-hero h1{
    max-width: 10ch;
    font-size: 42px;
  }

  .case-hero p{
    font-size: 16px;
  }

  .phase-list li,
  .diagnostic-list div{
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media (max-width: 680px){
  .top-inner{
    gap: 10px;
  }

  .nav{
    justify-content: flex-end;
    gap: 6px;
  }

  .hero{
    padding-top: 54px;
  }
}

@media (max-width: 360px){
  .top-inner{
    align-items: flex-start;
    min-height: auto;
    padding: 8px 0;
  }

  .nav{
    position: static;
    width: 100%;
    transform: none;
  }
}

@media (max-width: 640px){
  .hero-grid{
    gap: 28px;
  }

  .hero-shell{
    width: min(300px, 100%);
  }

  .vx-stage-2{
    font-size: 28px;
  }

  .vx-stage-3{
    font-size: 30px;
  }
}

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

  :root:not([data-theme="light"]){
    --dark-headline-limestone: #F2ECDF;
    --dark-body-limestone: #E2D8C9;
    --dark-muted-limestone: #B8AD9F;
  }

  html:not([data-theme="light"]) .hero h1,
  html:not([data-theme="light"]) .case-hero h1,
  html:not([data-theme="light"]) .void-head h1,
  html:not([data-theme="light"]) .sec-head h2,
  html:not([data-theme="light"]) #flow h2{
    color: var(--dark-headline-limestone);
  }

  html:not([data-theme="light"]) .sub,
  html:not([data-theme="light"]) .hero .sub,
  html:not([data-theme="light"]) .about-copy p,
  html:not([data-theme="light"]) .case-hero p,
  html:not([data-theme="light"]) .case-narrative p,
  html:not([data-theme="light"]) .case-note p,
  html:not([data-theme="light"]) .phase-list span:last-child,
  html:not([data-theme="light"]) .phase-result,
  html:not([data-theme="light"]) .diagnostic-list dd,
  html:not([data-theme="light"]) .flow-sub,
  html:not([data-theme="light"]) .void-sub,
  html:not([data-theme="light"]) .card:not(.structure-card) p,
  html:not([data-theme="light"]) .signal-value,
  html:not([data-theme="light"]) body:has(#contract-route) .insight-line,
  html:not([data-theme="light"]) body:has(#contract-route) #contract-route span{
    color: var(--dark-body-limestone);
  }

  html:not([data-theme="light"]) .muted,
  html:not([data-theme="light"]) .sec-head p,
  html:not([data-theme="light"]) .meta,
  html:not([data-theme="light"]) .mono,
  html:not([data-theme="light"]) .badge,
  html:not([data-theme="light"]) .case-section h2,
  html:not([data-theme="light"]) .phase-list span:first-child,
  html:not([data-theme="light"]) .diagnostic-list dt,
  html:not([data-theme="light"]) .signal-tags,
  html:not([data-theme="light"]) .signal-key,
  html:not([data-theme="light"]) .signal-line,
  html:not([data-theme="light"]) .system-note,
  html:not([data-theme="light"]) .foot,
  html:not([data-theme="light"]) .foot-links a,
  html:not([data-theme="light"]) .void-email,
  html:not([data-theme="light"]) .case-action{
    color: var(--dark-muted-limestone);
  }

  html:not([data-theme="light"]) .case-section h2[style]{
    color: var(--dark-muted-limestone) !important;
  }

  html:not([data-theme="light"]) .meta,
  html:not([data-theme="light"]) .mono,
  html:not([data-theme="light"]) .signal-key,
  html:not([data-theme="light"]) .system-note{
    opacity: 1;
  }

  html:not([data-theme="light"]) .nav a.is-active:not(.nav-rec),
  html:not([data-theme="light"]) .nav a[aria-current="page"]:not(.nav-rec){
    background:
      linear-gradient(155deg, color-mix(in oklab, var(--card) 54%, transparent) 0 100%),
      radial-gradient(ellipse at 26% 18%, color-mix(in oklab, var(--cockpit-amber) 7%, transparent) 0 24%, transparent 58%),
      linear-gradient(155deg, transparent 0 50%, color-mix(in oklab, var(--cockpit-amber) 8%, transparent) 100%);
    box-shadow:
      inset 0 0 0 .5px color-mix(in oklab, var(--cockpit-amber) 14%, transparent),
      inset 1px 1px 0 color-mix(in oklab, var(--cockpit-amber) 10%, transparent),
      inset 0 -1px 0 color-mix(in oklab, var(--cockpit-amber) 16%, transparent),
      0 2.5px 7px color-mix(in oklab, var(--cockpit-amber) 7%, transparent);
  }

  html:not([data-theme="light"]) .nav a.nav-gt.is-active,
  html:not([data-theme="light"]) .nav a.nav-gt[aria-current="page"]{
    background:
      linear-gradient(155deg, color-mix(in oklab, var(--card) 54%, transparent) 0 100%),
      radial-gradient(ellipse at 28% 18%, color-mix(in oklab, var(--cockpit-amber) 7%, transparent) 0 24%, transparent 58%),
      linear-gradient(155deg, transparent 0 50%, color-mix(in oklab, var(--cockpit-amber) 8%, transparent) 100%);
    box-shadow:
      inset 0 0 0 .5px color-mix(in oklab, var(--cockpit-amber) 14%, transparent),
      inset 1px 1px 0 color-mix(in oklab, var(--cockpit-amber) 10%, transparent),
      inset 0 -1px 0 color-mix(in oklab, var(--cockpit-amber) 16%, transparent),
      0 2.5px 7px color-mix(in oklab, var(--cockpit-amber) 7%, transparent);
  }

  :root[data-theme="light"]{
    --bg: #E0D6C2;
    --bg2: #ECE4D5;
    --text: #39362F;
    --muted: #5A5348;
    --faint: #625B4E;
    --line: rgba(0,0,0,.12);
    --line2: rgba(0,0,0,.07);
    --card: #ECE4D5;
    --card2: #E7DDC9;
    --accent: #39362F;
    --focus: rgba(0,0,0,.28);
    --shadow: 0 18px 60px rgba(60,40,30,.14);
    --shadow-button-hover: 0 10px 30px rgba(60,40,30,.14);
    --edge-ambient: rgba(78,116,114,.30);
    --edge-underlight: rgba(78,116,114,.12);
    --inner-warmth: rgba(142,64,48,.055);

    --ck-live: #1F7A46;
    --ck-restored: #1F7A46;
    --ck-pending: #8A5A00;
    --ck-constraint: #C42B2B;
    --ck-system: #2C6BAF;
    --ck-parked: #6E6656;
    --ck-rec-ring: #B23A32;
    --ck-rec-ring-hover: #9E332C;
    --ck-rec-ring-active: #A83229;
    --ck-rec-led-active: #B23A32;
    --ck-rec-glow: rgba(178,58,50,.18);
    --ck-resolved-muted: #58705D;
    --ck-inactive: #6E6656;
    --cockpit-amber: #805200;
    --cockpit-amber-hover: #6E4700;
    --route-arrow: var(--cockpit-amber);
    --route-arrow-hover: var(--cockpit-amber-hover);
    --cockpit-light: rgba(138,90,0,.62);
    --cockpit-light-trace: rgba(138,90,0,.075);
    --cockpit-light-rim: rgba(178,132,48,.16);
    --cockpit-light-shadow: rgba(138,90,0,.055);
    --cockpit-dust: rgba(138,90,0,.12);
    --cockpit-dust-soft: rgba(138,90,0,.045);
  }

  html[data-theme="light"].void-mode{
    background: var(--bg);
  }

  html[data-theme="light"] .void-bg,
  html[data-theme="light"] .void-fallback{
    display: none;
  }

  html[data-theme="light"] .brand-mark img{
    filter: brightness(0) var(--swinobear-shadow);
  }

  html[data-theme="light"] .brand-mark{
    --swinobear-dust-opacity: .18;
    --swinobear-edge-opacity: .068;
    --swinobear-shadow: drop-shadow(.6px 1px 1.5px var(--cockpit-light-shadow));
  }

  html[data-theme="light"] .brand-mark::before{
    filter: blur(1.7px);
  }

  html[data-theme="light"] .brand-mark::after{
    filter: blur(.9px);
  }

  html[data-theme="light"] .brand-mark:hover,
  html[data-theme="light"] .brand-mark:focus-visible{
    --swinobear-dust-opacity: .20;
    --swinobear-edge-opacity: .076;
  }

  html[data-theme="light"] .signal-dot,
  html[data-theme="light"] .ck-dot{
    box-shadow:
      inset 0 0 0 .5px color-mix(in oklab, var(--diode-color) 58%, black),
      inset 1px 1px 1px rgba(255,255,255,.24),
      0 1px 2px rgba(60,40,30,.12),
      0 0 4px color-mix(in oklab, var(--diode-color) 10%, transparent);
  }

  html[data-theme="light"] .hero h1,
  html[data-theme="light"] .case-hero h1,
  html[data-theme="light"] .flow-line,
  html[data-theme="light"] .vx-stage-2,
  html[data-theme="light"] .vx-stage-3{
    color: var(--text);
  }

  html[data-theme="light"] .about-copy p,
  html[data-theme="light"] .case-narrative p,
  html[data-theme="light"] .case-note p,
  html[data-theme="light"] .phase-list span:last-child,
  html[data-theme="light"] .phase-result,
  html[data-theme="light"] .diagnostic-list dd,
  html[data-theme="light"] #flow h2,
  html[data-theme="light"] .flow-line-final{
    color: var(--muted);
  }

  html[data-theme="light"] .flow-line-quiet{
    color: var(--faint);
  }

  html[data-theme="light"] .vx-stage-1,
  html[data-theme="light"] .vx-arrow{
    color: var(--faint);
  }

  html[data-theme="light"] .read-rule,
  html[data-theme="light"] .about-copy,
  html[data-theme="light"] .phase-list,
  html[data-theme="light"] .phase-list li,
  html[data-theme="light"] .diagnostic-list div,
  html[data-theme="light"] .diagnostic-list div:last-child,
  html[data-theme="light"] .signal{
    border-color: var(--line);
  }

  html[data-theme="light"] .top{
    box-shadow: 0 1px 0 var(--edge-ambient), inset 0 0 20px var(--inner-warmth);
  }

  html[data-theme="light"] body:has(#contract-route) .top{
    background: color-mix(in oklab, var(--bg) 85%, transparent);
    backdrop-filter: blur(10px);
    box-shadow:
      0 3px 14px color-mix(in oklab, var(--edge-ambient) 22%, transparent),
      0 6px 14px rgba(0,0,0,.12),
      inset 0 0 20px var(--inner-warmth),
      inset 0 12px 30px color-mix(in oklab, var(--edge-ambient) 20%, transparent),
      inset 0 -12px 30px color-mix(in oklab, var(--edge-ambient) 22%, transparent);
  }

  html[data-theme="light"] footer{
    box-shadow: 0 -1px 0 var(--edge-ambient), inset 0 0 20px var(--inner-warmth);
  }

  html[data-theme="light"] .card,
  html[data-theme="light"] .card-link:hover,
  html[data-theme="light"] .card-link:focus-visible,
  html[data-theme="light"] .case-toggle summary,
  html[data-theme="light"] #parking .card,
  html[data-theme="light"] .hero-shell,
  html[data-theme="light"] body:has(#contract-route) .structure-card{
    border-color: var(--line);
    background: var(--card);
  }

  html[data-theme="light"] .card:not(.structure-card),
  html[data-theme="light"] #parking .card{
    border-color: color-mix(in oklab, var(--edge-ambient) 56%, var(--line));
  }

  html[data-theme="light"] .card:not(.structure-card){
    box-shadow: inset 0 -10px 26px var(--inner-warmth);
  }

  html[data-theme="light"] .case-toggle summary{
    border-color: color-mix(in oklab, var(--edge-ambient) 42%, var(--line));
  }

  html[data-theme="light"] .hero-shell::before,
  html[data-theme="light"] .hero-shell::after,
  html[data-theme="light"] body:has(#contract-route) .structure-card::before,
  html[data-theme="light"] body:has(#contract-route) .structure-card::after{
    content: none;
  }

  html[data-theme="light"] .card-link:hover,
  html[data-theme="light"] .card-link:focus-visible,
  html[data-theme="light"] .case-toggle summary:hover{
    border-color: color-mix(in oklab, var(--edge-ambient) 48%, var(--line));
    background: var(--card2);
  }

  html[data-theme="light"] .card:not(.structure-card),
  html[data-theme="light"] .card-link:hover,
  html[data-theme="light"] .card-link:focus-visible,
  html[data-theme="light"] .case-toggle summary,
  html[data-theme="light"] .case-toggle summary:hover,
  html[data-theme="light"] #parking .card,
  html[data-theme="light"] .hero-shell{
    border-color: transparent;
  }

  html[data-theme="light"] .card:not(.structure-card):not(.card-link){
    box-shadow:
      0 4px 14px color-mix(in oklab, #3C281E 6%, transparent),
      inset 0 1px 0 rgba(255,252,246,.45),
      inset 0 -8px 20px color-mix(in oklab, var(--inner-warmth) 62%, transparent);
  }

  html[data-theme="light"] .card.card-link{
    box-shadow:
      0 6px 20px color-mix(in oklab, #3C281E 9%, transparent),
      inset 0 1px 0 rgba(255,252,246,.5),
      inset 0 -10px 26px var(--inner-warmth);
  }

  html[data-theme="light"] .case-toggle summary{
    box-shadow:
      0 3px 12px color-mix(in oklab, #3C281E 5%, transparent),
      inset 0 1px 0 rgba(255,252,246,.44),
      inset 0 -7px 18px color-mix(in oklab, var(--inner-warmth) 56%, transparent);
  }

  html[data-theme="light"] .card:not(.structure-card)::before,
  html[data-theme="light"] #parking .card::before{
    opacity: .35;
  }

  html[data-theme="light"] .case-toggle summary::before{
    opacity: .30;
  }

  html[data-theme="light"] .flow-stream::before,
  html[data-theme="light"] .flow-stream::after,
  html[data-theme="light"] .flow-pause::before,
  html[data-theme="light"] .flow-break::before{
    background: var(--line2);
  }

  html[data-theme="light"] body:has(#contract-route) .hero h1{
    color: rgba(255,255,255,.92);
  }

  html[data-theme="light"] body:has(#contract-route) .structure-card{
    border-color: transparent;
    box-shadow:
      0 8px 22px color-mix(in oklab, #3C281E 14%, transparent),
      inset 0 1px 0 rgba(255,252,246,.5),
      inset 0 -10px 26px var(--inner-warmth);
  }

  html[data-theme="light"] body:has(#contract-route) .hero .sub,
  html[data-theme="light"] body:has(#contract-route) .insight-line,
  html[data-theme="light"] body:has(#contract-route) #contract-route,
  html[data-theme="light"] body:has(#contract-route) #contract-route span,
  html[data-theme="light"] body:has(#contract-route) .foot,
  html[data-theme="light"] body:has(#contract-route) .foot-links a,
  html[data-theme="light"] body:has(#contract-route) .mono{
    color: rgba(255,255,255,.78);
  }

  html[data-theme="light"] body:has(#contract-route) #contract-route a.internal-route-arrow{
    --cockpit-amber: #C98A3E;
    color: var(--cockpit-amber);
  }

  html[data-theme="light"] body:has(#contract-route) #contract-route a.internal-route-arrow:hover,
  html[data-theme="light"] body:has(#contract-route) #contract-route a.internal-route-arrow:focus-visible{
    --cockpit-amber-hover: #D89A4A;
    color: var(--cockpit-amber-hover);
  }

  html[data-theme="light"] .nav a:not(.is-active):not([aria-current="page"]):not(.nav-rec){
    color: #4F463A;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255,247,230,.08) 0 26%, transparent 70%),
      linear-gradient(155deg, rgba(212,199,171,.22) 0 100%),
      linear-gradient(155deg, transparent 0 72%, rgba(138,90,0,.010) 100%);
    box-shadow:
      inset 0 2px 6px rgba(255,247,230,.10),
      inset 0 -2.5px 7.5px rgba(138,90,0,.018),
      0 2.5px 7px rgba(138,90,0,.020),
      0 0 10px rgba(138,90,0,.012);
    text-shadow:
      0 1px 1px rgba(255,247,230,.22),
      0 -1px 1px rgba(138,90,0,.08);
  }

  html[data-theme="light"] .nav a:hover{
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255,247,230,.12) 0 28%, transparent 70%),
      linear-gradient(155deg, rgba(236,228,213,.20) 0 100%),
      linear-gradient(155deg, transparent 0 58%, rgba(138,90,0,.024) 100%);
    box-shadow:
      inset 0 1.5px 5px rgba(255,247,230,.14),
      inset 0 -2px 6px rgba(138,90,0,.026),
      0 2px 7px rgba(138,90,0,.028),
      0 0 9px rgba(138,90,0,.018);
  }

  html[data-theme="light"] .nav a.nav-gt:not(.is-active):not([aria-current="page"]){
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255,247,230,.08) 0 26%, transparent 70%),
      linear-gradient(155deg, rgba(212,199,171,.22) 0 100%),
      linear-gradient(155deg, transparent 0 76%, rgba(138,90,0,.010) 100%);
    box-shadow:
      inset 0 2px 6px rgba(255,247,230,.10),
      inset 0 -2.5px 7.5px rgba(138,90,0,.018),
      0 2.5px 7px rgba(138,90,0,.020),
      0 0 10px rgba(138,90,0,.012);
  }

  html[data-theme="light"] .nav a.nav-gt:hover,
  html[data-theme="light"] .nav a.nav-gt:focus-visible{
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255,247,230,.12) 0 28%, transparent 70%),
      linear-gradient(155deg, rgba(214,202,177,.28) 0 100%),
      radial-gradient(ellipse at 28% 18%, rgba(138,90,0,.026) 0 24%, transparent 60%),
      linear-gradient(155deg, transparent 0 58%, rgba(138,90,0,.024) 100%);
    box-shadow:
      inset 0 1.5px 5px rgba(255,247,230,.14),
      inset 0 -2px 6px rgba(138,90,0,.026),
      0 2px 7px rgba(138,90,0,.028),
      0 0 9px rgba(138,90,0,.018);
  }

  html[data-theme="light"] .nav a.is-active:not(.nav-rec),
  html[data-theme="light"] .nav a[aria-current="page"]:not(.nav-rec),
  html[data-theme="light"] .nav a.nav-gt.is-active,
  html[data-theme="light"] .nav a.nav-gt[aria-current="page"]{
    background:
      linear-gradient(155deg, rgba(236,228,213,.92) 0 100%),
      radial-gradient(ellipse at 28% 18%, color-mix(in oklab, var(--cockpit-amber) 10%, transparent) 0 24%, transparent 58%),
      linear-gradient(155deg, transparent 0 48%, color-mix(in oklab, var(--cockpit-amber) 3.5%, transparent) 100%);
    box-shadow:
      inset 0 0 0 .45px color-mix(in oklab, var(--cockpit-amber) 16%, transparent),
      inset 1px 1px 0 rgba(255,247,230,.36),
      inset 0 -1px 0 color-mix(in oklab, var(--cockpit-amber) 14%, transparent),
      inset 0 8px 14px rgba(255,255,255,.10),
      0 3px 8px color-mix(in oklab, var(--cockpit-amber) 3.5%, transparent);
  }

  html[data-theme="light"] body.void-mode .top,
  html[data-theme="light"] body.void-mode footer,
  html[data-theme="light"] body:has(#contract-route) footer{
    text-shadow: none;
  }

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .34s;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation: none;
  }
}

html[data-theme="light"] .top,
html[data-theme="light"] body.void-mode .top,
html[data-theme="light"] body:has(#contract-route) .top{
  background:
    linear-gradient(180deg, rgba(62,122,120,.06) 0%, rgba(62,122,120,.16) 50%, rgba(62,122,120,.06) 100%),
    #F2F6F5;
  backdrop-filter: none;
  box-shadow: none;
}

html[data-theme="light"] footer,
html[data-theme="light"] body.void-mode footer,
html[data-theme="light"] body:has(#contract-route) footer{
  background:
    linear-gradient(180deg, rgba(131,110,66,.18) 0%, rgba(131,110,66,.30) 55%, rgba(131,110,66,.44) 100%),
    #E4D9C4;
  box-shadow: 0 -1px 0 rgba(131,110,66,.28);
}

html[data-theme="light"] .card::after{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -14px 18px -12px rgba(230,170,60,.30);
}

html[data-theme="light"]{
  background: linear-gradient(180deg, #EDF2F1 0, #EDF2F1 54px, var(--bg) 54px, var(--bg) 100%);
}