/* developer.crowon.app (server/developer.mjs serves it as /developer/static/site.css). Written from scratch.
   Structure measured from docs.stripe.com/api/customers/create (2026-11-10, 1440px and 375px, docs/developer-design-study.md):
   left list 280px (links 14/400 grey, group names 14/500), explanation column 503px from x336, code column 503px from x881
   (request panel dark, response panel pale, held in view), title 24/700, method line in mono 14 green, body 14/22,
   parameter name mono 14/700 + type 12 grey + "required" 12/600, hairlines between parameters. Phones: one column,
   the code under the words, 28px sides.
   CrowOn's own: neutral ink instead of navy, system mono, numbered lines in every panel, light and dark designed
   together, no decorative icons, no cards, no photos. No scroll bars. */
:root {
  --bg: #fff; --bg-2: #f6f7f9; --fg: #1b1d22; --fg-2: #4a4f59; --fg-3: #858a94; --line: #e7e8eb; --line-2: #d9dbdf;
  --link: #0b63ce; --get: #1a7f37; --req: #b4232c; --ok: #1a7f37; --bad: #b4232c;
  --dark: #1b1d22; --dark-2: #2a2d34; --dark-fg: #e8e8ea; --dark-fg-3: #8b909a;
  --t-tag: #0b63ce; --t-attr: #7c3aed; --t-str: #0d7a52; --t-key: #0b63ce; --t-num: #0e6f88; --t-kw: #c2185b; --t-com: #858a94; --t-var: #7c3aed;
  --d-tag: #7cb7ff; --d-attr: #c4a7ff; --d-str: #7fd6a6; --d-key: #7cb7ff; --d-num: #7fd3e6; --d-kw: #ff8cc0; --d-var: #c4a7ff;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --top: 56px; --side: 280px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000; --bg-2: #18191c; --fg: #e8e8ea; --fg-2: #b6b9c0; --fg-3: #80848d; --line: #24262a; --line-2: #31343a;
    --link: #6cb1ff; --get: #4fc96e; --req: #ff7a80; --ok: #4fc96e; --bad: #ff7a80;
    --dark: #1d1f24; --dark-2: #2b2e35;
    --t-tag: var(--d-tag); --t-attr: var(--d-attr); --t-str: var(--d-str); --t-key: var(--d-key); --t-num: var(--d-num); --t-kw: var(--d-kw); --t-var: var(--d-var);
  }
}
html { background: var(--bg); color: var(--fg); scrollbar-width: none; scroll-padding-top: calc(var(--top) + 16px); -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar, .rf ::-webkit-scrollbar { display: none; }
.rf { margin: 0; font: 15px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
.rf *, .rf *::before, .rf *::after { box-sizing: border-box; scrollbar-width: none; }
.rf :where(h1, h2, h3, p, ul, dl, dd, fieldset, pre) { margin: 0; padding: 0; }
.rf :where(ul) { list-style: none; }
.rf :where(a) { color: inherit; text-decoration: none; }
.rf:lang(ja) :where(h1, h2, h3, p, li, dd, td, span) { word-break: auto-phrase; line-break: strict; }
.rf :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.rf svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rf kbd { font: 500 11px/1 var(--mono); padding: 2px 5px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--fg-3); }
.rf em { font-style: normal; margin-inline-start: 6px; padding: 1px 6px; border-radius: 4px; background: var(--bg-2); font-size: 11px; font-weight: 600; color: var(--fg-3); vertical-align: 2px; white-space: nowrap; }
.rf :not(pre) > code { font: 500 .87em/1.4 var(--mono); padding: 1px 4px; border-radius: 4px; background: var(--bg-2); color: var(--fg); overflow-wrap: anywhere; }
.rf-skip { position: absolute; left: -999px; z-index: 90; padding: 8px 12px; background: var(--fg); color: var(--bg); }
.rf-skip:focus { left: 8px; top: 8px; }

/* ---------- top bar ---------- */
.rf-top { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); background: var(--bg); border-bottom: 1px solid var(--line); }
.rf-top-in { display: flex; align-items: center; gap: 16px; height: var(--top); padding: 0 20px; }
.rf-logo { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rf-logo img { align-self: center; width: 24px; height: auto; }
.rf-logo b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.rf-logo span { font-size: 13px; color: var(--fg-3); }
@media (prefers-color-scheme: dark) { .rf-logo img { filter: invert(1); } }
.rf-top-title { display: none; }
.rf-top-nav { display: flex; align-items: center; gap: 22px; margin-inline-start: auto; font-size: 14px; }
.rf-top-nav a { color: var(--fg-2); white-space: nowrap; }
.rf-top-nav a:hover, .rf-top-nav a[aria-current] { color: var(--fg); }
.rf-top-nav a[aria-current] { font-weight: 600; }
.rf-out { display: inline-flex; align-items: center; gap: 3px; }
.rf-out svg.i { width: 13px; height: 13px; }
.rf-top-search, .rf-drawer { display: none; }
@media (max-width: 999px) {
  .rf-top-in { padding: 0 12px 0 16px; gap: 10px; }
  .rf-drawer, .rf-top-search { display: grid; }
  .rf-logo span, .rf-top-nav { display: none; }
  .rf-top-title { display: block; flex: 1; min-width: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rf:lang(ja) .rf-top-title { letter-spacing: 0; }
  .rf-top-search { place-items: center; width: 40px; height: 40px; color: var(--fg-2); }
  .rf-top-search svg.i { width: 18px; height: 18px; }
}
.rf-drawer > summary { list-style: none; display: grid; place-items: center; width: 36px; height: 40px; margin-inline-start: -8px; cursor: pointer; color: var(--fg-2); }
.rf-drawer > summary::-webkit-details-marker { display: none; }
.rf-drawer > summary svg.i { width: 18px; height: 18px; }
.rf-drawer-panel { position: absolute; z-index: 2; top: calc(100% + 1px); left: 0; right: 0; height: calc(100dvh - var(--top) - env(safe-area-inset-top, 0px)); overflow-y: auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); background: var(--bg); }

/* ---------- left list (280px, plain words; endpoints carry their method) ---------- */
.rf-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .rf-shell { grid-template-columns: var(--side) minmax(0, 1fr); } }
.rf-side { display: none; }
@media (min-width: 1000px) { .rf-side { display: block; border-inline-end: 1px solid var(--line); } }
.rf-side nav { position: sticky; top: calc(var(--top) + env(safe-area-inset-top, 0px)); max-height: calc(100dvh - var(--top)); overflow-y: auto; padding: 16px 16px 48px 24px; }
.rf-find { display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 0 20px; padding: 0 8px 0 10px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 13px; color: var(--fg-3); }
.rf-find span { flex: 1; }
.rf-find:hover { border-color: var(--fg-3); }
.rf-side section, .rf-drawer-panel section { margin-bottom: 22px; }
.rf-side h2, .rf-drawer-panel h2 { margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--fg); }
.rf-side li a, .rf-drawer-panel li a { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.rf-side li a:hover, .rf-drawer-panel li a:hover { color: var(--fg); }
.rf-side li a[aria-current], .rf-side li a.on, .rf-drawer-panel li a[aria-current] { color: var(--link); font-weight: 500; }
.rf-side li a span, .rf-drawer-panel li a span { min-width: 0; }
.rf-side li a > svg.i, .rf-drawer-panel li a > svg.i { width: 12px; height: 12px; color: var(--fg-3); }
.rf-m { flex: none; width: 30px; font: 600 10px/1 var(--mono); color: var(--get); letter-spacing: .02em; }
.rf-drawer-panel li a { padding: 9px 0; font-size: 16px; }

/* ---------- the reference: words | code held on the right ---------- */
.rf-ref { min-width: 0; }
.rf-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 28px; border-bottom: 1px solid var(--line); }
@media (min-width: 1200px) { .rf-sec { grid-template-columns: minmax(0, 503px) minmax(0, 503px); gap: 42px; padding: 56px 56px; } }
.rf-sec:last-child { border-bottom: 0; }
.rf-text h1, .rf-text h2 { font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.01em; scroll-margin-top: calc(var(--top) + 16px); }
.rf-text h1 a:hover, .rf-text h2 a:hover { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.rf-path { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px !important; font: 14px/1.6 var(--mono); color: var(--fg-2); }
.rf-path b { font-weight: 600; color: var(--get); }
.rf-text > p { margin-top: 14px; color: var(--fg-2); }
.rf-text h3 { margin-top: 32px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.rf-params > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rf-params dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.rf-params dt code { padding: 0; background: none; font: 700 14px/1.5 var(--mono); }
.rf-params dt small { font-size: 12px; color: var(--fg-3); }
.rf-params dt small.req { font-weight: 600; color: var(--req); }
.rf-params dd { margin-top: 4px; font-size: 14px; line-height: 1.65; color: var(--fg-2); }
.rf-code { min-width: 0; }
.rf-code-in { display: grid; gap: 16px; }
@media (min-width: 1200px) { .rf-code-in { position: sticky; top: calc(var(--top) + 24px); } }

/* code panels: a bar with the label and copy, numbered lines; the request is dark, the response pale */
.rf-panel { min-width: 0; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.rf-panel-bar { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--line); font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.rf-copy { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; }
.rf-copy:hover { color: var(--fg); background: var(--line); }
.rf-copy.done { color: var(--ok); }
.rf-panel pre { padding: 12px 14px 14px 0; overflow-x: auto; max-height: 560px; overflow-y: auto; font: 12.5px/1.7 var(--mono); color: var(--fg); counter-reset: ln; }
.rf-panel pre .ln { display: block; padding-inline-start: 46px; position: relative; white-space: pre; }
.rf-panel pre .ln::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 32px; text-align: right; color: var(--fg-3); opacity: .6; }
.rf-panel pre.plain { padding: 14px 16px; }
.rf-panel pre.plain .ln { padding: 0; }
.rf-panel pre.plain .ln::before { display: none; }
.rf-panel.dark { background: var(--dark); border-color: var(--dark); color: var(--dark-fg); }
.rf-panel.dark .rf-panel-bar { border-color: var(--dark-2); color: var(--dark-fg-3); }
.rf-panel.dark .rf-copy:hover { color: var(--dark-fg); background: var(--dark-2); }
.rf-panel.dark pre { color: var(--dark-fg); }
.rf-panel.dark pre .ln::before { color: var(--dark-fg-3); }
.rf-panel.dark { --t-tag: var(--d-tag); --t-attr: var(--d-attr); --t-str: var(--d-str); --t-key: var(--d-key); --t-num: var(--d-num); --t-kw: var(--d-kw); --t-var: var(--d-var); }
.t-tag { color: var(--t-tag); } .t-attr { color: var(--t-attr); } .t-str { color: var(--t-str); } .t-key { color: var(--t-key); }
.t-num { color: var(--t-num); } .t-kw { color: var(--t-kw); } .t-com { color: var(--t-com); font-style: italic; } .t-var { color: var(--t-var); font-style: italic; }
.t-get { color: var(--get); font-weight: 600; }

/* ---------- guides: one column, "on this page" on the right ---------- */
.rf-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; min-width: 0; padding: 40px 28px 80px; }
@media (min-width: 1200px) { .rf-guide { grid-template-columns: minmax(0, 680px) 200px; padding: 56px 56px 96px; } }
.rf-crumb { font-size: 13px; color: var(--fg-3); margin-bottom: 8px !important; }
.rf-crumb a:hover { color: var(--fg); }
.rf-guide h1 { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.rf-lead { margin-top: 10px !important; font-size: 17px; color: var(--fg-2); }
.rf-prose { margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--line); }
.rf-prose > * + * { margin-top: 16px; }
.rf-prose p, .rf-prose li { color: var(--fg-2); }
.rf-prose h2 { margin-top: 40px; font-size: 19px; font-weight: 700; line-height: 1.4; scroll-margin-top: calc(var(--top) + 16px); }
.rf-prose h2 a:hover { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.rf-prose a:not(h2 a):not(.rf-btn), .rf-see a, .rf-guide p > a { color: var(--link); }
.rf-ul li { position: relative; padding-inline-start: 18px; }
.rf-ul li + li { margin-top: 6px; }
.rf-ul li::before { content: "–"; position: absolute; left: 0; color: var(--fg-3); }
.rf-note { padding: 12px 16px; border-inline-start: 3px solid var(--line-2); background: var(--bg-2); font-size: 14px; }
.rf-links li { padding: 4px 0; }
.rf-links li span { color: var(--fg-3); font-size: 14px; }
.rf-see { padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.rf-guide .rf-panel { margin-top: 16px; }
.rf-table { margin-top: 16px; overflow-x: auto; }
.rf-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.rf-table th { padding: 8px 12px 8px 0; text-align: start; font-size: 12px; font-weight: 600; color: var(--fg-3); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.rf-table td { padding: 10px 12px 10px 0; vertical-align: top; color: var(--fg-2); border-bottom: 1px solid var(--line); }
.rf-table td:first-child { color: var(--fg); font-weight: 600; white-space: nowrap; }
@media (max-width: 639px) {
  .rf-table table, .rf-table tbody, .rf-table tr, .rf-table td { display: block; }
  .rf-table thead { display: none; }
  .rf-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .rf-table td { padding: 0; border: 0; white-space: normal !important; }
  .rf-table td + td { margin-top: 4px; }
  .rf-table td + td::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 600; color: var(--fg-3); }
}
.rf-toc { display: none; }
@media (min-width: 1200px) { .rf-toc { display: block; position: sticky; top: calc(var(--top) + 56px); align-self: start; } }
.rf-toc p { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--fg-3); }
.rf-toc li a { display: block; padding: 4px 0 4px 12px; border-inline-start: 1px solid var(--line); font-size: 13px; color: var(--fg-3); }
.rf-toc li a:hover { color: var(--fg); }
.rf-toc li a.on { color: var(--fg); border-color: var(--fg); }

/* sign-up form */
.rf-form { display: grid; gap: 16px; margin-top: 20px !important; max-width: 480px; }
.rf-field { display: grid; gap: 4px; }
.rf-field > span, .rf-form legend { font-size: 13px; font-weight: 600; color: var(--fg); }
.rf-field small { font-weight: 600; color: var(--req); font-size: 11px; }
.rf-field input, .rf-field textarea { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--sans); }
.rf-field textarea { height: auto; padding: 8px 10px; resize: vertical; }
.rf-field input:focus, .rf-field textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 18%, transparent); }
.rf-form fieldset { border: 0; min-width: 0; display: grid; gap: 2px; }
.rf-form legend { margin-bottom: 6px; }
.rf-check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; color: var(--fg-2); cursor: pointer; }
.rf-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--link); }
.rf-btn { justify-self: start; height: 38px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--fg); color: var(--bg); font: 600 14px/1 var(--sans); cursor: pointer; }
.rf-btn:hover { opacity: .86; }
.rf-msg { padding: 10px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; }
.rf-msg.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.rf-msg.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.rf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- search (developer.js) ---------- */
.rf-k { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding: 10vh 16px 16px; background: rgba(10, 12, 16, .45); }
.rf-k[hidden] { display: none; }
.rf-k-box { width: min(600px, 100%); max-height: 72vh; display: flex; flex-direction: column; border-radius: 10px; background: var(--bg); border: 1px solid var(--line-2); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); overflow: hidden; }
.rf-k-in { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--fg-3); }
.rf-k-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--fg); font: 16px var(--sans); outline: none; }
.rf-k-in input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.rf-k ul { overflow-y: auto; padding: 6px; }
.rf-k li a { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 8px 10px; border-radius: 6px; }
.rf-k li a b { font-size: 14px; font-weight: 500; color: var(--fg); }
.rf-k li a small { grid-row: 1; grid-column: 2; font-size: 12px; color: var(--fg-3); }
.rf-k li a span { grid-column: 1 / -1; font: 12px/1.5 var(--mono); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-k li a[aria-selected="true"] { background: var(--bg-2); }
.rf-k mark { background: none; color: var(--link); font-weight: 600; }
.rf-k-none { padding: 24px; text-align: center; font-size: 14px; color: var(--fg-3); }
.rf-k-foot { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-3); }
@media (max-width: 639px) { .rf-k { padding: 0; place-items: stretch; } .rf-k-box { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; } }
@media (hover: none) { .rf kbd { display: none; } }

/* ---------- footer ---------- */
.rf-foot { padding: 40px 28px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 13px; }
@media (min-width: 1000px) { .rf-foot { padding-left: calc(var(--side) + 56px); padding-right: 56px; } }
.rf-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; max-width: 1048px; }
@media (min-width: 900px) { .rf-foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rf-foot h2 { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.rf-foot li a { display: block; padding: 2px 0; color: var(--fg-3); }
.rf-foot li a:hover { color: var(--fg); }
.rf-foot-bar { display: flex; gap: 20px; margin-top: 32px !important; color: var(--fg-3); }
.rf-foot-bar span { margin-inline-end: auto; }

/* ---------- docs home (docs.stripe.com's entrance, measured 2026-11-10): left-aligned title 32/700 + one line 20 grey +
   a solid button and a text link, then three link columns (group name 17/600, links 15 in the link colour), then
   "try it out": a list of examples on the left and a dark code panel on the right. No sidebar on this page. */
.hm-in { max-width: 1008px; margin: 0 auto; padding: 0 28px; }
.hm-head { padding: 64px 0 48px; border-bottom: 1px solid var(--line); }
.hm-head h1 { font-size: 32px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.hm-head p { margin-top: 10px; max-width: 36em; font-size: 20px; line-height: 1.5; color: var(--fg-2); }
.hm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px !important; }
.hm-actions .rf-btn { display: inline-flex; align-items: center; text-decoration: none; }
.hm-link { font-size: 15px; font-weight: 600; color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; }
.hm-link:hover { text-decoration-color: var(--fg); }
.hm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 40px 0 48px; border-bottom: 1px solid var(--line); }
.hm-cols h2 { margin-bottom: 10px; font-size: 17px; font-weight: 600; }
.hm-cols li a { display: block; padding: 3px 0; font-size: 15px; color: var(--link); }
.hm-cols li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hm-sec { padding: 40px 0 80px; }
.hm-sec h2 { font-size: 20px; font-weight: 700; }
.hm-sec > p { margin-top: 6px; color: var(--fg-2); }
.hm-try { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 24px; margin-top: 20px; }
.hm-try > input { position: absolute; opacity: 0; pointer-events: none; }
.hm-try > label { grid-column: 1; display: grid; gap: 2px; padding: 10px 14px; border-radius: 6px; font-size: 15px; font-weight: 500; color: var(--fg-2); cursor: pointer; border: 1px solid transparent; }
.hm-try > label small { font: 12px var(--mono); color: var(--fg-3); }
.hm-try > label:hover { color: var(--fg); background: var(--bg-2); }
.hm-try > input:checked + label { color: var(--fg); background: var(--bg-2); border-color: var(--line); }
.hm-try > input:focus-visible + label { outline: 2px solid var(--link); outline-offset: 2px; }
.hm-try-panels { grid-column: 2; grid-row: 1 / span 8; min-width: 0; }
.hm-try-p { display: none; gap: 12px; }
#try0:checked ~ .hm-try-panels [data-i="0"], #try1:checked ~ .hm-try-panels [data-i="1"], #try2:checked ~ .hm-try-panels [data-i="2"], #try3:checked ~ .hm-try-panels [data-i="3"] { display: grid; }
@media (max-width: 899px) {
  .hm-head { padding: 40px 0 32px; }
  .hm-head h1 { font-size: 28px; }
  .hm-head p { font-size: 18px; }
  .hm-cols { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .hm-try { grid-template-columns: minmax(0, 1fr); }
  .hm-try > label { grid-column: 1; }
  .hm-try-panels { grid-column: 1; grid-row: auto; margin-top: 12px; }
}
/* the home page has no sidebar: its footer lines up with the page column */
@media (min-width: 1000px) { .is-home .rf-foot { padding-left: max(28px, calc((100% - 1008px) / 2 + 28px)); padding-right: 28px; } }