/*
  Minimal reset: predictable box sizing and margins without overreach.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  padding: 0;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
input,
textarea,
select {
  background-color: transparent;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill:hover,
select:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill:active,
select:-webkit-autofill:active {
  font: inherit !important;
  -webkit-text-fill-color: inherit !important;
  caret-color: inherit !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 1000px var(--surface-default) inset !important;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li,
ol li {
  margin: 0;
  padding: 0;
}
/*
  Focus — one canonical keyboard-focus affordance for the entire system:
  a 2px dashed ring in --on-surface-primary, offset 3px, on everything focusable.
  :focus-visible keeps it keyboard-only (no ring on mouse click). Components must
  not define their own focus outlines; custom controls that hide a native <input>
  redirect THIS ring onto their visible box in their own stylesheet via .focus-ring().
*/
:focus-visible {
  outline: 2px dashed var(--on-surface-primary);
  outline-offset: 3px;
}
/* Layout */
/* Breakpoints */
/* UI KIT tokens */
:root {
  /* Base */
  --base-0: #ffffff;
  --base-50: #fafafa;
  --base-100: #f5f5f4;
  --base-200: #ececec;
  --base-250: #e3e2e0;
  --base-300: #e3e3e3;
  --base-400: #dbdad8;
  --base-500: #c3c1bf;
  --base-600: #9f9d9b;
  --base-650: #747371;
  --base-700: #5b5a59;
  --base-800: #424040;
  --base-900: #333231;
  --base-1000: #2b2b2b;
  --base-1100: #252525;
  --base-1200: #1a1a1a;
  --base-1300: #000000;
  /* Accent */
  --accent-violet: #acaff4;
  --accent-electric-cobalt: #2656ff;
  --accent-deep-violet: #4624ec;
  --accent-deep-navy: #292435;
  --accent-pale-green: #e0f685;
  --accent-highlighter-green: #bdec00;
  --accent-lime-green: #81be01;
  --accent-forest-green: #2a3e2e;
  --accent-pale-red: #f8d3b8;
  --accent-signal-red: #ff461e;
  --accent-deep-red: #ca3f21;
  --accent-deep-burgundy: #361719;
  /* Blue — -25 is the leveled label tint (one rung lighter than -50). */
  --blue-25: #e9edfb;
  --blue-50: #e0e8ff;
  --blue-200: #c7d4ff;
  --blue-400: #5d81ff;
  --blue-600: #2656ff;
  --blue-800: #0a34c6;
  /* Green */
  --green-25: #e2efe4;
  --green-50: #ccf4d5;
  --green-200: #a6ecb5;
  --green-400: #6edb84;
  --green-600: #21a13b;
  --green-800: #2e6e3b;
  /* Purple */
  --purple-25: #ebe4f8;
  --purple-50: #dfd1ff;
  --purple-200: #d1bcff;
  --purple-400: #8255ee;
  --purple-600: #5b31c1;
  --purple-800: #3e2185;
  /* Red */
  --red-25: #f7e4e4;
  --red-50: #ffd1d4;
  --red-200: #ffadb2;
  --red-400: #fb656d;
  --red-600: #e21f29;
  --red-800: #c41821;
  /* Yellow */
  --yellow-25: #f0ecde;
  --yellow-50: #f9e5c3;
  --yellow-200: #f6d7a2;
  --yellow-400: #f4b64a;
  --yellow-600: #b97809;
  --yellow-800: #9a6710;
  /* Signal — status + categorical meaning colors */
  --signal-danger: var(--red-800);
  --signal-danger-light: var(--red-50);
  --signal-danger-subdued: var(--red-200);
  --signal-info: var(--accent-electric-cobalt);
  --signal-info-light: var(--blue-50);
  --signal-info-subdued: var(--blue-200);
  --signal-success: var(--green-800);
  --signal-success-light: var(--green-50);
  --signal-success-subdued: var(--green-200);
  --signal-warning: var(--yellow-800);
  --signal-warning-light: var(--yellow-50);
  --signal-warning-subdued: var(--yellow-200);
  --signal-intelligence: var(--purple-600);
  --signal-intelligence-light: var(--purple-50);
  --signal-intelligence-subdued: var(--purple-200);
  /* Signal · Soft — the leveled low-chroma categorical tier (Badge Soft strength,
       the "label" look). Each hue's -25 rung, leveled to one uniform ink so a row
       reads as a family, not a spectrum. Same Signal hues as the status levels
       above, decoupled from status meaning. */
  --signal-neutral-soft: var(--base-200);
  --signal-info-soft: var(--blue-25);
  --signal-success-soft: var(--green-25);
  --signal-warning-soft: var(--yellow-25);
  --signal-danger-soft: var(--red-25);
  --signal-intelligence-soft: var(--purple-25);
  --signal-campaign-soft: #edf1d6;
  /* Brand */
  --brand-primary: var(--accent-electric-cobalt);
  --brand-secondary: var(--accent-deep-navy);
  --on-brand-primary: var(--base-50);
  --on-brand-secondary: var(--base-50);
  /* Interface */
  --interface-action-primary: var(--accent-deep-navy);
  --interface-action-secondary: var(--base-200);
  --interface-action-brand: var(--brand-primary);
  --interface-border: var(--base-650);
  --interface-disabled: var(--base-400);
  --interface-divider: var(--base-400);
  --interface-highlight: var(--blue-50);
  --interface-link: var(--accent-electric-cobalt);
  --interface-on-action-primary: var(--base-50);
  --interface-on-action-secondary: var(--accent-deep-navy);
  --interface-on-action-brand: var(--on-brand-primary);
  --interface-on-disabled: var(--base-500);
  --interface-selected: var(--accent-electric-cobalt);
  /* Surface */
  --surface-default: var(--base-0);
  --surface-primary: var(--base-50);
  --surface-secondary: var(--base-100);
  --surface-tertiary: var(--base-200);
  --surface-quaternary: var(--base-300);
  --surface-campaign: var(--accent-highlighter-green);
  --on-surface-campaign: var(--accent-forest-green);
  --surface-brand: var(--accent-deep-navy);
  --surface-ai-primary: var(--purple-600);
  --surface-ai-secondary: var(--purple-50);
  /* AI-only accent: lives solely inside the AI gradient below — NOT a palette
       or family color, and never reused elsewhere. The AI look is intentionally
       special, so this pink exists only here. */
  --ai-gradient-pink: #ff4fc0;
  /* Shared AI gradient stop list — consumed by Button--ai, Button--aiFill,
       and AiPrompt as linear-gradient(<angle>, var(--ai-gradient-stops)).
       Built from theme-aware tokens (plus the AI-only pink), so it resolves per
       theme; retune the AI gradient here in one place. */
  --ai-gradient-stops: var(--ai-gradient-pink), var(--purple-400), var(--accent-deep-violet), var(--accent-electric-cobalt), var(--purple-800);
  --surface-framework-primary: var(--base-50);
  --surface-framework-secondary: var(--base-100);
  --surface-framework-border: var(--base-250);
  --on-surface-primary: var(--base-1200);
  --on-surface-secondary: var(--base-700);
  --on-surface-tertiary: var(--base-600);
  --on-surface-brand: var(--base-50);
  --on-surface-ai-primary: var(--base-50);
  --on-surface-ai-secondary: var(--purple-800);
  --on-framework-primary: var(--base-1200);
  --on-framework-secondary: var(--base-700);
  --surface-inverse-primary: var(--base-1200);
  --surface-inverse-secondary: var(--base-1100);
  --surface-inverse-tertiary: var(--base-1000);
  --surface-inverse-quaternary: var(--base-900);
  --surface-brand-inverse: var(--base-50);
  --on-surface-inverse-primary: var(--base-50);
  --on-surface-inverse-secondary: var(--base-500);
  --on-surface-brand-inverse: var(--accent-deep-navy);
  /* Charts */
  --chart-1: #1f1c2a;
  --chart-2: #2d50ff;
  --chart-3: #f0d4b4;
  --chart-4: #2f6b3b;
  --chart-text: var(--on-surface-primary);
  --chart-grid: rgba(0, 0, 0, 0.08);
  /* Overlay */
  --overlay-backdrop: rgba(0, 0, 0, 0.45);
  --overlay-scrim: rgba(5, 8, 17, 0.54);
  /* Shadow */
  --shadow-small: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-large: 0 24px 48px rgba(0, 0, 0, 0.18);
  /* Border Radius */
  --radius-control: 999px;
  --radius-control-ai: 16px;
  --radius-indicator: 999px;
  --radius-input: 0px;
  --radius-atom: 0px;
  --radius-card: 0px;
  --radius-popover: 0px;
  --radius-container: 0px;
  --radius-sheet: 16px;
  /* Typography */
  --font-family-sans: "tele2-sans-digital", sans-serif;
  --font-family-display: "tele2-serif-display", georgia, serif;
  --font-family-display-text: "tele2-serif-text", georgia, serif;
  --font-headline: var(--font-family-display);
  --font-body: var(--font-family-sans);
  --font-body-alternative: var(--font-family-display-text);
  --font-code: "DM Mono", "SF Mono", Consolas, monospace;
}
[data-theme="dark"] {
  /* Blue — -25 is the leveled dark label tint (muted, light ink on top). */
  --blue-25: #2a3350;
  --blue-50: #a4baff;
  --blue-200: #7a95e6;
  --blue-400: #445790;
  --blue-600: #28314d;
  --blue-800: #252935;
  /* Green */
  --green-25: #26402e;
  --green-50: #8ad699;
  --green-200: #59b56b;
  --green-400: #32643c;
  --green-600: #24472b;
  --green-800: #2a3e2e;
  /* Purple */
  --purple-25: #322a4d;
  --purple-50: #b99ff7;
  --purple-200: #a081e7;
  --purple-400: #5c4394;
  --purple-600: #372b54;
  --purple-800: #292435;
  /* Red */
  --red-25: #47262a;
  --red-50: #f9949c;
  --red-200: #e0757e;
  --red-400: #932f37;
  --red-600: #5d1e23;
  --red-800: #4d1e22;
  /* Yellow */
  --yellow-25: #45391f;
  --yellow-50: #f9cd81;
  --yellow-200: #e0b261;
  --yellow-400: #8e6d34;
  --yellow-600: #5d4928;
  --yellow-800: #4d3f29;
  /* Signal — status + categorical meaning colors */
  --signal-danger: var(--red-200);
  --signal-danger-light: var(--red-600);
  --signal-danger-subdued: var(--red-400);
  --signal-info: var(--blue-200);
  --signal-info-light: var(--blue-600);
  --signal-info-subdued: var(--blue-400);
  --signal-success: var(--green-200);
  --signal-success-light: var(--green-600);
  --signal-success-subdued: var(--green-400);
  --signal-warning: var(--yellow-200);
  --signal-warning-light: var(--yellow-600);
  --signal-warning-subdued: var(--yellow-400);
  --signal-intelligence: var(--purple-200);
  --signal-intelligence-light: var(--purple-600);
  --signal-intelligence-subdued: var(--purple-400);
  /* Signal · Soft — hue tints flip automatically via the dark *-25 above; only the
       neutral and campaign soft tints need dark-theme values. */
  --signal-neutral-soft: var(--base-800);
  --signal-campaign-soft: #383f22;
  /* Brand */
  --brand-primary: var(--accent-electric-cobalt);
  --brand-secondary: var(--accent-violet);
  --on-brand-primary: var(--base-50);
  --on-brand-secondary: var(--accent-deep-navy);
  /* Interface */
  --interface-action-primary: var(--base-50);
  --interface-action-secondary: var(--base-800);
  --interface-action-brand: var(--brand-primary);
  --interface-border: var(--base-600);
  --interface-disabled: var(--base-650);
  --interface-divider: var(--base-800);
  --interface-highlight: var(--blue-600);
  --interface-link: var(--blue-50);
  --interface-on-action-primary: var(--accent-deep-navy);
  --interface-on-action-secondary: var(--base-50);
  --interface-on-action-brand: var(--on-brand-primary);
  --interface-on-disabled: var(--base-900);
  --interface-selected: var(--base-50);
  /* Surface */
  --surface-default: var(--base-1300);
  --surface-primary: var(--base-900);
  --surface-secondary: var(--base-1000);
  --surface-tertiary: var(--base-1100);
  --surface-quaternary: var(--base-1200);
  --surface-campaign: var(--accent-pale-green);
  --surface-brand: var(--accent-electric-cobalt);
  --surface-ai-primary: var(--purple-50);
  --surface-ai-secondary: var(--purple-800);
  --surface-framework-primary: var(--base-900);
  --surface-framework-secondary: var(--base-1000);
  --surface-framework-border: var(--base-800);
  --on-surface-primary: var(--base-50);
  --on-surface-secondary: var(--base-500);
  --on-surface-tertiary: var(--base-650);
  --on-surface-campaign: var(--accent-deep-navy);
  --on-surface-brand: var(--base-50);
  --on-surface-ai-primary: var(--purple-600);
  --on-surface-ai-secondary: var(--base-50);
  --on-framework-primary: var(--base-50);
  --on-framework-secondary: var(--base-500);
  --surface-inverse-primary: var(--base-50);
  --surface-inverse-secondary: var(--base-100);
  --surface-inverse-tertiary: var(--base-200);
  --surface-inverse-quaternary: var(--base-300);
  --surface-brand-inverse: var(--accent-violet);
  --on-surface-inverse-primary: var(--base-1200);
  --on-surface-inverse-secondary: var(--base-650);
  --on-surface-brand-inverse: var(--accent-deep-navy);
  /* Overlay */
  --overlay-backdrop: rgba(255, 255, 255, 0.3);
  --overlay-scrim: rgba(0, 0, 0, 0.7);
  /* Shadow */
  --shadow-small: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-large: 0 24px 48px rgba(0, 0, 0, 0.5);
  /* Charts */
  --chart-text: var(--on-surface-primary);
  --chart-grid: rgba(255, 255, 255, 0.08);
}
body {
  font-family: var(--font-family-sans);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headline);
  font-weight: 300;
  margin: 0;
}
/* Display Styles */
.display-large {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 104px;
  line-height: 1;
}
@media (max-width: 820px) {
  .display-large {
    font-size: 64px;
  }
}
@media (max-width: 520px) {
  .display-large {
    font-size: 48px;
  }
}
.display-medium {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 88px;
  line-height: 1;
}
@media (max-width: 820px) {
  .display-medium {
    font-size: 56px;
  }
}
@media (max-width: 520px) {
  .display-medium {
    font-size: 40px;
  }
}
.display-small {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 72px;
  line-height: 1;
}
@media (max-width: 820px) {
  .display-small {
    font-size: 48px;
  }
}
@media (max-width: 520px) {
  .display-small {
    font-size: 36px;
  }
}
/* Heading Styles */
.heading-xLarge {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
}
@media (max-width: 820px) {
  .heading-xLarge {
    font-size: 40px;
  }
}
@media (max-width: 520px) {
  .heading-xLarge {
    font-size: 32px;
  }
}
.heading-large {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 48px;
  line-height: 1;
}
@media (max-width: 820px) {
  .heading-large {
    font-size: 36px;
  }
}
@media (max-width: 520px) {
  .heading-large {
    font-size: 28px;
  }
}
.heading-medium {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.2;
}
@media (max-width: 820px) {
  .heading-medium {
    font-size: 32px;
  }
}
@media (max-width: 520px) {
  .heading-medium {
    font-size: 28px;
  }
}
.heading-small {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.2;
}
@media (max-width: 820px) {
  .heading-small {
    font-size: 28px;
  }
}
@media (max-width: 520px) {
  .heading-small {
    font-size: 24px;
  }
}
.heading-xSmall {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
}
@media (max-width: 820px) {
  .heading-xSmall {
    font-size: 24px;
  }
}
@media (max-width: 520px) {
  .heading-xSmall {
    font-size: 22px;
  }
}
.heading-xxSmall {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
}
@media (max-width: 820px) {
  .heading-xxSmall {
    font-size: 22px;
  }
}
@media (max-width: 520px) {
  .heading-xxSmall {
    font-size: 20px;
  }
}
/* Title Styles */
.title-large {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.2;
}
.title-medium {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.2;
}
.title-small {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.2;
}
.title-xSmall {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.2;
}
/* Preamble Styles */
.preamble-large {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.5;
}
@media (max-width: 820px) {
  .preamble-large {
    font-size: 24px;
  }
}
@media (max-width: 520px) {
  .preamble-large {
    font-size: 22px;
  }
}
.preamble-medium {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
}
@media (max-width: 820px) {
  .preamble-medium {
    font-size: 22px;
  }
}
@media (max-width: 520px) {
  .preamble-medium {
    font-size: 20px;
  }
}
.preamble-small {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
}
/* Body Sans Styles */
.body-large {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
}
.body-medium {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}
.body-small {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
}
.body-xSmall {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
}
/* Body Serif Styles */
.body-largeSerif {
  font-family: var(--font-body-alternative);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
}
.body-mediumSerif {
  font-family: var(--font-body-alternative);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}
.body-smallSerif {
  font-family: var(--font-body-alternative);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
}
.body-xSmallSerif {
  font-family: var(--font-body-alternative);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
}
.body--bold {
  font-weight: 500;
}
.body--strikethrough {
  text-decoration: line-through;
}
/* Atom Styles */
.atom-large {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
}
.atom-medium {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}
.atom-small {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.atom-xSmall {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
}
/* Label Styles */
.label-large {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}
.label-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.label-xSmall {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
}
/* Caption Styles */
.caption-large {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
}
.caption-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  line-height: 1.2;
}
/* Navigation Styles */
.nav-default {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
}
.nav-active {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
/* Utilities */
.u-column--start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.u-column--center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.u-column--end {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.u-column--space {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.u-grid {
  width: 100%;
}
.u-grid--1 {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}
.u-grid--2 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .u-grid--2 {
    grid-template-columns: 1fr;
  }
}
.u-grid--3 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .u-grid--3 {
    grid-template-columns: 1fr;
  }
}
.u-grid--4 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .u-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .u-grid--4 {
    grid-template-columns: 1fr;
  }
}
.u-grid--5 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .u-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .u-grid--5 {
    grid-template-columns: 1fr;
  }
}
.u-grid--6 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .u-grid--6 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 820px) {
  .u-grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .u-grid--6 {
    grid-template-columns: 1fr;
  }
}
.u-grid--7 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media (max-width: 1440px) {
  .u-grid--7 {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 1024px) {
  .u-grid--7 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 820px) {
  .u-grid--7 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .u-grid--7 {
    grid-template-columns: 1fr;
  }
}
.u-grid--8 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
@media (max-width: 1440px) {
  .u-grid--8 {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 1024px) {
  .u-grid--8 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 820px) {
  .u-grid--8 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .u-grid--8 {
    grid-template-columns: 1fr;
  }
}
.u-grid--responsive {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
@media (min-width: 2600px) {
  .u-grid--responsive {
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (max-width: 2280px) {
  .u-grid--responsive {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 1820px) {
  .u-grid--responsive {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1440px) {
  .u-grid--responsive {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .u-grid--responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .u-grid--responsive {
    grid-template-columns: 1fr;
  }
}
.u-grid--responsive.u-grid--max-1 {
  grid-template-columns: 1fr;
}
.u-grid--responsive.u-grid--max-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .u-grid--responsive.u-grid--max-2 {
    grid-template-columns: 1fr;
  }
}
.u-grid--responsive.u-grid--max-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .u-grid--responsive.u-grid--max-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .u-grid--responsive.u-grid--max-3 {
    grid-template-columns: 1fr;
  }
}
.u-grid--responsive.u-grid--max-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1440px) {
  .u-grid--responsive.u-grid--max-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .u-grid--responsive.u-grid--max-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .u-grid--responsive.u-grid--max-4 {
    grid-template-columns: 1fr;
  }
}
.u-grid--responsive.u-grid--max-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1820px) {
  .u-grid--responsive.u-grid--max-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1440px) {
  .u-grid--responsive.u-grid--max-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .u-grid--responsive.u-grid--max-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .u-grid--responsive.u-grid--max-5 {
    grid-template-columns: 1fr;
  }
}
.u-grid--responsive.u-grid--max-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 2280px) {
  .u-grid--responsive.u-grid--max-6 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 1820px) {
  .u-grid--responsive.u-grid--max-6 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1440px) {
  .u-grid--responsive.u-grid--max-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .u-grid--responsive.u-grid--max-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .u-grid--responsive.u-grid--max-6 {
    grid-template-columns: 1fr;
  }
}
.u-row {
  width: 100%;
}
.u-row--start {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.u-row--center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.u-row--end {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.u-row--space {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.u-stack--start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.u-stack--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.u-stack--end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}
.u-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.u-container {
  width: 100%;
  box-sizing: border-box;
}
.u-container--centered {
  margin: 0 auto;
}
.u-container--small {
  max-width: 580px;
}
.u-container--medium {
  max-width: 760px;
}
.u-container--regular {
  max-width: 1280px;
}
.u-container--wide {
  max-width: 1440px;
}
.u-container--max {
  max-width: 100%;
}
.u-container--padded {
  padding: 24px;
}
.u-nowrap {
  white-space: nowrap;
}
.u-align--start {
  align-items: flex-start;
}
.u-align--center {
  align-items: center;
}
.u-align--end {
  align-items: flex-end;
}
.u-flex--stretch {
  align-self: stretch;
  flex: 0 0 100%;
  width: 100%;
}
.u-flex--wrap {
  flex-wrap: wrap;
}
.u-flex--nowrap {
  flex-wrap: nowrap;
}
.u-flex--noshrink {
  flex-shrink: 0;
}
.u-flex--none {
  flex: none;
  width: auto;
}
.u-gap--2 {
  gap: 2px !important;
}
.u-gap--4 {
  gap: 4px !important;
}
.u-gap--8 {
  gap: 8px !important ;
}
.u-gap--12 {
  gap: 12px !important;
}
.u-gap--16 {
  gap: 16px !important;
}
.u-gap--20 {
  gap: 20px !important;
}
.u-gap--24 {
  gap: 24px !important;
}
.u-gap--32 {
  gap: 32px !important;
}
.u-gap--40 {
  gap: 40px !important;
}
.u-gap--48 {
  gap: 48px !important;
}
.u-gap--56 {
  gap: 56px !important;
}
.u-gap--64 {
  gap: 64px !important;
}
.u-gap--72 {
  gap: 72px !important;
}
.u-gap--80 {
  gap: 80px !important;
}
.u-gap--96 {
  gap: 96px !important;
}
.u-verticalSpace--8 {
  margin-top: 8px;
  margin-bottom: 8px;
}
.u-verticalSpace--12 {
  margin-top: 12px;
  margin-bottom: 12px;
}
.u-verticalSpace--16 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.u-verticalSpace--20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.u-verticalSpace--24 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.u-verticalSpace--32 {
  margin-top: 32px;
  margin-bottom: 32px;
}
.u-verticalSpace--40 {
  margin-top: 40px;
  margin-bottom: 40px;
}
.u-verticalSpace--48 {
  margin-top: 48px;
  margin-bottom: 48px;
}
.u-verticalSpace--56 {
  margin-top: 56px;
  margin-bottom: 56px;
}
.u-verticalSpace--64 {
  margin-top: 64px;
  margin-bottom: 64px;
}
.u-verticalSpace--80 {
  margin-top: 80px;
  margin-bottom: 80px;
}
.u-verticalSpace--96 {
  margin-top: 96px;
  margin-bottom: 96px;
}
.u-verticalSpace--120 {
  margin-top: 120px;
  margin-bottom: 120px;
}
.u-padding--0 {
  padding: 0;
}
.u-padding--8 {
  padding: 8px;
}
.u-padding--12 {
  padding: 12px;
}
.u-padding--16 {
  padding: 16px;
}
.u-padding--20 {
  padding: 20px;
}
.u-padding--24 {
  padding: 24px;
}
.u-padding--32 {
  padding: 32px;
}
.u-padding--40 {
  padding: 40px;
}
.u-padding--56 {
  padding: 56px;
}
.u-padding--64 {
  padding: 64px;
}
.u-padding--80 {
  padding: 80px;
}
.u-padding--120 {
  padding: 120px;
}
@media (max-width: 768px) {
  .u-padding--24 {
    padding: 16px;
  }
  .u-padding--32 {
    padding: 20px;
  }
  .u-padding--40 {
    padding: 24px;
  }
  .u-padding--56 {
    padding: 32px;
  }
  .u-padding--64 {
    padding: 40px;
  }
  .u-padding--80 {
    padding: 48px;
  }
  .u-padding--120 {
    padding: 56px;
  }
}
.u-paddingVertical--16 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.u-paddingVertical--24 {
  padding-top: 24px;
  padding-bottom: 24px;
}
.u-paddingVertical--32 {
  padding-top: 32px;
  padding-bottom: 32px;
}
.u-paddingVertical--40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.u-paddingVertical--56 {
  padding-top: 56px;
  padding-bottom: 56px;
}
.u-paddingVertical--64 {
  padding-top: 64px;
  padding-bottom: 64px;
}
.u-paddingVertical--80 {
  padding-top: 80px;
  padding-bottom: 80px;
}
.u-paddingVertical--96 {
  padding-top: 96px;
  padding-bottom: 96px;
}
.u-paddingVertical--120 {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media (max-width: 768px) {
  .u-paddingVertical--32 {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .u-paddingVertical--40 {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .u-paddingVertical--56 {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .u-paddingVertical--64 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .u-paddingVertical--80 {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .u-paddingVertical--96 {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .u-paddingVertical--120 {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}
.TemplateRowSurface {
  --template-row-inline-padding: 0px;
  width: 100%;
  box-sizing: border-box;
  padding-left: var(--template-row-inline-padding);
  padding-right: var(--template-row-inline-padding);
}
.TemplateRowSurface--align-left {
  margin-left: 0;
  margin-right: auto;
}
.TemplateRowSurface--align-center {
  margin-left: auto;
  margin-right: auto;
}
.TemplateRowSurface--align-right {
  margin-left: auto;
  margin-right: 0;
}
.u-fit {
  align-self: flex-start;
  width: fit-content;
}
.u-surface--primary {
  background: var(--surface-primary);
}
.u-surface--secondary {
  background: var(--surface-secondary);
}
.u-surface--tertiary {
  background: var(--surface-tertiary);
}
.u-surface--quaternary {
  background: var(--surface-quaternary);
}
.u-surface--highlight {
  background: var(--interface-highlight);
}
.u-color--primary {
  color: var(--on-surface-primary);
}
.u-color--secondary {
  color: var(--on-surface-secondary);
}
.u-color--tertiary {
  color: var(--on-surface-tertiary);
}
.u-color--info {
  color: var(--signal-info);
}
.u-color--success {
  color: var(--signal-success);
}
.u-color--warning {
  color: var(--signal-warning);
}
.u-color--danger {
  color: var(--signal-danger);
}
.u-list--disc {
  padding-left: 16px;
  list-style: disc;
}
.u-placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 2px dashed var(--interface-divider);
  border-radius: var(--radius-card);
  background: var(--surface-secondary);
  color: var(--on-surface-tertiary);
}
@media (max-width: 480px) {
  .u-hideAt--below-minimal {
    display: none;
  }
}
@media (max-width: 520px) {
  .u-hideAt--below-narrow {
    display: none;
  }
}
@media (max-width: 768px) {
  .u-hideAt--below-compact {
    display: none;
  }
}
@media (max-width: 820px) {
  .u-hideAt--below-base {
    display: none;
  }
}
@media (max-width: 1024px) {
  .u-hideAt--below-regular {
    display: none;
  }
}
@media (max-width: 1280px) {
  .u-hideAt--below-large {
    display: none;
  }
}
@media (max-width: 1440px) {
  .u-hideAt--below-wide {
    display: none;
  }
}
@media (max-width: 1820px) {
  .u-hideAt--below-ultra {
    display: none;
  }
}
@media (max-width: 2280px) {
  .u-hideAt--below-mega {
    display: none;
  }
}
@media (max-width: 2600px) {
  .u-hideAt--below-max {
    display: none;
  }
}
@media (min-width: 480px) {
  .u-hideAt--above-minimal {
    display: none;
  }
}
@media (min-width: 520px) {
  .u-hideAt--above-narrow {
    display: none;
  }
}
@media (min-width: 768px) {
  .u-hideAt--above-compact {
    display: none;
  }
}
@media (min-width: 820px) {
  .u-hideAt--above-base {
    display: none;
  }
}
@media (min-width: 1024px) {
  .u-hideAt--above-regular {
    display: none;
  }
}
@media (min-width: 1280px) {
  .u-hideAt--above-large {
    display: none;
  }
}
@media (min-width: 1440px) {
  .u-hideAt--above-wide {
    display: none;
  }
}
@media (min-width: 1820px) {
  .u-hideAt--above-ultra {
    display: none;
  }
}
@media (min-width: 2280px) {
  .u-hideAt--above-mega {
    display: none;
  }
}
@media (min-width: 2600px) {
  .u-hideAt--above-max {
    display: none;
  }
}
.Shell {
  --shell-gap: 4px;
  --shell-topbar-min-height: 64px;
  --shell-topbar-padding-y: 4px;
  --shell-topbar-height: calc(var(--shell-topbar-min-height) + var(--shell-topbar-padding-y) + var(--shell-topbar-padding-y));
  --shell-sidebar-width: 240px;
  --shell-overlay-top: 0px;
  --shell-overlay-right: 0px;
  --shell-overlay-bottom: 0px;
  --shell-overlay-left: 0px;
  --shell-chrome-height: 0px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  --shell-surface-background: var(--surface-tertiary);
  background: var(--shell-surface-background);
  box-sizing: border-box;
}
.Shell.u-surface--primary {
  --shell-surface-background: var(--surface-primary);
}
.Shell.u-surface--secondary {
  --shell-surface-background: var(--surface-secondary);
}
.Shell.u-surface--tertiary {
  --shell-surface-background: var(--surface-tertiary);
}
.Shell.u-surface--quaternary {
  --shell-surface-background: var(--surface-quaternary);
}
.Shell * {
  scrollbar-width: none;
}
.Shell *::-webkit-scrollbar {
  display: none;
}
.Shell-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.Shell-content {
  flex: 1 1 auto;
  padding: 24px;
  position: relative;
}
@media (max-width: 768px) {
  .Shell-content {
    padding: 12px;
  }
}
.Shell-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.Shell-overlayRoot {
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.Shell-bottomnav {
  flex: 0 0 auto;
}
.Shell--platform {
  height: 100vh;
  padding: var(--shell-gap);
  gap: var(--shell-gap);
  --shell-overlay-top: calc(var(--shell-topbar-height) + var(--shell-gap) + var(--shell-gap));
  --shell-overlay-right: var(--shell-gap);
  --shell-overlay-bottom: var(--shell-gap);
  --shell-overlay-left: calc(var(--shell-sidebar-width) + var(--shell-gap) + var(--shell-gap));
  --shell-panel-width: 420px;
}
.Shell--platform .Shell-content {
  overflow: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.Shell--platform .Shell-main {
  position: relative;
  gap: var(--shell-gap);
}
.Shell--platform .Shell-sidebar {
  flex: 0 0 var(--shell-sidebar-width);
  display: flex;
  position: relative;
  z-index: 2;
  transition: flex-basis 0.2s ease;
}
.Shell--platform .Shell-panel {
  flex: 0 0 0;
  overflow: hidden;
  transition: flex-basis 0.3s ease;
}
.Shell--platform.is-shellpanel-open .Shell-panel {
  flex-basis: var(--shell-panel-width);
}
.Shell--platform .Shell-overlayRoot {
  position: absolute;
  inset: 0;
  height: auto;
}
@media (max-width: 1820px) {
  .Shell--platform .Shell-panel {
    display: none;
  }
  .Shell--platform [data-shell-panel] {
    display: none;
  }
}
@media (max-width: 1024px) {
  .Shell--platform {
    --shell-sidebar-width: 0px;
    --shell-overlay-left: var(--shell-gap);
  }
  .Shell--platform .Shell-sidebar {
    display: none;
    flex: 0 0 0;
  }
}
.Shell--platform.Shell--noSidebar {
  --shell-sidebar-width: 0px;
  --shell-overlay-left: var(--shell-gap);
}
.Shell--platform.Shell--compact {
  --shell-sidebar-width: 72px;
}
.Shell--app {
  --shell-gap: 8px;
  height: 100vh;
  padding: 0;
  gap: var(--shell-gap);
  --shell-bottomnav-height: 64px;
  --shell-overlay-top: calc(var(--shell-topbar-height) + var(--shell-gap) + var(--shell-gap));
  --shell-overlay-right: var(--shell-gap);
  --shell-overlay-bottom: calc(var(--shell-bottomnav-height) + var(--shell-gap));
  --shell-overlay-left: var(--shell-gap);
}
.Shell--app .Shell-content {
  overflow: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.Shell--app .Shell-main {
  position: relative;
}
.Shell--app .Shell-overlayRoot {
  position: absolute;
  inset: 0;
  height: auto;
}
.Shell--website {
  --shell-content-inline-padding: 24px;
  --shell-overlay-top: 0px;
  --shell-overlay-right: 0px;
  --shell-overlay-bottom: 0px;
  --shell-overlay-left: 0px;
  --shell-chrome-height: 152px;
}
@media (max-width: 1024px) {
  .Shell--website {
    --shell-content-inline-padding: 16px;
    --shell-chrome-height: 96px;
  }
}
@media (max-width: 768px) {
  .Shell--website {
    --shell-content-inline-padding: 8px;
  }
}
.Shell--website .Shell-content {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.Shell--website .Shell-body > .TemplateRowSurface[data-template-row-width="constrained"] {
  --template-row-inline-padding: var(--shell-content-inline-padding);
}
.Shell--website .Shell-footer {
  flex-shrink: 0;
  margin-top: 120px;
}
.Shell--website .Shell-overlayRoot {
  position: fixed;
  inset: 0;
}
.Shell.is-modal-open,
.Shell.is-panel-open {
  overflow: hidden;
}
.Shell--platform.is-modal-open .Shell-content,
.Shell--platform.is-panel-open .Shell-content,
.Shell--app.is-modal-open .Shell-content,
.Shell--app.is-panel-open .Shell-content {
  overflow: hidden;
}
@property --_ai-angle {
  syntax: "<angle>";
  initial-value: 135deg;
  inherits: false;
}
@keyframes ai-gradient-spin {
  to {
    --_ai-angle: 495deg;
  }
}
.Button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  box-sizing: border-box;
  border-radius: var(--radius-control);
  gap: 4px;
  transition: 0.4s ease;
  cursor: pointer;
  text-decoration: none;
}
.Button.is-buttonHidden {
  display: none;
}
.Button-label {
  min-width: 0;
}
.Button i:last-child {
  transition: 0.4s ease;
}
.Button--xSmall {
  height: 24px;
  padding: 0 12px;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
}
.Button--small {
  height: 32px;
  padding: 0 12px;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.Button--medium {
  height: 40px;
  padding: 0 16px;
  gap: 8px;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}
.Button--large {
  height: 48px;
  padding: 0 24px;
  gap: 8px;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
}
.Button--block {
  width: 100%;
}
.Button--primary {
  background-color: var(--interface-action-primary);
  color: var(--interface-on-action-primary);
}
.Button--primary:hover {
  opacity: 0.8;
}
.Button--primary--onImage {
  background-color: var(--base-50);
  color: var(--base-900);
}
.Button--brand {
  background-color: var(--interface-action-brand);
  color: var(--interface-on-action-brand);
}
.Button--brand:hover {
  opacity: 0.8;
}
.Button--secondary {
  background: transparent;
  border-color: var(--interface-on-action-secondary);
  color: var(--interface-on-action-secondary);
}
.Button--secondary:hover {
  background-color: var(--surface-quaternary);
}
.Button--secondary--onImage {
  color: var(--base-50);
  border-color: var(--base-50);
}
.Button--tertiary {
  background-color: var(--interface-action-secondary);
  color: var(--interface-on-action-secondary);
}
.Button--tertiary:hover {
  background-color: var(--surface-quaternary);
}
.Button--tertiary--onImage {
  color: var(--base-50);
  background: rgba(255, 255, 255, 0.1);
}
.Button--ghost {
  background-color: transparent;
  color: var(--interface-action-primary);
}
.Button--ghost:hover {
  background-color: var(--surface-quaternary);
}
.Button--subtle {
  background-color: var(--surface-primary);
  color: var(--on-surface-primary);
}
.Button--subtle:hover {
  background-color: var(--surface-quaternary);
}
.Button--inverse.Button--primary {
  background-color: var(--on-surface-inverse-primary);
  color: var(--surface-inverse-primary);
}
.Button--inverse.Button--secondary {
  border-color: var(--on-surface-inverse-primary);
  color: var(--on-surface-inverse-primary);
}
.Button--inverse.Button--secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.Button--inverse.Button--tertiary {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--on-surface-inverse-primary);
}
.Button--inverse.Button--tertiary:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.Button--inverse.Button--ghost {
  color: var(--on-surface-inverse-primary);
}
.Button--inverse.Button--ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.Button--ai {
  border: 2px solid transparent;
  --_ai-angle: 135deg;
  background-image: linear-gradient(var(--surface-primary), var(--surface-primary)), linear-gradient(var(--_ai-angle), var(--ai-gradient-stops));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--on-surface-primary);
}
.Button--ai:hover {
  animation: ai-gradient-spin 12s linear infinite;
  filter: hue-rotate(25deg);
}
.Button--aiFill {
  --_ai-angle: 135deg;
  background-image: linear-gradient(var(--_ai-angle), var(--ai-gradient-stops));
  color: var(--base-50);
}
.Button--aiFill:hover {
  animation: ai-gradient-spin 12s linear infinite;
  filter: hue-rotate(25deg);
}
.Button--bare {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: 18px;
}
.Button--bare:hover {
  background: none;
  transform: scale(1.15);
}
.Button--bare:active {
  background: none;
  transform: scale(0.95);
}
.Button--bare.Button--xSmall {
  font-size: 18px;
}
.Button--bare.Button--small {
  font-size: 20px;
}
.Button--bare.Button--medium {
  font-size: 24px;
}
.Button--bare.Button--large {
  font-size: 32px;
}
.Button--icon {
  padding: 0;
  flex-shrink: 0;
}
.Button--icon.Button--xSmall {
  width: 24px;
  height: 24px;
  border-width: 1px;
  font-size: 12px;
}
.Button--icon.Button--small {
  width: 32px;
  height: 32px;
  border-width: 1px;
  font-size: 14px;
}
.Button--icon.Button--medium {
  width: 40px;
  height: 40px;
  font-size: 20px;
}
.Button--icon.Button--large {
  width: 48px;
  height: 48px;
  font-size: 24px;
}
.Button--icon.Button--xLarge {
  width: 64px;
  height: 64px;
  font-size: 32px;
}
@media (max-width: 768px) {
  .Button--mobileIcon {
    padding: 0;
    flex-shrink: 0;
  }
  .Button--mobileIcon .Button-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .Button--mobileIcon.Button--xSmall {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .Button--mobileIcon.Button--small {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  .Button--mobileIcon.Button--medium {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .Button--mobileIcon.Button--large {
    width: 48px;
    height: 48px;
    font-size: 28px;
  }
  .Button--mobileIcon.Button--xLarge {
    width: 64px;
    height: 64px;
    font-size: 40px;
  }
}
.Shell--compact .Button--mobileIcon {
  padding: 0;
  flex-shrink: 0;
}
.Shell--compact .Button--mobileIcon .Button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.Shell--compact .Button--mobileIcon.Button--xSmall {
  width: 24px;
  height: 24px;
  font-size: 12px;
}
.Shell--compact .Button--mobileIcon.Button--small {
  width: 32px;
  height: 32px;
  font-size: 16px;
}
.Shell--compact .Button--mobileIcon.Button--medium {
  width: 40px;
  height: 40px;
  font-size: 20px;
}
.Shell--compact .Button--mobileIcon.Button--large {
  width: 48px;
  height: 48px;
  font-size: 28px;
}
.Shell--compact .Button--mobileIcon.Button--xLarge {
  width: 64px;
  height: 64px;
  font-size: 40px;
}
@media (max-width: 768px) {
  .Button--mobileBlock {
    width: 100%;
  }
}
.Button:has(> .Badge--indicator),
.Button:has(> .Badge--indicatorDot) {
  position: relative;
}
.Button > .Badge--indicator,
.Button > .Badge--indicatorDot {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(40%, -40%);
  pointer-events: none;
}
.InputText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 8px;
}
.InputText-field {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  gap: 8px;
  border: 1px solid var(--interface-border);
  background: var(--surface-default);
  transition: 0.2s ease;
}
.InputText-input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--on-surface-primary);
  outline: none;
}
.InputText-input::placeholder {
  color: var(--on-surface-secondary);
}
.InputText .InputText-field i {
  color: var(--on-surface-secondary);
}
.InputText-meta .body-xSmall {
  color: var(--on-surface-secondary);
}
.InputText-metaIcon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  color: var(--on-surface-secondary);
}
.InputText-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.InputText-label .label-small {
  color: var(--on-surface-primary);
}
.InputText:hover .InputText-field {
  background: var(--surface-primary);
}
.InputText:focus-within .InputText-field {
  border-color: var(--interface-selected);
}
.InputText-field:focus-visible,
.InputText-field:has(:focus-visible) {
  outline: 2px dashed var(--on-surface-primary);
  outline-offset: 3px;
}
.InputText.is-error .InputText-field {
  border-color: var(--signal-danger);
}
.InputText.is-error .InputText-meta .body-xSmall {
  color: var(--signal-danger);
}
.InputText.is-error .InputText-metaIcon {
  color: var(--signal-danger);
}
.InputText.is-error:hover .InputText-field,
.InputText.is-error:focus-within .InputText-field {
  border-color: var(--signal-danger);
}
.InputText.is-disabled .InputText-field,
.InputText:has(.InputText-input:disabled) .InputText-field {
  background: var(--surface-secondary);
  border-color: var(--interface-on-disabled);
}
.InputText.is-disabled .InputText-input,
.InputText:has(.InputText-input:disabled) .InputText-input {
  color: var(--interface-on-disabled);
  -webkit-text-fill-color: var(--interface-on-disabled);
  cursor: not-allowed;
}
.InputText.is-disabled .InputText-input::placeholder,
.InputText:has(.InputText-input:disabled) .InputText-input::placeholder {
  color: var(--interface-on-disabled);
}
.InputText.is-disabled .InputText-label .label-small,
.InputText:has(.InputText-input:disabled) .InputText-label .label-small,
.InputText.is-disabled .InputText-field i,
.InputText:has(.InputText-input:disabled) .InputText-field i {
  color: var(--interface-on-disabled);
}
.InputText.is-disabled:hover .InputText-field,
.InputText:has(.InputText-input:disabled):hover .InputText-field {
  background: var(--surface-secondary);
}
.InputText--filled .InputText-field {
  background: var(--surface-secondary);
  border-color: var(--interface-divider);
}
.InputText--small .InputText-field {
  height: 32px;
  padding: 0 8px;
}
.InputText--medium .InputText-field {
  height: 40px;
  padding: 0 12px;
}
.InputText--large .InputText-field {
  height: 48px;
  padding: 0 12px;
}
.Link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background: none;
  border: 0;
  padding: 0;
  color: var(--interface-link);
  text-decoration: underline;
  transition: 0.4s ease;
  line-height: 1 !important;
  cursor: pointer;
}
.Link:hover {
  opacity: 0.8;
}
.Link.is-linkHidden {
  display: none;
}
.Link--inherit {
  color: inherit;
}
.Link--inherit:hover {
  text-decoration: none;
  opacity: 0.7;
}
.Link--withIcon {
  gap: 4px;
  text-decoration: none;
}
.Link--withIcon i {
  transition: 0.4s ease;
}
.Link--withIcon:hover {
  text-decoration: underline;
  opacity: 0.8;
}
.Link--noUnderline {
  text-decoration: none;
}
.Link--noUnderline:hover {
  text-decoration: none;
}
.Link--small {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
}
.Link--medium {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}
.Link--large {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
}
/* Logo */
.Logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--on-surface-primary);
  --logo-mask-url: url("/_uikit/assets/images/tele2-logo.svg");
  padding: 8px;
}
.Logo-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 64px;
  background-color: currentColor;
  -webkit-mask-image: var(--logo-mask-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--logo-mask-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.Logo-body {
  display: flex;
  flex-direction: column;
}
.Logo-text {
  font-family: var(--font-headline);
}
.Logo-text:last-child {
  padding-top: 3px;
}
.Logo-meta {
  font-size: 11px;
  line-height: 1;
  color: var(--on-surface-secondary);
}
.Shell--platform .Logo {
  min-width: 206px;
}
@media (max-width: 1024px) {
  .Shell--platform .Logo {
    min-width: 0;
  }
}
.Login {
  display: flex;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background: var(--surface-inverse-primary);
  overflow: hidden;
}
.Login-panel {
  display: flex;
  flex-direction: column;
  width: 408px;
  flex-shrink: 0;
  background: var(--surface-default);
  padding: 40px;
}
.Login-header {
  margin-bottom: auto;
}
.Login-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px 0;
}
.Login-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.Login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.Login-error {
  color: var(--signal-danger);
  display: none;
}
.Login-error.is-visible {
  display: block;
}
.Login-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--on-surface-secondary);
}
.Login-footerLinks {
  display: flex;
  gap: 16px;
}
.Login-image {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.Login-imageMedia {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.Login-passwordField {
  position: relative;
}
.Login-passwordToggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--on-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.Login-passwordToggle:hover {
  color: var(--on-surface-primary);
}
@media (min-width: 1025px) {
  .Login {
    height: 100vh;
  }
  .Login-panel,
  .Login-image {
    min-height: 100%;
    height: 100%;
  }
  .Login-panel {
    overflow-y: auto;
  }
}
@media (max-width: 1024px) {
  .Login {
    flex-direction: column-reverse;
  }
  .Login-panel {
    width: 100%;
    min-height: 0;
    padding: 24px;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    margin-top: -24px;
    position: relative;
    z-index: 1;
  }
  .Login-image {
    flex: 1 0 200px;
  }
  .Login-header {
    margin-bottom: 0;
  }
  .Login-footer {
    margin-top: 32px;
  }
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--surface-primary);
  color: var(--on-surface-primary);
}
body {
  font-size: 16px;
  line-height: 1.2;
}
.Shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-primary);
  padding: 8px;
  box-sizing: border-box;
  gap: var(--shell-gap);
}
.Shell-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
}
.Shell-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
}
.Shell--app {
  height: 100vh;
}
.Shell--app .Shell-content {
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.Shell--app .Shell-sidebar {
  flex: 0 0 240px;
}
.Builder-topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
}
.Builder-topBar-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.Shell--app:not(.Shell--noSidebar) .Builder-topBar-left {
  flex: 0 0 var(--shell-sidebar-width);
}
.Shell--app:not(.Shell--noSidebar) .Builder-topBar-right {
  flex: 1 1 auto;
  justify-content: space-between;
}
.Builder-topBar-logo {
  display: block;
  height: 24px;
  width: auto;
}
.Builder-topBar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
}
.Builder-topBar-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.Builder-topBar-group--content {
  margin-left: 8px;
}
.Builder-topBar-divider {
  display: block;
  width: 1px;
  height: 20px;
  background: var(--interface-divider);
}
.Shell--app {
  --shell-sidebar-width: 260px;
  --shell-designbar-width: 320px;
  --shell-overlay-bottom: 0px;
  --shell-overlay-left: calc(var(--shell-sidebar-width) + var(--shell-gap) + var(--shell-gap) + 8px);
}
.Shell--app.Shell--noSidebar {
  --shell-sidebar-width: 0px;
  --shell-overlay-left: var(--shell-gap);
}
.Shell--app .Shell-sidebar {
  flex: 0 0 var(--shell-sidebar-width);
}
.Shell--app .Shell-content {
  padding: 16px 16px 20px 16px;
}
.Shell--app .Shell-designbar {
  flex: 0 0 0;
  overflow: hidden;
  background: var(--surface-primary);
  transition: flex-basis 0.3s ease;
}
.Shell--app.is-designbar-open .Shell-designbar {
  flex-basis: var(--shell-designbar-width);
}
.Shell--app .RowLayoutPanel {
  --panel-width: var(--shell-designbar-width);
  padding-right: 40px;
  padding-left: 0;
}
.Shell--app.is-designbar-open .Panel-overlay.is-active {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .Shell--app {
    --shell-sidebar-width: 280px;
  }
  .Shell--app .Shell-sidebar {
    flex: 0 0 var(--shell-sidebar-width);
  }
}
@media (max-width: 820px) {
  .Shell--app {
    --shell-sidebar-width: 0px;
  }
  .Shell-main {
    flex-direction: column;
  }
  .Shell--app .Shell-sidebar {
    flex: 0 0 auto;
    width: 100%;
  }
}
.ProjectOverview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 80px;
  background: var(--surface-primary);
  border-radius: 12px;
  flex: 1 1 auto;
}
.ProjectOverview-header {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 16px;
}
.ProjectOverview-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ProjectOverview-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1280px;
  width: 100%;
}
.ProjectOverview-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ProjectOverview-projectTile {
  position: relative;
}
.ProjectOverview-projectCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--interface-divider);
  border-radius: 10px;
  background: var(--surface-primary);
  padding: 10px;
  text-decoration: none;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: 0.4s ease;
}
.ProjectOverview-projectCard:hover {
  border-color: var(--interface-border);
  background-color: var(--surface-secondary);
}
.ProjectOverview-projectCard:focus-visible {
  outline: 2px solid var(--interface-focus);
  outline-offset: 2px;
}
.ProjectOverview-projectDelete {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ProjectOverview-projectTile:hover .ProjectOverview-projectDelete,
.ProjectOverview-projectTile:focus-within .ProjectOverview-projectDelete {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ProjectOverview-projectCard--create {
  appearance: none;
  cursor: pointer;
  border: 2px dashed var(--interface-divider);
  background: var(--surface-primary);
}
.ProjectOverview-projectPreview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--interface-divider);
  background: var(--surface-tertiary);
}
.ProjectOverview-projectPreview--create {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--surface-secondary);
}
.ProjectOverview-projectPreviewFrame {
  width: 500%;
  height: 500%;
  max-width: none;
  border: 0;
  transform: scale(0.2);
  transform-origin: top left;
  pointer-events: none;
}
.ProjectOverview-projectMeta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ProjectOverview-empty {
  padding: 16px;
  border: 1px dashed var(--interface-divider);
  background: var(--surface-primary);
}
.ProjectOverview-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ProjectOverview-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ProjectOverview-seedMode .Toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  column-gap: 8px;
  width: 100%;
}
.ProjectOverview-seedMode .Toggle-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ProjectOverview-seedMode .Toggle-label,
.ProjectOverview-seedMode .Toggle-meta {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ProjectOverview-meta {
  padding: 8px 12px;
  border: 1px solid var(--signal-danger);
  background: var(--surface-primary);
  color: var(--signal-danger);
}
@media (hover: none) {
  .ProjectOverview-projectDelete {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
@media (max-width: 768px) {
  .ProjectOverview {
    padding: 40px;
  }
  .ProjectOverview-projects {
    grid-template-columns: 1fr;
  }
}
.Logo {
  --logo-mask-url: url("../images/tele2-logo.svg");
}