@echomem/mcp 1.4.44 → 1.4.45

package/dist/setup-page/styles-city-report.js

@@ -0,0 +1,880 @@
+// Generated from the prior inline setup page. This content is emitted into one browser IIFE/style tag.
+export const SETUP_PAGE_STYLES_CITY_REPORT = String.raw `    /* ---- forensic report (ContextDoctorTwo) ---- */
+    .cityHero {
+      --city-display-w: min(calc(100vw - 28px), calc((100vh - 28px) * 0.7797));
+      --city-display-h: min(calc(100vh - 28px), calc((100vw - 28px) * 1.2826));
+      position: relative;
+      width: min(880px, 100%);
+      margin: clamp(-36px, -2vw, -16px) auto 0;
+      padding: 4px 0 0;
+      background: transparent;
+    }
+    .cityFigureRow {
+      /* Mirror the body-text column geometry (.context-audit): same 880px column,
+         same inner padding, same half-gutter nudge — so cityNote's left edge sits
+         exactly on the body text's left line, and cityFig's column starts exactly
+         on the body text's right line, then bleeds to the viewport's right edge. */
+      --hero-pad: clamp(22px, 4.5vw, 64px);
+      --audit-gutter: calc(150px + clamp(16px, 2.5vw, 36px));
+      display: grid;
+      /* City column width is chosen so its CENTER sits on the pie-chart axis below
+         (pie column center = 100vw − (100vw − 880px)/2 − pad + gutter/2 − 75px) while its
+         right edge stays glued to the viewport edge. The camera centers the city in the
+         canvas, so the default view lands exactly on that shared vertical axis. */
+      grid-template-columns: minmax(0, 1fr) calc(100vw - min(880px, 100vw) + 2 * var(--hero-pad) - var(--audit-gutter) + 150px);
+      gap: 0;
+      align-items: center;
+      margin-left: calc(var(--hero-pad) - var(--audit-gutter) / 2);
+      width: calc(50vw + 50% - var(--hero-pad) + var(--audit-gutter) / 2);
+    }
+    .cityFig { margin: 0; order: 2; position: relative; }
+    .cityNote { order: 1; }
+    /* ---- fullscreen city modal (80% viewport): dirty/clean toggle + tool legend + forensic stats ---- */
+    .cityFullBtn {
+      position: absolute;
+      z-index: 6;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: clamp(16px, 2.5vh, 30px);
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 15px;
+      border: 1px solid rgba(26, 58, 143, 0.22);
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.94);
+      color: var(--echo-ink-primary);
+      font-family: var(--echo-font-brand);
+      font-size: 12.5px;
+      font-weight: 700;
+      line-height: 1;
+      cursor: pointer;
+      box-shadow: 0 10px 28px rgba(28, 38, 60, 0.12);
+    }
+    .cityFullBtn:hover { background: #ffffff; }
+    .cityFullBtn svg { width: 12px; height: 12px; display: block; }
+    body.cityFull .cityFullBtn { display: none; }
+    .cityFullBackdrop { position: fixed; inset: 0; z-index: 58; background: rgba(26, 26, 26, 0.45); }
+    body.cityFull .cityShell {
+      position: fixed;
+      inset: 10vh 10vw;
+      width: auto;
+      height: auto;
+      z-index: 59;
+      background: var(--echo-paper-canvas);
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 18px;
+      box-shadow: 0 40px 120px rgba(20, 24, 40, 0.4);
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+    .cityFullChrome {
+      position: fixed;
+      inset: 10vh 10vw;
+      z-index: 60;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      pointer-events: none;
+      padding: 16px 18px;
+      box-sizing: border-box;
+    }
+    .cityFullChrome[hidden], .cityFullBackdrop[hidden] { display: none; }
+    .cfc-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
+    .cfc-left { display: flex; align-items: center; gap: 10px; }
+    /* Quiet toggles — same language as the top-nav pill: white pill, hairline border,
+       the active chip gets only a thin ink ring. No saturated fills. */
+    .cfc-toggle {
+      pointer-events: auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      padding: 5px;
+      background: var(--echo-paper-white);
+      border: 1px solid rgba(26, 26, 26, 0.06);
+      border-radius: 999px;
+      box-shadow: 0 12px 30px rgba(28, 38, 60, 0.10);
+    }
+    .cfc-toggle button {
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      border: 1px solid transparent;
+      border-radius: 999px;
+      padding: 8px 14px;
+      background: transparent;
+      font-family: var(--echo-font-brand);
+      font-size: 12.5px;
+      font-weight: 600;
+      line-height: 1;
+      color: var(--echo-ink-mute);
+      cursor: pointer;
+      transition: color 120ms linear, border-color 120ms linear;
+    }
+    .cfc-toggle button:hover { color: #1a1a1a; }
+    .cfc-toggle button.on { color: #1a1a1a; font-weight: 700; border-color: rgba(26, 26, 26, 0.16); }
+    .cfc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #c7372f; }
+    .cfc-face { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; }
+    .cfc-legend {
+      pointer-events: auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 20px;
+      padding: 10px 18px;
+      background: #ffffff;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 999px;
+      box-shadow: 0 10px 26px rgba(28, 38, 60, 0.12);
+      font-family: var(--echo-font-mono);
+      font-size: 12px;
+      color: var(--echo-ink-text);
+      white-space: nowrap;
+    }
+    .cfc-legend .cfc-side { display: inline-flex; align-items: center; gap: 8px; }
+    .cfc-legend .cfc-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
+    .cfc-legend img { width: 18px; height: 18px; object-fit: contain; }
+    .cfc-legend b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
+    .cfc-close {
+      pointer-events: auto;
+      width: 42px;
+      height: 42px;
+      flex: none;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 999px;
+      background: #ffffff;
+      color: #1a1a1a;
+      font-size: 20px;
+      line-height: 1;
+      cursor: pointer;
+      box-shadow: 0 10px 26px rgba(28, 38, 60, 0.12);
+    }
+    .cfc-close:hover { background: var(--echo-paper-soft); }
+    .cfc-stats {
+      pointer-events: auto;
+      align-self: center;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 10px 30px;
+      padding: 13px 26px;
+      background: rgba(255, 255, 255, 0.95);
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 14px;
+      box-shadow: 0 14px 40px rgba(28, 38, 60, 0.14);
+    }
+    .cfc-stat { display: grid; gap: 5px; justify-items: center; }
+    .cfc-stat span { font-family: var(--echo-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--echo-ink-mute); }
+    .cfc-stat strong { font-family: var(--echo-font-mono); font-size: 15px; line-height: 1; color: var(--echo-ink-text); font-variant-numeric: tabular-nums; }
+    .cityShell {
+      position: relative;
+      width: 100%;
+      height: clamp(400px, 52vh, 560px);
+      border-radius: 0;
+      overflow: hidden;
+      /* Fade the LEFT edge (toward the text) and the BOTTOM edge (toward the report);
+         top and right run clean to the viewport edge. Two mask layers intersected. */
+      -webkit-mask-image:
+        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 16%, #000 100%),
+        linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000 16%, #000 100%);
+      -webkit-mask-composite: source-in;
+      mask-image:
+        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 16%, #000 100%),
+        linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000 16%, #000 100%);
+      mask-composite: intersect;
+    }
+    .reportTop {
+      position: sticky;
+      top: 0;
+      z-index: 40;
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      align-items: center;
+      gap: 16px;
+      width: 100%;
+      margin: 0 auto;
+      padding: 12px clamp(24px, 4vw, 56px);
+      box-sizing: border-box;
+      background: var(--echo-paper-canvas);
+      border-bottom: 0;
+      margin-bottom: 0;
+    }
+    /* Yeah! Echo wordmark — ported 1:1 from WebPageReactVersion YeahEchoMark.module.css
+       (default lockup: bubble left, tail points right toward "Echo"). */
+    .yeahLogo {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5em;
+      justify-self: start;
+      font-size: 27px;
+      line-height: 1;
+      color: var(--echo-ink-primary);
+    }
+    .yeahLogo i {
+      position: relative;
+      font-family: "Caveat", cursive;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 0.55em;
+      line-height: 1;
+      color: var(--echo-ink-primary);
+      background: var(--echo-paper-white);
+      border: 0.05em solid var(--echo-ink-primary);
+      padding: 0.06em 0.55em 0.14em;
+      border-radius: 999px;
+      box-shadow: 0 0.1em 0.16em rgba(26, 58, 143, 0.10);
+    }
+    .yeahLogo i::before,
+    .yeahLogo i::after { content: ""; position: absolute; width: 0; height: 0; top: 50%; }
+    .yeahLogo i::before {
+      right: -0.25em;
+      transform: translateY(-50%);
+      border-top: 0.24em solid transparent;
+      border-bottom: 0.24em solid transparent;
+      border-left: 0.32em solid var(--echo-ink-primary);
+    }
+    .yeahLogo i::after {
+      right: -0.14em;
+      transform: translateY(-50%);
+      border-top: 0.2em solid transparent;
+      border-bottom: 0.2em solid transparent;
+      border-left: 0.28em solid var(--echo-paper-white);
+    }
+    .yeahLogo b { font-family: var(--echo-font-brand); font-weight: 700; letter-spacing: -0.02em; font-size: 1em; line-height: 1; color: var(--echo-ink-primary); }
+    /* Center nav — same pill language as the website header lockup. */
+    .navCenter { justify-self: center; display: inline-flex; align-items: center; gap: 10px; }
+    .navPill {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 5px;
+      background: var(--echo-paper-white);
+      border: 1px solid rgba(26, 26, 26, 0.06);
+      border-radius: 999px;
+      box-shadow: 0 12px 30px rgba(28, 38, 60, 0.10);
+    }
+    .navTitle {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-family: var(--echo-font-brand);
+      font-size: 13px;
+      font-weight: 700;
+      line-height: 1;
+      white-space: nowrap;
+      color: #1a1a1a;
+      padding: 6px 8px 6px 10px;
+    }
+    .navTitleFace { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }
+    .navDates { display: inline-flex; align-items: center; gap: 8px; padding-right: 4px; }
+    .navDates:empty { display: none; }
+    /* Mini timeline axis between the two dates — same language as the story
+       timeline: thin slate line, round endpoints, NOW end in warm coral. */
+    .navAxis {
+      position: relative;
+      width: 72px;
+      height: 2px;
+      border-radius: 999px;
+      background: #a9aec9;
+    }
+    .navAxis::before,
+    .navAxis::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+    }
+    .navAxis::before { left: -1px; background: #a9aec9; }
+    .navAxis::after { right: -1px; background: #e06b52; }
+    .navDates em.isNow { border-color: #e06b52; color: #b94a35; background: #fdf3f0; }
+    .navDates em {
+      font-style: normal;
+      font-family: var(--echo-font-mono);
+      font-size: 10.5px;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      line-height: 1;
+      white-space: nowrap;
+      color: #3a3a36;
+      background: #f7f7f5;
+      border: 1px solid #9b9b97;
+      border-radius: 999px;
+      padding: 7px 11px;
+    }
+    .navDates i { font-style: normal; font-family: var(--echo-font-mono); font-size: 11px; font-weight: 700; color: var(--echo-ink-faint); }
+    .navDot { width: 7px; height: 7px; border-radius: 50%; background: var(--echo-ink-accent); flex-shrink: 0; animation: navDotPulse 1.6s ease-in-out infinite; }
+    @keyframes navDotPulse {
+      0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(78, 205, 196, 0.55); }
+      50% { opacity: 0.35; box-shadow: 0 0 0 5px rgba(78, 205, 196, 0); }
+    }
+    .navLocal {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      font-family: var(--echo-font-brand);
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 1;
+      white-space: nowrap;
+      color: #1a1a1a;
+      background: var(--echo-paper-white);
+      border: 1px solid rgba(26, 26, 26, 0.08);
+      border-radius: 999px;
+      padding: 9px 14px;
+      box-shadow: 0 8px 22px rgba(28, 38, 60, 0.08);
+    }
+    .navLocal svg { width: 12px; height: 12px; display: block; color: var(--echo-ink-mute); }
+    .navConnect {
+      justify-self: end;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-family: var(--echo-font-brand);
+      font-size: 13px;
+      font-weight: 700;
+      line-height: 1;
+      white-space: nowrap;
+      color: var(--echo-ink-accent-deep);
+      background: rgba(78, 205, 196, 0.16);
+      border: 1px solid rgba(78, 205, 196, 0.5);
+      border-radius: 999px;
+      padding: 12px 16px;
+      cursor: pointer;
+      transition: background 140ms linear;
+    }
+    .navConnect:hover { background: rgba(78, 205, 196, 0.28); }
+    .navConnect svg { width: 11px; height: 11px; display: block; }
+    .cityNote { display: grid; gap: 8px; align-content: center; justify-items: start; color: #242424; }
+    /* Echo speaks the greeting: mascot on the left, manga speech bubble to his right
+       (same bubble language as the Yeah! Echo wordmark — paper white, navy ink, left tail). */
+    .cityNote .fn-speak { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
+    .cityNote img { width: 108px; height: auto; margin-top: -24px; flex: none; }
+    .cityNote .fn-bubble {
+      position: relative;
+      margin-top: -52px;
+      background: var(--echo-paper-white);
+      border: 1.6px solid #1a3a8f;
+      border-radius: 18px;
+      padding: 12px 20px 14px;
+      box-shadow: 0 3px 6px rgba(26, 58, 143, 0.10);
+    }
+    .cityNote .fn-bubble::before,
+    .cityNote .fn-bubble::after { content: ""; position: absolute; top: 62%; width: 0; height: 0; transform: translateY(-50%); }
+    .cityNote .fn-bubble::before {
+      left: -12px;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
+      border-right: 12px solid #1a3a8f;
+    }
+    .cityNote .fn-bubble::after {
+      left: -9px;
+      border-top: 6.5px solid transparent;
+      border-bottom: 6.5px solid transparent;
+      border-right: 10px solid var(--echo-paper-white);
+    }
+    .cityNote h2 { margin: 0; font-family: var(--echo-font-brand); font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; letter-spacing: -0.02em; line-height: 1; color: #171717; text-transform: lowercase; }
+    .cityNote .fn-save { margin: 9px 0 2px; max-width: 34ch; font-family: var(--echo-font-brand); font-size: 16px; font-weight: 600; line-height: 1.5; color: #242424; }
+    .cityNote .fn-save .fn-num,
+    .cityNote .fn-save .fn-less { font-weight: 800; color: #c7372f; font-variant-numeric: tabular-nums; white-space: nowrap; }
+    .cityNote h2 b { color: #1a3a8f; }
+    .cityNote .fn-dot { color: #f4a83b; }
+    .cityNote .fn-rank { margin: 0; font-family: var(--echo-font-brand); font-size: 15px; color: #666666; }
+    .cityNote .fn-rank b { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #242424; }
+    .fn-info {
+      /* beat the global button { min-height:44px; padding:0 16px } rule */
+      min-height: 0;
+      width: 17px;
+      height: 17px;
+      margin-left: 8px;
+      padding: 0;
+      display: inline-grid;
+      place-items: center;
+      border: 1.2px solid rgba(26, 26, 26, 0.35);
+      border-radius: 50%;
+      background: transparent;
+      color: rgba(26, 26, 26, 0.55);
+      font-family: Georgia, "Times New Roman", serif;
+      font-size: 11px;
+      font-weight: 700;
+      font-style: italic;
+      line-height: 1;
+      vertical-align: 2px;
+      cursor: pointer;
+      transition: color 120ms linear, border-color 120ms linear;
+    }
+    .fn-info:hover { color: #1a1a1a; border-color: #1a1a1a; }
+    .fn-guide-sec { margin: 16px 0 7px; font-family: var(--echo-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--echo-ink-mute); }
+    .fn-guide-sec:first-child { margin-top: 0; }
+    .fn-guide-row { margin: 0 0 7px; font-size: 13px; line-height: 1.5; color: var(--echo-ink-text); }
+    .fn-guide-row b { color: var(--echo-ink-primary); }
+    .fn-guide-row span { color: var(--echo-ink-mute); }
+    .fn-guide-row.is-you { background: var(--echo-paper-soft); border-radius: 8px; padding: 6px 10px; margin-left: -10px; }
+    .fn-guide-row.is-you i { display: inline-block; margin-left: 7px; padding: 2px 7px 3px; border-radius: 999px; background: #1a3a8f; color: #fff; font-style: normal; font-family: var(--echo-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; }
+    .echo-note-dlg .nb { max-height: min(60vh, 620px); overflow-y: auto; }
+    .cityNote .fn-lede { margin: 6px 0 0; max-width: 46ch; font-family: var(--echo-font-brand); font-size: 18px; line-height: 1.6; color: #242424; }
+    .cityNote .fn-lede mark { background: linear-gradient(transparent 62%, rgba(244, 168, 59, 0.45) 0); color: inherit; font-weight: 700; }
+    .cityShell iframe {
+      width: 100%;
+      height: 100%;
+      border: 0;
+      display: block;
+      border-radius: 0;
+      background: transparent;
+    }
+    .cityArrow {
+      position: absolute;
+      z-index: 5;
+      right: clamp(22px, 3vw, 42px);
+      bottom: clamp(22px, 3.5vh, 42px);
+      width: 44px;
+      height: 44px;
+      min-height: 44px;
+      padding: 0;
+      border-radius: 999px;
+      border-color: rgba(26, 58, 143, 0.2);
+      background: rgba(255, 255, 255, 0.92);
+      color: var(--echo-ink-primary);
+      font-size: 24px;
+      line-height: 1;
+      box-shadow: 0 10px 28px rgba(28, 38, 60, 0.12);
+    }
+    .detailsWrap {
+      width: 100%;
+      margin: 0;
+      padding: clamp(28px, 4vw, 52px) clamp(20px, 5vw, 72px);
+      background: var(--echo-paper-canvas);
+    }
+    #setup-details { scroll-margin-top: 0; }
+    .hero { padding: 4px 0 24px; }
+    .privacy {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 10px;
+      align-items: baseline;
+      margin-bottom: 24px;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--echo-line-soft);
+    }
+    .privacy span,
+    .kicker-mono,
+    .sectionHead span {
+      font-family: var(--echo-font-mono);
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--echo-ink-primary);
+    }
+    .privacy p { margin: 0; color: var(--echo-ink-mute); font-size: 14px; line-height: 1.55; }
+    .heroGrid {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 280px;
+      gap: clamp(20px, 3vw, 36px);
+      align-items: stretch;
+    }
+    .heroCopy { display: flex; flex-direction: column; justify-content: center; }
+    .heroCopy .kicker-mono { margin: 0 0 14px; color: var(--echo-ink-primary); }
+    .heroCopy h2 {
+      max-width: 720px;
+      margin: 0;
+      font-size: clamp(34px, 5vw, 58px);
+      line-height: 1.02;
+    }
+    .heroCopy p:not(.kicker-mono) {
+      margin: 18px 0 0;
+      font-size: clamp(15px, 1.25vw, 18px);
+      line-height: 1.62;
+      color: var(--echo-ink-text);
+    }
+    .scoreCard, .promiseCard, .panel {
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 8px;
+      background: var(--echo-paper-white);
+    }
+    .scoreCard { display: grid; align-content: center; min-height: 282px; padding: 22px; }
+    .scoreCard span, .promiseCard span {
+      font-family: var(--echo-font-mono);
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--echo-ink-mute);
+    }
+    .scoreCard strong {
+      margin-top: 12px;
+      font-family: var(--echo-font-brand);
+      font-size: clamp(72px, 8vw, 96px);
+      font-weight: 900;
+      line-height: 0.9;
+      color: var(--echo-ink-seal);
+      font-variant-numeric: tabular-nums;
+    }
+    .scoreCard em {
+      margin-top: 4px;
+      font-style: normal;
+      font-weight: 900;
+      font-size: 22px;
+      color: var(--echo-ink-primary);
+    }
+    .scoreCard p, .promiseCard p { margin: 14px 0 0; color: var(--echo-ink-mute); font-size: 14px; line-height: 1.55; }
+    .statStrip {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 10px;
+      margin-top: 22px;
+    }
+    .stat {
+      min-height: 92px;
+      padding: 14px;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 8px;
+      background: var(--echo-paper-white);
+    }
+    .stat strong {
+      display: block;
+      font-family: var(--echo-font-brand);
+      font-size: clamp(24px, 2.8vw, 34px);
+      font-weight: 900;
+      line-height: 1;
+      color: var(--echo-ink-primary);
+      font-variant-numeric: tabular-nums;
+    }
+    .stat.alert strong { color: var(--echo-ink-seal); }
+    .stat span {
+      display: block;
+      margin-top: 8px;
+      font-family: var(--echo-font-mono);
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--echo-ink-mute);
+    }
+    .sourceNote {
+      max-width: 980px;
+      margin: 16px 0 0;
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      line-height: 1.55;
+      color: var(--echo-ink-faint);
+    }
+    .sourceNote code {
+      padding: 1px 5px;
+      border-radius: 4px;
+      background: var(--echo-paper-soft);
+      color: var(--echo-ink-primary);
+    }
+    .section { padding: 30px 0 0; margin-top: 30px; border-top: 1px solid var(--echo-line-soft); }
+    .sectionHead { display: flex; gap: 12px; align-items: baseline; margin-bottom: 18px; }
+    .sectionHead h2 { margin: 0; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.05; }
+    .twoCol {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
+      gap: clamp(20px, 3.5vw, 36px);
+      align-items: start;
+    }
+    .storyText p { margin: 0 0 18px; color: var(--echo-ink-text); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.62; }
+    .storyText p:last-child { margin-bottom: 0; }
+    .storyText b { color: var(--echo-ink-primary); }
+    .panel { display: grid; gap: 12px; padding: 16px; }
+    .promiseCard { padding: 22px; }
+    .promiseCard strong {
+      display: block;
+      margin-top: 12px;
+      font-family: var(--echo-font-brand);
+      font-size: clamp(34px, 4vw, 48px);
+      font-weight: 900;
+      line-height: 1;
+      color: var(--echo-ink-primary);
+    }
+    .promiseActions { display: grid; gap: 10px; margin-top: 18px; }
+    .promiseCard button, .promiseCard .button {
+      width: 100%;
+      min-height: 48px;
+      border-radius: 6px;
+      font-family: var(--echo-font-mono);
+      font-size: 13px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .promiseCard .primary { border-color: var(--echo-ink-primary); background: var(--echo-ink-primary); color: #fff; }
+    .promiseCard .secondary { background: #fff; color: var(--echo-ink-primary); border-color: var(--echo-ink-primary); }
+
+    /* histogram */
+    .histo { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; }
+    .histoBar { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--echo-ink-primary); }
+    .histoBar.night { background: var(--echo-ink-seal); }
+    .histoAxis {
+      display: flex; justify-content: space-between; margin-top: 8px;
+      font-family: var(--echo-font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--echo-ink-faint);
+    }
+    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
+    .chips span {
+      padding: 6px 8px; border: 1px solid var(--echo-line-soft); border-radius: 6px;
+      background: var(--echo-paper-soft); font-family: var(--echo-font-mono); font-size: 11px; color: var(--echo-ink-primary);
+    }
+
+    /* reread / repo rows */
+    .row2 {
+      display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
+      padding: 11px 0; border-bottom: 1px solid var(--echo-line-soft);
+    }
+    .row2:last-child { border-bottom: 0; }
+    .row2 b { font-family: var(--echo-font-mono); font-size: 13px; color: var(--echo-ink-primary); }
+    .row2 small { display: block; margin-top: 3px; font-size: 12px; color: var(--echo-ink-mute); }
+    .row2 strong {
+      font-family: var(--echo-font-brand); font-size: 24px; font-weight: 900;
+      color: var(--echo-ink-seal); font-variant-numeric: tabular-nums; white-space: nowrap;
+    }
+    .repoRow strong { color: var(--echo-ink-primary); }
+    .tag {
+      display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
+      background: var(--echo-paper-soft); font-family: var(--echo-font-mono); font-size: 10px;
+      font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--echo-ink-seal);
+    }
+
+    /* cost split + model rows */
+    .segBar { display: flex; width: 100%; height: 22px; overflow: hidden; border-radius: 5px; background: var(--echo-paper-soft); }
+    .segBar span { display: block; min-width: 2px; }
+    .seg-output { background: var(--echo-ink-primary); }
+    .seg-cold { background: var(--echo-ink-mute); }
+    .seg-cw { background: var(--echo-ink-accent); }
+    .seg-cr { background: var(--echo-ink-seal); }
+    .ctxFacts {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 10px;
+      margin-top: 16px;
+    }
+    .ctxFacts div {
+      min-height: 58px;
+      padding: 10px 12px;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 6px;
+      background: var(--echo-paper-soft);
+    }
+    .ctxFacts span {
+      display: block;
+      font-family: var(--echo-font-mono);
+      font-size: 10px;
+      font-weight: 800;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--echo-ink-mute);
+    }
+    .ctxFacts strong {
+      display: block;
+      margin-top: 5px;
+      font-family: var(--echo-font-mono);
+      font-size: 12px;
+      line-height: 1.35;
+      color: var(--echo-ink-primary);
+    }
+    .costLegend { display: grid; gap: 6px; font-family: var(--echo-font-mono); font-size: 11px; color: var(--echo-ink-mute); }
+    .modelRow {
+      display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
+      padding: 9px 0; border-bottom: 1px solid var(--echo-line-soft);
+      font-family: var(--echo-font-mono); font-size: 12px; color: var(--echo-ink-mute);
+    }
+    .modelRow:last-child { border-bottom: 0; }
+    .modelRow b { font-size: 13px; color: var(--echo-ink-primary); }
+    .modelRow strong { font-family: var(--echo-font-brand); font-size: 18px; font-weight: 900; color: var(--echo-ink-seal); }
+
+    .nightCard {
+      margin-top: 18px; padding: 20px 22px; border: 1px solid var(--echo-ink-seal);
+      border-radius: 8px; background: var(--echo-paper-white);
+    }
+    .nightCard span {
+      font-family: var(--echo-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
+      text-transform: uppercase; color: var(--echo-ink-seal);
+    }
+    .nightCard p { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--echo-ink-text); }
+    .nightCard b { color: var(--echo-ink-primary); }
+
+    /* optional city explanation page */
+    .explainPage {
+      max-width: 1260px;
+      margin: 0 auto;
+    }
+    .explainHero {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
+      gap: clamp(28px, 5vw, 70px);
+      align-items: end;
+      padding-bottom: clamp(28px, 5vw, 58px);
+      border-bottom: 1px solid var(--echo-line-soft);
+    }
+    .explainCopy {
+      max-width: 760px;
+    }
+    .explainCopy h2 {
+      margin: 10px 0 0;
+      font-size: clamp(38px, 5.4vw, 74px);
+      line-height: 0.98;
+      color: var(--echo-ink-primary);
+    }
+    .explainCopy p:not(.kicker-mono) {
+      max-width: 680px;
+      margin: 20px 0 0;
+      font-size: clamp(16px, 1.35vw, 20px);
+      line-height: 1.55;
+      color: var(--echo-ink-text);
+    }
+    .cleanReadout {
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 8px;
+      padding: 22px;
+      background: #fff;
+    }
+    .cleanReadout span {
+      display: block;
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--echo-ink-mute);
+    }
+    .cleanReadout strong {
+      display: block;
+      margin-top: 8px;
+      font-family: var(--echo-font-brand);
+      font-size: clamp(54px, 6vw, 88px);
+      font-weight: 900;
+      line-height: 0.9;
+      color: var(--echo-ink-seal);
+      font-variant-numeric: tabular-nums;
+    }
+    .cleanReadout p {
+      margin: 14px 0 0;
+      color: var(--echo-ink-mute);
+      font-size: 15px;
+      line-height: 1.55;
+    }
+    .insightPills {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+      margin-top: clamp(18px, 3vw, 32px);
+    }
+    .insightPill {
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 8px;
+      padding: 14px 16px;
+      background: #fff;
+    }
+    .insightPill strong {
+      display: block;
+      font-family: var(--echo-font-brand);
+      font-size: clamp(24px, 2.2vw, 34px);
+      font-weight: 900;
+      line-height: 1;
+      color: var(--echo-ink-primary);
+      font-variant-numeric: tabular-nums;
+    }
+    .insightPill.alert strong { color: var(--echo-ink-seal); }
+    .insightPill span {
+      display: block;
+      margin-top: 8px;
+      font-family: var(--echo-font-mono);
+      font-size: 10px;
+      font-weight: 800;
+      letter-spacing: 0.07em;
+      text-transform: uppercase;
+      color: var(--echo-ink-mute);
+    }
+    .calcNote {
+      margin-top: 18px;
+      border-top: 1px solid var(--echo-line-soft);
+      padding-top: 14px;
+      color: var(--echo-ink-faint);
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      line-height: 1.6;
+    }
+    .calcNote summary {
+      cursor: pointer;
+      color: var(--echo-ink-primary);
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+    .calcNote p { margin: 10px 0 0; }
+    .explainSections {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 14px;
+      margin-top: clamp(28px, 4vw, 52px);
+    }
+    .explainCard {
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 8px;
+      background: #fff;
+      padding: 18px;
+      min-height: 230px;
+      display: grid;
+      gap: 14px;
+      align-content: start;
+    }
+    .explainCard .kicker-mono { margin: 0; color: var(--echo-ink-mute); }
+    .explainCard h3 {
+      margin: 0;
+      font-family: var(--echo-font-brand);
+      font-size: clamp(21px, 2vw, 28px);
+      line-height: 1.08;
+      color: var(--echo-ink-primary);
+    }
+    .explainCard p {
+      margin: 0;
+      color: var(--echo-ink-text);
+      font-size: 15px;
+      line-height: 1.55;
+    }
+    .explainCard .panel {
+      padding: 0;
+      border: 0;
+      background: transparent;
+    }
+    .explainCta {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 24px;
+      align-items: center;
+      margin-top: 16px;
+      padding: 22px;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 8px;
+      background: var(--echo-paper-canvas);
+    }
+    .explainCta h3 {
+      margin: 0;
+      font-family: var(--echo-font-brand);
+      font-size: clamp(24px, 2.5vw, 34px);
+      line-height: 1.08;
+      color: var(--echo-ink-primary);
+    }
+    .explainCta p {
+      margin: 8px 0 0;
+      max-width: 700px;
+      color: var(--echo-ink-mute);
+      font-size: 15px;
+      line-height: 1.5;
+    }
+    .explainCta .primary, .explainCta .secondary {
+      min-width: 180px;
+      min-height: 50px;
+      border-radius: 8px;
+      font-family: var(--echo-font-mono);
+      font-size: 13px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+`;