html:has(.friends-page) { --friends-bg: #f7f8f0; color-scheme: light; }
html[data-mode="dark"]:has(.friends-page) { --friends-bg: #0d1117; color-scheme: dark; }
body:has(.friends-page) { background: var(--friends-bg); }
.friends-page {
  --bg: var(--friends-bg);
  --c-bg: var(--bg);
  --c-text: var(--ink);
  --c-text-muted: var(--muted);
  --c-text-dim: var(--muted);
  --c-border: var(--rule);
}
html[data-mode="dark"] .friends-page {
  --paper: #161e23; --ink: #e6edf3; --muted: #a7b2b6; --rule: #354149;
  --sage: #a8c496; --wash: #23322c; --wood: #c5a481; --cream: #35412c; --gold: #dab874;
  --paper-leaf: #1c2923; --edge-leaf: #465c4e;
  --paper-linen: #242927; --edge-linen: #505953;
  --paper-cream: #2c2b23; --edge-cream: #655f48;
  --paper-mist: #1b2830; --edge-mist: #425965;
  --paper-blossom: #2d252a; --edge-blossom: #65505a;
  --paper-kraft: #302a22; --edge-kraft: #75644d;
  --paper-fiber: #d6c5a00a; --paper-light: #ffffff08;
  --kraft-muted: #a7b2b6; --kraft-link: #a8c496;
}
html[data-mode="dark"] .friends-page .friend-slip[data-paper] { --portrait-wash: var(--wash); }
html[data-mode="dark"] .friends-page .tree-art,
html[data-mode="dark"] .friends-page .forest-nav img { filter: brightness(.72) saturate(.78); }
html[data-mode="dark"] .friends-page .bear-stage,
html[data-mode="dark"] .friends-page .bear-fallback { filter: brightness(.86); }
html[data-mode="dark"] .friends-page .bell-name { background: var(--paper); border-color: var(--rule); }
html[data-mode="dark"] .friends-page .bell:hover .bell-name,
html[data-mode="dark"] .friends-page .bell:focus-visible .bell-name { background: var(--wash); }
html[data-mode="dark"] .friends-page .bell[aria-pressed="true"] .bell-name { background: var(--sage); color: var(--bg); border-color: var(--sage); }
html[data-mode="dark"] .friends-page .tree-cord path { stroke: var(--wood); }
html[data-mode="dark"] .friends-page #pull-cord { stroke: var(--wood); }
html[data-mode="dark"] .friends-page .tree-cord .cord-end { fill: var(--gold); stroke: var(--wood); }
html[data-mode="dark"] .friends-page .random-button { border-color: var(--rule); }
html[data-mode="dark"] .friends-page .gb-input,
html[data-mode="dark"] .friends-page .gb-message { border-color: var(--rule); }
html[data-mode="dark"] .friends-page .gb-message { background: repeating-linear-gradient(transparent, transparent 31px, var(--rule) 31px, var(--rule) 32px); }
html[data-mode="dark"] .friends-page .gb-button { color: var(--bg); }
html[data-mode="dark"] .friends-page .gb-button:hover { background: var(--ink); }
html[data-mode="dark"] .friends-page .gb-error,
html[data-mode="dark"] .friends-page .gb-avatar-error { color: #f0b3a5; }
html[data-mode="dark"] .friends-page .gb-bell { color: var(--gold); }
html[data-mode="dark"] .friends-page .directory-dialog::backdrop { background: #0009; }