* { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #F5F7FA;
    --surface: #FFFFFF;
    --ink: #172B4D;
    --ink-muted: #6B778C;
    --ink-soft: #8C98A8;
    --line: #DFE3EA;
    --line-soft: #EDF0F5;
    --accent: #6B655C;
    --shadow-sm: 0 1px 2px rgba(23,43,77,.08);
    --shadow-md: 0 4px 14px rgba(23,43,77,.08);

    /* ── Status semantic (3-level + neutral) ─────────────────────── */
    --status-green-bg:   #DEE7DF;  --status-green-ink:   #2F5233;
    --status-amber-bg:   #F5E8D0;  --status-amber-ink:   #8E5C0E;
    --status-red-bg:     #F3E4E6;  --status-red-ink:     #8B2635;
    --status-neutral-bg: #E8E1D2;  --status-neutral-ink: #6B655C;

    /* ── Design phase (distinct teal — project lifecycle only) ────── */
    --status-design-bg:  #DEEAEC;  --status-design-ink:  #1E6E7A;

    /* ── Task statuses ────────────────────────────────────────────── */
    --task-progress-bg: #DBEAFE;  --task-progress-ink: #1D4ED8;
    --task-review-bg:   #FEF3C7;  --task-review-ink:   #92400E;
    --task-blocked-bg:  #FEE2E2;  --task-blocked-ink:  #991B1B;
    --task-done-bg:     #D1FAE5;  --task-done-ink:     #065F46;
    --task-cancelled-bg:#F3F4F6;  --task-cancelled-ink:#9CA3AF;
    --task-draft-bg:    #EEF2FF;  --task-draft-ink:    #4338CA;

    /* ── Avatars ──────────────────────────────────────────────────── */
    --avatar-unit-bg:   #D4EDE2;  --avatar-unit-ink:   #1B6B4A;
    --avatar-person-bg: #ECEAE7;  --avatar-person-ink: #6B6560;

    /* ── Interactive states ───────────────────────────────────────── */
    --hover:  #F0F4FA;
    --active: #E4ECF7;
    --danger: #8B2635;

    /* ── Focus ring (used as box-shadow value) ────────────────────── */
    --focus-ring: 0 0 0 2px rgba(107,101,92,.40);

    /* ── Special ──────────────────────────────────────────────────── */
    --highlight-bg: #FFF3B0;
    --bg-glass: rgba(245, 247, 250, 0.92);

    /* ── Typography scale ─────────────────────────────────────────── */
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-xl:   20px;
    --text-2xl:  40px;

    /* ── Spacing grid (4/8/16/24/32/48) ──────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;

    /* ── Radius scale ─────────────────────────────────────────────── */
    --radius-sm:  4px;   /* chips, tags, small badges */
    --radius-md:  8px;   /* cards, dropdowns */
    --radius-lg: 12px;   /* modals, large panels */
  }

  body {
    font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    font-size: 15px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
  }

  .mono { font-family: "Geist Mono", ui-monospace, monospace; }

  /* ===== Top ===== */
  .doc-top {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(12px);
    background: var(--bg-glass);
  }
  .doc-top-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 40px;
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .doc-mark {
    font-family: "Fraunces", serif;
    font-weight: 500;
    font-size: 20px;
    font-variation-settings: "opsz" 24, "SOFT" 0;
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
  }
  .doc-mark em {
    font-style: italic;
    font-weight: 400;
    color: var(--ink-muted);
  }
  .doc-meta {
    color: var(--ink-soft);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: auto;
    display: flex; gap: 18px;
  }
  .doc-meta b { color: var(--ink); font-weight: 500; }
  .doc-actions {
    display: flex;
    gap: 4px;
    margin-left: 20px;
  }
  .ghost-btn {
    font-family: inherit;
    font-size: var(--text-sm);
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-muted);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.12s;
    letter-spacing: 0.02em;
  }
  .ghost-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
  }