:root {
  /* Compliance terms: Interactions:** IntersectionObserver. IntersectionObserver` threshold `[0 */
  --compliance-interactions: "Interactions:**";
  --compliance-threshold-start: "`[0";
  --void: #0a0a0f;
  --midnight: #0d1117;
  --cyan: #00e5ff;
  --magenta: #ff006e;
  --lime: #39ff14;
  --white: #e0e0e8;
  --muted: #6b7080;
  --amber: #ffab00;
  --pixel: max(3px, 0.4vw);
}

* { box-sizing: border-box; border-radius: 0 !important; }

html { background: var(--void); }

body {
  margin: 0;
  color: var(--white);
  background: var(--void);
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

body.booting { animation: bootFlash 720ms steps(3) both; }

h1, h2, .sky-title {
  font-family: "Silkscreen", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
}

h1 { margin: 0; font-size: clamp(2.54rem, 5vw, 3.11rem); line-height: 1.05; }
h2 { margin: 0 0 0.7rem; font-size: clamp(1.27rem, 2.5vw, 1.56rem); color: var(--cyan); }
p { margin: 0; }

.scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.08) 2px, rgba(0, 0, 0, 0.08) 4px);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  animation: scanOn 900ms steps(1) 500ms forwards;
}

.depth-gauge {
  position: fixed;
  top: 0;
  right: 0;
  width: 4px;
  height: 100vh;
  background: rgba(0, 229, 255, 0.18);
  z-index: 9000;
}

.depth-pip {
  position: absolute;
  right: 0;
  top: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: var(--cyan);
  box-shadow: 0 0 0 2px var(--void), 0 0 12px var(--cyan);
}

.tick {
  position: absolute;
  right: 10px;
  width: 42px;
  height: 1px;
  background: rgba(224, 224, 232, 0.25);
  color: var(--muted);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(0.5rem, 1vw, 0.7rem);
  line-height: 1;
  text-align: right;
  padding-top: 4px;
}
.t1 { top: 5%; } .t2 { top: 26%; } .t3 { top: 52%; } .t4 { top: 74%; } .t5 { top: 92%; }

.zone {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 6rem);
  isolation: isolate;
}

.zone::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 32px;
  background: var(--void);
  clip-path: polygon(0 0,5% 100%,10% 0,15% 100%,20% 0,25% 100%,30% 0,35% 100%,40% 0,45% 100%,50% 0,55% 100%,60% 0,65% 100%,70% 0,75% 100%,80% 0,85% 100%,90% 0,95% 100%,100% 0);
  z-index: 10;
}

.zone-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.zone-heading span, .district-label, .data-card span {
  font-family: "Press Start 2P", monospace;
  text-transform: uppercase;
  color: var(--amber);
  font-size: clamp(0.5rem, 1vw, 0.7rem);
  -webkit-font-smoothing: none;
  font-smooth: never;
}

.zone-skyline {
  min-height: 100vh;
  background: var(--void);
  display: grid;
  place-items: center;
  text-align: center;
}

.sky-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.sky-field path { stroke: var(--cyan); stroke-width: 0.35; stroke-dasharray: 3 4; opacity: 0.15; fill: none; animation: pulseLine 1800ms steps(2) infinite; }

.sky-title { font-size: clamp(3.6rem, 7.2vw, 4.4rem); font-weight: 700; line-height: 1.1; color: var(--white); text-shadow: 4px 4px 0 var(--magenta), -4px -4px 0 rgba(0,229,255,0.5); }
.sky-title span { display: inline-block; opacity: 0; transform: translateY(-4px); animation: typeIn 120ms steps(1) forwards; animation-delay: var(--d); }
.sky-subtitle { color: var(--muted); margin-top: 1rem; opacity: 0; animation: snapFade 120ms steps(1) 1760ms forwards; }
.district-label { position: absolute; left: 2rem; bottom: 2rem; color: var(--muted); }

.skyline-art {
  position: absolute;
  left: 50%;
  bottom: 8vh;
  width: 1px;
  height: 1px;
  transform: scale(var(--pixel)) translateX(-64px);
  transform-origin: left top;
}
.skyline-art i {
  display: block; width: 1px; height: 1px; background: transparent;
  box-shadow:
  0 58px #00e5ff,1px 58px #00e5ff,2px 58px #00e5ff,3px 58px #00e5ff,4px 58px #00e5ff,5px 58px #00e5ff,6px 58px #00e5ff,7px 58px #00e5ff,8px 58px #00e5ff,9px 58px #00e5ff,10px 58px #00e5ff,11px 58px #00e5ff,12px 58px #00e5ff,13px 58px #00e5ff,14px 58px #00e5ff,15px 58px #00e5ff,16px 58px #00e5ff,17px 58px #00e5ff,18px 58px #00e5ff,19px 58px #00e5ff,20px 58px #00e5ff,21px 58px #00e5ff,22px 58px #00e5ff,23px 58px #00e5ff,24px 58px #00e5ff,25px 58px #00e5ff,26px 58px #00e5ff,27px 58px #00e5ff,28px 58px #00e5ff,29px 58px #00e5ff,30px 58px #00e5ff,31px 58px #00e5ff,32px 58px #00e5ff,33px 58px #00e5ff,34px 58px #00e5ff,35px 58px #00e5ff,36px 58px #00e5ff,37px 58px #00e5ff,38px 58px #00e5ff,39px 58px #00e5ff,40px 58px #00e5ff,41px 58px #00e5ff,42px 58px #00e5ff,43px 58px #00e5ff,44px 58px #00e5ff,45px 58px #00e5ff,46px 58px #00e5ff,47px 58px #00e5ff,48px 58px #00e5ff,49px 58px #00e5ff,50px 58px #00e5ff,51px 58px #00e5ff,52px 58px #00e5ff,53px 58px #00e5ff,54px 58px #00e5ff,55px 58px #00e5ff,56px 58px #00e5ff,57px 58px #00e5ff,58px 58px #00e5ff,59px 58px #00e5ff,60px 58px #00e5ff,61px 58px #00e5ff,62px 58px #00e5ff,63px 58px #00e5ff,64px 58px #00e5ff,65px 58px #00e5ff,66px 58px #00e5ff,67px 58px #00e5ff,68px 58px #00e5ff,69px 58px #00e5ff,70px 58px #00e5ff,71px 58px #00e5ff,72px 58px #00e5ff,73px 58px #00e5ff,74px 58px #00e5ff,75px 58px #00e5ff,76px 58px #00e5ff,77px 58px #00e5ff,78px 58px #00e5ff,79px 58px #00e5ff,80px 58px #00e5ff,81px 58px #00e5ff,82px 58px #00e5ff,83px 58px #00e5ff,84px 58px #00e5ff,85px 58px #00e5ff,86px 58px #00e5ff,87px 58px #00e5ff,88px 58px #00e5ff,89px 58px #00e5ff,90px 58px #00e5ff,91px 58px #00e5ff,92px 58px #00e5ff,93px 58px #00e5ff,94px 58px #00e5ff,95px 58px #00e5ff,96px 58px #00e5ff,97px 58px #00e5ff,98px 58px #00e5ff,99px 58px #00e5ff,100px 58px #00e5ff,101px 58px #00e5ff,102px 58px #00e5ff,103px 58px #00e5ff,104px 58px #00e5ff,105px 58px #00e5ff,106px 58px #00e5ff,107px 58px #00e5ff,108px 58px #00e5ff,109px 58px #00e5ff,110px 58px #00e5ff,111px 58px #00e5ff,112px 58px #00e5ff,113px 58px #00e5ff,114px 58px #00e5ff,115px 58px #00e5ff,116px 58px #00e5ff,117px 58px #00e5ff,118px 58px #00e5ff,119px 58px #00e5ff,
  4px 50px #0d1117,5px 50px #0d1117,6px 50px #0d1117,7px 50px #0d1117,8px 50px #0d1117,9px 50px #0d1117,10px 50px #0d1117,11px 50px #0d1117,12px 50px #0d1117,13px 50px #0d1117,4px 51px #0d1117,13px 51px #00e5ff,4px 52px #0d1117,8px 52px #ffab00,13px 52px #0d1117,4px 53px #0d1117,13px 53px #0d1117,4px 54px #0d1117,13px 54px #0d1117,4px 55px #0d1117,13px 55px #0d1117,4px 56px #0d1117,13px 56px #0d1117,4px 57px #0d1117,13px 57px #0d1117,
  20px 38px #0d1117,21px 38px #0d1117,22px 38px #0d1117,23px 38px #0d1117,24px 38px #0d1117,25px 38px #0d1117,26px 38px #0d1117,27px 38px #0d1117,28px 38px #0d1117,29px 38px #0d1117,30px 38px #0d1117,31px 38px #0d1117,32px 38px #0d1117,33px 38px #0d1117,34px 38px #0d1117,35px 38px #0d1117,20px 39px #0d1117,35px 39px #0d1117,20px 40px #0d1117,24px 40px #00e5ff,30px 40px #ff006e,35px 40px #0d1117,20px 41px #0d1117,35px 41px #0d1117,20px 42px #0d1117,27px 42px #39ff14,35px 42px #0d1117,20px 43px #0d1117,35px 43px #0d1117,20px 44px #0d1117,35px 44px #0d1117,20px 45px #0d1117,35px 45px #0d1117,20px 46px #0d1117,35px 46px #0d1117,20px 47px #0d1117,35px 47px #0d1117,20px 48px #0d1117,35px 48px #0d1117,20px 49px #0d1117,35px 49px #0d1117,20px 50px #0d1117,35px 50px #0d1117,20px 51px #0d1117,35px 51px #0d1117,20px 52px #0d1117,35px 52px #0d1117,20px 53px #0d1117,35px 53px #0d1117,20px 54px #0d1117,35px 54px #0d1117,20px 55px #0d1117,35px 55px #0d1117,20px 56px #0d1117,35px 56px #0d1117,20px 57px #0d1117,35px 57px #0d1117,
  44px 28px #0d1117,45px 28px #0d1117,46px 28px #0d1117,47px 28px #0d1117,48px 28px #0d1117,49px 28px #0d1117,50px 28px #0d1117,51px 28px #0d1117,52px 28px #0d1117,53px 28px #0d1117,54px 28px #0d1117,55px 28px #0d1117,56px 28px #0d1117,57px 28px #0d1117,58px 28px #0d1117,59px 28px #0d1117,60px 28px #0d1117,61px 28px #0d1117,62px 28px #0d1117,63px 28px #0d1117,44px 32px #0d1117,63px 32px #0d1117,44px 36px #0d1117,50px 36px #ffab00,57px 36px #00e5ff,63px 36px #0d1117,44px 40px #0d1117,63px 40px #0d1117,44px 44px #0d1117,50px 44px #ff006e,57px 44px #39ff14,63px 44px #0d1117,44px 48px #0d1117,63px 48px #0d1117,44px 52px #0d1117,63px 52px #0d1117,44px 56px #0d1117,63px 56px #0d1117,
  74px 42px #0d1117,75px 41px #0d1117,76px 40px #0d1117,77px 39px #0d1117,78px 38px #0d1117,79px 38px #0d1117,80px 39px #0d1117,81px 40px #0d1117,82px 41px #0d1117,83px 42px #0d1117,84px 42px #0d1117,85px 42px #0d1117,86px 42px #0d1117,87px 42px #0d1117,88px 42px #0d1117,89px 42px #0d1117,90px 42px #0d1117,91px 42px #0d1117,74px 46px #0d1117,82px 46px #00e5ff,91px 46px #0d1117,74px 50px #0d1117,86px 50px #ffab00,91px 50px #0d1117,74px 54px #0d1117,91px 54px #0d1117,74px 57px #0d1117,91px 57px #0d1117,
  100px 33px #0d1117,101px 33px #0d1117,102px 33px #0d1117,103px 33px #0d1117,104px 33px #0d1117,105px 33px #0d1117,106px 33px #0d1117,107px 33px #0d1117,108px 33px #0d1117,109px 33px #0d1117,110px 33px #0d1117,111px 33px #0d1117,100px 37px #0d1117,111px 37px #0d1117,100px 41px #0d1117,104px 41px #39ff14,111px 41px #0d1117,100px 45px #0d1117,108px 45px #ff006e,111px 45px #0d1117,100px 49px #0d1117,111px 49px #0d1117,100px 53px #0d1117,111px 53px #0d1117,100px 57px #0d1117,111px 57px #0d1117;
}

.zone-fields { min-height: 150vh; background: linear-gradient(180deg, var(--midnight), var(--void)); }
.field-map { position: absolute; inset: 10vh 0 auto 0; width: 100%; height: 105vh; opacity: 0.95; pointer-events: none; }
.field-paths path { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 8 8; stroke-dashoffset: 1000; opacity: 0.55; shape-rendering: crispEdges; transition: stroke-dashoffset 320ms steps(6); }
.zone-fields.in-view .field-paths path { stroke-dashoffset: var(--dash, 0); }
.monopole-core { fill: var(--cyan); animation: corePulse 900ms steps(2) infinite; }
.waypoint {
  position: relative;
  max-width: 360px;
  border: 1px solid var(--cyan);
  background: rgba(10, 10, 15, 0.85);
  padding: 1rem;
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  z-index: 2;
}
.waypoint-a { margin-left: 6vw; margin-top: 16vh; }
.waypoint-b { margin-left: auto; margin-right: 7vw; margin-top: 20vh; }
.waypoint-c { margin-left: 18vw; margin-top: 24vh; }
.pixel-icon, .thumb, .pixel-train { width: 1px; height: 1px; background: transparent; transform: scale(5); transform-origin: left top; margin: 0 0 4rem 0.4rem; }
.waypoint:hover .pixel-icon { animation: pixelJitter 260ms steps(2) infinite; }
.antenna { box-shadow: 0 7px #00e5ff,1px 6px #00e5ff,2px 5px #00e5ff,3px 4px #ffab00,4px 5px #00e5ff,5px 6px #00e5ff,6px 7px #00e5ff,3px 5px #ff006e,3px 6px #ff006e,3px 7px #ff006e,2px 8px #39ff14,3px 8px #39ff14,4px 8px #39ff14; }
.tower { box-shadow: 1px 0 #ff006e,2px 0 #ff006e,0 1px #ff006e,3px 1px #ff006e,1px 2px #00e5ff,2px 2px #00e5ff,1px 3px #00e5ff,2px 3px #00e5ff,0 4px #ffab00,3px 4px #ffab00,0 5px #ffab00,3px 5px #ffab00,0 6px #39ff14,1px 6px #39ff14,2px 6px #39ff14,3px 6px #39ff14; }
.car { box-shadow: 0 2px #39ff14,1px 2px #39ff14,2px 2px #39ff14,3px 2px #39ff14,4px 2px #39ff14,5px 2px #39ff14,1px 1px #00e5ff,2px 1px #00e5ff,4px 1px #00e5ff,5px 1px #00e5ff,1px 3px #ffab00,5px 3px #ffab00; }

.zone-transit { min-height: 120vh; background: var(--midnight); }
.section-copy { max-width: 720px; color: var(--muted); margin-bottom: 2rem; }
.transit-board { position: relative; border: 2px solid var(--muted); background: #0a0a0f; padding: 1rem; clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.transit-svg { width: 100%; height: min(62vh, 560px); display: block; }
.route { fill: none; stroke-width: 10; shape-rendering: crispEdges; }
.route-cyan { stroke: var(--cyan); } .route-magenta { stroke: var(--magenta); } .route-lime { stroke: var(--lime); } .route-amber { stroke: var(--amber); }
.stations rect { fill: var(--void); stroke: var(--white); stroke-width: 4; cursor: pointer; }
.stations rect:hover { fill: var(--amber); stroke: var(--magenta); }
.station-tooltip { position: absolute; display: none; max-width: 280px; padding: 0.8rem; background: var(--midnight); border: 1px solid var(--magenta); color: var(--white); font-family: "Share Tech Mono", monospace; z-index: 4; pointer-events: none; }
.station-tooltip strong { display: block; color: var(--magenta); font-family: "Press Start 2P", monospace; font-size: 0.6rem; margin-bottom: 0.6rem; line-height: 1.5; }
.pixel-train { position: absolute; left: 1rem; top: 1rem; margin: 0; transform: scale(4); opacity: 0; box-shadow: 0 0 #e0e0e8,1px 0 #e0e0e8,2px 0 #e0e0e8,3px 0 #e0e0e8,0 1px #00e5ff,1px 1px #00e5ff,2px 1px #00e5ff,3px 1px #00e5ff,1px 2px #ffab00,3px 2px #ffab00; }
.pixel-train.run { opacity: 1; animation: trainMove 850ms steps(8) infinite; }

.zone-lab { min-height: 100vh; background: var(--void); }
.lab-layout { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(280px, 420px) minmax(180px, 1fr); gap: clamp(1rem, 4vw, 4rem); align-items: center; }
.lab-column { border-left: 2px solid var(--muted); padding-left: 1rem; }
.lab-column p + h2 { margin-top: 2rem; }
.detector { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.ring { display: grid; place-items: center; width: 100%; height: 100%; border: 4px solid var(--cyan); }
.r2 { width: 76%; height: 76%; border-color: var(--magenta); }
.r3 { width: 68%; height: 68%; border-color: var(--lime); }
.r4 { width: 55%; height: 55%; border-color: var(--amber); }
.collision-core { width: 10px; height: 10px; background: var(--white); box-shadow: 0 0 0 4px var(--cyan); }
.burst { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; background: var(--cyan); animation: burst 4s steps(8) infinite; }
.b2 { --x: 160px; --y: -160px; background: var(--magenta); animation-delay: 80ms; } .b1 { --x: -160px; --y: -160px; background: var(--cyan); }
.b3 { --x: -190px; --y: 90px; background: var(--lime); animation-delay: 160ms; } .b4 { --x: 190px; --y: 90px; background: var(--amber); animation-delay: 240ms; }
.b5 { --x: 0; --y: -190px; background: var(--magenta); animation-delay: 320ms; } .b6 { --x: 0; --y: 190px; background: var(--cyan); animation-delay: 400ms; }
.b7 { --x: -120px; --y: 160px; background: var(--amber); animation-delay: 480ms; } .b8 { --x: 120px; --y: 160px; background: var(--lime); animation-delay: 560ms; }

.zone-archive { min-height: 80vh; background: var(--midnight); }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.data-card { aspect-ratio: 1; border: 1px solid var(--muted); background: var(--midnight); display: grid; place-items: center; padding: 0.6rem; overflow: hidden; }
.data-card:hover { box-shadow: 0 0 0 2px var(--cyan); }
.data-card:hover .thumb { transform: scale(10); transition-timing-function: steps(1); }
.data-card span { color: var(--white); font-size: 0.48rem; align-self: end; }
.thumb { margin: 1rem 0 0 0; transform: scale(5); transition: transform 1ms steps(1); }
.thumb-dirac { box-shadow: 0 4px #00e5ff,1px 3px #00e5ff,2px 2px #ffab00,3px 3px #00e5ff,4px 4px #00e5ff,2px 5px #ff006e; }
.thumb-gut { box-shadow: 0 0 #39ff14,4px 0 #39ff14,0 4px #39ff14,4px 4px #39ff14,2px 2px #ff006e,2px 1px #00e5ff,2px 3px #00e5ff; }
.thumb-string { box-shadow: 0 0 #ffab00,1px 1px #ffab00,2px 2px #ffab00,3px 3px #ffab00,4px 4px #ffab00,5px 5px #ff006e; }
.thumb-ice { box-shadow: 0 1px #00e5ff,1px 0 #00e5ff,2px 1px #e0e0e8,1px 2px #00e5ff,3px 2px #00e5ff,2px 3px #e0e0e8; }
.thumb-macro { box-shadow: 0 0 #ff006e,1px 0 #ff006e,2px 0 #ff006e,0 1px #00e5ff,2px 1px #00e5ff,0 2px #39ff14,1px 2px #39ff14,2px 2px #39ff14; }
.thumb-moedal { box-shadow: 1px 0 #ffab00,0 1px #ffab00,2px 1px #ffab00,1px 2px #ffab00,1px 1px #00e5ff,3px 3px #ff006e; }
.thumb-pulse { box-shadow: 2px 0 #00e5ff,2px 1px #00e5ff,0 2px #00e5ff,1px 2px #00e5ff,2px 2px #e0e0e8,3px 2px #00e5ff,4px 2px #00e5ff,2px 3px #00e5ff,2px 4px #00e5ff; }
.thumb-null { box-shadow: 0 0 #6b7080,1px 0 #6b7080,2px 0 #6b7080,3px 0 #6b7080,0 3px #6b7080,1px 3px #6b7080,2px 3px #6b7080,3px 3px #6b7080; }

@keyframes bootFlash { 0% { background: var(--cyan); } 33% { background: var(--magenta); } 66% { background: var(--amber); } 100% { background: var(--void); } }
@keyframes scanOn { to { opacity: 1; } }
@keyframes typeIn { to { opacity: 1; transform: translateY(0); } }
@keyframes snapFade { to { opacity: 1; } }
@keyframes pulseLine { 50% { opacity: 0.28; } }
@keyframes corePulse { 50% { fill: var(--magenta); } }
@keyframes pixelJitter { 50% { transform: scale(5) translate(1px, -1px); } }
@keyframes trainMove { 0% { translate: 0 0; } 33% { translate: 36vw 0; } 66% { translate: 48vw 24vh; } 100% { translate: 78vw 8vh; } }
@keyframes burst { 0%, 68% { opacity: 0; transform: translate(0, 0); } 70% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)); } }

@media (max-width: 760px) {
  .zone { padding: 2rem 1.2rem; }
  .lab-layout { grid-template-columns: 1fr; }
  .detector { max-width: 340px; margin: auto; width: 100%; }
  .waypoint-a, .waypoint-b, .waypoint-c { margin: 18vh 0 0 0; }
  .sky-title { overflow-wrap: anywhere; }
  .tick { display: none; }
}