.twin-section {
  width: 100vw;
  margin: 0 0 clamp(90px, 10vw, 150px) calc(50% - 50vw);
  scroll-margin-top: 72px;
}

.twin-intro,
.twin-presets {
  width: min(100%, 1640px);
  margin-inline: auto;
  padding-inline: clamp(18px, 3.4vw, 56px);
}

.twin-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: end;
  margin-bottom: 28px;
}

.twin-intro h2,
.city-catalog-heading h2 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(35px, 4.7vw, 70px);
  font-weight: 680;
  letter-spacing: -.06em;
  line-height: .97;
  text-wrap: balance;
}

.twin-intro__copy > p {
  max-width: 57ch;
  margin: 0 0 21px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.twin-launch {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  border: 0;
  border-radius: 11px;
  padding: 0 17px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 820;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.twin-launch:hover { background: var(--accent-hover); }
.twin-launch:active { transform: translateY(1px); }

.twin-presets {
  display: flex;
  gap: 7px;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none;
}

.twin-presets::-webkit-scrollbar { display: none; }
.twin-presets > span { margin-right: 5px; color: var(--faint); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.twin-presets button {
  min-height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0 12px;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
  cursor: pointer;
}

.twin-presets button:hover,
.twin-presets button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

.twin-shell {
  --twin-bg: #08100c;
  --twin-surface: rgba(16, 26, 20, .91);
  --twin-surface-2: rgba(26, 38, 31, .92);
  --twin-line: rgba(224, 235, 226, .15);
  --twin-line-strong: rgba(224, 235, 226, .3);
  --twin-text: #f1f2ed;
  --twin-muted: #9ba8a0;
  --twin-accent: #ed7527;
  --twin-green: #65c2a7;
  position: relative;
  width: 100%;
  height: max(720px, calc(100dvh - 72px));
  max-height: 1080px;
  overflow: hidden;
  border-block: 1px solid rgba(224, 235, 226, .16);
  background: var(--twin-bg);
  color: var(--twin-text);
  box-shadow: 0 40px 120px -70px rgba(6, 17, 11, .72);
}

.twin-shell:fullscreen { width: 100vw; height: 100dvh; max-height: none; border: 0; }

.twin-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 16;
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px clamp(16px, 2.6vw, 42px);
  border-bottom: 1px solid var(--twin-line);
  background: linear-gradient(180deg, rgba(7, 13, 10, .96), rgba(7, 13, 10, .74));
  backdrop-filter: blur(18px);
}

.twin-breadcrumbs { display: flex; min-width: 0; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.twin-breadcrumbs::-webkit-scrollbar { display: none; }
.twin-breadcrumbs button {
  display: inline-flex;
  min-height: 33px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  padding: 0 9px;
  background: transparent;
  color: var(--twin-muted);
  font-size: 9px;
  font-weight: 730;
  cursor: pointer;
}

.twin-breadcrumbs button::after { content: "/"; margin-left: 5px; color: #536158; }
.twin-breadcrumbs button:last-child::after { display: none; }
.twin-breadcrumbs button:hover,
.twin-breadcrumbs button[aria-current="location"] { background: rgba(34, 49, 40, .8); color: var(--twin-text); }
.twin-breadcrumbs span { color: var(--twin-accent); font-variant-numeric: tabular-nums; }

.twin-telemetry { display: flex; flex: 0 0 auto; gap: 3px; }
.twin-telemetry > span { display: grid; min-width: 54px; gap: 1px; border-left: 1px solid var(--twin-line); padding-left: 10px; }
.twin-telemetry small { color: var(--twin-muted); font-size: 6px; font-weight: 850; letter-spacing: .12em; }
.twin-telemetry strong { color: var(--twin-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-variant-numeric: tabular-nums; }

.twin-layout,
.twin-viewport { position: absolute; inset: 0; }
.twin-layout { min-height: 0; }
.twin-viewport {
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(circle at 48% 35%, #18271e, #08100c 68%);
  cursor: grab;
  outline: none;
  touch-action: none;
  user-select: none;
}

.twin-viewport.is-dragging { cursor: grabbing; }
.twin-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--twin-accent); }
.twin-webgl,
.twin-webgl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.twin-webgl canvas { outline: none; }

.twin-labels { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.twin-object-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(240, 245, 240, .28);
  border-radius: 9px;
  padding: 4px 8px 4px 4px;
  background: rgba(7, 14, 10, .8);
  color: var(--twin-text);
  box-shadow: 0 9px 28px rgba(0, 0, 0, .26);
  opacity: .8;
  transform: translate(-50%, calc(-100% - 10px));
  transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(8px);
}

.twin-object-label span:first-child { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 6px; background: rgba(242, 247, 242, .1); color: var(--twin-accent); font: 750 7px ui-monospace, SFMono-Regular, Menlo, monospace; }
.twin-object-label strong { max-width: 150px; overflow: hidden; font-size: 8px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.twin-object-label:hover,
.twin-object-label.is-active { z-index: 4; border-color: var(--twin-accent); background: rgba(74, 34, 14, .9); opacity: 1; }
.twin-object-label.is-related { border-color: rgba(101, 194, 167, .68); }
.twin-object-label.is-occluded { opacity: 0; pointer-events: none; }

.twin-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  background: #08100c;
  color: var(--twin-text);
  transition: opacity 480ms ease, visibility 480ms ease;
}

.twin-loader.is-ready { visibility: hidden; opacity: 0; }
.twin-loader span { width: 38px; height: 38px; margin-bottom: 10px; border: 1px solid rgba(101, 194, 167, .25); border-top-color: var(--twin-green); border-radius: 50%; animation: twin-spin 900ms linear infinite; }
.twin-loader strong { font-size: 13px; font-weight: 700; }
.twin-loader small { color: var(--twin-muted); font-size: 8px; }
@keyframes twin-spin { to { transform: rotate(360deg); } }

.twin-webgl-error { position: absolute; inset: 0; z-index: 22; display: grid; place-items: center; padding: 30px; background: #101812; color: var(--twin-muted); text-align: center; }
.twin-webgl-error[hidden] { display: none; }

.twin-reticle { position: absolute; left: 50%; top: 50%; z-index: 8; width: 34px; height: 34px; border: 1px solid rgba(240, 243, 237, .22); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.twin-reticle::before,
.twin-reticle::after { content: ""; position: absolute; background: rgba(240, 243, 237, .28); }
.twin-reticle::before { left: 50%; top: -7px; width: 1px; height: 47px; }
.twin-reticle::after { left: -7px; top: 50%; width: 47px; height: 1px; }
.twin-reticle span { position: absolute; inset: 14px; border-radius: 50%; background: var(--twin-accent); box-shadow: 0 0 12px var(--twin-accent); }

.twin-level-badge { position: absolute; top: 86px; left: clamp(16px, 2.6vw, 42px); z-index: 9; display: grid; width: 72px; height: 72px; align-content: center; justify-items: center; border: 1px solid var(--twin-line-strong); border-radius: 50%; background: rgba(7, 14, 10, .72); backdrop-filter: blur(10px); }
.twin-level-badge span { color: var(--twin-accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 850; }
.twin-level-badge small { color: var(--twin-muted); font-size: 6px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.twin-status { position: absolute; top: 95px; left: clamp(104px, 8vw, 132px); z-index: 9; max-width: 390px; margin: 0; border-left: 1px solid var(--twin-line-strong); padding: 7px 0 7px 12px; color: var(--twin-text); font-size: 9px; line-height: 1.4; text-shadow: 0 1px 5px #000; }

.twin-help { position: absolute; left: clamp(16px, 2.6vw, 42px); bottom: 100px; z-index: 9; display: flex; flex-wrap: wrap; gap: 7px 14px; max-width: 480px; color: var(--twin-muted); font-size: 7px; letter-spacing: .04em; text-transform: uppercase; }
.twin-help span { display: inline-flex; align-items: center; gap: 3px; }
.twin-help kbd { display: grid; min-width: 19px; height: 19px; place-items: center; border: 1px solid var(--twin-line-strong); border-radius: 5px; background: rgba(20, 29, 24, .74); color: var(--twin-text); font: 7px ui-monospace, SFMono-Regular, Menlo, monospace; }

.twin-controls { position: absolute; right: clamp(16px, 2.6vw, 42px); bottom: 98px; z-index: 10; display: grid; grid-template-columns: repeat(4, 40px); gap: 5px; }
.twin-controls button { display: grid; min-height: 40px; place-items: center; border: 1px solid var(--twin-line-strong); border-radius: 8px; background: rgba(15, 22, 18, .86); color: var(--twin-text); font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; backdrop-filter: blur(9px); }
.twin-controls button:hover { border-color: var(--twin-accent); background: rgba(32, 47, 38, .95); }
.twin-controls .twin-control--accent { border-color: var(--twin-accent); background: var(--twin-accent); color: #1f0d04; font-size: 17px; }
.twin-controls .twin-control--wide { grid-column: span 2; min-height: 31px; font-family: inherit; font-size: 7px; }

.twin-inspector {
  position: absolute;
  z-index: 13;
  top: 82px;
  right: clamp(16px, 2.6vw, 42px);
  bottom: 164px;
  display: flex;
  width: min(334px, calc(100vw - 32px));
  min-height: 0;
  overflow-y: auto;
  flex-direction: column;
  border: 1px solid var(--twin-line);
  border-radius: 18px;
  padding: 22px 20px 18px;
  background: var(--twin-surface);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .04);
  backdrop-filter: blur(20px);
}

.twin-inspector__head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 25px; color: var(--twin-muted); font: 7px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.twin-inspector__head strong { color: var(--twin-green); font-weight: 730; }
.twin-inspector__type { margin: 0 0 7px; color: var(--twin-accent); font-size: 7px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.twin-inspector h3 { margin: 0; color: var(--twin-text); font-size: clamp(25px, 2.4vw, 36px); font-weight: 650; letter-spacing: -.055em; line-height: 1; text-wrap: balance; }
.twin-inspector h3 + p { min-height: 62px; margin: 14px 0 17px; color: var(--twin-muted); font-size: 9px; line-height: 1.55; }
.twin-reading { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border-top: 1px solid var(--twin-line); border-bottom: 1px solid var(--twin-line); padding: 11px 0; }
.twin-reading span { color: var(--twin-muted); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.twin-reading strong { color: var(--twin-text); font-size: 11px; font-weight: 760; }
.twin-reading small { grid-column: 1 / -1; color: var(--twin-green); font-size: 7px; }

.twin-stack { display: grid; gap: 5px; margin: 14px 0; }
.twin-stack__row { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 37px; border: 0; border-radius: 8px; padding: 5px 8px; background: var(--twin-surface-2); color: inherit; text-align: left; }
button.twin-stack__row { width: 100%; cursor: pointer; }
button.twin-stack__row:hover,
button.twin-stack__row.is-active { box-shadow: inset 0 0 0 1px var(--twin-green); background: rgba(34, 55, 44, .98); }
.twin-stack__row > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; background: rgba(235, 242, 236, .06); color: var(--twin-accent); font: 750 7px ui-monospace, SFMono-Regular, Menlo, monospace; }
.twin-stack__row div { min-width: 0; }
.twin-stack__row strong,
.twin-stack__row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twin-stack__row strong { font-size: 9px; font-weight: 730; }
.twin-stack__row small { margin-top: 2px; color: var(--twin-muted); font-size: 6px; }

.twin-opacity { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--twin-line); }
.twin-opacity label { display: flex; justify-content: space-between; color: var(--twin-muted); font-size: 7px; letter-spacing: .04em; text-transform: uppercase; }
.twin-opacity output { color: var(--twin-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.twin-opacity input { width: 100%; margin: 10px 0 0; accent-color: var(--twin-accent); }
.twin-inspector__actions { display: grid; grid-template-columns: .7fr 1.3fr; gap: 7px; margin-top: 11px; }
.twin-inspector__actions button,
.twin-vendor-link { min-height: 41px; border-radius: 9px; font-size: 8px; font-weight: 800; }
.twin-back { border: 1px solid var(--twin-line-strong); background: transparent; color: var(--twin-text); cursor: pointer; }
.twin-back:disabled { opacity: .28; cursor: not-allowed; }
.twin-deeper { display: flex; align-items: center; justify-content: space-between; border: 0; padding: 0 13px; background: var(--twin-accent); color: #1f0d04; cursor: pointer; }
.twin-deeper:disabled { opacity: .38; cursor: not-allowed; }
.twin-vendor-link { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; border: 1px solid var(--twin-green); padding: 0 13px; color: var(--twin-text); text-decoration: none; }
.twin-vendor-link:hover { background: rgba(101, 194, 167, .1); }
.twin-vendor-link[hidden] { display: none; }

.twin-depth-rail {
  position: absolute;
  inset: auto 0 0;
  z-index: 14;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--twin-line);
  background: rgba(8, 15, 11, .9);
  list-style: none;
  backdrop-filter: blur(18px);
}

.twin-depth-rail li { position: relative; display: grid; min-width: 0; gap: 2px; min-height: 76px; align-content: center; border-right: 1px solid var(--twin-line); padding: 10px clamp(10px, 1.5vw, 24px); opacity: .36; transition: opacity 250ms ease, background 250ms ease; }
.twin-depth-rail li:last-child { border-right: 0; }
.twin-depth-rail li::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--twin-accent); transition: width 380ms ease; }
.twin-depth-rail li.is-active,
.twin-depth-rail li.is-past { opacity: 1; }
.twin-depth-rail li.is-active { background: rgba(24, 36, 29, .92); }
.twin-depth-rail li.is-active::before,
.twin-depth-rail li.is-past::before { width: 100%; }
.twin-depth-rail span { color: var(--twin-accent); font: 7px ui-monospace, SFMono-Regular, Menlo, monospace; }
.twin-depth-rail strong { overflow: hidden; color: var(--twin-text); font-size: 9px; font-weight: 740; text-overflow: ellipsis; white-space: nowrap; }
.twin-depth-rail small { overflow: hidden; color: var(--twin-muted); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }

.city-catalog-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr); gap: 40px; align-items: end; margin-bottom: 35px; }
.city-catalog-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -23px; }
.city-catalog-heading > p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

@media (max-width: 1040px) {
  .twin-inspector { width: 300px; }
  .twin-help { max-width: 310px; }
  .twin-object-label strong { max-width: 112px; }
}

@media (max-width: 820px) {
  .twin-intro { grid-template-columns: 1fr; gap: 22px; }
  .twin-intro__copy { max-width: 620px; }
  .twin-shell { height: max(700px, calc(100dvh - 58px)); }
  .twin-inspector { top: auto; right: 12px; bottom: 91px; left: 12px; width: auto; max-height: 300px; padding: 16px; }
  .twin-inspector__head { margin-bottom: 12px; }
  .twin-inspector h3 { font-size: 24px; }
  .twin-inspector h3 + p { display: none; }
  .twin-stack { max-height: 96px; overflow-y: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twin-opacity { margin-top: 12px; }
  .twin-help { bottom: 410px; }
  .twin-controls { bottom: 407px; }
  .twin-depth-rail { overflow-x: auto; grid-template-columns: repeat(6, minmax(138px, 1fr)); scrollbar-width: none; }
  .twin-depth-rail::-webkit-scrollbar { display: none; }
  .twin-object-label:not(.is-active):not(.is-related) strong { display: none; }
  .city-catalog-heading { grid-template-columns: 1fr; gap: 18px; }
  .city-catalog-heading .eyebrow { margin-bottom: -5px; }
}

@media (max-width: 620px) {
  .twin-intro h2 { font-size: clamp(38px, 12vw, 57px); }
  .twin-presets { align-items: flex-start; }
  .twin-presets > span { padding-top: 10px; }
  .twin-topbar { align-items: flex-start; padding: 9px 10px; }
  .twin-telemetry > span { min-width: 40px; padding-left: 7px; }
  .twin-telemetry > span:first-child { display: none; }
  .twin-level-badge { top: 78px; left: 12px; width: 58px; height: 58px; }
  .twin-status { top: 82px; right: 12px; left: 82px; }
  .twin-help { left: 12px; bottom: 416px; max-width: 230px; }
  .twin-help span:nth-child(-n+2) { display: none; }
  .twin-controls { right: 11px; bottom: 411px; grid-template-columns: repeat(4, 37px); }
  .twin-controls button { min-height: 37px; }
  .twin-object-label { padding-right: 4px; }
  .twin-object-label strong { display: none; }
  .twin-object-label.is-active strong { display: block; max-width: 120px; }
  .city-catalog-heading h2 { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) { .twin-loader span { animation: none; } }