:root { --bg: #fff1d6; --card: #fffaf0; --tint: #ffd9de; --butter: #ffe28a; --text: #3d2418; --muted: #6f4e3c; --accent: #ff7f96; --accentText: #a52a47; --onAccent: #3d2418; --ink: #3d2418; --shade: #e3c9a0; --scene: #3a2920; --dcBg: #313338; --dcSide: #2b2d31; --dcLine: #3f4147; --dcText: #dbdee1; --dcMuted: #949ba4; --dcCard: #2b2d31; --dcAccent: #fbecb8; --dcButton: #4e5058; --dcButtonHover: #6d6f78; --dcDanger: #da373c; --dcBlurple: #5865f2; --dcMention: #3c4270; --dcMentionText: #c9cdfb; --dcInput: #383a40; --avShun: #9fe0c4; --avAtid: #f29dab; --avMerul: #f5c84f; --avWafi: #b8a4f0; --avPyqa: #ff9d4d; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --bg: #231612; --card: #33201a; --tint: #4a2c30; --butter: #5a4720; --text: #fbe9d2; --muted: #d1b59d; --accent: #ff9eb0; --accentText: #ffb3c1; --onAccent: #3d2418; --ink: #e8c9a8; --shade: #140b08; --scene: #3a2920; color-scheme: dark; } }
:root[data-mode="dark"] { --bg: #231612; --card: #33201a; --tint: #4a2c30; --butter: #5a4720; --text: #fbe9d2; --muted: #d1b59d; --accent: #ff9eb0; --accentText: #ffb3c1; --onAccent: #3d2418; --ink: #e8c9a8; --shade: #140b08; --scene: #3a2920; color-scheme: dark; }

/* phase 10c: the look of the website, the owner's pixel design (2026-10-24). no color is written here: the variables come from
   src/core/colors.js (WEBSITE_COLORS), written above this file by scripts/build-website.js. the pixel border of a box is 4 hard
   shadows (one per side, so the corners stay open like pixels) and a shadow down and to the right. */

@font-face {
  font-family: "Pixelify Sans";
  src: url("/fonts/pixelify-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* the typewriter font of the guide pages and of code (JetBrains Mono, SIL open font license, on the website too) */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --px3: -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink);
  --px4: -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink);
  --pixel: "Pixelify Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.65 var(--mono);
}
/* the owner's wish 2026-10-25: long text in the typewriter font on every page, the pixel font for titles, buttons and labels */
h1, h2, h3, h4, .brand, .nav a, .pill, .foot .label, .card .open, .bubble, .tile-title, .label, .typing, .big-n, .stamp { font-family: var(--pixel); }

a { color: var(--accentText); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.wrap {
  max-width: 1200px; margin: 0 auto; padding: clamp(16px, 4vw, 48px);
  display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px);
}

main { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--card); padding: 6px 10px; box-shadow: var(--px3); z-index: 2; }

/* a box with the pixel border */
.box { background: var(--card); box-shadow: var(--px4), 8px 8px 0 0 var(--shade); }

/* the header */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 16px; }
.brand { display: flex; align-items: center; gap: 14px; margin-right: auto; color: var(--text); text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 28px; }
.logo { position: relative; flex: none; width: 52px; height: 52px; overflow: hidden; background: var(--scene); box-shadow: var(--px3); }
.logo canvas { position: absolute; left: -37px; top: -30px; width: 128px; height: 96px; image-rendering: pixelated; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.nav a { min-height: 44px; display: flex; align-items: center; color: var(--muted); text-decoration: none; text-transform: uppercase; }
.nav a:hover { color: var(--accentText); }

.chip {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 0; cursor: pointer;
  font: 15px var(--pixel); text-transform: uppercase; color: var(--text); background: var(--butter); box-shadow: var(--px3);
}
.chip:hover { background: var(--tint); }
a.chip { text-decoration: none; }
.chip[hidden] { display: none; }

/* buttons */
.button {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 32px;
  font: 700 22px var(--pixel); text-transform: uppercase; text-decoration: none;
  background: var(--accent); color: var(--onAccent); box-shadow: var(--px4), 0 8px 0 0 var(--ink);
}
.button:hover { background: var(--butter); }
.button:active { transform: translateY(4px); }

/* the home page */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(24px, 4vw, 40px); }
.intro { padding: clamp(24px, 5vw, 52px); display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.intro h1 { margin: 0; font: 700 clamp(52px, 9vw, 96px)/1 var(--pixel); text-transform: uppercase; }
.tagline { margin: 0; max-width: 520px; font-size: clamp(15px, 1.6vw, 17px); }
/* the line that types what balqis helps with (website/site.js) */
.typing { margin: 0; font-size: clamp(18px, 2.2vw, 24px); font-weight: 700; color: var(--muted); }
.typed { color: var(--accentText); }
.caret { display: inline-block; width: .55em; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* the numbers under the hero: they count up when you see them */
.numbers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; }
.numbers li { margin: 0; padding: 18px 22px; display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.numbers li:nth-child(2) { background: var(--tint); }
.numbers li:nth-child(3) { background: var(--butter); }
.big-n { font-size: 44px; font-weight: 700; line-height: 1; color: var(--text); }
/* try it on the home page */
.try > h2 { margin-bottom: 8px; }
.try-text { margin: 0 0 24px; color: var(--muted); max-width: 640px; }
.scene { position: relative; display: flex; align-items: center; justify-content: center; min-height: 280px; background: var(--scene); }
.scene canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; image-rendering: pixelated; cursor: pointer; }
.bubble {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 4px 14px; white-space: nowrap; pointer-events: none;
  font-size: 15px; background: var(--card); color: var(--text); box-shadow: var(--px3); opacity: 0; transition: opacity .15s;
}
.bubble.on { opacity: 1; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); grid-auto-rows: 1fr; gap: 32px; }
.card { padding: 26px; min-height: 200px; display: flex; flex-direction: column; gap: 10px; color: var(--text); text-decoration: none; transition: transform .15s; }
.card:hover { transform: translateY(-4px); }
.card.butter { background: var(--butter); }
.card .title { font: 700 28px/1.1 var(--pixel); text-transform: uppercase; }
.card .text { font-size: 16px; color: var(--muted); }
.card .open { margin-top: auto; font-size: 15px; font-weight: 700; color: var(--accentText); text-transform: uppercase; }
.legal { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); grid-auto-rows: auto; }
.card.small { min-height: 0; padding: 22px 26px; gap: 6px; transition: none; }
.card.small:hover { transform: none; background: var(--tint); }
.card.small .title { font-size: 24px; }
.card.small .text { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }

section > h2 { margin: 0 0 28px; font: 700 32px/1 var(--pixel); text-transform: uppercase; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 24px; }
.tile {
  padding: 16px 20px; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--text); text-decoration: none;
  box-shadow: var(--px4), 6px 6px 0 0 var(--shade); transition: transform .15s;
}
.tile:hover { background: var(--tint); transform: translateY(-3px); }
.tile-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile-title { font-size: 19px; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.tile-about { font-size: 13px; line-height: 1.45; color: var(--muted); }
.tile-count { align-self: flex-start; margin-top: 4px; padding: 0 6px; font-size: 12px; background: var(--butter); box-shadow: 0 0 0 2px var(--ink); }
@media (prefers-reduced-motion: reduce) { .tile, .tile:hover { transition: none; transform: none; } .caret { animation: none; } }
.tile .arrow { color: var(--accentText); }

/* the text pages (help, privacy, terms, contact, page not found): the text in one box */
.page { padding: clamp(20px, 5vw, 52px); }
.page > * { max-width: 760px; }
.page h1 { margin: 0 0 24px; font: 700 clamp(32px, 6vw, 48px)/1.1 var(--pixel); text-transform: uppercase; }
.page h2 { margin: 36px 0 10px; font-size: 24px; line-height: 1.2; text-transform: uppercase; }
.page h3 { margin: 24px 0 8px; font-size: 19px; }
.page h4 { margin: 20px 0 6px; font-size: 17px; }
p, ul, blockquote, pre { margin: 0 0 14px; }
ul { padding-left: 22px; }
li { margin: 4px 0; }
.small { color: var(--muted); font-size: 15px; }

code {
  font: 14px/1.5 var(--mono);
  background: var(--bg); padding: 1px 5px; box-shadow: 0 0 0 2px var(--shade);
}
pre { background: var(--bg); padding: 14px; overflow-x: auto; box-shadow: var(--px3); max-width: 100%; }
pre code { padding: 0; background: none; box-shadow: none; }
blockquote { padding-left: 14px; color: var(--muted); box-shadow: inset 4px 0 0 0 var(--accent); }
hr { border: 0; height: 4px; background: var(--shade); margin: 32px 0; max-width: 760px; }
.notice { background: var(--butter); padding: 12px 16px; box-shadow: var(--px3); }

/* the topic list under every help page */
.topics { margin-top: 44px; padding-top: 8px; max-width: none; }
.topics ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.topics li { margin: 0; }
.topics a {
  display: flex; align-items: center; min-height: 52px; padding: 10px 16px; color: var(--text); text-decoration: none;
  font-weight: 700; font-size: 16px; text-transform: uppercase; background: var(--card); box-shadow: var(--px3), 4px 4px 0 0 var(--shade);
}
.topics a:hover { background: var(--tint); }
.topics a[aria-current] { background: var(--accent); color: var(--onAccent); }

/* the footer */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding-bottom: 12px; font-size: 15px; color: var(--muted); }
.foot .label { text-transform: uppercase; }
.pill {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; text-transform: uppercase; text-decoration: none;
  background: var(--card); color: var(--muted); box-shadow: var(--px3);
}
a.pill:hover { background: var(--tint); }
.pill.on { background: var(--accent); color: var(--onAccent); }
.foot .nav { margin-left: auto; }
.foot .end { width: 100%; text-align: right; }
.foot .copyright { margin-top: -8px; font-size: 13px; }

@media (max-width: 640px) {
  .brand { font-size: 24px; }
  .foot .nav { margin-left: 0; }
  .foot .end { text-align: left; }
  .button { padding: 0 24px; font-size: 20px; }
}

/* ---------- the guide pages (the owner's sample 2026-10-24: tickets). titles in the pixel font, words in the typewriter font ---------- */

body.guide-page { font: 15px/1.65 var(--mono); }
.guide { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "menu toc" "menu main"; gap: 24px 36px; align-items: start; }
.guide > .menu { grid-area: menu; }
.guide > .g-main { grid-area: main; }
/* "on this page": a row of chips above the page, a column on the right on a wide screen (website/site.js lights up the part you read) */
.toc { grid-area: toc; min-width: 0; }
.toc .label { margin: 0 0 8px; }
.toc ul { list-style: none; margin: 0; padding: 4px; display: flex; gap: 8px; overflow-x: auto; }
.toc li { margin: 0; flex: none; }
.toc a { display: block; padding: 6px 10px; font-size: 13px; color: var(--text); text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 2px var(--shade); }
.toc a:hover { background: var(--tint); }
.toc a[aria-current] { background: var(--accent); color: var(--onAccent); }
.g-main [id] { scroll-margin-top: 20px; }
body.guide-page .wrap { max-width: 1480px; }
@media (min-width: 1240px) {
  .guide { grid-template-columns: 250px minmax(0, 1fr) 200px; grid-template-areas: "menu main toc"; }
  .toc { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; padding-left: 14px; border-left: 3px solid var(--shade); }
  .toc ul { flex-direction: column; gap: 2px; padding: 0; overflow: visible; }
  .toc a { white-space: normal; box-shadow: none; padding: 5px 8px; color: var(--muted); }
  .toc a[aria-current] { background: none; color: var(--accentText); box-shadow: inset 3px 0 0 0 var(--accent); font-weight: 700; }
}
.g-main { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.guide h1, .guide h2, .guide .label, .guide .menu-title, .guide .m-title, .guide dt, .guide .step, .guide .num { font-family: var(--pixel); }
.label { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; color: var(--accentText); letter-spacing: .04em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* code boxes: commands, options, the example */
code.cmd, code.usage, code.ex {
  font: 600 14px/1.4 var(--mono); background: var(--bg); color: var(--text); padding: 2px 7px; box-shadow: 0 0 0 2px var(--shade); white-space: nowrap;
}
code.cmd { color: var(--accentText); }
.ex-cmd { color: var(--accentText); }
.ex-opt { color: var(--muted); }
.ex-val { background: var(--tint); padding: 0 4px; }
.need { color: var(--accentText); }
.opt { color: var(--muted); }
.key {
  display: inline-block; padding: 0 8px; margin: 0 1px; font: 600 13px/1.6 var(--mono); background: var(--butter); color: var(--text);
  box-shadow: 0 0 0 2px var(--ink); white-space: nowrap;
}

/* the menu of all topics */
.menu { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; padding: 16px 12px; }
.menu-title { margin: 4px 8px 12px; font-size: 18px; text-transform: uppercase; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.menu li { margin: 0; }
.menu a { display: block; padding: 8px 10px; color: var(--text); text-decoration: none; }
.menu a:hover { background: var(--tint); }
.menu a[aria-current] { background: var(--accent); color: var(--onAccent); box-shadow: var(--px3); }
.m-title { display: block; font-size: 15px; text-transform: uppercase; line-height: 1.2; }
.m-about { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }
.menu a[aria-current] .m-about { color: var(--onAccent); }

/* the trail at the top: little tags, the last one is this page */
.trail ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.trail li { margin: 0; display: flex; align-items: center; gap: 6px; }
.trail li + li::before { content: "\203A"; color: var(--muted); }
.trail a, .trail span { padding: 1px 8px; color: var(--muted); text-decoration: none; background: var(--bg); box-shadow: 0 0 0 2px var(--shade); }
.trail a:hover { color: var(--accentText); }
.trail [aria-current] { color: var(--text); background: var(--butter); box-shadow: 0 0 0 2px var(--ink); }

/* the top of the page */
.g-intro { padding: clamp(20px, 4vw, 40px); }
.g-intro h1 { margin: 0; font: 700 clamp(48px, 9vw, 88px)/1 var(--pixel); text-transform: uppercase; }
.g-about { margin: 6px 0 18px; color: var(--accentText); font-weight: 600; }
.g-text p { margin: 0 0 10px; }
.g-text code.cmd { line-height: 2; }
.stats { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.stats li { margin: 0; padding: 3px 10px; font-size: 13px; background: var(--butter); box-shadow: var(--px3); }
.stats li:nth-child(2n) { background: var(--tint); }

/* how to read a command */
.read { padding: 20px 24px; background: var(--butter); }
.read p { margin: 0 0 8px; }
.read .small { margin: 0; color: var(--text); }
.read-sample code.usage { font-size: 16px; }

/* the sections and the command cards */
.g-sec { display: flex; flex-direction: column; gap: 18px; }
.g-sec h2 { margin: 12px 0 0; font: 700 30px/1 var(--pixel); text-transform: uppercase; }
.g-sub { margin: -10px 0 0; color: var(--muted); }
.cmd { padding: 0; box-shadow: var(--px4), 6px 6px 0 0 var(--shade); }
.cmd summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 18px; cursor: pointer; list-style: none; }
.cmd summary::-webkit-details-marker { display: none; }
.cmd summary:hover { background: var(--tint); }
.num {
  display: grid; place-items: center; width: 38px; height: 38px; font-size: 20px; font-weight: 700;
  background: var(--accent); color: var(--onAccent); box-shadow: var(--px3);
}
.cmd:nth-of-type(3n+2) .num { background: var(--butter); color: var(--text); }
.cmd:nth-of-type(3n) .num { background: var(--tint); color: var(--text); }
.c-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; }
.c-about { color: var(--muted); font-size: 14px; }
.c-more { position: relative; width: 20px; height: 20px; }
.c-more::before, .c-more::after { content: ""; position: absolute; background: var(--ink); left: 8px; top: 2px; width: 4px; height: 16px; }
.c-more::after { left: 2px; top: 8px; width: 16px; height: 4px; }
.cmd[open] .c-more::before { display: none; }
.c-body { padding: 4px 18px 20px 72px; }
.c-usage { margin: 0 0 14px; }
/* a long command line or example wraps inside the card (/guard settings has 12 options); each option stays in one piece */
.c-body code.usage, .c-body code.ex { display: inline-block; max-width: 100%; white-space: normal; }
.c-body .ex-cmd, .c-body .need, .c-body .opt, .c-body .ex-opt { white-space: nowrap; }
.c-body dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 16px; margin: 0; }
.c-body dt { font-size: 14px; text-transform: uppercase; color: var(--accentText); padding-top: 2px; }
.c-body dd { margin: 0; }
.opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.opts li { margin: 0; }
.pill-s { display: inline-block; padding: 0 6px; font-size: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--shade); color: var(--muted); }
.pill-s.need { background: var(--tint); color: var(--accentText); }
.o-choices { color: var(--muted); font-size: 13px; }

/* the end: add balqis */
.g-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding: 24px 28px; background: var(--tint); }
.g-cta h2 { margin: 0 0 4px; font: 700 28px/1.1 var(--pixel); text-transform: uppercase; }
.g-cta p { margin: 0; }
.g-cta > div { flex: 1 1 260px; }
.logo.big { width: 72px; height: 72px; }
.logo.big canvas { left: -52px; top: -42px; width: 176px; height: 132px; }

/* ---------- the playground: a pretend discord ---------- */
.play { padding: clamp(18px, 3vw, 28px); display: flex; flex-direction: column; gap: 18px; }
.play-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.play-top h2 { margin: 0 0 4px; font: 700 30px/1 var(--pixel); text-transform: uppercase; }
.play-top p { margin: 0; max-width: 520px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.steps li { margin: 0; }
.step {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; cursor: pointer;
  font-size: 15px; text-transform: uppercase; color: var(--text); background: var(--card); box-shadow: var(--px3);
}
.step:hover { background: var(--tint); }
.step[aria-current="step"] { background: var(--accent); color: var(--onAccent); }
.step-n { display: grid; place-items: center; width: 22px; height: 22px; background: var(--ink); color: var(--card); font-size: 13px; }
.play:not(.live) .steps, .play:not(.live) .play-hint { display: none; }
.play:not(.live) .dc-chan { pointer-events: none; }

.dc {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); height: 470px; background: var(--dcBg); color: var(--dcText);
  font: 14px/1.4 ui-sans-serif, system-ui, "Segoe UI", sans-serif; box-shadow: var(--px4);
}
.play:not(.live) .dc { height: auto; }
.dc-side { background: var(--dcSide); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.dc-server { margin: 0 6px 10px; font-weight: 700; color: var(--dcText); padding-bottom: 10px; border-bottom: 1px solid var(--dcLine); }
.dc-group { margin: 10px 6px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--dcMuted); }
.dc-side ul { list-style: none; margin: 0; padding: 0; }
.dc-side li { margin: 0; }
.dc-chan { width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 4px; background: none; color: var(--dcMuted); font: inherit; cursor: pointer; }
.dc-chan:hover { background: var(--dcLine); color: var(--dcText); }
.dc-chan[aria-current="true"] { background: var(--dcLine); color: var(--dcText); }
.dc-chan.ping::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--dcDanger); }
.dc-pretend { margin: auto 6px 0; padding-top: 12px; font-size: 11px; color: var(--dcMuted); }
.dc-main { overflow: auto; }
.dc-scene { padding: 0 16px 16px; }
.dc-chanhead { position: sticky; top: 0; z-index: 1; margin: 0 -16px 8px; padding: 12px 16px; font-weight: 700; background: var(--dcBg); border-bottom: 1px solid var(--dcLine); }
.play:not(.live) .dc-chanhead { position: static; }
.dc-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 8px 0; animation: pop .25s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dc-av { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 700; color: var(--dcBg); }
.dc-av.member { background: var(--avatarMember); }
.dc-av.staff { background: var(--avatarStaff); }
.dc-av.bun { background: var(--scene); }
.dc-av.bun canvas { position: absolute; left: -25px; top: -19px; width: 90px; height: 68px; image-rendering: pixelated; }
.dc-body p { margin: 0 0 4px; }
.dc-head { display: flex; align-items: center; gap: 6px; }
.dc-head b { color: var(--dcText); }
.dc-app { padding: 0 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; border-radius: 3px; background: var(--dcBlurple); color: var(--dcText); }
.dc-time { font-size: 12px; color: var(--dcMuted); }
.dc-card { max-width: 440px; margin-top: 4px; padding: 12px 14px; border-radius: 6px; background: var(--dcCard); border-left: 4px solid var(--dcAccent); }
.dc-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.dc-card p { color: var(--dcText); }
.dc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dc-btn { padding: 6px 14px; border: 0; border-radius: 4px; background: var(--dcButton); color: var(--dcText); font: 600 13px/1.2 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.dc-btn:hover:not(:disabled) { background: var(--dcButtonHover); }
.dc-btn.red { background: var(--dcDanger); }
.dc-btn:disabled { opacity: .5; cursor: not-allowed; }
.dc-btn.go { animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { box-shadow: 0 0 0 3px var(--dcAccent); } }
.dc-mention { padding: 0 3px; border-radius: 3px; background: var(--dcMention); color: var(--dcMentionText); font-weight: 600; }
.dc-only-line { font-size: 12px; color: var(--dcMuted); }
.play-hint { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--butter); box-shadow: var(--px3); }
.play-hint p { margin: 0; flex: 1; font-weight: 600; }
.dc-used { margin: 0 0 2px; font-size: 12px; color: var(--dcMuted); }
.dc-used span { color: var(--dcBlurple); font-weight: 600; }
.dc-facts { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--dcLine); }
.dc-facts p { margin: 0 0 2px; }
.dc-card code, .dc-form code { font: 12px var(--mono); padding: 0 4px; border-radius: 3px; background: var(--dcBg); color: var(--dcText); box-shadow: none; }
.dc-foot { margin: 8px 0 0; font-size: 12px; color: var(--dcMuted); }
.dc-compose { position: sticky; bottom: 0; margin: 10px -16px -16px; padding: 10px 16px 14px; background: var(--dcBg); }
.dc-run {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-radius: 8px;
  background: var(--dcInput); color: var(--dcText); font: 13px var(--mono); text-align: left; cursor: pointer;
}
.dc-run code { color: var(--dcText); white-space: normal; word-break: break-word; }
.dc-run.go { animation: nudge 1s ease-in-out infinite; }
.dc-select { max-width: 440px; margin-top: 8px; }
.dc-select-box { margin: 0; padding: 8px 12px; border-radius: 4px; background: var(--dcSide); color: var(--dcMuted); border: 1px solid var(--dcLine); }
.dc-options { display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--dcSide); border: 1px solid var(--dcLine); border-top: 0; }
.dc-btn.opt { text-align: left; background: none; }
.dc-btn.opt:hover:not(:disabled) { background: var(--dcLine); }
.dc-form { max-width: 440px; margin: 8px 0 8px 52px; padding: 14px 16px; border-radius: 8px; background: var(--dcSide); border: 1px solid var(--dcLine); }
.dc-q { margin: 8px 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--dcMuted); }
.dc-a { margin: 0; padding: 8px 10px; border-radius: 4px; background: var(--dcInput); }
.dc-typed { white-space: pre-wrap; font: 12px/1.5 var(--mono); }
/* a list row (case history): its line, then the quoted reason; a link of a card; an empty channel */
.dc-row { display: block; }
.dc-quote { display: block; margin: 2px 0 8px; padding-left: 10px; border-left: 3px solid var(--dcLine); color: var(--dcMuted); }
.dc-link { color: var(--dcMentionText); text-decoration: underline; }
.dc-empty { margin: 8px 0; color: var(--dcMuted); font-style: italic; }
.dc-next { margin: 10px 0 0 52px; }
.g-body { padding: clamp(20px, 4vw, 40px); }
.g-body > * { max-width: 760px; }
.g-body h2 { margin: 28px 0 10px; font: 700 24px/1.2 var(--pixel); text-transform: uppercase; }
.g-body h3 { margin: 20px 0 8px; font-size: 17px; }
.play [hidden] { display: none !important; } /* the playground shows one part of the story at a time (website/site.js) */
@media (prefers-reduced-motion: reduce) {
  .dc-msg { animation: none; }
  .dc-btn.go { animation: none; box-shadow: 0 0 0 3px var(--dcAccent); }
}

@media (max-width: 900px) {
  .guide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "menu" "toc" "main"; gap: 24px; }
  .menu { position: static; max-height: none; padding: 10px; }
  .menu-title { display: none; }
  .menu ul { flex-direction: row; overflow-x: auto; gap: 8px; padding: 4px; }
  .menu a { white-space: nowrap; padding: 6px 10px; box-shadow: 0 0 0 2px var(--shade); }
  .m-about { display: none; }
}
@media (max-width: 640px) {
  .dc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 520px; }
  .dc-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px; }
  .dc-server, .dc-group, .dc-pretend { display: none; }
  .dc-side ul { display: contents; }
  .dc-chan { width: auto; }
  .c-body { padding: 4px 14px 18px; }
  .c-body dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .c-body dd { margin-bottom: 8px; }
  .cmd summary { gap: 12px; padding: 12px 14px; }
  code.cmd, code.usage, code.ex { white-space: normal; word-break: break-word; }
  .steps { width: 100%; }
  .step { flex: 1; justify-content: center; }
}

/* ---------- privacy and terms (the owner's wish 2026-10-25): the same words, a friendlier page ---------- */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "main"; gap: 24px 36px; align-items: start; }
.doc > .legal-doc { grid-area: main; }
body.doc-page .wrap { max-width: 1320px; }
@media (min-width: 1240px) {
  .doc { grid-template-columns: minmax(0, 1fr) 230px; grid-template-areas: "main toc"; }
}
.legal-doc [id] { scroll-margin-top: 24px; }
.stamp {
  display: inline-block; margin: 0 0 24px; padding: 4px 12px; font-size: 14px; text-transform: uppercase; color: var(--accentText);
  border: 3px dashed var(--accent);
}
.tldr { padding: 16px 20px; background: var(--butter); box-shadow: var(--px3), 6px 6px 0 0 var(--shade); }
.page h3.part { display: flex; align-items: center; gap: 14px; margin: 40px 0 12px; font-size: 22px; text-transform: uppercase; }
.part .num { flex: none; width: 34px; height: 34px; font-size: 18px; }
.page h3.part:nth-of-type(3n+2) .num { background: var(--butter); color: var(--text); }
.page h3.part:nth-of-type(3n) .num { background: var(--tint); color: var(--text); }
.doc-end { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 40px; padding-top: 22px; box-shadow: 0 -4px 0 0 var(--shade); }
.doc-end p { margin: 0; flex: 1 1 200px; font-weight: 700; }
/* the bar on top that fills while you read (website/site.js), in pixel steps */
.readbar { position: fixed; left: 0; right: 0; top: 0; z-index: 5; height: 8px; background: var(--shade); }
.readbar span { display: block; height: 100%; width: 0; background: var(--accent); }
.readbar.done span { background: var(--butter); }

/* ---------- contact (the owner's wish 2026-10-25) ---------- */
.contact-hi { display: flex; align-items: center; gap: 22px; padding: clamp(20px, 4vw, 36px); }
.contact-hi h1 { margin: 0 0 8px; font: 700 clamp(32px, 6vw, 48px)/1.1 var(--pixel); text-transform: uppercase; }
.say { position: relative; display: inline-block; margin: 0; padding: 8px 14px; background: var(--bg); box-shadow: var(--px3); }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 700px) { .ways { grid-template-columns: minmax(0, 1fr); } }
.way { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.way.butter { background: var(--butter); }
.way h2 { margin: 0; font-size: 24px; text-transform: uppercase; }
.way p { margin: 0; }
.way-btns { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 14px; }