/* Cosmas product site (cosmas.gingygames.com). Self-contained: base, buttons, poster, bands, steps, forms and footer are copied
   from the gingygames.com main stylesheet (discord-rp-web public/assets/style.css), fonts are served from /cosmas/fonts/.
   Product parts (cs-*) and the presentation components (kh-*, kd-*) from /kosmas/assets/home.css follow. */
@font-face { font-family: "Big Shoulders"; src: url(/cosmas/fonts/bigshoulders-latin.woff2) format("woff2"); font-weight: 700 900; font-display: swap; unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2190-2193, U+2212; }
@font-face { font-family: "Big Shoulders"; src: url(/cosmas/fonts/bigshoulders-latin-ext.woff2) format("woff2"); font-weight: 700 900; font-display: swap; unicode-range: U+0100-017F; }
@font-face { font-family: "Archivo"; src: url(/cosmas/fonts/archivo-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2190-2193, U+2212; }
@font-face { font-family: "Archivo"; src: url(/cosmas/fonts/archivo-latin-ext.woff2) format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0100-017F; }

:root {
  --black: oklch(0.14 0 0);
  --black-2: oklch(0.185 0 0);
  --black-3: oklch(0.235 0 0);
  --line: oklch(0.34 0 0);
  --white: oklch(0.97 0 0);
  --grey: oklch(0.8 0 0);
  --red: oklch(0.69 0.2 36);        /* rumělka – barva komunity */
  --red-ink: oklch(0.15 0.03 36);
  --discord: oklch(0.55 0.21 277);
  --ok: oklch(0.82 0.17 145);
  --warn: oklch(0.84 0.15 80);
  --bad: oklch(0.72 0.19 25);
  --c: var(--red);                  /* barva aktuální sekce / světa */
  --c-ink: var(--red-ink);

  --display: "Big Shoulders", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --z-sticky: 10; --z-menu: 20; --z-pop: 30;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
body { margin: 0; background: var(--black); color: var(--white); font: 400 1.0625rem/1.7 var(--body); }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--c); }
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 700; }
code { font: .88em ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--black-3); padding: .12em .4em; }
::selection { background: var(--red); color: var(--red-ink); }

h1, h2, h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: 0; margin: 0 0 .4em; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(3rem, 1.6rem + 6.5vw, 6rem); }
h2 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4rem); }
h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); font-weight: 800; line-height: 1; }
.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.55; max-width: 58ch; }
.muted { color: var(--grey); }
.small { font-size: .9rem; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: var(--z-pop); background: var(--red); color: var(--red-ink); padding: 8px 14px; }

/* ---------------------------------------------------------------- tlačítka */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 20px 11px; border: 2px solid var(--white); background: var(--white); color: var(--black); font: 800 1.15rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; cursor: pointer; transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s cubic-bezier(.22, 1, .36, 1); }
.btn:hover { color: var(--black); transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--red); }
.btn:active { transform: none; box-shadow: none; }
.btn-red { background: var(--red); border-color: var(--red); color: var(--red-ink); }
.btn-red:hover { color: var(--red-ink); box-shadow: 3px 3px 0 var(--white); }
.btn-ghost { background: transparent; color: var(--white); }
.btn-ghost:hover { color: var(--white); box-shadow: 3px 3px 0 var(--white); }
.btn-discord { background: var(--discord); border-color: var(--discord); color: #fff; }
.btn-discord:hover { color: #fff; box-shadow: 3px 3px 0 var(--white); }
.btn-ink { background: var(--c-ink); border-color: var(--c-ink); color: var(--c); }
.btn-ink:hover { color: var(--c); box-shadow: 3px 3px 0 var(--white); }
.btn-line { background: transparent; border-color: var(--c-ink); color: var(--c-ink); }
.btn-line:hover { color: var(--c-ink); box-shadow: 3px 3px 0 var(--c-ink); }
.btn-sm { padding: 9px 14px 7px; font-size: 1rem; }
.btn-danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn-danger:hover { color: var(--bad); }
.ico { width: 20px; height: 20px; flex: none; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* ---------------------------------------------------------------- úvod: plakát */
.poster { --c: var(--red); background: var(--red); color: var(--red-ink); position: relative; overflow: hidden; border-bottom: 2px solid var(--white); }
.poster-in { min-height: min(80vh, 760px); display: flex; align-items: flex-end; }
.poster-copy { padding: clamp(40px, 7vw, 96px) 0 clamp(36px, 6vw, 72px); position: relative; z-index: 1; max-width: 900px; }
.poster h1 { font-size: clamp(3.6rem, 1.2rem + 9.5vw, 8.75rem); line-height: .84; margin-bottom: .32em; color: var(--red-ink); }
.poster h1 span { display: block; }
.poster h1 .out { color: transparent; -webkit-text-stroke: 2px var(--red-ink); }
.poster .lead { color: var(--red-ink); font-weight: 500; }
.poster .duo { position: absolute; inset: 0 0 0 40%; }
.poster .duo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--red) 0%, transparent 45%); }
.poster a:not(.btn) { color: var(--red-ink); text-decoration-color: var(--red-ink); }
.poster :focus-visible { outline-color: var(--red-ink); }
@media (max-width: 820px) {
  .poster-in { display: block; min-height: 0; }
  .poster .duo { position: relative; inset: auto; height: 230px; margin: 0 calc(-1 * var(--gutter)); }
  .poster .duo::after { background: linear-gradient(0deg, var(--red) 0%, transparent 55%); }
  .poster-copy { padding-top: 0; margin-top: -40px; }
}
/* ---------------------------------------------------------------- sekce */
.band { padding: clamp(56px, 9vw, 120px) 0; border-bottom: 2px solid var(--white); }
.band-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.band-head h2 { margin: 0; }
.band-head p { margin: 0; max-width: 46ch; color: var(--grey); }

/* tři kroky – skutečná posloupnost */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 2px solid var(--white); }
.steps li { counter-increment: s; display: grid; grid-template-columns: clamp(60px, 11vw, 140px) minmax(0, 1fr); gap: 20px; padding: 28px 0; border-bottom: 2px solid var(--line); align-items: start; }
.steps li::before { content: counter(s); font: 900 clamp(4rem, 2rem + 7vw, 7.5rem)/.78 var(--display); color: var(--red); }
.steps h3 { margin-bottom: .3em; }
.steps p { margin: 0; color: var(--grey); max-width: 62ch; }

/* ---------------------------------------------------------------- hlavička podstránek */
.head { background: var(--c); color: var(--c-ink); border-bottom: 2px solid var(--white); position: relative; overflow: hidden; }
.head-in { position: relative; z-index: 1; padding: clamp(28px, 5vw, 60px) 0 clamp(32px, 5vw, 56px); }
.head h1 { color: var(--c-ink); margin-bottom: .2em; }
.head .lead { color: var(--c-ink); font-weight: 500; margin-bottom: 0; }
.head a:not(.btn) { color: var(--c-ink); text-decoration-color: var(--c-ink); }
.head :focus-visible { outline-color: var(--c-ink); }
.head .row { margin-top: 24px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: .92rem; margin-bottom: 20px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: inherit; text-decoration: underline; }
.head-plain { --c: var(--black); --c-ink: var(--white); }
/* ---------------------------------------------------------------- obsah */
.page { padding: clamp(36px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.section { padding-top: clamp(48px, 7vw, 88px); }
.section:first-child { padding-top: 0; }
.section > h2 { border-bottom: 2px solid var(--white); padding-bottom: 12px; margin-bottom: 24px; }
.prose { max-width: 68ch; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--c); font-weight: 700; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }
.note { background: var(--black-2); border: 2px solid var(--line); padding: 18px 20px; margin: 24px 0; }
.note p:last-child { margin: 0; }
.form { display: grid; gap: 18px; max-width: 760px; }
.form input, .form select { width: 100%; }
.form .two { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form .two { grid-template-columns: 1fr; } }
.notice { padding: 14px 16px; background: var(--black-2); border: 2px solid var(--line); margin: 14px 0; }
.notice.ok { border-color: var(--ok); }
.notice.bad { border-color: var(--bad); }

.gamebar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gamebar::-webkit-scrollbar { display: none; }
.scroll-x { overflow-x: auto; }
.foot { padding: 44px 0 60px; }
.foot-in { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr; }
.foot nav { display: grid; gap: 6px; align-content: start; }
.foot nav a { text-decoration: none; color: var(--grey); }
.foot nav a:hover { color: var(--white); }
.foot-h { font: 800 1.15rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
@media (max-width: 700px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-in > div { grid-column: 1 / -1; } }
.form label { display: grid; gap: 6px; font: 800 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--grey); }
input, select, textarea { font: 500 1rem/1.4 var(--body); color: var(--white); background: var(--black-2); border: 2px solid var(--line); border-radius: 0; padding: 10px 12px; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--c); outline: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------------------------------------------------------------- from /kosmas/assets/home.css */

.kh-hero .poster-in { min-height: min(68vh, 640px); }
.kh-hero .poster-in { position: relative; }
.kh-hero .poster-copy { max-width: 980px; }
/* desktop only: a real workspace screenshot on the right (mobile gets a 1x1 placeholder, nothing is downloaded) */
.kh-hero-pic { display: none; }
@media (min-width: 1021px) {
  .kh-hero .poster-copy { max-width: 50%; }
  .kh-hero h1 { font-size: min(8.75rem, calc((min(100vw, 1336px) - 96px) / 9.6)); }
  .kh-hero-pic { display: block; position: absolute; right: calc(-1 * var(--gutter) - 120px); top: 50%; width: min(48vw, 720px); transform: translateY(-46%); }
  .kh-hero-pic img { width: 100%; height: auto; border: 3px solid var(--red-ink); }
  .kh-hero { overflow: hidden; }
}
.kh-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 900 clamp(1.4rem, 1rem + 1.4vw, 2rem)/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--red-ink); }
.kh-alpha { display: inline-block; padding: 5px 7px 3px; font: 800 .78rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; border: 2px solid currentColor; }
.kh-kicker .kh-alpha { font-size: .9rem; }
.kh-hero .lead { max-width: 60ch; font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); }
.kh-cta { gap: 12px; }
.kh-cta .btn { min-height: 52px; font-size: 1.15rem; }
.kh-cta .btn-line .kh-alpha { margin-left: 4px; }
.kh-meta { margin: 14px 0 0; font-size: .95rem; font-weight: 500; color: var(--red-ink); }

/* screenshots */
.kh-gal + .kh-gal { margin-top: clamp(32px, 5vw, 56px); }
.kh-gal h3 { margin-bottom: 16px; }
.kh-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.kh-shot { margin: 0; }
.kh-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border: 2px solid var(--line); background: var(--black-2); }
.kh-shot figcaption { margin-top: 10px; color: var(--grey); font-size: .95rem; line-height: 1.5; }
.kh-shot figcaption b { color: var(--white); margin-right: 4px; }
@media (max-width: 700px) { .kh-shots { grid-template-columns: 1fr; } }

/* desktop vs web */
.kh-cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 1rem; }
.kh-cmp th, .kh-cmp td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 2px solid var(--line); }
.kh-cmp thead th { font: 900 clamp(1.2rem, 1rem + .7vw, 1.6rem)/1 var(--display); text-transform: uppercase; border-bottom-color: var(--white); padding-bottom: 12px; }
.kh-cmp tbody th { font-weight: 700; width: 30%; }
.kh-cmp td { color: var(--grey); width: 35%; }
.kh-y { color: var(--ok); font-weight: 800; margin-right: 4px; }
.kh-n { color: var(--grey); font-weight: 800; margin-right: 4px; }
.kh-cmp thead .kh-alpha { font-size: .7rem; margin-left: 6px; color: var(--warn); }
@media (max-width: 700px) {
  .kh-cmp { min-width: 0; }
  .kh-cmp thead { display: none; }
  .kh-cmp tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; padding: 14px 0; border-bottom: 2px solid var(--line); }
  .kh-cmp tbody th, .kh-cmp td { grid-column: auto; width: auto; padding: 0; border: 0; font-size: .95rem; }
  .kh-cmp tbody th { grid-column: 1 / -1; }
  .kh-cmp td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 800 .78rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--white); }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kh-note { border-color: var(--warn); margin-top: 28px; }
.kh-note ul { margin: 0; padding-left: 1.2em; columns: 2 300px; column-gap: 32px; }
.kh-note li { margin: 0 0 4px; break-inside: avoid; }

/* public chronicle points */
.kh-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--white); }
.kh-points li { padding: 24px 24px 24px 0; border-bottom: 2px solid var(--line); }
.kh-points li + li { padding-left: 24px; border-left: 2px solid var(--line); }
.kh-points p { margin: 0; color: var(--grey); }
@media (max-width: 1020px) { .kh-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kh-points li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 600px) { .kh-points { grid-template-columns: 1fr; } .kh-points li, .kh-points li + li { padding: 20px 0; border-left: 0; } }
.kh-more { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* FAQ */
.kh-faq { border-top: 2px solid var(--white); max-width: 900px; }
.kh-faq details { border-bottom: 2px solid var(--line); }
.kh-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 900 clamp(1.25rem, 1rem + .8vw, 1.7rem)/1.05 var(--display); text-transform: uppercase; }
.kh-faq summary::-webkit-details-marker { display: none; }
.kh-faq summary::after { content: "+"; color: var(--red); flex: none; }
.kh-faq details[open] summary::after { content: "−"; }
.kh-faq summary:hover { color: var(--red); }
.kh-faq p { margin: 0 0 22px; max-width: 70ch; color: var(--grey); }
@media (max-width: 820px) { .kh-hero .poster-copy { margin-top: 0; padding-top: 32px; } }

/* download page (/kosmas/download) */
.kd-hero .poster-in { min-height: min(56vh, 520px); }
.kd-hero .poster-copy { max-width: 900px; }
.kd-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 18px; font-weight: 600; font-size: 1.1rem; }
.kd-file { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
.kd-req { margin: 0; border-top: 2px solid var(--white); max-width: 1000px; }
.kd-req > div { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 8px 24px; padding: 18px 0; border-bottom: 2px solid var(--line); }
.kd-req dt { font: 900 clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.1 var(--display); text-transform: uppercase; }
.kd-req dd { margin: 0; color: var(--grey); max-width: 70ch; }
@media (max-width: 600px) { .kd-req > div { grid-template-columns: 1fr; } }
.kd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.kd-two p { color: var(--grey); max-width: 60ch; margin: 0; }
@media (max-width: 760px) { .kd-two { grid-template-columns: 1fr; } }
.band code, .steps code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; color: var(--white); }

/* ---------------------------------------------------------------- Cosmas: slim product header */
.cs-top { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--black); border-bottom: 2px solid var(--white); }
.cs-top-in { display: flex; align-items: stretch; gap: 8px 16px; min-height: 60px; }
.cs-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.cs-brand img { width: 30px; height: 30px; }
.cs-brand span { font: 900 1.55rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.cs-brand:hover { color: inherit; }
.cs-nav { display: flex; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.cs-nav::-webkit-scrollbar { display: none; }
.cs-nav a { display: flex; align-items: center; padding: 0 11px; white-space: nowrap; font: 800 1.05rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; color: var(--grey); border-bottom: 4px solid transparent; margin-bottom: -2px; }
.cs-nav a:hover { color: var(--white); }
.cs-nav a[aria-current] { color: var(--white); border-bottom-color: var(--red); }
.cs-end { display: flex; align-items: center; gap: 10px; flex: none; }
.cs-lang { display: flex; gap: 2px; }
.cs-lang a { font: 800 .95rem/1 var(--display); letter-spacing: .06em; text-decoration: none; padding: 7px 7px 5px; color: var(--grey); border: 2px solid transparent; }
.cs-lang a[aria-current] { color: var(--white); border-color: var(--line); }
.cs-open { white-space: nowrap; }
@media (max-width: 1100px) {
  .cs-top-in { flex-wrap: wrap; min-height: 0; padding-top: 10px; }
  .cs-end { margin-left: auto; }
  .cs-nav { order: 3; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .cs-nav a { padding: 12px 10px 10px; }
  .cs-nav a:first-child { padding-left: 0; }
}
@media (max-width: 480px) { .cs-open { display: none; } }

/* hero */
.cs-hero .poster-in { min-height: min(72vh, 680px); }
.cs-kicker { margin: 0 0 18px; font: 900 clamp(1.3rem, 1rem + 1.2vw, 1.8rem)/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--red-ink); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* audience */
.cs-who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--white); }
.cs-who li { padding: 24px 24px 24px 0; border-bottom: 2px solid var(--line); }
.cs-who li + li { padding-left: 24px; border-left: 2px solid var(--line); }
.cs-who p { margin: 0; color: var(--grey); }
@media (max-width: 900px) { .cs-who { grid-template-columns: 1fr; } .cs-who li, .cs-who li + li { padding: 20px 0; border-left: 0; } }

/* feature rows: screenshot + text */
.cs-feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 48px) 0; border-top: 2px solid var(--line); scroll-margin-top: 90px; }
.cs-feat:first-of-type { border-top-color: var(--white); }
.cs-feat.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cs-feat.flip figure { order: 2; }
.cs-feat figure { margin: 0; }
.cs-feat img { width: 100%; height: auto; border: 2px solid var(--line); background: var(--black-2); }
.cs-feat figcaption { margin-top: 8px; color: var(--grey); font-size: .9rem; }
.cs-feat h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); }
.cs-feat ul { margin: 0; padding-left: 1.1em; color: var(--grey); }
.cs-feat li { margin-bottom: .45em; }
.cs-feat li::marker { color: var(--red); }
.cs-feat p { color: var(--grey); }
@media (max-width: 900px) { .cs-feat, .cs-feat.flip { grid-template-columns: 1fr; } .cs-feat.flip figure { order: 0; } }

/* pipeline: record → … → share */
.cs-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 2px solid var(--white); counter-reset: f; }
.cs-flow li { counter-increment: f; padding: 20px 16px 20px 0; border-bottom: 2px solid var(--line); }
.cs-flow li + li { padding-left: 16px; border-left: 2px solid var(--line); }
.cs-flow li::before { content: counter(f); display: block; font: 900 3.2rem/.8 var(--display); color: var(--red); margin-bottom: 14px; }
.cs-flow h3 { font-size: 1.45rem; }
.cs-flow p { margin: 0; color: var(--grey); font-size: .96rem; }
@media (max-width: 1100px) { .cs-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-flow li:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 640px) { .cs-flow { grid-template-columns: 1fr; } .cs-flow li, .cs-flow li + li { padding: 18px 0; border-left: 0; } }

/* plain info grid (privacy, AI) */
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 2px solid var(--white); }
.cs-grid > div { padding: 22px 0; border-bottom: 2px solid var(--line); }
.cs-grid p, .cs-grid li { color: var(--grey); }
.cs-grid p:last-child, .cs-grid ul:last-child { margin-bottom: 0; }
.cs-grid ul { padding-left: 1.1em; margin: 0 0 1em; }
@media (max-width: 820px) { .cs-grid { grid-template-columns: 1fr; } }

/* sub-page header and documents */
.cs-head { --c: var(--black); --c-ink: var(--white); border-bottom: 2px solid var(--white); }
.cs-head .head-in { padding: clamp(36px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); }
.cs-head h1 { font-size: clamp(2.8rem, 1.6rem + 5vw, 5.2rem); }
.cs-head .lead { color: var(--grey); font-weight: 400; }
.cs-doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.cs-toc { position: sticky; top: 84px; align-self: start; display: grid; gap: 4px; font-weight: 600; font-size: .95rem; }
.cs-toc a { text-decoration: none; color: var(--grey); padding: 3px 0; }
.cs-toc a:hover { color: var(--white); }
.cs-doc section { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 2px solid var(--line); scroll-margin-top: 90px; }
.cs-doc section:last-child { border-bottom: 0; }
.cs-doc h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); }
.cs-doc .prose li, .cs-doc .prose p { color: var(--grey); }
.cs-doc .prose b, .cs-doc .prose strong { color: var(--white); }
@media (max-width: 860px) { .cs-doc { grid-template-columns: 1fr; } .cs-toc { position: static; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
kbd { font: 700 .85em ui-monospace, "Cascadia Mono", Consolas, monospace; border: 2px solid var(--line); border-bottom-width: 3px; padding: .05em .4em; background: var(--black-2); white-space: nowrap; color: var(--white); }
.cs-keys { border-collapse: collapse; width: 100%; max-width: 680px; margin: 0 0 1em; }
.cs-keys td { padding: 8px 14px 8px 0; border-bottom: 2px solid var(--line); vertical-align: top; color: var(--grey); }
.cs-keys td:first-child { white-space: nowrap; width: 1%; }

/* download facts */
.cs-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 26px 0 0; border-top: 2px solid var(--red-ink); }
.cs-facts > div { padding: 12px 16px 0 0; }
.cs-facts dt { font: 800 .85rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .08em; }
.cs-facts dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.cs-facts .sha { grid-column: 1 / -1; padding-top: 14px; }
.cs-facts [data-sha] { font: 500 .88rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; }
@media (max-width: 700px) { .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* changelog */
.cs-rels { max-width: 860px; }
.cs-rel { padding: 28px 0; border-bottom: 2px solid var(--line); scroll-margin-top: 90px; }
.cs-rel:first-child { padding-top: 0; }
.cs-rel header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 12px; }
.cs-rel h2 { margin: 0; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.cs-rel time, .cs-rel .meta { color: var(--grey); font-weight: 600; }
.cs-rel .md { color: var(--grey); }
.cs-rel .md h3, .cs-rel .md h4, .cs-rel .md h5 { color: var(--white); font-size: 1.35rem; margin: 1.2em 0 .5em; }
.cs-rel .md ul, .cs-rel .md ol { padding-left: 1.2em; }
.cs-rel .md li { margin-bottom: .35em; }
.cs-rel .md li::marker { color: var(--red); }
.cs-rel .md strong, .cs-rel .md a { color: var(--white); }
.cs-rel .md pre { background: var(--black-2); border: 2px solid var(--line); padding: 12px 14px; overflow-x: auto; }
.cs-rel .md pre code { background: none; padding: 0; }
.cs-rel .md blockquote { margin: 0 0 1em; padding-left: 16px; border-left: 3px solid var(--line); }
.cs-tag { display: inline-block; font: 800 .8rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em; padding: 5px 7px 3px; border: 2px solid var(--warn); color: var(--warn); }
.cs-tag.latest { border-color: var(--ok); color: var(--ok); }

/* footer */
.cs-foot .foot-in { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 820px) { .cs-foot .foot-in { grid-template-columns: 1fr 1fr; } .cs-foot .foot-in > div { grid-column: 1 / -1; } }
.cs-foot .muted a { color: var(--white); }
.cs-cta-h { font-size: clamp(3rem, 1.2rem + 7vw, 7rem); line-height: .86; color: var(--red-ink); margin-bottom: .3em; }
.cs-cta-h span { display: block; }
.cs-cta-h .out { color: transparent; -webkit-text-stroke: 2px var(--red-ink); }
.poster:not(.kh-hero) .poster-copy { padding: clamp(48px, 8vw, 104px) 0; }
.cs-jump { margin-top: 24px; }
.band > .wrap > figure { margin: 0 0 clamp(24px, 4vw, 40px); }
.band > .wrap > figure img { width: 100%; height: auto; border: 2px solid var(--line); }
.two-col h2 { margin-bottom: 24px; }
.prose p { color: var(--grey); }
@media (min-width: 1021px) { .cs-hero h1 { font-size: min(7.5rem, calc((min(100vw, 1336px) - 96px) / 12)); } }