/*! Bukalemun 1.5.1 — the whole framework, all 50 skins
 *  One framework, 50 skins. Zero dependencies.
 *  https://bukalemun.zerosixlab.com/
 *  Released under the MIT licence.
 */

/* =============================================================================
   BUKALEMUN — core/reset.css
   A modern, opinion-light reset. Everything here is wrapped in :where() so it
   carries zero specificity: your own single-class rule always wins.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  -moz-tab-size: 4;
  scrollbar-color: var(--bk-scrollbar-thumb) var(--bk-scrollbar-track);
}

:where(body) {
  margin: 0;
  min-height: 100svh;
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-base);
  font-weight: var(--bk-weight-normal);
  line-height: var(--bk-leading-normal);
  font-feature-settings: var(--bk-font-feature);
  font-variant-numeric: var(--bk-font-variant-numeric);
  color: var(--bk-text);
  background-color: var(--bk-bg);
  background-image: var(--bk-body-image);
  background-size: var(--bk-body-image-size);
  background-attachment: var(--bk-body-attachment);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  accent-color: var(--bk-primary);
  caret-color: var(--bk-caret);
}

:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--bk-heading-font);
  font-weight: var(--bk-heading-weight);
  letter-spacing: var(--bk-heading-tracking);
  text-transform: var(--bk-heading-transform);
  line-height: var(--bk-leading-tight);
  text-wrap: balance;
}
:where(h1) { font-size: var(--bk-text-4xl); }
:where(h2) { font-size: var(--bk-text-3xl); }
:where(h3) { font-size: var(--bk-text-2xl); }
:where(h4) { font-size: var(--bk-text-xl); }
:where(h5) { font-size: var(--bk-text-lg); }
:where(h6) { font-size: var(--bk-text-base); }

:where(p, figure, blockquote, dl, dd, pre) { margin: 0; }
:where(p) { text-wrap: pretty; }

:where(ul, ol) { margin: 0; padding: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; }

:where(hr) {
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--bk-divider-width) var(--bk-divider-style) var(--bk-divider-color);
  color: inherit;
}

:where(a) {
  color: var(--bk-text-link);
  text-decoration-thickness: max(1px, 0.05em);
  text-underline-offset: 0.16em;
}
:where(a:hover) { text-decoration-thickness: max(2px, 0.08em); }

:where(b, strong) { font-weight: var(--bk-weight-semibold); }
:where(small) { font-size: 0.85em; }
:where(sub, sup) { font-size: 0.72em; line-height: 0; position: relative; vertical-align: baseline; }
:where(sub) { bottom: -0.25em; }
:where(sup) { top: -0.5em; }

:where(code, kbd, samp, pre) {
  font-family: var(--bk-font-mono);
  font-size: 0.9em;
  font-feature-settings: "liga" 0, "calt" 0;
}
:where(pre) { overflow: auto; }

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
  vertical-align: middle;
}
:where(img, video, canvas) { max-width: 100%; height: auto; }
:where(svg) { fill: currentColor; }
:where(svg:not([fill])) { fill: none; }
:where(svg:not([width])) { width: 1em; height: 1em; }

:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
  border-color: inherit;
}
:where(th) { text-align: inherit; font-weight: var(--bk-weight-semibold); }

:where(button, input, optgroup, select, textarea) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}
:where(button, [type="button"], [type="reset"], [type="submit"]) {
  -webkit-appearance: button;
  appearance: button;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:where(button:disabled, input:disabled, select:disabled, textarea:disabled) {
  cursor: not-allowed;
}
:where(textarea) { resize: vertical; }
:where(select) { text-transform: none; }
:where([type="search"]) { -webkit-appearance: textfield; appearance: textfield; outline-offset: -2px; }
:where([type="search"])::-webkit-search-decoration { -webkit-appearance: none; }
:where(::-webkit-file-upload-button) { -webkit-appearance: button; font: inherit; }
:where(::placeholder) { color: var(--bk-field-placeholder); opacity: 1; }
:where(fieldset) { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
:where(legend) { padding: 0; }
:where(progress) { vertical-align: baseline; }

:where(summary) { display: list-item; cursor: pointer; }
:where(dialog) {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  max-width: none;
  max-height: none;
}
:where(dialog)::backdrop { background: var(--bk-overlay-bg); }

:where([hidden]:not([hidden="until-found"])) { display: none !important; }
:where([inert]) { pointer-events: none; cursor: default; user-select: none; }
:where([inert]) * { pointer-events: none; }

::selection {
  background-color: var(--bk-selection-bg);
  color: var(--bk-selection-fg);
}

/* Consistent, skin-aware focus. Mouse users don't see it; keyboards do. */
:where(:focus-visible) {
  outline: var(--bk-ring-width) var(--bk-ring-style) var(--bk-ring);
  outline-offset: var(--bk-ring-offset);
}
:where(:focus:not(:focus-visible)) { outline: none; }

/* Scrollbars: skinnable but never mandatory. */
.bk-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }
.bk-scrollbar::-webkit-scrollbar-track { background: var(--bk-scrollbar-track); }
.bk-scrollbar::-webkit-scrollbar-thumb {
  background: var(--bk-scrollbar-thumb);
  border-radius: var(--bk-radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.bk-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--bk-text-subtle); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =============================================================================
   BUKALEMUN — core/tokens.css
   The design-token contract. Every component reads from these variables and
   nothing else, which is what lets a single stylesheet wear 50 different skins.

   Tier 1  primitives   raw, style-agnostic scales (space, type, motion)
   Tier 2  semantics    meaning-bearing aliases (surface, text, primary, ...)
   Tier 3  components   per-component knobs that default to tier 2

   A style file only has to overwrite tier 2 (+ any tier 3 knob it cares about)
   to completely change the look of the whole library.
   ========================================================================== */

:where(:root),
:where(.bk-scope) {
  color-scheme: light dark;

  /* ---------------------------------------------------------------- fonts */
  --bk-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --bk-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --bk-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --bk-font-display: var(--bk-font-sans);
  --bk-font-body: var(--bk-font-sans);
  --bk-font-feature: "kern" 1, "liga" 1, "calt" 1;
  --bk-font-variant-numeric: normal;

  /* ------------------------------------------------------- type scale (rem) */
  --bk-text-2xs: 0.6875rem;
  --bk-text-xs: 0.75rem;
  --bk-text-sm: 0.8125rem;
  --bk-text-md: 0.875rem;
  --bk-text-base: 1rem;
  --bk-text-lg: 1.125rem;
  --bk-text-xl: 1.25rem;
  --bk-text-2xl: 1.5rem;
  --bk-text-3xl: 1.875rem;
  --bk-text-4xl: 2.25rem;
  --bk-text-5xl: 3rem;
  --bk-text-6xl: 3.75rem;
  --bk-text-7xl: 4.5rem;

  --bk-leading-none: 1;
  --bk-leading-tight: 1.2;
  --bk-leading-snug: 1.35;
  --bk-leading-normal: 1.55;
  --bk-leading-relaxed: 1.75;

  --bk-tracking-tighter: -0.03em;
  --bk-tracking-tight: -0.015em;
  --bk-tracking-normal: 0em;
  --bk-tracking-wide: 0.02em;
  --bk-tracking-wider: 0.06em;
  --bk-tracking-widest: 0.14em;

  --bk-weight-light: 300;
  --bk-weight-normal: 400;
  --bk-weight-medium: 500;
  --bk-weight-semibold: 600;
  --bk-weight-bold: 700;
  --bk-weight-black: 800;
  /* Styles that want an all-caps, letterspaced UI flip these two. */
  --bk-label-transform: none;
  --bk-label-tracking: var(--bk-tracking-normal);
  --bk-heading-transform: none;
  --bk-heading-weight: var(--bk-weight-bold);
  --bk-heading-tracking: var(--bk-tracking-tight);
  --bk-heading-font: var(--bk-font-display);

  /* -------------------------------------------------------------- spacing */
  --bk-space-unit: 0.25rem;
  --bk-space-0: 0px;
  --bk-space-px: 1px;
  --bk-space-1: calc(var(--bk-space-unit) * 1);
  --bk-space-2: calc(var(--bk-space-unit) * 2);
  --bk-space-3: calc(var(--bk-space-unit) * 3);
  --bk-space-4: calc(var(--bk-space-unit) * 4);
  --bk-space-5: calc(var(--bk-space-unit) * 5);
  --bk-space-6: calc(var(--bk-space-unit) * 6);
  --bk-space-8: calc(var(--bk-space-unit) * 8);
  --bk-space-10: calc(var(--bk-space-unit) * 10);
  --bk-space-12: calc(var(--bk-space-unit) * 12);
  --bk-space-16: calc(var(--bk-space-unit) * 16);
  --bk-space-20: calc(var(--bk-space-unit) * 20);
  --bk-space-24: calc(var(--bk-space-unit) * 24);
  --bk-space-32: calc(var(--bk-space-unit) * 32);
  --bk-space-40: calc(var(--bk-space-unit) * 40);

  /* --------------------------------------------------------------- radius */
  --bk-radius-scale: 1;
  --bk-radius-xs: calc(0.125rem * var(--bk-radius-scale));
  --bk-radius-sm: calc(0.25rem * var(--bk-radius-scale));
  --bk-radius-md: calc(0.375rem * var(--bk-radius-scale));
  --bk-radius-lg: calc(0.5rem * var(--bk-radius-scale));
  --bk-radius-xl: calc(0.75rem * var(--bk-radius-scale));
  --bk-radius-2xl: calc(1rem * var(--bk-radius-scale));
  --bk-radius-3xl: calc(1.5rem * var(--bk-radius-scale));
  --bk-radius-full: 9999px;
  /* role radii — components use these, never the raw scale */
  --bk-radius-field: var(--bk-radius-md);
  --bk-radius-card: var(--bk-radius-xl);
  --bk-radius-pill: var(--bk-radius-full);
  --bk-radius-overlay: var(--bk-radius-xl);
  --bk-radius-thumb: var(--bk-radius-full);

  /* --------------------------------------------------------------- border */
  --bk-border-width: 1px;
  --bk-border-width-strong: 2px;
  --bk-border-style: solid;

  /* --------------------------------------------------------------- motion */
  --bk-dur-instant: 60ms;
  --bk-dur-fast: 120ms;
  --bk-dur-base: 200ms;
  --bk-dur-slow: 320ms;
  --bk-dur-slower: 560ms;
  --bk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bk-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --bk-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --bk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bk-ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --bk-transition: color var(--bk-dur-fast) var(--bk-ease),
    background-color var(--bk-dur-fast) var(--bk-ease),
    border-color var(--bk-dur-fast) var(--bk-ease),
    box-shadow var(--bk-dur-fast) var(--bk-ease),
    transform var(--bk-dur-fast) var(--bk-ease),
    opacity var(--bk-dur-fast) var(--bk-ease);

  /* ---------------------------------------------------------------- layer */
  --bk-z-base: 0;
  --bk-z-raised: 10;
  --bk-z-sticky: 100;
  --bk-z-drawer: 400;
  --bk-z-modal: 500;
  --bk-z-popover: 600;
  --bk-z-tooltip: 700;
  --bk-z-toast: 800;
  --bk-z-max: 2147483000;

  /* --------------------------------------------------------- size tokens */
  --bk-control-height-xs: 1.5rem;
  --bk-control-height-sm: 1.875rem;
  --bk-control-height-md: 2.25rem;
  --bk-control-height-lg: 2.75rem;
  --bk-control-height-xl: 3.25rem;
  --bk-container-xs: 30rem;
  --bk-container-sm: 40rem;
  --bk-container-md: 48rem;
  --bk-container-lg: 64rem;
  --bk-container-xl: 80rem;
  --bk-container-2xl: 96rem;
  --bk-prose-width: 68ch;

  /* ============================ TIER 2 — SEMANTIC (light default) ======== */
  --bk-hue: 250;
  --bk-bg: #ffffff;
  --bk-bg-subtle: #f7f8fa;
  --bk-bg-muted: #eef0f4;
  --bk-surface: #ffffff;
  --bk-surface-2: #f7f8fa;
  --bk-surface-3: #eef0f4;
  --bk-surface-inverted: #14161a;
  --bk-overlay-bg: rgb(12 14 18 / 0.45);
  --bk-scrim: rgb(12 14 18 / 0.6);

  --bk-text: #15181d;
  --bk-text-muted: #565f6d;
  --bk-text-subtle: #7d879a;
  --bk-text-inverted: #ffffff;
  --bk-text-link: var(--bk-primary-text);

  --bk-border: #e3e6ec;
  --bk-border-muted: #eef0f4;
  --bk-border-strong: #c6ccd8;
  --bk-border-inverted: #2a2f39;

  --bk-primary: #5b5bd6;
  --bk-primary-hover: #4f4fc4;
  --bk-primary-active: #4444ab;
  --bk-primary-soft: #ececfb;
  --bk-primary-soft-hover: #dedefa;
  --bk-primary-border: #c9c9f3;
  --bk-on-primary: #ffffff;

  --bk-secondary: #0f766e;
  --bk-secondary-hover: #0d6660;
  --bk-secondary-active: #0b5751;
  --bk-secondary-soft: #e2f4f2;
  --bk-secondary-border: #b7e3de;
  --bk-on-secondary: #ffffff;

  --bk-success: #16794b;
  --bk-success-hover: #136840;
  --bk-success-active: #105837;
  --bk-success-soft: #e3f5eb;
  --bk-success-border: #b6e3ca;
  --bk-on-success: #ffffff;

  --bk-warning: #a35a00;
  --bk-warning-hover: #8d4e00;
  --bk-warning-active: #764100;
  --bk-warning-soft: #fdf0dd;
  --bk-warning-border: #f5d9ab;
  --bk-on-warning: #ffffff;

  --bk-danger: #c02a35;
  --bk-danger-hover: #a8242e;
  --bk-danger-active: #8f1f27;
  --bk-danger-soft: #fdeaec;
  --bk-danger-border: #f6c5c9;
  --bk-on-danger: #ffffff;

  --bk-info: #0b6bcb;
  --bk-info-hover: #095cae;
  --bk-info-active: #084d92;
  --bk-info-soft: #e4f0fd;
  --bk-info-border: #b8d8f7;
  --bk-on-info: #ffffff;

  --bk-neutral: #3d4451;
  --bk-neutral-hover: #333945;
  --bk-neutral-active: #292e38;
  --bk-neutral-soft: #eef0f4;
  --bk-neutral-border: #dfe3ea;
  --bk-on-neutral: #ffffff;

  /* --------------------------------------------- accent-as-foreground -----
     An accent used as a *fill* and the same accent used as *text* have very
     different contrast requirements. Skins whose accents are bright fills
     (brutal, memphis, clay, aero, terminal…) override these with a darker,
     readable variant, so soft/outline/ghost treatments stay legible.        */
  --bk-primary-text: var(--bk-primary);
  --bk-secondary-text: var(--bk-secondary);
  --bk-success-text: var(--bk-success);
  --bk-warning-text: var(--bk-warning);
  --bk-danger-text: var(--bk-danger);
  --bk-info-text: var(--bk-info);
  --bk-neutral-text: var(--bk-neutral);

  /* And the text painted on a *soft* fill is a third case again: a skin may
     keep pale soft chips even in dark mode (brutal does), so this cannot be
     derived from the page background. Defaults to the accent-as-text value. */
  --bk-primary-on-soft: var(--bk-primary-text);
  --bk-secondary-on-soft: var(--bk-secondary-text);
  --bk-success-on-soft: var(--bk-success-text);
  --bk-warning-on-soft: var(--bk-warning-text);
  --bk-danger-on-soft: var(--bk-danger-text);
  --bk-info-on-soft: var(--bk-info-text);
  --bk-neutral-on-soft: var(--bk-neutral-text);

  /* focus ring */
  --bk-ring: var(--bk-primary);
  --bk-ring-width: 2px;
  --bk-ring-offset: 2px;
  --bk-ring-offset-color: var(--bk-bg);
  --bk-ring-style: solid;

  /* --------------------------------------------------------------- shadow */
  --bk-shadow-color: 220 20% 12%;
  --bk-shadow-strength: 1;
  --bk-shadow-xs: 0 1px 2px 0 hsl(var(--bk-shadow-color) / calc(0.05 * var(--bk-shadow-strength)));
  --bk-shadow-sm: 0 1px 2px 0 hsl(var(--bk-shadow-color) / calc(0.06 * var(--bk-shadow-strength))),
    0 1px 3px 0 hsl(var(--bk-shadow-color) / calc(0.08 * var(--bk-shadow-strength)));
  --bk-shadow-md: 0 2px 4px -2px hsl(var(--bk-shadow-color) / calc(0.06 * var(--bk-shadow-strength))),
    0 4px 8px -2px hsl(var(--bk-shadow-color) / calc(0.1 * var(--bk-shadow-strength)));
  --bk-shadow-lg: 0 4px 8px -4px hsl(var(--bk-shadow-color) / calc(0.07 * var(--bk-shadow-strength))),
    0 12px 24px -6px hsl(var(--bk-shadow-color) / calc(0.12 * var(--bk-shadow-strength)));
  --bk-shadow-xl: 0 8px 16px -8px hsl(var(--bk-shadow-color) / calc(0.08 * var(--bk-shadow-strength))),
    0 24px 48px -12px hsl(var(--bk-shadow-color) / calc(0.16 * var(--bk-shadow-strength)));
  --bk-shadow-2xl: 0 32px 72px -16px hsl(var(--bk-shadow-color) / calc(0.24 * var(--bk-shadow-strength)));
  --bk-shadow-inner: inset 0 1px 2px 0 hsl(var(--bk-shadow-color) / calc(0.07 * var(--bk-shadow-strength)));
  --bk-shadow-none: 0 0 #0000;

  /* --------------------------------------------- style-personality hooks --
     These are the "escape hatches" a skin uses to express itself without any
     component stylesheet knowing about it.                                  */
  --bk-surface-image: none;          /* gradient / texture painted on surfaces */

  /* A skin whose surface image is a repeating pattern has to say how big one
     tile is. Left to `auto`, a repeating-conic-gradient stretches one cone
     across the whole element — which is how the pixel-art navbar ended up
     half dark and half checkered. */
  --bk-body-image-size: auto;
  --bk-surface-image-size: auto;
  --bk-card-image-size: auto;
  --bk-surface-backdrop: none;       /* backdrop-filter for glassy skins       */
  --bk-body-image: none;             /* page-level background art             */
  --bk-body-attachment: scroll;
  --bk-noise: none;                  /* overlay texture on cards/overlays     */
  --bk-press-transform: none;        /* how interactive things react to :active */
  --bk-hover-transform: none;
  --bk-decor-1: transparent;         /* accent colour for decorative bits     */
  --bk-decor-2: transparent;
  --bk-corner-cut: 0px;              /* for clip-path chamfered skins         */
  --bk-outline-offset: 0px;
  --bk-glow: none;                   /* extra box-shadow layer for neon skins */
  --bk-inner-highlight: none;        /* inset light line for glossy skins     */
  --bk-selection-bg: color-mix(in oklab, var(--bk-primary) 24%, transparent);
  --bk-selection-fg: inherit;
  --bk-scrollbar-thumb: var(--bk-border-strong);
  --bk-scrollbar-track: transparent;
  --bk-caret: var(--bk-primary);

  /* ============================ TIER 3 — COMPONENT KNOBS ================= */
  --bk-switch-knob: var(--bk-surface-inverted);
  --bk-btn-radius: var(--bk-radius-field);
  --bk-btn-weight: var(--bk-weight-medium);
  --bk-btn-tracking: var(--bk-label-tracking);
  --bk-btn-transform: var(--bk-label-transform);
  --bk-btn-shadow: var(--bk-shadow-xs);
  --bk-btn-shadow-hover: var(--bk-shadow-sm);
  --bk-btn-shadow-active: var(--bk-shadow-none);
  --bk-btn-border-width: var(--bk-border-width);
  --bk-btn-press: var(--bk-press-transform);
  --bk-btn-image: var(--bk-surface-image);
  --bk-btn-image-size: var(--bk-surface-image-size);

  --bk-field-radius: var(--bk-radius-field);
  --bk-field-bg: var(--bk-surface);
  --bk-field-bg-hover: var(--bk-surface);
  --bk-field-bg-disabled: var(--bk-surface-3);
  --bk-field-border: var(--bk-border-strong);
  --bk-field-border-hover: var(--bk-text-subtle);
  --bk-field-shadow: var(--bk-shadow-none);
  --bk-field-shadow-focus: none;
  --bk-field-border-width: var(--bk-border-width);
  --bk-field-placeholder: var(--bk-text-subtle);

  --bk-card-radius: var(--bk-radius-card);
  --bk-card-bg: var(--bk-surface);
  --bk-card-border: var(--bk-border);
  --bk-card-border-width: var(--bk-border-width);
  --bk-card-shadow: var(--bk-shadow-sm);
  --bk-card-shadow-hover: var(--bk-shadow-md);
  --bk-card-image: var(--bk-surface-image);
  --bk-card-pad: var(--bk-space-5);

  --bk-overlay-radius: var(--bk-radius-overlay);
  --bk-overlay-shadow: var(--bk-shadow-xl);
  --bk-overlay-border: var(--bk-border);
  --bk-overlay-surface: var(--bk-surface);
  --bk-overlay-backdrop: var(--bk-surface-backdrop);

  --bk-badge-radius: var(--bk-radius-pill);
  --bk-badge-weight: var(--bk-weight-medium);
  --bk-badge-transform: var(--bk-label-transform);

  --bk-tooltip-bg: var(--bk-surface-inverted);
  --bk-tooltip-fg: var(--bk-text-inverted);
  --bk-tooltip-radius: var(--bk-radius-md);

  --bk-code-bg: var(--bk-surface-3);
  --bk-code-fg: var(--bk-text);
  --bk-code-border: var(--bk-border);
  --bk-code-radius: var(--bk-radius-md);

  --bk-divider-color: var(--bk-border);
  --bk-divider-width: var(--bk-border-width);
  --bk-divider-style: solid;
}

/* ------------------------------------------------------------------ dark --
   Applies on [data-bk-theme="dark"] anywhere in the tree, and on
   [data-bk-theme="auto"] when the OS asks for it.                          */
:where([data-bk-theme="dark"]) {
  color-scheme: dark;
  --bk-bg: #0e1014;
  --bk-bg-subtle: #14171d;
  --bk-bg-muted: #1b1f27;
  --bk-surface: #14171d;
  --bk-surface-2: #1b1f27;
  --bk-surface-3: #232833;
  --bk-surface-inverted: #f2f4f8;
  --bk-overlay-bg: rgb(0 0 0 / 0.6);
  --bk-scrim: rgb(0 0 0 / 0.72);

  --bk-text: #eef1f6;
  --bk-text-muted: #a6b0c0;
  --bk-text-subtle: #78839a;
  --bk-text-inverted: #0e1014;

  --bk-border: #262c37;
  --bk-border-muted: #1e232c;
  --bk-border-strong: #39414f;
  --bk-border-inverted: #e3e6ec;

  --bk-primary: #8b8bf0;
  --bk-primary-hover: #9d9df4;
  --bk-primary-active: #b0b0f7;
  --bk-primary-soft: #21213c;
  --bk-primary-soft-hover: #2a2a4c;
  --bk-primary-border: #3a3a63;
  --bk-on-primary: #0d0d1f;

  --bk-secondary: #34c5b8;
  --bk-secondary-hover: #4dd2c6;
  --bk-secondary-active: #66ded3;
  --bk-secondary-soft: #102b29;
  --bk-secondary-border: #1d4a46;
  --bk-on-secondary: #04201d;

  --bk-success: #3fc27e;
  --bk-success-hover: #57cf8f;
  --bk-success-active: #6fdb9f;
  --bk-success-soft: #10281c;
  --bk-success-border: #1d4530;
  --bk-on-success: #04180d;

  --bk-warning: #e5a13a;
  --bk-warning-hover: #efb055;
  --bk-warning-active: #f5bf70;
  --bk-warning-soft: #2c2110;
  --bk-warning-border: #4d3a1a;
  --bk-on-warning: #1f1503;

  --bk-danger: #f0656f;
  --bk-danger-hover: #f57c85;
  --bk-danger-active: #f9959c;
  --bk-danger-soft: #2e1417;
  --bk-danger-border: #4f2126;
  --bk-on-danger: #22070a;

  --bk-info: #56a8f5;
  --bk-info-hover: #71b7f7;
  --bk-info-active: #8cc6f9;
  --bk-info-soft: #10202f;
  --bk-info-border: #1c3a55;
  --bk-on-info: #03121f;

  --bk-neutral: #d6dbe4;
  --bk-neutral-hover: #e4e8ee;
  --bk-neutral-active: #f0f2f6;
  --bk-neutral-soft: #232833;
  --bk-neutral-border: #333a47;
  --bk-on-neutral: #14171d;

  --bk-shadow-color: 220 40% 2%;
  --bk-shadow-strength: 2.2;
  --bk-ring-offset-color: var(--bk-bg);
  --bk-field-bg: var(--bk-surface-2);
  --bk-field-bg-disabled: var(--bk-surface-3);
}

@media (prefers-color-scheme: dark) {
  :where([data-bk-theme="auto"]) {
    color-scheme: dark;
    --bk-bg: #0e1014;
    --bk-bg-subtle: #14171d;
    --bk-bg-muted: #1b1f27;
    --bk-surface: #14171d;
    --bk-surface-2: #1b1f27;
    --bk-surface-3: #232833;
    --bk-surface-inverted: #f2f4f8;
    --bk-overlay-bg: rgb(0 0 0 / 0.6);
    --bk-scrim: rgb(0 0 0 / 0.72);
    --bk-text: #eef1f6;
    --bk-text-muted: #a6b0c0;
    --bk-text-subtle: #78839a;
    --bk-text-inverted: #0e1014;
    --bk-border: #262c37;
    --bk-border-muted: #1e232c;
    --bk-border-strong: #39414f;
    --bk-border-inverted: #e3e6ec;
    --bk-primary: #8b8bf0;
    --bk-primary-hover: #9d9df4;
    --bk-primary-active: #b0b0f7;
    --bk-primary-soft: #21213c;
    --bk-primary-soft-hover: #2a2a4c;
    --bk-primary-border: #3a3a63;
    --bk-on-primary: #0d0d1f;
    --bk-secondary: #34c5b8;
    --bk-secondary-soft: #102b29;
    --bk-secondary-border: #1d4a46;
    --bk-on-secondary: #04201d;
    --bk-success: #3fc27e;
    --bk-success-soft: #10281c;
    --bk-success-border: #1d4530;
    --bk-on-success: #04180d;
    --bk-warning: #e5a13a;
    --bk-warning-soft: #2c2110;
    --bk-warning-border: #4d3a1a;
    --bk-on-warning: #1f1503;
    --bk-danger: #f0656f;
    --bk-danger-soft: #2e1417;
    --bk-danger-border: #4f2126;
    --bk-on-danger: #22070a;
    --bk-info: #56a8f5;
    --bk-info-soft: #10202f;
    --bk-info-border: #1c3a55;
    --bk-on-info: #03121f;
    --bk-neutral: #d6dbe4;
    --bk-neutral-soft: #232833;
    --bk-neutral-border: #333a47;
    --bk-on-neutral: #14171d;
    --bk-shadow-color: 220 40% 2%;
    --bk-shadow-strength: 2.2;
    --bk-field-bg: var(--bk-surface-2);
    --bk-field-bg-disabled: var(--bk-surface-3);
  }
}

/* Density modifiers — orthogonal to skin. */
:where([data-bk-density="compact"]) {
  --bk-space-unit: 0.1875rem;
  --bk-control-height-xs: 1.25rem;
  --bk-control-height-sm: 1.625rem;
  --bk-control-height-md: 2rem;
  --bk-control-height-lg: 2.375rem;
  --bk-control-height-xl: 2.875rem;
  --bk-card-pad: var(--bk-space-4);
}
:where([data-bk-density="comfortable"]) {
  --bk-space-unit: 0.3125rem;
  --bk-control-height-md: 2.625rem;
  --bk-control-height-lg: 3.125rem;
  --bk-control-height-xl: 3.75rem;
  --bk-card-pad: var(--bk-space-6);
}

/* Global radius override, orthogonal to skin: data-bk-radius="none|sm|full" */
:where([data-bk-radius="none"]) { --bk-radius-scale: 0; --bk-radius-pill: 0; }
:where([data-bk-radius="sm"]) { --bk-radius-scale: 0.5; }
:where([data-bk-radius="lg"]) { --bk-radius-scale: 1.6; }
:where([data-bk-radius="full"]) {
  --bk-radius-scale: 2;
  --bk-radius-field: var(--bk-radius-full);
  --bk-radius-card: var(--bk-radius-3xl);
}


/* =============================================================================
   BUKALEMUN — core/icons.css
   A tiny built-in icon set shipped as CSS mask URLs, so components can draw
   chevrons/checks/crosses without any icon font, sprite, or extra request.
   Every icon inherits `currentColor` because it is painted as a mask.

   Usage:
     <i class="bk-icon bk-i-check"></i>
     .my-thing::after { -webkit-mask: var(--bk-icon-chevron-down) ...; }
   ========================================================================== */

:where(:root), :where(.bk-scope) {
  --bk-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --bk-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
  --bk-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --bk-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --bk-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --bk-icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  --bk-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --bk-icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --bk-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-7 7 7-7 7'/%3E%3C/svg%3E");
  --bk-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m6 7-7-7 7-7'/%3E%3C/svg%3E");
  --bk-icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5m-7 7 7-7 7 7'/%3E%3C/svg%3E");
  --bk-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  --bk-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.2'/%3E%3C/svg%3E");
  --bk-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.8 1.9 18a2 2 0 0 0 1.7 3h16.8a2 2 0 0 0 1.7-3L13.7 3.8a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17v.2'/%3E%3C/svg%3E");
  --bk-icon-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
  --bk-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.2 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --bk-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E");
  --bk-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
  --bk-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
  --bk-icon-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E");
  --bk-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --bk-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
  --bk-icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4m-5 5 5-5 5 5'/%3E%3Cpath d='M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E");
  --bk-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-12M9 7V4h6v3'/%3E%3C/svg%3E");
  --bk-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 2.6 2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9Z'/%3E%3C/svg%3E");
  --bk-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 21s-8-4.7-8-10.2A4.8 4.8 0 0 1 12 7a4.8 4.8 0 0 1 8 3.8C20 16.3 12 21 12 21Z'/%3E%3C/svg%3E");
  --bk-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
  --bk-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --bk-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
  --bk-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --bk-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 12s3.8-6.5 10-6.5S22 12 22 12s-3.8 6.5-10 6.5S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
  --bk-icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4l16 16'/%3E%3Cpath d='M9.9 5.7A9.7 9.7 0 0 1 12 5.5c6.2 0 10 6.5 10 6.5a17 17 0 0 1-3.3 4M6.3 8A17 17 0 0 0 2 12s3.8 6.5 10 6.5c1.3 0 2.4-.2 3.5-.6'/%3E%3C/svg%3E");
  --bk-icon-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8Z'/%3E%3C/svg%3E");
  --bk-icon-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 8-3-3-3 3M5 5v14M16 16l3 3 3-3M19 19V5'/%3E%3C/svg%3E");
  --bk-icon-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='9' cy='6' r='1.6'/%3E%3Ccircle cx='15' cy='6' r='1.6'/%3E%3Ccircle cx='9' cy='12' r='1.6'/%3E%3Ccircle cx='15' cy='12' r='1.6'/%3E%3Ccircle cx='9' cy='18' r='1.6'/%3E%3Ccircle cx='15' cy='18' r='1.6'/%3E%3C/svg%3E");
  --bk-icon-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E");
  --bk-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7Z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E");
  --bk-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");
  --bk-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 8 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3 14.2H3a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 8a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 9.8 3H10a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0 1.1 2.7H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1.3Z'/%3E%3C/svg%3E");
  --bk-icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
}

.bk-icon {
  display: inline-block;
  inline-size: var(--bk-icon-size, 1em);
  block-size: var(--bk-icon-size, 1em);
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--bk-i, var(--bk-icon-info)) center / contain no-repeat;
  mask: var(--bk-i, var(--bk-icon-info)) center / contain no-repeat;
  vertical-align: -0.125em;
}
.bk-icon-sm { --bk-icon-size: 0.85em; }
.bk-icon-lg { --bk-icon-size: 1.35em; }
.bk-icon-xl { --bk-icon-size: 2em; }

.bk-i-x { --bk-i: var(--bk-icon-x); }
.bk-i-check { --bk-i: var(--bk-icon-check); }
.bk-i-minus { --bk-i: var(--bk-icon-minus); }
.bk-i-plus { --bk-i: var(--bk-icon-plus); }
.bk-i-chevron-down { --bk-i: var(--bk-icon-chevron-down); }
.bk-i-chevron-up { --bk-i: var(--bk-icon-chevron-up); }
.bk-i-chevron-right { --bk-i: var(--bk-icon-chevron-right); }
.bk-i-chevron-left { --bk-i: var(--bk-icon-chevron-left); }
.bk-i-arrow-right { --bk-i: var(--bk-icon-arrow-right); }
.bk-i-arrow-left { --bk-i: var(--bk-icon-arrow-left); }
.bk-i-arrow-up { --bk-i: var(--bk-icon-arrow-up); }
.bk-i-search { --bk-i: var(--bk-icon-search); }
.bk-i-info { --bk-i: var(--bk-icon-info); }
.bk-i-warning { --bk-i: var(--bk-icon-warning); }
.bk-i-danger { --bk-i: var(--bk-icon-danger); }
.bk-i-success { --bk-i: var(--bk-icon-success); }
.bk-i-copy { --bk-i: var(--bk-icon-copy); }
.bk-i-external { --bk-i: var(--bk-icon-external); }
.bk-i-menu { --bk-i: var(--bk-icon-menu); }
.bk-i-dots { --bk-i: var(--bk-icon-dots); }
.bk-i-sun { --bk-i: var(--bk-icon-sun); }
.bk-i-moon { --bk-i: var(--bk-icon-moon); }
.bk-i-upload { --bk-i: var(--bk-icon-upload); }
.bk-i-trash { --bk-i: var(--bk-icon-trash); }
.bk-i-star { --bk-i: var(--bk-icon-star); }
.bk-i-heart { --bk-i: var(--bk-icon-heart); }
.bk-i-user { --bk-i: var(--bk-icon-user); }
.bk-i-calendar { --bk-i: var(--bk-icon-calendar); }
.bk-i-clock { --bk-i: var(--bk-icon-clock); }
.bk-i-lock { --bk-i: var(--bk-icon-lock); }
.bk-i-eye { --bk-i: var(--bk-icon-eye); }
.bk-i-eye-off { --bk-i: var(--bk-icon-eye-off); }
.bk-i-filter { --bk-i: var(--bk-icon-filter); }
.bk-i-sort { --bk-i: var(--bk-icon-sort); }
.bk-i-grip { --bk-i: var(--bk-icon-grip); }
.bk-i-spinner { --bk-i: var(--bk-icon-spinner); animation: bk-spin 800ms linear infinite; }
.bk-i-file { --bk-i: var(--bk-icon-file); }
.bk-i-home { --bk-i: var(--bk-icon-home); }
.bk-i-settings { --bk-i: var(--bk-icon-settings); }
.bk-i-bell { --bk-i: var(--bk-icon-bell); }


/* =============================================================================
   BUKALEMUN — core/typography.css
   ========================================================================== */

.bk-display {
  font-family: var(--bk-font-display);
  font-size: clamp(var(--bk-text-4xl), 6vw, var(--bk-text-7xl));
  font-weight: var(--bk-weight-black);
  line-height: var(--bk-leading-none);
  letter-spacing: var(--bk-tracking-tighter);
  text-transform: var(--bk-heading-transform);
  text-wrap: balance;
}
.bk-title {
  font-family: var(--bk-heading-font);
  font-size: clamp(var(--bk-text-2xl), 3.5vw, var(--bk-text-4xl));
  font-weight: var(--bk-heading-weight);
  letter-spacing: var(--bk-heading-tracking);
  line-height: var(--bk-leading-tight);
  text-transform: var(--bk-heading-transform);
  text-wrap: balance;
}
.bk-subtitle {
  font-size: var(--bk-text-lg);
  color: var(--bk-text-muted);
  line-height: var(--bk-leading-relaxed);
  font-weight: var(--bk-weight-normal);
  text-wrap: pretty;
}
.bk-lead {
  font-size: var(--bk-text-xl);
  line-height: var(--bk-leading-relaxed);
  color: var(--bk-text-muted);
  text-wrap: pretty;
}
.bk-eyebrow {
  font-size: var(--bk-text-xs);
  font-weight: var(--bk-weight-semibold);
  letter-spacing: var(--bk-tracking-widest);
  text-transform: uppercase;
  color: var(--bk-text-subtle);
}
.bk-muted { color: var(--bk-text-muted); }
.bk-subtle { color: var(--bk-text-subtle); }
.bk-mono { font-family: var(--bk-font-mono); font-feature-settings: "liga" 0; }
.bk-serif { font-family: var(--bk-font-serif); }
.bk-numeric { font-variant-numeric: tabular-nums lining-nums; }

.bk-text-2xs { font-size: var(--bk-text-2xs); }
.bk-text-xs { font-size: var(--bk-text-xs); }
.bk-text-sm { font-size: var(--bk-text-sm); }
.bk-text-md { font-size: var(--bk-text-md); }
.bk-text-base { font-size: var(--bk-text-base); }
.bk-text-lg { font-size: var(--bk-text-lg); }
.bk-text-xl { font-size: var(--bk-text-xl); }
.bk-text-2xl { font-size: var(--bk-text-2xl); }
.bk-text-3xl { font-size: var(--bk-text-3xl); }
.bk-text-4xl { font-size: var(--bk-text-4xl); }
.bk-text-5xl { font-size: var(--bk-text-5xl); }

.bk-weight-light { font-weight: var(--bk-weight-light); }
.bk-weight-normal { font-weight: var(--bk-weight-normal); }
.bk-weight-medium { font-weight: var(--bk-weight-medium); }
.bk-weight-semibold { font-weight: var(--bk-weight-semibold); }
.bk-weight-bold { font-weight: var(--bk-weight-bold); }
.bk-weight-black { font-weight: var(--bk-weight-black); }

.bk-uppercase { text-transform: uppercase; letter-spacing: var(--bk-tracking-wider); }
.bk-lowercase { text-transform: lowercase; }
.bk-capitalize { text-transform: capitalize; }
.bk-italic { font-style: italic; }
.bk-underline { text-decoration-line: underline; }
.bk-strike { text-decoration-line: line-through; }
.bk-no-underline { text-decoration: none; }

.bk-text-start { text-align: start; }
.bk-text-center { text-align: center; }
.bk-text-end { text-align: end; }
.bk-text-justify { text-align: justify; hyphens: auto; }
.bk-balance { text-wrap: balance; }
.bk-pretty { text-wrap: pretty; }
.bk-nowrap { white-space: nowrap; }
.bk-break { overflow-wrap: anywhere; word-break: break-word; }

.bk-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.bk-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--bk-lines, 2);
  line-clamp: var(--bk-lines, 2);
  overflow: hidden;
}
.bk-clamp-1 { --bk-lines: 1; }
.bk-clamp-2 { --bk-lines: 2; }
.bk-clamp-3 { --bk-lines: 3; }
.bk-clamp-4 { --bk-lines: 4; }

/* --- semantic text colours ---------------------------------------------- */
.bk-text-primary { color: var(--bk-primary-text); }
.bk-text-secondary { color: var(--bk-secondary-text); }
.bk-text-success { color: var(--bk-success-text); }
.bk-text-warning { color: var(--bk-warning-text); }
.bk-text-danger { color: var(--bk-danger-text); }
.bk-text-info { color: var(--bk-info-text); }
.bk-text-inverted { color: var(--bk-text-inverted); }

/* --- gradient / decorated text ------------------------------------------ */
.bk-text-gradient {
  background-image: var(--bk-text-gradient,
    linear-gradient(100deg, var(--bk-primary), var(--bk-secondary)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bk-text-glow { text-shadow: 0 0 0.4em currentColor; }
.bk-text-outline {
  color: transparent;
  -webkit-text-stroke: var(--bk-stroke, 1.5px) currentColor;
  text-stroke: var(--bk-stroke, 1.5px) currentColor;
}

/* --- inline bits --------------------------------------------------------- */
.bk-link {
  color: var(--bk-text-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  text-underline-offset: 0.2em;
  transition: var(--bk-transition);
}
.bk-link:hover { text-decoration-color: currentColor; }
.bk-link-quiet { color: inherit; text-decoration: none; }
.bk-link-quiet:hover { color: var(--bk-text-link); text-decoration: underline; }
.bk-link-arrow::after {
  content: "→";
  display: inline-block;
  margin-inline-start: 0.35em;
  transition: transform var(--bk-dur-base) var(--bk-ease-spring);
}
.bk-link-arrow:hover::after { transform: translateX(0.2em); }

.bk-mark {
  background: color-mix(in oklab, var(--bk-warning) 35%, transparent);
  color: inherit;
  padding: 0.05em 0.25em;
  border-radius: var(--bk-radius-xs);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.bk-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: 0.15em 0.45em;
  font-family: var(--bk-font-mono);
  font-size: 0.82em;
  line-height: 1.4;
  color: var(--bk-text);
  background: var(--bk-surface-2);
  border: var(--bk-border-width) solid var(--bk-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--bk-radius-sm);
  box-shadow: var(--bk-shadow-xs);
  white-space: nowrap;
}

.bk-code-inline {
  font-family: var(--bk-font-mono);
  font-size: 0.875em;
  padding: 0.12em 0.38em;
  color: var(--bk-code-fg);
  background: var(--bk-code-bg);
  border: var(--bk-border-width) solid var(--bk-code-border);
  border-radius: var(--bk-code-radius);
  overflow-wrap: anywhere;
}

.bk-blockquote {
  position: relative;
  padding: var(--bk-space-3) var(--bk-space-5);
  border-inline-start: 3px solid var(--bk-primary);
  color: var(--bk-text-muted);
  font-style: italic;
  background: var(--bk-surface-2);
  border-radius: 0 var(--bk-radius-md) var(--bk-radius-md) 0;
}
.bk-blockquote cite {
  display: block;
  margin-block-start: var(--bk-space-2);
  font-style: normal;
  font-size: var(--bk-text-sm);
  color: var(--bk-text-subtle);
}

/* --- lists --------------------------------------------------------------- */
.bk-list { padding-inline-start: var(--bk-space-6); display: grid; gap: var(--bk-space-1); }
.bk-list-disc { list-style: disc; }
.bk-list-decimal { list-style: decimal; }
.bk-list-none { list-style: none; padding-inline-start: 0; }
.bk-list-check { list-style: none; padding-inline-start: 0; display: grid; gap: var(--bk-space-2); }
.bk-list-check > li {
  display: grid;
  grid-template-columns: 1.25em 1fr;
  gap: var(--bk-space-2);
  align-items: start;
}
.bk-list-check > li::before {
  content: "✓";
  color: var(--bk-success-text);
  font-weight: var(--bk-weight-bold);
  line-height: inherit;
}
.bk-list-inline {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bk-space-2) var(--bk-space-4);
}

/* --- description list ---------------------------------------------------- */
.bk-dl {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: var(--bk-space-2) var(--bk-space-4);
  font-size: var(--bk-text-md);
}
.bk-dl dt { color: var(--bk-text-subtle); font-weight: var(--bk-weight-medium); }
.bk-dl dd { margin: 0; color: var(--bk-text); }
.bk-dl-rows { grid-template-columns: 1fr; gap: var(--bk-space-3); }
.bk-dl-rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--bk-space-4);
  padding-block: var(--bk-space-2);
  border-bottom: var(--bk-border-width) solid var(--bk-border-muted);
}

/* --- prose: sane defaults for long-form / markdown output ---------------- */
.bk-prose {
  max-inline-size: var(--bk-prose-width);
  color: var(--bk-text);
  line-height: var(--bk-leading-relaxed);
  font-size: var(--bk-text-base);
}
.bk-prose-wide { max-inline-size: none; }
.bk-prose > * + * { margin-block-start: var(--bk-space-4); }
.bk-prose h1, .bk-prose h2, .bk-prose h3, .bk-prose h4 {
  margin-block-start: var(--bk-space-10);
  margin-block-end: var(--bk-space-3);
  scroll-margin-block-start: var(--bk-space-16);
}
.bk-prose > :first-child { margin-block-start: 0; }
.bk-prose h2 { font-size: var(--bk-text-2xl); }
.bk-prose h3 { font-size: var(--bk-text-xl); }
.bk-prose h4 { font-size: var(--bk-text-lg); }
.bk-prose ul, .bk-prose ol { padding-inline-start: var(--bk-space-6); }
.bk-prose ul { list-style: disc; }
.bk-prose ol { list-style: decimal; }
.bk-prose li + li { margin-block-start: var(--bk-space-1); }
.bk-prose li::marker { color: var(--bk-text-subtle); }
.bk-prose a { color: var(--bk-text-link); text-decoration: underline; text-underline-offset: 0.18em; }
.bk-prose blockquote {
  padding-inline-start: var(--bk-space-4);
  border-inline-start: 3px solid var(--bk-border-strong);
  color: var(--bk-text-muted);
  font-style: italic;
}
.bk-prose img, .bk-prose video { border-radius: var(--bk-radius-card); }
.bk-prose hr { margin-block: var(--bk-space-8); }
.bk-prose code {
  font-size: 0.875em;
  padding: 0.12em 0.38em;
  background: var(--bk-code-bg);
  border: var(--bk-border-width) solid var(--bk-code-border);
  border-radius: var(--bk-code-radius);
}
.bk-prose pre {
  padding: var(--bk-space-4);
  background: var(--bk-code-bg);
  border: var(--bk-border-width) solid var(--bk-code-border);
  border-radius: var(--bk-radius-lg);
  font-size: var(--bk-text-md);
  line-height: var(--bk-leading-normal);
}
.bk-prose pre code { padding: 0; background: none; border: 0; font-size: inherit; }
.bk-prose table { width: 100%; font-size: var(--bk-text-md); }
.bk-prose th, .bk-prose td {
  padding: var(--bk-space-2) var(--bk-space-3);
  border-bottom: var(--bk-border-width) solid var(--bk-border);
  text-align: start;
}
.bk-prose figcaption {
  margin-block-start: var(--bk-space-2);
  font-size: var(--bk-text-sm);
  color: var(--bk-text-subtle);
  text-align: center;
}


/* =============================================================================
   BUKALEMUN — core/layout.css
   Layout primitives. Intrinsic-first: things wrap and reflow on their own
   instead of relying on a breakpoint zoo.
   ========================================================================== */

.bk-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--bk-container-gutter, var(--bk-space-5));
  max-width: var(--bk-container-max, var(--bk-container-xl));
}
.bk-container-xs { --bk-container-max: var(--bk-container-xs); }
.bk-container-sm { --bk-container-max: var(--bk-container-sm); }
.bk-container-md { --bk-container-max: var(--bk-container-md); }
.bk-container-lg { --bk-container-max: var(--bk-container-lg); }
.bk-container-xl { --bk-container-max: var(--bk-container-xl); }
.bk-container-2xl { --bk-container-max: var(--bk-container-2xl); }
.bk-container-full { --bk-container-max: none; }

/* --- stack: vertical rhythm without margin collapsing surprises ---------- */
.bk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bk-gap, var(--bk-space-4));
}
.bk-stack > * { margin-block: 0; }
.bk-stack-h {
  display: flex;
  flex-direction: row;
  align-items: var(--bk-align, center);
  gap: var(--bk-gap, var(--bk-space-3));
}

/* --- cluster: wrapping row of things (tags, buttons, chips) -------------- */
.bk-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--bk-align, center);
  justify-content: var(--bk-justify, flex-start);
  gap: var(--bk-gap, var(--bk-space-2));
}

/* --- switcher: row that becomes a column below a threshold --------------- */
.bk-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bk-gap, var(--bk-space-4));
}
.bk-switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--bk-switch-at, 30rem) - 100%) * 999);
}

/* --- sidebar layout: fixed-ish side + fluid main ------------------------- */
.bk-sidebar-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bk-gap, var(--bk-space-6));
}
.bk-sidebar-layout > :first-child {
  flex-basis: var(--bk-side-width, 16rem);
  flex-grow: 1;
}
.bk-sidebar-layout > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--bk-side-min, 55%);
}
.bk-sidebar-layout[data-side="end"] > :first-child { order: 2; }
.bk-sidebar-layout[data-side="end"] > :last-child { order: 1; }

/* --- grid: auto-fitting card grid --------------------------------------- */
.bk-grid {
  display: grid;
  gap: var(--bk-gap, var(--bk-space-4));
  grid-template-columns: repeat(var(--bk-cols, 1), minmax(0, 1fr));
}
.bk-grid-auto {
  display: grid;
  gap: var(--bk-gap, var(--bk-space-4));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--bk-min, 16rem), 100%), 1fr));
}
.bk-grid-fill {
  display: grid;
  gap: var(--bk-gap, var(--bk-space-4));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--bk-min, 16rem), 100%), 1fr));
}
.bk-cols-1 { --bk-cols: 1; }
.bk-cols-2 { --bk-cols: 2; }
.bk-cols-3 { --bk-cols: 3; }
.bk-cols-4 { --bk-cols: 4; }
.bk-cols-5 { --bk-cols: 5; }
.bk-cols-6 { --bk-cols: 6; }
.bk-cols-12 { --bk-cols: 12; }
.bk-col-span-2 { grid-column: span 2; }
.bk-col-span-3 { grid-column: span 3; }
.bk-col-span-4 { grid-column: span 4; }
.bk-col-span-6 { grid-column: span 6; }
.bk-col-span-full { grid-column: 1 / -1; }
.bk-row-span-2 { grid-row: span 2; }
.bk-row-span-3 { grid-row: span 3; }

@media (max-width: 60rem) {
  .bk-cols-4, .bk-cols-5, .bk-cols-6 { --bk-cols: 2; }
  .bk-cols-3 { --bk-cols: 2; }
}
@media (max-width: 40rem) {
  .bk-cols-2, .bk-cols-3, .bk-cols-4, .bk-cols-5, .bk-cols-6 { --bk-cols: 1; }
  .bk-col-span-2, .bk-col-span-3, .bk-col-span-4, .bk-col-span-6 { grid-column: 1 / -1; }
}

/* --- center: intrinsic centering with a max measure ---------------------- */
.bk-center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--bk-measure, var(--bk-prose-width));
}
.bk-center-both {
  display: grid;
  place-items: center;
  min-block-size: var(--bk-min-h, auto);
}

/* --- cover: hero-ish region with a centred principal child --------------- */
.bk-cover {
  display: flex;
  flex-direction: column;
  gap: var(--bk-gap, var(--bk-space-4));
  min-block-size: var(--bk-min-h, 60svh);
  padding: var(--bk-pad, var(--bk-space-6));
}
.bk-cover > * { margin-block: 0; }
.bk-cover > .bk-cover-main { margin-block: auto; }

/* --- frame / aspect ratio ------------------------------------------------ */
.bk-frame {
  position: relative;
  aspect-ratio: var(--bk-ratio, 16 / 9);
  overflow: hidden;
  border-radius: var(--bk-radius, var(--bk-radius-card));
}
.bk-frame > img,
.bk-frame > video,
.bk-frame > iframe {
  inline-size: 100%;
  block-size: 100%;
  object-fit: var(--bk-fit, cover);
}
.bk-ratio-square { --bk-ratio: 1; }
.bk-ratio-video { --bk-ratio: 16 / 9; }
.bk-ratio-photo { --bk-ratio: 4 / 3; }
.bk-ratio-portrait { --bk-ratio: 3 / 4; }
.bk-ratio-ultrawide { --bk-ratio: 21 / 9; }
.bk-ratio-golden { --bk-ratio: 1.618; }

/* --- reel: horizontal scroller with snap --------------------------------- */
.bk-reel {
  display: flex;
  gap: var(--bk-gap, var(--bk-space-4));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bk-pad, var(--bk-space-4));
  padding-block-end: var(--bk-space-2);
}
.bk-reel > * {
  flex: 0 0 var(--bk-item, min(22rem, 82%));
  scroll-snap-align: start;
}
.bk-reel-center > * { scroll-snap-align: center; }

/* --- split: two panes with an adjustable ratio --------------------------- */
.bk-split {
  display: grid;
  gap: var(--bk-gap, var(--bk-space-6));
  grid-template-columns: var(--bk-split, 1fr 1fr);
  align-items: var(--bk-align, start);
}
@media (max-width: 48rem) {
  .bk-split { grid-template-columns: 1fr; }
}

/* --- masonry-ish column layout ------------------------------------------ */
.bk-columns {
  column-count: var(--bk-cols, 3);
  column-gap: var(--bk-gap, var(--bk-space-4));
}
.bk-columns > * {
  break-inside: avoid;
  margin-block-end: var(--bk-gap, var(--bk-space-4));
}
@media (max-width: 60rem) { .bk-columns { column-count: 2; } }
@media (max-width: 40rem) { .bk-columns { column-count: 1; } }

/* --- sticky & scroll helpers -------------------------------------------- */
.bk-sticky {
  position: sticky;
  top: var(--bk-sticky-top, 0);
  z-index: var(--bk-z-sticky);
}
.bk-scroll-area {
  overflow: auto;
  overscroll-behavior: contain;
  max-block-size: var(--bk-max-h, 20rem);
  scrollbar-width: thin;
}
.bk-scroll-x { overflow-x: auto; overflow-y: hidden; }
.bk-scroll-y { overflow-y: auto; overflow-x: hidden; }
.bk-smooth-scroll { scroll-behavior: smooth; }

/* --- overlap / stack in z ------------------------------------------------ */
.bk-layers { display: grid; }
.bk-layers > * { grid-area: 1 / 1; }

/* --- spacers ------------------------------------------------------------- */
.bk-spacer { flex: 1 1 auto; }
.bk-divider-space { block-size: var(--bk-space-8); }


/* =============================================================================
   BUKALEMUN — core/utilities.css
   A deliberately small utility set: the ~10% of utilities that carry 90% of the
   work. This is not a utility-first framework; components do the heavy lifting.
   ========================================================================== */

/* ------------------------------------------------------------- display --- */
.bk-block { display: block; }
.bk-inline { display: inline; }
.bk-inline-block { display: inline-block; }
.bk-flex { display: flex; }
.bk-inline-flex { display: inline-flex; }
.bk-grid-d { display: grid; }
.bk-inline-grid { display: inline-grid; }
.bk-contents { display: contents; }
.bk-hidden { display: none !important; }

/* --------------------------------------------------------------- flex ---- */
.bk-row { flex-direction: row; }
.bk-col { flex-direction: column; }
.bk-row-reverse { flex-direction: row-reverse; }
.bk-col-reverse { flex-direction: column-reverse; }
.bk-wrap { flex-wrap: wrap; }
.bk-nowrap-flex { flex-wrap: nowrap; }
.bk-items-start { align-items: flex-start; }
.bk-items-center { align-items: center; }
.bk-items-end { align-items: flex-end; }
.bk-items-stretch { align-items: stretch; }
.bk-items-baseline { align-items: baseline; }
.bk-justify-start { justify-content: flex-start; }
.bk-justify-center { justify-content: center; }
.bk-justify-end { justify-content: flex-end; }
.bk-justify-between { justify-content: space-between; }
.bk-justify-around { justify-content: space-around; }
.bk-justify-evenly { justify-content: space-evenly; }
.bk-self-start { align-self: flex-start; }
.bk-self-center { align-self: center; }
.bk-self-end { align-self: flex-end; }
.bk-self-stretch { align-self: stretch; }
.bk-grow { flex-grow: 1; }
.bk-grow-0 { flex-grow: 0; }
.bk-shrink-0 { flex-shrink: 0; }
.bk-flex-1 { flex: 1 1 0%; min-width: 0; }
.bk-flex-auto { flex: 1 1 auto; }
.bk-flex-none { flex: none; }
.bk-place-center { place-items: center; place-content: center; }

/* ---------------------------------------------------------------- gap ---- */
.bk-gap-0 { gap: 0; } .bk-gap-1 { gap: var(--bk-space-1); }
.bk-gap-2 { gap: var(--bk-space-2); } .bk-gap-3 { gap: var(--bk-space-3); }
.bk-gap-4 { gap: var(--bk-space-4); } .bk-gap-5 { gap: var(--bk-space-5); }
.bk-gap-6 { gap: var(--bk-space-6); } .bk-gap-8 { gap: var(--bk-space-8); }
.bk-gap-10 { gap: var(--bk-space-10); } .bk-gap-12 { gap: var(--bk-space-12); }
.bk-gap-16 { gap: var(--bk-space-16); }

/* -------------------------------------------------------------- space ---- */
.bk-m-0 { margin: 0; }
.bk-mt-auto { margin-block-start: auto; }
.bk-mb-auto { margin-block-end: auto; }
.bk-mx-auto { margin-inline: auto; }
.bk-my-0 { margin-block: 0; }
.bk-p-0 { padding: 0; } .bk-p-1 { padding: var(--bk-space-1); }
.bk-p-2 { padding: var(--bk-space-2); } .bk-p-3 { padding: var(--bk-space-3); }
.bk-p-4 { padding: var(--bk-space-4); } .bk-p-5 { padding: var(--bk-space-5); }
.bk-p-6 { padding: var(--bk-space-6); } .bk-p-8 { padding: var(--bk-space-8); }
.bk-p-10 { padding: var(--bk-space-10); } .bk-p-12 { padding: var(--bk-space-12); }
.bk-py-1 { padding-block: var(--bk-space-1); } .bk-py-2 { padding-block: var(--bk-space-2); }
.bk-py-3 { padding-block: var(--bk-space-3); } .bk-py-4 { padding-block: var(--bk-space-4); }
.bk-py-6 { padding-block: var(--bk-space-6); } .bk-py-8 { padding-block: var(--bk-space-8); }
.bk-py-12 { padding-block: var(--bk-space-12); } .bk-py-16 { padding-block: var(--bk-space-16); }
.bk-py-24 { padding-block: var(--bk-space-24); }
.bk-px-2 { padding-inline: var(--bk-space-2); } .bk-px-3 { padding-inline: var(--bk-space-3); }
.bk-px-4 { padding-inline: var(--bk-space-4); } .bk-px-6 { padding-inline: var(--bk-space-6); }
.bk-px-8 { padding-inline: var(--bk-space-8); }

/* --------------------------------------------------------------- size ---- */
.bk-w-full { inline-size: 100%; }
.bk-w-auto { inline-size: auto; }
.bk-w-fit { inline-size: fit-content; }
.bk-w-min { inline-size: min-content; }
.bk-h-full { block-size: 100%; }
.bk-h-screen { block-size: 100svh; }
.bk-min-h-screen { min-block-size: 100svh; }
.bk-max-w-full { max-inline-size: 100%; }
.bk-max-w-prose { max-inline-size: var(--bk-prose-width); }
.bk-size-full { inline-size: 100%; block-size: 100%; }
.bk-square { aspect-ratio: 1; }

/* ---------------------------------------------------------- position ---- */
.bk-relative { position: relative; }
.bk-absolute { position: absolute; }
.bk-fixed { position: fixed; }
.bk-static { position: static; }
.bk-inset-0 { inset: 0; }
.bk-top-0 { top: 0; } .bk-bottom-0 { bottom: 0; }
.bk-start-0 { inset-inline-start: 0; } .bk-end-0 { inset-inline-end: 0; }
.bk-z-raised { z-index: var(--bk-z-raised); }
.bk-z-sticky { z-index: var(--bk-z-sticky); }
.bk-z-top { z-index: var(--bk-z-max); }

/* ------------------------------------------------------------ surfaces --- */
.bk-surface {
  background: var(--bk-surface);
  background-image: var(--bk-surface-image);
  background-size: var(--bk-surface-image-size);
  color: var(--bk-text);
}
.bk-surface-2 { background: var(--bk-surface-2); color: var(--bk-text); }
.bk-surface-3 { background: var(--bk-surface-3); color: var(--bk-text); }
.bk-surface-inverted { background: var(--bk-surface-inverted); color: var(--bk-text-inverted); }
.bk-bg-primary { background: var(--bk-primary); color: var(--bk-on-primary); }
.bk-bg-secondary { background: var(--bk-secondary); color: var(--bk-on-secondary); }
.bk-bg-success { background: var(--bk-success); color: var(--bk-on-success); }
.bk-bg-warning { background: var(--bk-warning); color: var(--bk-on-warning); }
.bk-bg-danger { background: var(--bk-danger); color: var(--bk-on-danger); }
.bk-bg-info { background: var(--bk-info); color: var(--bk-on-info); }
.bk-bg-soft { background: var(--bk-primary-soft); color: var(--bk-primary-text); }
.bk-bg-transparent { background: transparent; }

.bk-border { border: var(--bk-border-width) var(--bk-border-style) var(--bk-border); }
.bk-border-strong { border: var(--bk-border-width) var(--bk-border-style) var(--bk-border-strong); }
.bk-border-0 { border: 0; }
.bk-border-t { border-block-start: var(--bk-border-width) var(--bk-border-style) var(--bk-border); }
.bk-border-b { border-block-end: var(--bk-border-width) var(--bk-border-style) var(--bk-border); }
.bk-border-s { border-inline-start: var(--bk-border-width) var(--bk-border-style) var(--bk-border); }
.bk-border-e { border-inline-end: var(--bk-border-width) var(--bk-border-style) var(--bk-border); }

.bk-rounded-none { border-radius: 0; }
.bk-rounded-sm { border-radius: var(--bk-radius-sm); }
.bk-rounded { border-radius: var(--bk-radius-md); }
.bk-rounded-lg { border-radius: var(--bk-radius-lg); }
.bk-rounded-xl { border-radius: var(--bk-radius-xl); }
.bk-rounded-2xl { border-radius: var(--bk-radius-2xl); }
.bk-rounded-full { border-radius: var(--bk-radius-full); }

.bk-shadow-none { box-shadow: var(--bk-shadow-none); }
.bk-shadow-xs { box-shadow: var(--bk-shadow-xs); }
.bk-shadow-sm { box-shadow: var(--bk-shadow-sm); }
.bk-shadow { box-shadow: var(--bk-shadow-md); }
.bk-shadow-lg { box-shadow: var(--bk-shadow-lg); }
.bk-shadow-xl { box-shadow: var(--bk-shadow-xl); }
.bk-shadow-2xl { box-shadow: var(--bk-shadow-2xl); }
.bk-shadow-inner { box-shadow: var(--bk-shadow-inner); }
.bk-glow { box-shadow: 0 0 var(--bk-glow-size, 2rem) color-mix(in oklab, var(--bk-primary) 45%, transparent); }

.bk-glass {
  background: color-mix(in oklab, var(--bk-surface) 62%, transparent);
  backdrop-filter: blur(var(--bk-blur, 14px)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--bk-blur, 14px)) saturate(1.6);
  border: var(--bk-border-width) solid color-mix(in oklab, var(--bk-text) 10%, transparent);
}

.bk-overflow-hidden { overflow: hidden; }
.bk-overflow-clip { overflow: clip; }
.bk-overflow-visible { overflow: visible; }
.bk-isolate { isolation: isolate; }
.bk-clip-corner { clip-path: var(--bk-clip, polygon(
  var(--bk-corner-cut, 10px) 0, 100% 0, 100% calc(100% - var(--bk-corner-cut, 10px)),
  calc(100% - var(--bk-corner-cut, 10px)) 100%, 0 100%, 0 var(--bk-corner-cut, 10px))); }

/* ---------------------------------------------------------- behaviour ---- */
.bk-pointer { cursor: pointer; }
.bk-cursor-default { cursor: default; }
.bk-not-allowed { cursor: not-allowed; }
.bk-select-none { user-select: none; -webkit-user-select: none; }
.bk-select-all { user-select: all; }
.bk-pointer-none { pointer-events: none; }
.bk-pointer-auto { pointer-events: auto; }
.bk-no-drag { -webkit-user-drag: none; user-drag: none; }
.bk-opacity-0 { opacity: 0; }
.bk-opacity-50 { opacity: 0.5; }
.bk-opacity-70 { opacity: 0.7; }
.bk-opacity-100 { opacity: 1; }
.bk-transition { transition: var(--bk-transition); }
.bk-transition-none { transition: none; }

/* ------------------------------------------------------ accessibility ---- */
.bk-sr-only {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.bk-not-sr-only {
  position: static !important;
  inline-size: auto; block-size: auto;
  padding: 0; margin: 0; overflow: visible;
  clip: auto; clip-path: none; white-space: normal;
}
.bk-skip-link {
  position: absolute;
  inset-inline-start: var(--bk-space-3);
  inset-block-start: var(--bk-space-3);
  z-index: var(--bk-z-max);
  padding: var(--bk-space-2) var(--bk-space-4);
  background: var(--bk-primary);
  color: var(--bk-on-primary);
  border-radius: var(--bk-radius-md);
  transform: translateY(-200%);
  transition: transform var(--bk-dur-base) var(--bk-ease);
}
.bk-skip-link:focus { transform: translateY(0); }
.bk-focus-ring:focus-visible {
  outline: var(--bk-ring-width) var(--bk-ring-style) var(--bk-ring);
  outline-offset: var(--bk-ring-offset);
}

/* ------------------------------------------------------------- print ---- */
@media print {
  .bk-no-print { display: none !important; }
  .bk-print-only { display: revert !important; }
}
.bk-print-only { display: none; }

/* ------------------------------------------------- responsive visibility - */
@media (max-width: 40rem) {
  .bk-hide-sm { display: none !important; }
  .bk-stack-sm { flex-direction: column !important; align-items: stretch !important; }
  .bk-full-sm { inline-size: 100% !important; }
}
@media (min-width: 40.0625rem) and (max-width: 64rem) {
  .bk-hide-md { display: none !important; }
}
@media (min-width: 64.0625rem) {
  .bk-hide-lg { display: none !important; }
}
@media (min-width: 40.0625rem) {
  .bk-only-sm { display: none !important; }
}

/* Container-query flavoured helpers for component-level responsiveness. */
.bk-cq { container-type: inline-size; }
@container (max-width: 30rem) {
  .bk-cq-stack { flex-direction: column; align-items: stretch; }
  .bk-cq-hide { display: none; }
}


/* =============================================================================
   BUKALEMUN — core/animations.css
   Named keyframes shared by components + a small entrance-animation API.
   ========================================================================== */

@keyframes bk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bk-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bk-zoom-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes bk-zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.94); } }
@keyframes bk-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bk-slide-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes bk-slide-start { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes bk-slide-end { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes bk-slide-in-bottom { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bk-slide-out-bottom { from { transform: none; } to { transform: translateY(100%); } }
@keyframes bk-slide-in-start { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes bk-slide-out-start { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes bk-slide-in-end { from { transform: translateX(100%); } to { transform: none; } }
@keyframes bk-slide-out-end { from { transform: none; } to { transform: translateX(100%); } }
@keyframes bk-slide-in-top { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes bk-slide-out-top { from { transform: none; } to { transform: translateY(-100%); } }

@keyframes bk-spin { to { transform: rotate(360deg); } }
@keyframes bk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes bk-ping {
  0% { transform: scale(1); opacity: 0.8; }
  75%, 100% { transform: scale(2.1); opacity: 0; }
}
@keyframes bk-bounce {
  0%, 100% { transform: translateY(-22%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
@keyframes bk-shake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-5px); }
  30%, 60%, 90% { transform: translateX(5px); }
}
@keyframes bk-wiggle {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
@keyframes bk-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes bk-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@keyframes bk-progress-indeterminate {
  0% { transform: translateX(-100%) scaleX(0.35); }
  50% { transform: translateX(20%) scaleX(0.6); }
  100% { transform: translateX(140%) scaleX(0.35); }
}
@keyframes bk-dash {
  0% { stroke-dasharray: 1, 160; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 100, 160; stroke-dashoffset: -28; }
  100% { stroke-dasharray: 100, 160; stroke-dashoffset: -125; }
}
@keyframes bk-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes bk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bk-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 24%, 55% { opacity: 0.55; }
}
@keyframes bk-glitch-x {
  0%, 100% { clip-path: inset(0 0 0 0); transform: none; }
  20% { clip-path: inset(18% 0 62% 0); transform: translateX(-3px); }
  40% { clip-path: inset(62% 0 12% 0); transform: translateX(3px); }
  60% { clip-path: inset(35% 0 45% 0); transform: translateX(-2px); }
  80% { clip-path: inset(76% 0 6% 0); transform: translateX(2px); }
}
@keyframes bk-scanline { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@keyframes bk-gradient-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes bk-draw-check {
  from { stroke-dashoffset: 48; }
  to { stroke-dashoffset: 0; }
}

/* --- utility API --------------------------------------------------------- */
.bk-animate {
  animation-name: var(--bk-anim, bk-fade-in);
  animation-duration: var(--bk-anim-dur, var(--bk-dur-slow));
  animation-timing-function: var(--bk-anim-ease, var(--bk-ease-out));
  animation-delay: var(--bk-anim-delay, 0ms);
  animation-fill-mode: both;
  animation-iteration-count: var(--bk-anim-count, 1);
}
.bk-anim-fade { --bk-anim: bk-fade-in; }
.bk-anim-zoom { --bk-anim: bk-zoom-in; }
.bk-anim-up { --bk-anim: bk-slide-up; }
.bk-anim-down { --bk-anim: bk-slide-down; }
.bk-anim-start { --bk-anim: bk-slide-start; }
.bk-anim-end { --bk-anim: bk-slide-end; }
.bk-anim-spin { --bk-anim: bk-spin; --bk-anim-count: infinite; --bk-anim-dur: 900ms; --bk-anim-ease: linear; }
.bk-anim-pulse { --bk-anim: bk-pulse; --bk-anim-count: infinite; --bk-anim-dur: 2s; }
.bk-anim-bounce { --bk-anim: bk-bounce; --bk-anim-count: infinite; --bk-anim-dur: 1s; }
.bk-anim-float { --bk-anim: bk-float; --bk-anim-count: infinite; --bk-anim-dur: 3.5s; --bk-anim-ease: ease-in-out; }
.bk-anim-shake { --bk-anim: bk-shake; --bk-anim-dur: 500ms; }
.bk-anim-wiggle { --bk-anim: bk-wiggle; --bk-anim-count: infinite; --bk-anim-dur: 1.2s; --bk-anim-ease: ease-in-out; }
.bk-anim-glitch { --bk-anim: bk-glitch-x; --bk-anim-count: infinite; --bk-anim-dur: 2.4s; --bk-anim-ease: steps(2, end); }
.bk-anim-delay-1 { --bk-anim-delay: 60ms; }
.bk-anim-delay-2 { --bk-anim-delay: 120ms; }
.bk-anim-delay-3 { --bk-anim-delay: 180ms; }
.bk-anim-delay-4 { --bk-anim-delay: 240ms; }
.bk-anim-delay-5 { --bk-anim-delay: 320ms; }

/* Stagger children automatically (up to 12). */
.bk-stagger > * { animation-delay: calc(var(--bk-stagger-step, 55ms) * var(--bk-i, 0)); }
.bk-stagger > *:nth-child(1) { --bk-i: 0; }
.bk-stagger > *:nth-child(2) { --bk-i: 1; }
.bk-stagger > *:nth-child(3) { --bk-i: 2; }
.bk-stagger > *:nth-child(4) { --bk-i: 3; }
.bk-stagger > *:nth-child(5) { --bk-i: 4; }
.bk-stagger > *:nth-child(6) { --bk-i: 5; }
.bk-stagger > *:nth-child(7) { --bk-i: 6; }
.bk-stagger > *:nth-child(8) { --bk-i: 7; }
.bk-stagger > *:nth-child(9) { --bk-i: 8; }
.bk-stagger > *:nth-child(10) { --bk-i: 9; }
.bk-stagger > *:nth-child(11) { --bk-i: 10; }
.bk-stagger > *:nth-child(12) { --bk-i: 11; }

/* Scroll reveal — driven by bk.reveal(), degrades to "always visible". */
.bk-reveal {
  opacity: 0;
  transform: var(--bk-reveal-from, translateY(16px));
  transition: opacity var(--bk-dur-slower) var(--bk-ease-out),
    transform var(--bk-dur-slower) var(--bk-ease-out);
  transition-delay: var(--bk-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.bk-reveal.bk-is-revealed { opacity: 1; transform: none; }
.bk-reveal-scale { --bk-reveal-from: scale(0.94); }
.bk-reveal-start { --bk-reveal-from: translateX(-24px); }
.bk-reveal-end { --bk-reveal-from: translateX(24px); }
.bk-reveal-blur { filter: blur(8px); }
.bk-reveal-blur.bk-is-revealed { filter: none; }
html.bk-no-js .bk-reveal { opacity: 1; transform: none; filter: none; }

/* Hover lift / press, respecting the active skin's personality tokens. */
.bk-hoverable {
  transition: transform var(--bk-dur-base) var(--bk-ease-spring), box-shadow var(--bk-dur-base) var(--bk-ease);
}
.bk-hoverable:hover { transform: var(--bk-hover-transform, translateY(-2px)); box-shadow: var(--bk-shadow-lg); }
.bk-hoverable:active { transform: var(--bk-press-transform, translateY(0)); }

/* View-transition opt-in for multi-page navigations. */
@media (prefers-reduced-motion: no-preference) {
  .bk-vt-name { view-transition-name: var(--bk-vt, none); }
}


/* =============================================================================
   BUKALEMUN — core/a11y.css
   Two environments where a skin's taste must get out of the way:

   forced-colors    Windows High Contrast and friends replace the palette
                    wholesale. Anything a skin expressed through background
                    images, shadows or colour-mix disappears — so borders have
                    to carry the meaning instead.
   prefers-contrast Some users ask for more contrast without leaving the skin.
                    Here we keep the palette but firm up the edges.

   Loaded last in the core so it wins over component defaults, and written with
   the same tokens so a skin can still opt out.
   ========================================================================== */

@media (forced-colors: active) {
  /* Let the OS pick every colour; keep our geometry. */
  :where(.bk-btn, .bk-input, .bk-textarea, .bk-select, .bk-card, .bk-panel,
         .bk-alert, .bk-badge, .bk-chip, .bk-menu, .bk-popover, .bk-modal,
         .bk-drawer, .bk-toast, .bk-table-wrap, .bk-list-group, .bk-accordion,
         .bk-segmented, .bk-toolbar, .bk-avatar, .bk-progress, .bk-code) {
    forced-color-adjust: none;
    background-image: none !important;
    box-shadow: none !important;
    background-color: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }

  /* A "solid" button must still read as the primary action. */
  :where(.bk-btn-solid, .bk-btn-primary, .bk-btn-danger, .bk-btn-success,
         .bk-btn-warning, .bk-btn-info, .bk-btn-secondary, .bk-btn-neutral):not(
         .bk-btn-outline, .bk-btn-ghost, .bk-btn-soft, .bk-btn-link, .bk-btn-dashed) {
    background-color: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
  :where(.bk-btn:hover, .bk-btn:focus-visible) { border-color: Highlight; }
  :where(.bk-btn:disabled, .bk-btn[aria-disabled="true"]) {
    color: GrayText;
    border-color: GrayText;
    background-color: Canvas;
  }

  /* Selection and current state cannot rely on a tint alone. */
  :where(.bk-tab[aria-selected="true"], .bk-nav-link.bk-is-active,
         .bk-sidebar-link.bk-is-active, .bk-menu-item.bk-is-active,
         .bk-cmdk-item[aria-selected="true"], .bk-page[aria-current="page"],
         .bk-list-item.bk-is-active, .bk-segmented > input:checked + label) {
    background-color: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  /* Mask-drawn icons vanish without an explicit forced colour. */
  :where(.bk-icon, .bk-close::before, .bk-check::before, .bk-alert::before,
         .bk-toast::before, .bk-accordion-trigger::after, .bk-error::before) {
    background-color: CanvasText !important;
  }

  /* Controls the OS does not know about still need visible state. */
  :where(.bk-check) { border: 1px solid CanvasText; background: Canvas; }
  :where(.bk-check:checked, .bk-check:indeterminate) { background: Highlight; }
  :where(.bk-check:checked)::before { background-color: HighlightText !important; }
  :where(.bk-switch) { border: 1px solid CanvasText; background: Canvas; }
  :where(.bk-switch)::before { background: CanvasText; }
  :where(.bk-switch:checked) { background: Highlight; }
  :where(.bk-switch:checked)::before { background: HighlightText; }
  :where(.bk-progress) { border: 1px solid CanvasText; }
  :where(.bk-progress-bar) { background: Highlight; }
  :where(.bk-skeleton) { background: Canvas; border: 1px dashed CanvasText; animation: none; }
  :where(.bk-spinner) { border-color: CanvasText; border-block-start-color: Highlight; }

  /* Decorative washes are noise here. */
  :where(body) { background-image: none !important; }
  :where(.bk-hero-bg, .bk-hero-overlay, .bk-marquee) { display: none; }
  :where(::backdrop) { background: Canvas; }

  /* The focus ring must survive the palette swap. */
  :where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}

@media (prefers-contrast: more) {
  :where(:root), :where(.bk-scope) {
    /* Keep the skin, firm up every edge and mute nothing. */
    --bk-border: var(--bk-border-strong);
    --bk-border-muted: var(--bk-border-strong);
    --bk-border-width: max(1.5px, var(--bk-border-width));
    --bk-text-subtle: var(--bk-text-muted);
    --bk-field-placeholder: var(--bk-text-muted);
    --bk-ring-width: 3px;
    --bk-divider-color: var(--bk-border-strong);
  }
  :where(.bk-btn-ghost, .bk-btn-link) { text-decoration: underline; }
  :where(.bk-btn-soft, .bk-badge, .bk-chip) { border-color: currentColor; }
  :where(.bk-card, .bk-panel, .bk-alert) { border-width: max(1.5px, var(--bk-card-border-width)); }
  :where(a:not(.bk-btn):not(.bk-nav-link):not(.bk-sidebar-link)) { text-decoration: underline; }
}

@media (prefers-contrast: less) {
  :where(:root), :where(.bk-scope) {
    --bk-border: var(--bk-border-muted);
    --bk-ring-width: 2px;
  }
}

/* Some users disable transparency system-wide; honour it where we can. */
@media (prefers-reduced-transparency: reduce) {
  :where(.bk-glass, .bk-card-glass, .bk-navbar-glass, .bk-dock, .bk-btn-glass) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--bk-surface);
  }
  :where(.bk-modal::backdrop, .bk-drawer::backdrop, .bk-cmdk::backdrop) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Print: overlays, chrome and decoration are never wanted on paper. */
@media print {
  :where(.bk-navbar, .bk-sidebar, .bk-dock, .bk-bottom-nav, .bk-to-top,
         .bk-toaster, .bk-fab, .bk-skip-link) { display: none !important; }
  :where(.bk-card, .bk-panel, .bk-alert, .bk-table-wrap) {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #000 !important;
    break-inside: avoid;
  }
  :where(body) { background: #fff !important; color: #000 !important; background-image: none !important; }
  :where(a[href^="http"])::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  :where(.bk-tabpanel) { display: block !important; }
  :where(details) { display: block; }
}


/* =============================================================================
   BUKALEMUN — components/button.css

   Two orthogonal axes:
     colour     .bk-btn-primary | -secondary | -success | -warning | -danger
                | -info | -neutral   (sets the --bk-c-* channel)
     appearance .bk-btn-solid (default) | -soft | -outline | -ghost | -link
                | -glass | -elevated
   plus sizes (-xs .. -xl), shapes (-pill, -square, -circle) and states.
   ========================================================================== */

.bk-btn {
  /* colour channel — a colour modifier only has to redefine these */
  --bk-c: var(--bk-neutral);
  --bk-c-hover: var(--bk-neutral-hover);
  --bk-c-active: var(--bk-neutral-active);
  --bk-c-soft: var(--bk-neutral-soft);
  --bk-c-border: var(--bk-neutral-border);
  --bk-c-on: var(--bk-on-neutral);
  --bk-c-text: var(--bk-neutral-text);
  --bk-c-on-soft: var(--bk-neutral-on-soft);

  /* resolved appearance — appearance modifiers redefine these */
  --_bg: var(--bk-c);
  --_bg-hover: var(--bk-c-hover);
  --_bg-active: var(--bk-c-active);
  --_fg: var(--bk-c-on);
  --_fg-hover: var(--_fg);
  --_bd: transparent;
  --_bd-hover: var(--_bd);
  --_shadow: var(--bk-btn-shadow);
  --_shadow-hover: var(--bk-btn-shadow-hover);
  --_shadow-active: var(--bk-btn-shadow-active);

  --_pad-x: var(--bk-space-4);
  --_height: var(--bk-control-height-md);
  --_font: var(--bk-text-md);
  --_gap: var(--bk-space-2);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_gap);
  block-size: var(--_height);
  padding-inline: var(--_pad-x);
  font-family: inherit;
  font-size: var(--_font);
  font-weight: var(--bk-btn-weight);
  line-height: 1;
  letter-spacing: var(--bk-btn-tracking);
  text-transform: var(--bk-btn-transform);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--_fg);
  background-color: var(--_bg);
  background-image: var(--bk-btn-image);
  background-size: var(--bk-btn-image-size);
  border: var(--bk-btn-border-width) var(--bk-border-style) var(--_bd);
  border-radius: var(--bk-btn-radius);
  box-shadow: var(--_shadow);
  transition: var(--bk-transition);
  isolation: isolate;
}

.bk-btn:hover:not(:disabled, [aria-disabled="true"], .bk-is-loading) {
  background-color: var(--_bg-hover);
  border-color: var(--_bd-hover);
  color: var(--_fg-hover);
  box-shadow: var(--_shadow-hover);
  transform: var(--bk-hover-transform);
}
.bk-btn:active:not(:disabled, [aria-disabled="true"], .bk-is-loading) {
  background-color: var(--_bg-active);
  box-shadow: var(--_shadow-active);
  transform: var(--bk-btn-press);
}
.bk-btn:focus-visible {
  outline: var(--bk-ring-width) var(--bk-ring-style) var(--bk-ring);
  outline-offset: var(--bk-ring-offset);
  z-index: 1;
}
.bk-btn:disabled,
.bk-btn[aria-disabled="true"],
.bk-btn.bk-is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
  filter: saturate(0.6);
}

/* ------------------------------------------------------------- colours --- */
.bk-btn-primary {
  --bk-c: var(--bk-primary); --bk-c-hover: var(--bk-primary-hover);
  --bk-c-active: var(--bk-primary-active); --bk-c-soft: var(--bk-primary-soft);
  --bk-c-border: var(--bk-primary-border); --bk-c-on: var(--bk-on-primary);
  --bk-c-text: var(--bk-primary-text); --bk-c-on-soft: var(--bk-primary-on-soft);
}
.bk-btn-secondary {
  --bk-c: var(--bk-secondary); --bk-c-hover: var(--bk-secondary-hover);
  --bk-c-active: var(--bk-secondary-active); --bk-c-soft: var(--bk-secondary-soft);
  --bk-c-border: var(--bk-secondary-border); --bk-c-on: var(--bk-on-secondary);
  --bk-c-text: var(--bk-secondary-text); --bk-c-on-soft: var(--bk-secondary-on-soft);
}
.bk-btn-success {
  --bk-c: var(--bk-success); --bk-c-hover: var(--bk-success-hover);
  --bk-c-active: var(--bk-success-active); --bk-c-soft: var(--bk-success-soft);
  --bk-c-border: var(--bk-success-border); --bk-c-on: var(--bk-on-success);
  --bk-c-text: var(--bk-success-text); --bk-c-on-soft: var(--bk-success-on-soft);
}
.bk-btn-warning {
  --bk-c: var(--bk-warning); --bk-c-hover: var(--bk-warning-hover);
  --bk-c-active: var(--bk-warning-active); --bk-c-soft: var(--bk-warning-soft);
  --bk-c-border: var(--bk-warning-border); --bk-c-on: var(--bk-on-warning);
  --bk-c-text: var(--bk-warning-text); --bk-c-on-soft: var(--bk-warning-on-soft);
}
.bk-btn-danger {
  --bk-c: var(--bk-danger); --bk-c-hover: var(--bk-danger-hover);
  --bk-c-active: var(--bk-danger-active); --bk-c-soft: var(--bk-danger-soft);
  --bk-c-border: var(--bk-danger-border); --bk-c-on: var(--bk-on-danger);
  --bk-c-text: var(--bk-danger-text); --bk-c-on-soft: var(--bk-danger-on-soft);
}
.bk-btn-info {
  --bk-c: var(--bk-info); --bk-c-hover: var(--bk-info-hover);
  --bk-c-active: var(--bk-info-active); --bk-c-soft: var(--bk-info-soft);
  --bk-c-border: var(--bk-info-border); --bk-c-on: var(--bk-on-info);
  --bk-c-text: var(--bk-info-text); --bk-c-on-soft: var(--bk-info-on-soft);
}
.bk-btn-neutral { /* the default channel — declared for symmetry */
  --bk-c: var(--bk-neutral); --bk-c-hover: var(--bk-neutral-hover);
  --bk-c-active: var(--bk-neutral-active); --bk-c-soft: var(--bk-neutral-soft);
  --bk-c-border: var(--bk-neutral-border); --bk-c-on: var(--bk-on-neutral);
  --bk-c-text: var(--bk-neutral-text);
}

/* --------------------------------------------------------- appearances --- */
.bk-btn-solid { /* default */
  --_bg: var(--bk-c); --_bg-hover: var(--bk-c-hover); --_bg-active: var(--bk-c-active);
  --_fg: var(--bk-c-on); --_bd: transparent;
}
.bk-btn-soft {
  --_bg: var(--bk-c-soft);
  --_bg-hover: color-mix(in oklab, var(--bk-c-soft) 78%, var(--bk-c));
  --_bg-active: color-mix(in oklab, var(--bk-c-soft) 62%, var(--bk-c));
  --_fg: var(--bk-c-on-soft);
  --_bd: transparent;
  --_shadow: var(--bk-shadow-none);
  --_shadow-hover: var(--bk-shadow-none);
}
.bk-btn-outline {
  --_bg: transparent;
  --_bg-hover: var(--bk-c-soft);
  --_bg-active: color-mix(in oklab, var(--bk-c-soft) 70%, var(--bk-c));
  --_fg: var(--bk-c-text);
  --_bd: var(--bk-c-border);
  --_bd-hover: var(--bk-c);
  --_shadow: var(--bk-shadow-none);
  --_shadow-hover: var(--bk-shadow-none);
}
.bk-btn-dashed {
  --_bg: transparent;
  --_bg-hover: var(--bk-c-soft);
  --_bg-active: var(--bk-c-soft);
  --_fg: var(--bk-c-text);
  --_bd: var(--bk-c-border);
  --_bd-hover: var(--bk-c);
  --_shadow: var(--bk-shadow-none);
  --_shadow-hover: var(--bk-shadow-none);
  border-style: dashed;
}
.bk-btn-ghost {
  --_bg: transparent;
  --_bg-hover: color-mix(in oklab, var(--bk-c) 12%, transparent);
  --_bg-active: color-mix(in oklab, var(--bk-c) 20%, transparent);
  --_fg: var(--bk-c-text);
  --_bd: transparent;
  --_shadow: var(--bk-shadow-none);
  --_shadow-hover: var(--bk-shadow-none);
  background-image: none;
}
.bk-btn-link {
  --_bg: transparent; --_bg-hover: transparent; --_bg-active: transparent;
  --_fg: var(--bk-c-text); --_bd: transparent;
  --_shadow: var(--bk-shadow-none); --_shadow-hover: var(--bk-shadow-none);
  block-size: auto;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  background-image: none;
}
.bk-btn-link:hover { text-decoration-thickness: 2px; }
.bk-btn-glass {
  --_bg: color-mix(in oklab, var(--bk-c) 20%, transparent);
  --_bg-hover: color-mix(in oklab, var(--bk-c) 32%, transparent);
  --_bg-active: color-mix(in oklab, var(--bk-c) 42%, transparent);
  --_fg: var(--bk-c-text);
  --_bd: color-mix(in oklab, var(--bk-c) 32%, transparent);
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
}
.bk-btn-elevated {
  --_shadow: var(--bk-shadow-md);
  --_shadow-hover: var(--bk-shadow-lg);
  --_shadow-active: var(--bk-shadow-sm);
}
.bk-btn-gradient {
  --_bg: transparent;
  --_fg: var(--bk-on-primary);
  --_bd: transparent;
  background-image: var(--bk-btn-gradient,
    linear-gradient(120deg, var(--bk-primary), var(--bk-secondary)));
  background-size: 180% 180%;
  transition: var(--bk-transition), background-position var(--bk-dur-slow) var(--bk-ease);
}
.bk-btn-gradient:hover { background-position: 100% 0; }

/* ---------------------------------------------------------------- sizes --- */
.bk-btn-xs { --_height: var(--bk-control-height-xs); --_pad-x: var(--bk-space-2); --_font: var(--bk-text-2xs); --_gap: var(--bk-space-1); }
.bk-btn-sm { --_height: var(--bk-control-height-sm); --_pad-x: var(--bk-space-3); --_font: var(--bk-text-xs); --_gap: var(--bk-space-1); }
.bk-btn-md { --_height: var(--bk-control-height-md); --_pad-x: var(--bk-space-4); --_font: var(--bk-text-md); }
.bk-btn-lg { --_height: var(--bk-control-height-lg); --_pad-x: var(--bk-space-6); --_font: var(--bk-text-base); --_gap: var(--bk-space-3); }
.bk-btn-xl { --_height: var(--bk-control-height-xl); --_pad-x: var(--bk-space-8); --_font: var(--bk-text-lg); --_gap: var(--bk-space-3); }

/* --------------------------------------------------------------- shapes --- */
.bk-btn-pill { border-radius: var(--bk-radius-pill); }
.bk-btn-sharp { border-radius: 0; }
.bk-btn-block { display: flex; inline-size: 100%; }
.bk-btn-square,
.bk-btn-circle {
  inline-size: var(--_height);
  padding-inline: 0;
  flex: 0 0 auto;
}
.bk-btn-circle { border-radius: var(--bk-radius-full); }
.bk-btn-icon {
  inline-size: var(--_height);
  padding-inline: 0;
  flex: 0 0 auto;
}
.bk-btn > .bk-icon,
.bk-btn > svg { flex: 0 0 auto; inline-size: 1.15em; block-size: 1.15em; }

/* ---------------------------------------------------------------- state --- */
.bk-btn.bk-is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.bk-btn.bk-is-loading::after {
  content: "";
  position: absolute;
  inline-size: 1.05em;
  block-size: 1.05em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--bk-radius-full);
  color: var(--_fg);
  animation: bk-spin 700ms linear infinite;
}
.bk-btn[aria-pressed="true"],
.bk-btn.bk-is-active {
  --_bg: var(--bk-c-active);
  --_fg: var(--bk-c-on);
  --_bd: var(--bk-c-active);
}
.bk-btn-soft[aria-pressed="true"],
.bk-btn-ghost[aria-pressed="true"],
.bk-btn-outline[aria-pressed="true"] {
  --_bg: var(--bk-c-soft);
  --_fg: var(--bk-c-on-soft);
  --_bd: var(--bk-c);
}

/* Badge/counter riding on a button. */
.bk-btn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.35em;
  padding-inline: 0.35em;
  block-size: 1.35em;
  font-size: 0.78em;
  font-weight: var(--bk-weight-semibold);
  border-radius: var(--bk-radius-full);
  background: color-mix(in oklab, currentColor 18%, transparent);
}

/* ---------------------------------------------------------------- group --- */
.bk-btn-group {
  display: inline-flex;
  vertical-align: middle;
  isolation: isolate;
}
.bk-btn-group > .bk-btn { border-radius: 0; }
.bk-btn-group > .bk-btn:first-child {
  border-start-start-radius: var(--bk-btn-radius);
  border-end-start-radius: var(--bk-btn-radius);
}
.bk-btn-group > .bk-btn:last-child {
  border-start-end-radius: var(--bk-btn-radius);
  border-end-end-radius: var(--bk-btn-radius);
}
.bk-btn-group > .bk-btn + .bk-btn { margin-inline-start: calc(-1 * var(--bk-btn-border-width)); }
.bk-btn-group > .bk-btn:hover,
.bk-btn-group > .bk-btn:focus-visible { z-index: 2; }
.bk-btn-group-vertical {
  display: inline-flex;
  flex-direction: column;
  isolation: isolate;
}
.bk-btn-group-vertical > .bk-btn { border-radius: 0; }
.bk-btn-group-vertical > .bk-btn:first-child {
  border-start-start-radius: var(--bk-btn-radius);
  border-start-end-radius: var(--bk-btn-radius);
}
.bk-btn-group-vertical > .bk-btn:last-child {
  border-end-start-radius: var(--bk-btn-radius);
  border-end-end-radius: var(--bk-btn-radius);
}
.bk-btn-group-vertical > .bk-btn + .bk-btn { margin-block-start: calc(-1 * var(--bk-btn-border-width)); }
.bk-btn-group-attached > .bk-btn { flex: 1 1 auto; }

/* ------------------------------------------------------ floating action --- */
.bk-fab {
  position: fixed;
  inset-block-end: var(--bk-fab-offset, var(--bk-space-6));
  inset-inline-end: var(--bk-fab-offset, var(--bk-space-6));
  z-index: var(--bk-z-sticky);
  inline-size: 3.5rem;
  block-size: 3.5rem;
  padding: 0;
  border-radius: var(--bk-radius-full);
  box-shadow: var(--bk-shadow-lg);
}
.bk-fab:hover { box-shadow: var(--bk-shadow-xl); }
.bk-fab-start { inset-inline: var(--bk-fab-offset, var(--bk-space-6)) auto; }
.bk-fab-extended { inline-size: auto; padding-inline: var(--bk-space-6); border-radius: var(--bk-radius-full); }

/* ---------------------------------------------------- ripple (JS opt-in) --- */
.bk-ripple { position: relative; overflow: hidden; }
.bk-ripple-wave {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: 0.28;
  pointer-events: none;
  animation: bk-ripple-out 560ms var(--bk-ease-out) forwards;
}
@keyframes bk-ripple-out {
  to { transform: scale(2.6); opacity: 0; }
}

/* ------------------------------------------------------ close / dismiss --- */
.bk-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: 0 0 auto;
  color: var(--bk-text-subtle);
  background: transparent;
  border: 0;
  border-radius: var(--bk-radius-md);
  cursor: pointer;
  transition: var(--bk-transition);
  line-height: 1;
}
.bk-close::before {
  content: "";
  inline-size: 0.85em;
  block-size: 0.85em;
  background: currentColor;
  -webkit-mask: var(--bk-icon-x) center / contain no-repeat;
  mask: var(--bk-icon-x) center / contain no-repeat;
}
.bk-close:hover { color: var(--bk-text); background: var(--bk-surface-3); }
.bk-close:focus-visible { outline: var(--bk-ring-width) solid var(--bk-ring); outline-offset: 1px; }
.bk-close-lg { inline-size: 2.25rem; block-size: 2.25rem; }


/* =============================================================================
   BUKALEMUN — components/form.css
   Text fields, selects, field wrappers, input groups and form layout.
   ========================================================================== */

.bk-field {
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-1);
  min-inline-size: 0;
}
.bk-field-row {
  display: grid;
  grid-template-columns: var(--bk-label-width, 10rem) 1fr;
  gap: var(--bk-space-2) var(--bk-space-4);
  align-items: start;
}
@media (max-width: 40rem) {
  .bk-field-row { grid-template-columns: 1fr; }
}

.bk-label {
  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-2);
  font-size: var(--bk-text-md);
  font-weight: var(--bk-weight-medium);
  letter-spacing: var(--bk-label-tracking);
  text-transform: var(--bk-label-transform);
  color: var(--bk-text);
  line-height: var(--bk-leading-snug);
}
.bk-label-required::after {
  content: "*";
  color: var(--bk-danger-text);
  font-weight: var(--bk-weight-bold);
  line-height: 1;
}
.bk-label-optional::after {
  content: "optional";
  font-size: var(--bk-text-xs);
  font-weight: var(--bk-weight-normal);
  color: var(--bk-text-subtle);
  text-transform: none;
  letter-spacing: normal;
}
.bk-help {
  font-size: var(--bk-text-sm);
  color: var(--bk-text-subtle);
  line-height: var(--bk-leading-snug);
}
.bk-error {
  display: flex;
  align-items: center;
  gap: var(--bk-space-1);
  font-size: var(--bk-text-sm);
  color: var(--bk-danger-text);
  line-height: var(--bk-leading-snug);
}
.bk-error::before {
  content: "";
  inline-size: 1em;
  block-size: 1em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--bk-icon-danger) center / contain no-repeat;
  mask: var(--bk-icon-danger) center / contain no-repeat;
}
.bk-success-text { font-size: var(--bk-text-sm); color: var(--bk-success-text); }

/* ---------------------------------------------------------------- input --- */
.bk-input,
.bk-textarea,
.bk-select {
  --_height: var(--bk-control-height-md);
  --_pad-x: var(--bk-space-3);
  --_font: var(--bk-text-md);
  --_border: var(--bk-field-border);

  inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--_height);
  padding-inline: var(--_pad-x);
  font-family: inherit;
  font-size: var(--_font);
  line-height: var(--bk-leading-snug);
  color: var(--bk-text);
  background-color: var(--bk-field-bg);
  background-image: var(--bk-field-image, none);
  border: var(--bk-field-border-width) var(--bk-border-style) var(--_border);
  border-radius: var(--bk-field-radius);
  box-shadow: var(--bk-field-shadow);
  transition: var(--bk-transition);
  appearance: none;
  -webkit-appearance: none;
}
.bk-input::placeholder,
.bk-textarea::placeholder { color: var(--bk-field-placeholder); }

.bk-input:hover:not(:disabled, :read-only),
.bk-textarea:hover:not(:disabled, :read-only),
.bk-select:hover:not(:disabled) {
  border-color: var(--bk-field-border-hover);
  background-color: var(--bk-field-bg-hover);
}
.bk-input:focus,
.bk-textarea:focus,
.bk-select:focus {
  outline: var(--bk-ring-width) var(--bk-ring-style) var(--bk-ring);
  outline-offset: var(--bk-outline-offset);
  border-color: var(--bk-ring);
  box-shadow: var(--bk-field-shadow-focus, var(--bk-field-shadow));
}
.bk-input:disabled,
.bk-textarea:disabled,
.bk-select:disabled {
  background-color: var(--bk-field-bg-disabled);
  color: var(--bk-text-subtle);
  cursor: not-allowed;
  opacity: 0.8;
}
.bk-input:read-only:not(.bk-input-plain),
.bk-textarea:read-only { background-color: var(--bk-surface-2); }
.bk-input-plain {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-inline: var(--bk-space-1);
}

/* invalid — both the ARIA and the native channel */
.bk-input[aria-invalid="true"],
.bk-textarea[aria-invalid="true"],
.bk-select[aria-invalid="true"],
.bk-input.bk-is-invalid,
.bk-textarea.bk-is-invalid,
.bk-select.bk-is-invalid {
  --_border: var(--bk-danger);
  --bk-ring: var(--bk-danger);
  background-color: color-mix(in oklab, var(--bk-danger-soft) 55%, var(--bk-field-bg));
}
.bk-input.bk-is-valid,
.bk-textarea.bk-is-valid,
.bk-select.bk-is-valid { --_border: var(--bk-success); --bk-ring: var(--bk-success); }
.bk-form-validate .bk-input:user-invalid,
.bk-form-validate .bk-textarea:user-invalid,
.bk-form-validate .bk-select:user-invalid {
  --_border: var(--bk-danger);
  --bk-ring: var(--bk-danger);
}

/* sizes */
.bk-input-xs, .bk-select-xs { --_height: var(--bk-control-height-xs); --_pad-x: var(--bk-space-2); --_font: var(--bk-text-2xs); }
.bk-input-sm, .bk-select-sm { --_height: var(--bk-control-height-sm); --_pad-x: var(--bk-space-2); --_font: var(--bk-text-xs); }
.bk-input-lg, .bk-select-lg { --_height: var(--bk-control-height-lg); --_pad-x: var(--bk-space-4); --_font: var(--bk-text-base); }
.bk-input-xl, .bk-select-xl { --_height: var(--bk-control-height-xl); --_pad-x: var(--bk-space-5); --_font: var(--bk-text-lg); }

/* ------------------------------------------------------------- textarea --- */
.bk-textarea {
  block-size: auto;
  min-block-size: calc(var(--bk-control-height-md) * 2.2);
  padding-block: var(--bk-space-2);
  line-height: var(--bk-leading-normal);
  resize: vertical;
  field-sizing: content;
}
.bk-textarea-fixed { resize: none; }
.bk-textarea-auto { field-sizing: content; max-block-size: 22rem; }

/* --------------------------------------------------------------- select --- */
.bk-select {
  padding-inline-end: calc(var(--_pad-x) + 1.4em);
  background-image: var(--bk-icon-chevron-down);
  background-repeat: no-repeat;
  background-position: right var(--_pad-x) center;
  background-size: 1.1em;
  cursor: pointer;
  /* the mask trick doesn't work on <select>, so recolour via filter-free
     currentColor SVG: we swap the arrow for a themed one in dark skins. */
}
[dir="rtl"] .bk-select { background-position: left var(--_pad-x) center; }
[data-bk-theme="dark"] .bk-select,
[data-bk-theme="auto"] .bk-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6b0c0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.bk-select[multiple],
.bk-select[size]:not([size="1"]) {
  block-size: auto;
  padding-block: var(--bk-space-2);
  background-image: none;
}
.bk-select-native { background-image: none; padding-inline-end: var(--_pad-x); }

/* ---------------------------------------------------------- input group --- */
.bk-input-group {
  display: flex;
  align-items: stretch;
  inline-size: 100%;
  isolation: isolate;
}
.bk-input-group > * { border-radius: 0; }
.bk-input-group > :first-child {
  border-start-start-radius: var(--bk-field-radius);
  border-end-start-radius: var(--bk-field-radius);
}
.bk-input-group > :last-child {
  border-start-end-radius: var(--bk-field-radius);
  border-end-end-radius: var(--bk-field-radius);
}
.bk-input-group > * + * { margin-inline-start: calc(-1 * var(--bk-field-border-width)); }
.bk-input-group > .bk-input:focus,
.bk-input-group > .bk-select:focus,
.bk-input-group > .bk-btn:focus-visible,
.bk-input-group > .bk-btn:hover { z-index: 2; }
.bk-input-group .bk-input,
.bk-input-group .bk-select { flex: 1 1 auto; }

.bk-addon {
  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-2);
  flex: 0 0 auto;
  padding-inline: var(--bk-space-3);
  font-size: var(--bk-text-md);
  color: var(--bk-text-muted);
  background: var(--bk-surface-3);
  border: var(--bk-field-border-width) var(--bk-border-style) var(--bk-field-border);
  white-space: nowrap;
}
.bk-addon-plain { background: transparent; }

/* --------------------------------------------- input with inline affixes --- */
.bk-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
}
.bk-input-wrap > .bk-input { inline-size: 100%; }
.bk-input-wrap > .bk-affix {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bk-text-subtle);
  pointer-events: none;
  inline-size: 2.25rem;
  block-size: 100%;
}
.bk-input-wrap > .bk-affix-start { inset-inline-start: 0; }
.bk-input-wrap > .bk-affix-end { inset-inline-end: 0; }
.bk-input-wrap > .bk-affix-action { pointer-events: auto; cursor: pointer; }
.bk-input-wrap > .bk-affix-action:hover { color: var(--bk-text); }
.bk-input-wrap:has(> .bk-affix-start) > .bk-input { padding-inline-start: 2.25rem; }
.bk-input-wrap:has(> .bk-affix-end) > .bk-input { padding-inline-end: 2.25rem; }

/* --------------------------------------------------------- search field --- */
.bk-search {
  position: relative;
  display: flex;
  align-items: center;
}
.bk-search > .bk-input { padding-inline-start: 2.25rem; }
.bk-search::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--bk-space-3);
  inline-size: 1em;
  block-size: 1em;
  background: var(--bk-text-subtle);
  -webkit-mask: var(--bk-icon-search) center / contain no-repeat;
  mask: var(--bk-icon-search) center / contain no-repeat;
  pointer-events: none;
}
.bk-input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  inline-size: 0.9em;
  block-size: 0.9em;
  background: var(--bk-text-subtle);
  -webkit-mask: var(--bk-icon-x) center / contain no-repeat;
  mask: var(--bk-icon-x) center / contain no-repeat;
  cursor: pointer;
}

/* ---------------------------------------------------- floating label ------ */
.bk-float {
  position: relative;
  display: block;
}
.bk-float > .bk-input,
.bk-float > .bk-textarea {
  padding-block-start: 1.1em;
  block-size: var(--bk-control-height-xl);
}
.bk-float > .bk-textarea { block-size: auto; padding-block-start: 1.6em; }
.bk-float > .bk-label {
  position: absolute;
  inset-inline-start: var(--bk-space-3);
  inset-block-start: 50%;
  translate: 0 -50%;
  color: var(--bk-text-subtle);
  font-size: var(--bk-text-md);
  font-weight: var(--bk-weight-normal);
  pointer-events: none;
  transform-origin: 0 50%;
  transition: translate var(--bk-dur-fast) var(--bk-ease),
    scale var(--bk-dur-fast) var(--bk-ease), color var(--bk-dur-fast) var(--bk-ease);
  background: transparent;
}
.bk-float > .bk-input:focus + .bk-label,
.bk-float > .bk-input:not(:placeholder-shown) + .bk-label,
.bk-float > .bk-textarea:focus + .bk-label,
.bk-float > .bk-textarea:not(:placeholder-shown) + .bk-label {
  translate: 0 calc(-50% - 0.72em);
  scale: 0.82;
  color: var(--bk-primary-text);
}

/* ------------------------------------------------------------- fieldset --- */
.bk-fieldset {
  border: var(--bk-border-width) var(--bk-border-style) var(--bk-border);
  border-radius: var(--bk-radius-lg);
  padding: var(--bk-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-3);
}
.bk-fieldset > legend {
  padding-inline: var(--bk-space-2);
  font-size: var(--bk-text-sm);
  font-weight: var(--bk-weight-semibold);
  letter-spacing: var(--bk-label-tracking);
  text-transform: var(--bk-label-transform);
  color: var(--bk-text-muted);
}

/* -------------------------------------------------------------- form -------*/
.bk-form { display: flex; flex-direction: column; gap: var(--bk-space-5); }
.bk-form-grid {
  display: grid;
  gap: var(--bk-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.bk-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bk-space-3);
  align-items: center;
  padding-block-start: var(--bk-space-2);
}
.bk-form-actions-end { justify-content: flex-end; }
.bk-form-section {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--bk-space-6);
  padding-block: var(--bk-space-6);
  border-block-end: var(--bk-border-width) solid var(--bk-border);
}
.bk-form-section:last-child { border-block-end: 0; }
@media (max-width: 52rem) {
  .bk-form-section { grid-template-columns: 1fr; gap: var(--bk-space-3); }
}

/* ------------------------------------------------------------ OTP / pin --- */
.bk-otp {
  display: inline-flex;
  gap: var(--bk-space-2);
}
.bk-otp > input {
  inline-size: 2.75rem;
  block-size: 3.25rem;
  text-align: center;
  font-size: var(--bk-text-xl);
  font-weight: var(--bk-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--bk-text);
  background: var(--bk-field-bg);
  border: var(--bk-field-border-width) var(--bk-border-style) var(--bk-field-border);
  border-radius: var(--bk-field-radius);
  transition: var(--bk-transition);
}
.bk-otp > input:focus {
  outline: var(--bk-ring-width) solid var(--bk-ring);
  outline-offset: 1px;
  border-color: var(--bk-ring);
}
.bk-otp-sep {
  align-self: center;
  color: var(--bk-text-subtle);
  font-weight: var(--bk-weight-bold);
}

/* ----------------------------------------------------------- tags input --- */
.bk-tags-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bk-space-2);
  min-block-size: var(--bk-control-height-md);
  padding: var(--bk-space-1) var(--bk-space-2);
  background: var(--bk-field-bg);
  border: var(--bk-field-border-width) var(--bk-border-style) var(--bk-field-border);
  border-radius: var(--bk-field-radius);
  cursor: text;
  transition: var(--bk-transition);
}
.bk-tags-input:focus-within {
  border-color: var(--bk-ring);
  outline: var(--bk-ring-width) solid var(--bk-ring);
  outline-offset: var(--bk-outline-offset);
}
.bk-tags-input > input {
  flex: 1 1 6rem;
  min-inline-size: 4rem;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding-block: var(--bk-space-1);
}

/* ------------------------------------------------------------ combobox ---- */
.bk-combobox { position: relative; }
.bk-combobox-list {
  position: absolute;
  z-index: var(--bk-z-popover);
  inset-inline: 0;
  inset-block-start: calc(100% + 4px);
  max-block-size: 16rem;
  overflow-y: auto;
  padding: var(--bk-space-1);
  margin: 0;
  list-style: none;
  background: var(--bk-overlay-surface);
  border: var(--bk-border-width) solid var(--bk-overlay-border);
  border-radius: var(--bk-radius-lg);
  box-shadow: var(--bk-overlay-shadow);
  backdrop-filter: var(--bk-overlay-backdrop);
}
.bk-combobox-list:not(.bk-is-open) { display: none; }
.bk-combobox-option {
  padding: var(--bk-space-2) var(--bk-space-3);
  border-radius: var(--bk-radius-md);
  font-size: var(--bk-text-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--bk-space-2);
}
.bk-combobox-option:hover,
.bk-combobox-option[aria-selected="true"] {
  background: var(--bk-primary-soft); color: var(--bk-primary-on-soft);
}
.bk-combobox-option mark { background: transparent; color: var(--bk-primary-text); font-weight: var(--bk-weight-semibold); }
.bk-combobox-empty {
  padding: var(--bk-space-3);
  text-align: center;
  font-size: var(--bk-text-sm);
  color: var(--bk-text-subtle);
}


/* =============================================================================
   BUKALEMUN — components/choice.css
   Checkbox, radio, switch, range, rating, file drop, colour swatches.
   All of them are real native inputs underneath: keyboard, form submission and
   screen-reader semantics come for free.
   ========================================================================== */

/* -------------------------------------------------------- checkbox/radio -- */
.bk-check {
  --_size: 1.15em;
  --bk-c: var(--bk-primary);
  --bk-c-on: var(--bk-on-primary);

  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  inline-size: var(--_size);
  block-size: var(--_size);
  margin: 0;
  display: inline-grid;
  place-content: center;
  vertical-align: -0.18em;
  color: var(--bk-c);
  background-color: var(--bk-field-bg);
  border: max(1.5px, var(--bk-field-border-width)) var(--bk-border-style) var(--bk-field-border);
  border-radius: var(--bk-radius-sm);
  cursor: pointer;
  transition: var(--bk-transition);
}
.bk-check::before {
  content: "";
  inline-size: 100%;
  block-size: 100%;
  scale: 0.5;
  opacity: 0;
  background-color: var(--bk-c-on);
  transition: scale var(--bk-dur-fast) var(--bk-ease-spring), opacity var(--bk-dur-instant) var(--bk-ease);
  -webkit-mask: var(--bk-icon-check) center / 82% no-repeat;
  mask: var(--bk-icon-check) center / 82% no-repeat;
}
.bk-check:checked,
.bk-check:indeterminate {
  background-color: var(--bk-c);
  border-color: var(--bk-c);
}
.bk-check:checked::before,
.bk-check:indeterminate::before { scale: 1; opacity: 1; }
.bk-check:indeterminate::before {
  -webkit-mask-image: var(--bk-icon-minus);
  mask-image: var(--bk-icon-minus);
}
.bk-check:hover:not(:disabled) { border-color: var(--bk-c); }
.bk-check:focus-visible {
  outline: var(--bk-ring-width) solid var(--bk-ring);
  outline-offset: 2px;
}
.bk-check:disabled { opacity: 0.5; cursor: not-allowed; }
.bk-check-radio { border-radius: var(--bk-radius-full); }
.bk-check-radio::before {
  -webkit-mask: none;
  mask: none;
  border-radius: var(--bk-radius-full);
  scale: 0.45;
}
.bk-check-radio:checked::before { scale: 0.45; }
.bk-check-sm { --_size: 0.95em; }
.bk-check-lg { --_size: 1.4em; }
.bk-check-xl { --_size: 1.75em; }
.bk-check-success { --bk-c: var(--bk-success); --bk-c-on: var(--bk-on-success); }
.bk-check-danger { --bk-c: var(--bk-danger); --bk-c-on: var(--bk-on-danger); }
.bk-check-warning { --bk-c: var(--bk-warning); --bk-c-on: var(--bk-on-warning); }
.bk-check-round { border-radius: var(--bk-radius-full); }

.bk-check-label {
  display: inline-flex;
  align-items: start;
  gap: var(--bk-space-2);
  cursor: pointer;
  font-size: var(--bk-text-md);
  line-height: var(--bk-leading-snug);
  color: var(--bk-text);
  -webkit-tap-highlight-color: transparent;
}
.bk-check-label:has(.bk-check:disabled) { cursor: not-allowed; color: var(--bk-text-subtle); }
.bk-check-label > .bk-check { margin-block-start: 0.12em; }
.bk-check-label-text { display: flex; flex-direction: column; gap: 2px; }
.bk-check-label-text small { color: var(--bk-text-subtle); font-size: var(--bk-text-sm); }

.bk-check-group {
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-2);
}
.bk-check-group-h { flex-direction: row; flex-wrap: wrap; gap: var(--bk-space-4); }

/* Card-style selectable option (radio/checkbox tiles). */
.bk-choice-card {
  position: relative;
  display: flex;
  align-items: start;
  gap: var(--bk-space-3);
  padding: var(--bk-space-4);
  background: var(--bk-card-bg);
  border: max(1.5px, var(--bk-card-border-width)) var(--bk-border-style) var(--bk-card-border);
  border-radius: var(--bk-card-radius);
  cursor: pointer;
  transition: var(--bk-transition);
}
.bk-choice-card:hover { border-color: var(--bk-primary-border); background: var(--bk-surface-2); }
.bk-choice-card:has(.bk-check:checked) {
  border-color: var(--bk-primary);
  color: var(--bk-primary-on-soft);
  background: var(--bk-primary-soft);
  box-shadow: 0 0 0 1px var(--bk-primary);
}
.bk-choice-card:has(.bk-check:focus-visible) {
  outline: var(--bk-ring-width) solid var(--bk-ring);
  outline-offset: 2px;
}
.bk-choice-card:has(.bk-check:disabled) { opacity: 0.55; cursor: not-allowed; }
.bk-choice-card-title { font-weight: var(--bk-weight-semibold); }
.bk-choice-card-desc { font-size: var(--bk-text-sm); color: var(--bk-text-muted); }

/* ---------------------------------------------------------------- switch -- */
.bk-switch {
  --_w: 2.5rem;
  --_h: 1.4rem;
  --_pad: 2px;
  --bk-c: var(--bk-primary);

  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  inline-size: var(--_w);
  block-size: var(--_h);
  margin: 0;
  padding: var(--_pad);
  background-color: var(--bk-border-strong);
  border: 0;
  border-radius: var(--bk-radius-full);
  cursor: pointer;
  transition: background-color var(--bk-dur-base) var(--bk-ease);
  vertical-align: -0.3em;
}
.bk-switch::before {
  content: "";
  display: block;
  inline-size: calc(var(--_h) - var(--_pad) * 2);
  block-size: calc(var(--_h) - var(--_pad) * 2);
  background: var(--bk-switch-knob);
  border-radius: var(--bk-radius-full);
  box-shadow: var(--bk-shadow-sm);
  translate: 0 0;
  transition: translate var(--bk-dur-base) var(--bk-ease-spring), inline-size var(--bk-dur-fast) var(--bk-ease);
}
.bk-switch:checked { background-color: var(--bk-c); }
.bk-switch:checked::before { translate: calc(var(--_w) - var(--_h)) 0; }
.bk-switch:active:not(:disabled)::before { inline-size: calc((var(--_h) - var(--_pad) * 2) * 1.25); }
.bk-switch:checked:active:not(:disabled)::before {
  translate: calc(var(--_w) - var(--_h) - (var(--_h) - var(--_pad) * 2) * 0.25) 0;
}
.bk-switch:focus-visible { outline: var(--bk-ring-width) solid var(--bk-ring); outline-offset: 2px; }
.bk-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.bk-switch-sm { --_w: 2rem; --_h: 1.15rem; }
.bk-switch-lg { --_w: 3.25rem; --_h: 1.8rem; }
.bk-switch-success { --bk-c: var(--bk-success); }
.bk-switch-danger { --bk-c: var(--bk-danger); }
[dir="rtl"] .bk-switch:checked::before { translate: calc(-1 * (var(--_w) - var(--_h))) 0; }

.bk-switch-label {
  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-3);
  cursor: pointer;
  font-size: var(--bk-text-md);
}
.bk-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bk-space-4);
  padding-block: var(--bk-space-2);
}

/* ---------------------------------------------------------------- range --- */
.bk-range {
  --_track: 6px;
  --_thumb: 1.15rem;
  --_progress: 50%;

  appearance: none;
  -webkit-appearance: none;
  inline-size: 100%;
  background: transparent;
  cursor: pointer;
  margin: 0;
  block-size: var(--_thumb);
}
.bk-range::-webkit-slider-runnable-track {
  block-size: var(--_track);
  border-radius: var(--bk-radius-full);
  background: linear-gradient(to right,
    var(--bk-primary) var(--_progress), var(--bk-surface-3) var(--_progress));
  border: var(--bk-border-width) solid var(--bk-border);
}
.bk-range::-moz-range-track {
  block-size: var(--_track);
  border-radius: var(--bk-radius-full);
  background: var(--bk-surface-3);
  border: var(--bk-border-width) solid var(--bk-border);
}
.bk-range::-moz-range-progress {
  block-size: var(--_track);
  border-radius: var(--bk-radius-full);
  background: var(--bk-primary);
}
.bk-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  inline-size: var(--_thumb);
  block-size: var(--_thumb);
  margin-block-start: calc((var(--_track) - var(--_thumb)) / 2 - 1px);
  background: var(--bk-surface);
  border: 2px solid var(--bk-primary);
  border-radius: var(--bk-radius-thumb);
  box-shadow: var(--bk-shadow-sm);
  transition: transform var(--bk-dur-fast) var(--bk-ease-spring), box-shadow var(--bk-dur-fast) var(--bk-ease);
}
.bk-range::-moz-range-thumb {
  inline-size: var(--_thumb);
  block-size: var(--_thumb);
  background: var(--bk-surface);
  border: 2px solid var(--bk-primary);
  border-radius: var(--bk-radius-thumb);
  box-shadow: var(--bk-shadow-sm);
}
.bk-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.bk-range:active::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--bk-primary) 22%, transparent);
}
.bk-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--bk-ring-width) var(--bk-ring);
}
.bk-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 var(--bk-ring-width) var(--bk-ring);
}
.bk-range:disabled { opacity: 0.5; cursor: not-allowed; }
.bk-range-lg { --_track: 10px; --_thumb: 1.5rem; }
.bk-range-ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--bk-text-2xs);
  color: var(--bk-text-subtle);
  padding-inline: 2px;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- file --- */
.bk-file {
  inline-size: 100%;
  font-size: var(--bk-text-md);
  color: var(--bk-text-muted);
}
.bk-file::file-selector-button {
  margin-inline-end: var(--bk-space-3);
  padding: var(--bk-space-2) var(--bk-space-4);
  font: inherit;
  font-weight: var(--bk-weight-medium);
  color: var(--bk-text);
  background: var(--bk-surface-3);
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-radius-field);
  cursor: pointer;
  transition: var(--bk-transition);
}
.bk-file::file-selector-button:hover { background: var(--bk-surface-2); border-color: var(--bk-border-strong); }

.bk-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-2);
  padding: var(--bk-space-10) var(--bk-space-6);
  text-align: center;
  color: var(--bk-text-muted);
  background: var(--bk-surface-2);
  border: 2px dashed var(--bk-border-strong);
  border-radius: var(--bk-card-radius);
  cursor: pointer;
  transition: var(--bk-transition);
}
.bk-dropzone:hover { border-color: var(--bk-primary); background: var(--bk-primary-soft); }
.bk-dropzone.bk-is-dragover {
  border-color: var(--bk-primary);
  background: var(--bk-primary-soft); color: var(--bk-primary-on-soft);
  scale: 1.01;
}
.bk-dropzone-icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  color: var(--bk-text-subtle);
}
.bk-dropzone-hint { font-size: var(--bk-text-sm); color: var(--bk-text-subtle); }
.bk-file-list { display: flex; flex-direction: column; gap: var(--bk-space-2); }
.bk-file-item {
  display: flex;
  align-items: center;
  gap: var(--bk-space-3);
  padding: var(--bk-space-2) var(--bk-space-3);
  background: var(--bk-surface-2);
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-radius-md);
  font-size: var(--bk-text-md);
}
.bk-file-item-name { flex: 1 1 auto; min-inline-size: 0; }
.bk-file-item-size { color: var(--bk-text-subtle); font-size: var(--bk-text-sm); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- rating --- */
.bk-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: var(--bk-space-1);
  --bk-c: var(--bk-warning);
}
.bk-rating > input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
  pointer-events: none;
}
.bk-rating > label {
  inline-size: var(--bk-rating-size, 1.5rem);
  block-size: var(--bk-rating-size, 1.5rem);
  background: var(--bk-border-strong);
  -webkit-mask: var(--bk-icon-star) center / contain no-repeat;
  mask: var(--bk-icon-star) center / contain no-repeat;
  cursor: pointer;
  transition: background-color var(--bk-dur-fast) var(--bk-ease), transform var(--bk-dur-fast) var(--bk-ease-spring);
}
.bk-rating > label:hover,
.bk-rating > label:hover ~ label,
.bk-rating > input:checked ~ label { background: var(--bk-c); }
.bk-rating > label:hover { transform: scale(1.15); }
.bk-rating > input:focus-visible + label {
  outline: var(--bk-ring-width) solid var(--bk-ring);
  outline-offset: 2px;
}
.bk-rating-readonly > label { cursor: default; }
.bk-rating-readonly > label:hover { transform: none; }
.bk-rating-sm { --bk-rating-size: 1rem; }
.bk-rating-lg { --bk-rating-size: 2rem; }

/* --------------------------------------------------------- colour input --- */
.bk-color {
  inline-size: 2.5rem;
  block-size: var(--bk-control-height-md);
  padding: 3px;
  background: var(--bk-field-bg);
  border: var(--bk-field-border-width) solid var(--bk-field-border);
  border-radius: var(--bk-field-radius);
  cursor: pointer;
}
.bk-color::-webkit-color-swatch-wrapper { padding: 0; }
.bk-color::-webkit-color-swatch { border: 0; border-radius: calc(var(--bk-field-radius) - 2px); }
.bk-color::-moz-color-swatch { border: 0; border-radius: calc(var(--bk-field-radius) - 2px); }

.bk-swatches { display: flex; flex-wrap: wrap; gap: var(--bk-space-2); }
.bk-swatch {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--bk-radius-md);
  border: var(--bk-border-width) solid color-mix(in oklab, var(--bk-text) 18%, transparent);
  cursor: pointer;
  transition: var(--bk-transition);
  position: relative;
}
.bk-swatch:hover { transform: scale(1.1); }
.bk-swatch[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--bk-bg), 0 0 0 4px var(--bk-primary);
}

/* -------------------------------------------------------- segmented set --- */
.bk-segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--bk-surface-3);
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
  position: relative;
}
.bk-segmented > input { position: absolute; opacity: 0; pointer-events: none; }
.bk-segmented > label,
.bk-segmented > .bk-segmented-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-2);
  padding: var(--bk-space-1) var(--bk-space-4);
  min-block-size: calc(var(--bk-control-height-md) - 8px);
  font-size: var(--bk-text-md);
  font-weight: var(--bk-weight-medium);
  color: var(--bk-text-muted);
  border-radius: calc(var(--bk-radius-lg) - 3px);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--bk-transition);
  border: 0;
  background: transparent;
}
.bk-segmented > label:hover,
.bk-segmented > .bk-segmented-item:hover { color: var(--bk-text); }
.bk-segmented > input:checked + label,
.bk-segmented > .bk-segmented-item[aria-selected="true"],
.bk-segmented > .bk-segmented-item.bk-is-active {
  color: var(--bk-text);
  background: var(--bk-surface);
  box-shadow: var(--bk-shadow-sm);
}
.bk-segmented > input:focus-visible + label {
  outline: var(--bk-ring-width) solid var(--bk-ring);
  outline-offset: 1px;
}
.bk-segmented-block { display: flex; inline-size: 100%; }
.bk-segmented-block > label,
.bk-segmented-block > .bk-segmented-item { flex: 1 1 0; }
.bk-segmented-sm > label,
.bk-segmented-sm > .bk-segmented-item { padding-inline: var(--bk-space-3); font-size: var(--bk-text-xs); min-block-size: 1.5rem; }


/* =============================================================================
   BUKALEMUN — components/card.css
   Cards, panels, media objects, stats and empty states.
   ========================================================================== */

.bk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  color: var(--bk-text);
  background-color: var(--bk-card-bg);
  background-image: var(--bk-card-image);
  background-size: var(--bk-card-image-size);
  border: var(--bk-card-border-width) var(--bk-border-style) var(--bk-card-border);
  border-radius: var(--bk-card-radius);
  box-shadow: var(--bk-card-shadow);
  transition: var(--bk-transition);
  isolation: isolate;
}
.bk-card > .bk-card-body { flex: 1 1 auto; }

.bk-card-body {
  padding: var(--bk-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-3);
  min-inline-size: 0;
}
.bk-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bk-space-3);
  padding: var(--bk-card-pad);
  padding-block-end: var(--bk-space-3);
  border-block-end: var(--bk-border-width) solid var(--bk-border-muted);
}
.bk-card-header-plain { border-block-end: 0; padding-block-end: 0; }
.bk-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--bk-space-2);
  padding: var(--bk-card-pad);
  padding-block-start: var(--bk-space-3);
  border-block-start: var(--bk-border-width) solid var(--bk-border-muted);
  background: var(--bk-card-footer-bg, transparent);
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
.bk-card-footer-start { justify-content: flex-start; }
.bk-card-footer-between { justify-content: space-between; }
.bk-card-title {
  font-size: var(--bk-text-lg);
  font-weight: var(--bk-weight-semibold);
  font-family: var(--bk-heading-font);
  letter-spacing: var(--bk-heading-tracking);
  text-transform: var(--bk-heading-transform);
  line-height: var(--bk-leading-snug);
  margin: 0;
}
.bk-card-subtitle {
  font-size: var(--bk-text-sm);
  color: var(--bk-text-muted);
  margin: 0;
}
.bk-card-text { color: var(--bk-text-muted); font-size: var(--bk-text-md); line-height: var(--bk-leading-relaxed); }
.bk-card-media {
  margin: 0;
  overflow: hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  aspect-ratio: var(--bk-ratio, 16 / 9);
}
.bk-card-media > img,
.bk-card-media > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--bk-dur-slow) var(--bk-ease);
}
.bk-card-media-bottom {
  border-radius: 0;
  border-end-start-radius: var(--bk-card-radius);
  border-end-end-radius: var(--bk-card-radius);
}
.bk-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bk-space-2);
  margin-block-start: auto;
  padding-block-start: var(--bk-space-2);
}

/* --- variants ------------------------------------------------------------ */
.bk-card-flat { box-shadow: none; }
.bk-card-outline { box-shadow: none; background: transparent; }
.bk-card-elevated { box-shadow: var(--bk-shadow-lg); border-color: transparent; }
.bk-card-glass {
  background: color-mix(in oklab, var(--bk-surface) 55%, transparent);
  backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  border-color: color-mix(in oklab, var(--bk-text) 12%, transparent);
}
.bk-card-inset { background: var(--bk-surface-2); box-shadow: var(--bk-shadow-inner); }
.bk-card-horizontal { flex-direction: row; align-items: stretch; }
.bk-card-horizontal > .bk-card-media {
  flex: 0 0 var(--bk-media-width, 12rem);
  aspect-ratio: auto;
  border-radius: 0;
  border-start-start-radius: var(--bk-card-radius);
  border-end-start-radius: var(--bk-card-radius);
}
@media (max-width: 40rem) {
  .bk-card-horizontal { flex-direction: column; }
  .bk-card-horizontal > .bk-card-media {
    flex-basis: auto;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    border-start-start-radius: var(--bk-card-radius);
    border-start-end-radius: var(--bk-card-radius);
  }
}

/* interactive card — the whole surface is one hit target */
.bk-card-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.bk-card-interactive:hover,
.bk-card-link:hover {
  box-shadow: var(--bk-card-shadow-hover);
  border-color: var(--bk-border-strong);
  transform: var(--bk-hover-transform, translateY(-2px));
}
.bk-card-interactive:active,
.bk-card-link:active { transform: var(--bk-press-transform, translateY(0)); }
.bk-card-link:hover .bk-card-media > img { scale: 1.04; }
.bk-card-link:focus-visible {
  outline: var(--bk-ring-width) solid var(--bk-ring);
  outline-offset: var(--bk-ring-offset);
}
/* stretched link: make any anchor inside cover the card */
.bk-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* accent stripe */
.bk-card-accent { border-block-start: 3px solid var(--bk-primary); }
.bk-card-accent-start { border-inline-start: 3px solid var(--bk-primary); }
.bk-card-primary { --bk-card-border: var(--bk-primary-border); --bk-card-bg: var(--bk-primary-soft); }
.bk-card-success { --bk-card-border: var(--bk-success-border); --bk-card-bg: var(--bk-success-soft); }
.bk-card-warning { --bk-card-border: var(--bk-warning-border); --bk-card-bg: var(--bk-warning-soft); }
.bk-card-danger { --bk-card-border: var(--bk-danger-border); --bk-card-bg: var(--bk-danger-soft); }

/* --- panel: a lighter-weight container ---------------------------------- */
.bk-panel {
  padding: var(--bk-space-4);
  background: var(--bk-surface-2);
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
}
.bk-panel-quiet { background: transparent; }

/* --- media object -------------------------------------------------------- */
.bk-media {
  display: flex;
  align-items: start;
  gap: var(--bk-space-3);
  min-inline-size: 0;
}
.bk-media-center { align-items: center; }
.bk-media-body { flex: 1 1 auto; min-inline-size: 0; }
.bk-media-title { font-weight: var(--bk-weight-semibold); line-height: var(--bk-leading-snug); }
.bk-media-meta { font-size: var(--bk-text-sm); color: var(--bk-text-subtle); }

/* --- stat ---------------------------------------------------------------- */
.bk-stat {
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-1);
  padding: var(--bk-space-4);
  background: var(--bk-card-bg);
  border: var(--bk-card-border-width) solid var(--bk-card-border);
  border-radius: var(--bk-card-radius);
  min-inline-size: 0;
}
.bk-stat-label {
  font-size: var(--bk-text-sm);
  color: var(--bk-text-muted);
  font-weight: var(--bk-weight-medium);
  letter-spacing: var(--bk-label-tracking);
  text-transform: var(--bk-label-transform);
}
.bk-stat-value {
  font-size: var(--bk-text-3xl);
  font-weight: var(--bk-weight-bold);
  font-family: var(--bk-heading-font);
  line-height: var(--bk-leading-none);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--bk-tracking-tight);
}
.bk-stat-unit { font-size: 0.5em; font-weight: var(--bk-weight-medium); color: var(--bk-text-muted); }
.bk-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-1);
  font-size: var(--bk-text-sm);
  font-weight: var(--bk-weight-medium);
  font-variant-numeric: tabular-nums;
}
.bk-stat-up { color: var(--bk-success-text); }
.bk-stat-up::before { content: "▲"; font-size: 0.7em; }
.bk-stat-down { color: var(--bk-danger-text); }
.bk-stat-down::before { content: "▼"; font-size: 0.7em; }
.bk-stat-flat { color: var(--bk-text-subtle); }
.bk-stat-flat::before { content: "■"; font-size: 0.55em; }
.bk-stat-grid {
  display: grid;
  gap: var(--bk-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
.bk-stat-row {
  display: flex;
  flex-wrap: wrap;
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-card-radius);
  overflow: hidden;
}
.bk-stat-row > .bk-stat {
  flex: 1 1 12rem;
  border: 0;
  border-radius: 0;
  border-inline-end: var(--bk-border-width) solid var(--bk-border);
}
.bk-stat-row > .bk-stat:last-child { border-inline-end: 0; }

/* --- empty state --------------------------------------------------------- */
.bk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-3);
  padding: var(--bk-space-12) var(--bk-space-6);
  text-align: center;
  color: var(--bk-text-muted);
}
.bk-empty-icon {
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--bk-text-subtle);
  opacity: 0.7;
}
.bk-empty-title {
  font-size: var(--bk-text-lg);
  font-weight: var(--bk-weight-semibold);
  color: var(--bk-text);
}
.bk-empty-text { max-inline-size: 36ch; font-size: var(--bk-text-md); }

/* --- section ------------------------------------------------------------- */
.bk-section { padding-block: clamp(var(--bk-space-10), 6vw, var(--bk-space-24)); }
.bk-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-2);
  margin-block-end: var(--bk-space-8);
  max-inline-size: 60ch;
}
.bk-section-head-center { margin-inline: auto; text-align: center; align-items: center; }


/* =============================================================================
   BUKALEMUN — components/badge.css
   Badges, chips/tags, avatars, indicators, dividers.
   ========================================================================== */

.bk-badge {
  --bk-c: var(--bk-neutral);
  --bk-c-soft: var(--bk-neutral-soft);
  --bk-c-border: var(--bk-neutral-border);
  --bk-c-on: var(--bk-on-neutral);
  --bk-c-text: var(--bk-neutral-text);
  --bk-c-on-soft: var(--bk-neutral-on-soft);
  --_bg: var(--bk-c-soft);
  --_fg: var(--bk-c-on-soft);
  --_bd: transparent;

  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-1);
  padding: 0.2em 0.6em;
  font-size: var(--bk-text-xs);
  font-weight: var(--bk-badge-weight);
  line-height: 1.45;
  letter-spacing: var(--bk-label-tracking);
  text-transform: var(--bk-badge-transform);
  white-space: nowrap;
  vertical-align: middle;
  color: var(--_fg);
  background: var(--_bg);
  border: var(--bk-border-width) var(--bk-border-style) var(--_bd);
  border-radius: var(--bk-badge-radius);
}
.bk-badge > svg,
.bk-badge > .bk-icon { inline-size: 1em; block-size: 1em; }

.bk-badge-primary { --bk-c: var(--bk-primary); --bk-c-soft: var(--bk-primary-soft); --bk-c-border: var(--bk-primary-border); --bk-c-on: var(--bk-on-primary); --bk-c-text: var(--bk-primary-text); --bk-c-on-soft: var(--bk-primary-on-soft); }
.bk-badge-secondary { --bk-c: var(--bk-secondary); --bk-c-soft: var(--bk-secondary-soft); --bk-c-border: var(--bk-secondary-border); --bk-c-on: var(--bk-on-secondary); --bk-c-text: var(--bk-secondary-text); --bk-c-on-soft: var(--bk-secondary-on-soft); }
.bk-badge-success { --bk-c: var(--bk-success); --bk-c-soft: var(--bk-success-soft); --bk-c-border: var(--bk-success-border); --bk-c-on: var(--bk-on-success); --bk-c-text: var(--bk-success-text); --bk-c-on-soft: var(--bk-success-on-soft); }
.bk-badge-warning { --bk-c: var(--bk-warning); --bk-c-soft: var(--bk-warning-soft); --bk-c-border: var(--bk-warning-border); --bk-c-on: var(--bk-on-warning); --bk-c-text: var(--bk-warning-text); --bk-c-on-soft: var(--bk-warning-on-soft); }
.bk-badge-danger { --bk-c: var(--bk-danger); --bk-c-soft: var(--bk-danger-soft); --bk-c-border: var(--bk-danger-border); --bk-c-on: var(--bk-on-danger); --bk-c-text: var(--bk-danger-text); --bk-c-on-soft: var(--bk-danger-on-soft); }
.bk-badge-info { --bk-c: var(--bk-info); --bk-c-soft: var(--bk-info-soft); --bk-c-border: var(--bk-info-border); --bk-c-on: var(--bk-on-info); --bk-c-text: var(--bk-info-text); --bk-c-on-soft: var(--bk-info-on-soft); }

.bk-badge-solid { --_bg: var(--bk-c); --_fg: var(--bk-c-on); }
.bk-badge-outline { --_bg: transparent; --_fg: var(--bk-c-text); --_bd: var(--bk-c-border); }
.bk-badge-ghost { --_bg: transparent; --_fg: var(--bk-c-text); }
.bk-badge-sm { font-size: var(--bk-text-2xs); padding: 0.15em 0.45em; }
.bk-badge-lg { font-size: var(--bk-text-md); padding: 0.3em 0.75em; }
.bk-badge-square { border-radius: var(--bk-radius-sm); }
.bk-badge-dot::before {
  content: "";
  inline-size: 0.5em;
  block-size: 0.5em;
  border-radius: var(--bk-radius-full);
  background: currentColor;
  flex: 0 0 auto;
}
.bk-badge-solid.bk-badge-dot::before { background: currentColor; }
.bk-badge-count {
  min-inline-size: 1.35em;
  justify-content: center;
  padding-inline: 0.4em;
  font-variant-numeric: tabular-nums;
  border-radius: var(--bk-radius-full);
}

/* --- indicator: badge anchored to another element ----------------------- */
.bk-indicator { position: relative; display: inline-flex; }
.bk-indicator-dot,
.bk-indicator-badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  translate: 35% -35%;
  z-index: 1;
}
.bk-indicator-dot {
  inline-size: 0.65rem;
  block-size: 0.65rem;
  border-radius: var(--bk-radius-full);
  background: var(--bk-danger);
  box-shadow: 0 0 0 2px var(--bk-bg);
}
.bk-indicator-bottom { inset-block: auto 0; translate: 35% 35%; }
.bk-indicator-start { inset-inline: 0 auto; translate: -35% -35%; }
.bk-pulse-dot { position: relative; }
.bk-pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: bk-ping 1.6s var(--bk-ease-out) infinite;
}

/* --- chip / tag ---------------------------------------------------------- */
.bk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-2);
  block-size: var(--bk-control-height-sm);
  padding-inline: var(--bk-space-3);
  font-size: var(--bk-text-xs);
  font-weight: var(--bk-weight-medium);
  color: var(--bk-text);
  background: var(--bk-surface-3);
  border: var(--bk-border-width) solid transparent;
  border-radius: var(--bk-radius-pill);
  transition: var(--bk-transition);
  max-inline-size: 100%;
}
.bk-chip-clickable { cursor: pointer; }
.bk-chip-clickable:hover { background: var(--bk-surface-2); border-color: var(--bk-border-strong); }
.bk-chip[aria-pressed="true"],
.bk-chip.bk-is-active {
  background: var(--bk-primary-soft); color: var(--bk-primary-on-soft);
  border-color: var(--bk-primary-border);
}
.bk-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.05em;
  block-size: 1.05em;
  margin-inline-end: -0.25em;
  border-radius: var(--bk-radius-full);
  color: var(--bk-text-subtle);
  background: transparent;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.bk-chip-remove::before {
  content: "";
  inline-size: 0.72em;
  block-size: 0.72em;
  background: currentColor;
  -webkit-mask: var(--bk-icon-x) center / contain no-repeat;
  mask: var(--bk-icon-x) center / contain no-repeat;
}
.bk-chip-remove:hover { color: var(--bk-danger-text); background: color-mix(in oklab, var(--bk-danger) 15%, transparent); }
.bk-chip-avatar { inline-size: 1.4em; block-size: 1.4em; border-radius: var(--bk-radius-full); margin-inline-start: -0.4em; }
.bk-chip-lg { block-size: var(--bk-control-height-md); font-size: var(--bk-text-md); padding-inline: var(--bk-space-4); }

/* --- avatar -------------------------------------------------------------- */
.bk-avatar {
  --_size: 2.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: var(--_size);
  block-size: var(--_size);
  font-size: calc(var(--_size) * 0.38);
  font-weight: var(--bk-weight-semibold);
  line-height: 1;
  color: var(--bk-text-muted);
  background: var(--bk-surface-3);
  border-radius: var(--bk-radius-full);
  overflow: hidden;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0;
}
.bk-avatar > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.bk-avatar-2xs { --_size: 1.25rem; }
.bk-avatar-xs { --_size: 1.75rem; }
.bk-avatar-sm { --_size: 2rem; }
.bk-avatar-md { --_size: 2.5rem; }
.bk-avatar-lg { --_size: 3.25rem; }
.bk-avatar-xl { --_size: 4.5rem; }
.bk-avatar-2xl { --_size: 6rem; }
.bk-avatar-square { border-radius: var(--bk-radius-lg); }
.bk-avatar-ring { box-shadow: 0 0 0 2px var(--bk-bg), 0 0 0 4px var(--bk-primary); }
.bk-avatar-primary { background: var(--bk-primary-soft); color: var(--bk-primary-on-soft); }
.bk-avatar-status::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 28%;
  block-size: 28%;
  border-radius: var(--bk-radius-full);
  background: var(--bk-status-color, var(--bk-success));
  box-shadow: 0 0 0 2px var(--bk-bg);
}
.bk-status-online { --bk-status-color: var(--bk-success); }
.bk-status-away { --bk-status-color: var(--bk-warning); }
.bk-status-busy { --bk-status-color: var(--bk-danger); }
.bk-status-offline { --bk-status-color: var(--bk-text-subtle); }

.bk-avatar-group {
  display: inline-flex;
  align-items: center;
  padding-inline-start: var(--bk-overlap, 0.6rem);
}
.bk-avatar-group > .bk-avatar {
  margin-inline-start: calc(-1 * var(--bk-overlap, 0.6rem));
  box-shadow: 0 0 0 2px var(--bk-bg);
  transition: translate var(--bk-dur-fast) var(--bk-ease);
}
.bk-avatar-group > .bk-avatar:hover { translate: 0 -3px; z-index: 1; }
.bk-avatar-group-more {
  font-size: var(--bk-text-xs);
  background: var(--bk-surface-inverted);
  color: var(--bk-text-inverted);
}

/* --- divider ------------------------------------------------------------- */
.bk-divider {
  border: 0;
  border-block-start: var(--bk-divider-width) var(--bk-divider-style) var(--bk-divider-color);
  margin-block: var(--bk-space-4);
}
.bk-divider-vertical {
  border-block-start: 0;
  border-inline-start: var(--bk-divider-width) var(--bk-divider-style) var(--bk-divider-color);
  margin-block: 0;
  margin-inline: var(--bk-space-4);
  align-self: stretch;
  min-block-size: 1em;
}
.bk-divider-text {
  display: flex;
  align-items: center;
  gap: var(--bk-space-3);
  border: 0;
  color: var(--bk-text-subtle);
  font-size: var(--bk-text-sm);
  text-transform: var(--bk-label-transform);
  letter-spacing: var(--bk-label-tracking);
  margin-block: var(--bk-space-4);
}
.bk-divider-text::before,
.bk-divider-text::after {
  content: "";
  flex: 1 1 auto;
  border-block-start: var(--bk-divider-width) var(--bk-divider-style) var(--bk-divider-color);
}
.bk-divider-dashed { --bk-divider-style: dashed; }
.bk-divider-dotted { --bk-divider-style: dotted; }
.bk-divider-strong { --bk-divider-color: var(--bk-border-strong); --bk-divider-width: 2px; }
.bk-divider-gradient {
  border: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--bk-border-strong), transparent);
}


/* =============================================================================
   BUKALEMUN — components/feedback.css
   Alerts, callouts, toasts, progress, meters, spinners, skeletons.
   ========================================================================== */

/* ---------------------------------------------------------------- alert --- */
.bk-alert {
  --bk-c: var(--bk-info);
  --bk-c-soft: var(--bk-info-soft);
  --bk-c-border: var(--bk-info-border);
  --bk-c-on: var(--bk-on-info);
  --bk-c-on-soft: var(--bk-info-on-soft);
  --bk-alert-icon: var(--bk-icon-info);

  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--bk-space-3);
  padding: var(--bk-space-3) var(--bk-space-4);
  color: var(--bk-c-on-soft);
  background: var(--bk-c-soft);
  border: var(--bk-border-width) var(--bk-border-style) var(--bk-c-border);
  border-radius: var(--bk-radius-lg);
  font-size: var(--bk-text-md);
  line-height: var(--bk-leading-snug);
}
.bk-alert::before {
  content: "";
  inline-size: 1.25em;
  block-size: 1.25em;
  margin-block-start: 0.05em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--bk-alert-icon) center / contain no-repeat;
  mask: var(--bk-alert-icon) center / contain no-repeat;
}
.bk-alert-noicon { grid-template-columns: 1fr auto; }
.bk-alert-noicon::before { content: none; }
.bk-alert-body { display: flex; flex-direction: column; gap: var(--bk-space-1); min-inline-size: 0; }
.bk-alert-title {
  font-weight: var(--bk-weight-semibold);
  color: inherit;
  line-height: var(--bk-leading-snug);
}
.bk-alert-text { color: color-mix(in oklab, currentColor 82%, transparent); }
.bk-alert-actions { display: flex; gap: var(--bk-space-2); margin-block-start: var(--bk-space-2); }
.bk-alert > .bk-close { grid-column: 3; margin-block-start: -0.15em; }

.bk-alert-info { --bk-c: var(--bk-info); --bk-c-soft: var(--bk-info-soft); --bk-c-border: var(--bk-info-border); --bk-c-on: var(--bk-on-info); --bk-c-on-soft: var(--bk-info-on-soft); --bk-alert-icon: var(--bk-icon-info); }
.bk-alert-success { --bk-c: var(--bk-success); --bk-c-soft: var(--bk-success-soft); --bk-c-border: var(--bk-success-border); --bk-c-on: var(--bk-on-success); --bk-c-on-soft: var(--bk-success-on-soft); --bk-alert-icon: var(--bk-icon-success); }
.bk-alert-warning { --bk-c: var(--bk-warning); --bk-c-soft: var(--bk-warning-soft); --bk-c-border: var(--bk-warning-border); --bk-c-on: var(--bk-on-warning); --bk-c-on-soft: var(--bk-warning-on-soft); --bk-alert-icon: var(--bk-icon-warning); }
.bk-alert-danger { --bk-c: var(--bk-danger); --bk-c-soft: var(--bk-danger-soft); --bk-c-border: var(--bk-danger-border); --bk-c-on: var(--bk-on-danger); --bk-c-on-soft: var(--bk-danger-on-soft); --bk-alert-icon: var(--bk-icon-danger); }
.bk-alert-neutral { --bk-c: var(--bk-neutral); --bk-c-soft: var(--bk-neutral-soft); --bk-c-border: var(--bk-neutral-border); --bk-c-on: var(--bk-on-neutral); --bk-c-on-soft: var(--bk-neutral-on-soft); --bk-alert-icon: var(--bk-icon-info); }

.bk-alert-solid {
  background: var(--bk-c);
  border-color: var(--bk-c);
  color: var(--bk-c-on);
}
.bk-alert-solid::before { background: var(--bk-c-on); }
.bk-alert-solid .bk-alert-title,
.bk-alert-solid .bk-alert-text { color: inherit; }
.bk-alert-solid .bk-close { color: inherit; opacity: 0.85; }
.bk-alert-solid .bk-close:hover { background: color-mix(in oklab, var(--bk-c-on) 18%, transparent); }

.bk-alert-accent {
  color: var(--bk-text);
  background: var(--bk-surface);
  border-color: var(--bk-border);
  border-inline-start: 3px solid var(--bk-c);
}
.bk-alert-accent::before { background: var(--bk-c-text, var(--bk-c)); }
.bk-alert-accent .bk-alert-text { color: var(--bk-text-muted); }
.bk-alert-quiet {
  color: var(--bk-text);
  background: transparent;
  border-color: transparent;
  padding-inline: 0;
}
.bk-alert-quiet .bk-alert-text { color: var(--bk-text-muted); }
.bk-alert-lg { padding: var(--bk-space-5); font-size: var(--bk-text-base); }

/* --- banner: full-bleed announcement ------------------------------------ */
.bk-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-3);
  flex-wrap: wrap;
  padding: var(--bk-space-3) var(--bk-space-5);
  font-size: var(--bk-text-md);
  color: var(--bk-on-primary);
  background: var(--bk-primary);
  background-image: var(--bk-surface-image);
  background-size: var(--bk-surface-image-size);
  text-align: center;
}
.bk-banner-quiet { color: var(--bk-text); background: var(--bk-surface-2); border-block-end: var(--bk-border-width) solid var(--bk-border); }

/* --- callout: prose-oriented aside -------------------------------------- */
.bk-callout {
  --bk-c: var(--bk-primary);
  --bk-c-text: var(--bk-primary-text);
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-2);
  padding: var(--bk-space-4) var(--bk-space-5);
  background: var(--bk-surface-2);
  border-inline-start: 4px solid var(--bk-c);
  border-radius: var(--bk-radius-md);
}
.bk-callout-title {
  display: flex;
  align-items: center;
  gap: var(--bk-space-2);
  font-weight: var(--bk-weight-semibold);
  color: var(--bk-c-text, var(--bk-c));
  text-transform: var(--bk-label-transform);
  letter-spacing: var(--bk-label-tracking);
  font-size: var(--bk-text-md);
}
.bk-callout-note { --bk-c: var(--bk-info); --bk-c-text: var(--bk-info-text); }
.bk-callout-tip { --bk-c: var(--bk-success); --bk-c-text: var(--bk-success-text); }
.bk-callout-warn { --bk-c: var(--bk-warning); --bk-c-text: var(--bk-warning-text); }
.bk-callout-danger { --bk-c: var(--bk-danger); --bk-c-text: var(--bk-danger-text); }

/* ---------------------------------------------------------------- toast --- */
.bk-toaster {
  position: fixed;
  z-index: var(--bk-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-2);
  padding: var(--bk-space-4);
  pointer-events: none;
  max-inline-size: min(26rem, 100vw);
  inline-size: max-content;
}
.bk-toaster[data-position^="top"] { inset-block-start: 0; }
.bk-toaster[data-position^="bottom"] { inset-block-end: 0; flex-direction: column-reverse; }
.bk-toaster[data-position$="end"] { inset-inline-end: 0; align-items: flex-end; }
.bk-toaster[data-position$="start"] { inset-inline-start: 0; align-items: flex-start; }
.bk-toaster[data-position$="center"] { inset-inline: 0; margin-inline: auto; align-items: center; }

.bk-toast {
  --bk-c: var(--bk-neutral);
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--bk-space-3);
  inline-size: 100%;
  min-inline-size: min(20rem, 80vw);
  padding: var(--bk-space-3) var(--bk-space-4);
  color: var(--bk-text);
  background: var(--bk-overlay-surface);
  border: var(--bk-border-width) solid var(--bk-overlay-border);
  border-radius: var(--bk-overlay-radius);
  box-shadow: var(--bk-overlay-shadow);
  backdrop-filter: var(--bk-overlay-backdrop);
  font-size: var(--bk-text-md);
  animation: bk-toast-in var(--bk-dur-slow) var(--bk-ease-spring);
  overflow: hidden;
}
@keyframes bk-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.bk-toast.bk-is-leaving {
  animation: bk-toast-out var(--bk-dur-base) var(--bk-ease-in) forwards;
}
@keyframes bk-toast-out {
  to { opacity: 0; transform: translateY(-8px) scale(0.97); }
}
.bk-toaster[data-position^="bottom"] .bk-toast { animation-name: bk-toast-in-bottom; }
@keyframes bk-toast-in-bottom {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.bk-toast::before {
  content: "";
  inline-size: 1.15em;
  block-size: 1.15em;
  margin-block-start: 0.1em;
  background: var(--bk-c);
  -webkit-mask: var(--bk-toast-icon, var(--bk-icon-info)) center / contain no-repeat;
  mask: var(--bk-toast-icon, var(--bk-icon-info)) center / contain no-repeat;
}
.bk-toast-success { --bk-c: var(--bk-success); --bk-toast-icon: var(--bk-icon-success); }
.bk-toast-danger { --bk-c: var(--bk-danger); --bk-toast-icon: var(--bk-icon-danger); }
.bk-toast-warning { --bk-c: var(--bk-warning); --bk-toast-icon: var(--bk-icon-warning); }
.bk-toast-info { --bk-c: var(--bk-info); --bk-toast-icon: var(--bk-icon-info); }
.bk-toast-loading { --bk-c: var(--bk-primary); --bk-toast-icon: var(--bk-icon-spinner); }
.bk-toast-loading::before { animation: bk-spin 800ms linear infinite; }
.bk-toast-body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.bk-toast-title { font-weight: var(--bk-weight-semibold); line-height: var(--bk-leading-snug); }
.bk-toast-text { color: var(--bk-text-muted); font-size: var(--bk-text-sm); }
.bk-toast-action { align-self: center; }
.bk-toast-progress {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 100%;
  background: var(--bk-c);
  transform-origin: left;
  animation: bk-toast-timer linear forwards;
  animation-duration: var(--bk-toast-duration, 4s);
}
@keyframes bk-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ------------------------------------------------------------- progress --- */
.bk-progress {
  --_h: 0.5rem;
  position: relative;
  inline-size: 100%;
  block-size: var(--_h);
  overflow: hidden;
  background: var(--bk-surface-3);
  border-radius: var(--bk-radius-full);
  border: var(--bk-progress-border, 0);
}
.bk-progress-bar {
  block-size: 100%;
  inline-size: var(--bk-value, 0%);
  background: var(--bk-progress-fill, var(--bk-primary));
  border-radius: inherit;
  transition: inline-size var(--bk-dur-slow) var(--bk-ease);
}
.bk-progress-xs { --_h: 0.25rem; }
.bk-progress-lg { --_h: 0.85rem; }
.bk-progress-xl { --_h: 1.25rem; }
.bk-progress-success { --bk-progress-fill: var(--bk-success); }
.bk-progress-warning { --bk-progress-fill: var(--bk-warning); }
.bk-progress-danger { --bk-progress-fill: var(--bk-danger); }
.bk-progress-gradient { --bk-progress-fill: linear-gradient(90deg, var(--bk-primary), var(--bk-secondary)); }
.bk-progress-striped .bk-progress-bar {
  background-image: linear-gradient(45deg,
    rgb(255 255 255 / 0.18) 25%, transparent 25%, transparent 50%,
    rgb(255 255 255 / 0.18) 50%, rgb(255 255 255 / 0.18) 75%, transparent 75%);
  background-size: 1rem 1rem;
}
.bk-progress-animated .bk-progress-bar { animation: bk-progress-stripes 900ms linear infinite; }
@keyframes bk-progress-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
.bk-progress-indeterminate .bk-progress-bar {
  inline-size: 100%;
  animation: bk-progress-indeterminate 1.4s var(--bk-ease) infinite;
}
.bk-progress-label {
  display: flex;
  justify-content: space-between;
  gap: var(--bk-space-2);
  font-size: var(--bk-text-sm);
  color: var(--bk-text-muted);
  margin-block-end: var(--bk-space-1);
  font-variant-numeric: tabular-nums;
}

/* top-of-page loading bar */
.bk-loadbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--bk-z-max);
  block-size: 3px;
  inline-size: 0;
  background: var(--bk-primary);
  box-shadow: 0 0 10px var(--bk-primary);
  transition: inline-size 220ms var(--bk-ease-out), opacity 240ms var(--bk-ease);
}

/* circular progress (conic) */
.bk-progress-ring {
  --_size: 4rem;
  --_thick: 8px;
  position: relative;
  inline-size: var(--_size);
  block-size: var(--_size);
  border-radius: var(--bk-radius-full);
  background: conic-gradient(var(--bk-progress-fill, var(--bk-primary)) calc(var(--bk-value, 0) * 1%), var(--bk-surface-3) 0);
  display: grid;
  place-items: center;
  transition: background var(--bk-dur-slow) var(--bk-ease);
}
.bk-progress-ring::before {
  content: "";
  position: absolute;
  inset: var(--_thick);
  border-radius: inherit;
  background: var(--bk-bg);
}
.bk-progress-ring-value {
  position: relative;
  font-size: calc(var(--_size) * 0.22);
  font-weight: var(--bk-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.bk-progress-ring-sm { --_size: 2.5rem; --_thick: 5px; }
.bk-progress-ring-lg { --_size: 7rem; --_thick: 12px; }

/* meter — semantic value in a range */
.bk-meter {
  inline-size: 100%;
  block-size: 0.6rem;
  border-radius: var(--bk-radius-full);
  background: var(--bk-surface-3);
  overflow: hidden;
  display: flex;
}
.bk-meter-bar {
  block-size: 100%;
  inline-size: var(--bk-value, 0%);
  background: var(--bk-success);
  transition: inline-size var(--bk-dur-slow) var(--bk-ease), background-color var(--bk-dur-base) var(--bk-ease);
}
.bk-meter-bar[data-level="medium"] { background: var(--bk-warning); }
.bk-meter-bar[data-level="low"] { background: var(--bk-danger); }
.bk-meter-segments { display: flex; gap: 3px; background: transparent; }
.bk-meter-segments > span {
  flex: 1 1 0;
  block-size: 100%;
  background: var(--bk-surface-3);
  border-radius: var(--bk-radius-full);
}
.bk-meter-segments > span.bk-is-on { background: var(--bk-success); }

/* -------------------------------------------------------------- spinner --- */
.bk-spinner {
  --_size: 1.5rem;
  --_thick: 2px;
  display: inline-block;
  inline-size: var(--_size);
  block-size: var(--_size);
  border: var(--_thick) solid color-mix(in oklab, currentColor 22%, transparent);
  border-block-start-color: currentColor;
  border-radius: var(--bk-radius-full);
  animation: bk-spin 720ms linear infinite;
  vertical-align: -0.15em;
}
.bk-spinner-xs { --_size: 0.85rem; --_thick: 1.5px; }
.bk-spinner-sm { --_size: 1.1rem; }
.bk-spinner-lg { --_size: 2.5rem; --_thick: 3px; }
.bk-spinner-xl { --_size: 4rem; --_thick: 4px; }

.bk-dots {
  display: inline-flex;
  gap: 0.3em;
  align-items: center;
}
.bk-dots > span {
  inline-size: 0.45em;
  block-size: 0.45em;
  border-radius: var(--bk-radius-full);
  background: currentColor;
  animation: bk-bounce-dot 1.1s var(--bk-ease) infinite;
}
.bk-dots > span:nth-child(2) { animation-delay: 0.15s; }
.bk-dots > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bk-bounce-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-0.4em); opacity: 1; }
}

.bk-bars { display: inline-flex; gap: 0.18em; align-items: flex-end; block-size: 1em; }
.bk-bars > span {
  inline-size: 0.18em;
  block-size: 100%;
  background: currentColor;
  border-radius: var(--bk-radius-xs);
  animation: bk-bar-scale 1s var(--bk-ease) infinite;
  transform-origin: bottom;
}
.bk-bars > span:nth-child(2) { animation-delay: 0.12s; }
.bk-bars > span:nth-child(3) { animation-delay: 0.24s; }
.bk-bars > span:nth-child(4) { animation-delay: 0.36s; }
@keyframes bk-bar-scale { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* ------------------------------------------------------------- skeleton --- */
.bk-skeleton {
  display: block;
  inline-size: 100%;
  block-size: 1em;
  border-radius: var(--bk-radius-md);
  background-color: var(--bk-surface-3);
  background-image: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--bk-text) 7%, transparent) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: bk-shimmer 1.5s linear infinite;
  user-select: none;
  pointer-events: none;
}
.bk-skeleton-text { block-size: 0.75em; margin-block: 0.2em; border-radius: var(--bk-radius-full); }
.bk-skeleton-text:last-child { inline-size: 65%; }
.bk-skeleton-title { block-size: 1.4em; inline-size: 45%; }
.bk-skeleton-circle { border-radius: var(--bk-radius-full); aspect-ratio: 1; inline-size: auto; block-size: 2.5rem; }
.bk-skeleton-box { block-size: 8rem; border-radius: var(--bk-card-radius); }
.bk-skeleton-btn { block-size: var(--bk-control-height-md); inline-size: 7rem; border-radius: var(--bk-btn-radius); }
.bk-skeleton-group { display: flex; flex-direction: column; gap: var(--bk-space-2); }
.bk-skeleton-pulse { animation: bk-pulse 1.6s var(--bk-ease) infinite; background-image: none; }

/* ------------------------------------------------- inline status pieces --- */
.bk-status {
  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-2);
  font-size: var(--bk-text-sm);
  color: var(--bk-text-muted);
}
.bk-status::before {
  content: "";
  inline-size: 0.55em;
  block-size: 0.55em;
  border-radius: var(--bk-radius-full);
  background: var(--bk-status-color, var(--bk-text-subtle));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--bk-status-color, var(--bk-text-subtle)) 20%, transparent);
}
.bk-status-ok { --bk-status-color: var(--bk-success-text); }
.bk-status-warn { --bk-status-color: var(--bk-warning-text); }
.bk-status-err { --bk-status-color: var(--bk-danger-text); }
.bk-status-live::before { animation: bk-pulse 1.6s var(--bk-ease) infinite; }


/* =============================================================================
   BUKALEMUN — components/table.css
   ========================================================================== */

.bk-table-wrap {
  inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-card-radius);
  background: var(--bk-surface);
}
.bk-table-wrap-plain { border: 0; border-radius: 0; background: transparent; }

.bk-table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--bk-text-md);
  color: var(--bk-text);
  text-align: start;
}
.bk-table th,
.bk-table td {
  padding: var(--bk-table-pad, var(--bk-space-3)) var(--bk-space-4);
  text-align: start;
  vertical-align: var(--bk-table-align, middle);
  border-block-end: var(--bk-border-width) solid var(--bk-border-muted);
}
.bk-table thead th {
  position: relative;
  font-size: var(--bk-text-xs);
  font-weight: var(--bk-weight-semibold);
  text-transform: var(--bk-label-transform, uppercase);
  letter-spacing: var(--bk-tracking-wide);
  color: var(--bk-text-muted);
  background: var(--bk-table-head-bg, var(--bk-surface-2));
  border-block-end: var(--bk-border-width) solid var(--bk-border);
  white-space: nowrap;
}
.bk-table tbody tr:last-child td { border-block-end: 0; }
.bk-table tfoot td {
  font-weight: var(--bk-weight-semibold);
  background: var(--bk-surface-2);
  border-block-end: 0;
  border-block-start: var(--bk-border-width) solid var(--bk-border);
}
.bk-table caption {
  padding: var(--bk-space-3) var(--bk-space-4);
  color: var(--bk-text-muted);
  font-size: var(--bk-text-sm);
  text-align: start;
  caption-side: top;
}

/* --- variants ------------------------------------------------------------ */
.bk-table-striped tbody tr:nth-child(odd) { background: var(--bk-surface-2); }
.bk-table-hover tbody tr { transition: background-color var(--bk-dur-fast) var(--bk-ease); }
.bk-table-hover tbody tr:hover { background: var(--bk-surface-3); }
.bk-table-bordered th,
.bk-table-bordered td { border: var(--bk-border-width) solid var(--bk-border-muted); }
.bk-table-borderless th,
.bk-table-borderless td { border: 0; }
.bk-table-compact { --bk-table-pad: var(--bk-space-1); }
.bk-table-compact th, .bk-table-compact td { padding-inline: var(--bk-space-2); }
.bk-table-roomy { --bk-table-pad: var(--bk-space-4); }
.bk-table-fixed { table-layout: fixed; }
.bk-table-numeric td, .bk-table-numeric th { font-variant-numeric: tabular-nums lining-nums; }
.bk-table-top { --bk-table-align: top; }

/* sticky header + first column */
.bk-table-sticky thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}
.bk-table-sticky-col th:first-child,
.bk-table-sticky-col td:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--bk-surface);
}
.bk-table-sticky-col thead th:first-child { z-index: 3; background: var(--bk-table-head-bg, var(--bk-surface-2)); }

/* cell helpers */
.bk-td-end { text-align: end; }
.bk-td-center { text-align: center; }
.bk-td-nowrap { white-space: nowrap; }
.bk-td-shrink { inline-size: 1%; white-space: nowrap; }
.bk-td-actions { inline-size: 1%; white-space: nowrap; text-align: end; }
.bk-td-actions > * + * { margin-inline-start: var(--bk-space-1); }
.bk-th-check, .bk-td-check { inline-size: 1%; padding-inline-end: 0; }

/* sortable headers */
.bk-th-sort {
  cursor: pointer;
  user-select: none;
  padding-inline-end: var(--bk-space-8);
}
.bk-th-sort:hover { color: var(--bk-text); }
.bk-th-sort::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--bk-space-3);
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 0.9em;
  block-size: 0.9em;
  background: currentColor;
  opacity: 0.35;
  -webkit-mask: var(--bk-icon-sort) center / contain no-repeat;
  mask: var(--bk-icon-sort) center / contain no-repeat;
}
.bk-th-sort[aria-sort="ascending"]::after {
  opacity: 1;
  -webkit-mask-image: var(--bk-icon-chevron-up);
  mask-image: var(--bk-icon-chevron-up);
}
.bk-th-sort[aria-sort="descending"]::after {
  opacity: 1;
  -webkit-mask-image: var(--bk-icon-chevron-down);
  mask-image: var(--bk-icon-chevron-down);
}

/* selected + state rows */
.bk-table tbody tr.bk-is-selected { background: var(--bk-primary-soft); }
.bk-table tbody tr.bk-is-disabled { opacity: 0.55; }
.bk-tr-danger { background: var(--bk-danger-soft); color: var(--bk-danger-on-soft); }
.bk-tr-success { background: var(--bk-success-soft); color: var(--bk-success-on-soft); }
.bk-tr-warning { background: var(--bk-warning-soft); color: var(--bk-warning-on-soft); }

/* toolbar above a table */
.bk-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bk-space-3);
  padding: var(--bk-space-3) var(--bk-space-4);
  border-block-end: var(--bk-border-width) solid var(--bk-border);
  background: var(--bk-surface);
}
.bk-table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bk-space-3);
  padding: var(--bk-space-3) var(--bk-space-4);
  border-block-start: var(--bk-border-width) solid var(--bk-border);
  font-size: var(--bk-text-sm);
  color: var(--bk-text-muted);
}

/* responsive card mode: <td data-label="..."> collapses into rows */
@media (max-width: 45rem) {
  .bk-table-cards thead { display: none; }
  .bk-table-cards, .bk-table-cards tbody, .bk-table-cards tr, .bk-table-cards td { display: block; inline-size: 100%; }
  .bk-table-cards tr {
    margin-block-end: var(--bk-space-3);
    border: var(--bk-border-width) solid var(--bk-border);
    border-radius: var(--bk-radius-lg);
    overflow: hidden;
    background: var(--bk-surface);
  }
  .bk-table-cards td {
    display: flex;
    justify-content: space-between;
    gap: var(--bk-space-4);
    text-align: end;
    border-block-end: var(--bk-border-width) solid var(--bk-border-muted);
  }
  .bk-table-cards td::before {
    content: attr(data-label);
    font-weight: var(--bk-weight-semibold);
    color: var(--bk-text-muted);
    text-align: start;
    font-size: var(--bk-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--bk-tracking-wide);
  }
  .bk-table-cards td:last-child { border-block-end: 0; }
}

/* ---------------------------------------------------------- list group --- */
.bk-list-group {
  display: flex;
  flex-direction: column;
  background: var(--bk-surface);
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-card-radius);
  overflow: hidden;
}
.bk-list-item {
  display: flex;
  align-items: center;
  gap: var(--bk-space-3);
  padding: var(--bk-space-3) var(--bk-space-4);
  color: inherit;
  text-decoration: none;
  border-block-end: var(--bk-border-width) solid var(--bk-border-muted);
  transition: var(--bk-transition);
  min-inline-size: 0;
}
.bk-list-item:last-child { border-block-end: 0; }
.bk-list-item-action { cursor: pointer; }
.bk-list-item-action:hover { background: var(--bk-surface-2); }
.bk-list-item-action:active { background: var(--bk-surface-3); }
.bk-list-item.bk-is-active { background: var(--bk-primary-soft); color: var(--bk-primary-on-soft); }
.bk-list-item.bk-is-disabled { opacity: 0.55; pointer-events: none; }
.bk-list-item-body { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-list-item-title { font-weight: var(--bk-weight-medium); line-height: var(--bk-leading-snug); }
.bk-list-item-text { font-size: var(--bk-text-sm); color: var(--bk-text-muted); }
.bk-list-item-meta { font-size: var(--bk-text-sm); color: var(--bk-text-subtle); flex: 0 0 auto; }
.bk-list-group-flush { border: 0; border-radius: 0; background: transparent; }
.bk-list-group-gap {
  border: 0;
  background: transparent;
  gap: var(--bk-space-2);
  overflow: visible;
}
.bk-list-group-gap > .bk-list-item {
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
  background: var(--bk-surface);
}
.bk-list-header {
  padding: var(--bk-space-2) var(--bk-space-4);
  font-size: var(--bk-text-xs);
  font-weight: var(--bk-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--bk-tracking-wide);
  color: var(--bk-text-subtle);
  background: var(--bk-surface-2);
  border-block-end: var(--bk-border-width) solid var(--bk-border);
}


/* =============================================================================
   BUKALEMUN — components/nav.css
   Navbar, sidebar, tabs, breadcrumb, pagination, steps, toolbar, dock.
   ========================================================================== */

/* --------------------------------------------------------------- navbar --- */
.bk-navbar {
  display: flex;
  align-items: center;
  gap: var(--bk-space-4);
  min-block-size: var(--bk-navbar-height, 3.75rem);
  padding-inline: var(--bk-space-5);
  color: var(--bk-text);
  background: var(--bk-navbar-bg, var(--bk-surface));
  background-image: var(--bk-surface-image);
  background-size: var(--bk-surface-image-size);
  border-block-end: var(--bk-border-width) solid var(--bk-border);
  position: relative;
  z-index: var(--bk-z-sticky);
}
.bk-navbar-sticky { position: sticky; inset-block-start: 0; }
.bk-navbar-glass {
  background: color-mix(in oklab, var(--bk-surface) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
}
.bk-navbar-floating {
  margin: var(--bk-space-4);
  border-radius: var(--bk-radius-2xl);
  border: var(--bk-border-width) solid var(--bk-border);
  box-shadow: var(--bk-shadow-lg);
}
.bk-navbar.bk-is-scrolled { box-shadow: var(--bk-shadow-md); }
.bk-navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-2);
  font-family: var(--bk-heading-font);
  font-size: var(--bk-text-lg);
  font-weight: var(--bk-weight-bold);
  letter-spacing: var(--bk-heading-tracking);
  text-transform: var(--bk-heading-transform);
  color: inherit;
  text-decoration: none;
  flex: 0 0 auto;
}
.bk-navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--bk-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}
.bk-navbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--bk-space-2); }
.bk-navbar-toggle { display: none; }
@media (max-width: 52rem) {
  .bk-navbar-toggle { display: inline-flex; }
  .bk-navbar-collapse {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--bk-space-1);
    padding: var(--bk-space-3);
    background: var(--bk-surface);
    border-block-end: var(--bk-border-width) solid var(--bk-border);
    box-shadow: var(--bk-shadow-lg);
  }
  .bk-navbar-collapse:not(.bk-is-open) { display: none; }
}

.bk-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-2);
  padding: var(--bk-space-2) var(--bk-space-3);
  font-size: var(--bk-text-md);
  font-weight: var(--bk-weight-medium);
  letter-spacing: var(--bk-label-tracking);
  text-transform: var(--bk-label-transform);
  color: var(--bk-text-muted);
  text-decoration: none;
  border-radius: var(--bk-radius-md);
  transition: var(--bk-transition);
  white-space: nowrap;
}
.bk-nav-link:hover { color: var(--bk-text); background: var(--bk-surface-2); }
.bk-nav-link[aria-current],
.bk-nav-link.bk-is-active { color: var(--bk-primary-on-soft); background: var(--bk-primary-soft); }
.bk-nav-link.bk-is-disabled { opacity: 0.5; pointer-events: none; }
.bk-nav-link-underline {
  border-radius: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
}
.bk-nav-link-underline:hover { background: transparent; border-color: var(--bk-border-strong); }
.bk-nav-link-underline[aria-current],
.bk-nav-link-underline.bk-is-active { background: transparent; border-color: var(--bk-primary); }

/* -------------------------------------------------------------- sidebar --- */
.bk-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-2);
  inline-size: var(--bk-sidebar-width, 16rem);
  flex: 0 0 auto;
  padding: var(--bk-space-4);
  background: var(--bk-sidebar-bg, var(--bk-surface));
  border-inline-end: var(--bk-border-width) solid var(--bk-border);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bk-sidebar-sticky { position: sticky; inset-block-start: 0; block-size: 100svh; }
.bk-sidebar-section { display: flex; flex-direction: column; gap: 2px; }
.bk-sidebar-title {
  padding: var(--bk-space-2) var(--bk-space-3) var(--bk-space-1);
  font-size: var(--bk-text-2xs);
  font-weight: var(--bk-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--bk-tracking-widest);
  color: var(--bk-text-subtle);
}
.bk-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--bk-space-3);
  padding: var(--bk-space-2) var(--bk-space-3);
  font-size: var(--bk-text-md);
  color: var(--bk-text-muted);
  text-decoration: none;
  border-radius: var(--bk-radius-md);
  transition: var(--bk-transition);
  min-inline-size: 0;
}
.bk-sidebar-link:hover { color: var(--bk-text); background: var(--bk-surface-2); }
.bk-sidebar-link[aria-current],
.bk-sidebar-link.bk-is-active {
  color: var(--bk-primary-on-soft); background: var(--bk-primary-soft);
  font-weight: var(--bk-weight-medium);
}
.bk-sidebar-link > .bk-icon { color: var(--bk-text-subtle); }
.bk-sidebar-link.bk-is-active > .bk-icon { color: inherit; }
.bk-sidebar-link-badge { margin-inline-start: auto; }
.bk-sidebar-collapsed { --bk-sidebar-width: 4.25rem; align-items: center; }
.bk-sidebar-collapsed .bk-sidebar-link { justify-content: center; padding-inline: 0; }
.bk-sidebar-collapsed .bk-sidebar-link > :not(.bk-icon),
.bk-sidebar-collapsed .bk-sidebar-title { display: none; }

/* ----------------------------------------------------------------- tabs --- */
.bk-tabs { display: flex; flex-direction: column; gap: var(--bk-space-4); }
.bk-tablist {
  display: flex;
  align-items: center;
  gap: var(--bk-space-1);
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  border-block-end: var(--bk-border-width) solid var(--bk-border);
}
.bk-tablist::-webkit-scrollbar { display: none; }
.bk-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-2);
  padding: var(--bk-space-2) var(--bk-space-4);
  font-size: var(--bk-text-md);
  font-weight: var(--bk-weight-medium);
  letter-spacing: var(--bk-label-tracking);
  text-transform: var(--bk-label-transform);
  color: var(--bk-text-muted);
  background: transparent;
  border: 0;
  border-block-end: 2px solid transparent;
  margin-block-end: calc(-1 * var(--bk-border-width));
  cursor: pointer;
  white-space: nowrap;
  transition: var(--bk-transition);
}
.bk-tab:hover { color: var(--bk-text); }
.bk-tab[aria-selected="true"] { color: var(--bk-primary-text); border-block-end-color: var(--bk-primary); }
.bk-tab:disabled { opacity: 0.5; cursor: not-allowed; }
.bk-tab:focus-visible { outline: var(--bk-ring-width) solid var(--bk-ring); outline-offset: -2px; border-radius: var(--bk-radius-sm); }
.bk-tabpanel:not(.bk-is-active) { display: none; }
.bk-tabpanel { animation: bk-fade-in var(--bk-dur-base) var(--bk-ease-out); }

.bk-tablist-pills { border-block-end: 0; gap: var(--bk-space-2); }
.bk-tablist-pills .bk-tab {
  border: 0;
  margin: 0;
  border-radius: var(--bk-radius-pill);
  padding-inline: var(--bk-space-4);
}
.bk-tablist-pills .bk-tab:hover { background: var(--bk-surface-2); }
.bk-tablist-pills .bk-tab[aria-selected="true"] { background: var(--bk-primary); color: var(--bk-on-primary); }

.bk-tablist-boxed {
  border-block-end: var(--bk-border-width) solid var(--bk-border);
  gap: 0;
}
.bk-tablist-boxed .bk-tab {
  border: var(--bk-border-width) solid transparent;
  border-block-end: 0;
  border-radius: var(--bk-radius-md) var(--bk-radius-md) 0 0;
  margin-block-end: calc(-1 * var(--bk-border-width));
}
.bk-tablist-boxed .bk-tab[aria-selected="true"] {
  background: var(--bk-surface);
  border-color: var(--bk-border);
  color: var(--bk-text);
  border-block-end: var(--bk-border-width) solid var(--bk-surface);
}
.bk-tablist-enclosed {
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
  padding: 3px;
  gap: 2px;
  background: var(--bk-surface-2);
}
.bk-tablist-enclosed .bk-tab {
  border: 0;
  margin: 0;
  border-radius: calc(var(--bk-radius-lg) - 3px);
}
.bk-tablist-enclosed .bk-tab[aria-selected="true"] {
  background: var(--bk-surface);
  color: var(--bk-text);
  box-shadow: var(--bk-shadow-sm);
}
.bk-tablist-vertical {
  flex-direction: column;
  align-items: stretch;
  border-block-end: 0;
  border-inline-end: var(--bk-border-width) solid var(--bk-border);
}
.bk-tablist-vertical .bk-tab {
  justify-content: flex-start;
  border-block-end: 0;
  border-inline-end: 2px solid transparent;
  margin: 0 calc(-1 * var(--bk-border-width)) 0 0;
}
.bk-tablist-vertical .bk-tab[aria-selected="true"] { border-inline-end-color: var(--bk-primary); }
.bk-tabs-horizontal { flex-direction: row; }

/* animated indicator (JS sets --bk-ind-x / --bk-ind-w) */
.bk-tablist-indicator::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: var(--bk-ind-w, 0);
  translate: var(--bk-ind-x, 0) 0;
  background: var(--bk-primary);
  transition: translate var(--bk-dur-base) var(--bk-ease-snap), inline-size var(--bk-dur-base) var(--bk-ease-snap);
  pointer-events: none;
}
.bk-tablist-indicator .bk-tab[aria-selected="true"] { border-block-end-color: transparent; }

/* ----------------------------------------------------------- breadcrumb --- */
.bk-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bk-space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--bk-text-md);
  color: var(--bk-text-muted);
  min-inline-size: 0;
}
.bk-breadcrumb > li { display: inline-flex; align-items: center; gap: var(--bk-space-2); min-inline-size: 0; }
.bk-breadcrumb > li + li::before {
  content: var(--bk-breadcrumb-sep, "/");
  color: var(--bk-text-subtle);
  opacity: 0.7;
  user-select: none;
}
.bk-breadcrumb a { color: inherit; text-decoration: none; border-radius: var(--bk-radius-sm); }
.bk-breadcrumb a:hover { color: var(--bk-text); text-decoration: underline; }
.bk-breadcrumb [aria-current="page"] { color: var(--bk-text); font-weight: var(--bk-weight-medium); }
.bk-breadcrumb-chevron { --bk-breadcrumb-sep: "›"; }
.bk-breadcrumb-arrow { --bk-breadcrumb-sep: "→"; }
.bk-breadcrumb-dot { --bk-breadcrumb-sep: "•"; }

/* ----------------------------------------------------------- pagination --- */
.bk-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bk-space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}
.bk-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--bk-control-height-md);
  block-size: var(--bk-control-height-md);
  padding-inline: var(--bk-space-2);
  font-size: var(--bk-text-md);
  font-variant-numeric: tabular-nums;
  color: var(--bk-text-muted);
  background: transparent;
  border: var(--bk-border-width) solid transparent;
  border-radius: var(--bk-radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: var(--bk-transition);
}
.bk-page:hover { background: var(--bk-surface-2); color: var(--bk-text); }
.bk-page[aria-current="page"],
.bk-page.bk-is-active {
  background: var(--bk-primary);
  color: var(--bk-on-primary);
  border-color: var(--bk-primary);
  font-weight: var(--bk-weight-semibold);
}
.bk-page.bk-is-disabled,
.bk-page:disabled { opacity: 0.4; pointer-events: none; }
.bk-page-ellipsis { pointer-events: none; color: var(--bk-text-subtle); }
.bk-pagination-outline .bk-page { border-color: var(--bk-border); }
.bk-pagination-info { font-size: var(--bk-text-sm); color: var(--bk-text-muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- steps --- */
.bk-steps {
  display: flex;
  gap: var(--bk-space-2);
  counter-reset: bk-step;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bk-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-1);
  padding-block-start: var(--bk-space-8);
  counter-increment: bk-step;
  color: var(--bk-text-subtle);
  min-inline-size: 0;
}
.bk-step::before {
  content: counter(bk-step);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  font-size: var(--bk-text-xs);
  font-weight: var(--bk-weight-semibold);
  color: var(--bk-text-muted);
  background: var(--bk-surface-3);
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-radius-full);
  z-index: 1;
}
.bk-step::after {
  content: "";
  position: absolute;
  inset-block-start: 0.875rem;
  inset-inline-start: 1.75rem;
  inline-size: calc(100% - 1.75rem);
  block-size: 2px;
  background: var(--bk-border);
}
.bk-step:last-child::after { content: none; }
.bk-step-title { font-weight: var(--bk-weight-medium); color: var(--bk-text-muted); font-size: var(--bk-text-md); }
.bk-step-text { font-size: var(--bk-text-sm); }
.bk-step.bk-is-active::before {
  background: var(--bk-primary);
  border-color: var(--bk-primary);
  color: var(--bk-on-primary);
  box-shadow: 0 0 0 4px var(--bk-primary-soft);
}
.bk-step.bk-is-active .bk-step-title { color: var(--bk-text); font-weight: var(--bk-weight-semibold); }
.bk-step.bk-is-done::before {
  content: "";
  background: var(--bk-success) var(--bk-icon-check) center / 60% no-repeat;
  border-color: var(--bk-success);
  -webkit-mask: none;
  mask: none;
  background-blend-mode: normal;
}
.bk-step.bk-is-done::after { background: var(--bk-success); }
.bk-step.bk-is-done .bk-step-title { color: var(--bk-text-muted); }
.bk-steps-vertical { flex-direction: column; gap: var(--bk-space-5); }
.bk-steps-vertical .bk-step {
  padding-block-start: 0;
  padding-inline-start: var(--bk-space-10);
  min-block-size: 2.5rem;
}
.bk-steps-vertical .bk-step::after {
  inset-block-start: 1.75rem;
  inset-inline-start: 0.875rem;
  inline-size: 2px;
  block-size: calc(100% + var(--bk-space-5) - 1.75rem);
}
@media (max-width: 45rem) {
  .bk-steps-responsive { flex-direction: column; gap: var(--bk-space-5); }
  .bk-steps-responsive .bk-step { padding-block-start: 0; padding-inline-start: var(--bk-space-10); }
  .bk-steps-responsive .bk-step::after {
    inset-block-start: 1.75rem;
    inset-inline-start: 0.875rem;
    inline-size: 2px;
    block-size: calc(100% + var(--bk-space-5) - 1.75rem);
  }
}

/* -------------------------------------------------------------- toolbar --- */
.bk-toolbar {
  display: flex;
  align-items: center;
  gap: var(--bk-space-2);
  flex-wrap: wrap;
  padding: var(--bk-space-2);
  background: var(--bk-surface);
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
}
.bk-toolbar-sep {
  inline-size: var(--bk-border-width);
  align-self: stretch;
  background: var(--bk-border);
  margin-inline: var(--bk-space-1);
}

/* ----------------------------------------------------------------- dock --- */
.bk-dock {
  position: fixed;
  inset-block-end: var(--bk-space-4);
  inset-inline: 0;
  margin-inline: auto;
  z-index: var(--bk-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--bk-space-1);
  inline-size: max-content;
  max-inline-size: calc(100vw - var(--bk-space-8));
  padding: var(--bk-space-2);
  background: color-mix(in oklab, var(--bk-surface) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-radius-full);
  box-shadow: var(--bk-shadow-xl);
  overflow-x: auto;
  scrollbar-width: none;
}
.bk-dock::-webkit-scrollbar { display: none; }
.bk-dock-item {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--bk-radius-full);
  color: var(--bk-text-muted);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform var(--bk-dur-base) var(--bk-ease-spring), background-color var(--bk-dur-fast) var(--bk-ease);
}
.bk-dock-item:hover { background: var(--bk-surface-3); color: var(--bk-text); transform: translateY(-4px) scale(1.08); }
.bk-dock-item.bk-is-active { background: var(--bk-primary-soft); color: var(--bk-primary-on-soft); }

/* --------------------------------------------------------- bottom nav ---- */
.bk-bottom-nav {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--bk-z-sticky);
  display: flex;
  background: var(--bk-surface);
  border-block-start: var(--bk-border-width) solid var(--bk-border);
  padding-block-end: env(safe-area-inset-bottom, 0);
}
.bk-bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-block: var(--bk-space-2);
  font-size: var(--bk-text-2xs);
  color: var(--bk-text-subtle);
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.bk-bottom-nav-item.bk-is-active { color: var(--bk-primary-text); }
.bk-bottom-nav-item > .bk-icon { --bk-icon-size: 1.35rem; }

/* --------------------------------------------------------- back to top --- */
.bk-to-top {
  position: fixed;
  inset-block-end: var(--bk-space-6);
  inset-inline-end: var(--bk-space-6);
  z-index: var(--bk-z-sticky);
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition: opacity var(--bk-dur-base) var(--bk-ease), translate var(--bk-dur-base) var(--bk-ease);
}
.bk-to-top.bk-is-visible { opacity: 1; translate: 0; pointer-events: auto; }

/* -------------------------------------------------------------- footer --- */
.bk-footer {
  padding-block: var(--bk-space-12);
  color: var(--bk-text-muted);
  background: var(--bk-footer-bg, var(--bk-surface-2));
  border-block-start: var(--bk-border-width) solid var(--bk-border);
  font-size: var(--bk-text-md);
}
.bk-footer-grid {
  display: grid;
  gap: var(--bk-space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
.bk-footer-title {
  font-size: var(--bk-text-sm);
  font-weight: var(--bk-weight-semibold);
  color: var(--bk-text);
  text-transform: var(--bk-label-transform, uppercase);
  letter-spacing: var(--bk-tracking-wide);
  margin-block-end: var(--bk-space-3);
}
.bk-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bk-space-2); }
.bk-footer-links a { color: inherit; text-decoration: none; }
.bk-footer-links a:hover { color: var(--bk-text); text-decoration: underline; }
.bk-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bk-space-4);
  margin-block-start: var(--bk-space-8);
  padding-block-start: var(--bk-space-6);
  border-block-start: var(--bk-border-width) solid var(--bk-border);
  font-size: var(--bk-text-sm);
}

/* ------------------------------------------------------------ scrollspy -- */
.bk-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--bk-text-sm);
  border-inline-start: 2px solid var(--bk-border);
}
.bk-toc a {
  padding: var(--bk-space-1) var(--bk-space-3);
  color: var(--bk-text-subtle);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  margin-inline-start: -2px;
  transition: var(--bk-transition);
}
.bk-toc a:hover { color: var(--bk-text); }
.bk-toc a.bk-is-active {
  color: var(--bk-primary-text);
  border-inline-start-color: var(--bk-primary);
  font-weight: var(--bk-weight-medium);
}
.bk-toc-2 { padding-inline-start: var(--bk-space-3); }


/* =============================================================================
   BUKALEMUN — components/overlay.css
   Modal, drawer, popover, dropdown menu, tooltip, command palette, context menu.
   Overlays use the native <dialog> element and the top layer where possible.
   ========================================================================== */

/* ---------------------------------------------------------------- modal --- */
.bk-modal {
  --_w: 32rem;
  inline-size: min(var(--_w), calc(100vw - var(--bk-space-8)));
  max-block-size: calc(100svh - var(--bk-space-8));
  margin: auto;
  padding: 0;
  color: var(--bk-text);
  background: var(--bk-overlay-surface);
  background-image: var(--bk-surface-image);
  background-size: var(--bk-surface-image-size);
  border: var(--bk-border-width) solid var(--bk-overlay-border);
  border-radius: var(--bk-overlay-radius);
  box-shadow: var(--bk-overlay-shadow);
  overflow: visible;
}
.bk-modal::backdrop {
  background: var(--bk-overlay-bg);
  backdrop-filter: var(--bk-backdrop-filter, blur(2px));
  -webkit-backdrop-filter: var(--bk-backdrop-filter, blur(2px));
}
.bk-modal[open] { animation: bk-modal-in var(--bk-dur-base) var(--bk-ease-out); }
.bk-modal[open]::backdrop { animation: bk-fade-in var(--bk-dur-base) var(--bk-ease-out); }
.bk-modal.bk-is-closing { animation: bk-modal-out var(--bk-dur-fast) var(--bk-ease-in) forwards; }
.bk-modal.bk-is-closing::backdrop { animation: bk-fade-out var(--bk-dur-fast) var(--bk-ease-in) forwards; }
@keyframes bk-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes bk-modal-out {
  to { opacity: 0; transform: translateY(6px) scale(0.985); }
}

.bk-modal-xs { --_w: 20rem; }
.bk-modal-sm { --_w: 26rem; }
.bk-modal-md { --_w: 32rem; }
.bk-modal-lg { --_w: 44rem; }
.bk-modal-xl { --_w: 60rem; }
.bk-modal-full {
  --_w: 100vw;
  inline-size: 100vw;
  block-size: 100svh;
  max-block-size: none;
  border-radius: 0;
  border: 0;
}
.bk-modal-inner {
  display: flex;
  flex-direction: column;
  max-block-size: inherit;
  min-block-size: 0;
  border-radius: inherit;
  overflow: hidden;
}
.bk-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bk-space-4);
  padding: var(--bk-space-5) var(--bk-space-5) var(--bk-space-3);
  flex: 0 0 auto;
}
.bk-modal-header-bordered { border-block-end: var(--bk-border-width) solid var(--bk-border); padding-block-end: var(--bk-space-4); }
.bk-modal-title {
  font-family: var(--bk-heading-font);
  font-size: var(--bk-text-xl);
  font-weight: var(--bk-weight-semibold);
  letter-spacing: var(--bk-heading-tracking);
  text-transform: var(--bk-heading-transform);
  line-height: var(--bk-leading-snug);
  margin: 0;
}
.bk-modal-desc { font-size: var(--bk-text-sm); color: var(--bk-text-muted); margin-block-start: var(--bk-space-1); }
.bk-modal-body {
  padding: var(--bk-space-2) var(--bk-space-5) var(--bk-space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-4);
}
.bk-modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bk-space-2);
  padding: var(--bk-space-4) var(--bk-space-5);
  border-block-start: var(--bk-border-width) solid var(--bk-border);
  background: var(--bk-modal-footer-bg, var(--bk-surface-2));
  flex: 0 0 auto;
}
.bk-modal-footer-between { justify-content: space-between; }
.bk-modal-icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--bk-radius-full);
  background: var(--bk-primary-soft); color: var(--bk-primary-on-soft);
  flex: 0 0 auto;
}
.bk-modal-icon-danger { background: var(--bk-danger-soft); color: var(--bk-danger-on-soft); }
.bk-modal-icon-success { background: var(--bk-success-soft); color: var(--bk-success-on-soft); }
.bk-modal-icon-warning { background: var(--bk-warning-soft); color: var(--bk-warning-on-soft); }

/* mobile bottom-sheet variant */
@media (max-width: 40rem) {
  .bk-modal-sheet-sm {
    inline-size: 100vw;
    max-inline-size: 100vw;
    margin: auto 0 0;
    border-radius: var(--bk-radius-2xl) var(--bk-radius-2xl) 0 0;
    border-block-end: 0;
  }
  .bk-modal-sheet-sm[open] { animation: bk-slide-in-bottom var(--bk-dur-slow) var(--bk-ease-out); }
}

/* --------------------------------------------------------------- drawer --- */
.bk-drawer {
  --_size: 22rem;
  position: fixed;
  padding: 0;
  margin: 0;
  color: var(--bk-text);
  background: var(--bk-overlay-surface);
  background-image: var(--bk-surface-image);
  background-size: var(--bk-surface-image-size);
  border: 0;
  box-shadow: var(--bk-overlay-shadow);
  max-block-size: 100svh;
  max-inline-size: 100vw;
  display: flex;
  flex-direction: column;
}
.bk-drawer::backdrop {
  background: var(--bk-overlay-bg);
  backdrop-filter: var(--bk-backdrop-filter, blur(2px));
  -webkit-backdrop-filter: var(--bk-backdrop-filter, blur(2px));
}
.bk-drawer[open]::backdrop { animation: bk-fade-in var(--bk-dur-base) var(--bk-ease-out); }
.bk-drawer.bk-is-closing::backdrop { animation: bk-fade-out var(--bk-dur-fast) var(--bk-ease-in) forwards; }

.bk-drawer-end,
.bk-drawer:not([data-side]) {
  inset-block: 0;
  inset-inline: auto 0;
  inline-size: min(var(--_size), 100vw);
  block-size: 100svh;
  border-inline-start: var(--bk-border-width) solid var(--bk-overlay-border);
}
.bk-drawer[data-side="end"][open] { animation: bk-slide-in-end var(--bk-dur-slow) var(--bk-ease-out); }
.bk-drawer[data-side="end"].bk-is-closing { animation: bk-slide-out-end var(--bk-dur-base) var(--bk-ease-in) forwards; }

.bk-drawer[data-side="start"] {
  inset-block: 0;
  inset-inline: 0 auto;
  inline-size: min(var(--_size), 100vw);
  block-size: 100svh;
  border-inline-end: var(--bk-border-width) solid var(--bk-overlay-border);
}
.bk-drawer[data-side="start"][open] { animation: bk-slide-in-start var(--bk-dur-slow) var(--bk-ease-out); }
.bk-drawer[data-side="start"].bk-is-closing { animation: bk-slide-out-start var(--bk-dur-base) var(--bk-ease-in) forwards; }

.bk-drawer[data-side="bottom"] {
  inset-inline: 0;
  inset-block: auto 0;
  inline-size: 100vw;
  block-size: auto;
  max-block-size: 92svh;
  border-block-start: var(--bk-border-width) solid var(--bk-overlay-border);
  border-radius: var(--bk-radius-2xl) var(--bk-radius-2xl) 0 0;
}
.bk-drawer[data-side="bottom"][open] { animation: bk-slide-in-bottom var(--bk-dur-slow) var(--bk-ease-out); }
.bk-drawer[data-side="bottom"].bk-is-closing { animation: bk-slide-out-bottom var(--bk-dur-base) var(--bk-ease-in) forwards; }

.bk-drawer[data-side="top"] {
  inset-inline: 0;
  inset-block: 0 auto;
  inline-size: 100vw;
  block-size: auto;
  max-block-size: 92svh;
  border-block-end: var(--bk-border-width) solid var(--bk-overlay-border);
  border-radius: 0 0 var(--bk-radius-2xl) var(--bk-radius-2xl);
}
.bk-drawer[data-side="top"][open] { animation: bk-slide-in-top var(--bk-dur-slow) var(--bk-ease-out); }
.bk-drawer[data-side="top"].bk-is-closing { animation: bk-slide-out-top var(--bk-dur-base) var(--bk-ease-in) forwards; }

.bk-drawer-sm { --_size: 17rem; }
.bk-drawer-lg { --_size: 30rem; }
.bk-drawer-xl { --_size: 42rem; }
.bk-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bk-space-3);
  padding: var(--bk-space-4) var(--bk-space-5);
  border-block-end: var(--bk-border-width) solid var(--bk-border);
  flex: 0 0 auto;
}
.bk-drawer-body {
  padding: var(--bk-space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-block-size: 0;
}
.bk-drawer-footer {
  padding: var(--bk-space-4) var(--bk-space-5);
  border-block-start: var(--bk-border-width) solid var(--bk-border);
  display: flex;
  gap: var(--bk-space-2);
  justify-content: flex-end;
  flex: 0 0 auto;
}
.bk-drawer-grip {
  inline-size: 2.5rem;
  block-size: 4px;
  border-radius: var(--bk-radius-full);
  background: var(--bk-border-strong);
  margin: var(--bk-space-2) auto 0;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------- popover --- */
.bk-popover {
  position: absolute;
  z-index: var(--bk-z-popover);
  inline-size: max-content;
  max-inline-size: min(var(--bk-popover-width, 20rem), calc(100vw - var(--bk-space-6)));
  padding: var(--bk-space-4);
  color: var(--bk-text);
  background: var(--bk-overlay-surface);
  border: var(--bk-border-width) solid var(--bk-overlay-border);
  border-radius: var(--bk-radius-lg);
  box-shadow: var(--bk-overlay-shadow);
  backdrop-filter: var(--bk-overlay-backdrop);
  font-size: var(--bk-text-md);
}
.bk-popover:not(.bk-is-open) { display: none; }
.bk-popover.bk-is-open { animation: bk-pop-in var(--bk-dur-fast) var(--bk-ease-out); }
@keyframes bk-pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.bk-popover-arrow {
  position: absolute;
  inline-size: 10px;
  block-size: 10px;
  rotate: 45deg;
  background: var(--bk-overlay-surface);
  border: var(--bk-border-width) solid var(--bk-overlay-border);
  z-index: -1;
}
.bk-popover-header {
  font-weight: var(--bk-weight-semibold);
  margin-block-end: var(--bk-space-2);
  padding-block-end: var(--bk-space-2);
  border-block-end: var(--bk-border-width) solid var(--bk-border-muted);
}
.bk-popover-title { font-weight: var(--bk-weight-semibold); }
.bk-popover-text { color: var(--bk-text-muted); font-size: var(--bk-text-sm); }

/* ---------------------------------------------------------------- menu --- */
.bk-menu {
  position: absolute;
  z-index: var(--bk-z-popover);
  min-inline-size: var(--bk-menu-width, 12rem);
  max-inline-size: min(20rem, calc(100vw - var(--bk-space-6)));
  max-block-size: min(24rem, 70svh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--bk-space-1);
  margin: 0;
  list-style: none;
  color: var(--bk-text);
  background: var(--bk-overlay-surface);
  border: var(--bk-border-width) solid var(--bk-overlay-border);
  border-radius: var(--bk-radius-lg);
  box-shadow: var(--bk-overlay-shadow);
  backdrop-filter: var(--bk-overlay-backdrop);
}
.bk-menu:not(.bk-is-open) { display: none; }
.bk-menu.bk-is-open { animation: bk-pop-in var(--bk-dur-fast) var(--bk-ease-out); }
.bk-menu-static { position: static; box-shadow: none; display: block; animation: none; }
.bk-menu-item {
  display: flex;
  align-items: center;
  gap: var(--bk-space-3);
  inline-size: 100%;
  padding: var(--bk-space-2) var(--bk-space-3);
  font-size: var(--bk-text-md);
  color: var(--bk-text);
  text-align: start;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--bk-radius-md);
  cursor: pointer;
  transition: background-color var(--bk-dur-instant) var(--bk-ease), color var(--bk-dur-instant) var(--bk-ease);
  white-space: nowrap;
}
.bk-menu-item:hover,
.bk-menu-item:focus-visible,
.bk-menu-item.bk-is-focused {
  background: var(--bk-surface-3);
  outline: none;
}
.bk-menu-item[aria-checked="true"],
.bk-menu-item.bk-is-active { background: var(--bk-primary-soft); color: var(--bk-primary-on-soft); }
.bk-menu-item.bk-is-disabled,
.bk-menu-item:disabled { opacity: 0.45; pointer-events: none; }
.bk-menu-item-danger { color: var(--bk-danger-text); }
.bk-menu-item-danger:hover { background: var(--bk-danger-soft); }
.bk-menu-item > .bk-icon { color: var(--bk-text-subtle); }
.bk-menu-item-shortcut {
  margin-inline-start: auto;
  font-size: var(--bk-text-xs);
  color: var(--bk-text-subtle);
  font-family: var(--bk-font-mono);
  padding-inline-start: var(--bk-space-4);
}
.bk-menu-label {
  padding: var(--bk-space-2) var(--bk-space-3) var(--bk-space-1);
  font-size: var(--bk-text-2xs);
  font-weight: var(--bk-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--bk-tracking-widest);
  color: var(--bk-text-subtle);
}
.bk-menu-sep {
  block-size: var(--bk-border-width);
  margin: var(--bk-space-1) calc(-1 * var(--bk-space-1));
  background: var(--bk-border);
  border: 0;
}
.bk-menu-check::before {
  content: "";
  inline-size: 1em;
  block-size: 1em;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0;
  -webkit-mask: var(--bk-icon-check) center / contain no-repeat;
  mask: var(--bk-icon-check) center / contain no-repeat;
}
.bk-menu-check[aria-checked="true"]::before { opacity: 1; }
.bk-menu-sub > .bk-menu-item::after {
  content: "";
  margin-inline-start: auto;
  inline-size: 0.9em;
  block-size: 0.9em;
  background: currentColor;
  opacity: 0.5;
  -webkit-mask: var(--bk-icon-chevron-right) center / contain no-repeat;
  mask: var(--bk-icon-chevron-right) center / contain no-repeat;
}

/* dropdown wrapper */
.bk-dropdown { position: relative; display: inline-flex; }

/* -------------------------------------------------------------- tooltip --- */
.bk-tooltip {
  position: absolute;
  z-index: var(--bk-z-tooltip);
  inline-size: max-content;
  max-inline-size: 18rem;
  padding: var(--bk-space-1) var(--bk-space-2);
  font-size: var(--bk-text-xs);
  font-weight: var(--bk-weight-medium);
  line-height: var(--bk-leading-snug);
  color: var(--bk-tooltip-fg);
  background: var(--bk-tooltip-bg);
  border-radius: var(--bk-tooltip-radius);
  box-shadow: var(--bk-shadow-md);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--bk-dur-fast) var(--bk-ease), transform var(--bk-dur-fast) var(--bk-ease-spring);
}
.bk-tooltip.bk-is-open { opacity: 1; transform: none; }
.bk-tooltip-arrow {
  position: absolute;
  inline-size: 8px;
  block-size: 8px;
  rotate: 45deg;
  background: var(--bk-tooltip-bg);
}
.bk-tooltip-lg { font-size: var(--bk-text-sm); padding: var(--bk-space-2) var(--bk-space-3); }

/* Pure-CSS tooltip fallback: data-bk-title on any element. */
[data-bk-title] { position: relative; }
[data-bk-title]::after {
  content: attr(data-bk-title);
  position: absolute;
  z-index: var(--bk-z-tooltip);
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 50%;
  translate: -50% 4px;
  inline-size: max-content;
  max-inline-size: 16rem;
  padding: var(--bk-space-1) var(--bk-space-2);
  font-size: var(--bk-text-xs);
  font-weight: var(--bk-weight-medium);
  color: var(--bk-tooltip-fg);
  background: var(--bk-tooltip-bg);
  border-radius: var(--bk-tooltip-radius);
  box-shadow: var(--bk-shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bk-dur-fast) var(--bk-ease), translate var(--bk-dur-fast) var(--bk-ease);
}
[data-bk-title]:hover::after,
[data-bk-title]:focus-visible::after { opacity: 1; translate: -50% 0; }
[data-bk-title][data-bk-placement="bottom"]::after {
  inset-block: calc(100% + 6px) auto;
  translate: -50% -4px;
}
[data-bk-title][data-bk-placement="bottom"]:hover::after { translate: -50% 0; }

/* ------------------------------------------------------ command palette --- */
.bk-cmdk {
  inline-size: min(38rem, calc(100vw - var(--bk-space-8)));
  max-block-size: min(30rem, 80svh);
  margin: 12svh auto auto;
  padding: 0;
  color: var(--bk-text);
  background: var(--bk-overlay-surface);
  border: var(--bk-border-width) solid var(--bk-overlay-border);
  border-radius: var(--bk-radius-2xl);
  box-shadow: var(--bk-shadow-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bk-cmdk::backdrop { background: var(--bk-scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.bk-cmdk[open] { animation: bk-cmdk-in var(--bk-dur-base) var(--bk-ease-out); }
@keyframes bk-cmdk-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.bk-cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--bk-space-3);
  padding: var(--bk-space-4);
  border-block-end: var(--bk-border-width) solid var(--bk-border);
  flex: 0 0 auto;
}
.bk-cmdk-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--bk-text-lg);
}
.bk-cmdk-list {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--bk-space-2);
  list-style: none;
  margin: 0;
}
.bk-cmdk-group + .bk-cmdk-group { margin-block-start: var(--bk-space-2); }
.bk-cmdk-group-label {
  padding: var(--bk-space-1) var(--bk-space-3);
  font-size: var(--bk-text-2xs);
  font-weight: var(--bk-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--bk-tracking-widest);
  color: var(--bk-text-subtle);
}
.bk-cmdk-item {
  display: flex;
  align-items: center;
  gap: var(--bk-space-3);
  inline-size: 100%;
  padding: var(--bk-space-2) var(--bk-space-3);
  border-radius: var(--bk-radius-md);
  font-size: var(--bk-text-md);
  color: inherit;
  background: transparent;
  border: 0;
  text-align: start;
  cursor: pointer;
}
.bk-cmdk-item[aria-selected="true"] { background: var(--bk-primary-soft); color: var(--bk-primary-on-soft); }
.bk-cmdk-item-hint { margin-inline-start: auto; font-size: var(--bk-text-xs); color: var(--bk-text-subtle); }
.bk-cmdk-footer {
  display: flex;
  align-items: center;
  gap: var(--bk-space-4);
  padding: var(--bk-space-2) var(--bk-space-4);
  border-block-start: var(--bk-border-width) solid var(--bk-border);
  background: var(--bk-surface-2);
  font-size: var(--bk-text-xs);
  color: var(--bk-text-subtle);
  flex: 0 0 auto;
}
.bk-cmdk-empty { padding: var(--bk-space-8); text-align: center; color: var(--bk-text-subtle); }

/* --------------------------------------------------------- lightbox ------ */
.bk-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--bk-z-modal);
  display: grid;
  place-items: center;
  padding: var(--bk-space-6);
  background: var(--bk-scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: bk-fade-in var(--bk-dur-base) var(--bk-ease-out);
}
.bk-lightbox img {
  max-inline-size: 100%;
  max-block-size: 88svh;
  border-radius: var(--bk-radius-lg);
  box-shadow: var(--bk-shadow-2xl);
  animation: bk-zoom-in var(--bk-dur-base) var(--bk-ease-out);
}
.bk-lightbox-close { position: absolute; inset-block-start: var(--bk-space-4); inset-inline-end: var(--bk-space-4); color: #fff; }

/* Body lock while an overlay owns the screen. */
.bk-scroll-locked { overflow: hidden !important; touch-action: none; }


/* =============================================================================
   BUKALEMUN — components/disclosure.css
   Accordion / collapse (native <details> based), timeline, tree, chat, code.
   ========================================================================== */

/* ------------------------------------------------------------ accordion --- */
.bk-accordion {
  display: flex;
  flex-direction: column;
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-card-radius);
  overflow: hidden;
  background: var(--bk-surface);
}
.bk-accordion-item { border-block-end: var(--bk-border-width) solid var(--bk-border); }
.bk-accordion-item:last-child { border-block-end: 0; }
.bk-accordion-trigger {
  display: flex;
  align-items: center;
  gap: var(--bk-space-3);
  inline-size: 100%;
  padding: var(--bk-space-4);
  font-size: var(--bk-text-md);
  font-weight: var(--bk-weight-medium);
  color: var(--bk-text);
  text-align: start;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: var(--bk-transition);
  list-style: none;
}
.bk-accordion-trigger::-webkit-details-marker { display: none; }
.bk-accordion-trigger::marker { content: ""; }
.bk-accordion-trigger:hover { background: var(--bk-surface-2); }
.bk-accordion-trigger:focus-visible { outline: var(--bk-ring-width) solid var(--bk-ring); outline-offset: -2px; }
.bk-accordion-trigger::after {
  content: "";
  margin-inline-start: auto;
  inline-size: 1.1em;
  block-size: 1.1em;
  flex: 0 0 auto;
  background: var(--bk-text-subtle);
  -webkit-mask: var(--bk-icon-chevron-down) center / contain no-repeat;
  mask: var(--bk-icon-chevron-down) center / contain no-repeat;
  transition: rotate var(--bk-dur-base) var(--bk-ease);
}
.bk-accordion-item[open] > .bk-accordion-trigger::after { rotate: 180deg; }
.bk-accordion-item[open] > .bk-accordion-trigger { color: var(--bk-primary-text); }
.bk-accordion-panel {
  padding: 0 var(--bk-space-4) var(--bk-space-4);
  color: var(--bk-text-muted);
  font-size: var(--bk-text-md);
  line-height: var(--bk-leading-relaxed);
}
.bk-accordion-item[open] > .bk-accordion-panel {
  animation: bk-accordion-open var(--bk-dur-base) var(--bk-ease-out);
}
@keyframes bk-accordion-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
/* Smooth height when the browser supports interpolate-size. */
@supports (interpolate-size: allow-keywords) {
  .bk-accordion-smooth .bk-accordion-item {
    interpolate-size: allow-keywords;
  }
  .bk-accordion-smooth .bk-accordion-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--bk-dur-base) var(--bk-ease), content-visibility var(--bk-dur-base) allow-discrete;
  }
  .bk-accordion-smooth .bk-accordion-item[open]::details-content { block-size: auto; }
}
.bk-accordion-flush { border: 0; border-radius: 0; background: transparent; }
.bk-accordion-gap {
  border: 0;
  background: transparent;
  gap: var(--bk-space-2);
  overflow: visible;
}
.bk-accordion-gap > .bk-accordion-item {
  border: var(--bk-border-width) solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
  background: var(--bk-surface);
  overflow: hidden;
}

/* JS-driven collapse for non-<details> markup */
.bk-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--bk-dur-base) var(--bk-ease);
}
.bk-collapse > * { overflow: hidden; min-block-size: 0; }
.bk-collapse.bk-is-open { grid-template-rows: 1fr; }

/* ------------------------------------------------------------- timeline --- */
.bk-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
.bk-timeline-item {
  position: relative;
  padding-inline-start: var(--bk-space-10);
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-1);
}
.bk-timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-start: 0.4rem;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: var(--bk-radius-full);
  background: var(--bk-surface);
  border: 2px solid var(--bk-border-strong);
  z-index: 1;
}
.bk-timeline-item::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(0.5rem + 0.375rem - 1px);
  inset-block-start: 1.15rem;
  inline-size: 2px;
  block-size: calc(100% + var(--bk-space-6) - 1.15rem);
  background: var(--bk-border);
}
.bk-timeline-item:last-child::after { content: none; }
.bk-timeline-item.bk-is-active::before { border-color: var(--bk-primary); background: var(--bk-primary); box-shadow: 0 0 0 4px var(--bk-primary-soft); }
.bk-timeline-item.bk-is-done::before { border-color: var(--bk-success); background: var(--bk-success); }
.bk-timeline-time { font-size: var(--bk-text-xs); color: var(--bk-text-subtle); font-variant-numeric: tabular-nums; }
.bk-timeline-title { font-weight: var(--bk-weight-semibold); line-height: var(--bk-leading-snug); }
.bk-timeline-text { font-size: var(--bk-text-md); color: var(--bk-text-muted); }
.bk-timeline-icon {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--bk-radius-full);
  background: var(--bk-surface-3);
  color: var(--bk-text-muted);
  z-index: 1;
}
.bk-timeline-icons .bk-timeline-item { padding-inline-start: var(--bk-space-12); }
.bk-timeline-icons .bk-timeline-item::before { content: none; }
.bk-timeline-icons .bk-timeline-item::after { inset-inline-start: calc(0.875rem - 1px); inset-block-start: 1.9rem; block-size: calc(100% + var(--bk-space-6) - 1.9rem); }

/* ----------------------------------------------------------------- tree --- */
.bk-tree { list-style: none; padding: 0; margin: 0; font-size: var(--bk-text-md); }
.bk-tree ul { list-style: none; padding-inline-start: var(--bk-space-4); margin: 0; border-inline-start: var(--bk-border-width) solid var(--bk-border); }
.bk-tree-item > summary,
.bk-tree-leaf {
  display: flex;
  align-items: center;
  gap: var(--bk-space-2);
  padding: var(--bk-space-1) var(--bk-space-2);
  border-radius: var(--bk-radius-md);
  cursor: pointer;
  list-style: none;
  color: var(--bk-text-muted);
}
.bk-tree-item > summary::-webkit-details-marker { display: none; }
.bk-tree-item > summary::before {
  content: "";
  inline-size: 0.85em;
  block-size: 0.85em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--bk-icon-chevron-right) center / contain no-repeat;
  mask: var(--bk-icon-chevron-right) center / contain no-repeat;
  transition: rotate var(--bk-dur-fast) var(--bk-ease);
}
.bk-tree-item[open] > summary::before { rotate: 90deg; }
.bk-tree-leaf { padding-inline-start: calc(var(--bk-space-2) + 0.85em + var(--bk-space-2)); }
.bk-tree-item > summary:hover,
.bk-tree-leaf:hover { background: var(--bk-surface-2); color: var(--bk-text); }
.bk-tree-leaf.bk-is-active { background: var(--bk-primary-soft); color: var(--bk-primary-on-soft); }

/* ----------------------------------------------------------- code block --- */
.bk-code {
  position: relative;
  margin: 0;
  padding: var(--bk-space-4);
  overflow-x: auto;
  font-family: var(--bk-font-mono);
  font-size: var(--bk-text-md);
  line-height: var(--bk-leading-relaxed);
  color: var(--bk-code-fg);
  background: var(--bk-code-bg);
  border: var(--bk-border-width) solid var(--bk-code-border);
  border-radius: var(--bk-radius-lg);
  tab-size: 2;
}
.bk-code code { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
.bk-code-frame {
  border: var(--bk-border-width) solid var(--bk-code-border);
  border-radius: var(--bk-radius-lg);
  overflow: hidden;
  background: var(--bk-code-bg);
}
.bk-code-frame > .bk-code { border: 0; border-radius: 0; }
.bk-code-head {
  display: flex;
  align-items: center;
  gap: var(--bk-space-2);
  padding: var(--bk-space-2) var(--bk-space-3);
  background: color-mix(in oklab, var(--bk-code-bg) 70%, var(--bk-text) 6%);
  border-block-end: var(--bk-border-width) solid var(--bk-code-border);
  font-size: var(--bk-text-xs);
  color: var(--bk-text-muted);
  font-family: var(--bk-font-mono);
}
.bk-code-dots { display: flex; gap: 6px; margin-inline-end: var(--bk-space-2); }
.bk-code-dots > span { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--bk-border-strong); }
.bk-code-dots > span:nth-child(1) { background: #ff5f57; }
.bk-code-dots > span:nth-child(2) { background: #febc2e; }
.bk-code-dots > span:nth-child(3) { background: #28c840; }
.bk-code-copy { margin-inline-start: auto; }
.bk-code-lines { counter-reset: bk-line; }
.bk-code-lines .bk-line { display: block; counter-increment: bk-line; }
.bk-code-lines .bk-line::before {
  content: counter(bk-line);
  display: inline-block;
  inline-size: 2.5em;
  margin-inline-end: var(--bk-space-3);
  text-align: end;
  color: var(--bk-text-subtle);
  opacity: 0.6;
  user-select: none;
}
.bk-code .bk-line-hl {
  display: block;
  background: color-mix(in oklab, var(--bk-primary) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--bk-primary);
  margin-inline: calc(-1 * var(--bk-space-4));
  padding-inline: var(--bk-space-4);
}
.bk-code-wrap-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
/* minimal token palette for hand-tagged code */
.bk-tok-key { color: var(--bk-primary-text); }
.bk-tok-str { color: var(--bk-success-text); }
.bk-tok-num { color: var(--bk-warning-text); }
.bk-tok-com { color: var(--bk-text-subtle); font-style: italic; }
.bk-tok-fn { color: var(--bk-info-text); }
.bk-tok-punc { color: var(--bk-text-muted); }

/* --------------------------------------------------------------- chat ---- */
.bk-chat { display: flex; flex-direction: column; gap: var(--bk-space-3); }
.bk-bubble {
  display: flex;
  gap: var(--bk-space-2);
  align-items: flex-end;
  max-inline-size: 80%;
  align-self: flex-start;
}
.bk-bubble-body {
  padding: var(--bk-space-2) var(--bk-space-3);
  background: var(--bk-surface-3);
  color: var(--bk-text);
  border-radius: var(--bk-radius-xl);
  border-end-start-radius: var(--bk-radius-xs);
  font-size: var(--bk-text-md);
  line-height: var(--bk-leading-snug);
  overflow-wrap: anywhere;
}
.bk-bubble-mine { align-self: flex-end; flex-direction: row-reverse; }
.bk-bubble-mine .bk-bubble-body {
  background: var(--bk-primary);
  color: var(--bk-on-primary);
  border-radius: var(--bk-radius-xl);
  border-end-end-radius: var(--bk-radius-xs);
}
.bk-bubble-meta { font-size: var(--bk-text-2xs); color: var(--bk-text-subtle); margin-block-start: 2px; }
.bk-typing { display: inline-flex; gap: 3px; padding: var(--bk-space-2) var(--bk-space-3); }
.bk-typing > span {
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--bk-text-subtle);
  animation: bk-bounce-dot 1.2s var(--bk-ease) infinite;
}
.bk-typing > span:nth-child(2) { animation-delay: 0.15s; }
.bk-typing > span:nth-child(3) { animation-delay: 0.3s; }

/* ------------------------------------------------------------ carousel ---- */
.bk-carousel { position: relative; }
.bk-carousel-track {
  display: flex;
  gap: var(--bk-gap, var(--bk-space-4));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.bk-carousel-track::-webkit-scrollbar { display: none; }
.bk-carousel-slide {
  flex: 0 0 var(--bk-slide, 100%);
  scroll-snap-align: center;
  min-inline-size: 0;
}
.bk-carousel-prev,
.bk-carousel-next {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 2;
}
.bk-carousel-prev { inset-inline-start: var(--bk-space-2); }
.bk-carousel-next { inset-inline-end: var(--bk-space-2); }
.bk-carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--bk-space-2);
  margin-block-start: var(--bk-space-3);
}
.bk-carousel-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--bk-radius-full);
  background: var(--bk-border-strong);
  cursor: pointer;
  transition: var(--bk-transition);
}
.bk-carousel-dot.bk-is-active { background: var(--bk-primary); inline-size: 1.5rem; }

/* ------------------------------------------------------------- marquee ---- */
.bk-marquee {
  display: flex;
  overflow: hidden;
  gap: var(--bk-marquee-gap, var(--bk-space-8));
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  user-select: none;
}
.bk-marquee-track {
  display: flex;
  gap: var(--bk-marquee-gap, var(--bk-space-8));
  flex: 0 0 auto;
  min-inline-size: 100%;
  animation: bk-marquee var(--bk-marquee-speed, 26s) linear infinite;
  padding-inline-end: var(--bk-marquee-gap, var(--bk-space-8));
}
.bk-marquee:hover .bk-marquee-track { animation-play-state: paused; }
.bk-marquee-reverse .bk-marquee-track { animation-direction: reverse; }

/* ------------------------------------------------------------ calendar ---- */
.bk-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  font-size: var(--bk-text-sm);
  font-variant-numeric: tabular-nums;
}
.bk-calendar-head {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  text-align: center;
  font-size: var(--bk-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--bk-tracking-wide);
  color: var(--bk-text-subtle);
  padding-block-end: var(--bk-space-1);
}
.bk-calendar-day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--bk-radius-md);
  border: 0;
  background: transparent;
  color: var(--bk-text);
  cursor: pointer;
  transition: var(--bk-transition);
}
.bk-calendar-day:hover { background: var(--bk-surface-3); }
.bk-calendar-day.bk-is-muted { color: var(--bk-text-subtle); opacity: 0.5; }
.bk-calendar-day.bk-is-today { box-shadow: inset 0 0 0 1px var(--bk-primary); font-weight: var(--bk-weight-semibold); }
.bk-calendar-day.bk-is-selected { background: var(--bk-primary); color: var(--bk-on-primary); }
.bk-calendar-day:disabled { opacity: 0.35; cursor: not-allowed; }
.bk-calendar-nav {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bk-space-2);
  padding-block-end: var(--bk-space-2);
}
.bk-calendar-month { font-weight: var(--bk-weight-semibold); font-size: var(--bk-text-md); }


/* =============================================================================
   BUKALEMUN — components/kbd.css
   Keyboard key caps, shortcut hints and key combinations.
   ========================================================================== */

.bk-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-1);
  min-inline-size: 1.75em;
  padding: 0.15em 0.5em;
  font-family: var(--bk-font-mono);
  font-size: 0.8em;
  font-weight: var(--bk-weight-medium);
  line-height: var(--bk-leading-none);
  color: var(--bk-code-fg);
  background: var(--bk-code-bg);
  border: var(--bk-border-width) var(--bk-border-style) var(--bk-code-border);
  border-bottom-width: calc(var(--bk-border-width) + 1px);
  border-radius: var(--bk-radius-sm);
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
}

.bk-kbd-sm { font-size: 0.7em; }
.bk-kbd-lg { font-size: 1em; padding: 0.25em 0.65em; }

.bk-kbd-quiet {
  background: transparent;
  border-color: var(--bk-border-muted);
  color: var(--bk-text-muted);
}

/* a row of key caps joined by separators: Ctrl + Shift + P */
.bk-kbd-combo {
  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-1);
  white-space: nowrap;
}

.bk-kbd-combo-sep {
  color: var(--bk-text-subtle);
  font-size: 0.8em;
  font-weight: var(--bk-weight-normal);
}


/* =============================================================================
   BUKALEMUN — components/pricing.css
   Pricing tables: plan cards with price, feature list and highlighted tier.
   Plans are built on the card tokens, so every skin dresses them for free.
   ========================================================================== */

.bk-pricing {
  display: grid;
  gap: var(--bk-space-5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: stretch;
}

.bk-pricing-plan {
  --bk-c: var(--bk-primary);
  --bk-c-soft: var(--bk-primary-soft);
  --bk-c-border: var(--bk-primary-border);
  --bk-c-text: var(--bk-primary-text);

  display: flex;
  flex-direction: column;
  gap: var(--bk-space-4);
  background: var(--bk-card-bg);
  border: var(--bk-card-border-width) var(--bk-border-style) var(--bk-card-border);
  border-radius: var(--bk-card-radius);
  box-shadow: var(--bk-card-shadow);
  padding: var(--bk-card-pad);
}

.bk-pricing-plan-featured {
  background: var(--bk-c-soft);
  border-color: var(--bk-c-border);
  box-shadow: var(--bk-card-shadow-hover);
}

.bk-pricing-name {
  margin: 0;
  font-family: var(--bk-heading-font);
  font-size: var(--bk-text-sm);
  font-weight: var(--bk-heading-weight);
  letter-spacing: var(--bk-label-tracking);
  text-transform: var(--bk-label-transform);
  color: var(--bk-c-text);
}

.bk-pricing-price {
  display: flex;
  align-items: baseline;
  gap: var(--bk-space-2);
}

.bk-pricing-amount {
  font-family: var(--bk-heading-font);
  font-size: var(--bk-text-4xl);
  font-weight: var(--bk-weight-bold);
  line-height: var(--bk-leading-none);
  letter-spacing: var(--bk-heading-tracking);
  color: var(--bk-text);
  font-variant-numeric: var(--bk-font-variant-numeric);
}

.bk-pricing-period { color: var(--bk-text-muted); font-size: var(--bk-text-sm); }

.bk-pricing-desc { margin: 0; color: var(--bk-text-muted); font-size: var(--bk-text-sm); }

.bk-pricing-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bk-space-2);
  font-size: var(--bk-text-sm);
}

.bk-pricing-feat {
  display: flex;
  align-items: flex-start;
  gap: var(--bk-space-2);
}

/* check mark drawn with borders only — no glyphs, no colours */
.bk-pricing-feat::before {
  content: "";
  flex: none;
  inline-size: 0.55em;
  block-size: 0.55em;
  margin-top: 0.3em;
  border-right: 2px solid var(--bk-c);
  border-bottom: 2px solid var(--bk-c);
  rotate: 45deg;
}

.bk-pricing-feat-off { color: var(--bk-text-subtle); }
.bk-pricing-feat-off::before {
  border: 0;
  inline-size: 0.8em;
  block-size: 2px;
  margin-top: 0.55em;
  background: var(--bk-text-subtle);
  rotate: none;
}

.bk-pricing-actions { margin-top: auto; display: grid; gap: var(--bk-space-2); }

.bk-pricing-note { margin: 0; font-size: var(--bk-text-xs); color: var(--bk-text-subtle); }


/* =============================================================================
   BUKALEMUN — components/testimonial.css
   Testimonials: a quote, an author row and optional rating.
   Quiet variant drops the card chrome for editorial layouts.
   ========================================================================== */

.bk-testimonial {
  --bk-c: var(--bk-primary);
  --bk-c-soft: var(--bk-primary-soft);
  --bk-c-border: var(--bk-primary-border);

  display: grid;
  gap: var(--bk-space-4);
  background: var(--bk-card-bg);
  border: var(--bk-card-border-width) var(--bk-border-style) var(--bk-card-border);
  border-radius: var(--bk-card-radius);
  box-shadow: var(--bk-card-shadow);
  padding: var(--bk-card-pad);
}

.bk-testimonial-quiet {
  background: transparent;
  border: 0;
  box-shadow: var(--bk-shadow-none);
  padding: 0;
}

.bk-testimonial-quote {
  margin: 0;
  font-size: var(--bk-text-lg);
  line-height: var(--bk-leading-relaxed);
  color: var(--bk-text);
}

/* opening quote mark as a CSS escape — never a literal glyph */
.bk-testimonial-quote::before {
  content: "\201C";
  color: var(--bk-c);
  font-family: var(--bk-font-serif);
  font-size: 1.8em;
  line-height: 0;
  vertical-align: -0.3em;
  margin-inline-end: 0.15em;
  opacity: 0.45;
}

.bk-testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--bk-space-3);
}

.bk-testimonial-meta { display: grid; gap: var(--bk-space-0); }
.bk-testimonial-name { font-size: var(--bk-text-sm); font-weight: var(--bk-weight-semibold); }
.bk-testimonial-role { font-size: var(--bk-text-xs); color: var(--bk-text-muted); }

.bk-testimonial-lg .bk-testimonial-quote { font-size: var(--bk-text-xl); }


/* =============================================================================
   BUKALEMUN — components/hero.css
   Hero sections: centered by default, start-aligned variant for split layouts.
   Sits directly on the page background so skins can paint the stage.
   ========================================================================== */

.bk-hero {
  /* position/isolation come from the older definition this file replaced. It
     used to live in card.css and set justify-content: center, which quietly
     beat .bk-hero-start — a start-aligned hero stayed centred because the
     grid track itself was still centred. One definition now. */
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: var(--bk-space-5);
  text-align: center;
  padding-block: var(--bk-space-10) var(--bk-space-12);
  padding-inline: var(--bk-space-5);
}

.bk-hero-start {
  justify-items: start;
  text-align: start;
}

.bk-hero-title {
  margin: 0;
  max-inline-size: 46rem;
  font-family: var(--bk-heading-font);
  font-weight: var(--bk-heading-weight);
  letter-spacing: var(--bk-heading-tracking);
  text-transform: var(--bk-heading-transform);
  font-size: clamp(var(--bk-text-2xl), 5.5vw, var(--bk-text-4xl));
  line-height: var(--bk-leading-tight);
  color: var(--bk-text);
}

.bk-hero-title-accent { color: var(--bk-primary); }

.bk-hero-sub {
  margin: 0;
  max-inline-size: 42rem;
  font-size: var(--bk-text-lg);
  line-height: var(--bk-leading-relaxed);
  color: var(--bk-text-muted);
}

.bk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-3);
}

.bk-hero-start .bk-hero-actions { justify-content: start; }

.bk-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-2) var(--bk-space-4);
  font-size: var(--bk-text-sm);
  color: var(--bk-text-subtle);
}

.bk-hero-start .bk-hero-meta { justify-content: start; }

/* optional framed variant: a surface panel behind the whole hero */
.bk-hero-panel {
  background: var(--bk-surface-2);
  border: var(--bk-border-width) var(--bk-border-style) var(--bk-border-muted);
  border-radius: var(--bk-radius-xl);
}

/* An explicit centre, for a hero inside a container that is not centred. */
.bk-hero-center { justify-items: center; text-align: center; }

/* Full-bleed art behind the hero, and a wash to keep the text off it. */
.bk-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bk-hero-bg, none);
}
.bk-hero-bg > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.bk-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bk-hero-overlay, linear-gradient(180deg, transparent, var(--bk-bg)));
}


/* =============================================================================
   SKIN — aero · Frutiger Aero
   Glossy aqua bubbles, sky gradients, humanist type and lens-flare optimism.
   Mid-2000s consumer software, rendered honestly.
   ========================================================================== */

[data-bk-style="aero"] {
  --bk-font-sans: "Frutiger", "Segoe UI", "Myriad Pro", "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 600;
  --bk-heading-tracking: -0.01em;

  --bk-bg: #dff1fb;
  --bk-bg-subtle: #cfe9f8;
  --bk-bg-muted: #b9def4;
  --bk-surface: rgb(255 255 255 / 0.82);
  --bk-surface-2: rgb(235 248 255 / 0.85);
  --bk-surface-3: rgb(206 236 252 / 0.9);
  --bk-surface-inverted: #0b3b56;

  --bk-text: #10384f;
  --bk-text-muted: #3d6b85;
  --bk-text-subtle: #6b95ac;
  --bk-text-inverted: #ffffff;

  --bk-border: rgb(255 255 255 / 0.75);
  --bk-border-muted: rgb(255 255 255 / 0.5);
  --bk-border-strong: #7cbde0;

  --bk-primary: #1e9be0;
  --bk-primary-hover: #178ccd;
  --bk-primary-active: #127ab5;
  --bk-primary-soft: #dbf0fc;
  --bk-primary-border: #8fd0f0;
  --bk-on-primary: #ffffff;
  --bk-secondary: #57c22d;
  --bk-secondary-hover: #4bad25;
  --bk-secondary-soft: #e2f6da;
  --bk-secondary-border: #a4dd8e;
  --bk-on-secondary: #ffffff;
  --bk-success: #4caf28;
  --bk-success-soft: #e1f5da;
  --bk-success-border: #a3dc8d;
  --bk-warning: #f0a30a;
  --bk-warning-soft: #fdefd3;
  --bk-warning-border: #f6cd7e;
  --bk-danger: #e0433a;
  --bk-danger-soft: #fce0de;
  --bk-danger-border: #f0a49f;
  --bk-info: #1e9be0;
  --bk-info-soft: #dbf0fc;
  --bk-info-border: #8fd0f0;
  --bk-neutral: #3d6b85;
  --bk-neutral-soft: rgb(255 255 255 / 0.7);
  --bk-neutral-border: #a9d3e8;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 2;
  --bk-radius-field: var(--bk-radius-lg);
  --bk-radius-card: var(--bk-radius-xl);
  --bk-radius-overlay: var(--bk-radius-xl);
  --bk-radius-pill: 9999px;

  --bk-shadow-color: 200 60% 30%;
  --bk-shadow-strength: 1.2;
  --bk-inner-highlight: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -8px 12px -8px rgb(30 155 224 / 0.25);

  --bk-body-image:
    radial-gradient(70rem 40rem at 50% -20%, rgb(255 255 255 / 0.9), transparent 60%),
    linear-gradient(180deg, #bfe6fa 0%, #e6f6ff 42%, #d6f0e2 100%);
  --bk-body-attachment: fixed;
  --bk-surface-image: linear-gradient(180deg, rgb(255 255 255 / 0.85) 0%, rgb(255 255 255 / 0.28) 48%, rgb(190 225 245 / 0.2) 52%, rgb(255 255 255 / 0.42) 100%);

  --bk-btn-image: linear-gradient(180deg, rgb(255 255 255 / 0.75) 0%, rgb(255 255 255 / 0.15) 48%, rgb(0 60 100 / 0.08) 52%, rgb(255 255 255 / 0.3) 100%);
  --bk-btn-radius: 9999px;
  --bk-btn-weight: 600;
  --bk-btn-border-width: 1px;
  --bk-btn-shadow: var(--bk-inner-highlight), 0 2px 5px rgb(20 90 130 / 0.25);
  --bk-btn-shadow-hover: var(--bk-inner-highlight), 0 4px 12px rgb(20 90 130 / 0.32);
  --bk-btn-shadow-active: inset 0 2px 5px rgb(10 60 90 / 0.3);
  --bk-press-transform: translateY(1px);
  --bk-hover-transform: translateY(-1px);

  --bk-field-bg: rgb(255 255 255 / 0.9);
  --bk-field-border: #a9d3e8;
  --bk-field-border-hover: #1e9be0;
  --bk-field-shadow: inset 0 2px 4px rgb(20 90 130 / 0.14);
  --bk-field-shadow-focus: inset 0 2px 4px rgb(20 90 130 / 0.14), 0 0 8px rgb(30 155 224 / 0.5);
  --bk-field-placeholder: #8ab0c4;

  --bk-card-bg: rgb(255 255 255 / 0.72);
  --bk-card-image: var(--bk-surface-image);
  --bk-card-border: rgb(255 255 255 / 0.9);
  --bk-card-shadow: var(--bk-inner-highlight), 0 6px 20px rgb(20 90 130 / 0.16);
  --bk-card-shadow-hover: var(--bk-inner-highlight), 0 12px 32px rgb(20 90 130 / 0.24);
  --bk-overlay-surface: rgb(255 255 255 / 0.88);
  --bk-overlay-backdrop: blur(16px) saturate(1.6);
  --bk-overlay-border: rgb(255 255 255 / 0.95);
  --bk-overlay-shadow: var(--bk-inner-highlight), 0 24px 60px rgb(10 60 90 / 0.3);
  --bk-overlay-bg: rgb(20 80 120 / 0.32);
  --bk-code-bg: rgb(255 255 255 / 0.8);
  --bk-code-border: #b6dcef;
  --bk-tooltip-bg: #0b3b56;
  --bk-selection-bg: rgb(30 155 224 / 0.3);
  --bk-scrollbar-thumb: #9fcde5;
  --bk-divider-color: rgb(255 255 255 / 0.85);
  --bk-ring: #1e9be0;
}

[data-bk-style="aero"][data-bk-theme="dark"] {
  --bk-bg: #04202f;
  --bk-bg-subtle: #052a3d;
  --bk-surface: rgb(255 255 255 / 0.1);
  --bk-surface-2: rgb(255 255 255 / 0.06);
  --bk-surface-3: rgb(255 255 255 / 0.16);
  --bk-text: #e2f4ff;
  --bk-text-muted: #9fc7dc;
  --bk-text-subtle: #6f9cb4;
  --bk-border: rgb(255 255 255 / 0.2);
  --bk-border-strong: rgb(255 255 255 / 0.35);
  --bk-primary: #4fc3f7;
  --bk-primary-soft: rgb(79 195 247 / 0.16);
  --bk-primary-border: rgb(79 195 247 / 0.4);
  --bk-on-primary: #04202f;
  --bk-body-image:
    radial-gradient(70rem 40rem at 50% -20%, rgb(79 195 247 / 0.28), transparent 60%),
    linear-gradient(180deg, #04202f 0%, #06304a 55%, #043b3a 100%);
  --bk-inner-highlight: inset 0 1px 0 rgb(255 255 255 / 0.25);
  --bk-field-bg: rgb(255 255 255 / 0.1);
  --bk-field-border: rgb(255 255 255 / 0.24);
  --bk-card-bg: rgb(255 255 255 / 0.09);
  --bk-overlay-surface: rgb(10 40 60 / 0.9);
  --bk-code-bg: rgb(0 0 0 / 0.3);
  --bk-code-border: rgb(255 255 255 / 0.18);
  --bk-tooltip-bg: #e2f4ff;
  --bk-tooltip-fg: #04202f;
}

[data-bk-style="aero"] .bk-card,
[data-bk-style="aero"] .bk-panel,
[data-bk-style="aero"] .bk-navbar,
[data-bk-style="aero"] .bk-alert,
[data-bk-style="aero"] .bk-toolbar {
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}
[data-bk-style="aero"] .bk-btn:not(.bk-btn-link) { position: relative; overflow: hidden; }
[data-bk-style="aero"] .bk-btn:not(.bk-btn-link)::before {
  content: "";
  position: absolute;
  inset: 1px 1px 50% 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.05));
  pointer-events: none;
}
[data-bk-style="aero"] .bk-btn-icon::before,
[data-bk-style="aero"] .bk-btn.bk-is-loading::before { inset: 1px 1px 55% 1px; }
[data-bk-style="aero"] .bk-avatar { box-shadow: var(--bk-inner-highlight), 0 2px 6px rgb(20 90 130 / 0.25); }
[data-bk-style="aero"] .bk-progress { box-shadow: inset 0 2px 4px rgb(20 90 130 / 0.2); }
[data-bk-style="aero"] .bk-progress-bar {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 55%);
}
[data-bk-style="aero"] .bk-switch { box-shadow: inset 0 2px 4px rgb(20 90 130 / 0.25); }
[data-bk-style="aero"] .bk-switch::before {
  background-image: linear-gradient(180deg, #fff, #d5eaf6);
  box-shadow: 0 1px 3px rgb(20 90 130 / 0.4);
}
[data-bk-style="aero"] .bk-badge { box-shadow: var(--bk-inner-highlight); }
[data-bk-style="aero"] .bk-navbar { border-block-end: 1px solid rgb(255 255 255 / 0.6); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="aero"] {
  --bk-danger: #e0433a;
  --bk-danger-on-soft: #bf271e;
  --bk-danger-soft: #fce0de;
  --bk-danger-text: #c8291f;
  --bk-field-placeholder: #6597b1;
  --bk-info: #1e9be0;
  --bk-info-on-soft: #156c9d;
  --bk-info-soft: #dbf0fc;
  --bk-info-text: #166fa1;
  --bk-neutral-on-soft: #3d6b85;
  --bk-neutral-text: #3d6b85;
  --bk-on-danger: #0a0a0a;
  --bk-on-info: #292929;
  --bk-on-primary: #292929;
  --bk-on-secondary: #3d3d3d;
  --bk-on-success: #2e2e2e;
  --bk-on-warning: #424242;
  --bk-primary: #1e9be0;
  --bk-primary-on-soft: #156c9d;
  --bk-primary-soft: #dbf0fc;
  --bk-primary-text: #166fa1;
  --bk-secondary: #57c22d;
  --bk-secondary-on-soft: #36771c;
  --bk-secondary-soft: #e2f6da;
  --bk-secondary-text: #36771c;
  --bk-success: #4caf28;
  --bk-success-on-soft: #35791c;
  --bk-success-soft: #e1f5da;
  --bk-success-text: #33751b;
  --bk-text-subtle: #59869f;
  --bk-warning: #f0a30a;
  --bk-warning-on-soft: #8e6006;
  --bk-warning-soft: #fdefd3;
  --bk-warning-text: #8e6006;
}
[data-bk-style="aero"][data-bk-theme="dark"] {
  --bk-danger: #e0433a;
  --bk-danger-on-soft: #bf271e;
  --bk-danger-soft: #fce0de;
  --bk-danger-text: #ea827c;
  --bk-field-placeholder: #8ab0c4;
  --bk-info: #1e9be0;
  --bk-info-on-soft: #156c9d;
  --bk-info-soft: #dbf0fc;
  --bk-info-text: #38a7e4;
  --bk-neutral-on-soft: #2b4c5f;
  --bk-neutral-text: #77a6c1;
  --bk-on-danger: #22070a;
  --bk-on-info: #03121f;
  --bk-on-primary: #04202f;
  --bk-on-secondary: #3d3d3d;
  --bk-on-success: #04180d;
  --bk-on-warning: #1f1503;
  --bk-primary: #4fc3f7;
  --bk-primary-on-soft: #4fc3f7;
  --bk-primary-soft: rgb(79 195 247 / 0.16);
  --bk-primary-text: #4fc3f7;
  --bk-secondary: #57c22d;
  --bk-secondary-on-soft: #36771c;
  --bk-secondary-soft: #e2f6da;
  --bk-secondary-text: #57c22d;
  --bk-success: #4caf28;
  --bk-success-on-soft: #35791c;
  --bk-success-soft: #e1f5da;
  --bk-success-text: #4eb329;
  --bk-text-subtle: #6f9cb4;
  --bk-warning: #f0a30a;
  --bk-warning-on-soft: #8e6006;
  --bk-warning-soft: #fdefd3;
  --bk-warning-text: #f0a30a;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "aero" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="aero"][data-bk-theme="auto"] {
  --bk-bg: #04202f;
  --bk-bg-subtle: #052a3d;
  --bk-surface: rgb(255 255 255 / 0.1);
  --bk-surface-2: rgb(255 255 255 / 0.06);
  --bk-surface-3: rgb(255 255 255 / 0.16);
  --bk-text: #e2f4ff;
  --bk-text-muted: #9fc7dc;
  --bk-text-subtle: #6f9cb4;
  --bk-border: rgb(255 255 255 / 0.2);
  --bk-border-strong: rgb(255 255 255 / 0.35);
  --bk-primary: #4fc3f7;
  --bk-primary-soft: rgb(79 195 247 / 0.16);
  --bk-primary-border: rgb(79 195 247 / 0.4);
  --bk-on-primary: #04202f;
  --bk-body-image:
    radial-gradient(70rem 40rem at 50% -20%, rgb(79 195 247 / 0.28), transparent 60%),
    linear-gradient(180deg, #04202f 0%, #06304a 55%, #043b3a 100%);
  --bk-inner-highlight: inset 0 1px 0 rgb(255 255 255 / 0.25);
  --bk-field-bg: rgb(255 255 255 / 0.1);
  --bk-field-border: rgb(255 255 255 / 0.24);
  --bk-card-bg: rgb(255 255 255 / 0.09);
  --bk-overlay-surface: rgb(10 40 60 / 0.9);
  --bk-code-bg: rgb(0 0 0 / 0.3);
  --bk-code-border: rgb(255 255 255 / 0.18);
  --bk-tooltip-bg: #e2f4ff;
  --bk-tooltip-fg: #04202f;


  --bk-danger: #e0433a;
  --bk-danger-on-soft: #bf271e;
  --bk-danger-soft: #fce0de;
  --bk-danger-text: #ea827c;
  --bk-field-placeholder: #8ab0c4;
  --bk-info: #1e9be0;
  --bk-info-on-soft: #156c9d;
  --bk-info-soft: #dbf0fc;
  --bk-info-text: #38a7e4;
  --bk-neutral-on-soft: #2b4c5f;
  --bk-neutral-text: #77a6c1;
  --bk-on-danger: #22070a;
  --bk-on-info: #03121f;
  --bk-on-primary: #04202f;
  --bk-on-secondary: #3d3d3d;
  --bk-on-success: #04180d;
  --bk-on-warning: #1f1503;
  --bk-primary: #4fc3f7;
  --bk-primary-on-soft: #4fc3f7;
  --bk-primary-soft: rgb(79 195 247 / 0.16);
  --bk-primary-text: #4fc3f7;
  --bk-secondary: #57c22d;
  --bk-secondary-on-soft: #36771c;
  --bk-secondary-soft: #e2f6da;
  --bk-secondary-text: #57c22d;
  --bk-success: #4caf28;
  --bk-success-on-soft: #35791c;
  --bk-success-soft: #e1f5da;
  --bk-success-text: #4eb329;
  --bk-text-subtle: #6f9cb4;
  --bk-warning: #f0a30a;
  --bk-warning-on-soft: #8e6006;
  --bk-warning-soft: #fdefd3;
  --bk-warning-text: #f0a30a;
}
}


/* =============================================================================
   SKIN — aurora · Gradient mesh
   Saturated aurora gradients, soft glows, gradient borders and text. Dark by
   default because that is where gradients sing.
   ========================================================================== */

[data-bk-style="aurora"] {
  --bk-font-sans: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bk-heading-weight: 700;
  --bk-heading-tracking: -0.03em;

  --bk-bg: #07060f;
  --bk-bg-subtle: #0c0a18;
  --bk-bg-muted: #121026;
  --bk-surface: #100e1f;
  --bk-surface-2: #171430;
  --bk-surface-3: #201b40;
  --bk-surface-inverted: #f4f2ff;

  --bk-text: #f0eeff;
  --bk-text-muted: #a9a2d0;
  --bk-text-subtle: #7a72a8;
  --bk-text-inverted: #07060f;

  --bk-border: #2a2450;
  --bk-border-muted: #1d1938;
  --bk-border-strong: #453a80;

  --bk-primary: #a855f7;
  --bk-primary-hover: #b76ff9;
  --bk-primary-active: #c689fa;
  --bk-primary-soft: #241243;
  --bk-primary-border: #5b2a91;
  --bk-on-primary: #14041f;
  --bk-secondary: #22d3ee;
  --bk-secondary-hover: #45dcf2;
  --bk-secondary-soft: #0a2c34;
  --bk-secondary-border: #16697d;
  --bk-on-secondary: #02171c;
  --bk-success: #34d399;
  --bk-success-soft: #06291f;
  --bk-success-border: #0f6349;
  --bk-on-success: #012019;
  --bk-warning: #fbbf24;
  --bk-warning-soft: #2c2109;
  --bk-warning-border: #6b5115;
  --bk-on-warning: #1c1400;
  --bk-danger: #fb7185;
  --bk-danger-soft: #2e0e18;
  --bk-danger-border: #722136;
  --bk-on-danger: #1c040b;
  --bk-info: #60a5fa;
  --bk-info-soft: #0e1d38;
  --bk-info-border: #234a7d;
  --bk-on-info: #030f22;
  --bk-neutral: #cfc9f0;
  --bk-neutral-soft: #1a1735;
  --bk-neutral-border: #2a2450;
  --bk-on-neutral: #07060f;

  --bk-radius-scale: 1.8;
  --bk-radius-field: var(--bk-radius-xl);
  --bk-radius-card: var(--bk-radius-2xl);
  --bk-radius-overlay: var(--bk-radius-2xl);

  --bk-shadow-color: 265 60% 4%;
  --bk-shadow-strength: 2.6;
  --bk-glow: 0 0 40px rgb(168 85 247 / 0.35);

  --bk-body-image:
    radial-gradient(48rem 34rem at 12% -6%, rgb(168 85 247 / 0.35), transparent 60%),
    radial-gradient(40rem 30rem at 92% 8%, rgb(34 211 238 / 0.24), transparent 62%),
    radial-gradient(46rem 36rem at 50% 108%, rgb(236 72 153 / 0.22), transparent 60%);
  --bk-body-attachment: fixed;
  --bk-surface-image: linear-gradient(160deg, rgb(168 85 247 / 0.09), rgb(34 211 238 / 0.05));

  --bk-btn-gradient: linear-gradient(120deg, #a855f7, #6366f1 45%, #22d3ee);
  --bk-btn-shadow: 0 4px 16px rgb(168 85 247 / 0.24);
  --bk-btn-shadow-hover: 0 8px 28px rgb(168 85 247 / 0.4);
  --bk-btn-shadow-active: 0 2px 8px rgb(168 85 247 / 0.3);
  --bk-btn-weight: 600;
  --bk-hover-transform: translateY(-2px);
  --bk-press-transform: translateY(0) scale(0.99);

  --bk-field-bg: rgb(255 255 255 / 0.04);
  --bk-field-bg-hover: rgb(255 255 255 / 0.07);
  --bk-field-border: #302a5c;
  --bk-field-border-hover: #a855f7;
  --bk-field-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --bk-field-shadow-focus: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0 0 3px rgb(168 85 247 / 0.25);
  --bk-field-placeholder: #6b6396;

  --bk-card-bg: rgb(255 255 255 / 0.03);
  --bk-card-image: linear-gradient(160deg, rgb(255 255 255 / 0.05), transparent 55%);
  --bk-card-shadow: 0 8px 32px rgb(3 2 10 / 0.6);
  --bk-card-shadow-hover: 0 16px 48px rgb(3 2 10 / 0.7), 0 0 24px rgb(168 85 247 / 0.2);
  --bk-overlay-surface: #120f24;
  --bk-overlay-border: #2f2860;
  --bk-overlay-shadow: 0 32px 80px rgb(0 0 0 / 0.7), 0 0 60px rgb(168 85 247 / 0.15);
  --bk-overlay-bg: rgb(6 4 16 / 0.7);
  --bk-code-bg: rgb(255 255 255 / 0.04);
  --bk-code-border: #2a2450;
  --bk-tooltip-bg: #241f45;
  --bk-tooltip-fg: #f0eeff;
  --bk-selection-bg: rgb(168 85 247 / 0.4);
  --bk-scrollbar-thumb: #453a80;
  --bk-text-gradient: linear-gradient(100deg, #c084fc, #22d3ee 60%, #f0abfc);
  color-scheme: dark;
}

[data-bk-style="aurora"][data-bk-theme="light"] {
  --bk-bg: #fbf9ff;
  --bk-bg-subtle: #f5f1ff;
  --bk-surface: #ffffff;
  --bk-surface-2: #f7f3ff;
  --bk-surface-3: #efe8ff;
  --bk-text: #1c1440;
  --bk-text-muted: #57508a;
  --bk-text-subtle: #8b84b8;
  --bk-text-inverted: #ffffff;
  --bk-border: #e4dcfb;
  --bk-border-muted: #efe9ff;
  --bk-border-strong: #c8bbf3;
  --bk-primary: #8b2ff5;
  --bk-primary-soft: #f2e8ff;
  --bk-primary-border: #d3b6fa;
  --bk-on-primary: #ffffff;
  --bk-field-bg: #ffffff;
  --bk-field-border: #dfd4fa;
  --bk-card-bg: #ffffff;
  --bk-card-shadow: 0 6px 24px rgb(120 80 200 / 0.1);
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #e4dcfb;
  --bk-code-bg: #f7f3ff;
  --bk-code-border: #e4dcfb;
  --bk-tooltip-bg: #1c1440;
  --bk-tooltip-fg: #ffffff;
  --bk-body-image:
    radial-gradient(48rem 34rem at 12% -6%, rgb(196 132 252 / 0.32), transparent 60%),
    radial-gradient(40rem 30rem at 92% 8%, rgb(103 232 249 / 0.28), transparent 62%),
    radial-gradient(46rem 36rem at 50% 108%, rgb(249 168 212 / 0.28), transparent 60%);
  color-scheme: light;
}

[data-bk-style="aurora"] .bk-btn-primary:not(.bk-btn-outline):not(.bk-btn-ghost):not(.bk-btn-soft):not(.bk-btn-link) {
  background-image: var(--bk-btn-gradient);
  background-size: 200% 200%;
  border-color: transparent;
  color: #fff;
  transition: var(--bk-transition), background-position 500ms var(--bk-ease);
}
[data-bk-style="aurora"] .bk-btn-primary:not(.bk-btn-outline):not(.bk-btn-ghost):not(.bk-btn-soft):hover {
  background-position: 100% 50%;
}
[data-bk-style="aurora"] .bk-card,
[data-bk-style="aurora"] .bk-panel,
[data-bk-style="aurora"] .bk-stat {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-bk-style="aurora"] .bk-display,
[data-bk-style="aurora"] .bk-title {
  background-image: var(--bk-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
[data-bk-style="aurora"] .bk-navbar { background: rgb(16 14 31 / 0.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
[data-bk-style="aurora"][data-bk-theme="light"] .bk-navbar { background: rgb(255 255 255 / 0.7); }
[data-bk-style="aurora"] .bk-progress-bar { background-image: linear-gradient(90deg, #a855f7, #22d3ee); }
[data-bk-style="aurora"] .bk-tab[aria-selected="true"] { text-shadow: 0 0 20px rgb(168 85 247 / 0.6); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="aurora"] {
  --bk-danger-on-soft: #fb7185;
  --bk-danger-text: #fb7185;
  --bk-info-on-soft: #60a5fa;
  --bk-info-text: #60a5fa;
  --bk-neutral-on-soft: #cfc9f0;
  --bk-neutral-text: #cfc9f0;
  --bk-primary-on-soft: #af64f8;
  --bk-primary-text: #a855f7;
  --bk-secondary-on-soft: #22d3ee;
  --bk-secondary-text: #22d3ee;
  --bk-success-on-soft: #34d399;
  --bk-success-text: #34d399;
  --bk-text-subtle: #7a72a8;
  --bk-warning-on-soft: #fbbf24;
  --bk-warning-text: #fbbf24;
}
[data-bk-style="aurora"][data-bk-theme="light"] {
  --bk-danger-on-soft: #fb7185;
  --bk-danger-text: #e10626;
  --bk-info-on-soft: #60a5fa;
  --bk-info-text: #0769e3;
  --bk-neutral-on-soft: #cfc9f0;
  --bk-neutral-text: #6f5dd2;
  --bk-primary-on-soft: #8b2ff5;
  --bk-primary-text: #8b2ff5;
  --bk-secondary-on-soft: #22d3ee;
  --bk-secondary-text: #0b7a8b;
  --bk-success-on-soft: #34d399;
  --bk-success-text: #1b7c59;
  --bk-text-subtle: #857eb4;
  --bk-warning-on-soft: #fbbf24;
  --bk-warning-text: #8e6703;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "aurora" — generated by scripts/build.mjs */
@media (prefers-color-scheme: light) {
  [data-bk-style="aurora"][data-bk-theme="auto"] {
  --bk-bg: #fbf9ff;
  --bk-bg-subtle: #f5f1ff;
  --bk-surface: #ffffff;
  --bk-surface-2: #f7f3ff;
  --bk-surface-3: #efe8ff;
  --bk-text: #1c1440;
  --bk-text-muted: #57508a;
  --bk-text-subtle: #8b84b8;
  --bk-text-inverted: #ffffff;
  --bk-border: #e4dcfb;
  --bk-border-muted: #efe9ff;
  --bk-border-strong: #c8bbf3;
  --bk-primary: #8b2ff5;
  --bk-primary-soft: #f2e8ff;
  --bk-primary-border: #d3b6fa;
  --bk-on-primary: #ffffff;
  --bk-field-bg: #ffffff;
  --bk-field-border: #dfd4fa;
  --bk-card-bg: #ffffff;
  --bk-card-shadow: 0 6px 24px rgb(120 80 200 / 0.1);
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #e4dcfb;
  --bk-code-bg: #f7f3ff;
  --bk-code-border: #e4dcfb;
  --bk-tooltip-bg: #1c1440;
  --bk-tooltip-fg: #ffffff;
  --bk-body-image:
    radial-gradient(48rem 34rem at 12% -6%, rgb(196 132 252 / 0.32), transparent 60%),
    radial-gradient(40rem 30rem at 92% 8%, rgb(103 232 249 / 0.28), transparent 62%),
    radial-gradient(46rem 36rem at 50% 108%, rgb(249 168 212 / 0.28), transparent 60%);
  color-scheme: light;


  --bk-danger-on-soft: #fb7185;
  --bk-danger-text: #e10626;
  --bk-info-on-soft: #60a5fa;
  --bk-info-text: #0769e3;
  --bk-neutral-on-soft: #cfc9f0;
  --bk-neutral-text: #6f5dd2;
  --bk-primary-on-soft: #8b2ff5;
  --bk-primary-text: #8b2ff5;
  --bk-secondary-on-soft: #22d3ee;
  --bk-secondary-text: #0b7a8b;
  --bk-success-on-soft: #34d399;
  --bk-success-text: #1b7c59;
  --bk-text-subtle: #857eb4;
  --bk-warning-on-soft: #fbbf24;
  --bk-warning-text: #8e6703;
}
}


/* =============================================================================
   SKIN — bauhaus · Primary geometry
   Red, yellow, blue and black on off-white. Circles, squares and triangles.
   Form follows function, and function is a rectangle.
   ========================================================================== */

[data-bk-style="bauhaus"] {
  --bk-font-sans: "Futura", "Century Gothic", "Jost", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 700;
  --bk-heading-transform: lowercase;
  --bk-heading-tracking: -0.01em;
  --bk-label-transform: lowercase;
  --bk-label-tracking: 0.02em;

  --bk-bg: #f2efe6;
  --bk-bg-subtle: #eae6da;
  --bk-bg-muted: #e0dbcc;
  --bk-surface: #faf8f2;
  --bk-surface-2: #eae6da;
  --bk-surface-3: #ddd8c8;
  --bk-surface-inverted: #151515;

  --bk-text: #151515;
  --bk-text-muted: #454545;
  --bk-text-subtle: #767676;
  --bk-text-inverted: #faf8f2;

  --bk-border: #151515;
  --bk-border-muted: #cdc7b6;
  --bk-border-strong: #151515;
  --bk-border-width: 2px;

  --bk-primary: #d62828;
  --bk-primary-hover: #c02020;
  --bk-primary-active: #a51b1b;
  --bk-primary-soft: #f7dede;
  --bk-primary-border: #151515;
  --bk-on-primary: #faf8f2;
  --bk-secondary: #1d4ed8;
  --bk-secondary-hover: #1943bd;
  --bk-secondary-active: #16389e;
  --bk-secondary-soft: #dde5fa;
  --bk-secondary-border: #151515;
  --bk-on-secondary: #faf8f2;
  --bk-success: #2f7a3e;
  --bk-success-soft: #dfeee2;
  --bk-success-border: #151515;
  --bk-warning: #f6c101;
  --bk-warning-hover: #e0b001;
  --bk-warning-soft: #fdf2cd;
  --bk-warning-border: #151515;
  --bk-on-warning: #151515;
  --bk-danger: #d62828;
  --bk-danger-soft: #f7dede;
  --bk-danger-border: #151515;
  --bk-info: #1d4ed8;
  --bk-info-soft: #dde5fa;
  --bk-info-border: #151515;
  --bk-neutral: #151515;
  --bk-neutral-soft: #eae6da;
  --bk-neutral-border: #151515;
  --bk-on-neutral: #faf8f2;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 9999px;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 9999px;

  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: none;
  --bk-shadow-lg: none;
  --bk-shadow-xl: 0 12px 40px rgb(21 21 21 / 0.2);
  --bk-shadow-2xl: 0 20px 60px rgb(21 21 21 / 0.28);
  --bk-shadow-inner: none;

  --bk-ring: #1d4ed8;
  --bk-ring-width: 3px;
  --bk-ring-offset: 2px;

  --bk-btn-border-width: 2px;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-btn-weight: 700;
  --bk-press-transform: translateY(2px);
  --bk-hover-transform: none;

  --bk-field-bg: #faf8f2;
  --bk-field-border: #151515;
  --bk-field-border-width: 2px;
  --bk-field-border-hover: #d62828;
  --bk-field-shadow: none;
  --bk-field-placeholder: #8a8577;
  --bk-card-border-width: 2px;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: none;
  --bk-card-pad: var(--bk-space-5);
  --bk-overlay-surface: #faf8f2;
  --bk-overlay-border: #151515;
  --bk-overlay-shadow: 8px 8px 0 #151515;
  --bk-overlay-bg: rgb(21 21 21 / 0.6);
  --bk-code-bg: #eae6da;
  --bk-code-border: #151515;
  --bk-tooltip-bg: #151515;
  --bk-selection-bg: #f6c101;
  --bk-selection-fg: #151515;
  --bk-scrollbar-thumb: #151515;
  --bk-divider-color: #151515;
  --bk-divider-width: 2px;
}

[data-bk-style="bauhaus"][data-bk-theme="dark"] {
  --bk-bg: #151515;
  --bk-bg-subtle: #1c1c1c;
  --bk-surface: #1c1c1c;
  --bk-surface-2: #242424;
  --bk-surface-3: #2e2e2e;
  --bk-text: #f2efe6;
  --bk-text-muted: #c0bcb2;
  --bk-text-subtle: #8b8880;
  --bk-text-inverted: #151515;
  --bk-border: #f2efe6;
  --bk-border-muted: #3a3a3a;
  --bk-border-strong: #f2efe6;
  --bk-primary-border: #f2efe6;
  --bk-secondary-border: #f2efe6;
  --bk-warning-border: #f2efe6;
  --bk-neutral: #f2efe6;
  --bk-neutral-soft: #242424;
  --bk-neutral-border: #f2efe6;
  --bk-on-neutral: #151515;
  --bk-field-bg: #1c1c1c;
  --bk-field-border: #f2efe6;
  --bk-code-bg: #242424;
  --bk-code-border: #f2efe6;
  --bk-overlay-surface: #1c1c1c;
  --bk-overlay-border: #f2efe6;
  --bk-overlay-shadow: 8px 8px 0 #f2efe6;
  --bk-tooltip-bg: #f2efe6;
  --bk-tooltip-fg: #151515;
  --bk-divider-color: #f2efe6;
}

[data-bk-style="bauhaus"] .bk-btn-pill,
[data-bk-style="bauhaus"] .bk-btn-circle { border-radius: 9999px; }
[data-bk-style="bauhaus"] .bk-avatar { border: 2px solid var(--bk-border); }
[data-bk-style="bauhaus"] .bk-check { border-radius: 0; border-width: 2px; }
[data-bk-style="bauhaus"] .bk-check-radio { border-radius: 9999px; }
[data-bk-style="bauhaus"] .bk-switch { border: 2px solid var(--bk-border); background: var(--bk-surface); }
[data-bk-style="bauhaus"] .bk-switch::before { background: var(--bk-border); box-shadow: none; }
[data-bk-style="bauhaus"] .bk-switch:checked { background: var(--bk-secondary); }
[data-bk-style="bauhaus"] .bk-switch:checked::before { background: var(--bk-surface); }
[data-bk-style="bauhaus"] .bk-navbar { border-block-end: 3px solid var(--bk-border); background: transparent; }
[data-bk-style="bauhaus"] .bk-table thead th { background: var(--bk-warning); color: #151515; border-block-end: 2px solid var(--bk-border); }
[data-bk-style="bauhaus"] .bk-progress { border: 2px solid var(--bk-border); background: transparent; border-radius: 0; }
[data-bk-style="bauhaus"] .bk-progress-bar { border-radius: 0; }
[data-bk-style="bauhaus"] .bk-tab[aria-selected="true"] { background: var(--bk-primary); color: var(--bk-on-primary); border-block-end-color: var(--bk-border); }
[data-bk-style="bauhaus"] .bk-section-head::before {
  content: "";
  display: block;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: var(--bk-space-4);
  background:
    conic-gradient(from 180deg at 50% 50%, var(--bk-primary) 0 90deg, var(--bk-warning) 90deg 180deg,
      var(--bk-secondary) 180deg 270deg, transparent 270deg);
  border: 2px solid var(--bk-border);
  border-radius: 9999px 0 9999px 0;
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="bauhaus"] {
  --bk-danger: #d62828;
  --bk-danger-on-soft: #bc2323;
  --bk-danger-soft: #f7dede;
  --bk-danger-text: #c92626;
  --bk-info: #1d4ed8;
  --bk-info-on-soft: #1d4ed8;
  --bk-info-soft: #dde5fa;
  --bk-info-text: #1d4ed8;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-success: #ffffff;
  --bk-primary-on-soft: #bc2323;
  --bk-primary-text: #c92626;
  --bk-secondary-on-soft: #1d4ed8;
  --bk-secondary-text: #1d4ed8;
  --bk-success: #2f7a3e;
  --bk-success-on-soft: #2c733a;
  --bk-success-soft: #dfeee2;
  --bk-success-text: #2f7a3e;
  --bk-warning-on-soft: #816501;
  --bk-warning-text: #816501;
}
[data-bk-style="bauhaus"][data-bk-theme="dark"] {
  --bk-danger: #d62828;
  --bk-danger-on-soft: #bc2323;
  --bk-danger-soft: #f7dede;
  --bk-danger-text: #e05b5b;
  --bk-info: #1d4ed8;
  --bk-info-on-soft: #1d4ed8;
  --bk-info-soft: #dde5fa;
  --bk-info-text: #5d82e9;
  --bk-on-danger: #fdf7f7;
  --bk-on-info: #bcddf9;
  --bk-on-success: #daf9e8;
  --bk-primary-on-soft: #bc2323;
  --bk-primary-text: #e05b5b;
  --bk-secondary-on-soft: #1d4ed8;
  --bk-secondary-text: #5d82e9;
  --bk-success: #2f7a3e;
  --bk-success-on-soft: #2c733a;
  --bk-success-soft: #dfeee2;
  --bk-success-text: #3c9b4f;
  --bk-warning-on-soft: #816501;
  --bk-warning-text: #f6c101;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "bauhaus" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="bauhaus"][data-bk-theme="auto"] {
  --bk-bg: #151515;
  --bk-bg-subtle: #1c1c1c;
  --bk-surface: #1c1c1c;
  --bk-surface-2: #242424;
  --bk-surface-3: #2e2e2e;
  --bk-text: #f2efe6;
  --bk-text-muted: #c0bcb2;
  --bk-text-subtle: #8b8880;
  --bk-text-inverted: #151515;
  --bk-border: #f2efe6;
  --bk-border-muted: #3a3a3a;
  --bk-border-strong: #f2efe6;
  --bk-primary-border: #f2efe6;
  --bk-secondary-border: #f2efe6;
  --bk-warning-border: #f2efe6;
  --bk-neutral: #f2efe6;
  --bk-neutral-soft: #242424;
  --bk-neutral-border: #f2efe6;
  --bk-on-neutral: #151515;
  --bk-field-bg: #1c1c1c;
  --bk-field-border: #f2efe6;
  --bk-code-bg: #242424;
  --bk-code-border: #f2efe6;
  --bk-overlay-surface: #1c1c1c;
  --bk-overlay-border: #f2efe6;
  --bk-overlay-shadow: 8px 8px 0 #f2efe6;
  --bk-tooltip-bg: #f2efe6;
  --bk-tooltip-fg: #151515;
  --bk-divider-color: #f2efe6;


  --bk-danger: #d62828;
  --bk-danger-on-soft: #bc2323;
  --bk-danger-soft: #f7dede;
  --bk-danger-text: #e05b5b;
  --bk-info: #1d4ed8;
  --bk-info-on-soft: #1d4ed8;
  --bk-info-soft: #dde5fa;
  --bk-info-text: #5d82e9;
  --bk-on-danger: #fdf7f7;
  --bk-on-info: #bcddf9;
  --bk-on-success: #daf9e8;
  --bk-primary-on-soft: #bc2323;
  --bk-primary-text: #e05b5b;
  --bk-secondary-on-soft: #1d4ed8;
  --bk-secondary-text: #5d82e9;
  --bk-success: #2f7a3e;
  --bk-success-on-soft: #2c733a;
  --bk-success-soft: #dfeee2;
  --bk-success-text: #3c9b4f;
  --bk-warning-on-soft: #816501;
  --bk-warning-text: #f6c101;
}
}


/* =============================================================================
   SKIN — blueprint · Technical drawing
   Cyan ink on drafting navy, a millimetre grid under everything, dashed
   construction lines and dimension-style labels.
   ========================================================================== */

[data-bk-style="blueprint"] {
  --bk-font-sans: "IBM Plex Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  --bk-font-mono: var(--bk-font-sans);
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 600;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.06em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.12em;

  --bk-bg: #0d2137;
  --bk-bg-subtle: #10283f;
  --bk-bg-muted: #163350;
  --bk-surface: #10283f;
  --bk-surface-2: #163350;
  --bk-surface-3: #1d4062;
  --bk-surface-inverted: #e8f4ff;

  --bk-text: #d6ecff;
  --bk-text-muted: #8fb8dc;
  --bk-text-subtle: #5d87ad;
  --bk-text-inverted: #0d2137;

  --bk-border: #2f6390;
  --bk-border-muted: #1d4062;
  --bk-border-strong: #63b3ed;
  --bk-border-width: 1px;
  --bk-border-style: solid;

  --bk-primary: #63b3ed;
  --bk-primary-hover: #7cc3f5;
  --bk-primary-active: #96d0f8;
  --bk-primary-soft: #14395a;
  --bk-primary-border: #2f6390;
  --bk-on-primary: #072033;
  --bk-secondary: #f6ad55;
  --bk-secondary-hover: #f8bd74;
  --bk-secondary-soft: #3b2a12;
  --bk-secondary-border: #7a5a26;
  --bk-on-secondary: #241703;
  --bk-success: #68d391;
  --bk-success-soft: #123328;
  --bk-success-border: #2a6b4c;
  --bk-on-success: #04200f;
  --bk-warning: #f6e05e;
  --bk-warning-soft: #3a3512;
  --bk-warning-border: #756c26;
  --bk-on-warning: #221f00;
  --bk-danger: #fc8181;
  --bk-danger-soft: #3d1a1c;
  --bk-danger-border: #7d3438;
  --bk-on-danger: #260607;
  --bk-info: #63b3ed;
  --bk-info-soft: #14395a;
  --bk-info-border: #2f6390;
  --bk-on-info: #072033;
  --bk-neutral: #8fb8dc;
  --bk-neutral-soft: #163350;
  --bk-neutral-border: #2f6390;
  --bk-on-neutral: #0d2137;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: 0 0 0 1px rgb(99 179 237 / 0.2);
  --bk-shadow-lg: 0 0 0 1px rgb(99 179 237 / 0.35), 0 12px 40px rgb(0 0 0 / 0.5);
  --bk-shadow-xl: 0 0 0 1px rgb(99 179 237 / 0.45), 0 20px 60px rgb(0 0 0 / 0.6);
  --bk-shadow-2xl: 0 0 0 1px rgb(99 179 237 / 0.5), 0 30px 80px rgb(0 0 0 / 0.7);
  --bk-shadow-inner: inset 0 0 0 1px rgb(99 179 237 / 0.18);

  --bk-ring: #f6ad55;
  --bk-ring-width: 1px;
  --bk-ring-offset: 3px;
  --bk-ring-style: dashed;

  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.12em;
  --bk-btn-weight: 600;
  --bk-btn-border-width: 1px;
  --bk-press-transform: translateY(1px);

  --bk-field-bg: rgb(13 33 55 / 0.6);
  --bk-field-bg-hover: rgb(22 51 80 / 0.7);
  --bk-field-border: #2f6390;
  --bk-field-border-hover: #63b3ed;
  --bk-field-shadow: none;
  --bk-field-placeholder: #4f7ba3;

  --bk-card-bg: rgb(16 40 63 / 0.7);
  --bk-card-border: #2f6390;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: 0 0 0 1px #63b3ed;
  --bk-overlay-surface: #10283f;
  --bk-overlay-border: #63b3ed;
  --bk-overlay-shadow: var(--bk-shadow-xl);
  --bk-overlay-bg: rgb(5 16 27 / 0.8);
  --bk-code-bg: rgb(7 20 33 / 0.8);
  --bk-code-border: #2f6390;
  --bk-tooltip-bg: #63b3ed;
  --bk-tooltip-fg: #072033;
  --bk-selection-bg: rgb(246 173 85 / 0.35);
  --bk-scrollbar-thumb: #2f6390;
  --bk-divider-color: #2f6390;
  --bk-divider-style: dashed;

  --bk-body-image:
    linear-gradient(rgb(99 179 237 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(99 179 237 / 0.07) 1px, transparent 1px),
    linear-gradient(rgb(99 179 237 / 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgb(99 179 237 / 0.03) 1px, transparent 1px);
  background-size: 6rem 6rem, 6rem 6rem, 1.2rem 1.2rem, 1.2rem 1.2rem;
  --bk-body-attachment: fixed;
  color-scheme: dark;
}
[data-bk-style="blueprint"] body,
body[data-bk-style="blueprint"] {
  background-size: 6rem 6rem, 6rem 6rem, 1.2rem 1.2rem, 1.2rem 1.2rem;
}

[data-bk-style="blueprint"][data-bk-theme="light"] {
  --bk-bg: #f0f6fb;
  --bk-bg-subtle: #e6f0f8;
  --bk-surface: #ffffff;
  --bk-surface-2: #eef5fb;
  --bk-surface-3: #dbe9f5;
  --bk-text: #0d2137;
  --bk-text-muted: #3f6a91;
  --bk-text-subtle: #7599b8;
  --bk-text-inverted: #ffffff;
  --bk-border: #9dc2de;
  --bk-border-muted: #cfe2f0;
  --bk-border-strong: #1a5f95;
  --bk-primary: #1a5f95;
  --bk-primary-soft: #e0edf7;
  --bk-primary-border: #9dc2de;
  --bk-on-primary: #ffffff;
  --bk-field-bg: #ffffff;
  --bk-field-border: #9dc2de;
  --bk-card-bg: rgb(255 255 255 / 0.8);
  --bk-card-border: #9dc2de;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #1a5f95;
  --bk-code-bg: #eef5fb;
  --bk-code-border: #9dc2de;
  --bk-tooltip-bg: #0d2137;
  --bk-tooltip-fg: #ffffff;
  --bk-divider-color: #9dc2de;
  --bk-body-image:
    linear-gradient(rgb(26 95 149 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(26 95 149 / 0.08) 1px, transparent 1px),
    linear-gradient(rgb(26 95 149 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(26 95 149 / 0.04) 1px, transparent 1px);
  color-scheme: light;
}

[data-bk-style="blueprint"] .bk-card,
[data-bk-style="blueprint"] .bk-panel { border-style: solid; position: relative; }
[data-bk-style="blueprint"] .bk-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed rgb(99 179 237 / 0.25);
  pointer-events: none;
}
[data-bk-style="blueprint"] .bk-divider { border-style: dashed; }
[data-bk-style="blueprint"] .bk-section-head .bk-eyebrow::before { content: "▸ "; }
[data-bk-style="blueprint"] .bk-navbar { border-block-end: 1px solid var(--bk-border-strong); background: transparent; }
[data-bk-style="blueprint"] .bk-table thead th { background: transparent; border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="blueprint"] .bk-table th,
[data-bk-style="blueprint"] .bk-table td { border-block-end-style: dashed; }
[data-bk-style="blueprint"] .bk-check,
[data-bk-style="blueprint"] .bk-switch,
[data-bk-style="blueprint"] .bk-switch::before,
[data-bk-style="blueprint"] .bk-avatar { border-radius: 0; }
[data-bk-style="blueprint"] .bk-avatar { border: 1px solid var(--bk-border); }
[data-bk-style="blueprint"] .bk-progress { border: 1px solid var(--bk-border); background: transparent; }
[data-bk-style="blueprint"] .bk-progress-bar {
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgb(13 33 55 / 0.4) 4px 8px);
}
[data-bk-style="blueprint"] .bk-badge { border: 1px dashed currentColor; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="blueprint"] {
  --bk-danger-on-soft: #fc8181;
  --bk-danger-text: #fc8181;
  --bk-info-on-soft: #63b3ed;
  --bk-info-text: #63b3ed;
  --bk-neutral-on-soft: #8fb8dc;
  --bk-neutral-text: #8fb8dc;
  --bk-secondary-on-soft: #f6ad55;
  --bk-secondary-text: #f6ad55;
  --bk-success-on-soft: #68d391;
  --bk-success-text: #68d391;
  --bk-text-subtle: #678fb2;
  --bk-warning-on-soft: #f6e05e;
  --bk-warning-text: #f6e05e;
}
[data-bk-style="blueprint"][data-bk-theme="light"] {
  --bk-danger-on-soft: #fc8181;
  --bk-danger-text: #da0505;
  --bk-info-on-soft: #63b3ed;
  --bk-info-text: #1570b2;
  --bk-neutral-on-soft: #8fb8dc;
  --bk-neutral-text: #3472a8;
  --bk-secondary-on-soft: #f6ad55;
  --bk-secondary-text: #9f5b08;
  --bk-success-on-soft: #68d391;
  --bk-success-text: #237944;
  --bk-text-subtle: #5a85aa;
  --bk-warning-on-soft: #f6e05e;
  --bk-warning-text: #7c6b07;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "blueprint" — generated by scripts/build.mjs */
@media (prefers-color-scheme: light) {
  [data-bk-style="blueprint"][data-bk-theme="auto"] {
  --bk-bg: #f0f6fb;
  --bk-bg-subtle: #e6f0f8;
  --bk-surface: #ffffff;
  --bk-surface-2: #eef5fb;
  --bk-surface-3: #dbe9f5;
  --bk-text: #0d2137;
  --bk-text-muted: #3f6a91;
  --bk-text-subtle: #7599b8;
  --bk-text-inverted: #ffffff;
  --bk-border: #9dc2de;
  --bk-border-muted: #cfe2f0;
  --bk-border-strong: #1a5f95;
  --bk-primary: #1a5f95;
  --bk-primary-soft: #e0edf7;
  --bk-primary-border: #9dc2de;
  --bk-on-primary: #ffffff;
  --bk-field-bg: #ffffff;
  --bk-field-border: #9dc2de;
  --bk-card-bg: rgb(255 255 255 / 0.8);
  --bk-card-border: #9dc2de;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #1a5f95;
  --bk-code-bg: #eef5fb;
  --bk-code-border: #9dc2de;
  --bk-tooltip-bg: #0d2137;
  --bk-tooltip-fg: #ffffff;
  --bk-divider-color: #9dc2de;
  --bk-body-image:
    linear-gradient(rgb(26 95 149 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(26 95 149 / 0.08) 1px, transparent 1px),
    linear-gradient(rgb(26 95 149 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(26 95 149 / 0.04) 1px, transparent 1px);
  color-scheme: light;


  --bk-danger-on-soft: #fc8181;
  --bk-danger-text: #da0505;
  --bk-info-on-soft: #63b3ed;
  --bk-info-text: #1570b2;
  --bk-neutral-on-soft: #8fb8dc;
  --bk-neutral-text: #3472a8;
  --bk-secondary-on-soft: #f6ad55;
  --bk-secondary-text: #9f5b08;
  --bk-success-on-soft: #68d391;
  --bk-success-text: #237944;
  --bk-text-subtle: #5a85aa;
  --bk-warning-on-soft: #f6e05e;
  --bk-warning-text: #7c6b07;
}
}


/* =============================================================================
   SKIN — brutal · Neo-Brutalism
   Ink-black hairlines that are anything but hair-thin, hard offset shadows,
   zero radius, primary-school colours. Nothing apologises for being a box.
   ========================================================================== */

[data-bk-style="brutal"] {
  --bk-font-sans: "Archivo", "Arial Black", Arial, Helvetica, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-font-body: var(--bk-font-sans);
  --bk-heading-weight: 900;
  --bk-heading-tracking: -0.02em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.04em;
  --bk-weight-medium: 700;
  --bk-weight-semibold: 800;
  --bk-weight-bold: 900;

  --bk-bg: #fffdf5;
  --bk-bg-subtle: #fff8e2;
  --bk-bg-muted: #ffeec2;
  --bk-surface: #ffffff;
  --bk-surface-2: #fff8e2;
  --bk-surface-3: #ffe9b0;
  --bk-surface-inverted: #111111;

  --bk-text: #111111;
  --bk-text-muted: #333333;
  --bk-text-subtle: #5a5a5a;
  --bk-text-inverted: #ffffff;

  --bk-border: #111111;
  --bk-border-muted: #111111;
  --bk-border-strong: #111111;
  --bk-border-width: 2px;
  --bk-border-width-strong: 4px;

  --bk-primary: #ffd23f;
  --bk-primary-hover: #ffc400;
  --bk-primary-active: #eab200;
  --bk-primary-soft: #fff2c4;
  --bk-primary-border: #111111;
  --bk-on-primary: #111111;

  --bk-secondary: #4dd8c1;
  --bk-secondary-hover: #35cbb2;
  --bk-secondary-active: #24b39c;
  --bk-secondary-soft: #d8f7f1;
  --bk-secondary-border: #111111;
  --bk-on-secondary: #111111;

  --bk-success: #7bdc6a;
  --bk-success-hover: #63d24f;
  --bk-success-active: #4dc039;
  --bk-success-soft: #ddf7d7;
  --bk-success-border: #111111;
  --bk-on-success: #111111;

  --bk-warning: #ffa552;
  --bk-warning-hover: #ff9433;
  --bk-warning-active: #f5811a;
  --bk-warning-soft: #ffe6cd;
  --bk-warning-border: #111111;
  --bk-on-warning: #111111;

  --bk-danger: #ff5d5d;
  --bk-danger-hover: #ff4040;
  --bk-danger-active: #eb2b2b;
  --bk-danger-soft: #ffdada;
  --bk-danger-border: #111111;
  --bk-on-danger: #111111;

  --bk-info: #5b8dff;
  --bk-info-hover: #3d78ff;
  --bk-info-active: #2464f0;
  --bk-info-soft: #dbe6ff;
  --bk-info-border: #111111;
  --bk-on-info: #ffffff;

  --bk-neutral: #111111;
  --bk-neutral-hover: #000000;
  --bk-neutral-active: #000000;
  --bk-neutral-soft: #ffffff;
  --bk-neutral-border: #111111;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-none: 0 0 #0000;
  --bk-shadow-xs: 2px 2px 0 0 #111111;
  --bk-shadow-sm: 3px 3px 0 0 #111111;
  --bk-shadow-md: 5px 5px 0 0 #111111;
  --bk-shadow-lg: 7px 7px 0 0 #111111;
  --bk-shadow-xl: 10px 10px 0 0 #111111;
  --bk-shadow-2xl: 14px 14px 0 0 #111111;
  --bk-shadow-inner: inset 3px 3px 0 0 rgb(17 17 17 / 0.12);

  --bk-ring: #111111;
  --bk-ring-width: 3px;
  --bk-ring-offset: 2px;

  --bk-btn-border-width: 2px;
  --bk-btn-shadow: 4px 4px 0 0 #111111;
  --bk-btn-shadow-hover: 6px 6px 0 0 #111111;
  --bk-btn-shadow-active: 1px 1px 0 0 #111111;
  --bk-btn-weight: 800;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.05em;
  --bk-press-transform: translate(3px, 3px);
  --bk-hover-transform: translate(-2px, -2px);

  --bk-field-border: #111111;
  --bk-field-border-hover: #111111;
  --bk-field-border-width: 2px;
  --bk-field-shadow: 3px 3px 0 0 #111111;
  --bk-field-shadow-focus: 3px 3px 0 0 var(--bk-primary), 0 0 0 2px #111111;
  --bk-field-placeholder: #7a7a7a;

  --bk-card-border-width: 2px;
  --bk-card-shadow: 6px 6px 0 0 #111111;
  --bk-card-shadow-hover: 9px 9px 0 0 #111111;

  --bk-overlay-shadow: 10px 10px 0 0 #111111;
  --bk-overlay-bg: rgb(17 17 17 / 0.35);
  --bk-tooltip-bg: #111111;
  --bk-code-bg: #fff8e2;
  --bk-code-border: #111111;
  --bk-selection-bg: #ffd23f;
  --bk-selection-fg: #111111;
  --bk-scrollbar-thumb: #111111;
  --bk-divider-width: 2px;
  --bk-divider-color: #111111;
  --bk-transition: all 100ms cubic-bezier(0.2, 0, 0, 1);
}

[data-bk-style="brutal"][data-bk-theme="dark"] {
  --bk-bg: #14140f;
  --bk-bg-subtle: #1c1c15;
  --bk-surface: #1c1c15;
  --bk-surface-2: #26261c;
  --bk-surface-3: #33332a;
  --bk-surface-inverted: #fffdf5;
  --bk-text: #fffdf5;
  --bk-text-muted: #d9d6c6;
  --bk-text-subtle: #a9a696;
  --bk-text-inverted: #14140f;
  --bk-border: #fffdf5;
  --bk-border-muted: #fffdf5;
  --bk-border-strong: #fffdf5;
  --bk-primary-border: #fffdf5;
  --bk-neutral: #fffdf5;
  --bk-neutral-soft: #26261c;
  --bk-on-neutral: #14140f;
  --bk-shadow-xs: 2px 2px 0 0 #fffdf5;
  --bk-shadow-sm: 3px 3px 0 0 #fffdf5;
  --bk-shadow-md: 5px 5px 0 0 #fffdf5;
  --bk-shadow-lg: 7px 7px 0 0 #fffdf5;
  --bk-shadow-xl: 10px 10px 0 0 #fffdf5;
  --bk-shadow-2xl: 14px 14px 0 0 #fffdf5;
  --bk-btn-shadow: 4px 4px 0 0 #fffdf5;
  --bk-btn-shadow-hover: 6px 6px 0 0 #fffdf5;
  --bk-btn-shadow-active: 1px 1px 0 0 #fffdf5;
  --bk-field-shadow: 3px 3px 0 0 #fffdf5;
  --bk-field-shadow-focus: 3px 3px 0 0 var(--bk-primary), 0 0 0 2px #fffdf5;
  --bk-card-shadow: 6px 6px 0 0 #fffdf5;
  --bk-card-shadow-hover: 9px 9px 0 0 #fffdf5;
  --bk-overlay-shadow: 10px 10px 0 0 #fffdf5;
  --bk-ring: #fffdf5;
  --bk-code-bg: #26261c;
  --bk-code-border: #fffdf5;
  --bk-divider-color: #fffdf5;
  --bk-tooltip-bg: #fffdf5;
  --bk-tooltip-fg: #14140f;
}

/* structural personality ---------------------------------------------------*/
[data-bk-style="brutal"] .bk-badge,
[data-bk-style="brutal"] .bk-chip { border-color: var(--bk-border); border-width: 2px; }
[data-bk-style="brutal"] .bk-badge { font-weight: 800; }
[data-bk-style="brutal"] .bk-alert { border-width: 2px; box-shadow: 4px 4px 0 0 var(--bk-border); }
[data-bk-style="brutal"] .bk-avatar { border: 2px solid var(--bk-border); }
[data-bk-style="brutal"] .bk-table thead th { border-block-end-width: 2px; background: var(--bk-primary); color: #111; }
[data-bk-style="brutal"] .bk-progress { border: 2px solid var(--bk-border); background: var(--bk-surface); }
[data-bk-style="brutal"] .bk-switch { border: 2px solid var(--bk-border); background: var(--bk-surface); }
[data-bk-style="brutal"] .bk-switch::before { background: var(--bk-border); box-shadow: none; }
[data-bk-style="brutal"] .bk-switch:checked { background: var(--bk-primary); }
[data-bk-style="brutal"] .bk-tab[aria-selected="true"] { background: var(--bk-primary); color: #111; border-block-end-width: 3px; }
[data-bk-style="brutal"] .bk-navbar { border-block-end-width: 3px; }
[data-bk-style="brutal"] .bk-skeleton { border: 2px solid var(--bk-border); }
[data-bk-style="brutal"] .bk-tooltip { border: 2px solid var(--bk-border); box-shadow: 3px 3px 0 0 var(--bk-border); }
[data-bk-style="brutal"] .bk-title,
[data-bk-style="brutal"] .bk-display { text-transform: uppercase; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="brutal"] {
  --bk-danger-on-soft: #c80000;
  --bk-danger-text: #e70000;
  --bk-info: #5b8dff;
  --bk-info-on-soft: #004dfe;
  --bk-info-soft: #dbe6ff;
  --bk-info-text: #1e62ff;
  --bk-on-info: #262626;
  --bk-primary-on-soft: #866700;
  --bk-primary-text: #8b6b00;
  --bk-secondary-on-soft: #1a7768;
  --bk-secondary-text: #1c7f6f;
  --bk-success-on-soft: #2a771c;
  --bk-success-text: #2d801e;
  --bk-warning-on-soft: #a44e00;
  --bk-warning-text: #b35600;
}
[data-bk-style="brutal"][data-bk-theme="dark"] {
  --bk-danger-on-soft: #c80000;
  --bk-danger-text: #ff5d5d;
  --bk-info: #5b8dff;
  --bk-info-on-soft: #004dfe;
  --bk-info-soft: #dbe6ff;
  --bk-info-text: #5b8dff;
  --bk-on-info: #262626;
  --bk-primary-on-soft: #866700;
  --bk-primary-text: #ffd23f;
  --bk-secondary-on-soft: #1a7768;
  --bk-secondary-text: #4dd8c1;
  --bk-success-on-soft: #2a771c;
  --bk-success-text: #7bdc6a;
  --bk-warning-on-soft: #a44e00;
  --bk-warning-text: #ffa552;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "brutal" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="brutal"][data-bk-theme="auto"] {
  --bk-bg: #14140f;
  --bk-bg-subtle: #1c1c15;
  --bk-surface: #1c1c15;
  --bk-surface-2: #26261c;
  --bk-surface-3: #33332a;
  --bk-surface-inverted: #fffdf5;
  --bk-text: #fffdf5;
  --bk-text-muted: #d9d6c6;
  --bk-text-subtle: #a9a696;
  --bk-text-inverted: #14140f;
  --bk-border: #fffdf5;
  --bk-border-muted: #fffdf5;
  --bk-border-strong: #fffdf5;
  --bk-primary-border: #fffdf5;
  --bk-neutral: #fffdf5;
  --bk-neutral-soft: #26261c;
  --bk-on-neutral: #14140f;
  --bk-shadow-xs: 2px 2px 0 0 #fffdf5;
  --bk-shadow-sm: 3px 3px 0 0 #fffdf5;
  --bk-shadow-md: 5px 5px 0 0 #fffdf5;
  --bk-shadow-lg: 7px 7px 0 0 #fffdf5;
  --bk-shadow-xl: 10px 10px 0 0 #fffdf5;
  --bk-shadow-2xl: 14px 14px 0 0 #fffdf5;
  --bk-btn-shadow: 4px 4px 0 0 #fffdf5;
  --bk-btn-shadow-hover: 6px 6px 0 0 #fffdf5;
  --bk-btn-shadow-active: 1px 1px 0 0 #fffdf5;
  --bk-field-shadow: 3px 3px 0 0 #fffdf5;
  --bk-field-shadow-focus: 3px 3px 0 0 var(--bk-primary), 0 0 0 2px #fffdf5;
  --bk-card-shadow: 6px 6px 0 0 #fffdf5;
  --bk-card-shadow-hover: 9px 9px 0 0 #fffdf5;
  --bk-overlay-shadow: 10px 10px 0 0 #fffdf5;
  --bk-ring: #fffdf5;
  --bk-code-bg: #26261c;
  --bk-code-border: #fffdf5;
  --bk-divider-color: #fffdf5;
  --bk-tooltip-bg: #fffdf5;
  --bk-tooltip-fg: #14140f;


  --bk-danger-on-soft: #c80000;
  --bk-danger-text: #ff5d5d;
  --bk-info: #5b8dff;
  --bk-info-on-soft: #004dfe;
  --bk-info-soft: #dbe6ff;
  --bk-info-text: #5b8dff;
  --bk-on-info: #262626;
  --bk-primary-on-soft: #866700;
  --bk-primary-text: #ffd23f;
  --bk-secondary-on-soft: #1a7768;
  --bk-secondary-text: #4dd8c1;
  --bk-success-on-soft: #2a771c;
  --bk-success-text: #7bdc6a;
  --bk-warning-on-soft: #a44e00;
  --bk-warning-text: #ffa552;
}
}


/* =============================================================================
   SKIN — candy · Bubblegum
   Glossy, saturated, unserious. Fat pills, a wet highlight on every surface,
   sprinkles in the background and a bounce on press. Sugar as a design system.
   ========================================================================== */

[data-bk-style="candy"] {
  --bk-font-sans: "Baloo 2", "Fredoka", "Quicksand", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 800;
  --bk-heading-tracking: -0.01em;

  --bk-bg: #fff1f7;
  --bk-bg-subtle: #ffe4f0;
  --bk-bg-muted: #ffd3e6;
  --bk-surface: #ffffff;
  --bk-surface-2: #fff0f7;
  --bk-surface-3: #ffdcec;
  --bk-surface-inverted: #46173a;

  --bk-text: #4a1338;
  --bk-text-muted: #7d3a67;
  --bk-text-subtle: #ab6f96;
  --bk-text-inverted: #ffffff;

  --bk-border: #ffc2de;
  --bk-border-muted: #ffe0ee;
  --bk-border-strong: #ff8ac0;

  --bk-primary: #ff4f9d;
  --bk-primary-hover: #f5388d;
  --bk-primary-active: #e0257b;
  --bk-primary-soft: #ffdcec;
  --bk-primary-border: #ffa8ce;
  --bk-on-primary: #ffffff;
  --bk-secondary: #6ec9ff;
  --bk-secondary-hover: #4fbaff;
  --bk-secondary-active: #35a9f5;
  --bk-secondary-soft: #d9f0ff;
  --bk-secondary-border: #a6dfff;
  --bk-on-secondary: #05304a;
  --bk-success: #5fd68f;
  --bk-success-soft: #ddf8e9;
  --bk-success-border: #a4ecc4;
  --bk-on-success: #04331b;
  --bk-warning: #ffc247;
  --bk-warning-soft: #fff2d4;
  --bk-warning-border: #ffdd94;
  --bk-on-warning: #402a00;
  --bk-danger: #ff6b6b;
  --bk-danger-soft: #ffe0e0;
  --bk-danger-border: #ffb0b0;
  --bk-on-danger: #470909;
  --bk-info: #b48cff;
  --bk-info-soft: #ece2ff;
  --bk-info-border: #cfbaff;
  --bk-on-info: #23064a;
  --bk-neutral: #7d3a67;
  --bk-neutral-soft: #ffe8f3;
  --bk-neutral-border: #ffc2de;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 3;
  --bk-radius-field: var(--bk-radius-full);
  --bk-radius-card: var(--bk-radius-3xl);
  --bk-radius-overlay: var(--bk-radius-3xl);

  --bk-shadow-color: 330 60% 45%;
  --bk-shadow-strength: 1.1;
  --_gloss: inset 0 3px 0 0 rgb(255 255 255 / 0.75), inset 0 -6px 12px -6px rgb(200 60 130 / 0.3);

  --bk-btn-radius: var(--bk-radius-full);
  --bk-btn-weight: 800;
  --bk-btn-border-width: 0px;
  --bk-btn-shadow: var(--_gloss), 0 4px 0 0 rgb(200 60 130 / 0.28);
  --bk-btn-shadow-hover: var(--_gloss), 0 6px 0 0 rgb(200 60 130 / 0.32);
  --bk-btn-shadow-active: var(--_gloss), 0 1px 0 0 rgb(200 60 130 / 0.32);
  --bk-press-transform: translateY(3px);
  --bk-hover-transform: translateY(-2px);

  --bk-field-bg: #ffffff;
  --bk-field-border: #ffc2de;
  --bk-field-border-hover: #ff4f9d;
  --bk-field-shadow: inset 0 2px 6px rgb(200 60 130 / 0.12);
  --bk-field-shadow-focus: inset 0 2px 6px rgb(200 60 130 / 0.12), 0 0 0 4px rgb(255 79 157 / 0.25);
  --bk-field-placeholder: #d093b5;
  --bk-card-shadow: var(--_gloss), 0 8px 22px rgb(200 60 130 / 0.16);
  --bk-card-shadow-hover: var(--_gloss), 0 14px 34px rgb(200 60 130 / 0.22);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #ffffff;
  --bk-overlay-shadow: var(--_gloss), 0 24px 60px rgb(150 30 90 / 0.3);
  --bk-overlay-bg: rgb(74 19 56 / 0.35);
  --bk-code-bg: #fff0f7;
  --bk-code-border: #ffc2de;
  --bk-tooltip-bg: #4a1338;
  --bk-selection-bg: rgb(255 79 157 / 0.35);
  --bk-scrollbar-thumb: #ffa8ce;
  --bk-divider-color: #ffc2de;
  --bk-ease-spring: cubic-bezier(0.34, 1.8, 0.5, 1);

  /* Sprinkles. */
  --bk-body-image:
    radial-gradient(circle at 12% 22%, rgb(110 201 255 / 0.5) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 14%, rgb(255 194 71 / 0.5) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 62% 76%, rgb(180 140 255 / 0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 28% 84%, rgb(95 214 143 / 0.45) 0 2.5px, transparent 3.5px);
  --bk-body-attachment: fixed;
}

[data-bk-style="candy"][data-bk-theme="dark"] {
  --bk-bg: #2a0c22;
  --bk-bg-subtle: #34102a;
  --bk-surface: #3a1330;
  --bk-surface-2: #451739;
  --bk-surface-3: #541e45;
  --bk-text: #ffe7f4;
  --bk-text-muted: #d6a6c4;
  --bk-text-subtle: #a87694;
  --bk-text-inverted: #2a0c22;
  --bk-border: #5c2149;
  --bk-border-muted: #45173a;
  --bk-border-strong: #8b3a70;
  --bk-primary: #ff77b8;
  --bk-primary-hover: #ff90c6;
  --bk-primary-soft: #4d1a3c;
  --bk-primary-border: #7d3060;
  --bk-on-primary: #2c0620;
  --bk-secondary-soft: #10303f;
  --bk-success-soft: #123023;
  --bk-warning-soft: #3a2c0c;
  --bk-danger-soft: #45161b;
  --bk-info-soft: #2a1a4a;
  --bk-neutral: #ffe7f4;
  --bk-neutral-soft: #451739;
  --bk-neutral-border: #5c2149;
  --bk-on-neutral: #2a0c22;
  --_gloss: inset 0 3px 0 0 rgb(255 255 255 / 0.16), inset 0 -6px 12px -6px rgb(0 0 0 / 0.4);
  --bk-field-bg: #3a1330;
  --bk-field-border: #6b2755;
  --bk-code-bg: #34102a;
  --bk-code-border: #5c2149;
  --bk-overlay-surface: #3a1330;
  --bk-tooltip-bg: #ffe7f4;
  --bk-tooltip-fg: #2a0c22;
  --bk-divider-color: #5c2149;
  --bk-scrollbar-thumb: #6b2755;
}

[data-bk-style="candy"] .bk-card,
[data-bk-style="candy"] .bk-panel,
[data-bk-style="candy"] .bk-alert { box-shadow: var(--_gloss), 0 8px 22px rgb(200 60 130 / 0.14); }
[data-bk-style="candy"] .bk-badge,
[data-bk-style="candy"] .bk-chip { border-radius: 9999px; box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.55); }
[data-bk-style="candy"] .bk-avatar { box-shadow: var(--_gloss), 0 3px 8px rgb(200 60 130 / 0.25); }
[data-bk-style="candy"] .bk-progress { box-shadow: inset 0 2px 5px rgb(200 60 130 / 0.2); }
[data-bk-style="candy"] .bk-progress-bar { box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.5); }
[data-bk-style="candy"] .bk-switch::before { box-shadow: 0 2px 4px rgb(200 60 130 / 0.35), inset 0 2px 0 rgb(255 255 255 / 0.8); }
[data-bk-style="candy"] .bk-tablist { border-block-end: 0; }
[data-bk-style="candy"] .bk-tab { border-radius: 9999px; border-block-end: 0; }
[data-bk-style="candy"] .bk-tab[aria-selected="true"] { background: var(--bk-primary); color: var(--bk-on-primary); box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.5); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="candy"] {
  --bk-danger-on-soft: #cc0000;
  --bk-danger-text: #db0000;
  --bk-field-placeholder: #c57aa4;
  --bk-info-on-soft: #752bff;
  --bk-info-text: #7f3aff;
  --bk-on-primary: #292929;
  --bk-primary: #ff4f9d;
  --bk-primary-on-soft: #c40057;
  --bk-primary-soft: #ffdcec;
  --bk-primary-text: #d4005e;
  --bk-secondary-on-soft: #006bab;
  --bk-secondary-text: #0072b5;
  --bk-success-on-soft: #1f7843;
  --bk-success-text: #207c45;
  --bk-warning-on-soft: #936300;
  --bk-warning-text: #936300;
}
[data-bk-style="candy"][data-bk-theme="dark"] {
  --bk-danger-on-soft: #ff6b6b;
  --bk-danger-text: #ff6b6b;
  --bk-field-placeholder: #d093b5;
  --bk-info-on-soft: #b48cff;
  --bk-info-text: #b48cff;
  --bk-on-primary: #2c0620;
  --bk-primary: #ff77b8;
  --bk-primary-on-soft: #ff77b8;
  --bk-primary-soft: #4d1a3c;
  --bk-primary-text: #ff77b8;
  --bk-secondary-on-soft: #6ec9ff;
  --bk-secondary-text: #6ec9ff;
  --bk-success-on-soft: #5fd68f;
  --bk-success-text: #5fd68f;
  --bk-warning-on-soft: #ffc247;
  --bk-warning-text: #ffc247;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "candy" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="candy"][data-bk-theme="auto"] {
  --bk-bg: #2a0c22;
  --bk-bg-subtle: #34102a;
  --bk-surface: #3a1330;
  --bk-surface-2: #451739;
  --bk-surface-3: #541e45;
  --bk-text: #ffe7f4;
  --bk-text-muted: #d6a6c4;
  --bk-text-subtle: #a87694;
  --bk-text-inverted: #2a0c22;
  --bk-border: #5c2149;
  --bk-border-muted: #45173a;
  --bk-border-strong: #8b3a70;
  --bk-primary: #ff77b8;
  --bk-primary-hover: #ff90c6;
  --bk-primary-soft: #4d1a3c;
  --bk-primary-border: #7d3060;
  --bk-on-primary: #2c0620;
  --bk-secondary-soft: #10303f;
  --bk-success-soft: #123023;
  --bk-warning-soft: #3a2c0c;
  --bk-danger-soft: #45161b;
  --bk-info-soft: #2a1a4a;
  --bk-neutral: #ffe7f4;
  --bk-neutral-soft: #451739;
  --bk-neutral-border: #5c2149;
  --bk-on-neutral: #2a0c22;
  --_gloss: inset 0 3px 0 0 rgb(255 255 255 / 0.16), inset 0 -6px 12px -6px rgb(0 0 0 / 0.4);
  --bk-field-bg: #3a1330;
  --bk-field-border: #6b2755;
  --bk-code-bg: #34102a;
  --bk-code-border: #5c2149;
  --bk-overlay-surface: #3a1330;
  --bk-tooltip-bg: #ffe7f4;
  --bk-tooltip-fg: #2a0c22;
  --bk-divider-color: #5c2149;
  --bk-scrollbar-thumb: #6b2755;


  --bk-danger-on-soft: #ff6b6b;
  --bk-danger-text: #ff6b6b;
  --bk-field-placeholder: #d093b5;
  --bk-info-on-soft: #b48cff;
  --bk-info-text: #b48cff;
  --bk-on-primary: #2c0620;
  --bk-primary: #ff77b8;
  --bk-primary-on-soft: #ff77b8;
  --bk-primary-soft: #4d1a3c;
  --bk-primary-text: #ff77b8;
  --bk-secondary-on-soft: #6ec9ff;
  --bk-secondary-text: #6ec9ff;
  --bk-success-on-soft: #5fd68f;
  --bk-success-text: #5fd68f;
  --bk-warning-on-soft: #ffc247;
  --bk-warning-text: #ffc247;
}
}


/* =============================================================================
   SKIN — chalk · Blackboard
   Slate green board, chalk dust in the corners, hand-drawn strokes that never
   quite close, and the pale ghost of everything wiped off before this lesson.
   ========================================================================== */

[data-bk-style="chalk"] {
  --bk-font-sans: "Caveat", "Gaegu", "Comic Neue", "Bradley Hand", cursive, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-font-body: var(--bk-font-sans);
  --bk-font-mono: "Courier New", ui-monospace, monospace;
  --bk-heading-weight: 700;
  --bk-heading-tracking: 0.01em;
  --bk-text-base: 1.125rem;
  --bk-text-md: 1rem;
  --bk-leading-normal: 1.55;

  --bk-bg: #26332c;
  --bk-bg-subtle: #2c3a33;
  --bk-bg-muted: #33423a;
  --bk-surface: #2b3931;
  --bk-surface-2: #314038;
  --bk-surface-3: #3a4a41;
  --bk-surface-inverted: #f2efe4;

  --bk-text: #f2efe4;
  --bk-text-muted: #c3c8bd;
  --bk-text-subtle: #8f978d;
  --bk-text-inverted: #26332c;

  --bk-border: #6d7a71;
  --bk-border-muted: #47564d;
  --bk-border-strong: #f2efe4;
  --bk-border-width: 2px;

  --bk-primary: #f2efe4;
  --bk-primary-hover: #ffffff;
  --bk-primary-active: #ded9c9;
  --bk-primary-soft: #384740;
  --bk-primary-border: #8b9890;
  --bk-on-primary: #26332c;
  --bk-secondary: #f7d477;
  --bk-secondary-hover: #f9de92;
  --bk-secondary-soft: #3e3c25;
  --bk-secondary-border: #6f6a3c;
  --bk-on-secondary: #241f06;
  --bk-success: #a8dba0;
  --bk-success-soft: #2c3d2b;
  --bk-success-border: #4e6b4b;
  --bk-on-success: #0f1c0e;
  --bk-warning: #f7d477;
  --bk-warning-soft: #3e3c25;
  --bk-warning-border: #6f6a3c;
  --bk-on-warning: #241f06;
  --bk-danger: #f5a3a3;
  --bk-danger-soft: #402c2c;
  --bk-danger-border: #6f4c4c;
  --bk-on-danger: #2a1010;
  --bk-info: #a5cfe0;
  --bk-info-soft: #2b3a41;
  --bk-info-border: #4c6873;
  --bk-on-info: #0d1a20;
  --bk-neutral: #f2efe4;
  --bk-neutral-soft: #314038;
  --bk-neutral-border: #6d7a71;
  --bk-on-neutral: #26332c;

  --bk-radius-scale: 1.2;
  --bk-radius-field: 14px 5px 12px 6px;
  --bk-radius-card: 16px 6px 14px 8px;
  --bk-radius-overlay: 18px 8px 16px 10px;

  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: 0 2px 12px rgb(0 0 0 / 0.35);
  --bk-shadow-lg: 0 6px 24px rgb(0 0 0 / 0.45);
  --bk-shadow-xl: 0 12px 40px rgb(0 0 0 / 0.55);
  --bk-shadow-2xl: 0 20px 60px rgb(0 0 0 / 0.65);
  --bk-shadow-inner: inset 0 0 30px rgb(0 0 0 / 0.3);

  --bk-ring: #f7d477;
  --bk-ring-width: 2px;
  --bk-ring-offset: 3px;
  --bk-ring-style: dashed;

  --bk-btn-border-width: 2px;
  --bk-btn-weight: 700;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-press-transform: translate(1px, 1px) rotate(0.4deg);
  --bk-hover-transform: rotate(-0.6deg);

  --bk-field-bg: rgb(255 255 255 / 0.04);
  --bk-field-border: #8b9890;
  --bk-field-border-width: 2px;
  --bk-field-border-hover: #f2efe4;
  --bk-field-shadow: none;
  --bk-field-placeholder: #869089;
  --bk-card-bg: rgb(255 255 255 / 0.03);
  --bk-card-border-width: 2px;
  --bk-card-border: #6d7a71;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: 0 4px 18px rgb(0 0 0 / 0.35);
  --bk-card-pad: var(--bk-space-5);
  --bk-overlay-surface: #2b3931;
  --bk-overlay-border: #f2efe4;
  --bk-overlay-shadow: 0 20px 60px rgb(0 0 0 / 0.7);
  --bk-overlay-bg: rgb(12 18 15 / 0.7);
  --bk-code-bg: rgb(0 0 0 / 0.25);
  --bk-code-border: #6d7a71;
  --bk-tooltip-bg: #f2efe4;
  --bk-tooltip-fg: #26332c;
  --bk-selection-bg: rgb(247 212 119 / 0.35);
  --bk-scrollbar-thumb: #6d7a71;
  --bk-divider-color: #6d7a71;
  --bk-divider-width: 2px;
  --bk-divider-style: dashed;

  /* Chalk dust and the ghost of a bad wipe. */
  --bk-body-image:
    radial-gradient(60rem 30rem at 20% 12%, rgb(242 239 228 / 0.05), transparent 55%),
    radial-gradient(50rem 26rem at 82% 68%, rgb(242 239 228 / 0.04), transparent 55%),
    repeating-linear-gradient(102deg, rgb(242 239 228 / 0.018) 0 3px, transparent 3px 9px);
  --bk-body-attachment: fixed;
  color-scheme: dark;
}

[data-bk-style="chalk"][data-bk-theme="light"] {
  /* The whiteboard on the other wall. */
  --bk-bg: #f6f6f4;
  --bk-bg-subtle: #eeeeeb;
  --bk-surface: #ffffff;
  --bk-surface-2: #f0f0ed;
  --bk-surface-3: #e2e2de;
  --bk-surface-inverted: #26332c;
  --bk-text: #23262b;
  --bk-text-muted: #4f545a;
  --bk-text-subtle: #82878d;
  --bk-text-inverted: #ffffff;
  --bk-border: #23262b;
  --bk-border-muted: #c8c8c4;
  --bk-border-strong: #23262b;
  --bk-primary: #1f5fbf;
  --bk-primary-hover: #1a51a4;
  --bk-primary-soft: #dfe9f8;
  --bk-primary-border: #23262b;
  --bk-on-primary: #ffffff;
  --bk-secondary: #b8540c;
  --bk-secondary-soft: #f8e6d8;
  --bk-secondary-border: #23262b;
  --bk-on-secondary: #ffffff;
  --bk-success: #1f7a3f; --bk-success-soft: #dcf0e2; --bk-success-border: #23262b;
  --bk-warning: #9a6a10; --bk-warning-soft: #f7ecd2; --bk-warning-border: #23262b;
  --bk-danger: #b32424; --bk-danger-soft: #f8dede; --bk-danger-border: #23262b;
  --bk-info: #1f5fbf; --bk-info-soft: #dfe9f8; --bk-info-border: #23262b;
  --bk-neutral: #23262b; --bk-neutral-soft: #f0f0ed; --bk-neutral-border: #23262b;
  --bk-on-neutral: #ffffff;
  --bk-field-bg: #ffffff;
  --bk-field-border: #23262b;
  --bk-card-bg: #ffffff;
  --bk-card-border: #23262b;
  --bk-code-bg: #f0f0ed;
  --bk-code-border: #23262b;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #23262b;
  --bk-tooltip-bg: #23262b;
  --bk-tooltip-fg: #ffffff;
  --bk-divider-color: #23262b;
  --bk-ring: #1f5fbf;
  --bk-body-image: none;
  color-scheme: light;
}

/* Chalk never draws a clean line. */
[data-bk-style="chalk"] .bk-card,
[data-bk-style="chalk"] .bk-btn:not(.bk-btn-link),
[data-bk-style="chalk"] .bk-input,
[data-bk-style="chalk"] .bk-textarea,
[data-bk-style="chalk"] .bk-alert,
[data-bk-style="chalk"] .bk-badge {
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='c' x='-6%25' y='-16%25' width='112%25' height='132%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='2' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#c");
}
[data-bk-style="chalk"] .bk-display,
[data-bk-style="chalk"] .bk-title { text-shadow: 0 0 12px rgb(242 239 228 / 0.28); }
[data-bk-style="chalk"][data-bk-theme="light"] .bk-display,
[data-bk-style="chalk"][data-bk-theme="light"] .bk-title { text-shadow: none; }
[data-bk-style="chalk"] .bk-card:nth-child(2n) { border-radius: 6px 16px 8px 14px; }
[data-bk-style="chalk"] .bk-avatar { border: 2px solid var(--bk-border); border-radius: 48% 52% 45% 55% / 52% 46% 54% 48%; }
[data-bk-style="chalk"] .bk-navbar { background: transparent; border-block-end: 2px dashed var(--bk-border); }
[data-bk-style="chalk"] .bk-table thead th { background: transparent; border-block-end: 2px dashed var(--bk-border-strong); }
[data-bk-style="chalk"] .bk-table th,
[data-bk-style="chalk"] .bk-table td { border-block-end-style: dashed; }
[data-bk-style="chalk"] .bk-progress { border: 2px solid var(--bk-border); background: transparent; }
[data-bk-style="chalk"] .bk-mark,
[data-bk-style="chalk"] mark { background: rgb(247 212 119 / 0.3); color: inherit; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="chalk"] {
  --bk-danger: #f5a3a3;
  --bk-danger-soft: #402c2c;
  --bk-info: #a5cfe0;
  --bk-info-soft: #2b3a41;
  --bk-on-danger: #2a1010;
  --bk-on-info: #0d1a20;
  --bk-on-success: #0f1c0e;
  --bk-on-warning: #241f06;
  --bk-secondary-on-soft: #f7d477;
  --bk-secondary-text: #f7d477;
  --bk-success: #a8dba0;
  --bk-success-soft: #2c3d2b;
  --bk-text-subtle: #8f978d;
  --bk-warning: #f7d477;
  --bk-warning-on-soft: #f7d477;
  --bk-warning-soft: #3e3c25;
  --bk-warning-text: #f7d477;
}
[data-bk-style="chalk"][data-bk-theme="light"] {
  --bk-danger: #b32424;
  --bk-danger-soft: #f8dede;
  --bk-info: #1f5fbf;
  --bk-info-soft: #dfe9f8;
  --bk-on-danger: #efd4d4;
  --bk-on-info: #d3e5ed;
  --bk-on-success: #e9f3e8;
  --bk-on-warning: #fefefc;
  --bk-secondary-on-soft: #a54b0b;
  --bk-secondary-text: #b8540c;
  --bk-success: #1f7a3f;
  --bk-success-soft: #dcf0e2;
  --bk-text-subtle: #787d83;
  --bk-warning: #9a6a10;
  --bk-warning-on-soft: #8c600f;
  --bk-warning-soft: #f7ecd2;
  --bk-warning-text: #91640f;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "chalk" — generated by scripts/build.mjs */
@media (prefers-color-scheme: light) {
  [data-bk-style="chalk"][data-bk-theme="auto"] {
  /* The whiteboard on the other wall. */
  --bk-bg: #f6f6f4;
  --bk-bg-subtle: #eeeeeb;
  --bk-surface: #ffffff;
  --bk-surface-2: #f0f0ed;
  --bk-surface-3: #e2e2de;
  --bk-surface-inverted: #26332c;
  --bk-text: #23262b;
  --bk-text-muted: #4f545a;
  --bk-text-subtle: #82878d;
  --bk-text-inverted: #ffffff;
  --bk-border: #23262b;
  --bk-border-muted: #c8c8c4;
  --bk-border-strong: #23262b;
  --bk-primary: #1f5fbf;
  --bk-primary-hover: #1a51a4;
  --bk-primary-soft: #dfe9f8;
  --bk-primary-border: #23262b;
  --bk-on-primary: #ffffff;
  --bk-secondary: #b8540c;
  --bk-secondary-soft: #f8e6d8;
  --bk-secondary-border: #23262b;
  --bk-on-secondary: #ffffff;
  --bk-success: #1f7a3f; --bk-success-soft: #dcf0e2; --bk-success-border: #23262b;
  --bk-warning: #9a6a10; --bk-warning-soft: #f7ecd2; --bk-warning-border: #23262b;
  --bk-danger: #b32424; --bk-danger-soft: #f8dede; --bk-danger-border: #23262b;
  --bk-info: #1f5fbf; --bk-info-soft: #dfe9f8; --bk-info-border: #23262b;
  --bk-neutral: #23262b; --bk-neutral-soft: #f0f0ed; --bk-neutral-border: #23262b;
  --bk-on-neutral: #ffffff;
  --bk-field-bg: #ffffff;
  --bk-field-border: #23262b;
  --bk-card-bg: #ffffff;
  --bk-card-border: #23262b;
  --bk-code-bg: #f0f0ed;
  --bk-code-border: #23262b;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #23262b;
  --bk-tooltip-bg: #23262b;
  --bk-tooltip-fg: #ffffff;
  --bk-divider-color: #23262b;
  --bk-ring: #1f5fbf;
  --bk-body-image: none;
  color-scheme: light;


  --bk-danger: #b32424;
  --bk-danger-soft: #f8dede;
  --bk-info: #1f5fbf;
  --bk-info-soft: #dfe9f8;
  --bk-on-danger: #efd4d4;
  --bk-on-info: #d3e5ed;
  --bk-on-success: #e9f3e8;
  --bk-on-warning: #fefefc;
  --bk-secondary-on-soft: #a54b0b;
  --bk-secondary-text: #b8540c;
  --bk-success: #1f7a3f;
  --bk-success-soft: #dcf0e2;
  --bk-text-subtle: #787d83;
  --bk-warning: #9a6a10;
  --bk-warning-on-soft: #8c600f;
  --bk-warning-soft: #f7ecd2;
  --bk-warning-text: #91640f;
}
}


/* =============================================================================
   SKIN — clay · Claymorphism
   Fat rounded corners, puffy double inner shadows, candy pastels. Everything
   looks like it was pressed out of Play-Doh.
   ========================================================================== */

[data-bk-style="clay"] {
  --bk-font-sans: "Quicksand", "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --bk-heading-weight: 700;
  --bk-heading-tracking: -0.01em;

  --bk-bg: #f3f0ff;
  --bk-bg-subtle: #ede8ff;
  --bk-bg-muted: #e3dcff;
  --bk-surface: #ffffff;
  --bk-surface-2: #f6f3ff;
  --bk-surface-3: #ebe5ff;
  --bk-surface-inverted: #2b2352;

  --bk-text: #35306b;
  --bk-text-muted: #6b649c;
  --bk-text-subtle: #948dc0;
  --bk-text-inverted: #ffffff;

  --bk-border: rgb(120 110 200 / 0.16);
  --bk-border-muted: rgb(120 110 200 / 0.1);
  --bk-border-strong: rgb(120 110 200 / 0.3);

  --bk-primary: #8b7bff;
  --bk-primary-hover: #7c6aff;
  --bk-primary-active: #6d59fa;
  --bk-primary-soft: #e9e5ff;
  --bk-primary-border: rgb(139 123 255 / 0.35);
  --bk-on-primary: #ffffff;
  --bk-secondary: #4fd1c5;
  --bk-secondary-hover: #3cc2b6;
  --bk-secondary-soft: #d9f7f4;
  --bk-secondary-border: rgb(79 209 197 / 0.4);
  --bk-on-secondary: #05302c;
  --bk-success: #5cd68f;
  --bk-success-soft: #ddf7e8;
  --bk-success-border: rgb(92 214 143 / 0.4);
  --bk-on-success: #06301a;
  --bk-warning: #ffc46b;
  --bk-warning-soft: #fff1dc;
  --bk-warning-border: rgb(255 196 107 / 0.45);
  --bk-on-warning: #40270a;
  --bk-danger: #ff8095;
  --bk-danger-soft: #ffe4e9;
  --bk-danger-border: rgb(255 128 149 / 0.4);
  --bk-on-danger: #45091a;
  --bk-info: #74b9ff;
  --bk-info-soft: #ddeeff;
  --bk-info-border: rgb(116 185 255 / 0.4);
  --bk-on-info: #06263f;
  --bk-neutral: #7d76b5;
  --bk-neutral-soft: #ece9fb;
  --bk-neutral-border: rgb(120 110 200 / 0.22);
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 2.6;
  --bk-radius-field: var(--bk-radius-2xl);
  --bk-radius-card: var(--bk-radius-3xl);
  --bk-radius-overlay: var(--bk-radius-3xl);

  --_clay-in: inset -6px -6px 12px rgb(255 255 255 / 0.85), inset 5px 5px 10px rgb(140 128 220 / 0.22);
  --bk-shadow-xs: var(--_clay-in), 0 4px 8px rgb(120 110 200 / 0.14);
  --bk-shadow-sm: var(--_clay-in), 0 8px 16px rgb(120 110 200 / 0.18);
  --bk-shadow-md: var(--_clay-in), 0 12px 24px rgb(120 110 200 / 0.2);
  --bk-shadow-lg: var(--_clay-in), 0 18px 36px rgb(120 110 200 / 0.24);
  --bk-shadow-xl: var(--_clay-in), 0 26px 52px rgb(120 110 200 / 0.28);
  --bk-shadow-2xl: var(--_clay-in), 0 36px 72px rgb(120 110 200 / 0.32);
  --bk-shadow-inner: inset 6px 6px 12px rgb(140 128 220 / 0.25), inset -6px -6px 12px rgb(255 255 255 / 0.9);

  --bk-btn-shadow: var(--bk-shadow-sm);
  --bk-btn-shadow-hover: var(--bk-shadow-md);
  --bk-btn-shadow-active: inset -3px -3px 8px rgb(255 255 255 / 0.5), inset 4px 4px 10px rgb(100 88 190 / 0.3);
  --bk-btn-border-width: 0px;
  --bk-btn-weight: 700;
  --bk-press-transform: scale(0.97);
  --bk-hover-transform: translateY(-3px);

  --bk-field-bg: #ffffff;
  --bk-field-border: transparent;
  --bk-field-border-width: 0px;
  --bk-field-shadow: inset 4px 4px 10px rgb(140 128 220 / 0.16), inset -4px -4px 10px rgb(255 255 255 / 0.9);
  --bk-field-shadow-focus: inset 4px 4px 10px rgb(140 128 220 / 0.22), 0 0 0 3px rgb(139 123 255 / 0.25);
  --bk-field-placeholder: #a49dcc;
  --bk-card-border-width: 0px;
  --bk-card-shadow: var(--bk-shadow-md);
  --bk-card-shadow-hover: var(--bk-shadow-lg);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-border: transparent;
  --bk-overlay-bg: rgb(80 70 160 / 0.35);
  --bk-code-bg: #f0ecff;
  --bk-code-border: transparent;
  --bk-tooltip-bg: #4b4383;
  --bk-selection-bg: rgb(139 123 255 / 0.3);
  --bk-scrollbar-thumb: #cfc6f5;
  --bk-divider-color: rgb(120 110 200 / 0.18);
  --bk-ring: #8b7bff;
  --bk-ring-offset: 3px;
}

[data-bk-style="clay"][data-bk-theme="dark"] {
  --bk-bg: #1a1730;
  --bk-bg-subtle: #201c3a;
  --bk-surface: #241f42;
  --bk-surface-2: #2b2550;
  --bk-surface-3: #342d61;
  --bk-text: #e9e5ff;
  --bk-text-muted: #b0a8dd;
  --bk-text-subtle: #837bb3;
  --bk-border: rgb(180 165 255 / 0.14);
  --bk-border-strong: rgb(180 165 255 / 0.26);
  --bk-primary: #a99bff;
  --bk-primary-soft: #322a5c;
  --_clay-in: inset -6px -6px 12px rgb(255 255 255 / 0.05), inset 5px 5px 10px rgb(0 0 0 / 0.45);
  --bk-shadow-inner: inset 6px 6px 12px rgb(0 0 0 / 0.5), inset -6px -6px 12px rgb(255 255 255 / 0.04);
  --bk-field-bg: #241f42;
  --bk-field-shadow: inset 4px 4px 10px rgb(0 0 0 / 0.45), inset -4px -4px 10px rgb(255 255 255 / 0.04);
  --bk-code-bg: #2b2550;
  --bk-tooltip-bg: #e9e5ff;
  --bk-tooltip-fg: #1a1730;
  --bk-scrollbar-thumb: #3e3670;
}

[data-bk-style="clay"] .bk-btn-solid,
[data-bk-style="clay"] .bk-btn-primary,
[data-bk-style="clay"] .bk-btn-danger,
[data-bk-style="clay"] .bk-btn-success { text-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
[data-bk-style="clay"] .bk-avatar { box-shadow: var(--bk-shadow-xs); }
[data-bk-style="clay"] .bk-badge,
[data-bk-style="clay"] .bk-chip { box-shadow: inset -2px -2px 5px rgb(255 255 255 / 0.6), inset 2px 2px 5px rgb(140 128 220 / 0.2); }
[data-bk-style="clay"] .bk-progress { box-shadow: var(--bk-shadow-inner); }
[data-bk-style="clay"] .bk-progress-bar { box-shadow: inset 0 -2px 4px rgb(0 0 0 / 0.1), inset 0 2px 4px rgb(255 255 255 / 0.4); }
[data-bk-style="clay"] .bk-switch { box-shadow: var(--bk-shadow-inner); }
[data-bk-style="clay"] .bk-switch::before { box-shadow: 0 3px 6px rgb(120 110 200 / 0.4); }
[data-bk-style="clay"] .bk-check { box-shadow: var(--bk-field-shadow); border: 0; }
[data-bk-style="clay"] .bk-tablist { border-block-end: 0; }
[data-bk-style="clay"] .bk-tab { border-radius: var(--bk-radius-2xl); border-block-end: 0; }
[data-bk-style="clay"] .bk-tab[aria-selected="true"] { background: var(--bk-surface); box-shadow: var(--bk-shadow-sm); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="clay"] {
  --bk-danger-on-soft: #cc0022;
  --bk-danger-text: #d70024;
  --bk-field-placeholder: #9189c2;
  --bk-info-on-soft: #0065cb;
  --bk-info-text: #0067d0;
  --bk-neutral: #7d76b5;
  --bk-neutral-on-soft: #645ca7;
  --bk-neutral-soft: #ece9fb;
  --bk-neutral-text: #6a62aa;
  --bk-on-neutral: #0d0d0d;
  --bk-on-primary: #242424;
  --bk-primary: #8b7bff;
  --bk-primary-on-soft: #553eff;
  --bk-primary-soft: #e9e5ff;
  --bk-primary-text: #5e48ff;
  --bk-secondary-on-soft: #1f776f;
  --bk-secondary-text: #1f776f;
  --bk-success-on-soft: #1f7a45;
  --bk-success-text: #1f7a45;
  --bk-text-muted: #645e93;
  --bk-text-subtle: #8279b5;
  --bk-warning-on-soft: #995c00;
  --bk-warning-text: #995c00;
}
[data-bk-style="clay"][data-bk-theme="dark"] {
  --bk-danger-on-soft: #cc0022;
  --bk-danger-text: #ff8095;
  --bk-field-placeholder: #a49dcc;
  --bk-info-on-soft: #0065cb;
  --bk-info-text: #74b9ff;
  --bk-neutral: #7d76b5;
  --bk-neutral-on-soft: #645ca7;
  --bk-neutral-soft: #ece9fb;
  --bk-neutral-text: #908ac0;
  --bk-on-neutral: #0d0d0d;
  --bk-on-primary: #3b3b3b;
  --bk-primary: #a99bff;
  --bk-primary-on-soft: #a99bff;
  --bk-primary-soft: #322a5c;
  --bk-primary-text: #a99bff;
  --bk-secondary-on-soft: #1f776f;
  --bk-secondary-text: #4fd1c5;
  --bk-success-on-soft: #1f7a45;
  --bk-success-text: #5cd68f;
  --bk-text-muted: #b0a8dd;
  --bk-text-subtle: #837bb3;
  --bk-warning-on-soft: #995c00;
  --bk-warning-text: #ffc46b;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "clay" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="clay"][data-bk-theme="auto"] {
  --bk-bg: #1a1730;
  --bk-bg-subtle: #201c3a;
  --bk-surface: #241f42;
  --bk-surface-2: #2b2550;
  --bk-surface-3: #342d61;
  --bk-text: #e9e5ff;
  --bk-text-muted: #b0a8dd;
  --bk-text-subtle: #837bb3;
  --bk-border: rgb(180 165 255 / 0.14);
  --bk-border-strong: rgb(180 165 255 / 0.26);
  --bk-primary: #a99bff;
  --bk-primary-soft: #322a5c;
  --_clay-in: inset -6px -6px 12px rgb(255 255 255 / 0.05), inset 5px 5px 10px rgb(0 0 0 / 0.45);
  --bk-shadow-inner: inset 6px 6px 12px rgb(0 0 0 / 0.5), inset -6px -6px 12px rgb(255 255 255 / 0.04);
  --bk-field-bg: #241f42;
  --bk-field-shadow: inset 4px 4px 10px rgb(0 0 0 / 0.45), inset -4px -4px 10px rgb(255 255 255 / 0.04);
  --bk-code-bg: #2b2550;
  --bk-tooltip-bg: #e9e5ff;
  --bk-tooltip-fg: #1a1730;
  --bk-scrollbar-thumb: #3e3670;


  --bk-danger-on-soft: #cc0022;
  --bk-danger-text: #ff8095;
  --bk-field-placeholder: #a49dcc;
  --bk-info-on-soft: #0065cb;
  --bk-info-text: #74b9ff;
  --bk-neutral: #7d76b5;
  --bk-neutral-on-soft: #645ca7;
  --bk-neutral-soft: #ece9fb;
  --bk-neutral-text: #908ac0;
  --bk-on-neutral: #0d0d0d;
  --bk-on-primary: #3b3b3b;
  --bk-primary: #a99bff;
  --bk-primary-on-soft: #a99bff;
  --bk-primary-soft: #322a5c;
  --bk-primary-text: #a99bff;
  --bk-secondary-on-soft: #1f776f;
  --bk-secondary-text: #4fd1c5;
  --bk-success-on-soft: #1f7a45;
  --bk-success-text: #5cd68f;
  --bk-text-muted: #b0a8dd;
  --bk-text-subtle: #837bb3;
  --bk-warning-on-soft: #995c00;
  --bk-warning-text: #ffc46b;
}
}


/* =============================================================================
   SKIN — clinical · Instrumentation
   Sterile white, one mint accent, hairline dividers and a strict tabular grid.
   Nothing decorative survives contact with a chart that has to be read at a
   glance and trusted.
   ========================================================================== */

[data-bk-style="clinical"] {
  --bk-font-sans: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bk-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 600;
  --bk-heading-tracking: -0.015em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.1em;
  --bk-font-variant-numeric: tabular-nums lining-nums;

  --bk-bg: #fbfdfd;
  --bk-bg-subtle: #f2f7f7;
  --bk-bg-muted: #e7efef;
  --bk-surface: #ffffff;
  --bk-surface-2: #f4f9f9;
  --bk-surface-3: #e6eeee;
  --bk-surface-inverted: #10201f;

  --bk-text: #0f1e1d;
  --bk-text-muted: #47605e;
  --bk-text-subtle: #7b918f;
  --bk-text-inverted: #ffffff;

  --bk-border: #d3e2e1;
  --bk-border-muted: #e8f0f0;
  --bk-border-strong: #9fb9b7;
  --bk-border-width: 1px;

  --bk-primary: #00786e;
  --bk-primary-hover: #00655d;
  --bk-primary-active: #00534c;
  --bk-primary-soft: #d7f0ed;
  --bk-primary-border: #96d5ce;
  --bk-on-primary: #ffffff;
  --bk-secondary: #12557f;
  --bk-secondary-hover: #0e466a;
  --bk-secondary-soft: #dceaf3;
  --bk-secondary-border: #9cc4dc;
  --bk-on-secondary: #ffffff;
  --bk-success: #1b7a41;
  --bk-success-soft: #dcf0e3;
  --bk-success-border: #9ad4b1;
  --bk-warning: #8a6100;
  --bk-warning-soft: #f8ecd2;
  --bk-warning-border: #e0c281;
  --bk-danger: #b21f34;
  --bk-danger-soft: #fadee2;
  --bk-danger-border: #eda6b1;
  --bk-info: #12557f;
  --bk-info-soft: #dceaf3;
  --bk-info-border: #9cc4dc;
  --bk-neutral: #0f1e1d;
  --bk-neutral-soft: #eef4f4;
  --bk-neutral-border: #d3e2e1;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 0.5;
  --bk-radius-field: 3px;
  --bk-radius-card: 4px;
  --bk-radius-overlay: 6px;
  --bk-radius-pill: 9999px;

  --bk-shadow-color: 178 25% 25%;
  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: 0 1px 2px rgb(15 30 29 / 0.06);
  --bk-shadow-lg: 0 2px 10px rgb(15 30 29 / 0.08);
  --bk-shadow-xl: 0 8px 28px rgb(15 30 29 / 0.12);
  --bk-shadow-2xl: 0 18px 48px rgb(15 30 29 / 0.16);
  --bk-shadow-inner: none;

  --bk-ring: #00786e;
  --bk-ring-width: 2px;
  --bk-ring-offset: 1px;

  --bk-btn-weight: 600;
  --bk-btn-border-width: 1px;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-press-transform: none;
  --bk-hover-transform: none;

  --bk-field-bg: #ffffff;
  --bk-field-border: #b6cccb;
  --bk-field-border-hover: #00786e;
  --bk-field-shadow: none;
  --bk-field-placeholder: #93a9a8;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: var(--bk-shadow-md);
  --bk-card-pad: var(--bk-space-5);
  --bk-overlay-surface: #ffffff;
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(15 30 29 / 0.35);
  --bk-code-bg: #f2f7f7;
  --bk-code-border: #d3e2e1;
  --bk-tooltip-bg: #0f1e1d;
  --bk-selection-bg: rgb(0 120 110 / 0.18);
  --bk-scrollbar-thumb: #cadcdb;
  --bk-divider-color: #d3e2e1;
  --bk-table-pad: var(--bk-space-2);
}

[data-bk-style="clinical"][data-bk-theme="dark"] {
  --bk-bg: #0a1413;
  --bk-bg-subtle: #0e1a19;
  --bk-surface: #101d1c;
  --bk-surface-2: #142423;
  --bk-surface-3: #1b2e2c;
  --bk-text: #e2eeed;
  --bk-text-muted: #a1b7b5;
  --bk-text-subtle: #77908d;
  --bk-text-inverted: #0a1413;
  --bk-border: #223634;
  --bk-border-muted: #172625;
  --bk-border-strong: #4b6a67;
  --bk-primary: #3fd0c0;
  --bk-primary-hover: #5adacc;
  --bk-primary-soft: #0b2c29;
  --bk-primary-border: #1c5a53;
  --bk-on-primary: #00130f;
  --bk-secondary: #62aede;
  --bk-secondary-soft: #0d2434;
  --bk-secondary-border: #1e4c6b;
  --bk-on-secondary: #01121c;
  --bk-success: #4fc07d; --bk-success-soft: #0e2a1b; --bk-success-border: #1e5735;
  --bk-warning: #e0ac3f; --bk-warning-soft: #2c2410; --bk-warning-border: #5b4a1c;
  --bk-danger: #f0728a; --bk-danger-soft: #2f1219; --bk-danger-border: #632533;
  --bk-info: #62aede; --bk-info-soft: #0d2434; --bk-info-border: #1e4c6b;
  --bk-neutral: #e2eeed; --bk-neutral-soft: #142423; --bk-neutral-border: #223634;
  --bk-on-neutral: #0a1413;
  --bk-field-bg: #0c1817;
  --bk-field-border: #2c4442;
  --bk-code-bg: #0e1a19;
  --bk-code-border: #223634;
  --bk-overlay-surface: #101d1c;
  --bk-tooltip-bg: #e2eeed;
  --bk-tooltip-fg: #0a1413;
  --bk-divider-color: #223634;
}

[data-bk-style="clinical"] .bk-navbar { background: var(--bk-surface); border-block-end: 1px solid var(--bk-border); }
[data-bk-style="clinical"] .bk-table thead th {
  background: var(--bk-surface-2);
  border-block-end: 2px solid var(--bk-border-strong);
  color: var(--bk-text-muted);
}
[data-bk-style="clinical"] .bk-table td { font-variant-numeric: tabular-nums lining-nums; }
[data-bk-style="clinical"] .bk-card { border-inline-start: 3px solid var(--bk-primary); }
[data-bk-style="clinical"] .bk-stat-value { font-family: var(--bk-font-mono); }
[data-bk-style="clinical"] .bk-badge { border-radius: 3px; font-variant-numeric: tabular-nums; }
[data-bk-style="clinical"] .bk-alert { border-inline-start-width: 3px; }
[data-bk-style="clinical"] .bk-progress { block-size: 0.35rem; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="clinical"] {
  --bk-field-placeholder: #7c9796;
  --bk-primary-on-soft: #007369;
  --bk-primary-text: #00786e;
  --bk-text-subtle: #738a88;
}
[data-bk-style="clinical"][data-bk-theme="dark"] {
  --bk-field-placeholder: #93a9a8;
  --bk-primary-on-soft: #3fd0c0;
  --bk-primary-text: #3fd0c0;
  --bk-text-subtle: #77908d;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "clinical" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="clinical"][data-bk-theme="auto"] {
  --bk-bg: #0a1413;
  --bk-bg-subtle: #0e1a19;
  --bk-surface: #101d1c;
  --bk-surface-2: #142423;
  --bk-surface-3: #1b2e2c;
  --bk-text: #e2eeed;
  --bk-text-muted: #a1b7b5;
  --bk-text-subtle: #77908d;
  --bk-text-inverted: #0a1413;
  --bk-border: #223634;
  --bk-border-muted: #172625;
  --bk-border-strong: #4b6a67;
  --bk-primary: #3fd0c0;
  --bk-primary-hover: #5adacc;
  --bk-primary-soft: #0b2c29;
  --bk-primary-border: #1c5a53;
  --bk-on-primary: #00130f;
  --bk-secondary: #62aede;
  --bk-secondary-soft: #0d2434;
  --bk-secondary-border: #1e4c6b;
  --bk-on-secondary: #01121c;
  --bk-success: #4fc07d; --bk-success-soft: #0e2a1b; --bk-success-border: #1e5735;
  --bk-warning: #e0ac3f; --bk-warning-soft: #2c2410; --bk-warning-border: #5b4a1c;
  --bk-danger: #f0728a; --bk-danger-soft: #2f1219; --bk-danger-border: #632533;
  --bk-info: #62aede; --bk-info-soft: #0d2434; --bk-info-border: #1e4c6b;
  --bk-neutral: #e2eeed; --bk-neutral-soft: #142423; --bk-neutral-border: #223634;
  --bk-on-neutral: #0a1413;
  --bk-field-bg: #0c1817;
  --bk-field-border: #2c4442;
  --bk-code-bg: #0e1a19;
  --bk-code-border: #223634;
  --bk-overlay-surface: #101d1c;
  --bk-tooltip-bg: #e2eeed;
  --bk-tooltip-fg: #0a1413;
  --bk-divider-color: #223634;


  --bk-field-placeholder: #93a9a8;
  --bk-primary-on-soft: #3fd0c0;
  --bk-primary-text: #3fd0c0;
  --bk-text-subtle: #77908d;
}
}


/* =============================================================================
   SKIN — comic · Halftone panel
   Heavy ink outlines, halftone dot fields, action-panel yellows and a speech
   bubble tail on every card. Ben-Day dots included, no images used.
   ========================================================================== */

[data-bk-style="comic"] {
  --bk-font-sans: "Bangers", "Comic Neue", "Comic Sans MS", "Chalkboard SE", ui-rounded, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 700;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.03em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.06em;

  --bk-bg: #fff8e6;
  --bk-bg-subtle: #ffefc9;
  --bk-bg-muted: #ffe4a3;
  --bk-surface: #ffffff;
  --bk-surface-2: #fff4d6;
  --bk-surface-3: #ffe9b3;
  --bk-surface-inverted: #16110c;

  --bk-text: #16110c;
  --bk-text-muted: #453a2c;
  --bk-text-subtle: #7b6b55;
  --bk-text-inverted: #fff8e6;

  --bk-border: #16110c;
  --bk-border-muted: #16110c;
  --bk-border-strong: #16110c;
  --bk-border-width: 3px;

  --bk-primary: #e8262d;
  --bk-primary-hover: #cf1f26;
  --bk-primary-active: #b31a20;
  --bk-primary-soft: #ffdcdd;
  --bk-primary-border: #16110c;
  --bk-on-primary: #ffffff;
  --bk-secondary: #1e6fd9;
  --bk-secondary-hover: #1a5fbb;
  --bk-secondary-soft: #d9e7fb;
  --bk-secondary-border: #16110c;
  --bk-on-secondary: #ffffff;
  --bk-success: #17913f;
  --bk-success-soft: #d7f2df;
  --bk-success-border: #16110c;
  --bk-warning: #f5a300;
  --bk-warning-soft: #fdeec7;
  --bk-warning-border: #16110c;
  --bk-on-warning: #16110c;
  --bk-danger: #e8262d;
  --bk-danger-soft: #ffdcdd;
  --bk-danger-border: #16110c;
  --bk-info: #1e6fd9;
  --bk-info-soft: #d9e7fb;
  --bk-info-border: #16110c;
  --bk-neutral: #16110c;
  --bk-neutral-soft: #fff4d6;
  --bk-neutral-border: #16110c;
  --bk-on-neutral: #fff8e6;

  --bk-radius-scale: 1;
  --bk-radius-field: var(--bk-radius-md);
  --bk-radius-card: var(--bk-radius-lg);
  --bk-radius-overlay: var(--bk-radius-lg);

  --bk-shadow-xs: 2px 2px 0 #16110c;
  --bk-shadow-sm: 3px 3px 0 #16110c;
  --bk-shadow-md: 5px 5px 0 #16110c;
  --bk-shadow-lg: 7px 7px 0 #16110c;
  --bk-shadow-xl: 10px 10px 0 #16110c;
  --bk-shadow-2xl: 14px 14px 0 #16110c;
  --bk-shadow-inner: inset 3px 3px 0 rgb(22 17 12 / 0.15);

  --bk-ring: #1e6fd9;
  --bk-ring-width: 3px;
  --bk-ring-offset: 2px;

  --bk-btn-border-width: 3px;
  --bk-btn-weight: 700;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.06em;
  --bk-btn-shadow: 4px 4px 0 #16110c;
  --bk-btn-shadow-hover: 6px 6px 0 #16110c;
  --bk-btn-shadow-active: 1px 1px 0 #16110c;
  --bk-press-transform: translate(3px, 3px);
  --bk-hover-transform: translate(-1px, -1px) rotate(-1deg);

  --bk-field-bg: #ffffff;
  --bk-field-border: #16110c;
  --bk-field-border-width: 3px;
  --bk-field-shadow: 3px 3px 0 #16110c;
  --bk-field-shadow-focus: 3px 3px 0 var(--bk-secondary), 0 0 0 3px #16110c;
  --bk-field-placeholder: #9a8a72;

  --bk-card-border-width: 3px;
  --bk-card-shadow: 6px 6px 0 #16110c;
  --bk-card-shadow-hover: 9px 9px 0 #16110c;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #16110c;
  --bk-overlay-shadow: 10px 10px 0 #16110c;
  --bk-overlay-bg: rgb(22 17 12 / 0.4);
  --bk-code-bg: #fff4d6;
  --bk-code-border: #16110c;
  --bk-tooltip-bg: #16110c;
  --bk-selection-bg: #f5a300;
  --bk-selection-fg: #16110c;
  --bk-scrollbar-thumb: #16110c;
  --bk-divider-color: #16110c;
  --bk-divider-width: 3px;

  /* Ben-Day dots, drawn with a repeating radial gradient. */
  --bk-body-image:
    radial-gradient(circle at 50% 50%, rgb(232 38 45 / 0.13) 1.6px, transparent 1.7px);
  --bk-body-attachment: fixed;
}
[data-bk-style="comic"] body,
body[data-bk-style="comic"] { background-size: 9px 9px; }

[data-bk-style="comic"][data-bk-theme="dark"] {
  --bk-bg: #14110d;
  --bk-bg-subtle: #1c1813;
  --bk-surface: #1c1813;
  --bk-surface-2: #262019;
  --bk-surface-3: #322a20;
  --bk-text: #fff8e6;
  --bk-text-muted: #d3c8b2;
  --bk-text-subtle: #9d9280;
  --bk-text-inverted: #14110d;
  --bk-border: #fff8e6;
  --bk-border-muted: #fff8e6;
  --bk-border-strong: #fff8e6;
  --bk-primary-border: #fff8e6;
  --bk-secondary-border: #fff8e6;
  --bk-neutral: #fff8e6;
  --bk-neutral-soft: #262019;
  --bk-neutral-border: #fff8e6;
  --bk-on-neutral: #14110d;
  --bk-shadow-xs: 2px 2px 0 #fff8e6;
  --bk-shadow-sm: 3px 3px 0 #fff8e6;
  --bk-shadow-md: 5px 5px 0 #fff8e6;
  --bk-shadow-lg: 7px 7px 0 #fff8e6;
  --bk-shadow-xl: 10px 10px 0 #fff8e6;
  --bk-shadow-2xl: 14px 14px 0 #fff8e6;
  --bk-btn-shadow: 4px 4px 0 #fff8e6;
  --bk-btn-shadow-hover: 6px 6px 0 #fff8e6;
  --bk-btn-shadow-active: 1px 1px 0 #fff8e6;
  --bk-field-bg: #1c1813;
  --bk-field-border: #fff8e6;
  --bk-field-shadow: 3px 3px 0 #fff8e6;
  --bk-card-shadow: 6px 6px 0 #fff8e6;
  --bk-card-shadow-hover: 9px 9px 0 #fff8e6;
  --bk-overlay-surface: #1c1813;
  --bk-overlay-border: #fff8e6;
  --bk-overlay-shadow: 10px 10px 0 #fff8e6;
  --bk-code-bg: #262019;
  --bk-code-border: #fff8e6;
  --bk-tooltip-bg: #fff8e6;
  --bk-tooltip-fg: #14110d;
  --bk-divider-color: #fff8e6;
  --bk-body-image: radial-gradient(circle at 50% 50%, rgb(255 248 230 / 0.07) 1.6px, transparent 1.7px);
}

[data-bk-style="comic"] .bk-display,
[data-bk-style="comic"] .bk-title {
  -webkit-text-stroke: 2px var(--bk-border);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--bk-warning);
}
[data-bk-style="comic"] .bk-badge { border: 2px solid var(--bk-border); font-weight: 700; }
[data-bk-style="comic"] .bk-avatar { border: 3px solid var(--bk-border); }
[data-bk-style="comic"] .bk-navbar { border-block-end: 4px solid var(--bk-border); }
[data-bk-style="comic"] .bk-table thead th { background: var(--bk-warning); color: #16110c; border-block-end: 3px solid var(--bk-border); }
[data-bk-style="comic"] .bk-progress { border: 3px solid var(--bk-border); background: var(--bk-surface); }
[data-bk-style="comic"] .bk-switch { border: 3px solid var(--bk-border); background: var(--bk-surface); }
[data-bk-style="comic"] .bk-switch::before { background: var(--bk-border); box-shadow: none; }
[data-bk-style="comic"] .bk-switch:checked { background: var(--bk-warning); }
[data-bk-style="comic"] .bk-check { border-width: 3px; }
[data-bk-style="comic"] .bk-tab[aria-selected="true"] { background: var(--bk-warning); color: #16110c; border-block-end-width: 3px; }
/* A speech-bubble tail on quote blocks. */
[data-bk-style="comic"] .bk-blockquote {
  position: relative;
  border: 3px solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
  background: var(--bk-surface);
  font-style: normal;
}
[data-bk-style="comic"] .bk-blockquote::after {
  content: "";
  position: absolute;
  inset-block-end: -14px;
  inset-inline-start: 2rem;
  inline-size: 0;
  block-size: 0;
  border-inline: 10px solid transparent;
  border-block-start: 14px solid var(--bk-border);
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="comic"] {
  --bk-danger: #e8262d;
  --bk-danger-on-soft: #c6151b;
  --bk-danger-soft: #ffdcdd;
  --bk-danger-text: #dd171f;
  --bk-info: #1e6fd9;
  --bk-info-on-soft: #1a61be;
  --bk-info-soft: #d9e7fb;
  --bk-info-text: #1e6fd9;
  --bk-on-danger: #000000;
  --bk-on-info: #ffffff;
  --bk-on-primary: #000000;
  --bk-on-success: #0f0f0f;
  --bk-primary: #e8262d;
  --bk-primary-on-soft: #c6151b;
  --bk-primary-soft: #ffdcdd;
  --bk-primary-text: #dd171f;
  --bk-secondary-on-soft: #1a61be;
  --bk-secondary-text: #1e6fd9;
  --bk-success: #17913f;
  --bk-success-on-soft: #137734;
  --bk-success-soft: #d7f2df;
  --bk-success-text: #147f37;
  --bk-warning-on-soft: #8f5f00;
  --bk-warning-text: #946300;
}
[data-bk-style="comic"][data-bk-theme="dark"] {
  --bk-danger: #e8262d;
  --bk-danger-on-soft: #c6151b;
  --bk-danger-soft: #ffdcdd;
  --bk-danger-text: #ec4b51;
  --bk-info: #1e6fd9;
  --bk-info-on-soft: #1a61be;
  --bk-info-soft: #d9e7fb;
  --bk-info-text: #3c85e4;
  --bk-on-danger: #040101;
  --bk-on-info: #f9fcfe;
  --bk-on-primary: #000000;
  --bk-on-success: #04180d;
  --bk-primary: #e8262d;
  --bk-primary-on-soft: #c6151b;
  --bk-primary-soft: #ffdcdd;
  --bk-primary-text: #ec4b51;
  --bk-secondary-on-soft: #1a61be;
  --bk-secondary-text: #3c85e4;
  --bk-success: #17913f;
  --bk-success-on-soft: #137734;
  --bk-success-soft: #d7f2df;
  --bk-success-text: #189a43;
  --bk-warning-on-soft: #8f5f00;
  --bk-warning-text: #f5a300;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "comic" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="comic"][data-bk-theme="auto"] {
  --bk-bg: #14110d;
  --bk-bg-subtle: #1c1813;
  --bk-surface: #1c1813;
  --bk-surface-2: #262019;
  --bk-surface-3: #322a20;
  --bk-text: #fff8e6;
  --bk-text-muted: #d3c8b2;
  --bk-text-subtle: #9d9280;
  --bk-text-inverted: #14110d;
  --bk-border: #fff8e6;
  --bk-border-muted: #fff8e6;
  --bk-border-strong: #fff8e6;
  --bk-primary-border: #fff8e6;
  --bk-secondary-border: #fff8e6;
  --bk-neutral: #fff8e6;
  --bk-neutral-soft: #262019;
  --bk-neutral-border: #fff8e6;
  --bk-on-neutral: #14110d;
  --bk-shadow-xs: 2px 2px 0 #fff8e6;
  --bk-shadow-sm: 3px 3px 0 #fff8e6;
  --bk-shadow-md: 5px 5px 0 #fff8e6;
  --bk-shadow-lg: 7px 7px 0 #fff8e6;
  --bk-shadow-xl: 10px 10px 0 #fff8e6;
  --bk-shadow-2xl: 14px 14px 0 #fff8e6;
  --bk-btn-shadow: 4px 4px 0 #fff8e6;
  --bk-btn-shadow-hover: 6px 6px 0 #fff8e6;
  --bk-btn-shadow-active: 1px 1px 0 #fff8e6;
  --bk-field-bg: #1c1813;
  --bk-field-border: #fff8e6;
  --bk-field-shadow: 3px 3px 0 #fff8e6;
  --bk-card-shadow: 6px 6px 0 #fff8e6;
  --bk-card-shadow-hover: 9px 9px 0 #fff8e6;
  --bk-overlay-surface: #1c1813;
  --bk-overlay-border: #fff8e6;
  --bk-overlay-shadow: 10px 10px 0 #fff8e6;
  --bk-code-bg: #262019;
  --bk-code-border: #fff8e6;
  --bk-tooltip-bg: #fff8e6;
  --bk-tooltip-fg: #14110d;
  --bk-divider-color: #fff8e6;
  --bk-body-image: radial-gradient(circle at 50% 50%, rgb(255 248 230 / 0.07) 1.6px, transparent 1.7px);


  --bk-danger: #e8262d;
  --bk-danger-on-soft: #c6151b;
  --bk-danger-soft: #ffdcdd;
  --bk-danger-text: #ec4b51;
  --bk-info: #1e6fd9;
  --bk-info-on-soft: #1a61be;
  --bk-info-soft: #d9e7fb;
  --bk-info-text: #3c85e4;
  --bk-on-danger: #040101;
  --bk-on-info: #f9fcfe;
  --bk-on-primary: #000000;
  --bk-on-success: #04180d;
  --bk-primary: #e8262d;
  --bk-primary-on-soft: #c6151b;
  --bk-primary-soft: #ffdcdd;
  --bk-primary-text: #ec4b51;
  --bk-secondary-on-soft: #1a61be;
  --bk-secondary-text: #3c85e4;
  --bk-success: #17913f;
  --bk-success-on-soft: #137734;
  --bk-success-soft: #d7f2df;
  --bk-success-text: #189a43;
  --bk-warning-on-soft: #8f5f00;
  --bk-warning-text: #f5a300;
}
}


/* =============================================================================
   SKIN — cyber · Cyberpunk / HUD
   Chamfered corners, neon rim-light, magenta-on-cyan, and just enough scanline
   to feel like you're reading it through a visor.
   ========================================================================== */

[data-bk-style="cyber"] {
  --bk-font-sans: "Rajdhani", "Chakra Petch", "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --bk-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 700;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.05em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.12em;

  --bk-bg: #06060f;
  --bk-bg-subtle: #0b0b18;
  --bk-bg-muted: #12122a;
  --bk-surface: #0c0c1b;
  --bk-surface-2: #121228;
  --bk-surface-3: #1a1a38;
  --bk-surface-inverted: #f0f6ff;

  --bk-text: #e6f7ff;
  --bk-text-muted: #94a8c8;
  --bk-text-subtle: #61738f;
  --bk-text-inverted: #06060f;

  --bk-border: #23244a;
  --bk-border-muted: #191a35;
  --bk-border-strong: #3a3c74;

  --bk-primary: #00e5ff;
  --bk-primary-hover: #4ceeff;
  --bk-primary-active: #7ef4ff;
  --bk-primary-soft: #062b34;
  --bk-primary-border: #0e6d80;
  --bk-on-primary: #001418;

  --bk-secondary: #ff2e88;
  --bk-secondary-hover: #ff57a0;
  --bk-secondary-active: #ff7fb5;
  --bk-secondary-soft: #33081c;
  --bk-secondary-border: #7d1543;
  --bk-on-secondary: #16000a;

  --bk-success: #39ff8b;
  --bk-success-soft: #052b17;
  --bk-success-border: #10683a;
  --bk-on-success: #00170a;
  --bk-warning: #ffd426;
  --bk-warning-soft: #2e2604;
  --bk-warning-border: #6d5c0d;
  --bk-on-warning: #1a1500;
  --bk-danger: #ff3b5c;
  --bk-danger-soft: #310711;
  --bk-danger-border: #7a172f;
  --bk-on-danger: #170005;
  --bk-info: #8b5cf6;
  --bk-info-soft: #1c1038;
  --bk-info-border: #452a80;
  --bk-on-info: #0a0418;
  --bk-neutral: #94a8c8;
  --bk-neutral-soft: #121228;
  --bk-neutral-border: #23244a;
  --bk-on-neutral: #06060f;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;
  --bk-corner-cut: 10px;

  --bk-shadow-xs: 0 0 0 1px rgb(0 229 255 / 0.12);
  --bk-shadow-sm: 0 0 8px rgb(0 229 255 / 0.18);
  --bk-shadow-md: 0 0 16px rgb(0 229 255 / 0.24);
  --bk-shadow-lg: 0 0 28px rgb(0 229 255 / 0.3), 0 0 60px rgb(255 46 136 / 0.14);
  --bk-shadow-xl: 0 0 44px rgb(0 229 255 / 0.36), 0 0 90px rgb(255 46 136 / 0.18);
  --bk-shadow-2xl: 0 0 64px rgb(0 229 255 / 0.42), 0 0 120px rgb(255 46 136 / 0.22);
  --bk-shadow-inner: inset 0 0 18px rgb(0 229 255 / 0.12);

  --bk-ring: #00e5ff;
  --bk-ring-width: 1px;
  --bk-ring-offset: 3px;

  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.14em;
  --bk-btn-weight: 700;
  --bk-btn-border-width: 1px;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: 0 0 14px rgb(0 229 255 / 0.5);
  --bk-btn-shadow-active: none;
  --bk-press-transform: translateY(1px);

  --bk-field-bg: #080814;
  --bk-field-bg-hover: #0c0c1b;
  --bk-field-border: #2c2e5c;
  --bk-field-border-hover: #00e5ff;
  --bk-field-shadow: inset 0 0 12px rgb(0 229 255 / 0.06);
  --bk-field-shadow-focus: inset 0 0 12px rgb(0 229 255 / 0.14), 0 0 12px rgb(0 229 255 / 0.3);
  --bk-field-placeholder: #4d5c78;

  --bk-card-bg: #0c0c1b;
  --bk-card-border: #23244a;
  --bk-card-shadow: 0 0 0 1px rgb(0 229 255 / 0.08);
  --bk-card-shadow-hover: 0 0 24px rgb(0 229 255 / 0.24);
  --bk-overlay-surface: #0c0c1b;
  --bk-overlay-border: #00e5ff;
  --bk-overlay-shadow: 0 0 0 1px rgb(0 229 255 / 0.6), 0 0 60px rgb(0 229 255 / 0.25);
  --bk-overlay-bg: rgb(3 3 12 / 0.82);
  --bk-code-bg: #080814;
  --bk-code-border: #23244a;
  --bk-tooltip-bg: #00e5ff;
  --bk-tooltip-fg: #001418;
  --bk-selection-bg: #ff2e88;
  --bk-selection-fg: #ffffff;
  --bk-scrollbar-thumb: #2c2e5c;
  --bk-divider-color: #23244a;

  --bk-body-image:
    linear-gradient(180deg, rgb(255 46 136 / 0.05), transparent 30%),
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.25) 0 1px, transparent 1px 4px),
    radial-gradient(60rem 40rem at 80% -10%, rgb(0 229 255 / 0.1), transparent 60%),
    radial-gradient(50rem 40rem at 0% 100%, rgb(255 46 136 / 0.09), transparent 60%);
  --bk-body-attachment: fixed;
  color-scheme: dark;
}

[data-bk-style="cyber"] .bk-btn:not(.bk-btn-link),
[data-bk-style="cyber"] .bk-card,
[data-bk-style="cyber"] .bk-input,
[data-bk-style="cyber"] .bk-select,
[data-bk-style="cyber"] .bk-textarea,
[data-bk-style="cyber"] .bk-alert,
[data-bk-style="cyber"] .bk-panel,
[data-bk-style="cyber"] .bk-badge,
[data-bk-style="cyber"] .bk-modal,
[data-bk-style="cyber"] .bk-stat {
  clip-path: polygon(
    var(--bk-corner-cut) 0, 100% 0,
    100% calc(100% - var(--bk-corner-cut)),
    calc(100% - var(--bk-corner-cut)) 100%, 0 100%, 0 var(--bk-corner-cut));
}
[data-bk-style="cyber"] .bk-btn-icon,
[data-bk-style="cyber"] .bk-btn-square,
[data-bk-style="cyber"] .bk-btn-circle,
[data-bk-style="cyber"] .bk-badge-count { --bk-corner-cut: 6px; }
[data-bk-style="cyber"] .bk-card { --bk-corner-cut: 16px; }
[data-bk-style="cyber"] .bk-modal { --bk-corner-cut: 22px; }
[data-bk-style="cyber"] .bk-navbar {
  border-block-end: 1px solid var(--bk-primary-border);
  box-shadow: 0 1px 20px rgb(0 229 255 / 0.15);
}
[data-bk-style="cyber"] .bk-title,
[data-bk-style="cyber"] .bk-display,
[data-bk-style="cyber"] .bk-card-title { text-shadow: 0 0 14px rgb(0 229 255 / 0.4); }
[data-bk-style="cyber"] .bk-tab[aria-selected="true"] {
  text-shadow: 0 0 10px currentColor;
  border-block-end-width: 2px;
}
[data-bk-style="cyber"] .bk-progress { background: #101028; border: 1px solid #2c2e5c; }
[data-bk-style="cyber"] .bk-progress-bar { box-shadow: 0 0 12px var(--bk-primary); }
[data-bk-style="cyber"] .bk-switch { border: 1px solid #2c2e5c; background: #101028; }
[data-bk-style="cyber"] .bk-switch::before { background: #4d5c78; border-radius: 0; }
[data-bk-style="cyber"] .bk-switch:checked::before { background: var(--bk-primary); box-shadow: 0 0 10px var(--bk-primary); }
[data-bk-style="cyber"] .bk-avatar { border-radius: 0; border: 1px solid var(--bk-primary-border); }
[data-bk-style="cyber"] .bk-check { border-radius: 0; }
[data-bk-style="cyber"] .bk-eyebrow { color: var(--bk-secondary); text-shadow: 0 0 10px rgb(255 46 136 / 0.5); }
[data-bk-style="cyber"] .bk-table thead th {
  background: #101028;
  color: var(--bk-primary);
  border-block-end: 1px solid var(--bk-primary-border);
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="cyber"] {
  --bk-field-placeholder: #51617e;
  --bk-info-on-soft: #956af7;
  --bk-info-text: #8b5cf6;
}
[data-bk-style="cyber"][data-bk-theme="dark"] {
  --bk-field-placeholder: #51617e;
  --bk-info-on-soft: #956af7;
  --bk-info-text: #8b5cf6;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "cyber" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="cyber"][data-bk-theme="auto"] {
  --bk-field-placeholder: #51617e;
  --bk-info-on-soft: #956af7;
  --bk-info-text: #8b5cf6;
}
}


/* =============================================================================
   SKIN — deco · Art Deco
   Gold hairlines on midnight, symmetric chamfers, high-contrast display type
   and stepped ornament. 1925 with a stylesheet.
   ========================================================================== */

[data-bk-style="deco"] {
  --bk-font-display: "Cormorant Garamond", "Didot", "Bodoni MT", Georgia, serif;
  --bk-font-serif: var(--bk-font-display);
  --bk-font-sans: "Josefin Sans", "Futura", "Century Gothic", ui-sans-serif, system-ui, sans-serif;
  --bk-font-body: var(--bk-font-sans);
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 600;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.14em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.18em;

  --_gold: #c9a227;
  --_gold-2: #e6c65c;

  --bk-bg: #0e1116;
  --bk-bg-subtle: #131820;
  --bk-bg-muted: #1a2029;
  --bk-surface: #131820;
  --bk-surface-2: #1a2029;
  --bk-surface-3: #232b36;
  --bk-surface-inverted: #f5eedd;

  --bk-text: #f2ead6;
  --bk-text-muted: #b9ae94;
  --bk-text-subtle: #857c68;
  --bk-text-inverted: #0e1116;

  --bk-border: #3c3626;
  --bk-border-muted: #262215;
  --bk-border-strong: var(--_gold);
  --bk-border-width: 1px;

  --bk-primary: var(--_gold);
  --bk-primary-hover: var(--_gold-2);
  --bk-primary-active: #f0d67e;
  --bk-primary-soft: #2a2412;
  --bk-primary-border: #5e5222;
  --bk-on-primary: #14120a;
  --bk-secondary: #1f6f6b;
  --bk-secondary-hover: #2a8681;
  --bk-secondary-soft: #102523;
  --bk-secondary-border: #2c4f4d;
  --bk-on-secondary: #eafaf8;
  --bk-success: #7fae6a;
  --bk-success-soft: #16220f;
  --bk-success-border: #35502a;
  --bk-on-success: #0a1206;
  --bk-warning: #d99b42;
  --bk-warning-soft: #2c2010;
  --bk-warning-border: #5c4522;
  --bk-on-warning: #1a1105;
  --bk-danger: #b5495a;
  --bk-danger-soft: #2a1218;
  --bk-danger-border: #582530;
  --bk-on-danger: #f8e6ea;
  --bk-info: #6d8bb5;
  --bk-info-soft: #16202c;
  --bk-info-border: #2e4059;
  --bk-on-info: #0a1119;
  --bk-neutral: #b9ae94;
  --bk-neutral-soft: #1a2029;
  --bk-neutral-border: #3c3626;
  --bk-on-neutral: #0e1116;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;
  --bk-corner-cut: 12px;

  --bk-shadow-xs: none;
  --bk-shadow-sm: 0 0 0 1px rgb(201 162 39 / 0.16);
  --bk-shadow-md: 0 0 0 1px rgb(201 162 39 / 0.22), 0 8px 24px rgb(0 0 0 / 0.5);
  --bk-shadow-lg: 0 0 0 1px rgb(201 162 39 / 0.3), 0 16px 40px rgb(0 0 0 / 0.6);
  --bk-shadow-xl: 0 0 0 1px rgb(201 162 39 / 0.4), 0 24px 60px rgb(0 0 0 / 0.7);
  --bk-shadow-2xl: 0 0 0 2px rgb(201 162 39 / 0.5), 0 36px 90px rgb(0 0 0 / 0.8);

  --bk-ring: var(--_gold);
  --bk-ring-width: 1px;
  --bk-ring-offset: 3px;

  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.2em;
  --bk-btn-weight: 600;
  --bk-btn-border-width: 1px;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: 0 0 18px rgb(201 162 39 / 0.3);
  --bk-btn-shadow-active: none;
  --bk-press-transform: translateY(1px);

  --bk-field-bg: #0b0e12;
  --bk-field-border: #4a422c;
  --bk-field-border-hover: var(--_gold);
  --bk-field-shadow: none;
  --bk-field-placeholder: #6d6553;

  --bk-card-bg: #131820;
  --bk-card-border: #3c3626;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: 0 0 0 1px var(--_gold);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #131820;
  --bk-overlay-border: var(--_gold);
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(6 8 11 / 0.85);
  --bk-code-bg: #0b0e12;
  --bk-code-border: #3c3626;
  --bk-tooltip-bg: var(--_gold);
  --bk-tooltip-fg: #14120a;
  --bk-selection-bg: rgb(201 162 39 / 0.35);
  --bk-scrollbar-thumb: #4a422c;
  --bk-divider-color: var(--_gold);

  --bk-body-image:
    linear-gradient(180deg, rgb(201 162 39 / 0.05), transparent 22rem),
    repeating-linear-gradient(90deg, rgb(201 162 39 / 0.028) 0 1px, transparent 1px 5rem);
  --bk-body-attachment: fixed;
  color-scheme: dark;
}
[data-bk-style="deco"] .bk-btn:not(.bk-btn-link),
[data-bk-style="deco"] .bk-card,
[data-bk-style="deco"] .bk-modal,
[data-bk-style="deco"] .bk-panel {
  clip-path: polygon(
    var(--bk-corner-cut) 0, calc(100% - var(--bk-corner-cut)) 0, 100% var(--bk-corner-cut),
    100% calc(100% - var(--bk-corner-cut)), calc(100% - var(--bk-corner-cut)) 100%,
    var(--bk-corner-cut) 100%, 0 calc(100% - var(--bk-corner-cut)), 0 var(--bk-corner-cut));
}
[data-bk-style="deco"] .bk-btn:not(.bk-btn-link) { --bk-corner-cut: 8px; }
[data-bk-style="deco"] .bk-card { --bk-corner-cut: 18px; }
[data-bk-style="deco"] .bk-card { position: relative; }
[data-bk-style="deco"] .bk-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgb(201 162 39 / 0.22);
  pointer-events: none;
  clip-path: inherit;
}
[data-bk-style="deco"] .bk-display,
[data-bk-style="deco"] .bk-title { color: var(--_gold); }
[data-bk-style="deco"] .bk-section-head::after {
  content: "◆ ◆ ◆";
  display: block;
  margin-block-start: var(--bk-space-3);
  color: var(--_gold);
  letter-spacing: 0.6em;
  font-size: var(--bk-text-xs);
}
[data-bk-style="deco"] .bk-divider-text::before,
[data-bk-style="deco"] .bk-divider-text::after { border-color: var(--_gold); }
[data-bk-style="deco"] .bk-navbar { border-block-end: 1px solid var(--_gold); background: transparent; }
[data-bk-style="deco"] .bk-navbar-brand { color: var(--_gold); }
[data-bk-style="deco"] .bk-table thead th { color: var(--_gold); border-block-end: 1px solid var(--_gold); background: transparent; }
[data-bk-style="deco"] .bk-avatar { border-radius: 0; border: 1px solid var(--_gold); }
[data-bk-style="deco"] .bk-badge { border: 1px solid currentColor; border-radius: 0; }
[data-bk-style="deco"] .bk-check,
[data-bk-style="deco"] .bk-switch,
[data-bk-style="deco"] .bk-switch::before { border-radius: 0; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="deco"] {
  --bk-danger: #b5495a;
  --bk-danger-on-soft: #c36977;
  --bk-danger-soft: #2a1218;
  --bk-danger-text: #c36977;
  --bk-on-danger: #fbf2f4;
  --bk-secondary-on-soft: #2b9b95;
  --bk-secondary-text: #29938e;
}
[data-bk-style="deco"][data-bk-theme="dark"] {
  --bk-danger: #b5495a;
  --bk-danger-on-soft: #c36977;
  --bk-danger-soft: #2a1218;
  --bk-danger-text: #c36977;
  --bk-on-danger: #fbf2f4;
  --bk-secondary-on-soft: #2b9b95;
  --bk-secondary-text: #29938e;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "deco" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="deco"][data-bk-theme="auto"] {
  --bk-danger: #b5495a;
  --bk-danger-on-soft: #c36977;
  --bk-danger-soft: #2a1218;
  --bk-danger-text: #c36977;
  --bk-on-danger: #fbf2f4;
  --bk-secondary-on-soft: #2b9b95;
  --bk-secondary-text: #29938e;
}
}


/* =============================================================================
   SKIN — denim · Workwear
   Indigo twill with a visible weave, contrast topstitching in orange thread,
   copper rivets and the pale wear along every seam. Sturdy rather than pretty.
   ========================================================================== */

[data-bk-style="denim"] {
  --bk-font-sans: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 700;
  --bk-heading-tracking: -0.01em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.12em;

  --_thread: #e08a3c;
  --_indigo: #2c4a72;

  --bk-bg: #d8dee7;
  --bk-bg-subtle: #ccd4e0;
  --bk-bg-muted: #bcc6d6;
  --bk-surface: #e6eaf1;
  --bk-surface-2: #d3dae5;
  --bk-surface-3: #bfc9d8;
  --bk-surface-inverted: #1b2a3f;

  --bk-text: #1b2a3f;
  --bk-text-muted: #465871;
  --bk-text-subtle: #77869c;
  --bk-text-inverted: #eef2f7;

  --bk-border: #8b9bb3;
  --bk-border-muted: #c0cad9;
  --bk-border-strong: #2c4a72;
  --bk-border-width: 1px;

  --bk-primary: #2c4a72;
  --bk-primary-hover: #243e60;
  --bk-primary-active: #1d334f;
  --bk-primary-soft: #d6dfeb;
  --bk-primary-border: #9db0c9;
  --bk-on-primary: #eef2f7;
  --bk-secondary: #b5651f;
  --bk-secondary-hover: #9c5619;
  --bk-secondary-soft: #f4e5d4;
  --bk-secondary-border: #dfbb8d;
  --bk-on-secondary: #fff8f0;
  --bk-success: #2c6b46;
  --bk-success-soft: #d9ebe1;
  --bk-success-border: #9cc6ae;
  --bk-warning: #8a6415;
  --bk-warning-soft: #f4ead3;
  --bk-warning-border: #d7c088;
  --bk-danger: #97302c;
  --bk-danger-soft: #f2dedd;
  --bk-danger-border: #d3a3a1;
  --bk-info: #2c4a72;
  --bk-info-soft: #d6dfeb;
  --bk-info-border: #9db0c9;
  --bk-neutral: #1b2a3f;
  --bk-neutral-soft: #d3dae5;
  --bk-neutral-border: #8b9bb3;
  --bk-on-neutral: #eef2f7;

  --bk-radius-scale: 0.8;
  --bk-radius-field: 4px;
  --bk-radius-card: 6px;
  --bk-radius-overlay: 6px;
  --bk-radius-pill: 9999px;

  --bk-shadow-color: 215 35% 25%;
  --bk-shadow-strength: 1;

  --bk-btn-weight: 700;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.1em;
  --bk-btn-border-width: 1px;
  --bk-btn-shadow: 0 1px 2px rgb(27 42 63 / 0.2);
  --bk-btn-shadow-hover: 0 3px 8px rgb(27 42 63 / 0.28);
  --bk-btn-shadow-active: inset 0 2px 4px rgb(27 42 63 / 0.3);
  --bk-press-transform: translateY(1px);
  --bk-hover-transform: none;

  --bk-field-bg: #f2f5f9;
  --bk-field-border: #8b9bb3;
  --bk-field-border-hover: #2c4a72;
  --bk-field-shadow: inset 0 1px 3px rgb(27 42 63 / 0.14);
  --bk-field-placeholder: #93a1b5;
  --bk-card-bg: #e6eaf1;
  --bk-card-shadow: 0 1px 3px rgb(27 42 63 / 0.18);
  --bk-card-shadow-hover: 0 6px 18px rgb(27 42 63 / 0.22);
  --bk-card-pad: var(--bk-space-5);
  --bk-overlay-surface: #e6eaf1;
  --bk-overlay-shadow: 0 24px 60px rgb(20 32 50 / 0.4);
  --bk-overlay-bg: rgb(27 42 63 / 0.45);
  --bk-code-bg: #d3dae5;
  --bk-code-border: #8b9bb3;
  --bk-tooltip-bg: #1b2a3f;
  --bk-selection-bg: rgb(224 138 60 / 0.35);
  --bk-scrollbar-thumb: #8b9bb3;
  --bk-divider-color: #8b9bb3;

  /* Twill weave: a fine diagonal, plus the fade across the thigh. */
  --bk-body-image:
    repeating-linear-gradient(58deg, rgb(27 42 63 / 0.05) 0 1px, transparent 1px 4px),
    radial-gradient(60rem 40rem at 50% 30%, rgb(255 255 255 / 0.4), transparent 62%);
  --bk-body-attachment: fixed;
  --bk-surface-image: repeating-linear-gradient(58deg, rgb(27 42 63 / 0.035) 0 1px, transparent 1px 4px);
}

[data-bk-style="denim"][data-bk-theme="dark"] {
  --bk-bg: #16233a;
  --bk-bg-subtle: #1b2b45;
  --bk-surface: #1e3050;
  --bk-surface-2: #24385c;
  --bk-surface-3: #2d446e;
  --bk-text: #dfe7f2;
  --bk-text-muted: #a3b3ca;
  --bk-text-subtle: #7688a3;
  --bk-text-inverted: #16233a;
  --bk-border: #3a5075;
  --bk-border-muted: #24385c;
  --bk-border-strong: #7f97b8;
  --bk-primary: #8fb0da;
  --bk-primary-hover: #a3c0e5;
  --bk-primary-soft: #1c2f4c;
  --bk-primary-border: #3d5c85;
  --bk-on-primary: #0a1424;
  --bk-secondary: var(--_thread);
  --bk-secondary-hover: #ea9d57;
  --bk-secondary-soft: #34220f;
  --bk-secondary-border: #6b4520;
  --bk-on-secondary: #1c0f03;
  --bk-success-soft: #12291d;
  --bk-warning-soft: #2e2610;
  --bk-danger-soft: #2f1817;
  --bk-info-soft: #1c2f4c;
  --bk-neutral: #dfe7f2;
  --bk-neutral-soft: #24385c;
  --bk-neutral-border: #3a5075;
  --bk-on-neutral: #16233a;
  --bk-field-bg: #142138;
  --bk-field-border: #3a5075;
  --bk-code-bg: #142138;
  --bk-code-border: #3a5075;
  --bk-overlay-surface: #1e3050;
  --bk-tooltip-bg: #dfe7f2;
  --bk-tooltip-fg: #16233a;
  --bk-divider-color: #3a5075;
  --bk-body-image: repeating-linear-gradient(58deg, rgb(255 255 255 / 0.02) 0 1px, transparent 1px 4px);
}

/* Contrast topstitching: a dashed thread just inside every seam. */
[data-bk-style="denim"] .bk-card,
[data-bk-style="denim"] .bk-panel,
[data-bk-style="denim"] .bk-alert { position: relative; }
[data-bk-style="denim"] .bk-card::before,
[data-bk-style="denim"] .bk-panel::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px dashed var(--_thread);
  border-radius: inherit;
  opacity: 0.75;
  pointer-events: none;
}
[data-bk-style="denim"] .bk-btn:not(.bk-btn-link) {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), var(--bk-btn-shadow);
}
[data-bk-style="denim"] .bk-navbar {
  border-block-end: 2px dashed var(--_thread);
  background: var(--bk-surface);
}
[data-bk-style="denim"] .bk-table thead th {
  background: var(--bk-surface-inverted);
  color: var(--bk-text-inverted);
  border-block-end: 2px dashed var(--_thread);
}
[data-bk-style="denim"] .bk-badge { border: 1px dashed currentColor; }
[data-bk-style="denim"] .bk-avatar { border: 2px solid var(--bk-border-strong); }
[data-bk-style="denim"] .bk-divider { border-block-start-style: dashed; border-color: var(--_thread); }
[data-bk-style="denim"] .bk-eyebrow { color: var(--bk-secondary); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="denim"] {
  --bk-danger: #97302c;
  --bk-danger-on-soft: #97302c;
  --bk-danger-soft: #f2dedd;
  --bk-danger-text: #97302c;
  --bk-field-placeholder: #7b8ca4;
  --bk-info: #2c4a72;
  --bk-info-on-soft: #2c4a72;
  --bk-info-soft: #d6dfeb;
  --bk-info-text: #2c4a72;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-secondary: #050300;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-secondary: #b5651f;
  --bk-secondary-on-soft: #97541a;
  --bk-secondary-soft: #f4e5d4;
  --bk-secondary-text: #8e4f18;
  --bk-success: #2c6b46;
  --bk-success-on-soft: #2c6b46;
  --bk-success-soft: #d9ebe1;
  --bk-success-text: #2c6b46;
  --bk-text-muted: #42536b;
  --bk-text-subtle: #5e6d82;
  --bk-warning: #8a6415;
  --bk-warning-on-soft: #866114;
  --bk-warning-soft: #f4ead3;
  --bk-warning-text: #785712;
}
[data-bk-style="denim"][data-bk-theme="dark"] {
  --bk-danger: #97302c;
  --bk-danger-on-soft: #d26a66;
  --bk-danger-soft: #2f1817;
  --bk-danger-text: #da8582;
  --bk-field-placeholder: #93a1b5;
  --bk-info: #2c4a72;
  --bk-info-on-soft: #7a9dcc;
  --bk-info-soft: #1c2f4c;
  --bk-info-text: #7a9dcc;
  --bk-on-danger: #f2c0c5;
  --bk-on-info: #89c2f4;
  --bk-on-secondary: #1c0f03;
  --bk-on-success: #9defc2;
  --bk-on-warning: #fbefd8;
  --bk-secondary: #e08a3c;
  --bk-secondary-on-soft: #e08a3c;
  --bk-secondary-soft: #34220f;
  --bk-secondary-text: #e08a3c;
  --bk-success: #2c6b46;
  --bk-success-on-soft: #42a169;
  --bk-success-soft: #12291d;
  --bk-success-text: #48b073;
  --bk-text-muted: #a3b3ca;
  --bk-text-subtle: #8595ad;
  --bk-warning: #8a6415;
  --bk-warning-on-soft: #bb871c;
  --bk-warning-soft: #2e2610;
  --bk-warning-text: #c8911e;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "denim" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="denim"][data-bk-theme="auto"] {
  --bk-bg: #16233a;
  --bk-bg-subtle: #1b2b45;
  --bk-surface: #1e3050;
  --bk-surface-2: #24385c;
  --bk-surface-3: #2d446e;
  --bk-text: #dfe7f2;
  --bk-text-muted: #a3b3ca;
  --bk-text-subtle: #7688a3;
  --bk-text-inverted: #16233a;
  --bk-border: #3a5075;
  --bk-border-muted: #24385c;
  --bk-border-strong: #7f97b8;
  --bk-primary: #8fb0da;
  --bk-primary-hover: #a3c0e5;
  --bk-primary-soft: #1c2f4c;
  --bk-primary-border: #3d5c85;
  --bk-on-primary: #0a1424;
  --bk-secondary: var(--_thread);
  --bk-secondary-hover: #ea9d57;
  --bk-secondary-soft: #34220f;
  --bk-secondary-border: #6b4520;
  --bk-on-secondary: #1c0f03;
  --bk-success-soft: #12291d;
  --bk-warning-soft: #2e2610;
  --bk-danger-soft: #2f1817;
  --bk-info-soft: #1c2f4c;
  --bk-neutral: #dfe7f2;
  --bk-neutral-soft: #24385c;
  --bk-neutral-border: #3a5075;
  --bk-on-neutral: #16233a;
  --bk-field-bg: #142138;
  --bk-field-border: #3a5075;
  --bk-code-bg: #142138;
  --bk-code-border: #3a5075;
  --bk-overlay-surface: #1e3050;
  --bk-tooltip-bg: #dfe7f2;
  --bk-tooltip-fg: #16233a;
  --bk-divider-color: #3a5075;
  --bk-body-image: repeating-linear-gradient(58deg, rgb(255 255 255 / 0.02) 0 1px, transparent 1px 4px);


  --bk-danger: #97302c;
  --bk-danger-on-soft: #d26a66;
  --bk-danger-soft: #2f1817;
  --bk-danger-text: #da8582;
  --bk-field-placeholder: #93a1b5;
  --bk-info: #2c4a72;
  --bk-info-on-soft: #7a9dcc;
  --bk-info-soft: #1c2f4c;
  --bk-info-text: #7a9dcc;
  --bk-on-danger: #f2c0c5;
  --bk-on-info: #89c2f4;
  --bk-on-secondary: #1c0f03;
  --bk-on-success: #9defc2;
  --bk-on-warning: #fbefd8;
  --bk-secondary: #e08a3c;
  --bk-secondary-on-soft: #e08a3c;
  --bk-secondary-soft: #34220f;
  --bk-secondary-text: #e08a3c;
  --bk-success: #2c6b46;
  --bk-success-on-soft: #42a169;
  --bk-success-soft: #12291d;
  --bk-success-text: #48b073;
  --bk-text-muted: #a3b3ca;
  --bk-text-subtle: #8595ad;
  --bk-warning: #8a6415;
  --bk-warning-on-soft: #bb871c;
  --bk-warning-soft: #2e2610;
  --bk-warning-text: #c8911e;
}
}


/* =============================================================================
   SKIN — glass · Glassmorphism
   Frosted panes floating over a coloured aurora. Everything is translucent,
   everything is blurred, borders are light leaks rather than lines.
   ========================================================================== */

[data-bk-style="glass"] {
  --bk-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bk-heading-weight: 600;
  --bk-heading-tracking: -0.02em;

  --bk-bg: #eef1fb;
  --bk-bg-subtle: #e6eafb;
  --bk-bg-muted: #dde3f8;
  --bk-surface: rgb(255 255 255 / 0.55);
  --bk-surface-2: rgb(255 255 255 / 0.38);
  --bk-surface-3: rgb(255 255 255 / 0.66);
  --bk-surface-inverted: rgb(15 18 34 / 0.78);

  --bk-text: #1a1f36;
  --bk-text-muted: #4a5270;
  --bk-text-subtle: #6f7796;
  --bk-text-inverted: #ffffff;

  --bk-border: rgb(255 255 255 / 0.55);
  --bk-border-muted: rgb(255 255 255 / 0.35);
  --bk-border-strong: rgb(255 255 255 / 0.8);

  --bk-primary: #6366f1;
  --bk-primary-hover: #5457e5;
  --bk-primary-active: #474ad4;
  --bk-primary-soft: rgb(99 102 241 / 0.14);
  --bk-primary-border: rgb(99 102 241 / 0.35);
  --bk-on-primary: #ffffff;

  --bk-secondary: #06b6d4;
  --bk-secondary-hover: #0aa5c0;
  --bk-secondary-soft: rgb(6 182 212 / 0.14);
  --bk-secondary-border: rgb(6 182 212 / 0.32);
  --bk-on-secondary: #06202a;

  --bk-success: #10b981;
  --bk-success-soft: rgb(16 185 129 / 0.14);
  --bk-success-border: rgb(16 185 129 / 0.32);
  --bk-warning: #f59e0b;
  --bk-warning-soft: rgb(245 158 11 / 0.16);
  --bk-warning-border: rgb(245 158 11 / 0.34);
  --bk-danger: #f43f5e;
  --bk-danger-soft: rgb(244 63 94 / 0.14);
  --bk-danger-border: rgb(244 63 94 / 0.32);
  --bk-info: #3b82f6;
  --bk-info-soft: rgb(59 130 246 / 0.14);
  --bk-info-border: rgb(59 130 246 / 0.32);
  --bk-neutral: #2c3350;
  --bk-neutral-soft: rgb(255 255 255 / 0.5);
  --bk-neutral-border: rgb(255 255 255 / 0.6);
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 1.5;
  --bk-radius-card: var(--bk-radius-2xl);
  --bk-radius-field: var(--bk-radius-xl);
  --bk-radius-overlay: var(--bk-radius-3xl);

  --bk-shadow-color: 230 45% 30%;
  --bk-shadow-strength: 1.4;
  --bk-inner-highlight: inset 0 1px 0 0 rgb(255 255 255 / 0.6);

  --bk-body-image:
    radial-gradient(60rem 40rem at 8% -8%, rgb(147 197 253 / 0.75), transparent 60%),
    radial-gradient(50rem 36rem at 100% 0%, rgb(196 181 253 / 0.7), transparent 62%),
    radial-gradient(46rem 38rem at 50% 110%, rgb(167 243 208 / 0.6), transparent 60%);
  --bk-body-attachment: fixed;
  --bk-surface-backdrop: blur(18px) saturate(1.8);
  --bk-surface-image: linear-gradient(150deg, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.05));

  --bk-btn-shadow: var(--bk-inner-highlight), var(--bk-shadow-sm);
  --bk-btn-shadow-hover: var(--bk-inner-highlight), var(--bk-shadow-md);
  --bk-btn-shadow-active: var(--bk-shadow-xs);
  --bk-hover-transform: translateY(-1px);
  --bk-press-transform: translateY(1px) scale(0.99);

  --bk-field-bg: rgb(255 255 255 / 0.45);
  --bk-field-bg-hover: rgb(255 255 255 / 0.6);
  --bk-field-border: rgb(255 255 255 / 0.7);
  --bk-field-border-hover: rgb(255 255 255 / 0.95);
  --bk-field-shadow: var(--bk-inner-highlight);
  --bk-card-bg: var(--bk-surface);
  --bk-card-shadow: var(--bk-inner-highlight), var(--bk-shadow-lg);
  --bk-card-shadow-hover: var(--bk-inner-highlight), var(--bk-shadow-xl);
  --bk-overlay-surface: rgb(255 255 255 / 0.72);
  --bk-overlay-backdrop: blur(24px) saturate(1.8);
  --bk-overlay-border: rgb(255 255 255 / 0.6);
  --bk-overlay-bg: rgb(20 24 44 / 0.35);
  --bk-code-bg: rgb(255 255 255 / 0.5);
  --bk-code-border: rgb(255 255 255 / 0.6);
  --bk-scrollbar-thumb: rgb(120 130 180 / 0.45);
}

[data-bk-style="glass"][data-bk-theme="dark"] {
  --bk-bg: #0a0d1c;
  --bk-bg-subtle: #0e1226;
  --bk-surface: rgb(255 255 255 / 0.07);
  --bk-surface-2: rgb(255 255 255 / 0.04);
  --bk-surface-3: rgb(255 255 255 / 0.12);
  --bk-text: #eef1ff;
  --bk-text-muted: #a9b1d6;
  --bk-text-subtle: #7c85ad;
  --bk-border: rgb(255 255 255 / 0.14);
  --bk-border-muted: rgb(255 255 255 / 0.08);
  --bk-border-strong: rgb(255 255 255 / 0.24);
  --bk-primary: #818cf8;
  --bk-primary-soft: rgb(129 140 248 / 0.18);
  --bk-primary-border: rgb(129 140 248 / 0.4);
  --bk-neutral: #e6e9ff;
  --bk-neutral-soft: rgb(255 255 255 / 0.1);
  --bk-on-neutral: #0a0d1c;
  --bk-body-image:
    radial-gradient(60rem 40rem at 8% -8%, rgb(49 46 129 / 0.85), transparent 60%),
    radial-gradient(50rem 36rem at 100% 0%, rgb(76 29 149 / 0.75), transparent 62%),
    radial-gradient(46rem 38rem at 50% 110%, rgb(6 78 59 / 0.7), transparent 60%);
  --bk-inner-highlight: inset 0 1px 0 0 rgb(255 255 255 / 0.14);
  --bk-field-bg: rgb(255 255 255 / 0.06);
  --bk-field-bg-hover: rgb(255 255 255 / 0.1);
  --bk-field-border: rgb(255 255 255 / 0.16);
  --bk-overlay-surface: rgb(18 22 42 / 0.78);
  --bk-code-bg: rgb(255 255 255 / 0.06);
  --bk-code-border: rgb(255 255 255 / 0.12);
  --bk-surface-image: linear-gradient(150deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.01));
}

[data-bk-style="glass"] .bk-card,
[data-bk-style="glass"] .bk-panel,
[data-bk-style="glass"] .bk-navbar,
[data-bk-style="glass"] .bk-stat,
[data-bk-style="glass"] .bk-alert,
[data-bk-style="glass"] .bk-table-wrap,
[data-bk-style="glass"] .bk-list-group,
[data-bk-style="glass"] .bk-accordion,
[data-bk-style="glass"] .bk-toolbar,
[data-bk-style="glass"] .bk-segmented {
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
}
[data-bk-style="glass"] .bk-btn:not(.bk-btn-link) {
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
}
[data-bk-style="glass"] .bk-input,
[data-bk-style="glass"] .bk-textarea,
[data-bk-style="glass"] .bk-select {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="glass"] {
  --bk-danger: #f43f5e;
  --bk-danger-on-soft: #bd0b29;
  --bk-danger-soft: rgb(244 63 94 / 0.14);
  --bk-danger-text: #d50c2f;
  --bk-info: #3b82f6;
  --bk-info-on-soft: #0a57d6;
  --bk-info-soft: rgb(59 130 246 / 0.14);
  --bk-info-text: #0b61ee;
  --bk-on-danger: #191919;
  --bk-on-info: #191919;
  --bk-on-primary: #000000;
  --bk-on-success: #363636;
  --bk-on-warning: #404040;
  --bk-primary: #6366f1;
  --bk-primary-on-soft: #4246ee;
  --bk-primary-soft: rgb(99 102 241 / 0.14);
  --bk-primary-text: #5054ef;
  --bk-secondary-on-soft: #046e80;
  --bk-secondary-text: #04768a;
  --bk-success: #10b981;
  --bk-success-on-soft: #0a6e4d;
  --bk-success-soft: rgb(16 185 129 / 0.14);
  --bk-success-text: #0a7753;
  --bk-warning: #f59e0b;
  --bk-warning-on-soft: #8a5906;
  --bk-warning-soft: rgb(245 158 11 / 0.16);
  --bk-warning-text: #945f06;
}
[data-bk-style="glass"][data-bk-theme="dark"] {
  --bk-danger: #f43f5e;
  --bk-danger-on-soft: #f43f5e;
  --bk-danger-soft: rgb(244 63 94 / 0.14);
  --bk-danger-text: #f43f5e;
  --bk-info: #3b82f6;
  --bk-info-on-soft: #3b82f6;
  --bk-info-soft: rgb(59 130 246 / 0.14);
  --bk-info-text: #3b82f6;
  --bk-on-danger: #22070a;
  --bk-on-info: #03121f;
  --bk-on-primary: #2b2b2b;
  --bk-on-success: #04180d;
  --bk-on-warning: #1f1503;
  --bk-primary: #818cf8;
  --bk-primary-on-soft: #818cf8;
  --bk-primary-soft: rgb(129 140 248 / 0.18);
  --bk-primary-text: #818cf8;
  --bk-secondary-on-soft: #06b6d4;
  --bk-secondary-text: #06b6d4;
  --bk-success: #10b981;
  --bk-success-on-soft: #10b981;
  --bk-success-soft: rgb(16 185 129 / 0.14);
  --bk-success-text: #10b981;
  --bk-warning: #f59e0b;
  --bk-warning-on-soft: #f59e0b;
  --bk-warning-soft: rgb(245 158 11 / 0.16);
  --bk-warning-text: #f59e0b;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "glass" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="glass"][data-bk-theme="auto"] {
  --bk-bg: #0a0d1c;
  --bk-bg-subtle: #0e1226;
  --bk-surface: rgb(255 255 255 / 0.07);
  --bk-surface-2: rgb(255 255 255 / 0.04);
  --bk-surface-3: rgb(255 255 255 / 0.12);
  --bk-text: #eef1ff;
  --bk-text-muted: #a9b1d6;
  --bk-text-subtle: #7c85ad;
  --bk-border: rgb(255 255 255 / 0.14);
  --bk-border-muted: rgb(255 255 255 / 0.08);
  --bk-border-strong: rgb(255 255 255 / 0.24);
  --bk-primary: #818cf8;
  --bk-primary-soft: rgb(129 140 248 / 0.18);
  --bk-primary-border: rgb(129 140 248 / 0.4);
  --bk-neutral: #e6e9ff;
  --bk-neutral-soft: rgb(255 255 255 / 0.1);
  --bk-on-neutral: #0a0d1c;
  --bk-body-image:
    radial-gradient(60rem 40rem at 8% -8%, rgb(49 46 129 / 0.85), transparent 60%),
    radial-gradient(50rem 36rem at 100% 0%, rgb(76 29 149 / 0.75), transparent 62%),
    radial-gradient(46rem 38rem at 50% 110%, rgb(6 78 59 / 0.7), transparent 60%);
  --bk-inner-highlight: inset 0 1px 0 0 rgb(255 255 255 / 0.14);
  --bk-field-bg: rgb(255 255 255 / 0.06);
  --bk-field-bg-hover: rgb(255 255 255 / 0.1);
  --bk-field-border: rgb(255 255 255 / 0.16);
  --bk-overlay-surface: rgb(18 22 42 / 0.78);
  --bk-code-bg: rgb(255 255 255 / 0.06);
  --bk-code-border: rgb(255 255 255 / 0.12);
  --bk-surface-image: linear-gradient(150deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.01));


  --bk-danger: #f43f5e;
  --bk-danger-on-soft: #f43f5e;
  --bk-danger-soft: rgb(244 63 94 / 0.14);
  --bk-danger-text: #f43f5e;
  --bk-info: #3b82f6;
  --bk-info-on-soft: #3b82f6;
  --bk-info-soft: rgb(59 130 246 / 0.14);
  --bk-info-text: #3b82f6;
  --bk-on-danger: #22070a;
  --bk-on-info: #03121f;
  --bk-on-primary: #2b2b2b;
  --bk-on-success: #04180d;
  --bk-on-warning: #1f1503;
  --bk-primary: #818cf8;
  --bk-primary-on-soft: #818cf8;
  --bk-primary-soft: rgb(129 140 248 / 0.18);
  --bk-primary-text: #818cf8;
  --bk-secondary-on-soft: #06b6d4;
  --bk-secondary-text: #06b6d4;
  --bk-success: #10b981;
  --bk-success-on-soft: #10b981;
  --bk-success-soft: rgb(16 185 129 / 0.14);
  --bk-success-text: #10b981;
  --bk-warning: #f59e0b;
  --bk-warning-on-soft: #f59e0b;
  --bk-warning-soft: rgb(245 158 11 / 0.16);
  --bk-warning-text: #f59e0b;
}
}


/* =============================================================================
   SKIN — gothic · Blackletter
   Ecclesiastical dark: parchment on stone, oxblood and tarnished gold, pointed
   arches instead of rounded corners, and a display face with more history than
   legibility. Drop caps included.
   ========================================================================== */

[data-bk-style="gothic"] {
  --bk-font-display: "UnifrakturMaguntia", "Cloister Black", "Old English Text MT", "Blackletter", serif;
  --bk-font-serif: "EB Garamond", "Garamond", Georgia, serif;
  --bk-font-sans: var(--bk-font-serif);
  --bk-font-body: var(--bk-font-serif);
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 400;
  --bk-heading-tracking: 0.01em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.16em;
  --bk-leading-relaxed: 1.8;

  --_gold: #a8873f;
  --_blood: #7d1c22;

  --bk-bg: #14100f;
  --bk-bg-subtle: #191413;
  --bk-bg-muted: #1f1917;
  --bk-surface: #1b1615;
  --bk-surface-2: #221c1a;
  --bk-surface-3: #2b2321;
  --bk-surface-inverted: #ece2cd;

  --bk-text: #e8dcc4;
  --bk-text-muted: #ac9d84;
  --bk-text-subtle: #7c705d;
  --bk-text-inverted: #14100f;

  --bk-border: #372d29;
  --bk-border-muted: #241d1b;
  --bk-border-strong: var(--_gold);
  --bk-border-width: 1px;

  --bk-primary: var(--_gold);
  --bk-primary-hover: #bd9a4c;
  --bk-primary-active: #d1ad5c;
  --bk-primary-soft: #2a2214;
  --bk-primary-border: #574627;
  --bk-on-primary: #15100a;
  --bk-secondary: var(--_blood);
  --bk-secondary-hover: #93242b;
  --bk-secondary-active: #a92c34;
  --bk-secondary-soft: #2b1214;
  --bk-secondary-border: #552326;
  --bk-on-secondary: #f6e6e2;
  --bk-success: #5f7d46;
  --bk-success-soft: #1c2416;
  --bk-success-border: #35482a;
  --bk-on-success: #0d1208;
  --bk-warning: #b1802a;
  --bk-warning-soft: #2b2110;
  --bk-warning-border: #56421c;
  --bk-on-warning: #150f04;
  --bk-danger: #9c2a2f;
  --bk-danger-soft: #2b1214;
  --bk-danger-border: #552326;
  --bk-on-danger: #f8e8e6;
  --bk-info: #5a6c86;
  --bk-info-soft: #191f27;
  --bk-info-border: #313c4c;
  --bk-on-info: #0a0e13;
  --bk-neutral: #e8dcc4;
  --bk-neutral-soft: #221c1a;
  --bk-neutral-border: #372d29;
  --bk-on-neutral: #14100f;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-xs: none;
  --bk-shadow-sm: 0 0 0 1px rgb(168 135 63 / 0.14);
  --bk-shadow-md: 0 0 0 1px rgb(168 135 63 / 0.2), 0 10px 30px rgb(0 0 0 / 0.6);
  --bk-shadow-lg: 0 0 0 1px rgb(168 135 63 / 0.3), 0 20px 50px rgb(0 0 0 / 0.7);
  --bk-shadow-xl: 0 0 0 1px rgb(168 135 63 / 0.4), 0 30px 70px rgb(0 0 0 / 0.8);
  --bk-shadow-2xl: 0 0 0 2px rgb(168 135 63 / 0.45), 0 40px 90px rgb(0 0 0 / 0.85);
  --bk-shadow-inner: inset 0 2px 8px rgb(0 0 0 / 0.5);

  --bk-ring: var(--_gold);
  --bk-ring-width: 1px;
  --bk-ring-offset: 3px;

  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.18em;
  --bk-btn-weight: 600;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: 0 0 16px rgb(168 135 63 / 0.28);
  --bk-btn-shadow-active: none;
  --bk-press-transform: translateY(1px);

  --bk-field-bg: #100c0b;
  --bk-field-border: #4a3d33;
  --bk-field-border-hover: var(--_gold);
  --bk-field-shadow: inset 0 2px 6px rgb(0 0 0 / 0.55);
  --bk-field-placeholder: #6e6355;
  --bk-card-bg: #1b1615;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: 0 0 0 1px var(--_gold);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #1b1615;
  --bk-overlay-border: var(--_gold);
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(8 6 5 / 0.85);
  --bk-code-bg: #100c0b;
  --bk-code-border: #372d29;
  --bk-tooltip-bg: var(--_gold);
  --bk-tooltip-fg: #15100a;
  --bk-selection-bg: rgb(125 28 34 / 0.6);
  --bk-scrollbar-thumb: #4a3d33;
  --bk-divider-color: #372d29;

  --bk-body-image:
    radial-gradient(60rem 40rem at 50% -10%, rgb(168 135 63 / 0.07), transparent 60%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.15) 0 2px, transparent 2px 6px);
  --bk-body-attachment: fixed;
  color-scheme: dark;
}

[data-bk-style="gothic"][data-bk-theme="light"] {
  --bk-bg: #efe7d5;
  --bk-bg-subtle: #e7ddc7;
  --bk-surface: #f7f1e3;
  --bk-surface-2: #ece2cd;
  --bk-surface-3: #ddd0b6;
  --bk-surface-inverted: #14100f;
  --bk-text: #241c19;
  --bk-text-muted: #574a3f;
  --bk-text-subtle: #857662;
  --bk-text-inverted: #f7f1e3;
  --bk-border: #c6b696;
  --bk-border-muted: #ded2b8;
  --bk-border-strong: #6b5526;
  --bk-primary: #6b5526;
  --bk-primary-hover: #574320;
  --bk-primary-soft: #ece0c4;
  --bk-primary-border: #b7a271;
  --bk-on-primary: #f7f1e3;
  --bk-secondary-soft: #f0ded9;
  --bk-secondary-border: #cba39d;
  --bk-neutral: #241c19;
  --bk-neutral-soft: #ece2cd;
  --bk-neutral-border: #c6b696;
  --bk-on-neutral: #f7f1e3;
  --bk-field-bg: #fbf7ec;
  --bk-field-border: #b7a482;
  --bk-code-bg: #ece2cd;
  --bk-code-border: #c6b696;
  --bk-overlay-surface: #f7f1e3;
  --bk-overlay-border: #6b5526;
  --bk-tooltip-bg: #241c19;
  --bk-tooltip-fg: #f7f1e3;
  --bk-divider-color: #c6b696;
  --bk-body-image: repeating-linear-gradient(90deg, rgb(90 70 40 / 0.03) 0 2px, transparent 2px 6px);
  color-scheme: light;
}

/* Pointed arches: the corners come to a point rather than a curve. */
[data-bk-style="gothic"] .bk-card,
[data-bk-style="gothic"] .bk-modal,
[data-bk-style="gothic"] .bk-panel {
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
[data-bk-style="gothic"] .bk-display,
[data-bk-style="gothic"] .bk-title,
[data-bk-style="gothic"] .bk-navbar-brand {
  font-family: var(--bk-font-display);
  color: var(--bk-primary);
}
[data-bk-style="gothic"] .bk-prose p:first-of-type::first-letter {
  float: inline-start;
  font-family: var(--bk-font-display);
  font-size: 4em;
  line-height: 0.8;
  padding-inline-end: 0.1em;
  color: var(--bk-secondary);
}
[data-bk-style="gothic"] .bk-navbar { background: transparent; border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="gothic"] .bk-table thead th { background: transparent; color: var(--bk-primary); border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="gothic"] .bk-section-head::after {
  content: "✝";
  display: block;
  margin-block-start: var(--bk-space-3);
  color: var(--bk-primary);
  font-size: var(--bk-text-lg);
}
[data-bk-style="gothic"] .bk-badge { border: 1px solid currentColor; }
[data-bk-style="gothic"] .bk-avatar { border-radius: 50% 50% 0 0; border: 1px solid var(--bk-border-strong); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="gothic"] {
  --bk-danger-on-soft: #d56267;
  --bk-danger-text: #d45e63;
  --bk-info: #5a6c86;
  --bk-info-on-soft: #798ba5;
  --bk-info-soft: #191f27;
  --bk-info-text: #7285a1;
  --bk-on-info: #edf1f6;
  --bk-on-success: #ffffff;
  --bk-secondary-on-soft: #db5d64;
  --bk-secondary-text: #da5860;
  --bk-success: #5d7a44;
  --bk-success-on-soft: #739755;
  --bk-success-soft: #1c2416;
  --bk-success-text: #6b8d4f;
  --bk-text-subtle: #7c705d;
  --bk-warning-on-soft: #b1802a;
  --bk-warning-text: #b1802a;
}
[data-bk-style="gothic"][data-bk-theme="light"] {
  --bk-danger-on-soft: #d56267;
  --bk-danger-text: #9c2a2f;
  --bk-info: #5a6c86;
  --bk-info-on-soft: #798ba5;
  --bk-info-soft: #191f27;
  --bk-info-text: #54657d;
  --bk-on-info: #edf1f6;
  --bk-on-success: #ffffff;
  --bk-secondary-on-soft: #7d1c22;
  --bk-secondary-text: #7d1c22;
  --bk-success: #5d7a44;
  --bk-success-on-soft: #739755;
  --bk-success-soft: #1c2416;
  --bk-success-text: #536d3d;
  --bk-text-subtle: #7c6e5c;
  --bk-warning-on-soft: #b1802a;
  --bk-warning-text: #845f1f;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "gothic" — generated by scripts/build.mjs */
@media (prefers-color-scheme: light) {
  [data-bk-style="gothic"][data-bk-theme="auto"] {
  --bk-bg: #efe7d5;
  --bk-bg-subtle: #e7ddc7;
  --bk-surface: #f7f1e3;
  --bk-surface-2: #ece2cd;
  --bk-surface-3: #ddd0b6;
  --bk-surface-inverted: #14100f;
  --bk-text: #241c19;
  --bk-text-muted: #574a3f;
  --bk-text-subtle: #857662;
  --bk-text-inverted: #f7f1e3;
  --bk-border: #c6b696;
  --bk-border-muted: #ded2b8;
  --bk-border-strong: #6b5526;
  --bk-primary: #6b5526;
  --bk-primary-hover: #574320;
  --bk-primary-soft: #ece0c4;
  --bk-primary-border: #b7a271;
  --bk-on-primary: #f7f1e3;
  --bk-secondary-soft: #f0ded9;
  --bk-secondary-border: #cba39d;
  --bk-neutral: #241c19;
  --bk-neutral-soft: #ece2cd;
  --bk-neutral-border: #c6b696;
  --bk-on-neutral: #f7f1e3;
  --bk-field-bg: #fbf7ec;
  --bk-field-border: #b7a482;
  --bk-code-bg: #ece2cd;
  --bk-code-border: #c6b696;
  --bk-overlay-surface: #f7f1e3;
  --bk-overlay-border: #6b5526;
  --bk-tooltip-bg: #241c19;
  --bk-tooltip-fg: #f7f1e3;
  --bk-divider-color: #c6b696;
  --bk-body-image: repeating-linear-gradient(90deg, rgb(90 70 40 / 0.03) 0 2px, transparent 2px 6px);
  color-scheme: light;


  --bk-danger-on-soft: #d56267;
  --bk-danger-text: #9c2a2f;
  --bk-info: #5a6c86;
  --bk-info-on-soft: #798ba5;
  --bk-info-soft: #191f27;
  --bk-info-text: #54657d;
  --bk-on-info: #edf1f6;
  --bk-on-success: #ffffff;
  --bk-secondary-on-soft: #7d1c22;
  --bk-secondary-text: #7d1c22;
  --bk-success: #5d7a44;
  --bk-success-on-soft: #739755;
  --bk-success-soft: #1c2416;
  --bk-success-text: #536d3d;
  --bk-text-subtle: #7c6e5c;
  --bk-warning-on-soft: #b1802a;
  --bk-warning-text: #845f1f;
}
}


/* =============================================================================
   SKIN — herbarium · Botanical plate
   A pressed-specimen sheet: aged rag paper, engraved serif, pressed-leaf greens
   and the small italic label in the corner. Thin single rules, no fills, and
   the composure of something catalogued in 1843.
   ========================================================================== */

[data-bk-style="herbarium"] {
  --bk-font-serif: "EB Garamond", "Cormorant Garamond", Garamond, Georgia, serif;
  --bk-font-sans: var(--bk-font-serif);
  --bk-font-body: var(--bk-font-serif);
  --bk-font-display: var(--bk-font-serif);
  --bk-heading-font: var(--bk-font-serif);
  --bk-heading-weight: 500;
  --bk-heading-tracking: 0.01em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.2em;
  --bk-leading-relaxed: 1.75;
  --bk-prose-width: 64ch;

  --bk-bg: #f3efe2;
  --bk-bg-subtle: #ece7d6;
  --bk-bg-muted: #e2dcc7;
  --bk-surface: #faf7ec;
  --bk-surface-2: #efeade;
  --bk-surface-3: #e0dac6;
  --bk-surface-inverted: #26291f;

  --bk-text: #2c2f24;
  --bk-text-muted: #5a5c4b;
  --bk-text-subtle: #8b8b76;
  --bk-text-inverted: #faf7ec;

  --bk-border: #cec7ae;
  --bk-border-muted: #e2dcc7;
  --bk-border-strong: #6f7259;
  --bk-border-width: 1px;

  --bk-primary: #4a6141;
  --bk-primary-hover: #3d5136;
  --bk-primary-active: #31422c;
  --bk-primary-soft: #e4ebdd;
  --bk-primary-border: #adbfa1;
  --bk-on-primary: #faf7ec;
  --bk-secondary: #8a5a2b;
  --bk-secondary-hover: #754b23;
  --bk-secondary-soft: #f0e5d5;
  --bk-secondary-border: #cbb08a;
  --bk-on-secondary: #faf7ec;
  --bk-success: #4a6141;
  --bk-success-soft: #e4ebdd;
  --bk-success-border: #adbfa1;
  --bk-warning: #8a6a1f;
  --bk-warning-soft: #f2ead2;
  --bk-warning-border: #d3c188;
  --bk-danger: #8b3a2e;
  --bk-danger-soft: #f0dfd9;
  --bk-danger-border: #cfa79b;
  --bk-info: #40606b;
  --bk-info-soft: #dee9ec;
  --bk-info-border: #a4c0c7;
  --bk-neutral: #2c2f24;
  --bk-neutral-soft: #eae5d6;
  --bk-neutral-border: #cec7ae;
  --bk-on-neutral: #faf7ec;

  --bk-radius-scale: 0.2;
  --bk-radius-field: 1px;
  --bk-radius-card: 1px;
  --bk-radius-overlay: 1px;
  --bk-radius-pill: 9999px;

  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: none;
  --bk-shadow-lg: 0 2px 18px rgb(70 65 40 / 0.09);
  --bk-shadow-xl: 0 10px 40px rgb(70 65 40 / 0.13);
  --bk-shadow-2xl: 0 20px 60px rgb(70 65 40 / 0.18);
  --bk-shadow-inner: none;

  --bk-ring: #4a6141;
  --bk-ring-width: 1px;
  --bk-ring-offset: 3px;

  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-btn-weight: 500;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.14em;
  --bk-press-transform: none;
  --bk-hover-transform: none;

  --bk-field-bg: #faf7ec;
  --bk-field-border: #b9b299;
  --bk-field-border-hover: #4a6141;
  --bk-field-shadow: none;
  --bk-field-placeholder: #a6a390;
  --bk-card-bg: #faf7ec;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: var(--bk-shadow-lg);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #faf7ec;
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(44 47 36 / 0.35);
  --bk-code-bg: #efeade;
  --bk-code-border: #cec7ae;
  --bk-tooltip-bg: #2c2f24;
  --bk-selection-bg: rgb(74 97 65 / 0.2);
  --bk-scrollbar-thumb: #cec7ae;
  --bk-divider-color: #cec7ae;

  /* Foxing and laid lines, the way old rag paper ages. */
  --bk-body-image:
    repeating-linear-gradient(90deg, rgb(110 100 60 / 0.028) 0 1px, transparent 1px 1.4rem),
    radial-gradient(circle at 18% 28%, rgb(140 110 60 / 0.05), transparent 22%),
    radial-gradient(circle at 76% 66%, rgb(140 110 60 / 0.045), transparent 20%);
  --bk-body-attachment: fixed;
}

[data-bk-style="herbarium"][data-bk-theme="dark"] {
  --bk-bg: #1a1c16;
  --bk-bg-subtle: #20231b;
  --bk-surface: #22251d;
  --bk-surface-2: #292c22;
  --bk-surface-3: #33372a;
  --bk-text: #e8e4d3;
  --bk-text-muted: #b0af99;
  --bk-text-subtle: #85846f;
  --bk-text-inverted: #1a1c16;
  --bk-border: #3a3e2f;
  --bk-border-muted: #2a2d23;
  --bk-border-strong: #7e8268;
  --bk-primary: #9dba8e;
  --bk-primary-hover: #aec8a0;
  --bk-primary-soft: #232c1f;
  --bk-primary-border: #46543d;
  --bk-on-primary: #131a10;
  --bk-secondary: #cfa570;
  --bk-secondary-soft: #2c2316;
  --bk-secondary-border: #59462b;
  --bk-on-secondary: #1a1309;
  --bk-success-soft: #1e2a19;
  --bk-warning-soft: #2c2611;
  --bk-danger-soft: #2e1c17;
  --bk-info-soft: #1a2528;
  --bk-neutral: #e8e4d3;
  --bk-neutral-soft: #292c22;
  --bk-neutral-border: #3a3e2f;
  --bk-on-neutral: #1a1c16;
  --bk-field-bg: #22251d;
  --bk-field-border: #4a4e3c;
  --bk-code-bg: #20231b;
  --bk-code-border: #3a3e2f;
  --bk-overlay-surface: #22251d;
  --bk-tooltip-bg: #e8e4d3;
  --bk-tooltip-fg: #1a1c16;
  --bk-divider-color: #3a3e2f;
  --bk-body-image: repeating-linear-gradient(90deg, rgb(220 210 160 / 0.02) 0 1px, transparent 1px 1.4rem);
}

/* The specimen sheet: a thin rule inset from the edge, like a mounting frame. */
[data-bk-style="herbarium"] .bk-card { position: relative; }
[data-bk-style="herbarium"] .bk-card::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--bk-border);
  pointer-events: none;
}
[data-bk-style="herbarium"] .bk-card-title { font-style: italic; font-weight: 500; }
[data-bk-style="herbarium"] .bk-navbar { background: transparent; border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="herbarium"] .bk-table thead th {
  background: transparent;
  font-family: var(--bk-font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border-block-end: 1px solid var(--bk-border-strong);
}
[data-bk-style="herbarium"] .bk-badge { border: 1px solid currentColor; font-style: italic; letter-spacing: 0.06em; }
[data-bk-style="herbarium"] .bk-blockquote { font-family: var(--bk-font-serif); border-inline-start-width: 1px; background: transparent; }
[data-bk-style="herbarium"] .bk-section-head::after {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 1px;
  margin-block-start: var(--bk-space-4);
  background: var(--bk-border-strong);
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="herbarium"] {
  --bk-danger: #8b3a2e;
  --bk-danger-on-soft: #8b3a2e;
  --bk-danger-soft: #f0dfd9;
  --bk-danger-text: #8b3a2e;
  --bk-field-placeholder: #8f8c74;
  --bk-info: #40606b;
  --bk-info-on-soft: #40606b;
  --bk-info-soft: #dee9ec;
  --bk-info-text: #40606b;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-success: #4a6141;
  --bk-success-on-soft: #4a6141;
  --bk-success-soft: #e4ebdd;
  --bk-success-text: #4a6141;
  --bk-text-subtle: #787865;
  --bk-warning: #8a6a1f;
  --bk-warning-on-soft: #7e601c;
  --bk-warning-soft: #f2ead2;
  --bk-warning-text: #82641d;
}
[data-bk-style="herbarium"][data-bk-theme="dark"] {
  --bk-danger: #8b3a2e;
  --bk-danger-on-soft: #cb7063;
  --bk-danger-soft: #2e1c17;
  --bk-danger-text: #ce776b;
  --bk-field-placeholder: #a6a390;
  --bk-info: #40606b;
  --bk-info-on-soft: #6895a4;
  --bk-info-soft: #1a2528;
  --bk-info-text: #6895a4;
  --bk-on-danger: #f2c0c5;
  --bk-on-info: #bcddf9;
  --bk-on-success: #87ebb4;
  --bk-on-warning: #fdf7eb;
  --bk-success: #4a6141;
  --bk-success-on-soft: #779a69;
  --bk-success-soft: #1e2a19;
  --bk-success-text: #749866;
  --bk-text-subtle: #85846f;
  --bk-warning: #8a6a1f;
  --bk-warning-on-soft: #b48a28;
  --bk-warning-soft: #2c2611;
  --bk-warning-text: #b48a28;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "herbarium" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="herbarium"][data-bk-theme="auto"] {
  --bk-bg: #1a1c16;
  --bk-bg-subtle: #20231b;
  --bk-surface: #22251d;
  --bk-surface-2: #292c22;
  --bk-surface-3: #33372a;
  --bk-text: #e8e4d3;
  --bk-text-muted: #b0af99;
  --bk-text-subtle: #85846f;
  --bk-text-inverted: #1a1c16;
  --bk-border: #3a3e2f;
  --bk-border-muted: #2a2d23;
  --bk-border-strong: #7e8268;
  --bk-primary: #9dba8e;
  --bk-primary-hover: #aec8a0;
  --bk-primary-soft: #232c1f;
  --bk-primary-border: #46543d;
  --bk-on-primary: #131a10;
  --bk-secondary: #cfa570;
  --bk-secondary-soft: #2c2316;
  --bk-secondary-border: #59462b;
  --bk-on-secondary: #1a1309;
  --bk-success-soft: #1e2a19;
  --bk-warning-soft: #2c2611;
  --bk-danger-soft: #2e1c17;
  --bk-info-soft: #1a2528;
  --bk-neutral: #e8e4d3;
  --bk-neutral-soft: #292c22;
  --bk-neutral-border: #3a3e2f;
  --bk-on-neutral: #1a1c16;
  --bk-field-bg: #22251d;
  --bk-field-border: #4a4e3c;
  --bk-code-bg: #20231b;
  --bk-code-border: #3a3e2f;
  --bk-overlay-surface: #22251d;
  --bk-tooltip-bg: #e8e4d3;
  --bk-tooltip-fg: #1a1c16;
  --bk-divider-color: #3a3e2f;
  --bk-body-image: repeating-linear-gradient(90deg, rgb(220 210 160 / 0.02) 0 1px, transparent 1px 1.4rem);


  --bk-danger: #8b3a2e;
  --bk-danger-on-soft: #cb7063;
  --bk-danger-soft: #2e1c17;
  --bk-danger-text: #ce776b;
  --bk-field-placeholder: #a6a390;
  --bk-info: #40606b;
  --bk-info-on-soft: #6895a4;
  --bk-info-soft: #1a2528;
  --bk-info-text: #6895a4;
  --bk-on-danger: #f2c0c5;
  --bk-on-info: #bcddf9;
  --bk-on-success: #87ebb4;
  --bk-on-warning: #fdf7eb;
  --bk-success: #4a6141;
  --bk-success-on-soft: #779a69;
  --bk-success-soft: #1e2a19;
  --bk-success-text: #749866;
  --bk-text-subtle: #85846f;
  --bk-warning: #8a6a1f;
  --bk-warning-on-soft: #b48a28;
  --bk-warning-soft: #2c2611;
  --bk-warning-text: #b48a28;
}
}


/* =============================================================================
   SKIN — holo · Holographic foil
   Iridescence: a prism sweep that shifts as it crosses a surface, chrome-cold
   neutrals underneath, and edges that catch the light. The only skin whose
   accents are gradients rather than colours.
   ========================================================================== */

[data-bk-style="holo"] {
  --bk-font-sans: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 600;
  --bk-heading-tracking: -0.02em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.14em;

  --_prism: linear-gradient(115deg,
    #ff9ecd 0%, #ffd6a5 18%, #b8f2c9 38%, #a5e4ff 58%, #c3b5ff 78%, #ffb3e6 100%);

  --bk-bg: #eef0f5;
  --bk-bg-subtle: #e5e8ef;
  --bk-bg-muted: #d8dce6;
  --bk-surface: #f9fafd;
  --bk-surface-2: #eaedf4;
  --bk-surface-3: #dbe0ea;
  --bk-surface-inverted: #14161e;

  --bk-text: #171a24;
  --bk-text-muted: #4a5062;
  --bk-text-subtle: #7c8396;
  --bk-text-inverted: #f9fafd;

  --bk-border: #c9cfdd;
  --bk-border-muted: #e0e4ed;
  --bk-border-strong: #8b93a8;

  --bk-primary: #6b4fd6;
  --bk-primary-hover: #5c41c2;
  --bk-primary-active: #4e36a8;
  --bk-primary-soft: #e6e1fb;
  --bk-primary-border: #bdb2f0;
  --bk-on-primary: #ffffff;
  --bk-secondary: #0f7d9c;
  --bk-secondary-hover: #0c6a85;
  --bk-secondary-soft: #daf0f7;
  --bk-secondary-border: #9ed6e8;
  --bk-on-secondary: #ffffff;
  --bk-success: #12795c;
  --bk-success-soft: #d8f2ea;
  --bk-success-border: #96ddca;
  --bk-warning: #9a6a12;
  --bk-warning-soft: #f7ecd4;
  --bk-warning-border: #e0c489;
  --bk-danger: #c02a5a;
  --bk-danger-soft: #fbdde8;
  --bk-danger-border: #eeaac4;
  --bk-info: #3352c9;
  --bk-info-soft: #e0e6fb;
  --bk-info-border: #b3c1f0;
  --bk-neutral: #2b3145;
  --bk-neutral-soft: #e8ebf2;
  --bk-neutral-border: #c9cfdd;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 1.8;
  --bk-radius-field: var(--bk-radius-xl);
  --bk-radius-card: var(--bk-radius-2xl);
  --bk-radius-overlay: var(--bk-radius-2xl);

  --bk-shadow-color: 235 30% 40%;
  --bk-shadow-strength: 1.2;
  --_edge: inset 0 1px 0 0 rgb(255 255 255 / 0.9), inset 0 0 0 1px rgb(255 255 255 / 0.4);

  --bk-btn-shadow: var(--_edge), 0 2px 8px rgb(90 80 160 / 0.16);
  --bk-btn-shadow-hover: var(--_edge), 0 6px 20px rgb(90 80 160 / 0.26);
  --bk-btn-shadow-active: var(--_edge);
  --bk-btn-gradient: var(--_prism);
  --bk-hover-transform: translateY(-1px);
  --bk-press-transform: translateY(1px);

  --bk-field-bg: rgb(255 255 255 / 0.85);
  --bk-field-border: #c3cadb;
  --bk-field-border-hover: #6b4fd6;
  --bk-field-shadow: var(--_edge);
  --bk-card-bg: rgb(255 255 255 / 0.72);
  --bk-card-shadow: var(--_edge), 0 8px 28px rgb(90 80 160 / 0.14);
  --bk-card-shadow-hover: var(--_edge), 0 14px 40px rgb(90 80 160 / 0.2);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: rgb(255 255 255 / 0.9);
  --bk-overlay-backdrop: blur(18px) saturate(1.6);
  --bk-overlay-shadow: var(--_edge), 0 24px 60px rgb(60 50 110 / 0.28);
  --bk-overlay-bg: rgb(30 28 55 / 0.35);
  --bk-code-bg: rgb(255 255 255 / 0.7);
  --bk-code-border: #d3d9e6;
  --bk-tooltip-bg: #171a24;
  --bk-selection-bg: rgb(107 79 214 / 0.24);
  --bk-scrollbar-thumb: #c3cadb;
  --bk-text-gradient: var(--_prism);

  --bk-body-image:
    linear-gradient(115deg,
      rgb(255 158 205 / 0.28) 0%, rgb(255 214 165 / 0.24) 18%,
      rgb(184 242 201 / 0.24) 38%, rgb(165 228 255 / 0.28) 58%,
      rgb(195 181 255 / 0.26) 78%, rgb(255 179 230 / 0.28) 100%),
    linear-gradient(180deg, #ffffff 0%, #e8ebf3 100%);
  --bk-body-attachment: fixed;
}

[data-bk-style="holo"][data-bk-theme="dark"] {
  --bk-bg: #0d0f16;
  --bk-bg-subtle: #12151e;
  --bk-surface: rgb(255 255 255 / 0.06);
  --bk-surface-2: rgb(255 255 255 / 0.04);
  --bk-surface-3: rgb(255 255 255 / 0.11);
  --bk-text: #eef0f8;
  --bk-text-muted: #a8aec4;
  --bk-text-subtle: #7b8298;
  --bk-text-inverted: #0d0f16;
  --bk-border: rgb(255 255 255 / 0.14);
  --bk-border-muted: rgb(255 255 255 / 0.08);
  --bk-border-strong: rgb(255 255 255 / 0.3);
  --bk-primary: #a996ff;
  --bk-primary-hover: #bcabff;
  --bk-primary-soft: #221c46;
  --bk-primary-border: #43397d;
  --bk-on-primary: #0d0722;
  --bk-secondary: #63d3ec;
  --bk-secondary-soft: #0d2b33;
  --bk-secondary-border: #1d5766;
  --bk-on-secondary: #021519;
  --bk-success: #58d9b4; --bk-success-soft: #0c2a24; --bk-success-border: #1c5449;
  --bk-warning: #e2b45c; --bk-warning-soft: #2c2312; --bk-warning-border: #57451f;
  --bk-danger: #f27a9f; --bk-danger-soft: #33111f; --bk-danger-border: #63243b;
  --bk-info: #8ba4ff; --bk-info-soft: #171d3c; --bk-info-border: #2e3a6e;
  --bk-neutral: #dfe3ef;
  --bk-neutral-soft: rgb(255 255 255 / 0.08);
  --bk-neutral-border: rgb(255 255 255 / 0.16);
  --bk-on-neutral: #0d0f16;
  --_edge: inset 0 1px 0 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.08);
  --bk-field-bg: rgb(255 255 255 / 0.06);
  --bk-field-border: rgb(255 255 255 / 0.16);
  --bk-card-bg: rgb(255 255 255 / 0.05);
  --bk-overlay-surface: rgb(20 22 34 / 0.88);
  --bk-code-bg: rgb(255 255 255 / 0.05);
  --bk-code-border: rgb(255 255 255 / 0.12);
  --bk-tooltip-bg: #eef0f8;
  --bk-tooltip-fg: #0d0f16;
  --bk-body-image:
    linear-gradient(115deg,
      rgb(255 158 205 / 0.14) 0%, rgb(255 214 165 / 0.1) 18%,
      rgb(184 242 201 / 0.1) 38%, rgb(165 228 255 / 0.14) 58%,
      rgb(195 181 255 / 0.14) 78%, rgb(255 179 230 / 0.14) 100%),
    linear-gradient(180deg, #0d0f16 0%, #141827 100%);
}

/* The foil sweep: a prism band that moves across a surface on hover. */
[data-bk-style="holo"] .bk-card,
[data-bk-style="holo"] .bk-panel,
[data-bk-style="holo"] .bk-stat {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}
[data-bk-style="holo"] .bk-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--_prism);
  opacity: 0.16;
  background-size: 260% 260%;
  background-position: 0% 50%;
  transition: background-position 900ms var(--bk-ease), opacity 400ms var(--bk-ease);
  pointer-events: none;
}
[data-bk-style="holo"] .bk-card:hover::before { background-position: 100% 50%; opacity: 0.3; }
[data-bk-style="holo"] .bk-display,
[data-bk-style="holo"] .bk-title,
[data-bk-style="holo"] .bk-navbar-brand {
  background-image: var(--_prism);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: bk-gradient-pan 9s ease-in-out infinite;
}
[data-bk-style="holo"] .bk-btn-primary:not(.bk-btn-outline):not(.bk-btn-ghost):not(.bk-btn-soft):not(.bk-btn-link) {
  background-image: var(--_prism);
  background-size: 200% 100%;
  color: #1a1430;
  border-color: transparent;
}
[data-bk-style="holo"] .bk-progress-bar { background-image: var(--_prism); }
[data-bk-style="holo"] .bk-navbar { backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); }
[data-bk-style="holo"] .bk-avatar { box-shadow: var(--_edge); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="holo"] {
  --bk-danger-on-soft: #b82856;
  --bk-danger-text: #c02a5a;
  --bk-primary-on-soft: #6447d4;
  --bk-primary-text: #6b4fd6;
  --bk-secondary-on-soft: #0d6e89;
  --bk-secondary-text: #0e728e;
  --bk-text-subtle: #747b8f;
  --bk-warning-on-soft: #8c6110;
  --bk-warning-text: #8c6110;
}
[data-bk-style="holo"][data-bk-theme="dark"] {
  --bk-danger-on-soft: #f27a9f;
  --bk-danger-text: #f27a9f;
  --bk-primary-on-soft: #a996ff;
  --bk-primary-text: #a996ff;
  --bk-secondary-on-soft: #63d3ec;
  --bk-secondary-text: #63d3ec;
  --bk-text-subtle: #7b8298;
  --bk-warning-on-soft: #e2b45c;
  --bk-warning-text: #e2b45c;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "holo" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="holo"][data-bk-theme="auto"] {
  --bk-bg: #0d0f16;
  --bk-bg-subtle: #12151e;
  --bk-surface: rgb(255 255 255 / 0.06);
  --bk-surface-2: rgb(255 255 255 / 0.04);
  --bk-surface-3: rgb(255 255 255 / 0.11);
  --bk-text: #eef0f8;
  --bk-text-muted: #a8aec4;
  --bk-text-subtle: #7b8298;
  --bk-text-inverted: #0d0f16;
  --bk-border: rgb(255 255 255 / 0.14);
  --bk-border-muted: rgb(255 255 255 / 0.08);
  --bk-border-strong: rgb(255 255 255 / 0.3);
  --bk-primary: #a996ff;
  --bk-primary-hover: #bcabff;
  --bk-primary-soft: #221c46;
  --bk-primary-border: #43397d;
  --bk-on-primary: #0d0722;
  --bk-secondary: #63d3ec;
  --bk-secondary-soft: #0d2b33;
  --bk-secondary-border: #1d5766;
  --bk-on-secondary: #021519;
  --bk-success: #58d9b4; --bk-success-soft: #0c2a24; --bk-success-border: #1c5449;
  --bk-warning: #e2b45c; --bk-warning-soft: #2c2312; --bk-warning-border: #57451f;
  --bk-danger: #f27a9f; --bk-danger-soft: #33111f; --bk-danger-border: #63243b;
  --bk-info: #8ba4ff; --bk-info-soft: #171d3c; --bk-info-border: #2e3a6e;
  --bk-neutral: #dfe3ef;
  --bk-neutral-soft: rgb(255 255 255 / 0.08);
  --bk-neutral-border: rgb(255 255 255 / 0.16);
  --bk-on-neutral: #0d0f16;
  --_edge: inset 0 1px 0 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.08);
  --bk-field-bg: rgb(255 255 255 / 0.06);
  --bk-field-border: rgb(255 255 255 / 0.16);
  --bk-card-bg: rgb(255 255 255 / 0.05);
  --bk-overlay-surface: rgb(20 22 34 / 0.88);
  --bk-code-bg: rgb(255 255 255 / 0.05);
  --bk-code-border: rgb(255 255 255 / 0.12);
  --bk-tooltip-bg: #eef0f8;
  --bk-tooltip-fg: #0d0f16;
  --bk-body-image:
    linear-gradient(115deg,
      rgb(255 158 205 / 0.14) 0%, rgb(255 214 165 / 0.1) 18%,
      rgb(184 242 201 / 0.1) 38%, rgb(165 228 255 / 0.14) 58%,
      rgb(195 181 255 / 0.14) 78%, rgb(255 179 230 / 0.14) 100%),
    linear-gradient(180deg, #0d0f16 0%, #141827 100%);


  --bk-danger-on-soft: #f27a9f;
  --bk-danger-text: #f27a9f;
  --bk-primary-on-soft: #a996ff;
  --bk-primary-text: #a996ff;
  --bk-secondary-on-soft: #63d3ec;
  --bk-secondary-text: #63d3ec;
  --bk-text-subtle: #7b8298;
  --bk-warning-on-soft: #e2b45c;
  --bk-warning-text: #e2b45c;
}
}


/* =============================================================================
   SKIN — industrial · Shop floor
   Concrete and safety orange. Stencil lettering, hazard striping on anything
   that warns you, rivets at the corners and the flat pragmatism of equipment
   that has to survive being kicked.
   ========================================================================== */

[data-bk-style="industrial"] {
  --bk-font-sans: "Saira Condensed", "Archivo Narrow", "Oswald", "Arial Narrow", ui-sans-serif, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-font-mono: "Roboto Mono", ui-monospace, monospace;
  --bk-heading-weight: 700;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.03em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.14em;

  --_orange: #ff6a00;
  --_steel: #6f757c;

  --bk-bg: #d8d6d1;
  --bk-bg-subtle: #cbc9c3;
  --bk-bg-muted: #bcb9b2;
  --bk-surface: #e3e1dc;
  --bk-surface-2: #d0cec8;
  --bk-surface-3: #bcb9b2;
  --bk-surface-inverted: #22252a;

  --bk-text: #1d2024;
  --bk-text-muted: #474b51;
  --bk-text-subtle: #757a80;
  --bk-text-inverted: #f0efec;

  --bk-border: #8d9198;
  --bk-border-muted: #b4b2ac;
  --bk-border-strong: #1d2024;
  --bk-border-width: 2px;

  --bk-primary: #c04f00;
  --bk-primary-hover: #a84500;
  --bk-primary-active: #8f3b00;
  --bk-primary-soft: #f7e2d1;
  --bk-primary-border: #1d2024;
  --bk-on-primary: #ffffff;
  --bk-secondary: #3c4c5c;
  --bk-secondary-hover: #31404e;
  --bk-secondary-soft: #dbe1e7;
  --bk-secondary-border: #1d2024;
  --bk-on-secondary: #ffffff;
  --bk-success: #2f6b34;
  --bk-success-soft: #dcebdd;
  --bk-success-border: #1d2024;
  --bk-warning: #8a6800;
  --bk-warning-soft: #f5ecc9;
  --bk-warning-border: #1d2024;
  --bk-danger: #9c1f14;
  --bk-danger-soft: #f5dad7;
  --bk-danger-border: #1d2024;
  --bk-info: #275a78;
  --bk-info-soft: #d8e6ee;
  --bk-info-border: #1d2024;
  --bk-neutral: #1d2024;
  --bk-neutral-soft: #d0cec8;
  --bk-neutral-border: #1d2024;
  --bk-on-neutral: #f0efec;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-xs: none;
  --bk-shadow-sm: 0 2px 0 rgb(29 32 36 / 0.25);
  --bk-shadow-md: 0 3px 0 rgb(29 32 36 / 0.3);
  --bk-shadow-lg: 0 5px 0 rgb(29 32 36 / 0.35), 0 10px 24px rgb(29 32 36 / 0.2);
  --bk-shadow-xl: 0 8px 0 rgb(29 32 36 / 0.35), 0 18px 40px rgb(29 32 36 / 0.28);
  --bk-shadow-2xl: 0 12px 0 rgb(29 32 36 / 0.35), 0 28px 60px rgb(29 32 36 / 0.35);
  --bk-shadow-inner: inset 0 3px 0 rgb(29 32 36 / 0.18);

  --bk-ring: var(--_orange);
  --bk-ring-width: 3px;
  --bk-ring-offset: 1px;

  --bk-btn-border-width: 2px;
  --bk-btn-weight: 700;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.12em;
  --bk-btn-shadow: 0 3px 0 rgb(29 32 36 / 0.35);
  --bk-btn-shadow-hover: 0 4px 0 rgb(29 32 36 / 0.4);
  --bk-btn-shadow-active: 0 1px 0 rgb(29 32 36 / 0.4);
  --bk-press-transform: translateY(2px);
  --bk-hover-transform: none;

  --bk-field-bg: #f0efec;
  --bk-field-border: #1d2024;
  --bk-field-border-width: 2px;
  --bk-field-shadow: inset 0 3px 0 rgb(29 32 36 / 0.14);
  --bk-field-placeholder: #8a8e93;
  --bk-card-border-width: 2px;
  --bk-card-shadow: 0 3px 0 rgb(29 32 36 / 0.28);
  --bk-card-shadow-hover: 0 5px 0 rgb(29 32 36 / 0.35);
  --bk-card-pad: var(--bk-space-5);
  --bk-overlay-surface: #e3e1dc;
  --bk-overlay-border: #1d2024;
  --bk-overlay-shadow: 0 12px 0 rgb(29 32 36 / 0.3), 0 30px 60px rgb(29 32 36 / 0.35);
  --bk-overlay-bg: rgb(29 32 36 / 0.55);
  --bk-code-bg: #cbc9c3;
  --bk-code-border: #1d2024;
  --bk-tooltip-bg: #1d2024;
  --bk-selection-bg: var(--_orange);
  --bk-selection-fg: #1d2024;
  --bk-scrollbar-thumb: #8d9198;
  --bk-divider-color: #1d2024;
  --bk-divider-width: 2px;

  /* Board-formed concrete. */
  --bk-body-image:
    repeating-linear-gradient(180deg, rgb(29 32 36 / 0.05) 0 1px, transparent 1px 3.5rem),
    radial-gradient(circle at 30% 20%, rgb(29 32 36 / 0.035), transparent 45%);
  --bk-body-attachment: fixed;
}

[data-bk-style="industrial"][data-bk-theme="dark"] {
  --bk-bg: #1a1d21;
  --bk-bg-subtle: #21252a;
  --bk-surface: #24282e;
  --bk-surface-2: #2c3138;
  --bk-surface-3: #363c44;
  --bk-text: #e9e7e2;
  --bk-text-muted: #aeb3ba;
  --bk-text-subtle: #7f858d;
  --bk-text-inverted: #1a1d21;
  --bk-border: #444a52;
  --bk-border-muted: #2c3138;
  --bk-border-strong: #e9e7e2;
  --bk-primary: var(--_orange);
  --bk-primary-hover: #ff8129;
  --bk-primary-soft: #3a1f0a;
  --bk-primary-border: #e9e7e2;
  --bk-on-primary: #1a0d02;
  --bk-secondary: #7f96ab;
  --bk-secondary-soft: #1e2932;
  --bk-secondary-border: #e9e7e2;
  --bk-success-soft: #16290f;
  --bk-warning-soft: #2e2508;
  --bk-danger-soft: #33130f;
  --bk-info-soft: #16252e;
  --bk-neutral: #e9e7e2;
  --bk-neutral-soft: #2c3138;
  --bk-neutral-border: #e9e7e2;
  --bk-on-neutral: #1a1d21;
  --bk-field-bg: #14171a;
  --bk-field-border: #e9e7e2;
  --bk-code-bg: #14171a;
  --bk-code-border: #e9e7e2;
  --bk-overlay-surface: #24282e;
  --bk-overlay-border: #e9e7e2;
  --bk-tooltip-bg: #e9e7e2;
  --bk-tooltip-fg: #1a1d21;
  --bk-divider-color: #e9e7e2;
  --bk-body-image: repeating-linear-gradient(180deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3.5rem);
}

/* Hazard striping on anything that warns you. */
[data-bk-style="industrial"] .bk-alert-warning,
[data-bk-style="industrial"] .bk-alert-danger { position: relative; overflow: hidden; }
[data-bk-style="industrial"] .bk-alert-warning::after,
[data-bk-style="industrial"] .bk-alert-danger::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 8px;
  background: repeating-linear-gradient(45deg,
    var(--bk-c) 0 6px, transparent 6px 12px);
}
[data-bk-style="industrial"] .bk-navbar {
  border-block-end: 3px solid var(--bk-border-strong);
  background: var(--bk-surface);
}
[data-bk-style="industrial"] .bk-table thead th {
  background: var(--bk-surface-inverted);
  color: var(--bk-text-inverted);
  border-block-end: 2px solid var(--bk-border-strong);
}
[data-bk-style="industrial"] .bk-progress { border: 2px solid var(--bk-border-strong); background: var(--bk-surface-3); }
[data-bk-style="industrial"] .bk-progress-bar {
  background-image: repeating-linear-gradient(45deg, rgb(0 0 0 / 0.22) 0 6px, transparent 6px 12px);
}
[data-bk-style="industrial"] .bk-badge { border: 2px solid var(--bk-border-strong); font-weight: 700; }
[data-bk-style="industrial"] .bk-avatar { border: 2px solid var(--bk-border-strong); border-radius: 0; }
[data-bk-style="industrial"] .bk-check,
[data-bk-style="industrial"] .bk-switch,
[data-bk-style="industrial"] .bk-switch::before { border-radius: 0; }
[data-bk-style="industrial"] .bk-section-head .bk-eyebrow { color: var(--bk-primary); }
[data-bk-style="industrial"] .bk-card { position: relative; }
/* Rivets. */
[data-bk-style="industrial"] .bk-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0, var(--bk-border) 0 2px, transparent 2.5px),
    radial-gradient(circle at 100% 0, var(--bk-border) 0 2px, transparent 2.5px),
    radial-gradient(circle at 0 100%, var(--bk-border) 0 2px, transparent 2.5px),
    radial-gradient(circle at 100% 100%, var(--bk-border) 0 2px, transparent 2.5px);
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="industrial"] {
  --bk-danger: #9c1f14;
  --bk-danger-on-soft: #9c1f14;
  --bk-danger-soft: #f5dad7;
  --bk-danger-text: #9c1f14;
  --bk-field-placeholder: #82868c;
  --bk-info: #275a78;
  --bk-info-on-soft: #275a78;
  --bk-info-soft: #d8e6ee;
  --bk-info-text: #275a78;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-secondary: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-primary-on-soft: #a74500;
  --bk-primary-text: #973e00;
  --bk-secondary: #3c4c5c;
  --bk-secondary-soft: #dbe1e7;
  --bk-success: #2f6b34;
  --bk-success-on-soft: #2f6b34;
  --bk-success-soft: #dcebdd;
  --bk-success-text: #2c6431;
  --bk-text-muted: #42464c;
  --bk-text-subtle: #5d6165;
  --bk-warning: #8a6800;
  --bk-warning-on-soft: #806000;
  --bk-warning-soft: #f5ecc9;
  --bk-warning-text: #715500;
}
[data-bk-style="industrial"][data-bk-theme="dark"] {
  --bk-danger: #9c1f14;
  --bk-danger-on-soft: #e8594c;
  --bk-danger-soft: #33130f;
  --bk-danger-text: #ea6a5f;
  --bk-field-placeholder: #8a8e93;
  --bk-info: #275a78;
  --bk-info-on-soft: #4795c3;
  --bk-info-soft: #16252e;
  --bk-info-text: #4f9ac6;
  --bk-on-danger: #f1bbc1;
  --bk-on-info: #aad3f7;
  --bk-on-secondary: #292929;
  --bk-on-success: #9defc2;
  --bk-on-warning: #fcf3e2;
  --bk-primary-on-soft: #ff6a00;
  --bk-primary-text: #ff6a00;
  --bk-secondary: #7f96ab;
  --bk-secondary-soft: #1e2932;
  --bk-success: #2f6b34;
  --bk-success-on-soft: #46a04e;
  --bk-success-soft: #16290f;
  --bk-success-text: #48a450;
  --bk-text-muted: #aeb3ba;
  --bk-text-subtle: #848a92;
  --bk-warning: #8a6800;
  --bk-warning-on-soft: #b88b00;
  --bk-warning-soft: #2e2508;
  --bk-warning-text: #b88b00;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "industrial" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="industrial"][data-bk-theme="auto"] {
  --bk-bg: #1a1d21;
  --bk-bg-subtle: #21252a;
  --bk-surface: #24282e;
  --bk-surface-2: #2c3138;
  --bk-surface-3: #363c44;
  --bk-text: #e9e7e2;
  --bk-text-muted: #aeb3ba;
  --bk-text-subtle: #7f858d;
  --bk-text-inverted: #1a1d21;
  --bk-border: #444a52;
  --bk-border-muted: #2c3138;
  --bk-border-strong: #e9e7e2;
  --bk-primary: var(--_orange);
  --bk-primary-hover: #ff8129;
  --bk-primary-soft: #3a1f0a;
  --bk-primary-border: #e9e7e2;
  --bk-on-primary: #1a0d02;
  --bk-secondary: #7f96ab;
  --bk-secondary-soft: #1e2932;
  --bk-secondary-border: #e9e7e2;
  --bk-success-soft: #16290f;
  --bk-warning-soft: #2e2508;
  --bk-danger-soft: #33130f;
  --bk-info-soft: #16252e;
  --bk-neutral: #e9e7e2;
  --bk-neutral-soft: #2c3138;
  --bk-neutral-border: #e9e7e2;
  --bk-on-neutral: #1a1d21;
  --bk-field-bg: #14171a;
  --bk-field-border: #e9e7e2;
  --bk-code-bg: #14171a;
  --bk-code-border: #e9e7e2;
  --bk-overlay-surface: #24282e;
  --bk-overlay-border: #e9e7e2;
  --bk-tooltip-bg: #e9e7e2;
  --bk-tooltip-fg: #1a1d21;
  --bk-divider-color: #e9e7e2;
  --bk-body-image: repeating-linear-gradient(180deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3.5rem);


  --bk-danger: #9c1f14;
  --bk-danger-on-soft: #e8594c;
  --bk-danger-soft: #33130f;
  --bk-danger-text: #ea6a5f;
  --bk-field-placeholder: #8a8e93;
  --bk-info: #275a78;
  --bk-info-on-soft: #4795c3;
  --bk-info-soft: #16252e;
  --bk-info-text: #4f9ac6;
  --bk-on-danger: #f1bbc1;
  --bk-on-info: #aad3f7;
  --bk-on-secondary: #292929;
  --bk-on-success: #9defc2;
  --bk-on-warning: #fcf3e2;
  --bk-primary-on-soft: #ff6a00;
  --bk-primary-text: #ff6a00;
  --bk-secondary: #7f96ab;
  --bk-secondary-soft: #1e2932;
  --bk-success: #2f6b34;
  --bk-success-on-soft: #46a04e;
  --bk-success-soft: #16290f;
  --bk-success-text: #48a450;
  --bk-text-muted: #aeb3ba;
  --bk-text-subtle: #848a92;
  --bk-warning: #8a6800;
  --bk-warning-on-soft: #b88b00;
  --bk-warning-soft: #2e2508;
  --bk-warning-text: #b88b00;
}
}


/* =============================================================================
   SKIN — ledger · Green-bar accounting
   Ruled rows on continuous-feed paper, tabular figures everywhere, a hard rule
   under every total and the sober restraint of a document that has to add up.
   ========================================================================== */

[data-bk-style="ledger"] {
  --bk-font-sans: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bk-font-mono: "IBM Plex Mono", "Roboto Mono", ui-monospace, monospace;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 600;
  --bk-heading-tracking: -0.01em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.1em;
  --bk-font-variant-numeric: tabular-nums lining-nums;

  --_bar: #d6e8d5;
  --_rule: #9bb79a;

  --bk-bg: #f7f8f4;
  --bk-bg-subtle: #eef2ea;
  --bk-bg-muted: #e2e9de;
  --bk-surface: #ffffff;
  --bk-surface-2: #eef2ea;
  --bk-surface-3: #dde6da;
  --bk-surface-inverted: #1c2620;

  --bk-text: #1b241e;
  --bk-text-muted: #4c5850;
  --bk-text-subtle: #7c8880;
  --bk-text-inverted: #f7f8f4;

  --bk-border: #b9c8b6;
  --bk-border-muted: #dbe4d8;
  --bk-border-strong: #46614a;
  --bk-border-width: 1px;

  --bk-primary: #1f5c3a;
  --bk-primary-hover: #194c30;
  --bk-primary-active: #143d27;
  --bk-primary-soft: #dcecdf;
  --bk-primary-border: #9dc0a6;
  --bk-on-primary: #f7f8f4;
  --bk-secondary: #2c4d6b;
  --bk-secondary-hover: #234058;
  --bk-secondary-soft: #dce6ef;
  --bk-secondary-border: #9db8ce;
  --bk-on-secondary: #f7f8f4;
  --bk-success: #1f5c3a;
  --bk-success-soft: #dcecdf;
  --bk-success-border: #9dc0a6;
  --bk-warning: #8a6314;
  --bk-warning-soft: #f4ead0;
  --bk-warning-border: #d6bd83;
  --bk-danger: #9c2320;
  --bk-danger-soft: #f5dedd;
  --bk-danger-border: #d9a2a0;
  --bk-info: #2c4d6b;
  --bk-info-soft: #dce6ef;
  --bk-info-border: #9db8ce;
  --bk-neutral: #1b241e;
  --bk-neutral-soft: #e6ece3;
  --bk-neutral-border: #b9c8b6;
  --bk-on-neutral: #f7f8f4;

  --bk-radius-scale: 0.15;
  --bk-radius-field: 1px;
  --bk-radius-card: 1px;
  --bk-radius-overlay: 2px;
  --bk-radius-pill: 9999px;

  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: 0 1px 0 rgb(27 36 30 / 0.12);
  --bk-shadow-lg: 0 2px 12px rgb(27 36 30 / 0.1);
  --bk-shadow-xl: 0 8px 28px rgb(27 36 30 / 0.14);
  --bk-shadow-2xl: 0 18px 48px rgb(27 36 30 / 0.18);
  --bk-shadow-inner: none;

  --bk-ring: #1f5c3a;
  --bk-ring-width: 2px;
  --bk-ring-offset: 1px;

  --bk-btn-weight: 600;
  --bk-btn-border-width: 1px;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-press-transform: translateY(1px);
  --bk-hover-transform: none;

  --bk-field-bg: #ffffff;
  --bk-field-border: #93a891;
  --bk-field-border-hover: #1f5c3a;
  --bk-field-shadow: none;
  --bk-field-placeholder: #9aa89a;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: var(--bk-shadow-md);
  --bk-card-pad: var(--bk-space-5);
  --bk-overlay-surface: #ffffff;
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(27 36 30 / 0.4);
  --bk-code-bg: #eef2ea;
  --bk-code-border: #b9c8b6;
  --bk-tooltip-bg: #1b241e;
  --bk-selection-bg: rgb(31 92 58 / 0.2);
  --bk-scrollbar-thumb: #b9c8b6;
  --bk-divider-color: #46614a;

  /* Continuous-feed green bar. */
  --bk-body-image: repeating-linear-gradient(
    180deg,
    rgb(155 183 154 / 0.16) 0 1.7rem,
    transparent 1.7rem 3.4rem);
}

[data-bk-style="ledger"][data-bk-theme="dark"] {
  --_bar: #16281d;
  --_rule: #2f4a37;
  --bk-bg: #101713;
  --bk-bg-subtle: #141d18;
  --bk-surface: #16201a;
  --bk-surface-2: #1c2721;
  --bk-surface-3: #24312a;
  --bk-text: #e3ece5;
  --bk-text-muted: #a5b5aa;
  --bk-text-subtle: #7a8a7f;
  --bk-text-inverted: #101713;
  --bk-border: #2c3b32;
  --bk-border-muted: #1e2a23;
  --bk-border-strong: #6d8f78;
  --bk-primary: #6dbb8b;
  --bk-primary-hover: #83c99d;
  --bk-primary-soft: #14291d;
  --bk-primary-border: #33543f;
  --bk-on-primary: #06150c;
  --bk-secondary: #7fa8cb;
  --bk-secondary-soft: #142230;
  --bk-secondary-border: #2f4a63;
  --bk-on-secondary: #04101a;
  --bk-success: #6dbb8b;
  --bk-success-soft: #14291d;
  --bk-success-border: #33543f;
  --bk-warning-soft: #2b2410;
  --bk-danger-soft: #2c1514;
  --bk-info-soft: #142230;
  --bk-neutral: #e3ece5;
  --bk-neutral-soft: #1c2721;
  --bk-neutral-border: #2c3b32;
  --bk-on-neutral: #101713;
  --bk-field-bg: #0c120f;
  --bk-field-border: #3a4d41;
  --bk-code-bg: #141d18;
  --bk-code-border: #2c3b32;
  --bk-overlay-surface: #16201a;
  --bk-tooltip-bg: #e3ece5;
  --bk-tooltip-fg: #101713;
  --bk-divider-color: #6d8f78;
  --bk-body-image: repeating-linear-gradient(180deg, rgb(109 187 139 / 0.05) 0 1.7rem, transparent 1.7rem 3.4rem);
}

/* Zebra striping is the point here, not an option. */
[data-bk-style="ledger"] .bk-table tbody tr:nth-child(odd) { background: var(--_bar); }
[data-bk-style="ledger"] .bk-table thead th {
  background: transparent;
  border-block-end: 2px solid var(--bk-border-strong);
  color: var(--bk-text);
}
[data-bk-style="ledger"] .bk-table tfoot td {
  border-block-start: 3px double var(--bk-border-strong);
  background: transparent;
}
[data-bk-style="ledger"] .bk-table td,
[data-bk-style="ledger"] .bk-stat-value,
[data-bk-style="ledger"] .bk-badge { font-variant-numeric: tabular-nums lining-nums; }
[data-bk-style="ledger"] .bk-navbar { background: var(--bk-surface); border-block-end: 2px solid var(--bk-border-strong); }
[data-bk-style="ledger"] .bk-card { border-block-end: 2px solid var(--bk-border-strong); }
[data-bk-style="ledger"] .bk-stat { border-block-end: 3px double var(--bk-border-strong); }
[data-bk-style="ledger"] .bk-badge { border-radius: 0; border: 1px solid currentColor; }
[data-bk-style="ledger"] .bk-input,
[data-bk-style="ledger"] .bk-select { font-variant-numeric: tabular-nums; }
[data-bk-style="ledger"] .bk-divider { border-block-start: 3px double var(--bk-divider-color); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="ledger"] {
  --bk-danger: #9c2320;
  --bk-danger-on-soft: #9c2320;
  --bk-danger-soft: #f5dedd;
  --bk-danger-text: #9c2320;
  --bk-field-placeholder: #849584;
  --bk-info: #2c4d6b;
  --bk-info-on-soft: #2c4d6b;
  --bk-info-soft: #dce6ef;
  --bk-info-text: #2c4d6b;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-text-subtle: #748078;
  --bk-warning: #8a6314;
  --bk-warning-on-soft: #8a6314;
  --bk-warning-soft: #f4ead0;
  --bk-warning-text: #8a6314;
}
[data-bk-style="ledger"][data-bk-theme="dark"] {
  --bk-danger: #9c2320;
  --bk-danger-on-soft: #dd5d59;
  --bk-danger-soft: #2c1514;
  --bk-danger-text: #de615e;
  --bk-field-placeholder: #9aa89a;
  --bk-info: #2c4d6b;
  --bk-info-on-soft: #5f90bd;
  --bk-info-soft: #142230;
  --bk-info-text: #5b8ebc;
  --bk-on-danger: #f1bbc1;
  --bk-on-info: #8ec5f4;
  --bk-on-warning: #fbefd8;
  --bk-text-subtle: #7a8a7f;
  --bk-warning: #8a6314;
  --bk-warning-on-soft: #bb861b;
  --bk-warning-soft: #2b2410;
  --bk-warning-text: #b2801a;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "ledger" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="ledger"][data-bk-theme="auto"] {
  --_bar: #16281d;
  --_rule: #2f4a37;
  --bk-bg: #101713;
  --bk-bg-subtle: #141d18;
  --bk-surface: #16201a;
  --bk-surface-2: #1c2721;
  --bk-surface-3: #24312a;
  --bk-text: #e3ece5;
  --bk-text-muted: #a5b5aa;
  --bk-text-subtle: #7a8a7f;
  --bk-text-inverted: #101713;
  --bk-border: #2c3b32;
  --bk-border-muted: #1e2a23;
  --bk-border-strong: #6d8f78;
  --bk-primary: #6dbb8b;
  --bk-primary-hover: #83c99d;
  --bk-primary-soft: #14291d;
  --bk-primary-border: #33543f;
  --bk-on-primary: #06150c;
  --bk-secondary: #7fa8cb;
  --bk-secondary-soft: #142230;
  --bk-secondary-border: #2f4a63;
  --bk-on-secondary: #04101a;
  --bk-success: #6dbb8b;
  --bk-success-soft: #14291d;
  --bk-success-border: #33543f;
  --bk-warning-soft: #2b2410;
  --bk-danger-soft: #2c1514;
  --bk-info-soft: #142230;
  --bk-neutral: #e3ece5;
  --bk-neutral-soft: #1c2721;
  --bk-neutral-border: #2c3b32;
  --bk-on-neutral: #101713;
  --bk-field-bg: #0c120f;
  --bk-field-border: #3a4d41;
  --bk-code-bg: #141d18;
  --bk-code-border: #2c3b32;
  --bk-overlay-surface: #16201a;
  --bk-tooltip-bg: #e3ece5;
  --bk-tooltip-fg: #101713;
  --bk-divider-color: #6d8f78;
  --bk-body-image: repeating-linear-gradient(180deg, rgb(109 187 139 / 0.05) 0 1.7rem, transparent 1.7rem 3.4rem);


  --bk-danger: #9c2320;
  --bk-danger-on-soft: #dd5d59;
  --bk-danger-soft: #2c1514;
  --bk-danger-text: #de615e;
  --bk-field-placeholder: #9aa89a;
  --bk-info: #2c4d6b;
  --bk-info-on-soft: #5f90bd;
  --bk-info-soft: #142230;
  --bk-info-text: #5b8ebc;
  --bk-on-danger: #f1bbc1;
  --bk-on-info: #8ec5f4;
  --bk-on-warning: #fbefd8;
  --bk-text-subtle: #7a8a7f;
  --bk-warning: #8a6314;
  --bk-warning-on-soft: #bb861b;
  --bk-warning-soft: #2b2410;
  --bk-warning-text: #b2801a;
}
}


/* =============================================================================
   SKIN — luxe · Editorial noir
   Deep charcoal, warm champagne accent, high-contrast serif display and very
   quiet chrome. Fashion-house homepage energy.
   ========================================================================== */

[data-bk-style="luxe"] {
  --bk-font-display: "Canela", "Playfair Display", "Didot", Georgia, serif;
  --bk-font-serif: var(--bk-font-display);
  --bk-font-sans: "Neue Haas Grotesk", "Inter", "Helvetica Neue", ui-sans-serif, sans-serif;
  --bk-font-body: var(--bk-font-sans);
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 400;
  --bk-heading-tracking: -0.02em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.2em;
  --bk-text-sm: 0.75rem;

  --_champagne: #c8a97e;

  --bk-bg: #0f0f0e;
  --bk-bg-subtle: #141413;
  --bk-bg-muted: #1b1b19;
  --bk-surface: #141413;
  --bk-surface-2: #1b1b19;
  --bk-surface-3: #232320;
  --bk-surface-inverted: #f5f2ec;

  --bk-text: #f2efe9;
  --bk-text-muted: #a8a49b;
  --bk-text-subtle: #77736b;
  --bk-text-inverted: #0f0f0e;

  --bk-border: #2a2a26;
  --bk-border-muted: #1f1f1c;
  --bk-border-strong: #3d3c36;

  --bk-primary: var(--_champagne);
  --bk-primary-hover: #d6bb95;
  --bk-primary-active: #e2cdad;
  --bk-primary-soft: #221d15;
  --bk-primary-border: #4e422e;
  --bk-on-primary: #14100a;
  --bk-secondary: #f2efe9;
  --bk-secondary-hover: #ffffff;
  --bk-secondary-soft: #232320;
  --bk-secondary-border: #3d3c36;
  --bk-on-secondary: #0f0f0e;
  --bk-success: #8fae7f;
  --bk-success-soft: #1a2216;
  --bk-success-border: #3a482f;
  --bk-on-success: #0c1207;
  --bk-warning: #d5a94f;
  --bk-warning-soft: #251d0d;
  --bk-warning-border: #4d3d1c;
  --bk-on-warning: #171003;
  --bk-danger: #c17b6f;
  --bk-danger-soft: #251715;
  --bk-danger-border: #4d302b;
  --bk-on-danger: #180a08;
  --bk-info: #8fa5b8;
  --bk-info-soft: #171d22;
  --bk-info-border: #2f3c46;
  --bk-on-info: #0a0f13;
  --bk-neutral: #f2efe9;
  --bk-neutral-soft: #1f1f1c;
  --bk-neutral-border: #2a2a26;
  --bk-on-neutral: #0f0f0e;

  --bk-radius-scale: 0.15;
  --bk-radius-field: 1px;
  --bk-radius-card: 2px;
  --bk-radius-overlay: 2px;
  --bk-radius-pill: 9999px;

  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: 0 8px 24px rgb(0 0 0 / 0.5);
  --bk-shadow-lg: 0 16px 44px rgb(0 0 0 / 0.6);
  --bk-shadow-xl: 0 28px 70px rgb(0 0 0 / 0.7);
  --bk-shadow-2xl: 0 40px 100px rgb(0 0 0 / 0.8);
  --bk-shadow-inner: none;

  --bk-ring: var(--_champagne);
  --bk-ring-width: 1px;
  --bk-ring-offset: 4px;

  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.22em;
  --bk-btn-weight: 500;
  --bk-btn-border-width: 1px;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-press-transform: none;
  --bk-hover-transform: none;

  --bk-field-bg: transparent;
  --bk-field-bg-hover: transparent;
  --bk-field-border: #3d3c36;
  --bk-field-border-hover: var(--_champagne);
  --bk-field-shadow: none;
  --bk-field-placeholder: #6a665e;
  --bk-card-bg: transparent;
  --bk-card-border: #2a2a26;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: none;
  --bk-card-pad: var(--bk-space-8);
  --bk-overlay-surface: #141413;
  --bk-overlay-border: #3d3c36;
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(0 0 0 / 0.8);
  --bk-code-bg: #1b1b19;
  --bk-code-border: #2a2a26;
  --bk-tooltip-bg: #f2efe9;
  --bk-tooltip-fg: #0f0f0e;
  --bk-selection-bg: rgb(200 169 126 / 0.3);
  --bk-scrollbar-thumb: #33322d;
  --bk-divider-color: #2a2a26;
  --bk-container-gutter: var(--bk-space-8);
  color-scheme: dark;
}
[data-bk-style="luxe"][data-bk-theme="light"] {
  --bk-bg: #f7f5f0;
  --bk-bg-subtle: #f1eee7;
  --bk-surface: #ffffff;
  --bk-surface-2: #f1eee7;
  --bk-surface-3: #e7e3d9;
  --bk-text: #16150f;
  --bk-text-muted: #57544c;
  --bk-text-subtle: #8b8779;
  --bk-text-inverted: #f7f5f0;
  --bk-border: #ddd8cb;
  --bk-border-muted: #ebe7dd;
  --bk-border-strong: #b9b2a1;
  --bk-primary: #97754a;
  --bk-primary-hover: #816239;
  --bk-primary-soft: #f2ece0;
  --bk-primary-border: #d6c6ab;
  --bk-on-primary: #ffffff;
  --bk-neutral: #16150f;
  --bk-neutral-soft: #f1eee7;
  --bk-on-neutral: #f7f5f0;
  --bk-field-border: #c8c2b3;
  --bk-card-border: #ddd8cb;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #ddd8cb;
  --bk-code-bg: #f1eee7;
  --bk-code-border: #ddd8cb;
  --bk-tooltip-bg: #16150f;
  --bk-tooltip-fg: #f7f5f0;
  --bk-divider-color: #ddd8cb;
  color-scheme: light;
}

[data-bk-style="luxe"] .bk-display { font-weight: 300; letter-spacing: -0.03em; }
[data-bk-style="luxe"] .bk-title { font-weight: 400; }
[data-bk-style="luxe"] .bk-eyebrow { color: var(--bk-primary); }
[data-bk-style="luxe"] .bk-navbar { background: transparent; border-block-end: 1px solid var(--bk-border); }
[data-bk-style="luxe"] .bk-navbar-brand { font-family: var(--bk-font-display); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; }
[data-bk-style="luxe"] .bk-card { border-inline: 0; border-block-start: 1px solid var(--bk-border); }
[data-bk-style="luxe"] .bk-table thead th { background: transparent; border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="luxe"] .bk-btn-solid,
[data-bk-style="luxe"] .bk-btn:not([class*="bk-btn-"]) { border-color: var(--bk-border-strong); }
[data-bk-style="luxe"] .bk-btn-outline:hover { background: transparent; border-color: var(--bk-primary); color: var(--bk-primary); }
[data-bk-style="luxe"] .bk-input,
[data-bk-style="luxe"] .bk-textarea,
[data-bk-style="luxe"] .bk-select {
  border-inline: 0;
  border-block-start: 0;
  border-radius: 0;
  padding-inline: 0;
}
[data-bk-style="luxe"] .bk-input:focus,
[data-bk-style="luxe"] .bk-textarea:focus,
[data-bk-style="luxe"] .bk-select:focus { outline: none; border-block-end-color: var(--bk-primary); }
[data-bk-style="luxe"] .bk-badge { border: 1px solid currentColor; border-radius: 0; letter-spacing: 0.18em; }
[data-bk-style="luxe"] .bk-tab { letter-spacing: 0.18em; }
[data-bk-style="luxe"] .bk-section-head { border-block-start: 1px solid var(--bk-border); padding-block-start: var(--bk-space-4); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="luxe"] {
  --bk-danger-on-soft: #c17b6f;
  --bk-danger-text: #c17b6f;
  --bk-info-on-soft: #8fa5b8;
  --bk-info-text: #8fa5b8;
  --bk-on-primary: #14100a;
  --bk-primary: #c8a97e;
  --bk-primary-on-soft: #c8a97e;
  --bk-primary-soft: #221d15;
  --bk-primary-text: #c8a97e;
  --bk-secondary-on-soft: #f2efe9;
  --bk-secondary-text: #f2efe9;
  --bk-success-on-soft: #8fae7f;
  --bk-success-text: #8fae7f;
  --bk-text-subtle: #77736b;
  --bk-warning-on-soft: #d5a94f;
  --bk-warning-text: #d5a94f;
}
[data-bk-style="luxe"][data-bk-theme="light"] {
  --bk-danger-on-soft: #c17b6f;
  --bk-danger-text: #a65548;
  --bk-info-on-soft: #8fa5b8;
  --bk-info-text: #557087;
  --bk-on-primary: #080808;
  --bk-primary: #97754a;
  --bk-primary-on-soft: #7f623e;
  --bk-primary-soft: #f2ece0;
  --bk-primary-text: #866842;
  --bk-secondary-on-soft: #f2efe9;
  --bk-secondary-text: #7a6a48;
  --bk-success-on-soft: #8fae7f;
  --bk-success-text: #587449;
  --bk-text-subtle: #807d6f;
  --bk-warning-on-soft: #d5a94f;
  --bk-warning-text: #896721;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "luxe" — generated by scripts/build.mjs */
@media (prefers-color-scheme: light) {
  [data-bk-style="luxe"][data-bk-theme="auto"] {
  --bk-bg: #f7f5f0;
  --bk-bg-subtle: #f1eee7;
  --bk-surface: #ffffff;
  --bk-surface-2: #f1eee7;
  --bk-surface-3: #e7e3d9;
  --bk-text: #16150f;
  --bk-text-muted: #57544c;
  --bk-text-subtle: #8b8779;
  --bk-text-inverted: #f7f5f0;
  --bk-border: #ddd8cb;
  --bk-border-muted: #ebe7dd;
  --bk-border-strong: #b9b2a1;
  --bk-primary: #97754a;
  --bk-primary-hover: #816239;
  --bk-primary-soft: #f2ece0;
  --bk-primary-border: #d6c6ab;
  --bk-on-primary: #ffffff;
  --bk-neutral: #16150f;
  --bk-neutral-soft: #f1eee7;
  --bk-on-neutral: #f7f5f0;
  --bk-field-border: #c8c2b3;
  --bk-card-border: #ddd8cb;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #ddd8cb;
  --bk-code-bg: #f1eee7;
  --bk-code-border: #ddd8cb;
  --bk-tooltip-bg: #16150f;
  --bk-tooltip-fg: #f7f5f0;
  --bk-divider-color: #ddd8cb;
  color-scheme: light;


  --bk-danger-on-soft: #c17b6f;
  --bk-danger-text: #a65548;
  --bk-info-on-soft: #8fa5b8;
  --bk-info-text: #557087;
  --bk-on-primary: #080808;
  --bk-primary: #97754a;
  --bk-primary-on-soft: #7f623e;
  --bk-primary-soft: #f2ece0;
  --bk-primary-text: #866842;
  --bk-secondary-on-soft: #f2efe9;
  --bk-secondary-text: #7a6a48;
  --bk-success-on-soft: #8fae7f;
  --bk-success-text: #587449;
  --bk-text-subtle: #807d6f;
  --bk-warning-on-soft: #d5a94f;
  --bk-warning-text: #896721;
}
}


/* =============================================================================
   SKIN — macclassic · 1984
   One bit of colour depth. Pure black on pure white, 1px rules, pinstriped
   title bars, and the rounded-rectangle everyone stole. Nothing here has a
   gradient because the hardware could not draw one.
   ========================================================================== */

[data-bk-style="macclassic"] {
  --bk-font-sans: "Chicago", "ChiKareGo2", Geneva, Verdana, "Segoe UI", sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-font-mono: Monaco, "Courier New", ui-monospace, monospace;
  --bk-heading-weight: 700;
  --bk-heading-tracking: 0;
  --bk-text-base: 0.8125rem;
  --bk-leading-normal: 1.5;

  --bk-bg: #ffffff;
  --bk-bg-subtle: #ffffff;
  --bk-bg-muted: #eeeeee;
  --bk-surface: #ffffff;
  --bk-surface-2: #ffffff;
  --bk-surface-3: #e8e8e8;
  --bk-surface-inverted: #000000;

  --bk-text: #000000;
  --bk-text-muted: #333333;
  --bk-text-subtle: #666666;
  --bk-text-inverted: #ffffff;

  --bk-border: #000000;
  --bk-border-muted: #999999;
  --bk-border-strong: #000000;
  --bk-border-width: 1px;

  --bk-primary: #000000;
  --bk-primary-hover: #222222;
  --bk-primary-active: #444444;
  --bk-primary-soft: #e8e8e8;
  --bk-primary-border: #000000;
  --bk-on-primary: #ffffff;
  --bk-secondary: #444444;
  --bk-secondary-hover: #333333;
  --bk-secondary-soft: #ededed;
  --bk-secondary-border: #000000;
  --bk-on-secondary: #ffffff;
  --bk-success: #000000;
  --bk-success-soft: #e8e8e8;
  --bk-success-border: #000000;
  --bk-warning: #000000;
  --bk-warning-soft: #e8e8e8;
  --bk-warning-border: #000000;
  --bk-danger: #000000;
  --bk-danger-soft: #e0e0e0;
  --bk-danger-border: #000000;
  --bk-info: #000000;
  --bk-info-soft: #e8e8e8;
  --bk-info-border: #000000;
  --bk-neutral: #000000;
  --bk-neutral-soft: #eeeeee;
  --bk-neutral-border: #000000;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 1.2;
  --bk-radius-field: 3px;
  --bk-radius-card: 6px;
  --bk-radius-overlay: 6px;
  --bk-radius-pill: 9999px;

  --bk-shadow-none: 0 0 #0000;
  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: 2px 2px 0 0 #000000;
  --bk-shadow-lg: 3px 3px 0 0 #000000;
  --bk-shadow-xl: 4px 4px 0 0 #000000;
  --bk-shadow-2xl: 5px 5px 0 0 #000000;
  --bk-shadow-inner: inset 1px 1px 0 0 #999999;

  --bk-ring: #000000;
  --bk-ring-width: 2px;
  --bk-ring-offset: 2px;

  --bk-btn-border-width: 1px;
  --bk-btn-weight: 700;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-press-transform: none;
  --bk-hover-transform: none;

  --bk-field-bg: #ffffff;
  --bk-field-border: #000000;
  --bk-field-border-hover: #000000;
  --bk-field-shadow: none;
  --bk-field-placeholder: #888888;
  --bk-card-shadow: 2px 2px 0 0 #000000;
  --bk-card-shadow-hover: 3px 3px 0 0 #000000;
  --bk-card-pad: var(--bk-space-4);
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #000000;
  --bk-overlay-shadow: 4px 4px 0 0 #000000;
  --bk-overlay-bg: rgb(0 0 0 / 0.35);
  --bk-code-bg: #ffffff;
  --bk-code-border: #000000;
  --bk-tooltip-bg: #ffffcc;
  --bk-tooltip-fg: #000000;
  --bk-selection-bg: #000000;
  --bk-selection-fg: #ffffff;
  --bk-scrollbar-thumb: #000000;
  --bk-divider-color: #000000;
  --bk-transition: none;

  /* The desktop was a 50% dither, not a colour. */
  --bk-body-image: repeating-conic-gradient(rgb(0 0 0 / 0.09) 0% 25%, transparent 0% 50%);
  --bk-body-image-size: 2px 2px;
  --bk-body-attachment: fixed;
}
[data-bk-style="macclassic"] body,
body[data-bk-style="macclassic"] { background-size: 2px 2px; }

[data-bk-style="macclassic"][data-bk-theme="dark"] {
  --bk-bg: #000000;
  --bk-bg-subtle: #000000;
  --bk-bg-muted: #111111;
  --bk-surface: #000000;
  --bk-surface-2: #000000;
  --bk-surface-3: #1a1a1a;
  --bk-surface-inverted: #ffffff;
  --bk-text: #ffffff;
  --bk-text-muted: #d0d0d0;
  --bk-text-subtle: #9a9a9a;
  --bk-text-inverted: #000000;
  --bk-border: #ffffff;
  --bk-border-muted: #666666;
  --bk-border-strong: #ffffff;
  --bk-primary: #ffffff;
  --bk-primary-hover: #dddddd;
  --bk-primary-soft: #1a1a1a;
  --bk-primary-border: #ffffff;
  --bk-on-primary: #000000;
  --bk-secondary: #cccccc;
  --bk-secondary-soft: #1a1a1a;
  --bk-secondary-border: #ffffff;
  --bk-on-secondary: #000000;
  --bk-success: #ffffff; --bk-success-soft: #1a1a1a; --bk-success-border: #ffffff;
  --bk-warning: #ffffff; --bk-warning-soft: #1a1a1a; --bk-warning-border: #ffffff;
  --bk-danger: #ffffff; --bk-danger-soft: #221111; --bk-danger-border: #ffffff;
  --bk-info: #ffffff; --bk-info-soft: #1a1a1a; --bk-info-border: #ffffff;
  --bk-neutral: #ffffff;
  --bk-neutral-soft: #1a1a1a;
  --bk-neutral-border: #ffffff;
  --bk-on-neutral: #000000;
  --bk-shadow-md: 2px 2px 0 0 #ffffff;
  --bk-shadow-lg: 3px 3px 0 0 #ffffff;
  --bk-shadow-xl: 4px 4px 0 0 #ffffff;
  --bk-shadow-2xl: 5px 5px 0 0 #ffffff;
  --bk-card-shadow: 2px 2px 0 0 #ffffff;
  --bk-card-shadow-hover: 3px 3px 0 0 #ffffff;
  --bk-overlay-surface: #000000;
  --bk-overlay-border: #ffffff;
  --bk-overlay-shadow: 4px 4px 0 0 #ffffff;
  --bk-field-bg: #000000;
  --bk-field-border: #ffffff;
  --bk-code-bg: #000000;
  --bk-code-border: #ffffff;
  --bk-tooltip-bg: #ffffff;
  --bk-tooltip-fg: #000000;
  --bk-divider-color: #ffffff;
  --bk-ring: #ffffff;
  --bk-body-image: repeating-conic-gradient(rgb(255 255 255 / 0.09) 0% 25%, transparent 0% 50%);
}

/* Pinstriped title bars, the way a window said "I have focus". */
[data-bk-style="macclassic"] .bk-modal-header,
[data-bk-style="macclassic"] .bk-drawer-header,
[data-bk-style="macclassic"] .bk-card-header {
  background-image: repeating-linear-gradient(
    180deg, var(--bk-border) 0 1px, transparent 1px 3px);
  border-block-end: 1px solid var(--bk-border);
  padding-block: var(--bk-space-2);
}
[data-bk-style="macclassic"] .bk-modal-title,
[data-bk-style="macclassic"] .bk-card-title {
  background: var(--bk-surface);
  padding-inline: var(--bk-space-2);
}
[data-bk-style="macclassic"] .bk-navbar {
  border-block-end: 1px solid var(--bk-border);
  background: var(--bk-surface);
}
[data-bk-style="macclassic"] .bk-table thead th { background: transparent; border-block-end: 1px solid var(--bk-border); }
[data-bk-style="macclassic"] .bk-btn:active:not(:disabled) { background: var(--bk-text); color: var(--bk-bg); }
[data-bk-style="macclassic"] .bk-progress { border: 1px solid var(--bk-border); background: transparent; }
[data-bk-style="macclassic"] .bk-progress-bar {
  background-image: repeating-conic-gradient(rgb(255 255 255 / 0.55) 0% 25%, transparent 0% 50%);
  background-size: 2px 2px;
}
[data-bk-style="macclassic"] .bk-switch { border: 1px solid var(--bk-border); background: var(--bk-surface); }
[data-bk-style="macclassic"] .bk-switch::before { background: var(--bk-border); box-shadow: none; }
[data-bk-style="macclassic"] .bk-avatar { border: 1px solid var(--bk-border); }


/* auto-mode mirror for "macclassic" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="macclassic"][data-bk-theme="auto"] {
  --bk-bg: #000000;
  --bk-bg-subtle: #000000;
  --bk-bg-muted: #111111;
  --bk-surface: #000000;
  --bk-surface-2: #000000;
  --bk-surface-3: #1a1a1a;
  --bk-surface-inverted: #ffffff;
  --bk-text: #ffffff;
  --bk-text-muted: #d0d0d0;
  --bk-text-subtle: #9a9a9a;
  --bk-text-inverted: #000000;
  --bk-border: #ffffff;
  --bk-border-muted: #666666;
  --bk-border-strong: #ffffff;
  --bk-primary: #ffffff;
  --bk-primary-hover: #dddddd;
  --bk-primary-soft: #1a1a1a;
  --bk-primary-border: #ffffff;
  --bk-on-primary: #000000;
  --bk-secondary: #cccccc;
  --bk-secondary-soft: #1a1a1a;
  --bk-secondary-border: #ffffff;
  --bk-on-secondary: #000000;
  --bk-success: #ffffff; --bk-success-soft: #1a1a1a; --bk-success-border: #ffffff;
  --bk-warning: #ffffff; --bk-warning-soft: #1a1a1a; --bk-warning-border: #ffffff;
  --bk-danger: #ffffff; --bk-danger-soft: #221111; --bk-danger-border: #ffffff;
  --bk-info: #ffffff; --bk-info-soft: #1a1a1a; --bk-info-border: #ffffff;
  --bk-neutral: #ffffff;
  --bk-neutral-soft: #1a1a1a;
  --bk-neutral-border: #ffffff;
  --bk-on-neutral: #000000;
  --bk-shadow-md: 2px 2px 0 0 #ffffff;
  --bk-shadow-lg: 3px 3px 0 0 #ffffff;
  --bk-shadow-xl: 4px 4px 0 0 #ffffff;
  --bk-shadow-2xl: 5px 5px 0 0 #ffffff;
  --bk-card-shadow: 2px 2px 0 0 #ffffff;
  --bk-card-shadow-hover: 3px 3px 0 0 #ffffff;
  --bk-overlay-surface: #000000;
  --bk-overlay-border: #ffffff;
  --bk-overlay-shadow: 4px 4px 0 0 #ffffff;
  --bk-field-bg: #000000;
  --bk-field-border: #ffffff;
  --bk-code-bg: #000000;
  --bk-code-border: #ffffff;
  --bk-tooltip-bg: #ffffff;
  --bk-tooltip-fg: #000000;
  --bk-divider-color: #ffffff;
  --bk-ring: #ffffff;
  --bk-body-image: repeating-conic-gradient(rgb(255 255 255 / 0.09) 0% 25%, transparent 0% 50%);
}
}


/* =============================================================================
   SKIN — magazine · Newsstand editorial
   White page, enormous condensed headlines set tight enough to touch, one
   arterial red, and a hard baseline discipline. Where `luxe` whispers in the
   dark, this shouts on a rack.
   ========================================================================== */

[data-bk-style="magazine"] {
  --bk-font-display: "Anton", "Archivo Black", "Oswald", "Impact", ui-sans-serif, sans-serif;
  --bk-font-sans: "Inter", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --bk-font-serif: "Playfair Display", Georgia, serif;
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 400;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: -0.025em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.18em;
  --bk-leading-tight: 0.92;

  --bk-bg: #ffffff;
  --bk-bg-subtle: #f5f5f3;
  --bk-bg-muted: #ebebe8;
  --bk-surface: #ffffff;
  --bk-surface-2: #f5f5f3;
  --bk-surface-3: #e6e6e2;
  --bk-surface-inverted: #111111;

  --bk-text: #111111;
  --bk-text-muted: #4b4b4b;
  --bk-text-subtle: #7d7d7a;
  --bk-text-inverted: #ffffff;

  --bk-border: #111111;
  --bk-border-muted: #d8d8d4;
  --bk-border-strong: #111111;
  --bk-border-width: 1px;

  --bk-primary: #e01b24;
  --bk-primary-hover: #c4161e;
  --bk-primary-active: #a71219;
  --bk-primary-soft: #fde3e4;
  --bk-primary-border: #111111;
  --bk-on-primary: #ffffff;
  --bk-secondary: #111111;
  --bk-secondary-hover: #2c2c2c;
  --bk-secondary-soft: #ededea;
  --bk-secondary-border: #111111;
  --bk-on-secondary: #ffffff;
  --bk-success: #10693f;
  --bk-success-soft: #dff0e7;
  --bk-success-border: #111111;
  --bk-warning: #8a6100;
  --bk-warning-soft: #f7ecd2;
  --bk-warning-border: #111111;
  --bk-danger: #e01b24;
  --bk-danger-soft: #fde3e4;
  --bk-danger-border: #111111;
  --bk-info: #14449c;
  --bk-info-soft: #e0e7f7;
  --bk-info-border: #111111;
  --bk-neutral: #111111;
  --bk-neutral-soft: #f0f0ed;
  --bk-neutral-border: #111111;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 9999px;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 9999px;

  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: none;
  --bk-shadow-lg: 0 8px 30px rgb(0 0 0 / 0.1);
  --bk-shadow-xl: 0 16px 50px rgb(0 0 0 / 0.14);
  --bk-shadow-2xl: 0 28px 80px rgb(0 0 0 / 0.2);
  --bk-shadow-inner: none;

  --bk-ring: #e01b24;
  --bk-ring-width: 2px;
  --bk-ring-offset: 2px;

  --bk-btn-weight: 700;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.16em;
  --bk-btn-border-width: 1px;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-press-transform: none;
  --bk-hover-transform: none;

  --bk-field-bg: #ffffff;
  --bk-field-border: #111111;
  --bk-field-border-hover: #e01b24;
  --bk-field-shadow: none;
  --bk-field-placeholder: #9b9b98;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: none;
  --bk-card-pad: var(--bk-space-5);
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #111111;
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(17 17 17 / 0.55);
  --bk-code-bg: #f5f5f3;
  --bk-code-border: #111111;
  --bk-tooltip-bg: #111111;
  --bk-selection-bg: #e01b24;
  --bk-selection-fg: #ffffff;
  --bk-scrollbar-thumb: #111111;
  --bk-divider-color: #111111;
}

[data-bk-style="magazine"][data-bk-theme="dark"] {
  --bk-bg: #0c0c0c;
  --bk-bg-subtle: #131313;
  --bk-surface: #0f0f0f;
  --bk-surface-2: #171717;
  --bk-surface-3: #222222;
  --bk-surface-inverted: #ffffff;
  --bk-text: #f6f6f4;
  --bk-text-muted: #b0b0ad;
  --bk-text-subtle: #808080;
  --bk-text-inverted: #0c0c0c;
  --bk-border: #f6f6f4;
  --bk-border-muted: #2a2a2a;
  --bk-border-strong: #f6f6f4;
  --bk-primary: #ff3b44;
  --bk-primary-hover: #ff5760;
  --bk-primary-soft: #2c0d0f;
  --bk-primary-border: #f6f6f4;
  --bk-on-primary: #1a0203;
  --bk-secondary: #f6f6f4;
  --bk-secondary-soft: #1c1c1c;
  --bk-secondary-border: #f6f6f4;
  --bk-on-secondary: #0c0c0c;
  --bk-success-soft: #0f2419;
  --bk-warning-soft: #2a2109;
  --bk-danger: #ff3b44;
  --bk-danger-soft: #2c0d0f;
  --bk-danger-border: #f6f6f4;
  --bk-info-soft: #101a33;
  --bk-neutral: #f6f6f4;
  --bk-neutral-soft: #171717;
  --bk-neutral-border: #f6f6f4;
  --bk-on-neutral: #0c0c0c;
  --bk-field-bg: #0f0f0f;
  --bk-field-border: #f6f6f4;
  --bk-code-bg: #171717;
  --bk-code-border: #f6f6f4;
  --bk-overlay-surface: #0f0f0f;
  --bk-overlay-border: #f6f6f4;
  --bk-tooltip-bg: #f6f6f4;
  --bk-tooltip-fg: #0c0c0c;
  --bk-divider-color: #f6f6f4;
}

[data-bk-style="magazine"] .bk-display {
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 0.85;
  letter-spacing: -0.035em;
}
[data-bk-style="magazine"] .bk-title { line-height: 0.95; }
[data-bk-style="magazine"] .bk-eyebrow {
  color: var(--bk-bg);
  background: var(--bk-primary);
  padding: 0.2em 0.6em;
  display: inline-block;
}
[data-bk-style="magazine"] .bk-navbar { border-block-end: 3px solid var(--bk-border); background: transparent; }
[data-bk-style="magazine"] .bk-section-head { border-block-start: 6px solid var(--bk-border); padding-block-start: var(--bk-space-3); }
[data-bk-style="magazine"] .bk-card { border-block-start: 3px solid var(--bk-border); border-inline: 0; border-block-end: 0; }
[data-bk-style="magazine"] .bk-table thead th { background: var(--bk-surface-inverted); color: var(--bk-text-inverted); }
[data-bk-style="magazine"] .bk-badge { border-radius: 0; border: 1px solid currentColor; }
[data-bk-style="magazine"] .bk-lead { font-family: var(--bk-font-serif); font-style: italic; }
[data-bk-style="magazine"] .bk-prose p:first-of-type::first-letter {
  float: inline-start;
  font-family: var(--bk-font-display);
  font-size: 4.2em;
  line-height: 0.78;
  padding-inline-end: 0.06em;
  color: var(--bk-primary);
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="magazine"] {
  --bk-danger-on-soft: #c91820;
  --bk-danger-text: #e01b24;
  --bk-field-placeholder: #91918e;
  --bk-info: #14449c;
  --bk-info-on-soft: #14449c;
  --bk-info-soft: #e0e7f7;
  --bk-info-text: #14449c;
  --bk-on-info: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-primary-on-soft: #c91820;
  --bk-primary-text: #e01b24;
  --bk-success: #10693f;
  --bk-success-on-soft: #10693f;
  --bk-success-soft: #dff0e7;
  --bk-success-text: #10693f;
  --bk-warning: #8a6100;
  --bk-warning-on-soft: #8a6100;
  --bk-warning-soft: #f7ecd2;
  --bk-warning-text: #8a6100;
}
[data-bk-style="magazine"][data-bk-theme="dark"] {
  --bk-danger-on-soft: #ff3b44;
  --bk-danger-text: #ff3b44;
  --bk-field-placeholder: #9b9b98;
  --bk-info: #14449c;
  --bk-info-on-soft: #4c83e8;
  --bk-info-soft: #101a33;
  --bk-info-text: #3f7ae6;
  --bk-on-info: #89c2f4;
  --bk-on-success: #8becb7;
  --bk-on-warning: #faebcf;
  --bk-primary-on-soft: #ff3b44;
  --bk-primary-text: #ff3b44;
  --bk-success: #10693f;
  --bk-success-on-soft: #189e5f;
  --bk-success-soft: #0f2419;
  --bk-success-text: #169157;
  --bk-warning: #8a6100;
  --bk-warning-on-soft: #b88100;
  --bk-warning-soft: #2a2109;
  --bk-warning-text: #a97700;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "magazine" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="magazine"][data-bk-theme="auto"] {
  --bk-bg: #0c0c0c;
  --bk-bg-subtle: #131313;
  --bk-surface: #0f0f0f;
  --bk-surface-2: #171717;
  --bk-surface-3: #222222;
  --bk-surface-inverted: #ffffff;
  --bk-text: #f6f6f4;
  --bk-text-muted: #b0b0ad;
  --bk-text-subtle: #808080;
  --bk-text-inverted: #0c0c0c;
  --bk-border: #f6f6f4;
  --bk-border-muted: #2a2a2a;
  --bk-border-strong: #f6f6f4;
  --bk-primary: #ff3b44;
  --bk-primary-hover: #ff5760;
  --bk-primary-soft: #2c0d0f;
  --bk-primary-border: #f6f6f4;
  --bk-on-primary: #1a0203;
  --bk-secondary: #f6f6f4;
  --bk-secondary-soft: #1c1c1c;
  --bk-secondary-border: #f6f6f4;
  --bk-on-secondary: #0c0c0c;
  --bk-success-soft: #0f2419;
  --bk-warning-soft: #2a2109;
  --bk-danger: #ff3b44;
  --bk-danger-soft: #2c0d0f;
  --bk-danger-border: #f6f6f4;
  --bk-info-soft: #101a33;
  --bk-neutral: #f6f6f4;
  --bk-neutral-soft: #171717;
  --bk-neutral-border: #f6f6f4;
  --bk-on-neutral: #0c0c0c;
  --bk-field-bg: #0f0f0f;
  --bk-field-border: #f6f6f4;
  --bk-code-bg: #171717;
  --bk-code-border: #f6f6f4;
  --bk-overlay-surface: #0f0f0f;
  --bk-overlay-border: #f6f6f4;
  --bk-tooltip-bg: #f6f6f4;
  --bk-tooltip-fg: #0c0c0c;
  --bk-divider-color: #f6f6f4;


  --bk-danger-on-soft: #ff3b44;
  --bk-danger-text: #ff3b44;
  --bk-field-placeholder: #9b9b98;
  --bk-info: #14449c;
  --bk-info-on-soft: #4c83e8;
  --bk-info-soft: #101a33;
  --bk-info-text: #3f7ae6;
  --bk-on-info: #89c2f4;
  --bk-on-success: #8becb7;
  --bk-on-warning: #faebcf;
  --bk-primary-on-soft: #ff3b44;
  --bk-primary-text: #ff3b44;
  --bk-success: #10693f;
  --bk-success-on-soft: #189e5f;
  --bk-success-soft: #0f2419;
  --bk-success-text: #169157;
  --bk-warning: #8a6100;
  --bk-warning-on-soft: #b88100;
  --bk-warning-soft: #2a2109;
  --bk-warning-text: #a97700;
}
}


/* =============================================================================
   SKIN — marble · Classical stone
   Carrara veining, gilt rules and inscriptional capitals. Weight without noise:
   heavy surfaces, hairline gold, and letterforms that were designed to be cut
   rather than typed.
   ========================================================================== */

[data-bk-style="marble"] {
  --bk-font-display: "Cinzel", "Trajan Pro", "Cormorant Garamond", Georgia, serif;
  --bk-font-serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --bk-font-sans: var(--bk-font-serif);
  --bk-font-body: var(--bk-font-serif);
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 500;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.1em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.2em;
  --bk-leading-relaxed: 1.75;

  --_gilt: #9a7b3e;

  --bk-bg: #f0eeea;
  --bk-bg-subtle: #e8e5df;
  --bk-bg-muted: #dedad2;
  --bk-surface: #f8f7f4;
  --bk-surface-2: #eceae5;
  --bk-surface-3: #ddd9d2;
  --bk-surface-inverted: #22211f;

  --bk-text: #26251f;
  --bk-text-muted: #55534b;
  --bk-text-subtle: #86837a;
  --bk-text-inverted: #f8f7f4;

  --bk-border: #cfcbc2;
  --bk-border-muted: #e3e0d9;
  --bk-border-strong: var(--_gilt);
  --bk-border-width: 1px;

  --bk-primary: #6f5626;
  --bk-primary-hover: #5c471f;
  --bk-primary-active: #4a3919;
  --bk-primary-soft: #efe7d6;
  --bk-primary-border: #c6b189;
  --bk-on-primary: #f8f7f4;
  --bk-secondary: #3f4a53;
  --bk-secondary-hover: #333c44;
  --bk-secondary-soft: #e2e6e9;
  --bk-secondary-border: #a9b3bb;
  --bk-on-secondary: #f8f7f4;
  --bk-success: #3f6146;
  --bk-success-soft: #e0ebe3;
  --bk-success-border: #a5c1ac;
  --bk-warning: #856110;
  --bk-warning-soft: #f3ead1;
  --bk-warning-border: #d5c087;
  --bk-danger: #8b3229;
  --bk-danger-soft: #f1ded9;
  --bk-danger-border: #cfa397;
  --bk-info: #3f4a53;
  --bk-info-soft: #e2e6e9;
  --bk-info-border: #a9b3bb;
  --bk-neutral: #26251f;
  --bk-neutral-soft: #eae7e1;
  --bk-neutral-border: #cfcbc2;
  --bk-on-neutral: #f8f7f4;

  --bk-radius-scale: 0.2;
  --bk-radius-field: 1px;
  --bk-radius-card: 2px;
  --bk-radius-overlay: 2px;
  --bk-radius-pill: 9999px;

  --bk-shadow-color: 40 12% 30%;
  --bk-shadow-strength: 0.9;

  --bk-ring: var(--_gilt);
  --bk-ring-width: 1px;
  --bk-ring-offset: 4px;

  --bk-btn-weight: 500;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.2em;
  --bk-btn-border-width: 1px;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: 0 4px 16px rgb(60 50 30 / 0.14);
  --bk-btn-shadow-active: none;
  --bk-press-transform: translateY(1px);
  --bk-hover-transform: none;

  --bk-field-bg: #fbfaf8;
  --bk-field-border: #bfbab1;
  --bk-field-border-hover: var(--_gilt);
  --bk-field-shadow: none;
  --bk-field-placeholder: #a9a59c;
  --bk-card-bg: #f8f7f4;
  --bk-card-shadow: 0 1px 3px rgb(50 45 35 / 0.1);
  --bk-card-shadow-hover: 0 10px 30px rgb(50 45 35 / 0.16);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #f8f7f4;
  --bk-overlay-border: var(--_gilt);
  --bk-overlay-shadow: 0 30px 70px rgb(40 35 25 / 0.3);
  --bk-overlay-bg: rgb(38 37 31 / 0.4);
  --bk-code-bg: #eceae5;
  --bk-code-border: #cfcbc2;
  --bk-tooltip-bg: #26251f;
  --bk-selection-bg: rgb(154 123 62 / 0.25);
  --bk-scrollbar-thumb: #cfcbc2;
  --bk-divider-color: var(--_gilt);

  /* Veining: a few soft diagonal streaks, no image. */
  --bk-body-image:
    linear-gradient(118deg, transparent 38%, rgb(120 115 105 / 0.09) 39%, transparent 41%),
    linear-gradient(102deg, transparent 62%, rgb(120 115 105 / 0.07) 63%, transparent 66%),
    linear-gradient(134deg, transparent 20%, rgb(120 115 105 / 0.05) 21%, transparent 24%),
    radial-gradient(70rem 50rem at 30% 20%, rgb(255 255 255 / 0.6), transparent 60%);
  --bk-body-attachment: fixed;
  --bk-surface-image:
    linear-gradient(112deg, transparent 45%, rgb(120 115 105 / 0.07) 46%, transparent 49%);
}

[data-bk-style="marble"][data-bk-theme="dark"] {
  --bk-bg: #1a1a18;
  --bk-bg-subtle: #201f1d;
  --bk-surface: #222120;
  --bk-surface-2: #2a2927;
  --bk-surface-3: #34322f;
  --bk-text: #ece9e2;
  --bk-text-muted: #b2afa6;
  --bk-text-subtle: #85827a;
  --bk-text-inverted: #1a1a18;
  --bk-border: #3a3835;
  --bk-border-muted: #2a2927;
  --bk-border-strong: #b99a5c;
  --bk-primary: #c9a765;
  --bk-primary-hover: #d6b87c;
  --bk-primary-soft: #2c2517;
  --bk-primary-border: #5b4b2b;
  --bk-on-primary: #171104;
  --bk-secondary: #9aa7b2;
  --bk-secondary-soft: #21262a;
  --bk-secondary-border: #3f4a53;
  --bk-on-secondary: #0b0f12;
  --bk-success-soft: #1c2a20;
  --bk-warning-soft: #2c2512;
  --bk-danger-soft: #2e1b17;
  --bk-info-soft: #21262a;
  --bk-neutral: #ece9e2;
  --bk-neutral-soft: #2a2927;
  --bk-neutral-border: #3a3835;
  --bk-on-neutral: #1a1a18;
  --bk-field-bg: #222120;
  --bk-field-border: #4a4844;
  --bk-code-bg: #201f1d;
  --bk-code-border: #3a3835;
  --bk-overlay-surface: #222120;
  --bk-overlay-border: #b99a5c;
  --bk-tooltip-bg: #ece9e2;
  --bk-tooltip-fg: #1a1a18;
  --bk-divider-color: #b99a5c;
  --bk-body-image:
    linear-gradient(118deg, transparent 38%, rgb(220 215 200 / 0.05) 39%, transparent 41%),
    linear-gradient(102deg, transparent 62%, rgb(220 215 200 / 0.04) 63%, transparent 66%),
    radial-gradient(70rem 50rem at 30% 20%, rgb(255 255 255 / 0.035), transparent 60%);
  --bk-surface-image: linear-gradient(112deg, transparent 45%, rgb(220 215 200 / 0.04) 46%, transparent 49%);
}

[data-bk-style="marble"] .bk-display,
[data-bk-style="marble"] .bk-title { color: var(--bk-text); letter-spacing: 0.12em; }
[data-bk-style="marble"] .bk-navbar { background: transparent; border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="marble"] .bk-card { border-block-start: 2px solid var(--bk-border-strong); }
[data-bk-style="marble"] .bk-table thead th {
  background: transparent;
  font-family: var(--bk-font-display);
  border-block-end: 1px solid var(--bk-border-strong);
}
[data-bk-style="marble"] .bk-badge { border-radius: 0; border: 1px solid currentColor; }
[data-bk-style="marble"] .bk-section-head::after {
  content: "";
  display: block;
  inline-size: 4rem;
  block-size: 2px;
  margin-block-start: var(--bk-space-4);
  background: var(--bk-border-strong);
}
[data-bk-style="marble"] .bk-avatar { border: 1px solid var(--bk-border-strong); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="marble"] {
  --bk-danger: #8b3229;
  --bk-danger-on-soft: #8b3229;
  --bk-danger-soft: #f1ded9;
  --bk-danger-text: #8b3229;
  --bk-field-placeholder: #918c81;
  --bk-info: #3f4a53;
  --bk-info-on-soft: #3f4a53;
  --bk-info-soft: #e2e6e9;
  --bk-info-text: #3f4a53;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-success: #3f6146;
  --bk-success-on-soft: #3f6146;
  --bk-success-soft: #e0ebe3;
  --bk-success-text: #3f6146;
  --bk-text-subtle: #79766e;
  --bk-warning: #856110;
  --bk-warning-on-soft: #856110;
  --bk-warning-soft: #f3ead1;
  --bk-warning-text: #856110;
}
[data-bk-style="marble"][data-bk-theme="dark"] {
  --bk-danger: #8b3229;
  --bk-danger-on-soft: #d16d63;
  --bk-danger-soft: #2e1b17;
  --bk-danger-text: #d27067;
  --bk-field-placeholder: #a9a59c;
  --bk-info: #3f4a53;
  --bk-info-on-soft: #8192a0;
  --bk-info-soft: #21262a;
  --bk-info-text: #7b8d9b;
  --bk-on-danger: #f0b7be;
  --bk-on-info: #89c2f4;
  --bk-on-success: #7eeaae;
  --bk-on-warning: #fae9ca;
  --bk-success: #3f6146;
  --bk-success-on-soft: #699d74;
  --bk-success-soft: #1c2a20;
  --bk-success-text: #63996e;
  --bk-text-subtle: #85827a;
  --bk-warning: #856110;
  --bk-warning-on-soft: #bc8917;
  --bk-warning-soft: #2c2512;
  --bk-warning-text: #b38215;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "marble" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="marble"][data-bk-theme="auto"] {
  --bk-bg: #1a1a18;
  --bk-bg-subtle: #201f1d;
  --bk-surface: #222120;
  --bk-surface-2: #2a2927;
  --bk-surface-3: #34322f;
  --bk-text: #ece9e2;
  --bk-text-muted: #b2afa6;
  --bk-text-subtle: #85827a;
  --bk-text-inverted: #1a1a18;
  --bk-border: #3a3835;
  --bk-border-muted: #2a2927;
  --bk-border-strong: #b99a5c;
  --bk-primary: #c9a765;
  --bk-primary-hover: #d6b87c;
  --bk-primary-soft: #2c2517;
  --bk-primary-border: #5b4b2b;
  --bk-on-primary: #171104;
  --bk-secondary: #9aa7b2;
  --bk-secondary-soft: #21262a;
  --bk-secondary-border: #3f4a53;
  --bk-on-secondary: #0b0f12;
  --bk-success-soft: #1c2a20;
  --bk-warning-soft: #2c2512;
  --bk-danger-soft: #2e1b17;
  --bk-info-soft: #21262a;
  --bk-neutral: #ece9e2;
  --bk-neutral-soft: #2a2927;
  --bk-neutral-border: #3a3835;
  --bk-on-neutral: #1a1a18;
  --bk-field-bg: #222120;
  --bk-field-border: #4a4844;
  --bk-code-bg: #201f1d;
  --bk-code-border: #3a3835;
  --bk-overlay-surface: #222120;
  --bk-overlay-border: #b99a5c;
  --bk-tooltip-bg: #ece9e2;
  --bk-tooltip-fg: #1a1a18;
  --bk-divider-color: #b99a5c;
  --bk-body-image:
    linear-gradient(118deg, transparent 38%, rgb(220 215 200 / 0.05) 39%, transparent 41%),
    linear-gradient(102deg, transparent 62%, rgb(220 215 200 / 0.04) 63%, transparent 66%),
    radial-gradient(70rem 50rem at 30% 20%, rgb(255 255 255 / 0.035), transparent 60%);
  --bk-surface-image: linear-gradient(112deg, transparent 45%, rgb(220 215 200 / 0.04) 46%, transparent 49%);


  --bk-danger: #8b3229;
  --bk-danger-on-soft: #d16d63;
  --bk-danger-soft: #2e1b17;
  --bk-danger-text: #d27067;
  --bk-field-placeholder: #a9a59c;
  --bk-info: #3f4a53;
  --bk-info-on-soft: #8192a0;
  --bk-info-soft: #21262a;
  --bk-info-text: #7b8d9b;
  --bk-on-danger: #f0b7be;
  --bk-on-info: #89c2f4;
  --bk-on-success: #7eeaae;
  --bk-on-warning: #fae9ca;
  --bk-success: #3f6146;
  --bk-success-on-soft: #699d74;
  --bk-success-soft: #1c2a20;
  --bk-success-text: #63996e;
  --bk-text-subtle: #85827a;
  --bk-warning: #856110;
  --bk-warning-on-soft: #bc8917;
  --bk-warning-soft: #2c2512;
  --bk-warning-text: #b38215;
}
}


/* =============================================================================
   SKIN — material · Material-flavoured
   Elevation instead of borders, tonal surface layers, generous ripples and a
   single vivid key colour.
   ========================================================================== */

[data-bk-style="material"] {
  --bk-font-sans: "Roboto", "Roboto Flex", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --bk-heading-weight: 500;
  --bk-heading-tracking: 0;
  --bk-label-tracking: 0.02em;
  --bk-weight-medium: 500;
  --bk-weight-semibold: 500;

  --bk-bg: #fef7ff;
  --bk-bg-subtle: #f7f2fa;
  --bk-bg-muted: #f0ebf4;
  --bk-surface: #fffbfe;
  --bk-surface-2: #f7f2fa;
  --bk-surface-3: #ece6f0;
  --bk-surface-inverted: #322f35;

  --bk-text: #1d1b20;
  --bk-text-muted: #49454f;
  --bk-text-subtle: #79747e;
  --bk-text-inverted: #f5eff7;

  --bk-border: #cac4d0;
  --bk-border-muted: #e7e0ec;
  --bk-border-strong: #79747e;

  --bk-primary: #6750a4;
  --bk-primary-hover: #5b4691;
  --bk-primary-active: #503c80;
  --bk-primary-soft: #eaddff;
  --bk-primary-border: #b9a6e6;
  --bk-on-primary: #ffffff;
  --bk-secondary: #625b71;
  --bk-secondary-hover: #554e63;
  --bk-secondary-soft: #e8def8;
  --bk-secondary-border: #c9c0d6;
  --bk-on-secondary: #ffffff;
  --bk-success: #146c2e;
  --bk-success-soft: #d7f5dd;
  --bk-success-border: #a3ddb1;
  --bk-warning: #7d5700;
  --bk-warning-soft: #ffdea8;
  --bk-warning-border: #e5bf75;
  --bk-danger: #b3261e;
  --bk-danger-soft: #f9dedc;
  --bk-danger-border: #f2b8b5;
  --bk-info: #00639c;
  --bk-info-soft: #cee5ff;
  --bk-info-border: #9cc9f0;
  --bk-neutral: #49454f;
  --bk-neutral-soft: #e7e0ec;
  --bk-neutral-border: #cac4d0;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 1;
  --bk-radius-field: 4px;
  --bk-radius-card: 12px;
  --bk-radius-overlay: 28px;
  --bk-radius-pill: 9999px;

  --bk-shadow-color: 270 15% 10%;
  --bk-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --bk-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
  --bk-shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15);
  --bk-shadow-lg: 0 2px 3px 0 rgb(0 0 0 / 0.3), 0 6px 10px 4px rgb(0 0 0 / 0.15);
  --bk-shadow-xl: 0 4px 4px 0 rgb(0 0 0 / 0.3), 0 8px 12px 6px rgb(0 0 0 / 0.15);
  --bk-shadow-2xl: 0 6px 10px 0 rgb(0 0 0 / 0.3), 0 12px 20px 8px rgb(0 0 0 / 0.15);

  --bk-ring: #6750a4;
  --bk-ring-width: 3px;
  --bk-ring-offset: 2px;

  --bk-btn-radius: 9999px;
  --bk-btn-weight: 500;
  --bk-btn-border-width: 1px;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: var(--bk-shadow-xs);
  --bk-btn-shadow-active: none;
  --bk-press-transform: none;
  --bk-hover-transform: none;

  --bk-field-bg: #f7f2fa;
  --bk-field-bg-hover: #f0ebf4;
  --bk-field-border: #79747e;
  --bk-field-border-hover: #1d1b20;
  --bk-field-radius: 4px 4px 0 0;
  --bk-field-shadow: none;
  --bk-card-shadow: none;
  --bk-card-bg: #f7f2fa;
  --bk-card-border: transparent;
  --bk-card-border-width: 0px;
  --bk-card-shadow-hover: var(--bk-shadow-sm);
  --bk-overlay-surface: #f5eefa;
  --bk-overlay-border: transparent;
  --bk-overlay-shadow: var(--bk-shadow-xl);
  --bk-code-bg: #ece6f0;
  --bk-code-border: transparent;
  --bk-tooltip-bg: #322f35;
  --bk-selection-bg: rgb(103 80 164 / 0.24);
  --bk-scrollbar-thumb: #cac4d0;
  --bk-dur-base: 250ms;
  --bk-ease: cubic-bezier(0.2, 0, 0, 1);
}

[data-bk-style="material"][data-bk-theme="dark"] {
  --bk-bg: #141218;
  --bk-bg-subtle: #1d1b20;
  --bk-surface: #211f26;
  --bk-surface-2: #2b2930;
  --bk-surface-3: #36343b;
  --bk-surface-inverted: #e6e0e9;
  --bk-text: #e6e0e9;
  --bk-text-muted: #cac4d0;
  --bk-text-subtle: #938f99;
  --bk-text-inverted: #322f35;
  --bk-border: #49454f;
  --bk-border-muted: #322f35;
  --bk-border-strong: #938f99;
  --bk-primary: #d0bcff;
  --bk-primary-hover: #dbcbff;
  --bk-primary-active: #e5dbff;
  --bk-primary-soft: #4f378b;
  --bk-primary-border: #6b5aa0;
  --bk-on-primary: #381e72;
  --bk-danger: #f2b8b5;
  --bk-danger-soft: #8c1d18;
  --bk-danger-border: #b3261e;
  --bk-on-danger: #601410;
  --bk-neutral: #cac4d0;
  --bk-neutral-soft: #36343b;
  --bk-on-neutral: #322f35;
  --bk-field-bg: #2b2930;
  --bk-field-border: #938f99;
  --bk-card-bg: #211f26;
  --bk-overlay-surface: #2b2930;
  --bk-code-bg: #2b2930;
  --bk-tooltip-bg: #e6e0e9;
  --bk-tooltip-fg: #322f35;
}

[data-bk-style="material"] .bk-btn { position: relative; overflow: hidden; }
[data-bk-style="material"] .bk-btn-solid,
[data-bk-style="material"] .bk-btn-primary:not([class*="bk-btn-outline"]):not([class*="bk-btn-ghost"]):not([class*="bk-btn-soft"]) { box-shadow: none; }
[data-bk-style="material"] .bk-input,
[data-bk-style="material"] .bk-select,
[data-bk-style="material"] .bk-textarea {
  border-radius: 4px 4px 0 0;
  border-block-end-width: 1px;
}
[data-bk-style="material"] .bk-input:focus,
[data-bk-style="material"] .bk-select:focus,
[data-bk-style="material"] .bk-textarea:focus {
  outline: none;
  border-block-end: 2px solid var(--bk-primary);
  box-shadow: inset 0 -1px 0 0 var(--bk-primary);
}
[data-bk-style="material"] .bk-tab { text-transform: none; }
[data-bk-style="material"] .bk-tab[aria-selected="true"] { border-block-end-width: 3px; }
[data-bk-style="material"] .bk-fab { border-radius: 16px; }
[data-bk-style="material"] .bk-card-interactive:hover { transform: none; }
[data-bk-style="material"] .bk-navbar { box-shadow: none; border-block-end: 0; background: var(--bk-surface-2); }
[data-bk-style="material"] .bk-navbar.bk-is-scrolled { box-shadow: var(--bk-shadow-xs); }
[data-bk-style="material"] .bk-chip { border: 1px solid var(--bk-border); background: transparent; }
[data-bk-style="material"] .bk-chip.bk-is-active { background: var(--bk-primary-soft); border-color: transparent; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="material"] {
  --bk-info: #00639c;
  --bk-info-on-soft: #00639c;
  --bk-info-soft: #cee5ff;
  --bk-info-text: #00639c;
  --bk-on-info: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-secondary-on-soft: #625b71;
  --bk-secondary-text: #625b71;
  --bk-success: #146c2e;
  --bk-success-on-soft: #146c2e;
  --bk-success-soft: #d7f5dd;
  --bk-success-text: #146c2e;
  --bk-warning: #7d5700;
  --bk-warning-on-soft: #7d5700;
  --bk-warning-soft: #ffdea8;
  --bk-warning-text: #7d5700;
}
[data-bk-style="material"][data-bk-theme="dark"] {
  --bk-info: #00639c;
  --bk-info-on-soft: #00639c;
  --bk-info-soft: #cee5ff;
  --bk-info-text: #0090e3;
  --bk-on-info: #c6e1f9;
  --bk-on-success: #94edbc;
  --bk-on-warning: #f6d7a0;
  --bk-secondary-on-soft: #625b71;
  --bk-secondary-text: #90889f;
  --bk-success: #146c2e;
  --bk-success-on-soft: #146c2e;
  --bk-success-soft: #d7f5dd;
  --bk-success-text: #1ea044;
  --bk-warning: #7d5700;
  --bk-warning-on-soft: #7d5700;
  --bk-warning-soft: #ffdea8;
  --bk-warning-text: #ba8200;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "material" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="material"][data-bk-theme="auto"] {
  --bk-bg: #141218;
  --bk-bg-subtle: #1d1b20;
  --bk-surface: #211f26;
  --bk-surface-2: #2b2930;
  --bk-surface-3: #36343b;
  --bk-surface-inverted: #e6e0e9;
  --bk-text: #e6e0e9;
  --bk-text-muted: #cac4d0;
  --bk-text-subtle: #938f99;
  --bk-text-inverted: #322f35;
  --bk-border: #49454f;
  --bk-border-muted: #322f35;
  --bk-border-strong: #938f99;
  --bk-primary: #d0bcff;
  --bk-primary-hover: #dbcbff;
  --bk-primary-active: #e5dbff;
  --bk-primary-soft: #4f378b;
  --bk-primary-border: #6b5aa0;
  --bk-on-primary: #381e72;
  --bk-danger: #f2b8b5;
  --bk-danger-soft: #8c1d18;
  --bk-danger-border: #b3261e;
  --bk-on-danger: #601410;
  --bk-neutral: #cac4d0;
  --bk-neutral-soft: #36343b;
  --bk-on-neutral: #322f35;
  --bk-field-bg: #2b2930;
  --bk-field-border: #938f99;
  --bk-card-bg: #211f26;
  --bk-overlay-surface: #2b2930;
  --bk-code-bg: #2b2930;
  --bk-tooltip-bg: #e6e0e9;
  --bk-tooltip-fg: #322f35;


  --bk-info: #00639c;
  --bk-info-on-soft: #00639c;
  --bk-info-soft: #cee5ff;
  --bk-info-text: #0090e3;
  --bk-on-info: #c6e1f9;
  --bk-on-success: #94edbc;
  --bk-on-warning: #f6d7a0;
  --bk-secondary-on-soft: #625b71;
  --bk-secondary-text: #90889f;
  --bk-success: #146c2e;
  --bk-success-on-soft: #146c2e;
  --bk-success-soft: #d7f5dd;
  --bk-success-text: #1ea044;
  --bk-warning: #7d5700;
  --bk-warning-on-soft: #7d5700;
  --bk-warning-soft: #ffdea8;
  --bk-warning-text: #ba8200;
}
}


/* =============================================================================
   SKIN — memphis · Memphis Group / 80s postmodern
   Squiggles, terrazzo confetti, clashing pastels over black outlines, and
   shapes that refuse to line up. Loud on purpose.
   ========================================================================== */

[data-bk-style="memphis"] {
  --bk-font-sans: "Poppins", "Avenir Next", "Century Gothic", ui-rounded, system-ui, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 800;
  --bk-heading-tracking: -0.01em;

  --bk-bg: #fdf6ec;
  --bk-bg-subtle: #fbeee0;
  --bk-bg-muted: #f7e2cc;
  --bk-surface: #fffdf9;
  --bk-surface-2: #fbeee0;
  --bk-surface-3: #f6e0cb;
  --bk-surface-inverted: #1c1c28;

  --bk-text: #1c1c28;
  --bk-text-muted: #4d4d63;
  --bk-text-subtle: #7c7c96;
  --bk-text-inverted: #fffdf9;

  --bk-border: #1c1c28;
  --bk-border-muted: #d9cfc2;
  --bk-border-strong: #1c1c28;
  --bk-border-width: 2px;

  --bk-primary: #ff4f9a;
  --bk-primary-hover: #f5348a;
  --bk-primary-active: #dc2478;
  --bk-primary-soft: #ffe0ee;
  --bk-primary-border: #1c1c28;
  --bk-on-primary: #ffffff;
  --bk-secondary: #23c9c9;
  --bk-secondary-hover: #16b5b5;
  --bk-secondary-soft: #d5f6f6;
  --bk-secondary-border: #1c1c28;
  --bk-on-secondary: #06282a;
  --bk-success: #4ecb71;
  --bk-success-soft: #ddf6e3;
  --bk-success-border: #1c1c28;
  --bk-on-success: #08240f;
  --bk-warning: #ffc233;
  --bk-warning-soft: #fff2d1;
  --bk-warning-border: #1c1c28;
  --bk-on-warning: #2b1e00;
  --bk-danger: #ff5b4c;
  --bk-danger-soft: #ffe0dc;
  --bk-danger-border: #1c1c28;
  --bk-on-danger: #ffffff;
  --bk-info: #6c63ff;
  --bk-info-soft: #e3e1ff;
  --bk-info-border: #1c1c28;
  --bk-on-info: #ffffff;
  --bk-neutral: #1c1c28;
  --bk-neutral-soft: #f2e9dd;
  --bk-neutral-border: #1c1c28;
  --bk-on-neutral: #fffdf9;

  --bk-radius-scale: 1.4;
  --bk-radius-field: var(--bk-radius-lg);
  --bk-radius-card: var(--bk-radius-2xl);
  --bk-radius-pill: var(--bk-radius-full);

  --bk-shadow-xs: 2px 2px 0 rgb(28 28 40 / 0.9);
  --bk-shadow-sm: 3px 4px 0 rgb(28 28 40 / 0.9);
  --bk-shadow-md: 5px 6px 0 rgb(28 28 40 / 0.9);
  --bk-shadow-lg: 7px 9px 0 rgb(28 28 40 / 0.9);
  --bk-shadow-xl: 10px 12px 0 rgb(28 28 40 / 0.9);
  --bk-shadow-2xl: 14px 16px 0 rgb(28 28 40 / 0.9);

  --bk-decor-1: #ff4f9a;
  --bk-decor-2: #23c9c9;
  --bk-body-image:
    radial-gradient(circle at 12% 18%, #ff4f9a 0 6px, transparent 7px),
    radial-gradient(circle at 82% 12%, #23c9c9 0 8px, transparent 9px),
    radial-gradient(circle at 68% 78%, #ffc233 0 5px, transparent 6px),
    radial-gradient(circle at 26% 86%, #6c63ff 0 7px, transparent 8px),
    repeating-linear-gradient(45deg, rgb(28 28 40 / 0.035) 0 2px, transparent 2px 12px);
  --bk-body-attachment: fixed;

  --bk-btn-border-width: 2px;
  --bk-btn-shadow: 3px 4px 0 rgb(28 28 40 / 0.9);
  --bk-btn-shadow-hover: 5px 6px 0 rgb(28 28 40 / 0.9);
  --bk-btn-shadow-active: 1px 1px 0 rgb(28 28 40 / 0.9);
  --bk-btn-weight: 700;
  --bk-press-transform: translate(2px, 3px);
  --bk-hover-transform: translate(-1px, -2px) rotate(-0.6deg);

  --bk-field-border: #1c1c28;
  --bk-field-border-width: 2px;
  --bk-field-shadow: 2px 3px 0 rgb(28 28 40 / 0.9);
  --bk-field-shadow-focus: 2px 3px 0 var(--bk-primary), 0 0 0 2px #1c1c28;
  --bk-card-border-width: 2px;
  --bk-card-shadow: 5px 6px 0 rgb(28 28 40 / 0.9);
  --bk-card-shadow-hover: 8px 10px 0 rgb(28 28 40 / 0.9);
  --bk-overlay-shadow: 10px 12px 0 rgb(28 28 40 / 0.9);
  --bk-code-bg: #fbeee0;
  --bk-code-border: #1c1c28;
  --bk-tooltip-bg: #1c1c28;
  --bk-selection-bg: #ffc233;
  --bk-selection-fg: #1c1c28;
  --bk-divider-color: #1c1c28;
  --bk-divider-width: 2px;
  --bk-ring: #6c63ff;
  --bk-ring-width: 3px;
}

[data-bk-style="memphis"][data-bk-theme="dark"] {
  --bk-bg: #17172a;
  --bk-bg-subtle: #1e1e35;
  --bk-surface: #1e1e35;
  --bk-surface-2: #262643;
  --bk-surface-3: #2f2f52;
  --bk-text: #fdf6ec;
  --bk-text-muted: #c3bede;
  --bk-text-subtle: #8e88b5;
  --bk-border: #fdf6ec;
  --bk-border-muted: #3b3b63;
  --bk-border-strong: #fdf6ec;
  --bk-neutral: #fdf6ec;
  --bk-neutral-soft: #262643;
  --bk-on-neutral: #17172a;
  --bk-primary-border: #fdf6ec;
  --bk-shadow-xs: 2px 2px 0 #fdf6ec;
  --bk-shadow-sm: 3px 4px 0 #fdf6ec;
  --bk-shadow-md: 5px 6px 0 #fdf6ec;
  --bk-shadow-lg: 7px 9px 0 #fdf6ec;
  --bk-shadow-xl: 10px 12px 0 #fdf6ec;
  --bk-btn-shadow: 3px 4px 0 #fdf6ec;
  --bk-btn-shadow-hover: 5px 6px 0 #fdf6ec;
  --bk-btn-shadow-active: 1px 1px 0 #fdf6ec;
  --bk-field-shadow: 2px 3px 0 #fdf6ec;
  --bk-card-shadow: 5px 6px 0 #fdf6ec;
  --bk-card-shadow-hover: 8px 10px 0 #fdf6ec;
  --bk-code-bg: #262643;
  --bk-code-border: #fdf6ec;
  --bk-divider-color: #fdf6ec;
  --bk-tooltip-bg: #fdf6ec;
  --bk-tooltip-fg: #17172a;
}

[data-bk-style="memphis"] .bk-card { transform: rotate(var(--bk-tilt, -0.4deg)); }
[data-bk-style="memphis"] .bk-card:nth-child(even) { --bk-tilt: 0.5deg; }
[data-bk-style="memphis"] .bk-card:hover { --bk-tilt: 0deg; }
[data-bk-style="memphis"] .bk-card-header { border-block-end: 2px dashed var(--bk-border); }
[data-bk-style="memphis"] .bk-badge { border: 2px solid var(--bk-border); font-weight: 700; }
[data-bk-style="memphis"] .bk-avatar { border: 2px solid var(--bk-border); }
[data-bk-style="memphis"] .bk-navbar { border-block-end: 3px solid var(--bk-border); }
[data-bk-style="memphis"] .bk-tab[aria-selected="true"] {
  background: var(--bk-warning);
  color: #1c1c28;
  border-radius: var(--bk-radius-lg) var(--bk-radius-lg) 0 0;
  border: 2px solid var(--bk-border);
  border-block-end: 0;
}
[data-bk-style="memphis"] .bk-progress { border: 2px solid var(--bk-border); background: var(--bk-surface); }
[data-bk-style="memphis"] .bk-progress-bar {
  background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.35) 0 6px, transparent 6px 12px);
}
[data-bk-style="memphis"] .bk-switch { border: 2px solid var(--bk-border); }
[data-bk-style="memphis"] .bk-check { border-width: 2px; }
[data-bk-style="memphis"] .bk-divider { border-style: dashed; }
[data-bk-style="memphis"] .bk-section-head::after {
  content: "";
  display: block;
  block-size: 8px;
  inline-size: 5rem;
  margin-block-start: var(--bk-space-3);
  background: repeating-linear-gradient(90deg, var(--bk-decor-1) 0 12px, var(--bk-decor-2) 12px 24px);
  border: 2px solid var(--bk-border);
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="memphis"] {
  --bk-danger: #ff5b4c;
  --bk-danger-on-soft: #c61100;
  --bk-danger-soft: #ffe0dc;
  --bk-danger-text: #db1200;
  --bk-info: #6c63ff;
  --bk-info-on-soft: #4a3fff;
  --bk-info-soft: #e3e1ff;
  --bk-info-text: #5e54ff;
  --bk-on-danger: #292929;
  --bk-on-info: #050505;
  --bk-on-primary: #292929;
  --bk-primary: #ff4f9a;
  --bk-primary-on-soft: #c90056;
  --bk-primary-soft: #ffe0ee;
  --bk-primary-text: #d9005c;
  --bk-secondary-on-soft: #157676;
  --bk-secondary-text: #157b7b;
  --bk-success-on-soft: #23773a;
  --bk-success-text: #257f3e;
  --bk-warning-on-soft: #8f6400;
  --bk-warning-text: #8f6400;
}
[data-bk-style="memphis"][data-bk-theme="dark"] {
  --bk-danger: #ff5b4c;
  --bk-danger-on-soft: #c61100;
  --bk-danger-soft: #ffe0dc;
  --bk-danger-text: #ff5b4c;
  --bk-info: #6c63ff;
  --bk-info-on-soft: #4a3fff;
  --bk-info-soft: #e3e1ff;
  --bk-info-text: #847dff;
  --bk-on-danger: #292929;
  --bk-on-info: #050505;
  --bk-on-primary: #292929;
  --bk-primary: #ff4f9a;
  --bk-primary-on-soft: #c90056;
  --bk-primary-soft: #ffe0ee;
  --bk-primary-text: #ff4f9a;
  --bk-secondary-on-soft: #157676;
  --bk-secondary-text: #23c9c9;
  --bk-success-on-soft: #23773a;
  --bk-success-text: #4ecb71;
  --bk-warning-on-soft: #8f6400;
  --bk-warning-text: #ffc233;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "memphis" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="memphis"][data-bk-theme="auto"] {
  --bk-bg: #17172a;
  --bk-bg-subtle: #1e1e35;
  --bk-surface: #1e1e35;
  --bk-surface-2: #262643;
  --bk-surface-3: #2f2f52;
  --bk-text: #fdf6ec;
  --bk-text-muted: #c3bede;
  --bk-text-subtle: #8e88b5;
  --bk-border: #fdf6ec;
  --bk-border-muted: #3b3b63;
  --bk-border-strong: #fdf6ec;
  --bk-neutral: #fdf6ec;
  --bk-neutral-soft: #262643;
  --bk-on-neutral: #17172a;
  --bk-primary-border: #fdf6ec;
  --bk-shadow-xs: 2px 2px 0 #fdf6ec;
  --bk-shadow-sm: 3px 4px 0 #fdf6ec;
  --bk-shadow-md: 5px 6px 0 #fdf6ec;
  --bk-shadow-lg: 7px 9px 0 #fdf6ec;
  --bk-shadow-xl: 10px 12px 0 #fdf6ec;
  --bk-btn-shadow: 3px 4px 0 #fdf6ec;
  --bk-btn-shadow-hover: 5px 6px 0 #fdf6ec;
  --bk-btn-shadow-active: 1px 1px 0 #fdf6ec;
  --bk-field-shadow: 2px 3px 0 #fdf6ec;
  --bk-card-shadow: 5px 6px 0 #fdf6ec;
  --bk-card-shadow-hover: 8px 10px 0 #fdf6ec;
  --bk-code-bg: #262643;
  --bk-code-border: #fdf6ec;
  --bk-divider-color: #fdf6ec;
  --bk-tooltip-bg: #fdf6ec;
  --bk-tooltip-fg: #17172a;


  --bk-danger: #ff5b4c;
  --bk-danger-on-soft: #c61100;
  --bk-danger-soft: #ffe0dc;
  --bk-danger-text: #ff5b4c;
  --bk-info: #6c63ff;
  --bk-info-on-soft: #4a3fff;
  --bk-info-soft: #e3e1ff;
  --bk-info-text: #847dff;
  --bk-on-danger: #292929;
  --bk-on-info: #050505;
  --bk-on-primary: #292929;
  --bk-primary: #ff4f9a;
  --bk-primary-on-soft: #c90056;
  --bk-primary-soft: #ffe0ee;
  --bk-primary-text: #ff4f9a;
  --bk-secondary-on-soft: #157676;
  --bk-secondary-text: #23c9c9;
  --bk-success-on-soft: #23773a;
  --bk-success-text: #4ecb71;
  --bk-warning-on-soft: #8f6400;
  --bk-warning-text: #ffc233;
}
}


/* =============================================================================
   SKIN — minimal · Hairline monochrome
   One neutral ramp, hairline rules, no fills, no shadows. Hierarchy comes from
   whitespace and weight alone.
   ========================================================================== */

[data-bk-style="minimal"] {
  --bk-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bk-heading-weight: 600;
  --bk-heading-tracking: -0.022em;
  --bk-label-tracking: 0.01em;

  --bk-bg: #ffffff;
  --bk-bg-subtle: #fafafa;
  --bk-bg-muted: #f5f5f5;
  --bk-surface: #ffffff;
  --bk-surface-2: #fafafa;
  --bk-surface-3: #f2f2f2;
  --bk-surface-inverted: #0a0a0a;

  --bk-text: #0a0a0a;
  --bk-text-muted: #666666;
  --bk-text-subtle: #999999;
  --bk-text-inverted: #ffffff;

  --bk-border: #ebebeb;
  --bk-border-muted: #f2f2f2;
  --bk-border-strong: #d4d4d4;
  --bk-border-width: 1px;

  --bk-primary: #0a0a0a;
  --bk-primary-hover: #262626;
  --bk-primary-active: #404040;
  --bk-primary-soft: #f5f5f5;
  --bk-primary-border: #d4d4d4;
  --bk-on-primary: #ffffff;
  --bk-secondary: #666666;
  --bk-secondary-hover: #4d4d4d;
  --bk-secondary-soft: #f5f5f5;
  --bk-secondary-border: #d4d4d4;
  --bk-on-secondary: #ffffff;
  --bk-success: #0a7d3f;
  --bk-success-soft: #f1f8f3;
  --bk-success-border: #cde5d6;
  --bk-warning: #9a6400;
  --bk-warning-soft: #fbf6ec;
  --bk-warning-border: #e8d9b8;
  --bk-danger: #c02626;
  --bk-danger-soft: #fdf2f2;
  --bk-danger-border: #eecccc;
  --bk-info: #1f5fbf;
  --bk-info-soft: #f1f5fc;
  --bk-info-border: #ccd9f0;
  --bk-neutral: #0a0a0a;
  --bk-neutral-soft: #f5f5f5;
  --bk-neutral-border: #ebebeb;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 0.6;
  --bk-radius-field: 6px;
  --bk-radius-card: 8px;
  --bk-radius-overlay: 12px;

  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: 0 1px 2px rgb(0 0 0 / 0.04);
  --bk-shadow-lg: 0 2px 8px rgb(0 0 0 / 0.06);
  --bk-shadow-xl: 0 8px 30px rgb(0 0 0 / 0.08);
  --bk-shadow-2xl: 0 16px 50px rgb(0 0 0 / 0.1);
  --bk-shadow-inner: none;

  --bk-ring: #0a0a0a;
  --bk-ring-width: 2px;
  --bk-ring-offset: 2px;

  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-btn-weight: 500;
  --bk-press-transform: none;
  --bk-hover-transform: none;

  --bk-field-border: #e0e0e0;
  --bk-field-border-hover: #b8b8b8;
  --bk-field-shadow: none;
  --bk-field-placeholder: #a3a3a3;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: 0 1px 3px rgb(0 0 0 / 0.06);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-shadow: var(--bk-shadow-xl);
  --bk-overlay-bg: rgb(0 0 0 / 0.25);
  --bk-code-bg: #fafafa;
  --bk-code-border: #ebebeb;
  --bk-tooltip-bg: #0a0a0a;
  --bk-selection-bg: #ebebeb;
  --bk-selection-fg: #0a0a0a;
  --bk-scrollbar-thumb: #d4d4d4;
  --bk-divider-color: #ebebeb;
}

[data-bk-style="minimal"][data-bk-theme="dark"] {
  --bk-bg: #0a0a0a;
  --bk-bg-subtle: #121212;
  --bk-bg-muted: #1a1a1a;
  --bk-surface: #0f0f0f;
  --bk-surface-2: #171717;
  --bk-surface-3: #212121;
  --bk-surface-inverted: #fafafa;
  --bk-text: #fafafa;
  --bk-text-muted: #a3a3a3;
  --bk-text-subtle: #737373;
  --bk-text-inverted: #0a0a0a;
  --bk-border: #262626;
  --bk-border-muted: #1c1c1c;
  --bk-border-strong: #404040;
  --bk-primary: #fafafa;
  --bk-primary-hover: #e5e5e5;
  --bk-primary-active: #d4d4d4;
  --bk-primary-soft: #1c1c1c;
  --bk-primary-border: #404040;
  --bk-on-primary: #0a0a0a;
  --bk-neutral: #fafafa;
  --bk-neutral-soft: #1c1c1c;
  --bk-neutral-border: #262626;
  --bk-on-neutral: #0a0a0a;
  --bk-field-bg: #0f0f0f;
  --bk-field-border: #2e2e2e;
  --bk-field-border-hover: #525252;
  --bk-code-bg: #121212;
  --bk-code-border: #262626;
  --bk-tooltip-bg: #fafafa;
  --bk-tooltip-fg: #0a0a0a;
  --bk-selection-bg: #333333;
  --bk-selection-fg: #fafafa;
  --bk-scrollbar-thumb: #333333;
  --bk-divider-color: #262626;
  --bk-ring: #fafafa;
}

[data-bk-style="minimal"] .bk-navbar { border-block-end: 1px solid var(--bk-border); background: var(--bk-bg); }
[data-bk-style="minimal"] .bk-table thead th { background: transparent; }
[data-bk-style="minimal"] .bk-badge { font-weight: 500; }
[data-bk-style="minimal"] .bk-card { transition: border-color 150ms var(--bk-ease); }
[data-bk-style="minimal"] .bk-card-interactive:hover { border-color: var(--bk-border-strong); transform: none; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="minimal"] {
  --bk-danger: #c02626;
  --bk-danger-on-soft: #c02626;
  --bk-danger-soft: #fdf2f2;
  --bk-danger-text: #c02626;
  --bk-field-placeholder: #919191;
  --bk-info: #1f5fbf;
  --bk-info-on-soft: #1f5fbf;
  --bk-info-soft: #f1f5fc;
  --bk-info-text: #1f5fbf;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-secondary-on-soft: #666666;
  --bk-secondary-text: #666666;
  --bk-success: #0a7d3f;
  --bk-success-on-soft: #0a7d3f;
  --bk-success-soft: #f1f8f3;
  --bk-success-text: #0a7d3f;
  --bk-text-subtle: #878787;
  --bk-warning: #9a6400;
  --bk-warning-on-soft: #9a6400;
  --bk-warning-soft: #fbf6ec;
  --bk-warning-text: #9a6400;
}
[data-bk-style="minimal"][data-bk-theme="dark"] {
  --bk-danger: #c02626;
  --bk-danger-on-soft: #c02626;
  --bk-danger-soft: #fdf2f2;
  --bk-danger-text: #dc4d4d;
  --bk-field-placeholder: #a3a3a3;
  --bk-info: #1f5fbf;
  --bk-info-on-soft: #1f5fbf;
  --bk-info-soft: #f1f5fc;
  --bk-info-text: #3c7ddf;
  --bk-on-danger: #f9e2e4;
  --bk-on-info: #cfe6fa;
  --bk-on-success: #defaea;
  --bk-on-warning: #fdf9f0;
  --bk-secondary-on-soft: #666666;
  --bk-secondary-text: #808080;
  --bk-success: #0a7d3f;
  --bk-success-on-soft: #0a7d3f;
  --bk-success-soft: #f1f8f3;
  --bk-success-text: #0c954b;
  --bk-text-subtle: #737373;
  --bk-warning: #9a6400;
  --bk-warning-on-soft: #9a6400;
  --bk-warning-soft: #fbf6ec;
  --bk-warning-text: #ae7100;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "minimal" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="minimal"][data-bk-theme="auto"] {
  --bk-bg: #0a0a0a;
  --bk-bg-subtle: #121212;
  --bk-bg-muted: #1a1a1a;
  --bk-surface: #0f0f0f;
  --bk-surface-2: #171717;
  --bk-surface-3: #212121;
  --bk-surface-inverted: #fafafa;
  --bk-text: #fafafa;
  --bk-text-muted: #a3a3a3;
  --bk-text-subtle: #737373;
  --bk-text-inverted: #0a0a0a;
  --bk-border: #262626;
  --bk-border-muted: #1c1c1c;
  --bk-border-strong: #404040;
  --bk-primary: #fafafa;
  --bk-primary-hover: #e5e5e5;
  --bk-primary-active: #d4d4d4;
  --bk-primary-soft: #1c1c1c;
  --bk-primary-border: #404040;
  --bk-on-primary: #0a0a0a;
  --bk-neutral: #fafafa;
  --bk-neutral-soft: #1c1c1c;
  --bk-neutral-border: #262626;
  --bk-on-neutral: #0a0a0a;
  --bk-field-bg: #0f0f0f;
  --bk-field-border: #2e2e2e;
  --bk-field-border-hover: #525252;
  --bk-code-bg: #121212;
  --bk-code-border: #262626;
  --bk-tooltip-bg: #fafafa;
  --bk-tooltip-fg: #0a0a0a;
  --bk-selection-bg: #333333;
  --bk-selection-fg: #fafafa;
  --bk-scrollbar-thumb: #333333;
  --bk-divider-color: #262626;
  --bk-ring: #fafafa;


  --bk-danger: #c02626;
  --bk-danger-on-soft: #c02626;
  --bk-danger-soft: #fdf2f2;
  --bk-danger-text: #dc4d4d;
  --bk-field-placeholder: #a3a3a3;
  --bk-info: #1f5fbf;
  --bk-info-on-soft: #1f5fbf;
  --bk-info-soft: #f1f5fc;
  --bk-info-text: #3c7ddf;
  --bk-on-danger: #f9e2e4;
  --bk-on-info: #cfe6fa;
  --bk-on-success: #defaea;
  --bk-on-warning: #fdf9f0;
  --bk-secondary-on-soft: #666666;
  --bk-secondary-text: #808080;
  --bk-success: #0a7d3f;
  --bk-success-on-soft: #0a7d3f;
  --bk-success-soft: #f1f8f3;
  --bk-success-text: #0c954b;
  --bk-text-subtle: #737373;
  --bk-warning: #9a6400;
  --bk-warning-on-soft: #9a6400;
  --bk-warning-soft: #fbf6ec;
  --bk-warning-text: #ae7100;
}
}


/* =============================================================================
   SKIN — neonsign · Glass tube on brick
   Bent glass filled with gas, mounted on a dark wall. The light bleeds onto
   what is behind it, the tubes hum slightly, and anything switched off is just
   dull grey glass.
   ========================================================================== */

[data-bk-style="neonsign"] {
  --bk-font-sans: "Monoton", "Bungee", "Righteous", ui-sans-serif, system-ui, sans-serif;
  --bk-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 400;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.06em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.16em;

  --_pink: #ff3d81;
  --_cyan: #2ee6ff;

  --bk-bg: #120e14;
  --bk-bg-subtle: #171219;
  --bk-bg-muted: #1e1821;
  --bk-surface: #191420;
  --bk-surface-2: #201a29;
  --bk-surface-3: #2b2335;
  --bk-surface-inverted: #f5eefa;

  --bk-text: #f3e9f7;
  --bk-text-muted: #b4a4bd;
  --bk-text-subtle: #857792;
  --bk-text-inverted: #120e14;

  --bk-border: #38304a;
  --bk-border-muted: #241e2e;
  --bk-border-strong: var(--_pink);
  --bk-border-width: 2px;

  --bk-primary: var(--_pink);
  --bk-primary-hover: #ff5f96;
  --bk-primary-active: #ff7fab;
  --bk-primary-soft: #37101f;
  --bk-primary-border: #74203f;
  --bk-on-primary: #1c0209;
  --bk-secondary: var(--_cyan);
  --bk-secondary-hover: #5aeeff;
  --bk-secondary-active: #86f3ff;
  --bk-secondary-soft: #0c2f36;
  --bk-secondary-border: #1a616e;
  --bk-on-secondary: #021a1f;
  --bk-success: #4dff9e;
  --bk-success-soft: #0d3320;
  --bk-success-border: #1c6b42;
  --bk-on-success: #001c0d;
  --bk-warning: #ffd85e;
  --bk-warning-soft: #362c0d;
  --bk-warning-border: #6e5c1c;
  --bk-on-warning: #1e1700;
  --bk-danger: #ff4d4d;
  --bk-danger-soft: #371212;
  --bk-danger-border: #732424;
  --bk-on-danger: #1e0303;
  --bk-info: #7c8cff;
  --bk-info-soft: #1b1d3d;
  --bk-info-border: #383c77;
  --bk-on-info: #07081f;
  --bk-neutral: #f3e9f7;
  --bk-neutral-soft: #201a29;
  --bk-neutral-border: #38304a;
  --bk-on-neutral: #120e14;

  --bk-radius-scale: 2.4;
  --bk-radius-field: var(--bk-radius-full);
  --bk-radius-card: var(--bk-radius-2xl);
  --bk-radius-overlay: var(--bk-radius-2xl);

  --bk-shadow-xs: 0 0 6px rgb(255 61 129 / 0.3);
  --bk-shadow-sm: 0 0 12px rgb(255 61 129 / 0.35);
  --bk-shadow-md: 0 0 22px rgb(255 61 129 / 0.4);
  --bk-shadow-lg: 0 0 36px rgb(255 61 129 / 0.45), 0 0 70px rgb(46 230 255 / 0.2);
  --bk-shadow-xl: 0 0 52px rgb(255 61 129 / 0.5), 0 0 100px rgb(46 230 255 / 0.25);
  --bk-shadow-2xl: 0 0 70px rgb(255 61 129 / 0.55), 0 0 140px rgb(46 230 255 / 0.3);
  --bk-shadow-inner: inset 0 0 18px rgb(255 61 129 / 0.16);

  --bk-ring: var(--_cyan);
  --bk-ring-width: 2px;
  --bk-ring-offset: 3px;

  --bk-btn-radius: var(--bk-radius-full);
  --bk-btn-border-width: 2px;
  --bk-btn-weight: 700;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.16em;
  --bk-btn-shadow: 0 0 10px rgb(255 61 129 / 0.28), inset 0 0 8px rgb(255 61 129 / 0.2);
  --bk-btn-shadow-hover: 0 0 26px rgb(255 61 129 / 0.55), inset 0 0 14px rgb(255 61 129 / 0.3);
  --bk-btn-shadow-active: inset 0 0 16px rgb(0 0 0 / 0.5);
  --bk-press-transform: translateY(1px);

  --bk-field-bg: rgb(0 0 0 / 0.4);
  --bk-field-border: #4a3f5e;
  --bk-field-border-hover: var(--_cyan);
  --bk-field-shadow: inset 0 0 12px rgb(0 0 0 / 0.6);
  --bk-field-shadow-focus: inset 0 0 12px rgb(0 0 0 / 0.6), 0 0 18px rgb(46 230 255 / 0.45);
  --bk-field-placeholder: #6f6280;

  --bk-card-bg: rgb(25 20 32 / 0.8);
  --bk-card-border: #38304a;
  --bk-card-shadow: 0 0 18px rgb(255 61 129 / 0.14);
  --bk-card-shadow-hover: 0 0 34px rgb(255 61 129 / 0.3);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #191420;
  --bk-overlay-border: var(--_pink);
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(6 4 8 / 0.85);
  --bk-code-bg: rgb(0 0 0 / 0.45);
  --bk-code-border: #38304a;
  --bk-tooltip-bg: var(--_cyan);
  --bk-tooltip-fg: #021a1f;
  --bk-selection-bg: rgb(255 61 129 / 0.45);
  --bk-scrollbar-thumb: #4a3f5e;
  --bk-divider-color: #38304a;

  /* Brick, and the wash the tubes throw onto it. */
  --bk-body-image:
    radial-gradient(40rem 26rem at 18% 10%, rgb(255 61 129 / 0.16), transparent 60%),
    radial-gradient(38rem 24rem at 84% 72%, rgb(46 230 255 / 0.14), transparent 60%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.022) 0 1px, transparent 1px 2.2rem),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.022) 0 1px, transparent 1px 4.6rem);
  --bk-body-attachment: fixed;
  color-scheme: dark;
}

/* Lit glass: the letterform glows, the tube behind it does not. */
[data-bk-style="neonsign"] .bk-display,
[data-bk-style="neonsign"] .bk-title,
[data-bk-style="neonsign"] .bk-navbar-brand {
  color: #fff6fb;
  text-shadow:
    0 0 4px #fff,
    0 0 12px var(--_pink),
    0 0 28px var(--_pink),
    0 0 60px rgb(255 61 129 / 0.7);
  animation: bk-flicker 6s steps(1) infinite;
}
[data-bk-style="neonsign"] .bk-eyebrow {
  color: var(--_cyan);
  text-shadow: 0 0 4px #fff, 0 0 14px var(--_cyan), 0 0 30px rgb(46 230 255 / 0.6);
}
[data-bk-style="neonsign"] .bk-btn-outline,
[data-bk-style="neonsign"] .bk-btn-ghost { text-shadow: 0 0 10px currentColor; }
[data-bk-style="neonsign"] .bk-badge { border: 2px solid currentColor; box-shadow: 0 0 10px currentColor; text-shadow: 0 0 8px currentColor; }
[data-bk-style="neonsign"] .bk-navbar { background: rgb(18 14 20 / 0.8); border-block-end: 2px solid var(--_pink); box-shadow: 0 0 24px rgb(255 61 129 / 0.3); }
[data-bk-style="neonsign"] .bk-card { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
[data-bk-style="neonsign"] .bk-progress { border: 2px solid var(--bk-border); background: rgb(0 0 0 / 0.4); }
[data-bk-style="neonsign"] .bk-progress-bar { box-shadow: 0 0 16px var(--bk-primary); }
[data-bk-style="neonsign"] .bk-avatar { border: 2px solid var(--_cyan); box-shadow: 0 0 14px rgb(46 230 255 / 0.5); }
[data-bk-style="neonsign"] .bk-tab[aria-selected="true"] { text-shadow: 0 0 12px currentColor; border-block-end-width: 3px; }
[data-bk-style="neonsign"] .bk-switch:checked { box-shadow: 0 0 14px var(--bk-primary); }
/* Switched off is dull glass, not a dimmer colour. */
[data-bk-style="neonsign"] .bk-btn:disabled { text-shadow: none; box-shadow: none; filter: saturate(0.15); }


/* =============================================================================
   SKIN — neumorph · Soft UI / Neumorphism
   One material, lit from the top-left. Nothing has a border; everything is
   extruded or pressed into the same slab of plastic.
   ========================================================================== */

[data-bk-style="neumorph"] {
  --bk-font-sans: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --bk-heading-weight: 800;
  --bk-heading-tracking: -0.01em;

  --_light: rgb(255 255 255 / 0.9);
  --_dark: rgb(163 177 198 / 0.6);

  --bk-bg: #e0e5ec;
  --bk-bg-subtle: #e0e5ec;
  --bk-bg-muted: #d7dce4;
  --bk-surface: #e0e5ec;
  --bk-surface-2: #e0e5ec;
  --bk-surface-3: #d6dbe3;
  --bk-surface-inverted: #2f3542;

  --bk-text: #3d4759;
  --bk-text-muted: #6b7488;
  --bk-text-subtle: #98a1b3;
  --bk-text-inverted: #eef1f6;

  --bk-border: transparent;
  --bk-border-muted: rgb(163 177 198 / 0.25);
  --bk-border-strong: transparent;
  --bk-border-width: 0px;

  --bk-primary: #6d5dfc;
  --bk-primary-hover: #5f50f0;
  --bk-primary-active: #5243e0;
  --bk-primary-soft: #dfe0fb;
  --bk-primary-border: transparent;
  --bk-on-primary: #ffffff;
  --bk-secondary: #2ec5a6;
  --bk-secondary-soft: #d5f3ec;
  --bk-secondary-border: transparent;
  --bk-on-secondary: #ffffff;
  --bk-success: #35b97f;
  --bk-success-soft: #d6f0e4;
  --bk-success-border: transparent;
  --bk-warning: #e8a33d;
  --bk-warning-soft: #f7ead6;
  --bk-warning-border: transparent;
  --bk-danger: #ef5f6b;
  --bk-danger-soft: #f8dde0;
  --bk-danger-border: transparent;
  --bk-info: #4a90e2;
  --bk-info-soft: #dbe8f7;
  --bk-info-border: transparent;
  --bk-neutral: #7b869c;
  --bk-neutral-soft: #e0e5ec;
  --bk-neutral-border: transparent;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 2.2;
  --bk-radius-field: var(--bk-radius-xl);
  --bk-radius-card: var(--bk-radius-2xl);
  --bk-radius-overlay: var(--bk-radius-3xl);

  --bk-shadow-none: 0 0 #0000;
  --bk-shadow-xs: 2px 2px 4px var(--_dark), -2px -2px 4px var(--_light);
  --bk-shadow-sm: 4px 4px 8px var(--_dark), -4px -4px 8px var(--_light);
  --bk-shadow-md: 6px 6px 12px var(--_dark), -6px -6px 12px var(--_light);
  --bk-shadow-lg: 9px 9px 18px var(--_dark), -9px -9px 18px var(--_light);
  --bk-shadow-xl: 14px 14px 28px var(--_dark), -14px -14px 28px var(--_light);
  --bk-shadow-2xl: 20px 20px 40px var(--_dark), -20px -20px 40px var(--_light);
  --bk-shadow-inner: inset 4px 4px 8px var(--_dark), inset -4px -4px 8px var(--_light);

  --bk-ring: var(--bk-primary);
  --bk-ring-width: 2px;
  --bk-ring-offset: 3px;
  --bk-ring-offset-color: var(--bk-bg);

  --bk-btn-shadow: var(--bk-shadow-sm);
  --bk-btn-shadow-hover: var(--bk-shadow-md);
  --bk-btn-shadow-active: var(--bk-shadow-inner);
  --bk-btn-border-width: 0px;
  --bk-btn-weight: 700;
  --bk-press-transform: scale(0.985);

  --bk-field-bg: var(--bk-bg);
  --bk-field-bg-hover: var(--bk-bg);
  --bk-field-bg-disabled: var(--bk-bg);
  --bk-field-border: transparent;
  --bk-field-border-hover: transparent;
  --bk-field-border-width: 0px;
  --bk-field-shadow: var(--bk-shadow-inner);
  --bk-field-shadow-focus: inset 5px 5px 10px var(--_dark), inset -5px -5px 10px var(--_light);
  --bk-field-placeholder: #9aa3b5;

  --bk-card-bg: var(--bk-bg);
  --bk-card-border-width: 0px;
  --bk-card-shadow: var(--bk-shadow-md);
  --bk-card-shadow-hover: var(--bk-shadow-lg);
  --bk-overlay-surface: var(--bk-bg);
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-border: transparent;
  --bk-overlay-bg: rgb(163 177 198 / 0.4);
  --bk-code-bg: var(--bk-bg);
  --bk-code-border: transparent;
  --bk-divider-color: rgb(163 177 198 / 0.4);
  --bk-tooltip-bg: #3d4759;
  --bk-scrollbar-thumb: #c3cad6;
  --bk-selection-bg: rgb(109 93 252 / 0.25);
}

[data-bk-style="neumorph"][data-bk-theme="dark"] {
  --_light: rgb(70 80 100 / 0.55);
  --_dark: rgb(9 12 18 / 0.75);
  --bk-bg: #262b33;
  --bk-bg-subtle: #262b33;
  --bk-surface: #262b33;
  --bk-surface-2: #262b33;
  --bk-surface-3: #2d333c;
  --bk-text: #d5dbe6;
  --bk-text-muted: #98a1b3;
  --bk-text-subtle: #6d7688;
  --bk-primary: #8b7dff;
  --bk-primary-soft: #2e3145;
  --bk-ring-offset-color: var(--bk-bg);
  --bk-overlay-bg: rgb(0 0 0 / 0.6);
  --bk-scrollbar-thumb: #3a414d;
  --bk-tooltip-bg: #11141a;
  --bk-tooltip-fg: #d5dbe6;
}

/* Solid-coloured things keep the extrusion but tint it. */
[data-bk-style="neumorph"] .bk-btn-solid,
[data-bk-style="neumorph"] .bk-btn:not([class*="bk-btn-"]) { text-shadow: 0 1px 1px rgb(0 0 0 / 0.15); }
[data-bk-style="neumorph"] .bk-badge,
[data-bk-style="neumorph"] .bk-chip { box-shadow: var(--bk-shadow-xs); }
[data-bk-style="neumorph"] .bk-progress { box-shadow: var(--bk-shadow-inner); background: var(--bk-bg); }
[data-bk-style="neumorph"] .bk-progress-bar { box-shadow: var(--bk-shadow-xs); }
[data-bk-style="neumorph"] .bk-switch { box-shadow: var(--bk-shadow-inner); background: var(--bk-bg); }
[data-bk-style="neumorph"] .bk-switch::before { background: var(--bk-bg); box-shadow: var(--bk-shadow-xs); }
[data-bk-style="neumorph"] .bk-switch:checked { background: var(--bk-primary-soft); }
[data-bk-style="neumorph"] .bk-switch:checked::before { background: var(--bk-primary); }
[data-bk-style="neumorph"] .bk-check { box-shadow: var(--bk-shadow-inner); background: var(--bk-bg); }
[data-bk-style="neumorph"] .bk-check:checked { box-shadow: var(--bk-shadow-xs); }
[data-bk-style="neumorph"] .bk-tab[aria-selected="true"] { box-shadow: var(--bk-shadow-sm); border-radius: var(--bk-radius-lg); border-block-end-color: transparent; }
[data-bk-style="neumorph"] .bk-tablist { border-block-end: 0; }
[data-bk-style="neumorph"] .bk-table-wrap { box-shadow: var(--bk-shadow-md); }
[data-bk-style="neumorph"] .bk-avatar { box-shadow: var(--bk-shadow-xs); }
[data-bk-style="neumorph"] .bk-segmented { box-shadow: var(--bk-shadow-inner); background: var(--bk-bg); }
[data-bk-style="neumorph"] .bk-segmented > input:checked + label { box-shadow: var(--bk-shadow-xs); background: var(--bk-bg); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="neumorph"] {
  --bk-danger: #ef5f6b;
  --bk-danger-on-soft: #c51422;
  --bk-danger-soft: #f8dde0;
  --bk-danger-text: #c51422;
  --bk-field-placeholder: #748099;
  --bk-info: #4a90e2;
  --bk-info-on-soft: #1d65b8;
  --bk-info-soft: #dbe8f7;
  --bk-info-text: #1d62b3;
  --bk-neutral: #7b869c;
  --bk-neutral-on-soft: #596377;
  --bk-neutral-soft: #e0e5ec;
  --bk-neutral-text: #596377;
  --bk-on-danger: #262626;
  --bk-on-info: #242424;
  --bk-on-neutral: #191919;
  --bk-on-primary: #ffffff;
  --bk-on-secondary: #404040;
  --bk-on-success: #383838;
  --bk-on-warning: #404040;
  --bk-primary: #6d5dfc;
  --bk-primary-on-soft: #4d3afb;
  --bk-primary-soft: #dfe0fb;
  --bk-primary-text: #523ffb;
  --bk-secondary: #2ec5a6;
  --bk-secondary-on-soft: #1b7260;
  --bk-secondary-soft: #d5f3ec;
  --bk-secondary-text: #1a6e5d;
  --bk-success: #35b97f;
  --bk-success-on-soft: #21724e;
  --bk-success-soft: #d6f0e4;
  --bk-success-text: #1f6e4b;
  --bk-text-muted: #555c6b;
  --bk-text-subtle: #6c7992;
  --bk-warning: #e8a33d;
  --bk-warning-on-soft: #8f5c11;
  --bk-warning-soft: #f7ead6;
  --bk-warning-text: #865710;
}
[data-bk-style="neumorph"][data-bk-theme="dark"] {
  --bk-danger: #ef5f6b;
  --bk-danger-on-soft: #c51422;
  --bk-danger-soft: #f8dde0;
  --bk-danger-text: #f06874;
  --bk-field-placeholder: #9aa3b5;
  --bk-info: #4a90e2;
  --bk-info-on-soft: #1d65b8;
  --bk-info-soft: #dbe8f7;
  --bk-info-text: #5798e4;
  --bk-neutral: #7b869c;
  --bk-neutral-on-soft: #596377;
  --bk-neutral-soft: #e0e5ec;
  --bk-neutral-text: #8c96a9;
  --bk-on-danger: #22070a;
  --bk-on-info: #03121f;
  --bk-on-neutral: #191919;
  --bk-on-primary: #242424;
  --bk-on-secondary: #404040;
  --bk-on-success: #04180d;
  --bk-on-warning: #1f1503;
  --bk-primary: #8b7dff;
  --bk-primary-on-soft: #9d91ff;
  --bk-primary-soft: #2e3145;
  --bk-primary-text: #9487ff;
  --bk-secondary: #2ec5a6;
  --bk-secondary-on-soft: #1b7260;
  --bk-secondary-soft: #d5f3ec;
  --bk-secondary-text: #2ec5a6;
  --bk-success: #35b97f;
  --bk-success-on-soft: #21724e;
  --bk-success-soft: #d6f0e4;
  --bk-success-text: #35b97f;
  --bk-text-muted: #98a1b3;
  --bk-text-subtle: #778092;
  --bk-warning: #e8a33d;
  --bk-warning-on-soft: #8f5c11;
  --bk-warning-soft: #f7ead6;
  --bk-warning-text: #e8a33d;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "neumorph" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="neumorph"][data-bk-theme="auto"] {
  --_light: rgb(70 80 100 / 0.55);
  --_dark: rgb(9 12 18 / 0.75);
  --bk-bg: #262b33;
  --bk-bg-subtle: #262b33;
  --bk-surface: #262b33;
  --bk-surface-2: #262b33;
  --bk-surface-3: #2d333c;
  --bk-text: #d5dbe6;
  --bk-text-muted: #98a1b3;
  --bk-text-subtle: #6d7688;
  --bk-primary: #8b7dff;
  --bk-primary-soft: #2e3145;
  --bk-ring-offset-color: var(--bk-bg);
  --bk-overlay-bg: rgb(0 0 0 / 0.6);
  --bk-scrollbar-thumb: #3a414d;
  --bk-tooltip-bg: #11141a;
  --bk-tooltip-fg: #d5dbe6;


  --bk-danger: #ef5f6b;
  --bk-danger-on-soft: #c51422;
  --bk-danger-soft: #f8dde0;
  --bk-danger-text: #f06874;
  --bk-field-placeholder: #9aa3b5;
  --bk-info: #4a90e2;
  --bk-info-on-soft: #1d65b8;
  --bk-info-soft: #dbe8f7;
  --bk-info-text: #5798e4;
  --bk-neutral: #7b869c;
  --bk-neutral-on-soft: #596377;
  --bk-neutral-soft: #e0e5ec;
  --bk-neutral-text: #8c96a9;
  --bk-on-danger: #22070a;
  --bk-on-info: #03121f;
  --bk-on-neutral: #191919;
  --bk-on-primary: #242424;
  --bk-on-secondary: #404040;
  --bk-on-success: #04180d;
  --bk-on-warning: #1f1503;
  --bk-primary: #8b7dff;
  --bk-primary-on-soft: #9d91ff;
  --bk-primary-soft: #2e3145;
  --bk-primary-text: #9487ff;
  --bk-secondary: #2ec5a6;
  --bk-secondary-on-soft: #1b7260;
  --bk-secondary-soft: #d5f3ec;
  --bk-secondary-text: #2ec5a6;
  --bk-success: #35b97f;
  --bk-success-on-soft: #21724e;
  --bk-success-soft: #d6f0e4;
  --bk-success-text: #35b97f;
  --bk-text-muted: #98a1b3;
  --bk-text-subtle: #778092;
  --bk-warning: #e8a33d;
  --bk-warning-on-soft: #8f5c11;
  --bk-warning-soft: #f7ead6;
  --bk-warning-text: #e8a33d;
}
}


/* =============================================================================
   SKIN — noir · Film noir
   High-contrast monochrome with one bruise of colour. Hard light, venetian
   blind stripes across the hero, condensed type set tight, and shadows that
   fall in one direction like there is a single bare bulb overhead.
   ========================================================================== */

[data-bk-style="noir"] {
  --bk-font-sans: "Oswald", "Archivo Narrow", "Haettenschweiler", "Impact", ui-sans-serif, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 600;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.02em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.16em;

  --bk-bg: #0b0b0c;
  --bk-bg-subtle: #101011;
  --bk-bg-muted: #171718;
  --bk-surface: #121213;
  --bk-surface-2: #191919;
  --bk-surface-3: #232324;
  --bk-surface-inverted: #f2f2f0;

  --bk-text: #f2f2f0;
  --bk-text-muted: #a3a3a1;
  --bk-text-subtle: #737372;
  --bk-text-inverted: #0b0b0c;

  --bk-border: #2b2b2c;
  --bk-border-muted: #1c1c1d;
  --bk-border-strong: #6a6a68;
  --bk-border-width: 1px;

  --bk-primary: #f2f2f0;
  --bk-primary-hover: #ffffff;
  --bk-primary-active: #d8d8d6;
  --bk-primary-soft: #1e1e1f;
  --bk-primary-border: #4a4a49;
  --bk-on-primary: #0b0b0c;
  --bk-secondary: #8c1c1c;
  --bk-secondary-hover: #a52121;
  --bk-secondary-active: #bd2727;
  --bk-secondary-soft: #250d0d;
  --bk-secondary-border: #4d1616;
  --bk-on-secondary: #f8ecec;
  --bk-success: #7f8c6a;
  --bk-success-soft: #1a1d15;
  --bk-success-border: #333a29;
  --bk-on-success: #0b0d07;
  --bk-warning: #a08a4e;
  --bk-warning-soft: #221d10;
  --bk-warning-border: #453a20;
  --bk-on-warning: #120e04;
  --bk-danger: #a52121;
  --bk-danger-soft: #250d0d;
  --bk-danger-border: #4d1616;
  --bk-on-danger: #fbeaea;
  --bk-info: #6f7d8c;
  --bk-info-soft: #161a1d;
  --bk-info-border: #2c343a;
  --bk-on-info: #080a0c;
  --bk-neutral: #f2f2f0;
  --bk-neutral-soft: #191919;
  --bk-neutral-border: #2b2b2c;
  --bk-on-neutral: #0b0b0c;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-color: 0 0% 0%;
  --bk-shadow-xs: none;
  --bk-shadow-sm: 4px 4px 0 rgb(0 0 0 / 0.7);
  --bk-shadow-md: 8px 8px 0 rgb(0 0 0 / 0.75);
  --bk-shadow-lg: 14px 14px 0 rgb(0 0 0 / 0.8);
  --bk-shadow-xl: 20px 20px 0 rgb(0 0 0 / 0.85);
  --bk-shadow-2xl: 28px 28px 0 rgb(0 0 0 / 0.9);
  --bk-shadow-inner: inset 0 0 40px rgb(0 0 0 / 0.6);

  --bk-ring: #f2f2f0;
  --bk-ring-width: 1px;
  --bk-ring-offset: 3px;

  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.18em;
  --bk-btn-weight: 500;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: 5px 5px 0 rgb(0 0 0 / 0.8);
  --bk-btn-shadow-active: none;
  --bk-press-transform: translate(2px, 2px);
  --bk-hover-transform: translate(-1px, -1px);

  --bk-field-bg: #0e0e0f;
  --bk-field-border: #3a3a3b;
  --bk-field-border-hover: #f2f2f0;
  --bk-field-shadow: none;
  --bk-field-placeholder: #5f5f5e;
  --bk-card-bg: #121213;
  --bk-card-shadow: 6px 6px 0 rgb(0 0 0 / 0.7);
  --bk-card-shadow-hover: 10px 10px 0 rgb(0 0 0 / 0.8);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #121213;
  --bk-overlay-border: #6a6a68;
  --bk-overlay-shadow: 24px 24px 0 rgb(0 0 0 / 0.85);
  --bk-overlay-bg: rgb(0 0 0 / 0.86);
  --bk-code-bg: #0e0e0f;
  --bk-code-border: #2b2b2c;
  --bk-tooltip-bg: #f2f2f0;
  --bk-tooltip-fg: #0b0b0c;
  --bk-selection-bg: #8c1c1c;
  --bk-selection-fg: #ffffff;
  --bk-scrollbar-thumb: #3a3a3b;
  --bk-divider-color: #2b2b2c;

  --bk-body-image:
    radial-gradient(70rem 50rem at 22% -12%, rgb(255 255 255 / 0.06), transparent 62%),
    radial-gradient(50rem 50rem at 100% 100%, rgb(0 0 0 / 0.7), transparent 60%);
  --bk-body-attachment: fixed;
  color-scheme: dark;
}

[data-bk-style="noir"][data-bk-theme="light"] {
  --bk-bg: #edece8;
  --bk-bg-subtle: #e4e2dd;
  --bk-surface: #f6f5f2;
  --bk-surface-2: #e7e5e0;
  --bk-surface-3: #d8d5ce;
  --bk-surface-inverted: #0b0b0c;
  --bk-text: #101011;
  --bk-text-muted: #45443f;
  --bk-text-subtle: #74736c;
  --bk-text-inverted: #f6f5f2;
  --bk-border: #b8b5ad;
  --bk-border-muted: #d6d3cb;
  --bk-border-strong: #101011;
  --bk-primary: #101011;
  --bk-primary-hover: #2a2a2a;
  --bk-primary-soft: #dedcd5;
  --bk-primary-border: #101011;
  --bk-on-primary: #f6f5f2;
  --bk-secondary: #8c1c1c;
  --bk-secondary-soft: #f0dede;
  --bk-secondary-border: #c48c8c;
  --bk-neutral: #101011;
  --bk-neutral-soft: #e7e5e0;
  --bk-neutral-border: #b8b5ad;
  --bk-on-neutral: #f6f5f2;
  --bk-field-bg: #ffffff;
  --bk-field-border: #8f8c84;
  --bk-card-bg: #f6f5f2;
  --bk-card-shadow: 6px 6px 0 rgb(16 16 17 / 0.28);
  --bk-card-shadow-hover: 10px 10px 0 rgb(16 16 17 / 0.35);
  --bk-code-bg: #e7e5e0;
  --bk-code-border: #b8b5ad;
  --bk-overlay-surface: #f6f5f2;
  --bk-overlay-border: #101011;
  --bk-tooltip-bg: #101011;
  --bk-tooltip-fg: #f6f5f2;
  --bk-divider-color: #b8b5ad;
  --bk-ring: #101011;
  --bk-body-image: radial-gradient(70rem 50rem at 22% -12%, rgb(0 0 0 / 0.05), transparent 62%);
  color-scheme: light;
}

/* Light through a venetian blind, falling across the hero. */
[data-bk-style="noir"] .bk-hero { position: relative; overflow: hidden; }
[data-bk-style="noir"] .bk-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background: repeating-linear-gradient(
    72deg,
    rgb(255 255 255 / 0.055) 0 14px,
    transparent 14px 46px);
  pointer-events: none;
}
[data-bk-style="noir"] .bk-display,
[data-bk-style="noir"] .bk-title { letter-spacing: -0.01em; }
[data-bk-style="noir"] .bk-eyebrow { color: var(--bk-secondary); }
[data-bk-style="noir"] .bk-navbar { background: transparent; border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="noir"] .bk-table thead th { background: transparent; border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="noir"] .bk-badge { border: 1px solid currentColor; }
[data-bk-style="noir"] .bk-avatar { border-radius: 0; filter: grayscale(1) contrast(1.2); }
[data-bk-style="noir"] .bk-card-media > img { filter: grayscale(1) contrast(1.25); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="noir"] {
  --bk-danger-on-soft: #dd5454;
  --bk-danger-text: #dc5050;
  --bk-info-on-soft: #7a8795;
  --bk-info-text: #748291;
  --bk-secondary-on-soft: #dd5555;
  --bk-secondary-text: #dc5151;
  --bk-success-on-soft: #7f8c6a;
  --bk-success-text: #7f8c6a;
  --bk-warning-on-soft: #a08a4e;
  --bk-warning-text: #a08a4e;
}
[data-bk-style="noir"][data-bk-theme="light"] {
  --bk-danger-on-soft: #dd5454;
  --bk-danger-text: #a52121;
  --bk-info-on-soft: #7a8795;
  --bk-info-text: #5d6975;
  --bk-secondary-on-soft: #8c1c1c;
  --bk-secondary-text: #8c1c1c;
  --bk-success-on-soft: #7f8c6a;
  --bk-success-text: #626c52;
  --bk-warning-on-soft: #a08a4e;
  --bk-warning-text: #77673a;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "noir" — generated by scripts/build.mjs */
@media (prefers-color-scheme: light) {
  [data-bk-style="noir"][data-bk-theme="auto"] {
  --bk-bg: #edece8;
  --bk-bg-subtle: #e4e2dd;
  --bk-surface: #f6f5f2;
  --bk-surface-2: #e7e5e0;
  --bk-surface-3: #d8d5ce;
  --bk-surface-inverted: #0b0b0c;
  --bk-text: #101011;
  --bk-text-muted: #45443f;
  --bk-text-subtle: #74736c;
  --bk-text-inverted: #f6f5f2;
  --bk-border: #b8b5ad;
  --bk-border-muted: #d6d3cb;
  --bk-border-strong: #101011;
  --bk-primary: #101011;
  --bk-primary-hover: #2a2a2a;
  --bk-primary-soft: #dedcd5;
  --bk-primary-border: #101011;
  --bk-on-primary: #f6f5f2;
  --bk-secondary: #8c1c1c;
  --bk-secondary-soft: #f0dede;
  --bk-secondary-border: #c48c8c;
  --bk-neutral: #101011;
  --bk-neutral-soft: #e7e5e0;
  --bk-neutral-border: #b8b5ad;
  --bk-on-neutral: #f6f5f2;
  --bk-field-bg: #ffffff;
  --bk-field-border: #8f8c84;
  --bk-card-bg: #f6f5f2;
  --bk-card-shadow: 6px 6px 0 rgb(16 16 17 / 0.28);
  --bk-card-shadow-hover: 10px 10px 0 rgb(16 16 17 / 0.35);
  --bk-code-bg: #e7e5e0;
  --bk-code-border: #b8b5ad;
  --bk-overlay-surface: #f6f5f2;
  --bk-overlay-border: #101011;
  --bk-tooltip-bg: #101011;
  --bk-tooltip-fg: #f6f5f2;
  --bk-divider-color: #b8b5ad;
  --bk-ring: #101011;
  --bk-body-image: radial-gradient(70rem 50rem at 22% -12%, rgb(0 0 0 / 0.05), transparent 62%);
  color-scheme: light;


  --bk-danger-on-soft: #dd5454;
  --bk-danger-text: #a52121;
  --bk-info-on-soft: #7a8795;
  --bk-info-text: #5d6975;
  --bk-secondary-on-soft: #8c1c1c;
  --bk-secondary-text: #8c1c1c;
  --bk-success-on-soft: #7f8c6a;
  --bk-success-text: #626c52;
  --bk-warning-on-soft: #a08a4e;
  --bk-warning-text: #77673a;
}
}


/* =============================================================================
   SKIN — nouveau · Art Nouveau
   Whiplash curves and stems: asymmetric radii that lean, sage and old brass,
   an ornamental rule under every section, and lettering with a stalk on it.
   Curves everywhere, but never the same curve twice.
   ========================================================================== */

[data-bk-style="nouveau"] {
  --bk-font-display: "Cormorant Garamond", "Eczar", Georgia, serif;
  --bk-font-serif: var(--bk-font-display);
  --bk-font-sans: "Julius Sans One", "Josefin Sans", ui-sans-serif, system-ui, sans-serif;
  --bk-font-body: "EB Garamond", Georgia, serif;
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 500;
  --bk-heading-tracking: 0.02em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.22em;
  --bk-leading-relaxed: 1.8;

  --_brass: #9c7b3c;
  --_sage: #6b7f5e;

  --bk-bg: #f2eee1;
  --bk-bg-subtle: #ebe5d4;
  --bk-bg-muted: #e0d9c3;
  --bk-surface: #f9f6ec;
  --bk-surface-2: #eee9d9;
  --bk-surface-3: #ded7c1;
  --bk-surface-inverted: #2a2b22;

  --bk-text: #2e3026;
  --bk-text-muted: #5b5d4c;
  --bk-text-subtle: #8b8b76;
  --bk-text-inverted: #f9f6ec;

  --bk-border: #cbc3a7;
  --bk-border-muted: #e0d9c3;
  --bk-border-strong: var(--_brass);
  --bk-border-width: 1px;

  --bk-primary: #7a5c26;
  --bk-primary-hover: #654b1f;
  --bk-primary-active: #523c19;
  --bk-primary-soft: #efe6cf;
  --bk-primary-border: #c9b385;
  --bk-on-primary: #f9f6ec;
  --bk-secondary: #4d6142;
  --bk-secondary-hover: #405136;
  --bk-secondary-soft: #e4ebde;
  --bk-secondary-border: #a9bd9f;
  --bk-on-secondary: #f9f6ec;
  --bk-success: #4d6142;
  --bk-success-soft: #e4ebde;
  --bk-success-border: #a9bd9f;
  --bk-warning: #8a6414;
  --bk-warning-soft: #f3e9cd;
  --bk-warning-border: #d5be83;
  --bk-danger: #8a3b32;
  --bk-danger-soft: #f1dfda;
  --bk-danger-border: #cfa79e;
  --bk-info: #445f6b;
  --bk-info-soft: #dfe9ec;
  --bk-info-border: #a6c0c7;
  --bk-neutral: #2e3026;
  --bk-neutral-soft: #eae4d2;
  --bk-neutral-border: #cbc3a7;
  --bk-on-neutral: #f9f6ec;

  --bk-radius-scale: 1;
  /* The whiplash: every corner a different arc. */
  --bk-radius-field: 22px 4px 22px 4px;
  --bk-radius-card: 48px 6px 48px 6px;
  --bk-radius-overlay: 40px 8px 40px 8px;
  --bk-radius-pill: 9999px;

  --bk-shadow-color: 45 25% 28%;
  --bk-shadow-strength: 0.8;

  --bk-ring: var(--_brass);
  --bk-ring-width: 1px;
  --bk-ring-offset: 3px;

  --bk-btn-radius: 20px 4px 20px 4px;
  --bk-btn-weight: 500;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.18em;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: 0 4px 14px rgb(120 95 40 / 0.2);
  --bk-btn-shadow-active: none;
  --bk-press-transform: translateY(1px);
  --bk-hover-transform: none;

  --bk-field-bg: #fbf9f1;
  --bk-field-border: #bcb193;
  --bk-field-border-hover: var(--_brass);
  --bk-field-shadow: none;
  --bk-field-placeholder: #a8a48f;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: 0 8px 26px rgb(120 95 40 / 0.14);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #f9f6ec;
  --bk-overlay-border: var(--_brass);
  --bk-overlay-shadow: 0 24px 60px rgb(50 45 25 / 0.28);
  --bk-overlay-bg: rgb(46 48 38 / 0.4);
  --bk-code-bg: #eee9d9;
  --bk-code-border: #cbc3a7;
  --bk-tooltip-bg: #2e3026;
  --bk-selection-bg: rgb(156 123 60 / 0.25);
  --bk-scrollbar-thumb: #cbc3a7;
  --bk-divider-color: var(--_brass);

  --bk-body-image:
    radial-gradient(40rem 30rem at 100% 0%, rgb(156 123 60 / 0.1), transparent 60%),
    radial-gradient(36rem 28rem at 0% 100%, rgb(107 127 94 / 0.1), transparent 60%);
  --bk-body-attachment: fixed;
}

[data-bk-style="nouveau"][data-bk-theme="dark"] {
  --bk-bg: #1c1d17;
  --bk-bg-subtle: #22241b;
  --bk-surface: #24261d;
  --bk-surface-2: #2b2d22;
  --bk-surface-3: #35372a;
  --bk-text: #ece7d5;
  --bk-text-muted: #b3b09b;
  --bk-text-subtle: #878472;
  --bk-text-inverted: #1c1d17;
  --bk-border: #3c3f2f;
  --bk-border-muted: #2b2d22;
  --bk-border-strong: #b6924b;
  --bk-primary: #cba85e;
  --bk-primary-hover: #d9b972;
  --bk-primary-soft: #2c2515;
  --bk-primary-border: #5b4b28;
  --bk-on-primary: #171206;
  --bk-secondary: #94ac86;
  --bk-secondary-soft: #202a1c;
  --bk-secondary-border: #3f4f37;
  --bk-on-secondary: #0d1409;
  --bk-success: #94ac86;
  --bk-success-soft: #202a1c;
  --bk-success-border: #3f4f37;
  --bk-warning-soft: #2c2612;
  --bk-danger-soft: #2e1d19;
  --bk-info-soft: #1b2528;
  --bk-neutral: #ece7d5;
  --bk-neutral-soft: #2b2d22;
  --bk-neutral-border: #3c3f2f;
  --bk-on-neutral: #1c1d17;
  --bk-field-bg: #24261d;
  --bk-field-border: #4b4e3b;
  --bk-code-bg: #22241b;
  --bk-code-border: #3c3f2f;
  --bk-overlay-surface: #24261d;
  --bk-overlay-border: #b6924b;
  --bk-tooltip-bg: #ece7d5;
  --bk-tooltip-fg: #1c1d17;
  --bk-divider-color: #b6924b;
  --bk-body-image: radial-gradient(40rem 30rem at 100% 0%, rgb(203 168 94 / 0.08), transparent 60%);
}

/* No two neighbours share a silhouette — that is the whole idiom. */
[data-bk-style="nouveau"] .bk-card:nth-child(2n) { border-radius: 6px 48px 6px 48px; }
[data-bk-style="nouveau"] .bk-card:nth-child(3n) { border-radius: 48px 48px 6px 6px; }
[data-bk-style="nouveau"] .bk-btn:nth-of-type(2n) { border-radius: 4px 20px 4px 20px; }
[data-bk-style="nouveau"] .bk-avatar { border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; border: 1px solid var(--bk-border-strong); }
[data-bk-style="nouveau"] .bk-badge { border-radius: 9999px; border: 1px solid currentColor; }
[data-bk-style="nouveau"] .bk-navbar { background: transparent; border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="nouveau"] .bk-title,
[data-bk-style="nouveau"] .bk-display { color: var(--bk-primary); }
[data-bk-style="nouveau"] .bk-section-head::after {
  content: "❧";
  display: block;
  margin-block-start: var(--bk-space-3);
  color: var(--bk-primary);
  font-size: var(--bk-text-xl);
}
[data-bk-style="nouveau"] .bk-table thead th {
  background: transparent;
  font-family: var(--bk-font-sans);
  border-block-end: 1px solid var(--bk-border-strong);
}
[data-bk-style="nouveau"] .bk-divider-text::before,
[data-bk-style="nouveau"] .bk-divider-text::after { border-color: var(--bk-border-strong); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="nouveau"] {
  --bk-danger: #8a3b32;
  --bk-danger-on-soft: #8a3b32;
  --bk-danger-soft: #f1dfda;
  --bk-danger-text: #8a3b32;
  --bk-field-placeholder: #928d72;
  --bk-info: #445f6b;
  --bk-info-on-soft: #445f6b;
  --bk-info-soft: #dfe9ec;
  --bk-info-text: #445f6b;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-text-subtle: #787865;
  --bk-warning: #8a6414;
  --bk-warning-on-soft: #815e13;
  --bk-warning-soft: #f3e9cd;
  --bk-warning-text: #8a6414;
}
[data-bk-style="nouveau"][data-bk-theme="dark"] {
  --bk-danger: #8a3b32;
  --bk-danger-on-soft: #ca766c;
  --bk-danger-soft: #2e1d19;
  --bk-danger-text: #cb7a70;
  --bk-field-placeholder: #a8a48f;
  --bk-info: #445f6b;
  --bk-info-on-soft: #6d92a2;
  --bk-info-soft: #1b2528;
  --bk-info-text: #7194a4;
  --bk-on-danger: #f2c0c5;
  --bk-on-info: #bcddf9;
  --bk-on-warning: #fbefd8;
  --bk-text-subtle: #878472;
  --bk-warning: #8a6414;
  --bk-warning-on-soft: #bb881b;
  --bk-warning-soft: #2c2612;
  --bk-warning-text: #bb881b;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "nouveau" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="nouveau"][data-bk-theme="auto"] {
  --bk-bg: #1c1d17;
  --bk-bg-subtle: #22241b;
  --bk-surface: #24261d;
  --bk-surface-2: #2b2d22;
  --bk-surface-3: #35372a;
  --bk-text: #ece7d5;
  --bk-text-muted: #b3b09b;
  --bk-text-subtle: #878472;
  --bk-text-inverted: #1c1d17;
  --bk-border: #3c3f2f;
  --bk-border-muted: #2b2d22;
  --bk-border-strong: #b6924b;
  --bk-primary: #cba85e;
  --bk-primary-hover: #d9b972;
  --bk-primary-soft: #2c2515;
  --bk-primary-border: #5b4b28;
  --bk-on-primary: #171206;
  --bk-secondary: #94ac86;
  --bk-secondary-soft: #202a1c;
  --bk-secondary-border: #3f4f37;
  --bk-on-secondary: #0d1409;
  --bk-success: #94ac86;
  --bk-success-soft: #202a1c;
  --bk-success-border: #3f4f37;
  --bk-warning-soft: #2c2612;
  --bk-danger-soft: #2e1d19;
  --bk-info-soft: #1b2528;
  --bk-neutral: #ece7d5;
  --bk-neutral-soft: #2b2d22;
  --bk-neutral-border: #3c3f2f;
  --bk-on-neutral: #1c1d17;
  --bk-field-bg: #24261d;
  --bk-field-border: #4b4e3b;
  --bk-code-bg: #22241b;
  --bk-code-border: #3c3f2f;
  --bk-overlay-surface: #24261d;
  --bk-overlay-border: #b6924b;
  --bk-tooltip-bg: #ece7d5;
  --bk-tooltip-fg: #1c1d17;
  --bk-divider-color: #b6924b;
  --bk-body-image: radial-gradient(40rem 30rem at 100% 0%, rgb(203 168 94 / 0.08), transparent 60%);


  --bk-danger: #8a3b32;
  --bk-danger-on-soft: #ca766c;
  --bk-danger-soft: #2e1d19;
  --bk-danger-text: #cb7a70;
  --bk-field-placeholder: #a8a48f;
  --bk-info: #445f6b;
  --bk-info-on-soft: #6d92a2;
  --bk-info-soft: #1b2528;
  --bk-info-text: #7194a4;
  --bk-on-danger: #f2c0c5;
  --bk-on-info: #bcddf9;
  --bk-on-warning: #fbefd8;
  --bk-text-subtle: #878472;
  --bk-warning: #8a6414;
  --bk-warning-on-soft: #bb881b;
  --bk-warning-soft: #2c2612;
  --bk-warning-text: #bb881b;
}
}


/* =============================================================================
   SKIN — organic · Blob / earthy
   Asymmetric border-radii that never repeat, clay-and-moss palette, humanist
   type. Nothing in nature is a perfect rectangle.
   ========================================================================== */

[data-bk-style="organic"] {
  --bk-font-sans: "Outfit", "Nunito Sans", ui-rounded, system-ui, sans-serif;
  --bk-font-display: "Fraunces", "Georgia", serif;
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 600;
  --bk-heading-tracking: -0.015em;

  --bk-bg: #faf7f2;
  --bk-bg-subtle: #f3eee5;
  --bk-bg-muted: #eae2d5;
  --bk-surface: #fffdf9;
  --bk-surface-2: #f4efe6;
  --bk-surface-3: #e9e1d4;
  --bk-surface-inverted: #2b2a26;

  --bk-text: #2f2c25;
  --bk-text-muted: #5e594e;
  --bk-text-subtle: #8d8676;
  --bk-text-inverted: #fffdf9;

  --bk-border: #e0d7c7;
  --bk-border-muted: #ece5d9;
  --bk-border-strong: #c4b8a2;

  --bk-primary: #6b8f5e;
  --bk-primary-hover: #5d7f51;
  --bk-primary-active: #4f6e45;
  --bk-primary-soft: #e7efe3;
  --bk-primary-border: #b3c9aa;
  --bk-on-primary: #fffdf9;
  --bk-secondary: #c47a4a;
  --bk-secondary-hover: #b26b3e;
  --bk-secondary-soft: #f7e9dd;
  --bk-secondary-border: #e0bb9c;
  --bk-on-secondary: #fffdf9;
  --bk-success: #5c8a52;
  --bk-success-soft: #e6efe3;
  --bk-success-border: #b0c9a7;
  --bk-warning: #c08a2e;
  --bk-warning-soft: #f8eed9;
  --bk-warning-border: #e2c78e;
  --bk-danger: #b1533f;
  --bk-danger-soft: #f6e3de;
  --bk-danger-border: #ddaa9a;
  --bk-info: #4f7d8c;
  --bk-info-soft: #e3edf0;
  --bk-info-border: #a8c6cf;
  --bk-neutral: #5e594e;
  --bk-neutral-soft: #efe9de;
  --bk-neutral-border: #ddd4c3;
  --bk-on-neutral: #fffdf9;

  --bk-radius-scale: 1.6;
  --bk-radius-field: 14px 20px 16px 22px;
  --bk-radius-card: 32px 12px 28px 14px;
  --bk-radius-overlay: 28px 14px 30px 16px;
  --bk-radius-pill: 9999px;

  --bk-shadow-color: 32 30% 30%;
  --bk-shadow-strength: 0.9;

  --bk-btn-radius: 18px 24px 20px 26px;
  --bk-btn-weight: 600;
  --bk-btn-shadow: 0 2px 6px rgb(90 75 45 / 0.08);
  --bk-btn-shadow-hover: 0 6px 16px rgb(90 75 45 / 0.14);
  --bk-btn-shadow-active: 0 1px 3px rgb(90 75 45 / 0.1);
  --bk-hover-transform: translateY(-2px) rotate(-0.4deg);
  --bk-press-transform: translateY(0) rotate(0deg) scale(0.99);

  --bk-field-bg: #fffdf9;
  --bk-field-border: #d9cfbc;
  --bk-field-border-hover: #6b8f5e;
  --bk-field-shadow: none;
  --bk-field-placeholder: #a89f8c;
  --bk-card-shadow: 0 4px 18px rgb(90 75 45 / 0.07);
  --bk-card-shadow-hover: 0 10px 30px rgb(90 75 45 / 0.12);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #fffdf9;
  --bk-overlay-shadow: 0 24px 60px rgb(60 48 26 / 0.22);
  --bk-overlay-bg: rgb(47 44 37 / 0.4);
  --bk-code-bg: #f2ede2;
  --bk-code-border: #e0d7c7;
  --bk-code-radius: 12px 6px 12px 6px;
  --bk-tooltip-bg: #2f2c25;
  --bk-tooltip-radius: 10px 4px 10px 4px;
  --bk-selection-bg: rgb(107 143 94 / 0.28);
  --bk-scrollbar-thumb: #d3c8b4;
  --bk-divider-color: #e0d7c7;
  --bk-body-image: radial-gradient(50rem 40rem at 85% -10%, rgb(107 143 94 / 0.09), transparent 60%),
    radial-gradient(40rem 30rem at 0% 100%, rgb(196 122 74 / 0.08), transparent 60%);
  --bk-body-attachment: fixed;
}

[data-bk-style="organic"][data-bk-theme="dark"] {
  --bk-bg: #1d1c18;
  --bk-bg-subtle: #23221d;
  --bk-surface: #262520;
  --bk-surface-2: #2e2d26;
  --bk-surface-3: #38362d;
  --bk-text: #f0ebe0;
  --bk-text-muted: #b9b2a2;
  --bk-text-subtle: #8b8474;
  --bk-border: #3c3a31;
  --bk-border-muted: #2e2d26;
  --bk-border-strong: #565345;
  --bk-primary: #9bc08c;
  --bk-primary-soft: #24301f;
  --bk-primary-border: #45573c;
  --bk-on-primary: #16210f;
  --bk-secondary: #e0a173;
  --bk-secondary-soft: #33251a;
  --bk-field-bg: #262520;
  --bk-field-border: #45433a;
  --bk-code-bg: #23221d;
  --bk-code-border: #3c3a31;
  --bk-overlay-surface: #262520;
  --bk-tooltip-bg: #f0ebe0;
  --bk-tooltip-fg: #1d1c18;
  --bk-body-image: radial-gradient(50rem 40rem at 85% -10%, rgb(107 143 94 / 0.1), transparent 60%);
}

/* Rotate the asymmetry so no two neighbours share a silhouette. */
[data-bk-style="organic"] .bk-card:nth-child(2n) { border-radius: 12px 32px 14px 28px; }
[data-bk-style="organic"] .bk-card:nth-child(3n) { border-radius: 28px 28px 12px 30px; }
[data-bk-style="organic"] .bk-btn:nth-of-type(2n) { border-radius: 24px 18px 26px 20px; }
[data-bk-style="organic"] .bk-badge,
[data-bk-style="organic"] .bk-chip { border-radius: 9999px; }
[data-bk-style="organic"] .bk-avatar { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; }
[data-bk-style="organic"] .bk-check { border-radius: 7px 5px 8px 4px; }
[data-bk-style="organic"] .bk-panel { border-radius: 20px 10px 22px 12px; }
[data-bk-style="organic"] .bk-alert { border-radius: 18px 8px 20px 10px; }
[data-bk-style="organic"] .bk-tab { border-radius: 12px 12px 0 0; }
[data-bk-style="organic"] .bk-progress { border-radius: 9999px; }
[data-bk-style="organic"] .bk-title { font-style: italic; }
[data-bk-style="organic"] .bk-table-wrap { border-radius: 24px 12px 24px 12px; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="organic"] {
  --bk-danger: #b1533f;
  --bk-danger-on-soft: #9e4a38;
  --bk-danger-soft: #f6e3de;
  --bk-danger-text: #b1533f;
  --bk-field-placeholder: #998e78;
  --bk-info: #4f7d8c;
  --bk-info-on-soft: #446c78;
  --bk-info-soft: #e3edf0;
  --bk-info-text: #497482;
  --bk-neutral-on-soft: #5e594e;
  --bk-neutral-text: #5e594e;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-primary: #231700;
  --bk-on-secondary: #2d1e00;
  --bk-on-success: #0f0f0f;
  --bk-on-warning: #292929;
  --bk-primary: #6b8f5e;
  --bk-primary-on-soft: #54704a;
  --bk-primary-soft: #e7efe3;
  --bk-primary-text: #59764e;
  --bk-secondary: #c47a4a;
  --bk-secondary-on-soft: #965931;
  --bk-secondary-soft: #f7e9dd;
  --bk-secondary-text: #9d5d33;
  --bk-success: #5c8a52;
  --bk-success-on-soft: #4b7043;
  --bk-success-soft: #e6efe3;
  --bk-success-text: #4f7747;
  --bk-text-subtle: #827c6c;
  --bk-warning: #c08a2e;
  --bk-warning-on-soft: #866120;
  --bk-warning-soft: #f8eed9;
  --bk-warning-text: #8f6722;
}
[data-bk-style="organic"][data-bk-theme="dark"] {
  --bk-danger: #b1533f;
  --bk-danger-on-soft: #9e4a38;
  --bk-danger-soft: #f6e3de;
  --bk-danger-text: #ca7a69;
  --bk-field-placeholder: #a89f8c;
  --bk-info: #51808f;
  --bk-info-on-soft: #446c78;
  --bk-info-soft: #e3edf0;
  --bk-info-text: #6296a7;
  --bk-neutral-on-soft: #5e594e;
  --bk-neutral-text: #969081;
  --bk-on-danger: #fdf7f7;
  --bk-on-info: #000000;
  --bk-on-primary: #16210f;
  --bk-on-secondary: #563900;
  --bk-on-success: #04180d;
  --bk-on-warning: #1f1503;
  --bk-primary: #9bc08c;
  --bk-primary-on-soft: #9bc08c;
  --bk-primary-soft: #24301f;
  --bk-primary-text: #9bc08c;
  --bk-secondary: #e0a173;
  --bk-secondary-on-soft: #e0a173;
  --bk-secondary-soft: #33251a;
  --bk-secondary-text: #e0a173;
  --bk-success: #5c8a52;
  --bk-success-on-soft: #4b7043;
  --bk-success-soft: #e6efe3;
  --bk-success-text: #699d5d;
  --bk-text-subtle: #8b8474;
  --bk-warning: #c08a2e;
  --bk-warning-on-soft: #866120;
  --bk-warning-soft: #f8eed9;
  --bk-warning-text: #c08a2e;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "organic" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="organic"][data-bk-theme="auto"] {
  --bk-bg: #1d1c18;
  --bk-bg-subtle: #23221d;
  --bk-surface: #262520;
  --bk-surface-2: #2e2d26;
  --bk-surface-3: #38362d;
  --bk-text: #f0ebe0;
  --bk-text-muted: #b9b2a2;
  --bk-text-subtle: #8b8474;
  --bk-border: #3c3a31;
  --bk-border-muted: #2e2d26;
  --bk-border-strong: #565345;
  --bk-primary: #9bc08c;
  --bk-primary-soft: #24301f;
  --bk-primary-border: #45573c;
  --bk-on-primary: #16210f;
  --bk-secondary: #e0a173;
  --bk-secondary-soft: #33251a;
  --bk-field-bg: #262520;
  --bk-field-border: #45433a;
  --bk-code-bg: #23221d;
  --bk-code-border: #3c3a31;
  --bk-overlay-surface: #262520;
  --bk-tooltip-bg: #f0ebe0;
  --bk-tooltip-fg: #1d1c18;
  --bk-body-image: radial-gradient(50rem 40rem at 85% -10%, rgb(107 143 94 / 0.1), transparent 60%);


  --bk-danger: #b1533f;
  --bk-danger-on-soft: #9e4a38;
  --bk-danger-soft: #f6e3de;
  --bk-danger-text: #ca7a69;
  --bk-field-placeholder: #a89f8c;
  --bk-info: #51808f;
  --bk-info-on-soft: #446c78;
  --bk-info-soft: #e3edf0;
  --bk-info-text: #6296a7;
  --bk-neutral-on-soft: #5e594e;
  --bk-neutral-text: #969081;
  --bk-on-danger: #fdf7f7;
  --bk-on-info: #000000;
  --bk-on-primary: #16210f;
  --bk-on-secondary: #563900;
  --bk-on-success: #04180d;
  --bk-on-warning: #1f1503;
  --bk-primary: #9bc08c;
  --bk-primary-on-soft: #9bc08c;
  --bk-primary-soft: #24301f;
  --bk-primary-text: #9bc08c;
  --bk-secondary: #e0a173;
  --bk-secondary-on-soft: #e0a173;
  --bk-secondary-soft: #33251a;
  --bk-secondary-text: #e0a173;
  --bk-success: #5c8a52;
  --bk-success-on-soft: #4b7043;
  --bk-success-soft: #e6efe3;
  --bk-success-text: #699d5d;
  --bk-text-subtle: #8b8474;
  --bk-warning: #c08a2e;
  --bk-warning-on-soft: #866120;
  --bk-warning-soft: #f8eed9;
  --bk-warning-text: #c08a2e;
}
}


/* =============================================================================
   SKIN — origami · Folded paper
   Every surface is a sheet with a crease in it: one corner folded back, a soft
   shadow along the fold line, and the pale second tone of paper seen from
   behind. Angular where the others are round.
   ========================================================================== */

[data-bk-style="origami"] {
  --bk-font-sans: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 700;
  --bk-heading-tracking: -0.025em;
  --bk-label-tracking: 0.06em;

  --_fold: 22px;

  --bk-bg: #f4f2ee;
  --bk-bg-subtle: #ecebe6;
  --bk-bg-muted: #e1dfd9;
  --bk-surface: #ffffff;
  --bk-surface-2: #f2f1ec;
  --bk-surface-3: #e4e2db;
  --bk-surface-inverted: #22242a;

  --bk-text: #1f2228;
  --bk-text-muted: #545961;
  --bk-text-subtle: #868b93;
  --bk-text-inverted: #ffffff;

  --bk-border: #d9d7d0;
  --bk-border-muted: #eae8e2;
  --bk-border-strong: #a9a69d;

  --bk-primary: #d1543f;
  --bk-primary-hover: #ba4735;
  --bk-primary-active: #a03b2c;
  --bk-primary-soft: #fae3de;
  --bk-primary-border: #eeb0a3;
  --bk-on-primary: #ffffff;
  --bk-secondary: #2f6f8f;
  --bk-secondary-hover: #275d78;
  --bk-secondary-soft: #ddecf3;
  --bk-secondary-border: #9fc9dc;
  --bk-on-secondary: #ffffff;
  --bk-success: #3a7a4e;
  --bk-success-soft: #ddeee2;
  --bk-success-border: #a2ceb1;
  --bk-warning: #97690f;
  --bk-warning-soft: #f7ecd3;
  --bk-warning-border: #ddc286;
  --bk-danger: #b93a2c;
  --bk-danger-soft: #fae0dc;
  --bk-danger-border: #eda99e;
  --bk-info: #2f6f8f;
  --bk-info-soft: #ddecf3;
  --bk-info-border: #9fc9dc;
  --bk-neutral: #1f2228;
  --bk-neutral-soft: #eeece6;
  --bk-neutral-border: #d9d7d0;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-color: 30 8% 30%;
  --bk-shadow-strength: 0.9;

  --bk-ring: #d1543f;
  --bk-ring-width: 2px;
  --bk-ring-offset: 2px;

  --bk-btn-border-width: 1px;
  --bk-btn-weight: 700;
  --bk-btn-shadow: 0 1px 2px rgb(40 38 34 / 0.1);
  --bk-btn-shadow-hover: 0 4px 12px rgb(40 38 34 / 0.16);
  --bk-btn-shadow-active: none;
  --bk-press-transform: translateY(1px);
  --bk-hover-transform: translateY(-1px);

  --bk-field-bg: #ffffff;
  --bk-field-border: #c2bfb6;
  --bk-field-border-hover: #d1543f;
  --bk-field-shadow: none;
  --bk-field-placeholder: #a5a29a;
  --bk-card-shadow: 0 2px 10px rgb(40 38 34 / 0.09);
  --bk-card-shadow-hover: 0 8px 26px rgb(40 38 34 / 0.14);
  --bk-card-pad: var(--bk-space-5);
  --bk-overlay-surface: #ffffff;
  --bk-overlay-shadow: 0 24px 60px rgb(30 28 24 / 0.25);
  --bk-overlay-bg: rgb(31 34 40 / 0.35);
  --bk-code-bg: #f2f1ec;
  --bk-code-border: #d9d7d0;
  --bk-tooltip-bg: #1f2228;
  --bk-selection-bg: rgb(209 84 63 / 0.22);
  --bk-scrollbar-thumb: #cfccc4;
  --bk-divider-color: #d9d7d0;

  --bk-body-image:
    linear-gradient(135deg, rgb(255 255 255 / 0.7) 0%, transparent 42%),
    linear-gradient(315deg, rgb(0 0 0 / 0.03) 0%, transparent 40%);
  --bk-body-attachment: fixed;
}

[data-bk-style="origami"][data-bk-theme="dark"] {
  --bk-bg: #191b20;
  --bk-bg-subtle: #1e2026;
  --bk-surface: #22252c;
  --bk-surface-2: #282b33;
  --bk-surface-3: #31353e;
  --bk-text: #eceef2;
  --bk-text-muted: #adb2bc;
  --bk-text-subtle: #7f858f;
  --bk-text-inverted: #191b20;
  --bk-border: #333741;
  --bk-border-muted: #262930;
  --bk-border-strong: #5a606c;
  --bk-primary: #ef7b66;
  --bk-primary-hover: #f28f7d;
  --bk-primary-soft: #38201c;
  --bk-primary-border: #6d3a30;
  --bk-on-primary: #1e0a06;
  --bk-secondary: #6fb0cf;
  --bk-secondary-soft: #15272f;
  --bk-secondary-border: #2c505f;
  --bk-on-secondary: #05161d;
  --bk-success: #6cbb84; --bk-success-soft: #16281c; --bk-success-border: #2d5238;
  --bk-warning: #d9ad55; --bk-warning-soft: #2c2512; --bk-warning-border: #574722;
  --bk-danger: #ec7b6c; --bk-danger-soft: #331a17; --bk-danger-border: #63322c;
  --bk-info: #6fb0cf; --bk-info-soft: #15272f; --bk-info-border: #2c505f;
  --bk-neutral: #eceef2; --bk-neutral-soft: #282b33; --bk-neutral-border: #333741;
  --bk-on-neutral: #191b20;
  --bk-field-bg: #1c1f25;
  --bk-field-border: #3d424c;
  --bk-code-bg: #1e2026;
  --bk-code-border: #333741;
  --bk-overlay-surface: #22252c;
  --bk-tooltip-bg: #eceef2;
  --bk-tooltip-fg: #191b20;
  --bk-divider-color: #333741;
  --bk-body-image:
    linear-gradient(135deg, rgb(255 255 255 / 0.04) 0%, transparent 42%),
    linear-gradient(315deg, rgb(0 0 0 / 0.25) 0%, transparent 40%);
}

/* The fold: a clipped corner, with the underside of the sheet showing. */
[data-bk-style="origami"] .bk-card,
[data-bk-style="origami"] .bk-panel,
[data-bk-style="origami"] .bk-alert,
[data-bk-style="origami"] .bk-modal {
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--_fold)) 0, 100% var(--_fold), 100% 100%, 0 100%);
}
[data-bk-style="origami"] .bk-card::after,
[data-bk-style="origami"] .bk-panel::after,
[data-bk-style="origami"] .bk-alert::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--_fold);
  block-size: var(--_fold);
  background: linear-gradient(225deg, var(--bk-surface-3) 50%, transparent 50%);
  filter: brightness(0.94);
  pointer-events: none;
}
[data-bk-style="origami"] .bk-btn:not(.bk-btn-link) {
  --_fold: 10px;
  clip-path: polygon(0 0, calc(100% - var(--_fold)) 0, 100% var(--_fold), 100% 100%, 0 100%);
}
[data-bk-style="origami"] .bk-modal { --_fold: 34px; }
[data-bk-style="origami"] .bk-badge {
  --_fold: 7px;
  clip-path: polygon(0 0, calc(100% - var(--_fold)) 0, 100% var(--_fold), 100% 100%, 0 100%);
}
[data-bk-style="origami"] .bk-avatar { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%); }
[data-bk-style="origami"] .bk-navbar { border-block-end: 1px solid var(--bk-border); background: var(--bk-surface); }
[data-bk-style="origami"] .bk-table thead th { background: var(--bk-surface-2); border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="origami"] .bk-section-head::after {
  content: "";
  display: block;
  inline-size: 3rem;
  block-size: 0;
  margin-block-start: var(--bk-space-4);
  border-block-start: 2px solid var(--bk-primary);
  transform: skewX(-38deg);
  transform-origin: left;
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="origami"] {
  --bk-field-placeholder: #949187;
  --bk-on-primary: #0d0d0d;
  --bk-primary: #d1543f;
  --bk-primary-on-soft: #b23e2b;
  --bk-primary-soft: #fae3de;
  --bk-primary-text: #bb412d;
  --bk-success-on-soft: #37734a;
  --bk-success-text: #3a7a4e;
  --bk-text-subtle: #797e87;
  --bk-warning-on-soft: #895f0e;
  --bk-warning-text: #8e630e;
}
[data-bk-style="origami"][data-bk-theme="dark"] {
  --bk-field-placeholder: #a5a29a;
  --bk-on-primary: #1e0a06;
  --bk-primary: #ef7b66;
  --bk-primary-on-soft: #ef7b66;
  --bk-primary-soft: #38201c;
  --bk-primary-text: #ef7b66;
  --bk-success-on-soft: #6cbb84;
  --bk-success-text: #6cbb84;
  --bk-text-subtle: #7f858f;
  --bk-warning-on-soft: #d9ad55;
  --bk-warning-text: #d9ad55;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "origami" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="origami"][data-bk-theme="auto"] {
  --bk-bg: #191b20;
  --bk-bg-subtle: #1e2026;
  --bk-surface: #22252c;
  --bk-surface-2: #282b33;
  --bk-surface-3: #31353e;
  --bk-text: #eceef2;
  --bk-text-muted: #adb2bc;
  --bk-text-subtle: #7f858f;
  --bk-text-inverted: #191b20;
  --bk-border: #333741;
  --bk-border-muted: #262930;
  --bk-border-strong: #5a606c;
  --bk-primary: #ef7b66;
  --bk-primary-hover: #f28f7d;
  --bk-primary-soft: #38201c;
  --bk-primary-border: #6d3a30;
  --bk-on-primary: #1e0a06;
  --bk-secondary: #6fb0cf;
  --bk-secondary-soft: #15272f;
  --bk-secondary-border: #2c505f;
  --bk-on-secondary: #05161d;
  --bk-success: #6cbb84; --bk-success-soft: #16281c; --bk-success-border: #2d5238;
  --bk-warning: #d9ad55; --bk-warning-soft: #2c2512; --bk-warning-border: #574722;
  --bk-danger: #ec7b6c; --bk-danger-soft: #331a17; --bk-danger-border: #63322c;
  --bk-info: #6fb0cf; --bk-info-soft: #15272f; --bk-info-border: #2c505f;
  --bk-neutral: #eceef2; --bk-neutral-soft: #282b33; --bk-neutral-border: #333741;
  --bk-on-neutral: #191b20;
  --bk-field-bg: #1c1f25;
  --bk-field-border: #3d424c;
  --bk-code-bg: #1e2026;
  --bk-code-border: #333741;
  --bk-overlay-surface: #22252c;
  --bk-tooltip-bg: #eceef2;
  --bk-tooltip-fg: #191b20;
  --bk-divider-color: #333741;
  --bk-body-image:
    linear-gradient(135deg, rgb(255 255 255 / 0.04) 0%, transparent 42%),
    linear-gradient(315deg, rgb(0 0 0 / 0.25) 0%, transparent 40%);


  --bk-field-placeholder: #a5a29a;
  --bk-on-primary: #1e0a06;
  --bk-primary: #ef7b66;
  --bk-primary-on-soft: #ef7b66;
  --bk-primary-soft: #38201c;
  --bk-primary-text: #ef7b66;
  --bk-success-on-soft: #6cbb84;
  --bk-success-text: #6cbb84;
  --bk-text-subtle: #7f858f;
  --bk-warning-on-soft: #d9ad55;
  --bk-warning-text: #d9ad55;
}
}


/* =============================================================================
   SKIN — paper · Newsprint / editorial
   Serif body copy, ink-on-newsprint colours, rules instead of boxes, subtle
   paper grain and letterpress text.
   ========================================================================== */

[data-bk-style="paper"] {
  --bk-font-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --bk-font-sans: "Source Serif 4", Georgia, serif;
  --bk-font-body: var(--bk-font-serif);
  --bk-font-display: "Playfair Display", "Bodoni MT", Didot, Georgia, serif;
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 700;
  --bk-heading-tracking: -0.012em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.14em;
  --bk-leading-relaxed: 1.72;
  --bk-prose-width: 66ch;

  --bk-bg: #f7f4ec;
  --bk-bg-subtle: #f2eee3;
  --bk-bg-muted: #ebe6d8;
  --bk-surface: #fdfbf5;
  --bk-surface-2: #f4f0e5;
  --bk-surface-3: #e9e3d4;
  --bk-surface-inverted: #22201b;

  --bk-text: #23211c;
  --bk-text-muted: #55514a;
  --bk-text-subtle: #857f73;
  --bk-text-inverted: #f7f4ec;

  --bk-border: #d8d2c2;
  --bk-border-muted: #e6e1d3;
  --bk-border-strong: #23211c;
  --bk-border-width: 1px;

  --bk-primary: #8b2f1e;
  --bk-primary-hover: #77281a;
  --bk-primary-active: #632116;
  --bk-primary-soft: #f3e5e0;
  --bk-primary-border: #c9a196;
  --bk-on-primary: #fdfbf5;
  --bk-secondary: #2f5d50;
  --bk-secondary-hover: #275045;
  --bk-secondary-soft: #e3ece8;
  --bk-secondary-border: #a5c0b7;
  --bk-on-secondary: #fdfbf5;
  --bk-success: #3f6b34;
  --bk-success-soft: #e6eee2;
  --bk-success-border: #adc4a4;
  --bk-warning: #9a6a12;
  --bk-warning-soft: #f5ecdb;
  --bk-warning-border: #d5bc8b;
  --bk-danger: #99271d;
  --bk-danger-soft: #f5e3e0;
  --bk-danger-border: #cf9f97;
  --bk-info: #2a5378;
  --bk-info-soft: #e2e9f0;
  --bk-info-border: #9db4c9;
  --bk-neutral: #23211c;
  --bk-neutral-soft: #eae5d8;
  --bk-neutral-border: #d8d2c2;
  --bk-on-neutral: #fdfbf5;

  --bk-radius-scale: 0.35;
  --bk-radius-field: 2px;
  --bk-radius-card: 3px;
  --bk-radius-overlay: 4px;
  --bk-radius-pill: 9999px;

  --bk-shadow-color: 35 30% 20%;
  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: 0 1px 2px rgb(60 50 30 / 0.08);
  --bk-shadow-lg: 0 4px 14px rgb(60 50 30 / 0.12);
  --bk-shadow-xl: 0 12px 34px rgb(60 50 30 / 0.16);
  --bk-shadow-2xl: 0 24px 60px rgb(60 50 30 / 0.2);

  --bk-body-image:
    repeating-linear-gradient(0deg, rgb(120 100 60 / 0.014) 0 1px, transparent 1px 2px),
    radial-gradient(circle at 20% 30%, rgb(140 120 80 / 0.03), transparent 45%),
    radial-gradient(circle at 78% 68%, rgb(140 120 80 / 0.035), transparent 45%);
  --bk-body-attachment: fixed;

  --bk-btn-weight: 600;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.1em;
  --bk-press-transform: translateY(1px);
  --bk-hover-transform: none;

  --bk-field-bg: #fdfbf5;
  --bk-field-border: #b8b0a0;
  --bk-field-border-hover: #23211c;
  --bk-field-shadow: none;
  --bk-field-placeholder: #a49c8d;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: var(--bk-shadow-md);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #fdfbf5;
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(35 33 28 / 0.4);
  --bk-code-bg: #f0ebdd;
  --bk-code-border: #d8d2c2;
  --bk-tooltip-bg: #23211c;
  --bk-selection-bg: rgb(139 47 30 / 0.22);
  --bk-scrollbar-thumb: #c6bfae;
  --bk-divider-color: #23211c;
}

[data-bk-style="paper"][data-bk-theme="dark"] {
  --bk-bg: #16150f;
  --bk-bg-subtle: #1c1a14;
  --bk-surface: #1c1a14;
  --bk-surface-2: #23211a;
  --bk-surface-3: #2d2a21;
  --bk-text: #ece5d4;
  --bk-text-muted: #b5ad9a;
  --bk-text-subtle: #877f6e;
  --bk-text-inverted: #16150f;
  --bk-border: #3a3629;
  --bk-border-muted: #2a2720;
  --bk-border-strong: #ece5d4;
  --bk-primary: #d97757;
  --bk-primary-hover: #e08d70;
  --bk-primary-soft: #2e1d16;
  --bk-primary-border: #6b4132;
  --bk-on-primary: #16150f;
  --bk-neutral: #ece5d4;
  --bk-neutral-soft: #23211a;
  --bk-on-neutral: #16150f;
  --bk-field-bg: #1c1a14;
  --bk-field-border: #4a4638;
  --bk-code-bg: #23211a;
  --bk-code-border: #3a3629;
  --bk-tooltip-bg: #ece5d4;
  --bk-tooltip-fg: #16150f;
  --bk-divider-color: #ece5d4;
  --bk-body-image: repeating-linear-gradient(0deg, rgb(255 240 200 / 0.008) 0 1px, transparent 1px 2px);
}

[data-bk-style="paper"] .bk-display,
[data-bk-style="paper"] .bk-title { text-shadow: 0 1px 0 rgb(255 255 255 / 0.35); }
[data-bk-style="paper"][data-bk-theme="dark"] .bk-display,
[data-bk-style="paper"][data-bk-theme="dark"] .bk-title { text-shadow: none; }
[data-bk-style="paper"] .bk-card { border-inline: 0; border-block-start: 2px solid var(--bk-border-strong); border-block-end: 1px solid var(--bk-border); }
[data-bk-style="paper"] .bk-navbar { border-block-end: 2px solid var(--bk-border-strong); background: transparent; }
[data-bk-style="paper"] .bk-table thead th {
  background: transparent;
  border-block-end: 2px solid var(--bk-border-strong);
  font-family: var(--bk-font-sans);
}
[data-bk-style="paper"] .bk-eyebrow { color: var(--bk-primary); }
[data-bk-style="paper"] .bk-prose p:first-of-type::first-letter {
  float: inline-start;
  font-family: var(--bk-font-display);
  font-size: 3.6em;
  line-height: 0.82;
  padding-inline-end: 0.08em;
  padding-block-start: 0.06em;
  color: var(--bk-primary);
}
[data-bk-style="paper"] .bk-blockquote { font-family: var(--bk-font-display); font-size: var(--bk-text-lg); }
[data-bk-style="paper"] .bk-divider-text::before,
[data-bk-style="paper"] .bk-divider-text::after { border-color: var(--bk-border-strong); }
[data-bk-style="paper"] .bk-badge { font-family: var(--bk-font-sans); letter-spacing: 0.08em; text-transform: uppercase; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="paper"] {
  --bk-danger: #99271d;
  --bk-danger-on-soft: #99271d;
  --bk-danger-soft: #f5e3e0;
  --bk-danger-text: #99271d;
  --bk-field-placeholder: #968d7c;
  --bk-info: #2a5378;
  --bk-info-on-soft: #2a5378;
  --bk-info-soft: #e2e9f0;
  --bk-info-text: #2a5378;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-secondary-on-soft: #2f5d50;
  --bk-secondary-text: #2f5d50;
  --bk-success: #3f6b34;
  --bk-success-on-soft: #3f6b34;
  --bk-success-soft: #e6eee2;
  --bk-success-text: #3f6b34;
  --bk-warning: #9a6a12;
  --bk-warning-on-soft: #8c6110;
  --bk-warning-soft: #f5ecdb;
  --bk-warning-text: #916411;
}
[data-bk-style="paper"][data-bk-theme="dark"] {
  --bk-danger: #99271d;
  --bk-danger-on-soft: #99271d;
  --bk-danger-soft: #f5e3e0;
  --bk-danger-text: #de5d52;
  --bk-field-placeholder: #a49c8d;
  --bk-info: #2a5378;
  --bk-info-on-soft: #2a5378;
  --bk-info-soft: #e2e9f0;
  --bk-info-text: #4d8ac1;
  --bk-on-danger: #f1bbc1;
  --bk-on-info: #9cccf5;
  --bk-on-success: #a5f0c7;
  --bk-on-warning: #fffefd;
  --bk-secondary-on-soft: #2f5d50;
  --bk-secondary-text: #4a937f;
  --bk-success: #3f6b34;
  --bk-success-on-soft: #3f6b34;
  --bk-success-soft: #e6eee2;
  --bk-success-text: #579448;
  --bk-warning: #9a6a12;
  --bk-warning-on-soft: #8c6110;
  --bk-warning-soft: #f5ecdb;
  --bk-warning-text: #b57d15;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "paper" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="paper"][data-bk-theme="auto"] {
  --bk-bg: #16150f;
  --bk-bg-subtle: #1c1a14;
  --bk-surface: #1c1a14;
  --bk-surface-2: #23211a;
  --bk-surface-3: #2d2a21;
  --bk-text: #ece5d4;
  --bk-text-muted: #b5ad9a;
  --bk-text-subtle: #877f6e;
  --bk-text-inverted: #16150f;
  --bk-border: #3a3629;
  --bk-border-muted: #2a2720;
  --bk-border-strong: #ece5d4;
  --bk-primary: #d97757;
  --bk-primary-hover: #e08d70;
  --bk-primary-soft: #2e1d16;
  --bk-primary-border: #6b4132;
  --bk-on-primary: #16150f;
  --bk-neutral: #ece5d4;
  --bk-neutral-soft: #23211a;
  --bk-on-neutral: #16150f;
  --bk-field-bg: #1c1a14;
  --bk-field-border: #4a4638;
  --bk-code-bg: #23211a;
  --bk-code-border: #3a3629;
  --bk-tooltip-bg: #ece5d4;
  --bk-tooltip-fg: #16150f;
  --bk-divider-color: #ece5d4;
  --bk-body-image: repeating-linear-gradient(0deg, rgb(255 240 200 / 0.008) 0 1px, transparent 1px 2px);


  --bk-danger: #99271d;
  --bk-danger-on-soft: #99271d;
  --bk-danger-soft: #f5e3e0;
  --bk-danger-text: #de5d52;
  --bk-field-placeholder: #a49c8d;
  --bk-info: #2a5378;
  --bk-info-on-soft: #2a5378;
  --bk-info-soft: #e2e9f0;
  --bk-info-text: #4d8ac1;
  --bk-on-danger: #f1bbc1;
  --bk-on-info: #9cccf5;
  --bk-on-success: #a5f0c7;
  --bk-on-warning: #fffefd;
  --bk-secondary-on-soft: #2f5d50;
  --bk-secondary-text: #4a937f;
  --bk-success: #3f6b34;
  --bk-success-on-soft: #3f6b34;
  --bk-success-soft: #e6eee2;
  --bk-success-text: #579448;
  --bk-warning: #9a6a12;
  --bk-warning-on-soft: #8c6110;
  --bk-warning-soft: #f5ecdb;
  --bk-warning-text: #b57d15;
}
}


/* =============================================================================
   SKIN — pixel · 8-bit
   Everything snaps to a 4px grid, borders are drawn with hard box-shadow steps
   so they stay crisp, and nothing is ever anti-aliased on purpose.
   ========================================================================== */

[data-bk-style="pixel"] {
  --bk-font-sans: "Press Start 2P", "Silkscreen", ui-monospace, "Courier New", monospace;
  --bk-font-mono: var(--bk-font-sans);
  --bk-font-display: var(--bk-font-sans);
  --bk-font-body: var(--bk-font-sans);
  --bk-heading-weight: 400;
  --bk-weight-normal: 400;
  --bk-weight-medium: 400;
  --bk-weight-semibold: 400;
  --bk-weight-bold: 400;
  --bk-weight-black: 400;
  --bk-heading-tracking: 0;
  --bk-label-tracking: 0;

  --bk-text-2xs: 0.5rem;
  --bk-text-xs: 0.5625rem;
  --bk-text-sm: 0.625rem;
  --bk-text-md: 0.6875rem;
  --bk-text-base: 0.75rem;
  --bk-text-lg: 0.875rem;
  --bk-text-xl: 1rem;
  --bk-text-2xl: 1.25rem;
  --bk-text-3xl: 1.5rem;
  --bk-text-4xl: 2rem;
  --bk-text-5xl: 2.5rem;
  --bk-leading-normal: 1.8;
  --bk-leading-snug: 1.6;

  --bk-bg: #1a1c2c;
  --bk-bg-subtle: #232640;
  --bk-bg-muted: #2c3055;
  --bk-surface: #232640;
  --bk-surface-2: #2c3055;
  --bk-surface-3: #3b4070;
  --bk-surface-inverted: #f4f4f4;

  --bk-text: #f4f4f4;
  --bk-text-muted: #a7a9c4;
  --bk-text-subtle: #6e7196;
  --bk-text-inverted: #1a1c2c;

  --bk-border: #f4f4f4;
  --bk-border-muted: #4a4f85;
  --bk-border-strong: #f4f4f4;
  --bk-border-width: 3px;

  --bk-primary: #41a6f6;
  --bk-primary-hover: #5fb6f8;
  --bk-primary-active: #2f8ad4;
  --bk-primary-soft: #1c3a5c;
  --bk-primary-border: #f4f4f4;
  --bk-on-primary: #1a1c2c;
  --bk-secondary: #38b764;
  --bk-secondary-hover: #4ac877;
  --bk-secondary-soft: #17381f;
  --bk-secondary-border: #f4f4f4;
  --bk-on-secondary: #1a1c2c;
  --bk-success: #38b764;
  --bk-success-soft: #17381f;
  --bk-success-border: #f4f4f4;
  --bk-on-success: #1a1c2c;
  --bk-warning: #ffcd75;
  --bk-warning-soft: #46351a;
  --bk-warning-border: #f4f4f4;
  --bk-on-warning: #1a1c2c;
  --bk-danger: #ef476f;
  --bk-danger-soft: #47172a;
  --bk-danger-border: #f4f4f4;
  --bk-on-danger: #1a1c2c;
  --bk-info: #73eff7;
  --bk-info-soft: #17414a;
  --bk-info-border: #f4f4f4;
  --bk-on-info: #1a1c2c;
  --bk-neutral: #94b0c2;
  --bk-neutral-soft: #2c3055;
  --bk-neutral-border: #f4f4f4;
  --bk-on-neutral: #1a1c2c;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-none: 0 0 #0000;
  --bk-shadow-xs: 3px 3px 0 0 #0d0e18;
  --bk-shadow-sm: 3px 3px 0 0 #0d0e18;
  --bk-shadow-md: 6px 6px 0 0 #0d0e18;
  --bk-shadow-lg: 9px 9px 0 0 #0d0e18;
  --bk-shadow-xl: 12px 12px 0 0 #0d0e18;
  --bk-shadow-2xl: 15px 15px 0 0 #0d0e18;
  --bk-shadow-inner: inset 3px 3px 0 0 #0d0e18;

  --bk-ring: #ffcd75;
  --bk-ring-width: 3px;
  --bk-ring-offset: 3px;

  --bk-btn-border-width: 3px;
  --bk-btn-shadow: 4px 4px 0 0 #0d0e18;
  --bk-btn-shadow-hover: 4px 4px 0 0 #0d0e18;
  --bk-btn-shadow-active: 0 0 0 0 #0d0e18;
  --bk-press-transform: translate(4px, 4px);
  --bk-hover-transform: none;

  --bk-field-bg: #1a1c2c;
  --bk-field-border: #f4f4f4;
  --bk-field-border-width: 3px;
  --bk-field-shadow: inset 3px 3px 0 0 #0d0e18;
  --bk-field-shadow-focus: inset 3px 3px 0 0 #0d0e18;
  --bk-field-placeholder: #6e7196;

  --bk-card-border-width: 3px;
  --bk-card-shadow: 6px 6px 0 0 #0d0e18;
  --bk-card-shadow-hover: 6px 6px 0 0 #0d0e18;
  --bk-card-pad: var(--bk-space-5);
  --bk-overlay-surface: #232640;
  --bk-overlay-border: #f4f4f4;
  --bk-overlay-shadow: 8px 8px 0 0 #0d0e18;
  --bk-overlay-bg: rgb(13 14 24 / 0.8);
  --bk-code-bg: #1a1c2c;
  --bk-code-border: #f4f4f4;
  --bk-tooltip-bg: #f4f4f4;
  --bk-tooltip-fg: #1a1c2c;
  --bk-selection-bg: #ffcd75;
  --bk-selection-fg: #1a1c2c;
  --bk-scrollbar-thumb: #f4f4f4;
  --bk-divider-color: #f4f4f4;
  --bk-divider-width: 3px;
  --bk-transition: none;
  color-scheme: dark;
}

[data-bk-style="pixel"][data-bk-theme="light"] {
  --bk-bg: #f4f4f4;
  --bk-bg-subtle: #e4e4e4;
  --bk-surface: #ffffff;
  --bk-surface-2: #e9e9e9;
  --bk-surface-3: #d6d6d6;
  --bk-text: #1a1c2c;
  --bk-text-muted: #4a4f6b;
  --bk-text-subtle: #7c81a0;
  --bk-text-inverted: #f4f4f4;
  --bk-border: #1a1c2c;
  --bk-border-muted: #b8bacc;
  --bk-border-strong: #1a1c2c;
  --bk-shadow-xs: 3px 3px 0 0 #1a1c2c;
  --bk-shadow-sm: 3px 3px 0 0 #1a1c2c;
  --bk-shadow-md: 6px 6px 0 0 #1a1c2c;
  --bk-shadow-lg: 9px 9px 0 0 #1a1c2c;
  --bk-shadow-xl: 12px 12px 0 0 #1a1c2c;
  --bk-btn-shadow: 4px 4px 0 0 #1a1c2c;
  --bk-btn-shadow-hover: 4px 4px 0 0 #1a1c2c;
  --bk-btn-shadow-active: 0 0 0 0 #1a1c2c;
  --bk-field-bg: #ffffff;
  --bk-field-border: #1a1c2c;
  --bk-field-shadow: inset 3px 3px 0 0 #c9cad6;
  --bk-card-shadow: 6px 6px 0 0 #1a1c2c;
  --bk-card-shadow-hover: 6px 6px 0 0 #1a1c2c;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #1a1c2c;
  --bk-overlay-shadow: 8px 8px 0 0 #1a1c2c;
  --bk-code-bg: #e9e9e9;
  --bk-code-border: #1a1c2c;
  --bk-tooltip-bg: #1a1c2c;
  --bk-tooltip-fg: #f4f4f4;
  --bk-divider-color: #1a1c2c;
  --bk-primary-border: #1a1c2c;
  --bk-neutral: #1a1c2c;
  --bk-neutral-soft: #e9e9e9;
  --bk-on-neutral: #f4f4f4;
  color-scheme: light;
}

[data-bk-style="pixel"] img { image-rendering: pixelated; }
[data-bk-style="pixel"] .bk-btn { image-rendering: pixelated; }
[data-bk-style="pixel"] .bk-avatar,
[data-bk-style="pixel"] .bk-check,
[data-bk-style="pixel"] .bk-switch,
[data-bk-style="pixel"] .bk-switch::before,
[data-bk-style="pixel"] .bk-badge,
[data-bk-style="pixel"] .bk-chip { border-radius: 0; }
[data-bk-style="pixel"] .bk-avatar { border: 3px solid var(--bk-border); }
[data-bk-style="pixel"] .bk-switch { border: 3px solid var(--bk-border); background: var(--bk-surface); }
[data-bk-style="pixel"] .bk-switch::before { background: var(--bk-text-subtle); box-shadow: none; }
[data-bk-style="pixel"] .bk-switch:checked::before { background: var(--bk-primary); }
[data-bk-style="pixel"] .bk-progress { border: 3px solid var(--bk-border); background: var(--bk-bg); }
[data-bk-style="pixel"] .bk-progress-bar {
  background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgb(0 0 0 / 0.25) 8px 10px);
}
[data-bk-style="pixel"] .bk-spinner {
  border-radius: 0;
  border-width: 4px;
  animation-timing-function: steps(8, end);
  animation-duration: 800ms;
}
[data-bk-style="pixel"] .bk-badge { border: 2px solid var(--bk-border); }
[data-bk-style="pixel"] .bk-tab[aria-selected="true"] { background: var(--bk-primary); color: var(--bk-on-primary); }
[data-bk-style="pixel"] .bk-navbar { border-block-end: 3px solid var(--bk-border); }
[data-bk-style="pixel"] .bk-btn:focus-visible { outline-style: dashed; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="pixel"] {
  --bk-danger-on-soft: #f15e81;
  --bk-danger-text: #f15e81;
  --bk-info-on-soft: #73eff7;
  --bk-info-text: #73eff7;
  --bk-primary-on-soft: #50adf7;
  --bk-primary-text: #41a6f6;
  --bk-secondary-on-soft: #38b764;
  --bk-secondary-text: #38b764;
  --bk-success-on-soft: #38b764;
  --bk-success-text: #38b764;
  --bk-text-muted: #b3b5cc;
  --bk-text-subtle: #8f91ae;
  --bk-warning-on-soft: #ffcd75;
  --bk-warning-text: #ffcd75;
}
[data-bk-style="pixel"][data-bk-theme="light"] {
  --bk-danger-on-soft: #f15e81;
  --bk-danger-text: #d71341;
  --bk-info-on-soft: #73eff7;
  --bk-info-text: #07767d;
  --bk-primary-on-soft: #50adf7;
  --bk-primary-text: #096ebe;
  --bk-secondary-on-soft: #38b764;
  --bk-secondary-text: #267c44;
  --bk-success-on-soft: #38b764;
  --bk-success-text: #267c44;
  --bk-text-muted: #4a4f6b;
  --bk-text-subtle: #6d7395;
  --bk-warning-on-soft: #ffcd75;
  --bk-warning-text: #996100;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "pixel" — generated by scripts/build.mjs */
@media (prefers-color-scheme: light) {
  [data-bk-style="pixel"][data-bk-theme="auto"] {
  --bk-bg: #f4f4f4;
  --bk-bg-subtle: #e4e4e4;
  --bk-surface: #ffffff;
  --bk-surface-2: #e9e9e9;
  --bk-surface-3: #d6d6d6;
  --bk-text: #1a1c2c;
  --bk-text-muted: #4a4f6b;
  --bk-text-subtle: #7c81a0;
  --bk-text-inverted: #f4f4f4;
  --bk-border: #1a1c2c;
  --bk-border-muted: #b8bacc;
  --bk-border-strong: #1a1c2c;
  --bk-shadow-xs: 3px 3px 0 0 #1a1c2c;
  --bk-shadow-sm: 3px 3px 0 0 #1a1c2c;
  --bk-shadow-md: 6px 6px 0 0 #1a1c2c;
  --bk-shadow-lg: 9px 9px 0 0 #1a1c2c;
  --bk-shadow-xl: 12px 12px 0 0 #1a1c2c;
  --bk-btn-shadow: 4px 4px 0 0 #1a1c2c;
  --bk-btn-shadow-hover: 4px 4px 0 0 #1a1c2c;
  --bk-btn-shadow-active: 0 0 0 0 #1a1c2c;
  --bk-field-bg: #ffffff;
  --bk-field-border: #1a1c2c;
  --bk-field-shadow: inset 3px 3px 0 0 #c9cad6;
  --bk-card-shadow: 6px 6px 0 0 #1a1c2c;
  --bk-card-shadow-hover: 6px 6px 0 0 #1a1c2c;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #1a1c2c;
  --bk-overlay-shadow: 8px 8px 0 0 #1a1c2c;
  --bk-code-bg: #e9e9e9;
  --bk-code-border: #1a1c2c;
  --bk-tooltip-bg: #1a1c2c;
  --bk-tooltip-fg: #f4f4f4;
  --bk-divider-color: #1a1c2c;
  --bk-primary-border: #1a1c2c;
  --bk-neutral: #1a1c2c;
  --bk-neutral-soft: #e9e9e9;
  --bk-on-neutral: #f4f4f4;
  color-scheme: light;


  --bk-danger-on-soft: #f15e81;
  --bk-danger-text: #d71341;
  --bk-info-on-soft: #73eff7;
  --bk-info-text: #07767d;
  --bk-primary-on-soft: #50adf7;
  --bk-primary-text: #096ebe;
  --bk-secondary-on-soft: #38b764;
  --bk-secondary-text: #267c44;
  --bk-success-on-soft: #38b764;
  --bk-success-text: #267c44;
  --bk-text-muted: #4a4f6b;
  --bk-text-subtle: #6d7395;
  --bk-warning-on-soft: #ffcd75;
  --bk-warning-text: #996100;
}
}


/* =============================================================================
   SKIN — pixelart · 16-bit
   Where `pixel` is the blocky monochrome chrome of an 8-bit console, this is the
   lush end of the medium.

   The signature of a pixel-art interface is not "sharp corners" — it is a frame
   whose corner pixels are *missing*, so the outline reads as if it were placed
   one pixel at a time. That cannot be done with `border`, which always turns the
   corner. It can be done with four offset box-shadows: each paints one side and
   none of them reaches the corner. Everything below is built from that idea,
   plus dithering in place of gradients, because a fixed palette has no in
   between.
   ========================================================================== */

[data-bk-style="pixelart"] {
  --bk-font-sans: "Silkscreen", "Pixelify Sans", "Press Start 2P", ui-monospace, "Courier New", monospace;
  --bk-font-display: var(--bk-font-sans);
  --bk-font-body: var(--bk-font-sans);
  --bk-font-mono: var(--bk-font-sans);
  --bk-heading-weight: 700;
  --bk-heading-tracking: 0.02em;
  --bk-label-tracking: 0.04em;
  --bk-leading-normal: 1.8;
  --bk-leading-snug: 1.6;
  --bk-leading-tight: 1.35;

  --bk-text-2xs: 0.5625rem;
  --bk-text-xs: 0.625rem;
  --bk-text-sm: 0.6875rem;
  --bk-text-md: 0.75rem;
  --bk-text-base: 0.8125rem;
  --bk-text-lg: 1rem;
  --bk-text-xl: 1.125rem;
  --bk-text-2xl: 1.375rem;
  --bk-text-3xl: 1.75rem;
  --bk-text-4xl: 2.25rem;
  --bk-text-5xl: 3rem;

  /* One pixel. Everything is a multiple of it. */
  --_px: 4px;
  --_px2: 8px;
  --_ink: #2b1b3d;
  --_hi: #fff6e5;
  --_dither: rgb(43 27 61 / 0.1);

  /* A frame with no corner pixels — four sides, none of them turning. */
  --_frame:
    0 calc(-1 * var(--_px)) 0 0 var(--_ink),
    0 var(--_px) 0 0 var(--_ink),
    calc(-1 * var(--_px)) 0 0 0 var(--_ink),
    var(--_px) 0 0 0 var(--_ink);
  /* The lit top edge and shaded bottom edge that give a sprite its volume. */
  --_bevel:
    inset 0 var(--_px) 0 0 rgb(255 255 255 / 0.45),
    inset 0 calc(-1 * var(--_px)) 0 0 rgb(43 27 61 / 0.22);

  --bk-bg: #f4e3c4;
  --bk-bg-subtle: #e8d2ad;
  --bk-bg-muted: #d9be96;
  --bk-surface: #fff6e5;
  --bk-surface-2: #ecd9b8;
  --bk-surface-3: #dcc39a;
  --bk-surface-inverted: #2b1b3d;

  --bk-text: #2b1b3d;
  --bk-text-muted: #5b4269;
  --bk-text-subtle: #8a6f92;
  --bk-text-inverted: #fff6e5;

  --bk-border: #2b1b3d;
  --bk-border-muted: #7a5f83;
  --bk-border-strong: #2b1b3d;
  --bk-border-width: 4px;

  --bk-primary: #d4568c;
  --bk-primary-hover: #c04477;
  --bk-primary-active: #a63765;
  --bk-primary-soft: #f7dbe7;
  --bk-primary-border: #2b1b3d;
  --bk-on-primary: #fff6e5;
  --bk-secondary: #3fa9c9;
  --bk-secondary-hover: #3494b1;
  --bk-secondary-active: #2b7d97;
  --bk-secondary-soft: #d7eef5;
  --bk-secondary-border: #2b1b3d;
  --bk-on-secondary: #fff6e5;
  --bk-success: #5fae56;
  --bk-success-soft: #ddf0da;
  --bk-success-border: #2b1b3d;
  --bk-on-success: #fff6e5;
  --bk-warning: #e0a02c;
  --bk-warning-soft: #fbedd0;
  --bk-warning-border: #2b1b3d;
  --bk-on-warning: #2b1b3d;
  --bk-danger: #d1483f;
  --bk-danger-soft: #f8ddda;
  --bk-danger-border: #2b1b3d;
  --bk-on-danger: #fff6e5;
  --bk-info: #6f6fd6;
  --bk-info-soft: #e2e2f8;
  --bk-info-border: #2b1b3d;
  --bk-on-info: #fff6e5;
  --bk-neutral: #2b1b3d;
  --bk-neutral-soft: #ecd9b8;
  --bk-neutral-border: #2b1b3d;
  --bk-on-neutral: #fff6e5;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-none: 0 0 #0000;
  --bk-shadow-xs: var(--_px) var(--_px) 0 0 var(--_ink);
  --bk-shadow-sm: var(--_px) var(--_px) 0 0 var(--_ink);
  --bk-shadow-md: var(--_px2) var(--_px2) 0 0 var(--_ink);
  --bk-shadow-lg: 12px 12px 0 0 var(--_ink);
  --bk-shadow-xl: 16px 16px 0 0 var(--_ink);
  --bk-shadow-2xl: 20px 20px 0 0 var(--_ink);
  --bk-shadow-inner: inset var(--_px) var(--_px) 0 0 rgb(43 27 61 / 0.28);

  --bk-ring: #e0a02c;
  --bk-ring-width: 4px;
  --bk-ring-offset: 4px;

  /* Buttons carry the frame, the bevel and a hard drop — no border at all. */
  --bk-btn-border-width: 0px;
  --bk-btn-weight: 700;
  --bk-btn-shadow: var(--_frame), var(--_bevel), var(--_px2) var(--_px2) 0 0 rgb(43 27 61 / 0.28);
  --bk-btn-shadow-hover: var(--_frame), var(--_bevel), var(--_px2) var(--_px2) 0 0 rgb(43 27 61 / 0.4);
  --bk-btn-shadow-active: var(--_frame), inset 0 var(--_px) 0 0 rgb(43 27 61 / 0.28);
  --bk-press-transform: translate(var(--_px), var(--_px));
  --bk-hover-transform: translate(0, calc(-1 * var(--_px)));

  --bk-field-bg: #fff6e5;
  --bk-field-border-width: 0px;
  --bk-field-border: transparent;
  --bk-field-border-hover: transparent;
  --bk-field-shadow: var(--_frame), inset 0 var(--_px) 0 0 rgb(43 27 61 / 0.22);
  --bk-field-shadow-focus: var(--_frame), inset 0 var(--_px) 0 0 rgb(43 27 61 / 0.22), 0 0 0 var(--_px) #e0a02c;
  --bk-field-placeholder: #9a80a2;

  /* Cards get the RPG-window treatment: notched outer frame, inner light rule. */
  --bk-card-border-width: 0px;
  --bk-card-border: transparent;
  --bk-card-shadow: var(--_frame), inset 0 0 0 var(--_px) rgb(255 255 255 / 0.55), var(--_px2) var(--_px2) 0 0 rgb(43 27 61 / 0.25);
  --bk-card-shadow-hover: var(--_frame), inset 0 0 0 var(--_px) rgb(255 255 255 / 0.7), 12px 12px 0 0 rgb(43 27 61 / 0.3);
  --bk-card-pad: var(--bk-space-5);
  --bk-card-image: repeating-conic-gradient(var(--_dither) 0% 25%, transparent 0% 50%);

  --bk-overlay-surface: #fff6e5;
  --bk-overlay-border: transparent;
  --bk-overlay-shadow: var(--_frame), inset 0 0 0 var(--_px) rgb(255 255 255 / 0.6), 16px 16px 0 0 rgb(43 27 61 / 0.35);
  --bk-overlay-bg: rgb(43 27 61 / 0.7);
  --bk-code-bg: #ecd9b8;
  --bk-code-border: #2b1b3d;
  --bk-tooltip-bg: #2b1b3d;
  --bk-tooltip-fg: #fff6e5;
  --bk-selection-bg: #e0a02c;
  --bk-selection-fg: #2b1b3d;
  --bk-scrollbar-thumb: #2b1b3d;
  --bk-divider-color: #2b1b3d;
  --bk-divider-width: 4px;
  --bk-transition: none;

  /* Dithering, not gradients: a 4px checkerboard, the way a 16-bit artist fakes
     a colour ramp on a fixed palette. Deliberately visible. */
  --bk-body-image: repeating-conic-gradient(var(--_dither) 0% 25%, transparent 0% 50%);
  --bk-body-image-size: var(--_px2) var(--_px2);
  --bk-surface-image-size: var(--_px2) var(--_px2);
  --bk-card-image-size: var(--_px2) var(--_px2);
  --bk-body-attachment: fixed;
  --bk-surface-image: repeating-conic-gradient(var(--_dither) 0% 25%, transparent 0% 50%);
}

/* Every dithered field is drawn at exactly one pixel. */
[data-bk-style="pixelart"] body,
body[data-bk-style="pixelart"],
[data-bk-style="pixelart"] .bk-card,
[data-bk-style="pixelart"] .bk-panel,
[data-bk-style="pixelart"] .bk-progress-bar,
[data-bk-style="pixelart"] .bk-skeleton,
[data-bk-style="pixelart"] .bk-badge,
[data-bk-style="pixelart"] .bk-alert { background-size: var(--_px2) var(--_px2); }

[data-bk-style="pixelart"][data-bk-theme="dark"] {
  --_ink: #0e0a18;
  --_hi: #f4e3c4;
  --_dither: rgb(255 246 229 / 0.07);
  --_bevel:
    inset 0 var(--_px) 0 0 rgb(255 255 255 / 0.16),
    inset 0 calc(-1 * var(--_px)) 0 0 rgb(0 0 0 / 0.4);
  --bk-bg: #241733;
  --bk-bg-subtle: #2d1d3f;
  --bk-bg-muted: #35234b;
  --bk-surface: #33224a;
  --bk-surface-2: #3d2957;
  --bk-surface-3: #4a3268;
  --bk-surface-inverted: #f4e3c4;
  --bk-text: #f4e3c4;
  --bk-text-muted: #c3a8d4;
  --bk-text-subtle: #9078a5;
  --bk-text-inverted: #241733;
  --bk-border: #0e0a18;
  --bk-border-muted: #5b3f7d;
  --bk-border-strong: #0e0a18;
  --bk-primary-soft: #45213a;
  --bk-secondary-soft: #16323d;
  --bk-success-soft: #1d3320;
  --bk-warning-soft: #3d2f12;
  --bk-danger-soft: #3d1a18;
  --bk-info-soft: #24245c;
  --bk-neutral: #f4e3c4;
  --bk-neutral-soft: #3d2957;
  --bk-on-neutral: #241733;
  --bk-field-bg: #1c1228;
  --bk-field-shadow: var(--_frame), inset 0 var(--_px) 0 0 rgb(0 0 0 / 0.5);
  --bk-field-shadow-focus: var(--_frame), inset 0 var(--_px) 0 0 rgb(0 0 0 / 0.5), 0 0 0 var(--_px) #e0a02c;
  --bk-card-shadow: var(--_frame), inset 0 0 0 var(--_px) rgb(255 246 229 / 0.16), var(--_px2) var(--_px2) 0 0 rgb(0 0 0 / 0.45);
  --bk-card-shadow-hover: var(--_frame), inset 0 0 0 var(--_px) rgb(255 246 229 / 0.24), 12px 12px 0 0 rgb(0 0 0 / 0.5);
  --bk-overlay-shadow: var(--_frame), inset 0 0 0 var(--_px) rgb(255 246 229 / 0.2), 16px 16px 0 0 rgb(0 0 0 / 0.5);
  --bk-code-bg: #1c1228;
  --bk-code-border: #0e0a18;
  --bk-overlay-surface: #33224a;
  --bk-tooltip-bg: #f4e3c4;
  --bk-tooltip-fg: #241733;
  --bk-divider-color: #0e0a18;
}

/* --------------------------------------------------------- structure ----- */

[data-bk-style="pixelart"] img { image-rendering: pixelated; }

[data-bk-style="pixelart"] .bk-avatar,
[data-bk-style="pixelart"] .bk-check,
[data-bk-style="pixelart"] .bk-switch,
[data-bk-style="pixelart"] .bk-switch::before,
[data-bk-style="pixelart"] .bk-badge,
[data-bk-style="pixelart"] .bk-chip,
[data-bk-style="pixelart"] .bk-progress,
[data-bk-style="pixelart"] .bk-spinner { border-radius: 0; }

/* The same notched frame, on everything that reads as a raised object. */
[data-bk-style="pixelart"] .bk-badge,
[data-bk-style="pixelart"] .bk-chip,
[data-bk-style="pixelart"] .bk-avatar,
[data-bk-style="pixelart"] .bk-alert,
[data-bk-style="pixelart"] .bk-toolbar,
[data-bk-style="pixelart"] .bk-segmented,
[data-bk-style="pixelart"] .bk-list-group,
[data-bk-style="pixelart"] .bk-table-wrap,
[data-bk-style="pixelart"] .bk-accordion,
[data-bk-style="pixelart"] .bk-menu,
[data-bk-style="pixelart"] .bk-popover,
[data-bk-style="pixelart"] .bk-toast {
  border: 0;
  box-shadow: var(--_frame);
}
[data-bk-style="pixelart"] .bk-alert { box-shadow: var(--_frame), var(--_px) var(--_px) 0 0 rgb(43 27 61 / 0.25); }
[data-bk-style="pixelart"] .bk-menu,
[data-bk-style="pixelart"] .bk-popover,
[data-bk-style="pixelart"] .bk-toast {
  box-shadow: var(--_frame), inset 0 0 0 var(--_px) rgb(255 255 255 / 0.5), var(--_px2) var(--_px2) 0 0 rgb(43 27 61 / 0.3);
}

/* Fields are recessed, so their bevel runs the other way. */
[data-bk-style="pixelart"] .bk-input,
[data-bk-style="pixelart"] .bk-textarea,
[data-bk-style="pixelart"] .bk-select { border: 0; }

[data-bk-style="pixelart"] .bk-check {
  border: 0;
  box-shadow: var(--_frame), inset 0 var(--_px) 0 0 rgb(43 27 61 / 0.2);
}
[data-bk-style="pixelart"] .bk-check:checked { box-shadow: var(--_frame), var(--_bevel); }

[data-bk-style="pixelart"] .bk-switch {
  border: 0;
  background: var(--bk-surface-3);
  box-shadow: var(--_frame), inset 0 var(--_px) 0 0 rgb(43 27 61 / 0.2);
}
[data-bk-style="pixelart"] .bk-switch::before { background: var(--bk-text-subtle); box-shadow: none; }
[data-bk-style="pixelart"] .bk-switch:checked { background: var(--bk-primary); }
[data-bk-style="pixelart"] .bk-switch:checked::before { background: var(--_hi); }

[data-bk-style="pixelart"] .bk-progress {
  border: 0;
  background: var(--bk-surface-3);
  box-shadow: var(--_frame), inset 0 var(--_px) 0 0 rgb(43 27 61 / 0.2);
}
[data-bk-style="pixelart"] .bk-progress-bar {
  background-image: repeating-conic-gradient(rgb(255 255 255 / 0.35) 0% 25%, transparent 0% 50%);
  box-shadow: inset 0 var(--_px) 0 0 rgb(255 255 255 / 0.4);
}

/* A loading spinner in a fixed palette does not spin smoothly — it steps. */
[data-bk-style="pixelart"] .bk-spinner {
  border-width: var(--_px);
  animation-timing-function: steps(8, end);
  animation-duration: 800ms;
}
[data-bk-style="pixelart"] .bk-skeleton {
  background-image: repeating-conic-gradient(rgb(43 27 61 / 0.16) 0% 25%, transparent 0% 50%);
  animation: none;
  border: 0;
  box-shadow: var(--_frame);
}

[data-bk-style="pixelart"] .bk-navbar { border-block-end: var(--_px) solid var(--bk-border); }
[data-bk-style="pixelart"] .bk-table thead th {
  background: var(--bk-warning);
  color: #2b1b3d;
  border-block-end: var(--_px) solid var(--bk-border);
}
[data-bk-style="pixelart"] .bk-tablist { border-block-end: var(--_px) solid var(--bk-border); }
[data-bk-style="pixelart"] .bk-tab[aria-selected="true"] {
  background: var(--bk-primary);
  color: var(--bk-on-primary);
  border-block-end-width: var(--_px);
}

/* Headings get a one-pixel drop in the accent, the way a sprite title screen
   fakes depth. */
[data-bk-style="pixelart"] .bk-display,
[data-bk-style="pixelart"] .bk-title,
[data-bk-style="pixelart"] .bk-card-title {
  text-shadow: var(--_px) var(--_px) 0 var(--bk-primary);
}
[data-bk-style="pixelart"][data-bk-theme="dark"] .bk-display,
[data-bk-style="pixelart"][data-bk-theme="dark"] .bk-title,
[data-bk-style="pixelart"][data-bk-theme="dark"] .bk-card-title {
  text-shadow: var(--_px) var(--_px) 0 var(--_ink);
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="pixelart"] {
  --bk-danger: #d1483f;
  --bk-danger-on-soft: #b2332b;
  --bk-danger-soft: #f8ddda;
  --bk-danger-text: #b6342c;
  --bk-info: #6f6fd6;
  --bk-info-on-soft: #5353ce;
  --bk-info-soft: #e2e2f8;
  --bk-info-text: #5353ce;
  --bk-on-danger: #000000;
  --bk-on-info: #0a0600;
  --bk-on-primary: #1e1400;
  --bk-on-secondary: #422b00;
  --bk-on-success: #422b00;
  --bk-primary: #d4568c;
  --bk-primary-on-soft: #b12d65;
  --bk-primary-soft: #f7dbe7;
  --bk-primary-text: #b52e68;
  --bk-secondary: #3fa9c9;
  --bk-secondary-on-soft: #256d82;
  --bk-secondary-soft: #d7eef5;
  --bk-secondary-text: #24697e;
  --bk-success: #5fae56;
  --bk-success-on-soft: #3d7236;
  --bk-success-soft: #ddf0da;
  --bk-success-text: #3b6e35;
  --bk-text-subtle: #7a6281;
  --bk-warning-on-soft: #8c6215;
  --bk-warning-text: #835c13;
}
[data-bk-style="pixelart"][data-bk-theme="dark"] {
  --bk-danger: #d1483f;
  --bk-danger-on-soft: #db6f68;
  --bk-danger-soft: #3d1a18;
  --bk-danger-text: #dd7770;
  --bk-info: #6f6fd6;
  --bk-info-on-soft: #8f8fdf;
  --bk-info-soft: #24245c;
  --bk-info-text: #8f8fdf;
  --bk-on-danger: #000000;
  --bk-on-info: #0a0600;
  --bk-on-primary: #1e1400;
  --bk-on-secondary: #422b00;
  --bk-on-success: #422b00;
  --bk-primary: #d4568c;
  --bk-primary-on-soft: #dc77a2;
  --bk-primary-soft: #45213a;
  --bk-primary-text: #db729f;
  --bk-secondary: #3fa9c9;
  --bk-secondary-on-soft: #3fa9c9;
  --bk-secondary-soft: #16323d;
  --bk-secondary-text: #3fa9c9;
  --bk-success: #5fae56;
  --bk-success-on-soft: #5fae56;
  --bk-success-soft: #1d3320;
  --bk-success-text: #5fae56;
  --bk-text-subtle: #9a84ad;
  --bk-warning-on-soft: #e0a02c;
  --bk-warning-text: #e0a02c;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "pixelart" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="pixelart"][data-bk-theme="auto"] {
  --_ink: #0e0a18;
  --_hi: #f4e3c4;
  --_dither: rgb(255 246 229 / 0.07);
  --_bevel:
    inset 0 var(--_px) 0 0 rgb(255 255 255 / 0.16),
    inset 0 calc(-1 * var(--_px)) 0 0 rgb(0 0 0 / 0.4);
  --bk-bg: #241733;
  --bk-bg-subtle: #2d1d3f;
  --bk-bg-muted: #35234b;
  --bk-surface: #33224a;
  --bk-surface-2: #3d2957;
  --bk-surface-3: #4a3268;
  --bk-surface-inverted: #f4e3c4;
  --bk-text: #f4e3c4;
  --bk-text-muted: #c3a8d4;
  --bk-text-subtle: #9078a5;
  --bk-text-inverted: #241733;
  --bk-border: #0e0a18;
  --bk-border-muted: #5b3f7d;
  --bk-border-strong: #0e0a18;
  --bk-primary-soft: #45213a;
  --bk-secondary-soft: #16323d;
  --bk-success-soft: #1d3320;
  --bk-warning-soft: #3d2f12;
  --bk-danger-soft: #3d1a18;
  --bk-info-soft: #24245c;
  --bk-neutral: #f4e3c4;
  --bk-neutral-soft: #3d2957;
  --bk-on-neutral: #241733;
  --bk-field-bg: #1c1228;
  --bk-field-shadow: var(--_frame), inset 0 var(--_px) 0 0 rgb(0 0 0 / 0.5);
  --bk-field-shadow-focus: var(--_frame), inset 0 var(--_px) 0 0 rgb(0 0 0 / 0.5), 0 0 0 var(--_px) #e0a02c;
  --bk-card-shadow: var(--_frame), inset 0 0 0 var(--_px) rgb(255 246 229 / 0.16), var(--_px2) var(--_px2) 0 0 rgb(0 0 0 / 0.45);
  --bk-card-shadow-hover: var(--_frame), inset 0 0 0 var(--_px) rgb(255 246 229 / 0.24), 12px 12px 0 0 rgb(0 0 0 / 0.5);
  --bk-overlay-shadow: var(--_frame), inset 0 0 0 var(--_px) rgb(255 246 229 / 0.2), 16px 16px 0 0 rgb(0 0 0 / 0.5);
  --bk-code-bg: #1c1228;
  --bk-code-border: #0e0a18;
  --bk-overlay-surface: #33224a;
  --bk-tooltip-bg: #f4e3c4;
  --bk-tooltip-fg: #241733;
  --bk-divider-color: #0e0a18;


  --bk-danger: #d1483f;
  --bk-danger-on-soft: #db6f68;
  --bk-danger-soft: #3d1a18;
  --bk-danger-text: #dd7770;
  --bk-info: #6f6fd6;
  --bk-info-on-soft: #8f8fdf;
  --bk-info-soft: #24245c;
  --bk-info-text: #8f8fdf;
  --bk-on-danger: #000000;
  --bk-on-info: #0a0600;
  --bk-on-primary: #1e1400;
  --bk-on-secondary: #422b00;
  --bk-on-success: #422b00;
  --bk-primary: #d4568c;
  --bk-primary-on-soft: #dc77a2;
  --bk-primary-soft: #45213a;
  --bk-primary-text: #db729f;
  --bk-secondary: #3fa9c9;
  --bk-secondary-on-soft: #3fa9c9;
  --bk-secondary-soft: #16323d;
  --bk-secondary-text: #3fa9c9;
  --bk-success: #5fae56;
  --bk-success-on-soft: #5fae56;
  --bk-success-soft: #1d3320;
  --bk-success-text: #5fae56;
  --bk-text-subtle: #9a84ad;
  --bk-warning-on-soft: #e0a02c;
  --bk-warning-text: #e0a02c;
}
}


/* =============================================================================
   SKIN — retro70s · Avocado & harvest gold
   Mustard, rust, avocado and cream. Chunky rounded rectangles, thick bands,
   and the confident ugliness of a 1974 kitchen appliance catalogue.
   ========================================================================== */

[data-bk-style="retro70s"] {
  --bk-font-sans: "Bricolage Grotesque", "Cooper Black", "Bookman Old Style", "Georgia", ui-sans-serif, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 700;
  --bk-heading-tracking: -0.02em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.1em;

  --bk-bg: #f4e7cf;
  --bk-bg-subtle: #eddcbc;
  --bk-bg-muted: #e3cfa6;
  --bk-surface: #fbf3e3;
  --bk-surface-2: #eddcbc;
  --bk-surface-3: #e0caa0;
  --bk-surface-inverted: #2c1d0e;

  --bk-text: #3a2610;
  --bk-text-muted: #6b4d2a;
  --bk-text-subtle: #9a7c53;
  --bk-text-inverted: #fbf3e3;

  --bk-border: #c9a86e;
  --bk-border-muted: #ddc59a;
  --bk-border-strong: #8a6329;

  --bk-primary: #b8541b;
  --bk-primary-hover: #a04616;
  --bk-primary-active: #863a12;
  --bk-primary-soft: #f7e0cd;
  --bk-primary-border: #dda684;
  --bk-on-primary: #fbf3e3;
  --bk-secondary: #6b7a23;
  --bk-secondary-hover: #5a681d;
  --bk-secondary-active: #4a5618;
  --bk-secondary-soft: #eaeed2;
  --bk-secondary-border: #b6c37e;
  --bk-on-secondary: #fbf3e3;
  --bk-success: #5c7a25;
  --bk-success-soft: #e9eed3;
  --bk-success-border: #b1c281;
  --bk-warning: #c08a05;
  --bk-warning-soft: #faedc7;
  --bk-warning-border: #e2c470;
  --bk-danger: #a8341f;
  --bk-danger-soft: #f6dcd6;
  --bk-danger-border: #d79c8d;
  --bk-info: #2f6470;
  --bk-info-soft: #dceaee;
  --bk-info-border: #9ac2cc;
  --bk-neutral: #3a2610;
  --bk-neutral-soft: #ecdcbe;
  --bk-neutral-border: #c9a86e;
  --bk-on-neutral: #fbf3e3;

  --bk-radius-scale: 2.6;
  --bk-radius-field: var(--bk-radius-full);
  --bk-radius-card: var(--bk-radius-2xl);
  --bk-radius-overlay: var(--bk-radius-2xl);

  --bk-shadow-color: 30 45% 22%;
  --bk-shadow-strength: 1.1;

  --bk-btn-radius: var(--bk-radius-full);
  --bk-btn-weight: 700;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.1em;
  --bk-btn-shadow: 0 3px 0 rgb(58 38 16 / 0.22);
  --bk-btn-shadow-hover: 0 5px 0 rgb(58 38 16 / 0.26);
  --bk-btn-shadow-active: 0 1px 0 rgb(58 38 16 / 0.3);
  --bk-press-transform: translateY(2px);
  --bk-hover-transform: translateY(-1px);

  --bk-field-bg: #fbf3e3;
  --bk-field-border: #c9a86e;
  --bk-field-border-hover: #b8541b;
  --bk-field-shadow: inset 0 2px 3px rgb(58 38 16 / 0.1);
  --bk-field-placeholder: #ad9068;
  --bk-card-shadow: 0 3px 0 rgb(58 38 16 / 0.14);
  --bk-card-shadow-hover: 0 7px 0 rgb(58 38 16 / 0.18);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #fbf3e3;
  --bk-overlay-shadow: 0 20px 50px rgb(44 29 14 / 0.35);
  --bk-overlay-bg: rgb(44 29 14 / 0.4);
  --bk-code-bg: #eddcbc;
  --bk-code-border: #c9a86e;
  --bk-tooltip-bg: #3a2610;
  --bk-selection-bg: rgb(192 138 5 / 0.35);
  --bk-scrollbar-thumb: #c9a86e;
  --bk-divider-color: #c9a86e;
  --bk-divider-width: 3px;

  /* Wide sunset bands, the era's signature. */
  --bk-body-image:
    linear-gradient(180deg,
      rgb(184 84 27 / 0.1) 0 3rem,
      rgb(192 138 5 / 0.1) 3rem 6rem,
      rgb(107 122 35 / 0.1) 6rem 9rem,
      transparent 9rem);
  --bk-body-attachment: fixed;
}

[data-bk-style="retro70s"][data-bk-theme="dark"] {
  --bk-bg: #201509;
  --bk-bg-subtle: #281b0d;
  --bk-surface: #2b1d0e;
  --bk-surface-2: #342411;
  --bk-surface-3: #402d16;
  --bk-text: #f2e2c4;
  --bk-text-muted: #c0a67c;
  --bk-text-subtle: #8f7a56;
  --bk-text-inverted: #201509;
  --bk-border: #4c361a;
  --bk-border-muted: #372710;
  --bk-border-strong: #7d5c2c;
  --bk-primary: #e08a4e;
  --bk-primary-hover: #ea9c66;
  --bk-primary-soft: #34200f;
  --bk-primary-border: #6b421f;
  --bk-on-primary: #1c0f04;
  --bk-secondary: #b3c05e;
  --bk-secondary-soft: #262b12;
  --bk-secondary-border: #4d5623;
  --bk-on-secondary: #14170a;
  --bk-neutral: #f2e2c4;
  --bk-neutral-soft: #342411;
  --bk-neutral-border: #4c361a;
  --bk-on-neutral: #201509;
  --bk-field-bg: #2b1d0e;
  --bk-field-border: #533a1c;
  --bk-code-bg: #281b0d;
  --bk-code-border: #4c361a;
  --bk-overlay-surface: #2b1d0e;
  --bk-tooltip-bg: #f2e2c4;
  --bk-tooltip-fg: #201509;
  --bk-divider-color: #4c361a;
  --bk-body-image:
    linear-gradient(180deg,
      rgb(224 138 78 / 0.09) 0 3rem,
      rgb(226 196 112 / 0.08) 3rem 6rem,
      rgb(179 192 94 / 0.08) 6rem 9rem,
      transparent 9rem);
}

[data-bk-style="retro70s"] .bk-navbar { border-block-end: 3px solid var(--bk-border-strong); }
[data-bk-style="retro70s"] .bk-table thead th {
  background: var(--bk-warning);
  color: #3a2610;
  border-block-end: 3px solid var(--bk-border-strong);
}
[data-bk-style="retro70s"] .bk-section-head::after {
  content: "";
  display: block;
  block-size: 10px;
  inline-size: 8rem;
  margin-block-start: var(--bk-space-4);
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--bk-primary) 0 33%, var(--bk-warning) 33% 66%, var(--bk-secondary) 66%);
}
[data-bk-style="retro70s"] .bk-badge { border-radius: 9999px; font-weight: 700; }
[data-bk-style="retro70s"] .bk-tab[aria-selected="true"] {
  background: var(--bk-primary-soft);
  border-radius: 9999px 9999px 0 0;
  border-block-end-width: 3px;
}
[data-bk-style="retro70s"] .bk-progress { border: 2px solid var(--bk-border-strong); }
[data-bk-style="retro70s"] .bk-progress-bar {
  background-image: repeating-linear-gradient(90deg,
    var(--bk-primary) 0 1rem, var(--bk-warning) 1rem 2rem, var(--bk-secondary) 2rem 3rem);
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="retro70s"] {
  --bk-danger: #a8341f;
  --bk-danger-on-soft: #a8341f;
  --bk-danger-soft: #f6dcd6;
  --bk-danger-text: #a8341f;
  --bk-field-placeholder: #a38459;
  --bk-info: #2f6470;
  --bk-info-on-soft: #2f6470;
  --bk-info-soft: #dceaee;
  --bk-info-text: #2f6470;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-primary: #fefbf5;
  --bk-on-secondary: #fffefe;
  --bk-on-success: #ffffff;
  --bk-on-warning: #292929;
  --bk-primary: #b8541b;
  --bk-primary-on-soft: #a24a18;
  --bk-primary-soft: #f7e0cd;
  --bk-primary-text: #a64c18;
  --bk-secondary: #6b7a23;
  --bk-secondary-on-soft: #616e20;
  --bk-secondary-soft: #eaeed2;
  --bk-secondary-text: #5d6a1e;
  --bk-success: #5c7a25;
  --bk-success-on-soft: #536e21;
  --bk-success-soft: #e9eed3;
  --bk-success-text: #536e21;
  --bk-text-subtle: #836946;
  --bk-warning: #c08a05;
  --bk-warning-on-soft: #896304;
  --bk-warning-soft: #faedc7;
  --bk-warning-text: #845f03;
}
[data-bk-style="retro70s"][data-bk-theme="dark"] {
  --bk-danger: #a8341f;
  --bk-danger-on-soft: #a8341f;
  --bk-danger-soft: #f6dcd6;
  --bk-danger-text: #de654f;
  --bk-field-placeholder: #ad9068;
  --bk-info: #2f6470;
  --bk-info-on-soft: #2f6470;
  --bk-info-soft: #dceaee;
  --bk-info-text: #4694a6;
  --bk-on-danger: #f5d1d5;
  --bk-on-info: #c1dff9;
  --bk-on-primary: #1c0f04;
  --bk-on-secondary: #14170a;
  --bk-on-success: #f0fcf5;
  --bk-on-warning: #1f1503;
  --bk-primary: #e08a4e;
  --bk-primary-on-soft: #e08a4e;
  --bk-primary-soft: #34200f;
  --bk-primary-text: #e08a4e;
  --bk-secondary: #b3c05e;
  --bk-secondary-on-soft: #b3c05e;
  --bk-secondary-soft: #262b12;
  --bk-secondary-text: #b3c05e;
  --bk-success: #5c7a25;
  --bk-success-on-soft: #536e21;
  --bk-success-soft: #e9eed3;
  --bk-success-text: #71952d;
  --bk-text-subtle: #8f7a56;
  --bk-warning: #c08a05;
  --bk-warning-on-soft: #896304;
  --bk-warning-soft: #faedc7;
  --bk-warning-text: #c08a05;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "retro70s" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="retro70s"][data-bk-theme="auto"] {
  --bk-bg: #201509;
  --bk-bg-subtle: #281b0d;
  --bk-surface: #2b1d0e;
  --bk-surface-2: #342411;
  --bk-surface-3: #402d16;
  --bk-text: #f2e2c4;
  --bk-text-muted: #c0a67c;
  --bk-text-subtle: #8f7a56;
  --bk-text-inverted: #201509;
  --bk-border: #4c361a;
  --bk-border-muted: #372710;
  --bk-border-strong: #7d5c2c;
  --bk-primary: #e08a4e;
  --bk-primary-hover: #ea9c66;
  --bk-primary-soft: #34200f;
  --bk-primary-border: #6b421f;
  --bk-on-primary: #1c0f04;
  --bk-secondary: #b3c05e;
  --bk-secondary-soft: #262b12;
  --bk-secondary-border: #4d5623;
  --bk-on-secondary: #14170a;
  --bk-neutral: #f2e2c4;
  --bk-neutral-soft: #342411;
  --bk-neutral-border: #4c361a;
  --bk-on-neutral: #201509;
  --bk-field-bg: #2b1d0e;
  --bk-field-border: #533a1c;
  --bk-code-bg: #281b0d;
  --bk-code-border: #4c361a;
  --bk-overlay-surface: #2b1d0e;
  --bk-tooltip-bg: #f2e2c4;
  --bk-tooltip-fg: #201509;
  --bk-divider-color: #4c361a;
  --bk-body-image:
    linear-gradient(180deg,
      rgb(224 138 78 / 0.09) 0 3rem,
      rgb(226 196 112 / 0.08) 3rem 6rem,
      rgb(179 192 94 / 0.08) 6rem 9rem,
      transparent 9rem);


  --bk-danger: #a8341f;
  --bk-danger-on-soft: #a8341f;
  --bk-danger-soft: #f6dcd6;
  --bk-danger-text: #de654f;
  --bk-field-placeholder: #ad9068;
  --bk-info: #2f6470;
  --bk-info-on-soft: #2f6470;
  --bk-info-soft: #dceaee;
  --bk-info-text: #4694a6;
  --bk-on-danger: #f5d1d5;
  --bk-on-info: #c1dff9;
  --bk-on-primary: #1c0f04;
  --bk-on-secondary: #14170a;
  --bk-on-success: #f0fcf5;
  --bk-on-warning: #1f1503;
  --bk-primary: #e08a4e;
  --bk-primary-on-soft: #e08a4e;
  --bk-primary-soft: #34200f;
  --bk-primary-text: #e08a4e;
  --bk-secondary: #b3c05e;
  --bk-secondary-on-soft: #b3c05e;
  --bk-secondary-soft: #262b12;
  --bk-secondary-text: #b3c05e;
  --bk-success: #5c7a25;
  --bk-success-on-soft: #536e21;
  --bk-success-soft: #e9eed3;
  --bk-success-text: #71952d;
  --bk-text-subtle: #8f7a56;
  --bk-warning: #c08a05;
  --bk-warning-on-soft: #896304;
  --bk-warning-soft: #faedc7;
  --bk-warning-text: #c08a05;
}
}


/* =============================================================================
   SKIN — riso · Risograph
   Two spot inks on cheap paper. Fluorescent pink and a soy blue, overprinted so
   the overlaps go darker, with the slight misregistration and paper grain that
   a duplicator gives you for free. Nothing else in the set prints; this one
   does.
   ========================================================================== */

[data-bk-style="riso"] {
  --bk-font-sans: "Space Grotesk", "Archivo", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 700;
  --bk-heading-tracking: -0.02em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.1em;

  --_pink: #ff48b0;
  --_blue: #0f5fd8;
  --_paper: #f6f2e8;

  --bk-bg: #f6f2e8;
  --bk-bg-subtle: #efe9db;
  --bk-bg-muted: #e6dfcd;
  --bk-surface: #fbf8f1;
  --bk-surface-2: #efe9db;
  --bk-surface-3: #e2dac6;
  --bk-surface-inverted: #14204a;

  --bk-text: #14204a;
  --bk-text-muted: #3f4d7e;
  --bk-text-subtle: #7480a6;
  --bk-text-inverted: #f6f2e8;

  --bk-border: #14204a;
  --bk-border-muted: #a9b1cb;
  --bk-border-strong: #14204a;
  --bk-border-width: 2px;

  --bk-primary: #d61a86;
  --bk-primary-hover: #bd1575;
  --bk-primary-active: #a41164;
  --bk-primary-soft: #fbdcef;
  --bk-primary-border: #14204a;
  --bk-on-primary: #fbf8f1;
  --bk-secondary: #0f5fd8;
  --bk-secondary-hover: #0d51b8;
  --bk-secondary-active: #0a4398;
  --bk-secondary-soft: #d8e5fa;
  --bk-secondary-border: #14204a;
  --bk-on-secondary: #fbf8f1;
  --bk-success: #1a6f5a;
  --bk-success-soft: #d7ece6;
  --bk-success-border: #14204a;
  --bk-warning: #b2610a;
  --bk-warning-soft: #f9e6d1;
  --bk-warning-border: #14204a;
  --bk-danger: #d61a86;
  --bk-danger-soft: #fbdcef;
  --bk-danger-border: #14204a;
  --bk-info: #0f5fd8;
  --bk-info-soft: #d8e5fa;
  --bk-info-border: #14204a;
  --bk-neutral: #14204a;
  --bk-neutral-soft: #e6e2d6;
  --bk-neutral-border: #14204a;
  --bk-on-neutral: #f6f2e8;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 9999px;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 9999px;

  /* Misregistration: the "second pass" sits a hair off, in the other ink. */
  --bk-shadow-none: 0 0 #0000;
  --bk-shadow-xs: 2px 2px 0 rgb(255 72 176 / 0.55);
  --bk-shadow-sm: 3px 3px 0 rgb(255 72 176 / 0.55);
  --bk-shadow-md: 4px 4px 0 rgb(255 72 176 / 0.6);
  --bk-shadow-lg: 6px 6px 0 rgb(255 72 176 / 0.6);
  --bk-shadow-xl: 9px 9px 0 rgb(255 72 176 / 0.55);
  --bk-shadow-2xl: 12px 12px 0 rgb(255 72 176 / 0.5);
  --bk-shadow-inner: inset 2px 2px 0 rgb(15 95 216 / 0.18);

  --bk-ring: #ff48b0;
  --bk-ring-width: 3px;
  --bk-ring-offset: 2px;

  --bk-btn-border-width: 2px;
  --bk-btn-weight: 700;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.08em;
  --bk-btn-shadow: 3px 3px 0 rgb(255 72 176 / 0.6);
  --bk-btn-shadow-hover: 5px 5px 0 rgb(255 72 176 / 0.7);
  --bk-btn-shadow-active: 1px 1px 0 rgb(255 72 176 / 0.7);
  --bk-press-transform: translate(2px, 2px);
  --bk-hover-transform: translate(-1px, -1px);

  --bk-field-bg: #fbf8f1;
  --bk-field-border: #14204a;
  --bk-field-border-width: 2px;
  --bk-field-shadow: inset 2px 2px 0 rgb(15 95 216 / 0.14);
  --bk-field-shadow-focus: inset 2px 2px 0 rgb(15 95 216 / 0.14), 3px 3px 0 rgb(255 72 176 / 0.7);
  --bk-field-placeholder: #8b93b3;

  --bk-card-border-width: 2px;
  --bk-card-shadow: 4px 4px 0 rgb(255 72 176 / 0.55);
  --bk-card-shadow-hover: 7px 7px 0 rgb(255 72 176 / 0.65);
  --bk-card-pad: var(--bk-space-5);
  --bk-overlay-surface: #fbf8f1;
  --bk-overlay-border: #14204a;
  --bk-overlay-shadow: 10px 10px 0 rgb(255 72 176 / 0.5);
  --bk-overlay-bg: rgb(20 32 74 / 0.45);
  --bk-code-bg: #efe9db;
  --bk-code-border: #14204a;
  --bk-tooltip-bg: #14204a;
  --bk-tooltip-fg: #f6f2e8;
  --bk-selection-bg: #ff48b0;
  --bk-selection-fg: #fbf8f1;
  --bk-scrollbar-thumb: #14204a;
  --bk-divider-color: #14204a;
  --bk-divider-width: 2px;

  /* Paper grain: two offset dot fields, no image asset. */
  --bk-body-image:
    radial-gradient(circle at 50% 50%, rgb(20 32 74 / 0.05) 0.6px, transparent 0.7px),
    radial-gradient(circle at 50% 50%, rgb(255 72 176 / 0.05) 0.6px, transparent 0.7px);
  --bk-body-attachment: fixed;
}
[data-bk-style="riso"] body,
body[data-bk-style="riso"] { background-size: 3px 3px, 5px 5px; background-position: 0 0, 1px 2px; }

[data-bk-style="riso"][data-bk-theme="dark"] {
  --_paper: #171526;
  --bk-bg: #171526;
  --bk-bg-subtle: #1e1c32;
  --bk-surface: #1e1c32;
  --bk-surface-2: #26243d;
  --bk-surface-3: #302d4c;
  --bk-surface-inverted: #f6f2e8;
  --bk-text: #f2ecf6;
  --bk-text-muted: #b9b0cd;
  --bk-text-subtle: #8880a0;
  --bk-text-inverted: #171526;
  --bk-border: #f2ecf6;
  --bk-border-muted: #3f3b5e;
  --bk-border-strong: #f2ecf6;
  --bk-primary: #ff48b0;
  --bk-primary-hover: #ff69c0;
  --bk-primary-soft: #3a1132;
  --bk-primary-border: #f2ecf6;
  --bk-on-primary: #21071a;
  --bk-secondary: #5a95f5;
  --bk-secondary-soft: #12204a;
  --bk-secondary-border: #f2ecf6;
  --bk-on-secondary: #050f28;
  --bk-success-soft: #102e28;
  --bk-warning-soft: #33240f;
  --bk-danger-soft: #3a1132;
  --bk-info-soft: #12204a;
  --bk-neutral: #f2ecf6;
  --bk-neutral-soft: #26243d;
  --bk-neutral-border: #f2ecf6;
  --bk-on-neutral: #171526;
  --bk-field-bg: #12111f;
  --bk-field-border: #f2ecf6;
  --bk-code-bg: #12111f;
  --bk-code-border: #f2ecf6;
  --bk-overlay-surface: #1e1c32;
  --bk-overlay-border: #f2ecf6;
  --bk-tooltip-bg: #f2ecf6;
  --bk-tooltip-fg: #171526;
  --bk-divider-color: #f2ecf6;
  --bk-body-image:
    radial-gradient(circle at 50% 50%, rgb(242 236 246 / 0.05) 0.6px, transparent 0.7px),
    radial-gradient(circle at 50% 50%, rgb(255 72 176 / 0.07) 0.6px, transparent 0.7px);
}

/* Overprint: where the two inks overlap, the paper goes darker. */
[data-bk-style="riso"] .bk-badge,
[data-bk-style="riso"] .bk-chip,
[data-bk-style="riso"] .bk-btn-soft,
[data-bk-style="riso"] .bk-alert { mix-blend-mode: multiply; }
[data-bk-style="riso"][data-bk-theme="dark"] .bk-badge,
[data-bk-style="riso"][data-bk-theme="dark"] .bk-chip,
[data-bk-style="riso"][data-bk-theme="dark"] .bk-btn-soft,
[data-bk-style="riso"][data-bk-theme="dark"] .bk-alert { mix-blend-mode: screen; }

[data-bk-style="riso"] .bk-badge { border: 2px solid currentColor; }
[data-bk-style="riso"] .bk-avatar { border: 2px solid var(--bk-border); }
[data-bk-style="riso"] .bk-navbar { border-block-end: 2px solid var(--bk-border); background: transparent; }
[data-bk-style="riso"] .bk-table thead th {
  background: transparent;
  color: var(--bk-primary);
  border-block-end: 2px solid var(--bk-border);
}
[data-bk-style="riso"] .bk-progress { border: 2px solid var(--bk-border); background: transparent; }
[data-bk-style="riso"] .bk-progress-bar {
  background-image: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.5) 0.8px, transparent 0.9px);
  background-size: 4px 4px;
}
[data-bk-style="riso"] .bk-switch { border: 2px solid var(--bk-border); }
[data-bk-style="riso"] .bk-check { border-width: 2px; }
[data-bk-style="riso"] .bk-tab[aria-selected="true"] { border-block-end-width: 3px; }

/* The signature: a display line printed twice, slightly out of register. */
[data-bk-style="riso"] .bk-display,
[data-bk-style="riso"] .bk-title {
  text-shadow: 3px 3px 0 rgb(255 72 176 / 0.75), -2px -1px 0 rgb(15 95 216 / 0.4);
}
[data-bk-style="riso"] .bk-section-head .bk-eyebrow { color: var(--bk-primary); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="riso"] {
  --bk-danger: #d61a86;
  --bk-danger-on-soft: #bb1775;
  --bk-danger-soft: #fbdcef;
  --bk-danger-text: #c8187d;
  --bk-field-placeholder: #828aad;
  --bk-info: #0f5fd8;
  --bk-info-on-soft: #0f5fd8;
  --bk-info-soft: #d8e5fa;
  --bk-info-text: #0f5fd8;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-primary-on-soft: #bb1775;
  --bk-primary-text: #c8187d;
  --bk-success: #1a6f5a;
  --bk-success-on-soft: #1a6f5a;
  --bk-success-soft: #d7ece6;
  --bk-success-text: #1a6f5a;
  --bk-text-subtle: #6b77a0;
  --bk-warning: #b2610a;
  --bk-warning-on-soft: #9a5409;
  --bk-warning-soft: #f9e6d1;
  --bk-warning-text: #a45909;
}
[data-bk-style="riso"][data-bk-theme="dark"] {
  --bk-danger: #d61a86;
  --bk-danger-on-soft: #e94ea7;
  --bk-danger-soft: #3a1132;
  --bk-danger-text: #e949a5;
  --bk-field-placeholder: #8b93b3;
  --bk-info: #0f5fd8;
  --bk-info-on-soft: #4b8ef3;
  --bk-info-soft: #12204a;
  --bk-info-text: #4288f2;
  --bk-on-danger: #fefbfb;
  --bk-on-info: #d8ebfb;
  --bk-on-success: #aef2cc;
  --bk-on-warning: #000000;
  --bk-primary-on-soft: #ff48b0;
  --bk-primary-text: #ff48b0;
  --bk-success: #1a6f5a;
  --bk-success-on-soft: #27a586;
  --bk-success-soft: #102e28;
  --bk-success-text: #259c7f;
  --bk-text-subtle: #8880a0;
  --bk-warning: #b7640a;
  --bk-warning-on-soft: #dd790c;
  --bk-warning-soft: #33240f;
  --bk-warning-text: #cf710c;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "riso" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="riso"][data-bk-theme="auto"] {
  --_paper: #171526;
  --bk-bg: #171526;
  --bk-bg-subtle: #1e1c32;
  --bk-surface: #1e1c32;
  --bk-surface-2: #26243d;
  --bk-surface-3: #302d4c;
  --bk-surface-inverted: #f6f2e8;
  --bk-text: #f2ecf6;
  --bk-text-muted: #b9b0cd;
  --bk-text-subtle: #8880a0;
  --bk-text-inverted: #171526;
  --bk-border: #f2ecf6;
  --bk-border-muted: #3f3b5e;
  --bk-border-strong: #f2ecf6;
  --bk-primary: #ff48b0;
  --bk-primary-hover: #ff69c0;
  --bk-primary-soft: #3a1132;
  --bk-primary-border: #f2ecf6;
  --bk-on-primary: #21071a;
  --bk-secondary: #5a95f5;
  --bk-secondary-soft: #12204a;
  --bk-secondary-border: #f2ecf6;
  --bk-on-secondary: #050f28;
  --bk-success-soft: #102e28;
  --bk-warning-soft: #33240f;
  --bk-danger-soft: #3a1132;
  --bk-info-soft: #12204a;
  --bk-neutral: #f2ecf6;
  --bk-neutral-soft: #26243d;
  --bk-neutral-border: #f2ecf6;
  --bk-on-neutral: #171526;
  --bk-field-bg: #12111f;
  --bk-field-border: #f2ecf6;
  --bk-code-bg: #12111f;
  --bk-code-border: #f2ecf6;
  --bk-overlay-surface: #1e1c32;
  --bk-overlay-border: #f2ecf6;
  --bk-tooltip-bg: #f2ecf6;
  --bk-tooltip-fg: #171526;
  --bk-divider-color: #f2ecf6;
  --bk-body-image:
    radial-gradient(circle at 50% 50%, rgb(242 236 246 / 0.05) 0.6px, transparent 0.7px),
    radial-gradient(circle at 50% 50%, rgb(255 72 176 / 0.07) 0.6px, transparent 0.7px);


  --bk-danger: #d61a86;
  --bk-danger-on-soft: #e94ea7;
  --bk-danger-soft: #3a1132;
  --bk-danger-text: #e949a5;
  --bk-field-placeholder: #8b93b3;
  --bk-info: #0f5fd8;
  --bk-info-on-soft: #4b8ef3;
  --bk-info-soft: #12204a;
  --bk-info-text: #4288f2;
  --bk-on-danger: #fefbfb;
  --bk-on-info: #d8ebfb;
  --bk-on-success: #aef2cc;
  --bk-on-warning: #000000;
  --bk-primary-on-soft: #ff48b0;
  --bk-primary-text: #ff48b0;
  --bk-success: #1a6f5a;
  --bk-success-on-soft: #27a586;
  --bk-success-soft: #102e28;
  --bk-success-text: #259c7f;
  --bk-text-subtle: #8880a0;
  --bk-warning: #b7640a;
  --bk-warning-on-soft: #dd790c;
  --bk-warning-soft: #33240f;
  --bk-warning-text: #cf710c;
}
}


/* =============================================================================
   SKIN — sketch · Hand-drawn
   Wobbly ink borders (SVG turbulence, no images), notebook paper, marker
   highlights and a handwriting display face. Looks like a napkin wireframe.
   ========================================================================== */

[data-bk-style="sketch"] {
  --bk-font-sans: "Gaegu", "Comic Neue", "Segoe Print", "Bradley Hand", "Chalkboard SE", cursive, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-font-body: var(--bk-font-sans);
  --bk-font-mono: "Courier New", ui-monospace, monospace;
  --bk-heading-weight: 700;
  --bk-heading-tracking: 0;
  --bk-text-base: 1.0625rem;
  --bk-leading-normal: 1.6;

  --bk-bg: #fdfdf7;
  --bk-bg-subtle: #f7f7ee;
  --bk-bg-muted: #efefe2;
  --bk-surface: #ffffff;
  --bk-surface-2: #f8f8f0;
  --bk-surface-3: #eeeee0;
  --bk-surface-inverted: #1f1f1c;

  --bk-text: #22221f;
  --bk-text-muted: #55554e;
  --bk-text-subtle: #86867c;
  --bk-text-inverted: #fdfdf7;

  --bk-border: #22221f;
  --bk-border-muted: #b9b9ac;
  --bk-border-strong: #22221f;
  --bk-border-width: 2px;

  --bk-primary: #2f6fd0;
  --bk-primary-hover: #2861bb;
  --bk-primary-active: #2255a3;
  --bk-primary-soft: #e2ecfa;
  --bk-primary-border: #22221f;
  --bk-on-primary: #ffffff;
  --bk-secondary: #d06f2f;
  --bk-secondary-soft: #faeade;
  --bk-secondary-border: #22221f;
  --bk-on-secondary: #ffffff;
  --bk-success: #3d8b3d;
  --bk-success-soft: #e3f2e3;
  --bk-success-border: #22221f;
  --bk-warning: #d0a02f;
  --bk-warning-soft: #f9f0d9;
  --bk-warning-border: #22221f;
  --bk-on-warning: #22221f;
  --bk-danger: #c73f3f;
  --bk-danger-soft: #f8e2e2;
  --bk-danger-border: #22221f;
  --bk-info: #2f6fd0;
  --bk-info-soft: #e2ecfa;
  --bk-info-border: #22221f;
  --bk-neutral: #22221f;
  --bk-neutral-soft: #f0f0e6;
  --bk-neutral-border: #22221f;
  --bk-on-neutral: #fdfdf7;

  --bk-radius-scale: 1.2;
  --bk-radius-field: 12px 4px 14px 6px;
  --bk-radius-card: 14px 6px 16px 8px;
  --bk-radius-overlay: 18px 8px 20px 10px;

  --bk-shadow-xs: 1px 2px 0 rgb(34 34 31 / 0.5);
  --bk-shadow-sm: 2px 3px 0 rgb(34 34 31 / 0.45);
  --bk-shadow-md: 3px 4px 0 rgb(34 34 31 / 0.4);
  --bk-shadow-lg: 4px 6px 0 rgb(34 34 31 / 0.35);
  --bk-shadow-xl: 6px 9px 0 rgb(34 34 31 / 0.3);
  --bk-shadow-2xl: 8px 12px 0 rgb(34 34 31 / 0.28);
  --bk-shadow-inner: inset 2px 2px 0 rgb(34 34 31 / 0.12);

  --bk-ring: #2f6fd0;
  --bk-ring-width: 2px;
  --bk-ring-offset: 3px;
  --bk-ring-style: dashed;

  --bk-btn-border-width: 2px;
  --bk-btn-radius: 14px 6px 16px 8px;
  --bk-btn-shadow: 2px 3px 0 rgb(34 34 31 / 0.55);
  --bk-btn-shadow-hover: 3px 4px 0 rgb(34 34 31 / 0.6);
  --bk-btn-shadow-active: 1px 1px 0 rgb(34 34 31 / 0.6);
  --bk-btn-weight: 700;
  --bk-press-transform: translate(1px, 2px) rotate(0.3deg);
  --bk-hover-transform: rotate(-0.7deg);

  --bk-field-bg: #ffffff;
  --bk-field-border: #22221f;
  --bk-field-border-width: 2px;
  --bk-field-shadow: none;
  --bk-field-placeholder: #9a9a8e;
  --bk-card-border-width: 2px;
  --bk-card-shadow: 3px 4px 0 rgb(34 34 31 / 0.35);
  --bk-card-shadow-hover: 5px 7px 0 rgb(34 34 31 / 0.35);
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #22221f;
  --bk-overlay-shadow: 6px 9px 0 rgb(34 34 31 / 0.4);
  --bk-overlay-bg: rgb(34 34 31 / 0.35);
  --bk-code-bg: #f5f5ea;
  --bk-code-border: #22221f;
  --bk-tooltip-bg: #22221f;
  --bk-selection-bg: #ffe98a;
  --bk-selection-fg: #22221f;
  --bk-scrollbar-thumb: #b9b9ac;
  --bk-divider-color: #22221f;
  --bk-divider-width: 2px;
  --bk-divider-style: solid;

  --bk-body-image:
    linear-gradient(90deg, transparent 3.4rem, rgb(199 63 63 / 0.18) 3.4rem 3.5rem, transparent 3.5rem),
    repeating-linear-gradient(180deg, transparent 0 1.55rem, rgb(47 111 208 / 0.09) 1.55rem 1.6rem);
  --bk-body-attachment: local;
}

[data-bk-style="sketch"][data-bk-theme="dark"] {
  --bk-bg: #1c1c19;
  --bk-bg-subtle: #232320;
  --bk-surface: #232320;
  --bk-surface-2: #2b2b27;
  --bk-surface-3: #363631;
  --bk-text: #f2f2e8;
  --bk-text-muted: #c0c0b4;
  --bk-text-subtle: #8d8d82;
  --bk-text-inverted: #1c1c19;
  --bk-border: #f2f2e8;
  --bk-border-muted: #4a4a43;
  --bk-border-strong: #f2f2e8;
  --bk-primary-border: #f2f2e8;
  --bk-neutral: #f2f2e8;
  --bk-neutral-soft: #2b2b27;
  --bk-neutral-border: #f2f2e8;
  --bk-on-neutral: #1c1c19;
  --bk-field-bg: #232320;
  --bk-field-border: #f2f2e8;
  --bk-code-bg: #2b2b27;
  --bk-code-border: #f2f2e8;
  --bk-overlay-surface: #232320;
  --bk-overlay-border: #f2f2e8;
  --bk-shadow-xs: 1px 2px 0 rgb(242 242 232 / 0.5);
  --bk-shadow-sm: 2px 3px 0 rgb(242 242 232 / 0.45);
  --bk-shadow-md: 3px 4px 0 rgb(242 242 232 / 0.4);
  --bk-shadow-lg: 4px 6px 0 rgb(242 242 232 / 0.35);
  --bk-btn-shadow: 2px 3px 0 rgb(242 242 232 / 0.5);
  --bk-btn-shadow-hover: 3px 4px 0 rgb(242 242 232 / 0.55);
  --bk-btn-shadow-active: 1px 1px 0 rgb(242 242 232 / 0.55);
  --bk-card-shadow: 3px 4px 0 rgb(242 242 232 / 0.3);
  --bk-card-shadow-hover: 5px 7px 0 rgb(242 242 232 / 0.3);
  --bk-overlay-shadow: 6px 9px 0 rgb(242 242 232 / 0.35);
  --bk-tooltip-bg: #f2f2e8;
  --bk-tooltip-fg: #1c1c19;
  --bk-divider-color: #f2f2e8;
  --bk-body-image: repeating-linear-gradient(180deg, transparent 0 1.55rem, rgb(242 242 232 / 0.05) 1.55rem 1.6rem);
}

/* The wobble: an SVG turbulence filter, inlined as a data URI. No assets. */
[data-bk-style="sketch"] .bk-card,
[data-bk-style="sketch"] .bk-btn:not(.bk-btn-link),
[data-bk-style="sketch"] .bk-input,
[data-bk-style="sketch"] .bk-textarea,
[data-bk-style="sketch"] .bk-select,
[data-bk-style="sketch"] .bk-alert,
[data-bk-style="sketch"] .bk-panel,
[data-bk-style="sketch"] .bk-badge,
[data-bk-style="sketch"] .bk-modal,
[data-bk-style="sketch"] .bk-table-wrap {
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w' x='-5%25' y='-15%25' width='110%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#w");
}
@supports not (filter: url("#x")) {
  [data-bk-style="sketch"] .bk-card,
  [data-bk-style="sketch"] .bk-btn { filter: none; }
}
[data-bk-style="sketch"] .bk-card:nth-child(2n) { border-radius: 6px 16px 8px 14px; }
[data-bk-style="sketch"] .bk-btn:nth-of-type(2n) { border-radius: 6px 16px 8px 14px; }
[data-bk-style="sketch"] .bk-avatar { border: 2px solid var(--bk-border); border-radius: 48% 52% 45% 55% / 50% 46% 54% 50%; }
[data-bk-style="sketch"] .bk-check { border-radius: 4px 2px 5px 3px; border-width: 2px; }
[data-bk-style="sketch"] .bk-switch { border: 2px solid var(--bk-border); background: var(--bk-surface); }
[data-bk-style="sketch"] .bk-switch::before { background: var(--bk-border); box-shadow: none; }
[data-bk-style="sketch"] .bk-switch:checked { background: var(--bk-primary-soft); }
[data-bk-style="sketch"] .bk-switch:checked::before { background: var(--bk-primary); }
[data-bk-style="sketch"] .bk-progress { border: 2px solid var(--bk-border); background: transparent; }
[data-bk-style="sketch"] .bk-mark,
[data-bk-style="sketch"] mark {
  background: linear-gradient(180deg, transparent 55%, #ffe98a 55%);
  padding: 0;
}
[data-bk-style="sketch"] .bk-divider { border-style: solid; border-block-start-width: 2px; }
[data-bk-style="sketch"] .bk-table thead th { background: transparent; border-block-end: 2px solid var(--bk-border); }
[data-bk-style="sketch"] .bk-navbar { border-block-end: 2px solid var(--bk-border); background: transparent; }
[data-bk-style="sketch"] .bk-title,
[data-bk-style="sketch"] .bk-display { transform: rotate(-0.6deg); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="sketch"] {
  --bk-danger: #c73f3f;
  --bk-danger-on-soft: #b73535;
  --bk-danger-soft: #f8e2e2;
  --bk-danger-text: #c73f3f;
  --bk-field-placeholder: #909083;
  --bk-info: #2f6fd0;
  --bk-info-on-soft: #2a64bb;
  --bk-info-soft: #e2ecfa;
  --bk-info-text: #2f6fd0;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-secondary: #1f1f1f;
  --bk-on-success: #080808;
  --bk-primary-on-soft: #2a64bb;
  --bk-primary-text: #2f6fd0;
  --bk-secondary: #d06f2f;
  --bk-secondary-on-soft: #9e5424;
  --bk-secondary-soft: #faeade;
  --bk-secondary-text: #ab5b27;
  --bk-success: #3d8b3d;
  --bk-success-on-soft: #347634;
  --bk-success-soft: #e3f2e3;
  --bk-success-text: #388038;
  --bk-warning-on-soft: #85661e;
  --bk-warning-text: #8d6d20;
}
[data-bk-style="sketch"][data-bk-theme="dark"] {
  --bk-danger: #c73f3f;
  --bk-danger-on-soft: #b73535;
  --bk-danger-soft: #f8e2e2;
  --bk-danger-text: #d56e6e;
  --bk-field-placeholder: #9a9a8e;
  --bk-info: #2f6fd0;
  --bk-info-on-soft: #2a64bb;
  --bk-info-soft: #e2ecfa;
  --bk-info-text: #5d8fda;
  --bk-on-danger: #fdf7f7;
  --bk-on-info: #f9fcfe;
  --bk-on-secondary: #1f1f1f;
  --bk-on-success: #020b06;
  --bk-primary-on-soft: #2a64bb;
  --bk-primary-text: #5d8fda;
  --bk-secondary: #d06f2f;
  --bk-secondary-on-soft: #9e5424;
  --bk-secondary-soft: #faeade;
  --bk-secondary-text: #d06f2f;
  --bk-success: #3d8b3d;
  --bk-success-on-soft: #347634;
  --bk-success-soft: #e3f2e3;
  --bk-success-text: #46a046;
  --bk-warning-on-soft: #85661e;
  --bk-warning-text: #d0a02f;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "sketch" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="sketch"][data-bk-theme="auto"] {
  --bk-bg: #1c1c19;
  --bk-bg-subtle: #232320;
  --bk-surface: #232320;
  --bk-surface-2: #2b2b27;
  --bk-surface-3: #363631;
  --bk-text: #f2f2e8;
  --bk-text-muted: #c0c0b4;
  --bk-text-subtle: #8d8d82;
  --bk-text-inverted: #1c1c19;
  --bk-border: #f2f2e8;
  --bk-border-muted: #4a4a43;
  --bk-border-strong: #f2f2e8;
  --bk-primary-border: #f2f2e8;
  --bk-neutral: #f2f2e8;
  --bk-neutral-soft: #2b2b27;
  --bk-neutral-border: #f2f2e8;
  --bk-on-neutral: #1c1c19;
  --bk-field-bg: #232320;
  --bk-field-border: #f2f2e8;
  --bk-code-bg: #2b2b27;
  --bk-code-border: #f2f2e8;
  --bk-overlay-surface: #232320;
  --bk-overlay-border: #f2f2e8;
  --bk-shadow-xs: 1px 2px 0 rgb(242 242 232 / 0.5);
  --bk-shadow-sm: 2px 3px 0 rgb(242 242 232 / 0.45);
  --bk-shadow-md: 3px 4px 0 rgb(242 242 232 / 0.4);
  --bk-shadow-lg: 4px 6px 0 rgb(242 242 232 / 0.35);
  --bk-btn-shadow: 2px 3px 0 rgb(242 242 232 / 0.5);
  --bk-btn-shadow-hover: 3px 4px 0 rgb(242 242 232 / 0.55);
  --bk-btn-shadow-active: 1px 1px 0 rgb(242 242 232 / 0.55);
  --bk-card-shadow: 3px 4px 0 rgb(242 242 232 / 0.3);
  --bk-card-shadow-hover: 5px 7px 0 rgb(242 242 232 / 0.3);
  --bk-overlay-shadow: 6px 9px 0 rgb(242 242 232 / 0.35);
  --bk-tooltip-bg: #f2f2e8;
  --bk-tooltip-fg: #1c1c19;
  --bk-divider-color: #f2f2e8;
  --bk-body-image: repeating-linear-gradient(180deg, transparent 0 1.55rem, rgb(242 242 232 / 0.05) 1.55rem 1.6rem);


  --bk-danger: #c73f3f;
  --bk-danger-on-soft: #b73535;
  --bk-danger-soft: #f8e2e2;
  --bk-danger-text: #d56e6e;
  --bk-field-placeholder: #9a9a8e;
  --bk-info: #2f6fd0;
  --bk-info-on-soft: #2a64bb;
  --bk-info-soft: #e2ecfa;
  --bk-info-text: #5d8fda;
  --bk-on-danger: #fdf7f7;
  --bk-on-info: #f9fcfe;
  --bk-on-secondary: #1f1f1f;
  --bk-on-success: #020b06;
  --bk-primary-on-soft: #2a64bb;
  --bk-primary-text: #5d8fda;
  --bk-secondary: #d06f2f;
  --bk-secondary-on-soft: #9e5424;
  --bk-secondary-soft: #faeade;
  --bk-secondary-text: #d06f2f;
  --bk-success: #3d8b3d;
  --bk-success-on-soft: #347634;
  --bk-success-soft: #e3f2e3;
  --bk-success-text: #46a046;
  --bk-warning-on-soft: #85661e;
  --bk-warning-text: #d0a02f;
}
}


/* =============================================================================
   SKIN — skeuo · Skeuomorphic
   Brushed metal, bevelled edges, glossy highlights, stitched leather. The way
   software looked when it still had to pretend to be an object.
   ========================================================================== */

[data-bk-style="skeuo"] {
  --bk-font-sans: "Lucida Grande", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --bk-font-display: "Palatino Linotype", Palatino, Georgia, serif;
  --bk-heading-weight: 700;
  --bk-heading-font: var(--bk-font-display);

  --bk-bg: #d8d3c7;
  --bk-bg-subtle: #cfcabd;
  --bk-bg-muted: #c4bfb2;
  --bk-surface: #efece4;
  --bk-surface-2: #e2ded3;
  --bk-surface-3: #d2cdc0;
  --bk-surface-inverted: #2f2b24;

  --bk-text: #302b23;
  --bk-text-muted: #5b5347;
  --bk-text-subtle: #857c6e;
  --bk-text-inverted: #f7f4ee;

  --bk-border: #a89f8d;
  --bk-border-muted: #c0b8a7;
  --bk-border-strong: #8b8271;

  --bk-primary: #3a6ea5;
  --bk-primary-hover: #34618f;
  --bk-primary-active: #2c5279;
  --bk-primary-soft: #dbe5f0;
  --bk-primary-border: #7d9cbf;
  --bk-on-primary: #ffffff;
  --bk-secondary: #6b8e23;
  --bk-secondary-soft: #e5edd2;
  --bk-secondary-border: #a3bd6d;
  --bk-on-secondary: #ffffff;
  --bk-success: #4a7d34;
  --bk-success-soft: #e0edd7;
  --bk-success-border: #97bb84;
  --bk-warning: #b4761b;
  --bk-warning-soft: #f5e6cb;
  --bk-warning-border: #d9b473;
  --bk-danger: #a33a30;
  --bk-danger-soft: #f2dcd9;
  --bk-danger-border: #cc8b83;
  --bk-info: #37718f;
  --bk-info-soft: #d9e8ef;
  --bk-info-border: #8bb4c7;
  --bk-neutral: #6d6455;
  --bk-neutral-soft: #e2ded3;
  --bk-neutral-border: #a89f8d;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 1.4;
  --bk-radius-field: var(--bk-radius-md);
  --bk-radius-card: var(--bk-radius-lg);

  --bk-shadow-color: 40 25% 22%;
  --bk-shadow-strength: 1.6;
  --bk-inner-highlight: inset 0 1px 0 rgb(255 255 255 / 0.75);

  --bk-body-image:
    linear-gradient(rgb(255 255 255 / 0.05), rgb(0 0 0 / 0.08)),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.018) 0 1px, transparent 1px 3px);
  --bk-surface-image: linear-gradient(180deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0) 55%, rgb(0 0 0 / 0.05));

  --bk-btn-image: linear-gradient(180deg, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.06) 48%, rgb(0 0 0 / 0.1));
  --bk-btn-border-width: 1px;
  --bk-btn-shadow: var(--bk-inner-highlight), 0 1px 2px rgb(60 50 35 / 0.35);
  --bk-btn-shadow-hover: var(--bk-inner-highlight), 0 2px 4px rgb(60 50 35 / 0.4);
  --bk-btn-shadow-active: inset 0 2px 4px rgb(0 0 0 / 0.35);
  --bk-btn-weight: 600;
  --bk-press-transform: translateY(1px);

  --bk-field-bg: #fbfaf6;
  --bk-field-border: #9c9382;
  --bk-field-shadow: inset 0 2px 4px rgb(0 0 0 / 0.18), 0 1px 0 rgb(255 255 255 / 0.7);
  --bk-field-shadow-focus: inset 0 2px 4px rgb(0 0 0 / 0.18), 0 0 6px rgb(58 110 165 / 0.55);
  --bk-card-image: linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 40%);
  --bk-card-shadow: var(--bk-inner-highlight), 0 2px 5px rgb(60 50 35 / 0.28);
  --bk-card-shadow-hover: var(--bk-inner-highlight), 0 5px 12px rgb(60 50 35 / 0.34);
  --bk-overlay-surface: #efece4;
  --bk-overlay-shadow: 0 20px 50px rgb(30 24 16 / 0.5), var(--bk-inner-highlight);
  --bk-code-bg: #f6f3ea;
  --bk-code-border: #b6ad9b;
  --bk-tooltip-bg: #3b352c;
  --bk-selection-bg: rgb(58 110 165 / 0.3);
  --bk-scrollbar-thumb: #a89f8d;
}

[data-bk-style="skeuo"][data-bk-theme="dark"] {
  --bk-bg: #2b2721;
  --bk-bg-subtle: #322d26;
  --bk-surface: #3a352c;
  --bk-surface-2: #322d26;
  --bk-surface-3: #464035;
  --bk-text: #ebe4d6;
  --bk-text-muted: #b6ad9b;
  --bk-text-subtle: #8b8272;
  --bk-border: #564f42;
  --bk-border-muted: #443e34;
  --bk-border-strong: #6d6455;
  --bk-primary: #6fa3d6;
  --bk-primary-soft: #26313d;
  --bk-field-bg: #241f1a;
  --bk-field-border: #5b5347;
  --bk-code-bg: #241f1a;
  --bk-code-border: #564f42;
  --bk-inner-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
  --bk-surface-image: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(0 0 0 / 0.12));
  --bk-overlay-surface: #3a352c;
}

[data-bk-style="skeuo"] .bk-navbar {
  background-image: linear-gradient(180deg, #f3f0e8, #cdc7ba);
  border-block-end: 1px solid #8b8271;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), 0 1px 3px rgb(0 0 0 / 0.25);
}
[data-bk-style="skeuo"] .bk-table thead th {
  background-image: linear-gradient(180deg, #eae6dc, #cfcabd);
  border-block-end: 1px solid #9c9382;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.6);
}
[data-bk-style="skeuo"] .bk-progress {
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.3);
  border: 1px solid #9c9382;
}
[data-bk-style="skeuo"] .bk-progress-bar {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
}
[data-bk-style="skeuo"] .bk-switch {
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.3);
  background-image: linear-gradient(180deg, rgb(0 0 0 / 0.08), transparent);
}
[data-bk-style="skeuo"] .bk-switch::before {
  background-image: linear-gradient(180deg, #ffffff, #d9d3c6);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 #fff;
}
[data-bk-style="skeuo"] .bk-badge { text-shadow: 0 1px 0 rgb(255 255 255 / 0.4); }
[data-bk-style="skeuo"] .bk-tab[aria-selected="true"] {
  background-image: linear-gradient(180deg, #fbfaf6, #ded9cd);
  box-shadow: inset 0 1px 0 #fff;
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="skeuo"] {
  --bk-danger: #a33a30;
  --bk-danger-on-soft: #a33a30;
  --bk-danger-soft: #f2dcd9;
  --bk-danger-text: #9b372e;
  --bk-info: #37718f;
  --bk-info-on-soft: #336884;
  --bk-info-soft: #d9e8ef;
  --bk-info-text: #2d5d75;
  --bk-neutral-on-soft: #675f51;
  --bk-neutral-text: #5f574a;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-primary: #ffffff;
  --bk-on-secondary: #171717;
  --bk-on-success: #ffffff;
  --bk-on-warning: #171717;
  --bk-primary: #3a6ea5;
  --bk-primary-on-soft: #356496;
  --bk-primary-soft: #dbe5f0;
  --bk-primary-text: #2f5a87;
  --bk-secondary: #6b8e23;
  --bk-secondary-on-soft: #526d1b;
  --bk-secondary-soft: #e5edd2;
  --bk-secondary-text: #465d17;
  --bk-success: #4a7d34;
  --bk-success-on-soft: #416f2e;
  --bk-success-soft: #e0edd7;
  --bk-success-text: #396028;
  --bk-text-subtle: #776f62;
  --bk-warning: #b4761b;
  --bk-warning-on-soft: #885914;
  --bk-warning-soft: #f5e6cb;
  --bk-warning-text: #7a5012;
}
[data-bk-style="skeuo"][data-bk-theme="dark"] {
  --bk-danger: #a33a30;
  --bk-danger-on-soft: #a33a30;
  --bk-danger-soft: #f2dcd9;
  --bk-danger-text: #db8e86;
  --bk-info: #37718f;
  --bk-info-on-soft: #336884;
  --bk-info-soft: #d9e8ef;
  --bk-info-text: #6fa9c7;
  --bk-neutral-on-soft: #675f51;
  --bk-neutral-text: #aaa192;
  --bk-on-danger: #f6d5d9;
  --bk-on-info: #e6f2fd;
  --bk-on-primary: #333333;
  --bk-on-secondary: #171717;
  --bk-on-success: #f4fdf8;
  --bk-on-warning: #1f1503;
  --bk-primary: #6fa3d6;
  --bk-primary-on-soft: #6fa3d6;
  --bk-primary-soft: #26313d;
  --bk-primary-text: #6fa3d6;
  --bk-secondary: #6b8e23;
  --bk-secondary-on-soft: #526d1b;
  --bk-secondary-soft: #e5edd2;
  --bk-secondary-text: #84af2b;
  --bk-success: #4a7d34;
  --bk-success-on-soft: #416f2e;
  --bk-success-soft: #e0edd7;
  --bk-success-text: #6ab34a;
  --bk-text-subtle: #978e80;
  --bk-warning: #b4761b;
  --bk-warning-on-soft: #885914;
  --bk-warning-soft: #f5e6cb;
  --bk-warning-text: #de9324;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "skeuo" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="skeuo"][data-bk-theme="auto"] {
  --bk-bg: #2b2721;
  --bk-bg-subtle: #322d26;
  --bk-surface: #3a352c;
  --bk-surface-2: #322d26;
  --bk-surface-3: #464035;
  --bk-text: #ebe4d6;
  --bk-text-muted: #b6ad9b;
  --bk-text-subtle: #8b8272;
  --bk-border: #564f42;
  --bk-border-muted: #443e34;
  --bk-border-strong: #6d6455;
  --bk-primary: #6fa3d6;
  --bk-primary-soft: #26313d;
  --bk-field-bg: #241f1a;
  --bk-field-border: #5b5347;
  --bk-code-bg: #241f1a;
  --bk-code-border: #564f42;
  --bk-inner-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
  --bk-surface-image: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(0 0 0 / 0.12));
  --bk-overlay-surface: #3a352c;


  --bk-danger: #a33a30;
  --bk-danger-on-soft: #a33a30;
  --bk-danger-soft: #f2dcd9;
  --bk-danger-text: #db8e86;
  --bk-info: #37718f;
  --bk-info-on-soft: #336884;
  --bk-info-soft: #d9e8ef;
  --bk-info-text: #6fa9c7;
  --bk-neutral-on-soft: #675f51;
  --bk-neutral-text: #aaa192;
  --bk-on-danger: #f6d5d9;
  --bk-on-info: #e6f2fd;
  --bk-on-primary: #333333;
  --bk-on-secondary: #171717;
  --bk-on-success: #f4fdf8;
  --bk-on-warning: #1f1503;
  --bk-primary: #6fa3d6;
  --bk-primary-on-soft: #6fa3d6;
  --bk-primary-soft: #26313d;
  --bk-primary-text: #6fa3d6;
  --bk-secondary: #6b8e23;
  --bk-secondary-on-soft: #526d1b;
  --bk-secondary-soft: #e5edd2;
  --bk-secondary-text: #84af2b;
  --bk-success: #4a7d34;
  --bk-success-on-soft: #416f2e;
  --bk-success-soft: #e0edd7;
  --bk-success-text: #6ab34a;
  --bk-text-subtle: #978e80;
  --bk-warning: #b4761b;
  --bk-warning-on-soft: #885914;
  --bk-warning-soft: #f5e6cb;
  --bk-warning-text: #de9324;
}
}


/* =============================================================================
   SKIN — solarpunk · Botanical optimism
   Warm brass and leaf green on limewashed plaster, generous curves, soft light.
   The future as a greenhouse rather than a server rack.
   ========================================================================== */

[data-bk-style="solarpunk"] {
  --bk-font-sans: "Work Sans", "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  --bk-font-display: "Fraunces", "Bitter", Georgia, serif;
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 600;
  --bk-heading-tracking: -0.012em;

  --bk-bg: #f5f7ec;
  --bk-bg-subtle: #eef2e0;
  --bk-bg-muted: #e3ebd0;
  --bk-surface: #fcfdf6;
  --bk-surface-2: #eef2e0;
  --bk-surface-3: #dfe8cc;
  --bk-surface-inverted: #1d2618;

  --bk-text: #22301c;
  --bk-text-muted: #4f6045;
  --bk-text-subtle: #82927a;
  --bk-text-inverted: #fcfdf6;

  --bk-border: #cfdcb8;
  --bk-border-muted: #e3ebd0;
  --bk-border-strong: #a3b98a;

  --bk-primary: #3f7d3a;
  --bk-primary-hover: #356b31;
  --bk-primary-active: #2b5828;
  --bk-primary-soft: #e0efd9;
  --bk-primary-border: #a8cfa0;
  --bk-on-primary: #fcfdf6;
  --bk-secondary: #a97a24;
  --bk-secondary-hover: #92681d;
  --bk-secondary-soft: #f6ecd4;
  --bk-secondary-border: #ddc186;
  --bk-on-secondary: #fcfdf6;
  --bk-success: #3f7d3a;
  --bk-success-soft: #e0efd9;
  --bk-success-border: #a8cfa0;
  --bk-warning: #a06a12;
  --bk-warning-soft: #f7ead0;
  --bk-warning-border: #dcbc7c;
  --bk-danger: #a4402e;
  --bk-danger-soft: #f6e2dc;
  --bk-danger-border: #d7a496;
  --bk-info: #2f6f78;
  --bk-info-soft: #ddeef0;
  --bk-info-border: #9cc6cc;
  --bk-neutral: #3d4a37;
  --bk-neutral-soft: #e8eedb;
  --bk-neutral-border: #cfdcb8;
  --bk-on-neutral: #fcfdf6;

  --bk-radius-scale: 2;
  --bk-radius-field: var(--bk-radius-xl);
  --bk-radius-card: var(--bk-radius-2xl);
  --bk-radius-overlay: var(--bk-radius-2xl);

  --bk-shadow-color: 100 25% 25%;
  --bk-shadow-strength: 0.85;

  --bk-btn-radius: var(--bk-radius-full);
  --bk-btn-weight: 600;
  --bk-btn-shadow: 0 1px 2px rgb(60 80 40 / 0.1);
  --bk-btn-shadow-hover: 0 6px 18px rgb(60 80 40 / 0.18);
  --bk-btn-shadow-active: 0 1px 2px rgb(60 80 40 / 0.14);
  --bk-hover-transform: translateY(-2px);
  --bk-press-transform: translateY(0);

  --bk-field-bg: #fcfdf6;
  --bk-field-border: #c2d3a8;
  --bk-field-border-hover: #3f7d3a;
  --bk-field-shadow: none;
  --bk-field-placeholder: #9aab90;
  --bk-card-shadow: 0 2px 12px rgb(60 80 40 / 0.07);
  --bk-card-shadow-hover: 0 10px 28px rgb(60 80 40 / 0.13);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #fcfdf6;
  --bk-overlay-shadow: 0 24px 60px rgb(30 45 20 / 0.22);
  --bk-overlay-bg: rgb(34 48 28 / 0.35);
  --bk-code-bg: #eef2e0;
  --bk-code-border: #cfdcb8;
  --bk-tooltip-bg: #22301c;
  --bk-selection-bg: rgb(63 125 58 / 0.24);
  --bk-scrollbar-thumb: #c2d3a8;
  --bk-divider-color: #cfdcb8;

  --bk-body-image:
    radial-gradient(48rem 32rem at 88% -12%, rgb(169 122 36 / 0.14), transparent 62%),
    radial-gradient(44rem 34rem at 4% 104%, rgb(63 125 58 / 0.14), transparent 60%);
  --bk-body-attachment: fixed;
}

[data-bk-style="solarpunk"][data-bk-theme="dark"] {
  --bk-bg: #131a10;
  --bk-bg-subtle: #182015;
  --bk-surface: #1a2317;
  --bk-surface-2: #1f2a1b;
  --bk-surface-3: #273422;
  --bk-text: #e8f0df;
  --bk-text-muted: #adbfa2;
  --bk-text-subtle: #7d8f74;
  --bk-text-inverted: #131a10;
  --bk-border: #2f4028;
  --bk-border-muted: #22301c;
  --bk-border-strong: #4a6440;
  --bk-primary: #86c47c;
  --bk-primary-hover: #99d08f;
  --bk-primary-soft: #1c2b18;
  --bk-primary-border: #3c5a35;
  --bk-on-primary: #0d1509;
  --bk-secondary: #dcae5c;
  --bk-secondary-soft: #2b2210;
  --bk-secondary-border: #5c4a22;
  --bk-on-secondary: #1a1305;
  --bk-neutral: #e8f0df;
  --bk-neutral-soft: #1f2a1b;
  --bk-neutral-border: #2f4028;
  --bk-on-neutral: #131a10;
  --bk-field-bg: #1a2317;
  --bk-field-border: #38492f;
  --bk-code-bg: #182015;
  --bk-code-border: #2f4028;
  --bk-overlay-surface: #1a2317;
  --bk-tooltip-bg: #e8f0df;
  --bk-tooltip-fg: #131a10;
  --bk-divider-color: #2f4028;
  --bk-body-image:
    radial-gradient(48rem 32rem at 88% -12%, rgb(220 174 92 / 0.12), transparent 62%),
    radial-gradient(44rem 34rem at 4% 104%, rgb(134 196 124 / 0.12), transparent 60%);
}

[data-bk-style="solarpunk"] .bk-card { border-start-end-radius: var(--bk-radius-3xl); }
[data-bk-style="solarpunk"] .bk-navbar { background: transparent; border-block-end: 1px solid var(--bk-border); }
[data-bk-style="solarpunk"] .bk-table thead th { background: transparent; border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="solarpunk"] .bk-title { font-style: italic; }
[data-bk-style="solarpunk"] .bk-section-head .bk-eyebrow::before { content: "❋ "; color: var(--bk-secondary); }
[data-bk-style="solarpunk"] .bk-avatar { border-radius: 52% 48% 44% 56% / 48% 52% 48% 52%; }
[data-bk-style="solarpunk"] .bk-badge { border-radius: var(--bk-radius-full); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="solarpunk"] {
  --bk-danger: #a4402e;
  --bk-danger-on-soft: #a4402e;
  --bk-danger-soft: #f6e2dc;
  --bk-danger-text: #a4402e;
  --bk-field-placeholder: #809573;
  --bk-info: #2f6f78;
  --bk-info-on-soft: #2f6f78;
  --bk-info-soft: #ddeef0;
  --bk-info-text: #2f6f78;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-secondary: #161805;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-primary-on-soft: #3a7335;
  --bk-primary-text: #3f7d3a;
  --bk-secondary: #a97a24;
  --bk-secondary-on-soft: #87621d;
  --bk-secondary-soft: #f6ecd4;
  --bk-secondary-text: #8c651e;
  --bk-success: #3f7d3a;
  --bk-success-on-soft: #3a7335;
  --bk-success-soft: #e0efd9;
  --bk-success-text: #3f7d3a;
  --bk-text-subtle: #73826b;
  --bk-warning: #a06a12;
  --bk-warning-on-soft: #8e5e10;
  --bk-warning-soft: #f7ead0;
  --bk-warning-text: #976411;
}
[data-bk-style="solarpunk"][data-bk-theme="dark"] {
  --bk-danger: #a4402e;
  --bk-danger-on-soft: #a4402e;
  --bk-danger-soft: #f6e2dc;
  --bk-danger-text: #d16e5c;
  --bk-field-placeholder: #9aab90;
  --bk-info: #2f6f78;
  --bk-info-on-soft: #2f6f78;
  --bk-info-soft: #ddeef0;
  --bk-info-text: #4098a4;
  --bk-on-danger: #f7d9dc;
  --bk-on-info: #d8ebfb;
  --bk-on-secondary: #1a1305;
  --bk-on-success: #ebfcf3;
  --bk-on-warning: #ffffff;
  --bk-primary-on-soft: #86c47c;
  --bk-primary-text: #86c47c;
  --bk-secondary: #dcae5c;
  --bk-secondary-on-soft: #dcae5c;
  --bk-secondary-soft: #2b2210;
  --bk-secondary-text: #dcae5c;
  --bk-success: #3f7d3a;
  --bk-success-on-soft: #3a7335;
  --bk-success-soft: #e0efd9;
  --bk-success-text: #4f9c49;
  --bk-text-subtle: #7d8f74;
  --bk-warning: #9b6711;
  --bk-warning-on-soft: #8e5e10;
  --bk-warning-soft: #f7ead0;
  --bk-warning-text: #c07f16;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "solarpunk" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="solarpunk"][data-bk-theme="auto"] {
  --bk-bg: #131a10;
  --bk-bg-subtle: #182015;
  --bk-surface: #1a2317;
  --bk-surface-2: #1f2a1b;
  --bk-surface-3: #273422;
  --bk-text: #e8f0df;
  --bk-text-muted: #adbfa2;
  --bk-text-subtle: #7d8f74;
  --bk-text-inverted: #131a10;
  --bk-border: #2f4028;
  --bk-border-muted: #22301c;
  --bk-border-strong: #4a6440;
  --bk-primary: #86c47c;
  --bk-primary-hover: #99d08f;
  --bk-primary-soft: #1c2b18;
  --bk-primary-border: #3c5a35;
  --bk-on-primary: #0d1509;
  --bk-secondary: #dcae5c;
  --bk-secondary-soft: #2b2210;
  --bk-secondary-border: #5c4a22;
  --bk-on-secondary: #1a1305;
  --bk-neutral: #e8f0df;
  --bk-neutral-soft: #1f2a1b;
  --bk-neutral-border: #2f4028;
  --bk-on-neutral: #131a10;
  --bk-field-bg: #1a2317;
  --bk-field-border: #38492f;
  --bk-code-bg: #182015;
  --bk-code-border: #2f4028;
  --bk-overlay-surface: #1a2317;
  --bk-tooltip-bg: #e8f0df;
  --bk-tooltip-fg: #131a10;
  --bk-divider-color: #2f4028;
  --bk-body-image:
    radial-gradient(48rem 32rem at 88% -12%, rgb(220 174 92 / 0.12), transparent 62%),
    radial-gradient(44rem 34rem at 4% 104%, rgb(134 196 124 / 0.12), transparent 60%);


  --bk-danger: #a4402e;
  --bk-danger-on-soft: #a4402e;
  --bk-danger-soft: #f6e2dc;
  --bk-danger-text: #d16e5c;
  --bk-field-placeholder: #9aab90;
  --bk-info: #2f6f78;
  --bk-info-on-soft: #2f6f78;
  --bk-info-soft: #ddeef0;
  --bk-info-text: #4098a4;
  --bk-on-danger: #f7d9dc;
  --bk-on-info: #d8ebfb;
  --bk-on-secondary: #1a1305;
  --bk-on-success: #ebfcf3;
  --bk-on-warning: #ffffff;
  --bk-primary-on-soft: #86c47c;
  --bk-primary-text: #86c47c;
  --bk-secondary: #dcae5c;
  --bk-secondary-on-soft: #dcae5c;
  --bk-secondary-soft: #2b2210;
  --bk-secondary-text: #dcae5c;
  --bk-success: #3f7d3a;
  --bk-success-on-soft: #3a7335;
  --bk-success-soft: #e0efd9;
  --bk-success-text: #4f9c49;
  --bk-text-subtle: #7d8f74;
  --bk-warning: #9b6711;
  --bk-warning-on-soft: #8e5e10;
  --bk-warning-soft: #f7ead0;
  --bk-warning-text: #c07f16;
}
}


/* =============================================================================
   SKIN — space · Observatory
   Deep-field navy with a real star field, instrument cyan, orbital hairlines
   and the quiet precision of something built to point at a very small part of
   the sky for a very long time.
   ========================================================================== */

[data-bk-style="space"] {
  --bk-font-sans: "Exo 2", "Barlow", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bk-font-mono: "Roboto Mono", ui-monospace, monospace;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 300;
  --bk-heading-tracking: 0.06em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.2em;

  --_cyan: #58d6ff;

  --bk-bg: #05070f;
  --bk-bg-subtle: #080b16;
  --bk-bg-muted: #0d111f;
  --bk-surface: #0a0e1a;
  --bk-surface-2: #0f1424;
  --bk-surface-3: #171d31;
  --bk-surface-inverted: #eef3fb;

  --bk-text: #e6edf8;
  --bk-text-muted: #9aa7bf;
  --bk-text-subtle: #6b7794;
  --bk-text-inverted: #05070f;

  --bk-border: #1e2740;
  --bk-border-muted: #141a2c;
  --bk-border-strong: #35486e;
  --bk-border-width: 1px;

  --bk-primary: var(--_cyan);
  --bk-primary-hover: #78e0ff;
  --bk-primary-active: #99e9ff;
  --bk-primary-soft: #082430;
  --bk-primary-border: #17516b;
  --bk-on-primary: #01131b;
  --bk-secondary: #b39dff;
  --bk-secondary-hover: #c2b1ff;
  --bk-secondary-soft: #171335;
  --bk-secondary-border: #33296b;
  --bk-on-secondary: #0a0620;
  --bk-success: #4fdca0;
  --bk-success-soft: #06291d;
  --bk-success-border: #10573c;
  --bk-on-success: #001b11;
  --bk-warning: #ffc861;
  --bk-warning-soft: #2c2110;
  --bk-warning-border: #61481a;
  --bk-on-warning: #1a1200;
  --bk-danger: #ff7089;
  --bk-danger-soft: #2e0f19;
  --bk-danger-border: #66203a;
  --bk-on-danger: #1c0409;
  --bk-info: var(--_cyan);
  --bk-info-soft: #082430;
  --bk-info-border: #17516b;
  --bk-on-info: #01131b;
  --bk-neutral: #cdd7ea;
  --bk-neutral-soft: #0f1424;
  --bk-neutral-border: #1e2740;
  --bk-on-neutral: #05070f;

  --bk-radius-scale: 1.4;
  --bk-radius-field: var(--bk-radius-lg);
  --bk-radius-card: var(--bk-radius-lg);
  --bk-radius-overlay: var(--bk-radius-xl);
  --bk-radius-pill: 9999px;

  --bk-shadow-xs: none;
  --bk-shadow-sm: 0 0 0 1px rgb(88 214 255 / 0.08);
  --bk-shadow-md: 0 0 0 1px rgb(88 214 255 / 0.12), 0 8px 30px rgb(0 0 0 / 0.6);
  --bk-shadow-lg: 0 0 0 1px rgb(88 214 255 / 0.16), 0 18px 50px rgb(0 0 0 / 0.7);
  --bk-shadow-xl: 0 0 0 1px rgb(88 214 255 / 0.22), 0 30px 70px rgb(0 0 0 / 0.8);
  --bk-shadow-2xl: 0 0 0 1px rgb(88 214 255 / 0.28), 0 44px 100px rgb(0 0 0 / 0.85);
  --bk-shadow-inner: inset 0 0 30px rgb(88 214 255 / 0.06);

  --bk-ring: var(--_cyan);
  --bk-ring-width: 1px;
  --bk-ring-offset: 3px;

  --bk-btn-weight: 500;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.16em;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: 0 0 20px rgb(88 214 255 / 0.3);
  --bk-btn-shadow-active: none;
  --bk-press-transform: translateY(1px);

  --bk-field-bg: rgb(255 255 255 / 0.03);
  --bk-field-border: #26314f;
  --bk-field-border-hover: var(--_cyan);
  --bk-field-shadow: none;
  --bk-field-shadow-focus: 0 0 16px rgb(88 214 255 / 0.28);
  --bk-field-placeholder: #5d6885;

  --bk-card-bg: rgb(10 14 26 / 0.72);
  --bk-card-border: #1e2740;
  --bk-card-shadow: 0 0 0 1px rgb(88 214 255 / 0.06);
  --bk-card-shadow-hover: 0 0 0 1px rgb(88 214 255 / 0.2), 0 12px 40px rgb(0 0 0 / 0.6);
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-surface: #0a0e1a;
  --bk-overlay-border: #35486e;
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(2 3 8 / 0.85);
  --bk-code-bg: rgb(255 255 255 / 0.03);
  --bk-code-border: #1e2740;
  --bk-tooltip-bg: var(--_cyan);
  --bk-tooltip-fg: #01131b;
  --bk-selection-bg: rgb(88 214 255 / 0.35);
  --bk-scrollbar-thumb: #26314f;
  --bk-divider-color: #1e2740;

  /* A star field, drawn from four offset dot layers. */
  --bk-body-image:
    radial-gradient(1.2px 1.2px at 18% 24%, rgb(255 255 255 / 0.9), transparent 100%),
    radial-gradient(1px 1px at 62% 12%, rgb(200 225 255 / 0.75), transparent 100%),
    radial-gradient(1.4px 1.4px at 84% 58%, rgb(255 255 255 / 0.8), transparent 100%),
    radial-gradient(1px 1px at 34% 76%, rgb(190 215 255 / 0.7), transparent 100%),
    radial-gradient(60rem 40rem at 78% -8%, rgb(88 214 255 / 0.1), transparent 60%),
    radial-gradient(52rem 40rem at 8% 96%, rgb(179 157 255 / 0.1), transparent 60%);
  --bk-body-attachment: fixed;
  color-scheme: dark;
}
[data-bk-style="space"] body,
body[data-bk-style="space"] {
  background-size: 22rem 22rem, 17rem 17rem, 29rem 29rem, 13rem 13rem, 100% 100%, 100% 100%;
}

[data-bk-style="space"][data-bk-theme="light"] {
  /* Daytime at the observatory: the same instrument, the dome open. */
  --bk-bg: #eef2f8;
  --bk-bg-subtle: #e4eaf3;
  --bk-surface: #ffffff;
  --bk-surface-2: #eaeff6;
  --bk-surface-3: #dae2ee;
  --bk-surface-inverted: #05070f;
  --bk-text: #101728;
  --bk-text-muted: #46536e;
  --bk-text-subtle: #7c88a2;
  --bk-text-inverted: #ffffff;
  --bk-border: #c6d0e2;
  --bk-border-muted: #e0e6f0;
  --bk-border-strong: #4a6489;
  --bk-primary: #0d6d92;
  --bk-primary-hover: #0a5a79;
  --bk-primary-soft: #dcf0f8;
  --bk-primary-border: #9dcfe4;
  --bk-on-primary: #ffffff;
  --bk-secondary: #5741b8;
  --bk-secondary-soft: #e6e1f8;
  --bk-secondary-border: #b8abee;
  --bk-on-secondary: #ffffff;
  --bk-success: #147a55; --bk-success-soft: #d9f0e6; --bk-success-border: #96d6bb;
  --bk-warning: #8a6212; --bk-warning-soft: #f6ecd3; --bk-warning-border: #dcc186;
  --bk-danger: #b02b47; --bk-danger-soft: #fadfe5; --bk-danger-border: #eba9b9;
  --bk-info: #0d6d92; --bk-info-soft: #dcf0f8; --bk-info-border: #9dcfe4;
  --bk-neutral: #101728; --bk-neutral-soft: #eaeff6; --bk-neutral-border: #c6d0e2;
  --bk-on-neutral: #ffffff;
  --bk-field-bg: #ffffff;
  --bk-field-border: #b4c1d7;
  --bk-card-bg: #ffffff;
  --bk-card-border: #dbe2ee;
  --bk-code-bg: #eaeff6;
  --bk-code-border: #c6d0e2;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #c6d0e2;
  --bk-tooltip-bg: #101728;
  --bk-tooltip-fg: #ffffff;
  --bk-divider-color: #c6d0e2;
  --bk-body-image: radial-gradient(60rem 40rem at 78% -8%, rgb(13 109 146 / 0.08), transparent 60%);
  color-scheme: light;
}

/* Orbital hairlines behind the hero. */
[data-bk-style="space"] .bk-hero { position: relative; }
[data-bk-style="space"] .bk-hero::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 46rem;
  block-size: 46rem;
  translate: -50% -50%;
  border: 1px solid rgb(88 214 255 / 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 6rem rgb(88 214 255 / 0.04) inset,
    0 0 0 1px rgb(88 214 255 / 0.06);
  z-index: -1;
  pointer-events: none;
}
[data-bk-style="space"] .bk-navbar { background: rgb(5 7 15 / 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-bk-style="space"][data-bk-theme="light"] .bk-navbar { background: rgb(255 255 255 / 0.75); }
[data-bk-style="space"] .bk-card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-bk-style="space"] .bk-stat-value { font-family: var(--bk-font-mono); font-weight: 300; }
[data-bk-style="space"] .bk-table thead th { background: transparent; color: var(--bk-primary); border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="space"] .bk-badge { border: 1px solid currentColor; }
[data-bk-style="space"] .bk-progress-bar { box-shadow: 0 0 12px var(--bk-primary); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="space"] {
  --bk-danger: #ff7089;
  --bk-danger-soft: #2e0f19;
  --bk-info: #58d6ff;
  --bk-info-soft: #082430;
  --bk-on-danger: #1c0409;
  --bk-on-info: #01131b;
  --bk-on-success: #001b11;
  --bk-on-warning: #1a1200;
  --bk-success: #4fdca0;
  --bk-success-on-soft: #4fdca0;
  --bk-success-soft: #06291d;
  --bk-success-text: #4fdca0;
  --bk-text-subtle: #6b7794;
  --bk-warning: #ffc861;
  --bk-warning-soft: #2c2110;
}
[data-bk-style="space"][data-bk-theme="light"] {
  --bk-danger: #b02b47;
  --bk-danger-soft: #fadfe5;
  --bk-info: #0d6d92;
  --bk-info-soft: #dcf0f8;
  --bk-on-danger: #f9d4db;
  --bk-on-info: #cbeefd;
  --bk-on-success: #b9ffe5;
  --bk-on-warning: #ffecc2;
  --bk-success: #147a55;
  --bk-success-on-soft: #137652;
  --bk-success-soft: #d9f0e6;
  --bk-success-text: #147a55;
  --bk-text-subtle: #707d9a;
  --bk-warning: #8a6212;
  --bk-warning-soft: #f6ecd3;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "space" — generated by scripts/build.mjs */
@media (prefers-color-scheme: light) {
  [data-bk-style="space"][data-bk-theme="auto"] {
  /* Daytime at the observatory: the same instrument, the dome open. */
  --bk-bg: #eef2f8;
  --bk-bg-subtle: #e4eaf3;
  --bk-surface: #ffffff;
  --bk-surface-2: #eaeff6;
  --bk-surface-3: #dae2ee;
  --bk-surface-inverted: #05070f;
  --bk-text: #101728;
  --bk-text-muted: #46536e;
  --bk-text-subtle: #7c88a2;
  --bk-text-inverted: #ffffff;
  --bk-border: #c6d0e2;
  --bk-border-muted: #e0e6f0;
  --bk-border-strong: #4a6489;
  --bk-primary: #0d6d92;
  --bk-primary-hover: #0a5a79;
  --bk-primary-soft: #dcf0f8;
  --bk-primary-border: #9dcfe4;
  --bk-on-primary: #ffffff;
  --bk-secondary: #5741b8;
  --bk-secondary-soft: #e6e1f8;
  --bk-secondary-border: #b8abee;
  --bk-on-secondary: #ffffff;
  --bk-success: #147a55; --bk-success-soft: #d9f0e6; --bk-success-border: #96d6bb;
  --bk-warning: #8a6212; --bk-warning-soft: #f6ecd3; --bk-warning-border: #dcc186;
  --bk-danger: #b02b47; --bk-danger-soft: #fadfe5; --bk-danger-border: #eba9b9;
  --bk-info: #0d6d92; --bk-info-soft: #dcf0f8; --bk-info-border: #9dcfe4;
  --bk-neutral: #101728; --bk-neutral-soft: #eaeff6; --bk-neutral-border: #c6d0e2;
  --bk-on-neutral: #ffffff;
  --bk-field-bg: #ffffff;
  --bk-field-border: #b4c1d7;
  --bk-card-bg: #ffffff;
  --bk-card-border: #dbe2ee;
  --bk-code-bg: #eaeff6;
  --bk-code-border: #c6d0e2;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #c6d0e2;
  --bk-tooltip-bg: #101728;
  --bk-tooltip-fg: #ffffff;
  --bk-divider-color: #c6d0e2;
  --bk-body-image: radial-gradient(60rem 40rem at 78% -8%, rgb(13 109 146 / 0.08), transparent 60%);
  color-scheme: light;


  --bk-danger: #b02b47;
  --bk-danger-soft: #fadfe5;
  --bk-info: #0d6d92;
  --bk-info-soft: #dcf0f8;
  --bk-on-danger: #f9d4db;
  --bk-on-info: #cbeefd;
  --bk-on-success: #b9ffe5;
  --bk-on-warning: #ffecc2;
  --bk-success: #147a55;
  --bk-success-on-soft: #137652;
  --bk-success-soft: #d9f0e6;
  --bk-success-text: #147a55;
  --bk-text-subtle: #707d9a;
  --bk-warning: #8a6212;
  --bk-warning-soft: #f6ecd3;
}
}


/* =============================================================================
   SKIN — swiss · International Typographic Style
   A strict grid, Helvetica-ish type, flush-left ragged-right, one red accent
   and a great deal of white space. No shadows. No decoration. No apologies.
   ========================================================================== */

[data-bk-style="swiss"] {
  --bk-font-sans: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 700;
  --bk-heading-tracking: -0.035em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.08em;
  --bk-leading-tight: 1.05;

  --bk-bg: #ffffff;
  --bk-bg-subtle: #f4f4f4;
  --bk-bg-muted: #ebebeb;
  --bk-surface: #ffffff;
  --bk-surface-2: #f4f4f4;
  --bk-surface-3: #e6e6e6;
  --bk-surface-inverted: #000000;

  --bk-text: #000000;
  --bk-text-muted: #4a4a4a;
  --bk-text-subtle: #8c8c8c;
  --bk-text-inverted: #ffffff;

  --bk-border: #000000;
  --bk-border-muted: #d4d4d4;
  --bk-border-strong: #000000;
  --bk-border-width: 1px;

  --bk-primary: #e2231a;
  --bk-primary-hover: #c81d15;
  --bk-primary-active: #ad1912;
  --bk-primary-soft: #fdecea;
  --bk-primary-border: #e2231a;
  --bk-on-primary: #ffffff;
  --bk-secondary: #000000;
  --bk-secondary-hover: #262626;
  --bk-secondary-soft: #f0f0f0;
  --bk-secondary-border: #000000;
  --bk-on-secondary: #ffffff;
  --bk-success: #007a3d;
  --bk-success-soft: #e5f2eb;
  --bk-success-border: #007a3d;
  --bk-warning: #d97b00;
  --bk-warning-soft: #fdf1e3;
  --bk-warning-border: #d97b00;
  --bk-danger: #e2231a;
  --bk-danger-soft: #fdecea;
  --bk-danger-border: #e2231a;
  --bk-info: #0053a0;
  --bk-info-soft: #e5eef7;
  --bk-info-border: #0053a0;
  --bk-neutral: #000000;
  --bk-neutral-soft: #f0f0f0;
  --bk-neutral-border: #000000;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-xs: none; --bk-shadow-sm: none; --bk-shadow-md: none;
  --bk-shadow-lg: none; --bk-shadow-xl: none; --bk-shadow-2xl: none;
  --bk-shadow-inner: none;

  --bk-ring: #e2231a;
  --bk-ring-width: 2px;
  --bk-ring-offset: 0px;

  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.08em;
  --bk-btn-weight: 700;
  --bk-btn-border-width: 1px;
  --bk-press-transform: none;
  --bk-hover-transform: none;

  --bk-field-border: #000000;
  --bk-field-border-hover: #e2231a;
  --bk-field-shadow: none;
  --bk-field-placeholder: #9e9e9e;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: none;
  --bk-card-border: #000000;
  --bk-card-pad: var(--bk-space-6);
  --bk-overlay-shadow: none;
  --bk-overlay-border: #000000;
  --bk-overlay-bg: rgb(0 0 0 / 0.85);
  --bk-code-bg: #f4f4f4;
  --bk-code-border: #000000;
  --bk-tooltip-bg: #000000;
  --bk-selection-bg: #e2231a;
  --bk-selection-fg: #ffffff;
  --bk-divider-color: #000000;
  --bk-scrollbar-thumb: #000000;
  --bk-container-gutter: var(--bk-space-6);
}

[data-bk-style="swiss"][data-bk-theme="dark"] {
  --bk-bg: #000000;
  --bk-bg-subtle: #0d0d0d;
  --bk-surface: #000000;
  --bk-surface-2: #131313;
  --bk-surface-3: #1e1e1e;
  --bk-surface-inverted: #ffffff;
  --bk-text: #ffffff;
  --bk-text-muted: #b5b5b5;
  --bk-text-subtle: #7a7a7a;
  --bk-text-inverted: #000000;
  --bk-border: #ffffff;
  --bk-border-muted: #333333;
  --bk-border-strong: #ffffff;
  --bk-neutral: #ffffff;
  --bk-neutral-soft: #131313;
  --bk-neutral-border: #ffffff;
  --bk-on-neutral: #000000;
  --bk-primary: #ff3b30;
  --bk-primary-soft: #2a0d0b;
  --bk-field-border: #ffffff;
  --bk-code-bg: #131313;
  --bk-code-border: #ffffff;
  --bk-divider-color: #ffffff;
  --bk-overlay-border: #ffffff;
  --bk-tooltip-bg: #ffffff;
  --bk-tooltip-fg: #000000;
}

[data-bk-style="swiss"] .bk-display,
[data-bk-style="swiss"] .bk-title { text-transform: uppercase; }
[data-bk-style="swiss"] .bk-h-rule,
[data-bk-style="swiss"] .bk-navbar { border-block-end-width: 2px; }
[data-bk-style="swiss"] .bk-section-head { border-block-start: 4px solid var(--bk-text); padding-block-start: var(--bk-space-3); }
[data-bk-style="swiss"] .bk-table thead th {
  background: transparent;
  border-block-end: 2px solid var(--bk-text);
  color: var(--bk-text);
}
[data-bk-style="swiss"] .bk-card { border-width: 1px; }
[data-bk-style="swiss"] .bk-tab[aria-selected="true"] { border-block-end-width: 3px; }
[data-bk-style="swiss"] .bk-badge { border: 1px solid currentColor; }
[data-bk-style="swiss"] .bk-eyebrow { color: var(--bk-primary); }
[data-bk-style="swiss"] .bk-check,
[data-bk-style="swiss"] .bk-switch,
[data-bk-style="swiss"] .bk-avatar { border-radius: 0; }
[data-bk-style="swiss"] .bk-switch::before { border-radius: 0; }
[data-bk-style="swiss"] .bk-progress { border: 1px solid var(--bk-text); background: transparent; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="swiss"] {
  --bk-danger: #e2231a;
  --bk-danger-on-soft: #d02018;
  --bk-danger-soft: #fdecea;
  --bk-danger-text: #e2231a;
  --bk-field-placeholder: #919191;
  --bk-info: #0053a0;
  --bk-info-on-soft: #0053a0;
  --bk-info-soft: #e5eef7;
  --bk-info-text: #0053a0;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-primary: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #292929;
  --bk-primary: #e2231a;
  --bk-primary-on-soft: #d02018;
  --bk-primary-soft: #fdecea;
  --bk-primary-text: #e2231a;
  --bk-secondary-on-soft: #000000;
  --bk-secondary-text: #000000;
  --bk-success: #007a3d;
  --bk-success-on-soft: #007a3d;
  --bk-success-soft: #e5f2eb;
  --bk-success-text: #007a3d;
  --bk-text-subtle: #7f7f7f;
  --bk-warning: #d97b00;
  --bk-warning-on-soft: #a15b00;
  --bk-warning-soft: #fdf1e3;
  --bk-warning-text: #ab6100;
}
[data-bk-style="swiss"][data-bk-theme="dark"] {
  --bk-danger: #dd2219;
  --bk-danger-on-soft: #d02018;
  --bk-danger-soft: #fdecea;
  --bk-danger-text: #e52a21;
  --bk-field-placeholder: #9e9e9e;
  --bk-info: #0053a0;
  --bk-info-on-soft: #0053a0;
  --bk-info-soft: #e5eef7;
  --bk-info-text: #0078e7;
  --bk-on-danger: #ffffff;
  --bk-on-info: #a5d1f6;
  --bk-on-primary: #1c1c1c;
  --bk-on-success: #d1f7e2;
  --bk-on-warning: #1f1503;
  --bk-primary: #ff3b30;
  --bk-primary-on-soft: #ff3b30;
  --bk-primary-soft: #2a0d0b;
  --bk-primary-text: #ff3b30;
  --bk-secondary-on-soft: #000000;
  --bk-secondary-text: #787878;
  --bk-success: #007a3d;
  --bk-success-on-soft: #007a3d;
  --bk-success-soft: #e5f2eb;
  --bk-success-text: #008945;
  --bk-text-subtle: #7a7a7a;
  --bk-warning: #d97b00;
  --bk-warning-on-soft: #a15b00;
  --bk-warning-soft: #fdf1e3;
  --bk-warning-text: #d97b00;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "swiss" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="swiss"][data-bk-theme="auto"] {
  --bk-bg: #000000;
  --bk-bg-subtle: #0d0d0d;
  --bk-surface: #000000;
  --bk-surface-2: #131313;
  --bk-surface-3: #1e1e1e;
  --bk-surface-inverted: #ffffff;
  --bk-text: #ffffff;
  --bk-text-muted: #b5b5b5;
  --bk-text-subtle: #7a7a7a;
  --bk-text-inverted: #000000;
  --bk-border: #ffffff;
  --bk-border-muted: #333333;
  --bk-border-strong: #ffffff;
  --bk-neutral: #ffffff;
  --bk-neutral-soft: #131313;
  --bk-neutral-border: #ffffff;
  --bk-on-neutral: #000000;
  --bk-primary: #ff3b30;
  --bk-primary-soft: #2a0d0b;
  --bk-field-border: #ffffff;
  --bk-code-bg: #131313;
  --bk-code-border: #ffffff;
  --bk-divider-color: #ffffff;
  --bk-overlay-border: #ffffff;
  --bk-tooltip-bg: #ffffff;
  --bk-tooltip-fg: #000000;


  --bk-danger: #dd2219;
  --bk-danger-on-soft: #d02018;
  --bk-danger-soft: #fdecea;
  --bk-danger-text: #e52a21;
  --bk-field-placeholder: #9e9e9e;
  --bk-info: #0053a0;
  --bk-info-on-soft: #0053a0;
  --bk-info-soft: #e5eef7;
  --bk-info-text: #0078e7;
  --bk-on-danger: #ffffff;
  --bk-on-info: #a5d1f6;
  --bk-on-primary: #1c1c1c;
  --bk-on-success: #d1f7e2;
  --bk-on-warning: #1f1503;
  --bk-primary: #ff3b30;
  --bk-primary-on-soft: #ff3b30;
  --bk-primary-soft: #2a0d0b;
  --bk-primary-text: #ff3b30;
  --bk-secondary-on-soft: #000000;
  --bk-secondary-text: #787878;
  --bk-success: #007a3d;
  --bk-success-on-soft: #007a3d;
  --bk-success-soft: #e5f2eb;
  --bk-success-text: #008945;
  --bk-text-subtle: #7a7a7a;
  --bk-warning: #d97b00;
  --bk-warning-on-soft: #a15b00;
  --bk-warning-soft: #fdf1e3;
  --bk-warning-text: #d97b00;
}
}


/* =============================================================================
   SKIN — terminal · CRT phosphor
   Monospace everything, phosphor green on near-black, scanlines and a faint
   bloom. Buttons are bracketed, borders are box-drawing thin.
   ========================================================================== */

[data-bk-style="terminal"] {
  --bk-font-sans: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --bk-font-serif: var(--bk-font-sans);
  --bk-font-mono: var(--bk-font-sans);
  --bk-font-display: var(--bk-font-sans);
  --bk-font-body: var(--bk-font-sans);
  --bk-heading-weight: 700;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.08em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.1em;
  --bk-font-feature: "liga" 0, "calt" 0;

  --_p: #38ff9c;

  --bk-bg: #050806;
  --bk-bg-subtle: #081109;
  --bk-bg-muted: #0b170d;
  --bk-surface: #071009;
  --bk-surface-2: #0b170d;
  --bk-surface-3: #102015;
  --bk-surface-inverted: #38ff9c;

  --bk-text: #b9ffd8;
  --bk-text-muted: #63cf95;
  --bk-text-subtle: #3d8a63;
  --bk-text-inverted: #050806;

  --bk-border: #1b4230;
  --bk-border-muted: #133024;
  --bk-border-strong: #2c6b4c;
  --bk-border-width: 1px;

  --bk-primary: var(--_p);
  --bk-primary-hover: #62ffb2;
  --bk-primary-active: #8affc6;
  --bk-primary-soft: #0d2b1c;
  --bk-primary-border: #2c6b4c;
  --bk-on-primary: #041007;

  --bk-secondary: #4ee2ff;
  --bk-secondary-hover: #74e9ff;
  --bk-secondary-soft: #0a2630;
  --bk-secondary-border: #1f5c6e;
  --bk-on-secondary: #04161c;
  --bk-success: #38ff9c;
  --bk-success-soft: #0d2b1c;
  --bk-success-border: #2c6b4c;
  --bk-on-success: #041007;
  --bk-warning: #ffd84e;
  --bk-warning-soft: #2c2508;
  --bk-warning-border: #6b5a17;
  --bk-on-warning: #1a1500;
  --bk-danger: #ff5f57;
  --bk-danger-soft: #2e0f0e;
  --bk-danger-border: #6e2a26;
  --bk-on-danger: #1c0403;
  --bk-info: #4ee2ff;
  --bk-info-soft: #0a2630;
  --bk-info-border: #1f5c6e;
  --bk-on-info: #04161c;
  --bk-neutral: #63cf95;
  --bk-neutral-soft: #0b170d;
  --bk-neutral-border: #1b4230;
  --bk-on-neutral: #050806;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-none: 0 0 #0000;
  --bk-shadow-xs: 0 0 0 0 transparent;
  --bk-shadow-sm: 0 0 6px rgb(56 255 156 / 0.15);
  --bk-shadow-md: 0 0 12px rgb(56 255 156 / 0.2);
  --bk-shadow-lg: 0 0 22px rgb(56 255 156 / 0.25);
  --bk-shadow-xl: 0 0 34px rgb(56 255 156 / 0.3);
  --bk-shadow-2xl: 0 0 48px rgb(56 255 156 / 0.35);
  --bk-shadow-inner: inset 0 0 12px rgb(56 255 156 / 0.12);

  --bk-ring: var(--_p);
  --bk-ring-width: 1px;
  --bk-ring-offset: 2px;

  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: 0 0 10px rgb(56 255 156 / 0.35);
  --bk-btn-shadow-active: none;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.12em;
  --bk-btn-weight: 700;
  --bk-press-transform: translateY(1px);

  --bk-field-bg: #040705;
  --bk-field-bg-hover: #071009;
  --bk-field-border: #2c6b4c;
  --bk-field-border-hover: var(--_p);
  --bk-field-shadow: none;
  --bk-field-shadow-focus: 0 0 8px rgb(56 255 156 / 0.4);
  --bk-field-placeholder: #2f6f4f;
  --bk-caret: var(--_p);

  --bk-card-bg: #071009;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: 0 0 16px rgb(56 255 156 / 0.18);
  --bk-overlay-surface: #071009;
  --bk-overlay-border: var(--_p);
  --bk-overlay-shadow: 0 0 0 1px var(--_p), 0 0 40px rgb(56 255 156 / 0.25);
  --bk-overlay-bg: rgb(0 0 0 / 0.8);
  --bk-code-bg: #040705;
  --bk-code-border: #1b4230;
  --bk-tooltip-bg: #38ff9c;
  --bk-tooltip-fg: #041007;
  --bk-selection-bg: #38ff9c;
  --bk-selection-fg: #041007;
  --bk-scrollbar-thumb: #2c6b4c;
  --bk-divider-color: #1b4230;

  --bk-body-image:
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.28) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.55));
  --bk-body-attachment: fixed;
  color-scheme: dark;
}
[data-bk-style="terminal"][data-bk-theme="light"] {
  /* amber-on-paper variant for people who like their CRT bright */
  --_p: #b45309;
  --bk-bg: #f5f0e4;
  --bk-surface: #fffbf0;
  --bk-surface-2: #f2ecdc;
  --bk-surface-3: #e7dfca;
  --bk-text: #2c1f08;
  --bk-text-muted: #6b5426;
  --bk-text-subtle: #9c8552;
  --bk-border: #cbb98c;
  --bk-border-strong: #a8905a;
  --bk-primary: #b45309;
  --bk-on-primary: #fffbf0;
  --bk-primary-soft: #f4e6c9;
  --bk-field-bg: #fffbf0;
  --bk-field-border: #a8905a;
  --bk-code-bg: #f2ecdc;
  --bk-tooltip-bg: #2c1f08;
  --bk-tooltip-fg: #fffbf0;
  --bk-selection-bg: #b45309;
  --bk-selection-fg: #fffbf0;
  --bk-body-image: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.05) 0 1px, transparent 1px 3px);
  color-scheme: light;
}

[data-bk-style="terminal"] .bk-btn:not(.bk-btn-link)::before { content: "["; opacity: 0.55; }
[data-bk-style="terminal"] .bk-btn:not(.bk-btn-link)::after { content: "]"; opacity: 0.55; }
[data-bk-style="terminal"] .bk-btn.bk-is-loading::after { content: ""; opacity: 1; }
[data-bk-style="terminal"] .bk-btn-icon::before,
[data-bk-style="terminal"] .bk-btn-icon::after,
[data-bk-style="terminal"] .bk-btn-square::before,
[data-bk-style="terminal"] .bk-btn-square::after,
[data-bk-style="terminal"] .bk-btn-circle::before,
[data-bk-style="terminal"] .bk-btn-circle::after,
[data-bk-style="terminal"] .bk-close::after { content: none; }
[data-bk-style="terminal"] .bk-card,
[data-bk-style="terminal"] .bk-panel,
[data-bk-style="terminal"] .bk-alert { border-style: solid; }
[data-bk-style="terminal"] .bk-card-title::before { content: "// "; color: var(--bk-text-subtle); }
[data-bk-style="terminal"] .bk-check { border-radius: 0; }
[data-bk-style="terminal"] .bk-switch { border-radius: 0; border: 1px solid var(--bk-border-strong); background: transparent; }
[data-bk-style="terminal"] .bk-switch::before { border-radius: 0; background: var(--bk-text-subtle); }
[data-bk-style="terminal"] .bk-switch:checked { background: transparent; }
[data-bk-style="terminal"] .bk-switch:checked::before { background: var(--bk-primary); box-shadow: 0 0 8px var(--bk-primary); }
[data-bk-style="terminal"] .bk-progress { border: 1px solid var(--bk-border-strong); background: transparent; }
[data-bk-style="terminal"] .bk-progress-bar {
  background-image: repeating-linear-gradient(90deg, var(--bk-primary) 0 6px, transparent 6px 8px);
  background-color: transparent;
}
[data-bk-style="terminal"] .bk-input,
[data-bk-style="terminal"] .bk-textarea { caret-color: var(--bk-primary); }
[data-bk-style="terminal"] .bk-navbar { border-block-end: 1px solid var(--bk-border-strong); }
[data-bk-style="terminal"] .bk-navbar-brand::before { content: "$ "; color: var(--bk-primary); }
[data-bk-style="terminal"] .bk-tab[aria-selected="true"]::before { content: "> "; }
[data-bk-style="terminal"] .bk-spinner {
  border-radius: 0;
  animation-timing-function: steps(8, end);
}
[data-bk-style="terminal"] .bk-avatar { border-radius: 0; border: 1px solid var(--bk-border-strong); }
[data-bk-style="terminal"] .bk-badge { border: 1px solid currentColor; }
/* blinking block cursor helper */
[data-bk-style="terminal"] .bk-caret::after {
  content: "█";
  color: var(--bk-primary);
  animation: bk-blink 1s steps(1) infinite;
  margin-inline-start: 0.1em;
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="terminal"] {
  --bk-danger-on-soft: #ff5f57;
  --bk-danger-text: #ff5f57;
  --bk-info-on-soft: #4ee2ff;
  --bk-info-text: #4ee2ff;
  --bk-neutral-on-soft: #63cf95;
  --bk-neutral-text: #63cf95;
  --bk-primary-on-soft: #38ff9c;
  --bk-primary-text: #38ff9c;
  --bk-secondary-on-soft: #4ee2ff;
  --bk-secondary-text: #4ee2ff;
  --bk-success-on-soft: #38ff9c;
  --bk-success-text: #38ff9c;
  --bk-text-subtle: #3d8a63;
  --bk-warning-on-soft: #ffd84e;
  --bk-warning-text: #ffd84e;
}
[data-bk-style="terminal"][data-bk-theme="light"] {
  --bk-danger-on-soft: #ff5f57;
  --bk-danger-text: #d70a00;
  --bk-info-on-soft: #4ee2ff;
  --bk-info-text: #00748b;
  --bk-neutral-on-soft: #63cf95;
  --bk-neutral-text: #25794c;
  --bk-primary-on-soft: #a14a08;
  --bk-primary-text: #aa4f09;
  --bk-secondary-on-soft: #4ee2ff;
  --bk-secondary-text: #00748b;
  --bk-success-on-soft: #38ff9c;
  --bk-success-text: #007a3d;
  --bk-text-subtle: #8f7a4b;
  --bk-warning-on-soft: #ffd84e;
  --bk-warning-text: #816500;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "terminal" — generated by scripts/build.mjs */
@media (prefers-color-scheme: light) {
  [data-bk-style="terminal"][data-bk-theme="auto"] {
  /* amber-on-paper variant for people who like their CRT bright */
  --_p: #b45309;
  --bk-bg: #f5f0e4;
  --bk-surface: #fffbf0;
  --bk-surface-2: #f2ecdc;
  --bk-surface-3: #e7dfca;
  --bk-text: #2c1f08;
  --bk-text-muted: #6b5426;
  --bk-text-subtle: #9c8552;
  --bk-border: #cbb98c;
  --bk-border-strong: #a8905a;
  --bk-primary: #b45309;
  --bk-on-primary: #fffbf0;
  --bk-primary-soft: #f4e6c9;
  --bk-field-bg: #fffbf0;
  --bk-field-border: #a8905a;
  --bk-code-bg: #f2ecdc;
  --bk-tooltip-bg: #2c1f08;
  --bk-tooltip-fg: #fffbf0;
  --bk-selection-bg: #b45309;
  --bk-selection-fg: #fffbf0;
  --bk-body-image: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.05) 0 1px, transparent 1px 3px);
  color-scheme: light;


  --bk-danger-on-soft: #ff5f57;
  --bk-danger-text: #d70a00;
  --bk-info-on-soft: #4ee2ff;
  --bk-info-text: #00748b;
  --bk-neutral-on-soft: #63cf95;
  --bk-neutral-text: #25794c;
  --bk-primary-on-soft: #a14a08;
  --bk-primary-text: #aa4f09;
  --bk-secondary-on-soft: #4ee2ff;
  --bk-secondary-text: #00748b;
  --bk-success-on-soft: #38ff9c;
  --bk-success-text: #007a3d;
  --bk-text-subtle: #8f7a4b;
  --bk-warning-on-soft: #ffd84e;
  --bk-warning-text: #816500;
}
}


/* =============================================================================
   SKIN — thermal · Receipt printer
   One ink, no greys — only dithered dots. Narrow measure, everything
   centre-stamped, perforated rules and the slightly-too-dark edges of paper
   that has been through a hot head.
   ========================================================================== */

[data-bk-style="thermal"] {
  --bk-font-mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --bk-font-sans: var(--bk-font-mono);
  --bk-font-body: var(--bk-font-mono);
  --bk-font-display: var(--bk-font-mono);
  --bk-heading-weight: 700;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.18em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.2em;
  --bk-text-base: 0.8125rem;
  --bk-leading-normal: 1.65;
  --bk-prose-width: 44ch;
  --bk-container-md: 34rem;
  --bk-container-lg: 40rem;
  --bk-container-xl: 46rem;

  --bk-bg: #eceae5;
  --bk-bg-subtle: #e4e1db;
  --bk-bg-muted: #d8d5ce;
  --bk-surface: #f7f6f2;
  --bk-surface-2: #e9e7e1;
  --bk-surface-3: #dbd8d1;
  --bk-surface-inverted: #17171a;

  --bk-text: #17171a;
  --bk-text-muted: #45454a;
  --bk-text-subtle: #77777d;
  --bk-text-inverted: #f7f6f2;

  --bk-border: #17171a;
  --bk-border-muted: #b6b4ae;
  --bk-border-strong: #17171a;
  --bk-border-width: 1px;

  --bk-primary: #17171a;
  --bk-primary-hover: #303036;
  --bk-primary-active: #45454a;
  --bk-primary-soft: #dedcd6;
  --bk-primary-border: #17171a;
  --bk-on-primary: #f7f6f2;
  --bk-secondary: #45454a;
  --bk-secondary-hover: #303036;
  --bk-secondary-soft: #e2e0da;
  --bk-secondary-border: #17171a;
  --bk-on-secondary: #f7f6f2;
  --bk-success: #17171a; --bk-success-soft: #dedcd6; --bk-success-border: #17171a;
  --bk-warning: #17171a; --bk-warning-soft: #dedcd6; --bk-warning-border: #17171a;
  --bk-danger: #17171a; --bk-danger-soft: #d8d4cc; --bk-danger-border: #17171a;
  --bk-info: #17171a; --bk-info-soft: #dedcd6; --bk-info-border: #17171a;
  --bk-neutral: #17171a;
  --bk-neutral-soft: #e4e1db;
  --bk-neutral-border: #17171a;
  --bk-on-neutral: #f7f6f2;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-xs: none; --bk-shadow-sm: none; --bk-shadow-md: none;
  --bk-shadow-lg: none; --bk-shadow-xl: none; --bk-shadow-2xl: none;
  --bk-shadow-inner: none;

  --bk-ring: #17171a;
  --bk-ring-width: 2px;
  --bk-ring-offset: 1px;
  --bk-ring-style: dotted;

  --bk-btn-border-width: 1px;
  --bk-btn-weight: 700;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.16em;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-press-transform: none;
  --bk-hover-transform: none;

  --bk-field-bg: transparent;
  --bk-field-border: #17171a;
  --bk-field-shadow: none;
  --bk-field-placeholder: #8d8b85;
  --bk-card-bg: #f7f6f2;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: none;
  --bk-card-pad: var(--bk-space-4);
  --bk-overlay-surface: #f7f6f2;
  --bk-overlay-border: #17171a;
  --bk-overlay-shadow: none;
  --bk-overlay-bg: rgb(23 23 26 / 0.4);
  --bk-code-bg: #e9e7e1;
  --bk-code-border: #17171a;
  --bk-tooltip-bg: #17171a;
  --bk-selection-bg: #17171a;
  --bk-selection-fg: #f7f6f2;
  --bk-scrollbar-thumb: #17171a;
  --bk-divider-color: #17171a;
  --bk-transition: none;

  /* Head burn along the edges, and the grain of a one-bit print. */
  --bk-body-image:
    linear-gradient(90deg, rgb(23 23 26 / 0.08), transparent 4%, transparent 96%, rgb(23 23 26 / 0.08)),
    repeating-conic-gradient(rgb(23 23 26 / 0.045) 0% 25%, transparent 0% 50%);
  --bk-body-image-size: 100% 100%, 3px 3px;
  --bk-body-attachment: fixed;
}
[data-bk-style="thermal"] body,
body[data-bk-style="thermal"] { background-size: 100% 100%, 3px 3px; }

[data-bk-style="thermal"][data-bk-theme="dark"] {
  --bk-bg: #121214;
  --bk-bg-subtle: #171719;
  --bk-surface: #17171a;
  --bk-surface-2: #1e1e21;
  --bk-surface-3: #26262a;
  --bk-surface-inverted: #ecebe6;
  --bk-text: #ecebe6;
  --bk-text-muted: #b6b5b0;
  --bk-text-subtle: #83827e;
  --bk-text-inverted: #121214;
  --bk-border: #ecebe6;
  --bk-border-muted: #3a3a3e;
  --bk-border-strong: #ecebe6;
  --bk-primary: #ecebe6; --bk-primary-hover: #ffffff; --bk-primary-soft: #26262a;
  --bk-primary-border: #ecebe6; --bk-on-primary: #121214;
  --bk-secondary: #c9c8c3; --bk-secondary-soft: #26262a; --bk-secondary-border: #ecebe6;
  --bk-on-secondary: #121214;
  --bk-success: #ecebe6; --bk-success-soft: #26262a; --bk-success-border: #ecebe6;
  --bk-warning: #ecebe6; --bk-warning-soft: #26262a; --bk-warning-border: #ecebe6;
  --bk-danger: #ecebe6; --bk-danger-soft: #2b2426; --bk-danger-border: #ecebe6;
  --bk-info: #ecebe6; --bk-info-soft: #26262a; --bk-info-border: #ecebe6;
  --bk-neutral: #ecebe6; --bk-neutral-soft: #1e1e21; --bk-neutral-border: #ecebe6;
  --bk-on-neutral: #121214;
  --bk-field-border: #ecebe6;
  --bk-card-bg: #17171a;
  --bk-code-bg: #1e1e21;
  --bk-code-border: #ecebe6;
  --bk-overlay-surface: #17171a;
  --bk-overlay-border: #ecebe6;
  --bk-tooltip-bg: #ecebe6;
  --bk-tooltip-fg: #121214;
  --bk-divider-color: #ecebe6;
  --bk-ring: #ecebe6;
  --bk-body-image: repeating-conic-gradient(rgb(236 235 230 / 0.05) 0% 25%, transparent 0% 50%);
}

/* Perforated rules, and the tear line under a total. */
[data-bk-style="thermal"] .bk-divider,
[data-bk-style="thermal"] hr { border-block-start-style: dashed; }
[data-bk-style="thermal"] .bk-card { border-block: 1px dashed var(--bk-border); border-inline: 0; }
[data-bk-style="thermal"] .bk-section-head { text-align: center; align-items: center; margin-inline: auto; }
[data-bk-style="thermal"] .bk-navbar { border-block-end: 1px dashed var(--bk-border); background: transparent; }
[data-bk-style="thermal"] .bk-table thead th { background: transparent; border-block-end: 1px dashed var(--bk-border); }
[data-bk-style="thermal"] .bk-table th,
[data-bk-style="thermal"] .bk-table td { border-block-end-style: dashed; }
[data-bk-style="thermal"] .bk-table tfoot td { border-block-start: 1px dashed var(--bk-border); }
[data-bk-style="thermal"] .bk-badge { border: 1px solid currentColor; }
[data-bk-style="thermal"] .bk-avatar {
  border-radius: 0;
  border: 1px solid var(--bk-border);
  background-image: repeating-conic-gradient(rgb(23 23 26 / 0.35) 0% 25%, transparent 0% 50%);
  background-size: 3px 3px;
}
[data-bk-style="thermal"] .bk-progress { border: 1px solid var(--bk-border); background: transparent; }
[data-bk-style="thermal"] .bk-progress-bar {
  background-color: transparent;
  background-image: repeating-conic-gradient(var(--bk-text) 0% 25%, transparent 0% 50%);
  background-size: 3px 3px;
}
[data-bk-style="thermal"] .bk-card-media > img,
[data-bk-style="thermal"] .bk-avatar > img { filter: grayscale(1) contrast(2.6); }
[data-bk-style="thermal"] .bk-eyebrow::before { content: "*** "; }
[data-bk-style="thermal"] .bk-eyebrow::after { content: " ***"; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="thermal"] {
  --bk-field-placeholder: #86837d;
}
[data-bk-style="thermal"][data-bk-theme="dark"] {
  --bk-field-placeholder: #8d8b85;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "thermal" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="thermal"][data-bk-theme="auto"] {
  --bk-bg: #121214;
  --bk-bg-subtle: #171719;
  --bk-surface: #17171a;
  --bk-surface-2: #1e1e21;
  --bk-surface-3: #26262a;
  --bk-surface-inverted: #ecebe6;
  --bk-text: #ecebe6;
  --bk-text-muted: #b6b5b0;
  --bk-text-subtle: #83827e;
  --bk-text-inverted: #121214;
  --bk-border: #ecebe6;
  --bk-border-muted: #3a3a3e;
  --bk-border-strong: #ecebe6;
  --bk-primary: #ecebe6; --bk-primary-hover: #ffffff; --bk-primary-soft: #26262a;
  --bk-primary-border: #ecebe6; --bk-on-primary: #121214;
  --bk-secondary: #c9c8c3; --bk-secondary-soft: #26262a; --bk-secondary-border: #ecebe6;
  --bk-on-secondary: #121214;
  --bk-success: #ecebe6; --bk-success-soft: #26262a; --bk-success-border: #ecebe6;
  --bk-warning: #ecebe6; --bk-warning-soft: #26262a; --bk-warning-border: #ecebe6;
  --bk-danger: #ecebe6; --bk-danger-soft: #2b2426; --bk-danger-border: #ecebe6;
  --bk-info: #ecebe6; --bk-info-soft: #26262a; --bk-info-border: #ecebe6;
  --bk-neutral: #ecebe6; --bk-neutral-soft: #1e1e21; --bk-neutral-border: #ecebe6;
  --bk-on-neutral: #121214;
  --bk-field-border: #ecebe6;
  --bk-card-bg: #17171a;
  --bk-code-bg: #1e1e21;
  --bk-code-border: #ecebe6;
  --bk-overlay-surface: #17171a;
  --bk-overlay-border: #ecebe6;
  --bk-tooltip-bg: #ecebe6;
  --bk-tooltip-fg: #121214;
  --bk-divider-color: #ecebe6;
  --bk-ring: #ecebe6;
  --bk-body-image: repeating-conic-gradient(rgb(236 235 230 / 0.05) 0% 25%, transparent 0% 50%);


  --bk-field-placeholder: #8d8b85;
}
}


/* =============================================================================
   SKIN — typewriter · Carbon copy
   Struck, not rendered. Monospace on onion-skin, ink that sits unevenly, a red
   ribbon for anything urgent, and rules that look like they were made by
   holding down the underscore key.
   ========================================================================== */

[data-bk-style="typewriter"] {
  --bk-font-mono: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  --bk-font-sans: var(--bk-font-mono);
  --bk-font-serif: var(--bk-font-mono);
  --bk-font-body: var(--bk-font-mono);
  --bk-font-display: var(--bk-font-mono);
  --bk-heading-weight: 700;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.06em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.12em;
  --bk-leading-normal: 1.7;
  --bk-prose-width: 65ch;

  --bk-bg: #f2eee4;
  --bk-bg-subtle: #eae5d8;
  --bk-bg-muted: #dfd9c8;
  --bk-surface: #fbf8f0;
  --bk-surface-2: #eee9dc;
  --bk-surface-3: #ded8c7;
  --bk-surface-inverted: #1f1d19;

  --bk-text: #24211c;
  --bk-text-muted: #555047;
  --bk-text-subtle: #8b857a;
  --bk-text-inverted: #fbf8f0;

  --bk-border: #24211c;
  --bk-border-muted: #b8b2a4;
  --bk-border-strong: #24211c;
  --bk-border-width: 1px;

  --bk-primary: #24211c;
  --bk-primary-hover: #3a352d;
  --bk-primary-active: #4d463b;
  --bk-primary-soft: #e7e2d4;
  --bk-primary-border: #24211c;
  --bk-on-primary: #fbf8f0;
  --bk-secondary: #a32020;
  --bk-secondary-hover: #8c1a1a;
  --bk-secondary-active: #751515;
  --bk-secondary-soft: #f2dcda;
  --bk-secondary-border: #24211c;
  --bk-on-secondary: #fbf8f0;
  --bk-success: #3d5c35;
  --bk-success-soft: #e0e8dc;
  --bk-success-border: #24211c;
  --bk-warning: #7d5c12;
  --bk-warning-soft: #f0e7cf;
  --bk-warning-border: #24211c;
  --bk-danger: #a32020;
  --bk-danger-soft: #f2dcda;
  --bk-danger-border: #24211c;
  --bk-info: #33566b;
  --bk-info-soft: #dde6ec;
  --bk-info-border: #24211c;
  --bk-neutral: #24211c;
  --bk-neutral-soft: #eee9dc;
  --bk-neutral-border: #24211c;
  --bk-on-neutral: #fbf8f0;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: 2px 2px 0 rgb(36 33 28 / 0.16);
  --bk-shadow-lg: 3px 3px 0 rgb(36 33 28 / 0.2);
  --bk-shadow-xl: 5px 5px 0 rgb(36 33 28 / 0.22);
  --bk-shadow-2xl: 8px 8px 0 rgb(36 33 28 / 0.25);
  --bk-shadow-inner: none;

  --bk-ring: #a32020;
  --bk-ring-width: 1px;
  --bk-ring-offset: 2px;
  --bk-ring-style: dashed;

  --bk-btn-border-width: 1px;
  --bk-btn-weight: 700;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.14em;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: 2px 2px 0 rgb(36 33 28 / 0.25);
  --bk-btn-shadow-active: none;
  --bk-press-transform: translate(1px, 1px);
  --bk-hover-transform: none;

  --bk-field-bg: transparent;
  --bk-field-border: #24211c;
  --bk-field-shadow: none;
  --bk-field-placeholder: #a09a8d;
  --bk-card-bg: #fbf8f0;
  --bk-card-shadow: 2px 2px 0 rgb(36 33 28 / 0.14);
  --bk-card-shadow-hover: 3px 3px 0 rgb(36 33 28 / 0.2);
  --bk-card-pad: var(--bk-space-5);
  --bk-overlay-surface: #fbf8f0;
  --bk-overlay-border: #24211c;
  --bk-overlay-shadow: 6px 6px 0 rgb(36 33 28 / 0.25);
  --bk-overlay-bg: rgb(36 33 28 / 0.35);
  --bk-code-bg: #eee9dc;
  --bk-code-border: #24211c;
  --bk-tooltip-bg: #24211c;
  --bk-selection-bg: rgb(163 32 32 / 0.25);
  --bk-scrollbar-thumb: #b8b2a4;
  --bk-divider-color: #24211c;

  /* Onion skin: faint fibres, and ink that never sat perfectly flat. */
  --bk-body-image:
    repeating-linear-gradient(0deg, rgb(60 50 35 / 0.022) 0 1px, transparent 1px 2px),
    radial-gradient(circle at 65% 20%, rgb(120 100 70 / 0.04), transparent 30%);
  --bk-body-attachment: fixed;
}

[data-bk-style="typewriter"][data-bk-theme="dark"] {
  --bk-bg: #191713;
  --bk-bg-subtle: #1f1d18;
  --bk-surface: #211f1a;
  --bk-surface-2: #292620;
  --bk-surface-3: #332f27;
  --bk-text: #ece6d8;
  --bk-text-muted: #b3ac9c;
  --bk-text-subtle: #857f72;
  --bk-text-inverted: #191713;
  --bk-border: #ece6d8;
  --bk-border-muted: #3a362d;
  --bk-border-strong: #ece6d8;
  --bk-primary: #ece6d8;
  --bk-primary-hover: #fffaf0;
  --bk-primary-soft: #2b2820;
  --bk-primary-border: #ece6d8;
  --bk-on-primary: #191713;
  --bk-secondary: #e05a5a;
  --bk-secondary-soft: #2f1817;
  --bk-secondary-border: #ece6d8;
  --bk-on-secondary: #1c0808;
  --bk-success-soft: #1c2619;
  --bk-warning-soft: #2c2612;
  --bk-danger: #e05a5a;
  --bk-danger-soft: #2f1817;
  --bk-danger-border: #ece6d8;
  --bk-info-soft: #1a242b;
  --bk-neutral: #ece6d8;
  --bk-neutral-soft: #292620;
  --bk-neutral-border: #ece6d8;
  --bk-on-neutral: #191713;
  --bk-field-border: #ece6d8;
  --bk-card-bg: #211f1a;
  --bk-code-bg: #1f1d18;
  --bk-code-border: #ece6d8;
  --bk-overlay-surface: #211f1a;
  --bk-overlay-border: #ece6d8;
  --bk-tooltip-bg: #ece6d8;
  --bk-tooltip-fg: #191713;
  --bk-divider-color: #ece6d8;
  --bk-ring: #e05a5a;
  --bk-body-image: repeating-linear-gradient(0deg, rgb(230 220 190 / 0.018) 0 1px, transparent 1px 2px);
}

/* Fields are lines you type onto, not boxes. */
[data-bk-style="typewriter"] .bk-input,
[data-bk-style="typewriter"] .bk-select {
  border-inline: 0;
  border-block-start: 0;
  border-block-end: 1px solid var(--bk-border);
  padding-inline: 0;
  background: transparent;
}
[data-bk-style="typewriter"] .bk-textarea {
  background-image: repeating-linear-gradient(180deg, transparent 0 1.68em, var(--bk-border-muted) 1.68em calc(1.68em + 1px));
  border-inline: 0;
  border-block-start: 0;
}
[data-bk-style="typewriter"] .bk-navbar { background: transparent; border-block-end: 1px solid var(--bk-border); }
[data-bk-style="typewriter"] .bk-navbar-brand::after { content: "_"; animation: bk-blink 1.1s steps(1) infinite; }
[data-bk-style="typewriter"] .bk-table thead th { background: transparent; border-block-end: 1px solid var(--bk-border); }
[data-bk-style="typewriter"] .bk-table th,
[data-bk-style="typewriter"] .bk-table td { border-block-end-style: dashed; }
[data-bk-style="typewriter"] .bk-badge { border: 1px solid currentColor; }
[data-bk-style="typewriter"] .bk-avatar { border-radius: 0; border: 1px solid var(--bk-border); }
[data-bk-style="typewriter"] .bk-eyebrow { color: var(--bk-secondary); }
[data-bk-style="typewriter"] .bk-eyebrow::before { content: "* "; }
[data-bk-style="typewriter"] .bk-divider { border-block-start-style: dashed; }
[data-bk-style="typewriter"] .bk-progress { border: 1px solid var(--bk-border); background: transparent; }
[data-bk-style="typewriter"] .bk-progress-bar {
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, var(--bk-text) 0 6px, transparent 6px 9px);
}

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="typewriter"] {
  --bk-field-placeholder: #8b8474;
  --bk-info: #33566b;
  --bk-info-on-soft: #33566b;
  --bk-info-soft: #dde6ec;
  --bk-info-text: #33566b;
  --bk-on-info: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-success: #3d5c35;
  --bk-success-on-soft: #3d5c35;
  --bk-success-soft: #e0e8dc;
  --bk-success-text: #3d5c35;
  --bk-text-subtle: #7b766b;
  --bk-warning: #7d5c12;
  --bk-warning-on-soft: #7d5c12;
  --bk-warning-soft: #f0e7cf;
  --bk-warning-text: #7d5c12;
}
[data-bk-style="typewriter"][data-bk-theme="dark"] {
  --bk-field-placeholder: #a09a8d;
  --bk-info: #33566b;
  --bk-info-on-soft: #6094b3;
  --bk-info-soft: #1a242b;
  --bk-info-text: #598fb0;
  --bk-on-info: #a0cef6;
  --bk-on-success: #5fe49b;
  --bk-on-warning: #f8dfb3;
  --bk-success: #3d5c35;
  --bk-success-on-soft: #669958;
  --bk-success-soft: #1c2619;
  --bk-success-text: #649657;
  --bk-text-subtle: #857f72;
  --bk-warning: #7d5c12;
  --bk-warning-on-soft: #bb8a1b;
  --bk-warning-soft: #2c2612;
  --bk-warning-text: #b2831a;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "typewriter" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="typewriter"][data-bk-theme="auto"] {
  --bk-bg: #191713;
  --bk-bg-subtle: #1f1d18;
  --bk-surface: #211f1a;
  --bk-surface-2: #292620;
  --bk-surface-3: #332f27;
  --bk-text: #ece6d8;
  --bk-text-muted: #b3ac9c;
  --bk-text-subtle: #857f72;
  --bk-text-inverted: #191713;
  --bk-border: #ece6d8;
  --bk-border-muted: #3a362d;
  --bk-border-strong: #ece6d8;
  --bk-primary: #ece6d8;
  --bk-primary-hover: #fffaf0;
  --bk-primary-soft: #2b2820;
  --bk-primary-border: #ece6d8;
  --bk-on-primary: #191713;
  --bk-secondary: #e05a5a;
  --bk-secondary-soft: #2f1817;
  --bk-secondary-border: #ece6d8;
  --bk-on-secondary: #1c0808;
  --bk-success-soft: #1c2619;
  --bk-warning-soft: #2c2612;
  --bk-danger: #e05a5a;
  --bk-danger-soft: #2f1817;
  --bk-danger-border: #ece6d8;
  --bk-info-soft: #1a242b;
  --bk-neutral: #ece6d8;
  --bk-neutral-soft: #292620;
  --bk-neutral-border: #ece6d8;
  --bk-on-neutral: #191713;
  --bk-field-border: #ece6d8;
  --bk-card-bg: #211f1a;
  --bk-code-bg: #1f1d18;
  --bk-code-border: #ece6d8;
  --bk-overlay-surface: #211f1a;
  --bk-overlay-border: #ece6d8;
  --bk-tooltip-bg: #ece6d8;
  --bk-tooltip-fg: #191713;
  --bk-divider-color: #ece6d8;
  --bk-ring: #e05a5a;
  --bk-body-image: repeating-linear-gradient(0deg, rgb(230 220 190 / 0.018) 0 1px, transparent 1px 2px);


  --bk-field-placeholder: #a09a8d;
  --bk-info: #33566b;
  --bk-info-on-soft: #6094b3;
  --bk-info-soft: #1a242b;
  --bk-info-text: #598fb0;
  --bk-on-info: #a0cef6;
  --bk-on-success: #5fe49b;
  --bk-on-warning: #f8dfb3;
  --bk-success: #3d5c35;
  --bk-success-on-soft: #669958;
  --bk-success-soft: #1c2619;
  --bk-success-text: #649657;
  --bk-text-subtle: #857f72;
  --bk-warning: #7d5c12;
  --bk-warning-on-soft: #bb8a1b;
  --bk-warning-soft: #2c2612;
  --bk-warning-text: #b2831a;
}
}


/* =============================================================================
   SKIN — vapor · Vaporwave
   Sunset grid horizon, hot pink and cyan, chrome-ish text, VHS chromatic
   fringing. アエスセティック.
   ========================================================================== */

[data-bk-style="vapor"] {
  --bk-font-sans: "Space Grotesk", "VCR OSD Mono", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bk-font-display: "Monument Extended", "Space Grotesk", ui-sans-serif, sans-serif;
  --bk-heading-weight: 700;
  --bk-heading-transform: uppercase;
  --bk-heading-tracking: 0.1em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.14em;

  --bk-bg: #150b2e;
  --bk-bg-subtle: #1c1040;
  --bk-bg-muted: #251552;
  --bk-surface: #1e1147;
  --bk-surface-2: #271658;
  --bk-surface-3: #331d6e;
  --bk-surface-inverted: #ffeaf7;

  --bk-text: #ffe7fb;
  --bk-text-muted: #c8a5e8;
  --bk-text-subtle: #9575c4;
  --bk-text-inverted: #150b2e;

  --bk-border: #4d2a8f;
  --bk-border-muted: #351c66;
  --bk-border-strong: #ff71ce;

  --bk-primary: #ff71ce;
  --bk-primary-hover: #ff8dd8;
  --bk-primary-active: #ffa8e2;
  --bk-primary-soft: #3d1443;
  --bk-primary-border: #8a2e6d;
  --bk-on-primary: #2a0320;
  --bk-secondary: #01cdfe;
  --bk-secondary-hover: #35d8fe;
  --bk-secondary-soft: #06303c;
  --bk-secondary-border: #10697f;
  --bk-on-secondary: #012029;
  --bk-success: #05ffa1;
  --bk-success-soft: #063326;
  --bk-success-border: #0b7355;
  --bk-on-success: #002114;
  --bk-warning: #fffb96;
  --bk-warning-soft: #3a3611;
  --bk-warning-border: #7d7726;
  --bk-on-warning: #22200a;
  --bk-danger: #ff4d6d;
  --bk-danger-soft: #3d0e1c;
  --bk-danger-border: #8a2138;
  --bk-on-danger: #26030c;
  --bk-info: #b967ff;
  --bk-info-soft: #2c1247;
  --bk-info-border: #5f2b91;
  --bk-on-info: #17052a;
  --bk-neutral: #c8a5e8;
  --bk-neutral-soft: #271658;
  --bk-neutral-border: #4d2a8f;
  --bk-on-neutral: #150b2e;

  --bk-radius-scale: 0.4;
  --bk-radius-field: 3px;
  --bk-radius-card: 4px;
  --bk-radius-overlay: 6px;

  --bk-shadow-xs: 0 0 0 1px rgb(255 113 206 / 0.2);
  --bk-shadow-sm: 0 0 10px rgb(255 113 206 / 0.28);
  --bk-shadow-md: 0 0 18px rgb(255 113 206 / 0.34), 0 0 40px rgb(1 205 254 / 0.2);
  --bk-shadow-lg: 0 0 30px rgb(255 113 206 / 0.4), 0 0 70px rgb(1 205 254 / 0.26);
  --bk-shadow-xl: 0 0 46px rgb(255 113 206 / 0.46), 0 0 100px rgb(1 205 254 / 0.3);
  --bk-shadow-2xl: 0 0 64px rgb(255 113 206 / 0.55), 0 0 140px rgb(1 205 254 / 0.35);

  --bk-ring: #01cdfe;
  --bk-ring-width: 2px;
  --bk-ring-offset: 2px;

  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.16em;
  --bk-btn-weight: 700;
  --bk-btn-shadow: 0 0 0 1px rgb(255 113 206 / 0.25);
  --bk-btn-shadow-hover: 0 0 18px rgb(255 113 206 / 0.55);
  --bk-btn-shadow-active: none;
  --bk-btn-gradient: linear-gradient(120deg, #ff71ce, #b967ff 50%, #01cdfe);
  --bk-press-transform: translateY(2px);

  --bk-field-bg: rgb(10 5 26 / 0.7);
  --bk-field-border: #5b34a3;
  --bk-field-border-hover: #01cdfe;
  --bk-field-shadow: inset 0 0 14px rgb(1 205 254 / 0.08);
  --bk-field-shadow-focus: inset 0 0 14px rgb(1 205 254 / 0.14), 0 0 16px rgb(1 205 254 / 0.4);
  --bk-field-placeholder: #7f60b0;

  --bk-card-bg: rgb(30 17 71 / 0.72);
  --bk-card-border: #4d2a8f;
  --bk-card-shadow: 0 0 24px rgb(122 40 173 / 0.28);
  --bk-card-shadow-hover: 0 0 36px rgb(255 113 206 / 0.35);
  --bk-overlay-surface: #1e1147;
  --bk-overlay-border: #ff71ce;
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(10 4 26 / 0.78);
  --bk-code-bg: rgb(10 5 26 / 0.8);
  --bk-code-border: #4d2a8f;
  --bk-tooltip-bg: #ff71ce;
  --bk-tooltip-fg: #2a0320;
  --bk-selection-bg: #01cdfe;
  --bk-selection-fg: #012029;
  --bk-scrollbar-thumb: #5b34a3;
  --bk-divider-color: #4d2a8f;
  --bk-text-gradient: linear-gradient(180deg, #ffffff, #ff71ce 45%, #01cdfe);

  --bk-body-image:
    linear-gradient(180deg, rgb(255 113 206 / 0.16), transparent 40%),
    linear-gradient(0deg, rgb(1 205 254 / 0.16), transparent 34%),
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.18) 0 2px, transparent 2px 4px);
  --bk-body-attachment: fixed;
  color-scheme: dark;
}

[data-bk-style="vapor"] .bk-display,
[data-bk-style="vapor"] .bk-title,
[data-bk-style="vapor"] .bk-navbar-brand {
  background-image: var(--bk-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgb(255 113 206 / 0.5));
}
[data-bk-style="vapor"] .bk-card,
[data-bk-style="vapor"] .bk-panel { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-bk-style="vapor"] .bk-navbar {
  background: rgb(21 11 46 / 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--bk-primary);
  box-shadow: 0 1px 24px rgb(255 113 206 / 0.25);
}
[data-bk-style="vapor"] .bk-btn-primary:not(.bk-btn-outline):not(.bk-btn-ghost):not(.bk-btn-soft):not(.bk-btn-link) {
  background-image: var(--bk-btn-gradient);
  border-color: transparent;
  color: #180322;
}
[data-bk-style="vapor"] .bk-hero,
[data-bk-style="vapor"] .bk-cover { position: relative; overflow: hidden; }
[data-bk-style="vapor"] .bk-hero::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: -20%;
  block-size: 45%;
  background:
    linear-gradient(rgb(1 205 254 / 0.5) 1px, transparent 1px) 0 0 / 100% 2rem,
    linear-gradient(90deg, rgb(1 205 254 / 0.5) 1px, transparent 1px) 0 0 / 3rem 100%;
  transform: perspective(20rem) rotateX(66deg);
  transform-origin: bottom;
  mask-image: linear-gradient(transparent, #000 55%);
  -webkit-mask-image: linear-gradient(transparent, #000 55%);
  pointer-events: none;
  z-index: -1;
}
[data-bk-style="vapor"] .bk-progress-bar { background-image: linear-gradient(90deg, #ff71ce, #01cdfe); box-shadow: 0 0 12px rgb(255 113 206 / 0.6); }
[data-bk-style="vapor"] .bk-tab[aria-selected="true"] { text-shadow: 0 0 12px currentColor; }
[data-bk-style="vapor"] .bk-badge { border: 1px solid currentColor; }


/* =============================================================================
   SKIN — win95 · Desktop chrome
   The grey box that taught a generation what a button is. Outset bevels drawn
   with four box-shadows, a title-bar gradient, and MS Sans Serif's tight,
   unapologetic 11px rhythm. Buttons invert their bevel when pressed, because
   that is the whole point.
   ========================================================================== */

[data-bk-style="win95"] {
  --bk-font-sans: "MS Sans Serif", "Pixelated MS Sans Serif", Tahoma, "Segoe UI", Verdana, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-font-mono: "Courier New", ui-monospace, monospace;
  --bk-heading-weight: 700;
  --bk-heading-tracking: 0;
  --bk-text-base: 0.8125rem;
  --bk-text-md: 0.75rem;
  --bk-leading-normal: 1.45;
  --bk-space-unit: 0.1875rem;

  --_face: #c0c0c0;
  --_light: #ffffff;
  --_shade: #808080;
  --_dark: #000000;

  /* The famous teal was the desktop *behind* windows — nothing was ever typed
     on it. Content sits on the window face, so that is the page background. */
  --bk-bg: #c0c0c0;
  --bk-bg-subtle: #cbc8c1;
  --bk-bg-muted: #b0b0b0;
  --bk-surface: #c0c0c0;
  --bk-surface-2: #d4d0c8;
  --bk-surface-3: #b8b4ac;
  --bk-surface-inverted: #000080;

  --bk-text: #000000;
  --bk-text-muted: #3a3a3a;
  --bk-text-subtle: #5c5c5c;
  --bk-text-inverted: #ffffff;

  --bk-border: #808080;
  --bk-border-muted: #d4d0c8;
  --bk-border-strong: #000000;
  --bk-border-width: 1px;

  --bk-primary: #000080;
  --bk-primary-hover: #00006b;
  --bk-primary-active: #000055;
  --bk-primary-soft: #d9d9ec;
  --bk-primary-border: #000080;
  --bk-on-primary: #ffffff;
  --bk-secondary: #008080;
  --bk-secondary-hover: #006a6a;
  --bk-secondary-soft: #d4e8e8;
  --bk-secondary-border: #008080;
  --bk-on-secondary: #ffffff;
  --bk-success: #007000;
  --bk-success-soft: #d8ecd8;
  --bk-success-border: #007000;
  --bk-warning: #7a6000;
  --bk-warning-soft: #f0e9cf;
  --bk-warning-border: #7a6000;
  --bk-danger: #900000;
  --bk-danger-soft: #f0d8d8;
  --bk-danger-border: #900000;
  --bk-info: #000080;
  --bk-info-soft: #d9d9ec;
  --bk-info-border: #000080;
  --bk-neutral: #000000;
  --bk-neutral-soft: #d4d0c8;
  --bk-neutral-border: #808080;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 0;
  --bk-radius-full: 0;
  --bk-radius-pill: 0;
  --bk-radius-field: 0;
  --bk-radius-card: 0;
  --bk-radius-overlay: 0;
  --bk-radius-thumb: 0;

  /* An outset bevel: light top-left, shade bottom-right, black outer edge. */
  --_outset:
    inset 1px 1px 0 0 var(--_light),
    inset -1px -1px 0 0 var(--_dark),
    inset 2px 2px 0 0 var(--_face),
    inset -2px -2px 0 0 var(--_shade);
  --_inset:
    inset 1px 1px 0 0 var(--_shade),
    inset -1px -1px 0 0 var(--_light),
    inset 2px 2px 0 0 var(--_dark),
    inset -2px -2px 0 0 var(--_face);

  --bk-shadow-none: 0 0 #0000;
  --bk-shadow-xs: var(--_outset);
  --bk-shadow-sm: var(--_outset);
  --bk-shadow-md: var(--_outset);
  --bk-shadow-lg: var(--_outset), 2px 2px 0 rgb(0 0 0 / 0.35);
  --bk-shadow-xl: var(--_outset), 3px 3px 0 rgb(0 0 0 / 0.4);
  --bk-shadow-2xl: var(--_outset), 4px 4px 0 rgb(0 0 0 / 0.45);
  --bk-shadow-inner: var(--_inset);

  --bk-ring: #000000;
  --bk-ring-width: 1px;
  --bk-ring-offset: -4px;
  --bk-ring-style: dotted;

  --bk-btn-border-width: 0px;
  --bk-btn-weight: 400;
  --bk-btn-shadow: var(--_outset);
  --bk-btn-shadow-hover: var(--_outset);
  --bk-btn-shadow-active: var(--_inset);
  --bk-press-transform: translate(1px, 1px);
  --bk-hover-transform: none;

  --bk-field-bg: #ffffff;
  --bk-field-border-width: 0px;
  --bk-field-border: transparent;
  --bk-field-border-hover: transparent;
  --bk-field-shadow: var(--_inset);
  --bk-field-shadow-focus: var(--_inset);
  --bk-field-placeholder: #808080;

  --bk-card-bg: #c0c0c0;
  --bk-card-border-width: 0px;
  --bk-card-border: transparent;
  --bk-card-shadow: var(--_outset);
  --bk-card-shadow-hover: var(--_outset);
  --bk-card-pad: var(--bk-space-4);
  --bk-overlay-surface: #c0c0c0;
  --bk-overlay-border: transparent;
  --bk-overlay-shadow: var(--_outset), 4px 4px 0 rgb(0 0 0 / 0.4);
  --bk-overlay-bg: rgb(0 0 0 / 0.25);
  --bk-code-bg: #ffffff;
  --bk-code-border: #808080;
  --bk-tooltip-bg: #ffffe1;
  --bk-tooltip-fg: #000000;
  --bk-selection-bg: #000080;
  --bk-selection-fg: #ffffff;
  --bk-scrollbar-thumb: #c0c0c0;
  --bk-divider-color: #808080;
  --bk-transition: none;
}

[data-bk-style="win95"][data-bk-theme="dark"] {
  --_face: #3b3b3b;
  --_light: #6e6e6e;
  --_shade: #1a1a1a;
  --_dark: #000000;
  --bk-bg: #3b3b3b;
  --bk-bg-subtle: #434343;
  --bk-surface: #3b3b3b;
  --bk-surface-2: #454545;
  --bk-surface-3: #2e2e2e;
  --bk-text: #e6e6e6;
  --bk-text-muted: #b4b4b4;
  --bk-text-subtle: #8c8c8c;
  --bk-text-inverted: #000000;
  --bk-border: #1a1a1a;
  --bk-border-muted: #454545;
  --bk-border-strong: #6e6e6e;
  --bk-primary: #7b7bd6;
  --bk-primary-soft: #23234a;
  --bk-primary-border: #7b7bd6;
  --bk-on-primary: #06061c;
  --bk-secondary: #46b4b4;
  --bk-secondary-soft: #102c2c;
  --bk-secondary-border: #46b4b4;
  --bk-success-soft: #12240f;
  --bk-warning-soft: #2c2508;
  --bk-danger-soft: #2c0f0f;
  --bk-info-soft: #23234a;
  --bk-neutral: #e6e6e6;
  --bk-neutral-soft: #454545;
  --bk-neutral-border: #1a1a1a;
  --bk-on-neutral: #000000;
  --bk-field-bg: #1a1a1a;
  --bk-card-bg: #3b3b3b;
  --bk-code-bg: #1a1a1a;
  --bk-code-border: #6e6e6e;
  --bk-overlay-surface: #3b3b3b;
  --bk-tooltip-bg: #4a4636;
  --bk-tooltip-fg: #f0eddc;
  --bk-divider-color: #1a1a1a;
  --bk-ring: #e6e6e6;
}

[data-bk-style="win95"] .bk-btn:not(.bk-btn-link) { border: 0; }
[data-bk-style="win95"] .bk-input,
[data-bk-style="win95"] .bk-textarea,
[data-bk-style="win95"] .bk-select { border: 0; }
[data-bk-style="win95"] .bk-check,
[data-bk-style="win95"] .bk-switch,
[data-bk-style="win95"] .bk-avatar,
[data-bk-style="win95"] .bk-badge { border-radius: 0; }
[data-bk-style="win95"] .bk-check { border: 0; background: #fff; box-shadow: var(--_inset); }
[data-bk-style="win95"] .bk-check:checked { background: #fff; }
[data-bk-style="win95"] .bk-check:checked::before { background-color: #000; }
[data-bk-style="win95"] .bk-switch { border: 0; box-shadow: var(--_inset); background: var(--bk-surface-3); }
[data-bk-style="win95"] .bk-switch::before { border-radius: 0; box-shadow: var(--_outset); background: var(--_face); }
[data-bk-style="win95"] .bk-progress { box-shadow: var(--_inset); background: var(--bk-surface); border: 0; }
[data-bk-style="win95"] .bk-progress-bar {
  background-image: repeating-linear-gradient(90deg, var(--bk-primary) 0 10px, transparent 10px 13px);
  background-color: transparent;
}
[data-bk-style="win95"] .bk-navbar { box-shadow: var(--_outset); border-block-end: 0; background: var(--bk-surface); }

/* The title bar — the one gradient this era allowed itself. */
[data-bk-style="win95"] .bk-modal-header,
[data-bk-style="win95"] .bk-drawer-header {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  padding: 2px 3px;
  border-block-end: 0;
  margin: 3px;
}
[data-bk-style="win95"] .bk-modal-title,
[data-bk-style="win95"] .bk-drawer-header .bk-modal-title { color: #fff; font-size: var(--bk-text-md); font-weight: 700; }
[data-bk-style="win95"] .bk-modal-header .bk-close,
[data-bk-style="win95"] .bk-drawer-header .bk-close {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  color: #000;
  background: var(--_face);
  box-shadow: var(--_outset);
  border-radius: 0;
}
[data-bk-style="win95"] .bk-tablist { border-block-end: 0; gap: 0; }
[data-bk-style="win95"] .bk-tab {
  box-shadow: var(--_outset);
  margin-inline-end: 2px;
  border: 0;
}
[data-bk-style="win95"] .bk-tab[aria-selected="true"] { background: var(--bk-surface-2); font-weight: 700; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="win95"] {
  --bk-danger: #900000;
  --bk-danger-on-soft: #900000;
  --bk-danger-soft: #f0d8d8;
  --bk-danger-text: #900000;
  --bk-info: #000080;
  --bk-info-on-soft: #000080;
  --bk-info-soft: #d9d9ec;
  --bk-info-text: #000080;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-secondary: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-primary-on-soft: #000080;
  --bk-primary-text: #000080;
  --bk-secondary: #008080;
  --bk-secondary-on-soft: #006c6c;
  --bk-secondary-soft: #d4e8e8;
  --bk-secondary-text: #005252;
  --bk-success: #007000;
  --bk-success-on-soft: #007000;
  --bk-success-soft: #d8ecd8;
  --bk-success-text: #005700;
  --bk-text-subtle: #5c5c5c;
  --bk-warning: #7a6000;
  --bk-warning-on-soft: #7a6000;
  --bk-warning-soft: #f0e9cf;
  --bk-warning-text: #5b4800;
}
[data-bk-style="win95"][data-bk-theme="dark"] {
  --bk-danger: #900000;
  --bk-danger-on-soft: #ff2525;
  --bk-danger-soft: #2c0f0f;
  --bk-danger-text: #ff8686;
  --bk-info: #000080;
  --bk-info-on-soft: #8585ff;
  --bk-info-soft: #23234a;
  --bk-info-text: #9f9fff;
  --bk-on-danger: #eca2aa;
  --bk-on-info: #2890ea;
  --bk-on-secondary: #383838;
  --bk-on-success: #a1efc4;
  --bk-on-warning: #f8e1b8;
  --bk-primary-on-soft: #8b8bdb;
  --bk-primary-text: #a2a2e2;
  --bk-secondary: #46b4b4;
  --bk-secondary-on-soft: #46b4b4;
  --bk-secondary-soft: #102c2c;
  --bk-secondary-text: #46b4b4;
  --bk-success: #007000;
  --bk-success-on-soft: #00a300;
  --bk-success-soft: #12240f;
  --bk-success-text: #00c700;
  --bk-text-subtle: #949494;
  --bk-warning: #7a6000;
  --bk-warning-on-soft: #b28c00;
  --bk-warning-soft: #2c2508;
  --bk-warning-text: #d1a400;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "win95" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="win95"][data-bk-theme="auto"] {
  --_face: #3b3b3b;
  --_light: #6e6e6e;
  --_shade: #1a1a1a;
  --_dark: #000000;
  --bk-bg: #3b3b3b;
  --bk-bg-subtle: #434343;
  --bk-surface: #3b3b3b;
  --bk-surface-2: #454545;
  --bk-surface-3: #2e2e2e;
  --bk-text: #e6e6e6;
  --bk-text-muted: #b4b4b4;
  --bk-text-subtle: #8c8c8c;
  --bk-text-inverted: #000000;
  --bk-border: #1a1a1a;
  --bk-border-muted: #454545;
  --bk-border-strong: #6e6e6e;
  --bk-primary: #7b7bd6;
  --bk-primary-soft: #23234a;
  --bk-primary-border: #7b7bd6;
  --bk-on-primary: #06061c;
  --bk-secondary: #46b4b4;
  --bk-secondary-soft: #102c2c;
  --bk-secondary-border: #46b4b4;
  --bk-success-soft: #12240f;
  --bk-warning-soft: #2c2508;
  --bk-danger-soft: #2c0f0f;
  --bk-info-soft: #23234a;
  --bk-neutral: #e6e6e6;
  --bk-neutral-soft: #454545;
  --bk-neutral-border: #1a1a1a;
  --bk-on-neutral: #000000;
  --bk-field-bg: #1a1a1a;
  --bk-card-bg: #3b3b3b;
  --bk-code-bg: #1a1a1a;
  --bk-code-border: #6e6e6e;
  --bk-overlay-surface: #3b3b3b;
  --bk-tooltip-bg: #4a4636;
  --bk-tooltip-fg: #f0eddc;
  --bk-divider-color: #1a1a1a;
  --bk-ring: #e6e6e6;


  --bk-danger: #900000;
  --bk-danger-on-soft: #ff2525;
  --bk-danger-soft: #2c0f0f;
  --bk-danger-text: #ff8686;
  --bk-info: #000080;
  --bk-info-on-soft: #8585ff;
  --bk-info-soft: #23234a;
  --bk-info-text: #9f9fff;
  --bk-on-danger: #eca2aa;
  --bk-on-info: #2890ea;
  --bk-on-secondary: #383838;
  --bk-on-success: #a1efc4;
  --bk-on-warning: #f8e1b8;
  --bk-primary-on-soft: #8b8bdb;
  --bk-primary-text: #a2a2e2;
  --bk-secondary: #46b4b4;
  --bk-secondary-on-soft: #46b4b4;
  --bk-secondary-soft: #102c2c;
  --bk-secondary-text: #46b4b4;
  --bk-success: #007000;
  --bk-success-on-soft: #00a300;
  --bk-success-soft: #12240f;
  --bk-success-text: #00c700;
  --bk-text-subtle: #949494;
  --bk-warning: #7a6000;
  --bk-warning-on-soft: #b28c00;
  --bk-warning-soft: #2c2508;
  --bk-warning-text: #d1a400;
}
}


/* =============================================================================
   SKIN — wireframe · Lo-fi mockup
   The look of a design still under discussion: greyscale, dashed placeholders,
   crosshatched media boxes and a hand-annotated feel. Useful for prototypes you
   do not want stakeholders to mistake for finished work.
   ========================================================================== */

[data-bk-style="wireframe"] {
  --bk-font-sans: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bk-font-display: var(--bk-font-sans);
  --bk-font-mono: var(--bk-font-sans);
  --bk-heading-weight: 600;
  --bk-heading-tracking: 0;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.08em;

  --bk-bg: #f7f7f7;
  --bk-bg-subtle: #f0f0f0;
  --bk-bg-muted: #e6e6e6;
  --bk-surface: #ffffff;
  --bk-surface-2: #f2f2f2;
  --bk-surface-3: #e4e4e4;
  --bk-surface-inverted: #1c1c1c;

  --bk-text: #1c1c1c;
  --bk-text-muted: #565656;
  --bk-text-subtle: #8a8a8a;
  --bk-text-inverted: #ffffff;

  --bk-border: #9a9a9a;
  --bk-border-muted: #cfcfcf;
  --bk-border-strong: #4a4a4a;
  --bk-border-width: 1px;
  --bk-border-style: dashed;

  --bk-primary: #4a4a4a;
  --bk-primary-hover: #333333;
  --bk-primary-active: #1c1c1c;
  --bk-primary-soft: #e8e8e8;
  --bk-primary-border: #9a9a9a;
  --bk-on-primary: #ffffff;
  --bk-secondary: #6e6e6e;
  --bk-secondary-hover: #565656;
  --bk-secondary-soft: #ececec;
  --bk-secondary-border: #b0b0b0;
  --bk-on-secondary: #ffffff;
  --bk-success: #4a4a4a;
  --bk-success-soft: #e8e8e8;
  --bk-success-border: #9a9a9a;
  --bk-warning: #5c5c5c;
  --bk-warning-soft: #ededed;
  --bk-warning-border: #a8a8a8;
  --bk-danger: #3a3a3a;
  --bk-danger-soft: #e4e4e4;
  --bk-danger-border: #929292;
  --bk-info: #6e6e6e;
  --bk-info-soft: #ececec;
  --bk-info-border: #b0b0b0;
  --bk-neutral: #1c1c1c;
  --bk-neutral-soft: #ececec;
  --bk-neutral-border: #9a9a9a;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 0.3;
  --bk-radius-field: 2px;
  --bk-radius-card: 2px;
  --bk-radius-overlay: 2px;
  --bk-radius-pill: 9999px;

  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: none;
  --bk-shadow-lg: none;
  --bk-shadow-xl: 0 6px 24px rgb(0 0 0 / 0.12);
  --bk-shadow-2xl: 0 12px 40px rgb(0 0 0 / 0.16);
  --bk-shadow-inner: none;

  --bk-ring: #1c1c1c;
  --bk-ring-width: 2px;
  --bk-ring-offset: 2px;
  --bk-ring-style: dashed;

  --bk-btn-border-width: 1px;
  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-btn-weight: 600;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.06em;
  --bk-press-transform: translateY(1px);
  --bk-hover-transform: none;

  --bk-field-bg: #ffffff;
  --bk-field-border: #9a9a9a;
  --bk-field-border-hover: #4a4a4a;
  --bk-field-shadow: none;
  --bk-field-placeholder: #a0a0a0;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: none;
  --bk-overlay-surface: #ffffff;
  --bk-overlay-border: #4a4a4a;
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(28 28 28 / 0.3);
  --bk-code-bg: #f0f0f0;
  --bk-code-border: #9a9a9a;
  --bk-tooltip-bg: #1c1c1c;
  --bk-selection-bg: #d4d4d4;
  --bk-selection-fg: #1c1c1c;
  --bk-scrollbar-thumb: #b0b0b0;
  --bk-divider-color: #9a9a9a;
  --bk-divider-style: dashed;
}

[data-bk-style="wireframe"][data-bk-theme="dark"] {
  --bk-bg: #171717;
  --bk-bg-subtle: #1e1e1e;
  --bk-surface: #1c1c1c;
  --bk-surface-2: #242424;
  --bk-surface-3: #2e2e2e;
  --bk-text: #ededed;
  --bk-text-muted: #a8a8a8;
  --bk-text-subtle: #7a7a7a;
  --bk-text-inverted: #171717;
  --bk-border: #5a5a5a;
  --bk-border-muted: #333333;
  --bk-border-strong: #ababab;
  --bk-primary: #d4d4d4;
  --bk-primary-hover: #e8e8e8;
  --bk-primary-soft: #2a2a2a;
  --bk-primary-border: #5a5a5a;
  --bk-on-primary: #171717;
  --bk-neutral: #ededed;
  --bk-neutral-soft: #2a2a2a;
  --bk-neutral-border: #5a5a5a;
  --bk-on-neutral: #171717;
  --bk-field-bg: #1c1c1c;
  --bk-field-border: #5a5a5a;
  --bk-code-bg: #242424;
  --bk-code-border: #5a5a5a;
  --bk-overlay-surface: #1c1c1c;
  --bk-overlay-border: #ababab;
  --bk-tooltip-bg: #ededed;
  --bk-tooltip-fg: #171717;
  --bk-divider-color: #5a5a5a;
  --bk-ring: #ededed;
}

/* Media boxes read as "image goes here", not as art. */
[data-bk-style="wireframe"] .bk-card-media,
[data-bk-style="wireframe"] .bk-frame {
  background-image:
    linear-gradient(45deg, var(--bk-border) 1px, transparent 1px),
    linear-gradient(-45deg, var(--bk-border) 1px, transparent 1px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px dashed var(--bk-border);
  background-color: var(--bk-surface-2);
}
[data-bk-style="wireframe"] .bk-card-media > img,
[data-bk-style="wireframe"] .bk-frame > img { opacity: 0.35; filter: grayscale(1); }
[data-bk-style="wireframe"] .bk-avatar {
  background: repeating-linear-gradient(45deg, var(--bk-surface-3) 0 4px, var(--bk-surface-2) 4px 8px);
  border: 1px dashed var(--bk-border);
}
[data-bk-style="wireframe"] .bk-skeleton { background-image: none; border: 1px dashed var(--bk-border); }
[data-bk-style="wireframe"] .bk-navbar { border-block-end: 1px dashed var(--bk-border-strong); }
[data-bk-style="wireframe"] .bk-table thead th { background: var(--bk-surface-2); border-block-end: 1px dashed var(--bk-border-strong); }
[data-bk-style="wireframe"] .bk-table th,
[data-bk-style="wireframe"] .bk-table td { border-block-end-style: dashed; }
[data-bk-style="wireframe"] .bk-badge { border: 1px dashed currentColor; }
[data-bk-style="wireframe"] .bk-progress { border: 1px dashed var(--bk-border); background: transparent; }
[data-bk-style="wireframe"] .bk-progress-bar {
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgb(255 255 255 / 0.35) 4px 8px);
}
[data-bk-style="wireframe"] .bk-eyebrow::before { content: "// "; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="wireframe"] {
  --bk-danger: #3a3a3a;
  --bk-danger-on-soft: #3a3a3a;
  --bk-danger-soft: #e4e4e4;
  --bk-danger-text: #3a3a3a;
  --bk-field-placeholder: #919191;
  --bk-info: #6e6e6e;
  --bk-info-on-soft: #666666;
  --bk-info-soft: #ececec;
  --bk-info-text: #6e6e6e;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-secondary-on-soft: #666666;
  --bk-secondary-text: #6e6e6e;
  --bk-success: #4a4a4a;
  --bk-success-on-soft: #4a4a4a;
  --bk-success-soft: #e8e8e8;
  --bk-success-text: #4a4a4a;
  --bk-text-subtle: #7d7d7d;
  --bk-warning: #5c5c5c;
  --bk-warning-on-soft: #5c5c5c;
  --bk-warning-soft: #ededed;
  --bk-warning-text: #5c5c5c;
}
[data-bk-style="wireframe"][data-bk-theme="dark"] {
  --bk-danger: #3a3a3a;
  --bk-danger-on-soft: #3a3a3a;
  --bk-danger-soft: #e4e4e4;
  --bk-danger-text: #878787;
  --bk-field-placeholder: #a0a0a0;
  --bk-info: #6e6e6e;
  --bk-info-on-soft: #666666;
  --bk-info-soft: #ececec;
  --bk-info-text: #888888;
  --bk-on-danger: #e88d97;
  --bk-on-info: #f0f7fd;
  --bk-on-success: #24d875;
  --bk-on-warning: #f5d59c;
  --bk-secondary-on-soft: #666666;
  --bk-secondary-text: #888888;
  --bk-success: #4a4a4a;
  --bk-success-on-soft: #4a4a4a;
  --bk-success-soft: #e8e8e8;
  --bk-success-text: #878787;
  --bk-text-subtle: #7a7a7a;
  --bk-warning: #5c5c5c;
  --bk-warning-on-soft: #5c5c5c;
  --bk-warning-soft: #ededed;
  --bk-warning-text: #878787;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "wireframe" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="wireframe"][data-bk-theme="auto"] {
  --bk-bg: #171717;
  --bk-bg-subtle: #1e1e1e;
  --bk-surface: #1c1c1c;
  --bk-surface-2: #242424;
  --bk-surface-3: #2e2e2e;
  --bk-text: #ededed;
  --bk-text-muted: #a8a8a8;
  --bk-text-subtle: #7a7a7a;
  --bk-text-inverted: #171717;
  --bk-border: #5a5a5a;
  --bk-border-muted: #333333;
  --bk-border-strong: #ababab;
  --bk-primary: #d4d4d4;
  --bk-primary-hover: #e8e8e8;
  --bk-primary-soft: #2a2a2a;
  --bk-primary-border: #5a5a5a;
  --bk-on-primary: #171717;
  --bk-neutral: #ededed;
  --bk-neutral-soft: #2a2a2a;
  --bk-neutral-border: #5a5a5a;
  --bk-on-neutral: #171717;
  --bk-field-bg: #1c1c1c;
  --bk-field-border: #5a5a5a;
  --bk-code-bg: #242424;
  --bk-code-border: #5a5a5a;
  --bk-overlay-surface: #1c1c1c;
  --bk-overlay-border: #ababab;
  --bk-tooltip-bg: #ededed;
  --bk-tooltip-fg: #171717;
  --bk-divider-color: #5a5a5a;
  --bk-ring: #ededed;


  --bk-danger: #3a3a3a;
  --bk-danger-on-soft: #3a3a3a;
  --bk-danger-soft: #e4e4e4;
  --bk-danger-text: #878787;
  --bk-field-placeholder: #a0a0a0;
  --bk-info: #6e6e6e;
  --bk-info-on-soft: #666666;
  --bk-info-soft: #ececec;
  --bk-info-text: #888888;
  --bk-on-danger: #e88d97;
  --bk-on-info: #f0f7fd;
  --bk-on-success: #24d875;
  --bk-on-warning: #f5d59c;
  --bk-secondary-on-soft: #666666;
  --bk-secondary-text: #888888;
  --bk-success: #4a4a4a;
  --bk-success-on-soft: #4a4a4a;
  --bk-success-soft: #e8e8e8;
  --bk-success-text: #878787;
  --bk-text-subtle: #7a7a7a;
  --bk-warning: #5c5c5c;
  --bk-warning-on-soft: #5c5c5c;
  --bk-warning-soft: #ededed;
  --bk-warning-text: #878787;
}
}


/* =============================================================================
   SKIN — y2k · Chrome & bubbles
   Iridescent gradients, liquid-chrome type, fat bevelled bubbles and that
   specific optimism of a 2001 media player. Blue plastic and lens flare.
   ========================================================================== */

[data-bk-style="y2k"] {
  --bk-font-sans: "Eurostile", "Bank Gothic", "Michroma", "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
  --bk-font-display: var(--bk-font-sans);
  --bk-heading-weight: 700;
  --bk-heading-tracking: 0.02em;
  --bk-label-transform: uppercase;
  --bk-label-tracking: 0.1em;

  --bk-bg: #dfe9f7;
  --bk-bg-subtle: #d0e0f4;
  --bk-bg-muted: #bed4ef;
  --bk-surface: #f2f7fe;
  --bk-surface-2: #e2ecfa;
  --bk-surface-3: #cfe0f6;
  --bk-surface-inverted: #10203a;

  --bk-text: #10203a;
  --bk-text-muted: #3b5a86;
  --bk-text-subtle: #7091b7;
  --bk-text-inverted: #ffffff;

  --bk-border: #9fc0e4;
  --bk-border-muted: #c5daf2;
  --bk-border-strong: #5f8fc4;

  --bk-primary: #2f7bd8;
  --bk-primary-hover: #2569bd;
  --bk-primary-active: #1d57a1;
  --bk-primary-soft: #d8e8fb;
  --bk-primary-border: #7fb0e6;
  --bk-on-primary: #ffffff;
  --bk-secondary: #b45cf0;
  --bk-secondary-hover: #a147dd;
  --bk-secondary-soft: #f0e0fd;
  --bk-secondary-border: #d3a5f5;
  --bk-on-secondary: #ffffff;
  --bk-success: #23a35b;
  --bk-success-soft: #d9f3e4;
  --bk-success-border: #8fd6b0;
  --bk-warning: #e08c00;
  --bk-warning-soft: #fbeed0;
  --bk-warning-border: #f0c96e;
  --bk-danger: #e0455c;
  --bk-danger-soft: #fbdfe4;
  --bk-danger-border: #f0a3b0;
  --bk-info: #2f7bd8;
  --bk-info-soft: #d8e8fb;
  --bk-info-border: #7fb0e6;
  --bk-neutral: #3b5a86;
  --bk-neutral-soft: #e2ecfa;
  --bk-neutral-border: #9fc0e4;
  --bk-on-neutral: #ffffff;

  --bk-radius-scale: 2.4;
  --bk-radius-field: var(--bk-radius-full);
  --bk-radius-card: var(--bk-radius-2xl);
  --bk-radius-overlay: var(--bk-radius-2xl);

  --bk-shadow-color: 215 60% 30%;
  --bk-shadow-strength: 1.3;
  --bk-inner-highlight: inset 0 2px 0 rgb(255 255 255 / 0.9), inset 0 -6px 10px -6px rgb(30 80 150 / 0.35);

  --bk-body-image:
    radial-gradient(50rem 30rem at 20% -10%, rgb(255 255 255 / 0.95), transparent 60%),
    radial-gradient(40rem 26rem at 90% 10%, rgb(180 92 240 / 0.22), transparent 62%),
    linear-gradient(180deg, #eaf2fd 0%, #cfe0f6 60%, #bcd6f2 100%);
  --bk-body-attachment: fixed;
  --bk-surface-image: linear-gradient(180deg, rgb(255 255 255 / 0.92) 0%, rgb(255 255 255 / 0.3) 46%, rgb(160 200 240 / 0.22) 52%, rgb(255 255 255 / 0.5) 100%);

  --bk-btn-radius: var(--bk-radius-full);
  --bk-btn-image: linear-gradient(180deg, rgb(255 255 255 / 0.85) 0%, rgb(255 255 255 / 0.2) 46%, rgb(0 40 90 / 0.14) 52%, rgb(255 255 255 / 0.35) 100%);
  --bk-btn-weight: 700;
  --bk-btn-transform: uppercase;
  --bk-btn-tracking: 0.08em;
  --bk-btn-shadow: var(--bk-inner-highlight), 0 3px 8px rgb(30 80 150 / 0.3);
  --bk-btn-shadow-hover: var(--bk-inner-highlight), 0 6px 16px rgb(30 80 150 / 0.38);
  --bk-btn-shadow-active: inset 0 3px 7px rgb(10 45 90 / 0.4);
  --bk-press-transform: translateY(2px);
  --bk-hover-transform: translateY(-1px);

  --bk-field-bg: #ffffff;
  --bk-field-border: #9fc0e4;
  --bk-field-border-hover: #2f7bd8;
  --bk-field-shadow: inset 0 2px 5px rgb(30 80 150 / 0.18);
  --bk-field-shadow-focus: inset 0 2px 5px rgb(30 80 150 / 0.18), 0 0 10px rgb(47 123 216 / 0.55);
  --bk-field-placeholder: #8fadd0;

  --bk-card-image: var(--bk-surface-image);
  --bk-card-shadow: var(--bk-inner-highlight), 0 8px 22px rgb(30 80 150 / 0.2);
  --bk-card-shadow-hover: var(--bk-inner-highlight), 0 14px 34px rgb(30 80 150 / 0.28);
  --bk-overlay-surface: #f2f7fe;
  --bk-overlay-shadow: var(--bk-inner-highlight), 0 26px 60px rgb(16 40 80 / 0.4);
  --bk-overlay-bg: rgb(30 70 130 / 0.35);
  --bk-code-bg: #e6effb;
  --bk-code-border: #9fc0e4;
  --bk-tooltip-bg: #10203a;
  --bk-selection-bg: rgb(180 92 240 / 0.35);
  --bk-scrollbar-thumb: #9fc0e4;
  --bk-text-gradient: linear-gradient(180deg, #ffffff 0%, #b9d6f5 42%, #2f7bd8 44%, #8fd0ff 100%);
}

[data-bk-style="y2k"][data-bk-theme="dark"] {
  --bk-bg: #061428;
  --bk-bg-subtle: #0a1c36;
  --bk-surface: #0d2242;
  --bk-surface-2: #112a51;
  --bk-surface-3: #173461;
  --bk-text: #dceafc;
  --bk-text-muted: #90b2da;
  --bk-text-subtle: #6285ae;
  --bk-border: #24487d;
  --bk-border-muted: #17325a;
  --bk-border-strong: #3d6fae;
  --bk-primary: #58a6ff;
  --bk-primary-soft: #10294a;
  --bk-primary-border: #2d5c95;
  --bk-on-primary: #04162b;
  --bk-secondary: #cd8bff;
  --bk-secondary-soft: #241338;
  --bk-secondary-border: #4d2b70;
  --bk-inner-highlight: inset 0 2px 0 rgb(255 255 255 / 0.18);
  --bk-body-image:
    radial-gradient(50rem 30rem at 20% -10%, rgb(88 166 255 / 0.28), transparent 60%),
    radial-gradient(40rem 26rem at 90% 10%, rgb(205 139 255 / 0.22), transparent 62%),
    linear-gradient(180deg, #08182f 0%, #061428 100%);
  --bk-surface-image: linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0.02) 48%, rgb(0 0 0 / 0.15) 52%, rgb(255 255 255 / 0.06) 100%);
  --bk-field-bg: #08182f;
  --bk-field-border: #24487d;
  --bk-code-bg: #08182f;
  --bk-code-border: #24487d;
  --bk-overlay-surface: #0d2242;
  --bk-tooltip-bg: #dceafc;
  --bk-tooltip-fg: #061428;
  --bk-text-gradient: linear-gradient(180deg, #ffffff 0%, #9ec8f5 42%, #58a6ff 44%, #cd8bff 100%);
}

[data-bk-style="y2k"] .bk-display,
[data-bk-style="y2k"] .bk-title,
[data-bk-style="y2k"] .bk-navbar-brand {
  background-image: var(--bk-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px rgb(16 32 58 / 0.35));
  letter-spacing: 0.01em;
}
[data-bk-style="y2k"] .bk-btn:not(.bk-btn-link) { position: relative; overflow: hidden; }
[data-bk-style="y2k"] .bk-btn:not(.bk-btn-link)::before {
  content: "";
  position: absolute;
  inset: 2px 2px 52% 2px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.05));
  pointer-events: none;
}
[data-bk-style="y2k"] .bk-card,
[data-bk-style="y2k"] .bk-panel,
[data-bk-style="y2k"] .bk-navbar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-bk-style="y2k"] .bk-badge { box-shadow: var(--bk-inner-highlight); }
[data-bk-style="y2k"] .bk-avatar { box-shadow: var(--bk-inner-highlight), 0 3px 8px rgb(30 80 150 / 0.3); }
[data-bk-style="y2k"] .bk-progress { box-shadow: inset 0 2px 5px rgb(30 80 150 / 0.28); }
[data-bk-style="y2k"] .bk-progress-bar { background-image: linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0) 55%); }
[data-bk-style="y2k"] .bk-switch::before { background-image: linear-gradient(180deg, #fff, #cfe0f6); }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="y2k"] {
  --bk-danger: #e0455c;
  --bk-danger-on-soft: #c22038;
  --bk-danger-soft: #fbdfe4;
  --bk-danger-text: #c22038;
  --bk-field-placeholder: #6b93c1;
  --bk-info: #2f7bd8;
  --bk-info-on-soft: #2163b3;
  --bk-info-soft: #d8e8fb;
  --bk-info-text: #2265b7;
  --bk-neutral-on-soft: #3b5a86;
  --bk-neutral-text: #3b5a86;
  --bk-on-danger: #0f0f0f;
  --bk-on-info: #080808;
  --bk-on-primary: #080808;
  --bk-on-secondary: #191919;
  --bk-on-success: #242424;
  --bk-on-warning: #333333;
  --bk-primary: #2f7bd8;
  --bk-primary-on-soft: #2163b3;
  --bk-primary-soft: #d8e8fb;
  --bk-primary-text: #2265b7;
  --bk-secondary: #b45cf0;
  --bk-secondary-on-soft: #9416ea;
  --bk-secondary-soft: #f0e0fd;
  --bk-secondary-text: #961bea;
  --bk-success: #23a35b;
  --bk-success-on-soft: #197541;
  --bk-success-soft: #d9f3e4;
  --bk-success-text: #197541;
  --bk-text-subtle: #557ca9;
  --bk-warning: #e08c00;
  --bk-warning-on-soft: #935c00;
  --bk-warning-soft: #fbeed0;
  --bk-warning-text: #8e5900;
}
[data-bk-style="y2k"][data-bk-theme="dark"] {
  --bk-danger: #e0455c;
  --bk-danger-on-soft: #c22038;
  --bk-danger-soft: #fbdfe4;
  --bk-danger-text: #e45f73;
  --bk-field-placeholder: #8fadd0;
  --bk-info: #2f7bd8;
  --bk-info-on-soft: #2163b3;
  --bk-info-soft: #d8e8fb;
  --bk-info-text: #4d8ede;
  --bk-neutral-on-soft: #3b5a86;
  --bk-neutral-text: #6d8fbf;
  --bk-on-danger: #22070a;
  --bk-on-info: #020a11;
  --bk-on-primary: #04162b;
  --bk-on-secondary: #3b3b3b;
  --bk-on-success: #04180d;
  --bk-on-warning: #1f1503;
  --bk-primary: #58a6ff;
  --bk-primary-on-soft: #58a6ff;
  --bk-primary-soft: #10294a;
  --bk-primary-text: #58a6ff;
  --bk-secondary: #cd8bff;
  --bk-secondary-on-soft: #cd8bff;
  --bk-secondary-soft: #241338;
  --bk-secondary-text: #cd8bff;
  --bk-success: #23a35b;
  --bk-success-on-soft: #197541;
  --bk-success-soft: #d9f3e4;
  --bk-success-text: #23a35b;
  --bk-text-subtle: #6285ae;
  --bk-warning: #e08c00;
  --bk-warning-on-soft: #935c00;
  --bk-warning-soft: #fbeed0;
  --bk-warning-text: #e08c00;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "y2k" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="y2k"][data-bk-theme="auto"] {
  --bk-bg: #061428;
  --bk-bg-subtle: #0a1c36;
  --bk-surface: #0d2242;
  --bk-surface-2: #112a51;
  --bk-surface-3: #173461;
  --bk-text: #dceafc;
  --bk-text-muted: #90b2da;
  --bk-text-subtle: #6285ae;
  --bk-border: #24487d;
  --bk-border-muted: #17325a;
  --bk-border-strong: #3d6fae;
  --bk-primary: #58a6ff;
  --bk-primary-soft: #10294a;
  --bk-primary-border: #2d5c95;
  --bk-on-primary: #04162b;
  --bk-secondary: #cd8bff;
  --bk-secondary-soft: #241338;
  --bk-secondary-border: #4d2b70;
  --bk-inner-highlight: inset 0 2px 0 rgb(255 255 255 / 0.18);
  --bk-body-image:
    radial-gradient(50rem 30rem at 20% -10%, rgb(88 166 255 / 0.28), transparent 60%),
    radial-gradient(40rem 26rem at 90% 10%, rgb(205 139 255 / 0.22), transparent 62%),
    linear-gradient(180deg, #08182f 0%, #061428 100%);
  --bk-surface-image: linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0.02) 48%, rgb(0 0 0 / 0.15) 52%, rgb(255 255 255 / 0.06) 100%);
  --bk-field-bg: #08182f;
  --bk-field-border: #24487d;
  --bk-code-bg: #08182f;
  --bk-code-border: #24487d;
  --bk-overlay-surface: #0d2242;
  --bk-tooltip-bg: #dceafc;
  --bk-tooltip-fg: #061428;
  --bk-text-gradient: linear-gradient(180deg, #ffffff 0%, #9ec8f5 42%, #58a6ff 44%, #cd8bff 100%);


  --bk-danger: #e0455c;
  --bk-danger-on-soft: #c22038;
  --bk-danger-soft: #fbdfe4;
  --bk-danger-text: #e45f73;
  --bk-field-placeholder: #8fadd0;
  --bk-info: #2f7bd8;
  --bk-info-on-soft: #2163b3;
  --bk-info-soft: #d8e8fb;
  --bk-info-text: #4d8ede;
  --bk-neutral-on-soft: #3b5a86;
  --bk-neutral-text: #6d8fbf;
  --bk-on-danger: #22070a;
  --bk-on-info: #020a11;
  --bk-on-primary: #04162b;
  --bk-on-secondary: #3b3b3b;
  --bk-on-success: #04180d;
  --bk-on-warning: #1f1503;
  --bk-primary: #58a6ff;
  --bk-primary-on-soft: #58a6ff;
  --bk-primary-soft: #10294a;
  --bk-primary-text: #58a6ff;
  --bk-secondary: #cd8bff;
  --bk-secondary-on-soft: #cd8bff;
  --bk-secondary-soft: #241338;
  --bk-secondary-text: #cd8bff;
  --bk-success: #23a35b;
  --bk-success-on-soft: #197541;
  --bk-success-soft: #d9f3e4;
  --bk-success-text: #23a35b;
  --bk-text-subtle: #6285ae;
  --bk-warning: #e08c00;
  --bk-warning-on-soft: #935c00;
  --bk-warning-soft: #fbeed0;
  --bk-warning-text: #e08c00;
}
}


/* =============================================================================
   SKIN — zen · Japandi
   Washi paper, sumi ink, one clay accent. Very long lines of nothing, thin
   rules instead of boxes, and a type scale that whispers.
   ========================================================================== */

[data-bk-style="zen"] {
  --bk-font-sans: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", ui-sans-serif, system-ui, sans-serif;
  --bk-font-serif: "Zen Old Mincho", "Noto Serif JP", "Hiragino Mincho ProN", Georgia, serif;
  --bk-font-display: var(--bk-font-serif);
  --bk-heading-font: var(--bk-font-display);
  --bk-heading-weight: 400;
  --bk-heading-tracking: 0.04em;
  --bk-label-tracking: 0.1em;
  --bk-leading-relaxed: 1.9;
  --bk-leading-normal: 1.75;
  --bk-space-unit: 0.3125rem;
  --bk-prose-width: 62ch;

  --bk-bg: #f6f3ec;
  --bk-bg-subtle: #f1ede4;
  --bk-bg-muted: #e9e3d7;
  --bk-surface: #fbf9f4;
  --bk-surface-2: #f1ede4;
  --bk-surface-3: #e6e0d3;
  --bk-surface-inverted: #24221d;

  --bk-text: #2b2823;
  --bk-text-muted: #625d53;
  --bk-text-subtle: #918a7c;
  --bk-text-inverted: #f6f3ec;

  --bk-border: #ddd6c7;
  --bk-border-muted: #ebe6da;
  --bk-border-strong: #b9b0a0;
  --bk-border-width: 1px;

  --bk-primary: #8a6f4e;
  --bk-primary-hover: #77603f;
  --bk-primary-active: #645032;
  --bk-primary-soft: #efe8dc;
  --bk-primary-border: #cbbca4;
  --bk-on-primary: #fbf9f4;
  --bk-secondary: #566b5e;
  --bk-secondary-hover: #485a4e;
  --bk-secondary-soft: #e6ece7;
  --bk-secondary-border: #b0c0b5;
  --bk-on-secondary: #fbf9f4;
  --bk-success: #4d6b4a;
  --bk-success-soft: #e6ede4;
  --bk-success-border: #aec1a9;
  --bk-warning: #93701f;
  --bk-warning-soft: #f3ecd8;
  --bk-warning-border: #d6c288;
  --bk-danger: #8f4136;
  --bk-danger-soft: #f2e3df;
  --bk-danger-border: #cfa79e;
  --bk-info: #47616f;
  --bk-info-soft: #e4eaee;
  --bk-info-border: #a9bcc6;
  --bk-neutral: #2b2823;
  --bk-neutral-soft: #ede8dd;
  --bk-neutral-border: #ddd6c7;
  --bk-on-neutral: #fbf9f4;

  --bk-radius-scale: 0.25;
  --bk-radius-field: 2px;
  --bk-radius-card: 2px;
  --bk-radius-overlay: 2px;
  --bk-radius-pill: 9999px;

  --bk-shadow-color: 35 25% 25%;
  --bk-shadow-xs: none;
  --bk-shadow-sm: none;
  --bk-shadow-md: none;
  --bk-shadow-lg: 0 2px 16px rgb(70 60 40 / 0.07);
  --bk-shadow-xl: 0 8px 40px rgb(70 60 40 / 0.1);
  --bk-shadow-2xl: 0 18px 60px rgb(70 60 40 / 0.14);
  --bk-shadow-inner: none;

  --bk-ring: #8a6f4e;
  --bk-ring-width: 1px;
  --bk-ring-offset: 4px;

  --bk-btn-shadow: none;
  --bk-btn-shadow-hover: none;
  --bk-btn-shadow-active: none;
  --bk-btn-weight: 500;
  --bk-btn-tracking: 0.08em;
  --bk-press-transform: none;
  --bk-hover-transform: none;

  --bk-field-bg: #fbf9f4;
  --bk-field-border: #cdc5b4;
  --bk-field-border-hover: #8a6f4e;
  --bk-field-shadow: none;
  --bk-field-placeholder: #a79f8f;
  --bk-card-shadow: none;
  --bk-card-shadow-hover: var(--bk-shadow-lg);
  --bk-card-pad: var(--bk-space-8);
  --bk-overlay-surface: #fbf9f4;
  --bk-overlay-shadow: var(--bk-shadow-2xl);
  --bk-overlay-bg: rgb(43 40 35 / 0.32);
  --bk-code-bg: #f1ede4;
  --bk-code-border: #ddd6c7;
  --bk-tooltip-bg: #2b2823;
  --bk-selection-bg: rgb(138 111 78 / 0.2);
  --bk-scrollbar-thumb: #cdc5b4;
  --bk-divider-color: #ddd6c7;
  --bk-container-gutter: var(--bk-space-8);
  --bk-body-image: radial-gradient(60rem 40rem at 70% -10%, rgb(160 140 100 / 0.05), transparent 60%);
}

[data-bk-style="zen"][data-bk-theme="dark"] {
  --bk-bg: #1a1815;
  --bk-bg-subtle: #201e1a;
  --bk-surface: #221f1b;
  --bk-surface-2: #292520;
  --bk-surface-3: #322d27;
  --bk-text: #ece6da;
  --bk-text-muted: #b3aa9a;
  --bk-text-subtle: #857d6f;
  --bk-text-inverted: #1a1815;
  --bk-border: #363029;
  --bk-border-muted: #282420;
  --bk-border-strong: #554d42;
  --bk-primary: #c4a476;
  --bk-primary-hover: #d0b389;
  --bk-primary-soft: #2b241a;
  --bk-primary-border: #574a35;
  --bk-on-primary: #1a1510;
  --bk-secondary: #93ad9c;
  --bk-secondary-soft: #1f2721;
  --bk-secondary-border: #3d4b42;
  --bk-neutral: #ece6da;
  --bk-neutral-soft: #292520;
  --bk-neutral-border: #363029;
  --bk-on-neutral: #1a1815;
  --bk-field-bg: #221f1b;
  --bk-field-border: #443d34;
  --bk-code-bg: #201e1a;
  --bk-code-border: #363029;
  --bk-overlay-surface: #221f1b;
  --bk-tooltip-bg: #ece6da;
  --bk-tooltip-fg: #1a1815;
  --bk-divider-color: #363029;
  --bk-body-image: radial-gradient(60rem 40rem at 70% -10%, rgb(196 164 118 / 0.05), transparent 60%);
}

[data-bk-style="zen"] .bk-card { border-inline: 0; border-block-start: 0; }
[data-bk-style="zen"] .bk-navbar { background: transparent; border-block-end: 1px solid var(--bk-border); }
[data-bk-style="zen"] .bk-table thead th { background: transparent; font-weight: 400; letter-spacing: 0.12em; }
[data-bk-style="zen"] .bk-section-head::after {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 1px;
  margin-block-start: var(--bk-space-4);
  background: var(--bk-primary);
}
[data-bk-style="zen"] .bk-title { font-weight: 400; }
[data-bk-style="zen"] .bk-blockquote { font-family: var(--bk-font-serif); border-inline-start-width: 1px; background: transparent; }
[data-bk-style="zen"] .bk-badge { font-weight: 400; letter-spacing: 0.08em; }

/* ==== derived contrast tokens — generated by scripts/derive-contrast.mjs
     Hue and saturation are the skin's; only lightness moved, and only far
     enough to clear WCAG AA. Regenerate with: npm run contrast:fix        */
[data-bk-style="zen"] {
  --bk-danger: #8f4136;
  --bk-danger-on-soft: #8f4136;
  --bk-danger-soft: #f2e3df;
  --bk-danger-text: #8f4136;
  --bk-field-placeholder: #958b78;
  --bk-info: #47616f;
  --bk-info-on-soft: #47616f;
  --bk-info-soft: #e4eaee;
  --bk-info-text: #47616f;
  --bk-on-danger: #ffffff;
  --bk-on-info: #ffffff;
  --bk-on-primary: #ffffff;
  --bk-on-secondary: #fbf9f4;
  --bk-on-success: #ffffff;
  --bk-on-warning: #ffffff;
  --bk-primary: #8a6f4e;
  --bk-primary-on-soft: #7a6245;
  --bk-primary-soft: #efe8dc;
  --bk-primary-text: #806748;
  --bk-secondary: #566b5e;
  --bk-secondary-soft: #e6ece7;
  --bk-success: #4d6b4a;
  --bk-success-on-soft: #4d6b4a;
  --bk-success-soft: #e6ede4;
  --bk-success-text: #4d6b4a;
  --bk-text-subtle: #827b6d;
  --bk-warning: #93701f;
  --bk-warning-on-soft: #82631b;
  --bk-warning-soft: #f3ecd8;
  --bk-warning-text: #86661c;
}
[data-bk-style="zen"][data-bk-theme="dark"] {
  --bk-danger: #8f4136;
  --bk-danger-on-soft: #8f4136;
  --bk-danger-soft: #f2e3df;
  --bk-danger-text: #c7756a;
  --bk-field-placeholder: #a79f8f;
  --bk-info: #47616f;
  --bk-info-on-soft: #47616f;
  --bk-info-soft: #e4eaee;
  --bk-info-text: #6c8ea1;
  --bk-on-danger: #f4c8cd;
  --bk-on-info: #c1dff9;
  --bk-on-primary: #1a1510;
  --bk-on-secondary: #443719;
  --bk-on-success: #b2f2cf;
  --bk-on-warning: #ffffff;
  --bk-primary: #c4a476;
  --bk-primary-on-soft: #c4a476;
  --bk-primary-soft: #2b241a;
  --bk-primary-text: #c4a476;
  --bk-secondary: #93ad9c;
  --bk-secondary-soft: #1f2721;
  --bk-success: #4d6b4a;
  --bk-success-on-soft: #4d6b4a;
  --bk-success-soft: #e6ede4;
  --bk-success-text: #6b9567;
  --bk-text-subtle: #857d6f;
  --bk-warning: #8f6d1e;
  --bk-warning-on-soft: #82631b;
  --bk-warning-soft: #f3ecd8;
  --bk-warning-text: #ac8324;
}
/* ==== end derived contrast tokens ==== */


/* auto-mode mirror for "zen" — generated by scripts/build.mjs */
@media (prefers-color-scheme: dark) {
  [data-bk-style="zen"][data-bk-theme="auto"] {
  --bk-bg: #1a1815;
  --bk-bg-subtle: #201e1a;
  --bk-surface: #221f1b;
  --bk-surface-2: #292520;
  --bk-surface-3: #322d27;
  --bk-text: #ece6da;
  --bk-text-muted: #b3aa9a;
  --bk-text-subtle: #857d6f;
  --bk-text-inverted: #1a1815;
  --bk-border: #363029;
  --bk-border-muted: #282420;
  --bk-border-strong: #554d42;
  --bk-primary: #c4a476;
  --bk-primary-hover: #d0b389;
  --bk-primary-soft: #2b241a;
  --bk-primary-border: #574a35;
  --bk-on-primary: #1a1510;
  --bk-secondary: #93ad9c;
  --bk-secondary-soft: #1f2721;
  --bk-secondary-border: #3d4b42;
  --bk-neutral: #ece6da;
  --bk-neutral-soft: #292520;
  --bk-neutral-border: #363029;
  --bk-on-neutral: #1a1815;
  --bk-field-bg: #221f1b;
  --bk-field-border: #443d34;
  --bk-code-bg: #201e1a;
  --bk-code-border: #363029;
  --bk-overlay-surface: #221f1b;
  --bk-tooltip-bg: #ece6da;
  --bk-tooltip-fg: #1a1815;
  --bk-divider-color: #363029;
  --bk-body-image: radial-gradient(60rem 40rem at 70% -10%, rgb(196 164 118 / 0.05), transparent 60%);


  --bk-danger: #8f4136;
  --bk-danger-on-soft: #8f4136;
  --bk-danger-soft: #f2e3df;
  --bk-danger-text: #c7756a;
  --bk-field-placeholder: #a79f8f;
  --bk-info: #47616f;
  --bk-info-on-soft: #47616f;
  --bk-info-soft: #e4eaee;
  --bk-info-text: #6c8ea1;
  --bk-on-danger: #f4c8cd;
  --bk-on-info: #c1dff9;
  --bk-on-primary: #1a1510;
  --bk-on-secondary: #443719;
  --bk-on-success: #b2f2cf;
  --bk-on-warning: #ffffff;
  --bk-primary: #c4a476;
  --bk-primary-on-soft: #c4a476;
  --bk-primary-soft: #2b241a;
  --bk-primary-text: #c4a476;
  --bk-secondary: #93ad9c;
  --bk-secondary-soft: #1f2721;
  --bk-success: #4d6b4a;
  --bk-success-on-soft: #4d6b4a;
  --bk-success-soft: #e6ede4;
  --bk-success-text: #6b9567;
  --bk-text-subtle: #857d6f;
  --bk-warning: #8f6d1e;
  --bk-warning-on-soft: #82631b;
  --bk-warning-soft: #f3ecd8;
  --bk-warning-text: #ac8324;
}
}