html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  --hk-primary: #f53989;
  --hk-primary-strong: #8d2351;
  --hk-on-primary: #250914;
  --hk-primary-container: #ffe4ee;
  --hk-on-primary-container: #8d2351;
  --hk-secondary: #dbfa55;
  --hk-on-secondary: #293206;
  --hk-secondary-container: #eefbb9;
  --hk-on-secondary-container: #293206;
  --hk-tertiary: #f4f08a;
  --hk-tertiary-container: #fff8bf;
  --hk-surface: #ffffff;
  --hk-surface-container-low: #fbfaf8;
  --hk-surface-container: #efeeeb;
  --hk-surface-container-high: #e7e5e1;
  --hk-on-surface: #1d1e22;
  --hk-on-surface-variant: #62636b;
  --hk-outline: #62636b;
  --hk-outline-variant: #d6d5d1;
  --hk-error: #ba1a1a;
  --hk-canvas: #f8f7f4;
  --hk-font-family: "Montserrat Variable", Montserrat, sans-serif;
  --hk-font-body: "Montserrat Variable", Montserrat, sans-serif;
  --hk-font-display: "Montserrat Variable", Montserrat, sans-serif;
  --hk-display-weight: 820;
  --hk-display-tracking: -0.055em;
  --hk-shape-small: 14px;
  --hk-shape-medium: 24px;
  --hk-shape-large: 32px;
  --hk-shape-extra-large: 42px;
  --hk-shape-full: 999px;
  --hk-space-1: 4px;
  --hk-space-2: 8px;
  --hk-space-3: 12px;
  --hk-space-4: 16px;
  --hk-space-5: 24px;
  --hk-space-6: 32px;
  --hk-space-7: 40px;
  --hk-space-8: 48px;
  --hk-shadow-card: 0 16px 38px rgba(27, 23, 48, 0.12);
  --hk-shadow-elevated: 0 22px 60px rgba(27, 23, 48, 0.16);
  --hk-shadow-button: 0 12px 24px rgba(27, 23, 48, 0.1);
  --hk-motion-effect: 180ms cubic-bezier(0.2, 0, 0, 1);
  --hk-motion-spatial: 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --hk-motion-emphasized: 500ms cubic-bezier(0.2, 0, 0, 1);
  --hk-field-height: 54px;
  --hk-field-radius: 16px;
  --hk-field-border-width: 1px;
  --hk-field-background: var(--hk-surface);
  --hk-action-radius: 999px;
  --hk-surface-border-width: 1px;
  --hk-surface-shadow: 0 22px 60px rgba(27, 23, 48, 0.14);
  --hk-density-scale: 1;
  --hk-type-label-small: 0.75rem;
  --hk-type-label-medium: 0.8125rem;
  --hk-type-body-medium: 0.9375rem;
  --hk-type-body-large: 1rem;
  --hk-touch-target: 48px;
}

html[data-theme-mode="dark"] {
  color-scheme: dark;
  --hk-primary: #ff88b6;
  --hk-primary-strong: #ffa6c8;
  --hk-on-primary: #2d0819;
  --hk-primary-container: #47283b;
  --hk-on-primary-container: #ffa6c8;
  --hk-secondary: #d5ef6e;
  --hk-on-secondary: #263004;
  --hk-secondary-container: #343b24;
  --hk-on-secondary-container: #d5ef6e;
  --hk-tertiary-container: #3c3900;
  --hk-surface: #1d2027;
  --hk-surface-container-low: #22252c;
  --hk-surface-container: #272a33;
  --hk-surface-container-high: #343741;
  --hk-on-surface: #f7f4f1;
  --hk-on-surface-variant: #b7b6c0;
  --hk-outline: #b7b6c0;
  --hk-outline-variant: #494b57;
  --hk-error: #ffb4ab;
  --hk-canvas: #111318;
  --hk-shadow-card: 0 14px 40px rgba(0, 0, 0, 0.28);
  --hk-shadow-elevated: 0 18px 55px rgba(0, 0, 0, 0.38);
  --hk-shadow-button: 0 9px 22px rgba(215, 255, 0, 0.2);
  --hk-field-background: var(--hk-surface-container-low);
  --hk-surface-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--hk-on-surface);
  background: var(--hk-canvas);
  font-family: var(--hk-font-body, var(--hk-font-family));
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: var(--hk-on-primary);
  background: var(--hk-primary);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.configuration-error {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
}

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