@charset "UTF-8";

/* ../../node_modules/.pnpm/ng-primitives@0.130.1_6c23f0f6b1011673c0250f44e4a56e5f/node_modules/ng-primitives/example-theme/index.css */
:root {
  --ngp-white: oklch(1 0.001 0.001);
  --ngp-black: oklch(0 0.001 0.001);
  --ngp-gray-50: oklch(0.985 0 0);
  --ngp-gray-100: oklch(0.967 0.001 286.375);
  --ngp-gray-200: oklch(0.92 0.004 286.32);
  --ngp-gray-300: oklch(0.871 0.006 286.286);
  --ngp-gray-400: oklch(0.705 0.015 286.067);
  --ngp-gray-500: oklch(0.552 0.016 285.938);
  --ngp-gray-600: oklch(0.442 0.017 285.786);
  --ngp-gray-700: oklch(0.37 0.013 285.805);
  --ngp-gray-800: oklch(0.274 0.006 286.033);
  --ngp-gray-900: oklch(0.21 0.006 285.885);
  --ngp-gray-950: oklch(0.141 0.005 285.823);
  --ngp-background: var(--ngp-white);
  --ngp-background-secondary: var(--ngp-gray-300);
  --ngp-background-hover: var(--ngp-gray-50);
  --ngp-background-active: var(--ngp-gray-100);
  --ngp-background-inverse: var(--ngp-black);
  --ngp-background-disabled: var(--ngp-gray-100);
  --ngp-background-blue: #dbeafe;
  --ngp-background-success: oklch(84.1% 0.238 128.85);
  --ngp-primary: #f01e2b;
  --ngp-primary-hover: #d81825;
  --ngp-primary-active: #c1141f;
  --ngp-primary-text: var(--ngp-white);
  --ngp-border: rgba(0, 0, 0, 0.1);
  --ngp-border-secondary: var(--ngp-gray-300);
  --ngp-border-blue: #3b82f6;
  --ngp-border-inverse: var(--ngp-black);
  --ngp-text-emphasis: var(--ngp-black);
  --ngp-text-primary: var(--ngp-gray-900);
  --ngp-text-secondary: var(--ngp-gray-600);
  --ngp-text-tertiary: var(--ngp-gray-500);
  --ngp-text-disabled: var(--ngp-gray-400);
  --ngp-text-placeholder: var(--ngp-gray-400);
  --ngp-text-inverse: var(--ngp-white);
  --ngp-text-blue: #3b82f6;
  --ngp-text-red: #ef4444;
  --ngp-shadow: 0 1px 2px 0 rgba(0 0 0 0.05);
  --ngp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --ngp-shadow-border: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  --ngp-focus-ring: rgb(59 130 246);
  --ngp-avatar-background: #bae6fd;
  --ngp-avatar-border: #fff;
  --ngp-button-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1),
    0 0 0 1px rgb(0 0 0 / 0.05);
  --ngp-input-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.dark {
  --ngp-background: var(--ngp-gray-950);
  --ngp-background-secondary: var(--ngp-gray-700);
  --ngp-background-hover: var(--ngp-gray-900);
  --ngp-background-active: var(--ngp-gray-800);
  --ngp-background-inverse: var(--ngp-white);
  --ngp-background-disabled: var(--ngp-gray-900);
  --ngp-background-blue: rgba(95, 160, 246, 0.274);
  --ngp-primary: #ff4651;
  --ngp-primary-hover: #ff5d67;
  --ngp-primary-active: #f0303c;
  --ngp-border: var(--ngp-gray-800);
  --ngp-border-secondary: var(--ngp-gray-700);
  --ngp-border-blue: #1980ff;
  --ngp-border-inverse: var(--ngp-white);
  --ngp-text-emphasis: var(--ngp-white);
  --ngp-text-primary: var(--ngp-gray-100);
  --ngp-text-secondary: var(--ngp-gray-300);
  --ngp-text-tertiary: var(--ngp-gray-400);
  --ngp-text-disabled: var(--ngp-gray-500);
  --ngp-text-inverse: var(--ngp-black);
  --ngp-text-blue: #1980ff;
  --ngp-text-red: #ff4d4d;
  --ngp-avatar-background: #18181b;
  --ngp-avatar-border: #3f3f46;
  --ngp-shadow-border: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  --ngp-input-shadow: 0 1px 2px rgba(255, 255, 255, 0.007), 0 0 0 1px rgba(255, 255, 255, 0.1);
  --ngp-button-shadow:
    0 1px 3px 0 rgb(255, 255, 255, 0.1),
    0 1px 2px -1px rgb(255, 255, 255, 0.1),
    0 0 0 1px rgb(255, 255, 255, 0.05);
}

/* src/styles.scss */
:root {
  color-scheme: light;
  --hh-white: #ffffff;
  --hh-black: #05060c;
  --hh-pond-900: #172038;
  --hh-pond-800: #253a5e;
  --hh-pond-700: #3c5e8b;
  --hh-pond-600: #4f8fba;
  --hh-pond-400: #73bed3;
  --hh-pond-200: #a4dddb;
  --hh-lily-900: #19332d;
  --hh-lily-800: #25562e;
  --hh-lily-700: #468232;
  --hh-lily-600: #75a743;
  --hh-lily-400: #a8ca58;
  --hh-lily-200: #d0da91;
  --hh-wood-900: #4d2b32;
  --hh-wood-800: #7a4841;
  --hh-wood-700: #ad7757;
  --hh-wood-600: #c09473;
  --hh-wood-400: #d7b594;
  --hh-wood-200: #e7d5b3;
  --hh-amber-900: #341c27;
  --hh-amber-800: #602c2c;
  --hh-amber-700: #884b2b;
  --hh-amber-600: #be772b;
  --hh-amber-400: #de9e41;
  --hh-amber-200: #e8c170;
  --hh-scarlet-900: #241527;
  --hh-scarlet-800: #411d31;
  --hh-scarlet-700: #752438;
  --hh-scarlet-600: #a53030;
  --hh-scarlet-400: #cf573c;
  --hh-scarlet-200: #da863e;
  --hh-dusk-900: #1e1d39;
  --hh-dusk-800: #402751;
  --hh-dusk-700: #7a367b;
  --hh-dusk-600: #a23e8c;
  --hh-dusk-400: #c65197;
  --hh-dusk-200: #df84a5;
  --hh-ink-900: #090a14;
  --hh-ink-800: #10141f;
  --hh-ink-700: #151d28;
  --hh-ink-600: #202e37;
  --hh-ink-500: #394a50;
  --hh-ink-400: #577277;
  --hh-cloud-600: #819796;
  --hh-cloud-400: #a8b5b2;
  --hh-cloud-300: #b8c2bf;
  --hh-cloud-200: #c7cfcc;
  --hh-cloud-100: #dde1dc;
  --hh-cloud-50: #ebede9;
  --hh-font-display:
    "Lilita One",
    system-ui,
    sans-serif;
  --hh-font-pixel: "Press Start 2P", monospace;
  --hh-font-pixel-ui:
    "Silkscreen",
    "Press Start 2P",
    monospace;
  --hh-font-body:
    "Baloo 2",
    system-ui,
    sans-serif;
  --hh-outline-hard: 3px solid var(--hh-ink-900);
  --hh-outline-hard-thin: 2px solid var(--hh-ink-900);
  --hh-bevel-out: inset 2px 2px 0 rgb(255 255 255 / 0.55), inset -2px -2px 0 rgb(9 10 20 / 0.45);
  --hh-bevel-in: inset 2px 2px 0 rgb(9 10 20 / 0.5), inset -2px -2px 0 rgb(255 255 255 / 0.28);
  --hh-bevel-out-sm: inset 1px 1px 0 rgb(255 255 255 / 0.6), inset -1px -1px 0 rgb(9 10 20 / 0.3);
  --hh-shadow-hard-sm: 0 3px 0 var(--hh-ink-900);
  --hh-shadow-hard-md: 0 5px 0 var(--hh-ink-900);
  --hh-shadow-hard-lg: 0 8px 0 var(--hh-ink-900);
  --hh-shadow-hard-drop: 5px 5px 0 rgb(9 10 20 / 0.55);
  --hh-text-shadow-hard: 2px 2px 0 var(--hh-ink-900);
  --hh-text-shadow-hard-sm: 1px 1px 0 var(--hh-ink-900);
  --hh-dither-25: repeating-conic-gradient(rgb(9 10 20 / 0.18) 0% 25%, transparent 0% 50%) 0 0 / 8px 8px;
  --hh-dither-50: repeating-conic-gradient(rgb(255 255 255 / 0.16) 0% 25%, transparent 0% 50%) 0 0 / 6px 6px;
  --hh-panel-leaf:
    linear-gradient(
      180deg,
      var(--hh-lily-600) 0 46%,
      var(--hh-lily-800) 46%);
  --hh-panel-window:
    linear-gradient(
      180deg,
      var(--hh-pond-700) 0 46%,
      var(--hh-pond-800) 46%);
  --hh-panel-gold:
    linear-gradient(
      180deg,
      var(--hh-amber-400) 0 46%,
      var(--hh-amber-700) 46%);
  --hh-panel-alert:
    linear-gradient(
      180deg,
      var(--hh-scarlet-600) 0 46%,
      var(--hh-scarlet-800) 46%);
  --hh-panel-plate:
    linear-gradient(
      180deg,
      var(--hh-cloud-50) 0 46%,
      var(--hh-cloud-300) 46%);
  --hh-panel-parchment:
    linear-gradient(
      180deg,
      var(--hh-cloud-50) 0 46%,
      var(--hh-wood-200) 46%);
  --hh-panel-menu:
    linear-gradient(
      180deg,
      var(--hh-ink-600) 0 46%,
      var(--hh-ink-800) 46%);
  --hh-tracking-tight: -0.01em;
  --hh-tracking-normal: 0;
  --hh-tracking-wide: 0.04em;
  --hh-tracking-pixel: 0.06em;
  --hh-dur-fast: 120ms;
  --hh-dur-med: 220ms;
  --hh-dur-slow: 420ms;
  --hh-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hh-ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --hh-ease-press: cubic-bezier(0.4, 0, 0.2, 1);
  --hh-bg-page: var(--hh-cloud-50);
  --hh-bg-surface: var(--hh-white);
  --hh-bg-sunken: var(--hh-cloud-100);
  --hh-bg-hover: var(--hh-cloud-200);
  --hh-bg-active: var(--hh-cloud-300);
  --hh-dark-bg-start: var(--hh-ink-800);
  --hh-dark-bg-end: var(--hh-ink-900);
  --hh-dark-bg-surface: var(--hh-ink-700);
  --hh-dark-bg-raised: var(--hh-ink-600);
  --hh-dark-text: var(--hh-cloud-50);
  --hh-dark-text-dim: var(--hh-cloud-400);
  --hh-dark-border: rgb(235 237 233 / 0.14);
  --hh-text-color: var(--hh-ink-900);
  --hh-text-color-strong: var(--hh-ink-900);
  --hh-text-color-muted: var(--hh-ink-500);
  --hh-text-color-inverse: var(--hh-white);
  --hh-border-color: rgb(9 10 20 / 0.1);
  --hh-border-color-strong: var(--hh-cloud-300);
  --hh-border-width: 1px;
  --hh-primary: var(--hh-lily-700);
  --hh-primary-hover: var(--hh-lily-600);
  --hh-primary-active: var(--hh-lily-800);
  --hh-primary-contrast: var(--hh-white);
  --hh-primary-panel: var(--hh-panel-leaf);
  --hh-primary-soft: var(--hh-lily-200);
  --hh-primary-subtle: var(--hh-lily-200);
  --hh-primary-subtle-hover: color-mix(in srgb, var(--hh-lily-200), var(--hh-lily-400) 50%);
  --hh-primary-border-subtle: var(--hh-lily-400);
  --hh-primary-on-soft: var(--hh-lily-800);
  --hh-secondary: var(--hh-cloud-200);
  --hh-secondary-hover: var(--hh-cloud-300);
  --hh-secondary-active: var(--hh-cloud-400);
  --hh-secondary-contrast: var(--hh-ink-900);
  --hh-secondary-panel: var(--hh-panel-plate);
  --hh-secondary-soft: var(--hh-cloud-100);
  --hh-secondary-subtle: var(--hh-cloud-50);
  --hh-secondary-subtle-hover: var(--hh-cloud-100);
  --hh-secondary-border-subtle: var(--hh-cloud-300);
  --hh-secondary-on-soft: var(--hh-ink-900);
  --hh-secondary-accent: var(--hh-ink-500);
  --hh-success: var(--hh-lily-600);
  --hh-success-hover: var(--hh-lily-700);
  --hh-success-active: var(--hh-lily-800);
  --hh-success-contrast: var(--hh-white);
  --hh-success-panel: var(--hh-panel-leaf);
  --hh-success-soft: var(--hh-lily-200);
  --hh-success-subtle: var(--hh-lily-200);
  --hh-success-subtle-hover: color-mix(in srgb, var(--hh-lily-200), var(--hh-lily-400) 50%);
  --hh-success-border-subtle: var(--hh-lily-400);
  --hh-success-on-soft: var(--hh-lily-800);
  --hh-info: var(--hh-pond-600);
  --hh-info-hover: var(--hh-pond-700);
  --hh-info-active: var(--hh-pond-800);
  --hh-info-contrast: var(--hh-white);
  --hh-info-panel: var(--hh-panel-window);
  --hh-info-soft: var(--hh-pond-200);
  --hh-info-subtle: var(--hh-pond-200);
  --hh-info-subtle-hover: color-mix(in srgb, var(--hh-pond-200), var(--hh-pond-400) 50%);
  --hh-info-border-subtle: var(--hh-pond-400);
  --hh-info-on-soft: var(--hh-pond-900);
  --hh-warn: var(--hh-amber-600);
  --hh-warn-hover: var(--hh-amber-700);
  --hh-warn-active: var(--hh-amber-800);
  --hh-warn-contrast: var(--hh-ink-900);
  --hh-warn-panel: var(--hh-panel-gold);
  --hh-warn-soft: var(--hh-amber-200);
  --hh-warn-subtle: var(--hh-amber-200);
  --hh-warn-subtle-hover: color-mix(in srgb, var(--hh-amber-200), var(--hh-amber-400) 50%);
  --hh-warn-border-subtle: var(--hh-amber-400);
  --hh-warn-on-soft: var(--hh-amber-800);
  --hh-danger: var(--hh-scarlet-600);
  --hh-danger-hover: var(--hh-scarlet-700);
  --hh-danger-active: var(--hh-scarlet-800);
  --hh-danger-contrast: var(--hh-white);
  --hh-danger-panel: var(--hh-panel-alert);
  --hh-danger-soft: var(--hh-scarlet-200);
  --hh-danger-subtle: var(--hh-scarlet-200);
  --hh-danger-subtle-hover: color-mix(in srgb, var(--hh-scarlet-200), var(--hh-scarlet-400) 50%);
  --hh-danger-border-subtle: var(--hh-scarlet-400);
  --hh-danger-on-soft: var(--hh-scarlet-800);
  --hh-contrast-soft: var(--hh-ink-900);
  --hh-contrast-on-soft: var(--hh-white);
  --hh-focus-ring-width: 2px;
  --hh-focus-ring-offset: 2px;
  --hh-focus-ring-color: var(--hh-pond-400);
  --hh-disabled-opacity: 0.6;
  --hh-disabled-filter: saturate(0.25) brightness(0.85);
  --hh-space-1: 0.25rem;
  --hh-space-2: 0.5rem;
  --hh-space-3: 0.75rem;
  --hh-space-4: 1rem;
  --hh-space-5: 1.25rem;
  --hh-space-6: 1.5rem;
  --hh-space-8: 2rem;
  --hh-space-10: 2.5rem;
  --hh-space-12: 3rem;
  --hh-space-16: 4rem;
  --hh-space-20: 5rem;
  --hh-space-24: 6rem;
  --hh-container-sm: 24rem;
  --hh-container-md: 32rem;
  --hh-container-lg: 42rem;
  --hh-radius-sm: 3px;
  --hh-radius-md: 5px;
  --hh-radius-lg: 8px;
  --hh-radius-xl: 12px;
  --hh-radius-full: 999px;
  --hh-radius-field: var(--hh-radius-md);
  --hh-radius-panel: var(--hh-radius-md);
  --hh-radius-card: var(--hh-radius-lg);
  --hh-text-xs: 0.625rem;
  --hh-text-sm: 0.875rem;
  --hh-text-base: 1rem;
  --hh-text-lg: 1.125rem;
  --hh-text-xl: 1.25rem;
  --hh-text-2xl: 1.5rem;
  --hh-text-3xl: 1.875rem;
  --hh-font-normal: 400;
  --hh-font-medium: 500;
  --hh-font-semibold: 600;
  --hh-font-bold: 700;
  --hh-font-extrabold: 800;
  --hh-text-display-xl: clamp(56px, 8vw, 104px);
  --hh-text-display-lg: clamp(40px, 5vw, 64px);
  --hh-text-display-md: 40px;
  --hh-text-heading-lg: 28px;
  --hh-text-heading-md: 22px;
  --hh-text-heading-sm: 18px;
  --hh-text-body-lg: 20px;
  --hh-text-body-md: 17px;
  --hh-text-body-sm: 14px;
  --hh-text-pixel-lg: 20px;
  --hh-text-pixel-md: 14px;
  --hh-text-pixel-sm: 11px;
  --hh-text-label: 13px;
  --hh-lh-tight: 1.05;
  --hh-lh-snug: 1.25;
  --hh-lh-normal: 1.5;
  --hh-transition-duration: var(--hh-dur-fast);
}
@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/lilita-one@latest/latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/press-start-2p@latest/latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/baloo-2@latest/latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/baloo-2@latest/latin-500-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/baloo-2@latest/latin-600-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/baloo-2@latest/latin-700-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/baloo-2@latest/latin-800-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/silkscreen@latest/latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/silkscreen@latest/latin-700-normal.woff2) format("woff2");
}
:root {
  --hh-piece-blue: #3b82f6;
  --hh-piece-red: #ef4444;
  --hh-piece-green: #22c55e;
  --hh-piece-yellow: #eab308;
  --hh-piece-purple: #a855f7;
  --hh-piece-black: #1a1a1a;
  --hh-piece-white: #e5e7eb;
  --hh-piece-size: 22px;
  --hh-cell-min-height: 4rem;
}
body {
  color: var(--hh-text-color);
  background: var(--hh-bg-page);
  font-family: var(--hh-font-body);
  font-size: var(--hh-text-base);
  line-height: var(--hh-lh-normal);
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */