/* ══ Community: The Noticeboard ══════════════════════════════════════════
   The community is its own app inside CPSCount (front.page.chrome "app",
   build/shell/app-chrome.mjs): the arcade's noticeboard, a printed fan zine
   pinned up after dark, on the site's own ground and starfield. Its print
   language is the last section of this file (DESIGN.md The Noticeboard):
   masthead, clippings, rubber stamps, ruled index. Small physical reactions
   stay (likes burst, saves pop, follows bounce, buttons ripple).
   --c-grad is the one signature gradient: primary actions and the score
   ticket. Teko (the site's display face, the wordmark's face) carries
   page titles; Outfit carries everything people read. All motion is
   transform/opacity, off under prefers-reduced-motion; no blur on app chrome,
   cards or menus.

   Markup: Site_Source/community/render.mjs (shared with the server
   renderer) + views/. Motion hooks: community/motion.mjs. Logical
   properties throughout (RTL: /sa/).

   Tokens for feature stylesheets (src/styles/pages/community-<feature>.css,
   linked automatically on community pages): use these, never raw colours.
     ground       --c-bg --c-bg-2
     decks        --c-deck (opaque Deck 1) --c-deck-2 --c-deck-3
     lines        --c-line --c-line-2
     text         --c-text --c-text-2 --c-text-3
     accents      --c-violet --c-violet-2 --c-pink --c-cyan --c-amber --c-lime --c-coral --c-like
     brand        --c-grad (primary fill, white text) --c-grad-soft --c-violet-fill (flat fill, white text)
                  --c-grad / --c-grad-soft only where DESIGN.md "The Two Gradients Rule" lists them; elsewhere flat.
     shape/depth  --c-r --c-r-sm --c-r-lg --c-shadow --c-shadow-lift
     motion       --c-ease --c-spring --c-fast --c-med
     layout       --c-bar-h --c-rail-w --c-feed-w --c-aside-w --c-gap
     room accent  [data-stamp="cyan|pink|amber|coral|lime|violet"] sets --stamp / --stamp-ink
   Components to reuse: .c-sheet (Deck 1 card), .btn--primary/secondary/ghost,
   .c-side-card, .c-section-title, .c-empty + .c-art, .c-flairs, .c-avatar. */

body[data-page="community"] {
  /* Community keeps its own component vocabulary while reading the equipped site's palette.
     Do not remap the global tokens back to these aliases: that would create inherited cycles. */
  --c-bg: var(--bg);
  --c-bg-2: var(--bg-raised);
  --c-deck: var(--surface-1-solid);
  --c-deck-solid: var(--c-deck);
  --c-deck-2: var(--surface-2);
  --c-deck-3: var(--surface-3);
  --c-line: var(--border);
  --c-line-2: var(--border-strong);
  --c-text: var(--text);
  --c-text-2: var(--text-muted);
  /* Metadata remains readable on both the feed and the raised menus. */
  --c-text-3: color-mix(in srgb, var(--text-muted) 82%, var(--text-faint));
  --c-violet: var(--primary);
  --c-violet-2: var(--primary-hover);
  --c-pink: var(--pink);
  --c-cyan: var(--cyan);
  --c-amber: var(--amber);
  --c-lime: var(--lime);
  --c-coral: var(--coral);
  --c-like: #ff4f93;
  --c-action-ink: #fff;
  --c-grad: linear-gradient(118deg, #6240ef 0%, #9631d2 52%, #b51e9c 100%);
  --c-grad-hover: linear-gradient(118deg, #6d4aff 0%, #9d36dc 52%, #c026a4 100%);
  --c-grad-soft: linear-gradient(118deg, color-mix(in srgb, var(--c-violet) 22%, transparent), rgb(208 47 180 / 0.14));
  /* The flat stand-in for --c-grad where a fill is not one of its allowed surfaces: the gradient's own start, 5.2:1 under white. */
  --c-violet-fill: #6d4aff;
  --c-r: var(--radius-lg);
  --c-r-sm: var(--radius-md);
  --c-r-lg: 24px;
  --c-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
  --c-shadow-lift: 0 2px 4px rgb(0 0 0 / 0.3), 0 18px 36px -20px rgb(0 0 0 / 0.9);
  --c-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --c-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --c-fast: 160ms;
  --c-med: 280ms;
  --c-bar-h: 64px;
  --c-rail-w: 252px;
  --c-feed-w: 720px;
  --c-aside-w: 320px;
  --c-gap: 28px;
  --c-display: var(--font-display);
  --header-stuck: var(--c-bar-h);
  /* Legacy names some modules still read (zine.mjs probes --marker). */
  --marker: color-mix(in srgb, var(--c-violet) 45%, transparent);
  color: var(--c-text);
  background: transparent;
  accent-color: var(--c-violet);
  caret-color: var(--c-violet-2);
}

/* Shop themes own action color as well as the surrounding app palette. Default Nebula keeps its brand gradient. */
html[data-theme] body[data-page="community"] {
  --c-grad: linear-gradient(118deg, var(--primary), var(--primary-hover));
  --c-grad-hover: linear-gradient(118deg, var(--primary-hover), var(--primary));
  --c-grad-soft: linear-gradient(118deg, color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary-hover) 12%, transparent));
  --c-violet-fill: var(--primary);
  --c-deck: color-mix(in srgb, var(--bg-raised) 96%, var(--primary));
  --c-action-ink: var(--primary-ink);
}

/* Room accents: vivid on the night sky; --stamp-ink is readable text on a --stamp fill. */
[data-stamp] { --stamp: var(--c-violet); --stamp-2: #6d4aff; --stamp-ink: #160b3a; }
[data-stamp="cyan"] { --stamp: var(--cyan, #00e5f5); --stamp-2: #1a8cff; --stamp-ink: #002a30; }
[data-stamp="pink"] { --stamp: #ff5ccf; --stamp-2: #b03bff; --stamp-ink: #3a0630; }
[data-stamp="amber"] { --stamp: #ffc94a; --stamp-2: #ff8a3d; --stamp-ink: #3a2400; }
[data-stamp="coral"] { --stamp: #ff7a66; --stamp-2: #ff3d7f; --stamp-ink: #3d0d06; }
[data-stamp="lime"] { --stamp: #b6ff3b; --stamp-2: #2fd88f; --stamp-ink: #1e3300; }
[data-stamp="violet"] { --stamp: #a78bfa; --stamp-2: #6d4aff; --stamp-ink: #160b3a; }

/* ── Ground: the site's own, #star-canvas (base.css, components.css, script.js) over Void ── */
html:has(body[data-page="community"]) {
  background: var(--bg);
  color-scheme: dark;
  scroll-padding-block-start: calc(var(--c-bar-h, 64px) + 14px);
  scrollbar-color: var(--border-strong) var(--bg);
}
/* ── Browser surfaces ──────────────────────────────────────────────────── */
body[data-page="community"] ::selection { background: color-mix(in srgb, var(--c-violet) 42%, transparent); color: #fff; }
.community :focus-visible { outline: 2px solid var(--c-violet-2); outline-offset: 2px; }
.community h1:focus, .community h1:focus-visible { outline: none; }
/* Site headings are Teko capitals; inside the app each heading class sets its own voice. */
.community :where(h1, h2, h3, h4) { text-transform: none; }
.community :is(.c-rail, .c-aside, .c-bar-menu, .c-md pre)::-webkit-scrollbar { inline-size: 8px; block-size: 8px; }
.community :is(.c-rail, .c-aside, .c-bar-menu, .c-md pre)::-webkit-scrollbar-thumb { border-radius: 8px; background: color-mix(in srgb, var(--c-violet) 25%, transparent); }
.community :is(.c-rail, .c-aside, .c-bar-menu, .c-md pre)::-webkit-scrollbar-track { background: transparent; }
.community a:not(.btn) { text-underline-offset: 0.22em; }

/* ── Frame ─────────────────────────────────────────────────────────────── */
body[data-chrome="app"] .community { padding: 0; }
.community .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.community [hidden] { display: none !important; }
.community p { margin: 0; }
.community svg { flex-shrink: 0; }
.app-site-controls { display: none; }
.c-shell { display: block; }
.c-shell > .loading { padding: 32px 24px; color: var(--c-text-3); }
.c-layout {
  display: grid;
  grid-template-columns: var(--c-rail-w) minmax(0, 1fr) minmax(0, var(--c-feed-w)) var(--c-aside-w) minmax(0, 1fr);
  column-gap: var(--c-gap);
  align-items: start;
  min-block-size: calc(100vh - var(--c-bar-h));
}
.c-rail { grid-column: 1; grid-row: 1 / span 2; }
.c-main { grid-column: 3; min-inline-size: 0; padding-block: 22px 72px; }
.c-aside { grid-column: 4; }
.c-feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; inline-size: 100%; }
.c-feed > *, .c-list > * { min-inline-size: 0; }
.c-list, .c-pinned { display: grid; gap: 14px; }
.c-muted, .c-hint { color: var(--c-text-2); }
.c-hint { font-size: 0.86rem; line-height: 1.5; }
.c-error { color: #ff8a9a; }
.c-status {
  margin-block-end: 14px;
  padding: 11px 16px;
  border: 1px solid color-mix(in srgb, var(--c-violet) 30%, transparent);
  border-radius: var(--c-r-sm);
  background: color-mix(in oklab, rgb(124 92 255) 18%, var(--c-deck));
  color: var(--c-text);
  font-weight: 600;
  animation: c-pop-in 320ms var(--c-spring) both;
}
.c-status.c-error { border-color: rgb(255 122 140 / 0.45); background: rgb(255 79 120 / 0.12); color: #ffb3bf; }

/* ── Deck 1 cards ──────────────────────────────────────────────────────── */
.c-sheet,
.c-feed > .c-editor,
.c-settings-block,
.c-log > .c-list:not(:has(> .c-empty)),
.c-directory:not(:has(> .c-empty)) {
  position: relative;
  overflow-wrap: anywhere;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background: var(--c-deck);
  box-shadow: var(--c-shadow);
  color: var(--c-text);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.community .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-block-size: var(--tap);
  padding-inline: 18px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  transition: background-color var(--c-fast) var(--c-ease), border-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease), box-shadow var(--c-med) var(--c-ease), transform var(--c-fast) var(--c-ease);
}
.community .btn svg { inline-size: 18px; block-size: 18px; }
body[data-page="community"] .community .btn--primary {
  border: 0;
  background: var(--c-grad);
  color: var(--c-action-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 6px 18px -8px color-mix(in srgb, var(--c-violet) 75%, transparent);
}
/* A light sheen crosses the primary fill on hover. */
body[data-page="community"] .community .btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.04) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 700ms var(--c-ease);
}
body[data-page="community"] .community .btn--primary:hover { background: var(--c-grad-hover); color: var(--c-action-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.26), 0 10px 26px -8px color-mix(in srgb, var(--c-violet) 80%, transparent); transform: translateY(-1px); }
body[data-page="community"] .community .btn--primary:hover::after { transform: translateX(120%); }
.community .btn--secondary {
  border: 1px solid var(--c-line-2);
  background: rgb(255 255 255 / 0.04);
  color: var(--c-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.community .btn--secondary:hover { border-color: color-mix(in srgb, var(--c-violet-2) 50%, transparent); background: color-mix(in srgb, var(--c-violet) 12%, transparent); color: #fff; }
.community .btn--secondary[aria-pressed="true"] { border-color: rgb(0 229 245 / 0.5); background: rgb(0 229 245 / 0.1); color: #9ff6fb; }
.community .btn--ghost { border: 0; background: transparent; color: var(--c-text-2); box-shadow: none; }
.community .btn--ghost:hover { background: rgb(255 255 255 / 0.07); color: var(--c-text); }
.community .btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.community .btn:disabled { opacity: 0.5; }
/* Ripple (motion.mjs): hosts clip it. */
:is(.c-actions > button, .c-actions > a, .c-sort a, .c-tabs a, .c-rail-link, .c-rail-room, .c-tabbar a, .c-comment-sort button, .c-bar-menu a, .c-bar-menu button, .c-prompt-cta) { position: relative; overflow: hidden; isolation: isolate; }
.c-ripple {
  position: absolute;
  left: var(--x);
  top: var(--y);
  inline-size: var(--s);
  block-size: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.32), rgb(255 255 255 / 0) 62%);
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
  z-index: -1;
  animation: c-ripple 620ms var(--c-ease) forwards;
}
@keyframes c-ripple { to { transform: scale(1); opacity: 0; } }

/* ── App bar ───────────────────────────────────────────────────────────── */
.c-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  margin: 0;
  padding: 0;
  border-block-end: 1px solid var(--c-line);
  background: var(--c-bg);
  transition: box-shadow var(--c-med) var(--c-ease);
}
html[data-c-scrolled] .c-bar { box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.9); }
/* Route loading: a light runs along the bar's lower edge while a view loads. */
.c-bar::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--c-cyan), var(--c-violet), var(--c-pink), transparent) 0 0 / 40% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.c-shell:has(#community-feed[aria-busy="true"]) .c-bar::after { opacity: 1; animation: c-progress 1.1s linear infinite; }
@keyframes c-progress { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.c-bar-inner {
  display: grid;
  grid-template-columns: var(--c-rail-w) minmax(0, 1fr) minmax(0, var(--c-feed-w)) var(--c-aside-w) minmax(0, 1fr);
  column-gap: var(--c-gap);
  align-items: center;
  block-size: var(--c-bar-h);
}
.c-bar a { text-decoration: none; }
.c-bar svg { inline-size: 20px; block-size: 20px; }

/* Brand: the site's own wordmark (shell.css .logo), a back arrow, then "Community". */
.c-bar-brand { grid-column: 1 / 3; display: flex; align-items: center; gap: 10px; min-inline-size: 0; padding-inline-start: 18px; }
.c-bar-logo { position: relative; gap: 8px; min-block-size: 44px; padding-inline-end: 2px; border-radius: 12px; }
.c-bar-logo .logo { font-size: 1.5rem; transition: filter var(--c-med) var(--c-ease); }
.c-bar-logo:hover .logo, .c-bar-logo:focus-visible .logo { filter: drop-shadow(0 0 12px rgb(255 201 74 / 0.35)) brightness(1.08); }
.c-bar-back {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  color: var(--c-text-2);
  background: rgb(255 255 255 / 0.03);
  transition: transform var(--c-med) var(--c-spring), color var(--c-fast) var(--c-ease), border-color var(--c-fast) var(--c-ease), background-color var(--c-fast) var(--c-ease);
}
.c-bar-back svg { inline-size: 15px !important; block-size: 15px !important; }
[dir="rtl"] .c-bar-back svg { transform: scaleX(-1); }
.c-bar-logo:hover .c-bar-back, .c-bar-logo:focus-visible .c-bar-back { transform: translateX(-3px); color: #fff; border-color: rgb(255 201 74 / 0.6); background: rgb(255 201 74 / 0.12); }
[dir="rtl"] .c-bar-logo:hover .c-bar-back, [dir="rtl"] .c-bar-logo:focus-visible .c-bar-back { transform: translateX(3px); }
/* "Main site" hint under the wordmark on hover / keyboard focus. */
.c-bar-logo::after {
  content: attr(data-hint);
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  padding: 5px 10px;
  border: 1px solid var(--c-line-2);
  border-radius: 8px;
  background: var(--c-deck-solid);
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.8);
  color: var(--c-text);
  font: 600 0.76rem/1.2 var(--font-body);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--c-fast) var(--c-ease), transform var(--c-fast) var(--c-ease);
  z-index: 2;
}
.c-bar-logo:hover::after, .c-bar-logo:focus-visible::after { opacity: 1; transform: none; transition-delay: 250ms; }
.c-bar-sep { inline-size: 1px; block-size: 22px; flex: none; background: linear-gradient(180deg, transparent, var(--c-line-2), transparent); }
/* CPSCount × Manga Yugen (shell.css "Partner mark"; render.mjs partnerLink). Reads left to right like the wordmark. */
.c-bar-partner { display: flex; align-items: center; gap: 8px; flex: none; direction: ltr; }
.c-bar-partner .partner-mark__name { font-size: 1.15rem; }
/* ≥1200 the brand shares the rail's grid cell (298px at 1440), too narrow for wordmark, mark and "Community":
   the search keeps its right edge on the feed column and gives up 188px on the left, which the brand takes. */
@media (min-width: 1200px) {
  .c-bar-brand { margin-inline-end: -164px; }
  .c-bar-inner .c-bar-search { margin-inline-start: 188px; }
}
.c-bar-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  min-block-size: 32px;
  overflow: hidden;
  color: var(--c-text-2);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--c-fast) var(--c-ease);
}
.c-bar-home:hover { color: #fff; }
.c-bar-pulse { position: relative; inline-size: 7px; block-size: 7px; flex: none; border-radius: 50%; background: var(--c-lime); box-shadow: 0 0 10px rgb(182 255 59 / 0.7); }
.c-bar-pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgb(182 255 59 / 0.6); animation: c-pulse 2.6s var(--c-ease) infinite; }
@keyframes c-pulse { 0% { transform: scale(0.5); opacity: 1; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

.c-bar-search { grid-column: 3; position: relative; display: flex; align-items: center; min-inline-size: 0; margin: 0; }
.c-bar-search > svg { position: absolute; inset-inline-start: 16px; inline-size: 18px; block-size: 18px; color: var(--c-text-3); pointer-events: none; transition: color var(--c-fast) var(--c-ease); }
.c-bar-search input {
  inline-size: 100%;
  block-size: 42px;
  padding-inline: 46px 18px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.045);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
  color: var(--c-text);
  font: inherit;
  font-size: 15px;
  transition: background-color var(--c-fast) var(--c-ease), border-color var(--c-fast) var(--c-ease), box-shadow var(--c-med) var(--c-ease);
}
.c-bar-search input::placeholder { color: var(--c-text-3); }
.c-bar-search input:hover { border-color: var(--c-line-2); background: rgb(255 255 255 / 0.06); }
.c-bar-search input:focus-visible { outline: none; border-color: color-mix(in srgb, var(--c-violet-2) 70%, transparent); background: color-mix(in srgb, var(--c-deck-solid) 90%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-violet) 18%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--c-violet) 80%, transparent); }
.c-bar-search:focus-within > svg { color: var(--c-violet-2); }
.c-bar-actions { grid-column: 4 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-inline-end: 18px; }
.c-bar-create:is(.btn--primary, .btn--ghost) { display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding-inline: 14px 18px; }
/* A guest's bar Create post (render.mjs createPostLink quiet): a ghost key with the lock, so the bar's one filled
   sign-in control stays the Sign in button next to it. */
.c-bar-create.c-create--gated svg { inline-size: 17px; block-size: 17px; }
.c-bar .c-bar-join { min-block-size: 40px; padding-inline: 18px; }
.c-bar-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  color: var(--c-text-2);
  transition: background-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease), transform var(--c-fast) var(--c-ease);
}
.c-bar-icon:hover, .c-bar-icon[aria-current] { background: rgb(255 255 255 / 0.07); color: #fff; }
.c-bar-icon:hover svg { animation: c-wiggle 520ms var(--c-ease); }
@keyframes c-wiggle { 25% { transform: rotate(-12deg); } 55% { transform: rotate(9deg); } 80% { transform: rotate(-4deg); } }
/* Unread counts. */
.c-badge {
  display: inline-block;
  min-inline-size: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4f93, #ff7a3d);
  color: #fff;
  font: 700 0.75rem/18px var(--font-body);
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px -2px rgb(255 79 147 / 0.7);
}
.c-bar-icon .c-badge { position: absolute; inset-block-start: 3px; inset-inline-end: 1px; box-shadow: 0 0 0 2px var(--c-bg-2), 0 2px 10px -2px rgb(255 79 147 / 0.7); animation: c-pop-in 420ms var(--c-spring) both; }
.c-bar-me { position: relative; flex: none; }
.c-bar-me > summary { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; color: var(--c-text-2); list-style: none; cursor: pointer; transition: background-color var(--c-fast) var(--c-ease); }
.c-bar-me > summary::-webkit-details-marker { display: none; }
.c-bar-me > summary:hover, .c-bar-me[open] > summary { background: rgb(255 255 255 / 0.07); color: #fff; }
.c-bar-me > summary .c-avatar { inline-size: 36px; block-size: 36px; font-size: 0.9rem; }
.c-bar-menu {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 70;
  display: grid;
  gap: 2px;
  inline-size: 17.5rem;
  max-inline-size: calc(100vw - 24px);
  max-block-size: min(76vh, 36rem);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--c-line-2);
  border-radius: 16px;
  background: var(--c-deck);
  box-shadow: 0 28px 60px -18px rgb(0 0 0 / 0.85);
  transform-origin: top right;
  animation: c-menu-in 200ms var(--c-ease) both;
}
[dir="rtl"] .c-bar-menu { transform-origin: top left; }
@keyframes c-menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.c-bar-menu :is(a, button) { display: flex; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 42px; padding-inline: 12px; border: 0; border-radius: 10px; background: none; color: var(--c-text); font: inherit; font-size: 0.92rem; font-weight: 500; text-align: start; text-decoration: none; cursor: pointer; }
.c-bar-menu :is(a, button) > svg { color: var(--c-text-3); }
.c-bar-menu :is(a, button):hover, .c-bar-menu :is(a, button):focus-visible { background: color-mix(in srgb, var(--c-violet) 14%, transparent); }
.c-bar-menu :is(a, button):hover > svg { color: var(--c-violet-2); }
.c-bar-menu :is(a, button) .c-badge { margin-inline-start: auto; }
.c-bar-menu small { margin-inline-start: auto; color: var(--c-text-3); font-size: 0.8rem; }
.c-bar-menu [data-danger] { color: #ff9aa9; }
.c-bar-menu-me { min-block-size: 64px !important; margin-block-end: 4px; border-block-end: 1px solid var(--c-line) !important; border-radius: 10px 10px 4px 4px !important; background: color-mix(in srgb, var(--c-violet) 16%, transparent) !important; }
.c-bar-menu-me > span { display: grid; gap: 2px; min-inline-size: 0; }
.c-bar-menu-me b { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.c-bar-menu-me small { margin: 0; }
.c-bar-menu-me .c-avatar { inline-size: 42px; block-size: 42px; }
.c-bar-menu-links { display: grid; gap: 2px; margin-block-start: 4px; padding-block-start: 4px; border-block-start: 1px solid var(--c-line); }
.c-bar-more .c-bar-menu > .c-bar-menu-links:first-child { margin: 0; padding: 0; border: 0; }

/* ── Side navigation ───────────────────────────────────────────────────── */
.c-rail {
  position: sticky;
  inset-block-start: var(--c-bar-h);
  block-size: calc(100vh - var(--c-bar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 14px 28px;
  border-inline-end: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--c-bg) 52%, transparent);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-violet) 25%, transparent) transparent;
}
.c-rail-inner { display: grid; gap: 10px; }
.c-rail ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.c-rail-nav { padding-block-end: 10px !important; border-block-end: 1px solid var(--c-line); }
.c-rail-nav--minor { border: 0; padding: 0 !important; }
:is(.c-rail-link, .c-rail-room) {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 42px;
  padding-inline: 12px;
  border-radius: 12px;
  color: var(--c-text-2);
  font-size: 0.93rem;
  font-weight: 550;
  text-decoration: none;
  transition: background-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease), transform var(--c-fast) var(--c-ease);
}
:is(.c-rail-link, .c-rail-room):hover { background: rgb(255 255 255 / 0.06); color: #fff; }
:is(.c-rail-link, .c-rail-room):hover > :first-child { transform: scale(1.08); }
:is(.c-rail-link, .c-rail-room) > :first-child { transition: transform var(--c-med) var(--c-spring); }
.c-rail-link[aria-current] {
  background: color-mix(in srgb, var(--c-violet) 14%, var(--c-bg-2));
  color: #fff;
  font-weight: 650;
}
.c-rail-link[aria-current] svg { color: var(--c-violet-2); }
.c-rail-link svg { inline-size: 20px; block-size: 20px; }
.c-rail-link .c-badge { margin-inline-start: auto; }
.c-rail-group { display: grid; gap: 2px; padding-block: 4px 10px; border-block-end: 1px solid var(--c-line); }
.c-rail-heading { margin: 0; padding: 10px 12px 6px; color: var(--c-text-3); font: 650 0.75rem/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
/* "Your rooms" head with the compact "+ Create" (render.mjs communityRail, members who follow rooms): the heading at
   the start, the violet-ink link at the end, so creating a room stays above a 720px fold. */
.c-rail-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.c-rail-group-head .c-rail-heading { min-inline-size: 0; }
.c-rail-create { display: inline-flex; flex: none; align-items: center; gap: 4px; min-block-size: 36px; margin-block-start: 4px; padding-inline: 8px 10px; border-radius: 10px; color: var(--c-violet-2); font: 650 0.8rem/1 var(--font-body); text-decoration: none; transition: background-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease); }
.c-rail-create svg { inline-size: 16px; block-size: 16px; }
/* 36px tall, with a 44px hit area: an invisible ::before 4px past its edge, like the bar keys. */
.c-rail-create { position: relative; }
.c-rail-create::before { content: ''; position: absolute; inset: -4px; }
.c-rail-create:hover, .c-rail-create[aria-current] { background: rgb(255 255 255 / 0.06); color: #fff; }
.c-rail-room { min-block-size: 40px; }
/* "Show all (n)" fold of a long room group (render.mjs communityRail): a rail row with a chevron that points down
   closed and up open; the fold's rooms list under it. */
.c-rail-more > summary { cursor: pointer; list-style: none; color: var(--c-text-3); font-size: 0.86rem; }
.c-rail-more > summary::-webkit-details-marker { display: none; }
.c-rail-more > summary svg { inline-size: 18px; block-size: 18px; transform: rotate(90deg); transition: transform var(--c-med) var(--c-ease); }
.c-rail-more[open] > summary svg { transform: rotate(-90deg); }
.c-rail-more[open] .c-rail-more-closed, .c-rail-more:not([open]) .c-rail-more-open { display: none; }
.c-rail-more > summary:hover > :first-child { transform: rotate(90deg); }
.c-rail-more[open] > summary:hover > :first-child { transform: rotate(-90deg); }
.c-rail-more > ul { margin-block-start: 2px !important; }
.c-rail-room .c-room-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-rail-room[aria-current] { background: color-mix(in oklab, var(--stamp) 14%, transparent); color: #fff; font-weight: 650; }
.c-rail-room-icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--stamp), color-mix(in oklab, var(--stamp) 60%, var(--stamp-2)));
  color: var(--stamp-ink);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--stamp) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.35);
}

/* ── Side column ───────────────────────────────────────────────────────── */
.c-aside {
  position: sticky;
  inset-block-start: var(--c-bar-h);
  display: grid;
  gap: 14px;
  align-content: start;
  max-block-size: calc(100vh - var(--c-bar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 22px 6px 28px 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-violet) 25%, transparent) transparent;
}
[dir="rtl"] .c-aside { padding: 22px 2px 28px 6px; }
.c-aside > * { margin: 0; }
.c-aside[data-own-profile] .c-me { display: none; }
.c-side-card { display: grid; gap: 12px; padding: 18px; border-radius: var(--c-r); }
.c-side-title, .c-side-card > h2 { margin: 0; color: var(--c-text-3); font: 700 0.75rem/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.c-side-card > p { color: var(--c-text-2); font-size: 0.88rem; line-height: 1.55; }
.c-text-link { display: inline-flex; align-items: center; justify-self: start; min-block-size: 32px; color: var(--c-violet-2); font-size: 0.88rem; font-weight: 650; text-decoration: none; }
.c-text-link:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--c-pink); }
/* Identity card */
.c-me { overflow: hidden; }
.c-me > * { position: relative; }
.c-me-id { gap: 12px; }
.c-me-id > span { display: grid; gap: 3px; min-inline-size: 0; }
.c-me-id b { color: #fff; font: 700 1.05rem/1.2 var(--font-body); }
.c-me-id small { color: var(--c-text-3); font-size: 0.82rem; }
.c-me-id .c-avatar { inline-size: 52px; block-size: 52px; font-size: 1.25rem; }
.c-welcome { overflow: hidden; }
.c-welcome > * { position: relative; }
.c-side-card.c-welcome h2 { color: #fff; font: 600 1.7rem/0.95 var(--c-display); letter-spacing: 0.01em; text-transform: uppercase; }
.c-welcome .btn { justify-self: start; }
/* Room list cards */
.c-room-list ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.c-room-list a:not(.c-text-link) { display: flex; align-items: center; gap: 12px; min-block-size: 40px; padding-inline: 8px; border-radius: 10px; color: var(--c-text); font-size: 0.92rem; font-weight: 550; text-decoration: none; transition: background-color var(--c-fast) var(--c-ease); }
.c-room-list a:not(.c-text-link):hover { background: rgb(255 255 255 / 0.06); }
.c-room-mark { inline-size: 10px; block-size: 10px; flex: none; border-radius: 50%; background: var(--stamp); box-shadow: 0 0 10px color-mix(in oklab, var(--stamp) 80%, transparent); }
.c-room-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-top-count { margin-inline-start: auto; color: var(--c-text-3); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* About the room */
.c-about-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.c-about-name a { color: #fff; font-weight: 700; text-decoration: none; }
.c-about-name a:hover { text-decoration: underline; text-decoration-color: var(--stamp); }
.c-about-name span { color: var(--c-text-3); font-size: 0.85rem; }
.c-about-meta { color: var(--c-text-2); font-size: 0.85rem; }
.c-rules-list { display: grid; gap: 8px; margin: 0; padding-inline-start: 1.4em; color: var(--c-text); font-size: 0.88rem; line-height: 1.55; }
.c-rules-list li::marker { color: var(--c-violet-2); font-weight: 700; }
/* Figures */
.c-stats, .c-room-counts { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 0; }
.c-stats { padding-block: 12px; border-block: 1px solid var(--c-line); }
.c-stats div, .c-room-counts div { display: grid; gap: 1px; }
.c-stats dt, .c-room-counts dt { order: 2; color: var(--c-text-3); font: 500 0.76rem/1.2 var(--font-body); }
.c-stats dd, .c-room-counts dd { order: 1; margin: 0; color: #fff; font: 600 1.55rem/1 var(--c-display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.c-stats [data-stat="level"] dd { background: linear-gradient(120deg, var(--c-violet-2), var(--c-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-stats [data-stat="best"] dd { color: var(--c-amber); text-shadow: 0 0 18px rgb(255 201 74 / 0.35); }
.c-me .c-stats { display: grid; grid-template-columns: 1fr 1fr; }
.c-note { padding-inline: 6px; color: var(--c-text-3); font-size: 0.78rem; line-height: 1.55; }
/* The site's slim footer: the side column's last block once the app runs. */
.app-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; padding: 16px; border-block-start: 1px solid var(--c-line); color: var(--c-text-3); font-size: 0.78rem; line-height: 1.6; }
.app-footer nav { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.app-footer a { color: inherit; text-decoration: none; }
.app-footer a:hover { color: var(--c-text); text-decoration: underline; }
.app-footer__support { padding: 0; border: 0; background: none; color: var(--c-text-2); font: inherit; font-weight: 600; cursor: pointer; }
.app-footer__support:hover { color: #fff; text-decoration: underline; }
.c-aside .app-footer { justify-content: flex-start; padding: 4px 8px 0; border: 0; }
.c-aside .app-footer nav { gap: 2px 10px; }
.c-aside .app-footer__copy { flex-basis: 100%; }

/* ── Headings ──────────────────────────────────────────────────────────── */
.c-heading { display: grid; gap: 8px; justify-items: start; padding-block: 6px 4px; }
.c-heading p { max-inline-size: 60ch; color: var(--c-text-2); line-height: 1.55; }
.c-cutout { margin: 0; color: #fff; font: 600 clamp(2.2rem, 1.8rem + 1.6vw, 3.1rem)/0.92 var(--c-display); letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.c-cutout > span { display: inline; }
:is(:lang(zh), :lang(ja), :lang(hi)) .c-cutout { font-size: clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem); line-height: 1.15; }
:lang(ar) .c-cutout { font-size: clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem); line-height: 1.35; }
.c-heading-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 16px; }
.c-section-title { margin: 0; color: var(--c-text-2); font: 700 0.76rem/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.c-section-title span { color: var(--c-violet-2); font-variant-numeric: tabular-nums; }

/* ── Feed chrome ───────────────────────────────────────────────────────── */
.c-masthead { margin: 0; }
.c-feed-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
:is(.c-sort, .c-tabs) { display: inline-flex; flex-wrap: wrap; gap: 4px; }
:is(.c-sort, .c-tabs) a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 36px;
  padding-inline: 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--c-text-2);
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease), border-color var(--c-fast) var(--c-ease);
}
:is(.c-sort, .c-tabs) a:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
:is(.c-sort, .c-tabs) a[aria-current] { border-color: color-mix(in srgb, var(--c-violet-2) 35%, transparent); background: color-mix(in srgb, var(--c-violet) 16%, transparent); color: #fff; }
.c-sort a svg { inline-size: 16px; block-size: 16px; }
.c-sort a[aria-current] svg { color: var(--c-amber); }
.c-tabs { padding-block: 2px; }
.c-windows { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; order: 3; }
.c-windows a { display: inline-flex; align-items: center; min-block-size: 30px; padding-inline: 12px; border-radius: 999px; color: var(--c-text-3); font-size: 0.8rem; font-weight: 650; text-decoration: none; }
.c-windows a:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
.c-windows a[aria-current] { background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px var(--c-line-2); color: #fff; }
.c-feed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.c-language-filter { position: relative; }
.c-language-filter summary { display: inline-flex; align-items: center; gap: 4px; min-block-size: 36px; padding-inline: 10px; border-radius: 999px; color: var(--c-text-3); font-size: 0.84rem; cursor: pointer; list-style: none; }
.c-language-filter summary::-webkit-details-marker { display: none; }
.c-language-filter summary:hover { background: rgb(255 255 255 / 0.05); color: var(--c-text); }
.c-language-filter summary b { color: var(--c-text); font-weight: 650; }
.c-language-filter form { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); z-index: 8; display: grid; gap: 12px; inline-size: min(26rem, 86vw); padding: 16px; border: 1px solid var(--c-line-2); border-radius: 16px; background: var(--c-deck-solid); box-shadow: 0 28px 60px -18px rgb(0 0 0 / 0.85); animation: c-menu-in 200ms var(--c-ease) both; }
.c-language-filter fieldset { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 4px 12px; margin: 0; padding: 0; border: 0; }
/* "N new posts" */
.c-new-banner { position: sticky; inset-block-start: calc(var(--c-bar-h) + 10px); z-index: 6; display: flex; justify-content: center; }
.c-new-strip {
  min-block-size: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--c-grad);
  color: var(--c-action-ink);
  font: 650 0.88rem/1 var(--font-body);
  cursor: pointer;
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--c-violet) 90%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22);
  animation: c-drop-in 420ms var(--c-spring) both;
}
.c-new-strip:hover { background: var(--c-grad-hover); }
@keyframes c-drop-in { from { opacity: 0; transform: translateY(-14px) scale(0.92); } }
/* "Write something": the composer entry. */
.c-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  margin: 0;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-deck);
  box-shadow: var(--c-shadow);
  color: var(--c-text-3);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--c-fast) var(--c-ease), box-shadow var(--c-med) var(--c-ease), transform var(--c-med) var(--c-ease);
}
.c-prompt:hover { border-color: color-mix(in srgb, var(--c-violet-2) 36%, transparent); box-shadow: var(--c-shadow-lift); transform: translateY(-1px); }
.c-prompt .c-avatar { inline-size: 40px; block-size: 40px; }
.c-avatar--icon svg { inline-size: 18px; block-size: 18px; }
.c-prompt-field { flex: 1; min-inline-size: 0; padding: 10px 16px; border-radius: 999px; background: rgb(0 0 0 / 0.22); color: var(--c-text-3); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-prompt-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; min-block-size: 40px; padding-inline: 16px; border-radius: 999px; background: var(--c-grad); color: var(--c-action-ink); font-size: 0.9rem; font-weight: 650; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22); }
.c-prompt-cta svg { inline-size: 18px; block-size: 18px; }
/* A guest's prompt (render.mjs composerPrompt data-guest): an outlined CTA, so the bar's Sign in stays the one filled
   sign-in control on screen. */
.c-prompt[data-guest] .c-prompt-cta { background: transparent; box-shadow: inset 0 0 0 1px var(--c-line-2); color: var(--c-violet-2); }
.c-prompt[data-guest]:hover .c-prompt-cta { background: rgb(255 255 255 / 0.06); color: #fff; }
/* Welcome strip (newcomers, below 1200px where the side column's welcome card is gone). */
.c-welcome-strip {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 12px 12px 18px;
  border: 1px solid color-mix(in srgb, var(--c-violet-2) 28%, transparent);
  border-radius: var(--c-r);
  background: var(--c-deck);
  box-shadow: var(--c-shadow);
}
[dir="rtl"] .c-welcome-strip { padding: 12px 18px 12px 12px; }
.c-welcome-strip p { flex: 1 1 16rem; color: #fff; font-weight: 600; line-height: 1.45; }
.c-welcome-strip .btn { flex: none; }
/* Breadcrumbs */
.c-crumbs { font-size: 0.86rem; }
.c-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.c-crumbs li { display: inline-flex; align-items: center; gap: 2px; min-inline-size: 0; max-inline-size: 100%; }
.c-crumbs a { display: inline-flex; align-items: center; min-block-size: 32px; padding-inline: 8px; border-radius: 8px; color: var(--c-text-3); font-weight: 600; text-decoration: none; }
.c-crumbs a:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
.c-crumbs [aria-current] { display: inline-block; max-inline-size: min(28rem, 62vw); padding-inline: 8px; overflow: hidden; color: var(--c-text); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.c-crumb-sep { display: inline-flex; color: var(--c-text-3); }
.c-crumb-sep svg { inline-size: 14px; block-size: 14px; }
[dir="rtl"] .c-crumb-sep svg { transform: scaleX(-1); }
.c-back { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-block-size: 40px; color: var(--c-text-2); font-weight: 600; text-decoration: none; }
.c-back:hover { color: #fff; }
[dir="rtl"] .c-back svg { transform: scaleX(-1); }
/* Page topic chip ("About: Snake") */
.c-topic { display: inline-flex; align-items: center; gap: 6px; max-inline-size: 100%; padding: 1px 10px 1px 8px; border: 1px solid rgb(0 229 245 / 0.35); border-radius: 999px; background: rgb(0 229 245 / 0.08); color: #8ff3f9; font-size: 0.76rem; font-weight: 700; line-height: 1.7; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-topic svg { flex: none; inline-size: 15px; block-size: 15px; }
a.c-topic:hover { background: rgb(0 229 245 / 0.16); color: #c5fbfd; }
.c-topic-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.c-topic--pick { font-size: 0.9rem; padding-block: 4px; }
.c-topic-pick .c-hint { flex-basis: 100%; }
.c-topic-remove { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; border: 1px solid var(--c-line-2); border-radius: 50%; background: none; color: var(--c-text-2); cursor: pointer; }
.c-topic-remove:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
.c-topic-remove svg { inline-size: 16px; block-size: 16px; }
.c-topic-head { gap: 10px; }
.c-topic-write { justify-self: start; }
.c-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.c-toolbar { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Avatars: a gradient ring per member, the initial on a deep disc ───── */
.c-avatar {
  --ring-a: #a78bfa;
  --ring-b: #ff5ccf;
  --disc: #2a1d6e;
  display: inline-grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--ring-a) 55%, var(--disc)), var(--disc) 78%) padding-box,
    conic-gradient(from var(--ring-turn, 0deg), var(--ring-a), var(--ring-b), var(--ring-a)) border-box;
  color: #fff;
  font: 700 0.85rem/1 var(--font-body);
  text-transform: uppercase;
  box-shadow: 0 2px 10px -3px color-mix(in oklab, var(--ring-a) 70%, transparent);
}
.c-avatar[data-tone="1"] { --ring-a: var(--cyan, #00e5f5); --ring-b: #6d4aff; --disc: #0f2a5a; }
.c-avatar[data-tone="2"] { --ring-a: #ffc94a; --ring-b: #ff7a66; --disc: #4a2410; }
.c-avatar[data-tone="3"] { --ring-a: #b6ff3b; --ring-b: var(--cyan, #00e5f5); --disc: #12382c; }
.c-avatar[data-tone="4"] { --ring-a: #ff5ccf; --ring-b: #ffc94a; --disc: #4b123f; }
.c-avatar[data-tone="5"] { --ring-a: #ff7a66; --ring-b: #a78bfa; --disc: #3d1530; }
.c-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 50%; padding: 1.5px; background: var(--c-bg-2); }
.c-avatar--icon { --ring-a: color-mix(in srgb, var(--c-violet-2) 60%, transparent); --ring-b: color-mix(in srgb, var(--c-violet-2) 20%, transparent); --disc: #1d1748; color: var(--c-text-2); }
@property --ring-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ── Badges next to names (render.mjs renderBadges) ───────────────────── */
.c-flairs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; vertical-align: middle; }
.c-flair {
  --flair-a: #a78bfa;
  --flair-b: #6d4aff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  block-size: 20px;
  padding-inline: 6px 7px;
  border: 1px solid color-mix(in oklab, var(--flair-a) 55%, transparent);
  border-radius: 999px;
  background: linear-gradient(120deg, color-mix(in oklab, var(--flair-a) 30%, var(--c-bg-2)), color-mix(in oklab, var(--flair-b) 30%, var(--c-bg-2)));
  color: #fff;
  font: 700 0.75rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 0 12px -4px color-mix(in oklab, var(--flair-a) 80%, transparent);
}
.c-flair svg, .c-flair img { inline-size: 12px; block-size: 12px; color: color-mix(in oklab, var(--flair-a) 60%, #fff); }
.c-flair img { border-radius: 3px; object-fit: contain; }
.c-flair small { color: color-mix(in oklab, var(--flair-a) 40%, #fff); font-size: 0.75rem; font-weight: 600; opacity: 0.85; }
.c-flair b { font-weight: 750; max-inline-size: 10ch; overflow: hidden; text-overflow: ellipsis; }
.c-flair[data-flair="level"] svg { fill: currentColor; }
.c-flair[data-flair="cps"] { --flair-a: #ffc94a; --flair-b: #ff7a3d; }
.c-flair[data-flair="cps"] svg { fill: currentColor; stroke-width: 1.2; }
.c-flair[data-flair="wheel"] { --flair-a: var(--cyan, #00e5f5); --flair-b: #2fd88f; }
/* A light sweep crosses each badge: always on profiles and the identity card, on hover elsewhere. */
.c-flair::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
  transform: translateX(-130%);
}
:is(.c-member-card, .c-me, .c-bar-menu-me) .c-flair::after { animation: c-flair-sweep 5.5s var(--c-ease) infinite; }
:is(.c-member-card, .c-me, .c-bar-menu-me) .c-flair:nth-child(2)::after { animation-delay: 0.4s; }
:is(.c-member-card, .c-me, .c-bar-menu-me) .c-flair:nth-child(3)::after { animation-delay: 0.8s; }
:is(.c-post, .c-reply):hover .c-flair::after { animation: c-flair-sweep 1.2s var(--c-ease) 1; }
.c-flair[data-flair="wheel"]:hover svg { animation: c-spin 1.4s linear infinite; }
@keyframes c-flair-sweep { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes c-spin { to { transform: rotate(360deg); } }

/* ── Room tags ─────────────────────────────────────────────────────────── */
.c-stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 26px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.c-stamp::before { content: ''; inline-size: 16px; block-size: 16px; flex: none; border-radius: 6px; background: linear-gradient(140deg, var(--stamp), var(--stamp-2)); box-shadow: 0 0 12px -2px color-mix(in oklab, var(--stamp) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.35); transition: transform var(--c-med) var(--c-spring); }
a.c-stamp:hover { color: var(--stamp); }
a.c-stamp:hover::before { transform: rotate(-12deg) scale(1.12); }
.c-pin { display: inline-flex; align-items: center; gap: 4px; color: #8ff7b8; font: 650 0.76rem/1 var(--font-body); }
.c-pin svg { inline-size: 15px; block-size: 15px; }
.c-post-lang { margin-inline-start: auto; color: var(--c-text-3); font-size: 0.75rem; font-weight: 600; }
.c-unseen-label { display: none; }
:is(.c-post[data-unseen="true"]:not([data-seen]) > .c-post-main > .c-byline, .c-reply[data-unseen="true"]:not([data-seen]) > .c-reply-head .c-byline) .c-unseen-label {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-violet-fill);
  color: var(--c-action-ink);
  font: 750 0.75rem/1.6 var(--font-body);
  letter-spacing: 0.04em;
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--c-violet) 70%, transparent);
  animation: c-pop-in 420ms var(--c-spring) both;
}

/* ── Post cards ────────────────────────────────────────────────────────── */
.c-post {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: start;
  gap: 0 8px;
  padding: 14px 20px 8px 8px;
  transition: transform var(--c-med) var(--c-ease), box-shadow var(--c-med) var(--c-ease), border-color var(--c-med) var(--c-ease);
}
.c-post[dir="rtl"] { padding: 14px 8px 8px 20px; }
.c-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--stamp, var(--c-violet)) 34%, transparent); box-shadow: var(--c-shadow-lift); }
.c-card { position: relative; }
.c-card .c-post-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.c-card :is(.c-vote, .c-byline, .c-post-body, .c-media, .c-ticket, .c-external, .c-actions, .c-report) { position: relative; z-index: 2; }
.c-post[data-unseen="true"]:not([data-seen]) { border-color: color-mix(in srgb, var(--c-violet-2) 40%, transparent); }
.c-post-main { display: grid; gap: 8px; min-inline-size: 0; }
.c-vote { display: flex; justify-content: center; padding-block-start: 2px; }
.c-vote-btn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-inline-size: 44px;
  padding: 7px 3px 6px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--c-text-3);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease);
}
.c-vote-btn svg { inline-size: 22px; block-size: 22px; transition: transform var(--c-med) var(--c-spring), filter var(--c-med) var(--c-ease); }
.c-vote-btn b { color: var(--c-text-2); font-size: 0.82rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.c-vote-btn:hover { background: rgb(255 79 147 / 0.12); color: var(--c-like); }
.c-vote-btn:hover svg { transform: scale(1.12); }
.c-vote-btn:hover b { color: var(--c-like); }
.c-vote-btn[aria-pressed="true"], .c-vote-btn[aria-pressed="true"] b { color: var(--c-like); }
.c-vote-btn[aria-pressed="true"] svg { fill: currentColor; filter: drop-shadow(0 0 8px rgb(255 79 147 / 0.7)); }
.c-vote-btn:disabled { cursor: progress; }
/* Byline */
.c-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--c-text-3); font-size: 0.8rem; line-height: 1.4; }
.c-byline time { font-variant-numeric: tabular-nums; }
.c-byline time::before { content: '·'; margin-inline-end: 6px; }
.c-byline .c-stamp { margin-inline-end: 4px; }
.c-author { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; min-block-size: 30px; color: inherit; text-decoration: none; }
.c-author-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-inline-size: 0; }
.c-author b { color: var(--c-text); font-weight: 650; }
a.c-author:hover b { color: #fff; text-decoration: underline; text-decoration-color: var(--c-violet); }
.c-author small { color: var(--c-text-3); font-size: inherit; }
.c-post .c-author small { display: none; }
.c-post--full .c-author small { display: inline; }
.c-post .c-byline .c-avatar { inline-size: 24px; block-size: 24px; font-size: 0.75rem; border-width: 1.5px; }
.c-post .c-flair { block-size: 18px; font-size: 0.75rem; }
/* Title, body */
.c-post-title { margin: 0; color: #fff; font: 650 1.12rem/1.35 var(--font-body); letter-spacing: -0.005em; text-wrap: pretty; }
.c-post-title a { color: inherit; text-decoration: none; }
.c-card .c-post-title a:hover { color: var(--c-violet-2); }
.c-post-body { line-height: 1.68; color: var(--c-text); font-size: 1rem; }
.c-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--c-text-2); font-size: 0.93rem; line-height: 1.6; }
.c-excerpt.c-md pre { overflow: hidden; }
.c-external { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-block-size: 32px; padding-inline: 12px; border: 1px solid var(--c-line); border-radius: 999px; background: rgb(255 255 255 / 0.035); color: var(--c-violet-2); font-size: 0.84rem; font-weight: 650; text-decoration: none; }
.c-external:hover { border-color: var(--c-line-2); color: #fff; }
.c-external svg { inline-size: 16px; block-size: 16px; }
/* Images */
.c-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-block: 2px; }
.c-media[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.c-media[data-count="3"] > :first-child { grid-row: span 2; }
.c-xerox { position: relative; display: block; overflow: hidden; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-bg-2); cursor: zoom-in; }
.c-xerox img { display: block; inline-size: 100%; block-size: 100%; max-block-size: 28rem; object-fit: cover; transition: transform 600ms var(--c-ease); }
.c-xerox:hover img { transform: scale(1.025); }
.c-xerox:focus-visible { outline: 2px solid var(--c-violet-2); outline-offset: 3px; }
.c-card .c-media .c-xerox, .c-card .c-media img { max-block-size: 26rem; }
.c-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
/* Score ticket: a holographic arcade ticket */
.c-ticket {
  --notch: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-self: start;
  inline-size: min(100%, 25rem);
  margin-block: 2px;
  color: #fff;
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.45));
}
.c-ticket-main, .c-ticket-stub { background: linear-gradient(125deg, rgb(255 201 74 / 0.2), rgb(255 92 207 / 0.16) 55%, rgb(0 229 245 / 0.14)), var(--c-bg-2); }
.c-ticket-main {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 22px 12px 16px;
  border-radius: 14px 0 0 14px;
  -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.c-ticket-stub {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  min-inline-size: 5.5rem;
  padding: 12px 16px;
  border-radius: 0 14px 14px 0;
  background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.35) 50%, transparent 50%), linear-gradient(125deg, rgb(255 201 74 / 0.28), rgb(255 92 207 / 0.2));
  background-size: 1px 7px, auto;
  background-repeat: repeat-y, no-repeat;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
[dir="rtl"] .c-ticket-main { border-radius: 0 14px 14px 0; padding: 12px 16px 12px 22px; -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
[dir="rtl"] .c-ticket-stub { border-radius: 14px 0 0 14px; background-position: 100% 0, 0 0; -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.c-ticket-score { display: flex; align-items: baseline; gap: 8px; font-family: var(--c-display); line-height: 0.8; }
.c-ticket-score b { color: #fff; font-size: 2.9rem; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgb(255 201 74 / 0.45); }
.c-ticket-score span { color: var(--c-amber); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.08em; }
.c-ticket-meta { color: var(--c-text-2); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.c-ticket-link { justify-self: start; display: inline-flex; align-items: center; min-block-size: 28px; color: var(--c-amber); font-size: 0.84rem; font-weight: 700; }
.c-ticket-stub svg { color: var(--c-text-2); }
.c-ticket-stub b { color: #fff; font: 600 1.8rem/0.85 var(--c-display); font-variant-numeric: tabular-nums; }
.c-ticket-stub time { color: var(--c-text-2); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
/* Actions */
.c-actions, .c-reply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.c-post .c-actions { margin: 2px 0 0; padding-block: 2px 4px; }
.c-actions > :is(button, a) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 34px;
  padding-inline: 12px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.045);
  color: var(--c-text-2);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease), border-color var(--c-fast) var(--c-ease);
}
.c-actions > :is(button, a):hover { border-color: var(--c-line-2); background: rgb(255 255 255 / 0.08); color: #fff; }
.c-actions b { color: inherit; font-weight: 750; font-variant-numeric: tabular-nums; }
.c-actions svg { inline-size: 17px; block-size: 17px; transition: transform var(--c-med) var(--c-spring); }
.c-actions > button[aria-pressed="true"] { border-color: rgb(255 201 74 / 0.35); background: rgb(255 201 74 / 0.1); color: var(--c-amber); }
.c-actions > button[aria-pressed="true"] svg { fill: currentColor; }
.c-actions button:disabled, .c-reply-actions button:disabled { opacity: 0.6; cursor: progress; }
.c-menu { position: relative; margin-inline-start: auto; }
.c-menu summary { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; color: var(--c-text-3); cursor: pointer; list-style: none; transition: background-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease); }
.c-menu summary:hover, .c-menu[open] summary { background: rgb(255 255 255 / 0.08); color: #fff; }
.c-menu summary::-webkit-details-marker { display: none; }
.c-menu > div { position: absolute; inset-inline-end: 0; inset-block-end: calc(100% + 6px); z-index: 9; display: grid; gap: 2px; min-inline-size: 11rem; padding: 5px; border: 1px solid var(--c-line-2); border-radius: 14px; background: var(--c-deck-solid); box-shadow: 0 24px 50px -16px rgb(0 0 0 / 0.85); animation: c-menu-in 180ms var(--c-ease) both; }
.c-menu > div > * { display: flex; align-items: center; gap: 10px; min-block-size: 40px; padding-inline: 12px; border: 0; border-radius: 9px; background: transparent; color: var(--c-text); font: inherit; font-size: 0.86rem; text-align: start; text-decoration: none; cursor: pointer; }
.c-menu > div > *:hover { background: color-mix(in srgb, var(--c-violet) 14%, transparent); }
.c-menu > div > [data-danger], .c-menu [data-action^="delete"] { color: #ff9aa9; }
.c-menu > div svg { inline-size: 17px; block-size: 17px; color: var(--c-text-3); }
.c-report { display: grid; gap: 12px; padding-block: 12px; border-block-start: 1px solid var(--c-line); }
.c-pinned > .c-post { border-color: rgb(143 247 184 / 0.28); }

/* ── Thread ───────────────────────────────────────────────────────────── */
.c-post--full { gap: 0 10px; padding: 20px 26px 10px 10px; }
.c-post--full[dir="rtl"] { padding: 20px 10px 10px 26px; }
.c-post--full .c-post-main { gap: 12px; }
.c-post--full .c-vote { position: sticky; inset-block-start: calc(var(--c-bar-h) + 18px); }
.c-post--full .c-post-title { font: 600 clamp(2rem, 1.6rem + 1.4vw, 2.8rem)/0.98 var(--c-display); letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) .c-post--full .c-post-title, .c-post--full:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) .c-post-title { font: 700 clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem)/1.35 var(--font-body); text-transform: none; }
.c-post--full .c-post-body { max-inline-size: 42em; font-size: 1.02rem; line-height: 1.72; }
.c-post--full > * { position: relative; }
.c-comments { display: grid; gap: 14px; padding: 18px 22px; }
.c-comments-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.c-comment-sort { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--c-line); border-radius: 999px; background: rgb(0 0 0 / 0.18); }
.c-comment-sort button { min-block-size: 32px; padding-inline: 14px; border: 0; border-radius: 999px; background: none; color: var(--c-text-2); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease); }
.c-comment-sort button:hover { color: #fff; background: rgb(255 255 255 / 0.06); }
.c-comment-sort button[aria-pressed="true"] { background: var(--c-grad); color: var(--c-action-ink); }
.c-comments > .c-join-prompt { padding: 22px; border-radius: 14px; box-shadow: none; background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--c-violet) 18%, transparent), transparent 70%), rgb(0 0 0 / 0.16); }
.c-comments .c-reply-editor { display: grid; gap: 12px; }
.c-comment-tree { display: grid; gap: 4px; }
.c-comment-tree:empty { display: none; }
.c-reply { display: grid; gap: 2px; padding-block-start: 8px; }
.c-reply-head { display: flex; align-items: center; gap: 4px; min-inline-size: 0; }
.c-reply-head .c-byline { flex: 1; min-inline-size: 0; font-size: 0.82rem; }
.c-reply-head .c-avatar { inline-size: 28px; block-size: 28px; font-size: 0.75rem; border-width: 1.5px; }
.c-reply .c-flair { block-size: 18px; font-size: 0.75rem; }
.c-collapse { order: -1; display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--c-text-3); cursor: pointer; transition: color var(--c-fast) var(--c-ease), background-color var(--c-fast) var(--c-ease), transform var(--c-med) var(--c-spring); }
.c-collapse svg { inline-size: 18px; block-size: 18px; }
.c-collapse:hover { background: rgb(255 255 255 / 0.08); color: #fff; transform: scale(1.1); }
.c-reply-content { display: grid; gap: 4px; margin-inline-start: 13px; padding-inline-start: 18px; border-inline-start: 2px solid var(--c-line); transition: border-color var(--c-fast) var(--c-ease); }
.c-reply:has(> .c-reply-head .c-collapse:hover) > .c-reply-content { border-color: var(--c-violet); }
.c-reply-content > .c-post-body { font-size: 0.97rem; line-height: 1.62; }
.c-reply-actions { margin-inline-start: -10px; gap: 2px; }
.c-reply-actions > :is(button, a) { position: relative; display: inline-flex; align-items: center; gap: 6px; min-block-size: 32px; padding-inline: 10px; border: 0; border-radius: 999px; background: transparent; color: var(--c-text-3); font: inherit; font-size: 0.8rem; font-weight: 650; text-decoration: none; cursor: pointer; transition: background-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease); }
.c-reply-actions > :is(button, a):hover { background: rgb(255 255 255 / 0.07); color: #fff; }
.c-reply-actions svg { inline-size: 17px; block-size: 17px; transition: transform var(--c-med) var(--c-spring); }
.c-reply-actions b { color: inherit; font-variant-numeric: tabular-nums; }
.c-reply-actions [data-action="like-reply"][aria-pressed="true"] { color: var(--c-like); }
.c-reply-actions [data-action="like-reply"][aria-pressed="true"] svg { fill: currentColor; }
.c-reply-children { display: grid; gap: 2px; }
.c-reply[data-collapsed] > .c-reply-content { display: none; }
.c-reply[data-collapsed] > .c-reply-head { opacity: 0.7; }
.c-reply--deleted .c-reply-head p { padding-block: 4px; color: var(--c-text-3); font-size: 0.86rem; font-style: italic; }
.c-reply--flat { display: grid; gap: 8px; padding: 16px 20px; }
.c-post-context { display: flex; flex-wrap: wrap; gap: 12px; color: var(--c-text-3); font-size: 0.84rem; }
.c-post-context a { color: var(--c-violet-2); font-weight: 650; }
#reply-target { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--c-text-2); font-size: 0.86rem; }
#reply-target button { min-block-size: 32px; padding-inline: 12px; border: 1px solid var(--c-line-2); border-radius: 999px; background: transparent; color: var(--c-text); font: inherit; cursor: pointer; }
.c-notice { padding: 12px 0; color: var(--c-text-2); font-weight: 650; }
.c-more-posts { display: grid; gap: 8px; padding: 16px 20px; }
.c-more-list { display: grid; margin: 0; padding: 0; list-style: none; }
.c-more-list li + li { border-block-start: 1px solid var(--c-line); }
/* Long titles ellipsize instead of widening the page (grid items default to their min-content width). */
.c-more-posts, .c-more-list, .c-more-list li { min-inline-size: 0; }
.c-more-list a { min-inline-size: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 48px; padding-inline: 8px; border-radius: 10px; color: var(--c-text); text-decoration: none; transition: background-color var(--c-fast) var(--c-ease); }
.c-more-list a:hover { background: rgb(255 255 255 / 0.05); }
.c-more-title { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.c-more-meta { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--c-text-3); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.c-more-meta svg { inline-size: 15px; block-size: 15px; }
.c-more-meta svg:not(:first-child) { margin-inline-start: 8px; }
.c-gone { gap: 16px; }
.c-more { justify-self: center; }

/* ── Room banner ──────────────────────────────────────────────────────── */
.c-room-banner { display: grid; gap: 12px; padding: 0 0 18px; overflow: hidden; border-radius: var(--c-r-lg); }
.c-room-band {
  position: relative;
  block-size: 120px;
  overflow: hidden;
  background:
    radial-gradient(60% 140% at 12% 0%, color-mix(in oklab, var(--stamp) 75%, transparent), transparent 62%),
    radial-gradient(50% 120% at 88% 100%, color-mix(in oklab, var(--stamp-2) 70%, transparent), transparent 65%),
    linear-gradient(120deg, color-mix(in oklab, var(--stamp-2) 40%, var(--c-bg-2)), var(--c-bg-2) 75%);
}
.c-room-band::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / 0.22) 1px, transparent 1.4px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(100deg, transparent 10%, #000 60%, transparent 95%); mask-image: linear-gradient(100deg, transparent 10%, #000 60%, transparent 95%); opacity: 0.45; }
.c-room-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-block-start: -38px; padding-inline: 22px; position: relative; }
.c-room-icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 78px;
  block-size: 78px;
  border: 4px solid var(--c-bg-2);
  border-radius: 24px;
  background: linear-gradient(140deg, var(--stamp), color-mix(in oklab, var(--stamp) 60%, var(--stamp-2)));
  color: var(--stamp-ink);
  font: 600 2.6rem/1 var(--c-display);
  text-transform: uppercase;
  box-shadow: 0 12px 30px -10px color-mix(in oklab, var(--stamp) 75%, transparent), inset 0 2px 0 rgb(255 255 255 / 0.4);
  padding-block-start: 0.1em;
}
.c-room-titles { flex: 1 1 12rem; min-inline-size: 0; padding-block-end: 4px; }
.c-room-title { margin: 0; color: #fff; font: 600 clamp(2rem, 1.6rem + 1.4vw, 2.8rem)/0.95 var(--c-display); letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) .c-room-title { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); line-height: 1.3; }
.c-room-slug { color: var(--stamp); font-size: 0.88rem; font-weight: 650; }
.c-room-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block-end: 4px; }
.c-room-actions .c-menu { margin: 0; }
.c-room-actions .c-menu > div { inset-block-end: auto; inset-block-start: calc(100% + 6px); }
.c-room-actions [data-action="follow-room"][aria-pressed="true"] { border-color: color-mix(in oklab, var(--stamp) 50%, transparent); background: color-mix(in oklab, var(--stamp) 12%, transparent); color: var(--stamp); }
.c-room-game { margin-inline: 22px; }
@media (max-width: 767px) { .c-room-game { margin-inline: 14px; } }
.c-room-description { max-inline-size: 60ch; padding-inline: 22px; color: var(--c-text-2); font-size: 0.96rem; line-height: 1.6; }
.c-room-banner .c-room-counts { display: flex; gap: 22px; padding-inline: 22px; }
.c-room-banner .c-room-counts div { display: flex; align-items: baseline; gap: 6px; }
.c-room-banner .c-room-counts dd { font-size: 1.3rem; }

/* ── Profile ──────────────────────────────────────────────────────────── */
.c-member-card { display: grid; gap: 14px; padding: 0 24px 20px; overflow: hidden; border-radius: var(--c-r-lg); }
.c-member-cover {
  block-size: 110px;
  margin-inline: -24px;
  background:
    radial-gradient(50% 130% at 15% 0%, color-mix(in srgb, var(--c-violet) 65%, transparent), transparent 65%),
    radial-gradient(45% 120% at 85% 10%, rgb(255 92 207 / 0.45), transparent 65%),
    radial-gradient(40% 120% at 55% 120%, rgb(0 229 245 / 0.28), transparent 70%),
    var(--c-bg-2);
}
.c-member-id { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-block-start: -46px; }
.c-member-id > div { display: grid; gap: 6px; min-inline-size: 0; padding-block-end: 2px; }
.c-member-id .c-avatar { inline-size: 96px; block-size: 96px; border-width: 3px; font-size: 2.2rem; box-shadow: 0 0 0 5px var(--c-bg-2), 0 14px 34px -10px color-mix(in oklab, var(--ring-a) 80%, transparent); animation: c-ring-turn 10s linear infinite; }
@keyframes c-ring-turn { to { --ring-turn: 360deg; } }
.c-member-id .c-cutout { font-size: clamp(2rem, 1.7rem + 1.2vw, 2.7rem); }
.c-handle { color: var(--c-text-3); font-weight: 600; }
.c-member-card .c-flair { block-size: 24px; padding-inline: 8px 9px; font-size: 0.76rem; }
.c-member-card .c-flair svg, .c-member-card .c-flair img { inline-size: 14px; block-size: 14px; }
.c-member-bio { max-inline-size: 60ch; color: var(--c-text); line-height: 1.6; white-space: pre-wrap; }
.c-member-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--c-text-3); font-size: 0.86rem; }
.c-member-meta b { color: var(--c-text); }
.c-member-card .c-stats { column-gap: 30px; }
.c-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body[data-page="community"] .c-profile-actions .btn--primary[aria-pressed="true"] { background: rgb(255 255 255 / 0.06); border: 1px solid var(--c-line-2); color: var(--c-text); box-shadow: none; }
.c-score-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ── Notifications / room directory ───────────────────────────────────── */
.c-log { display: grid; gap: 14px; }
.c-log > .c-list:not(:has(> .c-empty)), .c-directory { gap: 0; padding: 4px 20px; }
.c-log > .c-list:has(> .c-empty) { padding: 0; }
.c-notification { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 16px; align-items: start; padding-block: 16px; border-block-start: 1px solid var(--c-line); }
.c-notification:first-child { border-block-start: 0; }
.c-notification > div { display: grid; gap: 4px; }
.c-notification p { color: var(--c-text-2); }
.c-notification p:first-child { color: var(--c-text); line-height: 1.45; }
.c-notification p:first-child a { color: inherit; text-decoration: none; }
.c-notification p:first-child a:hover { text-decoration: underline; text-decoration-color: var(--c-violet); }
.c-notification time { color: var(--c-text-3); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.c-notification .c-muted { font-size: 0.86rem; }
.c-notification-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-inline-size: 60ch; }
.c-notification .c-avatar { inline-size: 40px; block-size: 40px; }
.c-notification[data-read="false"] p:first-child { font-weight: 650; }
.c-notification[data-read="false"]::before { content: ''; position: absolute; inset-block-start: 32px; inset-inline-start: -13px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c-pink); box-shadow: 0 0 10px var(--c-pink); }
.c-notification [data-action="mark-read"] { min-block-size: 32px; padding-inline: 12px; font-size: 0.8rem; }
.c-room-search { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 16px 18px; }
.c-room-search .c-field { flex: 1 1 12rem; }
.c-room-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-block: 16px; border-block-start: 1px solid var(--c-line); }
.c-room-row:first-child { border-block-start: 0; }
.c-room-row:hover .c-room-mark { transform: rotate(-6deg) scale(1.06); }
.c-room-row .c-room-mark { transition: transform var(--c-med) var(--c-spring); }
.c-room-row .c-room-mark { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 15px; color: var(--stamp-ink); font: 600 1.7rem/1 var(--c-display); padding-block-start: 0.1em; text-transform: uppercase; background: linear-gradient(140deg, var(--stamp), var(--stamp-2)); box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--stamp) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.35); }
.c-room-row h2 { margin: 0; font: 650 1.06rem/1.3 var(--font-body); color: #fff; }
.c-room-row h2 a { color: inherit; text-decoration: none; }
.c-room-row h2 a:hover { color: var(--stamp); }
.c-room-row p { margin-block: 4px; color: var(--c-text-2); line-height: 1.5; }
.c-room-row small { color: var(--c-text-3); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.c-room-row small[dir="ltr"] { color: var(--stamp); font-weight: 650; }
.c-directory:has(> .c-empty) { padding: 0; }

/* ── Empty, join, error, loading ──────────────────────────────────────── */
.c-empty, .c-join-prompt { display: grid; gap: 10px; justify-items: center; padding: 34px 22px; text-align: center; overflow: hidden; }
.c-empty > *, .c-join-prompt > * { max-inline-size: 100%; }
.c-empty h2, .c-join-prompt h2, .c-empty h1 { margin: 0; color: #fff; font: 600 1.9rem/1 var(--c-display); letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) :is(.c-empty h2, .c-join-prompt h2, .c-empty h1) { font: 700 1.25rem/1.35 var(--font-body); }
.c-empty p, .c-join-prompt p { max-inline-size: 44ch; color: var(--c-text-2); line-height: 1.55; }
.c-empty .btn, .c-join-prompt .btn { max-inline-size: 100%; white-space: normal; text-align: center; margin-block-start: 6px; }
.c-empty--error .c-error { color: #ff9aa9; font-weight: 650; }
/* Illustration: a small planet with an orbiting moon and twinkling stars, around the state's icon. */
.c-art { --art-a: #a78bfa; --art-b: #6d4aff; position: relative; inline-size: 150px; block-size: 112px; margin-block-end: 4px; }
.c-art[data-art="search"] { --art-a: var(--cyan, #00e5f5); --art-b: #1a8cff; }
.c-art[data-art="saved"], .c-art[data-art="scores"] { --art-a: #ffc94a; --art-b: #ff7a3d; }
.c-art[data-art="bell"] { --art-a: #ff5ccf; --art-b: #b03bff; }
.c-art[data-art="home"], .c-art[data-art="rooms"] { --art-a: #b6ff3b; --art-b: #2fd88f; }
.c-art-planet {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  inline-size: 58px;
  block-size: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in oklab, var(--art-a) 60%, #fff), var(--art-a) 30%, var(--art-b) 62%, color-mix(in oklab, var(--art-b) 40%, var(--c-bg-2)) 100%);
  box-shadow: 0 0 34px -2px color-mix(in oklab, var(--art-a) 70%, transparent), inset -7px -9px 16px rgb(0 0 0 / 0.35), inset 3px 4px 8px rgb(255 255 255 / 0.25);
  color: #fff;
  animation: c-float 5s ease-in-out infinite;
}
.c-art-planet svg { inline-size: 24px; block-size: 24px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4)); }
.c-art-orbit { position: absolute; inset: 50% auto auto 50%; border-radius: 50%; pointer-events: none; }
.c-art-orbit:first-of-type { inline-size: 142px; block-size: 44px; margin: -22px 0 0 -71px; border: 1.5px solid color-mix(in oklab, var(--art-a) 45%, transparent); transform: rotate(-16deg); }
.c-art-orbit:nth-of-type(2) { inline-size: 96px; block-size: 96px; margin: -48px 0 0 -48px; border: 1px dashed color-mix(in oklab, var(--art-a) 35%, transparent); animation: c-spin 14s linear infinite; }
.c-art-orbit:nth-of-type(2)::after { content: ''; position: absolute; inset-block-start: -4px; inset-inline-start: 50%; inline-size: 9px; block-size: 9px; margin-inline-start: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px var(--art-a), 0 0 4px #fff; }
.c-art i { position: absolute; inline-size: 3px; block-size: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: c-twinkle 3.2s ease-in-out infinite; }
.c-art i:nth-of-type(1) { inset: 10px auto auto 14px; }
.c-art i:nth-of-type(2) { inset: 20px 12px auto auto; animation-delay: 1.1s; inline-size: 2px; block-size: 2px; }
.c-art i:nth-of-type(3) { inset: auto 26px 8px auto; animation-delay: 2s; }
@keyframes c-float { 50% { transform: translateY(-5px); } }
@keyframes c-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.2); } }
/* Skeletons while a view loads (no server markup yet). */
.c-loading { display: grid; gap: 14px; }
.c-loading-sheet {
  position: relative;
  display: block;
  overflow: hidden;
  block-size: 148px;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background:
    radial-gradient(circle 13px at 34px 30px, rgb(255 255 255 / 0.08) 98%, transparent) no-repeat,
    linear-gradient(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.08)) 58px 24px / 28% 12px no-repeat,
    linear-gradient(rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.07)) 58px 52px / 70% 16px no-repeat,
    linear-gradient(rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.05)) 58px 84px / 86% 10px no-repeat,
    linear-gradient(rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.05)) 58px 104px / 58% 10px no-repeat,
    var(--c-deck);
}
.c-loading-sheet::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--c-violet-2) 9%, transparent) 50%, transparent 80%); transform: translateX(-100%); animation: c-shimmer 1.5s var(--c-ease) infinite; }
.c-loading-sheet:nth-child(2)::after { animation-delay: 120ms; }
.c-loading-sheet:nth-child(3)::after { animation-delay: 240ms; }
@keyframes c-shimmer { to { transform: translateX(100%); } }
.c-loading p, .c-loading .loading { color: var(--c-text-3); font-size: 0.85rem; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.c-editor { display: grid; gap: 16px; }
.c-feed > .c-editor, .c-settings-block { padding: 22px; }
.c-settings-block { display: grid; gap: 16px; scroll-margin-block-start: calc(var(--c-bar-h) + 16px); }
.c-settings-block > h2 { margin: 0; padding-block-end: 12px; border-block-end: 1px solid var(--c-line); color: #fff; font: 600 1.6rem/1 var(--c-display); letter-spacing: 0.01em; text-transform: uppercase; }
:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) .c-settings-block > h2 { font: 700 1.1rem/1.35 var(--font-body); }
.c-settings-block > .c-editor { padding: 0; }
.c-settings-index { display: flex; flex-wrap: wrap; gap: 6px; }
.c-settings-index a { display: inline-flex; align-items: center; min-block-size: 34px; padding-inline: 14px; border: 1px solid var(--c-line); border-radius: 999px; background: rgb(255 255 255 / 0.04); color: var(--c-text-2); font-size: 0.86rem; font-weight: 650; text-decoration: none; }
.c-settings-index a:hover { border-color: var(--c-line-2); color: #fff; }
.c-field { display: grid; gap: 6px; }
.c-field > span:first-child { color: var(--c-text); font-size: 0.92rem; font-weight: 650; }
.community :is(.c-field, .c-room-search) :is(input:not([type="file"]), textarea, select) {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border-control);
  border-radius: 12px;
  background: var(--c-bg-2);
  color: var(--c-text);
  font: inherit;
  font-size: 16px;
  transition: border-color var(--c-fast) var(--c-ease), box-shadow var(--c-med) var(--c-ease), background-color var(--c-fast) var(--c-ease);
}
.community :is(.c-field, .c-room-search) :is(input, textarea, select):hover { border-color: color-mix(in srgb, var(--c-violet-2) 50%, transparent); }
.community :is(.c-field, .c-room-search, .c-md-write) :is(input, textarea, select):focus-visible { outline: none; border-color: var(--c-violet-2); background: color-mix(in srgb, var(--c-bg-2) 85%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-violet) 20%, transparent); }
.c-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c9bcff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-inline-end: 40px !important; }
[dir="rtl"] .c-field select { background-position: left 14px center !important; padding-inline: 14px 40px !important; }
.c-field select option { background: var(--c-deck-solid); color: var(--c-text); }
.c-field input[readonly] { color: var(--c-text-3); background: rgb(255 255 255 / 0.03) !important; }
.c-field textarea { resize: vertical; line-height: 1.6; }
.c-field ::placeholder { color: var(--c-text-3); }
.c-check { display: flex; align-items: flex-start; gap: 10px; min-block-size: 32px; color: var(--c-text); line-height: 1.45; cursor: pointer; }
.c-check input { inline-size: 18px; block-size: 18px; margin: 2px 0 0; flex: none; accent-color: var(--c-violet); }
.c-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-block-start: 4px; }
.c-form-actions > a { display: inline-flex; align-items: center; min-block-size: 40px; color: var(--c-text-2); font-weight: 600; }
.c-form-error { font-weight: 650; }
:is(.c-field input, .c-field select, .c-md-write textarea)[aria-invalid="true"] { border-color: #ff8a9a !important; box-shadow: 0 0 0 1px #ff8a9a; }
.c-language-grid, .c-prefs { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 4px 12px; margin: 0; padding: 12px 16px 16px; border: 1px solid var(--c-line); border-radius: 14px; background: rgb(0 0 0 / 0.14); }
.c-prefs { grid-template-columns: 1fr; }
.c-language-grid legend, .c-prefs legend { padding-inline: 6px; color: var(--c-text); font-weight: 650; }
.c-settings-block .c-prefs > legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-avatar-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.c-avatar-field { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.c-avatar-field > legend { padding: 0; margin-block-end: 6px; color: var(--c-text); font-size: 0.92rem; font-weight: 650; }
.c-avatar-editor .c-avatar { inline-size: 68px; block-size: 68px; font-size: 1.5rem; }
.c-file-button { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.c-file-button:focus-within { outline: 2px solid var(--c-violet-2); outline-offset: 2px; }
.c-file-button[data-disabled] { opacity: 0.45; cursor: not-allowed; }
.c-composer-rooms { display: grid; gap: 8px; }
.c-composer-rooms > summary { inline-size: fit-content; padding-block: 4px; color: var(--c-text-2); font-size: 0.86rem; font-weight: 650; cursor: pointer; }
.c-composer-rooms > summary:hover { color: #fff; }
.c-composer-room-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
/* Markdown editor */
.c-md-editor { display: grid; gap: 8px; min-inline-size: 0; }
.c-md-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.c-md-label { color: var(--c-text); font-size: 0.92rem; font-weight: 650; }
.c-md-tabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--c-line); border-radius: 999px; background: rgb(0 0 0 / 0.18); }
.c-md-tabs [role="tab"] { min-block-size: 32px; padding-inline: 14px; border: 0; border-radius: 999px; background: none; color: var(--c-text-2); font: 650 0.82rem/1 var(--font-body); cursor: pointer; transition: background-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease); }
.c-md-tabs [role="tab"]:hover { color: #fff; }
.c-md-tabs [aria-selected="true"] { background: color-mix(in srgb, var(--c-violet) 22%, transparent); color: #fff; }
.c-md-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--border-control); border-block-end: 0; border-radius: 12px 12px 0 0; background: rgb(255 255 255 / 0.04); }
.c-md-tool { display: grid; place-items: center; inline-size: 38px; block-size: 38px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--c-text-2); cursor: pointer; transition: background-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease); }
.c-md-tool svg { inline-size: 18px; block-size: 18px; }
.c-md-tool:hover:not(:disabled) { background: color-mix(in srgb, var(--c-violet) 16%, transparent); color: #fff; }
.c-md-tool:active:not(:disabled) { transform: scale(0.94); }
.c-md-tool:focus-visible { outline: 2px solid var(--c-violet-2); outline-offset: -2px; }
.c-md-tool:disabled { opacity: 0.4; cursor: default; }
.c-md-write { position: relative; }
.c-md-write textarea, .c-md-preview { display: block; inline-size: 100%; padding: 12px 14px; border: 1px solid var(--border-control); border-radius: 0 0 12px 12px; background: color-mix(in srgb, var(--c-bg) 60%, transparent); color: var(--c-text); font: inherit; font-size: 16px; line-height: 1.6; }
.c-md-write textarea { min-block-size: 9.6em; resize: vertical; transition: border-color var(--c-fast) var(--c-ease), box-shadow var(--c-med) var(--c-ease); }
.c-md-write textarea::placeholder { color: var(--c-text-3); }
.c-md-preview { min-block-size: 9.6em; overflow-wrap: anywhere; }
.c-md-preview:focus-visible { outline: 2px solid var(--c-violet-2); outline-offset: 2px; }
.c-md-empty { color: var(--c-text-3); font-style: italic; }
.c-md-help { font-size: 0.82rem; overflow-wrap: anywhere; }
.c-reply-editor .c-md-write textarea { min-block-size: 6.4em; }
.c-mention-list { position: absolute; z-index: 9; inset-block-start: calc(100% + 4px); inset-inline-start: 12px; min-inline-size: 12rem; max-block-size: 15rem; overflow-y: auto; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--c-line-2); border-radius: 12px; background: var(--c-deck-solid); box-shadow: 0 20px 40px -14px rgb(0 0 0 / 0.85); }
.c-mention-list li { display: flex; align-items: center; min-block-size: 40px; padding-inline: 12px; border-radius: 8px; color: var(--c-text); font-weight: 650; cursor: pointer; }
.c-mention-list li:hover { background: rgb(255 255 255 / 0.06); }
.c-mention-list li[aria-selected="true"] { background: color-mix(in srgb, var(--c-violet) 24%, transparent); }
/* Composer attachments */
.c-attach, .c-score-pick { display: grid; gap: 12px; padding: 16px 16px 18px; border: 1px dashed var(--border-control); border-radius: 14px; background: rgb(0 0 0 / 0.12); transition: border-color var(--c-fast) var(--c-ease), background-color var(--c-fast) var(--c-ease); }
:is(.c-attach, .c-score-pick) h2, .c-ticket-group h3 { margin: 0; color: #fff; font: 700 0.95rem/1.3 var(--font-body); }
.c-attach-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.c-attach-count { color: var(--c-text-3); font-size: 0.86rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.c-attach.is-dragging { border-style: solid; border-color: var(--c-violet-2); background: color-mix(in srgb, var(--c-violet) 12%, transparent); }
.c-attach-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.c-drop-note { color: var(--c-text-3); font-size: 0.84rem; }
@media (hover: none) { .c-drop-note { display: none; } }
.c-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.c-thumbs:empty { display: none; }
.c-thumb { position: relative; display: grid; gap: 6px; padding: 6px 6px 2px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-deck-2); animation: c-pop-in 320ms var(--c-spring) both; }
.c-thumb-frame { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--c-bg-2); }
.c-thumb-frame img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity var(--c-med) var(--c-ease), filter var(--c-med) var(--c-ease); }
.c-thumb:is([data-status="uploading"], [data-status="preparing"]) img { opacity: 0.55; filter: saturate(0.3); }
.c-thumb[data-status="error"] img { opacity: 0.35; filter: grayscale(1); }
.c-thumb-blank { color: var(--c-text-3); }
.c-thumb-state { display: grid; gap: 4px; color: var(--c-text-2); font-size: 0.8rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.c-thumb-state.c-error { color: #ff9aa9; font-weight: 650; }
.c-thumb progress { inline-size: 100%; block-size: 6px; border: 0; border-radius: 6px; background: rgb(255 255 255 / 0.1); -webkit-appearance: none; appearance: none; overflow: hidden; }
.c-thumb progress::-webkit-progress-bar { background: rgb(255 255 255 / 0.1); }
.c-thumb progress::-webkit-progress-value { background: var(--c-grad); transition: inline-size var(--c-fast) linear; }
.c-thumb progress::-moz-progress-bar { background: var(--c-grad); }
.c-thumb-tools { display: flex; align-items: center; gap: 2px; margin-inline: -2px; }
.c-thumb-tool { display: grid; place-items: center; inline-size: 38px; block-size: 38px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--c-text-2); cursor: pointer; }
.c-thumb-tool svg { inline-size: 18px; block-size: 18px; }
.c-thumb-tool:hover:not(:disabled) { background: rgb(255 255 255 / 0.08); color: #fff; }
.c-thumb-tool:focus-visible { outline: 2px solid var(--c-violet-2); outline-offset: -2px; }
.c-thumb-tool:disabled { opacity: 0.3; cursor: default; }
.c-thumb-remove { margin-inline-start: auto; color: #ff9aa9; }
[dir="rtl"] .c-thumb-tool:not(.c-thumb-remove) svg { scale: -1 1; }
.c-score-attached { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.c-score-attached .c-ticket { margin: 0; }
.c-ticket-picker { display: grid; gap: 16px; }
.c-ticket-group h3 { margin-block-end: 8px; color: var(--c-text-2); font-size: 0.86rem; }
.c-ticket-group ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.c-ticket-pick { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 6px; row-gap: 2px; inline-size: 100%; min-block-size: 44px; padding: 12px 18px; border: 1px solid rgb(255 201 74 / 0.25); border-radius: 14px; background: linear-gradient(125deg, rgb(255 201 74 / 0.16), rgb(255 92 207 / 0.1)), var(--c-bg-2); color: #fff; font: inherit; text-align: start; cursor: pointer; transition: transform var(--c-med) var(--c-spring), border-color var(--c-fast) var(--c-ease), box-shadow var(--c-med) var(--c-ease); }
.c-ticket-pick:hover { transform: translateY(-2px) rotate(-0.6deg); border-color: rgb(255 201 74 / 0.6); box-shadow: 0 14px 30px -14px rgb(255 201 74 / 0.6); }
.c-ticket-pick b { font: 600 2rem/0.85 var(--c-display); font-variant-numeric: tabular-nums; }
.c-ticket-pick-unit { color: var(--c-amber); font: 600 1rem/1 var(--c-display); letter-spacing: 0.08em; }
.c-ticket-pick-meta, .c-ticket-pick time { grid-column: 1 / -1; color: var(--c-text-2); font-size: 0.8rem; font-variant-numeric: tabular-nums; text-transform: capitalize; }

/* ── Markdown ──────────────────────────────────────────────────────────── */
.c-post-body.c-md, .c-md { white-space: normal; overflow-wrap: anywhere; }
.c-md > * + * { margin-block-start: 0.8em; }
.c-md :is(p, ul, ol, blockquote, pre) { margin-block-end: 0; }
.c-md strong { color: #fff; font-weight: 700; }
.c-md del { color: var(--c-text-3); text-decoration-thickness: 2px; }
.c-md code { padding: 0.1em 0.4em; border: 1px solid var(--c-line); border-radius: 6px; background: rgb(0 0 0 / 0.3); color: #e8e2ff; font-family: var(--font-mono); font-size: 0.86em; }
.c-md pre { overflow-x: auto; padding: 12px 16px; border: 1px solid var(--c-line); border-radius: 12px; background: rgb(4 3 16 / 0.7); direction: ltr; text-align: left; unicode-bidi: isolate; white-space: pre; tab-size: 2; line-height: 1.55; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--c-violet) 30%, transparent) transparent; }
.c-md pre code { padding: 0; border: 0; background: none; font-size: 0.86rem; }
.c-md blockquote { margin-inline: 0; padding: 8px 16px; border: 0; border-radius: 0 12px 12px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-violet) 16%, transparent), color-mix(in srgb, var(--c-violet) 3%, transparent)); color: var(--c-text-2); box-shadow: inset 2px 0 0 var(--c-violet); }
[dir="rtl"] .c-md blockquote, .c-md[dir="rtl"] blockquote { border-radius: 12px 0 0 12px; background: linear-gradient(270deg, color-mix(in srgb, var(--c-violet) 16%, transparent), color-mix(in srgb, var(--c-violet) 3%, transparent)); box-shadow: inset -2px 0 0 var(--c-violet); }
.c-md :is(ul, ol) { padding-inline-start: 1.4em; }
.c-md li + li { margin-block-start: 0.25em; }
.c-md li > :is(ul, ol) { margin-block-start: 0.25em; }
.c-md li::marker { color: var(--c-violet-2); font-weight: 700; }
.c-md a, .c-md-link { color: var(--c-violet-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c-violet-2) 45%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.c-md a:hover, .c-md-link:hover { color: #fff; text-decoration-color: var(--c-pink); text-decoration-thickness: 2px; }
.c-mention { color: var(--c-cyan) !important; font-weight: 650; text-decoration: none !important; }
.c-mention:hover { text-decoration: underline !important; }
.c-md :is(.c-md-link, .c-mention):focus-visible { outline: 2px solid var(--c-violet-2); outline-offset: 2px; border-radius: 4px; }
.c-spoiler { padding-inline: 0.25em; border-radius: 5px; background: repeating-linear-gradient(135deg, #2a2360 0 6px, #241e55 6px 12px); color: transparent; box-decoration-break: clone; -webkit-box-decoration-break: clone; cursor: pointer; transition: background-color var(--c-med) var(--c-ease), color var(--c-med) var(--c-ease); }
.c-spoiler:not(.is-revealed) * { color: transparent !important; pointer-events: none; text-decoration-color: transparent; }
.c-spoiler:not(.is-revealed) ::selection, .c-spoiler:not(.is-revealed)::selection { color: transparent; background: transparent; }
.c-spoiler:not(.is-revealed) code { border-color: transparent; background: transparent; }
.c-spoiler:not(.is-revealed):hover { background: repeating-linear-gradient(135deg, #352c78 0 6px, #2d2569 6px 12px); }
.c-spoiler:focus-visible { outline: 2px solid var(--c-violet-2); outline-offset: 2px; }
.c-spoiler.is-revealed { background: color-mix(in srgb, var(--c-violet) 16%, transparent); color: inherit; cursor: auto; }
.c-excerpt.c-md { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Original-image viewer ────────────────────────────────────────────── */
.c-lightbox { margin: auto; max-inline-size: min(96vw, 1400px); max-block-size: 94dvh; padding: 8px; border: 1px solid var(--c-line-2); border-radius: 18px; background: var(--c-bg-2); box-shadow: 0 40px 100px -30px rgb(0 0 0 / 0.95); overflow: visible; animation: c-pop-in 320ms var(--c-spring) both; }
.c-lightbox::backdrop { background: rgb(4 3 16 / 0.84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.c-lightbox figure { margin: 0; }
.c-lightbox img { display: block; max-inline-size: calc(min(96vw, 1400px) - 16px); max-block-size: calc(94dvh - 16px); inline-size: auto; block-size: auto; object-fit: contain; border-radius: 12px; }
.c-lightbox-close { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--c-line-2); border-radius: 50%; background: rgb(13 10 38 / 0.8); color: #fff; cursor: pointer; }
.c-lightbox-close:hover { border-color: transparent; background: var(--c-violet-fill); color: var(--c-action-ink); }

/* ── Sign-in gate (guests pressing a write control; actions.mjs) ──────── */
.c-gate { position: fixed; z-index: 90; top: var(--gate-y, auto); left: var(--gate-x, 12px); }
.c-gate-card {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: center;
  inline-size: min(22rem, calc(100vw - 24px));
  padding: 18px 20px 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-violet-2) 35%, transparent);
  border-radius: 20px;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--c-violet) 32%, transparent), transparent 70%), rgb(18 14 46 / 0.92);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 70px -20px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.03) inset;
  text-align: center;
  animation: c-gate-in 320ms var(--c-spring) both;
}
.c-gate[data-anchor="above"] .c-gate-card { transform-origin: bottom center; }
.c-gate-card .c-art { inline-size: 120px; block-size: 84px; margin: -4px 0 0; transform: scale(0.82); }
.c-gate-card h2 { margin: 0; color: #fff; font: 600 1.65rem/1 var(--c-display); letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) .c-gate-card h2 { font: 700 1.1rem/1.35 var(--font-body); }
.c-gate-card p { color: var(--c-text-2); font-size: 0.88rem; line-height: 1.5; }
.c-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 6px; }
.c-gate[data-anchor="sheet"] { top: auto; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }
.c-gate[data-anchor="sheet"] .c-gate-card { inline-size: 100%; max-inline-size: 30rem; animation-name: c-sheet-in; }
@keyframes c-gate-in { from { opacity: 0; transform: translateY(-8px) scale(0.94); } }
@keyframes c-sheet-in { from { opacity: 0; transform: translateY(40px); } }

/* ── Phone tab bar (off above 767px) ───────────────────────────────────── */
.c-tabbar { display: none; }

/* ── Motion: view swaps, entrances, reactions ─────────────────────────── */
@keyframes c-pop-in { from { opacity: 0; transform: scale(0.9); } }
#community-feed { view-transition-name: c-feed; }
#community-aside { view-transition-name: c-aside; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(c-feed), ::view-transition-group(c-aside) { animation-duration: 260ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(c-feed) { animation: c-vt-out 130ms ease-in both; }
::view-transition-new(c-feed) { animation: c-vt-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
::view-transition-old(c-aside) { animation: c-fade-out 120ms ease-in both; }
::view-transition-new(c-aside) { animation: c-fade-in 260ms ease-out both; }
@keyframes c-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes c-vt-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes c-fade-out { to { opacity: 0; } }
@keyframes c-fade-in { from { opacity: 0; } }
/* Fallback entrance (no View Transitions): the feed's first blocks rise in turn. */
.c-feed.c-enter > *, .c-feed.c-enter .c-list > * { animation: c-vt-in 380ms var(--c-ease) both; }
.c-feed.c-enter > :nth-child(2), .c-feed.c-enter .c-list > :nth-child(1) { animation-delay: 40ms; }
.c-feed.c-enter > :nth-child(3), .c-feed.c-enter .c-list > :nth-child(2) { animation-delay: 80ms; }
.c-feed.c-enter > :nth-child(4), .c-feed.c-enter .c-list > :nth-child(3) { animation-delay: 120ms; }
.c-feed.c-enter .c-list > :nth-child(n + 4) { animation-delay: 160ms; }
/* New items after "Show new" slide in from the top. */
.is-fresh { animation: c-feed-in 620ms var(--c-ease) both; animation-delay: calc(var(--fresh-order, 0) * 70ms); }
@keyframes c-feed-in { from { opacity: 0; transform: translateY(-18px) scale(0.98); } }
.c-ticket.is-printing { animation: c-ticket-print 620ms var(--c-ease) 300ms both; }
.c-ticket.is-printing .c-ticket-stub { animation: c-ticket-tear 420ms var(--c-spring) 900ms both; }
[dir="rtl"] .c-ticket.is-printing .c-ticket-stub { animation-name: c-ticket-tear-rtl; }
@keyframes c-ticket-print { from { clip-path: inset(0 0 100% 0); transform: translateY(-12px); } to { clip-path: inset(-30px); transform: none; } }
@keyframes c-ticket-tear { from { transform: rotate(0deg); } 50% { transform: rotate(4deg) translateX(3px); } to { transform: none; } }
@keyframes c-ticket-tear-rtl { from { transform: rotate(0deg); } 50% { transform: rotate(-4deg) translateX(-3px); } to { transform: none; } }
/* Like: the heart pops and a ring of sparks bursts out (motion.mjs celebrate). */
.is-like-pop svg { animation: c-heart 520ms var(--c-spring); }
@keyframes c-heart { 0% { transform: scale(1); } 30% { transform: scale(0.72); } 62% { transform: scale(1.38); } 100% { transform: scale(1); } }
.c-burst { position: absolute; inset-block-start: 18px; inset-inline-start: 50%; inline-size: 0; block-size: 0; pointer-events: none; z-index: 3; }
.c-reply-actions .c-burst { inset-block-start: 50%; inset-inline-start: 18px; }
.c-burst::before { content: ''; position: absolute; inset: -14px; border: 2px solid var(--c-like); border-radius: 50%; transform: scale(0.2); opacity: 0.9; animation: c-burst-ring 520ms var(--c-ease) forwards; }
.c-burst i { position: absolute; inline-size: 6px; block-size: 6px; margin: -3px; border-radius: 50%; background: var(--c-like); transform: rotate(var(--a)) translateY(0); animation: c-spark 620ms var(--c-ease) forwards; }
.c-burst i:nth-child(1) { --a: 0deg; }
.c-burst i:nth-child(2) { --a: 45deg; background: var(--c-amber); }
.c-burst i:nth-child(3) { --a: 90deg; }
.c-burst i:nth-child(4) { --a: 135deg; background: var(--c-violet-2); }
.c-burst i:nth-child(5) { --a: 180deg; }
.c-burst i:nth-child(6) { --a: 225deg; background: var(--c-amber); }
.c-burst i:nth-child(7) { --a: 270deg; }
.c-burst i:nth-child(8) { --a: 315deg; background: var(--c-cyan); }
@keyframes c-spark { 0% { transform: rotate(var(--a)) translateY(-6px) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-32px) scale(0.2); opacity: 0; } }
@keyframes c-burst-ring { to { transform: scale(1.5); opacity: 0; border-width: 0; } }
.is-save-pop svg { animation: c-save 520ms var(--c-spring); }
@keyframes c-save { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-5px) scale(1.25); } 100% { transform: none; } }
.is-follow-pop { animation: c-follow 480ms var(--c-spring); }
@keyframes c-follow { 0% { transform: scale(1); } 30% { transform: scale(0.92); } 70% { transform: scale(1.05); } 100% { transform: scale(1); } }
.is-tick { display: inline-block; animation: c-tick 340ms var(--c-spring); }
@keyframes c-tick { from { opacity: 0; transform: translateY(-70%); } }

/* ── Tablet: two columns, the side column under the feed ───────────────── */
@media (max-width: 1199px) {
  body[data-page="community"] { --c-rail-w: 236px; }
  .c-layout { grid-template-columns: var(--c-rail-w) minmax(0, 1fr) minmax(0, var(--c-feed-w)) minmax(0, 1fr); }
  .c-aside { grid-column: 3; grid-row: 2; position: static; max-block-size: none; overflow: visible; padding: 0 0 72px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  [dir="rtl"] .c-aside { padding: 0 0 72px; }
  .c-aside .app-footer { grid-column: 1 / -1; }
  .c-main { padding-block-end: 24px; }
  .c-aside [data-identity], .c-aside .c-note { display: none; }
  .c-post--full .c-vote { position: static; }
  .c-bar-inner { display: flex; gap: 16px; }
  .c-bar-brand { flex: 0 0 auto; }
  .c-bar-search { flex: 1 1 auto; max-inline-size: var(--c-feed-w); margin-inline: auto; }
  .c-bar-actions { flex: none; }
}
@media (min-width: 1200px) { .c-welcome-strip { display: none; } }
@media (max-width: 1023px) {
  .c-layout { column-gap: 18px; }
  .c-bar-home { display: none; }
  .c-bar-sep { display: none; }
  .c-main { grid-column: 2 / 4; padding-inline-end: 18px; }
  .c-aside { grid-column: 2 / 4; padding-inline-end: 18px; }
  [dir="rtl"] :is(.c-main, .c-aside) { padding-inline-end: 18px; }
  .c-bar-create:is(.btn--primary, .btn--ghost) { inline-size: 42px; padding: 0; justify-content: center; }
  .c-bar-create span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Phones: one column and the bottom tab bar ─────────────────────────── */
@media (max-width: 767px) {
  /* --c-tabbar-h: the fixed bottom tab bar (58px tabs + its 1px top edge). Whatever ends a phone page (the side column
     with the footer, or the footer itself before the SPA moves it there) clears it plus the safe-area inset, so the
     last post, comment, setting or footer link is never under the bar. */
  body[data-page="community"] { --c-bar-h: 58px; --c-r-lg: 20px; --c-tabbar-h: 59px; }
  .c-layout { display: block; min-block-size: 0; }
  .c-rail { display: none; }
  .c-main { padding: 10px 0; }
  .c-feed { gap: 10px; }
  .c-list, .c-pinned { gap: 10px; }
  .c-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 8px 0 calc(var(--c-tabbar-h) + 24px + env(safe-area-inset-bottom)); }
  [dir="rtl"] .c-aside { padding: 8px 0 calc(var(--c-tabbar-h) + 24px + env(safe-area-inset-bottom)); }
  .c-bar-inner { display: flex; gap: 6px; padding-inline: 12px; }
  .c-bar-brand { flex: 1 1 auto; min-inline-size: 0; padding: 0; gap: 8px; }
  .c-bar-back { display: none; }
  .c-bar-logo .logo { font-size: 1.36rem; }
  .c-bar-home { gap: 6px; }
  .c-bar-logo::after { display: none; }
  .c-bar-home { display: inline-flex; font-size: 0.82rem; }
  .c-bar-sep { display: block; block-size: 18px; }
  /* Phones: × and the Manga Yugen logo only (the name stays for screen readers). The wordmark stays at every phone
     width (Z2: with the 36px bar controls it clears the search key by 13px at 320, en/de/sa/hi, guest and member). */
  .c-bar-partner { gap: 6px; }
  .c-bar-partner .partner-mark { min-inline-size: 28px; justify-content: center; }
  .c-bar-partner .partner-mark__name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .c-bar-actions { padding: 0; gap: 2px; }
  .c-bar-actions > .c-bar-icon:not(.c-bar-menu-btn), .c-bar-create { display: none !important; }
  .c-bar .c-bar-join { min-block-size: 36px; padding-inline: 14px; font-size: 0.85rem; }
  /* Search: a 42px icon that opens over the bar while its field has focus. */
  .c-bar-search { position: static; flex: none; inline-size: 42px; block-size: 42px; max-inline-size: none; margin: 0; }
  .c-bar-search > svg { position: relative; inset-inline-start: auto; margin-inline: auto; color: var(--c-text-2); inline-size: 20px; block-size: 20px; }
  .c-bar-search input { position: absolute; inset-block-start: 8px; inset-inline-end: 96px; inline-size: 42px; block-size: 42px; padding: 0; opacity: 0; cursor: pointer; }
  .c-bar-search:focus-within input { inset-inline: 12px; inline-size: auto; padding-inline: 44px 16px; opacity: 1; cursor: text; z-index: 2; }
  .c-bar-search:focus-within > svg { position: absolute; inset-block-start: 19px; inset-inline-start: 26px; z-index: 3; margin: 0; }
  /* Closed, the invisible field covers the magnifier itself (the svg takes no taps), whatever the actions' width;
     focused, it becomes the overlay above. */
  .c-bar-search:not(:focus-within) { position: relative; }
  .c-bar-search:not(:focus-within) input { inset: 0; inline-size: 100%; }
  /* The composer is a compact app row; long translated prompts do not inflate a pill. */
  .c-prompt { gap: 8px; border-radius: var(--c-r); }
  .c-prompt-field { padding-inline: 10px; background: transparent; }
  .c-prompt-cta { min-block-size: var(--tap); padding-inline: 12px; }
  /* Keep the first-use instruction readable beside the sign-in action on phones. */
  .c-prompt-field { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; border-radius: var(--c-r-sm); }
  /* Feeds run edge to edge with a small gutter; cards stay on Deck 1. */
  .c-main, .c-aside { padding-inline: 10px !important; }
  .c-post { padding: 12px 14px 6px 4px; grid-template-columns: 44px minmax(0, 1fr); }
  .c-post[dir="rtl"] { padding: 12px 4px 6px 14px; }
  .c-card:hover { transform: none; }
  .c-post--full { padding: 14px 14px 8px 4px; }
  .c-post--full[dir="rtl"] { padding: 14px 4px 8px 14px; }
  .c-post--full .c-post-title { font-size: 2rem; }
  .c-post .c-byline .c-post-lang { display: none; }
  .c-action-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .c-comments, .c-more-posts { padding: 14px 12px; }
  .c-reply-content { padding-inline-start: 10px; }
  .c-reply-children .c-reply-children .c-reply-children .c-reply-content { padding-inline-start: 4px; margin-inline-start: 8px; }
  .c-room-band { block-size: 96px; }
  .c-room-head { padding-inline: 14px; margin-block-start: -30px; }
  .c-room-icon { inline-size: 64px; block-size: 64px; font-size: 2.1rem; border-radius: 20px; }
  .c-room-banner :is(.c-room-description, .c-room-counts) { padding-inline: 14px; }
  .c-member-card { padding: 0 16px 16px; }
  .c-member-cover { margin-inline: -16px; block-size: 92px; }
  .c-member-id .c-avatar { inline-size: 80px; block-size: 80px; }
  .c-feed > .c-editor, .c-settings-block { padding: 16px 14px; }
  .c-log > .c-list:not(:has(> .c-empty)), .c-directory { padding: 4px 14px; }
  .c-form-row { grid-template-columns: 1fr; }
  .c-room-row { grid-template-columns: auto minmax(0, 1fr); }
  .c-room-row > button { grid-column: 2; justify-self: start; }
  .c-notification { grid-template-columns: auto minmax(0, 1fr); }
  .c-notification > .btn { grid-column: 2; justify-self: start; }
  .c-ticket-score b { font-size: 2.3rem; }
  .c-ticket-stub { min-inline-size: 4.5rem; padding-inline: 12px; }
  .c-language-filter form { inset-inline-end: auto; inset-inline-start: 0; }
  .c-welcome-strip { flex-wrap: nowrap; padding: 10px 10px 10px 14px; }
  [dir="rtl"] .c-welcome-strip { padding: 10px 14px 10px 10px; }
  .c-welcome-strip p { flex: 1 1 auto; font-size: 0.88rem; }
  .c-cutout { font-size: 2.2rem; }
  .c-mention-list { inset-inline: 0; }
  .app-footer { padding-inline: 12px; }
  .c-aside .app-footer { padding: 8px 12px 0; }
  .c-tabbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-block-end: env(safe-area-inset-bottom);
    border-block-start: 1px solid var(--c-line-2);
    background: var(--c-bg);
    box-shadow: 0 -12px 30px -18px rgb(0 0 0 / 0.9);
  }
  .c-tabbar a { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-block-size: 58px; color: var(--c-text-3); font-size: 0.75rem; font-weight: 650; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color var(--c-fast) var(--c-ease); }
  .c-tabbar a > span:not(.c-badge):not(.c-tab-plus) { max-inline-size: 100%; overflow: hidden; padding-inline: 2px; text-overflow: ellipsis; white-space: nowrap; }
  .c-tabbar a svg { inline-size: 22px; block-size: 22px; transition: transform var(--c-med) var(--c-spring); }
  .c-tabbar a[aria-current] { color: #fff; }
  .c-tabbar a[aria-current] svg { color: var(--c-violet-2); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-violet) 80%, transparent)); transform: translateY(-1px) scale(1.08); }
  .c-tabbar a[aria-current]:not(.c-tab-create)::after { content: ''; position: absolute; inset-block-start: 0; inset-inline: 30%; block-size: 2px; border-radius: 0 0 3px 3px; background: var(--c-grad); }
  .c-tab-plus { display: grid; place-items: center; inline-size: 44px; block-size: 30px; border-radius: 12px; background: var(--c-grad); color: var(--c-action-ink); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--c-violet) 90%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25); }
  .c-tab-plus svg { inline-size: 20px !important; block-size: 20px !important; color: #fff !important; filter: none !important; }
  .c-tabbar .c-badge { position: absolute; inset-block-start: 6px; inset-inline-start: calc(50% + 4px); box-shadow: 0 0 0 2px var(--c-bg-2); }
  body[data-chrome="app"] .app-footer:not(.c-aside .app-footer) { padding-block-end: calc(var(--c-tabbar-h) + 16px + env(safe-area-inset-bottom)); }
}
/* Narrow phones retain the CPSCount home icon and the visible Community name. */
@media (max-width: 429.98px) {
  .c-bar-brand .c-bar-partner, .c-bar-logo .logo { display: none; }
  .c-bar-logo .logo-icon { display: block; }
  .c-bar-home { flex: 1 1 auto; min-inline-size: 0; }
  .c-bar-home-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 379px) {
  /* Narrow phones: the bar's controls tighten so the lockup, search icon, sign-in, More and Menu never overlap. */
  .c-bar-inner { padding-inline: 8px; gap: 2px; }
  .c-bar-brand { gap: 6px; }
  .c-bar-search { inline-size: 38px; }
  .c-bar .c-bar-menu-btn, .c-bar-more > summary { inline-size: 38px; block-size: 38px; }
  .c-bar .c-bar-join { padding-inline: 12px; font-size: 0.8rem; min-block-size: 36px; }
  .c-sort a svg { display: none; }
  .c-bar-sep { display: none !important; }
}

/* ── Reduced motion, forced colours ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .c-bar-pulse::after, .c-art-planet, .c-art-orbit, .c-art i,
  .c-flair::after, .c-member-id .c-avatar, .c-loading-sheet::after, .c-bar::after,
  .is-fresh, .c-ticket.is-printing, .c-ticket.is-printing .c-ticket-stub, .c-new-strip, .c-status, .c-bar-menu, .c-menu > div,
  .c-language-filter form, .c-gate-card, .c-lightbox, .c-thumb, .c-unseen-label, .c-bar-icon .c-badge,
  .is-like-pop svg, .is-save-pop svg, .is-follow-pop, .is-tick, .c-feed.c-enter > *, .c-feed.c-enter .c-list > *, .c-bar-icon:hover svg, .c-flair[data-flair="wheel"]:hover svg { animation: none !important; }
  .c-burst, .c-ripple { display: none !important; }
  .community *, .community *::before, .community *::after { transition-duration: 0.01ms !important; }
  .c-card:hover, .c-prompt:hover, body[data-page="community"] .community .btn--primary:hover { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (forced-colors: active) {
  .c-sheet, .c-feed > .c-editor, .c-settings-block, .c-prompt, .c-bar-menu, .c-gate-card, .c-flair { border: 1px solid CanvasText; }
  .c-bar, .c-tabbar, .c-rail { border-color: CanvasText; }
  :is(.c-rail-link, .c-rail-room, .c-tabbar a, .c-sort a)[aria-current] { outline: 2px solid Highlight; }
  .c-comment-sort button[aria-pressed="true"], .c-vote-btn[aria-pressed="true"] { outline: 2px solid Highlight; }
  .c-spoiler:not(.is-revealed) { forced-color-adjust: none; background: CanvasText; color: CanvasText; }
  .c-stats [data-stat="level"] dd { color: CanvasText; background: none; }
  .c-mention-list li[aria-selected="true"] { outline: 2px solid Highlight; }
}

/* The site menu (the shared drawer, build/shell/drawer.mjs), one tap from the bar at every width. */
.c-bar .c-bar-menu-btn { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; }

/* Server-rendered bar (communityBar with signedIn:false) carries the guest "Sign in" (and the guest's locked
   "Sign in to post" in the bar and room banner); a returning member
   (html[data-auth="in"], set before paint) must not see it flash before hydration re-renders the bar. profile.mjs
   clears the flag for a real guest; the 0s/5s animation is the safety net that shows it again if neither happens. */
html[data-auth="in"] .c-shell[data-ssr] :is(.c-bar-signin, .c-create--gated) { visibility: hidden; animation: c-signin-reveal 0s 5s forwards; }
@keyframes c-signin-reveal { to { visibility: visible; } }
/* The one Sign-in Button (DESIGN.md, components.css .btn--signin): the site's 10px key with the sign-in icon, not this
   app's pill. Below 860px the bar's button is the shared compact sign-in (shell.css); below 480px it is icon-only, its
   label kept for assistive tech. */
.community .btn--signin { border-radius: var(--radius-md, 10px); }
.community .btn--signin > i { font-size: 0.95em; }
.community .btn--signin > svg { inline-size: 18px; block-size: 18px; flex: none; }
/* The quiet in-page sign-in (render.mjs welcomeStrip): a ghost with the sign-in icon and a seam edge, under the bar's
   filled Sign-in Button. */
.community .btn--signin-quiet { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-md, 10px); box-shadow: inset 0 0 0 1px var(--c-line-2); color: var(--c-violet-2); }
.community .btn--signin-quiet > svg { inline-size: 18px; block-size: 18px; flex: none; }
@media (max-width: 479.98px) {
  .c-bar .c-bar-signin > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Bar controls below 860px: the site header's proportions (shell.css "Header controls"). Search, sign-in, Join, the
   inbox, the account and More menus and the site menu are 36px keys with 18px line icons, 4px apart, each with a 44px
   hit area (an invisible ::before 4px past its edge; the search's own invisible field does the same). */
@media (max-width: 859.98px) {
  .c-bar-actions { gap: 4px; }
  .c-bar :is(.c-bar-icon, .c-bar-menu-btn, .ib-button, .c-bar-join), .c-bar-me > summary { position: relative; }
  .c-bar .c-bar-icon, .c-bar .c-bar-menu-btn, .c-bar .ib-button, .c-bar .c-bar-me > summary,
  html[data-auth="in"] .c-bar .c-bar-inbox:empty { inline-size: 36px; block-size: 36px; }
  .c-bar :is(.c-bar-icon, .c-bar-menu-btn, .ib-button, .c-bar-join)::before,
  .c-bar .c-bar-me > summary::before { content: ''; position: absolute; inset: -4px; }
  .c-bar :is(.c-bar-icon, .c-bar-menu-btn, .ib-button, .c-bar-me > summary) svg { inline-size: 18px; block-size: 18px; }
  .c-bar .c-bar-me > summary .c-avatar { inline-size: 30px; block-size: 30px; font-size: 0.8rem; }
  .c-bar .c-bar-join { min-block-size: 36px; block-size: 36px; padding-inline: 14px; font-size: var(--step--1, 0.875rem); }
  .c-bar .ib-badge { inset-block-start: -5px; inset-inline-end: -6px; }
}
@media (max-width: 767px) {
  /* The search icon (its invisible field is the 44px target, reaching 4px past the 36px key). */
  .c-bar .c-bar-search { inline-size: 36px; block-size: 36px; }
  .c-bar .c-bar-search:not(:focus-within) input { inset: -4px; inline-size: auto; block-size: auto; }
  .c-bar .c-bar-search:not(:focus-within) > svg { inline-size: 18px; block-size: 18px; }
  /* The brand links' hit areas: the CPSCount icon reaches 6px past its edges (the partner mark does the same in
     shell.css), and the Community dot link is 44px tall. */
  .c-bar-logo::before { content: ''; position: absolute; inset-block: 0; inset-inline: -6px; }
  .c-bar-home { min-block-size: 44px; }
  /* Under RTL the Manga Yugen logo sits next to the CPSCount link, so its hit area reaches the other way, over the ×. */
  [dir="rtl"] .c-bar-partner .partner-mark::before { right: 0; left: -16px; }
}
@media (max-width: 379px) {
  .c-bar-inner { gap: 4px; }
}

/* Touch filters keep the shared 44px target without expanding desktop metadata. */
@media (pointer: coarse) {
  .community :is(.c-sort a, .c-tabs a, .c-windows a, .c-language-filter summary, .c-comment-sort button, .c-settings-index a) { min-block-size: var(--tap); }
}
/* Search has a visible, keyboard-accessible submit action after entering a query. */
.c-bar-search input { padding-inline-end: 48px; }
.c-bar-search-submit { position: absolute; inset-inline-end: 0; display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: var(--c-r-sm); background: transparent; color: var(--c-text-2); cursor: pointer; }
.c-bar-search-submit svg { inline-size: 20px; block-size: 20px; }
.c-bar-search-submit:hover { background: var(--c-deck-2); color: var(--c-text); }
.c-bar-search-submit:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
[dir="rtl"] .c-bar-search-submit svg { transform: rotate(180deg); }
@media (max-width: 767px) {
  .c-bar-search:not(:focus-within) .c-bar-search-submit { display: none; }
  .c-bar-search:focus-within input { padding-inline-end: 48px; }
  .c-bar-search:focus-within .c-bar-search-submit { inset-block-start: 7px; inset-inline-end: 12px; z-index: 4; }
}

/* Mobile feeds use the fixed bottom navigation once, with a compact participation row. */
.c-language-filter summary > svg { inline-size: 18px; block-size: 18px; flex: none; }
.c-news--integrated { margin-inline: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.c-news--integrated .c-news-body { padding-inline: 0; }
.c-news-read { justify-self: start; display: inline-flex; align-items: center; min-block-size: 44px; color: var(--primary); font-weight: 650; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 767px) {
  .c-prompt { min-block-size: 44px; padding: 0 4px 0 10px; gap: 4px; border-radius: var(--c-r-sm); background: var(--surface-1); box-shadow: none; }
  .c-prompt .c-avatar { display: none; }
  .c-prompt-field { padding-inline: 0; font-size: .84rem; }
  .c-prompt-cta { flex: none; padding-inline: 10px; }
  .c-feed-bar { gap: 4px; flex-wrap: nowrap; align-items: start; }
  .c-feed-bar > .c-sort { flex: 1 1 auto; min-inline-size: 0; gap: 0; }
  .c-feed-bar .c-sort > a { min-block-size: 44px; padding-inline: 8px; font-size: .8rem; }
  .c-feed-tools { flex: none; }
  .c-filter-label { display: none; }
  .c-language-filter summary { min-block-size: 44px; padding-inline: 8px; gap: 5px; }
  .c-language-filter summary b { max-inline-size: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c-language-filter form { inset-inline-start: auto; inset-inline-end: 0; }
  .c-feed-bar .c-windows { gap: 0; }
}
@media (max-width: 359px) { .c-feed-bar .c-sort > a { padding-inline: 6px; } .c-language-filter summary b { max-inline-size: 4.5rem; } }

/* The rail carries these from 768px (DESIGN.md Rail and Mobile Strip), so the feed head and the side column do not
   repeat them; phones have no rail and keep their own navigation (the tab bar) and the Top rooms list. */
@media (min-width: 768px) {
  .c-aside .c-room-list--top { display: none; }
}
/* Thread pages already gate replies in the page (the join prompt): the side card only welcomes. */
.c-shell[data-view="thread"] .c-welcome .btn { display: none; }

/* Community reading surfaces: one accent, quiet metadata and a clear post hierarchy.
   Keep the same DOM for server rendering and the app. Secondary account information
   stays on profiles; feed navigation, moderation markers and all post actions remain. */
body[data-page="community"] {
  --c-r: 12px;
  --c-r-sm: 6px;
  --c-r-lg: 12px;
  --c-like: var(--primary);
  --c-grad: linear-gradient(var(--primary), var(--primary));
  --c-grad-hover: linear-gradient(var(--primary-hover), var(--primary-hover));
  --c-action-ink: var(--primary-ink);
}
html[data-theme] body[data-page="community"] {
  --c-grad: linear-gradient(var(--primary), var(--primary));
  --c-grad-hover: linear-gradient(var(--primary-hover), var(--primary-hover));
}
.community .btn { border-radius: var(--c-r-sm); }
body[data-page="community"] .community .btn--primary,
body[data-page="community"] .community .btn--primary:hover { box-shadow: none; transform: none; }
body[data-page="community"] .community .btn--primary::after { content: none; }
.c-sheet, .c-feed > .c-editor, .c-settings-block { box-shadow: none; }

/* The current feed is the heading. The app bar already identifies Community. */
.c-masthead { display: block; padding-block: 4px 2px; }
.c-plate, .c-plate-dots, .c-issue > span, .c-issue > time { display: none; }
.c-issue { display: block; border: 0; padding: 0; }
.c-feed-title { margin: 0; color: var(--c-text); font: 600 2rem/1.2 var(--font-body); letter-spacing: -0.02em; text-transform: none; }
.community .feedback-invitation, .c-aside .c-welcome, .c-aside .c-note,
.c-aside .c-me .c-stats, .c-top-count { display: none; }
/* Guests can sign in from the bar or use Create post/Write. Avoid a third invitation. */
.c-prompt[data-guest] { display: none; }
.c-shell:is([data-view="home"], [data-view="explore"]) .c-aside > :not(.app-footer) { display: none; }

/* Neutral room navigation leaves the accent for the current destination. */
:is(.c-rail-link, .c-rail-room) { border-radius: var(--c-r-sm); border: 0; }
:is(.c-rail-link, .c-rail-room):hover { background: var(--c-deck-2); }
:is(.c-rail-link, .c-rail-room)[aria-current] { background: color-mix(in srgb, var(--c-violet) 14%, var(--c-bg)); color: var(--c-violet-2); }
.c-rail-link[aria-current] svg { color: inherit; }
.c-rail-room-icon, .c-rail-room[aria-current] .c-rail-room-icon {
  border-radius: var(--c-r-sm); background: var(--c-deck-2); color: var(--c-text-2); box-shadow: none;
}
.c-rail-nav { border: 0; }
.c-rail-group { border: 0; padding-block: 10px; }
.c-rail-heading, .c-side-title, .c-side-card > h2 { color: var(--c-text-2); font: 600 0.9rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
.c-rail-heading { padding-block: 8px; border: 0; }
.c-rail-group-head { border: 0; }
.c-room-mark { background: var(--c-text-3); box-shadow: none; }
.c-bar-pulse { background: var(--c-violet); box-shadow: none; }
.c-bar-pulse::after { content: none; }

/* Titles and real images carry the feed, with no stamped color bands or halftone. */
.c-list, .c-pinned { gap: 18px; }
.c-card, .c-post--pinned, .c-pinned > .c-post { border: 1px solid var(--c-line); }
.c-card:hover { transform: none; border-color: var(--c-line-2); background: var(--c-deck); box-shadow: none; }
.c-card .c-post-title,
.c-card:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) .c-post-title {
  font: 600 1.25rem/1.4 var(--font-body); letter-spacing: -0.01em; text-transform: none; text-wrap: pretty;
}
.c-card .c-post-title a:hover { color: var(--c-violet-2); }
.c-post--full .c-post-title { font: 600 clamp(1.5rem, 1.25rem + 1vw, 2rem)/1.3 var(--font-body); letter-spacing: -0.015em; text-transform: none; text-wrap: pretty; }
.c-card .c-byline .c-flairs, .c-card .c-byline .c-author-name > small { display: none; }
.c-post .c-byline .c-avatar { box-shadow: none; border-color: var(--c-line); }
.c-card .c-post-lang { color: var(--c-text-3); font-weight: 400; }
.c-xerox { border-radius: var(--c-r-sm); border-color: var(--c-line); }
.c-card .c-xerox::after { content: none; }
.c-stamp {
  padding: 2px 7px; min-block-size: 24px; border: 0; border-radius: 4px;
  background: var(--c-deck-2); color: var(--c-text-2); font: 500 0.8rem/1.4 var(--font-body);
  letter-spacing: 0; text-transform: none; transform: none;
}
[dir="rtl"] .c-stamp { transform: none; }
.c-stamp::before { display: none; }
a.c-stamp:hover { background: var(--c-deck-3); color: var(--c-text); }
.c-card .c-news--integrated .c-news-meta { display: none; }
.c-vote-btn b, .c-reply-actions b, .c-actions b { font: 500 0.85rem/1.4 var(--font-body); color: inherit; }
.c-vote-btn { border-radius: var(--c-r-sm); }
.c-vote-btn[aria-pressed="true"] svg { filter: none; }
.c-post .c-actions { border-block-start: 1px solid var(--c-line); padding-block-start: 6px; }
.c-actions > :is(button, a) { border-color: transparent; border-radius: var(--c-r-sm); background: transparent; }
.c-actions > :is(button, a):hover { background: var(--c-deck-2); }
.c-menu summary { border-radius: var(--c-r-sm); }
.c-external { border-radius: var(--c-r-sm); background: transparent; }

.c-feed-bar { border-block-end: 1px solid var(--c-line); }
:is(.c-sort, .c-tabs) a { border: 0; border-radius: 0; }
:is(.c-sort, .c-tabs) a:hover { background: var(--c-deck-2); }
:is(.c-sort, .c-tabs) a[aria-current] { background: transparent; box-shadow: inset 0 -2px 0 var(--c-violet); color: var(--c-text); }
.c-sort a svg { color: inherit; }
.c-language-filter summary { border-radius: var(--c-r-sm); }
.c-language-filter .c-filter-label { display: none; }
.c-prompt, .c-prompt:hover { border-radius: var(--c-r); box-shadow: none; transform: none; }
.c-prompt-field, .c-prompt-cta, .c-new-strip { border-radius: var(--c-r-sm); }
.c-prompt-cta { box-shadow: none; }

/* Room context stays available with a subdued banner, counts and rules. */
.c-room-banner { border-color: var(--c-line); }
.c-room-band { block-size: 64px; background: var(--c-deck-2); }
.c-room-band::before { content: none; }
.c-room-banner .c-room-head { margin-block-start: 0; padding-block-start: 16px; align-items: center; }
.c-room-icon { background: var(--c-deck-2); color: var(--c-text); border: 1px solid var(--c-line); box-shadow: none; border-radius: var(--c-r); }
.c-room-title { font: 600 clamp(1.6rem, 1.4rem + 0.8vw, 2rem)/1.3 var(--font-body); text-shadow: none; text-transform: none; }
.c-room-slug time { display: none; }
.c-room-counts dd { color: var(--c-text-2); font: 600 1rem/1.4 var(--font-body); }

/* Feedback is still visible, without confetti, sweeping badges or luminous controls. */
.c-flair::after, .c-burst, .c-ripple { display: none; }
.c-tabbar a[aria-current] svg { filter: none; transform: none; }
.c-tab-plus { border-radius: var(--c-r-sm); box-shadow: none; }
.c-tab-plus svg { color: var(--c-action-ink) !important; }

@media (min-width: 1024px) {
  .c-shell:is([data-view="home"], [data-view="explore"]) .c-layout { grid-template-columns: var(--c-rail-w) minmax(0, 1fr) minmax(0, 800px) minmax(0, 1fr); }
  .c-shell:is([data-view="home"], [data-view="explore"]) .c-aside { grid-column: 3; grid-row: 2; position: static; max-block-size: none; padding: 0 0 32px; overflow: visible; }
  .c-shell:is([data-view="home"], [data-view="explore"]) .c-main { padding-block-end: 20px; }
}
@media (max-width: 767px) {
  .c-feed-title { font-size: 1.5rem; }
  .c-list, .c-pinned { gap: 12px; }
  .c-card .c-post-title { font-size: 1.13rem; line-height: 1.4; }
  .c-room-band { block-size: 48px; }
  .c-bar-inner, .c-bar-actions { gap: 8px; }
}
@media (min-width: 768px) and (max-width: 859.98px) { .c-bar-actions { gap: 8px; } }