/* osfeed. One design language for the whole site: the project owner's (pixel mark, IBM Plex Mono,
   square edges, hard shadows), written down once and used everywhere.

   1. Tokens            colors, type, spacing
   2. Base and type     one scale for headings and text
   3. Links
   4. Buttons           primary (gradient), secondary (framed), quiet (text), danger; two sizes
   5. Boxes             primary (pink edge, shadow), regular (line items), dashed (settings)
   6. Labels            status words, badges, counts, tags
   7. Notices           info, warning, error, good, with an icon
   8. Fields            inputs, selects, code
   9. Icons and avatars
  10. Frame             header, navigation, footer, page heads, pixel band
  11. Pages             home, search, cards, project, results, following, release, guides, admin
  12. Responsive and motion */

@font-face { font-family: 'osfeed Geist Pixel'; src: url('fonts/GeistPixel-Square.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'osfeed Doto'; src: url('fonts/Doto-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* ---- 1. Tokens ---- */
:root {
  color-scheme: dark;
  --cn-bg: #0b0804;
  --cn-panel: #171418;
  --cn-inset: #201a22;
  --cn-text: #e4e8e5;
  --cn-heading: #f2edf3;
  --cn-muted: #b5a9b9;
  --cn-line: #504354;
  --cn-control-line: #927b99;
  --cn-shadow: #624569;
  --cn-gradient-start: #ffe1fb;
  --cn-gradient-end: #9d79db;
  --cn-accent: #f894ff;          /* the brand pink: actions, links, the mark */
  --cn-accent-ink: #29172f;
  --cn-soft: #302037;
  --cn-accent-2: #7fe3d3;        /* mint, the second accent: information, "behaves differently", the pixel art */
  --cn-accent-2-ink: #0d2522;
  --cn-accent-2-bg: #12302c;
  --cn-good: #b3d993;
  --cn-good-bg: #1d2e18;
  --cn-warn: #e8b87e;
  --cn-warn-bg: #342618;
  --cn-bad: #f29b9b;
  --cn-bad-bg: #38191c;
  --cn-info: var(--cn-accent-2);
  --cn-info-bg: var(--cn-accent-2-bg);
  --cn-edge-width: 2px;
  --cn-shadow-offset: 7px;
  --cn-button-shadow: 2px;
  --cn-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --cn-body: var(--cn-mono);
  --cn-space: 26px;
  --cn-top-height: 83px;
  /* Type scale: display (home), page (h1), section (h2), title (h3), body, copy, small, micro. */
  --cn-fs-display: clamp(30px, 4.9vw, 54px);
  --cn-fs-page: 38px;
  --cn-fs-section: 20px;
  --cn-fs-title: 15px;
  --cn-fs-body: 14px;
  --cn-fs-copy: 13px;
  --cn-fs-small: 12px;
  --cn-fs-micro: 11px;
}

/* ---- 2. Base and type ---- */
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; color: var(--cn-text); background: var(--cn-bg); font: 400 var(--cn-fs-body)/1.7 var(--cn-body);
  min-width: 0; overflow-wrap: anywhere; text-align: left; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; font-family: inherit; }
h1, h2, h3 { color: var(--cn-heading); font-weight: 500; }
h1 { font-size: var(--cn-fs-page); line-height: 1.18; letter-spacing: -.065em; }
h2 { font-size: var(--cn-fs-section); line-height: 1.4; letter-spacing: -.035em; }
h3 { font-size: var(--cn-fs-title); line-height: 1.5; letter-spacing: -.02em; }
.cn-type-display { font-size: var(--cn-fs-display); line-height: 1.18; letter-spacing: -.065em; }
.cn-copy, .cn-pagehead p, .cn-empty p, .cn-prose p, .cn-prose li, .cn-asidebox p, .cn-lede, .cn-followbox p { font-size: var(--cn-fs-copy); line-height: 1.7; }
.cn-kicker, .cn-micro, .cn-aside-note { font-size: var(--cn-fs-micro); color: var(--cn-muted); }
.cn-aside-note { margin-top: 18px; }
.cn-warntext { color: var(--cn-warn); }
.cn-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.cn-mt { margin-top: 13px; }
.cn-mt-s { margin-top: 8px; }
.cn-mt-l { margin-top: 26px; }
.cn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
::selection { background: var(--cn-accent); color: var(--cn-accent-ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cn-accent); outline-offset: 4px; }

/* ---- 3. Links ---- */
a { color: var(--cn-accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
.cn-quiet, a.cn-quiet { display: inline-block; padding: 5px 0; border: 0; background: transparent; color: var(--cn-accent); font-size: var(--cn-fs-small); text-decoration: underline; text-underline-offset: 4px; box-shadow: none; }
.cn-linklike { padding: 0; border: 0; background: none; color: var(--cn-accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
a.cn-brand, a.cn-navbutton, a.cn-button, a.cn-example, a.cn-card, a.cn-need-chip, a.cn-chip, .cn-breadcrumb a, .cn-side a, a.cn-directory-row, .cn-recent a, .cn-seeded > a:first-child, .cn-tool a, .cn-frow-what a, .cn-capability h3 a, .cn-claimcta { text-decoration: none; }
.cn-breadcrumb a:hover, .cn-capability h3 a:hover { text-decoration: underline; }
/* A GitHub account: avatar, then the login, linking to the profile. */
.cn-who { white-space: nowrap; color: var(--cn-text); }
.cn-who:hover { color: var(--cn-accent); }
.cn-who .cn-avatar { margin-right: 5px; }

/* ---- 4. Buttons ---- */
.cn-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 30px; padding: 4px 11px;
  border: var(--cn-edge-width) solid var(--cn-control-line); background: var(--cn-panel); color: var(--cn-text);
  font-size: var(--cn-fs-small); line-height: 1.5; white-space: nowrap;
  box-shadow: var(--cn-button-shadow) var(--cn-button-shadow) 0 var(--cn-shadow);
}
a.cn-button { color: var(--cn-text); }
.cn-button:hover { border-color: var(--cn-accent); }
.cn-button svg { width: 14px; height: 14px; flex: none; }
.cn-button-l { min-height: 40px; padding: 8px 16px; font-size: var(--cn-fs-copy); }
.cn-button-l svg { width: 16px; height: 16px; }
.cn-iconbutton { width: 30px; padding: 5px; }
/* Primary: the mark's gradient (pink, the accent, violet) edge to edge; the gradient drifts on hover. */
.cn-button.cn-primary, a.cn-button.cn-primary {
  color: var(--cn-accent-ink); font-weight: 500; border-color: transparent;
  background-origin: border-box; background-size: 160% 160%; background-position: 0% 0%;
  background-image: linear-gradient(135deg, #fcbbfd 0%, var(--cn-accent) 40%, var(--cn-accent) 60%, #cb87ed 100%);
}
.cn-button.cn-primary:hover, .cn-button.cn-primary:focus-visible { border-color: transparent; background-position: 100% 100%; }
/* Danger: removes something. Framed in the warning color; filled on hover. */
.cn-button.cn-danger { border-color: var(--cn-warn); color: var(--cn-warn); }
.cn-button.cn-danger:hover { background: var(--cn-warn-bg); }
/* A state, not a call to action: outlined in the accent. */
.cn-button.cn-following, .cn-button[aria-pressed="true"] { border-color: var(--cn-accent); color: var(--cn-accent); background: var(--cn-soft); }
.cn-viewtoggle { display: inline-flex; gap: 6px; }
.cn-viewtoggle .cn-button[aria-pressed="false"] { box-shadow: none; color: var(--cn-muted); }
.cn-button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.cn-button.cn-quiet { border: 0; box-shadow: none; }
/* Disclosure buttons ("Show all 23") look like secondary buttons. */
.cn-more > summary, .cn-fold > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.cn-more > summary::-webkit-details-marker, .cn-fold > summary::-webkit-details-marker { display: none; }
.cn-more > summary { min-height: 30px; padding: 4px 12px; font-size: var(--cn-fs-small); color: var(--cn-text); background: var(--cn-panel); border: var(--cn-edge-width) solid var(--cn-control-line); box-shadow: var(--cn-button-shadow) var(--cn-button-shadow) 0 var(--cn-shadow); }
.cn-more > summary:hover { border-color: var(--cn-accent); }
.cn-more { margin-top: 14px; }
.cn-more[open] > summary { display: none; }
.cn-more[open] > .cn-uclist, .cn-more[open] > .cn-ucs { margin-top: 0; }

/* ---- 5. Boxes ---- */
.cn-box { background: var(--cn-panel); border: 1px solid var(--cn-line); }
.cn-box-primary { background: var(--cn-panel); border: var(--cn-edge-width) solid var(--cn-accent); box-shadow: var(--cn-shadow-offset) var(--cn-shadow-offset) 0 var(--cn-shadow); }
.cn-box-dashed { background: var(--cn-panel); border: 1px dashed var(--cn-control-line); }
.cn-box-inset { background: var(--cn-inset); border: 1px solid var(--cn-line); }
.cn-box-pad { padding: 16px 18px; }
.cn-box-pad-l { padding: var(--cn-space); }
/* A primary box needs room for its shadow at the right edge of narrow screens. */
@media (max-width: 480px) { .cn-box-primary { margin-right: var(--cn-shadow-offset); } }

/* ---- 6. Labels ---- */
/* A status said in words: a small square and an uppercase word. Never a control. */
.cn-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--cn-fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--cn-muted); white-space: nowrap; }
.cn-status::before { content: ''; width: 8px; height: 8px; background: currentColor; flex: none; }
.cn-status-good { color: var(--cn-good); }
.cn-status-info { color: var(--cn-accent-2); }
.cn-status-warn { color: var(--cn-warn); }
.cn-status-struck { text-decoration: line-through; }
/* A badge names what kind of change something is. */
.cn-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; font-size: var(--cn-fs-micro); line-height: 1.4; white-space: nowrap; color: var(--cn-good); background: var(--cn-good-bg); }
.cn-badge.cn-warning { color: var(--cn-warn); background: var(--cn-warn-bg); }
.cn-badge.cn-info { color: var(--cn-accent-2); background: var(--cn-accent-2-bg); }
.cn-badge.cn-accent { color: var(--cn-accent); background: var(--cn-soft); }
.cn-badge.cn-neutral { color: var(--cn-muted); background: var(--cn-inset); }
.cn-badge.cn-struck { color: var(--cn-muted); background: var(--cn-inset); text-decoration: line-through; }
.cn-count { color: var(--cn-muted); font-weight: 400; font-size: var(--cn-fs-small); }
/* A tag links somewhere related ("4 other tools", a need). */
.cn-tag, .cn-others, .cn-need-chip, .cn-cardtags span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--cn-line); background: var(--cn-inset); color: var(--cn-muted); font-size: var(--cn-fs-micro); line-height: 1.4; white-space: nowrap; }
.cn-need-chip { padding: 5px 11px; font-size: var(--cn-fs-small); color: var(--cn-text); background: var(--cn-panel); }
.cn-need-chip .cn-count { font-size: var(--cn-fs-micro); }
.cn-cardtags span { color: var(--cn-accent); background: var(--cn-soft); border: 0; white-space: normal; }
a.cn-tag:hover, .cn-others:hover, .cn-others:focus-visible, .cn-need-chip:hover { border-color: var(--cn-accent); color: var(--cn-accent); }
.cn-needs { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-cardtags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- 7. Notices ---- */
.cn-notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-left: 2px solid var(--cn-accent-2); background: var(--cn-accent-2-bg); color: var(--cn-text); font-size: var(--cn-fs-copy); line-height: 1.6; }
.cn-notice svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--cn-accent-2); }
.cn-notice p { margin: 0; color: inherit; font-size: inherit; }
.cn-notice code { background: none; padding: 0; color: inherit; }
.cn-notice-warn { border-left-color: var(--cn-warn); background: var(--cn-warn-bg); }
.cn-notice-warn svg { color: var(--cn-warn); }
.cn-notice-error { border-left-color: var(--cn-bad); background: var(--cn-bad-bg); }
.cn-notice-error svg { color: var(--cn-bad); }
.cn-notice-good { border-left-color: var(--cn-good); background: var(--cn-good-bg); }
.cn-notice-good svg { color: var(--cn-good); }
.cn-notice + .cn-notice { margin-top: 8px; }
/* An empty state: a heading, a line of help, a way out. */
.cn-empty { padding: 12px 0 20px; }
.cn-empty p { color: var(--cn-muted); margin: 12px 0; max-width: 64ch; }

/* ---- 8. Fields ---- */
.cn-field, .cn-input, .cn-via-row input, .cn-hookfields input, .cn-followbox select, .cn-frow select, .cn-admin-actions input {
  min-width: 0; padding: 8px 12px; background: var(--cn-inset); color: var(--cn-text);
  border: var(--cn-edge-width) solid var(--cn-control-line); font: inherit; font-size: var(--cn-fs-copy);
}
.cn-field { display: block; width: 100%; padding: 11px 12px; font-size: 16px; }
.cn-field:focus, .cn-input:focus, .cn-via-row input:focus, .cn-hookfields input:focus, .cn-followbox select:focus, .cn-frow select:focus { border-color: var(--cn-accent); outline: none; }
.cn-field-label { color: var(--cn-muted); font-size: var(--cn-fs-small); }
.cn-hint { color: var(--cn-muted); font-size: var(--cn-fs-micro); line-height: 1.6; }
.cn-via-row { display: flex; align-items: stretch; gap: 8px; max-width: 720px; }
.cn-via-row input { flex: 1; }
.cn-via-url { flex: 1; min-width: 0; display: flex; align-items: center; padding: 8px 12px; background: var(--cn-inset); border: 1px solid var(--cn-line); color: var(--cn-heading); font-size: var(--cn-fs-small); overflow-wrap: anywhere; user-select: all; }
.cn-hookfields { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
code { font: inherit; color: var(--cn-heading); background: var(--cn-inset); padding: 1px 5px; }
.cn-code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cn-accent); background: var(--cn-inset); border-left: 2px solid var(--cn-accent); padding: 17px; font: 400 var(--cn-fs-small)/1.8 var(--cn-mono); margin: 16px 0; }
.cn-code code { background: none; padding: 0; color: inherit; }
.cn-terminal { margin: 0 0 10px; padding: 14px 16px; overflow-x: auto; background: var(--cn-inset); border: var(--cn-edge-width) solid var(--cn-line); color: var(--cn-text); font-size: var(--cn-fs-small); line-height: 1.6; }
kbd { font: inherit; padding: 1px 5px; border: 1px solid var(--cn-line); color: var(--cn-muted); background: var(--cn-inset); }

/* ---- 9. Icons and avatars ---- */
.cn-provenance svg { width: 16px; height: 16px; flex: none; }
.cn-avatar { width: 18px; height: 18px; flex: none; background: var(--cn-inset); vertical-align: -4px; }
.cn-avatar.cn-avatar-l { width: 36px; height: 36px; vertical-align: middle; }
.cn-avatar.cn-avatar-xl { width: 84px; height: 84px; vertical-align: middle; }
.cn-logo { flex: none; width: 44px; height: 44px; padding: 4px; object-fit: contain; background: var(--cn-inset); border: 1px solid var(--cn-line); }
.cn-logo-l { width: 84px; height: 84px; }
.cn-ident { display: grid; grid-template-columns: repeat(5, 6px); grid-auto-rows: 6px; gap: 1px; flex: none; padding: 6px; background: var(--cn-inset); border: 1px solid var(--cn-line); }
.cn-ident span[data-ink] { background: var(--cn-pixel-fill); }
.cn-ident-l { grid-template-columns: repeat(5, 11px); grid-auto-rows: 11px; gap: 2px; padding: 10px; }
.cn-ident-xl { grid-template-columns: repeat(5, 18px); grid-auto-rows: 18px; gap: 3px; padding: 0; border: 0; background: none; opacity: .55; }
.cn-mark { display: grid; grid-template-columns: repeat(5,5px); grid-auto-rows: 5px; gap: 1px; flex: none; place-content: center; width: 39px; height: 39px; }
.cn-mark span { visibility: hidden; display: grid; place-items: center; color: transparent; font: 500 10px/1 var(--cn-mono); letter-spacing: 0; }
.cn-mark span[data-ink] { visibility: visible; background: var(--cn-pixel-fill); box-shadow: 1px 1px 0 var(--cn-shadow); }
.cn-mr0 { --cn-pixel-fill: var(--cn-gradient-start); }
.cn-mr1 { --cn-pixel-fill: color-mix(in srgb, var(--cn-gradient-start), var(--cn-accent) 50%); }
.cn-mr2 { --cn-pixel-fill: var(--cn-accent); }
.cn-mr3 { --cn-pixel-fill: color-mix(in srgb, var(--cn-accent), var(--cn-gradient-end) 50%); }
.cn-mr4 { --cn-pixel-fill: var(--cn-gradient-end); }
.cn-gr0 { --cn-pixel-fill: var(--cn-gradient-start); }
.cn-gr1 { --cn-pixel-fill: color-mix(in srgb, var(--cn-gradient-start), var(--cn-accent) 25%); }
.cn-gr2 { --cn-pixel-fill: color-mix(in srgb, var(--cn-gradient-start), var(--cn-accent) 50%); }
.cn-gr3 { --cn-pixel-fill: color-mix(in srgb, var(--cn-gradient-start), var(--cn-accent) 75%); }
.cn-gr4 { --cn-pixel-fill: var(--cn-accent); }
.cn-gr5 { --cn-pixel-fill: color-mix(in srgb, var(--cn-accent), var(--cn-gradient-end) 25%); }
.cn-gr6 { --cn-pixel-fill: color-mix(in srgb, var(--cn-accent), var(--cn-gradient-end) 50%); }
.cn-gr7 { --cn-pixel-fill: color-mix(in srgb, var(--cn-accent), var(--cn-gradient-end) 75%); }
.cn-gr8 { --cn-pixel-fill: var(--cn-gradient-end); }

/* ---- 10. Frame ---- */
.cn-shell { max-width: 1240px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.cn-main { flex: 1; padding: 40px 36px 64px; }
.cn-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; min-height: 82px; padding: 18px 36px; border-bottom: 1px solid var(--cn-line); }
/* The header stays at the top on wider screens; on phones it wraps to two rows, so it scrolls away.
   Its background reaches the window edges (shadow + clip) while the border keeps the content width.
   app.js keeps --cn-top-height at its measured height, so what sticks under it is never hidden. */
@media (min-width: 741px) {
  html { scroll-padding-top: var(--cn-top-height); }
  .cn-top { position: sticky; top: 0; z-index: 10; background: var(--cn-bg); box-shadow: 0 0 0 100vmax var(--cn-bg); clip-path: inset(0 -100vmax); }
}
.cn-brand { display: inline-flex; flex: none; align-items: center; gap: 10px; color: var(--cn-text); border: 0; background: none; padding: 0; font: 400 28px/1.2 'osfeed Geist Pixel', var(--cn-mono); letter-spacing: -.03em; white-space: nowrap; }
.cn-nav { display: flex; flex-wrap: nowrap; gap: 8px 23px; flex: 1; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cn-nav::-webkit-scrollbar { display: none; }
.cn-navbutton { color: var(--cn-muted); padding: 6px 0; border: 0; background: none; font-size: var(--cn-fs-small); white-space: nowrap; }
.cn-navbutton:hover { color: var(--cn-text); }
.cn-navbutton[aria-current="page"] { color: var(--cn-text); text-decoration: underline; text-decoration-color: var(--cn-accent); text-decoration-thickness: 2px; text-underline-offset: 9px; }
.cn-top-actions { display: flex; gap: 9px; align-items: center; }
.cn-account.cn-signed-in { color: var(--cn-accent); border-color: var(--cn-accent); }
.cn-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--cn-line); padding: 18px 36px; color: var(--cn-muted); font-size: var(--cn-fs-micro); }
.cn-footlinks { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.cn-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--cn-muted); font-size: var(--cn-fs-micro); }
.cn-breadcrumb a { color: var(--cn-accent); }
/* A page head: the title and its line on the left, actions on the right, a pixel band behind. */
.cn-pagehead { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; }
.cn-pagehead h1 { margin: 0; }
.cn-pagehead p { color: var(--cn-muted); margin-top: 12px; max-width: 65ch; }
.cn-pagehead > div:first-child { position: relative; }
.cn-pagehead::before {
  content: ''; position: absolute; top: -22px; right: -36px; width: min(620px, 60%); height: 150px; z-index: -1; pointer-events: none;
  background: url('img/pixels.svg') right top / auto 150px no-repeat; opacity: .55; image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.cn-main { position: relative; z-index: 0; }
.cn-band { margin-top: 44px; }
.cn-bandhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.cn-sectionhead { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.cn-statusline { display: flex; align-items: center; gap: 9px; color: var(--cn-muted); font-size: var(--cn-fs-micro); }
.cn-statusline::before { content: ''; width: 6px; height: 6px; background: var(--cn-good); display: block; flex: none; }

/* ---- 11. Pages ---- */

/* Home: the hero over a pixel backdrop, the search, examples, numbers, recent cards. */
body:has(.cn-home)::before {
  --cn-backdrop-dim: .9;
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 860px; z-index: -1; pointer-events: none; image-rendering: pixelated;
  background: linear-gradient(rgb(11 8 4 / var(--cn-backdrop-dim)), rgb(11 8 4 / var(--cn-backdrop-dim))), url('img/bg2.webp') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent);
}
.cn-home { padding: 16px 0 12px; }
.cn-hero { display: grid; grid-template-columns: minmax(0, 1fr) 155px; gap: 30px; align-items: center; padding: 32px 0 30px; }
.cn-hero h1 { font-size: var(--cn-fs-display); }
.cn-hero p { color: var(--cn-muted); max-width: 56ch; margin-top: 22px; font-size: var(--cn-fs-copy); line-height: 1.8; }
.cn-glyph { display: grid; grid-template-columns: repeat(7, 13px); gap: 5px; justify-content: center; }
.cn-glyph span { height: 13px; }
.cn-glyph span[data-ink] { opacity: 1; background: var(--cn-pixel-fill, var(--cn-accent)); box-shadow: 2px 2px 0 var(--cn-shadow); }
.cn-hero:has(.cn-typer) { grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); }
.cn-typer { display: block; min-height: 122px; padding: 10px; background-color: #0000006b; color: var(--cn-text); text-decoration: none; }
.cn-typer:hover .cn-typer-out { color: var(--cn-heading); }
.cn-typer-name { display: block; min-height: 1.1em; font-family: 'osfeed Doto', 'IBM Plex Mono', monospace; font-weight: 700; font-size: 38px; line-height: 1.1; color: var(--cn-accent); overflow-wrap: anywhere; }
.cn-typer-text { display: block; min-height: 3.4em; margin-top: 12px; font-size: var(--cn-fs-copy); line-height: 1.7; }
.cn-caret { display: inline-block; width: 8px; height: 1.15em; margin-left: 2px; vertical-align: -3px; background: var(--cn-accent-2); }
@keyframes cn-blink { 50% { opacity: 0; } }
.cn-search-shell { border: var(--cn-edge-width) solid var(--cn-accent); box-shadow: var(--cn-shadow-offset) var(--cn-shadow-offset) 0 var(--cn-shadow); background: var(--cn-panel); }
.cn-search-top { display: flex; align-items: center; gap: 8px; padding: 9px 17px; color: var(--cn-muted); font-size: var(--cn-fs-micro); border-bottom: var(--cn-edge-width) solid var(--cn-line); }
.cn-search-top .cn-platform { margin-left: auto; color: var(--cn-text); }
.cn-query { display: flex; align-items: center; gap: 12px; padding: 17px; }
.cn-query:focus-within { background: var(--cn-inset); }
.cn-prompt { color: var(--cn-accent); font: 500 23px/1 var(--cn-mono); }
.cn-query input { border: 0; background: transparent; color: var(--cn-text); min-width: 0; width: 100%; font-size: 16px; padding: 5px 0; }
.cn-query input::placeholder, .cn-shelfsearch input::placeholder { color: var(--cn-muted); opacity: 1; }
.cn-query .cn-primary { min-height: 34px; padding: 5px 12px; flex: none; }
.cn-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 17px; margin: 20px 0 35px; font-size: var(--cn-fs-micro); color: var(--cn-muted); }
.cn-example { display: inline-block; border: 0; border-bottom: 1px dotted var(--cn-line); padding: 4px 0; background: transparent; color: var(--cn-text); font-size: var(--cn-fs-micro); }
.cn-example:hover { color: var(--cn-accent); border-color: var(--cn-accent); }
.cn-stats { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: var(--cn-fs-micro); color: var(--cn-muted); margin: -12px 0 30px; }
.cn-stats strong { color: var(--cn-text); font-weight: 500; }
.cn-preview-answer { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--cn-line); }
.cn-preview-answer > * { min-width: 0; }
.cn-preview-answer .cn-need { margin-bottom: 14px; font-size: var(--cn-fs-title); }

/* Cards: a project, as a link. A regular box that lights up on hover. */
.cn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cn-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; background: var(--cn-panel); border: var(--cn-edge-width) solid var(--cn-line); color: inherit; }
.cn-card:hover, .cn-card:focus-visible { border-color: var(--cn-accent); box-shadow: 4px 4px 0 var(--cn-shadow); }
.cn-cardhead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cn-cardhead > span:last-child { min-width: 0; }
.cn-cardhead strong { display: block; font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--cn-heading); letter-spacing: -.02em; }
.cn-cardhead small { display: block; font-size: var(--cn-fs-small); line-height: 1.5; color: var(--cn-muted); margin-top: 2px; }
.cn-cardbody { font-size: var(--cn-fs-body); line-height: 1.55; color: var(--cn-text); }
.cn-cardfoot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--cn-fs-micro); color: var(--cn-muted); }
.cn-cardmatch { display: grid; gap: 6px; }
.cn-cardmatch span { font-size: var(--cn-fs-copy); line-height: 1.5; color: var(--cn-text); padding-left: 10px; border-left: 2px solid var(--cn-accent); }
.cn-thumb { display: block; margin: -18px -18px 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cn-inset); border-bottom: var(--cn-edge-width) solid var(--cn-line); }
.cn-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cn-thumb-empty { display: grid; place-items: center; }
.cn-card:hover .cn-thumb, .cn-card:focus-visible .cn-thumb { border-bottom-color: var(--cn-accent); }
@media (min-width: 620px) {
  :root[data-view="rows"] .cn-cards { grid-template-columns: 1fr; gap: 12px; }
  :root[data-view="rows"] .cn-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 20px; row-gap: 10px; align-content: start; padding: 14px; }
  :root[data-view="rows"] .cn-card > * { grid-column: 2; }
  :root[data-view="rows"] .cn-card > .cn-thumb { grid-column: 1; grid-row: 1 / span 4; align-self: start; margin: 0; border: 1px solid var(--cn-line); }
  :root[data-view="rows"] .cn-card:hover > .cn-thumb { border-color: var(--cn-accent); }
  :root[data-view="rows"] .cn-ident-xl { grid-template-columns: repeat(5, 12px); grid-auto-rows: 12px; gap: 2px; }
  :root[data-view="rows"] .cn-cardfoot { margin-top: 0; }
  :root[data-view="rows"] .cn-cardbody { max-width: 80ch; }
}
.cn-recent { display: grid; gap: 0; }
.cn-recent a { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--cn-line); color: inherit; }
.cn-recent a:last-child { border-bottom: 0; }
.cn-recent a:hover .cn-recent-benefit { color: var(--cn-accent); }
.cn-recent .cn-recent-who { font-size: var(--cn-fs-micro); color: var(--cn-muted); }
.cn-recent .cn-recent-who strong { display: block; color: var(--cn-accent); font-weight: 500; font-size: var(--cn-fs-body); }
.cn-recent .cn-recent-benefit { font-size: var(--cn-fs-copy); max-width: 70ch; }

/* The shelf search: a primary box that fills in pink when it has the focus. */
.cn-shelfsearch { display: flex; align-items: center; gap: 12px; margin: -6px var(--cn-shadow-offset) 28px 0; padding: 10px 16px; background: var(--cn-panel); border: var(--cn-edge-width) solid var(--cn-control-line); box-shadow: var(--cn-button-shadow) var(--cn-button-shadow) 0 var(--cn-shadow); }
.cn-shelfsearch:focus-within { border-color: var(--cn-accent); box-shadow: var(--cn-shadow-offset) var(--cn-shadow-offset) 0 var(--cn-shadow); background: var(--cn-inset); }
.cn-shelfsearch .cn-prompt { font-size: 19px; }
.cn-shelfsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--cn-text); font-size: 16px; padding: 6px 0; }
.cn-shelfsearch input::-webkit-search-cancel-button { display: none; }
.cn-shelfcount { flex: none; font-size: var(--cn-fs-micro); color: var(--cn-muted); white-space: nowrap; }

/* Project page. */
.cn-project { max-width: none; }
.cn-prodhead { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.cn-prodhead form { margin: 0; }
.cn-prodtitle { flex: 1 1 320px; min-width: 0; }
.cn-prodtitle p { color: var(--cn-muted); font-size: var(--cn-fs-title); margin-top: 6px; max-width: 60ch; }
.cn-prodby { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: var(--cn-fs-small); color: var(--cn-muted); }
.cn-lede { margin-top: 22px; font-size: 16px; line-height: 1.65; color: var(--cn-text); max-width: 72ch; }
.cn-unclaimed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; padding: 12px 16px; }
.cn-unclaimed p { flex: 1 1 380px; min-width: 0; font-size: var(--cn-fs-small); line-height: 1.6; color: var(--cn-muted); }
.cn-unclaimed p a { color: var(--cn-text); }
.cn-claimcta { display: flex; align-items: center; gap: 12px; margin-left: auto; padding: 6px 6px 6px 8px; color: var(--cn-text); border: 1px solid transparent; }
.cn-claimcta:hover, .cn-claimcta:focus-visible { border-color: var(--cn-line); background: var(--cn-inset); }
.cn-claimcta:hover .cn-button { border-color: var(--cn-accent); }
.cn-claimtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.cn-claimtext strong { font-weight: 500; font-size: var(--cn-fs-copy); color: var(--cn-heading); }
.cn-claimtext span { font-size: var(--cn-fs-micro); color: var(--cn-muted); }
/* The project bar: facts on the left, actions on the right. It sticks under the site header and turns
   compact there, with the project's name and the way to get it. */
.cn-prodbar { position: sticky; top: 0; z-index: 9; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 22px; padding: 12px 0; border-block: 1px solid var(--cn-line); font-size: var(--cn-fs-small); color: var(--cn-muted); }
@media (min-width: 741px) {
  .cn-prodbar { top: var(--cn-top-height); }
  html:has(.cn-prodbar) { scroll-padding-top: calc(var(--cn-top-height) + 64px); }
}
@media (max-width: 740px) { html:has(.cn-prodbar) { scroll-padding-top: 64px; } }
.cn-prodfacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; min-width: 0; }
.cn-prodfacts strong { color: var(--cn-text); font-weight: 500; }
.cn-prodfacts a { color: var(--cn-warn); text-decoration: none; }
.cn-prodfacts a:hover { text-decoration: underline; }
.cn-prodfacts a.cn-who { color: var(--cn-text); }
.cn-prodactions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cn-prodbar-id, .cn-prodbar-get { display: none; }
.cn-prodbar.cn-stuck { padding: 8px 0; border-top-color: transparent; background: var(--cn-bg); box-shadow: 0 0 0 100vmax var(--cn-bg); clip-path: inset(0 -100vmax); }
.cn-prodbar.cn-stuck .cn-prodbar-id { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; color: var(--cn-heading); font-size: var(--cn-fs-title); text-decoration: none; }
.cn-prodbar.cn-stuck .cn-prodbar-id strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-prodbar.cn-stuck .cn-prodbar-id img { width: 26px; height: 26px; object-fit: contain; }
.cn-prodbar.cn-stuck .cn-prodbar-get { display: inline-flex; }
.cn-prodbar.cn-stuck .cn-fact-count { display: none; }
@media (max-width: 1000px) { .cn-prodbar.cn-stuck .cn-prodfacts { display: none; } }
.cn-gallery { display: flex; gap: 14px; margin-top: 26px; padding-bottom: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--cn-control-line) transparent; }
.cn-gallery a, .cn-gallery video { flex: none; scroll-snap-align: start; display: block; height: 280px; border: var(--cn-edge-width) solid var(--cn-line); background: var(--cn-inset); }
.cn-gallery a:hover, .cn-gallery a:focus-visible { border-color: var(--cn-accent); }
.cn-gallery img { display: block; height: 100%; width: auto; max-width: none; }
.cn-gallery video { width: auto; max-width: none; }
.cn-gallery-one { overflow: visible; }
.cn-gallery-one a, .cn-gallery-one video { flex: 1 1 auto; width: 100%; height: auto; max-height: 340px; overflow: hidden; }
.cn-gallery-one img { width: 100%; height: auto; object-fit: cover; object-position: top center; max-height: 340px; }
.cn-twocol { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; margin-top: 40px; align-items: start; }
.cn-twocol > * { min-width: 0; }
.cn-aside { display: grid; gap: 14px; }
.cn-aside > .cn-bandhead { margin-bottom: 4px; }
.cn-asidebox { padding: 16px 18px; }
.cn-asidebox h2 { font-size: var(--cn-fs-small); line-height: 1.5; letter-spacing: 0; font-weight: 500; color: var(--cn-muted); margin-bottom: 8px; }
.cn-asidebox p { color: var(--cn-text); line-height: 1.65; }
.cn-asidebox p + p { margin-top: 8px; color: var(--cn-muted); }
.cn-asidebox .cn-asidelead { font-size: var(--cn-fs-body); color: var(--cn-heading); }
.cn-asidebox .cn-tool { padding: 2px 0 2px 12px; background: none; }
.cn-asidebox .cn-tool + .cn-tool { margin-top: 12px; }
.cn-asidebox .cn-tool strong { font-size: var(--cn-fs-body); }
.cn-asidebox-main { margin: 0 var(--cn-shadow-offset) var(--cn-shadow-offset) 0; }
.cn-asidebox-main h2 { color: var(--cn-accent); }
.cn-asidebox-main p { font-size: var(--cn-fs-title); line-height: 1.6; color: var(--cn-heading); }
/* A use case: what you can do, one quiet line of facts, the note when there is one. */
.cn-uclist { display: grid; gap: 10px; }
.cn-ucs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cn-uc { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; }
.cn-uc h3 { line-height: 1.45; letter-spacing: -.01em; }
.cn-uchead { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 14px; }
.cn-uchead h3 { flex: 1; min-width: 0; }
.cn-others { flex: none; margin-top: 1px; }
.cn-uc .cn-ucmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--cn-fs-micro); color: var(--cn-muted); }
.cn-uc .cn-fine { border-top: 1px solid var(--cn-line); padding-top: 8px; }
.cn-fine summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--cn-warn); font-size: var(--cn-fs-micro); }
.cn-fine summary::-webkit-details-marker { display: none; }
.cn-fine summary::before { content: '+'; width: 1ch; }
.cn-fine[open] summary::before { content: '−'; }
.cn-fine p { margin-top: 8px; padding: 10px 12px; border-left: 2px solid var(--cn-warn); background: var(--cn-warn-bg); color: var(--cn-text); font-size: var(--cn-fs-small); line-height: 1.6; max-width: 80ch; }
.cn-uc:target, .cn-upgrade:target, .cn-capability:target { outline: 1px solid transparent; outline-offset: 6px; animation: cn-landed 2.4s ease-out; }
@keyframes cn-landed { 0%, 40% { outline-color: var(--cn-accent); } 100% { outline-color: transparent; } }
/* Upgrade notes: what to change, who is affected. */
.cn-upgrade { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 6px 20px; padding: 20px 0; border-bottom: 1px solid var(--cn-line); }
.cn-upgrade:last-of-type { border-bottom: 0; }
.cn-upgrade .cn-when, .cn-history-item .cn-when { font-size: var(--cn-fs-micro); color: var(--cn-muted); line-height: 1.6; }
.cn-upgrade .cn-when strong, .cn-history-item .cn-when strong { display: block; font-weight: 500; color: var(--cn-text); font-size: var(--cn-fs-small); }
.cn-upgrade p { font-size: var(--cn-fs-small); color: var(--cn-muted); margin-top: 6px; max-width: 74ch; }
.cn-upgrade .cn-meta, .cn-capability .cn-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; font-size: var(--cn-fs-micro); color: var(--cn-muted); }
.cn-capability { border-bottom: 1px solid var(--cn-line); padding: 22px 0; }
.cn-capability:first-of-type { padding-top: 17px; }
.cn-capability p { font-size: var(--cn-fs-small); color: var(--cn-muted); margin: 9px 0; }
.cn-capability h3, .cn-capability p { max-width: none; }
.cn-capability.cn-gone h3 { color: var(--cn-muted); text-decoration: line-through; text-decoration-color: var(--cn-line); }
.cn-limit { display: flex; gap: 9px; align-items: baseline; }
.cn-limit span { color: var(--cn-warn); flex: none; }
.cn-sources { margin-top: 12px; }
.cn-sources summary { cursor: pointer; color: var(--cn-accent); font-size: var(--cn-fs-micro); }
.cn-sources ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--cn-fs-micro); }
.cn-sources li { color: var(--cn-muted); }
/* Folds: history and removed items, one click away. */
.cn-folds { display: grid; gap: 0; border-top: 1px solid var(--cn-line); }
.cn-fold { border-bottom: 1px solid var(--cn-line); }
.cn-fold > summary { width: 100%; justify-content: space-between; padding: 16px 0; font-size: var(--cn-fs-title); font-weight: 500; color: var(--cn-heading); }
.cn-fold > summary::after { content: '+'; color: var(--cn-accent); font-size: 18px; line-height: 1; }
.cn-fold[open] > summary::after { content: '−'; }
.cn-fold > summary:hover { color: var(--cn-accent); }
.cn-fold > summary .cn-count { margin-right: auto; margin-left: 4px; }
.cn-fold > *:not(summary) { margin-bottom: 18px; }
.cn-history-item { display: grid; grid-template-columns: 95px 1fr; gap: 20px; border-bottom: 1px solid var(--cn-line); padding: 16px 0; }
.cn-history-item:last-child { border-bottom: 0; }
.cn-history-item h3 { font-size: var(--cn-fs-body); max-width: 66ch; }
.cn-history-item p { font-size: var(--cn-fs-small); color: var(--cn-muted); margin-top: 8px; }
.cn-history-item .cn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cn-provenance { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: var(--cn-fs-micro); color: var(--cn-muted); }
.cn-provenance > span { flex: 1 1 220px; }
.cn-tool { border-left: 3px solid var(--cn-accent); padding: 4px 14px; background: var(--cn-panel); }
.cn-tool strong, .cn-tool .cn-toolname { display: block; max-width: none; font-weight: 500; color: var(--cn-accent); font-size: 16px; }
.cn-tool small { display: flex; align-items: center; gap: 6px; color: var(--cn-muted); font-size: var(--cn-fs-micro); }
.cn-project .cn-tool { flex: 1 1 260px; padding: 10px 14px; }
.cn-project .cn-combo { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; margin: 0; }
.cn-seeded { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 12px 0; border-bottom: 1px solid var(--cn-line); }
.cn-seeded:last-child { border-bottom: 0; }
.cn-seeded > a:first-child { flex: 1 1 260px; min-width: 0; display: flex; gap: 12px; align-items: baseline; color: inherit; }
.cn-seeded > a:first-child:hover strong { color: var(--cn-accent); }
.cn-seeded strong { font-weight: 500; color: var(--cn-heading); }
.cn-seeded span { font-size: var(--cn-fs-micro); color: var(--cn-muted); }

/* Search results and need pages: capabilities grouped by project, in a primary box. */
.cn-followrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 14px; }
.cn-followrow p { color: var(--cn-muted); font-size: var(--cn-fs-small); line-height: 1.6; max-width: 70ch; }
.cn-answer-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 28px 0 18px; }
.cn-followrow + .cn-answer-head { margin-top: 24px; }
.cn-shelf-follow { margin: -8px 0 26px; }
.cn-answer { padding: var(--cn-space); }
.cn-answer h2 { max-width: 40ch; }
.cn-hit { border-top: 1px solid var(--cn-line); padding: 22px 0; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 24px; }
.cn-hit > * { min-width: 0; }
.cn-hit:first-of-type { border-top: 0; }
.cn-hit .cn-tool { align-self: start; }
.cn-hit .cn-capability { padding: 0 0 16px; border-bottom: 0; }
.cn-hit .cn-capability:last-child { padding-bottom: 0; }
.cn-followcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 28px; padding: 18px 20px; }
.cn-followcta strong { color: var(--cn-heading); font-size: var(--cn-fs-title); }
.cn-followcta p { max-width: 70ch; margin-top: 4px; color: var(--cn-muted); font-size: var(--cn-fs-copy); line-height: 1.6; }
.cn-need-chip .cn-count { margin-left: 4px; }

/* Following: the popup, the Following page. */
.cn-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; color: var(--cn-text); }
.cn-dialog::backdrop { background: rgb(0 0 0 / .62); }
.cn-dialog-x { position: absolute; top: 10px; right: 12px; padding: 2px 6px; border: 0; background: none; color: var(--cn-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.cn-dialog-x:hover { color: var(--cn-accent); }
.cn-dialog-body { padding: 24px; }
.cn-followbox { display: grid; gap: 12px; }
.cn-followbox h2 { padding-right: 28px; overflow-wrap: anywhere; }
.cn-followbox-what { color: var(--cn-muted); }
.cn-followbox-form { display: grid; gap: 10px; }
.cn-followbox-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cn-followbox-more { display: grid; gap: 8px; }
.cn-followbox-more summary { color: var(--cn-accent); font-size: var(--cn-fs-small); cursor: pointer; }
.cn-followbox-more[open] summary { margin-bottom: 4px; }
.cn-followbox-foot { padding-top: 12px; border-top: 1px solid var(--cn-line); color: var(--cn-muted); font-size: var(--cn-fs-small) !important; }
.cn-followpage { max-width: 560px; padding: 24px; }
.cn-fsec { margin-top: 36px; }
.cn-fsec > h2 { margin-bottom: 14px; }
.cn-fsec h3 { margin: 18px 0 8px; color: var(--cn-muted); font-size: var(--cn-fs-small); font-weight: 500; }
.cn-flist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cn-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px 16px; padding: 12px 14px; }
.cn-frow-paused .cn-frow-what { opacity: .65; }
.cn-frow-what { display: grid; gap: 3px; min-width: 0; }
.cn-frow-what a, .cn-frow-what strong { color: var(--cn-heading); font-weight: 500; overflow-wrap: anywhere; }
.cn-frow-what a:hover { color: var(--cn-accent); }
.cn-frow-what small { color: var(--cn-muted); font-size: var(--cn-fs-micro); }
.cn-frow-channel, .cn-frow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cn-frow-actions { justify-content: flex-end; }
.cn-frow-channel select { max-width: 240px; }
/* What is new for a follow: a link in its row that opens a panel under it (a page without JavaScript). */
.cn-frow-new { color: var(--cn-muted); }
.cn-frow-new.cn-frow-hasnew { color: var(--cn-accent-2); font-weight: 500; }
.cn-frow-new::after { content: '+'; margin-left: 6px; color: var(--cn-accent); }
.cn-frow-new[aria-expanded="true"]::after { content: '−'; }
.cn-frow-panel { grid-column: 1 / -1; padding-top: 4px; }
.cn-fchanges { display: grid; gap: 10px; padding: 12px 14px; background: var(--cn-inset); border: 1px solid var(--cn-line); }
.cn-fchanges h4 { margin: 4px 0 2px; font-size: var(--cn-fs-small); font-weight: 500; color: var(--cn-heading); }
.cn-fchlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cn-fchlist-sent { opacity: .75; }
.cn-fch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--cn-line); }
.cn-fch:first-child { border-top: 0; }
.cn-fch .cn-badge { margin-top: 2px; }
.cn-fch-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; font-size: var(--cn-fs-copy); }
.cn-fch-body a strong { font-weight: 500; color: var(--cn-heading); }
.cn-fch-date { font-size: var(--cn-fs-micro); color: var(--cn-muted); }
.cn-fch-body p { flex-basis: 100%; color: var(--cn-text); font-size: var(--cn-fs-copy); line-height: 1.6; }
.cn-fch-body small { color: var(--cn-muted); font-size: var(--cn-fs-micro); }
.cn-fch-none { color: var(--cn-muted); font-size: var(--cn-fs-copy); }
.cn-addhook { display: grid; gap: 8px; margin-top: 18px; padding: 16px; }
.cn-addhook h3 { margin: 0 0 4px; font-size: var(--cn-fs-body); }
.cn-addhook .cn-hookrow { grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr) auto; align-items: stretch; }
.cn-js .cn-nojs { display: none; }
.cn-followmore { margin-top: 28px; color: var(--cn-muted); font-size: var(--cn-fs-copy); }

/* Release pages and the prose pages (privacy, what changed). */
.cn-relnav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; margin: 34px 0 14px; font-size: var(--cn-fs-small); }
.cn-prose { max-width: 70ch; margin-top: 14px; }
.cn-prose h2 { margin: 26px 0 8px; font-size: 16px; }
.cn-prose p, .cn-prose li { color: var(--cn-text); line-height: 1.75; }
.cn-prose ul { padding-left: 18px; display: grid; gap: 8px; }
.cn-steps { display: grid; gap: 30px; max-width: 820px; }
.cn-steps h2 { margin: 0 0 10px; font-size: 18px; }
.cn-steps h3 { margin: 18px 0 6px; font-size: var(--cn-fs-body); color: var(--cn-heading); }
.cn-steps .cn-via-row { margin: 8px 0; }

/* Guides for maintainers and agents, claiming, consent: numbered steps beside a primary box. */
.cn-guide { max-width: 1020px; margin: 0 auto; }
.cn-maintain-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 42px; margin-top: 34px; }
.cn-maintain-layout > * { min-width: 0; }
.cn-numbered { list-style: none; margin: 0; padding: 0; counter-reset: steps; }
.cn-numbered li { display: grid; grid-template-columns: 25px 1fr; gap: 12px; padding: 0 0 26px; counter-increment: steps; }
.cn-numbered li::before { content: counter(steps, decimal-leading-zero); font-size: var(--cn-fs-micro); color: var(--cn-accent); padding-top: 3px; }
.cn-numbered h3 { font-size: var(--cn-fs-body); }
.cn-numbered p { color: var(--cn-muted); font-size: var(--cn-fs-small); margin-top: 7px; }
.cn-publish-box { padding: 24px; }
.cn-publish-box p { font-size: var(--cn-fs-small); color: var(--cn-muted); margin: 12px 0 18px; }
.cn-publish-box form.cn-row { margin-top: 18px; }
.cn-proofrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--cn-line); padding: 13px 0; font-size: var(--cn-fs-micro); }
.cn-proofrow strong { font-weight: 500; color: var(--cn-good); }
.cn-answer-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 24px; }
.cn-evidence { padding: 18px; margin-top: 22px; }
.cn-evidence summary { cursor: pointer; color: var(--cn-accent); font-size: var(--cn-fs-small); }
.cn-evidence p { margin-top: 13px; font-size: var(--cn-fs-micro); color: var(--cn-muted); }
.cn-evidence a { display: inline-block; margin-top: 12px; font-size: var(--cn-fs-micro); }
.cn-message { margin-top: 16px; font-size: var(--cn-fs-small); color: var(--cn-good); }

/* Admin. */
.cn-admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 22px; border-bottom: var(--cn-edge-width) solid var(--cn-line); }
.cn-admin-tabs a { padding: 8px 12px; color: var(--cn-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: calc(-1 * var(--cn-edge-width)); }
.cn-admin-tabs a:hover { color: var(--cn-heading); }
.cn-admin-tabs a[aria-current="page"] { color: var(--cn-accent); border-bottom-color: var(--cn-accent); }
.cn-admin-notice { margin-bottom: 16px; padding: 10px 12px; border: var(--cn-edge-width) solid var(--cn-good); color: var(--cn-good); }
.cn-admin-h { margin: 26px 0 10px; font-size: var(--cn-fs-title); }
.cn-admin-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.cn-admin-stats > div { min-width: 130px; padding: 12px 14px; border: var(--cn-edge-width) solid var(--cn-line); background: var(--cn-panel); }
.cn-admin-stats a { color: inherit; text-decoration: none; }
.cn-admin-stats strong { display: block; font-size: 22px; color: var(--cn-heading); }
.cn-admin-stats span { color: var(--cn-muted); font-size: var(--cn-fs-small); }
.cn-admin-budget { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cn-admin-bar { width: 220px; height: 12px; appearance: none; border: var(--cn-edge-width) solid var(--cn-line); background: var(--cn-inset); }
.cn-admin-bar::-webkit-progress-bar { background: var(--cn-inset); }
.cn-admin-bar::-webkit-progress-value { background: var(--cn-accent); }
.cn-admin-bar::-moz-progress-bar { background: var(--cn-accent); }
.cn-admin-table { width: 100%; border-collapse: collapse; font-size: var(--cn-fs-small); margin-top: 10px; }
.cn-admin-table th { text-align: left; color: var(--cn-muted); font-weight: 500; padding: 8px 10px; border-bottom: var(--cn-edge-width) solid var(--cn-line); }
.cn-admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--cn-line); vertical-align: top; }
.cn-admin-table td small { display: block; color: var(--cn-muted); }
.cn-admin-table .cn-num { text-align: right; font-variant-numeric: tabular-nums; }
.cn-admin-hidden td { opacity: .6; }
.cn-admin-behind { color: var(--cn-warn); }
.cn-admin-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.cn-admin-actions details { font-size: var(--cn-fs-small); }
.cn-admin-actions details form { display: grid; gap: 6px; margin-top: 6px; }
.cn-admin-actions input { padding: 4px 6px; border-width: 1px; }
.cn-admin-agent { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 6px; }
.cn-admin-msg { max-width: 60ch; overflow-wrap: anywhere; white-space: pre-wrap; }

/* ---- 12. Responsive and motion ---- */
@media (max-width: 1180px) {
  .cn-top { gap: 12px 22px; padding-inline: 24px; }
  .cn-brand { font-size: 24px; }
  .cn-nav { gap: 18px; }
  .cn-agent-label { display: none; }
}
@media (max-width: 920px) {
  .cn-account-label { display: none; }
  .cn-nav { gap: 14px; }
}
@media (max-width: 860px) {
  .cn-twocol { grid-template-columns: 1fr; gap: 26px; }
  .cn-aside { position: static; order: -1; }
}
@media (max-width: 740px) {
  .cn-top { gap: 16px; padding: 18px 23px; }
  .cn-nav { order: 3; flex-basis: 100%; gap: 20px; margin-inline: -2px; padding-inline: 2px; }
  .cn-top-actions { margin-left: auto; }
  .cn-main { padding: 28px 23px 48px; }
  .cn-foot { padding: 18px 23px; }
  .cn-hero { grid-template-columns: 1fr 100px; gap: 10px; }
  .cn-glyph { grid-template-columns: repeat(7, 6px); gap: 4px; }
  .cn-glyph span { height: 6px; }
  .cn-hero:has(.cn-typer) { grid-template-columns: 1fr; gap: 22px; }
  .cn-typer { min-height: 108px; }
  .cn-typer-name { font-size: 30px; }
  .cn-maintain-layout { grid-template-columns: 1fr; gap: 8px; }
  .cn-gallery a, .cn-gallery video { height: 220px; }
  .cn-hit { grid-template-columns: 1fr; }
  .cn-uchead { flex-direction: column; }
  .cn-claimcta { margin-left: 0; width: 100%; }
  .cn-claimcta .cn-button { margin-left: auto; }
  .cn-prodactions { margin-left: 0; }
  .cn-prodbar.cn-stuck .cn-prodactions { margin-left: auto; }
  .cn-frow { grid-template-columns: 1fr; }
  .cn-frow-actions { justify-content: flex-start; }
  .cn-fch { grid-template-columns: 1fr; }
  .cn-frow-channel select { max-width: none; flex: 1; }
  .cn-addhook .cn-hookrow { grid-template-columns: minmax(0, 1fr) auto; }
  .cn-addhook .cn-hookrow input[name="webhook"] { grid-column: 1 / -1; order: -1; }
  .cn-admin-table { display: block; overflow-x: auto; }
  body:has(.cn-home)::before { height: 640px; }
  .cn-pagehead::before { display: none; }
}
@media (max-width: 480px) {
  :root { --cn-fs-page: 31px; }
  .cn-top { padding: 17px; gap: 14px; }
  .cn-main { padding: 22px 17px 40px; }
  .cn-foot { padding: 18px 17px; }
  .cn-brand { font-size: 22px; }
  .cn-mark { width: 32px; height: 32px; }
  .cn-nav { justify-content: flex-start; gap: 18px; }
  .cn-hero { grid-template-columns: 1fr; padding-top: 28px; }
  .cn-glyph { display: none; }
  .cn-hero h1 { font-size: 35px; }
  .cn-hero p { font-size: var(--cn-fs-small); }
  .cn-query { flex-wrap: wrap; padding: 14px; gap: 12px; }
  .cn-query input { width: calc(100% - 32px); }
  .cn-query .cn-primary { width: auto; margin-left: auto; }
  .cn-preview-answer { grid-template-columns: 1fr; gap: 13px; }
  .cn-answer { padding: 20px 17px; }
  .cn-publish-box { padding: 19px 16px; }
  .cn-history-item, .cn-upgrade, .cn-recent a { grid-template-columns: 1fr; gap: 6px; }
  .cn-cards, .cn-ucs { grid-template-columns: 1fr; }
  .cn-card:hover { box-shadow: none; }
  .cn-shelfcount { display: none; }
  .cn-account-label { display: none; }
  .cn-claimcta { flex-wrap: wrap; }
  .cn-claimtext { flex: 1 1 180px; }
  .cn-prodbar.cn-stuck { flex-wrap: nowrap; gap: 10px; }
  .cn-prodbar.cn-stuck .cn-prodactions { gap: 6px; flex: none; }
  .cn-prodbar.cn-stuck .cn-iconbutton { display: none; }
  .cn-hookfields, .cn-addhook .cn-hookrow { grid-template-columns: 1fr; }
  .cn-addhook .cn-hookrow input[name="webhook"] { order: 0; }
  .cn-dialog-body, .cn-followpage { padding: 18px; }
  .cn-via-row { flex-direction: column; }
}
@media (pointer: coarse) {
  button, .cn-button, .cn-query .cn-primary, summary { min-height: 44px; }
  .cn-iconbutton { min-width: 44px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cn-button:not(.cn-quiet):not(:disabled):hover { transform: translate(-1px, -1px); box-shadow: calc(var(--cn-button-shadow) + 1px) calc(var(--cn-button-shadow) + 1px) 0 var(--cn-shadow); }
  .cn-button:not(.cn-quiet):not(:disabled):active { transform: translate(var(--cn-button-shadow), var(--cn-button-shadow)); box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) {
  button { transition: background-color 120ms ease, border-color 120ms ease; }
  .cn-button.cn-primary { transition: background-position 260ms ease, transform 120ms ease, box-shadow 120ms ease; }
  .cn-caret { animation: cn-blink 1s steps(1) infinite; }
}