/* CE Universe — the interactive homepage market map.
 * Scoped entirely under #ceUniverse so it can never leak into or be overridden by the rest of the
 * homepage's inline styles (index.html's own <style> block owns --sky, --ink, etc. at a wider
 * scope; this section defines its own local tokens instead of colliding with those names). */

#ceUniverse {
  --cu-ink: #EAF3F8;
  --cu-dim: #9DBACB;
  --cu-faint: #7793A6;
  --cu-line: rgba(140, 195, 226, .18);
  --cu-teal: #58C5D6;
  --cu-teal-deep: #1A5C6B;
  --cu-gold: #D8B26A;
  position: relative;
  background: radial-gradient(ellipse 120% 90% at 50% -10%, #173A49 0%, #0F2733 42%, #0B1D27 100%);
  color: #E7F1F7;
  overflow: hidden;
  isolation: isolate;
}
#ceUniverse .cu-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 28px 60px;
  position: relative;
}

/* ---- ambient stars behind everything: a static, cheap CSS field, not part of the data map ---- */
#ceUniverse .cu-stars {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 8% 18%, #bfe4f7 60%, transparent 100%),
    radial-gradient(1px 1px at 22% 62%, #8fc7e0 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 12%, #cdeeff 60%, transparent 100%),
    radial-gradient(1px 1px at 54% 76%, #7fb8d6 60%, transparent 100%),
    radial-gradient(1px 1px at 68% 30%, #bfe4f7 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 81% 58%, #cdeeff 60%, transparent 100%),
    radial-gradient(1px 1px at 92% 22%, #8fc7e0 60%, transparent 100%),
    radial-gradient(1px 1px at 14% 88%, #7fb8d6 60%, transparent 100%),
    radial-gradient(1px 1px at 46% 46%, #bfe4f7 60%, transparent 100%),
    radial-gradient(1px 1px at 73% 84%, #8fc7e0 60%, transparent 100%);
  background-repeat: no-repeat;
}

/* ---- header row: title + onboarding hint ---- */
#ceUniverse .cu-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; position: relative; z-index: 2; }
#ceUniverse .cu-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--cu-faint); margin: 0; }
#ceUniverse .cu-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.04; margin: 14px 0 0; color: var(--cu-ink); letter-spacing: -.025em; }
#ceUniverse .cu-sub { color: var(--cu-dim); font-size: 15.5px; line-height: 1.6; margin: 14px 0 0; max-width: 60ch; }
#ceUniverse .cu-intro-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; }
#ceUniverse .cu-intro-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(159,208,236,.34); border-radius: 9px; color: #EAF6FC; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 650; text-underline-offset: 4px; }
#ceUniverse .cu-intro-actions a:first-child { background: #59C8F5; border-color: #59C8F5; color: #03131C; padding: 11px 16px; text-decoration: none; }
#ceUniverse .cu-intro-actions a:focus-visible { outline: 3px solid #F4C96A; outline-offset: 3px; }
#ceUniverse .cu-hint {
  font-size: 12.5px; color: #BFE0F0; background: rgba(127, 196, 232, .12); border: 1px solid rgba(127, 196, 232, .3);
  border-radius: 999px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  max-width: 100%;
  animation: cu-pulse 2.6s ease-in-out infinite;
}
#ceUniverse .cu-hint[hidden] { display: none; }
@keyframes cu-pulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; box-shadow: 0 0 0 4px rgba(127,196,232,.06); } }

/* ---- controls row ---- */
/* A3 fix: z-index was 3, but this row (position:relative + z-index) establishes its OWN stacking
 * context, which caps every z-index set on anything inside it (like .cu-search-results below,
 * z-index:60) to this row's own value from the perspective of anything OUTSIDE it. #cuStageNote
 * ("Local view, N symbols shown") sits at z-index:5 in the map area below, so at the old z-index:3
 * the entire search dropdown rendered UNDER that chip -- not a clipping bug, a stacking-context one.
 * Raised comfortably above every other element in this component (including .cu-panel's 80) so an
 * open dropdown, wherever it visually extends to, is never covered by anything else here. */
#ceUniverse .cu-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 16px 0 12px; position: relative; z-index: 95; }
/* min-height holds the row at the height it has WITH the back button in it, so showing and hiding
   that button cannot change the map's position on the page. See updateBreadcrumb(). */
#ceUniverse .cu-breadcrumb { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; min-height: 32px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; color: var(--cu-faint); }
/* The one gold mark in the legend, matching drawSelectionRing()'s ring on the canvas. */
#ceUniverse .cu-legend-sel { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #D8B26A; display: inline-block; flex: none; }
#ceUniverse .cu-breadcrumb [hidden] { display: none; }
#ceUniverse .cu-breadcrumb[hidden] { display: none; }
#ceUniverse .cu-breadcrumb button { background: none; border: none; color: #7FC4E8; cursor: pointer; font: 600 12.5px 'Inter', sans-serif; padding: 6px 2px; min-height: 44px; }
#ceUniverse .cu-breadcrumb button:hover { text-decoration: underline; }
#ceUniverse .cu-crumb-sep { color: #4A6A7C; }
#ceUniverse .cu-preview {
  position: absolute; z-index: 70; max-width: 220px; padding: 9px 12px; border-radius: 10px;
  background: #0C2A38; border: 1px solid rgba(159,208,236,.32); box-shadow: 0 12px 28px rgba(0,0,0,.4);
  font-size: 12px; line-height: 1.5; color: #E7F1F7; pointer-events: none;
}
#ceUniverse .cu-preview[hidden] { display: none; }
#ceUniverse .cu-preview-cta { color: #7FC4E8; font-size: 11px; }
#ceUniverse .cu-search { display: flex; align-items: stretch; gap: 7px; flex: 1 1 360px; min-width: 220px; max-width: 520px; }
#ceUniverse .cu-search-field { position: relative; flex: 1 1 auto; min-width: 0; }
#ceUniverse .cu-search input {
  width: 100%; padding: 13px 16px; font-size: 15px; font-family: 'Inter', sans-serif;
  background: rgba(9, 30, 42, .82); border: 1px solid rgba(159, 208, 236, .3); border-radius: 10px;
  color: var(--cu-ink); min-height: 48px;
}
#ceUniverse .cu-search input::placeholder { color: #6C93A6; }
#ceUniverse .cu-search input:focus { outline: none; border-color: var(--cu-teal); box-shadow: 0 0 0 3px rgba(88,197,214,.2); }
#ceUniverse .cu-search-submit { min-height: 48px; padding: 0 15px; border: 0; border-radius: 10px; background: #59C8F5; color: #00131C; font: 700 13px 'Space Grotesk', sans-serif; cursor: pointer; }
#ceUniverse .cu-search-submit:hover { background: #8EDBFA; }
#ceUniverse .cu-search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #0C2A38; border: 1px solid rgba(159,208,236,.32); border-radius: 10px; overflow: hidden;
  max-height: 300px; overflow-y: auto; box-shadow: 0 18px 44px rgba(0,0,0,.5); display: none;
}
#ceUniverse .cu-search-results.open { display: block; }
#ceUniverse .cu-search-results button {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 13px; background: transparent; border: none; border-bottom: 1px solid rgba(159,208,236,.12);
  color: #E7F1F7; font-size: 13.5px; text-align: left; cursor: pointer; min-height: 44px;
}
#ceUniverse .cu-search-results button:last-child { border-bottom: none; }
#ceUniverse .cu-search-results button:hover,
#ceUniverse .cu-search-results button:focus-visible { background: rgba(127,196,232,.14); outline: none; }
#ceUniverse .cu-search-results .cu-sr-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #8CA9BA; white-space: nowrap; }
#ceUniverse .cu-search-results .cu-sr-empty { padding: 12px 13px; font-size: 13px; color: #8CA9BA; }

#ceUniverse .cu-lenses { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 3px; background: rgba(9,30,42,.7); border: 1px solid rgba(159,208,236,.24); border-radius: 999px; padding: 3px; }
#ceUniverse .cu-lens {
  font: 600 12.5px 'Space Grotesk', sans-serif; padding: 7px 13px; border-radius: 999px; border: none;
  background: transparent; color: #9FC0D2; cursor: pointer; min-height: 44px; transition: background .15s, color .15s;
}
#ceUniverse .cu-lens[aria-pressed="true"] { background: var(--cu-teal-deep); color: #EAF7FB; box-shadow: inset 0 0 0 1px rgba(88,197,214,.55); }
#ceUniverse .cu-lens:hover:not([aria-pressed="true"]) { color: #fff; }
/* cu-lenses-narrow-guard. The row of four was inline-flex with no max-width, so as a flex item it
   refused to shrink below its content and simply ran off the side: at 320 the group ended 7.5px
   past the viewport and the right edge of "Stability" was clipped. The pill stayed tappable, so
   this was legibility rather than function, and no horizontal page scroll appeared because an
   ancestor clips, which is why the overflow sweep in scripts/mobile/browser-tests.mjs never caught
   it. Allowing the group to wrap is the guarantee at any width and for any future lens name; the
   media query below decides what the wrapped shape looks like. */
@media (max-width: 420px) {
  /* Four across needs 333px of control, so a single row needs a 389px viewport once the section
     padding is taken off. Below that something has to give, and 320, 375 and 384 are all below it.
     Letting it wrap on its own puts three pills on one row and Stability alone on the next, which
     looks like a mistake. A full-width two-by-two reads as the intended shape at this size, and the
     softer radius stops a two-row block from looking like a stretched pill. The cutoff is 420px
     rather than 389 because a single row only cleared 390 by about a pixel, which is not a margin to
     trust across font fallbacks or a future lens name. */
  #ceUniverse .cu-lenses { width: 100%; gap: 2px; padding: 2px; border-radius: 16px; }
  #ceUniverse .cu-lens { flex: 1 1 calc(50% - 2px); padding: 7px 8px; border-radius: 14px; }
}

#ceUniverse .cu-zoom { display: inline-flex; gap: 4px; margin-left: auto; }
#ceUniverse .cu-zoom button {
  /* V4: 42px matches the search input's min-height and the 36px lens pill + its 3px padding, so
     search, lens group and zoom controls share one 42px control row. */
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(159,208,236,.28);
  background: rgba(9,30,42,.7); color: #E7F1F7; font-size: 17px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
#ceUniverse .cu-zoom button:hover:not(:disabled) { border-color: #7FC4E8; background: rgba(127,196,232,.14); }
/* A control that cannot act says so rather than looking live and doing nothing. `disabled` also
   takes it out of the tab order, which is the right call here: there is nothing for a keyboard user
   to do with a zoom-in button that is already at maximum zoom, and the +/- keys on the map itself
   remain available either way. */
#ceUniverse .cu-zoom button:disabled { opacity: .38; cursor: default; }
#ceUniverse .cu-zoom button.cu-reset { width: auto; padding: 0 12px; font-size: 12.5px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
#ceUniverse .cu-fullscreen-toggle { min-width: max-content; }

/* Full-screen exploration is a reversible view of the same map instance. Selection, URL state,
   camera and panel stay mounted; only the component's layout changes. */
#ceUniverse.cu-fullscreen { position: fixed; inset: 0; z-index: 10000; overflow: auto; min-height: 100dvh; }
#ceUniverse.cu-fullscreen .cu-wrap { max-width: none; min-height: 100dvh; padding: 18px 22px; }
#ceUniverse.cu-fullscreen .cu-head { display: none; }
#ceUniverse.cu-fullscreen .cu-controls { margin-top: 0; }
#ceUniverse.cu-fullscreen .cu-breadcrumb { margin: 5px 0; }
#ceUniverse.cu-fullscreen .cu-stage { margin-top: 6px; }
#ceUniverse.cu-fullscreen .cu-map-area { height: calc(100dvh - 155px); min-height: 360px; max-height: none; aspect-ratio: auto; }
#ceUniverse.cu-fullscreen .cu-legend,
#ceUniverse.cu-fullscreen .cu-listbar,
#ceUniverse.cu-fullscreen .cu-citylist,
#ceUniverse.cu-fullscreen .cu-vintage { display: none; }

/* ---- the map itself ---- */
/* .cu-stage holds two children: .cu-map-area (the canvas + its own overlays, fixed aspect) and
 * .cu-panel (the detail panel). At desktop the panel is absolutely positioned OVER the map area,
 * inside this same box; at the mobile breakpoint below it becomes a normal in-flow sibling that
 * renders BELOW the map instead — never covering most of a phone's small map with an 88%-height
 * sheet, and the map's geographic context stays visible the whole time a panel is open. */
#ceUniverse .cu-stage { position: relative; margin-top: 18px; }
#ceUniverse .cu-map-area {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--cu-line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(180, 225, 245, .07);
  /* OPAQUE. This was rgba(4,16,24,.5), so the decorative .cu-stars field behind the section showed
     through the map and put small pale dots among the real city markers: the one thing a data map
     must never do is render decoration that looks like data. The gradient keeps the depth the
     translucency was there for, without letting anything behind it through. */
  background: radial-gradient(ellipse 120% 100% at 50% 0%, #12303F 0%, #0C2230 55%, #091A25 100%);
  /* Sized to the projected content ratio so the frame does not leave a band of dead space above
     and below the country; width:100% keeps the height cap from shrinking the box sideways, which
     is what an earlier aspect-ratio + max-height pair did. */
  width: 100%; aspect-ratio: 1.62; min-height: 240px; max-height: 620px;
}
@media (max-width: 720px) {
  /* 1.62 was a desktop landscape frame: on a 358px canvas it left the country 221px tall, which is
     why everything on it had to be tiny. 1.12 gave the height back but left obvious dead space above
     and below at national extent, because the country's own projected aspect is much wider than the
     frame. 1.35 is the balance: about 30% more height than before, with the country still close to
     filling it. */
  #ceUniverse .cu-map-area { aspect-ratio: 1.35; max-height: 62vh; }
}
/* touch-action: the map is one section of a long homepage, so by default a touch gesture belongs
 * to the PAGE. `pan-y pinch-zoom` leaves vertical scrolling and the browser's own page zoom to
 * the browser, which is what lets a visitor swipe past the map on a phone at all. It was
 * `touch-action: none` before this change, and a real CDP touch swipe measured window.scrollY
 * unchanged while the map panned instead (evidence: docs/growth/evidence/universe-observatory/).
 * Turning the #cuTouchGestures toggle on adds .cu-gestures-on to #cuStage and hands the gesture
 * back to the map. This governs touch and pen only: a MOUSE drag pans the map either way. */
#ceUniverse canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y pinch-zoom; }
#ceUniverse .cu-stage.cu-gestures-on canvas { touch-action: none; }
#ceUniverse canvas:active { cursor: grabbing; }
#ceUniverse .cu-map-area.cu-cursor-pointer canvas { cursor: pointer; }
/* The wheel-modifier hint. Absolutely positioned and centred over the map, so revealing it can
   never shift layout (this section is on the homepage's LCP path). */
#ceUniverse .cu-zoom-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 6;
  padding: 10px 16px; border-radius: 10px; pointer-events: none;
  background: rgba(4, 16, 24, .92); border: 1px solid rgba(159, 208, 236, .34);
  color: #E7F1F7; font: 600 13px 'Space Grotesk', sans-serif; text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}
/* Explicit, matching every other hidden-toggled element in this file. The UA sheet's own
   [hidden] rule would cover this element as written, but one author `display` declaration added
   to .cu-zoom-hint later would silently beat it and strand a panel in the middle of the map. */
#ceUniverse .cu-zoom-hint[hidden] { display: none; }
/* The touch opt-in is shown wherever the constraint it lifts exists: ANY coarse pointer, meaning
   the device has a touchscreen at all. Not `pointer: coarse` (which asks whether touch is the
   PRIMARY input): a touch laptop reports a fine primary pointer, and hiding the control there
   would leave someone who does reach out and touch the map with no way to pan it and no
   explanation. On a device with no touch input the control is hidden, because touch-action never
   constrained anything there and a mouse drag pans the map regardless. */
#ceUniverse .cu-touch-gestures { display: none; }
#ceUniverse .cu-touch-hint { display: none; }
@media (any-pointer: coarse) {
  /* Bottom-RIGHT. The Alaska and Hawaii insets occupy the lower-left of the projection, so a
     control anchored there covered both of them on a phone; the Atlantic below Florida is the one
     genuinely empty corner of this map at national extent. `width: max-content` also keeps the pill
     exactly as wide as its own label rather than reserving a fixed 45% of the canvas. */
  #ceUniverse .cu-touch-gestures {
    display: block; position: absolute; right: 10px; bottom: 10px; z-index: 6;
    min-height: 44px; padding: 7px 13px; width: max-content; max-width: calc(100% - 20px);
    border: 1px solid rgba(159, 208, 236, .4); border-radius: 999px;
    background: rgba(4, 16, 24, .9); color: #DCEDF8; backdrop-filter: blur(3px);
    font: 600 12px 'Space Grotesk', sans-serif; text-align: left; cursor: pointer; line-height: 1.25;
  }
  #ceUniverse .cu-touch-gestures[aria-pressed="true"] { background: #17505F; color: #EAF7FB; border-color: #7FC4E8; }
  /* Sits directly above the button, appears only while the mode is on, and is the thing that
     actually tells a visitor which two gestures the map now answers to. */
  #ceUniverse .cu-touch-hint {
    display: block; position: absolute; right: 10px; bottom: 60px; z-index: 6; margin: 0;
    padding: 5px 10px; border-radius: 999px; width: max-content; max-width: calc(100% - 20px);
    background: rgba(4, 16, 24, .9); border: 1px solid rgba(159, 208, 236, .26);
    color: #A9C6D8; font: 600 11px 'JetBrains Mono', ui-monospace, monospace; pointer-events: none;
  }
  #ceUniverse .cu-touch-hint[hidden] { display: none; }
}
#ceUniverse .cu-stage-note {
  /* Top-left, not bottom-left: the coverage/symbol-count disclosure is required reading, not
     decoration, and the bottom-left corner is exactly where a dense national cluster (or the
     Alaska inset) tends to sit on a short mobile canvas — empirically the area with the fewest
     drawn markers is the top edge (open sky north of the CONUS outline), even at the narrowest
     tested widths, so the note collides with real map content far less often here. */
  /* V4: quieter. A small, low-contrast status chip that reads as metadata, not a competing label
     over the visualization: smaller type, a barely-there fill, and a hairline border. */
  position: absolute; left: 12px; top: 10px; z-index: 5; font-size: 11px; letter-spacing: .01em; color: #86A3B4;
  font-family: 'JetBrains Mono', monospace; background: rgba(4,16,24,.55); border: 1px solid rgba(159,208,236,.14);
  padding: 4px 8px; border-radius: 6px; pointer-events: none;
}
#ceUniverse .cu-stage-note[hidden] { display: none; }
#ceUniverse .cu-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #8CA9BA; font-size: 13.5px; font-family: 'JetBrains Mono', monospace; z-index: 4;
}
#ceUniverse .cu-loading[hidden] { display: none; }

/* ---- legend ---- */
/* V4: compact legend. One quiet strip under the map: the percentile ramp (what color means), what a
   hex is, what marker size means at later zooms, the neutral unranked swatch, and the cluster
   badge. Subordinate to the map (smaller type, lower-contrast chrome), never competing with it. */
#ceUniverse .cu-legend {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 12px;
  padding: 10px 14px; background: rgba(9,30,42,.45); border: 1px solid rgba(159,208,236,.14); border-radius: 10px;
  font-size: 11.5px; color: #9FC0D2;
}
#ceUniverse .cu-legend-group { display: flex; align-items: center; gap: 8px; }
#ceUniverse .cu-legend-scale-group { flex-direction: column; align-items: flex-start; gap: 4px; }
#ceUniverse .cu-legend-swatches { display: inline-flex; align-items: center; gap: 5px; }
#ceUniverse .cu-legend-dot { border-radius: 50%; display: inline-block; flex: none; background: #6B7A85; }
#ceUniverse .cu-legend-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; }
#ceUniverse .cu-legend-fine { color: #7F9AAB; font-size: 9.5px; }
/* Percentile ramp bar: background painted by assets/ce-universe.js from the shared colour LUT. */
#ceUniverse .cu-legend-ramp { display: block; width: 220px; height: 8px; border-radius: 4px; border: 1px solid rgba(232,244,250,.12); }
#ceUniverse .cu-legend-ramp[hidden] { display: none; }
#ceUniverse .cu-legend-ramp-ticks { width: 220px; }
/* A single flat hex swatch (clip-path, no canvas), the same quiet slate the ramp's midpoint uses. */
#ceUniverse .cu-legend-hex {
  display: inline-block; flex: none; width: 14px; height: 12px; background: #6E8797;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
/* Fixed 0/25/50/75/100 scale, sampled from the SAME ramp function the markers use (JS sets the
 * background gradient) — never a hand-typed CSS gradient that could silently drift from it, and
 * never rescaled to whatever is on screen: the domain is always the full 0-100 score range. */
#ceUniverse .cu-legend-scale { display: flex; flex-direction: column; gap: 2px; width: 168px; }
#ceUniverse .cu-legend-scale[hidden] { display: none; }
#ceUniverse .cu-legend-bar { display: block; height: 8px; border-radius: 4px; }
#ceUniverse .cu-legend-ticks { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: #8CA9BA; }
/* V3 (percentile colour) legend: a histogram of the national score distribution for the active
 * lens, replacing the plain gradient bar above (unused entirely on the ?universe=v2 path, and vice
 * versa). Same CLS-safe "starts hidden in HTML, toggled by script to match the map's always-true
 * initial heat-band state" pattern as .cu-legend-scale above -- see assets/ce-universe.js. */
#ceUniverse .cu-legend-histogram { display: flex; flex-direction: column; gap: 2px; width: 220px; }
#ceUniverse .cu-legend-histogram[hidden] { display: none; }
#ceUniverse .cu-legend-hist-bars { display: flex; align-items: flex-end; gap: 1px; height: 28px; position: relative; }
#ceUniverse .cu-hbar { flex: 1 1 0; border-radius: 1px 1px 0 0; min-height: 2px; }
#ceUniverse .cu-legend-hist-tick { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
#ceUniverse .cu-legend-hist-tick[hidden] { display: none; }
#ceUniverse .cu-legend-cluster-swatch {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: #0B2431; border: 2px solid #59C8F5; color: #E7F1F7;
  font: 700 9px 'Space Grotesk', sans-serif;
}

/* ---- accessible city list (keyboard/screen-reader path; toggled visible) ---- */
#ceUniverse .cu-listtoggle {
  font-size: 12.5px; color: #7FC4E8; background: none; border: 1px solid rgba(127,196,232,.35);
  border-radius: 8px; padding: 7px 12px; cursor: pointer; margin-top: 12px; min-height:44px; font-family: 'Inter', sans-serif;
}
#ceUniverse .cu-listtoggle:hover { background: rgba(127,196,232,.1); }
#ceUniverse .cu-citylist {
  margin-top: 12px; max-height: 280px; overflow-y: auto; border: 1px solid rgba(159,208,236,.2);
  border-radius: 10px; background: rgba(9,30,42,.5);
}
#ceUniverse .cu-citylist[hidden] { display: none; }
#ceUniverse .cu-citylist ul { list-style: none; margin: 0; padding: 0; }
#ceUniverse .cu-citylist li { border-bottom: 1px solid rgba(159,208,236,.1); }
#ceUniverse .cu-citylist li:last-child { border-bottom: none; }
#ceUniverse .cu-citylist button {
  width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px;
  background: transparent; border: none; color: #E7F1F7; font-size: 13px; text-align: left; cursor: pointer; min-height: 40px;
}
#ceUniverse .cu-citylist button:hover, #ceUniverse .cu-citylist button:focus-visible { background: rgba(127,196,232,.12); min-height: 44px; }
#ceUniverse .cu-citylist button { min-height: 44px; }
#ceUniverse .cu-citylist .cu-cl-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #8CA9BA; text-align: right; }
#ceUniverse .cu-list-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(159,208,236,.15); }
#ceUniverse .cu-list-scope { display: inline-flex; gap: 4px; }
#ceUniverse .cu-scope-btn {
  font: 600 11.5px 'Inter', sans-serif; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(159,208,236,.28);
  background: transparent; color: #9FC0D2; cursor: pointer; min-height: 44px;
}
#ceUniverse .cu-scope-btn[aria-pressed="true"] { background: #2A5FD0; border-color: #2A5FD0; color: #fff; }
/* The name filter sits between the scope buttons and the sort control. `margin-left: auto` moves
   off the sort label and onto this, so the pair travels to the right edge together rather than
   the filter being pinned left with the sort adrift in the middle. */
#ceUniverse .cu-list-filter-label { font-size: 11.5px; color: #8CA9BA; margin-left: auto; }
#ceUniverse .cu-list-filter {
  background: rgba(9,30,42,.8); border: 1px solid rgba(159,208,236,.28); color: #E7F1F7;
  border-radius: 8px; padding: 6px 9px; font-size: 12.5px; min-height: 34px;
  width: 150px; max-width: 100%; font-family: 'Inter', sans-serif;
}
#ceUniverse .cu-list-filter::placeholder { color: #7D97A8; }
#ceUniverse .cu-list-sort-label { font-size: 11.5px; color: #8CA9BA; }
#ceUniverse .cu-list-sort { background: rgba(9,30,42,.8); border: 1px solid rgba(159,208,236,.28); color: #E7F1F7; border-radius: 8px; padding: 6px 8px; font-size: 12.5px; min-height: 34px; }
#ceUniverse .cu-list-count { font-size: 11.5px; color: #8CA9BA; padding: 8px 14px 0; margin: 0; }
#ceUniverse .cu-list-pager { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid rgba(159,208,236,.15); font-size: 12.5px; color: #9FC0D2; }
#ceUniverse .cu-list-pager button { background: none; border: 1px solid rgba(159,208,236,.28); color: #E7F1F7; border-radius: 8px; padding: 8px 12px; cursor: pointer; min-height: 44px; }
#ceUniverse .cu-list-pager button:disabled { opacity: .35; cursor: default; }
#ceUniverse .cu-saved { margin-top: 14px; padding: 15px 16px; border: 1px solid rgba(159,208,236,.18); border-radius: 12px; background: rgba(7,31,43,.68); }
/* h2, not h3: index.html made "Your saved markets" an h2 for the heading outline, and this rule kept
   targeting the old h3, so the title fell back to the light page's --ink (#141922) on this dark
   panel at 1.02:1, which made it invisible. */
#ceUniverse .cu-saved h2 { color: #EAF3F8; font-size: 14px; margin: 0; }
#ceUniverse .cu-saved p { color: #789BAB; font-size: 11.5px; line-height: 1.45; margin: 4px 0 0; }
#ceUniverse .cu-saved ul { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 11px 0 0; padding: 0; }
#ceUniverse .cu-saved li { display: inline-flex; align-items: stretch; border: 1px solid rgba(159,208,236,.22); border-radius: 8px; overflow: hidden; }
#ceUniverse .cu-saved li a, #ceUniverse .cu-saved li button { background: rgba(255,255,255,.035); border: 0; color: #DCECF3; min-height: 44px; padding: 8px 10px; font-size: 11.5px; }
#ceUniverse .cu-saved li a { display: inline-flex; align-items: center; text-decoration: none; }
#ceUniverse .cu-saved li button { border-left: 1px solid rgba(159,208,236,.18); color: #8FB1C0; cursor: pointer; }
#ceUniverse .cu-saved-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#ceUniverse .cu-saved-actions a, #ceUniverse .cu-saved-actions button { min-height: 44px; padding: 9px 12px; border-radius: 8px; border: 1px solid rgba(159,208,236,.25); background: transparent; color: #DDF2FB; font: 600 12px 'Space Grotesk',sans-serif; text-decoration: none; cursor: pointer; }

/* ---- data vintage note ---- */
/* Starts as a short static placeholder (build-time date only) and is replaced once the map's real
 * data loads with the full disclosure sentence: generation date, ranked-vs-tracked coverage count,
 * and outline-source provenance. That sentence is real, required disclosure (see CLAUDE.md,
 * "Credibility over precision") and must not be hidden or shortened to avoid a layout shift, so the
 * fix is to reserve its measured final line count instead: 2 lines at desktop widths, 5 lines at
 * the mobile breakpoint below, both in em so the reservation tracks font-size rather than a value
 * that silently goes stale if the type scale ever changes. */
#ceUniverse .cu-vintage { margin-top: 10px; font-size: 11.5px; color: #6C93A6; font-family: 'JetBrains Mono', monospace; line-height: 1.5; min-height: 3em; }

/* ---- city detail panel (bottom sheet on mobile, side panel on desktop) ---- */
#ceUniverse .cu-panel {
  /* positioned inside .cu-stage, so it overlays the map itself */
  position: absolute; z-index: 80; background: #0B2431; border: 1px solid rgba(159,208,236,.3);
  box-shadow: 0 28px 64px rgba(0,0,0,.55); color: #E7F1F7;
  right: 20px; top: 20px; width: min(360px, calc(100% - 40px)); border-radius: 16px; max-height: calc(100% - 40px);
  overflow-y: auto; transform: translateX(12px); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease;
}
#ceUniverse .cu-panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
#ceUniverse .cu-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 18px 18px 6px; }
#ceUniverse .cu-panel-close { background: none; border: none; color: #9FC0D2; font-size: 20px; cursor: pointer; line-height: 1; padding: 4px; min-width: 32px; min-height: 32px; }
#ceUniverse .cu-panel-close:hover { color: #fff; }
#ceUniverse .cu-panel-city { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; color: #fff; margin: 0; }
#ceUniverse .cu-panel-state { color: #8CA9BA; font-size: 13px; margin-top: 2px; }
#ceUniverse .cu-panel-body { padding: 4px 18px 18px; }
#ceUniverse .cu-grade-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 16px; }
#ceUniverse .cu-grade-chip { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
#ceUniverse .cu-grade-score { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #9FC0D2; }
#ceUniverse .cu-grade-score b { color: #fff; font-size: 17px; }
/* The current exploration headline: whichever lens is active, shown as the FIRST thing in the
 * panel, ahead of the always-Balanced grade below it — so switching lenses changes what the panel
 * leads with, matching what the map is currently colored by. */
#ceUniverse .cu-headline-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; }
#ceUniverse .cu-headline-chip { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #07202E; flex: none; }
#ceUniverse .cu-headline-chip-status { width: auto; min-width: 72px; height: auto; min-height: 46px; padding: 7px 10px; font-size: 12px; line-height: 1.15; text-align: center; }
#ceUniverse .cu-headline-k { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #8CA9BA; }
#ceUniverse .cu-headline-note { font-size: 12px; color: #9FC0D2; line-height: 1.4; margin-top: 2px; max-width: 40ch; }
#ceUniverse .cu-score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
#ceUniverse .cu-score-cell { background: rgba(255,255,255,.04); border: 1px solid rgba(159,208,236,.14); border-radius: 9px; padding: 9px 6px; text-align: center; }
#ceUniverse .cu-score-cell.active { background: rgba(127,196,232,.14); border-color: rgba(127,196,232,.5); }
#ceUniverse .cu-score-cell .k { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: #8CA9BA; font-family: 'JetBrains Mono', monospace; }
#ceUniverse .cu-score-cell .v { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; color: #fff; margin-top: 3px; }
#ceUniverse .cu-hold-brief { margin: 0 0 16px; padding: 12px; border-radius: 11px; background: rgba(88,197,214,.08); border: 1px solid rgba(88,197,214,.22); }
#ceUniverse .cu-hold-brief-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: #EAF7FB; font-size: 13px; }
#ceUniverse .cu-hold-brief-head span { color: #8FD4DE; font: 600 10.5px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .05em; }
#ceUniverse .cu-hold-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#ceUniverse .cu-hold-grid > div { padding: 8px; border-radius: 8px; background: rgba(4,16,24,.42); min-width: 0; }
#ceUniverse .cu-hold-grid span { display: block; color: #8CA9BA; font-size: 9.5px; line-height: 1.35; margin-bottom: 3px; }
#ceUniverse .cu-hold-grid b { display: block; color: #F3FAFD; font: 600 11.5px/1.35 'JetBrains Mono', monospace; overflow-wrap: anywhere; }
#ceUniverse .cu-facts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; }
#ceUniverse .cu-facts li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(159,208,236,.08); }
#ceUniverse .cu-facts .k { color: #9FC0D2; }
#ceUniverse .cu-facts .v { font-family: 'JetBrains Mono', monospace; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
#ceUniverse .cu-caveat { font-size: 11.5px; color: #8CA9BA; line-height: 1.5; margin: 0 0 14px; padding: 10px 12px; background: rgba(255,255,255,.03); border-radius: 8px; }
#ceUniverse .cu-chooser-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#ceUniverse .cu-chooser-list button { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(159,208,236,.14); border-radius: 9px; color: #E7F1F7; font-size: 13px; text-align: left; cursor: pointer; min-height: 44px; }
#ceUniverse .cu-chooser-list button:hover, #ceUniverse .cu-chooser-list button:focus-visible { background: rgba(127,196,232,.14); }
#ceUniverse .cu-panel-actions { display: grid; gap: 8px; margin-top: 4px; }
#ceUniverse .cu-panel-actions a, #ceUniverse .cu-panel-actions button {
  display: flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 13.5px; padding: 11px 14px; border-radius: 9px; text-decoration: none; cursor: pointer; min-height: 44px;
}
#ceUniverse .cu-btn-primary { background: #2A5FD0; color: #fff; border: none; }
#ceUniverse .cu-btn-primary:hover { background: #1E47A8; }
#ceUniverse .cu-btn-ghost { background: transparent; color: #E7F1F7; border: 1px solid rgba(159,208,236,.3); }
#ceUniverse .cu-btn-ghost:hover { border-color: #7FC4E8; }
#ceUniverse .cu-unranked-note { font-size: 12px; color: #8CA9BA; background: rgba(255,255,255,.03); border: 1px dashed rgba(159,208,236,.25); border-radius: 8px; padding: 10px 12px; margin: 8px 0 14px; line-height: 1.5; }
/* Item 5: the confidence figure, directly under the score grid for a ranked city, so a thin
 * score (few measured factors) is never visually indistinguishable from a solid one, without
 * leaving the map. Deliberately understated (matches .cu-headline-note's weight, not a headline
 * chip of its own): a supporting disclosure, not a second score. */
#ceUniverse .cu-confidence-note { font-size: 12px; color: #9FC0D2; line-height: 1.4; margin: -6px 0 14px; }
#ceUniverse .cu-zip-note { font-size: 12px; color: #8CA9BA; line-height: 1.5; margin-top: 8px; }
#ceUniverse .cu-zip-note a { color: #7FC4E8; }

@media (max-width: 720px) {
  #ceUniverse .cu-map-area { max-height: 56vh; }
  /* The map overlays are sized for a 1100px canvas and were being read on a 332px one, where the
     coverage note alone spanned most of the width and the controls crowded the insets. Everything
     that sits ON the canvas gets a smaller scale here; the 44px touch targets are untouched. */
  #ceUniverse .cu-stage-note { left: 9px; top: 8px; font-size: 9.5px; padding: 4px 7px; max-width: calc(100% - 18px); }
  #ceUniverse .cu-zoom-hint { font-size: 11.5px; padding: 8px 12px; max-width: calc(100% - 28px); }
  #ceUniverse .cu-legend { padding: 12px 12px; gap: 10px 14px; }
  #ceUniverse .cu-legend-label { font-size: 10.5px; line-height: 1.45; }
  /* The instruction is a sentence, not a chip: nowrap pushed it straight off the side of a phone.
     A rounded rectangle that wraps reads fine and keeps the whole instruction on screen. */
  #ceUniverse .cu-hint { white-space: normal; border-radius: 14px; font-size: 12px; line-height: 1.45; }
  /* The old mobile treatment made .cu-panel an 88%-height sheet absolutely covering almost the
   * entire map — a phone user opening a city lost the geographic context that made the map worth
   * having open in the first place. It is now a normal in-flow block BELOW the map: the map stays
   * fully visible, un-covered, the whole time a panel is open. */
  #ceUniverse .cu-panel {
    position: static; width: 100%; max-width: none; margin-top: 14px;
    border-radius: 16px; box-shadow: none; overflow-y: auto;
    transform: translateY(8px); opacity: 0; max-height: 0; border-width: 0;
    transition: transform .22s ease, opacity .22s ease, max-height .22s ease;
  }
  #ceUniverse .cu-panel.open {
    transform: translateY(0); opacity: 1; max-height: 70vh; border-width: 1px;
  }
  #ceUniverse .cu-zoom { margin-left: 0; }
  #ceUniverse .cu-score-grid { grid-template-columns: 1fr 1fr; }
  #ceUniverse .cu-list-controls { flex-direction: column; align-items: stretch; }
  /* Stacked at this breakpoint, so the auto margin that right-aligns the filter on a wide row
     would instead push a vertical gap into the column. */
  #ceUniverse .cu-list-filter-label { margin-left: 0; }
  #ceUniverse .cu-list-filter { width: 100%; font-size: 16px; }
  #ceUniverse .cu-vintage { min-height: 7.5em; }
  #ceUniverse.cu-fullscreen .cu-wrap { padding: 10px; }
  #ceUniverse.cu-fullscreen .cu-controls { gap: 6px; }
  #ceUniverse.cu-fullscreen .cu-search { flex-basis: 100%; max-width: none; }
  #ceUniverse.cu-fullscreen .cu-lenses { order: 3; }
  #ceUniverse.cu-fullscreen .cu-breadcrumb { min-height: 26px; margin: 2px 0; }
  #ceUniverse.cu-fullscreen .cu-map-area { height: calc(100dvh - 220px); min-height: 320px; max-height: none; }
  #ceUniverse.cu-fullscreen .cu-panel { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 80; width: auto; margin: 0; max-height: min(58dvh, 520px); border-width: 1px; box-shadow: 0 20px 55px rgba(0,0,0,.62); }
  #ceUniverse.cu-fullscreen .cu-panel.open { max-height: min(58dvh, 520px); }
}

@media (max-width: 340px) {
  #ceUniverse .cu-zoom {
    display: grid;
    grid-template-columns: 44px 44px minmax(0, 1fr);
    width: 100%;
  }
  #ceUniverse .cu-zoom button { width: 44px; }
  #ceUniverse .cu-zoom button.cu-reset { width: 100%; }
  #ceUniverse .cu-zoom .cu-fullscreen-toggle { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  #ceUniverse .cu-hint { animation: none; }
  #ceUniverse .cu-panel { transition: none; }
}

#ceUniverse .cu-noscript {
  margin-top: 14px; padding: 14px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.6;
  color: #BFE0F0; background: rgba(127, 196, 232, .10); border: 1px solid rgba(127, 196, 232, .28);
}
#ceUniverse .cu-noscript a { color: #7FC4E8; }

#ceUniverse .cu-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#ceUniverse :focus-visible { outline: 2px solid #7FC4E8; outline-offset: 2px; }

/* Homepage optical instrument: visual atmosphere around a real preference handoff. */
#ceUniverse .cu-head{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:20px 38px;align-items:center}
#ceUniverse .cu-copy{position:relative;z-index:2;padding:12px 0}
#ceUniverse .cu-title{font-size:clamp(36px,4.35vw,61px);line-height:1.04;letter-spacing:-.055em;max-width:13ch;text-wrap:balance}
#ceUniverse .cu-sub{max-width:49ch;font-size:15px;line-height:1.7}
#ceUniverse .cu-eyebrow{color:#9bbdce;font-size:10px;letter-spacing:.17em}
#ceUniverse .cu-wrap{padding-top:28px}
#ceUniverse .cu-hint{grid-column:1/-1;justify-self:start;margin:0;animation:none}
#ceUniverse .cu-intro-actions{gap:10px;margin-top:22px}
#ceUniverse .cu-intro-actions a{font-size:13px;text-decoration:none;border-radius:12px;gap:8px}
#ceUniverse .cu-intro-actions a:first-child{background:linear-gradient(120deg,#b4edff,#61ceee);box-shadow:0 0 32px #4dd8ff20}
#ceUniverse .cu-underwrite{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;color:#a9c4d2;font-size:12px;text-underline-offset:4px}

#ceUniverse .cu-stage{border-radius:18px;box-shadow:0 0 0 1px #78c9ff0a,0 22px 70px #0004}

@media(min-width:1100px){#ceUniverse .cu-wrap{max-width:1280px}}
@media(max-width:760px){#ceUniverse .cu-head{grid-template-columns:1fr;gap:18px}#ceUniverse .cu-title{max-width:17ch;font-size:clamp(35px,7.2vw,48px)}#ceUniverse .cu-wrap{padding-top:24px}#ceUniverse .cu-hint{font-size:11px}}
@media(prefers-reduced-motion:reduce){#ceUniverse .cu-intro-actions a{transition:none!important}}

/* The observatory: visual depth around one clear decision. Native canvas + CSS, no video payload. */
#ceUniverse{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 70% 30% at 85% 2%,#1f5a5f8c,transparent),radial-gradient(ellipse 55% 28% at 0% 4%,#26386e70,transparent),linear-gradient(180deg,#0f2531 0,#0b1d27 900px)}
#ceUniverse::before{content:"";position:absolute;inset:0 0 auto;height:850px;pointer-events:none;z-index:-1;background:linear-gradient(115deg,transparent 25%,#76ebce09 46%,transparent 65%)}
#ceUniverse .cu-wrap{max-width:1340px;padding:46px 40px 32px}
#ceUniverse .cu-head{gap:28px 42px;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);position:relative;padding-bottom:22px}
#ceUniverse .cu-copy{padding:20px 0 30px}
#ceUniverse .cu-eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;color:#9dcbbf;margin-bottom:24px}
#ceUniverse .cu-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:#99e2ca;box-shadow:0 0 16px #86f1c9}
#ceUniverse .cu-title{font-size:clamp(45px,5.1vw,74px);line-height:1.025;font-weight:500;letter-spacing:-.065em;max-width:12ch;color:#f0f8f5;text-wrap:balance}
#ceUniverse .cu-sub{font-size:15px;line-height:1.8;max-width:43ch;color:#abc2cb;margin-top:23px}
#ceUniverse .cu-intro-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:29px}
#ceUniverse .cu-intro-actions a{min-height:50px;display:inline-flex;align-items:center;padding:14px 20px;font-size:13px;border-radius:7px;font-weight:650}
#ceUniverse .cu-intro-actions a:first-child{color:#073329;background:linear-gradient(115deg,#c5f5db,#8edabd);box-shadow:0 6px 36px #72d3bd24;border-color:#b3efd4}
#ceUniverse .cu-intro-actions a:nth-child(2){color:#e0efed;background:#d7e8ef07;border:1px solid #a3cfc53d}
#ceUniverse .cu-intro-actions a:hover{transform:translateY(-2px);box-shadow:0 8px 35px #87dcc029}
#ceUniverse .cu-underwrite{font-size:11px;margin-top:16px;color:#9bbab5;text-decoration:none}
#ceUniverse .cu-underwrite::before{content:"";display:block;width:20px;height:1px;background:#91bdb7;margin-right:10px}
.observatory-caption{font:10px/1.5 'JetBrains Mono',monospace;color:#91b2bd;letter-spacing:.08em;margin:12px 0 0}

#ceUniverse .cu-hint{display:none}
#ceUniverse #cuSavedActions[hidden]{display:none}
#ceUniverse.cu-fullscreen .obs-journey,
#ceUniverse.cu-fullscreen .obs-map-title,
#ceUniverse.cu-fullscreen .obs-resume,
#ceUniverse.cu-fullscreen .cu-saved{display:none}
.obs-journey{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;padding:24px 0;margin:4px 0 32px;border-top:1px solid #9fc3c32b;border-bottom:1px solid #9fc3c32b}
.obs-step{display:flex;gap:14px;align-items:center;font-size:12px;color:#c6dedc;text-decoration:none}
.obs-step>span{font:10px 'JetBrains Mono',monospace;color:#87c5b6;border:1px solid #83bcad47;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;flex:none}
.obs-step b{display:block;font-size:12px;font-weight:550;color:#e3f0ea;margin-bottom:4px}
.obs-step small{color:#97b1b8;font-size:11px;line-height:1.5}
.obs-map-title{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:22px}
.obs-map-title h2{color:#e5f3ef;font-size:27px;font-weight:450;letter-spacing:-.04em;line-height:1.2}
.obs-map-title p{color:#9bb9bd;font:10px/1.6 'JetBrains Mono',monospace;margin-bottom:9px;text-transform:uppercase;letter-spacing:.12em}
.obs-map-title>a{font-size:12px;color:#b5d4cc;min-height:44px;display:flex;align-items:center;text-underline-offset:4px}
.obs-resume{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 25px;border:1px solid #80c9b449;background:linear-gradient(120deg,#193d3b80,#0b1d28);border-radius:12px;margin-bottom:28px;color:#cce3db}
.obs-resume[hidden]{display:none}
.obs-resume b{font:500 19px 'Space Grotesk',sans-serif;display:block}.obs-resume p{font-size:12px;color:#a0c0b9;margin:5px 0 0}.obs-resume a{color:#b7f3d1;font-size:13px;min-height:44px;display:flex;align-items:center;white-space:nowrap;text-underline-offset:5px}
.home-depth{border-top:1px solid #d5e0e1;border-bottom:1px solid #d5e0e1;background:#edf2f3}
.home-depth>summary{max-width:1160px;margin:auto;padding:24px 28px;cursor:pointer;font:500 19px 'Space Grotesk',sans-serif;color:#183946;min-height:64px;list-style-position:inside}
.home-depth>summary span{font:12px Inter,sans-serif;color:#586e7b;display:block;margin:7px 0 0 20px}
.home-depth[open]>summary{border-bottom:1px solid #d5e0e1}
.match-callout{background:linear-gradient(115deg,#0b3638,#123340)!important;border:1px solid #a5d5c448!important;box-shadow:0 15px 40px #163b3012;padding:25px!important}
.match-callout h3{color:#eef8f3!important}.match-callout p,.match-callout .mc-k{color:#bad5d0!important}.match-callout a{color:#12392d!important;background:#b7efce!important;border-color:#a0d9bd70!important}
@media(min-width:1400px){#ceUniverse .cu-head{min-height:610px}}
@media(max-width:1000px){#ceUniverse .cu-wrap{padding:30px 25px}#ceUniverse .cu-head{gap:20px}#ceUniverse .cu-title{font-size:clamp(40px,5.5vw,57px)}.obs-step small{font-size:10px}}
@media(max-width:760px){#ceUniverse .cu-wrap{padding:30px 20px}#ceUniverse .cu-head{grid-template-columns:1fr;gap:2px}#ceUniverse .cu-copy{padding:4px 0 18px}#ceUniverse .cu-title{max-width:15ch;font-size:clamp(42px,10.5vw,64px)}#ceUniverse .cu-eyebrow{margin-bottom:20px}#ceUniverse .cu-sub{font-size:14px;margin-top:18px}#ceUniverse .cu-intro-actions{margin-top:23px}#ceUniverse .cu-intro-actions a{font-size:12px;padding:12px 15px}.obs-journey{grid-template-columns:1fr;gap:19px;margin-top:8px;padding:22px 0}.obs-step small{font-size:11px}.obs-map-title{align-items:start}.obs-map-title h2{font-size:24px}.obs-map-title>a{font-size:11px}.obs-resume{padding:18px;align-items:start;flex-direction:column;gap:7px}.obs-resume b{font-size:18px}.home-depth>summary{padding:22px 20px;font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}#ceUniverse *,#ceUniverse *::before{animation:none!important;transition:none!important}}

.deal-showcase{background:#0d2330;color:#d6e6ec;padding:90px 0;overflow:hidden;border-top:1px solid #24404e}
.deal-showcase .eyebrow{color:#83d9ef}.deal-showcase h2{color:#f1f8fa;font-size:clamp(32px,4.3vw,56px);max-width:700px;line-height:1.06;margin:16px 0}.deal-intro{max-width:630px;color:#b5cbd6;font-size:16px;line-height:1.7}
.deal-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:54px;margin-top:38px;align-items:start}.deal-controls[hidden]{display:none}.deal-controls label{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#c7dbe4}.deal-controls output{color:#fff;font-variant-numeric:tabular-nums;font-weight:600}.deal-controls input{width:100%;accent-color:#7de7d0;min-height:44px;margin:3px 0 16px;cursor:pointer}.deal-controls button{background:#143342;color:#eaf6fa;border:1px solid #416170;border-radius:7px;padding:12px 15px;min-height:44px;font:inherit;cursor:pointer}.deal-controls button:hover{background:#204758}.deal-actions{display:flex;flex-wrap:wrap;gap:10px}.deal-assumptions{margin-top:22px;font-size:13px;line-height:1.7;color:#b5cbd6}
.deal-ledger{position:relative;padding:28px;border:1px solid #365365;border-radius:20px;background:radial-gradient(ellipse at top right,#1d4a5a,transparent 65%),#102a37;box-shadow:0 24px 80px #0004}.deal-ledger:before{content:"";position:absolute;top:-1px;left:25%;right:25%;height:1px;background:#8cffe0;box-shadow:0 0 24px #8cffe0}.deal-ledger h3{font-size:17px;color:#f0f7fa;margin-bottom:18px}.deal-income,.deal-total{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding-bottom:16px;border-bottom:1px solid #365365}.deal-row{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px;margin:14px 0}.deal-row b{font-variant-numeric:tabular-nums;font-weight:500;color:#edf7fc}.deal-track{grid-column:1/-1;height:5px;background:#203d4b;border-radius:5px;overflow:hidden}.deal-track i{display:block;height:100%;background:linear-gradient(90deg,#478acb,#8be8da);border-radius:5px;transition:width .5s ease}.deal-row:nth-child(n+4) i{background:linear-gradient(90deg,#6c83b8,#b5bafa)}.deal-total{padding:10px 0 18px}.deal-result{padding-top:18px}.deal-result small{color:#bad1dc;font-size:12px}.deal-result strong{display:block;color:#9cf1d5;font-size:clamp(40px,5vw,60px);letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1.2}.deal-showcase[data-outcome=negative] .deal-result strong{color:#ffb5a7}.deal-result p{font-size:13px;line-height:1.6;color:#c9dde6;margin-top:10px}.deal-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}.deal-facts dt{font-size:12px;color:#b5cbd6}.deal-facts dd{font-size:21px;font-variant-numeric:tabular-nums;color:#fff;margin:4px 0}.deal-link{display:inline-flex;align-items:center;min-height:44px;color:#9cebdc;font-weight:600;text-underline-offset:5px}.deal-showcase :focus-visible{outline:3px solid #9cebdc;outline-offset:4px}
@media(max-width:760px){.deal-showcase{padding:56px 0}.deal-layout{grid-template-columns:1fr;gap:30px}.deal-ledger{padding:22px}.deal-showcase .wrap{padding:0 20px}}
@media(prefers-reduced-motion:reduce){.deal-track i{transition:none}}

/* A map-first explorer: one key in view, explanations available on demand. */

#ceUniverse .obs-map-title{margin-top:54px;margin-bottom:26px}
#ceUniverse .obs-map-title h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.045em}
#ceUniverse .cu-map-invite{display:block;color:#a8c2c8;font-size:14px;margin-top:12px}
#ceUniverse .cu-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
#ceUniverse .cu-search{grid-column:1/-1;max-width:none;width:100%;flex:none}
#ceUniverse .cu-search input{min-height:56px;background:#0a202a;border-color:#618d8c55;font-size:16px;border-radius:12px}
#ceUniverse .cu-search-submit{min-height:56px;background:#aae6cf;border-radius:12px;padding:0 24px}
#ceUniverse .cu-lenses{justify-content:flex-start;background:none;border:0;border-radius:0;padding:0;gap:6px}
#ceUniverse .cu-lens{border:1px solid #52767555;border-radius:7px;font-size:12px;padding:7px 15px;flex:none}
#ceUniverse .cu-lens[aria-pressed=true]{background:#aae6cf;color:#08282d;box-shadow:none;border-color:#aae6cf}
#ceUniverse .cu-zoom{margin-left:0;justify-content:flex-end}
#ceUniverse .cu-zoom button{border-color:#52767555;border-radius:7px;font-size:12px}
#ceUniverse .cu-zoom button.cu-reset{width:auto;padding:0 9px;font-size:11px}
#ceUniverse .cu-breadcrumb{margin:12px 0 0}
#ceUniverse .cu-map-area{border-color:#70928a44;box-shadow:none;border-radius:16px}
#ceUniverse .cu-stage{box-shadow:none}
#ceUniverse .cu-map-footer{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:22px 0 14px}
#ceUniverse .cu-legend{padding:0;margin:0;border:0;border-radius:0;background:none;gap:24px;flex:1;min-width:0}
#ceUniverse .cu-legend-scale-group{width:min(100%,360px);gap:7px}
#ceUniverse .cu-key-heading{display:flex;justify-content:space-between;gap:15px;width:100%;font-size:12px;color:#d1e6df}
#ceUniverse #cuKeyUnit{font-size:10px;color:#99b8bb}
#ceUniverse .cu-legend-ramp,#ceUniverse .cu-legend-ramp-ticks{width:100%}
#ceUniverse .cu-legend-ramp{height:6px;border:0}
#ceUniverse .cu-legend-ramp-ticks{font-family:Inter,sans-serif;font-size:10px;color:#b5ccce;gap:4px}
#ceUniverse .cu-key-neutral{display:flex;align-items:center;gap:7px;color:#a6babc;font-size:11px}
#ceUniverse .cu-key-neutral .cu-legend-dot{width:8px;height:8px}
#ceUniverse .cu-listbar{margin:0;flex:none}
#ceUniverse .cu-listtoggle{border:1px solid #698d8355;color:#c0e6da;background:none;border-radius:8px;padding:10px 16px;min-height:44px;font:12px Inter,sans-serif}
#ceUniverse .cu-map-guide{border-top:1px solid #86aaa326;border-bottom:1px solid #86aaa326;color:#a9c1c5}
#ceUniverse .cu-map-guide summary{min-height:48px;padding:15px 0;font-size:12px;cursor:pointer;list-style-position:inside;color:#b8d6cf}
#ceUniverse .cu-map-guide summary:focus-visible{outline:2px solid #a7e4ce;outline-offset:4px}
#ceUniverse .cu-guide-content{display:grid;grid-template-columns:1fr 1fr;gap:22px 44px;padding:8px 0 22px}
#ceUniverse .cu-guide-content h3{font:500 15px 'Space Grotesk',sans-serif;color:#dcebe7;margin:0 0 12px}
#ceUniverse .cu-guide-content p,#ceUniverse .cu-symbol-key{font-size:12px;line-height:1.7;margin:0 0 12px}
#ceUniverse .cu-guide-content a{color:#b4ebd7;text-underline-offset:4px}
#ceUniverse .cu-symbol-key{list-style:none;padding:0}
#ceUniverse .cu-symbol-key li{display:flex;align-items:center;gap:10px;margin:8px 0}
#ceUniverse .cu-guide-content .cu-vintage{grid-column:1/-1;margin:0;padding-top:12px;border-top:1px solid #86aaa326;font-size:10px}
#ceUniverse .cu-saved{border:0;background:none;padding:20px 0 0;margin-top:0}
#ceUniverse .cu-saved h2{font-size:15px}
#ceUniverse.cu-fullscreen .cu-map-footer,#ceUniverse.cu-fullscreen .cu-map-guide{display:none}
@media(max-width:1000px){#ceUniverse .cu-controls{grid-template-columns:1fr}#ceUniverse .cu-search{grid-column:1}#ceUniverse .cu-zoom{justify-content:flex-start}#ceUniverse .cu-legend{gap:12px}}
@media(max-width:600px){#ceUniverse .obs-map-title{margin-top:34px;align-items:start;flex-direction:column;gap:7px}#ceUniverse .cu-map-invite{font-size:12px}#ceUniverse .cu-lenses{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:100%}#ceUniverse .cu-lens{font-size:11px;padding:7px 8px}#ceUniverse .cu-lens:first-child{grid-column:span 2}#ceUniverse .cu-map-footer{align-items:stretch;flex-direction:column;gap:14px;padding-top:18px}#ceUniverse .cu-legend-scale-group{width:100%}#ceUniverse .cu-legend{width:100%}#ceUniverse .cu-guide-content{grid-template-columns:1fr;gap:18px}#ceUniverse .cu-listtoggle{width:100%;text-align:left}#ceUniverse .cu-zoom{flex-wrap:wrap}#ceUniverse .cu-search-submit{padding:0 15px}}

/* Explorer controls stay outside the geographic canvas, leaving every label reachable. */
#ceUniverse .cu-map-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
#ceUniverse .cu-surface-switch{display:flex;padding:4px;border:1px solid #719c9250;border-radius:12px;background:#071d26;gap:4px}
#ceUniverse .cu-surface-switch button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;border:0;border-radius:8px;background:transparent;color:#afc6c7;font:600 13px 'Space Grotesk',sans-serif;cursor:pointer;transition:background .18s,color .18s}
#ceUniverse .cu-surface-switch button[aria-pressed="true"]{color:#edfcf3;background:#23524d;box-shadow:0 1px 8px #0003}
#ceUniverse .cu-surface-switch svg{width:18px;height:18px;fill:currentColor}
#ceUniverse .cu-surface-switch path{fill:none;stroke:currentColor;stroke-width:1.6}
#ceUniverse .cu-explore-prompt{color:#afc6c7;font-size:12px;text-align:right}
#ceUniverse .cu-city-targets{position:absolute;inset:0;pointer-events:none;z-index:2}
#ceUniverse .cu-city-target{position:absolute;padding:0;border:0;border-radius:18px;background:transparent;color:transparent;font-size:12px;pointer-events:auto;cursor:pointer;touch-action:pan-y pinch-zoom}
#ceUniverse .cu-gestures-on .cu-city-target{touch-action:none}
#ceUniverse .cu-city-target:focus-visible{outline:3px solid #ebc97b;outline-offset:2px;background:#ebc97b16}
#ceUniverse .cu-map-status{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:18px;margin-top:10px}
#ceUniverse .cu-stage-note{position:static;padding:0;margin:0;border:0;background:none;font:400 11px 'Space Grotesk',sans-serif;color:#a9c1c0;max-width:none}
#ceUniverse .cu-touch-tools{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:5px 10px;margin-left:auto}
#ceUniverse .cu-touch-gestures{position:static;max-width:none;background:#102b35;border-radius:8px}
#ceUniverse .cu-touch-hint{position:static;border:0;background:none;padding:0;font:400 11px 'Space Grotesk',sans-serif;color:#afc6c7;max-width:none}
#ceUniverse .cu-nearby{display:flex;align-items:center;gap:14px;margin-top:13px;min-width:0}
#ceUniverse .cu-nearby[hidden]{display:none}
#ceUniverse .cu-nearby>span{flex-shrink:0;font-size:11px;color:#afc6c7}
#ceUniverse .cu-nearby-cities{display:flex;gap:7px;overflow-x:auto;min-width:0;scrollbar-width:thin;scrollbar-color:#42635d transparent;padding:3px 2px 7px}
#ceUniverse .cu-nearby-cities button,#ceUniverse .cu-cluster-zoom{white-space:nowrap;border:1px solid #729f924d;border-radius:9px;padding:9px 13px;min-height:44px;background:#112d33;color:#e0efe6;font:500 12px 'Space Grotesk',sans-serif;cursor:pointer}
#ceUniverse .cu-nearby-cities button:hover,#ceUniverse .cu-cluster-zoom:hover{background:#234b48;border-color:#98c3aa}
#ceUniverse .cu-cluster-zoom{width:100%;margin:0 0 12px;text-align:left}
#ceUniverse .cu-geography-source{grid-column:1/-1;font-size:11px;color:#9cb6b6;margin:0}
#ceUniverse.cu-fullscreen .cu-nearby{display:none}
#ceUniverse.cu-fullscreen .cu-map-toolbar{margin-top:8px}
#ceUniverse.cu-fullscreen .cu-map-area{height:calc(100dvh - 260px);min-height:260px}
@media(max-width:600px){
  #ceUniverse .cu-map-toolbar{flex-wrap:wrap;gap:10px;margin-top:14px}
  #ceUniverse .cu-surface-switch{flex:1}
  #ceUniverse .cu-surface-switch button{flex:1;padding:7px 14px}
  #ceUniverse .cu-explore-prompt{width:100%;text-align:left;font-size:11px}
  #ceUniverse .cu-map-area{aspect-ratio:1.06;min-height:290px;max-height:62vh}
  #ceUniverse .cu-stage{margin-top:10px}
  #ceUniverse .cu-nearby{display:block;margin-top:14px}
  #ceUniverse .cu-nearby-cities{margin-top:5px}
  #ceUniverse .cu-map-status{align-items:flex-start;gap:8px}
  #ceUniverse .cu-stage-note{padding-top:6px;font-size:10px;line-height:1.6;max-width:48%}
  #ceUniverse .cu-touch-tools{max-width:58%}
  #ceUniverse .cu-touch-gestures{font-size:11px;padding:7px 10px;max-width:100%}
  #ceUniverse .cu-touch-hint{font-size:10px;text-align:right;line-height:1.4;width:100%}
  #ceUniverse.cu-fullscreen .cu-map-area{height:calc(100dvh - 340px);min-height:260px}
}
@media(prefers-reduced-motion:reduce){#ceUniverse .cu-surface-switch button{transition:none}}

/* CE Market Scanner (assets/market-scanner.js): the hero instrument. One panel sized by its own
   container (container queries), so the same component reads at 320px and at 860px. Colour carries the
   sign everywhere (mint above zero, rose below) and every coloured number also carries its sign
   character, so nothing depends on colour alone. Until the data is live, controls that would do nothing
   are hidden (no-JS and error) or hold their space invisibly (booting), so the hero never shifts. */
/* Unpainted, but kept: this full-height box is the section's scroll anchor (Chrome anchors on the first
   on-screen node in DOM order), so the map doesn't jump when its stage note and nearby row appear on zoom. */
#ceUniverse .cu-stars{background:none}
#ceUniverse .cu-head{align-items:start}
@media(min-width:960px){#ceUniverse .cu-head{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:28px 40px}#ceUniverse .cu-copy{padding-top:30px}#ceUniverse .cu-title{font-size:clamp(40px,4.2vw,64px)}}
@media(max-width:959px){#ceUniverse .cu-head{grid-template-columns:1fr}#ceUniverse .cu-copy{padding-bottom:6px}}
#ceUniverse .cu-match-note{max-width:40ch;margin:14px 0 0;font-size:12.5px;line-height:1.55;color:#a9c3c9}
#ceUniverse .cu-match-note a{color:#cdeee2;text-underline-offset:3px}
/* phones: get the scanner's scope onto the first screen */
@media(max-width:760px){#ceUniverse .cu-match-note,#ceUniverse .cu-underwrite{display:none}}

.scn [hidden]{display:none!important}
.scn{--scn-ink:#EAF6F3;--scn-dim:#B4CCD0;--scn-faint:#93AFB5;--scn-line:rgba(150,220,215,.15);--scn-line-2:rgba(150,220,215,.3);--scn-pos:#66F2BF;--scn-neg:#FF8AA2;--scn-beam:#9BE9FF;--scn-amber:#FFD891;
  container-type:inline-size;position:relative;isolation:isolate;min-width:0;width:100%;color:var(--scn-ink);
  border:1px solid var(--scn-line-2);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#173946,#0e2733 36%,#0c232e);
  box-shadow:0 24px 48px rgba(1,10,16,.42),0 0 0 1px rgba(0,0,0,.22),inset 0 1px 0 rgba(210,255,240,.1)}
.scn::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;z-index:3;background:linear-gradient(90deg,transparent,#9effe4,transparent);box-shadow:0 0 22px 1px rgba(140,255,224,.55);pointer-events:none}
.scn :focus-visible{outline:2px solid var(--scn-amber);outline-offset:2px}

.scn-bar{display:flex;align-items:center;gap:12px;min-height:48px;padding:2px 6px 2px 16px;border-bottom:1px solid var(--scn-line)}
.scn-title{display:flex;align-items:center;gap:10px;margin:0;font:600 11px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase;color:#D9F3EC;white-space:nowrap}
.scn-led{width:8px;height:8px;border-radius:50%;background:var(--scn-pos);box-shadow:0 0 0 3px rgba(102,242,191,.14),0 0 14px rgba(102,242,191,.9)}
.scn[data-mode="paused"] .scn-led,.scn[data-mode="ready"] .scn-led,.scn[data-mode="locked"] .scn-led{animation:none;background:var(--scn-amber);box-shadow:0 0 0 3px rgba(255,216,145,.14),0 0 10px rgba(255,216,145,.6)}
.scn[data-state="error"] .scn-led{animation:none;background:var(--scn-neg);box-shadow:none}
@keyframes scn-led{0%,100%{opacity:1}50%{opacity:.45}}
.scn-meta{display:flex;gap:8px;margin:0 0 0 auto;font:500 10px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--scn-faint);white-space:nowrap}
.scn-sep{opacity:.6}
.scn-pause{margin-left:auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border:1px solid var(--scn-line);border-radius:8px;background:rgba(3,14,20,.3);color:var(--scn-dim);font:600 10.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.scn-pause::before{content:"❚❚";font-size:8px;letter-spacing:-.1em}
.scn-pause[aria-label^="Resume"]::before{content:"▶";font-size:9px;letter-spacing:0}
.scn-pause:hover{border-color:var(--scn-line-2);color:var(--scn-ink)}
.scn-pause[aria-label^="Resume"]{color:var(--scn-amber);border-color:rgba(255,216,145,.4)}

.scn-tape{position:relative;height:30px;border-bottom:1px solid var(--scn-line);background:#0b212b}
.scn-tape canvas{display:block;width:100%;height:100%;cursor:pointer}

.scn-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--scn-line)}
.scn [role="tab"]{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"key name spark" "key unit spark" "key split split";column-gap:9px;align-content:center;min-height:70px;padding:10px 12px 10px 14px;border:0;border-right:1px solid var(--scn-line);background:transparent;color:var(--scn-dim);text-align:left;cursor:pointer;transition:background .2s,color .2s}
.scn [role="tab"]:last-child{border-right:0}
.scn [role="tab"]:hover{background:rgba(155,233,255,.05);color:var(--scn-ink)}
.scn [role="tab"][aria-selected="true"]{background:linear-gradient(180deg,rgba(155,233,255,.13),rgba(155,233,255,.02));color:var(--scn-ink)}
.scn [role="tab"][aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--scn-beam);box-shadow:0 0 14px rgba(155,233,255,.9)}
.scn-key{grid-area:key;align-self:start;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border:1px solid var(--scn-line-2);border-radius:5px;font:600 10px 'JetBrains Mono',ui-monospace,monospace;color:var(--scn-faint)}
.scn [aria-selected="true"] .scn-key{border-color:var(--scn-beam);color:var(--scn-beam)}
.scn-tab-name{grid-area:name;font:600 13.5px 'Space Grotesk',sans-serif;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scn-short{display:none}
/* Not --scn-faint: on the selected tab's lit background that measured 4.32:1 at 9.5px on phones.
   #A2BEC3 is about 5.1:1 there and still reads one step dimmer than the tab name. */
.scn-tab-unit{grid-area:unit;font:500 10px 'JetBrains Mono',ui-monospace,monospace;color:#A2BEC3;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scn-spark{grid-area:spark;align-self:center;width:58px;height:24px;opacity:.75;transition:opacity .2s}
.scn [aria-selected="true"] .scn-spark{opacity:1}
.scn-tab-split{grid-area:split;font:600 10.5px 'JetBrains Mono',ui-monospace,monospace;white-space:nowrap;margin-top:3px;min-height:14px;transition:opacity .2s}
.scn-tab-split .up{color:var(--scn-pos)}.scn-tab-split .dn{color:var(--scn-neg)}
.scn-tab-split span{white-space:nowrap}
.scn[data-query] .scn-tab-split{opacity:.45}

.scn-status{margin:0;min-height:52px;padding:10px 16px;border-bottom:1px solid var(--scn-line);font:500 11.5px/1.55 'JetBrains Mono',ui-monospace,monospace;color:var(--scn-dim)}
.scn-status strong{display:block;margin-bottom:2px;font:600 15px/1.35 'Space Grotesk',sans-serif;letter-spacing:-.01em;color:var(--scn-ink)}

.scn-deck{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;border-bottom:1px solid var(--scn-line)}
.scn-scope{position:relative;height:244px;min-width:0;background:#0d2531}
.scn-scope canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#ceUniverse .scn canvas{cursor:inherit;touch-action:auto}
#ceUniverse .scn-tape canvas{cursor:pointer}
#ceUniverse .scn .scn-spark{display:block;width:58px;height:24px}
.scn-probe{position:absolute;inset:0;z-index:2;cursor:crosshair;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;outline:none}
.scn-probe:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--scn-amber)}
.scn-boot{position:absolute;left:16px;right:16px;top:40px;z-index:1;margin:0;padding:0;list-style:none;overflow:hidden;font:500 11px/1.75 'JetBrains Mono',ui-monospace,monospace;color:#9BE3C8;pointer-events:none;transition:opacity .45s}
.scn-boot li{animation:scn-type .22s steps(12,end) both;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scn-boot li::before{content:"> ";color:var(--scn-faint)}
.scn-boot li.ok{color:var(--scn-pos)}.scn-boot li.err{color:var(--scn-neg)}
.scn-boot[data-done]{opacity:0}
@keyframes scn-type{from{max-width:0}to{max-width:100%}}
.scn-fallback{display:none;position:absolute;inset:0;margin:0;padding:24px;place-content:center;text-align:center;font:500 13px/1.6 'Inter',sans-serif;color:var(--scn-dim)}
.scn-fallback a{color:var(--scn-beam)}

.scn-read{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:5px;align-content:start;min-width:0;min-height:300px;padding:14px 16px;border-top:1px solid var(--scn-line);background:#0b222c}
.scn-read>*{grid-column:1/-1}
.scn-read-head{display:flex;align-items:center;gap:10px;min-height:20px;margin:0 0 2px;font:600 10px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}
.scn-mode{display:inline-flex;align-items:center;gap:7px;color:var(--scn-beam)}
.scn-mode::before{content:"";width:6px;height:6px;border-radius:1px;background:currentColor;box-shadow:0 0 8px currentColor}
.scn[data-mode="locked"] .scn-mode,.scn[data-mode="preview"] .scn-mode{color:var(--scn-amber)}
.scn[data-mode="paused"] .scn-mode,.scn[data-mode="ready"] .scn-mode,.scn[data-mode="empty"] .scn-mode{color:var(--scn-dim)}
.scn-pos{margin-left:auto;color:var(--scn-faint);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scn-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.4em;font:600 20px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:#F4FBF8;text-decoration:none;overflow-wrap:anywhere;justify-self:start}
.scn-name:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--scn-beam)}
.scn[data-mode="travel"] .scn-name{color:var(--scn-beam);text-shadow:0 0 14px rgba(155,233,255,.35)}
.scn[data-mode="travel"] .scn-value{opacity:.55}
.scn-big{display:flex;align-items:center;gap:10px;margin:0}
.scn-value{font:600 30px/1.05 'JetBrains Mono',ui-monospace,monospace;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.scn-value[data-sign="pos"]{color:var(--scn-pos);text-shadow:0 0 22px rgba(102,242,191,.35)}
.scn-value[data-sign="neg"]{color:var(--scn-neg);text-shadow:0 0 22px rgba(255,138,162,.3)}
.scn-grade{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 4px;border:1px solid currentColor;border-radius:4px;font:700 11px 'JetBrains Mono',ui-monospace,monospace}
.scn-grade:empty{display:none}
.scn-grade[data-g="A"]{color:#7FF2C6}.scn-grade[data-g="B"]{color:#A3E8FF}.scn-grade[data-g="C"]{color:#F6DA8E}.scn-grade[data-g="D"]{color:#FFBE93}.scn-grade[data-g="F"]{color:#FF9DB0}
.scn-rank{margin:0;min-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 11px 'JetBrains Mono',ui-monospace,monospace;color:var(--scn-dim)}
.scn-meter{height:4px;border-radius:2px;background:rgba(160,210,220,.13);overflow:hidden}
.scn-meter i{display:block;height:100%;width:0;border-radius:2px;background:var(--scn-beam);transition:width .2s ease-out}
.scn-meter i[data-sign="pos"]{background:var(--scn-pos);box-shadow:0 0 10px rgba(102,242,191,.7)}
.scn-meter i[data-sign="neg"]{background:var(--scn-neg);box-shadow:0 0 10px rgba(255,138,162,.6)}
.scn-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 12px;margin:6px 0 0}
.scn-stats div{min-width:0}
.scn-stats dt{font:600 9.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--scn-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scn-stats dd{margin:1px 0 0;font:600 12.5px 'JetBrains Mono',ui-monospace,monospace;color:var(--scn-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.scn-stats [data-sign="pos"] dd{color:var(--scn-pos)}.scn-stats [data-sign="neg"] dd{color:var(--scn-neg)}
.scn-stats [data-on] dt{color:var(--scn-beam)}
.scn-hold-row{grid-column:1/-1}
.scn-hold-row dd{white-space:normal;overflow:visible;line-height:1.35;min-height:2.7em}
/* The Buy & Hold verdict is the only readout line whose length varies by market (one to three lines),
   so it reserves its longest case here: every market's readout is then the same height and the tour
   never resizes the box. scripts/browser-homepage-quality.mjs sweeps every market to hold this. */
#scnHold{display:block;min-height:2.7em}
#scnHold[data-hold="2"],#scnHold[data-hold="5"]{color:var(--scn-pos)}#scnHold[data-hold="t"]{color:var(--scn-amber)}#scnHold[data-hold="f"]{color:var(--scn-neg)}#scnHold[data-hold="i"]{color:var(--scn-dim)}
#scnRentSrc,#scnCapSrc{display:block;margin-top:1px;font:500 9.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;color:var(--scn-faint)}
#scnRentSrc,#scnCapSrc{min-height:1.2em}
.scn[data-mode="locked"] .scn-pos{display:none}
.scn-status.scn-warn{color:var(--scn-amber)}
#scnLimit{display:block;margin-top:2px;font:500 10.5px/1.45 'Inter',sans-serif;color:var(--scn-dim)}
#scnLimit{min-height:2.9em}
.scn-release{flex:none;min-height:44px;padding:0 12px;margin:-12px 0 -12px;border:1px solid rgba(255,216,145,.55);border-radius:8px;background:rgba(255,216,145,.07);color:var(--scn-amber);font:600 10.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}

.scn-cmd{display:flex;align-items:center;gap:10px;padding:12px 12px 4px 16px}
.scn-prompt{font:700 13px 'JetBrains Mono',ui-monospace,monospace;color:var(--scn-pos);letter-spacing:.04em;white-space:nowrap;text-shadow:0 0 12px rgba(102,242,191,.45)}
.scn-field{position:relative;flex:1;min-width:0}
.scn-field input{width:100%;min-height:46px;padding:0 13px;border:1px solid var(--scn-line-2);border-radius:9px;background:rgba(3,14,20,.72);color:var(--scn-ink);font:500 14px 'JetBrains Mono',ui-monospace,monospace;caret-color:var(--scn-pos);scroll-margin-top:90px;transition:border-color .15s,box-shadow .15s}
.scn-field input::placeholder{color:#8EA9B0;opacity:1}
.scn-field input:focus{outline:none;border-color:var(--scn-beam);box-shadow:0 0 0 3px rgba(155,233,255,.2),0 0 26px rgba(155,233,255,.14)}
@media(pointer:coarse){.scn-field input{font-size:16px}}
.scn-go{min-height:46px;padding:0 18px;border:0;border-radius:9px;background:linear-gradient(115deg,#c9f7df,#8edabd);color:#05291f;font:700 11.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 26px rgba(114,211,189,.2)}
.scn-go:hover{filter:brightness(1.06);box-shadow:0 8px 32px rgba(114,211,189,.32)}
.scn-suggest{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:40;display:grid;padding:5px;max-height:min(60vh,280px);overflow:auto;border:1px solid var(--scn-line-2);border-radius:10px;background:#0b222c;box-shadow:0 -18px 50px rgba(0,6,10,.55)}
.scn-opt{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:44px;padding:0 10px;border:0;border-radius:7px;background:none;color:var(--scn-ink);font:500 13px 'JetBrains Mono',ui-monospace,monospace;text-align:left;cursor:pointer}
.scn-opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scn-opt:hover,.scn-opt:focus-visible{background:rgba(155,233,255,.12);outline:none}
.scn-opt b{font-variant-numeric:tabular-nums;white-space:nowrap}
.scn-opt b[data-sign="pos"]{color:var(--scn-pos)}.scn-opt b[data-sign="neg"]{color:var(--scn-neg)}

.scn-hints{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;min-height:44px;padding:0 12px 4px 16px;border-bottom:1px solid var(--scn-line)}
.scn-examples,.scn-chips{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px}
.scn-try{font:600 10px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--scn-faint);margin-right:2px}
.scn-examples button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;cursor:pointer}
.scn-examples button span{padding:5px 10px;border:1px solid var(--scn-line-2);border-radius:999px;background:rgba(6,22,30,.6);color:var(--scn-dim);font:500 11.5px 'JetBrains Mono',ui-monospace,monospace;transition:border-color .15s,color .15s,background .15s}
.scn-examples button:hover span{border-color:var(--scn-beam);color:var(--scn-ink);background:rgba(155,233,255,.1)}
.scn-chips span{padding:5px 10px;border:1px solid rgba(155,233,255,.5);border-radius:6px;background:rgba(155,233,255,.08);color:var(--scn-beam);font:600 11px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em;margin:7px 0}
.scn-goto{min-height:44px;padding:0 12px;border:1px solid rgba(155,233,255,.5);border-radius:8px;background:rgba(155,233,255,.08);color:var(--scn-beam);font:600 11px 'JetBrains Mono',ui-monospace,monospace;cursor:pointer}
.scn-clear{min-height:44px;padding:0 8px;border:0;background:none;color:var(--scn-dim);font:500 11.5px 'JetBrains Mono',ui-monospace,monospace;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.scn-board{display:grid;grid-template-columns:1fr 1fr}
.scn-col{min-width:0;padding:10px 12px}
.scn-col+.scn-col{border-left:1px solid var(--scn-line)}
.scn-board h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 4px 6px;font:600 10px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--scn-dim)}
.scn-board h3[data-sign="pos"]{color:var(--scn-pos)}.scn-board h3[data-sign="neg"]{color:var(--scn-neg)}
.scn-board h3[data-sign="pos"]::before{content:"▲"}.scn-board h3[data-sign="neg"]::before{content:"▼"}
.scn-board h3 small{font:500 10px 'Inter',sans-serif;letter-spacing:0;text-transform:none;color:var(--scn-faint)}
.scn-board ol{min-height:120px;margin:0;padding:0;list-style:none}
#ceUniverse .scn-board a{text-decoration:none}
.scn-board a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:30px;padding:0 6px;border-radius:6px;color:var(--scn-ink);font:500 12px 'JetBrains Mono',ui-monospace,monospace}
.scn-board a:hover,.scn-board a:focus-visible{background:rgba(155,233,255,.08)}
.scn-b-rank{color:var(--scn-faint);font-size:10.5px;font-variant-numeric:tabular-nums}
.scn-b-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12.5px 'Inter',sans-serif}
.scn-b-val{font-weight:600;font-variant-numeric:tabular-nums}
.scn-b-val[data-sign="pos"]{color:var(--scn-pos)}.scn-b-val[data-sign="neg"]{color:var(--scn-neg)}
.scn-b-tags{display:inline-flex;gap:4px;min-width:0}
.scn-b-tags:empty{display:none}
.scn-ok{margin-left:0;color:var(--scn-pos);font:700 11px 'JetBrains Mono',ui-monospace,monospace}
.scn-tag{margin-left:6px;padding:0 4px;border:1px solid rgba(180,204,208,.35);border-radius:3px;color:var(--scn-faint);font:600 9px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.scn-cap{margin-left:0;color:var(--scn-amber);font:700 11px 'JetBrains Mono',ui-monospace,monospace}
.scn-board i{position:absolute;left:6px;bottom:3px;height:2px;max-width:calc(100% - 12px);border-radius:1px;opacity:.45;pointer-events:none}
.scn-board i[data-sign="pos"]{background:var(--scn-pos)}.scn-board i[data-sign="neg"]{background:var(--scn-neg)}
.scn-board[data-empty]{display:none}
.scn-foot{min-height:4.6em;margin:0;padding:11px 16px 12px;border-top:1px solid var(--scn-line);font:400 11px/1.6 'Inter',sans-serif;color:var(--scn-faint)}
.scn-foot>p{display:inline;margin:0}
.scn-foot details{display:inline}
.scn-foot details[open]{display:block;margin-top:4px}
.scn-foot details p{margin:2px 0 0}
.scn-foot summary{display:inline-flex;align-items:center;min-height:30px;margin-left:6px;cursor:pointer;color:var(--scn-dim);font-weight:600}
.scn-foot details[open] summary{color:var(--scn-ink)}
.scn-foot b{color:var(--scn-dim);font-weight:600}
.scn-foot a{color:var(--scn-beam);text-underline-offset:3px}

/* not live yet: hold the space invisibly while booting; remove dead controls when there is no script or no data */
.scn:not([data-state="live"]) :is(.scn-read,.scn-board,.scn-hints,.scn-pause,.scn-tape canvas,.scn-tab-split,.scn-spark){visibility:hidden}
.scn[data-state="static"] .scn-tabs{visibility:hidden}
.scn[data-state="error"] :is(.scn-read,.scn-board,.scn-hints,.scn-pause,.scn-tape,.scn-tabs){display:none}
.scn:is([data-state="static"],[data-state="error"]) .scn-fallback{display:grid}
@media(scripting:none){
  .scn :is(.scn-read,.scn-board,.scn-hints,.scn-pause,.scn-tape,.scn-tabs,.scn-status,.scn-foot){display:none}
  .scn .scn-fallback{display:grid}
}

@container (min-width:580px){
  .scn-deck{grid-template-columns:minmax(0,1fr) 222px}
  .scn-read{border-top:0;border-left:1px solid var(--scn-line)}
  /* min-height, never height + overflow:hidden. The fixed 400px box clipped the bottom of the
     readout (the Buy & Hold verdict) for every market once JetBrains Mono loaded, whose readout is
     411-445px here, and clipped "Overall grade" too under WCAG 1.4.12 text-spacing overrides. The
     scope stretches to the readout's row, so the two columns stay one height. */
  .scn-scope{height:auto;min-height:400px}
  .scn-read{min-height:400px}
  #scnHold{min-height:4.05em}
  .scn-stats{grid-template-columns:1fr 1fr}
}
@container (max-width:470px){
  .scn-bar{padding-left:12px;gap:8px}
  .scn-meta .scn-sep,.scn-meta span:last-child{display:none}
  .scn [role="tab"]{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "unit" "spark" "split";padding:9px 10px;min-height:96px;row-gap:2px}
  .scn-key{display:none}
  .scn-tab-name{font-size:12.5px;white-space:normal;line-height:1.15}
  .scn-tab-unit{font-size:9.5px}
  #ceUniverse .scn .scn-spark{width:100%;max-width:72px;height:18px;margin-top:3px}
  .scn-tab-split{white-space:normal;font-size:9.5px;line-height:1.3}
  .scn-status{font-size:11px;min-height:52px;padding:9px 12px}
  .scn-scope{height:216px}
  .scn-read{padding:12px;min-height:424px}
  .scn-value{font-size:27px}
  .scn-cmd{padding:10px 10px 2px 12px;gap:8px}
  .scn-field input{font-size:16px}
  .scn-go{padding:0 13px}
  .scn-hints{padding:0 10px 2px 12px}
  .scn-board{grid-template-columns:1fr}
  .scn-board ol{min-height:90px}
  .scn-status strong{font-size:14px}
  .scn-stats dt{font-size:10.5px}
  .scn-stats dd{font-size:13px}
  .scn-col+.scn-col{border-left:0;border-top:1px solid var(--scn-line)}
  .scn-foot{min-height:6em;padding:11px 12px 12px}
}
@container (max-width:780px){
  .scn-long:not(.scn-keep){display:none}.scn-short:not(.scn-tiny){display:inline}
}
@container (max-width:640px){
  .scn [role="tab"]{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"key name" "key unit" "key spark" "key split"}
  #ceUniverse .scn .scn-spark{width:100%;max-width:80px;height:16px;margin-top:3px}
}
@container (max-width:400px){
  .scn-keep{display:none}.scn-tiny{display:inline}
  .scn-meta{display:none}
  .scn-title{letter-spacing:.16em}
  .scn-stats{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.scn-led,.scn-mode::before,.scn-boot li{animation:none!important}.scn-meter i,.scn-spark,.scn-tab-split{transition:none}}
@media(forced-colors:active){
  .scn{border:1px solid CanvasText}
  .scn::after,.scn::before{display:none}
  .scn-scope,.scn-tape,.scn-spark{forced-color-adjust:none;background:#0b1d27}
  .scn [role="tab"][aria-selected="true"]{outline:3px solid Highlight;outline-offset:-3px}
}