/* @bulk:start web-kit/styles/tokens library Universal Web Kit Theme Tokens */
:root {
  --wk-seed-ink: #09090f;
  --wk-seed-paper: #f8f7f3;
  --wk-seed-white: #ffffff;
  --wk-seed-violet: #7c3aed;
  --wk-seed-cyan: #22d3ee;
  --wk-seed-lime: #b7f600;
  --wk-seed-rose: #f43f8e;
  --wk-content-max: 78rem;
  --wk-gutter: clamp(1rem, 4vw, 2.5rem);
  --wk-section-y: clamp(4rem, 10vh, 7.5rem);
  --wk-space-1: .25rem;
  --wk-space-2: .5rem;
  --wk-space-3: .75rem;
  --wk-space-4: 1rem;
  --wk-space-6: 1.5rem;
  --wk-space-8: 2rem;
  --wk-space-12: 3rem;
  --wk-radius-sm: .55rem;
  --wk-radius-md: .85rem;
  --wk-radius-lg: 1.35rem;
  --wk-radius-xl: 2rem;
  --wk-text-display: clamp(2.7rem, 7vw, 6.5rem);
  --wk-text-h2: clamp(2rem, 4vw, 3.5rem);
  --wk-text-lead: clamp(1.05rem, 1.8vw, 1.35rem);
  --wk-motion-fast: 220ms cubic-bezier(.2,.8,.2,1);
  --wk-motion-slow: 650ms cubic-bezier(.16,1,.3,1);
  --wk-bg: var(--wk-seed-ink);
  --wk-surface: color-mix(in srgb, var(--wk-seed-white) 7%, var(--wk-bg));
  --wk-surface-2: color-mix(in srgb, var(--wk-seed-white) 12%, var(--wk-bg));
  --wk-text: var(--wk-seed-white);
  --wk-muted: color-mix(in srgb, var(--wk-text) 66%, transparent);
  --wk-primary: var(--wk-seed-violet);
  --wk-accent: var(--wk-seed-cyan);
  --wk-highlight: var(--wk-seed-lime);
  --wk-danger: var(--wk-seed-rose);
  --wk-on-primary: var(--wk-seed-white);
  --wk-outline: color-mix(in srgb, var(--wk-text) 14%, transparent);
  --wk-glass: color-mix(in srgb, var(--wk-bg) 68%, transparent);
  --wk-shadow-sm: 0 .7rem 2rem color-mix(in srgb, var(--wk-seed-ink) 22%, transparent);
  --wk-shadow-lg: 0 2rem 6rem color-mix(in srgb, var(--wk-seed-ink) 48%, transparent);
  --wk-canvas-primary: color-mix(in srgb, var(--wk-primary) 32%, transparent);
  --wk-canvas-accent: color-mix(in srgb, var(--wk-accent) 16%, transparent);
  --wk-canvas-ink: color-mix(in srgb, var(--wk-text) 72%, transparent);
}

.wk-preview[data-theme="dark"] {
  --wk-bg: var(--wk-seed-ink);
  --wk-surface: color-mix(in srgb, var(--wk-seed-white) 7%, var(--wk-bg));
  --wk-surface-2: color-mix(in srgb, var(--wk-seed-white) 12%, var(--wk-bg));
  --wk-text: var(--wk-seed-white);
  --wk-muted: color-mix(in srgb, var(--wk-text) 66%, transparent);
  --wk-outline: color-mix(in srgb, var(--wk-text) 14%, transparent);
  --wk-glass: color-mix(in srgb, var(--wk-bg) 68%, transparent);
  --wk-shadow-sm: 0 .7rem 2rem color-mix(in srgb, var(--wk-seed-ink) 22%, transparent);
  --wk-shadow-lg: 0 2rem 6rem color-mix(in srgb, var(--wk-seed-ink) 48%, transparent);
}

.wk-preview[data-theme="light"] {
  --wk-bg: var(--wk-seed-paper);
  --wk-surface: color-mix(in srgb, var(--wk-seed-white) 88%, var(--wk-bg));
  --wk-surface-2: color-mix(in srgb, var(--wk-seed-violet) 5%, var(--wk-seed-white));
  --wk-text: var(--wk-seed-ink);
  --wk-highlight: var(--wk-seed-violet);
  --wk-accent: color-mix(in srgb, var(--wk-seed-cyan) 42%, var(--wk-seed-ink));
  --wk-muted: color-mix(in srgb, var(--wk-text) 62%, transparent);
  --wk-outline: color-mix(in srgb, var(--wk-text) 13%, transparent);
  --wk-glass: color-mix(in srgb, var(--wk-seed-white) 72%, transparent);
  --wk-shadow-sm: 0 .7rem 2rem color-mix(in srgb, var(--wk-seed-violet) 10%, transparent);
  --wk-shadow-lg: 0 2rem 6rem color-mix(in srgb, var(--wk-seed-violet) 16%, transparent);
  --wk-canvas-primary: color-mix(in srgb, var(--wk-seed-violet) 18%, transparent);
  --wk-canvas-accent: color-mix(in srgb, var(--wk-seed-cyan) 13%, transparent);
  --wk-canvas-ink: color-mix(in srgb, var(--wk-seed-ink) 24%, transparent);
}

.wk-preview { min-block-size: 100vh; background: var(--wk-bg); color: var(--wk-text); font-family: var(--mas-font-sans, ui-sans-serif, system-ui, sans-serif); }
.wk-preview *, .wk-preview *::before, .wk-preview *::after { box-sizing: border-box; }
.wk-preview a { color: inherit; text-decoration: none; }
.wk-preview img { max-inline-size: 100%; display: block; }
.wk-section { max-inline-size: var(--wk-content-max); margin-inline: auto; padding: var(--wk-section-y) var(--wk-gutter); }
.wk-preview__controls { position: fixed; inset-block-end: var(--wk-space-4); inset-inline-end: var(--wk-space-4); z-index: 50; }
/* @bulk:end */