/* ============================================================
     SSDO Console — the thesis is CERTAINTY MADE VISIBLE.
     Facts read solid. Inferences carry their confidence as weight.
     "Could not determine" is present but honestly muted.
     Palette: schematic / blueprint. Color MEANS certainty, never decorates.
     ============================================================ */
  :root {
    --ink:        #0d1b2a;   /* deep blueprint ground */
    --ink-2:      #12263a;   /* raised panel */
    --ink-3:      #1b3350;   /* line-work / borders */
    --paper:      #e8eef2;   /* primary text */
    --paper-dim:  #8da0b5;   /* secondary text */
    --muted:      #7a8fa5;   /* unknowns, the honestly-quiet (4.5:1 on the panel: readable, still quieter than paper-dim) */
    --fact:       #4bd6c4;   /* declared: certain. confident teal */
    --infer:      #f4b860;   /* inferred: warm amber = a considered guess */
    --warn:       #e8825a;   /* actionable warnings */
    --grid:       rgba(75,214,196,0.05);
    --head:       #16304a;   /* a table's header band on the map */
    --veil:       rgba(13,27,42,.9);   /* the translucent plates over the map */
    --rowline:    rgba(27,51,80,.7);
    --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  :root { color-scheme: dark; }
  /* LIGHT MODE. Same meanings, same names: only the values change. Teal and amber are darkened so Fact and Inferred still read on white. */
  :root[data-theme="light"] {
    color-scheme: light;
    --ink:        #f3f6f9;
    --ink-2:      #ffffff;
    --ink-3:      #cdd9e3;
    --paper:      #0e1d2c;
    --paper-dim:  #46596b;
    --muted:      #596d80;
    --fact:       #087f70;
    --infer:      #9a5700;
    --warn:       #bf4620;
    --grid:       rgba(8,127,112,0.06);
    --head:       #e4edf4;
    --veil:       rgba(255,255,255,.92);
    --rowline:    rgba(13,27,42,.12);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--ink);
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 28px 28px;
    color: var(--paper);
    font-family: var(--sans);
    line-height: 1.5;
    min-height: 100vh;
    padding: 0;
  }
  a { color: var(--fact); }
  /* ============================================================
     PORTAL SHELL (spec §8) — a persistent, collapsible left panel and a main
     work surface: the layout people already navigate without fear.
     ============================================================ */
  .app { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 100vh;
    transition: grid-template-columns .25s ease; }
  .app.collapsed { grid-template-columns: 0 minmax(0, 1fr); }
  html, .side, .ws-menu, .sp-body { scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
  .side { background: var(--ink-2); border-right: 1px solid var(--ink-3); position: sticky; top: 0;
    height: 100vh; overflow-y: auto; overflow-x: hidden; }
  .app.collapsed .side { visibility: hidden; }
  .side-inner { width: 290px; padding: 20px 18px 40px; display: flex; flex-direction: column; gap: 26px; }
  .side-top { display: flex; align-items: center; justify-content: space-between; }
  .side-top .logo { font-family: var(--mono); font-weight: 600; font-size: 18px; }
  .side-top .logo span { color: var(--fact); }
  .icon-btn { background: transparent; border: 1px solid var(--ink-3); color: var(--paper-dim);
    border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 15px; line-height: 1; }
  .icon-btn:hover { color: var(--paper); border-color: var(--fact); }
  .side h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--paper-dim); margin-bottom: 10px; }
  .side-inner { gap: 18px !important; min-height: 100vh; }
  .nav h4 { margin: 12px 0 4px 10px; font-size: 10px; color: var(--muted); }
  .nav h4:first-child { margin-top: 0; }
  body:not(.is-admin) .nav h4.admin-only { display: none; }
  body:not(.ws-ent) .ent-only { display: none !important; }
  body:not(.ws-study) .study-only { display: none !important; }
  body.is-mentor .nav button:not([data-page="liveroom"]), body.is-mentor .bottom-bar button:not([data-page="liveroom"]) { display: none !important; }
  body.is-mentor #newRoomForm, body.is-mentor .mentor-hide { display: none !important; }
  body.ws-study .not-study { display: none !important; }
  .mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border: 1px solid var(--ink-3);
    border-radius: 9px; background: var(--ink); }
  .mode-switch button { background: transparent; border: none; color: var(--paper-dim); font-family: var(--mono); font-size: 11px;
    padding: 6px 2px; border-radius: 6px; cursor: pointer; }
  .mode-switch button.on { background: rgba(75,214,196,.14); color: var(--fact); font-weight: 700; }
  .mode-switch button:hover:not(.on) { color: var(--paper); }
  .side-fold summary { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--paper-dim); cursor: pointer; list-style: none; }
  .side-fold summary::before { content: "▸ "; }
  .side-fold[open] summary::before { content: "▾ "; }
  .side-fold > div, .side-fold > p { margin-top: 8px; }
  .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
  .acct-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: var(--paper);
    cursor: pointer; padding: 0; text-align: left; font-family: var(--sans); }
  .avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono);
    font-size: 12.5px; font-weight: 700; color: var(--ink); background: linear-gradient(135deg, var(--fact), #7fb3ff); }
  .acct-head .who { min-width: 0; flex: 1; }
  .acct-head .who b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct-head .who small { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--paper-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct-head .caret { color: var(--paper-dim); font-size: 11px; }
  .acct-menu { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ink-3); }
  .drawer-close { display: none; }
  .bottom-bar { display: none; }
  /* the collapsed rail (desktop): icons only */
  .app.rail { grid-template-columns: 68px minmax(0, 1fr); }
  .app.rail .side-inner { width: 68px; padding: 16px 10px 24px; align-items: center; }
  .app.rail .lbl, .app.rail .nav h4, .app.rail .side-fold, .app.rail .mode-switch, .app.rail .logo span,
  .app.rail .nav .count, .app.rail .acct-head .who, .app.rail .acct-head .caret, .app.rail .acct-menu, .app.rail .to-people { display: none !important; }
  .app.rail .nav .soon-badge { display: none; }
  .app.rail .ws-switch { width: 100%; display: flex; justify-content: center; margin: 0; }
  .app.rail .ws-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
  .app.rail .ws-btn .ws-t, .app.rail .ws-btn .caret { display: none; }
  .app.rail .ws-menu { left: 0; right: auto; width: 260px; }
  .app.rail .side { scrollbar-width: none; }
  .app.rail .side::-webkit-scrollbar { display: none; }
  .app.rail .side-top { flex-direction: column; gap: 10px; }
  .app.rail .rail-btn { transform: rotate(180deg); }
  .app.rail .nav button { justify-content: center; padding: 9px; position: relative; }
  .app.rail .nav .nav-unread { position: absolute; top: 2px; right: 2px; margin: 0; font-size: 9.5px; min-width: 15px; line-height: 15px; padding: 0 4px; }
  .app.rail .new-run { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
  .app.rail .live-dot { position: absolute; bottom: 6px; right: 8px; margin: 0; }
  .modes { display: flex; flex-direction: column; gap: 6px; }
  .mode-card { text-align: left; background: transparent; border: 1px solid var(--ink-3); color: var(--paper);
    border-radius: 8px; padding: 10px 12px; cursor: pointer; font-family: var(--sans); font-size: 14px;
    transition: border-color .15s, background .15s; }
  .mode-card:hover { border-color: var(--paper-dim); }
  .mode-card.on { border-color: var(--fact); background: rgba(75,214,196,.07); }
  .mode-card b { font-weight: 600; }
  .mode-card .desc { display: none; font-size: 12.5px; color: var(--paper-dim); margin-top: 4px; line-height: 1.45; }
  .mode-card.on .desc { display: block; animation: rise .25s ease; }
  .switch { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
  .switch input { accent-color: var(--fact); width: 16px; height: 16px; }
  .side .hint { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
  .recent { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
  .recent button, .hist-run { text-align: left; background: var(--ink); border: 1px solid var(--ink-3);
    color: var(--paper); border-radius: 6px; padding: 8px 10px; cursor: pointer; font-family: var(--mono);
    font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .recent button:hover, .hist-run:hover { border-color: var(--fact); }
  .recent button small, .hist-run small { color: var(--paper-dim); }
  .hist-db { margin-bottom: 14px; }
  .hist-db-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-family: var(--mono); font-size: 12.5px; color: var(--paper); margin-bottom: 6px; }
  .hist-db-head button { background: transparent; border: 1px solid rgba(244,184,96,.5); color: var(--infer);
    border-radius: 5px; padding: 3px 8px; font-family: var(--mono); font-size: 11px; cursor: pointer; }
  .hist-runs { display: flex; flex-direction: column; gap: 4px; }
  .hist-run.current { border-color: var(--fact); }
  .main { min-width: 0; padding: 0 28px 80px; }
  .wrap { max-width: 1000px; margin: 0 auto; }
  .topbar { display: flex; align-items: center; gap: 12px; padding-top: 18px; }
  .app:not(.collapsed) #openSide { display: none; }
  .mode-pill { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--fact); border: 1px solid rgba(75,214,196,.35); border-radius: 999px; padding: 3px 10px; }

  /* Enterprise: the no-row-data guarantee gets visual weight near the top */
  .guarantee { display: none; border: 1px solid rgba(75,214,196,.4); background: rgba(75,214,196,.06);
    border-radius: 10px; padding: 14px 18px; margin-top: 22px; font-size: 14px; }
  .guarantee b { color: var(--fact); }
  body.m-enterprise .guarantee { display: block; }
  :root[data-theme="light"] .guarantee b { color: #0a6b5d; }

  /* Explain simply — styled paragraphs and bullets, not a raw text block (§7.3) */
  /* ---- Explain simply: the structure in one view (to_cards) ---- */
  .px { display: grid; gap: 16px; }
  .px-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: center;
    background: linear-gradient(135deg, rgba(75,214,196,.08), rgba(75,214,196,0) 60%), var(--ink-2); border: 1px solid var(--ink-3);
    border-radius: 14px; padding: 22px 24px; }
  .px-kick { font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fact); }
  .px-hero h2 { font-size: 22px; line-height: 1.25; margin: 6px 0 8px; font-weight: 650; }
  .px-hero p { margin: 0; color: var(--paper-dim); font-size: 14px; line-height: 1.55; }
  .px-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .px-tile { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 10px; padding: 12px 14px; }
  .px-tile b { display: block; font-family: var(--mono); font-size: 26px; line-height: 1.1; }
  .px-tile small { color: var(--paper-dim); font-size: 12px; }
  .px-tile.fact b { color: var(--fact); } .px-tile.inf b { color: var(--infer); } .px-tile.unk b { color: var(--paper-dim); }
  .px-card { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 14px; padding: 18px 20px; }
  .px-card h3 { margin: 0 0 4px; font-size: 15px; }
  .px-card .sub { color: var(--paper-dim); font-size: 13px; margin: 0 0 12px; }
  .px-mix { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--ink); margin: 10px 0 10px; }
  .px-mix i { display: block; height: 100%; }
  .px-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--paper-dim); }
  .px-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; background: var(--c); vertical-align: -1px; }
  .px-heart { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
  .px-t { background: var(--ink); border: 1px solid var(--ink-3); border-left: 3px solid var(--fact); border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: left; color: var(--paper); font: inherit; }
  .px-t:hover { border-color: var(--fact); }
  .px-t b { display: block; font-family: var(--mono); font-size: 13.5px; }
  .px-t small { color: var(--paper-dim); font-size: 12px; line-height: 1.4; display: block; margin-top: 3px; }
  .px-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .px-chip { font-family: var(--mono); font-size: 12px; border: 1px solid var(--ink-3); border-radius: 999px; padding: 3px 10px; background: var(--ink); color: var(--paper); cursor: pointer; }
  .px-chip:hover { border-color: var(--fact); }
  .px-filter { display: flex; gap: 6px; margin: 0 0 10px; }
  .px-filter button { background: transparent; border: 1px solid var(--ink-3); color: var(--paper-dim); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
  .px-filter button.on { border-color: var(--fact); color: var(--fact); background: rgba(75,214,196,.07); }
  .px-link { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--ink-3); font-size: 13.5px; }
  .px-link:first-of-type { border-top: 0; }
  .px-link .ft { font-family: var(--mono); overflow-wrap: anywhere; }
  .px-link .ft em { color: var(--paper-dim); font-style: normal; }
  .px-link .why { grid-column: 1 / -1; color: var(--paper-dim); font-size: 12.5px; margin-top: -4px; }
  .px-badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; border-radius: 5px; padding: 2px 7px; border: 1px solid; }
  .px-badge.fact { color: var(--fact); border-color: rgba(75,214,196,.5); } .px-badge.inf { color: var(--infer); border-color: rgba(244,184,96,.55); }
  .px-bar { height: 5px; border-radius: 3px; background: var(--ink); overflow: hidden; } .px-bar i { display: block; height: 100%; background: var(--c, var(--fact)); }
  .px-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .px-cols h4 { margin: 0 0 4px; font-size: 13px; } .px-cols p { margin: 0 0 8px; color: var(--paper-dim); font-size: 12.5px; line-height: 1.45; }
  .px-warn { border-color: rgba(244,184,96,.45); background: rgba(244,184,96,.05); }
  .px-warn li { margin: 6px 0; font-size: 13.5px; line-height: 1.5; color: var(--paper); } .px-warn code { color: var(--infer); }
  .px-more { background: transparent; border: 1px dashed var(--ink-3); color: var(--paper-dim); border-radius: 8px; padding: 7px 12px; cursor: pointer; margin-top: 8px; font-size: 13px; }
  .px-note { color: var(--muted); font-size: 12.5px; text-align: center; margin: 2px 0 0; }
  @media (max-width: 800px) { .px-hero { grid-template-columns: 1fr; } .px-cols { grid-template-columns: 1fr; } }
  .plain-doc { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 10px; padding: 26px 28px; }
  .plain-doc h3 { font-size: 16px; margin: 18px 0 8px; color: var(--paper); }
  .plain-doc h3:first-child { margin-top: 0; }
  .plain-doc p { color: var(--paper-dim); font-size: 15px; margin: 8px 0; }
  .plain-doc ul { margin: 6px 0 10px 20px; }
  .plain-doc li { color: var(--paper); font-size: 15px; margin-bottom: 6px; }
  .plain-doc .note-end { border-top: 1px dashed var(--ink-3); padding-top: 12px; margin-top: 16px; font-size: 13.5px; }

  /* ---- masthead ---- */
  header { padding: 48px 0 32px; border-bottom: 1px solid var(--ink-3); }
  .brand { display: flex; align-items: baseline; gap: 14px; }
  .brand h1 {
    font-family: var(--mono); font-size: 30px; font-weight: 600;
    letter-spacing: -0.5px; color: var(--paper);
  }
  .brand .dot { color: var(--fact); }
  .tagline {
    font-family: var(--mono); font-size: 13px; color: var(--paper-dim);
    margin-top: 10px; max-width: 620px;
  }
  .tagline b { color: var(--fact); font-weight: 500; }
  .tagline .a { color: var(--infer); font-weight: 500; }
  .tagline .u { color: var(--muted); font-weight: 500; }

  /* ---- connect form ---- */
  .panel {
    background: var(--ink-2); border: 1px solid var(--ink-3);
    border-radius: 10px; padding: 24px; margin-top: 28px;
  }
  .panel h2 {
    font-family: var(--mono); font-size: 12px; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--paper-dim); margin-bottom: 18px;
    font-weight: 500;
  }
  .grid-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }  /* long <select> options must not widen the grid */
  .field.wide { grid-column: 1 / -1; }
  .field label {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
    color: var(--paper-dim); text-transform: uppercase;
  }
  .field input, .field select, .field textarea {
    min-width: 0; width: 100%; box-sizing: border-box;
    background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px;
    padding: 11px 13px; color: var(--paper); font-family: var(--mono);
    font-size: 14px; transition: border-color .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fact); }
  .field input::placeholder, .field textarea::placeholder { color: var(--muted); }
  .field textarea { min-height: 92px; resize: vertical; font-size: 12px; line-height: 1.4; }
  .field .fhint { font-size: 12px; color: var(--muted); line-height: 1.45; }

  .note {
    font-family: var(--mono); font-size: 11.5px; color: var(--muted);
    margin-top: 14px; padding-left: 16px; position: relative;
  }
  .note::before { content: "▹"; color: var(--fact); position: absolute; left: 0; }

  .actions { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
  button.run {
    background: var(--fact); color: var(--ink); border: none; border-radius: 6px;
    padding: 12px 24px; font-family: var(--mono); font-size: 14px; font-weight: 600;
    cursor: pointer; letter-spacing: 0.3px; transition: transform .1s, opacity .15s;
  }
  button.run:hover { transform: translateY(-1px); }
  button.run:disabled { opacity: .5; cursor: not-allowed; transform: none; }
  .status { font-family: var(--mono); font-size: 12.5px; color: var(--paper-dim); }
  .status.err { color: var(--warn); }

  /* ---- results ---- */
  #out { margin-top: 40px; display: none; }
  #out.show { display: block; animation: rise .4s ease; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }

  .result-head { display: flex; align-items: baseline; justify-content: space-between;
    border-bottom: 1px solid var(--ink-3); padding-bottom: 14px; margin-bottom: 24px; }
  .result-head .db { font-family: var(--mono); font-size: 20px; color: var(--paper); }
  .result-head .meta { font-family: var(--mono); font-size: 12px; color: var(--paper-dim); }

  .mode-toggle { display: flex; gap: 0; border: 1px solid var(--ink-3); border-radius: 6px; overflow: hidden; }
  .mode-btn {
    background: var(--ink-2); color: var(--paper-dim); border: none; cursor: pointer;
    font-family: var(--mono); font-size: 12px; padding: 7px 14px; transition: all .15s;
  }
  .mode-btn:hover { color: var(--paper); }
  .mode-btn.active { background: var(--fact); color: var(--ink); font-weight: 600; }
  .plain-text {
    font-family: var(--sans); font-size: 15px; line-height: 1.7; color: var(--paper);
    background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 10px;
    padding: 24px 26px; white-space: pre-wrap; word-wrap: break-word; margin: 0;
  }
  .plain-loading { font-family: var(--mono); font-size: 13px; color: var(--paper-dim); padding: 20px; }

  /* certainty ledger — the signature element */
  .ledger { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--ink-3); border: 1px solid var(--ink-3); border-radius: 8px;
    overflow: hidden; margin-bottom: 32px; }
  .cell { background: var(--ink-2); padding: 18px 16px; }
  .cell .n { font-family: var(--mono); font-size: 30px; font-weight: 600; line-height: 1; }
  .cell .l { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--paper-dim); margin-top: 8px; }
  .cell.fact .n { color: var(--fact); }
  .cell.infer .n { color: var(--infer); }
  .cell.unknown .n { color: var(--muted); }
  .cell.plain .n { color: var(--paper); }

  section.block { margin-bottom: 32px; }
  section.block > h3 {
    font-family: var(--mono); font-size: 12px; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--paper-dim); margin-bottom: 14px;
    font-weight: 500; display: flex; align-items: center; gap: 10px;
  }
  section.block > h3::after { content: ""; flex: 1; height: 1px; background: var(--ink-3); }

  .roles { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { font-family: var(--mono); font-size: 12.5px; padding: 6px 12px;
    border-radius: 5px; border: 1px solid var(--ink-3); background: var(--ink-2); }
  .chip b { color: var(--paper); }
  .chip .role { color: var(--paper-dim); font-size: 11px; }
  .chip.core { border-color: var(--fact); }
  .chip.core .role { color: var(--fact); }

  /* App map (docs/specs/app-map.md): areas, shared tables, foundation layers */
  .am-sum { margin: 0 0 14px; color: var(--paper-dim); font-size: 14px; }
  .am-h { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--paper-dim); margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; }
  .am-h::after { content: ""; flex: 1; height: 1px; background: var(--ink-3); }
  .am-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .am-card { border: 1px solid var(--ink-3); background: var(--ink-2); border-radius: 10px; padding: 14px 14px 12px; min-width: 0; }
  .am-card.shared { border-style: dashed; }
  .am-card h4 { margin: 0 0 4px; font-family: var(--mono); font-size: 15px; color: var(--paper); overflow-wrap: anywhere; }
  .am-card h4 small { color: var(--paper-dim); font-weight: 400; font-size: 12px; }
  .am-meta { font-size: 12.5px; color: var(--paper-dim); margin: 0 0 10px; line-height: 1.45; }
  .am-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; padding: 1px 6px;
    border: 1px solid rgba(244,184,96,.5); color: var(--infer); border-radius: 4px; margin-right: 6px; }
  .am-tag.fact { border-color: rgba(75,214,196,.5); color: var(--fact); }
  .am-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .am-chip { font-family: var(--mono); font-size: 12px; padding: 4px 9px; border-radius: 5px; border: 1px solid var(--ink-3);
    background: var(--ink); color: var(--paper); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
  .am-chip:hover, .am-chip:focus-visible { border-color: var(--fact); outline: none; }
  .am-chip.centre { border-color: var(--fact); }
  .am-chip.inferred { border-style: dashed; border-color: var(--infer); }
  .am-chip small { color: var(--paper-dim); margin-left: 4px; }
  .am-to { font-size: 12px; color: var(--muted); margin-top: 10px; }
  .am-card details { margin-top: 8px; font-size: 12.5px; color: var(--paper-dim); }
  .am-card summary { cursor: pointer; color: var(--paper-dim); }
  .am-card details li { margin: 3px 0; }
  .am-layers { display: flex; flex-direction: column; gap: 8px; }
  .am-layer { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: start;
    border: 1px solid var(--ink-3); border-radius: 8px; padding: 10px; background: var(--ink-2); }
  .am-layer.base { border-color: var(--fact); }
  .am-layer > b { font-family: var(--mono); font-size: 12px; color: var(--paper-dim); font-weight: 500; }
  .am-layer.base > b { color: var(--fact); }
  .am-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
  @media (max-width: 640px) { .am-layer { grid-template-columns: 1fr; } }

  /* relationships — confidence encoded as a bar + opacity */
  .rel { display: flex; align-items: center; gap: 14px; padding: 9px 0;
    border-bottom: 1px solid rgba(27,51,80,0.5); font-family: var(--mono); font-size: 13px; }
  .rel:last-child { border-bottom: none; }
  .rel .path { flex: 1; }
  .rel .path .col { color: var(--paper); }
  .rel .path .arrow { color: var(--muted); margin: 0 8px; }
  .rel .path .tgt { color: var(--paper-dim); }
  .rel .kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
  .rel .kind.declared { color: var(--fact); border: 1px solid rgba(75,214,196,0.35); }
  .rel .kind.inferred { color: var(--infer); border: 1px solid rgba(244,184,96,0.35); }
  .conf-bar { width: 74px; height: 4px; background: var(--ink-3); border-radius: 2px; overflow: hidden; }
  .conf-bar i { display: block; height: 100%; }
  .conf-val { width: 42px; text-align: right; font-size: 11.5px; color: var(--paper-dim); }

  .listing { font-family: var(--mono); font-size: 13px; }
  .listing .item { padding: 8px 0 8px 16px; border-left: 2px solid var(--ink-3);
    margin-bottom: 8px; color: var(--paper-dim); }
  .listing .item.warn { border-left-color: var(--warn); }
  .listing .item.infer { border-left-color: var(--infer); }
  .listing .item.unknown { border-left-color: var(--muted); }
  .listing .item .head { color: var(--paper); }

  .empty { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-style: italic; }
  footer { margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--ink-3);
    font-family: var(--mono); font-size: 11px; color: var(--muted); }

  /* ============================================================
     TEACH ME — the walkthrough as a slide deck. The engine writes every word;
     this only lays it out and animates it. Colour still MEANS certainty.
     ============================================================ */
  .deck { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 14px;
    overflow: hidden; position: relative; }
  .deck-top { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 22px; border-bottom: 1px solid var(--ink-3); font-family: var(--mono);
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--paper-dim); }
  .deck-progress { height: 2px; background: var(--ink-3); }
  .deck-progress i { display: block; height: 100%; background: var(--fact);
    transition: width .45s cubic-bezier(.4,0,.2,1); }
  .deck-stage { position: relative; min-height: 430px; padding: 34px 40px 26px; }
  .slide { animation: slideInR .45s cubic-bezier(.2,.7,.2,1) both; }
  .slide.from-left { animation-name: slideInL; }
  @keyframes slideInR { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
  @keyframes slideInL { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
  .rv { opacity: 0; animation: rise .5s ease forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .slide .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--fact); }
  .slide h2 { font-size: 30px; font-weight: 650; letter-spacing: -0.6px; margin: 6px 0 10px; }
  .slide .lead { font-size: 18px; color: var(--paper); max-width: 760px; }
  .slide .points { margin: 16px 0 0; padding: 0; list-style: none; }
  .slide .points li { color: var(--paper-dim); font-size: 15px; margin-bottom: 8px;
    padding-left: 18px; position: relative; max-width: 760px; }
  .slide .points li::before { content: "▹"; position: absolute; left: 0; color: var(--fact); }
  .visual { margin-top: 22px; }

  .legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .legend .card { border: 1px solid var(--ink-3); border-radius: 10px; padding: 16px;
    background: var(--ink); border-top: 3px solid var(--k); }
  .legend .card b { display: block; color: var(--k); font-family: var(--mono); font-size: 13px;
    margin-bottom: 6px; }
  .legend .card span { color: var(--paper-dim); font-size: 14px; }
  .k-fact { --k: var(--fact); } .k-infer { --k: var(--infer); } .k-unknown { --k: var(--muted); }

  .hub svg { width: 100%; max-height: 260px; display: block; }
  .hub .spoke { stroke-dasharray: 400; stroke-dashoffset: 400;
    animation: draw .8s ease forwards; animation-delay: calc(var(--i) * 70ms + 200ms); }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .hub .node { opacity: 0; animation: pop .4s ease forwards;
    animation-delay: calc(var(--i) * 70ms + 500ms); transform-box: fill-box; transform-origin: center; }
  @keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
  .hub text { font-family: var(--mono); font-size: 12px; fill: var(--paper); }
  .hub .center-label { font-size: 14px; font-weight: 600; fill: var(--ink); }
  .hub-key { display: flex; gap: 18px; font-family: var(--mono); font-size: 11px;
    color: var(--paper-dim); margin-top: 6px; }
  .hub-key i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 6px; }

  .links .row { display: grid; grid-template-columns: minmax(0, 1.2fr) 90px minmax(0, 1.6fr);
    gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(27,51,80,.6); }
  .links .row:last-child { border-bottom: none; }
  .links .path { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
  .links .path .arrow { color: var(--muted); margin: 0 6px; }
  .links .bar { height: 5px; background: var(--ink-3); border-radius: 3px; overflow: hidden; }
  .links .bar i { display: block; height: 100%; width: 0; border-radius: 3px;
    transition: width .9s cubic-bezier(.2,.7,.2,1); }
  .links .label { font-size: 13px; color: var(--paper); }
  .links .why { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .links .fact .label { color: var(--fact); }
  .links .infer .label { color: var(--infer); }

  .groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .groups .card { border: 1px solid var(--ink-3); border-radius: 10px; padding: 16px; background: var(--ink); }
  .groups .card h4 { font-size: 15px; margin-bottom: 4px; }
  .groups .card .gnote { font-size: 13px; color: var(--paper-dim); }
  .groups .card .cert { font-family: var(--mono); font-size: 11.5px; margin: 8px 0 10px; }
  .groups .card.lookup .cert, .groups .card.junction .cert { color: var(--infer); }
  .groups .card.orphan .cert { color: var(--fact); }
  .groups .chips { display: flex; flex-wrap: wrap; gap: 6px; }

  .unknowns .item { border-left: 2px solid var(--muted); padding: 8px 0 10px 14px;
    color: var(--paper-dim); font-size: 14px; margin-bottom: 12px; }
  .unknowns .item .tag { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .8px; color: var(--muted); display: block; margin-bottom: 2px; }
  .unknowns .item .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .unknowns .item .chip { border-style: dashed; }
  .footnote { font-size: 13px; color: var(--paper-dim); margin-top: 12px; }
  .hub-list { display: flex; flex-direction: column; gap: 8px; }
  .hub-list .center { align-self: flex-start; background: var(--fact); color: var(--ink);
    font-family: var(--mono); font-weight: 600; border-radius: 999px; padding: 6px 14px; }
  .hub-list .chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 14px;
    border-left: 2px solid var(--ink-3); }

  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .stats .card { border: 1px solid var(--ink-3); border-radius: 10px; padding: 20px 18px;
    background: var(--ink); border-top: 3px solid var(--k); }
  .stats .n { font-family: var(--mono); font-size: 44px; font-weight: 600; line-height: 1; color: var(--k); }
  .stats .l { font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: .8px; color: var(--paper-dim); margin-top: 10px; }
  .stats .d { font-size: 12px; color: var(--muted); margin-top: 6px; }

  .slide-foot { margin-top: 24px; padding-top: 14px; border-top: 1px dashed var(--ink-3); }
  .terms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  .term { font-size: 12.5px; color: var(--paper-dim); background: var(--ink);
    border: 1px solid var(--ink-3); border-radius: 999px; padding: 4px 12px; }
  .term b { color: var(--paper); font-weight: 600; }
  .based-on { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .based-on::before { content: "Based on: "; color: var(--paper-dim); }

  .deck-nav { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 22px; border-top: 1px solid var(--ink-3); }
  .deck-nav button { background: transparent; color: var(--paper); border: 1px solid var(--ink-3);
    border-radius: 6px; padding: 9px 18px; font-family: var(--mono); font-size: 13px; cursor: pointer;
    transition: border-color .15s, background .15s; }
  .deck-nav button:hover:not(:disabled) { border-color: var(--fact); }
  .deck-nav button.primary { background: var(--fact); color: var(--ink); border-color: var(--fact); font-weight: 600; }
  .deck-nav button:disabled { opacity: .35; cursor: default; }
  .dots { display: flex; gap: 8px; }
  .dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none;
    background: var(--ink-3); cursor: pointer; transition: background .2s, transform .2s; }
  .dots button.on { background: var(--fact); transform: scale(1.25); }
  .deck-hint { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: center; margin-top: 10px; }

  /* ============================================================
     CHANGES — drift between runs. Facts of change read solid; rename
     hints read amber (a guess); what was not checked stays honestly muted.
     ============================================================ */
  /* ---- Ask SSDO (Tier 2 question layer) ---- */
  .ask { margin: 0 0 18px; }
  .ask-row { display: flex; gap: 8px; }
  .ask-row input { flex: 1; min-width: 0; background: var(--ink); border: 1px solid var(--ink-3);
    border-radius: 8px; padding: 12px 14px; color: var(--paper); font-size: 14px; }
  .ask-row input:focus { border-color: var(--fact); }
  .ask-row input::placeholder { color: var(--muted); }
  .ask-row button { background: var(--fact); color: var(--ink); border: none; border-radius: 8px;
    padding: 0 18px; font-weight: 700; cursor: pointer; font-family: var(--mono); }
  .ask-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .ask-sugg button, .ask-card .try button { background: transparent; color: var(--paper-dim);
    border: 1px solid var(--ink-3); border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer; }
  .ask-sugg button:hover, .ask-card .try button:hover { border-color: var(--fact); color: var(--paper); }
  .ask-card { margin-top: 12px; background: var(--ink-2); border: 1px solid var(--ink-3);
    border-radius: 10px; padding: 16px 18px; }
  .ask-card.declined { border-color: rgba(244,184,96,.55); }
  .ask-card .reading { font-size: 12px; color: var(--paper-dim); font-style: italic; margin-bottom: 10px; }
  .ask-card .s { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 14px; line-height: 1.5; }
  .ask-card .s .tag { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .5px;
    text-transform: uppercase; border-radius: 4px; padding: 1px 6px; border: 1px solid; }
  .ask-card .s .tag.declared { color: var(--fact); border-color: rgba(75,214,196,.5); }
  .ask-card .s .tag.inferred { color: var(--infer); border-color: rgba(244,184,96,.5); }
  .ask-card .s .tag.none { visibility: hidden; }
  .ask-card code { font-family: var(--mono); font-size: 12.5px; background: var(--ink); padding: 1px 5px; border-radius: 4px; }
  .ask-card .why { color: var(--paper); font-size: 14px; line-height: 1.5; }
  .ask-card .try { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .ask-card .try button.go { background: var(--fact); color: var(--ink); border-color: var(--fact); font-weight: 700; }
  .ask-card + .ask-card { margin-top: 10px; }
  .ask-card .asked { font-weight: 600; color: var(--paper); margin-bottom: 4px; font-size: 14px; }
  .ask-card .in-short { margin: 2px 0 8px; padding: 8px 10px; border-left: 3px solid var(--fact);
    background: var(--ink); border-radius: 4px; font-size: 13.5px; color: var(--paper); }
  .ask-card .try .next { font-family: var(--mono); font-size: 11px; color: var(--muted); align-self: center; }
  .ask-card .ask-terms { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--ink-3);
    font-size: 13px; color: var(--paper-dim); line-height: 1.55; }
  .ask-card .ask-terms .th { font-family: var(--mono); font-size: 10px; letter-spacing: .6px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .ask-card .ask-terms b { color: var(--paper); font-weight: 600; }
  .ask-card .foot { margin-top: 10px; font-size: 11px; color: var(--muted); font-family: var(--mono); word-break: break-word; }
  @media (max-width: 640px) { .ask-card .s { flex-direction: column; gap: 3px; } .ask-card .s .tag.none { display: none; } }

  .banner { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border: 1px solid rgba(244,184,96,.45); background: rgba(244,184,96,.08); border-radius: 10px;
    padding: 12px 16px; margin-bottom: 20px; animation: rise .4s ease; }
  .banner.calm { border-color: var(--ink-3); background: var(--ink-2); }
  .banner .msg { font-size: 14px; color: var(--paper); }
  .banner .msg small { display: block; font-family: var(--mono); font-size: 11px; color: var(--paper-dim); margin-top: 2px; }
  .banner button { background: var(--infer); color: var(--ink); border: none; border-radius: 6px;
    padding: 8px 14px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .banner.calm button { background: transparent; color: var(--paper-dim); border: 1px solid var(--ink-3); font-weight: 500; }
  .drift-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 20px; }
  .drift-head .what { font-family: var(--mono); font-size: 12.5px; color: var(--paper-dim); }
  .drift-head select { background: var(--ink); color: var(--paper); border: 1px solid var(--ink-3);
    border-radius: 6px; padding: 7px 10px; font-family: var(--mono); font-size: 12.5px; }
  .no-drift { border: 1px solid var(--ink-3); border-top: 3px solid var(--fact); border-radius: 10px;
    background: var(--ink-2); padding: 22px; margin-bottom: 24px; }
  .no-drift b { color: var(--fact); font-size: 18px; display: block; margin-bottom: 6px; }
  .no-drift span { color: var(--paper-dim); font-size: 14px; }
  .listing .item.add { border-left-color: var(--fact); }
  .listing .item.del { border-left-color: var(--warn); }
  .listing .item.chg { border-left-color: var(--infer); }
  .listing .item .sym { font-weight: 700; margin-right: 8px; }
  .listing .item.add .sym { color: var(--fact); } .listing .item.del .sym { color: var(--warn); }
  .listing .item.chg .sym, .listing .item.hint .sym { color: var(--infer); }
  .listing .item.hint { border-left-color: var(--infer); border-left-style: dashed; }
  .listing .item.muted { border-left-color: var(--muted); color: var(--muted); }

  /* drift as tables */
  .drift-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
  .drift-summary span { font-family: var(--mono); font-size: 12px; border: 1px solid var(--ink-3);
    border-radius: 999px; padding: 4px 12px; color: var(--paper-dim); background: var(--ink-2); }
  .drift-summary b { color: var(--paper); }
  .tbl-wrap { overflow-x: auto; border: 1px solid var(--ink-3); border-radius: 10px; background: var(--ink-2); }
  table.dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .dtable th { text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: 1px; text-transform: uppercase; color: var(--paper-dim); padding: 10px 14px;
    border-bottom: 1px solid var(--ink-3); background: var(--ink); white-space: nowrap; }
  .dtable td { padding: 10px 14px; border-bottom: 1px solid rgba(27,51,80,.6); vertical-align: top; }
  .dtable tr:last-child td { border-bottom: none; }
  .dtable tbody tr:hover td { background: rgba(75,214,196,.03); }
  .dtable td.mono { font-family: var(--mono); font-size: 12.5px; }
  .dtable td.dim { color: var(--muted); }
  .badge { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .6px;
    text-transform: uppercase; border-radius: 4px; padding: 2px 8px; white-space: nowrap; border: 1px solid; }
  .badge.added { color: var(--fact); border-color: rgba(75,214,196,.4); }
  .badge.removed { color: var(--warn); border-color: rgba(232,130,90,.45); }
  .badge.changed { color: var(--infer); border-color: rgba(244,184,96,.45); }
  .badge.hint { color: var(--infer); border-color: rgba(244,184,96,.45); border-style: dashed; }
  .badge.fact { color: var(--fact); border-color: rgba(75,214,196,.4); }
  .badge.inferred { color: var(--infer); border-color: rgba(244,184,96,.45); }
  .delta.up { color: var(--fact); } .delta.down { color: var(--warn); }

  /* ============ ENTRY SCREEN — the first thing a visitor sees ============ */
  .gate { display: none; min-height: 100vh; align-items: center; justify-content: center; padding: 32px 16px; }
  body.gated .gate { display: flex; flex-direction: column; }
  body.gated .app { display: none; }
  .gate-card { width: 100%; max-width: 420px; background: var(--ink-2); border: 1px solid var(--ink-3);
    border-radius: 14px; padding: 30px 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: rise .45s ease; }
  .gate-brand { font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -.5px; }
  .gate-brand span { color: var(--fact); }
  .gate-tag { font-size: 14.5px; color: var(--paper-dim); margin: 8px 0 22px; line-height: 1.5; }
  .gate-tag b { color: var(--fact); font-weight: 600; }
  .gate .acct-form input, .auth-back .acct-form input { padding: 11px 12px; font-size: 13.5px; }
  .gate .acct-form button, .auth-back .acct-form button { padding: 11px; font-size: 13.5px; }
  .gate .acct-tabs button, .auth-back .acct-tabs button { padding: 9px 0; font-size: 12.5px; }
  .gate-alt { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--ink-3); display: flex;
    flex-direction: column; gap: 8px; }
  .link-btn { background: none; border: none; color: var(--paper-dim); font-family: var(--mono); font-size: 12px;
    cursor: pointer; text-align: left; padding: 0; }
  .link-btn:hover { color: var(--fact); }
  .gate .hint, .auth-back .hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
  .gate-foot { margin-top: 18px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: center; }

  /* ============ ACCOUNT ============ */
  .acct-tabs { display: flex; gap: 0; border: 1px solid var(--ink-3); border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
  .acct-tabs button { flex: 1; background: transparent; border: none; color: var(--paper-dim); padding: 7px 0;
    font-family: var(--mono); font-size: 11.5px; cursor: pointer; }
  .acct-tabs button.on { background: var(--fact); color: var(--ink); font-weight: 600; }
  .acct-form { display: flex; flex-direction: column; gap: 8px; }
  .acct-form input { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px; padding: 9px 10px;
    color: var(--paper); font-family: var(--mono); font-size: 12.5px; }
  .acct-form input:focus { border-color: var(--fact); }
  .acct-form button, .acct-btn { background: var(--fact); color: var(--ink); border: none; border-radius: 6px; padding: 9px;
    font-family: var(--mono); font-size: 12.5px; font-weight: 600; cursor: pointer; }
  .acct-btn.ghost { background: transparent; color: var(--paper-dim); border: 1px solid var(--ink-3); font-weight: 500; }
  .acct-btn.ghost:hover { color: var(--paper); border-color: var(--fact); }
  .acct-err { font-size: 12px; color: var(--warn); min-height: 0; }
  .acct-ok { font-size: 12px; color: var(--fact); }
  .tf-grid { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
  .tf-qr { background: #fff; border-radius: 10px; padding: 6px; line-height: 0; }
  .tf-qr svg { width: 180px; height: 180px; }
  .tf-key { font-family: var(--mono); font-size: 14px; letter-spacing: 1px; word-break: break-all; background: var(--ink);
    border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; }
  .tf-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
  .tf-row input { font-family: var(--mono); background: var(--ink); color: var(--paper); border: 1px solid var(--line);
    border-radius: 6px; padding: 7px 9px; }
  .tf-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-family: var(--mono);
    font-size: 15px; background: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 8px 0; }
  .tf-on { color: var(--fact); font-weight: 700; }
  .sec-h { font-size: 14px; margin: 18px 0 8px; }
  tr.sec-warn td:first-child { color: var(--infer); }
  .keys-panel .new select { background: var(--ink); color: var(--paper); border: 1px solid var(--line); border-radius: 6px;
    padding: 6px 8px; font-family: var(--mono); font-size: 12px; }
  @media (max-width: 640px) { .tf-grid { grid-template-columns: 1fr; } }
  .acct-form .link-btn, .acct-form .link-btn:hover { background: none; border: none; color: var(--paper-dim); font-weight: 400;
    font-size: 12px; padding: 0; width: auto; text-decoration: underline; text-underline-offset: 3px; }
  .verify-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 14px; padding: 10px 14px;
    border: 1px solid rgba(244,184,96,.45); border-radius: 10px; background: rgba(244,184,96,.08); font-size: 13.5px; }
  .verify-bar[hidden] { display: none; }
  .verify-bar b { color: var(--infer); }
  .verify-bar input { width: 120px; font-family: var(--mono); letter-spacing: 3px; text-align: center; background: var(--ink);
    color: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
  .verify-bar button { font-family: var(--mono); font-size: 12px; border-radius: 6px; padding: 6px 11px; cursor: pointer;
    background: var(--infer); color: var(--ink); border: none; font-weight: 700; }
  .verify-bar button.ghost { background: transparent; color: var(--paper-dim); border: 1px solid var(--line); font-weight: 500; }
  .verify-bar .vmsg { flex-basis: 100%; font-size: 12.5px; color: var(--paper-dim); }
  .verify-bar .vmsg.err { color: var(--warn); }
  .acct-me { border: 1px solid var(--ink-3); border-radius: 8px; padding: 12px; background: var(--ink); }
  .acct-me b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
  .acct-me small { font-family: var(--mono); font-size: 11px; color: var(--fact); }
  .acct-me .ws { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--paper-dim); }
  .acct-me .ws i { font-style: normal; color: var(--fact); }
  .acct-me .handle { display: block; margin-top: 2px; font-family: var(--mono); font-size: 12px; color: var(--paper-dim); }
  .acct-me .handle button { background: none; border: none; padding: 0; color: var(--fact); font: inherit; cursor: pointer; text-decoration: underline; }
  .acct-me .inv-wait { display: block; width: 100%; margin-top: 8px; text-align: left; background: rgba(244,184,96,.08);
    border: 1px solid rgba(244,184,96,.5); color: var(--infer); border-radius: 6px; padding: 7px 9px; font-size: 12.5px; cursor: pointer; }
  .acct-me .ws.team i { color: var(--infer); }
  .acct-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
  .inv-new { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 110px auto; gap: 8px; margin-bottom: 14px; }
  .inv-new input, .inv-new select { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px; padding: 8px 10px;
    color: var(--paper); font-family: var(--mono); font-size: 12.5px; min-width: 0; }
  .inv-state { font-family: var(--mono); font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--ink-3); }
  .inv-state.open { color: var(--fact); border-color: rgba(75,214,196,.5); }
  .inv-state.used { color: var(--paper-dim); }
  .inv-state.expired, .inv-state.revoked, .inv-state.cancelled, .inv-state.declined { color: var(--muted); }
  .inv-state.pending { color: var(--infer); border-color: rgba(244,184,96,.5); }
  .inv-state.accepted { color: var(--paper-dim); }
  @media (max-width: 720px) { .inv-new { grid-template-columns: minmax(0, 1fr); } }
  .acct-row .acct-btn { flex: 1 1 calc(50% - 3px); padding: 7px; font-size: 11.5px; }
  body.signed-in #apikeyField { display: none; }
  .keys-panel { margin-top: 22px; }
  .set-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
  .set-layout .keys-panel { margin-top: 0; min-width: 0; }
  .set-nav { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 16px; }
  .set-group h3 { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 6px; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .set-group button { display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 7px;
    color: var(--paper-dim); font: inherit; font-size: 13.5px; padding: 7px 10px; cursor: pointer; }
  .set-group button:hover { background: var(--ink-2); color: var(--paper); }
  .set-group button.on { background: var(--ink-2); border-color: var(--line); color: var(--paper); font-weight: 600; }
  .set-group button .go { float: right; color: var(--muted); }
  .set-facts { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 14px; margin: 0 0 6px; font-size: 13.5px; }
  .set-facts dt { color: var(--muted); }
  .set-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  .set-facts .link-btn { background: none; border: none; padding: 0; color: var(--fact); font: inherit; cursor: pointer; text-decoration: underline; }
  .set-check { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; cursor: pointer; }
  .set-check input { width: auto; margin-top: 3px; }
  .set-check span { font-size: 13px; color: var(--paper-dim); line-height: 1.5; }
  .keys-panel .hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
  .sas-banner { border: 1px solid rgba(244,184,96,.5); background: rgba(244,184,96,.10); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; font-size: 13.5px; }
  .sas-banner b { color: var(--infer); }
  .sas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sasd-card { border: 1px solid var(--ink-3); border-radius: 12px; padding: 14px 16px; background: var(--ink-2); }
  .sasd-card .org-steps { margin: 0; }
  .sasd-card code, .sasd-foot code { font-family: var(--mono); font-size: 12px; color: var(--fact); }
  .sasd-open { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 16px; }
  .sasd-open .acct-btn { display: inline-block; text-decoration: none; padding: 9px 16px; font-weight: 700; flex: none; }
  .sasd-open .acct-btn:disabled { opacity: .5; cursor: default; }
  .sasd-foot { font-size: 12.5px; color: var(--paper-dim); margin: 10px 0 0; max-width: 760px; }
  .sasd-foot summary { cursor: pointer; }
  .sasd-foot .tf-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
  .sas-grid h3 { margin: 0 0 10px; font-size: 14px; }
  @media (max-width: 900px) { .sas-grid { grid-template-columns: minmax(0, 1fr); } }
  .org-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
  .org-steps li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--paper-dim); }
  .org-steps li i { font-style: normal; width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .org-steps li.done i { background: var(--fact); border-color: var(--fact); color: var(--ink); }
  .org-steps li.now { color: var(--paper); font-weight: 600; }
  .org-steps li.now i { border-color: var(--infer); color: var(--infer); }
  .org-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; max-width: 720px; }
  .org-form label { display: grid; gap: 4px; font-size: 12.5px; color: var(--paper-dim); }
  .org-form input, .org-form select, .org-form textarea { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px;
    padding: 8px 10px; color: var(--paper); font: inherit; font-size: 13.5px; min-width: 0; }
  .org-form .wide { grid-column: 1 / -1; }
  .agree-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
  .agree-row:last-of-type { border-bottom: none; }
  .agree-row .link-btn { background: none; border: none; padding: 0; color: var(--fact); font: inherit; cursor: pointer; text-decoration: underline; }
  .db-state { font-family: var(--mono); font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--ink-3); white-space: nowrap; }
  .db-state.approved { color: var(--fact); border-color: rgba(75,214,196,.5); }
  .db-state.pending { color: var(--infer); border-color: rgba(244,184,96,.5); }
  .db-state.declined { color: var(--muted); }
  .legal-doc { max-height: 60vh; overflow: auto; background: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px;
    font-size: 13.5px; line-height: 1.55; }
  .legal-doc h3 { font-size: 16px; margin: 4px 0 10px; }
  .legal-doc h4 { font-size: 14px; margin: 14px 0 6px; }
  .legal-doc p, .legal-doc ul { margin: 0 0 8px; }
  .legal-doc blockquote { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--infer); background: rgba(244,184,96,.08); color: var(--paper); }
  .legal-doc table { border-collapse: collapse; margin: 0 0 10px; font-size: 12.5px; }
  .legal-doc td, .legal-doc th { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
  .modal.wide { max-width: 760px; }
  @media (max-width: 640px) { .org-form { grid-template-columns: minmax(0, 1fr); } }
  .set-soon { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; color: var(--paper-dim); font-size: 13.5px; margin-top: 10px; }
  @media (max-width: 900px) {
    .set-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .set-nav { position: relative; flex-direction: row; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
    .set-group { display: flex; gap: 4px; align-items: center; flex: none; }
    .set-group h3 { display: none; }
    .set-group + .set-group { border-left: 1px solid var(--line); padding-left: 10px; }
    .set-group button { white-space: nowrap; width: auto; }
    .set-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .set-facts dd { margin-bottom: 8px; }
  }
  .keys-panel .head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .keys-panel .new { display: flex; flex-wrap: wrap; gap: 8px; }
  .keys-panel .new input { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px; padding: 8px 10px;
    color: var(--paper); font-family: var(--mono); font-size: 12.5px; width: 220px; max-width: 100%; }
  .modal-back { position: fixed; inset: 0; background: rgba(5,12,20,.72); display: flex; align-items: center;
    justify-content: center; z-index: 50; padding: 16px; animation: rise .2s ease; }
  .modal { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 12px; padding: 22px; max-width: 560px; width: 100%; }
  .modal h3 { font-size: 18px; margin-bottom: 8px; }
  .modal p { color: var(--paper-dim); font-size: 14px; margin-bottom: 12px; }
  .modal .secret { font-family: var(--mono); font-size: 13px; background: var(--ink); border: 1px solid var(--fact);
    border-radius: 8px; padding: 12px; word-break: break-all; color: var(--paper); margin-bottom: 14px; }
  .modal .acct-row { justify-content: flex-end; }
  .modal .vm-in { width: 100%; background: var(--ink); border: 1px solid var(--ink-3); border-radius: 8px; padding: 10px 12px;
    color: var(--paper); font-family: var(--sans); font-size: 14px; margin-bottom: 10px; resize: vertical; }
  .modal .vm-in:focus { border-color: var(--fact); }
  .modal .acct-row .acct-btn { flex: 0 0 auto; padding: 9px 16px; }

  /* ============================================================
     NAVIGATION — the left bar holds the way around; the main surface stays a
     calm workspace. Connecting a database lives in a drawer beside the bar.
     ============================================================ */
  .new-run { width: 100%; background: var(--fact); color: var(--ink); border: none; border-radius: 8px;
    padding: 11px 14px; font-family: var(--mono); font-size: 13.5px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s, box-shadow .2s; }
  .new-run:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(75,214,196,.18); }
  .nav { display: flex; flex-direction: column; gap: 4px; }
  .nav button { display: flex; align-items: center; gap: 10px; text-align: left; background: transparent;
    border: 1px solid transparent; color: var(--paper-dim); border-radius: 8px; padding: 9px 12px;
    font-family: var(--sans); font-size: 14px; cursor: pointer; transition: background .15s, color .15s; }
  .nav button svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }
  .nav button:hover { color: var(--paper); background: rgba(255,255,255,.03); }
  .nav button.on { color: var(--paper); background: rgba(75,214,196,.08); border-color: rgba(75,214,196,.35); }
  .nav button.on svg { stroke: var(--fact); }
  .nav .count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--paper-dim); }
  .page { display: none; }
  .page.on { display: block; animation: rise .3s ease; }
  .page-head { padding: 26px 0 18px; border-bottom: 1px solid var(--ink-3); margin-bottom: 24px;
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .page-head h1 { font-size: 24px; font-weight: 650; letter-spacing: -.4px; }
  .page-head p { color: var(--paper-dim); font-size: 13.5px; margin-top: 4px; max-width: 640px; }
  .page-head .ghost-btn { background: transparent; color: var(--paper); border: 1px solid var(--ink-3); border-radius: 7px;
    padding: 8px 14px; font-family: var(--mono); font-size: 12.5px; cursor: pointer; }
  .page-head .ghost-btn:hover { border-color: var(--fact); }
  .side-runs { display: flex; flex-direction: column; gap: 4px; }
  .side-runs .more { background: none; border: none; color: var(--fact); font-family: var(--mono); font-size: 12px;
    text-align: left; cursor: pointer; padding: 4px 2px; }

  /* the welcome surface when no run is open */
  .welcome { border: 1px dashed var(--ink-3); border-radius: 14px; padding: 42px 30px; text-align: center;
    background: linear-gradient(180deg, rgba(75,214,196,.04), transparent 60%); }
  .welcome h2 { font-size: 22px; margin: 18px 0 8px; }
  .welcome p { color: var(--paper-dim); max-width: 540px; margin: 0 auto; font-size: 14.5px; }
  .welcome p b { color: var(--fact); font-weight: 600; } .welcome p .a { color: var(--infer); } .welcome p .u { color: var(--muted); }
  .welcome .acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
  .welcome .acts button { background: var(--fact); color: var(--ink); border: none; border-radius: 8px; padding: 11px 20px;
    font-family: var(--mono); font-weight: 700; cursor: pointer; }
  .welcome .acts button.ghost { background: transparent; color: var(--paper); border: 1px solid var(--ink-3); font-weight: 500; }
  .welcome .brain { width: 120px; height: 90px; margin: 0 auto; display: block; }

  /* ---- the connect drawer ---- */
  .drawer-back { position: fixed; inset: 0; background: rgba(5,12,20,.55); z-index: 30; opacity: 0;
    pointer-events: none; transition: opacity .25s; }
  .drawer { position: fixed; top: 0; bottom: 0; left: 290px; width: min(500px, calc(100vw - 290px)); z-index: 31;
    background: var(--ink-2); border-right: 1px solid var(--ink-3); box-shadow: 18px 0 50px rgba(0,0,0,.35);
    transform: translateX(-12px); opacity: 0; pointer-events: none; overflow-y: auto;
    transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s; }
  .app.collapsed ~ .drawer, .app.collapsed .drawer { left: 0; }
  body.connect-open .drawer { transform: none; opacity: 1; pointer-events: auto; }
  body.connect-open .drawer-back { opacity: 1; pointer-events: auto; }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px;
    border-bottom: 1px solid var(--ink-3); position: sticky; top: 0; background: var(--ink-2); z-index: 1; }
  .drawer-head h2 { font-size: 16px; font-weight: 650; }
  .drawer-body { padding: 20px 22px 32px; }
  .drawer .panel { margin: 0; padding: 0; border: none; background: none; }
  .drawer .grid-form { grid-template-columns: 1fr 1fr; }

  /* ---- Dual Run: two databases in one drawer ---- */
  .conn-mode { margin-bottom: 14px; }
  .dual-intro { display: none; font-size: 13px; color: var(--paper-dim); margin: -4px 0 14px; line-height: 1.5; }
  .dual-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dual-col#colB, .dual-head { display: none; }
  .drawer.dual { width: min(980px, calc(100vw - 290px)); }
  .drawer.dual .dual-intro, .drawer.dual .dual-head { display: flex; }
  .drawer.dual .dual-intro { display: block; }
  .drawer.dual .dual-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .drawer.dual .dual-col#colB { display: block; }
  .drawer.dual .dual-col { border: 1px solid var(--ink-3); border-radius: 12px; padding: 14px; background: var(--ink); }
  .dual-head { align-items: center; gap: 10px; margin-bottom: 12px; }
  .dual-head .abk { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--fact);
    color: var(--ink); font-family: var(--mono); font-weight: 800; }
  #colB .dual-head .abk { background: #b48ce0; }
  .dual-head input { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px dashed var(--ink-3);
    color: var(--paper); font-size: 16px; font-weight: 650; padding: 3px 2px; }
  .dual-head input:focus { border-bottom-color: var(--fact); }
  @media (max-width: 900px) { .drawer.dual { width: 100vw; } }
  @media (max-width: 760px) { .drawer.dual .dual-cols { grid-template-columns: minmax(0, 1fr); } }

  /* ---- the reasoning pipeline: SSDO's layers, shown while it works ---- */
  .think { margin-top: 22px; border: 1px solid var(--ink-3); border-radius: 12px; background: var(--ink);
    padding: 16px 16px 12px; display: none; }
  .think.on { display: block; animation: rise .3s ease; }
  .think-top { display: flex; align-items: center; gap: 14px; }
  .think-top .t { font-size: 14px; font-weight: 600; }
  .think-top .t small { display: block; font-family: var(--mono); font-size: 11px; color: var(--paper-dim); font-weight: 400; margin-top: 2px; }
  .brain { width: 92px; height: 70px; flex: none; overflow: visible; }
  .brain .syn { stroke: var(--ink-3); stroke-width: 1.2; }
  .brain .flow { stroke: var(--fact); stroke-width: 1.6; stroke-dasharray: 3 9; stroke-linecap: round; opacity: 0; }
  .brain .neu { fill: var(--ink-2); stroke: var(--paper-dim); stroke-width: 1.3; transform-box: fill-box; transform-origin: center; }
  .thinking .brain .flow { opacity: .9; animation: flow 1.1s linear infinite; animation-delay: calc(var(--d) * -0.17s); }
  .thinking .brain .neu { animation: fire 1.4s ease-in-out infinite; animation-delay: calc(var(--d) * 0.11s); }
  .think.done .brain .neu { fill: var(--fact); stroke: var(--fact); }
  .think.failed .brain .neu { stroke: var(--warn); }
  @keyframes flow { to { stroke-dashoffset: -24; } }
  @keyframes fire { 0%, 100% { fill: var(--ink-2); stroke: var(--paper-dim); transform: scale(1); }
    45% { fill: var(--fact); stroke: var(--fact); transform: scale(1.35); } }
  .layers { list-style: none; margin: 14px 0 4px; padding: 0; position: relative; }
  .layers::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 1px; background: var(--ink-3); }
  .layers li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 6px 0; position: relative; }
  .layers .dot { width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--ink);
    display: grid; place-items: center; font-size: 11px; color: var(--ink); z-index: 1; transition: all .25s; }
  .layers .name { font-size: 13.5px; color: var(--paper-dim); transition: color .25s; }
  .layers .name small { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 1px; }
  .layers .got { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--fact); margin-top: 2px;
    animation: rise .35s ease; }
  .layers li.active .dot { border-color: var(--fact); box-shadow: 0 0 0 4px rgba(75,214,196,.12); animation: ring 1s ease-in-out infinite; }
  .layers li.active .name { color: var(--paper); }
  .layers li.done .dot { background: var(--fact); border-color: var(--fact); }
  .layers li.done .dot::after { content: "✓"; font-weight: 800; }
  .layers li.done .name { color: var(--paper); }
  .layers li.failed .dot { border-color: var(--warn); background: var(--warn); }
  .layers li.failed .dot::after { content: "!"; font-weight: 800; }
  @keyframes ring { 50% { box-shadow: 0 0 0 7px rgba(75,214,196,.04); } }
  .think-note { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

  /* ============================================================
     HISTORY & COMPARE — its own page. Every number is structure only.
     ============================================================ */
  .hc-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 18px; }
  .hc-bar label { display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .6px; text-transform: uppercase; color: var(--paper-dim); min-width: 0; }
  .hc-bar select { background: var(--ink); color: var(--paper); border: 1px solid var(--ink-3); border-radius: 7px;
    padding: 9px 10px; font-family: var(--mono); font-size: 12.5px; max-width: 100%; text-transform: none; letter-spacing: 0; }
  .hc-bar .go { background: var(--fact); color: var(--ink); border: none; border-radius: 7px; padding: 10px 18px;
    font-family: var(--mono); font-weight: 700; cursor: pointer; }
  .hc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  .kpi { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 10px; padding: 14px 14px 12px; min-width: 0; }
  .kpi .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--paper-dim); }
  .kpi .v { font-family: var(--mono); font-size: 26px; font-weight: 650; margin-top: 6px; line-height: 1.1; }
  .kpi .ab { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; }
  .kpi .dl { display: inline-block; font-family: var(--mono); font-size: 11px; border-radius: 4px; padding: 1px 6px; margin-left: 6px;
    border: 1px solid var(--ink-3); color: var(--paper-dim); vertical-align: 3px; }
  .kpi .dl.chg { color: var(--infer); border-color: rgba(244,184,96,.45); }
  .kpi.k-fact .v { color: var(--fact); } .kpi.k-infer .v { color: var(--infer); } .kpi.k-unknown .v { color: var(--muted); }
  .kpi svg { display: block; width: 100%; height: 30px; margin-top: 8px; overflow: visible; }
  .kpi svg path { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
  .kpi svg .area { stroke: none; opacity: .12; }
  .roles-bars { display: grid; gap: 8px; margin-bottom: 22px; }
  .roles-bars .rb { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: center;
    font-family: var(--mono); font-size: 11.5px; color: var(--paper-dim); }
  .roles-bars .track { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: var(--ink-3); }
  .roles-bars .track i { display: block; height: 100%; transition: width .8s cubic-bezier(.2,.7,.2,1); }
  .roles-key { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: 11px; color: var(--paper-dim); margin-top: 2px; }
  .roles-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
  .r-CORE_ENTITY { background: var(--fact); } .r-ENTITY { background: #6f8fb0; } .r-JUNCTION { background: #b48ce0; }
  .r-LOOKUP { background: var(--infer); } .r-ORPHAN { background: var(--muted); }
  .twin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .twin .tw-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px;
    font-family: var(--mono); font-size: 12px; color: var(--paper-dim); }
  .twin .tw-h b { color: var(--paper); font-size: 13px; }
  .twin table.dtable td, .twin table.dtable th { padding: 8px 10px; }
  .twin tr.st-added td { background: rgba(75,214,196,.07); }
  .twin tr.st-removed td { background: rgba(232,130,90,.08); }
  .twin tr.st-changed td { background: rgba(244,184,96,.07); }
  .twin tr.st-gap td { color: var(--muted); font-style: italic; }
  .twin td .delta-chip { font-family: var(--mono); font-size: 10.5px; color: var(--infer); margin-left: 4px; }
  .twin-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .seg { display: inline-flex; border: 1px solid var(--ink-3); border-radius: 7px; overflow: hidden; }
  .seg button { background: transparent; border: none; color: var(--paper-dim); padding: 6px 12px; font-family: var(--mono);
    font-size: 11.5px; cursor: pointer; }
  .seg button.on { background: var(--fact); color: var(--ink); font-weight: 700; }
  .legend-inline { display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--paper-dim); }
  .legend-inline i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
  .runs-list .dtable td button { background: transparent; border: 1px solid var(--ink-3); color: var(--paper); border-radius: 6px;
    padding: 4px 10px; font-family: var(--mono); font-size: 11.5px; cursor: pointer; margin-right: 4px; }
  .runs-list .dtable td button:hover { border-color: var(--fact); }
  .runs-list tr.is-a td:first-child, .runs-list tr.is-b td:first-child { box-shadow: inset 3px 0 0 var(--fact); }
  .ab-tag { font-family: var(--mono); font-size: 10px; border-radius: 3px; padding: 1px 5px; margin-left: 6px;
    background: var(--fact); color: var(--ink); font-weight: 700; }
  .hc-empty { border: 1px dashed var(--ink-3); border-radius: 12px; padding: 30px; text-align: center; color: var(--paper-dim); }

  /* ============================================================
     THE MAP — the whole database drawn from structure. Colour still MEANS
     certainty: solid teal = declared, dashed amber = inferred (fainter = less
     sure), dotted grey = below the floor, "?" = SSDO could not resolve it.
     ============================================================ */
  .map-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
  .map-tools input[type=search] { flex: 1 1 200px; min-width: 0; background: var(--ink); border: 1px solid var(--ink-3);
    border-radius: 8px; padding: 9px 12px; color: var(--paper); font-size: 13.5px; }
  .map-tools input[type=search]:focus { border-color: var(--fact); }
  .map-tools .tbtn { background: var(--ink-2); border: 1px solid var(--ink-3); color: var(--paper); border-radius: 7px;
    padding: 8px 11px; font-family: var(--mono); font-size: 12px; cursor: pointer; white-space: nowrap; }
  .map-tools .tbtn:hover { border-color: var(--fact); }
  .map-tools .tbtn.primary { background: var(--fact); color: var(--ink); border-color: var(--fact); font-weight: 700; }
  .map-tools label.chk { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--paper-dim); cursor: pointer; }
  .map-tools label.chk input { accent-color: var(--fact); }
  .map-shell { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; }
  .map-shell.no-panel { grid-template-columns: minmax(0, 1fr); }
  .map-stage { position: relative; height: max(460px, calc(100vh - 250px)); border: 1px solid var(--ink-3); border-radius: 12px;
    background: var(--ink); background-image: radial-gradient(rgba(141,160,181,.12) 1px, transparent 1px); background-size: 22px 22px;
    overflow: hidden; touch-action: none; cursor: grab; }
  .map-stage.panning { cursor: grabbing; }
  .map-stage svg { width: 100%; height: 100%; display: block; user-select: none; }
  .map-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
  .map-zoom button { width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--ink-3); background: var(--ink-2);
    color: var(--paper); cursor: pointer; font-size: 15px; }
  .map-zoom button:hover { border-color: var(--fact); }
  .map-legend { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 12px; padding: 7px 10px;
    background: var(--veil); border: 1px solid var(--ink-3); border-radius: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--paper-dim); }
  .map-legend svg { width: 26px; height: 8px; vertical-align: middle; margin-right: 5px; }
  .map-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: var(--veil);
    border: 1px solid rgba(75,214,196,.4); color: var(--paper); font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
    animation: rise .4s ease; white-space: nowrap; }
  /* cards */
  .mc { cursor: pointer; }
  .mc .box { fill: var(--ink-2); stroke: var(--ink-3); stroke-width: 1.2; }
  .mc .head { fill: var(--head); }
  #mapSvg .mreg rect { fill: var(--ac); fill-opacity: .08; stroke: var(--ac); stroke-opacity: .38; stroke-width: 1.2; stroke-dasharray: 6 5; }
  #mapSvg .mreg rect.br { stroke: none; fill-opacity: .08; }
  #mapSvg .mreg-l { fill: var(--ac); font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.1px; text-transform: uppercase; opacity: .95; }
  .map-mini { position: absolute; left: 14px; top: 14px; z-index: 3; background: rgba(9,17,29,.88); border: 1px solid var(--ink-3); border-radius: 10px; padding: 4px; cursor: crosshair; }
  .map-mini svg { display: block; touch-action: none; } .mm-view { fill: rgba(75,214,196,.12); stroke: var(--fact); stroke-width: 1.3; }
  .mf.on-t { border-color: rgba(75,214,196,.5); }
  .map-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
  .mf-l { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
  .mf { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); border: 1px solid var(--ink-3); color: var(--paper); border-radius: 999px;
    padding: 3px 11px 3px 9px; font-size: 12.5px; cursor: pointer; }
  .mf b { font-weight: 600; color: var(--paper-dim); } .mf:hover { border-color: var(--paper-dim); }
  .mf i { width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--paper-dim)); }
  .mf.r-core { --c: var(--fact); } .mf.r-entity { --c: #6fa8ff; } .mf.r-junction { --c: #b48cff; } .mf.r-lookup { --c: var(--infer); } .mf.r-orphan { --c: var(--paper-dim); }
  .mf.off { opacity: .45; text-decoration: line-through; } .mf.area.on { border-color: var(--fact); color: var(--fact); background: rgba(75,214,196,.07); }
  #mapSvg .mc.dimmed { opacity: .14 !important; pointer-events: none; } #mapSvg .medge.dimmed { opacity: .06 !important; }
  #mapSvg.lod .mlab { display: none; } #mapSvg.lod.focusing .medge.near .mlab { display: block; }
  #mapSvg.lod .mc .tname { font-size: 16px; font-weight: 650; } #mapSvg.lod .mc .trole { font-size: 11.5px; } #mapSvg.lod .mc.r-core .box { stroke-width: 2.2; }
  #mapSvg.lod .mc.r-core .tname { font-size: 17px; }
  #page-map .wrap { max-width: min(1600px, 100%); }
  .mc.r-core .head { fill: rgba(75,214,196,.22); } .mc.r-core .box { stroke: rgba(75,214,196,.7); }
  .mc.r-lookup .head { fill: rgba(244,184,96,.16); }
  .mc.r-junction .head { fill: rgba(180,140,224,.18); }
  .mc.r-orphan .box { stroke-dasharray: 4 3; }
  .mc .tname { font-family: var(--mono); font-size: 13px; font-weight: 600; fill: var(--paper); }
  .mc .trole { font-family: var(--mono); font-size: 9.5px; letter-spacing: .6px; fill: var(--paper-dim); text-transform: uppercase; }
  .mc .cn { font-family: var(--mono); font-size: 11.5px; fill: var(--paper); }
  .mc .ct { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
  .mc .pk { font-family: var(--mono); font-size: 9px; font-weight: 700; fill: var(--fact); }
  .mc .fk { font-family: var(--mono); font-size: 10px; font-weight: 700; }
  .mc .more { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); font-style: italic; }
  .mc .rowline { stroke: var(--rowline); }
  .mc:hover .box { stroke: var(--paper-dim); }
  .mc.sel .box { stroke: var(--fact); stroke-width: 2.2; }
  .mc.hit .box { stroke: var(--infer); stroke-width: 2; }
  .mc.pop { animation: mcpop .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 45ms); transform-box: fill-box; transform-origin: center; }
  @keyframes mcpop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
  /* links */
  .ml { fill: none; stroke-width: 1.7; }
  .ml.declared { stroke: var(--fact); }
  .ml.inferred { stroke: var(--infer); stroke-dasharray: 7 5; }
  .ml.weak { stroke: var(--muted); stroke-dasharray: 2 5; stroke-width: 1.4; }
  .ml-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
  .mspark { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: .06 1.2; stroke-dashoffset: 1.06; opacity: 0; }
  .mspark.declared { stroke: #b9fff5; } .mspark.inferred { stroke: #ffe1ad; }
  .map-anim .mspark { animation: spark 1.4s ease-in-out both; animation-delay: calc(var(--i) * 35ms + 350ms); }
  .mspark.live { animation: spark 1.6s linear infinite !important; }
  @keyframes spark { 0% { opacity: 0; stroke-dashoffset: 1.06; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -0.06; } }
  .map-anim .ml.declared.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mdraw .9s ease forwards; animation-delay: calc(var(--i) * 35ms + 250ms); }
  .map-anim .ml.inferred.draw, .map-anim .ml.weak.draw { animation: mfade .7s ease both; animation-delay: calc(var(--i) * 35ms + 250ms); }
  @keyframes mdraw { to { stroke-dashoffset: 0; } }
  @keyframes mfade { from { opacity: 0; } }
  .mlab rect { fill: var(--ink); stroke: rgba(244,184,96,.5); }
  .mlab text { font-family: var(--mono); font-size: 9.5px; fill: var(--infer); }
  .mstub { stroke: var(--muted); stroke-dasharray: 2 3; stroke-width: 1.3; }
  .mq circle { fill: var(--ink); stroke: var(--muted); }
  .mq text { font-family: var(--mono); font-size: 10px; font-weight: 700; fill: var(--paper-dim); }
  .mband { font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; fill: var(--muted); text-transform: uppercase; }
  svg.focusing .mc:not(.near), svg.focusing .medge:not(.near), svg.searching .mc:not(.hit) { opacity: .18; transition: opacity .25s; }
  svg.focusing .medge.near .ml { stroke-width: 2.6; }
  .m-route .ml { stroke-width: 3.2 !important; }
  /* side panel */
  .map-panel { border: 1px solid var(--ink-3); border-radius: 12px; background: var(--ink-2); padding: 16px; overflow-y: auto;
    max-height: max(460px, calc(100vh - 250px)); animation: rise .3s ease; }
  .map-panel h3 { font-family: var(--mono); font-size: 17px; word-break: break-word; }
  .map-panel .role-chip { display: inline-block; margin: 6px 0 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .6px;
    text-transform: uppercase; border: 1px solid var(--ink-3); border-radius: 4px; padding: 2px 7px; color: var(--paper-dim); }
  .map-panel p { font-size: 13.5px; color: var(--paper-dim); line-height: 1.5; }
  .map-panel h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--paper-dim);
    margin: 16px 0 8px; }
  .map-panel .pc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 6px 0;
    border-bottom: 1px solid rgba(27,51,80,.6); font-size: 13px; }
  .map-panel .pc .n { font-family: var(--mono); color: var(--paper); overflow-wrap: anywhere; }
  .map-panel .pc .t { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }
  .map-panel .pc .sub { grid-column: 1 / -1; font-size: 12px; color: var(--paper-dim); }
  .map-panel .pc .sub.inf { color: var(--infer); } .map-panel .pc .sub.dec { color: var(--fact); } .map-panel .pc .sub.unk { color: var(--muted); }
  .map-panel .lnk { padding: 7px 0; border-bottom: 1px solid rgba(27,51,80,.6); font-size: 13px; }
  .map-panel .lnk button { background: none; border: none; color: var(--paper); font-family: var(--mono); font-size: 12.5px; cursor: pointer; padding: 0; text-align: left; }
  .map-panel .lnk button:hover { color: var(--fact); }
  .map-panel .lnk .c { font-size: 12px; } .map-panel .lnk .c.dec { color: var(--fact); } .map-panel .lnk .c.inf { color: var(--infer); }
  .map-panel .lnk .why { font-size: 11.5px; color: var(--muted); }
  .map-panel .sig { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .map-panel .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
  .map-panel .acts button { background: transparent; border: 1px solid var(--ink-3); color: var(--paper); border-radius: 7px; padding: 7px 11px;
    font-family: var(--mono); font-size: 12px; cursor: pointer; }
  .map-panel .acts button.go { background: var(--fact); color: var(--ink); border-color: var(--fact); font-weight: 700; }
  .map-panel .words div { font-size: 12.5px; color: var(--paper-dim); margin-bottom: 4px; } .map-panel .words b { color: var(--paper); }
  .map-table th { cursor: pointer; } .map-table th:hover { color: var(--paper); }
  .map-table tbody tr { cursor: pointer; }

  /* ============================================================
     ASK SSDO, ALIVE — a little worker pushes your question into SSDO's
     machine and pulls the answer out. Pure presentation: the answer itself
     comes from the engine's fixed templates, and the steps tick only once it
     has come back, with what the engine actually did.
     ============================================================ */
  .bench-card { margin-top: 12px; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 12px;
    padding: 12px 16px 12px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: center;
    animation: rise .25s ease; cursor: pointer; }
  .bench { width: 220px; height: 76px; overflow: visible; }
  .bench .edge { stroke: var(--ink-3); stroke-width: 1.2; fill: none; }
  .bench .node { fill: var(--ink-2); stroke: var(--paper-dim); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
  .bench .qring { fill: rgba(244,184,96,.08); stroke: var(--infer); stroke-width: 1.6; }
  .bench .qmark { font-family: var(--mono); font-size: 12px; font-weight: 800; fill: var(--infer); }
  .bench .rbox { fill: rgba(75,214,196,.08); stroke: var(--fact); stroke-width: 1.4; }
  .bench .rtick { fill: none; stroke: var(--fact); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
  .bench .probe { fill: none; stroke: var(--fact); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 12 100; stroke-dashoffset: 12; opacity: 0; filter: drop-shadow(0 0 3px rgba(75,214,196,.8)); }
  .working .bench .probe { opacity: 1; animation: bn-trace 1.5s cubic-bezier(.4,0,.6,1) infinite; }
  .working .bench .probe.p2 { animation-delay: .35s; }
  .working .bench .node { animation: fire 0.9s ease-in-out infinite; animation-delay: calc(var(--d) * .12s); }
  @keyframes bn-trace { from { stroke-dashoffset: 12; } to { stroke-dashoffset: -100; } }
  .bench-card.done .bench .node { fill: var(--fact); stroke: var(--fact); }
  .bench-card.done .bench .rtick { opacity: 1; }
  .bench-card.declined .bench .node { fill: var(--infer); stroke: var(--infer); }
  .bench-card.declined .bench .rbox { stroke: var(--infer); fill: rgba(244,184,96,.08); }
  .bench-card.declined .bench .rtick { stroke: var(--infer); }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
  .steps li { position: relative; padding-left: 20px; color: var(--muted); }
  .steps li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-3); }
  .steps li.on { color: var(--paper); animation: rise .25s ease; }
  .steps li.on::before { background: var(--fact); border-color: var(--fact); }
  .steps li.warn::before { background: var(--infer); border-color: var(--infer); }
  .steps li b { font-weight: 600; } .steps li span { color: var(--paper-dim); overflow-wrap: anywhere; }
  .steps .wait { color: var(--paper-dim); font-style: italic; }
  .ask-card.reveal .s, .ask-card.reveal .in-short, .ask-card.reveal .why, .ask-card.reveal .try, .ask-card.reveal .foot, .ask-card.reveal .ask-terms {
    opacity: 0; animation: rise .4s ease forwards; animation-delay: calc(var(--i, 0) * 110ms); }
  .ask-card code.tlink { cursor: pointer; border-bottom: 1px dashed rgba(75,214,196,.6); }
  .ask-card code.tlink:hover { color: var(--fact); }
  .ask-card .try button.map { border-color: rgba(75,214,196,.5); color: var(--fact); }
  .ask-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--paper-dim); }
  .ask-ctx .chip-x { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--paper);
    border: 1px solid rgba(75,214,196,.45); border-radius: 999px; padding: 3px 4px 3px 10px; background: rgba(75,214,196,.06); }
  .ask-ctx .ctx-q { background: transparent; color: var(--paper-dim); border: 1px solid var(--ink-3); border-radius: 999px;
    padding: 3px 10px; font-size: 12px; cursor: pointer; }
  .ask-ctx .ctx-q:hover { border-color: var(--fact); color: var(--paper); }
  .ask-ctx .chip-x button { background: none; border: none; color: var(--paper-dim); cursor: pointer; font-size: 12px; padding: 0 4px; }
  @media (max-width: 640px) { .bench-card { grid-template-columns: minmax(0, 1fr); } .bench { width: 100%; max-width: 260px; } }

  /* ============================================================
     THE VAULT — runs, sessions and comparisons. Colour still MEANS certainty:
     teal = a fact about names or structure, amber = an inference (a guess with
     its confidence), grey = what was not checked.
     ============================================================ */
  .vtabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
  .vtabs button { background: var(--ink-2); border: 1px solid var(--ink-3); color: var(--paper-dim); border-radius: 8px;
    padding: 8px 14px; font-family: var(--mono); font-size: 12.5px; cursor: pointer; }
  .vtabs button.on { color: var(--ink); background: var(--fact); border-color: var(--fact); font-weight: 700; }
  .vtabs button small { opacity: .7; margin-left: 4px; }
  .vtools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .vtools input, .vtools select { background: var(--ink); color: var(--paper); border: 1px solid var(--ink-3); border-radius: 8px;
    padding: 8px 11px; font-size: 13px; min-width: 0; }
  .vtools input { flex: 1 1 220px; }
  .vtools input:focus, .vtools select:focus { border-color: var(--fact); }
  .vgroup { margin-bottom: 18px; }
  .vgroup h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--paper-dim); text-transform: uppercase;
    margin: 0 0 8px; display: flex; gap: 10px; align-items: center; }
  .vgroup h3::after { content: ""; flex: 1; height: 1px; background: var(--ink-3); }
  .vrun { display: grid; grid-template-columns: 24px 26px minmax(0, 1.4fr) repeat(4, minmax(0, .6fr)) auto; gap: 10px; align-items: center;
    background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 9px; padding: 9px 12px; margin-bottom: 6px;
    font-size: 13px; transition: border-color .15s, background .15s; }
  .vrun:hover { border-color: var(--paper-dim); }
  .vrun.picked { border-color: var(--fact); background: rgba(75,214,196,.06); }
  .vrun input[type=checkbox] { accent-color: var(--fact); width: 16px; height: 16px; }
  .vrun .when { font-family: var(--mono); color: var(--paper); }
  .vrun .when small { display: block; color: var(--muted); font-size: 11px; }
  .vrun .num { font-family: var(--mono); font-size: 12px; color: var(--paper-dim); }
  .vrun .num b { color: var(--paper); font-weight: 600; }
  .vrun .vnote { grid-column: 3 / -1; font-size: 12.5px; color: var(--infer); white-space: pre-wrap; }
  .vrun .acts { display: flex; gap: 4px; }
  .vrun .acts button, .scard .acts button { background: transparent; border: 1px solid var(--ink-3); color: var(--paper); border-radius: 6px;
    padding: 4px 9px; font-family: var(--mono); font-size: 11.5px; cursor: pointer; }
  .vrun .acts button:hover, .scard .acts button:hover { border-color: var(--fact); }
  .star { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--muted); padding: 0; line-height: 1; }
  .star.on { color: var(--infer); }
  .vsel { position: sticky; bottom: 12px; z-index: 5; display: none; margin-top: 14px; }
  .vsel.on { display: flex; animation: rise .25s ease; }
  .vsel > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; background: var(--head); border: 1px solid var(--fact);
    border-radius: 12px; padding: 10px 14px; box-shadow: 0 12px 34px rgba(0,0,0,.4); }
  .vsel .what { font-size: 13px; flex: 1 1 200px; }
  .vsel .what small { display: block; color: var(--paper-dim); font-size: 11.5px; }
  .vsel button { background: transparent; color: var(--paper); border: 1px solid var(--ink-3); border-radius: 7px; padding: 8px 13px;
    font-family: var(--mono); font-size: 12.5px; cursor: pointer; }
  .vsel button.go { background: var(--fact); color: var(--ink); border-color: var(--fact); font-weight: 700; }
  .vsel button:disabled { opacity: .45; cursor: default; }
  .scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
  .scard { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 12px; padding: 14px 16px; }
  .scard h4 { font-size: 15px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
  .scard .kind { font-family: var(--mono); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; border: 1px solid var(--ink-3);
    border-radius: 4px; padding: 1px 6px; color: var(--paper-dim); }
  .scard .kind.dual { color: var(--fact); border-color: rgba(75,214,196,.5); }
  .scard p { font-size: 12.5px; color: var(--paper-dim); margin: 6px 0; white-space: pre-wrap; }
  .scard .chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; }
  .scard .chips span { font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--ink-3); border-radius: 999px; padding: 2px 9px; }
  .scard .chips span b { color: var(--fact); font-weight: 600; margin-right: 4px; }
  .scard .acts { display: flex; flex-wrap: wrap; gap: 5px; }
  .scard small.meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  /* pair view */
  .pair-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--mono); }
  .pair-head .db { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 8px; padding: 6px 12px; font-size: 13.5px; }
  .pair-head .db small { color: var(--paper-dim); font-size: 11px; margin-left: 6px; }
  .pair-head .x { color: var(--fact); font-size: 18px; }
  .verdict { border: 1px solid rgba(244,184,96,.45); border-left: 4px solid var(--infer); background: rgba(244,184,96,.06);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
  .verdict.fact { border-color: rgba(75,214,196,.45); border-left-color: var(--fact); background: rgba(75,214,196,.05); }
  .verdict b { font-size: 16px; display: block; line-height: 1.4; }
  .verdict small { display: block; color: var(--paper-dim); margin-top: 6px; font-size: 12px; }
  .mbar { display: flex; height: 16px; border-radius: 5px; overflow: hidden; background: var(--ink-3); margin: 6px 0 6px; }
  .mbar i { display: block; height: 100%; transition: width .8s cubic-bezier(.2,.7,.2,1); }
  .m-same { background: var(--fact); } .m-concept { background: #2fae9f; } .m-shape { background: var(--infer); }
  .m-onlya { background: #6f8fb0; } .m-onlyb { background: #b48ce0; }
  .tk { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(27,51,80,.6);
    font-size: 14px; line-height: 1.5; }
  .tk:last-child { border-bottom: none; }
  .tk .tag { justify-self: start; font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
    border-radius: 4px; padding: 1px 6px; border: 1px solid; height: fit-content; margin-top: 2px; }
  .tk .tag.declared { color: var(--fact); border-color: rgba(75,214,196,.5); }
  .tk .tag.inferred { color: var(--infer); border-color: rgba(244,184,96,.5); }
  .tk code, .corr code { font-family: var(--mono); font-size: 12.5px; background: var(--ink); padding: 1px 5px; border-radius: 4px; }
  .kbadge { font-family: var(--mono); font-size: 10.5px; border-radius: 4px; padding: 2px 7px; border: 1px solid; white-space: nowrap; }
  .kbadge.same_name { color: var(--fact); border-color: rgba(75,214,196,.5); }
  .kbadge.same_concept { color: #7fe3d6; border-color: rgba(75,214,196,.4); }
  .kbadge.similar_shape { color: var(--infer); border-color: rgba(244,184,96,.5); border-style: dashed; }
  .corr tr.exp { cursor: pointer; }
  .corr tr.exp:hover td { background: rgba(75,214,196,.04); }
  .corr tr.detail td { background: var(--ink); font-size: 12.5px; color: var(--paper-dim); }
  .corr tr.detail .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .corr tr.detail h5 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 4px; }
  .corr tr.detail .cols div span { display: inline-block; font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--ink-3);
    border-radius: 4px; padding: 1px 6px; margin: 0 4px 4px 0; color: var(--paper); }
  .corr tr.detail .warnline { color: var(--infer); margin-top: 6px; }
  .two-lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .two-lists .box { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 10px; padding: 12px 14px; }
  .two-lists .box h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 8px; }
  .two-lists .box span { display: inline-block; font-family: var(--mono); font-size: 12px; border: 1px solid var(--ink-3); border-radius: 999px;
    padding: 2px 9px; margin: 0 5px 5px 0; }
  /* many runs */
  .mgrid td.in { color: var(--fact); font-family: var(--mono); font-size: 12px; }
  .mgrid td.out { color: var(--muted); text-align: center; }
  .mgrid th.run { white-space: normal; min-width: 110px; }
  .matrix td.cell { text-align: center; font-family: var(--mono); font-size: 12px; cursor: pointer; }
  .matrix td.cell:hover { outline: 1px solid var(--fact); }
  @media (max-width: 760px) {
    .vrun { grid-template-columns: 24px 26px minmax(0, 1fr) auto; }
    .vrun .num { display: none; }
    .two-lists, .corr tr.detail .cols { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---- to the people at Solunex: deliberately NOT styled like Ask SSDO (no teal, no machine) ---- */
  .to-people { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; cursor: pointer;
    background: #f3ead9; color: #2b2116; border: none; border-radius: 10px; padding: 10px 12px; font-family: var(--sans); }
  .to-people svg { flex: none; width: 26px; height: 26px; fill: none; stroke: #2b2116; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .to-people b { display: block; font-size: 13px; }
  .to-people small { font-size: 11.5px; color: #5d4a33; }
  .to-people:hover { background: #fbf3e4; }
  .fb-modal { background: #f7f1e6; color: #2b2116; border: none; }
  .fb-modal h3 { color: #2b2116; }
  .fb-modal p, .fb-modal .fb-note { color: #5d4a33; }
  .fb-who { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
    background: #2b2116; color: #f7f1e6; border-radius: 4px; padding: 2px 8px; margin-bottom: 10px; }
  .fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
  .fb-kinds button { background: transparent; border: 1px solid #b9a589; color: #2b2116; border-radius: 999px; padding: 5px 12px;
    font-size: 13px; cursor: pointer; font-family: var(--sans); }
  .fb-kinds button.on { background: #2b2116; color: #f7f1e6; border-color: #2b2116; }
  .env-chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
  .env-node { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 8px 12px; border: 1px solid var(--ink-3); border-radius: 10px; background: var(--ink); }
  .env-node.off { border-color: var(--infer); }
  .env-node small { color: var(--paper-dim); font-size: 12px; }
  .env-arrow { align-self: center; color: var(--paper-dim); font-size: 18px; }
  .dict-modal textarea { width: 100%; margin: 6px 0; padding: 8px; font-family: monospace; font-size: 12px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink-3); border-radius: 8px; }
  .review-modal { max-width: 860px; max-height: 92vh; display: flex; flex-direction: column; }
  .review-modal #revOut { flex: 1 1 auto; max-height: 56vh; overflow: auto; margin: 0 0 8px; }
  .review-modal h4 { margin: 12px 0 2px; font-size: 14px; }
  .review-list { margin: 4px 0 8px 18px; padding: 0; font-size: 13px; line-height: 1.55; }
  .code-modal { max-width: 920px; max-height: 92vh; display: flex; flex-direction: column; }
  .code-out { flex: 1 1 auto; min-height: 220px; max-height: 52vh; overflow: auto; margin: 0 0 8px; padding: 12px; font-size: 12px; line-height: 1.5; white-space: pre;
    background: var(--ink); color: var(--paper); border: 1px solid var(--ink-3); border-radius: 8px; }
  .fb-faces { display: flex; gap: 8px; margin: 2px 0 10px; }
  .fb-faces button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: 1px solid #b9a589;
    color: #2b2116; border-radius: 10px; padding: 8px 6px; font-size: 12.5px; cursor: pointer; font-family: var(--sans); }
  .fb-faces button span { font-size: 22px; line-height: 1.2; }
  .fb-faces button.on { background: #2b2116; color: #f7f1e6; border-color: #2b2116; }
  .fb-modal .fb-contact { width: 100%; margin-top: 8px; background: #fffdf8; color: #2b2116; border: 1px solid #b9a589; border-radius: 8px; padding: 9px 12px;
    font-family: var(--sans); font-size: 14px; }
  .top-feedback { margin-left: auto; background: transparent; color: var(--paper); border: 1px solid var(--ink-3); border-radius: 999px; padding: 4px 14px;
    font-family: var(--sans); font-size: 12.5px; cursor: pointer; }
  .top-feedback:hover { border-color: var(--fact); color: var(--fact); }
  .fb-modal textarea { width: 100%; min-height: 130px; resize: vertical; background: #fffdf8; color: #2b2116; border: 1px solid #b9a589;
    border-radius: 8px; padding: 10px 12px; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
  .fb-modal textarea:focus { outline: 2px solid #2b2116; }
  .fb-modal .fb-note { font-size: 12.5px; margin: 8px 0 12px; }
  .fb-modal .acct-row .acct-btn { background: #2b2116; color: #f7f1e6; }
  .fb-modal .acct-row .acct-btn.ghost { background: transparent; color: #2b2116; border-color: #b9a589; }
  /* ---- admin ---- */
  body.ws-individual .nav button[data-page=liveroom].not-study, body.ws-individual .bottom-bar button[data-page=liveroom].not-study { display: none; }
  body:not(.signed-in) .nav button[data-page=team] { display: none; }
  body:not(.signed-in) .nav button[data-page=referrals] { display: none; }
  body:not(.signed-in) .nav button[data-page=coding] { display: none; }
  .soon-badge { margin-left: auto; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; border: 1px solid rgba(244,184,96,.6); color: var(--infer); border-radius: 999px; padding: 1px 7px; }
  .soon-card { position: relative; opacity: .96; border-style: dashed; }
  .soon-lock { filter: grayscale(.3); }
  body:not(.signed-in) .nav button[data-page=settings] { display: none; }
  .team-grid { display: grid; gap: 18px; }
  .team-card { background: var(--ink-2, rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
  .team-card h2 { font-size: 15px; margin: 0 0 10px; }
  #solaBtn { position: fixed; right: 18px; bottom: 18px; z-index: 40; border: 1px solid var(--line); background: var(--infer); color: #04121a;
             font-weight: 700; border-radius: 999px; padding: 10px 16px; cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
  #solaPanel { position: fixed; right: 18px; bottom: 70px; z-index: 41; width: min(380px, calc(100vw - 32px)); max-height: min(560px, 75vh);
               display: flex; flex-direction: column; background: var(--ink-2, #0f1b2d); border: 1px solid var(--line); border-radius: 14px;
               box-shadow: 0 12px 40px rgba(0,0,0,.5); }
  #solaPanel[hidden] { display: none; }
  #solaPanel .sp-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  #solaPanel .sp-head b { flex: 1; }
  #solaPanel .sp-body { padding: 12px 14px; overflow-y: auto; flex: 1; font-size: 14px; line-height: 1.5; }
  #solaPanel .sp-q { opacity: .75; margin: 0 0 8px; }
  #solaPanel .sp-a { margin: 0 0 8px; white-space: pre-wrap; }
  #solaPanel .sp-src { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
  #solaPanel form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
  #solaPanel input { flex: 1; min-width: 0; background: rgba(255,255,255,.05); color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
  .gd { margin: 0 0 14px; }
  .gd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .gd-head h2 { margin: 0; flex: 1; }
  .gd-slim { display: flex; align-items: center; gap: 12px; padding: 10px 16px; } .gd-slim .gd-bar { flex: 1; margin: 0; }
  .gd-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 10px 0 6px; }
  .gd-bar i { display: block; height: 100%; background: var(--infer); }
  .gd-step { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
  .gd-step .tick { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); flex: none; margin-top: 2px; text-align: center; font-size: 11px; line-height: 14px; }
  .gd-step.done .tick { background: var(--infer); border-color: var(--infer); color: #fff; }
  .gd-step.done b { opacity: .6; text-decoration: line-through; }
  .gd-step .gd-txt { flex: 1; min-width: 0; }
  .gd-step .gd-txt p { margin: 3px 0 0; }
  .gd-step .gd-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .gd-step.next { background: rgba(120,160,255,.06); margin: 0 -8px; padding: 9px 8px; border-radius: 8px; }
  .team-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .team-row input, .team-row select { background: var(--ink); color: var(--paper); border: 1px solid var(--line); border-radius: 6px;
    padding: 7px 9px; font-family: var(--mono); font-size: 12.5px; }
  .role-chip { font-family: var(--mono); font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--line); color: var(--paper-dim); }
  .role-chip.r-owner { color: var(--fact); border-color: rgba(75,214,196,.5); }
  .role-chip.r-admin { color: var(--infer); border-color: rgba(244,184,96,.5); }
  .team-grid > * { min-width: 0; }
  .ov-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .ov-tile { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--ink-2); cursor: pointer;
    text-align: left; color: var(--paper); font-family: var(--sans); }
  .ov-tile:hover { border-color: rgba(75,214,196,.5); }
  .ov-tile .n { font-family: var(--mono); font-size: 28px; font-weight: 700; line-height: 1.1; }
  .ov-tile .l { font-size: 12.5px; color: var(--paper-dim); margin-top: 4px; }
  .ov-tile .n small { font-size: 13px; color: var(--fact); font-weight: 500; margin-left: 6px; }
  /* ---- Study mode (docs/specs/study-mode.md): one pattern for every learning page ---- */
  .st-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fact); }
  /* classes (study-mode §13): a status is always a word, never colour alone */
  .cl-st { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--ink-3); color: var(--muted); }
  .cl-st.passed { color: var(--fact); border-color: rgba(75,214,196,.45); }
  .cl-st.attempted { color: var(--infer); border-color: rgba(244,184,96,.45); }
  .cl-st.late { color: var(--warn); border-color: rgba(232,130,90,.5); }
  .cl-code { font-family: var(--mono); font-size: 18px; letter-spacing: 2px; color: var(--paper); }
  .cl-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ink-3); }
  .cl-row:first-child { border-top: 0; }
  .cl-row .grow { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
  .cl-row .acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .cl-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
  .cl-form select, .cl-form input, .cl-input { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px; color: var(--paper); padding: 8px 10px; font: inherit; min-width: 0; max-width: 100%; }
  .cl-form input#clCode { flex: 1 1 180px; font-family: var(--mono); letter-spacing: 1.5px; text-transform: uppercase; }
  .cl-stu { border-top: 1px solid var(--ink-3); padding: 12px 0; }
  .cl-stu:first-child { border-top: 0; }
  .cl-stu h3 { font-size: 14px; margin: 0 0 6px; overflow-wrap: anywhere; }
  .cl-cell { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 4px 0; font-size: 13px; }
  .cl-cell .t { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
  .cl-q { border-top: 1px solid var(--ink-3); padding: 10px 0; }
  .cl-q p { margin: 0 0 4px; overflow-wrap: anywhere; }
  .cl-q textarea { display: block; width: 100%; box-sizing: border-box; margin: 6px 0; background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px; color: var(--paper); padding: 8px 10px; font: inherit; }
  .cl-code-block { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px; padding: 8px 10px; overflow-x: auto; white-space: pre; }
  .cl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0; }
  .cl-card { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 8px; padding: 8px 10px; }
  .cl-opt { display: flex; gap: 8px; align-items: center; margin: 4px 0; overflow-wrap: anywhere; }
  .cl-pos { width: 4.5em; background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px; color: var(--paper); padding: 4px 6px; font: inherit; }
  .ov-item.cl-item { flex-wrap: wrap; text-align: left; }
  .ov-item.cl-item .main-t { white-space: normal; overflow-wrap: anywhere; }
  .ov-item.cl-item small { white-space: normal; flex: 1 1 100%; overflow-wrap: anywhere; }
  /* questions and answers (study-mode §15) */
  .qa-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 10px; }
  .qa-ans { border-top: 1px solid var(--ink-3); padding: 10px 0; }
  .qa-ans.acc { border-left: 3px solid var(--fact); padding-left: 10px; }
  .qa-who { font-size: 12px; color: var(--paper-dim); margin-bottom: 2px; overflow-wrap: anywhere; }
  .qa-form textarea { width: 100%; min-height: 90px; background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px; color: var(--paper); padding: 8px 10px; font: inherit; box-sizing: border-box; resize: vertical; }
  .qa-form input[type=text] { flex: 1 1 100%; }
  .qa-att { border: 1px solid var(--ink-3); border-radius: 8px; padding: 8px 10px; margin: 6px 0; font-size: 13px; }
  .qa-att code { overflow-wrap: anywhere; }
  .gq-m { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 3px 0; font-size: 13px; }
  .gq-m .t { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
  .cl-link { background: none; border: 0; color: var(--fact); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
  .st-bar { display: block; height: 6px; border-radius: 999px; background: var(--ink-3); overflow: hidden; min-width: 80px; }
  .st-bar i { display: block; height: 100%; background: var(--fact); border-radius: 999px; transition: width .4s ease; }
  .st-hero { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 20px 22px;
    border: 1px solid rgba(75,214,196,.45); border-radius: 14px; background: linear-gradient(135deg, rgba(75,214,196,.10), rgba(75,214,196,.02)); margin-bottom: 16px; }
  .st-hero h2 { font-size: 20px; margin: 4px 0 4px; letter-spacing: -.2px; }
  .st-hero p { margin: 0; font-size: 13.5px; }
  .st-lv-tiles .ov-tile { display: flex; flex-direction: column; gap: 2px; }
  .st-lv-tiles .st-bar { margin: 2px 0 6px; }
  .st-static { cursor: default; }
  .st-static:hover { border-color: var(--line); }
  .st-levels { display: grid; gap: 18px; }
  .st-level { border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); padding: 18px 20px; }
  .st-level-h { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
  .st-level-h h2 { font-size: 17px; margin: 2px 0 2px; }
  .st-level-h p { margin: 0; font-size: 13px; }
  .st-level-p { display: grid; gap: 4px; min-width: 160px; font-size: 12px; text-align: right; }
  .st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .st-row { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left;
    background: var(--ink); border: 1px solid var(--ink-3); border-radius: 10px; padding: 10px 14px; color: var(--paper); cursor: pointer; font: inherit; }
  .st-row:hover { border-color: rgba(75,214,196,.5); }
  .st-row.next { border-color: rgba(75,214,196,.6); box-shadow: inset 3px 0 0 var(--fact); }
  .st-row .st-tt { display: grid; min-width: 0; }
  .st-row .st-tt small { color: var(--paper-dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--ink-3); font-size: 12px; color: var(--paper-dim); flex: none; }
  .st-row.done .st-n, .st-n.ok { background: rgba(75,214,196,.14); border-color: rgba(75,214,196,.5); color: var(--fact); font-weight: 700; }
  .st-min { font-family: var(--mono); font-size: 11.5px; color: var(--paper-dim); }
  .st-read { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; padding-top: 22px; }
  .st-art { min-width: 0; max-width: 720px; }
  .st-crumb { font-size: 12.5px; color: var(--paper-dim); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .st-crumb .link-btn { padding: 0; font-size: 12.5px; }
  .st-art h1 { font-size: 28px; letter-spacing: -.5px; margin: 10px 0 6px; }
  .st-meta { color: var(--paper-dim); font-size: 13px; margin: 0 0 22px; }
  .st-donechip { color: var(--fact); }
  .st-body { font-size: 15.5px; line-height: 1.7; color: var(--paper); }
  .st-body p { margin: 0 0 14px; }
  .st-body h3 { font-size: 17px; margin: 26px 0 8px; letter-spacing: -.2px; }
  .st-body ul, .st-body ol { margin: 0 0 14px; padding-left: 22px; }
  .st-body li { margin: 4px 0; }
  .st-body code { font-family: var(--mono); font-size: 13px; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 5px; padding: 1px 5px; }
  .st-body code.st-ref { color: var(--fact); border-color: rgba(75,214,196,.35); cursor: pointer; }
  .st-body code.st-ref:hover, .st-body code.st-ref:focus-visible { background: rgba(75,214,196,.12); outline: none; }
  .st-note { margin: 18px 0; padding: 12px 16px; border-left: 3px solid var(--infer); background: rgba(244,184,96,.08); border-radius: 0 10px 10px 0; font-size: 14.5px; }
  .st-tbl { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--ink-3); border-radius: 10px; }
  .st-tbl table { border-collapse: collapse; width: 100%; font-size: 13.5px; line-height: 1.45; }
  .st-tbl th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--paper-dim); background: var(--ink-2); }
  .st-tbl th, .st-tbl td { padding: 8px 12px; border-bottom: 1px solid var(--ink-3); vertical-align: top; }
  .st-tbl tr:last-child td { border-bottom: none; }
  .st-end { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 14px; padding-top: 20px; border-top: 1px solid var(--ink-3); }
  .st-end .acct-btn { padding: 10px 18px; }
  .st-pn { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .st-side { position: sticky; top: 16px; display: grid; gap: 12px; max-height: calc(100vh - 32px); overflow-y: auto; min-width: 0; }
  .st-prog { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); padding: 12px 14px; font-size: 12.5px; }
  .st-map { border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); padding: 12px; display: grid; gap: 10px; }
  .st-map-h { display: grid; gap: 2px; font-size: 13px; padding: 0 2px; }
  .st-map-h .dim { font-size: 11.5px; }
  .st-t { border: 1px solid var(--ink-3); border-radius: 10px; background: var(--ink); overflow: hidden; transition: box-shadow .3s; }
  .st-t.focus { border-color: rgba(75,214,196,.55); }
  .st-t.flash { animation: stflash 1.2s ease; }
  @keyframes stflash { 0% { box-shadow: 0 0 0 3px rgba(75,214,196,.7); } 100% { box-shadow: 0 0 0 0 rgba(75,214,196,0); } }
  .st-th { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--ink-3); font-size: 13px; }
  .st-tag { font-family: var(--mono); font-size: 10px; color: var(--fact); }
  .st-c { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 5px 10px; font-size: 12px; border-bottom: 1px dashed rgba(255,255,255,.04); }
  .st-c .mono { overflow-wrap: anywhere; }
  .st-ty { color: var(--paper-dim); font-size: 11px; text-align: right; }
  .st-badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
  .st-badges:empty { display: none; }
  .st-b { font-family: var(--mono); font-size: 10px; border: 1px solid var(--ink-3); border-radius: 999px; padding: 0 6px; color: var(--paper-dim); background: none; line-height: 16px; }
  .st-b.key { color: var(--infer); border-color: rgba(244,184,96,.5); }
  .st-b.link { color: var(--fact); border-color: rgba(75,214,196,.45); cursor: pointer; }
  .st-b.link:hover { background: rgba(75,214,196,.12); }
  .st-ix { padding: 6px 10px; display: grid; gap: 2px; font-size: 10.5px; color: var(--paper-dim); }
  .st-open { width: 100%; }
  .st-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .st-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); padding: 16px 18px; }
  .st-card p { margin: 0; font-size: 13.5px; }
  .st-card .acct-btn { margin-top: auto; align-self: flex-start; padding: 9px 16px; }
  .st-card-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 15px; }
  .st-lvl { font-family: var(--mono); font-size: 10.5px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--ink-3); color: var(--paper-dim); }
  .st-lvl.beginner { color: var(--fact); border-color: rgba(75,214,196,.45); }
  .st-lvl.intermediate { color: var(--infer); border-color: rgba(244,184,96,.45); }
  .st-lvl.advanced { color: #c9a7ff; border-color: rgba(201,167,255,.45); }
  .st-used { color: var(--paper-dim); font-size: 12.5px !important; }
  .st-used .link-btn { padding: 0; color: var(--fact); }
  .st-pg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  .st-pg .team-card { min-width: 0; }
  #ovBody .team-card .hint, #prBody .team-card .hint { font-size: 13.5px; line-height: 1.5; }
  .st-pg .st-n { width: 28px; height: 28px; font-size: 11px; margin-right: 4px; }
  @media (max-width: 1100px) { .st-read { grid-template-columns: minmax(0, 1fr); } .st-side { position: static; max-height: none; overflow: visible; } }
  @media (max-width: 720px) { .st-cards, .st-pg { grid-template-columns: minmax(0, 1fr); } .st-art h1 { font-size: 23px; } .st-body { font-size: 15px; }
    .st-level-p { text-align: left; min-width: 0; width: 100%; } .st-row { grid-template-columns: 38px minmax(0, 1fr); } .st-min { display: none; } }
  .st-lock { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
  .qz-lv { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 14px;
    border: 1px dashed var(--ink-3); border-radius: 10px; font-size: 13px; color: var(--paper-dim); }
  .qz-lv.ok { border-style: solid; border-color: rgba(75,214,196,.45); color: var(--fact); }
  .qz-lv .link-btn { color: var(--fact); padding: 0; }
  .qz-card { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; width: 100%;
    border: 1px solid rgba(75,214,196,.45); border-radius: 12px; padding: 16px 18px; background: rgba(75,214,196,.05); }
  .qz-card p { margin: 4px 0 0; font-size: 14px; color: var(--paper-dim); max-width: 520px; }
  .qz-card.ok { border-color: rgba(75,214,196,.6); }
  .qz-card.locked { border-color: var(--ink-3); background: none; }
  .qz-acts { display: flex; flex-wrap: wrap; gap: 8px; }
  .qz-acts .acct-btn { padding: 10px 18px; }
  .qz { display: grid; gap: 12px; width: 100%; }
  .qz-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
  .qz-head p { margin: 4px 0 0; font-size: 13px; }
  .qz-count { font-size: 13px; color: var(--fact); border: 1px solid rgba(75,214,196,.45); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
  .qz-q { border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); padding: 14px 16px; margin: 0; min-width: 0; }
  .qz-q legend, .qz-l { display: flex; gap: 10px; align-items: baseline; font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 10px; line-height: 1.5; }
  .qz-q legend { float: left; width: 100%; }
  .qz-q legend + .qz-opts { clear: both; }
  .qz-p { min-width: 0; overflow-wrap: anywhere; }
  .qz-q code, .qz-why code { overflow-wrap: anywhere; font-family: var(--mono); font-size: 13px; color: var(--fact); background: var(--ink); border: 1px solid var(--ink-3); border-radius: 5px; padding: 0 5px; }
  .qz-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--ink-3); font-size: 11.5px; color: var(--paper-dim); }
  .qz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qz-o { display: flex; gap: 10px; align-items: center; border: 1px solid var(--ink-3); border-radius: 9px; padding: 9px 12px; background: var(--ink); cursor: pointer; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
  .qz-o:hover { border-color: rgba(75,214,196,.45); }
  .qz-o input { width: auto; accent-color: var(--fact); flex: none; }
  .qz-o.on { border-color: var(--fact); background: rgba(75,214,196,.08); }
  .qz-o:focus-within { outline: 2px solid var(--fact); outline-offset: 1px; }
  .res .qz-o { cursor: default; justify-content: space-between; }
  .qz-o small { font-size: 11px; color: var(--paper-dim); white-space: nowrap; }
  .qz-o.ans { border-color: rgba(75,214,196,.6); background: rgba(75,214,196,.08); }
  .qz-o.ans small { color: var(--fact); }
  .qz-o.bad { border-color: rgba(232,130,90,.6); background: rgba(232,130,90,.08); }
  .qz-o.bad small { color: var(--warn, #e8825a); }
  .qz-q.right .qz-n { color: var(--fact); border-color: rgba(75,214,196,.5); }
  .qz-q.wrong .qz-n { color: var(--warn, #e8825a); border-color: rgba(232,130,90,.5); }
  .qz-why { margin: 10px 0 0; font-size: 13.5px; color: var(--paper-dim); }
  .qz-score { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; border-radius: 12px; padding: 16px 18px; border: 1px solid; }
  .qz-score h3 { margin: 4px 0 2px; font-size: 18px; }
  .qz-score p { margin: 0; font-size: 13px; }
  .qz-score.ok { border-color: rgba(75,214,196,.6); background: rgba(75,214,196,.07); }
  .qz-score.no { border-color: rgba(244,184,96,.55); background: rgba(244,184,96,.07); }
  .qz-state { display: grid; gap: 8px; justify-items: end; }
  .qz-badge { font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--ink-3); border-radius: 999px; padding: 2px 10px; color: var(--paper-dim); }
  .qz-badge.ok { color: var(--fact); border-color: rgba(75,214,196,.5); }
  .qz-badge.open { color: var(--infer); border-color: rgba(244,184,96,.5); }
  #qzRun:not(:empty) { margin-bottom: 20px; }
  @media (max-width: 720px) { .qz-opts { grid-template-columns: minmax(0, 1fr); } .qz-state { justify-items: start; } }
  /* ---- workspaces and modes (docs/specs/modes-and-workspaces.md) ---- */
  body.signed-in .mode-switch { display: none; }
  body:not(.signed-in) .ws-switch { display: none; }
  .ws-switch { position: relative; margin: 0 0 12px; }
  .ws-btn { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--ink); color: var(--paper);
    border: 1px solid var(--ink-3); border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; }
  .ws-btn:hover { border-color: rgba(75,214,196,.5); }
  .ws-btn .ws-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none;
    font-family: var(--mono); font-weight: 700; font-size: 12px; background: rgba(75,214,196,.14); color: var(--fact); }
  .ws-btn .ws-t { min-width: 0; flex: 1; }
  .ws-btn .ws-t b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ws-btn .ws-t small { color: var(--paper-dim); font-size: 11px; font-family: var(--mono); }
  .mode-dev { color: var(--fact); } .mode-study { color: var(--infer); } .mode-ent { color: #9db7ff; }
  .ws-ic.study { background: rgba(244,184,96,.14); color: var(--infer); }
  .ws-ic.enterprise { background: rgba(157,183,255,.14); color: #9db7ff; }
  .ws-menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); background: var(--ink-2); border: 1px solid var(--ink-3);
    border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.35); max-height: 70vh; overflow: auto; }
  .ws-menu[hidden] { display: none; }
  .ws-item { width: 100%; display: flex; gap: 10px; align-items: center; background: transparent; border: 0; color: var(--paper);
    padding: 7px 8px; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; }
  .ws-item:hover, .ws-item.on { background: rgba(255,255,255,.04); }
  .ws-item .ws-t { min-width: 0; flex: 1; } .ws-item .ws-t b { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ws-item .ws-t small { color: var(--paper-dim); font-size: 11px; }
  .ws-new { border-top: 1px dashed var(--ink-3); margin-top: 6px; padding: 8px 4px 2px; display: grid; gap: 8px; }
  .ws-new input { background: var(--ink); color: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 13px; }
  .mode-cards { display: grid; gap: 6px; }
  .mode-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
    cursor: pointer; background: transparent; color: var(--paper); text-align: left; font: inherit; }
  .mode-card input { width: auto; margin-top: 3px; accent-color: var(--fact); }
  .mode-card b { font-size: 13px; display: block; } .mode-card small { color: var(--paper-dim); font-size: 12px; line-height: 1.35; display: block; }
  .mode-card:has(input:checked) { border-color: rgba(75,214,196,.6); background: rgba(75,214,196,.06); }
  .mode-intro { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--ink-2); font-size: 13.5px; }
  .mode-intro.pending { border-color: rgba(157,183,255,.45); background: rgba(157,183,255,.06); }
  .mode-intro .x { margin-left: auto; }
  body.m-study .nav button[data-page=discuss] { display: none; }
  /* ---- plan & billing (docs/specs/billing.md) ---- */
  body:not(.signed-in) .nav button[data-page=billing] { display: none; }
  .plan-badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .4px; border-radius: 999px; padding: 0 7px;
    border: 1px solid rgba(75,214,196,.5); color: var(--fact); white-space: nowrap; }
  .plan-badge.free { border-color: var(--line); color: var(--paper-dim); }
  .plan-badge.trial { border-color: rgba(244,184,96,.55); color: var(--infer); }
  .bill-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; }
  .bill-head .big { font-size: 26px; font-weight: 700; }
  .bill-head .sub { color: var(--paper-dim); font-size: 13.5px; }
  .meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-top: 4px; }
  .meter .top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
  .meter .top span { font-family: var(--mono); color: var(--paper-dim); font-size: 12px; }
  .meter .bar { height: 6px; border-radius: 999px; background: var(--ink); border: 1px solid var(--line); margin-top: 6px; overflow: hidden; }
  .meter .bar i { display: block; height: 100%; background: var(--fact); border-radius: 999px; }
  .meter.near .bar i { background: var(--infer); } .meter.full .bar i { background: var(--warn); }
  .meter.full .top span { color: var(--warn); }
  .checklist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
  .checklist li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
  .checklist li i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); display: inline-grid; place-items: center;
    font-style: normal; font-size: 11px; flex: none; }
  .checklist li.done i { background: var(--fact); border-color: var(--fact); color: var(--ink); }
  .checklist li.done span { color: var(--paper-dim); text-decoration: line-through; }
  .plan-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .seg button { background: transparent; color: var(--paper-dim); border: 0; padding: 5px 12px; font-family: var(--mono); font-size: 12px; cursor: pointer; }
  .seg button.on { background: var(--ink-3); color: var(--paper); }
  .plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .plan-col { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .plan-col.current { border-color: rgba(75,214,196,.6); box-shadow: 0 0 0 1px rgba(75,214,196,.25) inset; }
  .plan-col h3 { margin: 0; font-size: 15px; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
  .plan-col .price { font-family: var(--mono); font-size: 20px; font-weight: 700; }
  .plan-col .price small { font-size: 11.5px; color: var(--paper-dim); font-weight: 400; }
  .plan-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--paper-dim); }
  .plan-col ul li.lock { opacity: .55; }
  .plan-col .acct-btn { margin-top: auto; }
  .plan-limit-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 14px; padding: 10px 14px;
    border: 1px solid rgba(232,130,90,.55); border-radius: 10px; background: rgba(232,130,90,.08); font-size: 13.5px; }
  .plan-limit-bar[hidden] { display: none; }
  .plan-limit-bar button { font-family: var(--mono); font-size: 12px; border-radius: 6px; padding: 5px 10px; cursor: pointer;
    background: var(--fact); color: var(--ink); border: 0; font-weight: 600; }
  .plan-limit-bar button.ghost { background: transparent; color: var(--paper-dim); border: 1px solid var(--line); font-weight: 500; }
  .trial-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
    border: 1px solid rgba(244,184,96,.45); background: rgba(244,184,96,.07); font-size: 13.5px; }
  .trial-strip b { color: var(--infer); }
  .adm-plan select, .adm-plan input { background: var(--ink); color: var(--paper); border: 1px solid var(--line); border-radius: 6px;
    padding: 3px 6px; font-family: var(--mono); font-size: 12px; }
  .adm-plan input[type=number] { width: 64px; }
  @media (max-width: 1000px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .plans { grid-template-columns: minmax(0, 1fr); } }
  .ov-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
  /* ---- Overview as a command centre ---- */
  .ov2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
  .ov2-kpi { position: relative; text-align: left; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 14px; padding: 16px 16px 14px;
    color: var(--paper); cursor: pointer; font: inherit; display: grid; gap: 2px; overflow: hidden; }
  .ov2-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); opacity: .85; }
  .ov2-kpi.a { --c: var(--fact); } .ov2-kpi.b { --c: var(--infer); } .ov2-kpi.c { --c: #6fa8ff; } .ov2-kpi.d { --c: #b48cff; }
  .ov2-kpi:hover { border-color: var(--c); transform: translateY(-1px); transition: .15s; }
  .ov2-kpi .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); margin-bottom: 8px; }
  .ov2-kpi .ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ov2-kpi .n { font-family: var(--mono); font-size: 30px; font-weight: 600; line-height: 1.05; }
  .ov2-kpi .l { font-size: 13.5px; color: var(--paper); } .ov2-kpi small { color: var(--paper-dim); font-size: 12px; overflow-wrap: anywhere; }
  .ov2-next { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 14px; padding: 18px 22px; border-radius: 14px;
    border: 1px solid rgba(75,214,196,.4); background: linear-gradient(120deg, rgba(75,214,196,.12), rgba(75,214,196,.02) 70%), var(--ink-2); }
  .ov2-next .kick { font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fact); }
  .ov2-next h2 { margin: 4px 0 4px; font-size: 19px; } .ov2-next p { margin: 0; color: var(--paper-dim); font-size: 13.5px; max-width: 60ch; line-height: 1.5; }
  .ov2-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
  .ov2-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .ov2-cols .team-card + .team-card { margin-top: 14px; }
  .ov2-feed { display: grid; }
  .ov2-ev { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: start; text-align: left; background: transparent; border: 0;
    border-top: 1px solid var(--ink-3); padding: 11px 2px; color: var(--paper); cursor: pointer; font: inherit; }
  .ov2-ev:first-child { border-top: 0; } .ov2-ev:hover .tx b { color: var(--fact); }
  .ov2-ev .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; } .ov2-ev .dot.chg { background: var(--infer); } .ov2-ev .dot.run { background: var(--fact); }
  .ov2-ev .tx { min-width: 0; font-size: 14px; } .ov2-ev .tx small { display: block; color: var(--paper-dim); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
  .ov2-ev time { color: var(--muted); font-size: 12px; font-family: var(--mono); white-space: nowrap; }
  @media (max-width: 900px) { .ov2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov2-cols { grid-template-columns: 1fr; } }
  .ov-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
  .ov-cols > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .ov-list { display: flex; flex-direction: column; }
  .ov-item { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--ink-3); background: none;
    border-left: none; border-right: none; border-top: none; color: var(--paper); text-align: left; cursor: pointer; font-family: var(--sans);
    font-size: 13.5px; width: 100%; min-width: 0; }
  .ov-item:last-child { border-bottom: none; }
  .ov-item:hover { background: rgba(255,255,255,.02); }
  .ov-item .main-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ov-item small { color: var(--paper-dim); font-size: 12px; white-space: nowrap; }
  @media (max-width: 900px) { .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-cols { grid-template-columns: minmax(0, 1fr); } }
  .room-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 10px; }
  @media (max-width: 640px) { #teamBody .dtable th:nth-child(3), #teamBody .dtable td:nth-child(3) { display: none; } }
  .room-dir .rd { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
  .room-dir .rd small { color: var(--paper-dim); }
  .room-dir .rd button { align-self: flex-start; margin-top: 4px; }
  .tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .tile { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 12px; padding: 12px 14px; }
  .tile b { display: block; font-family: var(--mono); font-size: 26px; line-height: 1.1; color: var(--paper); }
  .tile small { font-size: 12px; color: var(--paper-dim); }
  .charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
  .chart { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 12px; padding: 12px 14px 8px; position: relative; }
  .chart h4 { margin: 0 0 2px; font-size: 13px; color: var(--paper); }
  .chart .sub { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
  .chart svg { width: 100%; height: 130px; display: block; }
  .chart .bar { fill: var(--fact); }
  .chart .hit { fill: transparent; cursor: default; }
  .chart .hit:hover + .bar, .chart .bar.hl { fill: #8de8dc; }
  .chart .axis { stroke: var(--ink-3); stroke-width: 1; }
  .chart .tick { fill: var(--muted); font-family: var(--mono); font-size: 10px; }
  .chart .tip { position: absolute; pointer-events: none; background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px;
    padding: 4px 8px; font-size: 12px; color: var(--paper); white-space: nowrap; display: none; }
  .fb-list .fb { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 10px; padding: 11px 14px; margin-bottom: 8px; }
  .fb-list .fb.new { border-left: 3px solid #f3ead9; }
  .fb-list .fb .top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--paper-dim); }
  .fb-list .fb .kind { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; border: 1px solid var(--ink-3); border-radius: 4px; padding: 1px 6px; }
  .fb-list .fb .kind.pricing { color: #f3ead9; border-color: #f3ead9; }
  .fb-list .fb .msg { white-space: pre-wrap; font-size: 14px; line-height: 1.5; margin: 6px 0 8px; overflow-wrap: anywhere; }
  .fb-list .fb .acts { display: flex; gap: 6px; flex-wrap: wrap; }
  .fb-list .fb .acts button, .fb-list .fb .acts a { background: transparent; border: 1px solid var(--ink-3); color: var(--paper); border-radius: 7px;
    padding: 5px 10px; font-family: var(--mono); font-size: 12px; cursor: pointer; text-decoration: none; }
  .adm-note { font-size: 12.5px; line-height: 1.5; color: var(--paper-dim); margin: 6px 0 10px; }
  @media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .charts { grid-template-columns: minmax(0, 1fr); } }

  /* ---- the live workspace ---- */
  .live-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; background: transparent; }
  .nav-unread { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 700; line-height: 17px;
    min-width: 18px; padding: 0 6px; border-radius: 999px; text-align: center; background: var(--fact); color: var(--ink); }
  .nav-unread.mention { background: var(--infer); }
  .nav-unread[hidden] { display: none; }
  .nav-unread:not([hidden]) + .live-dot { margin-left: 6px; }
  .rb { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 700; line-height: 17px; min-width: 18px;
    padding: 0 6px; border-radius: 999px; text-align: center; background: var(--fact); color: var(--ink); }
  .rb.mention { background: var(--infer); }
  .rb.muted { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 500; }
  .cmsg.mention { border-left: 3px solid var(--infer); }
  .chat-new { display: flex; align-items: center; gap: 10px; margin: 8px 4px; font-family: var(--mono); font-size: 11px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--warn); }
  .chat-new::before, .chat-new::after { content: ""; flex: 1; height: 1px; background: rgba(232,130,90,.45); }
  .chat-tools { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; flex-wrap: wrap; }
  .chat-tools button { font-family: var(--mono); font-size: 11.5px; background: transparent; color: var(--paper-dim);
    border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
  .chat-tools button.on { color: var(--fact); border-color: rgba(75,214,196,.5); }
  .live-dot.on { background: var(--fact); box-shadow: 0 0 0 0 rgba(75,214,196,.6); animation: livepulse 1.8s ease-out infinite; }
  @keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(75,214,196,.55); } 100% { box-shadow: 0 0 0 9px rgba(75,214,196,0); } }
  .lw { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
  .lw-list { display: grid; gap: 8px; }
  .lw-private { font-size: 12px; color: var(--muted); margin: 2px 2px 0; line-height: 1.4; }
  .wcard { text-align: left; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 12px; padding: 12px 14px;
    color: var(--paper); cursor: pointer; font-family: var(--sans); }
  .wcard.on { border-color: var(--fact); background: rgba(75,214,196,.06); }
  .wcard .top { display: flex; align-items: center; gap: 8px; }
  .wcard b { font-family: var(--mono); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wcard small { display: block; margin-top: 4px; font-size: 12px; color: var(--paper-dim); }
  .light { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
  .light.live { background: var(--fact); animation: livepulse 1.8s ease-out infinite; }
  .light.stopped { background: transparent; border: 1.5px solid var(--muted); }
  .lw-main { min-width: 0; }
  .lw-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .lw-head h2 { font-family: var(--mono); font-size: 18px; margin: 0; display: flex; align-items: center; gap: 10px; }
  .lw-main > .meta { font-size: 12.5px; line-height: 1.5; color: var(--paper-dim); }
  .lw-acts { display: flex; flex-wrap: wrap; gap: 6px; }
  .lw-acts button, .since button { background: transparent; border: 1px solid var(--ink-3); color: var(--paper); border-radius: 7px;
    padding: 6px 10px; font-family: var(--mono); font-size: 12px; cursor: pointer; }
  .since { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 14px; font-size: 12.5px; color: var(--paper-dim); }
  .since button.on { border-color: var(--fact); color: var(--fact); }
  .feed { position: relative; padding-left: 22px; }
  .feed::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--ink-3); border-radius: 2px; }
  .ev { position: relative; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 10px; padding: 11px 14px; margin-bottom: 10px; }
  .ev::before { content: ""; position: absolute; left: -21px; top: 15px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--ink); border: 2px solid var(--fact); }
  .ev.baseline::before { border-color: var(--paper-dim); }
  .ev.fresh { animation: evin .5s cubic-bezier(.2,.7,.2,1), evglow 2.4s ease; }
  @keyframes evin { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
  @keyframes evglow { 0% { box-shadow: 0 0 0 2px rgba(75,214,196,.55); } 100% { box-shadow: 0 0 0 2px rgba(75,214,196,0); } }
  .ev .when { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .ev .sum { font-weight: 600; font-size: 14px; margin: 2px 0 6px; }
  .ev .ln { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; padding: 3px 0; line-height: 1.45; }
  .ev .ln .tag { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
    border-radius: 4px; padding: 1px 6px; border: 1px solid; }
  .ev .ln .tag.declared { color: var(--fact); border-color: rgba(75,214,196,.5); }
  .ev .ln .tag.inferred { color: var(--infer); border-color: rgba(244,184,96,.5); }
  .ev code, .setup code { font-family: var(--mono); font-size: 12px; background: var(--ink); padding: 1px 5px; border-radius: 4px; }
  .ev .evacts { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
  .ev .evacts button { background: transparent; border: 1px solid var(--ink-3); color: var(--paper-dim); border-radius: 999px;
    padding: 3px 10px; font-size: 12px; cursor: pointer; }
  .setup { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 12px; padding: 16px 18px; }
  .setup ol { margin: 8px 0 0 18px; display: grid; gap: 10px; font-size: 14px; }
  .setup .cmdf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
  .setup .cmdf input, .setup .cmdf select { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px; padding: 7px 9px;
    color: var(--paper); font-family: var(--mono); font-size: 12px; min-width: 0; }
  .setup pre { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 8px; padding: 10px 12px; font-family: var(--mono);
    font-size: 12px; white-space: pre-wrap; word-break: break-all; color: var(--paper); margin: 0; }
  .setup .shell { display: flex; gap: 6px; margin: 8px 0 6px; }
  .setup .shell button { background: transparent; border: 1px solid var(--ink-3); color: var(--paper-dim); border-radius: 6px; padding: 4px 9px;
    font-family: var(--mono); font-size: 11.5px; cursor: pointer; }
  .setup .shell button.on { border-color: var(--fact); color: var(--fact); }
  @media (max-width: 900px) { .lw { grid-template-columns: minmax(0, 1fr); } .setup .cmdf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* live rooms (team-live spec §5–§6) */
  .lw-tabs { display: flex; gap: 6px; margin: 0 0 16px; border-bottom: 1px solid var(--ink-3); }
  .lw-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--paper-dim); padding: 8px 12px 9px;
    font-family: var(--sans); font-size: 14px; cursor: pointer; margin-bottom: -1px; display: flex; align-items: center; gap: 8px; }
  .lw-tabs button.on { color: var(--paper); border-bottom-color: var(--fact); }
  .lw-tabs .count { font-family: var(--mono); font-size: 11px; background: var(--infer); color: var(--ink); border-radius: 999px; padding: 0 7px; }
  .share-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; font-size: 12.5px; color: var(--paper-dim); }
  .share-line select, .room-form input, .room-cmp select { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px;
    padding: 6px 8px; color: var(--paper); font-family: var(--mono); font-size: 12px; min-width: 0; }
  .share-line button, .room-form button, .room-cmp button, .inv-acts button { background: transparent; border: 1px solid var(--ink-3);
    color: var(--paper); border-radius: 7px; padding: 6px 10px; font-family: var(--mono); font-size: 12px; cursor: pointer; }
  .share-line b { color: var(--fact); font-weight: 600; }
  .wcard.invite { border-style: dashed; border-color: var(--infer); cursor: default; }
  .inv-acts { display: flex; gap: 6px; margin-top: 8px; }
  .inv-acts button.yes { border-color: var(--fact); color: var(--fact); }
  .room-form { display: flex; gap: 6px; }
  /* draft a change (docs/specs/build-together.md §7.1) */
  .draft-in { width: 100%; min-height: 150px; resize: vertical; background: var(--ink); color: var(--paper); border: 1px solid var(--ink-3);
    border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 13px; line-height: 1.5; box-sizing: border-box; }
  .draft-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 4px; }
  .draft-bar select { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px; padding: 7px 9px; color: var(--paper); font-family: var(--mono); }
  .draft-bar button { background: var(--fact); color: var(--ink); border: none; border-radius: 6px; padding: 8px 16px; font-family: var(--mono); font-weight: 700; cursor: pointer; }
  .draft-bar button:disabled { opacity: .5; cursor: wait; }
  .draft-out h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--paper-dim); margin: 18px 0 8px; font-weight: 500; }
  .draft-out .sum { font-size: 16px; color: var(--paper); margin: 14px 0 0; }
  .draft-out ol { margin: 0; padding-left: 22px; font-size: 13.5px; color: var(--paper-dim); }
  .draft-out ol li { margin: 4px 0; }
  .draft-out .dl { display: flex; gap: 10px; align-items: baseline; margin: 6px 0; font-size: 14px; line-height: 1.45; }
  .draft-out .tag { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; padding: 1px 6px;
    border: 1px solid rgba(75,214,196,.5); color: var(--fact); border-radius: 4px; }
  .draft-out .tag.inferred { border-color: rgba(244,184,96,.5); color: var(--infer); }
  .draft-out .tag.care { border-color: rgba(232,130,90,.6); color: var(--warn); }
  .draft-out .warn { color: var(--warn); font-size: 13.5px; margin: 6px 0; }
  .draft-out .muted { color: var(--muted); font-size: 12.5px; }
  .dtag { font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; padding: 1px 6px; margin-right: 8px;
    border: 1px dashed var(--infer); color: var(--infer); border-radius: 4px; vertical-align: middle; }
  .rw-draft { display: block; margin-top: 6px; background: none; border: none; padding: 0; color: var(--fact); font-size: 12px; cursor: pointer; }
  @media (max-width: 640px) { .draft-out .dl { flex-direction: column; gap: 2px; } }
  /* connection cards (docs/specs/build-together.md §6) */
  .ccards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
  .ccard { border: 1px solid var(--ink-3); background: var(--ink-2); border-radius: 10px; padding: 12px; min-width: 0; }
  .cc-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .cc-h b { font-family: var(--mono); font-size: 13.5px; color: var(--paper); overflow-wrap: anywhere; }
  .cc-h small { color: var(--paper-dim); font-size: 12px; }
  .cc-h button { margin-left: auto; background: none; border: 1px solid var(--ink-3); color: var(--paper-dim); border-radius: 5px;
    font-size: 11.5px; padding: 3px 8px; cursor: pointer; }
  .cc-note { font-size: 13px; color: var(--paper-dim); margin: 6px 0 0; overflow-wrap: anywhere; }
  .cc-reach { font-size: 12.5px; color: var(--warn); margin: 6px 0 0; }
  .cc-cmd { display: flex; gap: 6px; align-items: stretch; margin-top: 8px; min-width: 0; }
  .cc-cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: var(--ink); border: 1px solid var(--ink-3);
    border-radius: 6px; padding: 7px 9px; font-size: 12px; }
  .cc-cmd button { flex: none; background: transparent; border: 1px solid var(--ink-3); color: var(--paper); border-radius: 6px;
    padding: 0 10px; font-family: var(--mono); font-size: 11.5px; cursor: pointer; }
  .card-form { margin-bottom: 16px; }
  .card-form summary { cursor: pointer; color: var(--fact); font-size: 13.5px; }
  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
  .card-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--paper-dim); min-width: 0; }
  .card-grid input, .card-grid select { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 6px; padding: 7px 9px;
    color: var(--paper); font-family: var(--mono); font-size: 12.5px; min-width: 0; }
  .card-grid .wide { grid-column: 1 / -1; }
  /* room chat (docs/specs/build-together.md §5) */
  .chat { border: 1px solid var(--ink-3); border-radius: 10px; background: var(--ink-2); padding: 10px; margin-bottom: 16px; }
  /* professional rooms (§5): list · tabs · people */
  .room-lw { grid-template-columns: 250px minmax(0, 1fr) 220px; }
  .room-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ink-3); margin: 6px 0 14px; overflow-x: auto; }
  .room-tabs button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--paper-dim); padding: 9px 12px;
    font-family: var(--sans); font-size: 13.5px; cursor: pointer; white-space: nowrap; }
  .room-tabs button.on { color: var(--paper); border-bottom-color: var(--fact); }
  .room-tabs .rt-people { display: none; }
  .rtab { display: none; } .rtab.on { display: block; }
  .room-people { position: sticky; top: 16px; border-left: 1px solid var(--ink-3); padding-left: 14px; }
  .room-people .members { flex-direction: column; align-items: stretch; }
  .room-people .member { justify-content: flex-start; }
  .room-people .room-form { flex-direction: column; align-items: stretch; }
  .pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); margin-right: 6px; flex: none; }
  .pdot.on { background: var(--fact); box-shadow: 0 0 0 3px rgba(75,214,196,.15); }
  .room-main .chat-list { max-height: none; height: 56vh; min-height: 300px; }
  .typing-line { min-height: 18px; font-size: 12px; color: var(--paper-dim); font-style: italic; padding: 2px 6px; }
  .reply-bar { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--paper-dim); background: var(--ink);
    border-left: 3px solid var(--fact); border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; }
  .reply-bar[hidden] { display: none; }
  .reply-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reply-bar button { background: none; border: none; color: var(--paper-dim); cursor: pointer; font-size: 14px; }
  .cm-quote { display: block; width: 100%; text-align: left; background: rgba(255,255,255,.03); border: none; border-left: 3px solid var(--ink-3);
    border-radius: 4px; padding: 4px 8px; margin: 4px 0; font-size: 12px; color: var(--paper-dim); cursor: pointer; font-family: var(--sans);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cm-quote b { color: var(--paper); font-weight: 600; }
  .cm-reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
  .cm-reacts button { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 999px; padding: 1px 8px; font-size: 12.5px;
    color: var(--paper); cursor: pointer; }
  .cm-reacts button.mine { border-color: rgba(75,214,196,.6); background: rgba(75,214,196,.1); }
  .react-pick { display: inline-flex; gap: 2px; }
  .react-pick[hidden] { display: none; }
  .react-pick button { font-size: 15px !important; }
  .cm-code { background: #0a0f1a; border: 1px solid var(--ink-3); border-radius: 8px; padding: 8px 10px; margin: 6px 0 2px; overflow-x: auto;
    font-family: var(--mono); font-size: 12.5px; line-height: 1.5; white-space: pre; color: #d6e2f0; }
  .cm-code .kw { color: #7fb3ff; font-weight: 600; } .cm-code .str { color: var(--infer); } .cm-code .cmt { color: var(--muted); }
  .cm-code-bar { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--paper-dim); }
  .cm-code-bar button { background: none; border: 1px solid rgba(75,214,196,.5); color: var(--fact); border-radius: 5px; padding: 1px 8px;
    font-family: var(--mono); font-size: 11px; cursor: pointer; }
  .cm-explain { margin-top: 6px; font-size: 13px; white-space: normal; }
  .cm-explain:empty { display: none; }
  .attach-btn { background: none !important; border: 1px solid var(--ink-3) !important; color: var(--paper) !important; font-size: 16px;
    padding: 8px 10px !important; }
  .attach-bar { display: flex; gap: 10px; align-items: center; background: var(--ink); border: 1px solid rgba(244,184,96,.45);
    border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 12.5px; }
  .attach-bar[hidden] { display: none; }
  .attach-bar img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid var(--ink-3); }
  .attach-bar .warn-t { color: var(--infer); }
  .attach-bar button { margin-left: auto; background: none; border: none; color: var(--paper-dim); font-size: 16px; cursor: pointer; }
  .chat.drop { outline: 2px dashed var(--fact); outline-offset: -4px; }
  .cm-img { margin-top: 6px; }
  .cm-img img { display: block; max-width: min(320px, 100%); max-height: 260px; border-radius: 8px; border: 1px solid var(--ink-3);
    cursor: zoom-in; background: var(--ink-3); }
  .cm-img img:not([src]) { width: 160px; height: 100px; }
  .lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(5,8,14,.88); display: grid; place-items: center; cursor: zoom-out; padding: 20px; }
  .lightbox img { max-width: 96vw; max-height: 90vh; border-radius: 8px; }
  .cchange { align-self: stretch; display: flex; gap: 10px; align-items: flex-start; border: 1px dashed rgba(244,184,96,.45); border-radius: 10px;
    padding: 8px 12px; font-size: 13px; background: rgba(244,184,96,.05); }
  .cchange .cc-ic { color: var(--infer); }
  .cchange small { color: var(--paper-dim); }
  .cchange button { background: none; border: none; color: var(--fact); cursor: pointer; font-size: 12px; padding: 0 0 0 6px; }
  @media (max-width: 1200px) { .room-lw { grid-template-columns: 250px minmax(0, 1fr); }
    .room-tabs .rt-people { display: inline-block; }
    .room-people { display: none; position: static; border-left: none; padding-left: 0; grid-column: 2; }
    .room-people.on { display: block; } }
  @media (max-width: 900px) { .room-lw { grid-template-columns: minmax(0, 1fr); } .room-people { grid-column: auto; }
    .room-main .chat-list { height: 50vh; } }
  .chat-list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 8px; }
  .cmsg { max-width: 85%; align-self: flex-start; background: var(--ink); border: 1px solid var(--ink-3); border-radius: 10px; padding: 7px 10px; }
  .cmsg.mine { align-self: flex-end; border-color: rgba(75,214,196,.4); }
  .cm-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; color: var(--paper-dim); }
  .cm-h b { color: var(--paper); font-weight: 600; overflow-wrap: anywhere; }
  .cm-acts { margin-left: auto; display: flex; gap: 6px; }
  .cm-acts button { background: none; border: none; color: var(--muted); font-size: 11.5px; cursor: pointer; padding: 0; }
  .cm-acts button:hover, .cm-acts button:focus-visible { color: var(--paper); }
  .cm-b { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
  .cm-b i { color: var(--muted); }
  .cm-b .tlink { font-family: var(--mono); font-size: 12.5px; background: rgba(75,214,196,.1); border: 1px solid rgba(75,214,196,.45);
    color: var(--fact); border-radius: 4px; padding: 0 4px; cursor: pointer; }
  .chat-form { display: flex; gap: 6px; align-items: flex-end; border-top: 1px solid var(--ink-3); padding-top: 8px; }
  .chat-form textarea { flex: 1; min-width: 0; resize: vertical; min-height: 40px; max-height: 160px; background: var(--ink); color: var(--paper);
    border: 1px solid var(--ink-3); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 14px; }
  .chat-form button { background: var(--fact); color: var(--ink); border: none; border-radius: 6px; padding: 9px 14px;
    font-family: var(--mono); font-weight: 700; cursor: pointer; }
  .chat-form button:disabled { opacity: .5; cursor: wait; }
  .room-form button:disabled { opacity: .5; cursor: wait; }
  .room-msg { font-size: 12.5px; line-height: 1.45; color: var(--warn); margin: 6px 2px 0; max-width: 440px; }
  .room-msg:empty { display: none; }
  .room-form input { flex: 1; }
  .members { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
  .member { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ink-3); border-radius: 999px; padding: 3px 10px;
    font-size: 12.5px; color: var(--paper); background: var(--ink-2); }
  .member small { color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
  .member button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 0 0 2px; }
  .rwatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 6px 0 14px; }
  .rwatch { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 10px; padding: 10px 12px; min-width: 0; }
  .rwatch .top { display: flex; align-items: center; gap: 8px; }
  .rwatch b { font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rwatch small { display: block; margin-top: 3px; font-size: 12px; color: var(--paper-dim); overflow-wrap: anywhere; }
  .room-cmp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 12.5px; color: var(--paper-dim); }
  .room-cmp select { max-width: 220px; }
  #rmCmp .ev::before { display: none; }
  .ev .seen { font-size: 12px; color: var(--paper-dim); margin: -2px 0 6px; }
  .ev .seen code { font-size: 11.5px; }
  .setup .hint, .lw-main > .hint { font-size: 13px; color: var(--paper-dim); line-height: 1.5; }
  .room-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 6px 0 4px; font-family: var(--mono); }

  /* ---- the discussion screen ---- */
  .disc { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
  .disc-side { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 14px; padding: 16px; position: sticky; top: 12px;
    max-height: calc(100vh - 24px); overflow-y: auto; }
  .side-h { font-size: 15px; margin-bottom: 10px; }
  .intents { display: grid; gap: 6px; margin-bottom: 14px; }
  .intent { text-align: left; background: var(--ink); border: 1px solid var(--ink-3); color: var(--paper); border-radius: 9px;
    padding: 9px 11px; cursor: pointer; font-family: var(--sans); transition: border-color .15s, background .15s; }
  .intent b { font-size: 13.5px; font-weight: 600; display: block; }
  .intent small { font-size: 12px; color: var(--paper-dim); }
  .intent:hover { border-color: var(--paper-dim); }
  .intent.on { border-color: var(--fact); background: rgba(75,214,196,.07); }
  #discView { transition: opacity .15s; }
  .iv { animation: rise .3s ease; }
  .iv-q { font-family: var(--mono); font-size: 11px; letter-spacing: .5px; color: var(--fact); text-transform: uppercase; margin-bottom: 6px; }
  .iv .tk { grid-template-columns: 62px minmax(0, 1fr); font-size: 13.5px; }
  .iv-sec { margin-top: 12px; }
  .iv-sec h5 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 6px; }
  .iv-sec h5 small { color: var(--muted); margin-left: 4px; }
  .iv-items .li { font-size: 13px; padding: 5px 0; border-bottom: 1px solid rgba(27,51,80,.6); color: var(--paper); }
  .iv-items .li small { color: var(--paper-dim); }
  .iv-items span, .iv-items.chipset span { display: inline-block; font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--ink-3);
    border-radius: 999px; padding: 1px 8px; margin: 2px 4px 2px 0; }
  .iv-items code { font-family: var(--mono); font-size: 12px; background: var(--ink); padding: 1px 5px; border-radius: 4px; }
  .iv-items .step.new code { color: #cdb3f0; }
  .iv-items .newtag { color: #cdb3f0 !important; }
  .iv-items .why { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .sas-card { margin-top: 16px; border: 1px dashed rgba(180,140,224,.6); border-radius: 12px; padding: 13px 14px;
    background: linear-gradient(135deg, rgba(180,140,224,.10), rgba(75,214,196,.04)); }
  .sas-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .sas-badge { font-family: var(--mono); font-weight: 800; font-size: 12px; color: var(--ink); background: #b48ce0; border-radius: 5px; padding: 2px 8px; }
  .sas-status { font-family: var(--mono); font-size: 10.5px; color: var(--paper-dim); }
  .sas-card b { font-size: 13.5px; display: block; }
  .sas-card p { font-size: 12.5px; color: var(--paper-dim); margin: 6px 0 10px; }
  .sas-card button { width: 100%; background: transparent; border: 1px solid rgba(180,140,224,.6); color: #cdb3f0; border-radius: 8px;
    padding: 8px; font-family: var(--mono); font-size: 12px; cursor: not-allowed; }
  .disc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
  .disc-acts button { background: transparent; border: 1px solid var(--ink-3); color: var(--paper); border-radius: 7px; padding: 7px 11px;
    font-family: var(--mono); font-size: 12px; cursor: pointer; }
  .disc-acts button:first-child { background: var(--fact); color: var(--ink); border-color: var(--fact); font-weight: 700; }
  .pair-head .abk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--fact);
    color: var(--ink); font-weight: 800; font-size: 11px; margin-right: 8px; }
  .pair-head .abk.b { background: #b48ce0; }
  .omap svg { width: 100%; height: auto; display: block; }
  .omap .ohead { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; fill: var(--paper-dim); text-transform: uppercase; }
  .omap .obox rect { fill: var(--ink-2); stroke: var(--ink-3); stroke-width: 1.2; transition: stroke .2s, fill .2s; }
  .omap .obox.a rect { stroke: rgba(75,214,196,.55); } .omap .obox.b rect { stroke: rgba(180,140,224,.6); }
  .omap .obox.alone rect { stroke-dasharray: 4 3; fill: var(--ink); }
  .omap .obox text { font-family: var(--mono); font-size: 12.5px; fill: var(--paper); }
  .omap .obox.hl rect { stroke: var(--infer); stroke-width: 2.2; fill: rgba(244,184,96,.10); }
  .omap .obox.askhl rect { stroke: var(--fact); stroke-width: 2.6; fill: rgba(75,214,196,.14); }
  .omap .obox.askhl { animation: askpulse 1.2s ease 2; }
  @keyframes askpulse { 50% { transform: scale(1.04); } }
  /* ask about both: the same honest answer card, with A / B side chips */
  .pask .ask-row input { font-size: 13.5px; }
  .pask .sides { margin: 8px 0 2px; font-size: 12px; line-height: 1.5; color: var(--paper-dim); }
  .pask .sides b { color: var(--paper); font-weight: 600; }
  .ask-card .sas-mini { margin-top: 10px; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--paper-dim);
    border: 1px dashed rgba(180,140,224,.6); border-radius: 8px; padding: 7px 10px; }
  .ask-card .sas-mini .sas-badge { font-size: 10.5px; }
  .omap .obox { animation: mcpop .4s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 40ms); transform-box: fill-box; transform-origin: center; }
  .oline { fill: none; stroke-width: 1.8; }
  .oline.declared { stroke: var(--fact); stroke-dasharray: 1; stroke-dashoffset: 1; animation: mdraw .8s ease forwards; animation-delay: calc(var(--i) * 40ms + 200ms); }
  .oline.same_concept { stroke: #2fae9f; }
  .oline.inferred { stroke: var(--infer); stroke-dasharray: 7 5; animation: mfade .7s ease both; animation-delay: calc(var(--i) * 40ms + 200ms); }
  .omap .okind { font-family: var(--mono); font-size: 9.5px; fill: var(--paper-dim); }
  @media (max-width: 1100px) { .disc { grid-template-columns: minmax(0, 1fr); } .disc-side { position: static; max-height: none; } }

  @media (prefers-reduced-motion: reduce) {
    .slide, .rv, .hub .spoke, .hub .node, #out.show { animation: none !important; opacity: 1; stroke-dashoffset: 0; }
    .links .bar i, .deck-progress i { transition: none; }
    .ask-card.reveal > * { opacity: 1 !important; }
    .brain .flow, .brain .neu, .bench *, .omap .obox, .oline, .ask-card.reveal *, .layers li.active .dot, .mc.pop, .ml.draw, .mspark, .page.on, .drawer, .roles-bars .track i { animation: none !important; transition: none !important; }
  }
  @media (max-width: 900px) {
    .app, .app.collapsed, .app.rail { grid-template-columns: minmax(0, 1fr); }
    .app.rail .side-inner { width: 290px; padding: 20px 18px 40px; align-items: stretch; }
    .rail-btn { display: none; }
    .drawer-close { display: inline-block; }
    .bottom-bar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
      background: var(--ink-2); border-top: 1px solid var(--ink-3); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
    .bottom-bar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none;
      color: var(--paper-dim); font-size: 10.5px; font-family: var(--sans); cursor: pointer; padding: 4px 0; }
    .bottom-bar button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
    .bottom-bar button.on { color: var(--fact); }
    .bb-count { position: absolute; top: 0; left: 55%; font-style: normal; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
      background: var(--fact); color: var(--ink); border-radius: 999px; padding: 0 5px; line-height: 15px; }
    .bb-count[hidden] { display: none; }
    body:not(.gated) .main { padding-bottom: 84px; }
    .side { position: fixed; z-index: 20; left: 0; top: 0; width: 290px; box-shadow: 0 0 40px rgba(0,0,0,.5);
      transform: translateX(0); transition: transform .25s ease; }
    .app.collapsed .side { transform: translateX(-100%); visibility: visible; }
    .main { padding: 0 16px 60px; }
    .drawer, .app.collapsed ~ .drawer { left: 0; width: 100vw; }
    .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .map-shell { grid-template-columns: minmax(0, 1fr); }
    .map-stage { height: 62vh; }
    .map-panel { max-height: none; }
    .map-legend { left: 6px; right: 54px; bottom: 6px; gap: 4px 10px; font-size: 9.5px; padding: 5px 8px; }
    .twin { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 680px) {
    .grid-form, .drawer .grid-form { grid-template-columns: 1fr; }
    .ledger { grid-template-columns: repeat(2, 1fr); }
    .result-head { flex-wrap: wrap; gap: 12px; }
    .deck-stage { padding: 24px 18px 20px; min-height: 0; }
    .slide h2 { font-size: 24px; }
    .slide .lead { font-size: 16px; }
    .legend, .stats { grid-template-columns: 1fr; }
    .links .row { grid-template-columns: 1fr; gap: 6px; }
  }

  /* ── light mode: the few places that were written for a dark ground ── */
  :root[data-theme="light"] .mode-ent, :root[data-theme="light"] .ws-ic.enterprise { color: #3c58b8; }
  :root[data-theme="light"] .ws-ic.enterprise { background: rgba(60,88,184,.1); }
  :root[data-theme="light"] .st-lvl.advanced, :root[data-theme="light"] .sas-card button,
  :root[data-theme="light"] .iv-items .step.new code, :root[data-theme="light"] .iv-items .newtag { color: #6a3fb4 !important; }
  :root[data-theme="light"] .kbadge.same_concept { color: #0a7a6c; }
  :root[data-theme="light"] .mspark.declared { stroke: #0a8f7e; }
  :root[data-theme="light"] .mspark.inferred { stroke: #b36b00; }
  :root[data-theme="light"] .chart .hit:hover + .bar, :root[data-theme="light"] .chart .bar.hl { fill: #0a8f7e; }
  :root[data-theme="light"] .tf-qr { border: 1px solid var(--ink-3); }
  :root[data-theme="light"] .ws-ic.development { color: #066457; }
  :root[data-theme="light"] #solaBtn { color: #fff; }
  .alert-row { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ink-3); }
  .alert-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 6px 0; }
  .alert-form input, .alert-form select { padding: 8px 10px; font-size: 14px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink-3); border-radius: 8px; }

/* Low-data mode (assets/lowdata.js): no decorative motion, no typing line, no drop shadow on the big logo */
html[data-lowdata="on"] *, html[data-lowdata="on"] *::before, html[data-lowdata="on"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-lowdata="on"] .hero-logo { filter: none; }

/* Phones and touch screens (backlog A11): the Academy pages. A thumb needs a 44 px target, and a text field under 16 px makes iOS zoom the page. */
@media (max-width: 640px), (pointer: coarse) {
  #clBody .acct-btn, #clBody .cl-form select, #clBody .cl-form input:not([type="checkbox"]):not([type="radio"]), #clBody .cl-input, #clBody .cl-pos { min-height: 44px; }
  #clBody .acts input:not([type="checkbox"]):not([type="radio"]), #clBody .cl-opt select, #clBody .cl-opt input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
  #clBody .cl-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }
  #clBody input:not([type="checkbox"]):not([type="radio"]), #clBody select, #clBody textarea { font-size: 16px; }
  #clBody .cl-opt { min-height: 44px; }
  #clBody .cl-opt input[type="checkbox"], #clBody .cl-opt input[type="radio"] { width: 22px; height: 22px; flex: none; }
  #clBody .cl-form { gap: 8px; }
  #clBody .cl-form > input:not([type="checkbox"]):not([type="radio"]), #clBody .cl-form > select { flex: 1 1 100%; }
}

  /* A14: where the keyboard is, always visible: a ring on every control, whatever else the control does on focus */
  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--fact); outline-offset: 2px; }
  input[type=date]:focus-within, input[type=datetime-local]:focus-within, input[type=time]:focus-within { outline: 2px solid var(--fact); outline-offset: 2px; }

  /* Governance (E1) */
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gov-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .gov-tbl th, .gov-tbl td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--ink-3); }
  .gov-tbl th { color: var(--paper-dim); font-weight: 600; }

  /* ===== App Simulation canvas as an entity-relationship view (UI2) ===== */
  .cv-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
  .cv-btn { font: inherit; font-size: 15px; line-height: 1; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ink-3); background: var(--ink-2); color: var(--paper); cursor: pointer; }
  .cv-btn.wide { font-size: 13px; } .cv-btn:hover { border-color: var(--fact); }
  .cv-zl { min-width: 46px; text-align: center; font-family: var(--mono); font-size: 12.5px; color: var(--paper-dim); }
  .cv-sel, .cv-search { font: inherit; font-size: 13px; height: 34px; border-radius: 8px; border: 1px solid var(--ink-3); background: var(--ink-2); color: var(--paper); padding: 0 10px; }
  .cv-search { flex: 1 1 200px; min-width: 160px; max-width: 360px; margin-left: auto; }
  .cv-stage { position: relative; height: min(72vh, 760px); min-height: 460px; overflow: hidden; border: 1px solid var(--ink-3); border-radius: 12px; background: var(--ink); cursor: grab; touch-action: none; }
  .cv-stage.panning { cursor: grabbing; }
  .cv-stage svg#cvSvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .cv-stage .dot { fill: var(--ink-3); }
  .cv-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--paper-dim); font-size: 13.5px; pointer-events: none; }
  .cvn { cursor: pointer; } .cvn .card { fill: var(--ink-2); stroke: var(--ink-3); stroke-width: 1.2; } .cvn .hd { fill: var(--head); }
  .cvn .ac { fill: var(--fact); } .cvn.k-api .ac { fill: #b794f6; } .cvn.k-service .ac { fill: #6fb1ff; }
  .cvn .tt { fill: var(--paper); font: 600 12.5px var(--mono); }
  .cvn .nm { fill: var(--paper); font: 11.5px var(--mono); } .cvn .ty { fill: var(--muted); font: 10.5px var(--mono); }
  .cvn .bd { font: 700 8.5px var(--mono); } .cvn .bd.pk { fill: var(--infer); } .cvn .bd.fk { fill: var(--fact); }
  .cvn .more { fill: var(--muted); font: 10.5px var(--sans); }
  .cvn .row.pk .nm { font-weight: 700; }
  .cvn:hover .card { stroke: var(--paper-dim); }
  .cvn.sel .card, .cvn.from .card { stroke: var(--paper); stroke-width: 2.4; } .cvn.stale .card { stroke: var(--infer); stroke-width: 2; }
  .cvn.hit .card { stroke: var(--fact); stroke-width: 2.4; } .cvn.dim { opacity: .3; }
  .cvn:focus-visible { outline: none; } .cvn:focus-visible .card { stroke: var(--fact); stroke-width: 3; }
  .rel path, .rel line { fill: none; stroke-width: 1.6; } .rel.declared path { stroke: var(--fact); } .rel.inferred path { stroke: var(--infer); stroke-dasharray: 6 5; }
  .rel.conn line { stroke: var(--paper-dim); stroke-dasharray: 2 5; stroke-width: 2; }
  .rel .card-n { fill: var(--paper-dim); font: 600 10.5px var(--mono); } .rel.on path { stroke-width: 2.6; } .rel.dim { opacity: .25; }
  .cv-mini { position: absolute; right: 10px; bottom: 10px; width: 170px; height: 116px; border: 1px solid var(--ink-3); border-radius: 8px; background: var(--veil); cursor: pointer; overflow: hidden; }
  .cv-mini svg { width: 100%; height: 100%; display: block; } .cv-mini .n { fill: var(--ink-3); stroke: var(--paper-dim); stroke-width: 6; } .cv-mini .n.sel { fill: var(--fact); }
  .cv-mini .vp { fill: color-mix(in srgb, var(--fact) 12%, transparent); stroke: var(--fact); stroke-width: 8; }
  @media (max-width: 700px) { .cv-mini { width: 120px; height: 84px; } .cv-search { margin-left: 0; max-width: none; } }
  /* ===== The Overview as a monitoring dashboard (UI1) ===== */
  .ov3 { display: grid; gap: 14px; margin: 0 0 14px; }
  .ov3-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .ov3-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ink-3); background: var(--ink-2); font-size: 13px; }
  .ov3-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
  .ov3-status.ok .dot { background: var(--fact); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fact) 25%, transparent); }
  .ov3-status.warn .dot { background: var(--infer); box-shadow: 0 0 0 3px color-mix(in srgb, var(--infer) 25%, transparent); }
  .ov3-sel select, .ov3-thead select, .ov3-thead input { font: inherit; font-size: 13px; color: var(--paper); background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 8px; padding: 7px 10px; }
  .ov3-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .ov3-card { position: relative; display: grid; gap: 2px; text-align: left; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 14px; padding: 14px 16px 12px 16px; color: var(--paper); cursor: pointer; font: inherit; }
  .ov3-card.a { --c: var(--fact); } .ov3-card.b { --c: var(--infer); } .ov3-card.c { --c: #6fa8ff; } .ov3-card.d { --c: #b48cff; }
  .ov3-card:hover { border-color: var(--c); }
  .ov3-card .ico { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
  .ov3-card .ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ov3-card .l { font-size: 12.5px; color: var(--paper-dim); } .ov3-card .n { font-family: var(--mono); font-size: 30px; font-weight: 600; line-height: 1.1; }
  .ov3-card .s { font-size: 12.5px; color: var(--paper-dim); }
  .ov3-delta { font-family: var(--mono); font-size: 12px; } .ov3-delta small { font-family: var(--sans); color: var(--paper-dim); font-size: 12px; }
  .ov3-delta.up, .ov3-delta.down { color: var(--infer); } .ov3-delta.same { color: var(--paper-dim); font-family: var(--sans); }
  .ov3-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .ov3-panel { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 14px; padding: 16px 18px; min-width: 0; }
  .ov3-panel h2 { font-size: 14.5px; margin: 0 0 12px; font-weight: 600; } .ov3-panel h2 small { color: var(--paper-dim); font-weight: 400; font-size: 12.5px; }
  .ov3-chart { position: relative; }
  .ov3-chart svg { width: 100%; height: auto; display: block; touch-action: none; }
  .ov3-chart .gl { stroke: var(--rowline); stroke-width: 1; } .ov3-chart .yt, .ov3-chart .xt { fill: var(--muted); font-size: 10.5px; font-family: var(--mono); }
  .ov3-chart .ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
  .ov3-chart .ln.chg { stroke: var(--fact); } .ov3-chart .ln.rd { stroke: var(--infer); stroke-dasharray: 5 4; stroke-width: 1.8; }
  .ov3-chart .hov line { stroke: var(--paper-dim); stroke-width: 1; stroke-dasharray: 3 3; }
  .ov3-chart .dc { fill: var(--fact); stroke: var(--ink-2); stroke-width: 2; } .ov3-chart .dr { fill: var(--infer); stroke: var(--ink-2); stroke-width: 2; }
  .ov3-tip { position: absolute; top: 0; pointer-events: none; background: var(--ink); color: var(--paper); border: 1px solid var(--ink-3); border-radius: 8px; padding: 5px 9px; font-size: 12px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
  .ov3-tip[hidden] { display: none; }
  .ov3-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--paper-dim); font-size: 13px; pointer-events: none; }
  .ov3-legend { display: flex; gap: 16px; margin-top: 6px; font-size: 12.5px; color: var(--paper-dim); }
  .ov3-legend .k::before { content: ""; display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--fact); vertical-align: middle; margin-right: 6px; }
  .ov3-legend .k.rd::before { border-top: 2px dashed var(--infer); }
  .ov3-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ov3-gauge { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; }
  .ov3-gauge svg { width: 88px; height: 88px; } .ov3-gauge circle { fill: none; stroke-width: 9; }
  .ov3-gauge .tr { stroke: var(--rowline); } .ov3-gauge .vl { stroke-linecap: round; }
  .ov3-gauge .vl.ok { stroke: var(--fact); } .ov3-gauge .vl.mid { stroke: var(--infer); } .ov3-gauge .vl.low { stroke: var(--warn); }
  .ov3-gauge .pc { position: absolute; top: 30px; font-family: var(--mono); font-size: 17px; font-weight: 600; } .ov3-gauge .pc.dim { color: var(--muted); }
  .ov3-gauge b { font-size: 12.5px; margin-top: 2px; } .ov3-gauge small { font-size: 11.5px; color: var(--paper-dim); }
  .ov3-insight { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--ink); border: 1px solid var(--ink-3); }
  .ov3-insight b { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--fact); } .ov3-insight p { margin: 4px 0 6px; font-size: 13.5px; line-height: 1.5; }
  .ov3-insight small { color: var(--paper-dim); font-size: 11.5px; }
  .ov3-panel.wide { padding-bottom: 6px; }
  .ov3-thead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .ov3-thead h2 { margin: 0 auto 0 0; }
  .ov3-thead input { min-width: 200px; }
  .ov3-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .ov3-table th, .ov3-table td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--rowline); vertical-align: middle; }
  .ov3-table thead th { border-top: 0; color: var(--paper-dim); font-size: 12px; font-weight: 600; }
  .ov3-table tbody th { font-weight: 400; } .ov3-table tbody th b { display: block; } .ov3-table tbody th small { color: var(--paper-dim); font-size: 12px; }
  .ov3-table .mono { font-family: var(--mono); } .ov3-table .dim { color: var(--paper-dim); } .ov3-none { text-align: center; color: var(--paper-dim); padding: 22px 12px; }
  .ov3-pill { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 12px; border: 1px solid var(--ink-3); color: var(--paper-dim); }
  .ov3-pill.ok { color: var(--fact); border-color: color-mix(in srgb, var(--fact) 45%, transparent); background: color-mix(in srgb, var(--fact) 12%, transparent); }
  .ov3-pill.warn { color: var(--infer); border-color: color-mix(in srgb, var(--infer) 45%, transparent); background: color-mix(in srgb, var(--infer) 12%, transparent); }
  .ov3-act { font: inherit; font-size: 12.5px; color: var(--fact); background: transparent; border: 1px solid var(--ink-3); border-radius: 8px; padding: 5px 12px; cursor: pointer; }
  .ov3-act:hover { border-color: var(--fact); }
  @media (max-width: 900px) { .ov3-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov3-grid { grid-template-columns: 1fr; } }
  @media (max-width: 520px) { .ov3-gauges { grid-template-columns: 1fr; } .ov3-thead input { min-width: 0; flex: 1 1 140px; } }


/* Plan & billing stays out of sight until SSDO_BILLING_PUBLIC is on (the server tells the console in /v1/auth/me) */
.no-billing .bill-only { display: none !important; }

/* The trust note (every load) and the sample databases card on the Overview */
.trust-back { z-index: 90; }
.trust-modal { max-width: 520px; }
.trust-shield { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px;
  background: color-mix(in srgb, var(--fact) 16%, transparent); }
.trust-shield svg { width: 28px; height: 28px; fill: none; stroke: var(--fact); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust-lead { font-size: 15px !important; color: var(--paper) !important; }
.trust-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.trust-list li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--ink-3); border-radius: 8px; background: var(--ink); }
.trust-list b { font-size: 14px; color: var(--paper); }
.trust-list span { font-size: 13px; color: var(--paper-dim); }
.trust-try { font-size: 13px !important; }
.trust-row { gap: 8px; flex-wrap: wrap; }
.smp { margin: 18px 0; }
.smp-head h2 { font-size: 20px; margin: 4px 0 6px; }
.smp-head p { color: var(--paper-dim); font-size: 14px; max-width: 70ch; margin-bottom: 12px; }
.smp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.smp-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--ink-3); border-radius: 12px; background: var(--ink-2); }
.smp-card h3 { font-size: 16px; }
.smp-card p { font-size: 13px; color: var(--paper-dim); }
.smp-card small { color: var(--paper-dim); font-family: var(--mono); font-size: 11.5px; }
.smp-try { margin: 4px 0 8px 16px; padding: 0; color: var(--paper-dim); font-size: 12.5px; flex: 1; }
.smp-card .acct-btn { align-self: flex-start; }
.cl-code-block { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; margin: 8px 0 12px; }

/* Academy profile card and the lecturer's view of it */
.prf-grid { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 8px 12px; align-items: center; margin: 8px 0; }
.prf-grid label { font-size: 13px; color: var(--paper-dim); }
.prf-grid textarea.cl-input { resize: vertical; }
.prf-check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; margin: 6px 0; }
.prf-line { font-size: 13px; color: var(--paper-dim); margin: 2px 0 6px; }
.prf-line b { color: var(--paper); }
@media (max-width: 640px) { .prf-grid { grid-template-columns: 1fr; } }

<<<<<<< HEAD
/* The question bank panel in the task editor */
.bnk { border: 1px solid var(--ink-3); border-radius: 10px; padding: 12px 14px; margin: 12px 0; background: var(--ink); }
.bnk-head { display: flex; justify-content: space-between; align-items: center; }
.bnk-head h3 { font-size: 15px; }
.bnk-tabs { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.bnk-tabs button { background: transparent; border: 1px solid var(--ink-3); color: var(--paper-dim); border-radius: 99px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.bnk-tabs button.on { border-color: var(--fact); color: var(--fact); }
.bnk-item { border-top: 1px solid var(--ink-3); padding: 8px 0; }
.bnk-prompt { font-size: 14px; }
.bnk-save { border-top: 1px solid var(--ink-3); margin-top: 10px; padding-top: 10px; }
=======
/* The demo connection on the Connect form, and the note after a demo read */
.demo-box { border: 1px dashed var(--fact); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; background: color-mix(in srgb, var(--fact) 6%, transparent); }
.demo-box:empty { display: none; }
.demo-box h3 { font-size: 15px; margin-bottom: 4px; }
.demo-box p, .demo-box small { color: var(--paper-dim); font-size: 13px; display: block; margin: 4px 0 8px; }
.demo-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 10px; font-size: 13.5px; }
.demo-kv dt { color: var(--paper-dim); }
.demo-kv code { font-family: var(--mono); }
.demo-banner { border: 1px solid var(--fact); border-left-width: 4px; border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; font-size: 13.5px; background: color-mix(in srgb, var(--fact) 8%, transparent); }
>>>>>>> origin/main
.demo-next { margin-top: 8px; font-size: 13.5px; }
.demo-next ol { margin: 4px 0 0 18px; padding: 0; color: var(--paper-dim); }
.demo-next li { margin: 3px 0; }

/* The explainer beside the Connect form */
.conn-explain { border: 1px solid var(--ink-3); border-radius: 8px; padding: 8px 12px; margin: 10px 0; font-size: 13px; color: var(--paper-dim); }
.conn-explain summary { cursor: pointer; color: var(--paper); font-weight: 600; }
.conn-explain summary:focus-visible { outline: 2px solid var(--fact); outline-offset: 2px; }
.conn-explain ol { margin: 8px 0 2px 18px; padding: 0; }
.conn-explain li { margin: 5px 0; }
.conn-explain code { font-size: 12px; word-break: break-all; }

/* Phone width: wide tables scroll inside themselves and selects never push the page sideways. */
@media (max-width: 640px) {
  table.dtable, .ov3-table { display: block; overflow-x: auto; max-width: 100%; }
  main select, .page select { max-width: 100%; }
}

/* Lecturer terms pop-up (Classes) */
.cl-terms-modal { max-width: 560px; max-height: 90vh; overflow-y: auto; }
.cl-terms { margin: 8px 0 12px 18px; padding: 0; font-size: 13.5px; color: var(--paper-dim); }
.cl-terms li { margin: 5px 0; }
.cl-form-col { display: grid; gap: 8px; margin-bottom: 8px; }
.cl-agree { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }

/* Front page: a first step for someone who has never used a database tool */
.fr-start { margin-top: 18px; max-width: 560px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-2); font-size: 14px; }
.fr-start ol { margin: 6px 0 0; padding-left: 20px; color: var(--paper-dim); }
.fr-start li { margin: 4px 0; }
.fr-start a { color: var(--fact); font-weight: 600; }
:root[data-theme="light"] .fr-start a { color: #0a6b5d; }