:root {
  /* Typography compliance terms from DESIGN.md: Inter* Condensed* Inte Inter clean authority institutional calm. Small technical labels may Condense Condensed signage */
  --ice-paper: #EDF3F7;
  --bureau-gray: #AAB6C2;
  --deep-slate: #26313D;
  --polar-ink: #111820;
  --frost-blue: #7FB6D8;
  --signal-cyan: #42D9E8;
  --alice-lilac: #A8A3D6;
  --municipal-white: #F8FBFD;
  --panel-h: 100vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ice-paper);
  color: var(--polar-ink);
  font-family: "Inter", system-ui, sans-serif;
}

body {
  cursor: none;
  background:
    linear-gradient(90deg, rgba(38,49,61,.08) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(0deg, rgba(38,49,61,.06) 1px, transparent 1px) 0 0 / 72px 72px,
    var(--ice-paper);
}

.inspection-lens {
  position: fixed;
  left: 0;
  top: 0;
  width: 124px;
  height: 124px;
  border: 2px solid var(--signal-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 30;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(248,251,253,.22), rgba(66,217,232,.08) 58%, transparent 60%);
  box-shadow: 0 0 0 999px rgba(17,24,32,.015), 0 0 28px rgba(66,217,232,.3);
  mix-blend-mode: multiply;
}

.route-header, .route-footer {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  color: var(--deep-slate);
  font-family: "IBM Plex Sans Condensed", "Inter", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 13px;
}

.route-header { top: 0; border-bottom: 1px solid rgba(38,49,61,.16); background: rgba(237,243,247,.68); backdrop-filter: blur(12px); }
.route-footer { bottom: 0; flex-direction: column; gap: 12px; align-items: stretch; background: linear-gradient(0deg, rgba(237,243,247,.9), rgba(237,243,247,.28)); }
.bureau-mark { font-weight: 600; }
.route-code { color: var(--frost-blue); }
.progress-readout { color: var(--signal-cyan); font-weight: 600; }

.quest-frame {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.route-strip {
  height: var(--panel-h);
  display: flex;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.panel {
  position: relative;
  height: 100vh;
  flex: 0 0 100vw;
  overflow: hidden;
  padding: 96px 76px 118px;
  filter: blur(7px) saturate(.75);
  opacity: .72;
  transition: filter .55s ease, opacity .55s ease;
  background: var(--ice-paper);
}

.panel.is-active { filter: blur(0) saturate(1); opacity: 1; }
.boulevard-panel { flex-basis: 138vw; background: linear-gradient(180deg, var(--municipal-white), var(--ice-paper) 54%, var(--bureau-gray)); }
.checkpoint-panel { flex-basis: 56vw; background: linear-gradient(90deg, var(--bureau-gray), var(--ice-paper)); }
.archive-panel { flex-basis: 118vw; background: linear-gradient(180deg, #F8FBFD 0%, #EDF3F7 45%, #AAB6C2 100%); }
.alley-panel { flex-basis: 72vw; background: var(--deep-slate); color: var(--municipal-white); }
.rotunda-panel { flex-basis: 100vw; background: radial-gradient(circle at 50% 52%, var(--municipal-white) 0 28%, var(--ice-paper) 29% 43%, var(--bureau-gray) 44% 100%); }

.focus-card {
  position: relative;
  background: rgba(248,251,253,.84);
  border: 2px solid var(--deep-slate);
  box-shadow: 12px 12px 0 rgba(38,49,61,.14);
  transition: filter .35s ease, transform .35s ease, box-shadow .35s ease;
}

.focus-card:hover { filter: blur(0); transform: translateY(-5px); box-shadow: 18px 18px 0 rgba(66,217,232,.22); }

.deco-gate {
  width: min(820px, 72vw);
  margin: 4vh auto 0;
  min-height: 63vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 46px;
  clip-path: polygon(0 16%, 11% 16%, 11% 8%, 22% 8%, 22% 0, 78% 0, 78% 8%, 89% 8%, 89% 16%, 100% 16%, 100% 100%, 0 100%);
}

.gate-top, .classification, .district-label, .notice-plaque, .sign-stack, .civic-plaque {
  font-family: "IBM Plex Sans Condensed", "Inter", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1, h2 { margin: 0; font-weight: 400; }
h1 { font-family: "Limelight", Georgia, serif; font-size: clamp(76px, 11vw, 164px); letter-spacing: .035em; color: var(--deep-slate); text-shadow: 0 8px 0 rgba(127,182,216,.25); }
h2 { font-family: "Limelight", Georgia, serif; font-size: clamp(38px, 5.2vw, 82px); line-height: .96; color: var(--deep-slate); }
.alley-panel h2 { color: var(--municipal-white); }
p { font-size: clamp(17px, 1.45vw, 22px); line-height: 1.55; color: var(--deep-slate); }
.alley-panel p { color: var(--ice-paper); }
.gate-subtitle { max-width: 610px; margin: 0 auto; }
.gate-top { color: var(--frost-blue); font-size: 16px; }

.route-baseline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30%;
  height: 3px;
  background: var(--deep-slate);
  box-shadow: 0 0 0 1px rgba(248,251,253,.7);
}
.route-baseline:after { content: ""; position: absolute; inset: -1px 0 auto auto; width: 28%; height: 5px; background: var(--signal-cyan); opacity: .45; }
.stop-dot { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; border-radius: 50%; transform: translate(-50%,-50%); background: var(--ice-paper); border: 4px solid var(--deep-slate); }
.panel.is-active .stop-dot { border-color: var(--signal-cyan); box-shadow: 0 0 26px var(--signal-cyan); }

.skyline, .wide-skyline { position: absolute; inset: auto 0 28% 0; height: 34%; display: flex; align-items: end; gap: 16px; opacity: .9; }
.skyline span, .wide-skyline span { display: block; background: var(--bureau-gray); border-top: 10px solid var(--deep-slate); }
.tower-a { width: 16vw; height: 52%; margin-left: 6vw; clip-path: polygon(0 18%, 38% 18%, 38% 0, 62% 0, 62% 18%, 100% 18%, 100% 100%, 0 100%); }
.tower-b { width: 12vw; height: 84%; clip-path: polygon(0 28%, 25% 28%, 25% 13%, 42% 13%, 50% 0, 58% 13%, 75% 13%, 75% 28%, 100% 28%, 100% 100%, 0 100%); }
.tower-c { width: 22vw; height: 44%; }
.tower-d { width: 18vw; height: 70%; clip-path: polygon(0 100%,0 24%,18% 24%,18% 12%,35% 12%,35% 0,65% 0,65% 12%,82% 12%,82% 24%,100% 24%,100% 100%); }

.wide-skyline { gap: 22px; bottom: 27%; padding-left: 8vw; }
.block { width: 14vw; border-top-width: 8px; }
.b1{height:34%}.b2{height:72%; clip-path: polygon(0 100%,0 20%,20% 20%,20% 0,80% 0,80% 20%,100% 20%,100% 100%)}.b3{height:48%}.b4{height:88%; clip-path: polygon(0 100%,0 30%,35% 30%,35% 0,65% 0,65% 30%,100% 30%,100% 100%)}.b5{height:58%}.b6{height:76%}

.municipal-notice { width: 620px; padding: 34px; margin: 14vh 0 0 14vw; }
.archive-text { width: 610px; padding: 34px; margin: 8vh 0 0 48vw; }
.checkpoint-booth { width: 380px; padding: 28px; margin: 19vh auto; }
.alley-brief { width: 500px; padding: 34px; margin: 18vh auto 0; background: rgba(38,49,61,.72); border-color: var(--signal-cyan); }
.rotunda { width: 620px; height: 620px; border-radius: 50%; margin: 6vh auto 0; display: grid; place-items: center; text-align: center; padding: 76px; }
.rotunda-ring { position: absolute; inset: 28px; border: 2px dashed var(--frost-blue); border-radius: 50%; animation: rotateSeal 28s linear infinite; }

.district-label { position: absolute; top: 96px; left: 76px; color: var(--frost-blue); font-size: 17px; z-index: 2; }
.district-label.vertical { writing-mode: vertical-rl; transform: rotate(180deg); }
.classification { color: var(--signal-cyan); font-size: 15px; font-weight: 600; }

.aperture { position: absolute; width: 98px; height: 132px; border: 4px solid var(--deep-slate); border-bottom-width: 10px; border-radius: 48px 48px 4px 4px; background: rgba(248,251,253,.45); }
.aperture span { position: absolute; left: 50%; top: 52%; width: 10px; height: 10px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--signal-cyan); box-shadow: 0 0 22px var(--signal-cyan); }
.gate-doors { position: relative; margin: 0 auto; left: auto; top: auto; }
.closed { border-color: var(--deep-slate); background: var(--bureau-gray); }
.frosted { right: 16vw; bottom: 34%; filter: blur(2px); border-color: var(--frost-blue); }
.blurred { right: 7vw; bottom: 34%; filter: blur(5px); }
.luminous { left: 22vw; bottom: 36%; border-color: var(--signal-cyan); box-shadow: 0 0 34px rgba(66,217,232,.6); }
.passage { right: 9vw; top: 23vh; border-color: var(--signal-cyan); background: rgba(66,217,232,.18); }
.official { position: relative; inset: auto; margin: 0 auto; width: 78px; height: 102px; border-color: var(--deep-slate); background: var(--alice-lilac); }

.blob { position: absolute; border-radius: 45% 55% 61% 39% / 49% 36% 64% 51%; background: rgba(127,182,216,.28); filter: blur(1px); animation: drift 16s ease-in-out infinite alternate; }
.blob:after { content: "?"; position: absolute; inset: 35% auto auto 44%; font-family: "Poiret One", cursive; font-size: 64px; color: rgba(38,49,61,.26); }
.blob-one { width: 260px; height: 210px; left: 9vw; top: 18vh; }
.blob-two { width: 340px; height: 230px; right: 18vw; top: 16vh; background: rgba(168,163,214,.26); animation-duration: 20s; }
.blob-three { width: 180px; height: 150px; left: 4vw; top: 20vh; }
.blob-four { width: 390px; height: 250px; left: 9vw; top: 12vh; background: rgba(66,217,232,.16); animation-duration: 22s; }
.blob-five { width: 300px; height: 220px; right: 10vw; top: 16vh; background: rgba(168,163,214,.28); }

.notice-plaque { position: absolute; right: 8vw; bottom: 18vh; background: var(--deep-slate); color: var(--municipal-white); padding: 16px 22px; border-left: 6px solid var(--signal-cyan); }
.sign-stack { position: absolute; right: 8vw; top: 24vh; display: grid; gap: 10px; color: var(--deep-slate); }
.sign-stack span, .sign-stack b { display: block; background: var(--municipal-white); border: 2px solid var(--deep-slate); padding: 12px 18px; }
.compressed-signs { position: absolute; left: 4vw; top: 15vh; width: 230px; display: grid; gap: 12px; }
.compressed-signs div { padding: 14px; border: 2px solid var(--signal-cyan); background: var(--ice-paper); color: var(--deep-slate); font-family: "IBM Plex Sans Condensed", sans-serif; letter-spacing: .12em; }

.node-map { position: relative; height: 86px; margin-top: 22px; border: 1px solid var(--frost-blue); background: linear-gradient(90deg, transparent 48%, rgba(66,217,232,.28) 50%, transparent 52%); }
.node-map i { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--signal-cyan); box-shadow: 0 0 14px var(--signal-cyan); }
.node-map i:nth-child(1){left:8%;top:42%}.node-map i:nth-child(2){left:28%;top:20%}.node-map i:nth-child(3){left:51%;top:58%}.node-map i:nth-child(4){left:72%;top:32%}.node-map i:nth-child(5){left:88%;top:50%}
.streetlamp { position: absolute; right: 18vw; bottom: 30%; width: 12px; height: 230px; background: var(--deep-slate); }
.streetlamp:before { content:""; position:absolute; left:-35px; top:-42px; width:82px; height:42px; border-radius: 42px 42px 0 0; background: var(--signal-cyan); opacity:.58; }
.archive-wall { position: absolute; left: 7vw; bottom: 34%; width: 44vw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.archive-wall div { height: 94px; background: var(--bureau-gray); border: 3px solid var(--deep-slate); box-shadow: inset 0 -16px 0 rgba(38,49,61,.16); }
.document-seal { position: absolute; right: 16vw; bottom: 21vh; width: 126px; height: 126px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--alice-lilac); border: 4px double var(--deep-slate); font-family: "Limelight", serif; color: var(--deep-slate); transform: rotate(-8deg); transition: transform .35s ease, background .35s ease; }
.document-seal.open { transform: rotate(0deg) scale(1.08); background: var(--signal-cyan); }
.sealed-passage { position: absolute; right: 7vw; bottom: 8vh; width: 360px; padding: 18px; color: var(--deep-slate); background: rgba(248,251,253,.9); border: 2px solid var(--signal-cyan); filter: blur(8px); opacity: .18; transition: filter .45s ease, opacity .45s ease; }
.sealed-passage.open { filter: blur(0); opacity: 1; }
.civic-plaque { position: absolute; left: 50%; bottom: 14vh; transform: translateX(-50%); padding: 16px 24px; background: var(--deep-slate); color: var(--municipal-white); border-top: 5px solid var(--signal-cyan); white-space: nowrap; }

.track-line { height: 5px; background: rgba(38,49,61,.24); overflow: hidden; border: 1px solid rgba(38,49,61,.2); }
.track-line span { display: block; width: 0; height: 100%; background: var(--signal-cyan); box-shadow: 0 0 18px var(--signal-cyan); transition: width .18s linear; }
.station-stamps { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
.station-stamps button { font-family: "IBM Plex Sans Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; background: rgba(248,251,253,.72); color: var(--deep-slate); border: 2px solid var(--bureau-gray); padding: 8px 12px; cursor: none; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.station-stamps button.active { background: var(--deep-slate); color: var(--municipal-white); border-color: var(--signal-cyan); transform: translateY(-2px); }

@keyframes drift { from { transform: translate3d(-12px, -8px, 0) rotate(-4deg); } to { transform: translate3d(34px, 16px, 0) rotate(5deg); } }
@keyframes rotateSeal { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .route-header { font-size: 10px; padding: 12px; gap: 10px; }
  .panel { padding: 82px 28px 128px; }
  .boulevard-panel, .archive-panel { flex-basis: 150vw; }
  .checkpoint-panel, .alley-panel { flex-basis: 100vw; }
  .municipal-notice, .archive-text, .alley-brief { width: min(86vw, 520px); margin-left: 0; }
  .archive-text { margin-top: 8vh; }
  .rotunda { width: 84vw; height: 84vw; min-height: 460px; padding: 44px; }
  h1 { font-size: 62px; }
  h2 { font-size: 38px; }
  .inspection-lens { display: none; }
}