/* ThemeForge public site — «Ember · Forge» (docs/public-site/design-system).
   Light cream base with dark bands; content 1120px, prose 680px. Every class is prefixed `s-` so the
   new layer can live next to the old styles.css (which owns .btn, .card, .hero…) without collisions.
   Fonts are served from our own host: no third-party request before cookie consent. */

@font-face { font-family: "Geist"; src: url("/assets/fonts/geist/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --s-ink: #0F1115;
  --s-steel: #2A2D34;
  --s-paper: #FAF8F4;
  --s-surface: #FFFFFF;
  --s-raised: #F4EEE4;
  --s-hair: #E8E2D6;
  --s-border: #DACEBB;
  --s-muted: #5E5346;
  --s-soft: #6E6150;          /* ≥ 4.5:1 on every light surface incl. the tint (#FDEEE8) */
  --s-ember: #E8552B;
  --s-ember-hover: #C23E18;
  --s-ember-text: #B23A16;
  --s-ember-tint: #FDEEE8;
  --s-ember-btn: #CF441C;      /* white text on it = 4.67:1 (WCAG AA for 15px); #E8552B gives only 3.64 */
  --s-ember-btn-hover: #B23A16;
  --s-amber: #F5A524;
  --s-glow: #FFB347;
  --s-on-dark: #FAF8F4;
  --s-on-dark-muted: #B8B2A8;
  --s-dark-line: #2E323A;
  --s-code-bg: #16191F;
  --s-code-text: #D9D4CA;
  --s-code-dim: #8C877E;
  --s-code-tag: #9DB2C9;
  --s-wp-bar: #1D2327;
  --s-board: #17140F;
  --s-board-text: #F4EEE4;
  --s-board-muted: #B9A992;
  --s-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --s-r-sm: 10px; --s-r-md: 16px; --s-r-lg: 20px; --s-r-xl: 28px;
  --s-shadow: 0 1px 2px rgba(38,31,24,.06), 0 8px 24px rgba(38,31,24,.07);
  --s-shadow-ember: 0 6px 20px rgba(232,85,43,.32);
  --s-ease: cubic-bezier(.22,.61,.36,1);
  --s-wrap: 1120px;
  --s-section-y: clamp(56px, 8vw, 112px);
}

* { box-sizing: border-box; }
body.s-body { margin: 0; background: var(--s-paper); color: var(--s-ink); font-family: var(--s-font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.s-body a { color: inherit; }
.s-body h1, .s-body h2, .s-body h3, .s-body h4 { margin: 0; text-wrap: balance; }
.s-body p { margin: 0; }
.s-body img { max-width: 100%; }
.s-body code { font-family: var(--s-mono); font-size: .88em; background: var(--s-raised); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.s-skip { position: absolute; left: 16px; top: -60px; background: var(--s-ink); color: var(--s-on-dark); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.s-skip:focus { top: 12px; }
.s-wrap { max-width: var(--s-wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.s-eyebrow { font-family: var(--s-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--s-ember-text); }
.s-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--s-muted); max-width: 660px; }
.s-section { padding-block: var(--s-section-y); }
.s-section.s-tight { padding-top: 0; }
.s-h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.s-head { display: grid; gap: 14px; margin-bottom: 40px; max-width: 720px; }
.s-fine { font: 500 13px/1.6 var(--s-mono); color: var(--s-soft); }
.s-body :focus-visible { outline: 3px solid color-mix(in srgb, var(--s-ember) 45%, transparent); outline-offset: 2px; }

/* Buttons */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; font: 600 15px/1.2 var(--s-font); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .16s ease-out, transform .12s ease-out, border-color .16s; text-align: center; }
.s-btn:active { transform: translateY(1px); }
.s-btn-primary { background: var(--s-ember-btn); color: #fff !important; box-shadow: var(--s-shadow-ember); }
.s-btn-primary:hover { background: var(--s-ember-btn-hover); }
.s-btn-ghost { background: transparent; color: var(--s-ink); border-color: var(--s-border); }
.s-btn-ghost:hover { border-color: var(--s-ink); }
.s-dark .s-btn-ghost { color: var(--s-on-dark); border-color: #4A4D55; }
.s-dark .s-btn-ghost:hover { border-color: var(--s-on-dark); }
.s-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.s-spark-host { position: relative; display: inline-flex; }
.s-spark-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* Header */
.s-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--s-paper) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--s-hair); }
.s-top .s-wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.s-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--s-ink); }
.s-brand svg { width: 30px; height: 30px; overflow: visible; }
.s-brand rect { transform-box: fill-box; }
.s-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 15px; color: var(--s-muted); }
.s-nav > a, .s-dd > summary { text-decoration: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.s-nav > a:hover, .s-dd > summary:hover, .s-nav > a[aria-current="page"] { color: var(--s-ink); }
.s-dd { position: relative; }
.s-dd > summary { list-style: none; }
.s-dd > summary::-webkit-details-marker { display: none; }
.s-dd > summary::after { content: " ▾"; color: var(--s-soft); font-size: 12px; }
.s-menu { position: absolute; left: 0; top: calc(100% + 6px); background: var(--s-surface); border: 1px solid var(--s-hair); border-radius: var(--s-r-md); box-shadow: var(--s-shadow); padding: 6px; display: grid; min-width: 240px; z-index: 40; }
.s-menu a { text-decoration: none; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--s-ink); display: grid; gap: 2px; }
.s-menu a small { color: var(--s-soft); font-size: 12px; }
.s-menu a:hover { background: var(--s-raised); }
.s-menu a[aria-current="page"] { color: var(--s-ember-text); font-weight: 600; }
.s-lang > summary { font: 600 13px/1 var(--s-mono); letter-spacing: .06em; padding: 9px 12px; border: 1px solid var(--s-hair); border-radius: 999px; }
.s-lang .s-menu { left: auto; right: 0; min-width: 170px; }
.s-login { font-size: 15px; text-decoration: none; color: var(--s-ink); white-space: nowrap; }
.s-top .s-btn { min-height: 40px; padding: 0 18px; white-space: nowrap; }
.s-burger { display: none; }
/* Long labels (ru, de, fr) need the full width before the menu folds into the burger. */
@media (max-width: 1120px) {
  .s-nav, .s-login { display: none; }
  .s-lang { margin-left: auto; }
  .s-burger { display: block; }
  .s-top .s-btn-primary { display: none; }
}
.s-burger > summary { list-style: none; font: 600 13px/1 var(--s-mono); padding: 9px 12px; border: 1px solid var(--s-hair); border-radius: 999px; cursor: pointer; }
.s-burger > summary::-webkit-details-marker { display: none; }
.s-burger .s-menu { left: auto; right: 0; min-width: min(320px, calc(100vw - 32px)); max-height: 75vh; overflow-y: auto; }
.s-menu .s-menu-h { font: 600 11px/1 var(--s-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--s-soft); padding: 12px 12px 4px; }

/* Breadcrumbs */
.s-crumbs { font: 500 13px/1.4 var(--s-mono); color: var(--s-soft); display: flex; flex-wrap: wrap; gap: 8px; padding-top: 28px; list-style: none; margin: 0; padding-left: 0; }
.s-crumbs a { text-decoration: none; }
.s-crumbs a:hover { color: var(--s-ink); }
.s-crumbs li + li::before { content: "› "; }

/* Hero */
.s-hero { position: relative; overflow: hidden; padding-block: clamp(36px, 6vw, 88px); }
.s-hero.s-has-crumbs { padding-top: 24px; }
.s-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 56px); align-items: center; position: relative; }
.s-hero-grid.s-solo { grid-template-columns: minmax(0, 820px); }
.s-hero h1 { font-size: clamp(36px, 5.2vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; }
.s-hero h1 em { font-style: normal; color: var(--s-ember); }
.s-hero-copy { display: grid; gap: 20px; min-width: 0; }
.s-glow::before { content: ""; position: absolute; inset: -30% -12% auto auto; width: 60%; height: 130%; background: radial-gradient(closest-side, color-mix(in srgb, var(--s-ember) 20%, transparent), transparent 70%), radial-gradient(closest-side at 70% 80%, color-mix(in srgb, var(--s-amber) 16%, transparent), transparent 70%); pointer-events: none; }
@media (max-width: 900px) { .s-hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* Hero visual: screenshot */
.s-shot { margin: 0; display: grid; gap: 10px; }
.s-shot img { display: block; width: 100%; height: auto; border-radius: var(--s-r-lg); border: 1px solid var(--s-hair); box-shadow: var(--s-shadow); }
.s-shot figcaption { font: 500 12px/1.5 var(--s-mono); color: var(--s-soft); }
.s-log-m { display: grid; gap: 14px; margin-top: 40px; max-width: 820px; }
.s-log-h { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.s-log { list-style: none; margin: 0; padding: 0; display: grid; }
.s-log li { display: grid; grid-template-columns: 64px 128px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--s-hair); }
.s-log time { font: 500 13px var(--s-mono); color: var(--s-soft); }
.s-log-tag { justify-self: start; font: 500 11px/1 var(--s-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--s-ember-text); background: var(--s-ember-tint); padding: 5px 8px; border-radius: 6px; }
.s-log p { color: var(--s-muted); }
@media (max-width: 640px) { .s-log li { grid-template-columns: 56px minmax(0, 1fr); } .s-log p { grid-column: 1 / -1; } }
.s-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 32px; }
@media (max-width: 760px) { .s-shots { grid-template-columns: minmax(0, 1fr); } }

/* Hero visual: file tree */
.s-files { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 14px; align-items: center; min-width: 0; }
.s-tree { background: var(--s-surface); border: 1px solid var(--s-hair); border-radius: var(--s-r-lg); box-shadow: var(--s-shadow); padding: 16px 18px; font: 400 13.5px/1.9 var(--s-mono); min-width: 0; overflow-x: auto; }
.s-tree .s-t { font: 600 11px/1 var(--s-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--s-soft); display: block; margin-bottom: 10px; }
.s-tree .s-d { color: var(--s-soft); }
.s-tree .s-hl { color: var(--s-ember-text); font-weight: 600; }
.s-arrow { font: 600 22px/1 var(--s-mono); color: var(--s-ember); text-align: center; }
@media (max-width: 520px) { .s-files { grid-template-columns: minmax(0,1fr); } .s-arrow { transform: rotate(90deg); } }

/* Hero visual: rebuild toy (home). Without JS: the first design, static, still readable. */
.s-toy { display: grid; gap: 14px; min-width: 0; }
.s-toy-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.s-toy-kept { font-size: 14px; color: var(--s-muted); }
.s-toy-kept b { color: var(--s-ink); font-variant-numeric: tabular-nums; }
.s-site { border-radius: var(--s-r-md); overflow: hidden; transition: background-color .5s var(--s-ease), color .5s var(--s-ease); box-shadow: var(--s-shadow); }
.s-site-in { display: grid; gap: 18px; padding: 22px; }
.s-site-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.s-site-name { font-weight: 800; font-size: 20px; letter-spacing: -.03em; }
.s-site-tag { font-size: 13px; }
.s-drinks { display: grid; gap: 10px; }
.s-drink { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.s-drink input { font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px dashed transparent; padding: 2px 0; min-width: 0; width: 100%; border-radius: 0; }
.s-drink input:hover { border-bottom-color: currentColor; }
.s-drink input:focus { outline: none; border-bottom: 1px solid var(--s-ember); }
.s-drink .s-d-name { flex: 1 1 auto; }
.s-drink .s-d-price { flex: 0 0 5.2em; text-align: right; font-variant-numeric: tabular-nums; }
.s-drink.s-edited input { text-decoration: underline; text-decoration-color: var(--s-amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.s-add-drink { justify-self: start; border: 1px dashed currentColor; background: none; color: inherit; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; opacity: .8; }
.s-add-drink:hover { opacity: 1; }
.s-site[data-design="a"] { background: var(--s-surface); color: var(--s-ink); border: 1px solid #EBE2D3; }
.s-site[data-design="a"] .s-site-tag { color: var(--s-soft); }
.s-site[data-design="a"] .s-drinks { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.s-site[data-design="a"] .s-drink { flex-direction: column; align-items: stretch; gap: 6px; background: var(--s-paper); border: 1px solid #EBE2D3; border-radius: 14px; padding: 14px; }
.s-site[data-design="a"] .s-drink .s-d-name { font-weight: 600; }
.s-site[data-design="a"] .s-drink .s-d-price { flex: none; text-align: left; color: var(--s-ember-text); font-weight: 600; }
.s-site[data-design="b"] { background: var(--s-board); color: var(--s-board-text); }
.s-site[data-design="b"] .s-site-head { flex-direction: column; align-items: center; text-align: center; }
.s-site[data-design="b"] .s-site-name { font-family: var(--s-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 18px; }
.s-site[data-design="b"] .s-site-tag { color: var(--s-board-muted); }
.s-site[data-design="b"] .s-drink { border-bottom: 1px dotted rgba(244,238,228,.28); padding-block: 4px; }
.s-site[data-design="b"] .s-drink .s-d-price { font-family: var(--s-mono); color: var(--s-glow); }
.s-site[data-design="b"] .s-add-drink { justify-self: center; }
.s-site[data-design="c"] { background: var(--s-ember); color: #FFF7F1; }
.s-site[data-design="c"] .s-site-in { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); align-items: start; }
.s-site[data-design="c"] .s-site-head { flex-direction: column; align-items: flex-start; }
.s-site[data-design="c"] .s-site-name { font-size: clamp(26px, 4vw, 38px); line-height: .95; }
.s-site[data-design="c"] .s-site-tag { color: #FFE2D3; }
.s-site[data-design="c"] .s-drink { font-size: 17px; font-weight: 600; }
.s-site[data-design="c"] .s-drink .s-d-price { color: var(--s-ink); }
.s-site[data-design="c"] .s-add-drink { grid-column: 2; }
@media (max-width: 560px) { .s-site[data-design="c"] .s-site-in { grid-template-columns: minmax(0,1fr); } .s-site[data-design="c"] .s-add-drink { grid-column: auto; } }
.s-chips-d { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--s-soft); }
.s-chips-d span { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--s-border); }
.s-chips-d span.s-on { border-color: var(--s-ember); color: var(--s-ember-text); }
.s-toy-note { font: 500 12px/1.5 var(--s-mono); color: var(--s-soft); }

/* Logo assembles once (CSS only) */
@media (prefers-reduced-motion: no-preference) {
  .s-mark-play .s-m-sq   { animation: s-m-sq .34s var(--s-ease) both; }
  .s-mark-play .s-m-ttop { animation: s-m-drop .30s var(--s-ease) .20s both; }
  .s-mark-play .s-m-tst  { animation: s-m-rise .30s var(--s-ease) .32s both; }
  .s-mark-play .s-m-f1   { animation: s-m-slide .30s var(--s-ease) .50s both, s-m-heat .9s ease-out .62s both; }
  .s-mark-play .s-m-f2   { animation: s-m-slide .30s var(--s-ease) .60s both, s-m-heat .9s ease-out .72s both; }
}
@keyframes s-m-sq    { from { transform: scale(.55); opacity: 0; } }
@keyframes s-m-drop  { from { transform: translateY(-120%); opacity: 0; } }
@keyframes s-m-rise  { from { transform: translateY(60%); opacity: 0; } }
@keyframes s-m-slide { from { transform: translateX(90%); opacity: 0; } }
@keyframes s-m-heat  { 0% { fill: #FFD27A; } 35% { fill: #FFB347; } 100% { fill: #E8552B; } }

/* Sources strip */
.s-strip { padding-block: 26px; border-block: 1px solid var(--s-hair); background: var(--s-surface); }
.s-strip .s-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.s-strip-label { font: 500 12px/1 var(--s-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--s-soft); }
.s-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.s-chip { font-size: 14px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--s-hair); border-radius: 999px; background: var(--s-paper); text-decoration: none; }
a.s-chip:hover { border-color: var(--s-border); }
.s-chip small { font-weight: 400; color: var(--s-soft); }

/* Direct answer */
.s-answer { background: var(--s-surface); border: 1px solid var(--s-hair); border-left: 4px solid var(--s-ember); border-radius: var(--s-r-md); padding: clamp(20px, 3vw, 28px); display: grid; gap: 10px; max-width: 860px; }
.s-answer-label { font: 600 12px/1 var(--s-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--s-ember-text); }
.s-answer p { font-size: 18px; }

/* Example: source markup next to the admin it produces */
.s-ex { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .s-ex { grid-template-columns: minmax(0,1fr); } }
.s-pane { border-radius: var(--s-r-lg); overflow: hidden; min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.s-pane-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 16px; font: 500 12px/1 var(--s-mono); }
.s-src { background: var(--s-code-bg); border: 1px solid var(--s-dark-line); color: var(--s-code-text); }
.s-src .s-pane-head { border-bottom: 1px solid var(--s-dark-line); color: var(--s-code-dim); }
.s-src pre { margin: 0; padding: 14px 0; overflow-x: auto; font: 400 13px/1.75 var(--s-mono); }
.s-ln { display: block; padding: 0 16px; border-left: 3px solid transparent; white-space: pre; }
.s-ln[data-f] { cursor: pointer; }
.s-ln.s-on { background: rgba(255,179,71,.12); border-left-color: var(--s-glow); }
.s-ln .s-at { color: var(--s-glow); }
.s-ln .s-tg { color: var(--s-code-tag); }
.s-adm { background: var(--s-surface); border: 1px solid var(--s-hair); box-shadow: var(--s-shadow); }
.s-adm .s-pane-head { background: var(--s-wp-bar); color: #F0F0F1; }
.s-adm-body { padding: 16px; display: grid; gap: 12px; align-content: start; }
.s-fld { display: grid; gap: 6px; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; transition: background .16s, border-color .16s; }
.s-fld.s-on { background: var(--s-ember-tint); border-color: color-mix(in srgb, var(--s-ember) 40%, transparent); }
.s-fld-l { font: 600 12px/1 var(--s-font); color: var(--s-ink); }
.s-fld-v { font-size: 14px; border: 1px solid var(--s-border); border-radius: 6px; padding: 7px 10px; background: var(--s-surface); color: var(--s-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-rep { border: 1px solid var(--s-hair); border-radius: 8px; overflow: hidden; }
.s-rep-row { display: grid; grid-template-columns: 22px 34px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--s-hair); font-size: 14px; }
.s-rep-row:first-child { border-top: none; }
.s-rep-row .s-n { font: 500 11px/1 var(--s-mono); color: var(--s-soft); }
.s-thumb { width: 34px; height: 34px; border-radius: 6px; background: var(--s-raised); display: grid; place-items: center; }
.s-thumb svg { width: 20px; height: 20px; }
.s-rep-row .s-nm { font-weight: 600; min-width: 0; }
.s-rep-row .s-nm small { display: block; font-weight: 400; color: var(--s-soft); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-rep-row .s-pr { font: 600 13px/1 var(--s-mono); background: var(--s-raised); padding: 6px 8px; border-radius: 6px; }
.s-add-row { font: 600 13px/1 var(--s-font); border: 1px dashed var(--s-border); border-radius: 8px; padding: 9px 12px; color: var(--s-ink); justify-self: start; }
.s-caption { font: 500 13px/1.6 var(--s-mono); color: var(--s-soft); margin-top: 14px; }

/* Cards (in / out / fit / not fit) */
.s-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.s-card { background: var(--s-surface); border: 1px solid var(--s-hair); border-radius: var(--s-r-lg); padding: 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.s-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.s-card p { color: var(--s-muted); font-size: 15px; }
.s-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--s-muted); font-size: 15px; }
.s-card li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 6px; }
.s-card li::before { font-family: var(--s-mono); color: var(--s-soft); content: "–"; }
.s-card.s-yes li::before { content: "✓"; color: var(--s-ember); }
.s-card.s-no li::before { content: "×"; }

/* Steps */
.s-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.s-step { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 2px solid var(--s-ink); min-width: 0; }
.s-step-n { font: 600 13px/1 var(--s-mono); color: var(--s-ember-text); }
.s-step h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.s-step p { color: var(--s-muted); }
@media (max-width: 820px) { .s-steps { grid-template-columns: minmax(0,1fr); } }

/* Table */
.s-table-wrap { overflow-x: auto; border: 1px solid var(--s-hair); border-radius: var(--s-r-lg); background: var(--s-surface); }
.s-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 15px; }
.s-table th, .s-table td { text-align: left; padding: 15px 20px; border-top: 1px solid var(--s-hair); vertical-align: top; }
.s-table thead th { border-top: none; font: 600 12px/1.3 var(--s-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--s-soft); background: var(--s-raised); }
.s-table thead th.s-us { color: var(--s-ember-text); }
.s-table tbody th { font-weight: 600; width: 24%; }
.s-table td.s-them { color: var(--s-muted); }
.s-table td.s-us { font-weight: 500; }

.s-table-2 { min-width: 0; }
.s-table-2 tbody th { width: 38%; }

/* Walk: numbered steps with a picture each (/how-it-works) */
.s-walk { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 6vw, 72px); }
.s-walk-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.s-walk-copy { display: grid; gap: 12px; align-content: start; min-width: 0; }
.s-walk-copy h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.s-walk-copy p { color: var(--s-muted); }
.s-walk-vis { min-width: 0; }
.s-walk-vis .s-pane { box-shadow: var(--s-shadow); }
.s-walk-vis .s-src pre { padding: 14px 0; }
.s-src .s-c { color: var(--s-code-dim); }
.s-vlist { list-style: none; margin: 0; padding: 8px 16px 14px; display: grid; font-size: 14px; }
.s-vlist li { padding: 9px 0; border-top: 1px solid var(--s-hair); }
.s-vlist li:first-child { border-top: none; }
.s-vlist code { font-size: .85em; }
.s-rep-row.s-new { background: var(--s-ember-tint); }
.s-rep-row.s-new .s-nm small { color: var(--s-ember-text); font-weight: 600; }
@media (max-width: 860px) { .s-walk-row { grid-template-columns: minmax(0,1fr); } }

/* Limits */
.s-limits { display: grid; border-top: 1px solid var(--s-hair); max-width: 880px; }
.s-limit { display: grid; grid-template-columns: minmax(0, 270px) minmax(0,1fr); gap: 8px 28px; padding-block: 18px; border-bottom: 1px solid var(--s-hair); }
.s-limit h3 { font-size: 16px; font-weight: 700; }
.s-limit p { color: var(--s-muted); font-size: 15px; }
@media (max-width: 720px) { .s-limit { grid-template-columns: minmax(0,1fr); } }

/* Feature grid (home) */
.s-features { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--s-hair); }
.s-feature { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--s-hair); display: grid; gap: 8px; align-content: start; min-width: 0; }
.s-feature h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.s-feature p { color: var(--s-muted); font-size: 15px; }
.s-feature .s-tag { font: 500 11px/1 var(--s-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--s-soft); }
.s-feature a { color: var(--s-ember-text); font-size: 14px; font-weight: 600; text-decoration: none; }
.s-feature a:hover { text-decoration: underline; }
@media (max-width: 880px) { .s-features { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .s-features { grid-template-columns: minmax(0,1fr); } }

/* Link grid */
.s-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.s-lk { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--s-hair); border-radius: var(--s-r-md); background: var(--s-surface); text-decoration: none; transition: transform .16s ease-out, border-color .16s; min-width: 0; align-content: start; }
a.s-lk:hover { transform: translateY(-2px); border-color: var(--s-border); }
.s-lk b { font-size: 16px; letter-spacing: -.01em; }
.s-lk span { font-size: 14px; color: var(--s-muted); }
.s-lk em { font: normal 500 12px/1 var(--s-mono); color: var(--s-ember-text); }

/* Dark band */
.s-dark { background: var(--s-ink); color: var(--s-on-dark); position: relative; overflow: hidden; }
.s-dark .s-lead { color: var(--s-on-dark-muted); }
.s-dark .s-eyebrow { color: var(--s-glow); }
.s-dark code { background: #23262D; color: var(--s-on-dark); }
.s-dev { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px, 5vw, 56px); align-items: center; position: relative; }
.s-dev ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: var(--s-on-dark-muted); }
.s-dev li b { color: var(--s-on-dark); font-weight: 600; }
.s-dev a { color: var(--s-on-dark); }
.s-code { background: var(--s-code-bg); border: 1px solid var(--s-dark-line); border-radius: var(--s-r-md); padding: 18px 20px; overflow-x: auto; font: 400 13.5px/1.75 var(--s-mono); color: var(--s-code-text); min-width: 0; margin: 0; white-space: pre; }
.s-code .s-c { color: var(--s-code-dim); }
.s-code .s-k { color: var(--s-glow); }
@media (max-width: 820px) { .s-dev { grid-template-columns: minmax(0,1fr); } }

/* Price strip */
.s-price { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; justify-content: space-between; background: var(--s-surface); border: 1px solid var(--s-hair); border-radius: var(--s-r-xl); padding: clamp(22px, 3.4vw, 36px); box-shadow: var(--s-shadow); }
.s-amount { font-size: clamp(40px, 6vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.s-amount small { font-size: 17px; font-weight: 500; color: var(--s-soft); letter-spacing: 0; }
.s-model { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 13px/1.4 var(--s-mono); color: var(--s-muted); list-style: none; margin: 0; padding: 0; }
.s-model li { background: var(--s-raised); padding: 7px 10px; border-radius: 999px; }
.s-model li + li::before { content: "→ "; color: var(--s-soft); }

/* Plans (/pricing): free preview next to the subscription, promises under the price */
.s-plans-sec { padding-top: 0; }
.s-plans { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch; }
.s-plan { background: var(--s-surface); border: 1px solid var(--s-hair); border-radius: var(--s-r-xl); padding: clamp(22px, 3.4vw, 34px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.s-plan-pro { border: 2px solid var(--s-ember); box-shadow: var(--s-shadow); }
.s-plan-tag { font: 600 12px/1 var(--s-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--s-ember-text); }
.s-plan-h { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.s-plan-text { color: var(--s-muted); font-size: 16px; }
.s-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15px; align-content: start; }
.s-checks li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 6px; }
.s-checks li::before { content: "✓"; color: var(--s-ember); font-weight: 700; }
.s-plan-act { display: grid; gap: 12px; justify-items: start; padding-top: 6px; margin-top: auto; }
.s-pay { display: grid; gap: 14px; width: 100%; }
.s-consent { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; font-size: 13px; line-height: 1.55; color: var(--s-muted); cursor: pointer; }
.s-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--s-ember-btn); }
.s-consent a { color: var(--s-ember-text); }
.s-pay-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.s-pay-btns .s-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.s-pay-status { font-size: 14px; color: #A3261B; background: #FDECEA; border-radius: 10px; padding: 10px 12px; }
.s-promises { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 22px; }
.s-promise { border-top: 2px solid var(--s-ink); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.s-promise h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.s-promise p { color: var(--s-muted); font-size: 15px; }
@media (max-width: 860px) { .s-plans, .s-promises { grid-template-columns: minmax(0,1fr); } }

/* FAQ */
.s-faq { display: grid; border-top: 1px solid var(--s-hair); max-width: 840px; }
.s-faq details { border-bottom: 1px solid var(--s-hair); padding-block: 18px; }
.s-faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; font-family: var(--s-mono); color: var(--s-ember); }
.s-faq details[open] summary::after { content: "−"; }
.s-faq details p { margin-top: 10px; color: var(--s-muted); max-width: 680px; }
.s-faq details a { color: var(--s-ember-text); }

/* Prose links */
.s-body p a, .s-body li a { color: var(--s-ember-text); }
.s-dark p a, .s-dark li a { color: var(--s-on-dark); }

/* Final */
.s-final .s-wrap { display: grid; gap: 22px; justify-items: start; position: relative; }
.s-final h2 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1.06; max-width: 780px; }

/* Footer */
.s-footer { background: var(--s-ink); color: var(--s-on-dark-muted); border-top: 1px solid #23262D; font-size: 14px; }
.s-footer .s-cols { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0,1fr)); gap: 28px; padding-block: 44px 28px; }
.s-footer .s-fh { margin: 0 0 12px; font: 600 12px/1 var(--s-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--s-on-dark); }
.s-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.s-footer a, .s-body .s-footer li a { text-decoration: none; color: var(--s-on-dark-muted); }
.s-footer a:hover { color: var(--s-on-dark); }
.s-footer .s-brand { color: var(--s-on-dark); }
.s-footer .s-base { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; border-top: 1px solid #23262D; padding-block: 18px; font: 500 12px/1.6 var(--s-mono); }
.s-footer .s-base a[aria-current="true"] { color: var(--s-on-dark); }
.s-footer .s-langs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
@media (max-width: 900px) { .s-footer .s-cols { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .s-footer .s-cols { grid-template-columns: minmax(0,1fr); } }

/* Cookie consent (rendered by ThemeForge_SEO with its own inline styles): the new palette on new pages.
   «Allow» and «Decline» stay equally prominent, as the consent rules require. */
.s-body .tf-consent { background: var(--s-ink); color: var(--s-on-dark); border-color: #3A3D45; border-radius: var(--s-r-md); font-family: var(--s-font); }
.s-body .tf-consent p { color: var(--s-on-dark-muted); }
.s-body .tf-consent a { color: var(--s-glow); }
.s-body .tf-consent button { border-radius: 999px; border-color: var(--s-on-dark); background: var(--s-on-dark); color: var(--s-ink); }
.s-body .tf-consent button.tf-consent-decline { background: transparent; color: var(--s-on-dark); border-color: var(--s-on-dark); }
.s-body .tf-consent button:focus-visible { outline-color: var(--s-glow); }

@media (prefers-reduced-motion: reduce) {
  .s-body * { transition: none !important; }
}

/* ---------- reference cards (/docs/<attribute>) and the task band of /docs ---------- */
.s-ref { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: start; padding-block: 24px var(--s-section-y); }
.s-rt { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; display: grid; gap: 18px; padding-right: 6px; font-size: 14px; }
.s-rt-q { width: 100%; font: 15px var(--s-font); color: var(--s-ink); background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-r-sm); padding: 10px 12px; }
.s-rt-g h2, .s-ri-grid h2 { font: 500 11px/1 var(--s-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--s-soft); margin: 0 0 8px; }
.s-rt ul, .s-ri-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.s-rt nav { display: grid; gap: 18px; }
.s-body .s-rt a, .s-body .s-ri-grid a { display: grid; gap: 1px; text-decoration: none; padding: 7px 10px; border-radius: 8px; color: var(--s-ink); }
.s-rt a span, .s-ri-grid a span { line-height: 1.35; }
.s-rt a code, .s-ri-grid a code { background: none; padding: 0; font-size: 12px; color: var(--s-muted); }
.s-rt a:hover, .s-ri-grid a:hover { background: var(--s-surface); }
.s-rt a[aria-current="page"] { background: var(--s-surface); box-shadow: inset 3px 0 0 var(--s-ember); }
.s-rt-empty { color: var(--s-soft); padding: 0 10px; }
.s-rt .s-rt-all { color: var(--s-ember-text); font-weight: 600; }
.s-rc { display: grid; gap: 40px; min-width: 0; }
.s-rc-head { display: grid; gap: 14px; }
.s-rc-kick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font: 500 12px/1 var(--s-mono); color: var(--s-soft); text-transform: uppercase; letter-spacing: .1em; }
.s-rc-kick .s-tag { background: var(--s-ember-tint); color: var(--s-ember-text); padding: 5px 8px; border-radius: 6px; }
.s-rc-head h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.s-rc-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.s-body .s-rc-line code { font-size: 15px; background: var(--s-code-bg); color: var(--s-code-text); padding: 7px 12px; border-radius: 8px; }
.s-rc-copy { font: 500 13px var(--s-font); border: 1px solid var(--s-border); background: var(--s-surface); color: var(--s-muted); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.s-rc-copy:hover { color: var(--s-ink); border-color: var(--s-ink); }
.s-rc-sec h2 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin-bottom: 12px; }
.s-rc-sec > p { color: var(--s-muted); max-width: 680px; }
.s-rc-sec > p + p { margin-top: 10px; }
.s-rc-sec a, .s-rc-rules a, .s-rc-more a { color: var(--s-ember-text); }
.s-at { color: var(--s-glow); }
.s-av { color: #F08F6B; }
.s-rc-ex { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); gap: 14px; }
.s-rc-pane { border: 1px solid var(--s-hair); border-radius: var(--s-r-md); background: var(--s-surface); overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.s-rc-ph { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--s-hair); font: 500 12px/1.3 var(--s-mono); color: var(--s-soft); }
.s-rc-ph b { color: var(--s-ink); font-weight: 600; }
.s-rc-ph span { text-align: right; }
.s-rc-src { background: var(--s-code-bg); border-color: var(--s-code-bg); }
.s-rc-src .s-rc-ph { border-color: var(--s-dark-line); color: var(--s-code-dim); }
.s-rc-src .s-rc-ph b { color: var(--s-on-dark); }
.s-rc pre { margin: 0; padding: 14px; font: 12.5px/1.65 var(--s-mono); color: var(--s-code-text); overflow-x: auto; white-space: pre; }
.s-rc pre .s-c { color: var(--s-code-dim); }
.s-rc-adm { padding: 12px; display: grid; gap: 10px; align-content: start; font-size: 13px; background: #F0F0F1; }
.s-af { display: grid; gap: 4px; }
.s-af-l, .s-ag-l { font-weight: 600; font-size: 12.5px; color: #1D2327; }
.s-af-v { border: 1px solid #8C8F94; border-radius: 4px; background: #FFF; padding: 5px 8px; min-height: 30px; white-space: pre-line; overflow: hidden; text-overflow: ellipsis; color: #2C3338; }
.s-af-area .s-af-v { min-height: 52px; }
.s-af-h { font-size: 12px; font-style: italic; color: #646970; }
.s-af-editor .s-af-v { min-height: 64px; border-top-width: 18px; border-top-color: #DCDCDE; }
.s-af-image .s-af-v { border-style: dashed; color: #50575E; }
.s-af-image .s-af-v::before { content: ""; display: inline-block; width: 22px; height: 16px; border-radius: 3px; background: var(--s-ember-tint); margin-right: 8px; vertical-align: -3px; }
.s-af-select .s-af-v::after { content: " ▾"; color: #50575E; }
.s-ag { display: grid; gap: 6px; }
.s-ar { display: grid; grid-template-columns: 22px minmax(0, 1fr); border: 1px solid #C3C4C7; border-radius: 4px; background: #FFF; }
.s-ar + .s-ar { margin-top: -1px; }
.s-ar-solo { grid-template-columns: minmax(0, 1fr); }
.s-ar-n { background: #F6F7F7; border-right: 1px solid #DCDCDE; font: 11px var(--s-mono); color: #787C82; display: grid; place-items: center; }
.s-ar-f { display: grid; gap: 6px; padding: 8px; min-width: 0; }
.s-ar-f .s-af { grid-template-columns: 74px minmax(0, 1fr); align-items: center; }
.s-ar-f .s-af-l { font-weight: 500; color: #50575E; }
.s-ar-f .s-af-v { min-height: 0; padding: 3px 7px; white-space: nowrap; }
.s-ar-add { justify-self: end; font-size: 12px; font-weight: 600; background: #2271B1; color: #FFF; border-radius: 3px; padding: 5px 10px; }
.s-at-tbl { width: 100%; border-collapse: collapse; background: #FFF; border: 1px solid #C3C4C7; font-size: 12.5px; }
.s-at-tbl th { text-align: left; font-weight: 600; color: #1D2327; background: #F6F7F7; padding: 5px 8px; border-bottom: 1px solid #DCDCDE; }
.s-at-tbl td { padding: 5px 8px; border-top: 1px solid #F0F0F1; color: #2C3338; }
.s-ag-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; border: 1px solid #C3C4C7; border-radius: 4px; background: #FFF; }
.s-ag-th { aspect-ratio: 1; border-radius: 3px; background: linear-gradient(135deg, var(--s-ember-tint), #F4D9C8); }
.s-al { list-style: none; margin: 0; padding: 0; border: 1px solid #C3C4C7; border-radius: 4px; background: #FFF; }
.s-al li { padding: 6px 10px; border-top: 1px solid #F0F0F1; color: #2271B1; }
.s-al li:first-child { border-top: 0; }
.s-rc-live { padding: 14px; display: grid; gap: 9px; align-content: start; font-size: 14px; }
.s-rc-live-in { display: grid; gap: 9px; }
.s-rc-none { color: #787C82; text-align: center; padding: 18px 0; }
.s-lv-h { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.s-lv-i { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--s-border); padding-bottom: 6px; }
.s-lv-i b { font-weight: 600; white-space: nowrap; }
.s-rc-live p { color: var(--s-muted); }
.s-lv-b { justify-self: start; background: var(--s-ember-btn); color: #FFF; font-weight: 600; font-size: 13px; padding: 7px 12px; border-radius: 8px; }
.s-lv-img { display: flex; align-items: center; gap: 8px; background: var(--s-raised); border-radius: 10px; padding: 10px; }
.s-lv-img svg { width: 26px; height: 26px; flex: none; }
.s-lv-img small { color: var(--s-muted); font-size: 12px; }
.s-lv-nav { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; font-weight: 500; }
.s-lv-nav span { border-bottom: 1px solid var(--s-border); }
.s-rc-live .s-rc-note { font-size: 12.5px; color: var(--s-soft); border-top: 1px solid var(--s-hair); padding-top: 8px; }
.s-rc-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 720px; }
.s-rc-rules li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; color: var(--s-muted); }
.s-rc-rules li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--s-ember); margin-top: 10px; }
.s-rc-gnote { font-size: 15px; border-left: 3px solid var(--s-ember); padding-left: 12px; }
/* Section recipes: numbered steps, each with its piece of markup */
.s-rp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: rp; }
.s-rp-step { counter-increment: rp; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; }
.s-rp-step::before { content: counter(rp); grid-row: 1 / span 3; width: 30px; height: 30px; border-radius: 50%; background: var(--s-ember-tint); color: var(--s-ember-text); font: 600 14px/30px var(--s-mono); text-align: center; }
.s-rp-step h3 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.s-rp-step p { color: var(--s-muted); max-width: 680px; }
.s-rp-step p a { color: var(--s-ember-text); }
.s-rp-step pre { background: var(--s-code-bg); border-radius: var(--s-r-sm); }
.s-ri-recipes { margin-top: 10px; }
.s-ri-recipes a { color: var(--s-ember-text); font-weight: 600; }
.s-rc-lognote { color: var(--s-soft); font-size: 14px; max-width: 680px; margin-bottom: 14px; }
.s-rc-lognote a { color: var(--s-ember-text); }
.s-rc-mk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.s-rc-mk + .s-rc-mk { margin-top: 12px; }
.s-rc-bad, .s-rc-ok { border-radius: var(--s-r-sm); padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.s-rc-bad { background: #FBE9E6; }
.s-rc-ok { background: #E8F3E6; }
.s-rc-bad > span, .s-rc-ok > span { font: 600 12px var(--s-font); }
.s-rc-bad > span { color: #A8281D; }
.s-rc-ok > span { color: #2D6E30; }
.s-rc .s-rc-bad pre, .s-rc .s-rc-ok pre { padding: 0; color: var(--s-ink); font-size: 12px; }
.s-rc-bad pre .s-at, .s-rc-ok pre .s-at { color: var(--s-ember-text); font-weight: 600; }
.s-rc-bad pre .s-av, .s-rc-ok pre .s-av { color: #7A4A00; }
.s-rc-bad pre .s-c, .s-rc-ok pre .s-c { color: #6E6150; }
.s-rc-bad p, .s-rc-ok p { font-size: 14px; color: var(--s-muted); }
.s-rc-more { display: grid; gap: 10px; }
.s-rc-more details { border: 1px solid var(--s-hair); border-radius: var(--s-r-sm); background: var(--s-surface); }
.s-rc-more summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.s-rc-more summary::-webkit-details-marker { display: none; }
.s-rc-more summary::after { content: "+"; font-family: var(--s-mono); color: var(--s-ember); }
.s-rc-more details[open] summary::after { content: "−"; }
.s-rc-more details > p, .s-rc-scopes { margin: 0 16px 14px; color: var(--s-muted); font-size: 15px; }
.s-rc-scopes { border-collapse: collapse; width: calc(100% - 32px); }
.s-rc-scopes th, .s-rc-scopes td { text-align: left; padding: 8px 12px 8px 0; border-top: 1px solid var(--s-hair); vertical-align: top; font-weight: 400; }
.s-rc-scopes th { white-space: nowrap; }
.s-rc-rel { display: flex; flex-wrap: wrap; gap: 10px; }
.s-rc .s-rc-rel a { display: grid; gap: 2px; text-decoration: none; color: var(--s-ink); border: 1px solid var(--s-border); border-radius: var(--s-r-sm); padding: 10px 14px; background: var(--s-surface); }
.s-rc-rel a span { font-size: 13px; color: var(--s-muted); }
.s-rc-rel a:hover { border-color: var(--s-ink); }
.s-ref-index { display: grid; gap: 24px; margin-bottom: 48px; }
.s-ri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 28px; font-size: 14px; }
@media (max-width: 1100px) {
  .s-rc-ex { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .s-rc-src { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .s-ref { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .s-rt { position: static; max-height: none; order: 2; }
  .s-rc-ex, .s-rc-mk { grid-template-columns: minmax(0, 1fr); }
}