/* Kitsumi Vault: Kitsumi's look, liquid-glass cards, themes (html[data-theme], the theme menu in the top bar; Auto = dusk or blossom
   by the system setting). Every control is drawn here (no browser widgets). Colours come only from these tokens. */
:root {
  --bg: #17141f; --bg-top: #1f1b29; --bg2: #25202f; --text: #ebe5ef; --muted: #ada4b8; --faint: #7c7389;
  --pk: #e9a9c2; --pkd: #c97f9f; --on-accent: #22131c; --glow1: #c97f9f; --glow2: #8f7fd6;
  --bad: #ff8a9a; --bad-text: #ffd9de; --ok: #86d9a6;
  --wash: rgba(255,255,255,.035); --wash-2: rgba(255,255,255,.07);
  --hl: rgba(255,255,255,.06);
  --shade: rgba(0,0,0,.32);
  --veil-c: rgba(10,8,14,.55);
  --field: rgba(0,0,0,.22);
  --glass: color-mix(in srgb, var(--bg2) 72%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 14%, rgba(255,255,255,.07));
  --line-strong: color-mix(in srgb, var(--pk) 32%, rgba(255,255,255,.1));
  --glow-a: 14%;
  color-scheme: dark;
  --ease: cubic-bezier(.32,.72,0,1);
  --r: 16px;
}
@media (prefers-color-scheme: light) { :root:not([data-theme]) {
  --bg: #f6edf1; --bg-top: #fdf7f9; --bg2: #ffffff; --text: #2d2330; --muted: #6c5e6e; --faint: #978a99;
  --pk: #c4517f; --pkd: #a8406b; --on-accent: #ffffff; --glow1: #f0a7c3; --glow2: #c6b4f0;
  --bad: #c43a52; --bad-text: #a32a40; --ok: #2f8a55;
  --wash: rgba(60,30,60,.035); --wash-2: rgba(60,30,60,.06);
  --hl: rgba(255,255,255,.8);
  --shade: rgba(70,40,70,.10);
  --veil-c: rgba(60,40,60,.25);
  --field: rgba(255,255,255,.85);
  --glass: color-mix(in srgb, var(--bg2) 78%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 18%, rgba(60,30,60,.08));
  --line-strong: color-mix(in srgb, var(--pk) 40%, rgba(60,30,60,.1));
  --glow-a: 30%;
  color-scheme: light;
} }
:root[data-theme="dusk"] {
  --bg: #17141f; --bg-top: #1f1b29; --bg2: #25202f; --text: #ebe5ef; --muted: #ada4b8; --faint: #7c7389;
  --pk: #e9a9c2; --pkd: #c97f9f; --on-accent: #22131c; --glow1: #c97f9f; --glow2: #8f7fd6;
  --bad: #ff8a9a; --bad-text: #ffd9de; --ok: #86d9a6;
  --wash: rgba(255,255,255,.035); --wash-2: rgba(255,255,255,.07);
  --hl: rgba(255,255,255,.06);
  --shade: rgba(0,0,0,.32);
  --veil-c: rgba(10,8,14,.55);
  --field: rgba(0,0,0,.22);
  --glass: color-mix(in srgb, var(--bg2) 72%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 14%, rgba(255,255,255,.07));
  --line-strong: color-mix(in srgb, var(--pk) 32%, rgba(255,255,255,.1));
  --glow-a: 14%;
  color-scheme: dark;
}
:root[data-theme="sakura"] {
  --bg: #170f18; --bg-top: #241520; --bg2: #2a1a26; --text: #f6eef2; --muted: #b9a5b3; --faint: #806d7c;
  --pk: #f2a9c0; --pkd: #d9739c; --on-accent: #2a0f1d; --glow1: #d9739c; --glow2: #9b6be0;
  --bad: #ff8a9a; --bad-text: #ffd9de; --ok: #86d9a6;
  --wash: rgba(255,255,255,.035); --wash-2: rgba(255,255,255,.07);
  --hl: rgba(255,255,255,.06);
  --shade: rgba(0,0,0,.32);
  --veil-c: rgba(10,8,14,.55);
  --field: rgba(0,0,0,.22);
  --glass: color-mix(in srgb, var(--bg2) 72%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 14%, rgba(255,255,255,.07));
  --line-strong: color-mix(in srgb, var(--pk) 32%, rgba(255,255,255,.1));
  --glow-a: 14%;
  color-scheme: dark;
}
:root[data-theme="midnight"] {
  --bg: #121825; --bg-top: #18202f; --bg2: #1e2738; --text: #e6ebf4; --muted: #a2aec4; --faint: #6f7b93;
  --pk: #94bdf2; --pkd: #6493d6; --on-accent: #0e1726; --glow1: #5f8fd6; --glow2: #4fb3b0;
  --bad: #ff8a9a; --bad-text: #ffd9de; --ok: #86d9a6;
  --wash: rgba(255,255,255,.035); --wash-2: rgba(255,255,255,.07);
  --hl: rgba(255,255,255,.06);
  --shade: rgba(0,0,0,.32);
  --veil-c: rgba(10,8,14,.55);
  --field: rgba(0,0,0,.22);
  --glass: color-mix(in srgb, var(--bg2) 72%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 14%, rgba(255,255,255,.07));
  --line-strong: color-mix(in srgb, var(--pk) 32%, rgba(255,255,255,.1));
  --glow-a: 14%;
  color-scheme: dark;
}
:root[data-theme="matcha"] {
  --bg: #141a18; --bg-top: #1a2220; --bg2: #202a27; --text: #e7eee8; --muted: #a5b5aa; --faint: #728277;
  --pk: #a6d9b0; --pkd: #74b285; --on-accent: #10201a; --glow1: #74b285; --glow2: #c9b86a;
  --bad: #ff8a9a; --bad-text: #ffd9de; --ok: #86d9a6;
  --wash: rgba(255,255,255,.035); --wash-2: rgba(255,255,255,.07);
  --hl: rgba(255,255,255,.06);
  --shade: rgba(0,0,0,.32);
  --veil-c: rgba(10,8,14,.55);
  --field: rgba(0,0,0,.22);
  --glass: color-mix(in srgb, var(--bg2) 72%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 14%, rgba(255,255,255,.07));
  --line-strong: color-mix(in srgb, var(--pk) 32%, rgba(255,255,255,.1));
  --glow-a: 14%;
  color-scheme: dark;
}
:root[data-theme="ember"] {
  --bg: #1b1412; --bg-top: #251b18; --bg2: #2c211d; --text: #f2e9e3; --muted: #bba89d; --faint: #86766c;
  --pk: #f2b98f; --pkd: #d58f62; --on-accent: #2a170c; --glow1: #d58f62; --glow2: #d66f86;
  --bad: #ff8a9a; --bad-text: #ffd9de; --ok: #86d9a6;
  --wash: rgba(255,255,255,.035); --wash-2: rgba(255,255,255,.07);
  --hl: rgba(255,255,255,.06);
  --shade: rgba(0,0,0,.32);
  --veil-c: rgba(10,8,14,.55);
  --field: rgba(0,0,0,.22);
  --glass: color-mix(in srgb, var(--bg2) 72%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 14%, rgba(255,255,255,.07));
  --line-strong: color-mix(in srgb, var(--pk) 32%, rgba(255,255,255,.1));
  --glow-a: 14%;
  color-scheme: dark;
}
:root[data-theme="blossom"] {
  --bg: #f6edf1; --bg-top: #fdf7f9; --bg2: #ffffff; --text: #2d2330; --muted: #6c5e6e; --faint: #978a99;
  --pk: #c4517f; --pkd: #a8406b; --on-accent: #ffffff; --glow1: #f0a7c3; --glow2: #c6b4f0;
  --bad: #c43a52; --bad-text: #a32a40; --ok: #2f8a55;
  --wash: rgba(60,30,60,.035); --wash-2: rgba(60,30,60,.06);
  --hl: rgba(255,255,255,.8);
  --shade: rgba(70,40,70,.10);
  --veil-c: rgba(60,40,60,.25);
  --field: rgba(255,255,255,.85);
  --glass: color-mix(in srgb, var(--bg2) 78%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 18%, rgba(60,30,60,.08));
  --line-strong: color-mix(in srgb, var(--pk) 40%, rgba(60,30,60,.1));
  --glow-a: 30%;
  color-scheme: light;
}
:root[data-theme="sky"] {
  --bg: #ebf1f8; --bg-top: #f5f9fd; --bg2: #ffffff; --text: #1f2a38; --muted: #5d6b7d; --faint: #8a96a6;
  --pk: #2f74c0; --pkd: #245f9f; --on-accent: #ffffff; --glow1: #9cc4f0; --glow2: #a6e0dc;
  --bad: #c43a52; --bad-text: #a32a40; --ok: #2f8a55;
  --wash: rgba(60,30,60,.035); --wash-2: rgba(60,30,60,.06);
  --hl: rgba(255,255,255,.8);
  --shade: rgba(70,40,70,.10);
  --veil-c: rgba(60,40,60,.25);
  --field: rgba(255,255,255,.85);
  --glass: color-mix(in srgb, var(--bg2) 78%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 18%, rgba(60,30,60,.08));
  --line-strong: color-mix(in srgb, var(--pk) 40%, rgba(60,30,60,.1));
  --glow-a: 30%;
  color-scheme: light;
}
:root[data-theme="paper"] {
  --bg: #f1ece4; --bg-top: #faf7f2; --bg2: #fffdf9; --text: #2b2622; --muted: #6c645b; --faint: #9a9187;
  --pk: #a8566f; --pkd: #8c445b; --on-accent: #ffffff; --glow1: #eac9a8; --glow2: #d9b3c2;
  --bad: #c43a52; --bad-text: #a32a40; --ok: #2f8a55;
  --wash: rgba(60,30,60,.035); --wash-2: rgba(60,30,60,.06);
  --hl: rgba(255,255,255,.8);
  --shade: rgba(70,40,70,.10);
  --veil-c: rgba(60,40,60,.25);
  --field: rgba(255,255,255,.85);
  --glass: color-mix(in srgb, var(--bg2) 78%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 18%, rgba(60,30,60,.08));
  --line-strong: color-mix(in srgb, var(--pk) 40%, rgba(60,30,60,.1));
  --glow-a: 30%;
  color-scheme: light;
}
:root[data-theme="lavender"] {
  --bg: #16131f; --bg-top: #1e1a2c; --bg2: #262137; --text: #ebe7f5; --muted: #aaa3c2; --faint: #787190;
  --pk: #b9a4f0; --pkd: #8e78d6; --on-accent: #1a1230; --glow1: #8e78d6; --glow2: #d68fc0;
  --bad: #ff8a9a; --bad-text: #ffd9de; --ok: #86d9a6;
  --wash: rgba(255,255,255,.035); --wash-2: rgba(255,255,255,.07);
  --hl: rgba(255,255,255,.06);
  --shade: rgba(0,0,0,.32);
  --veil-c: rgba(10,8,14,.55);
  --field: rgba(0,0,0,.22);
  --glass: color-mix(in srgb, var(--bg2) 72%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 14%, rgba(255,255,255,.07));
  --line-strong: color-mix(in srgb, var(--pk) 32%, rgba(255,255,255,.1));
  --glow-a: 14%;
  color-scheme: dark;
}
:root[data-theme="ocean"] {
  --bg: #0f1a20; --bg-top: #14222a; --bg2: #1a2c35; --text: #e3eef2; --muted: #9fb6bf; --faint: #6c838c;
  --pk: #7fd0d6; --pkd: #4fa9b3; --on-accent: #0b1d22; --glow1: #4fa9b3; --glow2: #6b8fe0;
  --bad: #ff8a9a; --bad-text: #ffd9de; --ok: #86d9a6;
  --wash: rgba(255,255,255,.035); --wash-2: rgba(255,255,255,.07);
  --hl: rgba(255,255,255,.06);
  --shade: rgba(0,0,0,.32);
  --veil-c: rgba(10,8,14,.55);
  --field: rgba(0,0,0,.22);
  --glass: color-mix(in srgb, var(--bg2) 72%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 14%, rgba(255,255,255,.07));
  --line-strong: color-mix(in srgb, var(--pk) 32%, rgba(255,255,255,.1));
  --glow-a: 14%;
  color-scheme: dark;
}
:root[data-theme="mocha"] {
  --bg: #191411; --bg-top: #221c19; --bg2: #2b2420; --text: #efe7e1; --muted: #b5a69b; --faint: #84766c;
  --pk: #d9b38c; --pkd: #b88a62; --on-accent: #23170e; --glow1: #b88a62; --glow2: #a87070;
  --bad: #ff8a9a; --bad-text: #ffd9de; --ok: #86d9a6;
  --wash: rgba(255,255,255,.035); --wash-2: rgba(255,255,255,.07);
  --hl: rgba(255,255,255,.06);
  --shade: rgba(0,0,0,.32);
  --veil-c: rgba(10,8,14,.55);
  --field: rgba(0,0,0,.22);
  --glass: color-mix(in srgb, var(--bg2) 72%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 14%, rgba(255,255,255,.07));
  --line-strong: color-mix(in srgb, var(--pk) 32%, rgba(255,255,255,.1));
  --glow-a: 14%;
  color-scheme: dark;
}
:root[data-theme="mint"] {
  --bg: #e8f3ed; --bg-top: #f3faf6; --bg2: #ffffff; --text: #1f2c26; --muted: #5c6e65; --faint: #8a9a92;
  --pk: #2f8a62; --pkd: #24704f; --on-accent: #ffffff; --glow1: #a8e0c4; --glow2: #c8e6a8;
  --bad: #c43a52; --bad-text: #a32a40; --ok: #2f8a55;
  --wash: rgba(60,30,60,.035); --wash-2: rgba(60,30,60,.06);
  --hl: rgba(255,255,255,.8);
  --shade: rgba(70,40,70,.10);
  --veil-c: rgba(60,40,60,.25);
  --field: rgba(255,255,255,.85);
  --glass: color-mix(in srgb, var(--bg2) 78%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 18%, rgba(60,30,60,.08));
  --line-strong: color-mix(in srgb, var(--pk) 40%, rgba(60,30,60,.1));
  --glow-a: 30%;
  color-scheme: light;
}
:root[data-theme="peach"] {
  --bg: #f6ebe1; --bg-top: #fdf6f0; --bg2: #ffffff; --text: #2e241e; --muted: #6f6158; --faint: #9c8e84;
  --pk: #c0622e; --pkd: #a24f22; --on-accent: #ffffff; --glow1: #f4c3a0; --glow2: #f0b0b8;
  --bad: #c43a52; --bad-text: #a32a40; --ok: #2f8a55;
  --wash: rgba(60,30,60,.035); --wash-2: rgba(60,30,60,.06);
  --hl: rgba(255,255,255,.8);
  --shade: rgba(70,40,70,.10);
  --veil-c: rgba(60,40,60,.25);
  --field: rgba(255,255,255,.85);
  --glass: color-mix(in srgb, var(--bg2) 78%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 18%, rgba(60,30,60,.08));
  --line-strong: color-mix(in srgb, var(--pk) 40%, rgba(60,30,60,.1));
  --glow-a: 30%;
  color-scheme: light;
}
:root[data-theme="lilac"] {
  --bg: #efe9f8; --bg-top: #f8f5fd; --bg2: #ffffff; --text: #28233a; --muted: #665f7c; --faint: #958da8;
  --pk: #7a55c8; --pkd: #6444ad; --on-accent: #ffffff; --glow1: #cdb8f2; --glow2: #f0b8d8;
  --bad: #c43a52; --bad-text: #a32a40; --ok: #2f8a55;
  --wash: rgba(60,30,60,.035); --wash-2: rgba(60,30,60,.06);
  --hl: rgba(255,255,255,.8);
  --shade: rgba(70,40,70,.10);
  --veil-c: rgba(60,40,60,.25);
  --field: rgba(255,255,255,.85);
  --glass: color-mix(in srgb, var(--bg2) 78%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 18%, rgba(60,30,60,.08));
  --line-strong: color-mix(in srgb, var(--pk) 40%, rgba(60,30,60,.1));
  --glow-a: 30%;
  color-scheme: light;
}
:root[data-theme="cloud"] {
  --bg: #eceef2; --bg-top: #f6f7f9; --bg2: #ffffff; --text: #23262d; --muted: #626873; --faint: #8f949e;
  --pk: #b5577d; --pkd: #99466a; --on-accent: #ffffff; --glow1: #c9d0dc; --glow2: #e8c0d2;
  --bad: #c43a52; --bad-text: #a32a40; --ok: #2f8a55;
  --wash: rgba(60,30,60,.035); --wash-2: rgba(60,30,60,.06);
  --hl: rgba(255,255,255,.8);
  --shade: rgba(70,40,70,.10);
  --veil-c: rgba(60,40,60,.25);
  --field: rgba(255,255,255,.85);
  --glass: color-mix(in srgb, var(--bg2) 78%, transparent);
  --glass-2: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%);
  --line: color-mix(in srgb, var(--pk) 18%, rgba(60,30,60,.08));
  --line-strong: color-mix(in srgb, var(--pk) 40%, rgba(60,30,60,.1));
  --glow-a: 30%;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* Chrome: the 3px webkit bar below. The standard properties would switch that off (they are inherited), so Firefox only
   (@-moz-document url-prefix() is read by Firefox alone). */
@-moz-document url-prefix() { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pk) 35%, transparent) transparent; } }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pk) 35%, transparent); border-radius: 3px; }
::-webkit-scrollbar-button { display: none; }
body {
  margin: 0; min-height: 100vh; color: var(--text); background: var(--bg);
  background-image:
    radial-gradient(60vw 50vh at 15% 0%, color-mix(in srgb, var(--glow1) var(--glow-a), transparent), transparent 75%),
    radial-gradient(60vw 55vh at 95% 100%, color-mix(in srgb, var(--glow2) calc(var(--glow-a) * .9), transparent), transparent 75%),
    radial-gradient(45vw 40vh at 0% 65%, color-mix(in srgb, var(--glow1) calc(var(--glow-a) * .45), transparent), transparent 75%),
    linear-gradient(180deg, var(--bg-top), var(--bg));
  background-attachment: fixed;
  font: 15.5px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pk); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: 30px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); font-size: 13px; }
.err { color: var(--bad); }
.ok { color: var(--ok); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--pk); outline-offset: 2px; }

/* Top bar */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px;
  padding: 10px max(16px, calc((100vw - 1040px) / 2));
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 16px; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.brand small { color: var(--pk); font-weight: 600; }
.top nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.top nav a { color: var(--muted); padding: 7px 12px; border-radius: 999px; white-space: nowrap; font-weight: 500; }
.top nav a:hover { color: var(--text); text-decoration: none; background: var(--wash); }
.top nav a[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--pk) 14%, transparent); }
.who { display: flex; align-items: center; gap: 8px; }
.avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--on-accent);
  background: linear-gradient(135deg, var(--pk), var(--pkd)); text-decoration: none; vertical-align: middle; }
/* A pearl: a soft highlight top-left, its colour deepening to the rim (the initial on it) */
.avatar.pearl { --pc: var(--pk); color: color-mix(in srgb, var(--pc) 30%, #1a1220);
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, #fff 72%, var(--pc)) 0 12%, var(--pc) 48%, color-mix(in srgb, var(--pc) 62%, #000) 100%);
  box-shadow: inset 0 -2px 5px rgba(0,0,0,.18), 0 2px 8px color-mix(in srgb, var(--pc) 35%, transparent); }
.pearl-violet { --pc: #b79cf2; } .pearl-sky { --pc: #8fc3f2; } .pearl-mint { --pc: #8fd9b0; } .pearl-gold { --pc: #f2cf86; }
.pearl-coral { --pc: #f2a28f; } .pearl-ink { --pc: #6e6a8a; color: #f4f0ff; } .pearl-snow { --pc: #eceaf2; }
.avatar.emo { background: var(--wash-2); border: 1px solid var(--line); font-size: 17px; line-height: 1; }
.avatar.big { width: 52px; height: 52px; font-size: 22px; }
.avatar.big.emo { font-size: 30px; }
.by .avatar { width: 20px; height: 20px; font-size: 10px; margin-right: 5px; }
.by .avatar.emo { font-size: 12px; }
.who a { color: var(--text); font-weight: 600; }
/* only the name underlines on hover, never the initial in the avatar */
a.who:hover { text-decoration: none; }
a.who:hover .who-name { text-decoration: underline; text-underline-offset: 3px; }
.av-current { display: inline-flex; }
/* Guide and Rules: readable document pages */
.doc .card { margin: 14px 0; }
.doc h2 { margin: 0 0 8px; } .doc h3 { margin: 14px 0 4px; font-size: 15px; }
.doc ol, .doc ul { margin: 6px 0; padding-left: 22px; } .doc li { margin: 5px 0; line-height: 1.6; }
.doc code { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--wash-2); }
.doc-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.doc-toc a { padding: 5px 12px; border-radius: 999px; background: var(--wash); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.doc-toc a:hover { color: var(--text); text-decoration: none; border-color: var(--line-strong); }
/* People: leaderboard rows, the supporters wall, profiles */
.user-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.user-link .avatar { width: 22px; height: 22px; font-size: 10.5px; }
.user-link .avatar.emo { font-size: 13px; }
.user-link:hover { text-decoration: none; } .user-link:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.by .user-link { font-weight: 600; } .by .user-link .avatar { width: 20px; height: 20px; margin: 0; }
.badge.rank { color: var(--muted); background: var(--wash-2); }
/* staff roles */
.badge.role { color: var(--text); background: color-mix(in srgb, var(--glow2) 18%, transparent); border-color: color-mix(in srgb, var(--glow2) 40%, transparent); }
.badge.role-head_admin, .badge.role-admin { background: color-mix(in srgb, var(--pk) 20%, transparent); border-color: color-mix(in srgb, var(--pk) 50%, transparent); }
.board { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.board-row { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: var(--wash); border: 1px solid var(--line); }
.board-row.top { background: color-mix(in srgb, var(--pk) 8%, var(--wash)); border-color: color-mix(in srgb, var(--pk) 26%, var(--line)); }
.board-n { text-align: center; font-weight: 700; color: var(--faint); font-size: 15px; }
.board-row.top .board-n { font-size: 19px; }
@media (max-width: 560px) { .board-row { grid-template-columns: 30px 1fr auto; } .board-stats { display: none; } }
.wall { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wall-item { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--wash); border: 1px solid var(--line); }
.wall-item.supp-lionheart { border-color: color-mix(in srgb, #ffd98a 55%, transparent); box-shadow: 0 0 14px color-mix(in srgb, #ffd98a 18%, transparent); }
.support-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px;
  background: color-mix(in srgb, var(--pk) 7%, var(--glass)); border-color: color-mix(in srgb, var(--pk) 24%, var(--line)); }
.support-card h3 { margin: 0 0 4px; }
/* Hall of Fame */
.records { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.record { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--wash); border: 1px solid var(--line); }
.record-ico { font-size: 26px; } .record b { font-size: 18px; margin-left: 6px; }
.wall-item.legend { border-color: color-mix(in srgb, var(--pk) 45%, var(--line)); box-shadow: 0 0 16px -6px color-mix(in srgb, var(--pk) 50%, transparent); }
.hall-link h2 { margin: 0 0 4px; } .hall-link p { margin: 0; }
.badges { margin: 10px 0 0; gap: 6px; } .badge.ach { color: var(--text); background: var(--wash-2); }
/* home: latest subtitles */
#latest { margin: 8px 0 22px; }
.latest-card h3 { margin: 0; font-size: 15.5px; }
.latest-card .row { margin-top: 8px; gap: 8px; }
.latest-card .avatar { width: 20px; height: 20px; font-size: 10px; }
.latest-card .avatar.emo { font-size: 12px; }
.profile h1 { margin: 0 0 4px; font-size: 24px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin: 16px 0 8px; }
.stat { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--wash); border: 1px solid var(--line); }
.stat b { font-size: 20px; }
.av-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.av-opt { all: unset; box-sizing: border-box; cursor: pointer; padding: 3px; border-radius: 50%; border: 1.5px solid transparent; transition: transform .2s var(--ease), border-color .2s; }
.av-opt:hover { transform: translateY(-2px); }
.av-opt[aria-pressed="true"] { border-color: var(--pk); }
.av-opt:focus-visible { border-color: var(--pk); }

main { max-width: 1040px; margin: 0 auto; padding: 28px 16px 72px; }
.narrow { max-width: 680px; }
footer { max-width: 1040px; margin: 0 auto; padding: 0 16px 40px; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--faint); font-size: 13px; }
footer a { color: var(--muted); }

/* Glass cards */
.card {
  position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 14px;
  backdrop-filter: blur(12px) saturate(1.45); -webkit-backdrop-filter: blur(12px) saturate(1.45);
  box-shadow: inset 0 1px 0 var(--hl), 0 12px 32px var(--shade);
}
.card.tight { padding: 12px 14px; }
.card.click { cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s; }
.card.click:hover { border-color: var(--line-strong); background: var(--glass-2); transform: translateY(-1px); }
.card.danger { border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.card h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.grid .card { margin: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spread { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.stack > * + * { margin-top: 12px; }
.hero { padding: 30px 0 10px; }
.hero h1 { font-size: 36px; }
.hero p { font-size: 17px; max-width: 620px; }
.section-title { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; }
.section-title h2 { margin: 0; }

/* Badges and chips */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--wash-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge.pk { color: var(--pk); background: color-mix(in srgb, var(--pk) 12%, transparent); border-color: color-mix(in srgb, var(--pk) 28%, transparent); }
.badge.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
/* Patreon supporter badges: warm gold, a little brighter per tier */
.badge.supp { color: #e8c37a; background: color-mix(in srgb, #e8c37a 12%, transparent); border-color: color-mix(in srgb, #e8c37a 32%, transparent); font-size: 11.5px; vertical-align: middle; }
.badge.supp-halfking { color: #f0cf85; border-color: color-mix(in srgb, #f0cf85 45%, transparent); }
.badge.supp-lionheart { color: #ffd98a; border-color: color-mix(in srgb, #ffd98a 60%, transparent); box-shadow: 0 0 10px color-mix(in srgb, #ffd98a 25%, transparent); }
:root[data-theme="blossom"] .badge.supp, :root[data-theme="sky"] .badge.supp, :root[data-theme="paper"] .badge.supp, :root[data-theme="mint"] .badge.supp, :root[data-theme="lilac"] .badge.supp, :root[data-theme="cloud"] .badge.supp, :root[data-theme="peach"] .badge.supp { color: #9a6a12; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .badge.supp { color: #9a6a12; } }
.badge.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border-color: color-mix(in srgb, var(--bad) 26%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; min-width: 34px; justify-content: center; padding: 4px 9px; border-radius: 9px; font-size: 13px; font-weight: 600;
  background: var(--wash); border: 1px solid var(--line); color: var(--text); }
a.chip:hover { text-decoration: none; border-color: var(--line-strong); background: color-mix(in srgb, var(--pk) 10%, transparent); }
.chip .x { all: unset; cursor: pointer; color: var(--faint); padding: 0 2px; font-size: 14px; line-height: 1; }
.chip .x:hover { color: var(--bad); }

/* Buttons */
.btn {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--text);
  background: color-mix(in srgb, var(--pkd) 26%, transparent); border: 1px solid color-mix(in srgb, var(--pk) 45%, transparent);
  box-shadow: inset 0 1px 0 var(--hl);
  transition: background .2s, border-color .2s, transform .15s var(--ease), opacity .2s;
}
.btn:hover { background: color-mix(in srgb, var(--pkd) 40%, transparent); }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--pk) 70%, var(--pkd)), var(--pkd)); color: var(--on-accent); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.quiet { background: var(--wash); border-color: var(--line); font-weight: 500; }
.btn.quiet:hover { background: var(--wash-2); border-color: var(--line-strong); }
.btn.danger { background: color-mix(in srgb, var(--bad) 16%, transparent); border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad-text); }
.btn.danger:hover { background: color-mix(in srgb, var(--bad) 26%, transparent); }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.icon { padding: 6px 10px; }
.btn[disabled], .btn.busy { opacity: .5; pointer-events: none; }
.link { all: unset; cursor: pointer; color: var(--pk); font-weight: 500; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Fields */
.field { display: block; margin: 0 0 14px; }
.field > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field > small { display: block; color: var(--faint); font-size: 12.5px; margin-top: 5px; }
.req { color: var(--pk); }
.input {
  all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 13px; border-radius: 12px; font-size: 15px; color: var(--text);
  background: var(--field); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: var(--faint); }
.input:hover { border-color: var(--line-strong); }
.input:focus { border-color: color-mix(in srgb, var(--pk) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk) 16%, transparent); }
textarea.input { white-space: pre-wrap; min-height: 84px; resize: none; }
.input.big { padding: 15px 22px 15px 52px; font-size: 17px; border-radius: 999px; }
/* The search field: a rounded glass pill; on focus a slowly turning accent ring, the magnifier turns pink and leans in;
   while results load (.busy, browse.js / upload.js) the magnifier pulses. */
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.search { position: relative; border-radius: 999px; }
.search .input.big, .search .input {
  border-radius: 999px; border: 1.5px solid transparent;
  background: linear-gradient(color-mix(in srgb, var(--bg2) 82%, transparent), color-mix(in srgb, var(--bg2) 82%, transparent)) padding-box,
              linear-gradient(var(--line-strong), var(--line-strong)) border-box;
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--hl), 0 10px 30px -14px var(--shade);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.search .input:hover { box-shadow: inset 0 1px 0 var(--hl), 0 14px 34px -14px var(--shade), 0 0 0 4px color-mix(in srgb, var(--pk) 6%, transparent); }
.search .input:focus {
  /* a solid fill: a see-through one let the turning gradient's centre show through the field */
  background: linear-gradient(var(--bg2), var(--bg2)) padding-box,
              conic-gradient(from var(--ring), var(--pk), var(--glow2), color-mix(in srgb, var(--pk) 30%, var(--bg2)), var(--pk)) border-box;
  box-shadow: inset 0 1px 0 var(--hl), 0 16px 40px -16px color-mix(in srgb, var(--pk) 45%, transparent), 0 0 0 5px color-mix(in srgb, var(--pk) 10%, transparent);
  animation: ring 6s linear infinite;
}
@keyframes ring { to { --ring: 360deg; } }
.search::before { content: ""; position: absolute; z-index: 1; left: 21px; top: 50%; width: 15px; height: 15px; margin-top: -9px; border: 2px solid var(--muted); border-radius: 50%;
  transition: border-color .3s, transform .4s var(--ease); pointer-events: none; }
.search::after { content: ""; position: absolute; z-index: 1; left: 35px; top: 50%; width: 7px; height: 2px; margin-top: 6px; background: var(--muted); transform: rotate(45deg); border-radius: 2px;
  transition: background .3s, transform .4s var(--ease); pointer-events: none; }
.search:focus-within::before { border-color: var(--pk); transform: scale(1.1) translateX(-1px); }
.search:focus-within::after { background: var(--pk); transform: translate(1px, 1px) rotate(45deg) scaleX(1.15); }
.search.busy::before { animation: seek .9s var(--ease) infinite alternate; }
@keyframes seek { to { transform: scale(1.18) rotate(-12deg); border-color: var(--glow2); } }
/* results rise in, one after another */
.results-in > * { animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; }

/* Checkbox (drawn, not the browser's) */
.check { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 12px; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px; cursor: pointer;
  background: var(--field); border: 1px solid var(--line-strong); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.check input::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .2s var(--ease); }
.check input:checked { background: var(--pk); border-color: var(--pk); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

/* Segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--field); border: 1px solid var(--line); flex-wrap: wrap; }
.seg button { all: unset; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); transition: background .2s, color .2s; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--pk) 22%, transparent); color: var(--text); box-shadow: inset 0 1px 0 var(--hl); }
.seg button .n { color: var(--faint); font-size: 12px; margin-left: 4px; }

/* Picker (the select replacement) */
.pick { position: relative; }
.pick-btn { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 13px; border-radius: 12px;
  background: var(--field); border: 1px solid var(--line); font-size: 15px; transition: border-color .2s; }
.pick-btn:hover, .pick.open .pick-btn { border-color: var(--line-strong); }
.pick-btn .v { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-btn .v.ph { color: var(--faint); }
.pick-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.pick.open .pick-btn::after { transform: translateY(2px) rotate(-135deg); }
.pick-panel { position: fixed; z-index: 90; padding: 6px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg2) 92%, var(--pk) 4%); border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 18px 44px var(--shade), inset 0 1px 0 var(--hl); animation: pop .18s var(--ease); }
.pick-panel .input { padding: 8px 11px; font-size: 14px; margin-bottom: 6px; }
.pick-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.pick-opt { padding: 8px 11px; border-radius: 9px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.pick-opt small { color: var(--faint); margin-left: auto; font-size: 12px; }
.pick-opt.act { background: color-mix(in srgb, var(--pk) 14%, transparent); }
.pick-opt[aria-selected="true"] { color: var(--pk); font-weight: 600; }
.pick-empty { padding: 10px; color: var(--faint); font-size: 14px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* Modal */
.veil { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: var(--veil-c);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .2s; }
.dialog { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px; border-radius: 20px;
  background: color-mix(in srgb, var(--bg2) 94%, var(--pk) 4%); border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px var(--shade), inset 0 1px 0 var(--hl); animation: pop .22s var(--ease); }
.dialog.wide { width: min(760px, 100%); }
.dialog h2 { margin-bottom: 10px; }
.dialog .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
@keyframes fade { from { opacity: 0; } }

/* Toast */
.toast { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 11px 18px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg2) 90%, var(--pk) 6%); border: 1px solid var(--line-strong); box-shadow: 0 14px 36px var(--shade);
  font-weight: 500; animation: pop .2s var(--ease); }
.toast.bad { border-color: color-mix(in srgb, var(--bad) 55%, transparent); color: var(--bad-text); }

/* Stepper */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 22px; }
.step { all: unset; box-sizing: border-box; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--wash); min-width: 0; }
.step b { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.step b i { font-style: normal; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--wash-2); color: var(--muted); }
.step span { display: block; margin-top: 3px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.step.on { border-color: color-mix(in srgb, var(--pk) 55%, transparent); background: color-mix(in srgb, var(--pk) 9%, transparent); }
.step.on b { color: var(--pk); }
.step.on b i, .step.done b i { background: var(--pk); color: var(--on-accent); }
.step.on span { color: var(--text); }
.step.done { cursor: pointer; }
.step.done span { color: var(--text); }
.step.done:hover { border-color: var(--line-strong); }

/* Drop zone and file queue */
.drop { display: grid; place-items: center; gap: 4px; text-align: center; padding: 34px 18px; border-radius: 18px; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--pk) 30%, transparent); background: color-mix(in srgb, var(--pk) 4%, transparent); color: var(--muted); transition: all .2s; }
.drop b { color: var(--text); font-size: 16px; }
.drop.over, .drop:hover { border-color: var(--pk); background: color-mix(in srgb, var(--pk) 9%, transparent); }
.drop input { display: none; }
.queue { margin-top: 12px; }
.qrow { display: grid; grid-template-columns: 1fr 96px auto 30px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 6px; background: var(--wash); }
.qrow .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow .input { padding: 7px 10px; text-align: center; }
.qrow .x { all: unset; cursor: pointer; color: var(--faint); text-align: center; font-size: 18px; }
.qrow .x:hover { color: var(--bad); }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 10px; }

/* Admin */
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.pair .side { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--wash); }
.pair .mid { display: grid; place-items: center; color: var(--faint); font-size: 20px; }
pre.file { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 12px; max-height: 340px; overflow: auto; font-size: 13px; margin: 10px 0 0; }
.log-row { display: grid; grid-template-columns: 150px 120px 1fr; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.empty { padding: 26px; text-align: center; color: var(--faint); border: 1px dashed var(--line); border-radius: var(--r); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 700px) {
  .top { gap: 8px; flex-wrap: wrap; position: relative; } /* the wrapped header (3-4 rows) scrolls away on phones instead of covering a third of the screen */
  .top nav { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; } /* six links: wrap, never a hidden sideways scroll */
  .top nav a { padding: 6px 10px; }
  .brand small { display: none; }
  h1, .hero h1 { font-size: 26px; }
  .steps { gap: 6px; }
  .step { padding: 8px 10px; }
  .step b { font-size: 11px; letter-spacing: .03em; }
  .step span { display: none; }
  .set-row { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .pair .mid { transform: rotate(90deg); }
  .qrow { grid-template-columns: 1fr 74px 30px; }
  .qrow .status { grid-column: 1 / -1; }
  .log-row { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.gap { margin: 6px 0 16px; }
a.card { display: block; color: var(--text); }
a.card:hover { text-decoration: none; }
.pair + .row { margin-top: 12px; }
.card > .chips { margin-top: 10px; }

/* Theme menu: a round button in the top bar and a grid of previews */
.theme-btn { all: unset; box-sizing: border-box; cursor: pointer; width: 34px; height: 34px; padding: 5px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--wash); display: grid; place-items: center; transition: border-color .2s, background .2s, transform .15s var(--ease); }
.theme-btn:hover { border-color: var(--pk); background: var(--wash-2); }
.theme-btn:active { transform: scale(.92); }
.theme-btn[aria-expanded="true"] { border-color: var(--pk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk) 16%, transparent); }
/* the button: the trio swirl - accent, text and glow circles of the theme on show; they turn together on hover */
.theme-btn .trio { width: 22px; height: 22px; overflow: visible; }
/* the triple yin-yang turns one third per hover (app.js sets the angle; this is the bounce) */
.trio-spin { transform-origin: 12px 12px; transition: transform .9s cubic-bezier(.34,1.56,.64,1); }
.trio-a { fill: var(--pk); } .trio-t { fill: var(--text); } .trio-g { fill: var(--glow2); }
.theme-btn .tp-line, .theme-btn .tp-pill, .theme-btn .tp-card { display: none; }
.theme-btn .tp.auto { display: block; background: linear-gradient(135deg, #e9a9c2, #c4517f); }
.theme-btn .tp.auto > .tp { display: none; }
.tp { position: relative; display: block; overflow: hidden; width: 100%; height: 48px; border-radius: 10px; background: var(--tp-bg); }
.tp-card { position: absolute; left: 16%; right: 16%; top: 28%; bottom: -12%; border-radius: 7px 7px 0 0; background: var(--tp-card);
  box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.theme-btn .tp-card { left: 22%; right: -10%; top: 30%; border-radius: 6px 0 0 0; background: var(--tp-acc); }
.tp-line { position: absolute; left: 12%; top: 22%; width: 58%; height: 3px; border-radius: 2px; background: var(--tp-text); opacity: .75; }
.tp-line.short { top: 42%; width: 36%; opacity: .4; }
.tp-pill { position: absolute; right: 10%; top: 62%; width: 30%; height: 7px; border-radius: 4px; background: var(--tp-acc); }
.tp.auto { display: grid; grid-template-columns: 1fr 1fr; background: none; }
.tp.auto > .tp { height: 100%; border-radius: 0; }
.theme-panel { position: fixed; z-index: 90; width: min(392px, calc(100vw - 16px)); padding: 12px; border-radius: 18px;
  background: color-mix(in srgb, var(--bg2) 94%, var(--pk) 4%); border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 18px 44px var(--shade), inset 0 1px 0 var(--hl); animation: pop .18s var(--ease); }
.theme-head { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 2px 4px 10px; }
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (max-width: 420px) { .theme-grid { grid-template-columns: repeat(3, 1fr); } }
.theme-tile { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 6px; padding: 5px; border-radius: 13px; border: 1px solid transparent;
  text-align: center; font-size: 12.5px; font-weight: 500; color: var(--muted); transition: background .2s, border-color .2s, color .2s, transform .35s cubic-bezier(.34,1.56,.64,1);
  animation: tile-in .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes tile-in { from { opacity: 0; transform: translateY(6px) scale(.94); } }
.theme-tile:hover { transform: translateY(-2px); }
.theme-tile[aria-pressed="true"] .tp { animation: chosen .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes chosen { 40% { transform: scale(.92); } }
/* switching themes cross-fades the page colours (html.theme-switching, set for half a second by app.js) */
html.theme-switching, html.theme-switching body, html.theme-switching .card, html.theme-switching .topbar, html.theme-switching .input, html.theme-switching .btn {
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease) !important; }
.theme-tile:hover { background: var(--wash-2); color: var(--text); }
.theme-tile[aria-pressed="true"] { border-color: color-mix(in srgb, var(--pk) 70%, transparent); background: color-mix(in srgb, var(--pk) 10%, transparent); color: var(--text); font-weight: 600; }
.theme-tile:focus-visible { outline: 2px solid var(--pk); outline-offset: 1px; }

/* Show discussion */
.discussion { margin-top: 8px; }
.discussion #disc-form { display: grid; gap: 8px; margin-bottom: 14px; }
.discussion .post { padding: 12px 16px; margin-bottom: 10px; }
.discussion .post-body { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.discussion .more { display: flex; justify-content: center; }

/* Sign in / Create account tabs */
.auth-tabs { margin-bottom: 10px; }

/* Notices bell */
#who { display: flex; align-items: center; gap: 10px; }
.bell { position: relative; }
.bell-icon { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bell-n { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; box-sizing: border-box;
  background: var(--pkd); color: var(--on-accent); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notices { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: min(60vh, 480px); overflow: auto; }
.notices a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--text); text-decoration: none; }
.notices a:hover { background: var(--wash-2); }
.notices li.unread a { background: color-mix(in srgb, var(--pk) 9%, transparent); }
.post:target { border-color: var(--pk); }
.notices time { white-space: nowrap; font-size: 12px; }

/* Requests */
.requests { display: grid; gap: 10px; margin-top: 14px; }
.request h3 { margin: 0 0 6px; }
.request h3 a { color: var(--text); text-decoration: none; }
.request-note { margin: 8px 0 0; overflow-wrap: anywhere; }
.request > .row.faint { margin-top: 8px; font-size: 13px; }
.wanted { margin: 8px 0 0; }

/* Forum */
.board h3, .thread-row h3 { margin: 0; }
.board p { margin: 6px 0 0; }
.thread-row .row { margin-top: 6px; font-size: 13px; }
.reply-box { display: grid; gap: 8px; margin-top: 14px; }

/* Reactions and forum search */
.reacts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.react { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--wash); font-size: 13px; color: var(--muted); transition: border-color .15s, background .15s; }
.react:hover:not(:disabled) { border-color: var(--pk); }
.react[aria-pressed="true"] { border-color: color-mix(in srgb, var(--pk) 60%, transparent); background: color-mix(in srgb, var(--pk) 12%, transparent); color: var(--text); }
.react:disabled { cursor: default; }
.react:focus-visible { outline: 2px solid var(--pk); outline-offset: 1px; }
#stage > input[type="search"] { margin-bottom: 12px; }

/* Initiatives (home: Happening now) */
.event h3 { margin: 0; }
.event p { margin: 6px 0 0; }
.event .row { margin-top: 8px; }
.event .bar { height: 6px; margin-top: 10px; border-radius: 999px; background: var(--wash-2); overflow: hidden; }
.event .bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pkd), var(--pk)); transition: width .6s var(--ease); }

/* Line icons (app.js ICONS): inherit the text colour, sized to the text */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.badge .ico { width: 13px; height: 13px; vertical-align: 0; }
.badge.rank .ico, .badge.ach .ico { color: var(--pk); }
.react .ico { width: 15px; height: 15px; }
.react[aria-pressed="true"] .ico { color: var(--pk); }
.record-ico .ico { width: 28px; height: 28px; color: var(--pk); stroke-width: 1.5; }
.board-n .ico { width: 22px; height: 22px; stroke-width: 1.6; }
.medal { --m: #e2b44c; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: var(--m);
  background: color-mix(in srgb, var(--m) 16%, transparent); border: 1.5px solid color-mix(in srgb, var(--m) 70%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent); }
.medal-2 { --m: color-mix(in srgb, #aab4c3 72%, var(--text)); } .medal-3 { --m: #cf9163; } /* silver leans to the text colour: readable on light themes too */
.wall-item .faint .ico { width: 16px; height: 16px; margin-right: 3px; color: var(--pk); }
.btn .ico { margin-right: 2px; }
h1 .ico, h2 .ico, h3 .ico, b .ico { width: .85em; height: .85em; vertical-align: -0.08em; color: var(--pk); }

/* Privacy page table + the sign-in terms line */
.table-wrap { overflow-x: auto; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.doc-table th { color: var(--muted); font-weight: 600; font-size: 13px; }
.terms { margin: 10px 0 0; font-size: 12.5px; }

/* Icon avatars (app.js AVATAR_ICON): the drawing in the accent colour on a soft tinted disc */
.avatar.ico-av { color: var(--pk); background: color-mix(in srgb, var(--pk) 13%, var(--wash-2)); border: 1px solid color-mix(in srgb, var(--pk) 32%, transparent); }
.avatar.ico-av .ico { width: 66%; height: 66%; vertical-align: 0; stroke-width: 1.6; }
.avatar.big.ico-av .ico { stroke-width: 1.4; }

/* Rank-up celebration */
.rank-up { display: grid; place-items: center; width: 84px; height: 84px; margin: 4px auto 12px; border-radius: 50%; color: var(--pk);
  background: color-mix(in srgb, var(--pk) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pk) 40%, transparent); box-shadow: 0 0 34px color-mix(in srgb, var(--pk) 28%, transparent); }
.rank-up .ico { width: 44px; height: 44px; stroke-width: 1.4; }
@media (prefers-reduced-motion: no-preference) { .rank-up { animation: rank-pop .5s var(--ease, cubic-bezier(.32,.72,0,1)) both; } }
@keyframes rank-pop { from { transform: scale(.6); opacity: 0; } }

/* Post formatting (app.js richText) */
.post-body code { font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--wash-2); }
.post-body blockquote { margin: 6px 0; padding: 4px 0 4px 12px; border-left: 3px solid color-mix(in srgb, var(--pk) 55%, transparent); color: var(--muted); }
.post-body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* @mention suggestions (app.js mentionAssist) */
.mention-wrap { position: relative; }
.mention-list { position: absolute; left: 0; top: 100%; z-index: 20; margin-top: 4px; min-width: 200px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--bg2) 92%, var(--pk) 4%); border: 1px solid var(--line-strong); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.mention-opt { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.mention-opt:hover { background: var(--wash); }
.mention-opt .avatar { width: 22px; height: 22px; font-size: 10px; }
.note-row { font-size: 14px; padding: 6px 10px; border-radius: 10px; background: var(--wash); }
.totp-key { font-size: 15px; letter-spacing: .06em; padding: 6px 10px; border-radius: 8px; background: var(--wash-2); user-select: all; overflow-wrap: anywhere; }
.mention-opt[aria-selected="true"] { background: color-mix(in srgb, var(--pk) 16%, transparent); }
.licence-line { margin: 2px 0 0; font-size: 12.5px; }
/* set rows on My account: language + label, licence + credit, then the buttons on their own line (round 36) */
.set-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.set-row > .row { grid-column: 1 / -1; justify-content: flex-end; }
@media (max-width: 700px) { .set-row { grid-template-columns: 1fr; } }

/* posts the automatic check flagged: blurred under a chip (amber = possible spam, red = possible hate speech); "Show" unblurs */
.flag-wrap { position: relative; border-radius: 10px; min-height: 48px; display: flex; align-items: center; }
.flag-wrap > .post-body { flex: 1; }
.flag-wrap .flag-hidden { filter: blur(7px); opacity: .55; user-select: none; pointer-events: none; transition: filter .45s var(--ease), opacity .45s var(--ease); }
.flag-wrap.flag-shown .flag-hidden { filter: none; opacity: 1; user-select: text; pointer-events: auto; }
.flag-chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
  color: var(--text); background: color-mix(in srgb, var(--flag-c) 18%, var(--glass)); border: 1px solid color-mix(in srgb, var(--flag-c) 60%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--hl), 0 4px 14px var(--shade); animation: flag-pulse 2.4s ease-in-out infinite; }
.flag-chip:hover { background: color-mix(in srgb, var(--flag-c) 28%, var(--glass)); }
.flag-chip svg { width: 14px; height: 14px; color: var(--flag-c); }
.flag-spam { --flag-c: #f0a63b; }
.flag-hate { --flag-c: var(--bad); }
.flag-wrap.flag-hate { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--flag-c) 70%, transparent); }
.flag-wrap.flag-spam { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--flag-c) 60%, transparent); }
.flag-card { border-left: 3px solid var(--flag-c); }
.flag-own { margin: 6px 0 0; font-size: .8rem; }
@keyframes flag-pulse { 50% { box-shadow: inset 0 1px 0 var(--hl), 0 0 0 4px color-mix(in srgb, var(--flag-c) 16%, transparent); } }
@media (prefers-reduced-motion: reduce) { .flag-chip { animation: none; } .flag-wrap .flag-hidden { transition: none; } }


/* Moderation -> a set: renumber episodes - small number boxes in two rows */
.renum .row { flex-wrap: nowrap; }
.renum .input { width: 84px; flex: none; }

/* a thread title whose opening post is flagged: an inline chip in the title's place (Show reveals) */
.flag-chip-inline { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font: inherit; font-size: .8em; cursor: pointer; vertical-align: middle;
  color: var(--text); background: color-mix(in srgb, var(--flag-c) 16%, var(--glass)); border: 1px solid color-mix(in srgb, var(--flag-c) 55%, transparent); }
.flag-chip-inline:hover { background: color-mix(in srgb, var(--flag-c) 26%, var(--glass)); }
.flag-chip-inline svg { width: 13px; height: 13px; color: var(--flag-c); }


/* show page: All languages - a heading per language over its sets */
.lang-group { display: flex; align-items: baseline; gap: 10px; margin: 18px 2px 8px; font-size: 1.05rem; }
.lang-group:first-child { margin-top: 4px; }
.lang-group-n { font-size: .8rem; font-weight: 500; color: var(--faint, var(--muted)); }
.lang-group ~ .card h2 > .badge.pk:first-child { display: none; } /* the heading already names the language */