/* ===== Palette 15 (lifted from web/app/globals.css — the real app) =====
     Warm sandy PAGE, cream SURFACES floating on it, chocolate-brown ink/primary,
     teal as a sparing accent. The personality lives in --bg showing between cards. */
  :root {
    --bg: 240 230 216;          /* warm sandy page */
    --surface: 252 248 242;     /* near-white cream card */
    --ink: 92 44 6;             /* chocolate brown text */
    --ink-muted: 140 100 70;
    --ink-soft: 185 160 138;
    --heading: 92 44 6;
    --link: 0 168 142;          /* teal */
    --link-hover: 0 132 112;
    --primary: 92 44 6;         /* chocolate */
    --primary-hover: 62 28 0;
    --on-primary: 250 244 232;
    --secondary: 0 168 142;     /* teal */
    --secondary-hover: 0 132 112;
    --success: 76 128 119;
    --on-success: 196 252 240;
    --sand: 210 188 158;        /* borders */
    --sand-light: 215 238 228;
    --amber: 176 124 52;
    --amber-bg: 245 234 214;
    --focus: 0 168 142;
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }
  body {
    font-family: var(--font-body);
    color: rgb(var(--ink));
    background: rgb(var(--bg));
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .display, .brand, .scope-title, .tree-label, .legend { font-family: var(--font-display); }

  /* ===== the desktop: a real wallpaper, with two SEPARATE apps on it ===== */
  .desktop {
    position: relative; height: 100vh; box-sizing: border-box;
    padding: 30px 116px 30px 30px;   /* right strip left clear for desktop icons */
    display: flex; gap: 30px; background: #5a6a5e; overflow: hidden;
  }
  .wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

  /* pretend desktop icons down the right edge */
  .desktop-icons { position: absolute; top: 24px; right: 10px; z-index: 1; width: 98px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .dicon { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; cursor: default; }
  .dicon svg { width: 52px; height: 44px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
  .dicon .thumb { width: 46px; height: 56px; border-radius: 3px; background: #fff; border: 1px solid rgba(0,0,0,.2); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .dicon span { font-size: 11px; line-height: 1.2; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.7); max-width: 110px; }

  /* shared window chrome: rounded corners + a real drop shadow */
  .win { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-radius: 12px;
    box-shadow: 0 28px 70px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25); }
  .app-win { flex: 1 1 auto; min-width: 0; background: #fff; }
  .app-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: rgb(var(--bg)); }

  /* ----- Chrome browser chrome (Zoutcomes is a WEB APP) ----- */
  .chrome-tabs { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 11px; height: 40px; padding: 0 12px; background: #dee1e6; }
  .chrome-dots { display: flex; gap: 8px; align-self: center; }
  .chrome-dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
  .chrome-dots i:nth-child(1) { background: #ff5f57; }
  .chrome-dots i:nth-child(2) { background: #febc2e; }
  .chrome-dots i:nth-child(3) { background: #28c840; }
  .chrome-tab { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px; background: #fff; border-radius: 9px 9px 0 0; font-size: 12px; color: #3c4043; max-width: 230px; }
  .chrome-tab .fav { width: 15px; height: 15px; border-radius: 4px; background: rgb(var(--primary)); color: rgb(var(--on-primary)); display: grid; place-items: center; font-size: 9px; flex: 0 0 auto; }
  .chrome-tab .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chrome-tab .x { margin-left: 4px; color: #9aa0a6; font-size: 13px; }
  .chrome-newtab { align-self: center; color: #5f6368; font-size: 19px; line-height: 1; }
  .chrome-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 13px; height: 44px; padding: 0 14px; background: #fff; border-bottom: 1px solid #e7e9ec; }
  .chrome-nav { display: flex; gap: 15px; color: #5f6368; }
  .chrome-nav svg { width: 17px; height: 17px; }
  .chrome-omni { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 14px; background: #f1f3f4; border-radius: 16px; font-size: 12.5px; color: #3c4043; }
  .chrome-omni .lock { color: #5f6368; flex: 0 0 auto; }
  .chrome-omni .lock svg { width: 12px; height: 12px; display: block; }
  .chrome-menu { color: #5f6368; font-size: 19px; line-height: 1; flex: 0 0 auto; }
  .chrome-avatar { width: 22px; height: 22px; border-radius: 50%; background: rgb(var(--secondary)); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: 0 0 auto; }

  /* ===== topbar ===== */
  .topbar { flex: 0 0 auto; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid rgb(var(--sand)); background: rgb(var(--surface)); }
  .topbar-inner { max-width: 1100px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
  .brand { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--heading)); }
  .brand .mark { color: rgb(var(--heading)); margin-right: 7px; }
  .tagline { font-size: 12.5px; color: rgb(var(--ink-soft)); margin-top: 3px; }
  .topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .org { font-size: 13px; color: rgb(var(--ink-muted)); }

  /* connection indicator: two dots — this app + Claude Code */
  .conn { display: flex; align-items: center; gap: 14px; font-size: 12px; }
  .conn-item { display: inline-flex; align-items: center; gap: 6px; color: rgb(var(--ink-soft)); white-space: nowrap; }
  .conn-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--ink-soft)); flex: 0 0 auto; }
  .conn-dot.app { background: rgb(var(--secondary)); }
  .conn-working { color: rgb(var(--secondary-hover)); font-weight: 600; }
  .conn-working .conn-dot { background: rgb(var(--secondary)); }
  .conn-dot.pulse { animation: conn-pulse 1.6s ease-in-out infinite; }
  @keyframes conn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--secondary) / 0.5); }
    50%      { box-shadow: 0 0 0 5px rgb(var(--secondary) / 0); }
  }

  /* ===== two-column folder layout ===== */
  .layout { flex: 1 1 auto; width: 100%; max-width: 820px; margin: 0 auto; display: block; }
  .sidebar { padding: 22px 14px 60px; border-right: 1px solid rgb(var(--sand)); min-height: 70vh; }
  .content { padding: 22px 28px 80px; min-width: 0; }

  /* sidebar / folder tree */
  .tree-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--ink-soft)); padding: 0 10px; margin: 4px 0 8px; }
  .tree-item {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 9px; border: 1px solid transparent;
    color: rgb(var(--ink-muted)); text-decoration: none; font-size: 14px; cursor: pointer; background: none;
  }
  .tree-item:hover { background: rgb(var(--sand-light) / 0.6); color: rgb(var(--ink)); }
  .tree-item.active { background: rgb(var(--surface)); border-color: rgb(var(--sand)); color: rgb(var(--ink)); font-weight: 600; }
  .tree-item.root { font-weight: 600; color: rgb(var(--ink)); }
  .tree-ico { width: 16px; flex: 0 0 auto; opacity: 0.85; }
  .tree-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tree-count { font-size: 11px; font-weight: 600; min-width: 19px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 9px; background: rgb(var(--amber-bg)); color: rgb(var(--amber)); }
  .tree-count.zero { background: rgb(var(--sand-light)); color: rgb(var(--ink-soft)); }
  .tree-divider { height: 1px; background: rgb(var(--sand)); margin: 12px 8px; }
  .new-project { display: flex; gap: 6px; margin: 14px 10px 0; }
  .new-project input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; border: 1px solid rgb(var(--sand)); border-radius: 8px; padding: 6px 9px; background: rgb(var(--surface)); color: rgb(var(--ink)); }
  .new-project input::placeholder { color: rgb(var(--ink-soft)); }
  .new-project button { flex: 0 0 auto; width: 30px; cursor: pointer; font: inherit; font-size: 17px; line-height: 1; border: 1px solid rgb(var(--sand)); border-radius: 8px; background: rgb(var(--surface)); color: rgb(var(--ink-muted)); }
  .new-project button:hover { border-color: rgb(var(--primary)); color: rgb(var(--primary)); }

  /* content header */
  .scope-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
  .scope-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--heading)); margin: 0; }
  .scope-kind { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--ink-muted)); }
  .scope-sub { font-size: 13px; color: rgb(var(--ink-muted)); margin: 0 0 18px; max-width: 620px; }

  /* tabs */
  .tabs { display: flex; gap: 26px; border-bottom: 1px solid rgb(var(--sand)); margin: 6px 0 22px; }
  .tab { appearance: none; background: none; border: none; cursor: pointer; font: inherit; font-size: 14px; padding: 9px 2px; color: rgb(var(--ink-muted)); border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 8px; position: relative; }
  .tab > * { position: relative; z-index: 1; }
  .tab:hover { color: rgb(var(--ink)); }
  .tab.active { color: rgb(var(--heading)); border-bottom-color: rgb(var(--primary)); font-weight: 600; }
  /* a tab that gained a new item while you were on another tab: a slow teal breath
     behind the label (matches memoryapp). Pseudo-element so nothing reflows. */
  .tab.flash::before {
    content: ''; position: absolute; inset: 1px -8px; z-index: 0; border-radius: 8px;
    background: rgb(var(--secondary) / 0.18); pointer-events: none;
    animation: bg-flash 3.2s ease-in-out;
  }
  @keyframes bg-flash { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  /* browser-tab title shows a count when proactive items arrive while you're away */
  .chrome-tab .tname.has-unseen { color: rgb(var(--secondary)); font-weight: 600; }
  .badge { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; font-size: 11px; font-weight: 600; border-radius: 9px; background: rgb(var(--sand) / 0.35); color: rgb(var(--ink-muted)); }
  .badge.amber { background: rgb(var(--amber-bg)); color: rgb(var(--amber)); }

  /* sections */
  .legend { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--heading)); margin: 26px 0 6px; }
  .legend:first-child { margin-top: 0; }
  .note { font-size: 13px; color: rgb(var(--ink-muted)); margin: 0 0 14px; max-width: 640px; }

  /* memory cards — cream surfaces floating on the sandy page */
  .card { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; background: rgb(var(--surface)); border: 1px solid rgb(var(--sand)); border-radius: 12px; margin-bottom: 9px; }
  .card .body { flex: 1 1 auto; min-width: 0; }
  .card .content { color: rgb(var(--ink)); }
  .card .meta { font-size: 11px; color: rgb(var(--ink-soft)); margin-top: 5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .type-pill { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 5px; background: rgb(var(--sand-light)); color: rgb(var(--success)); margin-right: 7px; }
  .type-pill.guardrail { background: rgb(var(--amber-bg)); color: rgb(var(--amber)); }
  .type-pill.mapping { background: rgb(var(--secondary) / 0.12); color: rgb(var(--secondary-hover)); }
  .proj-tag { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 5px; background: rgb(var(--primary) / 0.08); color: rgb(var(--primary)); }
  .proj-tag.root { background: rgb(var(--secondary) / 0.12); color: rgb(var(--secondary-hover)); }
  .tick { color: rgb(var(--success)); font-weight: 700; flex: 0 0 auto; margin-top: 1px; }

  .actions { display: flex; gap: 6px; flex: 0 0 auto; }
  .btn { appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 8px; border: 1px solid rgb(var(--sand)); background: rgb(var(--surface)); color: rgb(var(--ink)); }
  .btn:hover { border-color: rgb(var(--ink-soft)); }
  .btn.primary { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: rgb(var(--on-primary)); }
  .btn.primary:hover { background: rgb(var(--primary-hover)); border-color: rgb(var(--primary-hover)); }
  .btn.ghost { color: rgb(var(--ink-muted)); }
  .card .content.editable { cursor: text; border-radius: 7px; margin: -3px -6px; padding: 3px 6px; transition: background 0.12s; }
  .card .content.editable:hover { background: rgb(var(--sand-light)); }
  .card .content.editable:focus-visible { outline: 2px solid rgb(var(--focus) / 0.4); }
  /* click-to-edit a saved fact/guardrail: text swaps to a textarea, Remove swaps to
     Save/Cancel — card width/height stay put. (Mirrors the real app.) */
  .card.editing { align-items: flex-start; }
  .edit-row { display: flex; align-items: flex-start; gap: 7px; width: 100%; }
  .edit-input {
    font: inherit; flex: 1 1 auto; width: 100%; box-sizing: border-box;
    border: 1px solid rgb(var(--sand)); border-radius: 7px;
    padding: 2px 6px; margin: -3px 0; background: rgb(var(--surface)); color: rgb(var(--ink));
    resize: none; overflow: hidden; min-height: 0; line-height: 1.55;
  }
  .edit-input:focus { outline: 2px solid rgb(var(--focus) / 0.4); border-color: rgb(var(--focus)); }

  /* add form */
  .addform { display: flex; gap: 8px; margin-top: 12px; align-items: flex-start; }
  .addform textarea { flex: 1 1 auto; font: inherit; border: 1px solid rgb(var(--sand)); border-radius: 9px; padding: 10px 12px; background: rgb(var(--surface)); color: rgb(var(--ink)); resize: vertical; min-height: 44px; }
  .addform textarea::placeholder { color: rgb(var(--ink-soft)); }
  .addform textarea:focus { outline: 2px solid rgb(var(--focus) / 0.4); border-color: rgb(var(--focus)); }

  /* proactive question cards */
  .qcard { align-items: flex-start; }
  .qcard .content { font-weight: 600; padding: 0; }
  .qwhy { font-size: 12px; color: rgb(var(--ink-soft)); margin-top: 6px; }
  .qform { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
  .qform textarea { font: inherit; border: 1px solid rgb(var(--sand)); border-radius: 9px; padding: 10px 12px; background: rgb(var(--surface)); color: rgb(var(--ink)); resize: vertical; min-height: 44px; width: 100%; }
  .qform textarea::placeholder { color: rgb(var(--ink-soft)); }
  .qform .actions { justify-content: flex-end; }
  .qskip { flex: 0 0 auto; }
  .empty { color: rgb(var(--ink-soft)); font-size: 13px; padding: 16px 0; }
  .confirmed-list { margin-top: 18px; border-top: 1px solid rgb(var(--sand)); padding-top: 16px; }
  .panel { display: none; }
  .panel.active { display: block; }

  /* ===== a peek at Claude Code, running alongside ===== */
  /* ----- Claude Code desktop app — its "Code" tab (neutral system UI, not Zoutcomes' font) ----- */
  .cc-win { flex: 0 0 clamp(440px, 42%, 620px); background: #fff; color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; }
  .ccd { display: flex; flex: 1 1 auto; min-height: 0; }
  .ccd-side { flex: 0 0 158px; display: flex; flex-direction: column; background: #f6f6f7; border-right: 1px solid #ebebed; padding: 11px 9px; min-height: 0; }
  .ccd-traffic { display: flex; gap: 8px; padding: 2px 4px 12px; }
  .ccd-traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; }
  .ccd-traffic i:nth-child(1) { background: #ff5f57; }
  .ccd-traffic i:nth-child(2) { background: #febc2e; }
  .ccd-traffic i:nth-child(3) { background: #28c840; }
  /* segmented control: two icon tabs + a wider active "Code" tab with label */
  .ccd-tabs { display: flex; gap: 3px; background: #e7e7ea; border-radius: 9px; padding: 3px; margin-bottom: 13px; }
  .ccd-tab { flex: 0 0 30px; display: grid; place-items: center; height: 27px; border-radius: 7px; color: #75757a; }
  .ccd-tab.code { flex: 1 1 auto; grid-auto-flow: column; gap: 6px; font-size: 12.5px; font-weight: 600; }
  .ccd-tab.active { background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
  .ccd-tab svg { width: 15px; height: 15px; }
  .ccd-nav { display: flex; align-items: center; gap: 10px; padding: 7px 7px; border-radius: 7px; color: #34343a; font-size: 13px; cursor: default; }
  .ccd-nav:hover { background: #ececef; }
  .ccd-nav svg { width: 15px; height: 15px; color: #75757a; flex: 0 0 auto; }
  .ccd-nav .chev { margin-left: auto; }
  .ccd-seclabel { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #9a9a9f; padding: 15px 7px 5px; }
  .ccd-seclabel svg { width: 13px; height: 13px; color: #b0b0b5; }
  .ccd-rec { padding: 7px 7px; border-radius: 7px; color: #45454b; font-size: 12.5px; display: flex; align-items: center; gap: 9px; white-space: nowrap; overflow: hidden; cursor: default; }
  .ccd-rec .rdot { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid #bcbcc1; flex: 0 0 auto; }
  .ccd-rec .rname { overflow: hidden; text-overflow: ellipsis; }
  .ccd-rec.active { background: #e7e7ea; color: #1d1d1f; }
  .ccd-spacer { flex: 1 1 auto; }
  .ccd-user { display: flex; align-items: center; gap: 9px; padding: 9px 7px 2px; border-top: 1px solid #ebebed; font-size: 12.5px; color: #34343a; }
  .ccd-user .av { width: 24px; height: 24px; border-radius: 50%; background: #c96442; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600; flex: 0 0 auto; }
  .ccd-user .pl { color: #9a9a9f; }
  .ccd-user .chev { margin-left: auto; color: #b0b0b5; }
  .ccd-user .chev svg, .ccd-nav .chev svg { width: 13px; height: 13px; }

  .ccd-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .ccd-top { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #efeff1; font-size: 13px; color: #45454b; overflow: hidden; }
  .ccd-top > svg { width: 16px; height: 16px; color: #8a8a90; flex: 0 0 auto; }
  .ccd-top .crumb { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
  .ccd-top .crumb b { overflow: hidden; text-overflow: ellipsis; }
  .ccd-top .crumb b { color: #1d1d1f; font-weight: 600; }
  .ccd-top .crumb svg { width: 13px; height: 13px; color: #b0b0b5; }
  .ccd-top .grow { flex: 1 1 auto; }
  .ccd-convo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 16px 8px; font-size: 13px; line-height: 1.55; }
  .ccd-u { background: #f3f3f5; border-radius: 12px; padding: 10px 13px; margin-bottom: 14px; color: #1d1d1f; }
  /* tool/file action: a small green "done" dot + a NEUTRAL code block (not green) */
  .ccd-tool { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 14px; }
  .ccd-tool .gd { width: 7px; height: 7px; border-radius: 50%; background: #2ba25f; flex: 0 0 auto; margin-top: 7px; }
  .ccd-tool .code { flex: 1 1 auto; min-width: 0; background: #f6f6f7; border: 1px solid #ececee; border-radius: 8px; padding: 9px 11px; font-family: var(--font-mono); font-size: 12px; color: #3c4043; line-height: 1.5; }
  .ccd-tool .fn { color: #1d1d1f; }
  .ccd-tool .sub { display: block; margin-top: 5px; color: #8a8a90; }
  /* file edit/diff lines, like real Claude Code */
  .ccd-tool .diff { margin-top: 7px; border-top: 1px solid #ececee; padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
  .ccd-tool .dl { white-space: pre-wrap; word-break: break-word; border-radius: 3px; padding: 0 3px; }
  .ccd-tool .dl.add { color: #1f7a45; background: rgba(40, 170, 90, .10); }
  .ccd-tool .dl.del { color: #b23b3b; background: rgba(200, 70, 70, .09); }
  .ccd-a { color: #2a2a2a; margin-bottom: 14px; }
  .ccd-a .who { font-weight: 600; color: #c96442; }
  .ccd-a ul { margin: 8px 0 0; padding-left: 18px; }
  .ccd-a li { margin-bottom: 5px; }
  .ccd-a .mem { color: #1f8a6d; border-bottom: 1px dotted rgba(31,138,109,.4); }
  .ccd-compose { flex: 0 0 auto; padding: 8px 14px 12px; }
  .ccd-input { display: flex; align-items: center; justify-content: space-between; border: 1px solid #e0e0e3; border-radius: 12px; padding: 12px 14px; font-size: 13px; color: #9a9a9f; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: background .6s ease, border-color .6s ease, box-shadow .6s ease; }
  .ccd-input .ret { color: #c2c2c6; }
  /* highlighter on the type box while the first prompt is typed (fades in/out via the transition above) */
  .ccd-input.hl-type { background: #ffec9e; border-color: #f0dd92; box-shadow: 0 0 0 3px rgba(235,205,110,.26); }
  .ccd-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 11.5px; color: #75757a; }
  .ccd-bar .grp { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
  .ccd-bar .grp svg { width: 14px; height: 14px; flex: 0 0 auto; }
  .ccd-bar .pill { color: #34343a; }
  .ccd-spin { width: 13px; height: 13px; border: 2px solid #e2e2e5; border-top-color: #9a9a9f; border-radius: 50%; animation: spin .8s linear infinite; flex: 0 0 auto; }

  /* ===== interactive demo bits ===== */
  /* a just-added fact: a deep green wash fades IN, holds, then fades back OUT —
     slow and saturated so it's easy to see. */
  .card.fresh { animation: fresh-in 6.5s ease; }
  @keyframes fresh-in {
    0%   { background: rgb(var(--surface)); border-color: rgb(var(--sand)); }
    25%  { background: rgb(var(--secondary) / .32); border-color: rgb(var(--secondary) / .85); }
    60%  { background: rgb(var(--secondary) / .32); border-color: rgb(var(--secondary) / .85); }
    100% { background: rgb(var(--surface)); border-color: rgb(var(--sand)); }
  }
  /* a proactive note/question dripping in from the Claude Code chat: it slides in,
     then a deep green wash fades IN, holds, and fades OUT slowly — an unhurried
     "new" signal you can't miss. */
  .card.is-new { animation: card-arrive 7s ease both; }
  @keyframes card-arrive {
    0%   { opacity: 0; transform: translateY(-7px); background: rgb(var(--surface)); border-color: rgb(var(--sand)); }
    8%   { opacity: 1; transform: none; }
    35%  { background: rgb(var(--secondary) / .32); border-color: rgb(var(--secondary) / .85); }
    65%  { background: rgb(var(--secondary) / .32); border-color: rgb(var(--secondary) / .85); }
    100% { background: rgb(var(--surface)); border-color: rgb(var(--sand)); }
  }
  .card.leaving { position: relative; overflow: hidden; border-color: rgb(var(--secondary) / .4);
    transition: height .45s linear, opacity .45s linear, margin .45s linear, padding .45s linear, border-width .45s linear; }
  .skip-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgb(var(--sand-light)); border-radius: 12px; }
  .card.collapsing { height: 0 !important; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
  .leave-icon { font-size: 40px; line-height: 1; font-weight: 700; color: rgb(var(--secondary-hover));      /* teal ✓ for save/confirm */
    animation: leave-pop .26s cubic-bezier(.34,1.56,.64,1) both; }
  .leave-icon.skip { color: rgb(var(--ink-muted)); }                                                        /* muted ✕ for skip */
  @keyframes leave-pop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
  .card.hl { animation: guard-hl 2.8s ease; }
  @keyframes guard-hl { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--secondary) / 0); } 22%, 62% { box-shadow: 0 0 0 3px rgb(var(--secondary) / .5); border-color: rgb(var(--secondary)); } }
  .btn.added { background: rgb(var(--secondary)); border-color: rgb(var(--secondary)); color: rgb(var(--on-primary)); }
  .add-toast { font-size: 12.5px; font-weight: 600; color: rgb(var(--secondary-hover)); margin: -4px 0 6px; }
  /* claude code: typed prompt + streamed messages */
  #ccPrompt.typed { color: #1d1d1f; }
  .ccd-convo > * { animation: msg-in .32s ease; }
  @keyframes msg-in { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }
  .ccd-working { display: flex; align-items: center; gap: 8px; color: #8a8a86; font-size: 12.5px; margin-bottom: 14px; }
  .ccd-working .sp { width: 12px; height: 12px; border: 2px solid #d9d7d2; border-top-color: #c96442; border-radius: 50%; animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .ccd-replay { appearance: none; cursor: pointer; font: inherit; font-size: 14px; line-height: 1; color: #75757a; background: transparent; border: none; border-radius: 7px; width: 26px; height: 26px; flex: 0 0 auto; }
  .ccd-replay:hover { color: #1d1d1f; background: #ececef; }
  .ccd-hint { font-size: 11px; color: #a3a09a; text-align: center; padding: 26px 16px; }

  /* ===== David: human-escalation thread (timestamped chat) ===== */
  .dav-head { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
  .dav-av { width: 36px; height: 36px; border-radius: 50%; background: rgb(var(--primary)); color: rgb(var(--on-primary)); display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
  .dav-name { font-weight: 600; color: rgb(var(--ink)); font-size: 14px; }
  .dav-status { font-size: 12px; color: rgb(var(--ink-soft)); display: flex; align-items: center; gap: 6px; }
  .dav-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--secondary)); display: inline-block; }
  .dav-thread { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
  .dav-row { display: flex; flex-direction: column; max-width: 82%; }
  .dav-row.me { align-self: flex-end; align-items: flex-end; }
  .dav-row.them { align-self: flex-start; align-items: flex-start; }
  .dav-row .bubble { font-size: 13.5px; line-height: 1.45; padding: 9px 13px; border-radius: 14px; }
  .dav-row.them .bubble { background: rgb(var(--sand-light)); color: rgb(var(--ink)); border-bottom-left-radius: 5px; }
  .dav-row.me .bubble { background: rgb(var(--primary)); color: rgb(var(--on-primary)); border-bottom-right-radius: 5px; }
  .dav-row .ts { font-size: 10.5px; color: rgb(var(--ink-soft)); margin-top: 4px; padding: 0 4px; }
  .dav-row.dav-typing { display: none; }
  .dav-row.dav-typing.show { display: flex; }
  .dav-row.dav-typing .bubble { font-style: italic; color: rgb(var(--ink-soft)); }
  .dav-compose { display: flex; gap: 8px; margin-top: 10px; }
  .dav-compose textarea { flex: 1 1 auto; resize: none; min-height: 42px; font: inherit; font-size: 13.5px; border: 1px solid rgb(var(--sand)); border-radius: 10px; padding: 9px 11px; background: rgb(var(--surface)); color: rgb(var(--ink)); }
  .dav-compose textarea:focus { outline: 2px solid rgb(var(--focus) / 0.4); border-color: rgb(var(--focus)); }
  .dav-compose .btn { flex: 0 0 auto; align-self: flex-end; }
  @media (prefers-reduced-motion: reduce) { .card.fresh, .card.is-new, .card.hl, .ccd-convo > *, .leave-icon, .tab.flash::before { animation: none; } .card.leaving { transition: none; } }

  /* ===== floating demo controls (play / pause / restart) ===== */
  .demo-ctrl { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 60;
    display: flex; align-items: center; gap: 6px; padding: 9px 24px 9px 12px;
    background: rgb(var(--ink) / .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-radius: 999px; box-shadow: 0 12px 34px rgba(40,20,4,.36); opacity: .92; transition: opacity .2s ease; }
  .demo-ctrl:hover { opacity: 1; }
  .demo-ctrl button { appearance: none; cursor: pointer; border: none; background: transparent; color: rgb(var(--on-primary));
    width: 60px; height: 60px; border-radius: 50%; font-size: 28px; line-height: 1; display: grid; place-items: center; }
  .demo-ctrl button:hover { background: rgb(var(--on-primary) / .16); }
  .demo-ctrl .lbl { color: rgb(var(--on-primary) / .8); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 0 16px 0 10px;
    font-family: var(--font-body); }

  /* ===== responsive: BOTH windows visible at every viewport (stack on narrow) ===== */
  @media (max-width: 900px) {
    .desktop { flex-direction: column; height: auto; min-height: 100vh; padding: 18px; gap: 18px; }
    .desktop-icons { display: none; }            /* no desktop margin to spare once stacked */
    .app-win, .cc-win { flex: 0 0 auto; width: 100%; }
    .app-win { height: 78vh; }
    .cc-win  { height: 72vh; }
    .app-scroll { max-height: none; }
  }
  @media (max-width: 560px) {
    .desktop { padding: 10px; gap: 12px; }
    .win { border-radius: 12px; }
    .layout { grid-template-columns: 1fr; }       /* Zoutcomes: stack its own sidebar + content */
    .sidebar { border-right: none; border-bottom: 1px solid rgb(var(--sand)); min-height: 0; padding-bottom: 16px; }
    .ccd-side { flex-basis: 118px; }              /* slim Claude Code sidebar so the session still fits */
    .app-win { height: 82vh; }
    .cc-win  { height: 76vh; }
  }
  /* onboarding pointer callouts now live in ../shared/chalk/chalk.css (themed via --chalk-* vars) */

  /* ============ PROJECTS rail — the SFMC difference ============ */
  /* a horizontal scope filter: every card is filed under a project (or Org-wide).
     Clicking a chip filters all three tabs; org-wide facts are inherited so they
     stay visible under any project. */
  .projbar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgb(var(--sand)); }
  .projbar-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--ink-soft)); margin-right: 3px; }
  .proj-chip {
    appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
    border: 1px solid rgb(var(--sand)); background: rgb(var(--surface)); color: rgb(var(--ink-muted));
  }
  .proj-chip:hover { border-color: rgb(var(--ink-soft)); color: rgb(var(--ink)); }
  .proj-chip.active { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: rgb(var(--on-primary)); }
  .proj-chip .pc-count { font-size: 10.5px; font-weight: 700; min-width: 16px; height: 15px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: 8px; background: rgb(var(--sand-light)); color: rgb(var(--ink-muted)); }
  .proj-chip.active .pc-count { background: rgb(var(--on-primary) / 0.25); color: rgb(var(--on-primary)); }
  .proj-chip .pc-dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--ink-soft)); flex: 0 0 auto; }
  .proj-chip .pc-dot.org { background: rgb(var(--secondary)); }
  /* a project just gained an item: a slow teal breath (mirrors the tab/tree flash) */
  .proj-chip.flash { animation: proj-flash 3.2s ease-in-out; }
  @keyframes proj-flash {
    0%   { box-shadow: 0 0 0 0 rgb(var(--secondary) / 0); }
    50%  { box-shadow: 0 0 0 4px rgb(var(--secondary) / 0.28); border-color: rgb(var(--secondary)); }
    100% { box-shadow: 0 0 0 0 rgb(var(--secondary) / 0); }
  }
  @media (prefers-reduced-motion: reduce) { .proj-chip.flash { animation: none; } }

  /* "Applies to" scope chip on each card — shows the project a fact is filed under */
  .scope-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
  .scope-row-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(var(--ink-soft)); }
  .scope-chip {
    font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
    background: rgb(var(--primary) / 0.08); color: rgb(var(--primary));
    border: 1px solid rgb(var(--primary) / 0.18);
  }
  .scope-chip.org { background: rgb(var(--secondary) / 0.12); color: rgb(var(--secondary-hover)); border-color: rgb(var(--secondary) / 0.28); }

  /* hidden by the project filter */
  .card.scope-hidden { display: none; }

  /* ============ onboarding callout restyle (scoped to this prototype) ============ */
  /* The shared chalk note defaults to a big, bold, marker-style bubble. Here we
     quiet it down: body font, smaller, lighter weight, and a clean dark-chocolate
     card with cream text instead of the loud cream/marker look. Done via the
     theming vars + a higher-specificity override so the SHARED chalk.css and the
     other demos are untouched. */
  /* Set concrete properties on .chalk-layer .chalk-note (specificity 0,2,0) so they
     beat the shared chalk.css .chalk-note (0,1,0) regardless of load order. The
     --chalk-* vars are redefined by chalk.css on .chalk-layer and load after us, so
     overriding them there wouldn't stick. */
  .chalk-layer .chalk-note {
    font-family: var(--font-body);
    font-size: 24px; font-weight: 500; line-height: 1.38; letter-spacing: 0;
    padding: 22px 28px; max-width: 460px; border-radius: 20px 20px 20px 6px;
    color: rgb(var(--on-primary));
    background: rgb(var(--ink));
    border: 1.5px solid rgb(var(--ink));
    box-shadow: 0 14px 38px rgba(40, 20, 4, .32);
  }