/* zforum's own interface uses the first group of tokens. The discussion is drawn like the
   forum itself (--forum-*), and restatements carry their own colour (--restated) so it is
   always clear which text is on show (D-48, D-49). */
:root {
  color-scheme: light;
  --bg: #f6f5f1;
  --surface: #ffffff;
  --text: #22252a;
  --muted: #646a73;
  --line: #e2e0d8;
  --accent: #2f5d8a;
  --low: #b3412f;
  --low-bg: #fbe9e5;
  --mid: #9a6a00;
  --mid-bg: #fbf1d9;
  --high: #2e7d4f;
  --high-bg: #e4f3ea;
  --new: #6a4fb3;
  --new-bg: #eee8fb;
  --restated: #1f6f63;
  --restated-bg: #e6f3f0;
  --forum-bg: #ffffff;
  --forum-text: #222222;
  --forum-muted: #6e6e6e;
  --forum-line: #e9e9e9;
  --forum-link: #0a6ea8;
  --radius: 10px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #17191c;
    --surface: #202328;
    --text: #e6e6e3;
    --muted: #9aa0a8;
    --line: #33373d;
    --accent: #7fb0e0;
    --low: #f08a76;
    --low-bg: #3a2521;
    --mid: #e0b45a;
    --mid-bg: #382f1c;
    --high: #73c793;
    --high-bg: #1d3326;
    --new: #b7a2f0;
    --new-bg: #2c2541;
    --restated: #6fcfbd;
    --restated-bg: #18302b;
    --forum-bg: #1e1f21;
    --forum-text: #dddddd;
    --forum-muted: #a3a3a3;
    --forum-line: #34363a;
    --forum-link: #6cb4e4;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
main { max-width: 860px; margin: 0 auto; padding: 16px 16px 64px; }
h1 { font-size: 1.7rem; line-height: 1.25; margin: 0.2em 0 0.5em; }
h2 { font-size: 1.2rem; margin: 0 0 0.6em; }
h3 { font-size: 1.05rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.notice { background: var(--mid-bg); color: var(--text); border-left: 4px solid var(--mid); padding: 10px 14px; border-radius: 6px; }
.notice:empty { display: none; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; }
button { font: inherit; cursor: pointer; }
.linkish { background: none; border: none; color: var(--accent); padding: 0; text-decoration: underline; }

.site-header { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--text); }
.tagline { color: var(--muted); font-size: 0.9rem; }

/* Home board */
.hero .lede { font-size: 1.1rem; color: var(--muted); margin-top: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.filters-label, .since-label { color: var(--muted); font-size: 0.9rem; margin-right: 4px; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 4px 12px; font-size: 0.9rem; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.board-note { margin: 4px 0 12px; }
.topic-card { display: flex; flex-direction: column; margin: 0; color: var(--text); text-decoration: none; }
a.topic-card:hover, a.topic-card:focus-visible { border-color: var(--accent); box-shadow: 0 2px 10px rgb(0 0 0 / 0.08); }
.topic-card h2 { margin: 4px 0 6px; }
.byline { margin: 0 0 8px; }
.tags, .keywords { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.keyword { font-size: 0.8rem; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
.card-stats { margin: 2px 0; font-size: 0.88rem; }
.open-hint { margin: auto 0 0; padding-top: 8px; color: var(--accent); font-weight: 600; }

/* Topic page: reading bar (D-47) */
.back { margin: 0 0 8px; }
.debate-summary { margin: 16px 0; }
.debate-summary > summary { cursor: pointer; padding: 4px 0; }
.debate-summary .overview { margin-top: 18px; }
.reading-choice select { display: block; max-width: 100%; width: 100%; font: inherit; padding: 6px; margin-top: 4px; }
.collapse-all { margin-bottom: 8px; }
.since-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.custom-hours input { width: 4.5em; font: inherit; padding: 2px 4px; }
.settings-panel { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.settings-panel > summary { cursor: pointer; }
.settings-panel label { display: block; margin: 8px 0; }
.settings-panel .toggle { display: flex; gap: 8px; align-items: flex-start; }
.settings-panel .toggle input { margin-top: 5px; }

/* Topic page: summary, points, what's new */
.eyebrow { color: var(--muted); font-size: 0.9rem; margin: 8px 0 0; }
.overview p { font-size: 1.08rem; margin: 0 0 0.6em; }
.cites { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: baseline; }
.cite { border: 1px solid transparent; border-radius: 4px; padding: 0 5px; font-size: 0.78rem; line-height: 1.5; font-weight: 600; }
.band-low { color: var(--low); background: var(--low-bg); }
.band-mid { color: var(--mid); background: var(--mid-bg); }
.band-high { color: var(--high); background: var(--high-bg); }
.band-unassessed { color: var(--muted); background: var(--bg); }
.cite:hover, .cite:focus-visible { border-color: currentColor; }
.points li { margin-bottom: 8px; }
.question-summary { margin-top: 28px; }
.question-list { display: grid; gap: 12px; }
.question-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.question-heading { cursor: pointer; padding: 16px; scroll-margin-top: 16px; }
.question-number { color: var(--accent); font-size: 0.82rem; font-weight: 700; margin: 0 10px 0 4px; }
.question-heading-text { display: inline; }
.question-heading strong { font-size: 1.06rem; }
.question-description { display: block; color: var(--muted); font-size: 0.92rem; margin: 6px 0 0 34px; }
.question-card[open] > summary { border-bottom: 1px solid var(--line); }
.question-content { padding: 0 18px 16px; overflow-wrap: anywhere; }
.question-content .decision-at-stake { color: var(--muted); margin: 14px 0; }
.question-positions { margin: 0; }
.question-positions dt { font-weight: 650; margin-top: 12px; }
.question-positions dd { margin: 2px 0 0; }
.unresolved { background: var(--bg); padding: 10px 12px; border-radius: 6px; }
.question-arguments { border-top: 1px solid var(--line); padding-top: 10px; }
.question-arguments > summary { color: var(--accent); cursor: pointer; font-weight: 600; }
.question-arguments ul { padding-left: 22px; }
.issue-detail h4 { margin: 18px 0 4px; font-size: 0.92rem; }
.issue-detail ul { margin: 4px 0; font-size: 0.92rem; }
.related-questions { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 14px 0; }
.next-question { margin-top: 6px; }
.analysis-disclosure { border-top: 1px solid var(--line); padding-top: 12px; }
:is(summary, button, a, input):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.badge-new { display: inline-block; background: var(--new-bg); color: var(--new); font-size: 0.72rem; font-weight: 700; border-radius: 4px; padding: 0 6px; margin: 0 6px; text-transform: uppercase; }
.new-points ul { margin-top: 4px; }

/* Topic page: thread tabs (D-48) */
.discussion > h2 { margin-top: 32px; }
.thread-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin: 12px 0 8px; }
.thread-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 8px; padding: 6px 10px; }
.thread-tab[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.thread-tab-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.92rem; }
.thread-tab-meta { color: var(--muted); font-size: 0.8rem; }
.thread-tab-meta .badge-new { margin-right: 0; }

/* The discussion, drawn like the forum (D-48). zforum's additions inside it carry .zf. */
.forum { background: var(--forum-bg); color: var(--forum-text); border: 1px solid var(--forum-line); border-radius: 4px; padding: 0 16px 16px; font-family: Helvetica, Arial, sans-serif; }
.forum a { color: var(--forum-link); }
.zf { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.forum-banner { margin: 0 -16px 4px; padding: 6px 16px; background: var(--bg); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; }
.forum-banner a { color: var(--accent); }
.forum-title { font-size: 1.45rem; font-weight: 600; line-height: 1.3; margin: 10px 0 2px; }
.forum-meta { color: var(--forum-muted); font-size: 0.85rem; margin: 0 0 8px; }
.post { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 0 12px; padding: 14px 0; border-top: 1px solid var(--forum-line); transition: opacity 0.15s; }
.post.is-new { box-shadow: inset 3px 0 0 var(--new); padding-left: 8px; }
.post.flash { outline: 3px solid var(--accent); outline-offset: 2px; }
.hidden-post { opacity: 0.6; }
.avatar { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; color: #ffffff; font-weight: 700; font-size: 1.2rem; }
.avatar-anon { background: #7d838b; font-size: 0.85rem; }
.avatar-c0 { background: #b5503f; }
.avatar-c1 { background: #3c7a5a; }
.avatar-c2 { background: #4a6fa5; }
.avatar-c3 { background: #8a5a9e; }
.avatar-c4 { background: #a3712a; }
.avatar-c5 { background: #2f7f8a; }
.avatar-c6 { background: #9e4a6f; }
.avatar-c7 { background: #5f6b3a; }
.post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 0.92rem; }
.author { font-weight: 700; }
.age-badge { border: 1px solid var(--accent); border-radius: 999px; padding: 0 8px; color: var(--accent); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.age-badge.age-unknown { border-color: var(--line); color: var(--muted); }
.post-meta { margin-left: auto; color: var(--forum-muted); font-size: 0.85rem; }
.post-meta .linkish { color: var(--forum-link); }
.evidence { overflow-wrap: anywhere; color: var(--muted); }
.post-brief { margin: 8px 0; line-height: 1.45; }
.post-disclosure { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.why-marks summary { color: var(--accent); cursor: pointer; }
.why-marks ul { margin: 4px 0; padding-left: 18px; color: var(--text); }
.why-marks q { color: var(--muted); }
.post-toggle { font-size: 0.8rem; }
.post-selection { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; }
.post-selection input { width: 20px; height: 20px; margin: 0; }
.selection-bar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.selection-bar h3, .selection-bar h4 { margin: 0; }
.selection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.selection-bar .selection-actions { margin-top: 12px; }
.selection-hint { font-weight: 600; }
.selection-links { margin-top: 12px; }
.selection-primary { font-weight: 700; }
.speech-player { position: fixed; z-index: 30; bottom: 8px; left: 8px; width: min(520px, calc(100vw - 108px)); max-height: 45vh; overflow: auto; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 12px #0002; }
.player-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.player-controls label { display: flex; flex-wrap: wrap; gap: 4px; }
body { padding-bottom: 240px; }
.companion { position: fixed; z-index: 31; right: 8px; bottom: 8px; width: 88px; min-height: 100px; padding: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 26px 26px 12px 12px; color: var(--text); box-shadow: 0 3px 12px #0002; }
.companion-happy { border-color: var(--high); background: var(--high-bg); }
.companion-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.account-panel, .saved-posts { margin-bottom: 12px; }
.account-panel button { margin: 4px; }
.recovery-codes pre { overflow-x: auto; max-width: 100%; }
.post.read-post { border-left: 3px solid var(--line); background: var(--bg); }
.read-post .post-brief { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .companion { transition: none; animation: none; } }
.selection-bar p { margin: 8px 0 0; }
.selection-bar textarea { width: 100%; min-height: 100px; margin-top: 10px; }
button:disabled { opacity: 0.5; cursor: default; }

/* Restatement and original (D-49): the restatement is tinted, the original plain. */
.version-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.version-tab { border: 1px solid var(--forum-line); border-bottom: none; border-radius: 6px 6px 0 0; background: var(--forum-bg); color: var(--forum-muted); padding: 3px 12px; font-size: 0.85rem; }
.version-tab-neutral[aria-selected="true"] { background: var(--restated-bg); border-color: var(--restated); color: var(--restated); font-weight: 700; }
.version-tab-original[aria-selected="true"] { border-color: var(--forum-muted); color: var(--forum-text); font-weight: 700; }
.version-tab-diff[aria-selected="true"] { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.version-diff { border-left: 4px solid var(--accent); }
.diff-text { white-space: pre-wrap; }
.version-diff del { color: var(--low); background: var(--low-bg); text-decoration: line-through; }
.version-diff ins { color: var(--high); background: var(--high-bg); text-decoration: underline; }
.version { border: 1px solid var(--forum-line); border-radius: 0 6px 6px 6px; padding: 2px 12px 6px; }
.version.solo { border-radius: 6px; margin-top: 8px; }
.version-neutral { background: var(--restated-bg); border-color: var(--restated); border-left-width: 4px; }
.version-original { background: var(--forum-bg); border-left: 4px solid var(--forum-muted); }
.version-label { margin: 6px 0 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.version-neutral .version-label { color: var(--restated); }
.version-original .version-label { color: var(--forum-muted); }
.post-body p { margin: 0.4em 0; }
.post-body pre { overflow-x: auto; background: var(--bg); padding: 8px; border-radius: 6px; }
.post-body { overflow-wrap: anywhere; }
.forum-quote, .md-quote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--forum-line); color: var(--forum-muted); }
.quote-by { font-size: 0.82rem; font-weight: 600; margin: 4px 0; }

/* zforum's footer on each post: ratings (§6) and feedback (§7) */
.zf-footer { margin-top: 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
.ratings { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ratings-q { font-size: 0.85rem; color: var(--muted); margin-right: 4px; }
.rating-buttons { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rating { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 1px 10px; font-size: 0.82rem; }
.rating[aria-pressed="true"].rating-dug-in { background: var(--low-bg); border-color: var(--low); color: var(--low); }
.rating[aria-pressed="true"].rating-no-change { background: var(--bg); border-color: var(--muted); }
.rating[aria-pressed="true"].rating-new-light { background: var(--high-bg); border-color: var(--high); color: var(--high); }
.rating[aria-pressed="true"].rating-changed-mind { background: var(--new-bg); border-color: var(--new); color: var(--new); }
.ratings-summary { flex-basis: 100%; }
.ratings + .feedback { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.feedback-title { margin: 0; font-size: 0.85rem; font-weight: 700; }
.load-more { display: block; margin: 16px auto 0; border: 1px solid var(--line); background: var(--surface); color: var(--accent); border-radius: 999px; padding: 6px 16px; }

.provenance { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 12px; }

@media (max-width: 560px) {
  .thread-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thread-tab-title { font-size: 0.85rem; }
  .post { grid-template-columns: 34px minmax(0, 1fr); gap: 0 8px; }
  .avatar { width: 34px; height: 34px; font-size: 1rem; }
  .avatar-anon { font-size: 0.72rem; }
  .post-meta { margin-left: 0; flex-basis: 100%; }
  .forum { padding: 0 10px 12px; }
  .forum-banner { margin: 0 -10px 4px; padding: 6px 10px; }
}

/* Reading experience, batch 003. */
main { max-width: 1320px; padding-right: 130px; }
.site-header { min-height: 66px; padding-right: 128px; gap: 28px; }
#site-nav { display: flex; gap: 8px 22px; flex-wrap: wrap; }
#site-nav a { text-decoration: none; padding: 6px 0; }
#site-nav a.current { font-weight: 700; border-bottom: 2px solid var(--accent); }
#theme-control { margin-left: auto; }
.theme-control { display: flex; align-items: center; gap: 8px; }
#theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); font: 26px/1 system-ui, sans-serif; cursor: pointer; }
#theme-toggle:hover { border-color: var(--accent); }
.theme-problem { max-width: 240px; font-size: .8rem; }
.info-page, .home, .account-panel, .saved-posts { max-width: 900px; margin-inline: auto; }
.info-page .hero { padding: 42px 0 24px; max-width: 720px; }
.info-page h1 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.035em; }
.info-page section { margin-bottom: 28px; }
.primary-link { display: inline-block; padding: 10px 20px; background: var(--accent); color: var(--surface); text-decoration: none; }
.included-threads { padding-left: 20px; font-size: .9rem; }
.included-threads .linkish { text-align: left; }
.topic-head { max-width: 900px; margin-bottom: 24px; }
.reading-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.reading-content { min-width: 0; }
.reading-content > .card:first-child { margin-top: 0; }
.settings-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 16px; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: .88rem; }
.settings-panel summary { padding: 4px 0; }
.settings-panel fieldset { border: 0; border-top: 1px solid var(--line); padding: 12px 0 2px; margin: 14px 0 6px; }
.settings-panel legend { font-weight: 650; padding-right: 6px; }
.settings-panel input[type="number"] { width: 100%; }
.settings-panel select { font-size: .82rem; }
.since-row input { width: 4.5em; }
.discussion-toolbar, .button-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.thread-tab[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.post.compact-post { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: .85rem; }
.compact-summary { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-post > .small { max-width: 40%; }
.post-meta { flex-basis: 100%; margin-left: 0; }
.post-disclosure { margin: 10px 0; gap: 8px; }
.why-marks { margin-top: 14px; font-size: .9rem; }
.highlighted-flag { font-size: .85rem; margin-top: 8px; padding: 6px 10px; border-left: 3px solid var(--mid); background: var(--mid-bg); }
.mood-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.reaction-group { display: inline-flex; gap: 6px; }
.reaction { position: relative; min-width: 42px; min-height: 38px; font-size: 1.2rem; }
.post-tool { position: relative; min-width: 40px; min-height: 36px; }
.hover-tip { display: none; position: absolute; z-index: 40; left: 0; bottom: calc(100% + 5px); width: max-content; max-width: 210px; padding: 5px 9px; background: var(--text); color: var(--surface); border-radius: 6px; font: 12px/1.4 system-ui; pointer-events: none; }
:is(.post-tool,.reaction):is(:hover,:focus) .hover-tip { display: block; }
.ratings { margin: 10px 0 6px; }
.rating { min-height: 30px; }
.ratings-summary { font-size: .75rem; }
.feedback-item p { margin: 14px 0 6px; font-size: .9rem; }
.read-post .post-brief { color: var(--forum-muted); }
.speech-player { width: min(520px, calc(100vw - 16px)); }
.companion { top: 78px; bottom: auto; right: 12px; width: 100px; padding: 10px 4px 6px; }
.companion-stars { display: block; color: #ac7000; font-size: 16px; letter-spacing: 1px; }
.unlit-stars { color: var(--muted); }
.companion-creature { --fur: #f7bd8b; --ear: #e79680; display: block; position: relative; width: 76px; height: 78px; margin: 4px auto; }
.pet-body { position: absolute; inset: 16px 5px 6px; border-radius: 45% 45% 42% 42%; background: var(--fur); box-shadow: inset 0 -5px 0 #0001, 0 2px 0 #0002; }
.pet-ear { position: absolute; width: 24px; height: 28px; top: 7px; background: var(--ear); border: 6px solid var(--fur); border-radius: 6px 18px 2px 2px; }
.pet-ear-left { left: 5px; transform: rotate(-18deg); }
.pet-ear-right { right: 5px; transform: rotate(18deg) scaleX(-1); }
.pet-eye { position: absolute; top: 20px; width: 8px; height: 11px; border-radius: 50%; background: #292435; border-top: 2px solid #fff9; }
.pet-eye-left { left: 16px; }.pet-eye-right { right: 16px; }
.pet-mouth { position: absolute; width: 15px; height: 7px; border-bottom: 3px solid #623d4c; border-radius: 0 0 50% 50%; left: calc(50% - 7px); top: 36px; }
.pet-cheek { position: absolute; top: 31px; width: 12px; height: 7px; border-radius: 50%; background: #ef7f9899; }
.pet-cheek-left { left: 7px; }.pet-cheek-right { right: 7px; }
.pet-foot { position: absolute; bottom: 1px; width: 20px; height: 11px; background: var(--fur); border-radius: 50%; }
.pet-foot-left { left: 10px; }.pet-foot-right { right: 10px; }
.companion-happy .pet-mouth { width: 22px; height: 13px; left: calc(50% - 11px); top: 33px; background: #854454; border: 0; border-bottom: 5px solid #f5a6a8; border-radius: 3px 3px 60% 60%; }
.companion-happy .pet-eye { height: 8px; border-radius: 60% 60% 0 0; background: transparent; border: 0; border-top: 3px solid #292435; }
.companion-sad .companion-creature { filter: saturate(.2) brightness(.62); }
.companion-sad .pet-mouth { border-bottom: 0; border-top: 3px solid #312c42; border-radius: 50% 50% 0 0; top: 37px; }
.companion-sad .pet-eye-left { transform: rotate(-20deg); }.companion-sad .pet-eye-right { transform: rotate(20deg); }
.companion-sad .pet-cheek { background: #5d7fa2; height: 11px; width: 5px; border-radius: 0 60% 60%; }
.creature-bunny { --fur: #f4c5dc; --ear: #da88af; }.creature-bunny .pet-ear { top: -7px; height: 42px; width: 19px; border-radius: 50%; }
.creature-fox { --fur: #e8a15f; --ear: #64443a; }.creature-fox .pet-body { border-radius: 30% 30% 50% 50%; }.creature-fox .pet-patch { position: absolute; inset: 25px 4px 2px; background: #fff0d8; border-radius: 50%; }
.creature-panda { --fur: #f1ede4; --ear: #444255; }.creature-panda .pet-ear { background: #444255; border: 0; border-radius: 50%; }.creature-panda .pet-eye { box-shadow: 0 0 0 5px #514958; }
.creature-otter { --fur: #c29e7f; --ear: #926e5d; }.creature-otter .pet-ear { border-radius: 50%; width: 21px; height: 21px; top: 16px; }.creature-otter .pet-patch { position: absolute; inset: 25px 12px 3px; border-radius: 50%; background: #f7e0b5; }
.creature-frog { --fur: #a4d79b; --ear: #a4d79b; }.creature-frog .pet-ear { border-radius: 50%; width: 28px; height: 28px; }.creature-frog .pet-eye { top: 8px; }.creature-frog .pet-eye-left { left: 10px; }.creature-frog .pet-eye-right { right: 10px; }
.creature-owl { --fur: #b7a0d1; --ear: #8971a4; }.creature-owl .pet-eye { box-shadow: 0 0 0 7px #f4ecfa; }.creature-owl .pet-body { border-radius: 30% 30% 48% 48%; }
.creature-penguin { --fur: #71889e; --ear: #eeae60; }.creature-penguin .pet-ear { display: none; }.creature-penguin .pet-patch { position: absolute; inset: 12px 9px 2px; border-radius: 50%; background: #edf3ee; }.creature-penguin .pet-foot { background: #eab36b; }
.creature-axolotl { --fur: #f0abcc; --ear: #d66eac; }.creature-axolotl .pet-ear { top: 24px; width: 13px; border: 0; border-radius: 4px; box-shadow: 0 -12px 0 var(--ear), 0 12px 0 var(--ear); }.creature-axolotl .pet-ear-left { left: 0; }.creature-axolotl .pet-ear-right { right: 0; }
.creature-cloud { --fur: #d4e4fa; --ear: #d4e4fa; }.creature-cloud .pet-ear { border-radius: 50%; width: 36px; height: 36px; top: 8px; }.creature-cloud .pet-body { border-radius: 45%; }.creature-cloud .pet-foot { display: none; }
.companion-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.companion-options button { border-radius: 16px; padding: 12px; }
:is(summary, button, a, input, select):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1050px) {
  .reading-layout { grid-template-columns: 1fr; }
  .settings-panel { position: static; max-height: none; }
}
@media (max-width: 700px) {
  main { padding: 16px 12px 80px; }
  .site-header { position: sticky; top: 0; z-index: 35; min-height: 94px; align-content: center; gap: 4px; padding-right: 92px; }
  #site-nav { gap: 4px 12px; font-size: .85rem; order: 2; flex-basis: 100%; }
  .companion { z-index: 36; top: 5px; right: 5px; width: 76px; min-height: 0; height: 82px; padding: 0; border-radius: 14px; }
  .companion .companion-creature { transform: scale(.65); transform-origin: top center; margin-top: 3px; margin-bottom: -30px; }
  .companion .small { display: none; }.companion-stars { font-size: 12px; }
  .post { scroll-margin-top: 150px; }
  .post.compact-post { flex-wrap: wrap; }.compact-post > .small { max-width: 100%; }
  .info-page .hero { padding-top: 16px; }
  .thread-tabs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .post, .companion-creature { transition: none; } }

/* Topic navigation and filter explanations, batch 004. */
#site-nav button { font: inherit; padding: 6px 0; }
.filter-info { display: inline; font-weight: normal; }
.info-button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--accent); font: italic 600 14px Georgia, serif; vertical-align: middle; }
.info-text { display: none; margin: 8px 0; padding: 10px; border-left: 3px solid var(--accent); background: var(--bg); color: var(--text); font: normal .84rem/1.5 system-ui; overflow-wrap: anywhere; }
.settings-panel .info-text { position: absolute; left: 12px; right: 12px; z-index: 20; pointer-events: none; }
@media (max-width: 1050px) { .settings-panel { position: relative; } }
.filter-info.is-open > .info-text, .filter-info:not(.is-dismissed):hover > .info-text, .filter-info:not(.is-dismissed):focus-within > .info-text { display: block; }
.filter-toggle { margin: 10px 0; }
.filter-toggle .toggle { display: inline; }
.account-age-filter input[type="range"] { width: 100%; margin: 12px 0; accent-color: var(--accent); }
.settings-panel .account-age-filter input[type="number"] { width: 6em; }
.reading-choice select { display: block; margin-top: 8px; width: 100%; }
.pull-stamp { padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.bookmark-icon { display: inline-block; position: relative; width: 14px; height: 18px; background: currentColor; clip-path: polygon(0 0,100% 0,100% 100%,50% 72%,0 100%); vertical-align: middle; }
.bookmark-icon:not(.filled)::after { content: ""; position: absolute; inset: 2px 2px 3px; background: var(--surface); clip-path: polygon(0 0,100% 0,100% 100%,50% 68%,0 100%); }
.directory-controls { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0 16px; }
.directory-controls label { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }
.directory-controls input, .directory-controls select { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.featured-topics { margin-bottom: 32px; }
.featured-topics .topic-card { border-top: 3px solid var(--accent); }
.featured-topics .board { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }