@echomem/mcp 1.4.47 → 1.4.49

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

@@ -1,880 +0,0 @@
-// 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;
-    }
-
-`;