/* od-forms — the form kit. Colours come ONLY from these --f-* variables (two skins); hosts set
   [data-skin]. Container queries size the forms, never the viewport. Ported from the lab's cr.css. */
/* The dusk tokens land on a form root only when no ancestor sets [data-skin]; under a skinned host a form
   inherits the host's tokens (a .fk that re-declared dusk here hid a paper host's ink: white on paper).
   :where() keeps this at zero specificity so [data-skin='paper'] on the root itself still wins. */
:where(.of-skin, .fk):where(:not([data-skin] *)), [data-skin='dusk'] {
  --f-bg: #0d0b1d; --f-bg2: #15122b; --f-card: #1a1634; --f-ink: #efeaff; --f-ink2: #c4bdeb; --f-mute: #8d86b8; --f-line: rgba(180, 170, 255, 0.16);
  --f-acc: #8f7bff; --f-acc2: #c27bff; --f-cy: #6fd0ff; --f-glow: rgba(143, 123, 255, 0.45); --f-warm: #ffc27a; --f-ok: #86e8c0; --f-bad: #ff8fa3;
  --f-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
[data-skin='paper'] {
  --f-bg: #f6f2ea; --f-bg2: #eee8dc; --f-card: #fffdf8; --f-ink: #211c33; --f-ink2: #4a4363; --f-mute: #78718f; --f-line: rgba(60, 40, 120, 0.14);
  --f-acc: #5b45e0; --f-acc2: #8a3fd1; --f-cy: #1f7fb8; --f-glow: rgba(91, 69, 224, 0.22); --f-warm: #b4621a; --f-ok: #1f8a5b; --f-bad: #c2344f;
}
/* box-sizing reset, scoped to a form root: a host mounts every form under .fk (interactive) or renders
   .of-static (publisher), so forms inherit border-box without each repeating the reset in its own CSS. */
.fk, .fk *, .fk *::before, .fk *::after,
.of-static, .of-static *, .of-static *::before, .of-static *::after { box-sizing: border-box; }
/* visually-hidden (screen-reader only): a label a form must name for assistive tech but not show on screen. */
.fk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.fk { container: form / inline-size; font-family: var(--f-sans); color: var(--f-ink); background: var(--f-bg); }
.fk-wrap { max-width: 720px; margin: 0 auto; padding: clamp(18px, 4.5cqw, 44px) clamp(16px, 5cqw, 48px) 48px; display: flex; flex-direction: column; gap: 16px; }
.fk-kicker { font: 600 10.5px/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--f-mute); }
.fk-big { margin: 0; font-family: var(--f-serif); font-weight: 500; font-size: clamp(54px, 13cqw, 120px); line-height: 0.95; letter-spacing: -0.02em; }
.fk-serif { font-family: var(--f-serif); font-size: clamp(17px, 2.3cqw, 21px); line-height: 1.55; color: var(--f-ink); margin: 0; }
.fk-said { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(16px, 2.1cqw, 19px); line-height: 1.55; padding: 4px 0 4px 16px; border-left: 2px solid var(--f-acc); color: var(--f-ink); }
.fk-said-l { font: 500 10px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--f-acc); margin-bottom: 4px; display: block; font-style: normal; }
.fk-cite { display: inline-flex; align-items: center; gap: 5px; font: 500 10.5px/1 var(--f-mono); color: var(--f-acc); border: 1px solid color-mix(in srgb, var(--f-acc) 45%, transparent); background: color-mix(in srgb, var(--f-acc) 8%, transparent); border-radius: 99px; padding: 4px 8px; cursor: pointer; white-space: nowrap; }
.fk-skippy { display: inline-flex; align-items: center; font: 500 10.5px/1 var(--f-mono); color: var(--f-warm); border: 1px dashed color-mix(in srgb, var(--f-warm) 60%, transparent); border-radius: 99px; padding: 4px 8px; white-space: nowrap; }
.fk-synth { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--f-mono); color: var(--f-warm); border: 1px solid color-mix(in srgb, var(--f-warm) 55%, transparent); border-radius: 6px; padding: 4px 7px; }
.fk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fk-btn { border: 1px solid var(--f-line); background: var(--f-bg2); color: var(--f-ink); border-radius: 12px; padding: 9px 15px; font: 500 14px var(--f-sans); cursor: pointer; }
.fk-btn.pri { background: linear-gradient(135deg, var(--f-acc), var(--f-acc2)); color: #fff; border-color: transparent; }
.fk-chip { border: 1px solid var(--f-line); background: var(--f-bg2); color: var(--f-ink2); border-radius: 99px; padding: 6px 12px; font: 500 13px var(--f-sans); cursor: pointer; }
.fk-chip.on { color: var(--f-ink); border-color: var(--f-acc); background: color-mix(in srgb, var(--f-acc) 16%, var(--f-bg2)); }
.fk-ask { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--f-acc2) 50%, transparent); background: none; color: var(--f-acc2); border-radius: 99px; padding: 5px 11px; font: 500 12.5px var(--f-sans); cursor: pointer; }
.fk-note { font-size: 12px; color: var(--f-mute); margin: 0; }
.fk-hide { display: none !important; }
.fk-in { animation: fkin 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes fkin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fk-in { animation: none; } }

/* renderStatic output (publisher / crawlers / no-JS) */
.of-static { font-family: var(--f-sans, system-ui); color: var(--f-ink, #211c33); max-width: 720px; margin: 0 auto; line-height: 1.55; }
.of-static .of-example { font: 500 11px var(--f-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--f-warm, #b4621a); }
.of-static .of-said { font-family: var(--f-serif, Georgia); }
.of-static .of-said-l { display: block; font: 500 10px var(--f-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--f-acc, #5b45e0); }
.of-static .of-cite { font: 500 11px var(--f-mono, monospace); color: var(--f-acc, #5b45e0); }
.of-static .of-skippy { font: 500 11px var(--f-mono, monospace); color: var(--f-warm, #b4621a); }
.of-static .of-reg { font-size: 12px; color: var(--f-mute, #78718f); }
.of-static blockquote { border-left: 2px solid var(--f-acc, #5b45e0); padding-left: 14px; font-style: italic; }