@echomem/mcp 1.4.18 → 1.4.19

package/dist/setup-page/styles-extraction.js

@@ -56,7 +56,10 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       border-radius: 8px; border: 1px solid var(--echo-ink-primary); padding: 0 16px;
       font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
+      transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, color 150ms ease;
     }
+    button:not(:disabled):hover, .button:hover { transform: translateY(-1px); }
+    button:focus-visible, .button:focus-visible { outline: 3px solid rgba(26,58,143,0.18); outline-offset: 3px; }
     .primary { background: var(--echo-ink-primary); color: #fff; }
     .secondary { background: #fff; color: var(--echo-ink-primary); }
     .textButton {
@@ -126,6 +129,16 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       color: var(--echo-ink-faint);
     }
     .consentFine:empty { display: none; }
+    .consentFine.is-required {
+      border: 1px solid rgba(139,44,38,0.22);
+      border-radius: 10px;
+      background: #fff4ee;
+      padding: 9px 11px;
+      color: #8b2c26;
+      font-family: var(--echo-font-body);
+      font-size: 12px;
+      font-weight: 650;
+    }
     .track { height: 12px; overflow: hidden; border-radius: 999px; background: #e8e8e1; margin: 16px 0 10px; }
     .fill { height: 100%; width: 0%; background: var(--echo-ink-primary); transition: width 180ms ease; }
     /* indeterminate "we're working on it" bar for the prep phase (before job counts move) */
@@ -171,34 +184,37 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
     /* Centered composition: mascot on top, then everything stacked and centered on one axis. */
     .readyDecision {
       width: 100%;
-      max-width: min(720px, calc(100vw - clamp(32px, 8vw, 120px)));
+      max-width: min(960px, calc(100vw - clamp(24px, 7vw, 104px)));
       display: grid;
       justify-items: center;
       text-align: center;
-      gap: 20px;
+      gap: 16px;
       margin: 0 auto;
     }
     .readyHero {
       display: grid;
       justify-items: center;
-      gap: 16px;
+      gap: 13px;
       margin: 0 auto;
     }
     .readyMascot {
-      width: 84px;
-      height: 84px;
+      width: 76px;
+      height: 76px;
       object-fit: contain;
       filter: drop-shadow(0 12px 18px rgba(26,58,143,0.18));
     }
     .readyHero .exCopy h2 {
       margin: 0;
-      font-size: clamp(32px, 4.6vw, 60px);
-      line-height: 0.98;
+      max-width: 790px;
+      font-size: clamp(36px, 4.5vw, 58px);
+      line-height: 0.96;
+      letter-spacing: -0.018em;
     }
     .readyHero .exCopy .exSub {
       max-width: 560px;
-      margin: 12px auto 0;
-      font-size: clamp(16px, 1.45vw, 18px);
+      margin: 14px auto 0;
+      font-size: clamp(15px, 1.4vw, 17px);
+      line-height: 1.55;
     }
     .readyAction {
       display: grid;
@@ -218,7 +234,7 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
     }
     .exHeroReady {
       width: 100%;
-      max-width: min(860px, calc(100vw - clamp(36px, 9vw, 140px)));
+      max-width: min(980px, calc(100vw - clamp(36px, 9vw, 140px)));
       grid-template-columns: minmax(0, 1fr);
       justify-content: center;
       justify-items: stretch;
@@ -248,12 +264,15 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       margin-top: 0;
     }
     .readyDecision .actions .primary {
-      min-width: 240px;
-      min-height: 60px;
+      min-width: 250px;
+      min-height: 58px;
       padding: 0 30px;
       font-size: 16px;
-      box-shadow: 0 16px 28px -20px rgba(26,58,143,0.55);
+      border-radius: 14px;
+      box-shadow: 0 18px 34px -20px rgba(26,58,143,0.62);
     }
+    .readyDecision .actions .primary:not(:disabled):hover { box-shadow: 0 22px 38px -18px rgba(26,58,143,0.66); }
+    .readyDecision .actions .primary .setupGlyph { width: 19px; height: 19px; }
     /* Proof strip: one quiet line of evidence (source split), not stat cards. Centered. */
     .proofStrip {
       display: flex;
@@ -261,21 +280,27 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       justify-content: center;
       align-items: center;
       gap: 8px 12px;
-      min-height: 26px;
-      margin-top: 2px;
+      min-height: 40px;
+      margin-top: 1px;
+      border: 1px solid rgba(26,58,143,0.1);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.72);
+      padding: 7px 13px;
+      box-shadow: 0 10px 26px -24px rgba(20,36,84,0.5);
+      backdrop-filter: blur(8px);
       font-family: var(--echo-font-mono);
       font-size: 13px;
       color: var(--echo-ink-mute);
     }
     .proofStrip .pf { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
     .proofStrip .pf strong { color: var(--echo-ink-primary); font-weight: 800; font-variant-numeric: tabular-nums; }
-    .proofStrip .pfIcon { position: relative; width: 22px; height: 22px; border-radius: 6px; overflow: hidden; background: var(--echo-ink-primary); display: grid; place-items: center; flex: 0 0 auto; }
-    .proofStrip .pfIcon img { width: 22px; height: 22px; object-fit: cover; display: block; }
+    .proofStrip .pfIcon { position: relative; width: 22px; height: 22px; border-radius: 7px; overflow: hidden; background: #fff; display: grid; place-items: center; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(26,58,143,0.08); }
+    .proofStrip .pfIcon img { width: 22px; height: 22px; object-fit: contain; padding: 3px; display: block; }
     .proofStrip .pfFallback { display: none; place-items: center; width: 22px; height: 22px; color: #fff; font-size: 8px; font-weight: 900; }
     .proofStrip .pfDot { color: var(--echo-ink-faint); }
     .proofStrip .pfNote { color: var(--echo-ink-faint); font-size: 12px; }
     /* The action block: button first, reassurances attached right under it. Centered. */
-    .readyGo { display: grid; gap: 11px; margin-top: 6px; justify-items: center; }
+    .readyGo { display: grid; gap: 11px; margin-top: 10px; justify-items: center; }
     .ctaMeta { margin: 0; max-width: 480px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 9px; font-family: var(--echo-font-mono); font-size: 12px; line-height: 1.5; color: var(--echo-ink-mute); }
     .ctaMeta .cm { white-space: nowrap; }
     .ctaMeta .cmDot { color: var(--echo-ink-faint); }
@@ -284,8 +309,8 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       display: grid;
       justify-items: center;
       gap: 14px;
-      margin-top: clamp(24px, 5vh, 52px);
-      opacity: 0.82;
+      margin-top: clamp(18px, 4vh, 38px);
+      opacity: 0.88;
     }
     .readyTime {
       width: 100%;
@@ -683,148 +708,77 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
     .exOverdue { margin: 0; max-width: 620px; border: 1px solid rgba(196, 148, 42, 0.45); background: rgba(233, 185, 73, 0.12); border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--echo-ink-text); }
     .exOverdue strong { display: block; margin-bottom: 4px; color: var(--echo-ink-primary); }
     .is-hidden { display: none !important; }
-    .recallGateBlock { width: min(680px, 100%); margin: 2px auto 0; }
-    .recallGate {
-      width: 100%;
-      position: relative;
-      overflow: hidden;
-      border: 1px solid rgba(33,64,154,0.42);
-      border-radius: 12px;
-      background:
-        linear-gradient(180deg, rgba(239,244,255,0.98) 0%, rgba(255,255,255,0.99) 46%),
-        var(--echo-paper-white);
-      padding: clamp(24px, 4vw, 36px);
-      box-shadow: 0 28px 60px -42px rgba(33,64,154,0.48);
+    .setupPlanSlot { width: 100%; margin-top: 4px; }
+    .setupPlanChoice {
+      border-top: 1px solid var(--echo-line-soft);
+      padding-top: 20px;
       text-align: left;
     }
-    .recallGate::before {
-      content: "";
-      position: absolute;
-      inset: 0 0 auto 0;
-      height: 8px;
-      background: linear-gradient(90deg, #18317d, #4b6bd4, var(--echo-ink-primary));
-    }
-    .recallEyebrow {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      margin: 0 0 14px;
-      border: 1px solid rgba(33,64,154,0.18);
-      border-radius: 999px;
-      background: #eef3ff;
-      padding: 7px 11px;
-      font-family: var(--echo-font-mono);
-      font-size: 11px;
-      font-weight: 900;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-      color: #18317d;
-    }
-    .recallEyebrow i {
-      width: 8px;
-      height: 8px;
-      border-radius: 999px;
-      background: var(--echo-ink-primary);
-      box-shadow: 0 0 0 4px rgba(33,64,154,0.1);
-    }
-    .recallGate h3 {
+    .setupPlanIntro h3 {
       margin: 0;
-      max-width: 520px;
       font-family: var(--echo-font-brand);
-      font-size: clamp(34px, 4.6vw, 48px);
-      line-height: 1.02;
-      font-weight: 900;
+      font-size: clamp(20px, 2.5vw, 27px);
+      line-height: 1.08;
       color: var(--echo-ink-text);
-      letter-spacing: 0;
     }
-    .recallGate p {
-      max-width: 560px;
-      margin: 14px 0 0;
-      font-size: 16px;
-      line-height: 1.55;
+    .setupPlanIntro p {
+      margin: 6px 0 0;
+      font-size: 14px;
+      line-height: 1.45;
       color: var(--echo-ink-mute);
     }
-    .recallTrial {
-      margin-top: 18px;
-      display: inline-grid;
-      grid-template-columns: auto 1fr;
-      gap: 10px;
-      align-items: center;
-      border: 1px solid rgba(33,64,154,0.18);
-      border-radius: 10px;
-      background: #f3f6ff;
-      padding: 10px 12px;
-      color: #18317d;
-    }
-    .recallTrial strong {
-      font-size: 28px;
-      line-height: 1;
-      color: #18317d;
-    }
-    .recallTrial span {
-      font-size: 13px;
-      line-height: 1.25;
-      font-weight: 800;
-    }
-    .recallUsedNote {
-      margin-top: 18px;
-      border-left: 4px solid var(--echo-ink-primary);
-      background: #f3f6ff;
-      padding: 11px 13px;
-      color: #18317d;
-      font-size: 13px;
-      line-height: 1.45;
-      font-weight: 700;
+    .setupPlanGrid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 12px;
+      margin-top: 16px;
     }
-    .recallGateActions {
+    .setupPlanCard {
       display: flex;
-      flex-wrap: wrap;
-      gap: 14px;
-      align-items: center;
-      margin-top: 24px;
-    }
-    .recallGateActions button {
-      min-height: 50px;
-    }
-    .recallGateActions .primary {
+      flex-direction: column;
       min-width: 0;
-      border-color: #18317d;
-      background: var(--echo-ink-primary);
-      color: #fff;
-      box-shadow: 0 18px 34px -26px rgba(33,64,154,0.85);
-    }
-    .recallGateActions .primary:hover {
-      background: #18317d;
-    }
-    .recallGate .recallFine {
-      margin-top: 10px;
-      font-family: var(--echo-font-mono);
-      font-size: 11px;
-      color: var(--echo-ink-faint);
-    }
-    @media (max-width: 720px) {
-      .recallGateActions .primary { width: 100%; }
-    }
-    .recallGate code,
-    .recallSkipNote code {
-      font-family: var(--echo-font-mono);
-      font-size: 0.92em;
-      background: var(--echo-paper-soft);
-      border: 1px solid var(--echo-line-soft);
-      border-radius: 5px;
-      padding: 1px 5px;
-      color: var(--echo-ink-primary);
-    }
-    .recallTryWrap { width: 100%; }
-    .recallSkipNote {
-      margin: 0 0 12px;
       border: 1px solid var(--echo-line-soft);
-      border-radius: 8px;
-      background: rgba(246,244,238,0.86);
-      padding: 10px 12px;
+      border-radius: 10px;
+      background: var(--echo-paper-white);
+      padding: 16px;
+    }
+    .setupPlanCard.is-pro { border-color: rgba(33,64,154,0.42); background: #f7f9ff; }
+    .setupPlanHead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+    .setupPlanHead strong { font-family: var(--echo-font-brand); font-size: 20px; color: var(--echo-ink-primary); }
+    .setupPlanHead span { font-family: var(--echo-font-mono); font-size: 11px; font-weight: 800; color: var(--echo-ink-mute); }
+    .setupPlanCard > p { margin: 7px 0 0; font-size: 13px; line-height: 1.4; color: var(--echo-ink-mute); }
+    .setupPlanCard ul { display: grid; gap: 8px; margin: 15px 0 20px; padding: 0; list-style: none; }
+    .setupPlanCard li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 7px; align-items: start; font-size: 12px; line-height: 1.4; color: var(--echo-ink-text); }
+    .setupPlanCard li .setupGlyph { width: 16px; height: 16px; color: var(--echo-ink-accent-deep); }
+    .setupPlanCard button { width: 100%; min-height: 42px; margin-top: auto; }
+    .setupPlanCard small { margin-top: 7px; text-align: center; font-family: var(--echo-font-mono); font-size: 9px; color: var(--echo-ink-faint); }
+    .setupPlanFoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
+    .setupPlanFoot a,
+    .setupPlanConfirmed .textButton { border: 0; background: transparent; padding: 0; font-size: 12px; font-weight: 800; color: var(--echo-ink-primary); text-decoration: underline; cursor: pointer; }
+    .setupPlanFoot span { font-size: 12px; color: var(--echo-ink-mute); }
+    .setupPlanConfirmed {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 12px;
+      border: 1px solid rgba(44,143,104,0.28);
+      border-radius: 14px;
+      background: rgba(226,246,237,0.58);
+      padding: 14px 15px;
       font-size: 13px;
-      line-height: 1.45;
       color: var(--echo-ink-mute);
+      text-align: left;
+    }
+    .setupPlanConfirmedIcon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(44,143,104,0.13); color: #257b59; }
+    .setupPlanConfirmedIcon .setupGlyph { width: 18px; height: 18px; }
+    .setupPlanConfirmedCopy { min-width: 0; }
+    .setupPlanConfirmedCopy strong,
+    .setupPlanConfirmedCopy > span { display: block; }
+    .setupPlanConfirmedCopy strong { color: var(--echo-ink-text); }
+    .setupPlanConfirmedCopy > span { margin-top: 2px; line-height: 1.45; }
+    .setupPlanConfirmed .textButton { margin-left: 0; }
+    @media (max-width: 720px) {
+      .setupPlanGrid { grid-template-columns: 1fr; }
     }
     .tryCard { margin-top: 2px; max-width: 760px; border: 2px solid var(--echo-ink-primary); border-radius: 8px; background: var(--echo-paper-white); padding: clamp(18px, 3vw, 26px); box-shadow: 0 18px 38px -28px rgba(26,58,143,0.45); }
     .tryCard .tryK { margin: 0 0 10px; font-family: var(--echo-font-mono); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--echo-ink-primary); }
@@ -837,6 +791,100 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       color: var(--echo-ink-primary);
     }
     .tryCard > .tryTitle { font-size: clamp(30px, 3.8vw, 48px); line-height: 0.98; }
+    .tryLead { margin: -2px 0 0; color: var(--echo-ink-mute); line-height: 1.55; }
+    .recallPromptList {
+      display: grid;
+      gap: 14px;
+      margin-top: 24px;
+    }
+    .recallPrompt {
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 17px;
+      background: var(--echo-paper-white);
+      padding: 17px;
+      box-shadow: 0 9px 22px -22px rgba(27,51,111,0.75);
+    }
+    .recallPromptHead {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 14px;
+      color: var(--echo-ink-mute);
+    }
+    .recallPromptHead > span {
+      font-family: var(--echo-font-mono);
+      font-size: 9px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .recallCopy {
+      min-height: 32px;
+      gap: 7px;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 999px;
+      background: var(--echo-paper-soft);
+      color: var(--echo-ink-primary);
+      padding: 0 11px;
+      font-family: var(--echo-font-mono);
+      font-size: 10px;
+      font-weight: 800;
+      letter-spacing: 0.04em;
+    }
+    .recallCopy:hover { border-color: rgba(26,58,143,0.35); background: var(--echo-note-blue); }
+    .recallCopy .setupGlyph { width: 15px; height: 15px; }
+    .recallPromptText {
+      position: relative;
+      margin: 14px 0 0;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 12px;
+      background: color-mix(in srgb, var(--echo-paper-white) 48%, var(--echo-note-cream) 52%);
+      color: var(--echo-ink-text);
+      padding: 15px 16px 15px 42px;
+      font-family: var(--echo-font-mono);
+      font-size: clamp(13px, 1.7vw, 15px);
+      font-weight: 450;
+      line-height: 1.55;
+    }
+    .recallPromptText::before {
+      content: ">";
+      position: absolute;
+      top: 15px;
+      left: 17px;
+      color: var(--echo-ink-accent);
+      font-weight: 800;
+    }
+    .recallPromptActions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 9px;
+      margin-top: 13px;
+    }
+    .recallAgent {
+      min-height: 40px;
+      justify-content: center;
+      gap: 8px;
+      border: 1px solid rgba(26,58,143,0.18);
+      border-radius: 999px;
+      background: var(--echo-note-blue);
+      color: var(--echo-ink-primary);
+      padding: 0 15px 0 10px;
+      font-size: 12px;
+      font-weight: 700;
+    }
+    .recallAgent.is-claude { border-color: rgba(100,91,69,0.20); background: var(--echo-note-cream); }
+    .recallAgent:hover { border-color: rgba(26,58,143,0.42); transform: translateY(-1px); }
+    .recallAgentIcon {
+      width: 24px;
+      height: 24px;
+      display: grid;
+      place-items: center;
+      flex: 0 0 auto;
+      overflow: hidden;
+      border-radius: 7px;
+      background: var(--echo-ink-primary);
+    }
+    .recallAgentIcon img { width: 100%; height: 100%; display: block; object-fit: cover; }
     .promptShell { position: relative; margin-top: 14px; }
     .tryCard pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--echo-font-mono); font-size: 12px; line-height: 1.5; color: var(--echo-ink-mute); background: var(--echo-paper-soft); border: 1px solid var(--echo-line-soft); border-radius: 8px; padding: 11px 118px 11px 13px; }
     .promptControls {
@@ -1018,6 +1066,917 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       .resultNumber span { text-align: left; }
     }
 
+    /* ===== Setup hierarchy: permission, destination, plan, and session choice ===== */
+    .consentStage {
+      padding: clamp(18px, 4vw, 48px) 0;
+    }
+    .localConsent {
+      position: relative;
+      overflow: hidden;
+      width: min(940px, 100%);
+      border: 1px solid #c9cbc6;
+      border-left: 5px solid var(--echo-ink-primary);
+      border-radius: 3px;
+      background: #fbfbf8;
+      padding: 0;
+      box-shadow: none;
+    }
+    .localConsent::before { display: none; }
+    .localConsentAccess {
+      display: grid;
+      grid-template-columns: minmax(0, 0.88fr) minmax(390px, 1.12fr);
+      min-height: 520px;
+    }
+    .consentLead {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      border-right: 1px solid #d7d8d3;
+      padding: clamp(30px, 4vw, 46px);
+    }
+    .consentLead .consentEyebrow,
+    .skippedCopy .consentEyebrow { margin-bottom: 18px; }
+    .consentLead h2 {
+      margin: 0;
+      max-width: 440px;
+      color: var(--echo-ink-primary);
+      font-size: clamp(34px, 4vw, 48px);
+      line-height: 0.98;
+      letter-spacing: -0.016em;
+    }
+    .consentIntro {
+      margin: 20px 0 0;
+      max-width: 420px;
+      color: var(--echo-ink-mute);
+      font-size: 15px;
+      line-height: 1.6;
+    }
+    .consentLocalMark {
+      display: grid;
+      grid-template-columns: 68px 1fr;
+      gap: 14px;
+      align-items: center;
+      margin-top: auto;
+      border-top: 1px solid #d7d8d3;
+      padding-top: 24px;
+    }
+    .consentLocalMark img { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(26,58,143,0.13)); }
+    .consentLocalMark strong,
+    .consentLocalMark small { display: block; }
+    .consentLocalMark strong { color: var(--echo-ink-text); font-size: 13px; }
+    .consentLocalMark small { margin-top: 3px; color: var(--echo-ink-mute); font-size: 11px; line-height: 1.45; }
+    .consentDecision {
+      min-width: 0;
+      padding: clamp(28px, 4vw, 42px);
+    }
+    .consentScopeHead {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      align-items: baseline;
+      padding-bottom: 13px;
+    }
+    .consentScopeHead strong { color: var(--echo-ink-text); font-size: 16px; }
+    .consentScopeHead span {
+      font-family: var(--echo-font-mono);
+      color: var(--echo-ink-mute);
+      font-size: 10px;
+      font-weight: 800;
+      letter-spacing: 0.07em;
+      text-transform: uppercase;
+    }
+    .setupGlyph {
+      width: 20px;
+      height: 20px;
+      display: block;
+      flex: 0 0 auto;
+      overflow: visible;
+    }
+    .consentScope {
+      display: grid;
+      gap: 0;
+      margin: 0;
+      border-top: 1px solid #afb2ac;
+      border-bottom: 1px solid #afb2ac;
+      border-radius: 0;
+      background: transparent;
+    }
+    .consentScope > div {
+      display: grid;
+      grid-template-columns: 30px 1fr;
+      gap: 14px;
+      align-items: start;
+      padding: 15px 0;
+    }
+    .consentScope > div + div { border-top: 1px solid var(--echo-line-soft); }
+    .consentScopeNumber {
+      padding-top: 2px;
+      font-family: var(--echo-font-mono);
+      color: var(--echo-ink-primary);
+      font-size: 10px;
+      font-weight: 800;
+      letter-spacing: 0.04em;
+    }
+    .consentScope p { margin: 0; }
+    .consentScope strong,
+    .consentScope small { display: block; }
+    .consentScope strong { color: var(--echo-ink-text); font-size: 13px; }
+    .consentScope small { margin-top: 3px; color: var(--echo-ink-mute); font-size: 11px; line-height: 1.45; }
+    .consentCheck {
+      display: grid;
+      grid-template-columns: 20px 1fr;
+      gap: 12px;
+      align-items: start;
+      margin-top: 20px;
+      border: 1px solid #aeb5c5;
+      border-radius: 3px;
+      background: #fff;
+      padding: 13px 14px;
+      cursor: pointer;
+    }
+    .consentCheck:focus-within { outline: 3px solid rgba(26,58,143,0.14); outline-offset: 2px; }
+    .consentCheck input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--echo-ink-primary); }
+    .consentCheck strong,
+    .consentCheck small { display: block; }
+    .consentCheck strong { color: var(--echo-ink-text); font-size: 13px; }
+    .consentCheck small { margin-top: 3px; color: var(--echo-ink-mute); font-size: 11px; line-height: 1.4; }
+    .consentDecision .consentActions { margin-top: 17px; }
+    .consentActions button { border-radius: 4px; }
+    .consentActions .textButton { min-height: 44px; }
+
+    .localConsentSkipped {
+      display: grid;
+      grid-template-columns: 240px minmax(0, 1fr);
+      width: min(820px, 100%);
+      min-height: 360px;
+      border-left-width: 1px;
+    }
+    .skippedEcho {
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      background: var(--echo-ink-primary);
+      padding: 28px;
+      color: #fff;
+    }
+    .skippedEcho::before { content: ""; position: absolute; width: 190px; height: 190px; left: -70px; top: -80px; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; }
+    .skippedEcho img { position: relative; width: 116px; height: 116px; margin: 0 auto auto; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,0.2)); }
+    .skippedEcho span,
+    .skippedEcho strong { position: relative; display: block; }
+    .skippedEcho span { font-family: var(--echo-font-mono); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
+    .skippedEcho strong { margin-top: 4px; font-family: var(--echo-font-brand); font-size: 28px; line-height: 1; }
+    .skippedCopy { padding: clamp(30px, 5vw, 50px); }
+    .skippedCopy h2 { max-width: 520px; margin: 0; color: var(--echo-ink-text); font-size: clamp(34px, 4vw, 48px); line-height: 0.98; }
+    .skippedCopy > p:not(.consentEyebrow):not(.consentFine) { max-width: 520px; margin: 18px 0 0; color: var(--echo-ink-mute); font-size: 15px; line-height: 1.6; }
+    .skippedNext { display: grid; grid-template-columns: 46px 1fr; gap: 12px; margin-top: 24px; border-top: 1px solid #c9cbc6; border-bottom: 1px solid #c9cbc6; padding: 13px 0; }
+    .skippedNext span { font-family: var(--echo-font-mono); color: var(--echo-ink-mute); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
+    .skippedNext strong { color: var(--echo-ink-text); font-size: 13px; }
+    .skippedCopy .consentActions { margin-top: 20px; }
+
+    .setupAccountSlot,
+    .sessionSelectionSlot { width: 100%; }
+    .setupAccountCard {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      gap: 13px;
+      align-items: center;
+      margin: 12px 0 0;
+      border: 1px solid rgba(26,58,143,0.11);
+      border-radius: 16px;
+      background: rgba(255,255,255,0.86);
+      padding: 15px 17px;
+      box-shadow: 0 14px 34px -28px rgba(20,36,84,0.48);
+      text-align: left;
+      backdrop-filter: blur(10px);
+    }
+    .setupAccountAvatar {
+      position: relative;
+      overflow: hidden;
+      width: 44px;
+      height: 44px;
+      display: grid;
+      place-items: center;
+      border-radius: 50%;
+      background: linear-gradient(145deg, #2854bc, var(--echo-ink-primary));
+      color: #fff;
+      font-family: var(--echo-font-brand);
+      font-size: 14px;
+      font-weight: 900;
+    }
+    .setupAccountAvatar > span,
+    .setupAccountAvatar > img { grid-area: 1 / 1; }
+    .setupAccountAvatar > img {
+      width: 100%;
+      height: 100%;
+      display: block;
+      object-fit: cover;
+    }
+    .setupAccountCopy { min-width: 0; }
+    .setupAccountCopy small,
+    .setupAccountCopy strong,
+    .setupAccountCopy > span { display: block; }
+    .setupAccountCopy small {
+      font-family: var(--echo-font-mono);
+      color: var(--echo-ink-mute);
+      font-size: 9px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .setupAccountCopy strong { margin-top: 3px; overflow: hidden; color: var(--echo-ink-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
+    .setupAccountCopy > span { margin-top: 1px; overflow: hidden; color: var(--echo-ink-mute); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+    .setupAccountChange { color: var(--echo-ink-primary); }
+
+    .setupPlanSlot { margin-top: 16px; }
+    .setupPlanChoice {
+      position: relative;
+      overflow: hidden;
+      border: 1px solid rgba(26,58,143,0.11);
+      border-radius: 20px;
+      background: rgba(255,255,255,0.78);
+      padding: clamp(20px, 3vw, 28px);
+      box-shadow: 0 22px 55px -42px rgba(20,36,84,0.5);
+      backdrop-filter: blur(10px);
+    }
+    .setupPlanChoice::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--echo-ink-primary), var(--echo-ink-accent)); opacity: 0.9; }
+    .setupPlanIntro { padding-right: min(8vw, 90px); }
+    .setupPlanIntro h3 { font-size: clamp(24px, 3vw, 31px); letter-spacing: -0.012em; }
+    .setupPlanIntro p { max-width: 760px; margin-top: 8px; }
+    .setupPlanGrid { gap: 14px; margin-top: 21px; }
+    .setupPlanCard {
+      position: relative;
+      border-color: rgba(26,58,143,0.12);
+      border-radius: 16px;
+      padding: 19px 18px 17px;
+      box-shadow: 0 12px 30px -28px rgba(20,36,84,0.45);
+      transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
+    }
+    .setupPlanCard:hover { border-color: rgba(26,58,143,0.32); box-shadow: 0 20px 38px -28px rgba(20,36,84,0.55); transform: translateY(-2px); }
+    .setupPlanCard.is-pro { border-color: rgba(33,64,154,0.42); background: linear-gradient(180deg, #f6f8ff 0%, #eef3ff 100%); box-shadow: 0 18px 38px -30px rgba(33,64,154,0.6); }
+    .setupPlanCard.is-pro::before {
+      content: "Popular";
+      position: absolute;
+      top: 12px;
+      right: 13px;
+      border-radius: 999px;
+      background: var(--echo-ink-primary);
+      padding: 5px 8px;
+      color: #fff;
+      font-family: var(--echo-font-mono);
+      font-size: 8px;
+      font-weight: 900;
+      letter-spacing: 0.07em;
+      text-transform: uppercase;
+    }
+    .setupPlanHead { align-items: center; }
+    .setupPlanHead strong { font-size: 22px; }
+    .setupPlanCard.is-pro .setupPlanHead { padding-right: 54px; }
+    .setupPlanCard button { border-radius: 11px; min-height: 46px; }
+    .setupPlanFoot { margin-top: 16px; }
+    .setupPlanConfirmed { margin-top: 2px; box-shadow: 0 12px 30px -28px rgba(44,143,104,0.5); }
+
+    .sessionSelectionCard {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      gap: 13px;
+      align-items: center;
+      margin-top: 13px;
+      border: 1px solid rgba(26,58,143,0.16);
+      border-radius: 16px;
+      background: linear-gradient(135deg, rgba(248,250,255,0.96), rgba(241,245,255,0.9));
+      padding: 17px;
+      text-align: left;
+      box-shadow: 0 14px 32px -28px rgba(20,36,84,0.5);
+    }
+    .sessionSelectionCard.is-loading { grid-template-columns: auto 1fr; }
+    .sessionSelectionIcon {
+      width: 40px;
+      height: 40px;
+      display: grid;
+      place-items: center;
+      border-radius: 12px;
+      background: rgba(41,83,186,0.09);
+      color: var(--echo-ink-primary);
+      font-size: 20px;
+      font-weight: 900;
+    }
+    .sessionSelectionIcon .setupGlyph { width: 21px; height: 21px; }
+    .sessionSelectionCopy { min-width: 0; }
+    .sessionSelectionEyebrow,
+    .sessionSelectionCopy > strong,
+    .sessionSelectionCopy p { display: block; }
+    .sessionSelectionEyebrow {
+      font-family: var(--echo-font-mono);
+      color: var(--echo-ink-mute);
+      font-size: 9px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .sessionSelectionCopy > strong { margin-top: 3px; color: var(--echo-ink-text); font-size: 17px; }
+    .sessionSelectionCopy p,
+    .sessionSelectionCard.is-loading p { margin: 3px 0 0; color: var(--echo-ink-mute); font-size: 12px; line-height: 1.45; }
+    .sessionSelectionCard.is-loading strong { color: var(--echo-ink-text); }
+    .sessionEditButton { min-height: 40px; border-radius: 10px; white-space: nowrap; }
+
+    .sessionPicker {
+      width: min(860px, calc(100vw - 32px));
+      max-height: min(780px, calc(100vh - 32px));
+      margin: auto;
+      border: 0;
+      border-radius: 18px;
+      background: transparent;
+      padding: 0;
+      color: var(--echo-ink-text);
+      box-shadow: 0 34px 90px -30px rgba(10,18,46,0.68);
+    }
+    .sessionPicker::backdrop { background: rgba(13,21,43,0.62); backdrop-filter: blur(4px); }
+    .sessionPickerShell { display: grid; grid-template-rows: auto auto auto minmax(180px, 1fr) auto; max-height: min(780px, calc(100vh - 32px)); background: var(--echo-paper-white); }
+    .sessionPickerHead {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      gap: 20px;
+      margin: 0;
+      border-bottom: 1px solid var(--echo-line-soft);
+      padding: 22px 24px 18px;
+    }
+    .sessionPickerHead > div > span {
+      font-family: var(--echo-font-mono);
+      color: var(--echo-ink-primary);
+      font-size: 10px;
+      font-weight: 900;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .sessionPickerHead h2 { margin: 5px 0 0; color: var(--echo-ink-text); font-size: clamp(26px, 4vw, 36px); line-height: 1; }
+    .sessionPickerHead p { margin: 8px 0 0; color: var(--echo-ink-mute); font-size: 13px; }
+    .sessionPickerClose {
+      width: 38px;
+      min-height: 38px;
+      flex: 0 0 auto;
+      border-color: var(--echo-line-soft);
+      border-radius: 50%;
+      background: var(--echo-paper-soft);
+      color: var(--echo-ink-text);
+      padding: 0;
+      font-size: 23px;
+      font-weight: 500;
+    }
+    .sessionPickerToolbar {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 180px;
+      gap: 12px;
+      border-bottom: 1px solid var(--echo-line-soft);
+      background: var(--echo-paper-soft);
+      padding: 14px 24px;
+    }
+    .sessionPickerToolbar label { display: grid; gap: 5px; }
+    .sessionPickerToolbar label > span {
+      font-family: var(--echo-font-mono);
+      color: var(--echo-ink-mute);
+      font-size: 9px;
+      font-weight: 800;
+      letter-spacing: 0.07em;
+      text-transform: uppercase;
+    }
+    .sessionPickerToolbar input,
+    .sessionPickerToolbar select {
+      width: 100%;
+      height: 42px;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 9px;
+      background: var(--echo-paper-white);
+      padding: 0 12px;
+      color: var(--echo-ink-text);
+      font: inherit;
+      font-size: 13px;
+    }
+    .sessionPickerToolbar input:focus,
+    .sessionPickerToolbar select:focus { border-color: var(--echo-ink-primary); outline: 3px solid rgba(26,58,143,0.12); }
+    .sessionPickerActions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border-bottom: 1px solid var(--echo-line-soft);
+      padding: 9px 24px;
+    }
+    .sessionPickerActions > strong { margin-right: auto; color: var(--echo-ink-primary); font-size: 13px; font-variant-numeric: tabular-nums; }
+    .sessionPickerActions [role="status"] { color: #9b6612; font-size: 11px; font-weight: 700; }
+    .sessionPickerActions .textButton { min-height: 32px; color: var(--echo-ink-primary); }
+    .sessionPickerList { min-height: 0; overflow-y: auto; background: var(--echo-paper-white); padding: 6px 0; }
+    .sessionPickerRow {
+      display: grid;
+      grid-template-columns: auto auto minmax(0, 1fr) auto;
+      gap: 12px;
+      align-items: center;
+      margin: 0 8px;
+      border: 1px solid transparent;
+      border-radius: 10px;
+      padding: 10px 14px;
+      cursor: pointer;
+    }
+    .sessionPickerRow:hover { background: var(--echo-paper-soft); }
+    .sessionPickerRow.is-selected { border-color: rgba(26,58,143,0.15); background: #f4f7ff; }
+    .sessionPickerRow > input { width: 17px; height: 17px; margin: 0; accent-color: var(--echo-ink-primary); }
+    .sessionPickerSource {
+      width: 32px;
+      height: 32px;
+      display: grid;
+      place-items: center;
+      border-radius: 8px;
+      background: #fff;
+      color: var(--echo-ink-primary);
+      font-family: var(--echo-font-mono);
+      font-size: 9px;
+      font-weight: 900;
+    }
+    .sessionPickerSource.is-claude { background: #fff; }
+    .sessionPickerSource img,
+    .sessionPickerSourceFallback {
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+    }
+    .sessionPickerSource img { display: block; object-fit: contain; padding: 4px; }
+    .sessionPickerSourceFallback { display: none; place-items: center; }
+    .sessionPickerMain { min-width: 0; }
+    .sessionPickerMain strong,
+    .sessionPickerMain small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .sessionPickerMain strong { color: var(--echo-ink-text); font-size: 13px; }
+    .sessionPickerMain small { margin-top: 3px; color: var(--echo-ink-mute); font-size: 11px; }
+    .sessionPickerMeta { font-family: var(--echo-font-mono); color: var(--echo-ink-mute); font-size: 10px; white-space: nowrap; }
+    .sessionPickerOverflow,
+    .sessionPickerEmpty { margin: 0; padding: 18px 24px; color: var(--echo-ink-mute); font-size: 12px; text-align: center; }
+    .sessionPickerFoot {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 18px;
+      border-top: 1px solid var(--echo-line-soft);
+      background: var(--echo-paper-soft);
+      padding: 14px 24px;
+    }
+    .sessionPickerFoot p { margin: 0; color: var(--echo-ink-mute); font-size: 12px; }
+    .sessionPickerFoot button { min-width: 170px; }
+
+    .pauseStatus {
+      display: grid;
+      justify-items: center;
+      gap: 7px;
+      color: var(--echo-ink-mute);
+    }
+    .pauseStatus > span {
+      width: 50px;
+      height: 50px;
+      display: grid;
+      place-items: center;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 50%;
+      background: var(--echo-paper-soft);
+      color: var(--echo-ink-primary);
+      font-family: var(--echo-font-brand);
+      font-size: 18px;
+      font-weight: 900;
+    }
+    .pauseStatus > span .setupGlyph { width: 24px; height: 24px; }
+    .pauseStatus small {
+      font-family: var(--echo-font-mono);
+      font-size: 10px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    /* ===== Echo editorial utility system =====
+       Setup is one working document, not a stack of floating SaaS cards. */
+    .utilityEyebrow {
+      margin: 0;
+      font-family: var(--echo-font-mono);
+      color: var(--echo-ink-primary);
+      font-size: 10px;
+      font-weight: 900;
+      letter-spacing: 0.1em;
+      line-height: 1.35;
+      text-transform: uppercase;
+    }
+
+    .readyDecision {
+      max-width: min(980px, calc(100vw - clamp(24px, 7vw, 104px)));
+      justify-items: stretch;
+      gap: 0;
+      border-top: 1px solid #c9cbc6;
+      border-right: 1px solid #c9cbc6;
+      border-bottom: 1px solid #c9cbc6;
+      border-left: 5px solid var(--echo-ink-primary);
+      border-radius: 2px;
+      background: var(--echo-paper-white);
+      text-align: left;
+    }
+    .readyEyebrow {
+      width: 100%;
+      border-bottom: 1px solid #d7d8d3;
+      background: var(--echo-paper-soft);
+      padding: 13px clamp(22px, 4vw, 34px);
+    }
+    .readyHero {
+      width: 100%;
+      grid-template-columns: 94px minmax(0, 1fr);
+      justify-items: start;
+      align-items: center;
+      gap: clamp(20px, 3vw, 34px);
+      margin: 0;
+      border-bottom: 1px solid #d7d8d3;
+      padding: clamp(26px, 4vw, 42px) clamp(22px, 4vw, 34px);
+    }
+    .readyMascot {
+      width: 84px;
+      height: 84px;
+      filter: none;
+    }
+    .readyHero .exCopy h2 {
+      max-width: 760px;
+      font-size: clamp(38px, 5vw, 60px);
+      line-height: 0.96;
+    }
+    .readyHero .exCopy .exSub {
+      max-width: 650px;
+      margin: 14px 0 0;
+    }
+    .proofStrip {
+      width: 100%;
+      justify-content: flex-start;
+      min-height: 44px;
+      margin: 0;
+      border: 0;
+      border-bottom: 1px solid #d7d8d3;
+      border-radius: 0;
+      background: #f7f6f2;
+      padding: 9px clamp(22px, 4vw, 34px);
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+    .proofStrip .pfIcon {
+      border-radius: 2px;
+      box-shadow: inset 0 0 0 1px #d7d8d3;
+    }
+    .setupAccountSlot,
+    .setupPlanSlot,
+    .sessionSelectionSlot { margin: 0; }
+    .setupAccountCard {
+      margin: 0;
+      border: 0;
+      border-bottom: 1px solid #d7d8d3;
+      border-radius: 0;
+      background: var(--echo-paper-white);
+      padding: 15px clamp(22px, 4vw, 34px);
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+    .setupAccountAvatar {
+      width: 42px;
+      height: 42px;
+      border-radius: 2px;
+      background: var(--echo-ink-primary);
+    }
+    .setupAccountChange { border-radius: 2px; }
+
+    .setupPlanChoice {
+      overflow: visible;
+      margin: 0;
+      border: 0;
+      border-bottom: 1px solid #d7d8d3;
+      border-radius: 0;
+      background: var(--echo-paper-white);
+      padding: clamp(24px, 4vw, 34px);
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+    .setupPlanChoice::before { display: none; }
+    .setupPlanIntro { padding-right: 0; }
+    .setupPlanIntro h3 { font-size: clamp(25px, 3vw, 32px); }
+    .setupPlanGrid {
+      gap: 0;
+      margin-top: 22px;
+      border-top: 1px solid #bfc1bb;
+      border-bottom: 1px solid #bfc1bb;
+    }
+    .setupPlanCard {
+      position: relative;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      padding: 20px 18px 18px;
+      box-shadow: none;
+      transition: background 150ms ease;
+    }
+    .setupPlanCard + .setupPlanCard { border-left: 1px solid #d7d8d3; }
+    .setupPlanCard:hover {
+      border-color: transparent;
+      background: #f7f6f2;
+      box-shadow: none;
+      transform: none;
+    }
+    .setupPlanCard.is-pro {
+      border-color: transparent;
+      background: #f2f5fc;
+      box-shadow: inset 0 3px 0 var(--echo-ink-primary);
+    }
+    .setupPlanCard.is-pro::before {
+      top: 16px;
+      right: 16px;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      padding: 0;
+      color: var(--echo-ink-primary);
+      font-size: 8px;
+    }
+    .setupPlanCard.is-pro .setupPlanHead { padding-right: 50px; }
+    .setupPlanCard button,
+    .sessionEditButton { border-radius: 4px; box-shadow: none; }
+    .setupPlanConfirmed {
+      margin: 0;
+      border: 0;
+      border-bottom: 1px solid #d7d8d3;
+      border-radius: 0;
+      background: #f3f8f5;
+      padding: 15px clamp(22px, 4vw, 34px);
+      box-shadow: inset 4px 0 0 #2c8f68;
+    }
+    .setupPlanConfirmedIcon {
+      border-radius: 2px;
+      background: transparent;
+    }
+
+    .sessionSelectionCard {
+      margin: 0;
+      border: 0;
+      border-bottom: 1px solid #d7d8d3;
+      border-radius: 0;
+      background: #f7f6f2;
+      padding: 16px clamp(22px, 4vw, 34px);
+      box-shadow: none;
+    }
+    .sessionSelectionIcon {
+      width: 38px;
+      height: 38px;
+      border: 1px solid #c8cbc5;
+      border-radius: 2px;
+      background: var(--echo-paper-white);
+    }
+    .readyGo {
+      width: 100%;
+      justify-items: start;
+      margin: 0;
+      padding: 24px clamp(22px, 4vw, 34px) 26px;
+    }
+    .readyDecision .actions { justify-content: flex-start; }
+    .readyDecision .actions .primary {
+      min-height: 52px;
+      border-radius: 4px;
+      box-shadow: none;
+    }
+    .readyDecision .actions .primary:not(:disabled):hover { box-shadow: none; }
+    .ctaMeta { justify-content: flex-start; }
+    .readyFoot {
+      width: 100%;
+      justify-items: stretch;
+      gap: 0;
+      margin: 0;
+      border-top: 1px solid #d7d8d3;
+      padding: 15px clamp(22px, 4vw, 34px) 18px;
+      opacity: 1;
+    }
+    .readyExplain { max-width: none; border: 0; padding: 0; }
+    .readySteps { gap: 0; border-top: 1px solid #d7d8d3; border-bottom: 1px solid #d7d8d3; }
+    .readyStep { border: 0; border-radius: 0; padding: 12px; }
+    .readyStep + .readyStep { border-left: 1px solid #d7d8d3; }
+
+    .loading-panel {
+      border-top: 1px solid #c9cbc6;
+      border-right: 1px solid #c9cbc6;
+      border-bottom: 1px solid #c9cbc6;
+      border-left: 5px solid var(--echo-ink-primary);
+      border-radius: 2px;
+      background: var(--echo-paper-white);
+      box-shadow: none;
+    }
+    .loading-panel .warning,
+    .loading-panel .error { border-radius: 2px; }
+
+    .exHeroActive,
+    .exHeroResult {
+      border-top: 1px solid #c9cbc6;
+      border-right: 1px solid #c9cbc6;
+      border-bottom: 1px solid #c9cbc6;
+      border-left: 5px solid var(--echo-ink-primary);
+      border-radius: 2px;
+      background: var(--echo-paper-white);
+      padding: clamp(28px, 5vw, 48px);
+    }
+    .workbench { max-width: none; gap: 15px; }
+    .workbench h2 { margin-top: 4px; }
+    .workbench .track {
+      height: 6px;
+      margin: 7px 0 10px;
+      border-radius: 0;
+    }
+    .workbench .track .fill { border-radius: 0; }
+    .exCurrent i {
+      width: 10px;
+      height: 10px;
+      border-radius: 2px;
+      box-shadow: none;
+    }
+    .exOverdue { border-radius: 2px; }
+
+    .resultStage { max-width: none; padding: 0; }
+    .resultTop { border-top: 1px solid #d7d8d3; padding-top: 18px; }
+    .resultNumber { border-radius: 2px; }
+    .tryCard {
+      max-width: none;
+      border: 1px solid #aeb5c5;
+      border-left: 5px solid var(--echo-ink-primary);
+      border-radius: 2px;
+      padding: clamp(20px, 3vw, 28px);
+      box-shadow: none;
+    }
+    .tryCard pre,
+    .promptPeek pre { border-radius: 2px; }
+    .promptCopyLabel { border-radius: 2px; }
+    .agentLaunch { gap: 0; border-top: 1px solid #d7d8d3; border-bottom: 1px solid #d7d8d3; }
+    .agentLaunch button {
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+    }
+    .agentLaunch button + button { border-left: 1px solid #d7d8d3; }
+    .agentIcon { border-radius: 2px; box-shadow: none; }
+    .hudTip {
+      max-width: none;
+      border-top: 1px solid #d7d8d3;
+      border-bottom: 1px solid #d7d8d3;
+      padding: 14px 0;
+    }
+    .hudTip img { filter: none; }
+    .doneCloseNote { margin-top: 18px; }
+
+    .miniLoad {
+      width: min(680px, calc(100vw - 40px));
+      max-width: 680px;
+      gap: 14px;
+      margin: 0 auto;
+      border-top: 1px solid #c9cbc6;
+      border-right: 1px solid #c9cbc6;
+      border-bottom: 1px solid #c9cbc6;
+      border-left: 5px solid var(--echo-ink-primary);
+      border-radius: 2px;
+      background: var(--echo-paper-white);
+      padding: clamp(30px, 6vw, 56px);
+      text-align: left;
+      place-items: start;
+    }
+    .miniLoad h2 { font-size: clamp(32px, 5vw, 48px); }
+    .miniLoad p { max-width: 560px; }
+    .miniBar {
+      width: min(420px, 100%);
+      height: 6px;
+      margin-top: 12px;
+      border-radius: 0;
+    }
+    .miniBar i { border-radius: 0; }
+
+    .skipStage {
+      width: min(820px, calc(100vw - 40px));
+      max-width: 820px;
+      justify-items: start;
+      gap: 16px;
+      border-top: 1px solid #c9cbc6;
+      border-right: 1px solid #c9cbc6;
+      border-bottom: 1px solid #c9cbc6;
+      border-left: 5px solid var(--echo-ink-primary);
+      border-radius: 2px;
+      background: var(--echo-paper-white);
+      padding: clamp(28px, 5vw, 46px);
+      text-align: left;
+    }
+    .skipStage h2 { max-width: 680px; }
+    .skipStage p { max-width: 660px; }
+    .skipStage .tryCard,
+    .skipStage .hudTip { width: 100%; }
+    .pauseStatus {
+      grid-template-columns: 32px auto;
+      justify-items: start;
+      align-items: center;
+      gap: 10px;
+    }
+    .pauseStatus > span {
+      width: 32px;
+      height: 32px;
+      border-radius: 2px;
+      background: var(--echo-paper-white);
+    }
+
+    .sessionPicker {
+      border-top: 1px solid #c9cbc6;
+      border-right: 1px solid #c9cbc6;
+      border-bottom: 1px solid #c9cbc6;
+      border-left: 5px solid var(--echo-ink-primary);
+      border-radius: 2px;
+      background: var(--echo-paper-white);
+      box-shadow: 0 28px 70px -44px rgba(10,18,46,0.72);
+    }
+    .sessionPicker::backdrop { background: rgba(28,31,38,0.58); backdrop-filter: none; }
+    .sessionPickerShell { background: var(--echo-paper-white); }
+    .sessionPickerHead { background: var(--echo-paper-white); }
+    .sessionPickerClose,
+    .sessionPickerToolbar input,
+    .sessionPickerToolbar select { border-radius: 2px; }
+    .sessionPickerToolbar { background: #f7f6f2; }
+    .sessionPickerList { padding: 0; }
+    .sessionPickerRow {
+      margin: 0;
+      border: 0;
+      border-bottom: 1px solid var(--echo-line-soft);
+      border-radius: 0;
+      padding: 11px 22px;
+    }
+    .sessionPickerRow.is-selected {
+      border-color: var(--echo-line-soft);
+      background: #f2f5fc;
+      box-shadow: inset 3px 0 0 var(--echo-ink-primary);
+    }
+    .sessionPickerSource { border: 1px solid #d7d8d3; border-radius: 2px; }
+    .sessionPickerFoot { background: #f7f6f2; }
+    .sessionPickerFoot button { border-radius: 4px; }
+
+    @media (max-width: 720px) {
+      .localConsent { border-radius: 2px; }
+      .localConsentAccess,
+      .localConsentSkipped { grid-template-columns: 1fr; min-height: 0; }
+      .consentLead { border-right: 0; border-bottom: 1px solid #d7d8d3; padding: 28px 24px; }
+      .consentLead h2 { font-size: clamp(34px, 10.5vw, 44px); }
+      .consentLocalMark { margin-top: 28px; }
+      .consentDecision { padding: 26px 24px 28px; }
+      .consentDecision .consentActions { align-items: stretch; }
+      .consentDecision .consentActions .primary { width: 100%; }
+      .skippedEcho { min-height: 190px; padding: 22px 24px; }
+      .skippedEcho img { position: absolute; width: 124px; height: 124px; right: 18px; top: 10px; margin: 0; }
+      .skippedEcho span,
+      .skippedEcho strong { width: fit-content; }
+      .skippedCopy { padding: 28px 24px 30px; }
+      .skippedCopy h2 { font-size: clamp(34px, 10vw, 44px); }
+      .readyDecision { max-width: 100%; gap: 0; border-left-width: 4px; }
+      .readyEyebrow { padding: 12px 18px; }
+      .readyHero { grid-template-columns: 1fr; gap: 14px; padding: 24px 18px; }
+      .readyMascot { width: 68px; height: 68px; }
+      .readyHero .exCopy h2 { font-size: clamp(34px, 11vw, 48px); }
+      .readyHero .exCopy .exSub { font-size: 15px; }
+      .proofStrip { max-width: 100%; border-radius: 0; padding: 9px 18px; }
+      .setupAccountCard,
+      .sessionSelectionCard { grid-template-columns: auto minmax(0, 1fr); }
+      .setupAccountChange,
+      .sessionEditButton { grid-column: 2; width: fit-content; padding-left: 0; }
+      .setupPlanChoice { border-radius: 0; padding: 22px 18px; }
+      .setupPlanIntro { padding-right: 0; }
+      .setupPlanCard { padding: 18px 16px 16px; }
+      .setupPlanCard + .setupPlanCard { border-left: 0; border-top: 1px solid #d7d8d3; }
+      .setupPlanConfirmed { grid-template-columns: auto minmax(0, 1fr); }
+      .setupPlanConfirmed .textButton { grid-column: 2; width: fit-content; }
+      .readyDecision .actions,
+      .readyDecision .actions .primary { width: 100%; }
+      .readyDecision .actions .primary { min-width: 0; }
+      .readyGo,
+      .readyFoot,
+      .setupAccountCard,
+      .sessionSelectionCard,
+      .setupPlanConfirmed { padding-left: 18px; padding-right: 18px; }
+      .readySteps { grid-template-columns: 1fr; }
+      .readyStep + .readyStep { border-left: 0; border-top: 1px solid #d7d8d3; }
+      .exHeroActive,
+      .exHeroResult { padding: 26px 20px; }
+      .agentLaunch { grid-template-columns: 1fr; }
+      .agentLaunch button + button { border-left: 0; border-top: 1px solid #d7d8d3; }
+      .tryCard pre { padding: 52px 12px 12px; }
+      .recallPromptActions { display: grid; grid-template-columns: 1fr; }
+      .recallAgent { width: 100%; }
+      .skipStage { width: calc(100vw - 28px); padding: 26px 20px; }
+      .sessionPicker { width: 100vw; max-height: 100vh; border-radius: 0; border-left-width: 4px; }
+      .sessionPickerShell { max-height: 100vh; min-height: 100vh; }
+      .sessionPickerHead { padding: 18px 16px 15px; }
+      .sessionPickerToolbar { grid-template-columns: 1fr; padding: 12px 16px; }
+      .sessionPickerActions { flex-wrap: wrap; padding: 8px 16px; }
+      .sessionPickerActions > strong { width: 100%; }
+      .sessionPickerRow { grid-template-columns: auto auto minmax(0, 1fr); margin: 0 4px; padding: 10px 8px; }
+      .sessionPickerMeta { display: none; }
+      .sessionPickerFoot { align-items: stretch; flex-direction: column; padding: 12px 16px; }
+      .sessionPickerFoot button { width: 100%; }
+    }
+
     /* ===== workspace readout dashboard (Part 2 — replaces explainPage) ===== */
     @keyframes rdoRise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
     @keyframes rdoGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }