@charset "UTF-8";:root {
  --font-family-heading: system-ui,
                         -apple-system,
                         BlinkMacSystemFont,
                         'Segoe UI',
                         sans-serif;
  --font-family-body: system-ui,
                      -apple-system,
                      BlinkMacSystemFont,
                      'Segoe UI',
                      sans-serif;
  /* Monospace font for code */
  --font-family-mono: 'SF Mono',
                      'Monaco',
                      'Inconsolata',
                      'Roboto Mono',
                      'Noto Sans Mono',
                      'Source Code Pro',
                      Consolas,
                      'Liberation Mono',
                      Menlo,
                      Courier,
                      monospace;
  /* Language-specific font stacks for better script support */
  --font-family-armenian: 'Noto Sans Armenian', system-ui, 'Arial Unicode MS', sans-serif;
  --font-family-chinese-sc: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', system-ui, sans-serif;
  --font-family-chinese-tc: 'Noto Sans TC', 'PingFang TC', 'Hiragino Sans CNS', system-ui, sans-serif;
  --font-family-japanese: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  --font-family-korean: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-family-arabic: 'Noto Sans Arabic', Tahoma, 'Arial Unicode MS', system-ui, sans-serif;
  --font-family-hebrew: 'Noto Sans Hebrew', 'Arial Hebrew', 'Arial Unicode MS', system-ui, sans-serif;
  --font-family-thai: 'Noto Sans Thai', Thonburi, 'Arial Unicode MS', system-ui, sans-serif;
  --font-family-devanagari: 'Noto Sans Devanagari', Mangal, 'Arial Unicode MS', system-ui, sans-serif;
  --font-family-bengali: 'Noto Sans Bengali', Vrinda, 'Arial Unicode MS', system-ui, sans-serif;
  --font-family-georgian: 'Noto Sans Georgian', Sylfaen, 'Arial Unicode MS', system-ui, sans-serif;
}

/* Language-specific font optimization */
/* Armenian */
:lang(hy) {
  font-family: var(--font-family-armenian);
}

/* Chinese Simplified */
:lang(zh), :lang(zh-CN), :lang(zh-Hans) {
  font-family: var(--font-family-chinese-sc);
}

/* Chinese Traditional */
:lang(zh-TW), :lang(zh-HK), :lang(zh-Hant) {
  font-family: var(--font-family-chinese-tc);
}

/* Japanese */
:lang(ja) {
  font-family: var(--font-family-japanese);
}

/* Korean */
:lang(ko) {
  font-family: var(--font-family-korean);
}

/* Arabic and Persian */
:lang(ar), :lang(fa) {
  font-family: var(--font-family-arabic);
  direction: rtl;
  text-align: right;
}

/* Urdu */
:lang(ur) {
  font-family: var(--font-family-arabic);
  direction: rtl;
  text-align: right;
}

/* Hebrew */
:lang(he) {
  font-family: var(--font-family-hebrew);
  direction: rtl;
  text-align: right;
}

/* Thai */
:lang(th) {
  font-family: var(--font-family-thai);
}

/* Devanagari scripts (Hindi, Nepali) */
:lang(hi), :lang(ne) {
  font-family: var(--font-family-devanagari);
}

/* Bengali */
:lang(bn) {
  font-family: var(--font-family-bengali);
}

/* Georgian */
:lang(ka) {
  font-family: var(--font-family-georgian);
}

/* Ensure proper text direction for RTL languages */
[dir=rtl] {
  text-align: right;
}

/* Improve font rendering for all scripts */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ADD RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
li,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
img,
figure {
  margin: 0;
}

:root {
  --space: 1em;
  --space-m: var(--space);
  --space-s: calc(var(--space) / 2);
  --space-xs: calc(var(--space) / 3);
  --space-l: calc(var(--space) * 2);
  --space-xl: calc(var(--space) * 3);
  --spacing: clamp(2em, 8vw, 6em);
  --border-radius-xs: calc(var(--border-radius) / 3);
  --border-radius-s: calc(var(--border-radius) / 2);
  --border-radius: 1em;
  --border-radius-m: var(--border-radius);
  --border-radius-l: calc(var(--border-radius) * 1.5);
  --border-radius-xl: calc(var(--border-radius) * 3);
  --border-radius-round: 50%;
  --bezier: cubic-bezier(0, 0.75, 0.5, 1.5);
  --max-post-width: 640px;
  --max-content-width: 1200px;
  --shadow: 0 1px 2px 1px var(--drop-shadow-color, var(--color-black));
  --bezier: cubic-bezier(0, 0.75, 0.5, 1.5);
  --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
  --border-width: 1px;
  --border-width-m: 1px;
  --font-size: 1em;
  --font-size-m: 1em;
  --font-size-s: .75em;
  --font-size-xs: .66em;
  --font-size-l: 1.25em;
  --font-size-xl: 1.5em;
  --font-size-xxl: 2em;
  --font-size-xxxl: 3em;
  --font-size-xxxxl: clamp(2em, 6vw, 8em);
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-normal: 400;
  --font-weight-light: 300
  --transition-fast: .15s;
  --transition-normal: .3s;
  --transition-slow: 1s;
}

body[data-font-size=small] {
  font-size: 16px;
}
body[data-font-size=medium] {
  font-size: 18px;
}
body[data-font-size=large] {
  font-size: 20px;
}
body[data-font-size=xlarge] {
  font-size: 24px;
}

* {
  font-family: var(--font-family-body);
  font-size: var(--font-size, 1em);
}

.highlight {
  display: inline;
  position: relative;
}
.highlight::before {
  background-color: var(--color-yellow);
  z-index: -1;
  content: "";
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-xs);
  padding: var(--space-xs) var(--space-s);
  transform: translate(-50%, -50%);
  position: absolute;
}

.heading, h1:not([class]),
h2:not([class]),
h3:not([class]),
h4:not([class]),
h5:not([class]),
h6:not([class]) {
  font-family: var(--font-family-heading);
  font-weight: var(--heading-font-weight, 600);
  font-size: var(--heading-font-size, 1.5em);
  line-height: var(--heading-line-height, 1.2);
  color: var(--heading-color, currentColor);
  margin: 0;
  padding: 0;
}
.heading:has(.icon), h1:has(.icon):not([class]),
h2:has(.icon):not([class]),
h3:has(.icon):not([class]),
h4:has(.icon):not([class]),
h5:has(.icon):not([class]),
h6:has(.icon):not([class]) {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.heading:has(.icon) .icon, h1:has(.icon):not([class]) .icon,
h2:has(.icon):not([class]) .icon,
h3:has(.icon):not([class]) .icon,
h4:has(.icon):not([class]) .icon,
h5:has(.icon):not([class]) .icon,
h6:has(.icon):not([class]) .icon {
  font-size: var(--heading-icon-size, 1em);
}
.heading:has(strong), h1:has(strong):not([class]),
h2:has(strong):not([class]),
h3:has(strong):not([class]),
h4:has(strong):not([class]),
h5:has(strong):not([class]),
h6:has(strong):not([class]) {
  font-weight: normal;
  color: var(--color, var(--foreground));
}
.heading:has(strong) strong, h1:has(strong):not([class]) strong,
h2:has(strong):not([class]) strong,
h3:has(strong):not([class]) strong,
h4:has(strong):not([class]) strong,
h5:has(strong):not([class]) strong,
h6:has(strong):not([class]) strong {
  color: var(--foreground);
  font-weight: bold;
}
.heading--1, h1:not([class]) {
  font-size: 2.5em;
  line-height: 1.2;
}
.heading--2, h2:not([class]) {
  font-size: 2em;
  line-height: 1.2;
}
.heading--3, h3:not([class]) {
  font-size: 1.5em;
  line-height: 1.2;
}
.heading--4, h4:not([class]) {
  font-size: 1.25em;
  line-height: 1.2;
}
.heading--5, h5:not([class]) {
  font-size: 1em;
  line-height: 1.2;
}
.heading--6, h6:not([class]) {
  font-family: var(--font-family-heading);
  font-size: 0.875em;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

h1 + *:not([class]), h1 + .button, h1 + .button-group,
h2 + *:not([class]),
h2 + .button,
h2 + .button-group,
h3 + *:not([class]),
h3 + .button,
h3 + .button-group,
h4 + *:not([class]),
h4 + .button,
h4 + .button-group,
h5 + *:not([class]),
h5 + .button,
h5 + .button-group,
h6 + *:not([class]),
h6 + .button,
h6 + .button-group,
p + *:not([class]),
p + .button,
p + .button-group,
.button-group + *:not([class]),
.button-group + .button,
.button-group + .button-group,
hr + *:not([class]),
hr + .button,
hr + .button-group {
  margin-top: 1em;
}

[class$=__title] {
  font-family: var(--font-family-heading);
}

p {
  line-height: 1.5;
}
p:first-child {
  font-size: 1.1em;
}

ul:not([class]) {
  padding-left: 1.5em;
  margin: 1em 0;
  list-style-type: none;
}
ul:not([class]) li {
  position: relative;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
ul:not([class]) li:before {
  content: "";
  position: absolute;
  left: -1.5em;
  top: 0.5em;
  width: 0.75em;
  height: 0.75em;
  border-radius: 0.125em;
  background-color: var(--section-color, var(--color-accent, currentColor));
}
ul:not([class]) li ul:not([class]) {
  margin: 0.5em 0;
}
ul:not([class]) li ul:not([class]) li:before {
  background-color: transparent;
  border: 1px solid var(--section-color, var(--color-accent, currentColor));
}

ol:not([class]) {
  padding-left: 1.5em;
  margin: 1em 0;
  counter-reset: item;
  list-style-type: none;
}
ol:not([class]) li {
  position: relative;
  margin-bottom: 0.5em;
  line-height: 1.5;
  counter-increment: item;
}
ol:not([class]) li:before {
  content: counter(item) ".";
  position: absolute;
  left: -1.5em;
  top: 0;
  color: var(--color, var(--accent, currentColor));
  font-weight: 600;
}
ol:not([class]) li ol:not([class]) {
  margin: 0.5em 0;
  counter-reset: subitem;
}
ol:not([class]) li ol:not([class]) li {
  counter-increment: subitem;
}
ol:not([class]) li ol:not([class]) li:before {
  content: counter(item) "." counter(subitem);
}

.content > p {
  line-height: 1.75;
}
.content > p:first-of-type {
  font-size: 1.1em;
}
.content > * + * {
  margin-top: var(--space);
}
.content dl:not([class]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.content dl:not([class]) dd + dt {
  margin-top: 0.5em;
}
.content dl:not([class]):has(dt ~ dt) dt {
  font-weight: bold;
}
.content dl:not([class]):has(dt ~ dt) dd {
  font-weight: 300;
  opacity: 0.75;
}

ul:not([class]) {
  counter-reset: list;
}
ul:not([class]) dd + dt {
  margin-top: 1em;
}
ul:not([class]):has(ul > li) li {
  counter-increment: name;
}
ul:not([class]):has(ul > li) li::before {
  content: counter(name) ".";
  margin-right: 0.5em;
}

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

h1 {
  font-size: calc(var(--spacing) * 0.75);
}

.dot {
  width: var(--dot-size, 0.5em);
  height: var(--dot-size, 0.5em);
  border-radius: 50%;
  display: block;
  background-color: var(--dot-color, currentColor);
}

hr {
  width: 100%;
  height: 2px;
  background-color: var(--accent);
  color: var(--accent);
  border: none;
}

p code:not([class]) {
  max-width: 100%;
  width: fit-content;
  border-radius: calc(var(--border-radius) / 2);
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  transform: translateY(33.33%);
  display: inline-block;
}

.icon--star-m.icon--animated:hover svg {
  animation: ICON_STAR_M 1s ease-in-out forwards;
}
@keyframes ICON_STAR_M {
  0% {
    transform: rotate(0deg);
  }
  25%, 100% {
    transform: rotate(72deg);
  }
}

.icon--graph-up.icon--animated:hover svg line {
  stroke-dashoffset: 2em;
  stroke-dasharray: 2em;
  animation: ICON_GRAPH_UP_LINES 1s linear forwards;
}
@keyframes ICON_GRAPH_UP_LINES {
  0% {
    stroke-dashoffset: 2em;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.icon--graph-up.icon--animated:hover svg line:nth-child(1) {
  animation-delay: 0.1s;
}
.icon--graph-up.icon--animated:hover svg line:nth-child(2) {
  animation-delay: 0.2s;
}
.icon--graph-up.icon--animated:hover svg line:nth-child(3) {
  animation-delay: 0.3s;
}
.icon--graph-up.icon--animated:hover svg line:nth-child(4) {
  animation-delay: 0.4s;
}
.icon--graph-up.icon--animated:hover svg line:nth-child(5) {
  animation-delay: 0.5s;
}
.icon--graph-up.icon--animated:hover svg line:nth-child(6) {
  animation-delay: 0.6s;
}
.icon--graph-up.icon--animated:hover svg polyline {
  stroke-dashoffset: 5em;
  stroke-dasharray: 5em;
  animation: ICON_GRAPH_UP_ARROW 1s linear forwards;
}
@keyframes ICON_GRAPH_UP_ARROW {
  0% {
    stroke-dashoffset: 5em;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.icon--temple.icon--animated:hover svg line:nth-child(1),
.icon--temple.icon--animated:hover svg line:nth-child(2),
.icon--temple.icon--animated:hover svg line:nth-child(3),
.icon--temple.icon--animated:hover svg line:nth-child(4),
.icon--temple2.icon--animated:hover svg line:nth-child(1),
.icon--temple2.icon--animated:hover svg line:nth-child(2),
.icon--temple2.icon--animated:hover svg line:nth-child(3),
.icon--temple2.icon--animated:hover svg line:nth-child(4) {
  color: red;
  fill: blue;
  animation: ICON_TEMPLE_PILARS 0.5s ease-in-out forwards;
}
@keyframes ICON_TEMPLE_PILARS {
  50% {
    stroke-dasharray: 2em;
    stroke-dashoffset: -2em;
  }
  0%, 100% {
    stroke-dasharray: 2em;
    stroke-dashoffset: 0em;
  }
}
.icon--temple.icon--animated:hover svg path,
.icon--temple2.icon--animated:hover svg path {
  animation: ICON_TEMPLE_ROOF 0.5s ease-in-out forwards;
}
@keyframes ICON_TEMPLE_ROOF {
  50% {
    transform: translateY(50%);
  }
  0%, 100% {
    transform: translateY(0%);
  }
}

.icon--chip.icon--animated:hover svg {
  animation: ICON_CHIP 1s ease-in-out infinite;
}
@keyframes ICON_CHIP {
  0% {
    transform: rotate(0deg);
  }
  25%, 100% {
    transform: rotate(90deg);
  }
}

.icon--luggage.icon--animated:hover {
  overflow: hidden;
}
.icon--luggage.icon--animated:hover svg {
  animation: ICON_LUGGAGE 1s ease-in-out forwards;
}
@keyframes ICON_LUGGAGE {
  0% {
    transform: translateX(0%);
  }
  25%, 49.9% {
    transform: translateX(200%);
  }
  50% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0%);
  }
}

.icon--rocket.icon--animated {
  --animation-time: 5s;
}
@keyframes ICON_ROCKET_FIRE_WIGGLE {
  0%, 100% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(-5%, 5%);
  }
}
.icon--rocket.icon--animated path:nth-child(6), .icon--rocket.icon--animated path:nth-child(2) {
  animation: ICON_ROCKET_FIRE_WIGGLE var(--animation-time, 1s) ease-in-out infinite;
}
.icon--rocket.icon--animated path:nth-child(2) {
  stroke: none;
}
.icon--rocket.icon--animated path:nth-child(6) {
  --icon-stroke-color-secondary: var(--color-yellow);
}
.icon--rocket.icon--animated path:nth-child(2) {
  --icon-fill: var(--color-orange);
  stroke: none;
}
.icon--rocket.icon--animated:hover {
  --animation-time: 2s;
}

.icon--three-dots.icon--animated svg circle {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.icon--three-dots.icon--animated svg circle:nth-child(1) {
  animation: THREE_DOTS_HORIZONTAL_ANIMATION 1s 0.33s infinite;
}
.icon--three-dots.icon--animated svg circle:nth-child(2) {
  animation: THREE_DOTS_HORIZONTAL_ANIMATION 1s 0.66s infinite;
}
.icon--three-dots.icon--animated svg circle:nth-child(3) {
  animation: THREE_DOTS_HORIZONTAL_ANIMATION 1s 0.99s infinite;
}
@keyframes THREE_DOTS_HORIZONTAL_ANIMATION {
  100%, 0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

.icon--alarm-bell.icon--animated:hover svg {
  animation: ICON_ALARM_BELL 0.3s ease-in-out infinite;
}
@keyframes ICON_ALARM_BELL {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0);
  }
}

.icon--search-m.icon--animated:hover svg {
  animation: ICON_SEARCH 1s ease-in-out infinite;
  --icon-fill: var(--primary-rgb);
}
@keyframes ICON_SEARCH {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.icon--add-l.icon--animated:hover svg line:nth-child(1) {
  animation: ICON_ADD_LINE_Y 2s ease-in-out infinite;
}
.icon--add-l.icon--animated:hover svg line:nth-child(2) {
  animation: ICON_ADD_LINE_X 2s ease-in-out infinite;
}
@keyframes ICON_ADD_LINE_X {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20%, 80% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes ICON_ADD_LINE_Y {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  20%, 80% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

.icon--music-note.icon--animated:hover svg {
  animation: ICON_MUSIC_NOTE 1s ease-in-out infinite;
  --icon-fill: var(--primary-rgb);
}
@keyframes ICON_MUSIC_NOTE {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  20% {
    transform: translateY(-20%) rotate(-5deg);
  }
  40% {
    transform: translateY(0) rotate(5deg);
  }
  60% {
    transform: translateY(-15%) rotate(-3deg);
  }
  80% {
    transform: translateY(0) rotate(3deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.icon--compass.icon--animated:hover svg polygon {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: ICON_COMPASS_POINTER 1s infinite;
}
@keyframes ICON_COMPASS_POINTER {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.icon--terminal.icon--animated svg line {
  animation: ICON_TERMINAL_LINE_BLINK 2s ease-in-out infinite;
}
@keyframes ICON_TERMINAL_LINE_BLINK {
  30%, 70% {
    opacity: 1;
  }
  0%, 100% {
    opacity: 0;
  }
}
.icon--note-edit line {
  stroke-linecap: round;
}

@keyframes ICONS_SETTINGS_LINE1 {
  0%, 100% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 30;
  }
}
@keyframes ICONS_SETTINGS_LINE2 {
  0% {
    stroke-dashoffset: 15;
  }
  25% {
    stroke-dashoffset: 30;
  }
  75% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 15;
  }
}
@keyframes ICONS_SETTINGS_LINE3 {
  0%, 100% {
    stroke-dashoffset: 30;
  }
  50% {
    stroke-dashoffset: 0;
  }
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg line:nth-child(1) {
  animation: ICONS_SETTINGS_LINE1 1.5s linear infinite;
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg line:nth-of-type(2) {
  animation: ICONS_SETTINGS_LINE2 1.5s linear infinite;
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg line:nth-of-type(3) {
  animation: ICONS_SETTINGS_LINE3 1.5s linear infinite;
}
@keyframes ICONS_SETTINGS_CIRCLE1 {
  0%, 100% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-40%);
  }
}
@keyframes ICONS_SETTINGS_CIRCLE2 {
  0% {
    transform: translateX(-20%);
  }
  25% {
    transform: translateX(-40%);
  }
  75% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-20%);
  }
}
@keyframes ICONS_SETTINGS_CIRCLE3 {
  0%, 100% {
    transform: translateX(-40%);
  }
  50% {
    transform: translateX(0%);
  }
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg g:nth-of-type(1) circle {
  animation: ICONS_SETTINGS_CIRCLE1 1.5s linear infinite;
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg g:nth-of-type(2) circle {
  animation: ICONS_SETTINGS_CIRCLE2 1.5s linear infinite;
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg g:nth-of-type(3) circle {
  animation: ICONS_SETTINGS_CIRCLE3 1.5s linear infinite;
}

.icon--settings5.icon--animated svg line:nth-child(1) {
  stroke-dashoffset: 0;
}
.icon--settings5.icon--animated svg line:nth-of-type(2) {
  stroke-dashoffset: 15;
}
.icon--settings5.icon--animated svg line:nth-of-type(3) {
  stroke-dashoffset: 30;
}
.icon--settings5.icon--animated svg g:nth-of-type(1) circle {
  transform: translateX(0%);
}
.icon--settings5.icon--animated svg g:nth-of-type(2) circle {
  transform: translateX(-20%);
}
.icon--settings5.icon--animated svg g:nth-of-type(3) circle {
  transform: translateX(-40%);
}

*:has(> .icon--arrow-left.icon--animated):hover .icon--arrow-left.icon--animated svg {
  animation: ICON_ARROW_LEFT 0.3s ease-in-out forwards;
}
@keyframes ICON_ARROW_LEFT {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

*:has(> .icon--arrow-right.icon--animated):hover .icon--arrow-right.icon--animated svg {
  animation: ICON_ARROW_RIGHT 0.3s ease-in-out forwards;
}
@keyframes ICON_ARROW_RIGHT {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(0%);
  }
}

*:has(> .icon--arrow-up.icon--animated):hover .icon--arrow-up.icon--animated svg {
  animation: ICON_ARROW_UP 0.3s ease-in-out forwards;
}
@keyframes ICON_ARROW_UP {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}

*:has(> .icon--arrow-down.icon--animated):hover .icon--arrow-down.icon--animated svg {
  animation: ICON_ARROW_DOWN 0.3s ease-in-out forwards;
}
@keyframes ICON_ARROW_DOWN {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(0%);
  }
}

*:has(> .icon--arrow-up-left.icon--animated):hover .icon--arrow-up-left.icon--animated svg {
  animation: ICON_ARROW_UP_LEFT 0.3s ease-in-out forwards;
}
@keyframes ICON_ARROW_UP_LEFT {
  0% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}

a.link {
  color: var(--color-foreground);
  position: relative;
  display: inline-block;
  cursor: pointer;
}
a.link::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-foreground);
  clip-path: var(--clip-path, inset(0 100% 0 0));
  transition: clip-path 0.3s ease;
}
a.link:hover {
  color: var(--color-secondary);
  --clip-path: inset(0 0% 0 0);
}

:root {
  --app-header-height: 5.5rem;
  --game-container-max-width: 960px;
  --main-max-width: 1560px;
  --space-xs: calc(var(--space) / 4);
  --space-s: calc(var(--space) / 2);
  --space: 1rem;
  --space-m: calc(var(--space) * 1);
  --space-l: calc(var(--space) * 2);
  --space-xl: calc(var(--space) * 4);
  --space-xxl: calc(var(--space) * 8);
  --spacing: clamp(var(--space), 6vw, var(--space-xxl));
  --border-radius-s: calc(var(--border-radius) / 2);
  --border-radius: 0.25em;
  --border-radius-l: calc(var(--border-radius) * 2);
  --border-radius-xl: calc(var(--border-radius) * 3);
  --border-radius-xxl: calc(var(--border-radius) * 6);
  --border-width: 1px;
  --font-size-xs: calc(var(--font-size) * 0.75);
  --font-size-s: calc(var(--font-size) * 0.875);
  --font-size: 1em;
  --font-size-m: calc(var(--font-size) * 1);
  --font-size-l: calc(var(--font-size) * 1.25);
  --font-size-xl: calc(var(--font-size) * 1.5);
  --font-size-xxl: calc(var(--font-size) * 2);
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 600;
  --font-weight-extra-bold: 700;
  --font-weight-black: 900;
  --font-family:
    var(--font-family-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --font-family-heading:
    var(--font-family-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --font-family-monospace:
    var(--font-family-mono, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace);
  --cubic-bezier: cubic-bezier(0, 0.5, 0.5, 1.5);
  --bezier: var(--cubic-bezier);
  --transition: 0.2s ease;
  --transition-fast: 0.12s ease;
  --shadow-s: 0 1px 2px color-mix(in srgb, var(--color-dark), transparent 90%);
  --shadow-m:
    0 var(--space) var(--spacing) color-mix(in srgb, var(--color-dark), transparent 95%),
    0 var(--space-xs) var(--space-s) color-mix(in srgb, var(--color-dark), transparent 90%);
  --shadow-l:
    0 8px 24px color-mix(in srgb, var(--color-dark), transparent 90%),
    0 2px 6px color-mix(in srgb, var(--color-dark), transparent 90%);
}

:root[data-color-mode=dark] {
  color-scheme: dark;
  --color-background: var(--color-dark);
  --color-foreground: var(--color-light);
}

:root[data-color-mode=light] {
  color-scheme: light;
  --color-background: var(--color-light);
  --color-foreground: var(--color-dark);
}

html,
body {
  min-height: 100%;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-family);
  line-height: 1.5;
  padding: 0;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

/* Form elements: force theme colors so dark-mode browsers don't override text */
textarea,
input,
select {
  color: var(--color-foreground);
  background-color: transparent;
  -webkit-text-fill-color: var(--color-foreground);
}

body {
  margin: 0;
}

#app {
  min-height: 100vh;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
  margin: 0;
}

body,
html {
  margin: 0;
  background: var(--color-background);
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
}

body {
  background-color: var(--color-accent);
  background-image: radial-gradient(ellipse at center, var(--color-background) 0%, var(--color-background) 50%, black 100%);
  background-attachment: fixed;
  background-size: 100% 100%;
  color: var(--color-foreground);
  padding: 0;
  margin: 0;
  font-size: clamp(var(--font-size-base), 1.25vmin, var(--font-size-xl));
  font-family: var(--font-family-body);
  scroll-behavior: smooth;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-foreground), transparent 90%) transparent;
}

@media screen and (width <= 66em) {
  .hide-mobile {
    display: none;
  }
}

:root {
  --context-panel-background: var(--color-foreground);
  --context-panel-color-text: var(--color-background);
}

.id {
  font-size: var(--font-size-s);
  font-family: "Courier New", Courier, monospace;
  background-color: color-mix(in srgb, var(--color-accent), transparent 75%);
  width: fit-content;
  padding: var(--space-xs);
  border-radius: var(--border-radius-xs);
  border: var(--border-width-s) solid color-mix(in srgb, var(--color-primary), var(--color-accent) 50%);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}
.id span {
  position: relative;
  left: 0;
  width: fit-content;
  transform: translateX(0%);
  transition: all 0.2s ease-in-out;
}
.id:hover {
  text-overflow: none;
}
.id:hover span {
  transition: none;
  left: 100%;
  position: relative;
  display: block;
  transform: translateX(-100%);
  width: fit-content;
}.platform-header {
  --int-platform-header-surface-color: var(--color-background);
  --int-platform-header-content-color: var(--color-foreground);
  position: sticky;
  top: 0;
  z-index: var(--platform-header-z-index, var(--int-platform-header-z-index, 120));
  padding: var(--platform-header-padding, var(--int-platform-header-padding, var(--space) var(--spacing)));
  color: var(--int-platform-header-content-color);
  border-bottom: 1px solid var(--platform-header-border-color, var(--int-platform-header-border-color, color-mix(in srgb, var(--int-platform-header-content-color), transparent 90%)));
  background: var(--platform-header-background, var(--int-platform-header-background, color-mix(in srgb, var(--int-platform-header-surface-color), transparent 50%)));
  backdrop-filter: var(--platform-header-blur, var(--int-platform-header-blur, blur(18px) saturate(135%)));
}
.platform-header--color-mode-light {
  --int-platform-header-surface-color: var(--color-light);
  --int-platform-header-content-color: var(--color-dark);
}
.platform-header--color-mode-dark {
  --int-platform-header-surface-color: var(--color-dark);
  --int-platform-header-content-color: var(--color-light);
}
.platform-header--color-mode-auto {
  --int-platform-header-surface-color: var(--color-light);
  --int-platform-header-content-color: var(--color-dark);
}
@media (prefers-color-scheme: dark) {
.platform-header--color-mode-auto {
    --int-platform-header-surface-color: var(--color-dark);
    --int-platform-header-content-color: var(--color-light);
}
}
.platform-header--color-mode-inverse {
  --int-platform-header-surface-color: var(--color-dark);
  --int-platform-header-content-color: var(--color-light);
}
@media (prefers-color-scheme: dark) {
.platform-header--color-mode-inverse {
    --int-platform-header-surface-color: var(--color-light);
    --int-platform-header-content-color: var(--color-dark);
}
}
:root[data-color-mode=dark] .platform-header--color-mode-auto, :root[data-theme=dark] .platform-header--color-mode-auto {
  --int-platform-header-surface-color: var(--color-dark);
  --int-platform-header-content-color: var(--color-light);
}
:root[data-color-mode=light] .platform-header--color-mode-auto, :root[data-theme=light] .platform-header--color-mode-auto {
  --int-platform-header-surface-color: var(--color-light);
  --int-platform-header-content-color: var(--color-dark);
}
:root[data-color-mode=dark] .platform-header--color-mode-inverse, :root[data-theme=dark] .platform-header--color-mode-inverse {
  --int-platform-header-surface-color: var(--color-light);
  --int-platform-header-content-color: var(--color-dark);
}
:root[data-color-mode=light] .platform-header--color-mode-inverse, :root[data-theme=light] .platform-header--color-mode-inverse {
  --int-platform-header-surface-color: var(--color-dark);
  --int-platform-header-content-color: var(--color-light);
}
.platform-header--compact {
  padding: var(--platform-header-compact-padding-compact, var(--int-platform-header-compact-padding-compact, var(--space-s) var(--spacing)));
}
.platform-header__inner, .platform-header__secondary {
  width: 100%;
  max-width: var(--platform-header-max-width, 88rem);
  margin: 0 auto;
}
.platform-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  min-width: 0;
}
.platform-header__brand, .platform-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space);
  flex-wrap: wrap;
}
.platform-header__brand {
  min-width: 0;
}
.platform-header__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.platform-header__actions {
  justify-content: flex-end;
  flex: var(--platform-header-actions-actions-flex, var(--int-platform-header-actions-actions-flex, 0 0 auto));
  min-width: 0;
}
.platform-header__secondary {
  margin-top: calc(var(--space) * 0.7);
}
@media (max-width: 700px) {
.platform-header {
    padding: var(--platform-header-padding-compact, var(--int-platform-header-padding-compact, var(--space-s) var(--spacing)));
}
.platform-header__inner {
    display: grid;
    grid-template-columns: var(--platform-header-inner-mobile-columns, var(--int-platform-header-inner-mobile-columns, minmax(0, 1fr) auto));
    align-items: center;
    gap: var(--space-s);
}
.platform-header__nav {
    grid-column: 1/-1;
    justify-content: flex-start;
}
.platform-header__actions {
    justify-content: flex-end;
}
}
.platform-header--float {
  padding: var(--space-s) var(--space);
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
}
.platform-header--float .platform-header__inner {
  background: color-mix(in srgb, var(--int-platform-header-surface-color), transparent 50%);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  border-radius: var(--border-radius-xl);
  padding: var(--space-s) var(--space);
  border: 1px solid color-mix(in srgb, var(--int-platform-header-content-color), transparent 90%);
  box-shadow: 0 0.5rem 2rem color-mix(in srgb, var(--int-platform-header-content-color), transparent 88%);
}.resizable {
  --resizable-handle-size: 0;
  display: grid;
  min-width: 0;
  min-height: 0;
}
.resizable--horizontal {
  grid-template-columns: minmax(var(--resizable-min-size), var(--resizable-primary-size)) var(--resizable-handle-size) minmax(var(--resizable-min-secondary-size), 1fr);
}
.resizable--vertical {
  grid-template-rows: minmax(var(--resizable-min-size), var(--resizable-primary-size)) var(--resizable-handle-size) minmax(var(--resizable-min-secondary-size), 1fr);
}
.resizable__pane {
  min-width: 0;
  min-height: 0;
}
.resizable__handle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-foreground);
  transition: background-color 160ms ease, color 160ms ease;
  touch-action: none;
  width: 0;
}
.resizable__handle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.resizable__handle:hover {
  background: color-mix(in srgb, var(--color-primary), transparent 94%);
  color: color-mix(in srgb, var(--color-foreground), transparent 16%);
}
.resizable__grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.5em;
  flex-shrink: 0;
  height: 100%;
}
.resizable__grip-line {
  display: block;
  border-radius: var(--border-radius);
  background: currentColor;
  opacity: 0.25;
}
.resizable--horizontal .resizable__handle {
  cursor: col-resize;
}
.resizable--horizontal .resizable__grip {
  flex-direction: column;
}
.resizable--horizontal .resizable__grip-line {
  width: var(--space-xs);
  height: var(--space-l);
}
.resizable--vertical .resizable__handle {
  cursor: row-resize;
}
.resizable--vertical .resizable__grip {
  flex-direction: row;
}
.resizable--vertical .resizable__grip-line {
  width: var(--space-l);
  height: var(--space-xs);
}
.resizable--disabled .resizable__handle {
  cursor: default;
  opacity: 0.5;
}.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: currentColor;
  --icon-fill: var(--icon-fill, var(--int-icon-fill, transparent));
}
.icon svg {
  width: 100%;
  height: 100%;
}
.icon svg path, .icon svg rect, .icon svg line, .icon svg circle, .icon svg polyline {
  stroke: currentColor;
}
.icon--small {
  width: var(--icon-small-size, var(--int-icon-small-size, 1em));
  height: var(--icon-small-size, var(--int-icon-small-size, 1em));
}
.icon--medium {
  width: var(--icon-medium-size, var(--int-icon-medium-size, 1.25em));
  height: var(--icon-medium-size, var(--int-icon-medium-size, 1.25em));
}
.icon--large {
  width: var(--icon-large-size, var(--int-icon-large-size, 2em));
  height: var(--icon-large-size, var(--int-icon-large-size, 2em));
}
.icon--xl {
  width: var(--icon-xl-size, var(--int-icon-xl-size, 4em));
  height: var(--icon-xl-size, var(--int-icon-xl-size, 4em));
}.sidebar {
  display: grid;
  align-content: start;
  gap: var(--space);
  width: min(100%, var(--sidebar-width, 100%));
  padding: var(--space);
  border: var(--sidebar-border, var(--int-sidebar-border, none));
  border-radius: var(--sidebar-border-radius, var(--int-sidebar-border-radius, 0));
  background: var(--sidebar-background, var(--int-sidebar-background, color-mix(in srgb, var(--color-background), var(--color-foreground) 5%)));
  box-shadow: var(--sidebar-shadow, var(--int-sidebar-shadow, 0 1.2rem 3rem color-mix(in srgb, var(--color-foreground), transparent 93%)));
}
.sidebar--sticky {
  position: sticky;
  top: var(--space);
}
.sidebar--float {
  --int-sidebar-border-radius: var(--border-radius);
  --int-sidebar-padding: var(--space);
  --int-sidebar-background: transparent;
  --int-sidebar-container-background: var(--color-background);
  --int-sidebar-container-padding: var(--space);
  --int-sidebar-container-border-radius: var(--border-radius-xl);
  --int-sidebar-container-box-shadow: .125em .25em .75em 0em color-mix(in srgb, var(--color-foreground), transparent 93%);
}
.sidebar__container {
  padding: var(--sidebar-container-padding, var(--int-sidebar-container-padding, 0));
  border: var(--sidebar-container-border, var(--int-sidebar-container-border, none));
  border-radius: var(--sidebar-container-border-radius, var(--int-sidebar-container-border-radius, 0));
  background: var(--sidebar-container-background, var(--int-sidebar-container-background, transparent));
  box-shadow: var(--sidebar-container-box-shadow, var(--int-sidebar-container-box-shadow, none));
}
.sidebar__header, .sidebar__footer {
  display: grid;
  gap: calc(var(--space) * 0.45);
}
.sidebar__panel {
  display: grid;
  gap: var(--space);
  min-width: 0;
}
.sidebar__headline {
  display: grid;
  gap: calc(var(--space) * 0.25);
}
.sidebar__title {
  margin: 0;
  font-size: var(--sidebar-title-title-font-size, var(--int-sidebar-title-title-font-size, var(--font-size)));
  font-weight: var(--font-weight-bold);
}
.sidebar__subtitle {
  margin: 0;
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  line-height: 1.5;
  font-size: var(--font-size-s);
}
.sidebar__content {
  display: grid;
  gap: calc(var(--space) * 0.75);
  min-width: 0;
}
.sidebar__mobile-trigger {
  display: none;
  width: calc(var(--space) * 1.8);
  height: calc(var(--space) * 3);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 82%);
  background: color-mix(in srgb, var(--color-background), var(--color-primary) 6%);
  color: inherit;
  border-radius: 0 calc(var(--border-radius, 1rem) * 0.9) calc(var(--border-radius, 1rem) * 0.9) 0;
  padding: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold, 600);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.7rem 2rem color-mix(in srgb, var(--color-foreground), transparent 85%);
}
.sidebar__mobile-trigger-arrow {
  line-height: 1;
}
.sidebar--mobile {
  width: auto;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: var(--sidebar-mobile-mobile-z-index, var(--int-sidebar-mobile-mobile-z-index, 180));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sidebar--mobile.sidebar--sticky {
  position: fixed;
}
.sidebar--mobile .sidebar__mobile-trigger {
  display: inline-flex;
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: var(--sidebar-mobile-sidebar-mobile-trigger-mobile-trigger-z-index, var(--int-sidebar-mobile-sidebar-mobile-trigger-mobile-trigger-z-index, 182));
}
.sidebar--mobile .sidebar__panel {
  display: grid;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-mobile-sidebar-panel-mobile-panel-width, var(--int-sidebar-mobile-sidebar-panel-mobile-panel-width, min(86vw, 22rem)));
  overflow-y: auto;
  padding: var(--space);
  border-right: 1px solid color-mix(in srgb, var(--color-foreground), transparent 86%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-background), white 22%), color-mix(in srgb, var(--color-background), var(--color-primary) 4%));
  box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--color-foreground), transparent 80%);
  transform: translateX(-102%);
  transition: var(--sidebar-mobile-sidebar-panel-mobile-transition, var(--int-sidebar-mobile-sidebar-panel-mobile-transition, transform 180ms ease-in-out));
  z-index: var(--sidebar-mobile-sidebar-panel-mobile-panel-z-index, var(--int-sidebar-mobile-sidebar-panel-mobile-panel-z-index, 181));
}
.sidebar--mobile.sidebar--mobile-open .sidebar__panel {
  transform: translateX(0);
}.badge {
  --badge-background-color: color-mix(in srgb, var(--badge-color, var(--color-primary)), transparent 75%);
  --badge-text-color: var(--color-foreground);
  background: var(--badge-background-color);
  color: var(--badge-text-color);
  display: inline-flex;
  align-items: center;
  padding: var(--badge-padding, var(--space-xs) var(--space-s));
  border-radius: var(--badge-radius, var(--border-radius-l));
  font-size: var(--badge-font-size, var(--font-size-m, 0.875rem));
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.badge:empty {
  height: 1.5em;
  width: 1.5em;
  padding: 0;
}
.badge[data-variant=outline] {
  background: transparent;
  border: 1px solid currentColor;
}
.badge[data-size=small] {
  --badge-padding: var(--space-xs) var(--space-s);
  --badge-font-size: var(--font-size-xs, 0.75rem);
}
.badge[data-size=large] {
  --badge-padding: var(--space-xs) var(--space-m);
  --badge-font-size: var(--font-size-base, 1rem);
}.status-badge {
  display: inline-flex;
  align-items: center;
  flex-grow: 0;
  height: fit-content;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--status-badge-border-radius, var(--border-radius-l));
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  border: var(--status-badge-border, var(--status-badge-border-color, transparent) solid 1px);
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--status-badge-color), transparent var(--status-badge-background-opacity));
  color: var(--status-badge-text);
  width: var(--status-badge-width, fit-content);
}.sidebar-navigation {
  display: var(--sidebar-navigation-display, var(--int-sidebar-navigation-display, grid));
  gap: var(--sidebar-navigation-gap, var(--int-sidebar-navigation-gap, calc(var(--space) * 0.9)));
}
.sidebar-navigation__section {
  display: var(--sidebar-navigation-section-display, var(--int-sidebar-navigation-section-display, grid));
  gap: var(--sidebar-navigation-section-gap, var(--int-sidebar-navigation-section-gap, var(--space-s)));
}
.sidebar-navigation__section-header {
  display: block;
}
.sidebar-navigation__section-toggle, .sidebar-navigation__section-summary {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: calc(var(--space) * 0.5);
}
.sidebar-navigation__section-start {
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 0.4);
  min-width: 0;
}
.sidebar-navigation__section-icon-custom {
  flex-shrink: 0;
  color: var(--sidebar-navigation-section-icon-custom-color, var(--int-sidebar-navigation-section-icon-custom-color, color-mix(in srgb, var(--color-foreground), transparent 42%)));
}
.sidebar-navigation__section-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sidebar-navigation__section-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: calc(var(--border-radius, 1rem) * 0.4);
}
.sidebar-navigation__section-copy {
  display: grid;
  gap: var(--sidebar-navigation-section-copy-gap, var(--int-sidebar-navigation-section-copy-gap, var(--space-xs)));
}
.sidebar-navigation__section-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sidebar-navigation-section-meta-gap, var(--int-sidebar-navigation-section-meta-gap, calc(var(--space-xs) * 1.75)));
  flex-shrink: 0;
}
.sidebar-navigation__section-label {
  text-transform: uppercase;
  letter-spacing: var(--sidebar-navigation-section-label-letter-spacing, var(--int-sidebar-navigation-section-label-letter-spacing, 0.08em));
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-foreground), transparent 42%);
}
.sidebar-navigation__section-description {
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.sidebar-navigation__section-icon {
  color: color-mix(in srgb, var(--color-foreground), transparent 42%);
  transition: transform 160ms ease;
}
.sidebar-navigation__section-icon--expanded {
  transform: rotate(180deg);
}
.sidebar-navigation__items {
  display: grid;
  gap: var(--sidebar-navigation-items-gap, var(--int-sidebar-navigation-items-gap, calc(var(--space-xs) * 1.5)));
}
.sidebar-navigation__item-icon {
  flex-shrink: 0;
  color: var(--sidebar-navigation-item-icon-color, var(--int-sidebar-navigation-item-icon-color, color-mix(in srgb, var(--color-foreground), transparent 36%)));
  transition: color 140ms ease;
}
.sidebar-navigation__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sidebar-navigation-item-gap, var(--int-sidebar-navigation-item-gap, calc(var(--space) * 0.75)));
  padding: var(--sidebar-navigation-item-padding, var(--int-sidebar-navigation-item-padding, var(--space-s) var(--space)));
  border-radius: var(--sidebar-navigation-item-border-radius, var(--int-sidebar-navigation-item-border-radius, calc(var(--border-radius, 1rem) * 0.9)));
  border: var(--sidebar-navigation-item-border, var(--int-sidebar-navigation-item-border, none));
  background: var(--sidebar-navigation-item-background, var(--int-sidebar-navigation-item-background, color-mix(in srgb, var(--color-background), var(--color-background) 48%)));
  color: inherit;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.sidebar-navigation__item:hover {
  background: var(--sidebar-navigation-item-hover-background, var(--int-sidebar-navigation-item-hover-background, color-mix(in srgb, var(--color-primary), transparent 92%)));
  transform: var(--sidebar-navigation-item-hover-transform, var(--int-sidebar-navigation-item-hover-transform, none));
  box-shadow: var(--sidebar-navigation-item-hover-box-shadow, var(--int-sidebar-navigation-item-hover-box-shadow, none));
}
.sidebar-navigation__item:hover .sidebar-navigation__item-icon {
  color: var(--color-primary);
}
.sidebar-navigation__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.sidebar-navigation__item--active {
  background: var(--sidebar-navigation-item-active-background, var(--int-sidebar-navigation-item-active-background, color-mix(in srgb, var(--color-primary), transparent 88%)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary), transparent 72%);
}
.sidebar-navigation__item--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.sidebar-navigation__item-copy {
  display: grid;
  gap: var(--sidebar-navigation-item-copy-gap, var(--int-sidebar-navigation-item-copy-gap, var(--space-xs)));
  min-width: 0;
}
.sidebar-navigation__item-label {
  font-size: var(--sidebar-navigation-item-label-font-size, var(--int-sidebar-navigation-item-label-font-size, var(--font-size-s)));
}
.sidebar-navigation__item-label-prefix {
  opacity: 0.56;
}
.sidebar-navigation__item-description {
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}.app-layout {
  height: 100svh;
}
.app-layout .resizable__pane--start,
.app-layout .resizable__pane--end {
  min-height: 0;
  overflow: hidden;
}
.app-layout__sidebar {
  height: 100%;
  overflow-y: auto;
}
.app-layout__sidebar .sidebar__panel {
  height: fit-content;
}
.app-layout__sidebar-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s, 0.5rem);
}
.app-layout__sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 84%);
  border-radius: var(--border-radius, 0.5rem);
  background: color-mix(in srgb, var(--color-background), transparent 10%);
  color: inherit;
  cursor: pointer;
}
.app-layout__sidebar-close:hover {
  background: color-mix(in srgb, var(--color-foreground), transparent 93%);
}
.app-layout__body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.app-layout__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.app-layout__content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.app-layout__menu-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: var(--border-radius, 0.5rem);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.app-layout__menu-trigger:hover {
  background: color-mix(in srgb, var(--color-foreground), transparent 93%);
}
.app-layout__backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: color-mix(in srgb, var(--color-foreground), transparent 68%);
  backdrop-filter: blur(2px);
}
.app-layout__split {
  flex: 1;
  min-height: 0;
  --resizable-handle-size: 1rem;
}
.app-layout__split .resizable__pane--start,
.app-layout__split .resizable__pane--end {
  overflow-y: auto;
}
.app-layout__split-panel {
  height: 100%;
}
@media (max-width: 960px) {
.app-layout.resizable {
    grid-template-columns: 1fr;
}
.app-layout .resizable__handle {
    display: none;
}
.app-layout .resizable__pane--start {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--app-layout-resizable-pane-start-sidebar-mobile-width, var(--int-app-layout-resizable-pane-start-sidebar-mobile-width, 80vw));
    height: 100svh;
    z-index: 200;
    overflow-y: auto;
    transform: translateX(-102%);
    transition: transform 280ms ease;
}
.app-layout--sidebar-open .resizable__pane--start {
    transform: translateX(0);
}
.app-layout__sidebar-close {
    display: flex;
}
.app-layout__menu-trigger {
    display: flex;
}
}.button {
  --button-color: var(--color-primary);
  --button-color-text: var(--color-primary-text);
  --button-background: var(--button-color);
  position: relative;
  width: fit-content;
  display: inline-flex;
  color: var(--button-color-text);
  background-color: transparent;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: var(--border-radius-xl);
  font-family: inherit;
}
.button--outline {
  --button-background: transparent;
  --button-color-text: var(--button-color, var(--color-primary));
  --button-border: 1px solid var(--button-color, var(--color-primary));
}
.button--outline:hover:not(:disabled) {
  --button-background: var(--button-color, var(--color-primary));
  --button-color-text: var(--button-color-text-hover, var(--color-primary-text));
}
.button--ghost {
  --button-background: transparent;
  --button-color-text: var(--button-color);
}
.button--ghost:hover:not(:disabled) {
  --button-color-text: var(--button-color-text);
  --button-background: color-mix(in srgb, var(--button-color), transparent 75%);
}
.button--danger {
  --button-background: var(--color-error);
  --button-color-text: var(--color-background);
}
.button--danger:hover:not(:disabled) {
  opacity: 0.85;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--button-background);
  border: var(--button-border, none);
  border-radius: var(--border-radius-xl);
  transition: all 0.2s ease;
  z-index: 0;
}
.button:disabled, .button--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.button:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.button:hover, .button:focus {
  --icon-fill: var(--button-color-text);
}
.button--loading {
  pointer-events: none;
}
.button--loading .button__container {
  opacity: 0;
}
.button--block {
  width: 100%;
}
.button__container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  border-radius: inherit;
  width: 100%;
}
.button--small .button__container {
  padding: var(--space-xs) var(--space-s);
  font-size: var(--button-small-button-container-font-size, var(--int-button-small-button-container-font-size, var(--font-size-xs)));
}
.button--medium .button__container {
  padding: var(--space-s) var(--space);
  font-size: var(--button-medium-button-container-font-size, var(--int-button-medium-button-container-font-size, var(--font-size)));
}
.button--large .button__container {
  padding: var(--space) var(--space-l);
  font-size: var(--button-large-button-container-font-size, var(--int-button-large-button-container-font-size, calc(var(--font-size) * 1.125)));
}
.button--icon-only .button__container {
  padding: var(--space-s);
  aspect-ratio: 1;
}
.button--icon-only .button__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.button__text {
  display: flex;
  align-items: center;
  font-weight: var(--button-text-font-weight, var(--int-button-text-font-weight, 500));
}
.button__icon {
  display: flex;
  align-items: center;
  font-size: var(--button-icon-icon-size, var(--int-button-icon-icon-size, 1.25em));
}
.button__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.button__loading .spinner {
  width: var(--button-loading-spinner-spinner-size, var(--int-button-loading-spinner-spinner-size, 1.5em));
  height: var(--button-loading-spinner-spinner-size, var(--int-button-loading-spinner-spinner-size, 1.5em));
  border: 2px solid var(--button-color-text);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
to {
    transform: rotate(360deg);
}
}.button-group {
  display: flex;
  gap: var(--button-group-gap, var(--space-s));
}
.button-group--row {
  flex-direction: row;
}
.button-group--column {
  flex-direction: column;
}
.button-group--gap-none {
  --button-group-gap: 0;
}
.button-group--gap-small {
  --button-group-gap: var(--space-xs);
}
.button-group--gap-medium {
  --button-group-gap: var(--space-s);
}
.button-group--gap-large {
  --button-group-gap: var(--space);
}
.button-group--align-start {
  align-items: flex-start;
}
.button-group--align-center {
  align-items: center;
}
.button-group--align-end {
  align-items: flex-end;
}
.button-group--align-stretch {
  align-items: stretch;
}
.button-group--justify-start {
  justify-content: flex-start;
}
.button-group--justify-center {
  justify-content: center;
}
.button-group--justify-end {
  justify-content: flex-end;
}
.button-group--justify-between {
  justify-content: space-between;
}
.button-group--justify-around {
  justify-content: space-around;
}
.button-group--fluid {
  width: 100%;
}
.button-group--fluid.button-group--gap-none .button {
  flex: 1;
  border-radius: 0;
}
.button-group--fluid.button-group--gap-none .button:first-child {
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}
.button-group--fluid.button-group--gap-none .button:last-child {
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}
.button-group--wrap {
  flex-wrap: wrap;
}
.button-group .button {
  margin: 0;
}.context-menu-items__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.context-menu-items__list-item {
  --button-width: 100%;
  --button-container-justify: flex-start;
  --button-border-radius: 4px;
  position: relative;
}
.context-menu-items__list-item:hover > .context-menu-items__submenu {
  transform: scale(1);
  pointer-events: all;
  opacity: 1;
}
.context-menu-items__list-item--size-small {
  font-size: 0.75em;
}
.context-menu-items__list-item--size-medium {
  font-size: 1em;
}
.context-menu-items__list-item--size-large {
  font-size: 1.25em;
}
.context-menu-items--new-panel .context-menu-items__submenu {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.75);
  position: absolute;
  left: 100%;
  top: 0;
  transform-origin: left top;
  transition: all 0.1s;
}
.context-menu-items__submenu {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.75);
  position: absolute;
  left: 0%;
  top: 100%;
  transform-origin: left top;
  transition: all 0.1s;
}
.context-menu-items__separator {
  height: 1px;
  background-color: color-mix(in srgb, var(--color-foreground), transparent 90%);
  border: none;
  margin: 0.5em 0;
}
.context-menu-items__header {
  margin: var(--space-s);
  font-size: 0.75em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.context-menu-items__header h5 {
  margin: 0;
  font-weight: 600;
}
.context-menu-items__row {
  display: flex;
  gap: var(--space-s, 0.5rem);
  flex-direction: row;
}
.context-menu-items__row .context-menu-items__list {
  gap: var(--space-s, 0.5rem);
  display: flex;
  flex-direction: row;
}
.context-menu-items__item {
  border-radius: var(--border-radius, 4px);
  position: relative;
}
.context-menu-items__item:hover .icon {
  color: var(--color-primary);
}
.context-menu-items__item:hover {
  --icon-fill: color-mix(in srgb, var(--color-primary), transparent 50%);
}
.context-menu-items__item--icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-s, 0.5rem);
  gap: var(--space-s, 0.5rem);
  opacity: 0.66;
  text-decoration: none;
}
.context-menu-items__item--icon-tile::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-accent);
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.75);
  transition: all 0.3s ease;
}
.context-menu-items__item--icon-tile:hover {
  opacity: 1;
}
.context-menu-items__item--icon-tile:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.context-menu-items__item--icon-tile .context-menu-items__label,
.context-menu-items__item--icon-tile .context-menu-items__icon {
  z-index: 2;
  position: relative;
}
.context-menu-items__item--icon-tile .context-menu-items__label {
  font-size: 0.66em;
  text-align: center;
  width: 4em;
}
.context-menu-items__item--icon-tile .context-menu-items__icon {
  font-size: 2em;
}:root {
  --context-panel-padding: var(--space-xs, 0.5rem);
}
.context-panel {
  position: relative;
}
.context-panel--active {
  z-index: 200;
}
.context-panel__trigger {
  touch-action: none;
  user-select: none;
}
.context-panel__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-index-overlay, 999);
  background-color: var(--context-panel-overlay, transparent);
}
.context-panel .panel {
  --panel-shadow: var(--color-primary-text, var(--color-foreground));
  background: var(--context-panel-background, var(--color-accent));
  border-radius: var(--context-panel-border-radius, var(--border-radius, 8px));
  box-shadow: 0 0 100px 0px color-mix(in srgb, var(--panel-shadow), transparent 75%), 0.25em 0.25em 0.5em 0px color-mix(in srgb, var(--panel-shadow), transparent 75%), -0.125em -0.125em 0.5em color-mix(in srgb, var(--color-foreground), transparent 90%) inset;
  padding: var(--context-panel-padding);
  touch-action: none;
}
.context-panel__panel {
  --scale: var(--context-panel-scale, 0);
  --translateX: calc(var(--context-panel-position-x, 0) + var(--context-panel-offset-x, 0));
  --translateY: calc(var(--context-panel-position-y, 0) + var(--context-panel-offset-y, 0));
  pointer-events: none;
  position: absolute;
  z-index: var(--z-index-dropdown, 1000);
  min-width: 100px;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform: translateX(var(--translateX, 0)) translateY(var(--translateY, 0)) scale(var(--scale, 0));
  bottom: var(--context-panel-position-bottom, auto);
  top: var(--context-panel-position-top, auto);
  left: var(--context-panel-position-left, auto);
  right: var(--context-panel-position-right, auto);
}
.context-panel__panel::before {
  content: "";
  width: var(--context-panel-pointer-size, 0.66em);
  height: var(--context-panel-pointer-size, 0.66em);
  position: absolute;
  bottom: var(--context-panel-pointer-bottom, auto);
  top: var(--context-panel-pointer-top, auto);
  left: var(--context-panel-pointer-left, auto);
  right: var(--context-panel-pointer-right, auto);
  transform: translate(var(--context-panel-pointer-x, 0), var(--context-panel-pointer-y, 0)) rotate(var(--context-panel-pointer-rotation, 45deg)) scale(var(--context-panel-pointer-scale, 0));
  background-color: var(--context-panel-pointer-color, var(--context-panel-background, var(--color-accent)));
  border-radius: var(--context-panel-pointer-border-radius, 0.25em) 0 0 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
  transition: all 0.2s ease-in-out;
  transition-delay: 0.2s;
}
.context-panel__panel--size-medium {
  font-size: 1em;
}
.context-panel__panel--size-small {
  font-size: 0.75em;
}
.context-panel__panel--size-large {
  font-size: 1.25em;
}
.context-panel__panel--active {
  opacity: 1;
  pointer-events: all;
  --context-panel-pointer-scale: 1;
  --context-panel-scale: 1;
}
.context-panel__panel--click {
  position: fixed;
  --context-panel-position-top: var(--click-y);
  --context-panel-position-left: var(--click-x);
}
.context-panel__panel--bottom-left, .context-panel__panel--bottom-center, .context-panel__panel--bottom-right, .context-panel__panel--bottom-align-left, .context-panel__panel--bottom-align-right {
  --context-panel-pointer-bottom: 100%;
  --context-panel-pointer-x: -50%;
  --context-panel-pointer-y: 50%;
  --context-panel-position-top: 100%;
  --context-panel-position-x: 0px;
  --context-panel-position-y: 0px;
  --context-panel-offset-y: 0px;
  --context-panel-offset-x: 0px;
}
.context-panel__panel--top-left, .context-panel__panel--top-center, .context-panel__panel--top-right, .context-panel__panel--top-align-left, .context-panel__panel--top-align-right {
  --context-panel-pointer-top: 100%;
  --context-panel-pointer-y: -50%;
  --context-panel-pointer-rotation: 225deg;
  --context-panel-position-bottom: 100%;
  --context-panel-position-y: 0px;
  --context-panel-offset-y: 0px;
  --context-panel-offset-x: 0px;
}
.context-panel__panel--top-center {
  --context-panel-pointer-left: 50%;
  --context-panel-pointer-x: -50%;
}
.context-panel__panel--top-align-left, .context-panel__panel--bottom-align-left {
  --context-panel-pointer-x: -50%;
  --context-panel-pointer-left: 50%;
  --context-panel-position-left: 0;
}
.context-panel__panel--top-left, .context-panel__panel--bottom-left {
  --context-panel-pointer-right: var(--space, 1rem);
  --context-panel-pointer-x: 50%;
  --context-panel-position-right: calc(100% - var(--space-l, 2rem));
}
.context-panel__panel--top-align-right, .context-panel__panel--bottom-align-right {
  --context-panel-pointer-x: -50%;
  --context-panel-pointer-left: 50%;
  --context-panel-position-right: 0;
}
.context-panel__panel--top-right, .context-panel__panel--bottom-right {
  --context-panel-position-left: calc(100% - var(--space-l, 2rem));
  --context-panel-pointer-left: var(--space, 1rem);
}
.context-panel__panel--top-center, .context-panel__panel--bottom-center {
  --context-panel-pointer-x: -50%;
  --context-panel-pointer-left: 50%;
  --context-panel-position-left: 50%;
  --context-panel-position-x: -50%;
}.actions {
  display: flex;
}
.actions--inline {
  flex-direction: row;
}
.actions--stacked {
  flex-direction: column;
}
.actions--stacked > * {
  width: 100%;
}
.actions--justified {
  flex-direction: row;
}
.actions--justified > * {
  flex: 1;
}
.actions--align-start {
  justify-content: flex-start;
}
.actions--align-center {
  justify-content: center;
}
.actions--align-end {
  justify-content: flex-end;
}
.actions--align-space-between {
  justify-content: space-between;
}
.actions--align-space-around {
  justify-content: space-around;
}
.actions--size-none {
  gap: 0;
}
.actions--size-xs {
  gap: var(--actions-size-xs-gap, var(--int-actions-size-xs-gap, var(--space-xs)));
}
.actions--size-s {
  gap: var(--actions-size-s-gap, var(--int-actions-size-s-gap, var(--space-s)));
}
.actions--size-m {
  gap: var(--actions-size-m-gap, var(--int-actions-size-m-gap, var(--space-m)));
}
.actions--size-l {
  gap: var(--actions-size-l-gap, var(--int-actions-size-l-gap, var(--space-l)));
}
.actions--size-xl {
  gap: var(--actions-size-xl-gap, var(--int-actions-size-xl-gap, var(--space-xl)));
}.card {
  background: var(--card-background-color, var(--int-card-background-color, var(--color-background)));
  border: 1px solid var(--card-border-color, var(--int-card-border-color, color-mix(in srgb, var(--color-foreground), transparent 75%)));
  color: var(--card-text-color, var(--int-card-text-color, var(--color-foreground)));
  border-radius: var(--card-radius, var(--int-card-radius, var(--border-radius)));
  position: relative;
  transition: all 0.3s ease;
  overflow: var(--card-overflow, var(--int-card-overflow, visible));
  display: flex;
  flex-direction: column;
}
.card--has-color {
  --card-background-color: color-mix(in srgb , var(--card-color), transparent 90%);
  --card-border-color: color-mix(in srgb , var(--card-color), transparent 25%);
  --card-text-color: color-mix(in srgb , var(--card-color), transparent 0%);
}
.card--hoverable {
  cursor: pointer;
}
.card--hoverable:hover {
  transform: translateY(calc(var(--space-xs) * -1.25));
  box-shadow: 0 8px 40px color-mix(in srgb, var(--color-foreground), transparent 88%);
}
.card--featured {
  border-color: var(--color-primary);
  border-width: 2px;
}
.card--elevated {
  border: none;
  box-shadow: var(--card-elevated-shadow, var(--int-card-elevated-shadow, 0 4px 20px color-mix(in srgb, var(--color-foreground), transparent 95%)));
}
.card--ghost {
  background: transparent;
  border-color: transparent;
}
.card__badge {
  position: absolute;
  top: calc(var(--space-s) * -1);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-background);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--border-radius-s);
  font-size: var(--font-size-m, 0.8rem);
  font-weight: 600;
  z-index: 1;
}
.card--no-padding {
  padding: 0;
}
.card--no-padding .card__content {
  padding: var(--card-no-padding-card-content-padding, var(--int-card-no-padding-card-content-padding, var(--space-m)));
}
.card__content {
  flex: 1;
  padding: var(--card-content-padding, var(--int-card-content-padding, var(--space-m)));
}
.card__content--no-padding {
  padding: 0;
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  padding: var(--card-header-header-padding, var(--int-card-header-header-padding, var(--space) var(--space)));
  border-bottom: 1px solid var(--card-header-header-border-color, var(--int-card-header-header-border-color, color-mix(in srgb, var(--color-foreground), transparent 85%)));
  background-color: var(--card-header-background, transparent);
  border-radius: var(--card-header-radius, var(--int-card-header-radius, var(--border-radius))) var(--card-header-radius, var(--int-card-header-radius, var(--border-radius))) 0 0;
}
.card__header--no-padding {
  padding: 0;
}
.card__title {
  margin: 0;
  font-size: var(--card-title-title-size, var(--int-card-title-title-size, var(--font-size-l)));
  font-weight: var(--card-title-title-weight, var(--int-card-title-title-weight, 600));
  color: var(--card-title-title-color, var(--int-card-title-title-color, var(--color-foreground)));
  flex: 1;
}
.card__headline {
  flex: 1;
  min-width: 0;
}
.card__description {
  margin: var(--space-xs) 0 0;
  color: var(--card-description-description-color, var(--int-card-description-description-color, var(--color-foreground-muted)));
  font-size: var(--card-description-description-size, var(--int-card-description-description-size, var(--font-size-s)));
  line-height: 1.5;
}
.card__header-actions {
  flex-shrink: 0;
}
.card__footer {
  display: flex;
  align-items: center;
  padding: var(--card-footer-footer-padding, var(--int-card-footer-footer-padding, var(--space-l) var(--space-m)));
  border-top: 1px solid var(--card-footer-border-color, var(--int-card-footer-border-color, color-mix(in srgb, var(--color-foreground), transparent 75%)));
}
.card__footer--no-padding {
  padding: 0;
}
.card__footer-actions {
  width: 100%;
}
.card--has-header .card__content {
  padding-top: var(--space-m);
}
.card--has-header.card--no-padding .card__content {
  padding-top: var(--card-has-header-card-no-padding-card-content-padding, var(--int-card-has-header-card-no-padding-card-content-padding, var(--space-m)));
}
.card--has-footer .card__content {
  padding-bottom: var(--space-m);
}
.card--has-footer.card--no-padding .card__content {
  padding-bottom: var(--card-has-footer-card-no-padding-card-content-padding, var(--int-card-has-footer-card-no-padding-card-content-padding, var(--space-m)));
}
.card--has-header.card--has-footer .card__content {
  padding: var(--space-m);
}.alert__container {
  display: flex;
  gap: var(--alert-container-gap, var(--int-alert-container-gap, var(--space-m)));
  align-items: flex-start;
}
.alert__icon {
  font-size: var(--alert-icon-size, var(--int-alert-icon-size, calc(var(--space) * 1.5)));
  color: var(--alert-icon-color);
  flex-shrink: 0;
}
.alert__content {
  flex: 1;
  min-width: 0;
}
.alert__title {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs) 0;
  color: var(--alert-color);
}
.alert__description {
  font-size: var(--font-size-m);
  line-height: 1.5;
  color: var(--alert-color);
}
.alert__dismiss {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--alert-color);
  opacity: var(--alert-dismiss-opacity, var(--int-alert-dismiss-opacity, 0.7));
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}
.alert__dismiss:hover {
  opacity: 1;
}
.alert__dismiss .icon {
  font-size: var(--alert-dismiss-icon-size, var(--int-alert-dismiss-icon-size, calc(var(--space) * 1.25)));
}.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--avatar-border-radius, var(--int-avatar-border-radius, 50%));
  background: var(--avatar-background, var(--int-avatar-background, var(--color-primary)));
  color: var(--avatar-color, var(--int-avatar-color, white));
  font-weight: var(--avatar-font-weight, var(--int-avatar-font-weight, var(--font-weight-semibold)));
  overflow: hidden;
}
.avatar--small {
  width: var(--avatar-small-size, var(--int-avatar-small-size, var(--space)));
  height: var(--avatar-small-size, var(--int-avatar-small-size, var(--space)));
  font-size: var(--font-size-xs);
}
.avatar--medium {
  width: var(--avatar-medium-size, var(--int-avatar-medium-size, var(--space-l)));
  height: var(--avatar-medium-size, var(--int-avatar-medium-size, var(--space-l)));
  font-size: var(--font-size-s);
}
.avatar--large {
  width: var(--avatar-large-size, var(--int-avatar-large-size, var(--space-xl)));
  height: var(--avatar-large-size, var(--int-avatar-large-size, var(--space-xl)));
  font-size: var(--font-size-m);
}
.avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar__initials {
  display: flex;
  align-items: center;
  justify-content: center;
}.carousel {
  position: relative;
  width: 100%;
  --carousel-nav-size: 2.5em;
  --carousel-indicator-size: 0.5em;
}
.carousel__viewport {
  overflow: hidden;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__viewport::-webkit-scrollbar {
  display: none;
}
.carousel--horizontal .carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}
.carousel--vertical .carousel__viewport {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  height: var(--carousel-height, auto);
}
.carousel__track {
  display: flex;
  gap: var(--carousel-gap);
}
.carousel__track > * {
  flex: 0 0 calc(var(--carousel-item-width) - var(--carousel-gap) + var(--carousel-gap) / var(--carousel-items-count, 1));
  scroll-snap-align: var(--carousel-snap-align, start);
  scroll-snap-stop: always;
  min-width: 0;
}
.carousel--horizontal .carousel__track {
  flex-direction: row;
}
.carousel--vertical .carousel__track {
  flex-direction: column;
}
.carousel--vertical .carousel__track > * {
  flex: 0 0 auto;
}
.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: var(--carousel-nav-size);
  height: var(--carousel-nav-size);
  border-radius: var(--border-radius-round);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 85%);
  background: color-mix(in srgb, var(--color-background), transparent 10%);
  color: var(--color-foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.carousel__nav:hover {
  background: color-mix(in srgb, var(--color-foreground), transparent 90%);
  border-color: var(--color-foreground);
}
.carousel__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.carousel__nav--prev {
  left: var(--space-s);
}
.carousel__nav--next {
  right: var(--space-s);
}
.carousel--vertical .carousel__nav {
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
}
.carousel--vertical .carousel__nav.carousel__nav--prev {
  top: var(--space-s);
  left: 50%;
}
.carousel--vertical .carousel__nav.carousel__nav--next {
  bottom: var(--space-s);
  top: auto;
}
.carousel--outside {
  padding-inline: calc(var(--carousel-nav-size) + var(--space-s));
}
.carousel--outside .carousel__nav--prev {
  left: 0;
}
.carousel--outside .carousel__nav--next {
  right: 0;
}
.carousel--inside .carousel__nav--prev {
  left: var(--space-s);
}
.carousel--inside .carousel__nav--next {
  right: var(--space-s);
}
.carousel--overlay .carousel__nav {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.carousel--overlay:hover .carousel__nav, .carousel--overlay:focus-within .carousel__nav {
  opacity: 1;
}
.carousel__indicators {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-s) 0;
}
.carousel__indicator {
  width: var(--carousel-indicator-size);
  height: var(--carousel-indicator-size);
  border-radius: var(--border-radius-round);
  border: none;
  background: color-mix(in srgb, var(--color-foreground), transparent 70%);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}
.carousel__indicator:hover {
  background: color-mix(in srgb, var(--color-foreground), transparent 50%);
}
.carousel__indicator--active {
  background: var(--color-foreground);
  transform: scale(1.3);
}
.carousel--inside .carousel__indicators {
  position: absolute;
  bottom: var(--space-s);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0;
}
.carousel--outside .carousel__indicators {
  padding: var(--space-s) 0;
}
.carousel--vertical .carousel__indicators {
  position: absolute;
  flex-direction: column;
  right: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  left: auto;
  padding: 0;
}
.carousel:not(.carousel--has-prev):not(.carousel--has-next) .carousel__nav {
  display: none;
}
.carousel:not(.carousel--has-prev) .carousel__nav--prev {
  display: none;
}
.carousel:not(.carousel--has-next) .carousel__nav--next {
  display: none;
}.collapsible {
  display: grid;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  border-radius: calc(var(--border-radius, 1rem) * 0.9);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-background), var(--color-foreground) 1%) 0%, color-mix(in srgb, var(--color-background), var(--color-primary) 1.5%) 100%);
  overflow: clip;
}
.collapsible__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.collapsible__header:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary), transparent 94%);
}
.collapsible__header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.collapsible__header:disabled {
  cursor: not-allowed;
}
.collapsible__header-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.collapsible__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, currentColor, transparent 12%);
  flex-shrink: 0;
}
.collapsible__copy {
  min-width: 0;
  font-size: var(--font-size-s);
  font-weight: 600;
  line-height: 1.35;
}
.collapsible__indicator {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: color-mix(in srgb, currentColor, transparent 20%);
  transition: transform 160ms ease, opacity 160ms ease;
}
.collapsible__indicator::before, .collapsible__indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform-origin: center;
  transition: transform 160ms ease, opacity 160ms ease;
}
.collapsible__indicator--chevron::before {
  width: 0.5rem;
  height: 0.5rem;
  background: transparent;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-60%, -50%) rotate(-45deg);
}
.collapsible__indicator--chevron::after {
  display: none;
}
.collapsible__indicator--plus::before {
  width: 0.75rem;
  height: 2px;
  transform: translate(-50%, -50%);
}
.collapsible__indicator--plus::after {
  width: 2px;
  height: 0.75rem;
  transform: translate(-50%, -50%);
}
.collapsible__indicator--open.collapsible__indicator--chevron::before {
  transform: translate(-50%, -62%) rotate(45deg);
}
.collapsible__indicator--open.collapsible__indicator--plus::after {
  opacity: 0;
}
.collapsible__content {
  padding: 0 1rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground), transparent 92%);
}
.collapsible--open .collapsible__header {
  background: color-mix(in srgb, var(--color-primary), transparent 96%);
}
.collapsible--disabled {
  opacity: 0.6;
}.container {
  width: 100%;
  max-width: var(--int-container-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.container--fluid {
  max-width: 100%;
}
.container__header {
  padding: var(--int-container-padding);
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-l);
  row-gap: var(--space);
  background-image: linear-gradient(to left bottom, color-mix(in srgb, var(--color-secondary), transparent 90%), transparent 50%);
  position: relative;
}
.container__header--no-padding {
  padding: 0;
}
.container__header-left {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex: 1;
  min-width: 0;
}
.container__header-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  flex: 1;
}
.container__header-right {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-shrink: 0;
  justify-self: end;
  align-self: start;
  max-width: 100%;
}
.container__back-button, .container__next-button {
  position: absolute;
  top: var(--space-l);
  flex-shrink: 0;
}
.container__back-button {
  left: var(--space-l);
}
.container__next-button {
  right: var(--space-l);
}
.container__header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.container__header-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}
.container__title {
  margin: 0;
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.container__subtitle {
  margin: 0;
  font-size: var(--font-size);
  color: var(--color-text-secondary);
  opacity: 0.5;
  max-width: 48rem;
}
.container__header-actions {
  flex-shrink: 0;
  flex-wrap: wrap;
}
.container__content {
  flex: 1;
  padding: var(--int-container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space);
}
.container__content--no-padding {
  padding: 0;
}
.container__footer {
  padding: var(--int-container-padding);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
}
.container__footer--no-padding {
  padding: 0;
}
.container__footer-actions {
  width: 100%;
}
@media (max-width: 768px) {
.container__header {
    grid-template-columns: 1fr;
}
.container__header-right {
    width: 100%;
    justify-self: stretch;
}
.container__header-actions {
    justify-content: flex-start;
}
}.draggable {
  display: flex;
  flex-direction: column;
}
.draggable__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  cursor: default;
  user-select: none;
}
.draggable__item--dragging {
  opacity: 0.35;
}
.draggable__item--drop-before::before, .draggable__item--drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  pointer-events: none;
}
.draggable__item--drop-before::before {
  top: -1px;
}
.draggable__item--drop-after::after {
  bottom: -1px;
}
.draggable__handle {
  display: flex;
  align-items: center;
  color: color-mix(in srgb, var(--color-foreground), transparent 65%);
  cursor: grab;
  flex-shrink: 0;
  padding: var(--space-xs) 0;
}
.draggable__handle:active {
  cursor: grabbing;
}
.draggable__handle .icon {
  width: 1rem;
  height: 1rem;
}.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--space) * 4);
  gap: var(--space-m);
}
.empty-state__icon {
  font-size: var(--empty-state-icon-icon-size, var(--int-empty-state-icon-icon-size, calc(var(--space) * 3)));
  color: var(--color-tertiary);
  background-color: color-mix(in srgb, var(--color-tertiary), transparent 80%);
  border-radius: var(--border-radius-xs);
}
.empty-state__title {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  margin: 0;
}
.empty-state__description {
  font-size: var(--font-size-m);
  color: var(--color-gray);
  margin: 0;
  max-width: var(--empty-state-description-description-max-width, var(--int-empty-state-description-description-max-width, 400px));
  line-height: var(--empty-state-description-line-height, var(--int-empty-state-description-line-height, 1.5));
}
.empty-state__actions {
  display: flex;
  gap: var(--space-m);
  flex-wrap: wrap;
  justify-content: center;
}.ui-field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 0.4);
}
.ui-field__label {
  font-size: calc(var(--font-size) * 0.9);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--ui-field-label-label-letter-spacing, var(--int-ui-field-label-label-letter-spacing, 0.05em));
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-foreground), transparent 44%);
}
.ui-field__required {
  color: var(--color-error);
  margin-inline-start: var(--space-xs);
}
.ui-field__control {
  display: flex;
  flex-direction: column;
}
.ui-field__value {
  color: var(--color-foreground);
}
.ui-field__hint {
  font-size: calc(var(--font-size) * 0.9);
  color: color-mix(in srgb, var(--color-foreground), transparent 52%);
}
.ui-field__error {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-error);
}
.ui-field--is-disabled {
  opacity: 0.5;
  pointer-events: none;
}.form {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  width: 100%;
}
.form--disabled {
  opacity: 0.6;
  pointer-events: none;
}
.form--loading {
  position: relative;
}
.form--loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--color-background), transparent 30%);
  display: flex;
  align-items: center;
  justify-content: center;
}.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.form-field__main {
  display: flex;
  flex-direction: var(--form-field-direction, column);
  align-items: var(--form-field-align, center);
  gap: var(--form-field-gap, var(--space-xs));
}
.form-field__label {
  font-weight: var(--form-field-label-label-font-weight, var(--int-form-field-label-label-font-weight, 500));
  color: var(--color-foreground);
  font-size: var(--form-field-label-label-font-size, var(--int-form-field-label-label-font-size, var(--font-size-s)));
  width: var(--form-field-label-width, auto);
  flex-shrink: 0;
}
.form-field__required {
  color: var(--color-error);
  margin-left: var(--form-field-required-required-margin-left, var(--int-form-field-required-required-margin-left, var(--space-xs)));
}
.form-field__input {
  width: 100%;
  min-width: 0;
}
.form-field__info {
  font-size: var(--form-field-info-info-font-size, var(--int-form-field-info-info-font-size, var(--font-size-s)));
  line-height: var(--form-field-info-info-line-height, var(--int-form-field-info-info-line-height, 1.4));
}
.form-field__error {
  color: var(--color-error);
  margin: 0;
}
.form-field__description {
  color: var(--color-text-secondary);
  margin: 0;
}
.form-field--error .form-field__label {
  color: var(--color-error);
}
.form-field--row .form-field__label {
  line-height: 1;
}
.form-field--disabled {
  opacity: 0.6;
  pointer-events: none;
}.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--form-group-gap, var(--space));
  padding: var(--form-group-padding, 0);
  border: 1px solid transparent;
  border-radius: var(--form-group-border-radius, var(--border-radius));
  background: transparent;
}
.form-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
}
.form-group__header--clickable {
  cursor: pointer;
}
.form-group__label {
  margin: 0;
  font-size: var(--form-group-label-label-font-size, var(--int-form-group-label-label-font-size, calc(var(--font-size) * 1.125)));
  font-weight: var(--form-group-label-label-font-weight, var(--int-form-group-label-label-font-weight, 600));
  color: var(--color-foreground);
}
.form-group__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--form-group-toggle-toggle-size, var(--int-form-group-toggle-toggle-size, var(--space-l)));
  height: var(--form-group-toggle-toggle-size, var(--int-form-group-toggle-toggle-size, var(--space-l)));
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--border-radius-s);
  transition: all 0.2s ease;
}
.form-group__toggle:hover {
  background: var(--color-background-hover);
  color: var(--color-foreground);
}
.form-group__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.form-group__description {
  margin: 0;
  font-size: var(--form-group-description-description-font-size, var(--int-form-group-description-description-font-size, var(--font-size-s)));
  color: var(--color-text-secondary);
  line-height: var(--form-group-description-description-line-height, var(--int-form-group-description-description-line-height, 1.5));
}
.form-group__content {
  display: flex;
  flex-direction: var(--form-group-direction, column);
  flex-wrap: var(--form-group-wrap, nowrap);
  align-items: var(--form-group-align, stretch);
  justify-content: var(--form-group-justify, flex-start);
  gap: var(--form-group-gap, var(--space));
}
.form-group--bordered {
  border-color: var(--form-group-border, var(--color-accent));
  background: var(--form-group-background, var(--color-background));
}
.form-group--collapsible .form-group__header {
  cursor: pointer;
}
.form-group--collapsible .form-group__header:hover .form-group__toggle {
  background: var(--color-background-hover);
}
.form-group--collapsed .form-group__content {
  display: none;
}.input-base {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-base__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-base__status--success {
  color: var(--color-success);
}
.input-base__status--error {
  color: var(--color-error);
}
.input-base__status .icon {
  --icon-fill: transparent;
}
.input-base__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-base__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-base__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-base--small {
  --sizing: 0.75;
}
.input-base--medium {
  --sizing: 1;
}
.input-base--large {
  --sizing: 1.25;
}
.input-base--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-base--inline .input-base__label {
  width: var(--input-label-width, 30%);
}
.input-base--inline .input-base__label + .input-base__control-container, .input-base--inline .input-base__label + .input-base__controls {
  margin: 0;
}
.input-base__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-base__control:focus {
  outline: none;
}
.input-base__control::placeholder {
  opacity: 0.5;
}
.input-base__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-base--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-base--no-controls input[type=number]::-webkit-outer-spin-button, .input-base--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-base__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-base__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-base__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-base__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-base__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-base__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-base__control-container:hover .input-base__reset, .input-base__controls:hover .input-base__reset {
  opacity: 1;
}
.input-base__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-base__label + [class*=control-container], .input-base__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-base__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-base__control-container {
  position: relative;
}
.input-base.has-error .input-base__control {
  border-color: var(--color-error);
}.input-text {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-text__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-text__status--success {
  color: var(--color-success);
}
.input-text__status--error {
  color: var(--color-error);
}
.input-text__status .icon {
  --icon-fill: transparent;
}
.input-text__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-text__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-text__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-text--small {
  --sizing: 0.75;
}
.input-text--medium {
  --sizing: 1;
}
.input-text--large {
  --sizing: 1.25;
}
.input-text--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-text--inline .input-text__label {
  width: var(--input-label-width, 30%);
}
.input-text--inline .input-text__label + .input-text__control-container, .input-text--inline .input-text__label + .input-text__controls {
  margin: 0;
}
.input-text__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-text__control:focus {
  outline: none;
}
.input-text__control::placeholder {
  opacity: 0.5;
}
.input-text__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-text--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-text--no-controls input[type=number]::-webkit-outer-spin-button, .input-text--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-text__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-text__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-text__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-text__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-text__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-text__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-text__control-container:hover .input-text__reset, .input-text__controls:hover .input-text__reset {
  opacity: 1;
}
.input-text__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-text__label + [class*=control-container], .input-text__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-text__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}.input-email {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-email__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-email__status--success {
  color: var(--color-success);
}
.input-email__status--error {
  color: var(--color-error);
}
.input-email__status .icon {
  --icon-fill: transparent;
}
.input-email__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-email__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-email__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-email--small {
  --sizing: 0.75;
}
.input-email--medium {
  --sizing: 1;
}
.input-email--large {
  --sizing: 1.25;
}
.input-email--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-email--inline .input-email__label {
  width: var(--input-label-width, 30%);
}
.input-email--inline .input-email__label + .input-email__control-container, .input-email--inline .input-email__label + .input-email__controls {
  margin: 0;
}
.input-email__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-email__control:focus {
  outline: none;
}
.input-email__control::placeholder {
  opacity: 0.5;
}
.input-email__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-email--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-email--no-controls input[type=number]::-webkit-outer-spin-button, .input-email--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-email__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-email__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-email__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-email__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-email__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-email__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-email__control-container:hover .input-email__reset, .input-email__controls:hover .input-email__reset {
  opacity: 1;
}
.input-email__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-email__label + [class*=control-container], .input-email__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-email__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}.input-password {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-password__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-password__status--success {
  color: var(--color-success);
}
.input-password__status--error {
  color: var(--color-error);
}
.input-password__status .icon {
  --icon-fill: transparent;
}
.input-password__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-password__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-password__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-password--small {
  --sizing: 0.75;
}
.input-password--medium {
  --sizing: 1;
}
.input-password--large {
  --sizing: 1.25;
}
.input-password--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-password--inline .input-password__label {
  width: var(--input-label-width, 30%);
}
.input-password--inline .input-password__label + .input-password__control-container, .input-password--inline .input-password__label + .input-password__controls {
  margin: 0;
}
.input-password__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-password__control:focus {
  outline: none;
}
.input-password__control::placeholder {
  opacity: 0.5;
}
.input-password__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-password--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-password--no-controls input[type=number]::-webkit-outer-spin-button, .input-password--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-password__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-password__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-password__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-password__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-password__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-password__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-password__control-container:hover .input-password__reset, .input-password__controls:hover .input-password__reset {
  opacity: 1;
}
.input-password__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-password__label + [class*=control-container], .input-password__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-password__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-password__wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.input-password__control {
  width: 100%;
  padding-right: var(--input-password-control-control-padding-right, var(--int-input-password-control-control-padding-right, calc(var(--space) * 2.5)));
}
.input-password__toggle {
  position: absolute;
  right: var(--input-password-toggle-toggle-right, var(--int-input-password-toggle-toggle-right, var(--space-s)));
  z-index: 4;
  background: none;
  border: none;
  padding: var(--input-password-toggle-toggle-padding, var(--int-input-password-toggle-toggle-padding, var(--space-xs)));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}
.input-password__toggle:hover {
  color: var(--color-text);
}
.input-password__toggle:focus {
  outline: none;
  color: var(--color-primary);
}.input-number {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-number__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-number__status--success {
  color: var(--color-success);
}
.input-number__status--error {
  color: var(--color-error);
}
.input-number__status .icon {
  --icon-fill: transparent;
}
.input-number__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-number__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-number__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-number--small {
  --sizing: 0.75;
}
.input-number--medium {
  --sizing: 1;
}
.input-number--large {
  --sizing: 1.25;
}
.input-number--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-number--inline .input-number__label {
  width: var(--input-label-width, 30%);
}
.input-number--inline .input-number__label + .input-number__control-container, .input-number--inline .input-number__label + .input-number__controls {
  margin: 0;
}
.input-number__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-number__control:focus {
  outline: none;
}
.input-number__control::placeholder {
  opacity: 0.5;
}
.input-number__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-number--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-number--no-controls input[type=number]::-webkit-outer-spin-button, .input-number--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-number__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-number__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-number__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-number__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-number__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-number__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-number__control-container:hover .input-number__reset, .input-number__controls:hover .input-number__reset {
  opacity: 1;
}
.input-number__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-number__label + [class*=control-container], .input-number__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-number__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-number--no-controls input {
  appearance: none;
}.input-textarea {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-textarea__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-textarea__status--success {
  color: var(--color-success);
}
.input-textarea__status--error {
  color: var(--color-error);
}
.input-textarea__status .icon {
  --icon-fill: transparent;
}
.input-textarea__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-textarea__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-textarea__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-textarea--small {
  --sizing: 0.75;
}
.input-textarea--medium {
  --sizing: 1;
}
.input-textarea--large {
  --sizing: 1.25;
}
.input-textarea--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-textarea--inline .input-textarea__label {
  width: var(--input-label-width, 30%);
}
.input-textarea--inline .input-textarea__label + .input-textarea__control-container, .input-textarea--inline .input-textarea__label + .input-textarea__controls {
  margin: 0;
}
.input-textarea__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-textarea__control:focus {
  outline: none;
}
.input-textarea__control::placeholder {
  opacity: 0.5;
}
.input-textarea__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-textarea--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-textarea--no-controls input[type=number]::-webkit-outer-spin-button, .input-textarea--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-textarea__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-textarea__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-textarea__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-textarea__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-textarea__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-textarea__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-textarea__control-container:hover .input-textarea__reset, .input-textarea__controls:hover .input-textarea__reset {
  opacity: 1;
}
.input-textarea__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-textarea__label + [class*=control-container], .input-textarea__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-textarea__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-textarea__control {
  font-size: var(--input-textarea-control-control-font-size, var(--int-input-textarea-control-control-font-size, 1em));
  font-family: inherit;
  padding: var(--input-textarea-control-control-padding-y, var(--int-input-textarea-control-control-padding-y, 0.75em)) var(--input-textarea-control-control-padding-x, var(--int-input-textarea-control-control-padding-x, 1em));
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  resize: vertical;
}
.input-textarea__control.no-resize {
  resize: none;
}.input-custom-select {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-custom-select__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-custom-select__status--success {
  color: var(--color-success);
}
.input-custom-select__status--error {
  color: var(--color-error);
}
.input-custom-select__status .icon {
  --icon-fill: transparent;
}
.input-custom-select__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-custom-select__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-custom-select__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-custom-select--small {
  --sizing: 0.75;
}
.input-custom-select--medium {
  --sizing: 1;
}
.input-custom-select--large {
  --sizing: 1.25;
}
.input-custom-select--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-custom-select--inline .input-custom-select__label {
  width: var(--input-label-width, 30%);
}
.input-custom-select--inline .input-custom-select__label + .input-custom-select__control-container, .input-custom-select--inline .input-custom-select__label + .input-custom-select__controls {
  margin: 0;
}
.input-custom-select__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-custom-select__control:focus {
  outline: none;
}
.input-custom-select__control::placeholder {
  opacity: 0.5;
}
.input-custom-select__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-custom-select--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-custom-select--no-controls input[type=number]::-webkit-outer-spin-button, .input-custom-select--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-custom-select__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-custom-select__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-custom-select__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-custom-select__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-custom-select__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-custom-select__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-custom-select__control-container:hover .input-custom-select__reset, .input-custom-select__controls:hover .input-custom-select__reset {
  opacity: 1;
}
.input-custom-select__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-custom-select__label + [class*=control-container], .input-custom-select__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-custom-select__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-custom-select {
  position: relative;
  --input-custom-select-dropdown-gap: var(--space-xs);
  --input-custom-select-max-height: 300px;
  --input-custom-select-viewport-padding: var(--space-l);
  --input-custom-select-depth-padding: var(--space-m);
  --input-custom-select-search-icon-size: 20px;
}
.input-custom-select__wrapper {
  position: relative;
  width: 100%;
  z-index: 10;
  min-height: calc(var(--input-control-padding-y, 0.75em) * 2 + 1em);
  border-radius: var(--input-border-radius, var(--border-radius));
}
.input-custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: inherit;
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background: transparent;
  border: none;
  border-radius: inherit;
  cursor: pointer;
  transition: color var(--transition-fast);
}
[aria-disabled=true] .input-custom-select__trigger {
  opacity: 0.6;
  cursor: not-allowed;
}
.input-custom-select__value {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex: 1;
  min-width: 0;
}
.input-custom-select__placeholder {
  color: color-mix(in srgb, currentColor, transparent 50%);
}
.input-custom-select__arrow {
  font-size: var(--font-size-m);
  color: color-mix(in srgb, currentColor, transparent 32%);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.input-custom-select__arrow--open {
  transform: rotate(180deg);
}
.input-custom-select__dropdown {
  position: fixed;
  background: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 86%);
  border-radius: var(--input-border-radius, var(--border-radius));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--color-foreground), transparent 84%);
  z-index: 9999;
  max-height: var(--input-custom-select-max-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.input-custom-select__search {
  position: relative;
  padding: var(--space-s);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground), transparent 90%);
}
.input-custom-select__search-input {
  width: 100%;
  padding: var(--input-custom-select-search-input-search-padding-y, var(--int-input-custom-select-search-input-search-padding-y, calc(var(--space) * 0.8))) var(--input-custom-select-search-input-search-padding-x, var(--int-input-custom-select-search-input-search-padding-x, var(--space))) var(--input-custom-select-search-input-search-padding-y, var(--int-input-custom-select-search-input-search-padding-y, calc(var(--space) * 0.8))) var(--input-custom-select-search-input-search-left-icon-offset, var(--int-input-custom-select-search-input-search-left-icon-offset, calc(var(--space) * 2.7)));
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 3%);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 86%);
  border-radius: calc(var(--input-border-radius, var(--border-radius)) - 2px);
  font-size: var(--font-size-m);
  color: currentColor;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.input-custom-select__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary), transparent 88%);
  background: var(--color-background);
}
.input-custom-select__search-input::placeholder {
  color: color-mix(in srgb, currentColor, transparent 52%);
}
.input-custom-select__search-icon {
  position: absolute;
  left: var(--input-custom-select-search-icon-search-icon-left, var(--int-input-custom-select-search-icon-search-icon-left, calc(var(--space) * 1.45)));
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, currentColor, transparent 42%);
  pointer-events: none;
  font-size: var(--input-custom-select-search-icon-search-icon-font-size, var(--int-input-custom-select-search-icon-search-icon-font-size, var(--font-size)));
  z-index: 1;
}
.input-custom-select__options {
  overflow-y: auto;
  flex: 1;
}
.input-custom-select__option {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--input-custom-select-option-option-padding-y, var(--int-input-custom-select-option-option-padding-y, calc(var(--space) * 0.8))) var(--input-custom-select-option-option-padding-x, var(--int-input-custom-select-option-option-padding-x, var(--space)));
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.input-custom-select__option:hover {
  background-color: color-mix(in srgb, var(--color-primary), transparent 94%);
}
.input-custom-select__option--highlighted {
  background-color: color-mix(in srgb, var(--color-primary), transparent 92%);
  color: var(--color-primary);
}
.input-custom-select__option--selected {
  background-color: color-mix(in srgb, var(--color-primary), transparent 82%);
  color: var(--color-primary);
}
.input-custom-select__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.input-custom-select__option--null {
  font-style: italic;
  color: color-mix(in srgb, currentColor, transparent 48%);
}
.input-custom-select__option--custom {
  background-color: color-mix(in srgb, var(--color-primary), transparent 84%);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}
.input-custom-select__option-icon {
  font-size: var(--font-size-m);
}
.input-custom-select__option-color {
  width: var(--space-m);
  height: var(--space-m);
  border-radius: var(--border-radius-s);
  border: 1px solid var(--color-border);
}
.input-custom-select__option-content {
  flex: 1;
  min-width: 0;
}
.input-custom-select__option-label {
  flex: 1;
}
.input-custom-select__option-check {
  margin-left: auto;
  color: var(--color-primary);
  flex-shrink: 0;
}
.input-custom-select__no-results {
  padding: var(--space-l);
  text-align: center;
  color: color-mix(in srgb, currentColor, transparent 48%);
}.input-select {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-select__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-select__status--success {
  color: var(--color-success);
}
.input-select__status--error {
  color: var(--color-error);
}
.input-select__status .icon {
  --icon-fill: transparent;
}
.input-select__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-select__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-select__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-select--small {
  --sizing: 0.75;
}
.input-select--medium {
  --sizing: 1;
}
.input-select--large {
  --sizing: 1.25;
}
.input-select--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-select--inline .input-select__label {
  width: var(--input-label-width, 30%);
}
.input-select--inline .input-select__label + .input-select__control-container, .input-select--inline .input-select__label + .input-select__controls {
  margin: 0;
}
.input-select__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-select__control:focus {
  outline: none;
}
.input-select__control::placeholder {
  opacity: 0.5;
}
.input-select__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-select--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-select--no-controls input[type=number]::-webkit-outer-spin-button, .input-select--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-select__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-select__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-select__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-select__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-select__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-select__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-select__control-container:hover .input-select__reset, .input-select__controls:hover .input-select__reset {
  opacity: 1;
}
.input-select__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-select__label + [class*=control-container], .input-select__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-select__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-select__control {
  appearance: none;
  background-image: url('data:image/svg+xml,<svg id="chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><polyline points="13.95 27.23 36.23 49.5 58.5 27.23" style="fill: none; stroke: currentColor; stroke-linejoin: round; stroke-width:4" /></svg> ');
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 1em auto;
}
.input-select__control-container::after {
  width: 0.5em;
  height: 0.5em;
  border: 1px solid var(--color-primary);
  border-top-color: transparent;
  border-left-color: transparent;
  bottom: 1.125em;
  transform: rotate(45deg);
  z-index: 10;
  position: absolute;
  right: var(--space);
  display: block;
  content: "";
}
.input-select__control {
  appearance: none;
  background-image: url('data:image/svg+xml,<svg id="chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><polyline points="13.95 27.23 36.23 49.5 58.5 27.23" style="fill: none; stroke: currentColor; stroke-linejoin: round; stroke-width:4" /></svg> ');
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 1em auto;
}.input-checkbox {
  --input-checkbox-size: m.p('size', calc(var(--space) * 1.5));
  --input-checkbox-space: m.p('space', calc(var(--space-xs) * 0.7));
  --input-checkbox-dot-size: calc(var(--input-checkbox-size) - (var(--input-checkbox-space) * 2));
  gap: var(--space-s);
  display: flex;
}
.input-checkbox--small {
  --input-checkbox-size: m.p('size', calc(var(--space) * 1.2));
}
.input-checkbox--large {
  --input-checkbox-size: m.p('size', calc(var(--space) * 1.8));
}
.input-checkbox__control-container {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space) * 0.5);
  cursor: pointer;
}
.input-checkbox__control-container--disabled {
  cursor: not-allowed;
  opacity: var(--input-checkbox-control-container-disabled-disabled-opacity, var(--int-input-checkbox-control-container-disabled-disabled-opacity, 0.65));
}
.input-checkbox__label {
  font-size: var(--input-checkbox-label-label-font-size, var(--int-input-checkbox-label-label-font-size, 0.95em));
  line-height: var(--input-checkbox-label-label-line-height, var(--int-input-checkbox-label-label-line-height, 1.2));
}
.input-checkbox__label--left {
  order: -1;
}
.input-checkbox__control {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.input-checkbox__check-control {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--input-checkbox-size);
  height: var(--input-checkbox-size);
  padding: var(--input-checkbox-space);
  border-radius: calc(var(--border-radius) * 0.75);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 78%);
  background: var(--color-background);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.input-checkbox__control:focus-visible + .input-checkbox__check-control {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-checkbox-active-color), transparent 78%);
}
.input-checkbox__control-container--active .input-checkbox__check-control, .input-checkbox__control-container--indeterminate .input-checkbox__check-control {
  border-color: color-mix(in srgb, var(--input-checkbox-active-color), transparent 30%);
  background: color-mix(in srgb, var(--input-checkbox-active-color), transparent 90%);
}
.input-checkbox__check-control-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--input-checkbox-dot-size);
  height: var(--input-checkbox-dot-size);
  color: var(--input-checkbox-active-color);
  transition: transform 200ms ease, opacity 200ms ease, color 180ms ease;
}
.input-checkbox__indicator-dot, .input-checkbox__indicator-check, .input-checkbox__indicator-x {
  opacity: 0;
  transform: scale(0.4);
  transition: transform 200ms ease, opacity 200ms ease;
}
.input-checkbox__control-container--active .input-checkbox__indicator-dot, .input-checkbox__control-container--active .input-checkbox__indicator-check, .input-checkbox__control-container--active .input-checkbox__indicator-x, .input-checkbox__control-container--indeterminate .input-checkbox__indicator-dot {
  opacity: 1;
  transform: scale(1);
}
.input-checkbox__indicator-dot {
  width: var(--input-checkbox-indicator-dot-dot-size, var(--int-input-checkbox-indicator-dot-dot-size, calc(var(--space) * 0.72)));
  height: var(--input-checkbox-indicator-dot-dot-size, var(--int-input-checkbox-indicator-dot-dot-size, calc(var(--space) * 0.72)));
  border-radius: calc(var(--border-radius) * 0.45);
  background: currentColor;
}
.input-checkbox__indicator-check {
  width: 0.35rem;
  height: 0.62rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.06rem) rotate(45deg) scale(0.4);
}
.input-checkbox__control-container--active .input-checkbox__indicator-check {
  transform: translateY(-0.06rem) rotate(45deg) scale(1);
}
.input-checkbox__indicator-x {
  position: relative;
  width: var(--input-checkbox-indicator-x-dot-size, var(--int-input-checkbox-indicator-x-dot-size, calc(var(--space) * 0.72)));
  height: var(--input-checkbox-indicator-x-dot-size, var(--int-input-checkbox-indicator-x-dot-size, calc(var(--space) * 0.72)));
}
.input-checkbox__indicator-x-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--input-checkbox-indicator-x-line-dot-size, var(--int-input-checkbox-indicator-x-line-dot-size, calc(var(--space) * 0.72)));
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.input-checkbox__indicator-x-line:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.input-checkbox__indicator-x-line:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}.input-toggle {
  --input-toggle-height: m.p('height', calc(var(--space) * 1.5));
  --input-toggle-width: m.p('width', calc(var(--space) * 2.55));
  --input-toggle-padding: m.p('padding', calc(var(--space-xs) * 0.7));
  --input-toggle-thumb-size: calc(var(--input-toggle-height) - (var(--input-toggle-padding) * 2));
  --input-toggle-active-color: var(--color-primary);
  display: inline-flex;
  flex-direction: column;
  gap: var(--input-toggle-gap, var(--int-input-toggle-gap, var(--space-xs)));
}
.input-toggle--small {
  --input-toggle-height: m.p('height', calc(var(--space) * 1.25));
  --input-toggle-width: m.p('width', calc(var(--space) * 2.2));
}
.input-toggle--small .input-toggle__thumb-icon {
  display: none;
}
.input-toggle--large {
  --input-toggle-height: m.p('height', calc(var(--space) * 1.8));
  --input-toggle-width: m.p('width', calc(var(--space) * 3));
}
.input-toggle__wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--input-toggle-wrapper-wrapper-gap, var(--int-input-toggle-wrapper-wrapper-gap, var(--space-s)));
}
.input-toggle__label {
  font-size: var(--input-toggle-label-label-font-size, var(--int-input-toggle-label-label-font-size, 0.9em));
  cursor: pointer;
  user-select: none;
}
.input-toggle__description {
  font-size: var(--input-toggle-description-description-font-size, var(--int-input-toggle-description-description-font-size, 0.8em));
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
}
.input-toggle__errors {
  display: flex;
  flex-direction: column;
  gap: var(--input-toggle-errors-errors-gap, var(--int-input-toggle-errors-errors-gap, var(--space-xs)));
}
.input-toggle__error {
  font-size: var(--input-toggle-error-description-font-size, var(--int-input-toggle-error-description-font-size, 0.8em));
  color: var(--color-error);
}
.input-toggle__side {
  display: inline-flex;
  align-items: center;
  gap: var(--input-toggle-side-side-gap, var(--int-input-toggle-side-side-gap, calc(var(--space-xs) * 1.2)));
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--color-foreground), transparent 50%);
  font-size: var(--input-toggle-side-side-font-size, var(--int-input-toggle-side-side-font-size, calc(var(--font-size) * 0.85)));
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color 160ms ease;
}
.input-toggle__side:hover:not(.input-toggle__side--disabled) {
  color: var(--color-foreground);
}
.input-toggle__side--active {
  color: var(--input-toggle-active-color);
  font-weight: 700;
}
.input-toggle__side-icon {
  width: var(--input-toggle-side-icon-side-icon-size, var(--int-input-toggle-side-icon-side-icon-size, var(--space)));
  height: var(--input-toggle-side-icon-side-icon-size, var(--int-input-toggle-side-icon-side-icon-size, var(--space)));
}
.input-toggle__side-label {
  white-space: nowrap;
}
.input-toggle__control {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.input-toggle__control--disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.input-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.input-toggle__input:focus-visible + .input-toggle__track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-toggle-active-color), transparent 75%);
}
.input-toggle__input:checked + .input-toggle__track {
  background: color-mix(in srgb, var(--input-toggle-active-color), var(--color-background) 12%);
  border-color: color-mix(in srgb, var(--input-toggle-active-color), transparent 45%);
}
.input-toggle__input:checked + .input-toggle__track .input-toggle__thumb {
  transform: translateX(calc(var(--input-toggle-width) - var(--input-toggle-thumb-size) - var(--input-toggle-padding) * 2));
}
.input-toggle__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: var(--input-toggle-width);
  height: var(--input-toggle-height);
  padding: var(--input-toggle-padding);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 82%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-foreground), transparent 93%);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.input-toggle__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--input-toggle-thumb-size);
  height: var(--input-toggle-thumb-size);
  border-radius: 999px;
  background: var(--color-background);
  box-shadow: 0 0.12rem 0.5rem color-mix(in srgb, var(--color-foreground), transparent 84%);
  transition: transform 180ms ease;
}
.input-toggle__thumb-icon {
  width: calc(var(--input-toggle-thumb-size) * 0.6);
  height: calc(var(--input-toggle-thumb-size) * 0.6);
  color: var(--input-toggle-active-color);
}.input-switch {
  --input-switch-color: var(--color-primary);
}
.input-switch--small {
  --input-switch-item-padding: m.p('item-padding', calc(var(--space-xs) * 1.2) calc(var(--space-s) * 1.2));
}
.input-switch--large {
  --input-switch-item-padding: m.p('item-padding', calc(var(--space-s) * 1.2) calc(var(--space) * 1.1));
}
.input-switch__track {
  display: inline-flex;
  gap: var(--input-switch-track-track-gap, var(--int-input-switch-track-track-gap, 2px));
  padding: var(--input-switch-track-track-padding, var(--int-input-switch-track-track-padding, 3px));
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 86%);
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 3%);
}
.input-switch__item {
  display: inline-flex;
  align-items: center;
  gap: var(--input-switch-item-item-gap, var(--int-input-switch-item-item-gap, calc(var(--space-xs) * 1.5)));
  padding: var(--input-switch-item-padding, var(--input-switch-item-item-padding, var(--int-input-switch-item-item-padding, calc(var(--space-xs) * 1.75) calc(var(--space) * 0.85))));
  border: none;
  border-radius: var(--input-switch-item-radius, var(--input-switch-item-item-radius, var(--int-input-switch-item-item-radius, calc(var(--border-radius) * 0.7))));
  background: transparent;
  color: color-mix(in srgb, var(--color-foreground), transparent 30%);
  font-size: var(--input-switch-item-item-font-size, var(--int-input-switch-item-item-font-size, var(--font-size-s)));
  font-weight: var(--input-switch-item-item-font-weight, var(--int-input-switch-item-item-font-weight, 600));
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}
.input-switch__item:hover:not(.input-switch__item--disabled) {
  background: color-mix(in srgb, var(--color-foreground), transparent 95%);
  color: color-mix(in srgb, var(--color-foreground), transparent 10%);
}
.input-switch__item:focus-visible {
  outline: 2px solid var(--input-switch-color);
  outline-offset: -2px;
}
.input-switch__item--active {
  background: color-mix(in srgb, var(--input-switch-color), transparent 88%);
  color: var(--input-switch-color);
}
.input-switch__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.input-switch__item-icon {
  width: var(--input-switch-item-icon-icon-size, var(--int-input-switch-item-icon-icon-size, var(--space)));
  height: var(--input-switch-item-icon-icon-size, var(--int-input-switch-item-icon-icon-size, var(--space)));
}.input-radio {
  --input-radio-size: m.p('size', 1.25em);
  --input-radio-dot-size: m.p('dot-size', 0.75em);
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.input-radio__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-radio__status--success {
  color: var(--color-success);
}
.input-radio__status--error {
  color: var(--color-error);
}
.input-radio__status .icon {
  --icon-fill: transparent;
}
.input-radio__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-radio__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-radio__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-radio__control-container {
  position: relative;
  width: var(--input-radio-size);
  height: var(--input-radio-size);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  justify-content: row-reverse;
}
.input-radio:has(:checked) {
  --input-radio-dot-scale: 1;
  --input-radio-dot-color: var(--color-primary);
}
.input-radio__control {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.input-radio__control:disabled {
  cursor: not-allowed;
}
.input-radio__control:disabled + .input-radio__control-dot {
  opacity: 0.5;
}
.input-radio__control:hover ~ .input-radio__control-dot {
  opacity: 1;
  outline: 1px solid color-mix(in srgb, var(--color-primary), var(--color-background) 50%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary), var(--color-background) 80%);
}
[data-contrast-mode] .input-radio__control:hover ~ .input-radio__control-dot {
  outline: 2px solid color-mix(in srgb, var(--primar), var(--color-background) 50%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary), var(--color-background) 50%);
}
.input-radio__control-dot {
  width: var(--input-radio-size);
  height: var(--input-radio-size);
  border: 2px solid var(--1);
  border-radius: 50%;
  position: relative;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  background-color: var(--input-control-background, var(--color-background));
}
.input-radio__control-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--input-radio-dot-size);
  height: var(--input-radio-dot-size);
  background-color: var(--color-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--input-radio-dot-scale, 0));
  transition: transform 0.2s ease;
}
.input-radio__label {
  margin-left: var(--space-xs);
  font-size: var(--input-radio-label-label-font-size, var(--int-input-radio-label-label-font-size, var(--font-size-s)));
  cursor: pointer;
}.date-picker {
  background-color: var(--color-background);
  border-radius: var(--border-radius);
  padding: var(--space);
}
.date-picker__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) 0 var(--space-s);
  margin-bottom: var(--space-xs);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
}
.date-picker__month-label {
  font-weight: var(--date-picker-month-label-month-label-font-weight, var(--int-date-picker-month-label-month-label-font-weight, 600));
  font-size: var(--date-picker-month-label-month-label-font-size, var(--int-date-picker-month-label-month-label-font-size, 0.8em));
  text-align: center;
  padding-bottom: var(--space-xs);
  color: color-mix(in srgb, var(--color-foreground), transparent 30%);
}
.date-picker__grid {
  display: grid;
  gap: var(--space);
}
.date-picker--months-2 .date-picker__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space);
  border-collapse: collapse;
}
.date-picker--months-2 .date-picker__month + .date-picker__month {
  border-left: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  padding-left: var(--space);
}
.date-picker__month {
  display: contents;
}
.date-picker--months-2 .date-picker__month {
  display: flex;
  flex-direction: column;
}
.date-picker--months-1 .date-picker__month-label {
  display: none;
}
.date-picker__month-label {
  font-weight: var(--date-picker-month-label-month-label-font-weight, var(--int-date-picker-month-label-month-label-font-weight, 600));
  font-size: var(--date-picker-month-label-month-label-font-size, var(--int-date-picker-month-label-month-label-font-size, 0.8em));
  text-align: center;
  padding-bottom: var(--space-xs);
  color: color-mix(in srgb, var(--color-foreground), transparent 30%);
}
.date-picker__header-selectors {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.date-picker__selector-label {
  display: grid;
  gap: var(--date-picker-selector-label-selector-label-gap, var(--int-date-picker-selector-label-selector-label-gap, var(--space-xs)));
}
.date-picker__selector-caption {
  font-size: var(--date-picker-selector-caption-selector-caption-font-size, var(--int-date-picker-selector-caption-selector-caption-font-size, var(--font-size-xs)));
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
  padding-left: var(--date-picker-selector-caption-selector-caption-padding-left, var(--int-date-picker-selector-caption-selector-caption-padding-left, var(--space-xs)));
}
.date-picker__selector {
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 82%);
  background: color-mix(in srgb, var(--color-background), var(--color-primary) 2%);
  border-radius: calc(var(--border-radius) * 0.7);
  padding: var(--date-picker-selector-selector-padding-y, var(--int-date-picker-selector-selector-padding-y, var(--space-xs))) var(--date-picker-selector-selector-padding-x, var(--int-date-picker-selector-selector-padding-x, calc(var(--space-xs) * 1.75)));
  font-size: var(--date-picker-selector-selector-font-size, var(--int-date-picker-selector-selector-font-size, var(--font-size-s)));
  color: inherit;
  min-width: var(--date-picker-selector-selector-min-width, var(--int-date-picker-selector-selector-min-width, calc(var(--space) * 6.75)));
  cursor: pointer;
}
.date-picker__selector:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary), transparent 25%);
  outline-offset: 1px;
}
.date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  opacity: 0.4;
  font-size: var(--date-picker-weekdays-weekdays-font-size, var(--int-date-picker-weekdays-weekdays-font-size, 0.7em));
  font-weight: var(--date-picker-weekdays-weekdays-font-weight, var(--int-date-picker-weekdays-weekdays-font-weight, 600));
  margin-bottom: var(--space-xs);
}
.date-picker__weekday {
  padding: var(--space-xs);
}
.date-picker__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-xs);
}
.date-picker__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--border-radius);
  font-size: var(--font-size-s);
  transition: all var(--transition-duration) var(--transition-timing);
  opacity: 0.25;
  line-height: 2.5;
}
.date-picker__day:hover {
  background: color-mix(in srgb, var(--color-primary), transparent 90%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary), transparent 58%) inset;
  transform: scale(1.04);
}
.date-picker__day--unavailable {
  opacity: 0.1;
  pointer-events: none;
}
.date-picker__day--current-month {
  color: var(--color-text);
  opacity: 1;
}
.date-picker__day--today {
  box-shadow: 0 0 2px 0 color-mix(in srgb, var(--color-secondary), var(--color-background) 25%) inset;
}
.date-picker__day--selected {
  background-color: var(--color-primary);
  color: var(--color-background);
  font-weight: bold;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary), transparent 35%) inset;
}
.date-picker__day--in-range {
  background: color-mix(in srgb, var(--color-primary), transparent 86%);
  opacity: 1;
}
.date-picker__day--range-start, .date-picker__day--range-end {
  background-color: var(--color-primary);
  color: var(--color-background);
  font-weight: bold;
}
.date-picker__actions {
  margin-top: var(--space-s);
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}.date-picker-stub input[type=date] {
  width: 100%;
  padding: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
}.ui-popover {
  position: relative;
  display: inline-flex;
}
.ui-popover__panel {
  position: absolute;
  z-index: var(--ui-popover-panel-panel-z-index, var(--int-ui-popover-panel-panel-z-index, 30));
  background: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 86%);
  border-radius: var(--border-radius);
  box-shadow: var(--ui-popover-panel-panel-shadow, var(--int-ui-popover-panel-panel-shadow, 0 12px 32px color-mix(in srgb, var(--color-foreground), transparent 88%)));
  padding: var(--space-s);
  min-width: var(--ui-popover-panel-panel-min-width, var(--int-ui-popover-panel-panel-min-width, 180px));
}
.ui-popover__panel--bottom {
  top: calc(100% + var(--space-xs));
  left: 0;
}
.ui-popover__panel--top {
  bottom: calc(100% + var(--space-xs));
  left: 0;
}
.ui-popover__panel--left {
  right: calc(100% + var(--space-xs));
  top: 0;
}
.ui-popover__panel--right {
  left: calc(100% + var(--space-xs));
  top: 0;
}
.ui-popover__title {
  font-size: var(--font-size-s);
  font-weight: var(--ui-popover-title-title-font-weight, var(--int-ui-popover-title-title-font-weight, 600));
  margin-bottom: var(--space-xs);
}
.ui-popover__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.ui-popover--disabled {
  opacity: 0.6;
  pointer-events: none;
}.input-calendar {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-calendar__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-calendar__status--success {
  color: var(--color-success);
}
.input-calendar__status--error {
  color: var(--color-error);
}
.input-calendar__status .icon {
  --icon-fill: transparent;
}
.input-calendar__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-calendar__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-calendar__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-calendar--small {
  --sizing: 0.75;
}
.input-calendar--medium {
  --sizing: 1;
}
.input-calendar--large {
  --sizing: 1.25;
}
.input-calendar--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-calendar--inline .input-calendar__label {
  width: var(--input-label-width, 30%);
}
.input-calendar--inline .input-calendar__label + .input-calendar__control-container, .input-calendar--inline .input-calendar__label + .input-calendar__controls {
  margin: 0;
}
.input-calendar__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-calendar__control:focus {
  outline: none;
}
.input-calendar__control::placeholder {
  opacity: 0.5;
}
.input-calendar__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-calendar--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-calendar--no-controls input[type=number]::-webkit-outer-spin-button, .input-calendar--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-calendar__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-calendar__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-calendar__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-calendar__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-calendar__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-calendar__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-calendar__control-container:hover .input-calendar__reset, .input-calendar__controls:hover .input-calendar__reset {
  opacity: 1;
}
.input-calendar__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-calendar__label + [class*=control-container], .input-calendar__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-calendar__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-calendar__popover.ui-popover, .input-calendar__popover .ui-popover__trigger, .input-calendar__popover .ui-popover__trigger > * {
  width: 100%;
  display: block;
}
.input-calendar__trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.input-calendar__control {
  width: 100%;
  padding-right: calc(var(--space) * 2.7);
  cursor: pointer;
  text-overflow: ellipsis;
}
.input-calendar__calendar-button {
  position: absolute;
  right: calc(var(--space) * 0.45);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: color-mix(in srgb, var(--color-foreground), transparent 24%);
  padding: calc(var(--space) * 0.25);
  border-radius: 999px;
  transition: background 140ms ease, color 140ms ease;
}
.input-calendar__calendar-button:hover {
  color: currentColor;
  background: color-mix(in srgb, var(--color-foreground), transparent 92%);
}
.input-calendar__calendar-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.input-calendar__calendar-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}.input-color {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-color__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-color__status--success {
  color: var(--color-success);
}
.input-color__status--error {
  color: var(--color-error);
}
.input-color__status .icon {
  --icon-fill: transparent;
}
.input-color__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-color__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-color__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-color--small {
  --sizing: 0.75;
}
.input-color--medium {
  --sizing: 1;
}
.input-color--large {
  --sizing: 1.25;
}
.input-color--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-color--inline .input-color__label {
  width: var(--input-label-width, 30%);
}
.input-color--inline .input-color__label + .input-color__control-container, .input-color--inline .input-color__label + .input-color__controls {
  margin: 0;
}
.input-color__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-color__control:focus {
  outline: none;
}
.input-color__control::placeholder {
  opacity: 0.5;
}
.input-color__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-color--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-color--no-controls input[type=number]::-webkit-outer-spin-button, .input-color--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-color__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-color__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-color__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-color__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-color__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-color__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-color__control-container:hover .input-color__reset, .input-color__controls:hover .input-color__reset {
  opacity: 1;
}
.input-color__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-color__label + [class*=control-container], .input-color__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-color__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-color__control-color-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.input-color__control--color {
  padding: 0;
  aspect-ratio: 1/1;
  width: 1.5em;
  height: 1.5em;
  top: 50%;
  left: var(--space-s);
  border-radius: 50%;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.input-color__control--color::-webkit-color-swatch-wrapper {
  padding: 0;
}
.input-color__control--color::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}
.input-color__control--color::-moz-color-swatch, .input-color__control--color::-moz-focus-inner {
  border: 0;
}
.input-color__control--color::-moz-focus-inner {
  padding: 0;
}
.input-color__option-container {
  border-top: 1px solid var(--color-accent);
  position: relative;
  z-index: 2;
  padding: var(--space-s);
}
.input-color__option-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: calc(var(--space) / 2);
  flex-wrap: wrap;
}
.input-color__color {
  width: 1em;
  height: 1em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--color);
}.input-range {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-range__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-range__status--success {
  color: var(--color-success);
}
.input-range__status--error {
  color: var(--color-error);
}
.input-range__status .icon {
  --icon-fill: transparent;
}
.input-range__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-range__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-range__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-range--small {
  --sizing: 0.75;
}
.input-range--medium {
  --sizing: 1;
}
.input-range--large {
  --sizing: 1.25;
}
.input-range--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-range--inline .input-range__label {
  width: var(--input-label-width, 30%);
}
.input-range--inline .input-range__label + .input-range__control-container, .input-range--inline .input-range__label + .input-range__controls {
  margin: 0;
}
.input-range__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-range__control:focus {
  outline: none;
}
.input-range__control::placeholder {
  opacity: 0.5;
}
.input-range__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-range--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-range--no-controls input[type=number]::-webkit-outer-spin-button, .input-range--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-range__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-range__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-range__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-range__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-range__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-range__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-range__control-container:hover .input-range__reset, .input-range__controls:hover .input-range__reset {
  opacity: 1;
}
.input-range__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-range__label + [class*=control-container], .input-range__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-range__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-range__control-container {
  display: flex;
  align-items: center;
  gap: calc(var(--space) * var(--sizing));
  padding: calc(var(--space-s) * var(--sizing));
  margin-top: calc(var(--space-xs) * var(--sizing));
}
.input-range__control-container::before {
  display: none;
}
.input-range__control {
  padding: 0;
}
.input-range__track-wrapper {
  position: relative;
  flex: 1;
  height: calc(1.5em * var(--sizing));
  display: flex;
  align-items: center;
}
.input-range__track {
  position: absolute;
  width: 100%;
  height: calc(0.5em * var(--sizing));
  background: color-mix(in srgb, var(--color-foreground), var(--color-background) 85%);
  border-radius: calc(0.25em * var(--sizing));
  pointer-events: none;
}
.input-range__progress {
  position: absolute;
  height: calc(0.5em * var(--sizing));
  width: var(--progress-percent, 0%);
  background: var(--color-primary);
  border-radius: calc(0.25em * var(--sizing));
  pointer-events: none;
  transition: width 0.1s ease-out;
}
.input-range__control {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: calc(1.5em * var(--sizing));
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.input-range__control:focus {
  outline: none;
}
.input-range__control::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(1.5em * var(--sizing));
  height: calc(1.5em * var(--sizing));
  background: var(--color-primary);
  border: 2px solid var(--color-background);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary), var(--color-background) 50%), var(--drop-shadow);
  transition: all 0.2s ease;
}
.input-range__control::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.input-range__control::-webkit-slider-thumb:active {
  transform: scale(0.95);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary), var(--color-background) 80%), var(--drop-shadow);
}
.input-range__control::-moz-range-thumb {
  width: calc(1.5em * var(--sizing));
  height: calc(1.5em * var(--sizing));
  background: var(--color-primary);
  border: 2px solid var(--color-background);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary), var(--color-background) 50%), var(--drop-shadow);
  transition: all 0.2s ease;
}
.input-range__control::-moz-range-thumb:hover {
  transform: scale(1.1);
}
.input-range__control::-moz-range-thumb:active {
  transform: scale(0.95);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary), var(--color-background) 80%), var(--drop-shadow);
}
.input-range__control:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary), var(--color-background) 80%), var(--drop-shadow);
}
.input-range__control:focus::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary), var(--color-background) 80%), var(--drop-shadow);
}
.input-range__control::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
}
.input-range__control::-moz-range-track {
  background: transparent;
}
.input-range__value {
  min-width: calc(3em * var(--sizing));
  padding: calc(0.5em * var(--sizing)) calc(0.75em * var(--sizing));
  background: var(--color-accent);
  border-radius: calc(var(--border-radius) * 0.5);
  font-size: calc(0.875em * var(--sizing));
  font-weight: var(--input-range-value-value-font-weight, var(--int-input-range-value-value-font-weight, 600));
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.input-range__value--left {
  margin-right: calc(var(--space-xs) * var(--sizing));
}
.input-range__value--right {
  margin-left: calc(var(--space-xs) * var(--sizing));
}
.input-range__prefix, .input-range__suffix {
  opacity: 0.7;
  font-size: 0.875em;
}
.input-range--disabled {
  opacity: 0.5;
}
.input-range--disabled .input-range__control {
  cursor: not-allowed;
}
.input-range--disabled .input-range__control::-webkit-slider-thumb {
  cursor: not-allowed;
}
.input-range--disabled .input-range__control::-webkit-slider-thumb:hover, .input-range--disabled .input-range__control::-webkit-slider-thumb:active {
  transform: none;
}
.input-range--disabled .input-range__control::-moz-range-thumb {
  cursor: not-allowed;
}
.input-range--disabled .input-range__control::-moz-range-thumb:hover, .input-range--disabled .input-range__control::-moz-range-thumb:active {
  transform: none;
}
.input-range--readonly .input-range__control {
  cursor: default;
}
.input-range--readonly .input-range__control::-webkit-slider-thumb {
  cursor: default;
}
.input-range--readonly .input-range__control::-moz-range-thumb {
  cursor: default;
}
[data-contrast-mode] .input-range__track {
  outline: 2px solid var(--color-foreground);
}
[data-contrast-mode] .input-range__control::-webkit-slider-thumb, [data-contrast-mode] .input-range__control::-moz-range-thumb {
  border-width: 3px;
  outline: 2px solid var(--color-foreground);
}
.pin-input {
  position: relative;
  display: inline-block;
  cursor: text;
}
.pin-input__display {
  display: flex;
  gap: var(--space-s);
}
.pin-input__dot {
  width: var(--space-xl);
  height: var(--space-xl);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 75%);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--pin-input-dot-dot-font-size, var(--int-pin-input-dot-dot-font-size, 1.125em));
  font-weight: var(--pin-input-dot-dot-font-weight, var(--int-pin-input-dot-dot-font-weight, 600));
  transition: all 0.2s ease;
  background: var(--color-background);
  position: relative;
  overflow: hidden;
}
.pin-input__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pin-input__dot--filled {
  border-color: color-mix(in srgb, var(--color-foreground), transparent 50%);
}
.pin-input__dot--filled:not(:has(.pin-input__value))::before {
  content: "•";
  font-size: 1.5em;
  color: var(--color-foreground);
  position: relative;
  z-index: 1;
}
.pin-input__dot--active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 85%);
}
.pin-input__dot--error {
  border-color: var(--color-error);
}
.pin-input__dot--error.pin-input__dot--active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error), transparent 85%);
}
.pin-input__value {
  position: relative;
  z-index: 1;
  color: var(--color-foreground);
}
.pin-input__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: text;
  pointer-events: auto;
  border: none;
  outline: none;
  background: transparent;
}
.pin-input--small .pin-input__dot {
  width: var(--space-l);
  height: var(--space-l);
  font-size: var(--pin-input-small-pin-input-dot-dot-font-size, var(--int-pin-input-small-pin-input-dot-dot-font-size, 0.875em));
}
.pin-input--small .pin-input__dot--filled:not(:has(.pin-input__value))::before {
  font-size: 1.25em;
}
.pin-input--large .pin-input__dot {
  width: calc(var(--space-xl) * 1.33);
  height: calc(var(--space-xl) * 1.33);
  font-size: var(--pin-input-large-pin-input-dot-dot-font-size, var(--int-pin-input-large-pin-input-dot-dot-font-size, 1.25em));
}
.pin-input--large .pin-input__dot--filled:not(:has(.pin-input__value))::before {
  font-size: 2em;
}.form-config-field--section h4 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-m);
  font-weight: 600;
}
.form-config-field--section p {
  margin: 0;
  font-size: var(--font-size-s);
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
}
.form-config-field--divider {
  border: none;
  border-top: var(--border-width, 1px) solid var(--color-border, currentColor);
  margin: 0;
  opacity: 0.2;
}
.form-config-field__radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.form-config-field__radio-label {
  font-size: var(--font-size-s);
  font-weight: 500;
}
.form-config-field__radio-required {
  color: var(--color-error, red);
  margin-left: 2px;
}
.form-config-field__radio-error {
  font-size: var(--font-size-xs);
  color: var(--color-error, red);
}
.form-config-field__radio-hint {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
}.form-config-step-nav {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  overflow-x: auto;
}
.form-config-step-nav__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-xs, 0.5rem) * 0.5);
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}
.form-config-step-nav__step--active .form-config-step-nav__step-number {
  background-color: var(--color-primary, #3b82f6);
  color: var(--color-primary-foreground, #fff);
  border-color: var(--color-primary, #3b82f6);
}
.form-config-step-nav__step--active .form-config-step-nav__step-title {
  color: var(--color-primary, #3b82f6);
  font-weight: 600;
}
.form-config-step-nav__step--completed .form-config-step-nav__step-number {
  background-color: var(--color-primary, #3b82f6);
  color: var(--color-primary-foreground, #fff);
  border-color: var(--color-primary, #3b82f6);
  opacity: 0.7;
}
.form-config-step-nav__step--upcoming .form-config-step-nav__step-number {
  background-color: transparent;
  color: color-mix(in srgb, var(--color-foreground), transparent 50%);
  border-color: color-mix(in srgb, var(--color-foreground), transparent 70%);
}
.form-config-step-nav__step--upcoming .form-config-step-nav__step-title {
  color: color-mix(in srgb, var(--color-foreground), transparent 50%);
}
.form-config-step-nav__step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-s, 0.875rem);
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.form-config-step-nav__step-title {
  font-size: var(--font-size-xs, 0.75rem);
  white-space: nowrap;
  transition: color 0.2s;
}
.form-config-step-nav__connector {
  flex: 1;
  height: 2px;
  min-width: var(--space, 1rem);
  margin-bottom: 1.25rem;
  transition: background-color 0.2s;
}
.form-config-step-nav__connector--completed {
  background-color: var(--color-primary, #3b82f6);
  opacity: 0.7;
}
.form-config-step-nav__connector--upcoming {
  background-color: color-mix(in srgb, var(--color-foreground), transparent 80%);
}.form-config {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}
.form-config--loading {
  opacity: 0.7;
  pointer-events: none;
}
.form-config--disabled {
  opacity: 0.6;
  pointer-events: none;
}
.form-config__fields {
  display: grid;
  grid-template-columns: repeat(var(--form-config-columns, 1), 1fr);
  gap: var(--space);
}
.form-config__field-wrapper {
  grid-column: span min(var(--form-config-field-cols, 1), var(--form-config-columns, 1));
}
.form-config__actions {
  display: flex;
  gap: var(--space-s);
  justify-content: flex-end;
}
.form-config__step-header h3 {
  margin: 0;
}
.form-config__step-header p {
  margin: calc(var(--space-xs) * 0.5) 0 0;
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
  font-size: var(--font-size-s);
}.input {
  display: flex;
  flex-direction: column;
  gap: var(--input-gap, var(--int-input-gap, var(--space-s)));
}
.input__label {
  font-weight: var(--input-label-label-font-weight, var(--int-input-label-label-font-weight, 500));
  color: var(--text-primary);
  font-size: var(--input-label-label-font-size, var(--int-input-label-label-font-size, var(--font-size-s)));
}
.input__required {
  color: var(--color-error);
  margin-left: var(--input-required-required-margin, var(--int-input-required-required-margin, var(--space-xs)));
}
.input__wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.input__field {
  width: 100%;
  padding: var(--input-field-field-padding, var(--int-input-field-field-padding, calc(var(--space) * 0.75) var(--space)));
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: var(--input-field-field-font-size, var(--int-input-field-field-font-size, var(--font-size)));
  line-height: var(--input-field-line-height, var(--int-input-field-line-height, 1.5));
  transition: all 0.2s ease;
  background: var(--color-background);
  color: var(--input-field-color, var(--color-foreground));
}
.input__field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 90%);
}
.input__field::placeholder {
  color: var(--text-tertiary);
}
.input__field:disabled {
  background: var(--bg-tertiary);
  color: var(--input-field-disabled-color, var(--text-tertiary));
  cursor: not-allowed;
}
.input__field:readonly {
  background: var(--bg-secondary);
}
.input__icon {
  position: absolute;
  color: var(--text-secondary);
  pointer-events: none;
}
.input__icon--prefix {
  left: var(--input-icon-prefix-icon-offset, var(--int-input-icon-prefix-icon-offset, calc(var(--space) * 0.75)));
}
.input__icon--suffix {
  right: var(--input-icon-suffix-icon-offset, var(--int-input-icon-suffix-icon-offset, calc(var(--space) * 0.75)));
}
.input__spinners {
  position: absolute;
  right: var(--input-spinners-spinners-offset, var(--int-input-spinners-spinners-offset, var(--space-xs)));
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--border-primary);
}
.input__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--input-spinner-spinner-width, var(--int-input-spinner-spinner-width, calc(var(--space) * 1.5)));
  height: var(--input-spinner-spinner-height, var(--int-input-spinner-spinner-height, var(--space)));
  background: var(--bg-secondary);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.input__spinner:hover:not(:disabled) {
  background: var(--bg-tertiary);
}
.input__spinner:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.input__spinner--up {
  border-bottom: 1px solid var(--border-primary);
}
.input__description {
  font-size: var(--input-description-description-font-size, var(--int-input-description-description-font-size, var(--font-size-s)));
  line-height: var(--input-description-description-line-height, var(--int-input-description-description-line-height, 1.4));
  opacity: 0.5;
}
.input__error {
  color: var(--color-error);
}
.input__help {
  color: var(--text-secondary);
}
.input--small .input__field {
  padding: var(--input-small-input-field-padding, var(--int-input-small-input-field-padding, var(--space-s) calc(var(--space) * 0.75)));
  font-size: var(--input-small-input-field-font-size, var(--int-input-small-input-field-font-size, var(--font-size-s)));
}
.input--small .input__icon--prefix {
  left: var(--input-small-input-icon-prefix-icon-offset, var(--int-input-small-input-icon-prefix-icon-offset, var(--space-s)));
}
.input--small .input__icon--suffix {
  right: var(--input-small-input-icon-suffix-icon-offset, var(--int-input-small-input-icon-suffix-icon-offset, var(--space-s)));
}
.input--large .input__field {
  padding: var(--input-large-input-field-padding, var(--int-input-large-input-field-padding, var(--space) calc(var(--space) * 1.25)));
  font-size: var(--input-large-input-field-font-size, var(--int-input-large-input-field-font-size, calc(var(--font-size) * 1.125)));
}
.input--large .input__icon--prefix {
  left: var(--input-large-input-icon-prefix-icon-offset, var(--int-input-large-input-icon-prefix-icon-offset, var(--space)));
}
.input--large .input__icon--suffix {
  right: var(--input-large-input-icon-suffix-icon-offset, var(--int-input-large-input-icon-suffix-icon-offset, var(--space)));
}
.input--has-prefix .input__field {
  padding-left: var(--input-has-prefix-input-field-has-icon-padding, var(--int-input-has-prefix-input-field-has-icon-padding, calc(var(--space) * 2.5)));
}
.input--has-suffix:not(.input--has-spinners) .input__field {
  padding-right: calc(var(--space) * 2.5);
}
.input--has-spinners .input__field {
  padding-right: var(--input-has-spinners-input-field-has-icon-padding, var(--int-input-has-spinners-input-field-has-icon-padding, calc(var(--space) * 2.5)));
}
.input--error .input__field {
  border-color: var(--color-error);
}
.input--error .input__field:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error), transparent 90%);
}
.input--focused .input__icon {
  color: var(--color-primary);
}
@media (prefers-contrast: high) {
.input__field {
    border-width: 2px;
}
}
@media (prefers-reduced-motion: reduce) {
.input__field {
    transition: none;
}
}.confirm-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
  min-width: 320px;
  max-width: 500px;
  text-align: center;
}
.confirm-dialog__icon {
  color: var(--color-warning);
  font-size: 2em;
}
.confirm-dialog__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.confirm-dialog__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-foreground);
}
.confirm-dialog__message {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.confirm-dialog__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  width: 100%;
}
.confirm-dialog__cancel-button, .confirm-dialog__confirm-button {
  flex: 1;
  min-width: 100px;
}
@media (max-width: 768px) {
.confirm-dialog {
    min-width: auto;
    width: 100%;
}
.confirm-dialog__actions {
    flex-direction: column-reverse;
}
.confirm-dialog__cancel-button, .confirm-dialog__confirm-button {
    width: 100%;
}
}.progress-dialog {
  padding: var(--space-l);
  min-width: 300px;
}
.progress-dialog__content {
  text-align: center;
}
.progress-dialog__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-m);
  color: var(--color-foreground);
}
.progress-dialog__message {
  font-size: var(--font-size-m);
  color: var(--color-gray);
  margin-bottom: var(--space-l);
}
.progress-dialog__progress {
  width: 100%;
  height: 8px;
  background: var(--color-background-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-m);
}
.progress-dialog__progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.progress-dialog__percentage {
  font-size: var(--font-size-s);
  color: var(--color-gray);
}.input-dialog {
  padding: var(--space-l);
  min-width: 400px;
  max-width: 500px;
}
.input-dialog__title {
  margin: 0 0 var(--space-m) 0;
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-semibold);
}
.input-dialog__message {
  margin: 0 0 var(--space-m) 0;
  color: color-mix(in srgb, var(--color-foreground), transparent 20%);
}
.input-dialog__input {
  margin-bottom: var(--space-l);
  width: 100%;
}
.input-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
}.image-input-dialog {
  padding: var(--space-l);
  min-width: var(--image-input-dialog-min-width, var(--int-image-input-dialog-min-width, 360px));
  max-width: var(--image-input-dialog-max-width, var(--int-image-input-dialog-max-width, 480px));
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.image-input-dialog__preview {
  position: relative;
  height: var(--image-input-dialog-preview-preview-height, var(--int-image-input-dialog-preview-preview-height, 160px));
  border-radius: var(--border-radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-foreground), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 80%);
}
.image-input-dialog__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-input-dialog__preview-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-s);
  color: var(--color-error);
}
.image-input-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
}.image-input {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.image-input__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.image-input__status--success {
  color: var(--color-success);
}
.image-input__status--error {
  color: var(--color-error);
}
.image-input__status .icon {
  --icon-fill: transparent;
}
.image-input__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.image-input__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.image-input__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.image-input--small {
  --sizing: 0.75;
}
.image-input--medium {
  --sizing: 1;
}
.image-input--large {
  --sizing: 1.25;
}
.image-input--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.image-input--inline .image-input__label {
  width: var(--input-label-width, 30%);
}
.image-input--inline .image-input__label + .image-input__control-container, .image-input--inline .image-input__label + .image-input__controls {
  margin: 0;
}
.image-input__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.image-input__control:focus {
  outline: none;
}
.image-input__control::placeholder {
  opacity: 0.5;
}
.image-input__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.image-input--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.image-input--no-controls input[type=number]::-webkit-outer-spin-button, .image-input--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.image-input__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.image-input__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.image-input__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .image-input__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.image-input__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .image-input__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.image-input__control-container:hover .image-input__reset, .image-input__controls:hover .image-input__reset {
  opacity: 1;
}
.image-input__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.image-input__label + [class*=control-container], .image-input__label + [class*=controls] {
  margin-top: 0.5em;
}
.image-input__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.image-input__preview-container {
  cursor: pointer;
  border-radius: var(--border-radius);
  padding: var(--space);
  text-align: center;
  min-height: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background-color: var(--color-accent);
  border: 1px solid transparent;
}
.image-input__preview-container:hover {
  border: 1px dashed var(--color-foreground);
  border-color: var(--color-primary);
}
.image-input__preview-container--dragging {
  border-color: var(--color-secondary);
  background-color: var(--color-accent);
}
.image-input__preview {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--border-radius);
}
.image-input__placeholder {
  color: var(--color-foreground);
  display: flex;
  flex-direction: row;
  gap: var(--space-s);
  font-size: 0.75em;
  opacity: 0.5;
  align-items: center;
  justify-content: center;
}
.image-input__placeholder-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  height: fit-content;
}
.image-input__placeholder-icon {
  font-size: 4em;
  opacity: 0.5;
}
.image-input[disabled] .input-image__preview-container {
  cursor: not-allowed;
  opacity: 0.7;
}
.image-input__control-container {
  padding: var(--space-s);
  width: fit-content;
}
.image-input__preview {
  position: relative;
  width: var(--image-input-preview-preview-size, var(--int-image-input-preview-preview-size, 8em));
  height: var(--image-input-preview-preview-size, var(--int-image-input-preview-preview-size, 8em));
  border-radius: calc(var(--border-radius) / 2);
  overflow: hidden;
  border: 1px solid var(--color-accent);
  background-color: var(--current-color);
  cursor: pointer;
  transition: all 0.2s ease;
}
.image-input__preview:hover {
  border-color: var(--color-primary);
}
.image-input__preview:hover .image-input__actions {
  opacity: 1;
}
.image-input__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-input__preview--small {
  width: var(--image-input-preview-small-preview-size, var(--int-image-input-preview-small-preview-size, 3em));
  height: var(--image-input-preview-small-preview-size, var(--int-image-input-preview-small-preview-size, 3em));
  border-radius: 0.5em;
}
.image-input__preview--small .image-input__actions {
  top: var(--image-input-preview-small-image-input-actions-actions-top, var(--int-image-input-preview-small-image-input-actions-actions-top, 0.25em));
  right: var(--image-input-preview-small-image-input-actions-actions-right, var(--int-image-input-preview-small-image-input-actions-actions-right, 0.25em));
  gap: var(--image-input-preview-small-image-input-actions-actions-gap, var(--int-image-input-preview-small-image-input-actions-actions-gap, 0.125em));
}
.image-input__preview--small .image-input__actions .t-button {
  --button-size-small: 1.25em;
  --button-font-size-small: 0.625em;
}
.image-input__actions {
  position: absolute;
  top: var(--image-input-actions-actions-top, var(--int-image-input-actions-actions-top, var(--space-s)));
  right: var(--image-input-actions-actions-right, var(--int-image-input-actions-actions-right, var(--space-s)));
  display: flex;
  gap: var(--image-input-actions-actions-gap, var(--int-image-input-actions-actions-gap, var(--space-xs)));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.image-input__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--image-input-placeholder-placeholder-gap, var(--int-image-input-placeholder-placeholder-gap, var(--space-s)));
  padding: var(--image-input-placeholder-placeholder-padding, var(--int-image-input-placeholder-placeholder-padding, var(--space-l)));
  background: var(--color-background);
  border: 2px dashed var(--color-accent);
  border-radius: var(--image-input-placeholder-placeholder-border-radius, var(--int-image-input-placeholder-placeholder-border-radius, var(--border-radius)));
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  width: var(--image-input-placeholder-placeholder-size, var(--int-image-input-placeholder-placeholder-size, 150px));
  height: var(--image-input-placeholder-placeholder-size, var(--int-image-input-placeholder-placeholder-size, 150px));
}
.image-input__placeholder:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.image-input__placeholder--small {
  width: var(--image-input-placeholder-small-placeholder-size, var(--int-image-input-placeholder-small-placeholder-size, calc(var(--space) * 3)));
  height: var(--image-input-placeholder-small-placeholder-size, var(--int-image-input-placeholder-small-placeholder-size, calc(var(--space) * 3)));
  padding: var(--image-input-placeholder-small-placeholder-padding, var(--int-image-input-placeholder-small-placeholder-padding, var(--space-s)));
}
.image-input__placeholder--small span {
  display: none;
}
.image-input__placeholder span {
  font-size: var(--image-input-placeholder-span-placeholder-font-size, var(--int-image-input-placeholder-span-placeholder-font-size, var(--font-size-s)));
  text-align: center;
}.ui-tab-nav {
  --int-tab-navigation-border-radius: 999em;
  --int-tab-navigation-font-size: var(--tab-navigation-font-size, var(--font-size));
  --int-tab-navigation-icon-size: 1.25em;
  --int-tab-navigation-pills-button-padding-y: var(--space-s);
  --int-tab-navigation-pills-button-padding-x: var(--space);
  --int-tab-navigation-underline-padding-y: var(--space-m);
  --int-tab-navigation-underline-padding-x: var(--space-s);
  --tab-navigation-pills-padding: var(--space-xs);
  --tab-navigation-pills-background: color-mix(in srgb, var(--color-foreground), transparent 94%);
  --tab-navigation-pills-button-inactive-color: color-mix(in srgb, var(--color-foreground), transparent 35%);
  --tab-navigation-pills-button-active-color: var(--color-secondary-contrast);
  --tab-navigation-underline-inactive-color: color-mix(in srgb, var(--color-foreground), transparent 50%);
  --tab-navigation-underline-active-color: var(--color-foreground);
  --tab-navigation-underline-baseline-color: color-mix(in srgb, var(--color-foreground), transparent 84%);
  --tab-navigation-underline-indicator-height: 2px;
  --tab-navigation-underline-indicator-color: var(--color-primary);
  position: relative;
  display: inline-flex;
  width: fit-content;
  padding: var(--space-xs);
  gap: 0;
  border-radius: var(--int-tab-navigation-border-radius);
  background: color-mix(in srgb, var(--color-foreground), transparent 94%);
  isolation: isolate;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  scroll-snap-type: mandatory x proximity;
  margin: auto;
}
.ui-tab-nav--align-left {
  width: 100%;
  justify-content: flex-start;
}
.ui-tab-nav--align-center {
  width: 100%;
  justify-content: center;
}
.ui-tab-nav--align-right {
  width: 100%;
  justify-content: flex-end;
}
.ui-tab-nav--stretch {
  width: 100%;
}
.ui-tab-nav--stretch .ui-tab-nav__button {
  flex: 1 1 0;
}
.ui-tab-nav--vertical {
  display: flex;
  flex-direction: column;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.ui-tab-nav--vertical.ui-tab-nav--align-left {
  align-items: flex-start;
}
.ui-tab-nav--vertical.ui-tab-nav--align-center {
  align-items: center;
}
.ui-tab-nav--vertical.ui-tab-nav--align-right {
  align-items: flex-end;
}
.ui-tab-nav__indicator {
  position: absolute;
  left: 0;
  inset-block: var(--border-radius);
  z-index: 0;
  border-radius: var(--int-tab-navigation-border-radius);
  will-change: transform, width;
  transition: transform 260ms var(--cubic-bezier), width 260ms var(--cubic-bezier);
}
.ui-tab-nav__hover {
  position: absolute;
  left: 0;
  inset-block: var(--border-radius);
  z-index: 0;
  border-radius: var(--int-tab-navigation-border-radius);
  will-change: transform, width;
  transition: transform 260ms var(--cubic-bezier), width 260ms var(--cubic-bezier);
}
.ui-tab-nav__button {
  --int-tab-item-color: var(--color-foreground);
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space);
  border: 0;
  border-radius: var(--int-tab-navigation-border-radius);
  background: transparent;
  color: color-mix(in srgb, var(--color-foreground), transparent 35%);
  font-weight: var(--font-weight-medium);
  font-size: var(--int-tab-navigation-font-size);
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease;
}
@media screen and (max-width: 960px) {
.ui-tab-nav__button {
    flex-direction: column;
    padding: var(--space-s);
}
}
.ui-tab-nav__button:focus {
  outline: none;
}
.ui-tab-nav__button--active {
  color: var(--color-secondary-contrast);
}
.ui-tab-nav__button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-tab-nav--size-small {
  --int-tab-navigation-font-size: var(--font-size-sm);
  --int-tab-navigation-icon-size: 1em;
  --int-tab-navigation-pills-button-padding-y: var(--space-xs);
  --int-tab-navigation-pills-button-padding-x: var(--space-s);
  --int-tab-navigation-underline-padding-y: var(--space-s);
  --int-tab-navigation-underline-padding-x: var(--space-xs);
}
.ui-tab-nav--size-large {
  --int-tab-navigation-font-size: var(--font-size-lg);
  --int-tab-navigation-icon-size: 1.5em;
  --int-tab-navigation-pills-button-padding-y: var(--space-m);
  --int-tab-navigation-pills-button-padding-x: var(--space-l);
  --int-tab-navigation-underline-padding-y: var(--space-l);
  --int-tab-navigation-underline-padding-x: var(--space-m);
}
.ui-tab-nav--variant-pills {
  padding: var(--tab-navigation-pills-padding);
  border-radius: 999em;
  background: var(--tab-navigation-pills-background);
}
.ui-tab-nav--variant-pills .ui-tab-nav__button {
  padding: var(--int-tab-navigation-pills-button-padding-y) var(--int-tab-navigation-pills-button-padding-x);
  color: var(--tab-navigation-pills-button-inactive-color);
}
.ui-tab-nav--variant-pills .ui-tab-nav__button--active {
  color: var(--tab-navigation-pills-button-active-color);
}
.ui-tab-nav--variant-underline {
  padding: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
}
.ui-tab-nav--variant-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--tab-navigation-underline-baseline-color);
  pointer-events: none;
}
.ui-tab-nav--variant-underline .ui-tab-nav__button {
  padding: var(--int-tab-navigation-underline-padding-y) var(--int-tab-navigation-underline-padding-x);
  border-radius: 0;
  color: var(--tab-navigation-underline-inactive-color);
}
.ui-tab-nav--variant-underline .ui-tab-nav__button--active {
  color: var(--tab-navigation-underline-active-color);
}
.ui-tab-nav--variant-underline .ui-tab-nav__indicator {
  top: auto;
  bottom: 0;
  height: var(--tab-navigation-underline-indicator-height);
  border-radius: 999em;
}
.ui-tab-nav--variant-underline .ui-tab-nav__hover {
  display: none;
}
@media screen and (max-width: 960px) {
.ui-tab-nav__button-label {
    font-size: var(--font-size-xs);
}
}
.ui-tab-nav__button-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding-inline: 0.4rem;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor, transparent 86%);
  color: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}
.ui-tab-nav__button-icon {
  width: var(--int-tab-navigation-icon-size);
  height: var(--int-tab-navigation-icon-size);
  opacity: 0.33;
}
.ui-tab-nav--icon-only .ui-tab-nav__button-icon {
  opacity: 1;
}
.ui-tab-nav--icon-only .ui-tab-nav__button {
  aspect-ratio: 1;
  padding: var(--int-tab-navigation-pills-button-padding-y);
}
.ui-tab-nav--icon-only .ui-tab-nav__button-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-100%, 100%);
  min-width: 1em;
  height: 1em;
  padding-inline: 0.25em;
  font-size: var(--font-size-xs);
}
.ui-tab-nav--vertical .ui-tab-nav__button {
  border-radius: var(--border-radius);
}
.ui-tab-nav--vertical .ui-tab-nav__indicator {
  inset-block: auto;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
  transition: transform 260ms var(--cubic-bezier), height 260ms var(--cubic-bezier);
}
.ui-tab-nav--vertical .ui-tab-nav__hover {
  inset-block: auto;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
  transition: transform 260ms var(--cubic-bezier), height 260ms var(--cubic-bezier);
}
.ui-tab-nav--vertical.ui-tab-nav--variant-underline .ui-tab-nav__indicator {
  left: auto;
  right: 0;
  width: var(--tab-navigation-underline-indicator-height);
}.ui-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.ui-tabs--vertical {
  flex-direction: row;
  align-items: flex-start;
}
.ui-tabs__nav {
  width: fit-content;
}
.ui-tabs--sticky-navigation .ui-tabs__nav {
  background: var(--color-background);
  position: sticky;
  top: var(--ui-tabs-sticky-navigation-offset, 0);
  z-index: 1;
}
.ui-tabs--vertical .ui-tabs__nav {
  width: auto;
}
.ui-tabs--sticky-navigation:not(.ui-tabs--vertical) .ui-tabs__nav {
  width: 100%;
}
.ui-tabs__content {
  width: 100%;
}.color-chooser-slider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) var(--color-chooser-slider-input-column-width, var(--int-color-chooser-slider-input-column-width, calc(var(--space) * 5.5)));
  gap: var(--space-s);
  align-items: center;
}
.color-chooser-slider__label {
  min-width: var(--color-chooser-slider-label-label-min-width, var(--int-color-chooser-slider-label-label-min-width, calc(var(--space) * 1.2)));
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-foreground), transparent 38%);
  font-weight: var(--color-chooser-slider-label-label-font-weight, var(--int-color-chooser-slider-label-label-font-weight, 600));
}
.color-chooser-slider__track {
  position: relative;
  height: var(--space-l);
  border-radius: var(--border-radius);
  background: var(--color-chooser-slider-gradient);
  overflow: hidden;
}
.color-chooser-slider__input {
  appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.color-chooser-slider__input::-webkit-slider-thumb {
  appearance: none;
  width: var(--space);
  height: var(--space);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-foreground), transparent 70%);
  background: transparent;
}
.color-chooser-slider__input::-moz-range-thumb {
  width: calc(var(--space) * 0.9);
  height: calc(var(--space) * 0.9);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-foreground), transparent 70%);
  background: transparent;
}
.color-chooser-slider .input-number {
  width: 100%;
}.color-chooser {
  display: grid;
  gap: var(--space-xs);
}
.color-chooser__label {
  font-weight: 600;
  font-size: var(--font-size-s);
}
.color-chooser__description {
  color: color-mix(in srgb, var(--color-foreground), transparent 35%);
  font-size: var(--font-size-xs);
}
.color-chooser__surface {
  display: grid;
  gap: var(--space-s);
  border: 1px solid var(--color-chooser-surface-surface-border, var(--int-color-chooser-surface-surface-border, color-mix(in srgb, var(--color-foreground), transparent 85%)));
  border-radius: var(--color-chooser-surface-surface-radius, var(--int-color-chooser-surface-surface-radius, var(--border-radius)));
  background: var(--color-chooser-surface-surface-background, var(--int-color-chooser-surface-surface-background, var(--color-background)));
  padding: var(--space-s);
}
.color-chooser__picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
}
@media (min-width: 860px) {
.color-chooser__picker-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
}
}
.color-chooser__wheel-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: fit-content;
  height: fit-content;
}
.color-chooser__wheel-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
  background-image: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  background-size: 120% 120%;
  background-repeat: no-repeat;
  background-position: center;
}
.color-chooser__wheel-ring::after {
  content: "";
  position: absolute;
  inset: var(--color-chooser-ring-thickness, 18px);
  border-radius: 50%;
  background: var(--color-background);
  pointer-events: none;
}
.color-chooser__wheel-hue-marker {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-foreground), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}
.color-chooser__plane {
  position: relative;
  z-index: 2;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
  background: var(--color-chooser-plane-hue);
  overflow: hidden;
}
.color-chooser__plane-white, .color-chooser__plane-black {
  position: absolute;
  inset: 0;
}
.color-chooser__plane-white {
  background: linear-gradient(90deg, #ffffff, transparent);
}
.color-chooser__plane-black {
  background: linear-gradient(180deg, transparent, #000000);
}
.color-chooser__plane-marker {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-foreground), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.color-chooser__preview-col, .color-chooser__sliders, .color-chooser__fields {
  display: grid;
  gap: var(--space-s);
}
.color-chooser__preview {
  width: 100%;
  height: 2rem;
  border-radius: var(--border-radius-s);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 80%);
}
.color-chooser__field-inline {
  min-width: 0;
}
.color-chooser__field-group {
  width: 100%;
  gap: var(--space-xs);
}
.color-chooser__field-group :deep(.form-group__content) {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  align-items: center;
}
.color-chooser__field-group :deep(.form-field) {
  min-width: 0;
}
.color-chooser__mode-tabs {
  display: inline-flex;
  width: fit-content;
}
.color-chooser .input-number,
.color-chooser .input-text {
  width: 100%;
}
.color-chooser__complimentary {
  display: grid;
  gap: var(--space-xs);
}
.color-chooser__swatch-group {
  display: grid;
  gap: var(--space-xs);
}
.color-chooser__complimentary-label {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-foreground), transparent 38%);
}
.color-chooser__complimentary-list {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.color-chooser__complimentary-item {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 76%);
  cursor: pointer;
}
.color-chooser--disabled {
  opacity: 0.6;
  pointer-events: none;
}.color-picker {
  --color-size: calc(var(--color-picker-size, var(--int-color-picker-size, 2em)) * var(--sizing, 1));
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.color-picker__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.color-picker__status--success {
  color: var(--color-success);
}
.color-picker__status--error {
  color: var(--color-error);
}
.color-picker__status .icon {
  --icon-fill: transparent;
}
.color-picker__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.color-picker__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.color-picker__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.color-picker--small {
  --sizing: 0.75;
}
.color-picker--medium {
  --sizing: 1;
}
.color-picker--large {
  --sizing: 1.25;
}
.color-picker--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.color-picker--inline .color-picker__label {
  width: var(--input-label-width, 30%);
}
.color-picker--inline .color-picker__label + .color-picker__control-container, .color-picker--inline .color-picker__label + .color-picker__controls {
  margin: 0;
}
.color-picker__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.color-picker__control:focus {
  outline: none;
}
.color-picker__control::placeholder {
  opacity: 0.5;
}
.color-picker__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.color-picker--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.color-picker--no-controls input[type=number]::-webkit-outer-spin-button, .color-picker--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.color-picker__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.color-picker__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.color-picker__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .color-picker__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.color-picker__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .color-picker__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.color-picker__control-container:hover .color-picker__reset, .color-picker__controls:hover .color-picker__reset {
  opacity: 1;
}
.color-picker__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.color-picker__label + [class*=control-container], .color-picker__label + [class*=controls] {
  margin-top: 0.5em;
}
.color-picker__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.color-picker__control-container {
  padding: var(--space);
}
.color-picker--x-small {
  --color-scale: 0.66;
}
.color-picker--small {
  --color-scale: 0.75;
}
.color-picker--medium {
  --color-scale: 1;
}
.color-picker--large {
  --color-scale: 1.2;
}
.color-picker__grid {
  display: grid;
  grid-template-columns: repeat(var(--color-picker-columns, 6), var(--color-size));
  gap: var(--space-xs);
  max-width: 100%;
  width: fit-content;
}
.color-picker__control-container::before {
  display: block;
}
.color-picker__color {
  position: relative;
  width: var(--color-size);
  height: var(--color-size);
  border: 2px solid transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--color-gray);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--color-foreground), transparent 90%);
}
.color-picker__color:hover {
  transform: scale(1.1);
  border-color: var(--color-foreground);
}
.color-picker__color:hover .color-picker__color-delete {
  opacity: 1;
}
.color-picker__color--selected {
  border-color: var(--color-foreground);
  transform: scale(1.05);
}
.color-picker__color--selected:hover {
  transform: scale(1.1);
}
.color-picker__color-delete {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #000, transparent 40%);
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 1;
  color: #fff;
}
.color-picker__icon {
  font-size: 1em;
}
.color-picker__custom {
  margin-top: var(--space-xs);
}
.color-picker__custom-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--color-size);
  padding: 0 var(--space-xs);
  border: 2px solid color-mix(in srgb, var(--color-foreground), transparent 80%);
  border-radius: var(--border-radius);
  background: var(--color-background);
  color: var(--color-foreground);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.color-picker__custom-trigger:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary), transparent 94%);
}
.color-picker__custom-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.color-picker__custom-trigger-swatch {
  width: calc(var(--color-size) * 0.65);
  height: calc(var(--color-size) * 0.65);
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 80%);
}
.color-picker__custom-trigger-value {
  font-size: var(--font-size-s);
  font-family: var(--font-family-mono, monospace);
}
.color-picker__custom-popover {
  display: grid;
  gap: var(--space-s);
  min-width: min(360px, 80vw);
  margin-top: var(--space-xs);
}
.color-picker__custom-apply {
  min-height: var(--color-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid color-mix(in srgb, var(--color-foreground), transparent 80%);
  border-radius: var(--border-radius);
  background: var(--color-background);
  color: var(--color-foreground);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.color-picker__custom-apply:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary), transparent 90%);
  color: var(--color-primary);
}
.color-picker__custom-apply:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 480px) {
.color-picker__grid {
    grid-template-columns: repeat(auto-fill, 35px);
}
.color-picker__color {
    width: 35px;
    height: 35px;
}
}.t-color-picker-popup {
  display: inline-flex;
  align-items: center;
}
.t-color-picker-popup__trigger {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--t-color-picker-popup-trigger-trigger-gap, var(--int-t-color-picker-popup-trigger-trigger-gap, var(--space-s)));
  padding: var(--t-color-picker-popup-trigger-trigger-padding, var(--int-t-color-picker-popup-trigger-trigger-padding, var(--space-s)));
  background: var(--color-background);
  border: 1px solid var(--color-accent);
  border-radius: var(--t-color-picker-popup-trigger-trigger-border-radius, var(--int-t-color-picker-popup-trigger-trigger-border-radius, var(--border-radius)));
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: var(--t-color-picker-popup-trigger-trigger-min-width, var(--int-t-color-picker-popup-trigger-trigger-min-width, 75px));
}
.t-color-picker-popup__trigger:hover {
  border-color: var(--color-primary);
}
.t-color-picker-popup__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.t-color-picker-popup__selected {
  flex: 1;
  height: var(--t-color-picker-popup-selected-selected-height, var(--int-t-color-picker-popup-selected-selected-height, calc(var(--space) * 2)));
  border-radius: var(--t-color-picker-popup-selected-selected-border-radius, var(--int-t-color-picker-popup-selected-selected-border-radius, var(--border-radius-s)));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 90%);
  position: relative;
  overflow: hidden;
}
.t-color-picker-popup__selected--has-color {
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-foreground), transparent 90%);
}
.t-color-picker-popup__selected--no-color {
  background: var(--color-gray-light);
}
.t-color-picker-popup__placeholder {
  color: var(--color-text-secondary);
  font-size: var(--t-color-picker-popup-placeholder-placeholder-font-size, var(--int-t-color-picker-popup-placeholder-placeholder-font-size, var(--font-size-s)));
}
.t-color-picker-popup__icon {
  color: var(--color-text-secondary);
}
.t-color-picker-popup--small .t-color-picker-popup__trigger {
  padding: var(--t-color-picker-popup-small-t-color-picker-popup-trigger-trigger-padding, var(--int-t-color-picker-popup-small-t-color-picker-popup-trigger-trigger-padding, calc(var(--space-s) * 0.75)));
  min-width: var(--t-color-picker-popup-small-t-color-picker-popup-trigger-trigger-min-width, var(--int-t-color-picker-popup-small-t-color-picker-popup-trigger-trigger-min-width, 80px));
}
.t-color-picker-popup--small .t-color-picker-popup__selected {
  height: var(--t-color-picker-popup-small-t-color-picker-popup-selected-selected-height, var(--int-t-color-picker-popup-small-t-color-picker-popup-selected-selected-height, calc(var(--space) * 1.5)));
}
.t-color-picker-popup--large .t-color-picker-popup__trigger {
  padding: var(--t-color-picker-popup-large-t-color-picker-popup-trigger-trigger-padding, var(--int-t-color-picker-popup-large-t-color-picker-popup-trigger-trigger-padding, calc(var(--space) * 0.75)));
  min-width: var(--t-color-picker-popup-large-t-color-picker-popup-trigger-trigger-min-width, var(--int-t-color-picker-popup-large-t-color-picker-popup-trigger-trigger-min-width, 160px));
}
.t-color-picker-popup--large .t-color-picker-popup__selected {
  height: var(--t-color-picker-popup-large-t-color-picker-popup-selected-selected-height, var(--int-t-color-picker-popup-large-t-color-picker-popup-selected-selected-height, calc(var(--space) * 2.5)));
}.number-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s);
  width: var(--number-pad-width, var(--int-number-pad-width, 15em));
  max-width: var(--number-pad-max-width, var(--int-number-pad-max-width, 20em));
}
.number-pad__button {
  aspect-ratio: 1;
  min-height: var(--space-xl);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius);
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-size: var(--number-pad-button-button-font-size, var(--int-number-pad-button-button-font-size, 1.25em));
  font-weight: var(--number-pad-button-button-font-weight, var(--int-number-pad-button-button-font-weight, 600));
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.number-pad__button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.3s;
}
.number-pad__button:active:not(:disabled)::after {
  opacity: 0.3;
  transform: scale(1);
  transition: none;
}
.number-pad__button:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-primary), transparent 90%);
  border-color: var(--color-foreground);
  transform: scale(1.05);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary), transparent 80%);
}
.number-pad__button:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary), transparent 80%);
}
.number-pad__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.number-pad__button--clear {
  background-color: var(--color-accent);
  color: var(--color-foreground);
  border-color: var(--color-accent);
}
.number-pad__button--clear:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
  border-color: var(--color-primary);
}
.number-pad__button--clear .icon {
  font-size: var(--number-pad-button-clear-icon-icon-font-size, var(--int-number-pad-button-clear-icon-icon-font-size, 2em));
}
.number-pad__button--submit {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-success-text);
}
.number-pad__button--submit:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-success), transparent 60%);
}
.number-pad__button--submit .icon {
  font-size: var(--number-pad-button-submit-icon-icon-font-size, var(--int-number-pad-button-submit-icon-icon-font-size, 2em));
}
.number-pad--small {
  gap: var(--space-xs);
  max-width: var(--number-pad-small-max-width, var(--int-number-pad-small-max-width, 15em));
}
.number-pad--small .number-pad__button {
  min-height: var(--space-l);
  font-size: var(--number-pad-small-number-pad-button-button-font-size, var(--int-number-pad-small-number-pad-button-button-font-size, 1em));
}
.number-pad--large {
  gap: var(--space);
  max-width: var(--number-pad-large-max-width, var(--int-number-pad-large-max-width, 25em));
}
.number-pad--large .number-pad__button {
  min-height: calc(var(--space-xl) * 1.33);
  font-size: var(--number-pad-large-number-pad-button-button-font-size, var(--int-number-pad-large-number-pad-button-button-font-size, 1.5em));
}
.number-pad--compact {
  gap: var(--number-pad-compact-compact-gap, var(--int-number-pad-compact-compact-gap, 2px));
}
.number-pad--compact .number-pad__button {
  border-radius: var(--border-radius-s);
}
.number-pad--rounded .number-pad__button {
  border-radius: 50%;
}
.number-pad--flat .number-pad__button {
  border: none;
  box-shadow: none;
}
.number-pad--flat .number-pad__button:hover:not(:disabled) {
  box-shadow: none;
}.rich-text-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.rich-text-editor__label {
  font-size: var(--font-size-s);
  font-weight: var(--rich-text-editor-label-label-font-weight, var(--int-rich-text-editor-label-label-font-weight, 500));
  color: var(--color-foreground);
}
.rich-text-editor__required {
  color: var(--color-error);
  margin-left: 2px;
}
.rich-text-editor__container {
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 80%);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rich-text-editor__container--focused {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 82%);
}
.rich-text-editor__container--error {
  border-color: var(--color-error);
}
.rich-text-editor__container--error.rich-text-editor__container--focused {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error), transparent 82%);
}
.rich-text-editor__container--disabled, .rich-text-editor__container--readonly {
  opacity: 0.6;
  background: color-mix(in srgb, var(--color-foreground), transparent 96%);
  pointer-events: none;
}
.rich-text-editor__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  background: color-mix(in srgb, var(--color-foreground), transparent 97%);
}
.rich-text-editor__toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
}
.rich-text-editor__toolbar-divider {
  width: 1px;
  height: 18px;
  background: color-mix(in srgb, var(--color-foreground), transparent 85%);
  flex-shrink: 0;
}
.rich-text-editor__toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--border-radius-s);
  background: transparent;
  color: color-mix(in srgb, var(--color-foreground), transparent 30%);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.rich-text-editor__toolbar-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-foreground), transparent 90%);
  color: var(--color-foreground);
}
.rich-text-editor__toolbar-btn--active {
  background: color-mix(in srgb, var(--color-primary), transparent 85%);
  color: var(--color-primary);
}
.rich-text-editor__toolbar-btn--active:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary), transparent 78%);
}
.rich-text-editor__toolbar-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.rich-text-editor__toolbar-icon {
  width: 14px;
  height: 14px;
}
.rich-text-editor__toolbar-label {
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.rich-text-editor__editor {
  flex: 1;
  overflow-y: auto;
}
.rich-text-editor__editor .tiptap {
  padding: var(--space);
  min-height: inherit;
  max-height: inherit;
  overflow-y: auto;
  outline: none;
  font-size: var(--font-size);
  line-height: 1.65;
  color: var(--color-foreground);
}
.rich-text-editor__editor .tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: color-mix(in srgb, var(--color-foreground), transparent 55%);
  pointer-events: none;
  float: left;
  height: 0;
}
.rich-text-editor__editor .tiptap > * + * {
  margin-top: 0.65em;
}
.rich-text-editor__editor .tiptap h1, .rich-text-editor__editor .tiptap h2, .rich-text-editor__editor .tiptap h3, .rich-text-editor__editor .tiptap h4 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-foreground);
}
.rich-text-editor__editor .tiptap h1 {
  font-size: 1.75em;
}
.rich-text-editor__editor .tiptap h2 {
  font-size: 1.35em;
}
.rich-text-editor__editor .tiptap h3 {
  font-size: 1.15em;
}
.rich-text-editor__editor .tiptap p {
  margin: 0;
}
.rich-text-editor__editor .tiptap strong {
  font-weight: 700;
}
.rich-text-editor__editor .tiptap em {
  font-style: italic;
}
.rich-text-editor__editor .tiptap u {
  text-decoration: underline;
}
.rich-text-editor__editor .tiptap s {
  text-decoration: line-through;
}
.rich-text-editor__editor .tiptap code {
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: 0.875em;
  background: color-mix(in srgb, var(--color-foreground), transparent 90%);
  border-radius: var(--border-radius-s);
  padding: 0.1em 0.35em;
}
.rich-text-editor__editor .tiptap pre {
  background: color-mix(in srgb, var(--color-foreground), transparent 92%);
  border-radius: var(--border-radius);
  padding: var(--space-s) var(--space);
  overflow-x: auto;
}
.rich-text-editor__editor .tiptap pre code {
  background: none;
  padding: 0;
  font-size: var(--font-size-s);
}
.rich-text-editor__editor .tiptap blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space);
  color: color-mix(in srgb, var(--color-foreground), transparent 30%);
  font-style: italic;
}
.rich-text-editor__editor .tiptap ul, .rich-text-editor__editor .tiptap ol {
  padding-left: var(--space-l);
}
.rich-text-editor__editor .tiptap ul {
  list-style: disc;
}
.rich-text-editor__editor .tiptap ol {
  list-style: decimal;
}
.rich-text-editor__editor .tiptap li + li {
  margin-top: 0.25em;
}
.rich-text-editor__editor .tiptap hr {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground), transparent 85%);
  margin: var(--space) 0;
}
.rich-text-editor__editor .tiptap a {
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}
.rich-text-editor__error {
  font-size: var(--font-size-xs);
  color: var(--color-error);
}.form-actions {
  display: flex;
  gap: var(--space-s);
  margin-top: var(--space);
  padding-top: var(--space);
  border-top: 1px solid var(--color-accent);
}
.form-actions--align-left {
  justify-content: flex-start;
}
.form-actions--align-center {
  justify-content: center;
}
.form-actions--align-right {
  justify-content: flex-end;
}
.form-actions--align-space-between {
  justify-content: space-between;
}
@media (max-width: 480px) {
.form-actions {
    flex-direction: column-reverse;
    gap: var(--space-xs);
}
.form-actions button {
    width: 100%;
}
}.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap, var(--int-chip-gap, var(--space-s)));
  padding: var(--chip-padding-y, var(--int-chip-padding-y, var(--space-xs))) var(--chip-padding-x, var(--int-chip-padding-x, calc(var(--space) * 0.75)));
  border-radius: var(--border-radius, 4px);
  background-color: var(--color-gray-light, color-mix(in srgb, var(--color-foreground), transparent 92%));
  font-size: var(--chip-font-size, var(--int-chip-font-size, var(--font-size-s)));
}
.chip__pre {
  display: flex;
  align-items: center;
}
.chip__content {
  display: flex;
  align-items: center;
}
.chip .dot {
  width: var(--chip-dot-dot-size, var(--int-chip-dot-dot-size, var(--space)));
  height: var(--chip-dot-dot-size, var(--int-chip-dot-dot-size, var(--space)));
  border-radius: 50%;
  background-color: var(--dot-color, color-mix(in srgb, var(--color-foreground), transparent 72%));
}.input-birthday {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-birthday__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-birthday__status--success {
  color: var(--color-success);
}
.input-birthday__status--error {
  color: var(--color-error);
}
.input-birthday__status .icon {
  --icon-fill: transparent;
}
.input-birthday__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-birthday__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-birthday__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-birthday--small {
  --sizing: 0.75;
}
.input-birthday--medium {
  --sizing: 1;
}
.input-birthday--large {
  --sizing: 1.25;
}
.input-birthday--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-birthday--inline .input-birthday__label {
  width: var(--input-label-width, 30%);
}
.input-birthday--inline .input-birthday__label + .input-birthday__control-container, .input-birthday--inline .input-birthday__label + .input-birthday__controls {
  margin: 0;
}
.input-birthday__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-birthday__control:focus {
  outline: none;
}
.input-birthday__control::placeholder {
  opacity: 0.5;
}
.input-birthday__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-birthday--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-birthday--no-controls input[type=number]::-webkit-outer-spin-button, .input-birthday--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-birthday__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-birthday__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-birthday__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-birthday__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-birthday__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-birthday__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-birthday__control-container:hover .input-birthday__reset, .input-birthday__controls:hover .input-birthday__reset {
  opacity: 1;
}
.input-birthday__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-birthday__label + [class*=control-container], .input-birthday__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-birthday__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-birthday__controls {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  align-items: flex-start;
}
.input-birthday__column {
  flex: 1;
}
.input-birthday__column--inactive .input-birthday__options {
  padding: 0;
  overflow: visible;
}
.input-birthday__control {
  position: sticky;
  top: 0;
}
.input-birthday__input {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  position: sticky;
  top: 0;
  --sizing: 0.8;
}
.input-birthday__input:focus {
  outline: none;
}
.input-birthday__options {
  width: 100%;
  height: fit-content;
  max-height: var(--input-birthday-options-options-max-height, var(--int-input-birthday-options-options-max-height, 10em));
  border: none;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
  position: relative;
  border-radius: var(--border-radius);
  background-color: var(--color-background);
  padding: var(--space-xs);
  overflow: auto;
}
.input-birthday__option-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.input-birthday__option {
  padding: var(--space-xs);
  font-size: var(--input-birthday-option-option-font-size, var(--int-input-birthday-option-option-font-size, 0.875em));
  cursor: pointer;
  border-radius: var(--border-radius);
}
.input-birthday__option:hover {
  background-color: var(--color-accent);
}
.input-birthday__option--active {
  background-color: color-mix(in srgb, var(--color-primary), transparent 50%);
}
.input-birthday__option--active:hover {
  background-color: color-mix(in srgb, var(--color-primary), transparent 75%);
}.input-cascader {
  position: relative;
}
.input-cascader__control {
  position: relative;
  width: 100%;
}
.input-cascader__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--input-cascader-trigger-trigger-gap, var(--int-input-cascader-trigger-trigger-gap, calc(var(--space) * 0.75)));
  width: 100%;
  min-height: var(--input-cascader-trigger-trigger-min-height, var(--int-input-cascader-trigger-trigger-min-height, calc(var(--space) * 3)));
  padding: var(--input-cascader-trigger-trigger-padding-y, var(--int-input-cascader-trigger-trigger-padding-y, calc(var(--space) * 0.8))) var(--input-cascader-trigger-trigger-padding-x, var(--int-input-cascader-trigger-trigger-padding-x, var(--space)));
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 84%);
  border-radius: var(--border-radius-xl);
  background: color-mix(in srgb, var(--color-background), transparent 2%);
  color: var(--color-foreground);
  text-align: left;
  cursor: pointer;
}
.input-cascader__trigger--open {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--border-width) color-mix(in srgb, var(--color-primary), transparent 14%);
  background: color-mix(in srgb, var(--color-background), var(--color-primary) 6%);
}
.input-cascader__trigger--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.input-cascader__trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.input-cascader__trigger-text--placeholder {
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
}
.input-cascader__trigger-icon {
  flex-shrink: 0;
}
.input-cascader__panel {
  position: absolute;
  top: calc(100% + var(--input-cascader-panel-panel-top-offset, var(--int-input-cascader-panel-panel-top-offset, var(--space-s))));
  left: 0;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, 14rem);
  width: max-content;
  max-width: min(100vw - 2rem, 48rem);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  border-radius: calc(var(--border-radius) * 1.1);
  background: color-mix(in srgb, var(--color-background), white 2%);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--color-foreground), transparent 90%);
}
.input-cascader__column {
  display: grid;
  gap: var(--input-cascader-column-column-gap, var(--int-input-cascader-column-column-gap, var(--space-xs)));
  min-width: 0;
  padding: var(--input-cascader-column-column-padding, var(--int-input-cascader-column-column-padding, var(--space-s)));
  border-right: 1px solid color-mix(in srgb, var(--color-foreground), transparent 92%);
}
.input-cascader__column:last-child {
  border-right: 0;
}
.input-cascader__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--input-cascader-option-option-gap, var(--int-input-cascader-option-option-gap, calc(var(--space-s) * 1.3)));
  width: 100%;
  padding: var(--input-cascader-option-option-padding-y, var(--int-input-cascader-option-option-padding-y, calc(var(--space-s) * 1.1))) var(--input-cascader-option-option-padding-x, var(--int-input-cascader-option-option-padding-x, calc(var(--space-s) * 1.4)));
  border: 0;
  border-radius: calc(var(--border-radius) * 0.75);
  background: transparent;
  color: var(--color-foreground);
  text-align: left;
  cursor: pointer;
}
.input-cascader__option:hover:not(.input-cascader__option--disabled) {
  background: color-mix(in srgb, var(--color-foreground), transparent 96%);
}
.input-cascader__option--active {
  background: color-mix(in srgb, var(--color-primary), transparent 90%);
  color: var(--color-primary);
}
.input-cascader__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.input-cascader__option-main {
  display: inline-flex;
  align-items: center;
  gap: var(--input-cascader-option-main-option-main-gap, var(--int-input-cascader-option-main-option-main-gap, calc(var(--space-s) * 1.1)));
  min-width: 0;
}
.input-cascader__option-icon, .input-cascader__option-arrow {
  flex-shrink: 0;
}
@media (max-width: 700px) {
.input-cascader__panel {
    right: 0;
    left: 0;
    width: auto;
    grid-auto-flow: row;
    grid-auto-columns: auto;
}
.input-cascader__column {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground), transparent 92%);
}
.input-cascader__column:last-child {
    border-bottom: 0;
}
}.input-checkbox-switch {
  --input-checkbox-height: m.p('height', 1.5em);
  --input-checkbox-width: calc(var(--input-checkbox-height) * 1.5);
  --input-checkbox-space: m.p('space', 3px);
  --input-checkbox-dot-color: var(--color-tertiary);
  --input-checkbox-icon-color: color-mix(in srgb, var(--input-checkbox-dot-color), var(--color-foreground) 80%);
  --input-checkbox-dot-size: calc(var(--input-checkbox-height) - (var(--input-checkbox-space) * 2));
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: var(--space-s);
  align-items: center;
  background-image: var(--icon-check);
}
.input-checkbox-switch__control-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.input-checkbox-switch__control-container:has(:checked) ~ * {
  --input-checkbox-dot-x: calc(
  	var(--input-checkbox-width) - var(--input-checkbox-dot-size) - (var(--input-checkbox-space) * 2)
  );
  --input-checkbox-dot-color: var(--input-checkbox-dot-color--active, var(--color-primary));
  --input-checkbox-dot-background-image: linear-gradient(to right, transparent 0, transparent calc(100% - 2px), var(--input-checkbox-icon-color, currentColor) calc(100% - 2px), var(--input-checkbox-icon-color, currentColor) 100%),
  	linear-gradient(to bottom, transparent 0, transparent calc(100% - 2px), var(--input-checkbox-icon-color, currentColor) calc(100% - 2px), var(--input-checkbox-icon-color, currentColor) 100%);
  --input-checkbox-dot-image-width: 5px;
  --input-checkbox-dot-image-height: 8px;
}
.input-checkbox-switch__control {
  opacity: 0;
  position: absolute;
  appearance: none;
  -webkit-appearance: none;
}
.input-checkbox-switch__label {
  display: flex;
  gap: var(--input-checkbox-switch-label-label-gap, var(--int-input-checkbox-switch-label-label-gap, 0.5em));
  font-size: var(--input-checkbox-switch-label-label-font-size, var(--int-input-checkbox-switch-label-label-font-size, var(--font-size-s)));
  font-weight: var(--input-checkbox-switch-label-label-font-weight, var(--int-input-checkbox-switch-label-label-font-weight, 500));
}
.input-checkbox-switch__label--no-icon {
  --input-checkbox-dot-background-image: none !important;
}
.input-checkbox-switch__check-control-dot {
  width: var(--input-checkbox-dot-size);
  height: var(--input-checkbox-dot-size);
  background-color: var(--input-checkbox-dot-color, var(--color-tertiary));
  border-radius: 50%;
  transition: all 0.3s ease;
  transform: translateX(var(--input-checkbox-dot-x, 0));
  background-size: var(--input-checkbox-dot-image-size, 12px);
  position: relative;
}
.input-checkbox-switch__check-control-dot::before {
  content: "";
  display: block;
  width: var(--input-checkbox-dot-image-width, 10px);
  height: var(--input-checkbox-dot-image-height, 10px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background-image 0.3s ease;
  background-image: var(--input-checkbox-dot-background-image, linear-gradient(to right, transparent calc(50% - 2px / 2), var(--input-checkbox-icon-color, currentColor) calc(50% - 2px / 2), var(--input-checkbox-icon-color, currentColor) calc(50% + 2px / 2), transparent calc(50% + 2px / 2)), linear-gradient(to bottom, transparent calc(50% - 2px / 2), var(--input-checkbox-icon-color, currentColor) calc(50% - 2px / 2), var(--input-checkbox-icon-color, currentColor) calc(50% + 2px / 2), transparent calc(50% + 2px / 2)));
}
.input-checkbox-switch__check-control {
  pointer-events: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: var(--input-checkbox-space);
  flex-shrink: 0;
  width: calc(var(--input-checkbox-height) * 1.5);
  height: var(--input-checkbox-height);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, calc(var(--border-radius) * 2));
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--color-background);
}
[data-contrast-mode] .input-checkbox-switch__check-control {
  outline: 2px solid color-mix(in srgb, var(--color-primary), var(--color-background) 50%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary), var(--color-background) 50%);
}.input-image {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-image__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-image__status--success {
  color: var(--color-success);
}
.input-image__status--error {
  color: var(--color-error);
}
.input-image__status .icon {
  --icon-fill: transparent;
}
.input-image__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-image__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-image__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-image--small {
  --sizing: 0.75;
}
.input-image--medium {
  --sizing: 1;
}
.input-image--large {
  --sizing: 1.25;
}
.input-image--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-image--inline .input-image__label {
  width: var(--input-label-width, 30%);
}
.input-image--inline .input-image__label + .input-image__control-container, .input-image--inline .input-image__label + .input-image__controls {
  margin: 0;
}
.input-image__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-image__control:focus {
  outline: none;
}
.input-image__control::placeholder {
  opacity: 0.5;
}
.input-image__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-image--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-image--no-controls input[type=number]::-webkit-outer-spin-button, .input-image--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-image__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-image__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-image__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-image__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-image__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-image__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-image__control-container:hover .input-image__reset, .input-image__controls:hover .input-image__reset {
  opacity: 1;
}
.input-image__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-image__label + [class*=control-container], .input-image__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-image__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-image__preview-container {
  cursor: pointer;
  border-radius: var(--border-radius);
  padding: var(--space);
  text-align: center;
  min-height: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background-color: var(--color-accent);
  border: 1px solid transparent;
}
.input-image__preview-container:hover {
  border: 1px dashed var(--color-foreground);
  border-color: var(--color-primary);
}
.input-image__preview-container--dragging {
  border-color: var(--color-secondary);
  background-color: var(--color-accent);
}
.input-image__preview {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--border-radius);
}
.input-image__placeholder {
  color: var(--color-foreground);
  display: flex;
  flex-direction: row;
  gap: var(--space-s);
  font-size: 0.75em;
  opacity: 0.5;
  align-items: center;
  justify-content: center;
}
.input-image__placeholder-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  height: fit-content;
}
.input-image__placeholder-icon {
  font-size: 4em;
  opacity: 0.5;
}
.input-image[disabled] .input-image__preview-container {
  cursor: not-allowed;
  opacity: 0.7;
}
.input-image__control-container {
  padding: var(--space-s);
  width: fit-content;
}.input-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.input-options--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}.input-search {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-search__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-search__status--success {
  color: var(--color-success);
}
.input-search__status--error {
  color: var(--color-error);
}
.input-search__status .icon {
  --icon-fill: transparent;
}
.input-search__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-search__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-search__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-search--small {
  --sizing: 0.75;
}
.input-search--medium {
  --sizing: 1;
}
.input-search--large {
  --sizing: 1.25;
}
.input-search--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-search--inline .input-search__label {
  width: var(--input-label-width, 30%);
}
.input-search--inline .input-search__label + .input-search__control-container, .input-search--inline .input-search__label + .input-search__controls {
  margin: 0;
}
.input-search__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-search__control:focus {
  outline: none;
}
.input-search__control::placeholder {
  opacity: 0.5;
}
.input-search__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-search--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-search--no-controls input[type=number]::-webkit-outer-spin-button, .input-search--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-search__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-search__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-search__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-search__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-search__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-search__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-search__control-container:hover .input-search__reset, .input-search__controls:hover .input-search__reset {
  opacity: 1;
}
.input-search__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-search__label + [class*=control-container], .input-search__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-search__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-search__control-container {
  width: var(--input-search-expanded-width, 100%);
  transition: width 0.2s ease;
}
.input-search--icon-only .input-search__control-container {
  width: var(--input-search-expanded-width, 100%);
}
.input-search--icon-only.input-search--collapsed .input-search__control-container {
  width: var(--input-search-collapsed-width, 2.75rem);
}
.input-search__wrapper {
  --input-search-collapsed-width: calc(var(--sizing) * 2.5em);
  --input-search-expanded-width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  width: var(--input-search-expanded-width);
  transition: width 0.2s ease;
}
.input-search__wrapper--collapsed {
  width: var(--input-search-collapsed-width);
}
.input-search__control {
  width: 100%;
  padding-left: calc(var(--space) * 0.9);
  padding-right: calc(var(--space) * 2.75);
  appearance: none;
  -webkit-appearance: none;
}
.input-search__icon--left ~ .input-search__control {
  padding-left: calc(var(--space) * 2.45);
}
.input-search__control::-webkit-search-cancel-button, .input-search__control::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}
.input-search__control::-ms-clear, .input-search__control::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
.input-search__icon {
  position: absolute;
  z-index: 3;
  color: color-mix(in srgb, var(--color-foreground), transparent 38%);
  pointer-events: none;
}
.input-search__icon--left {
  left: calc(var(--space) * 0.75);
}
.input-search__action, .input-search__clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: color-mix(in srgb, var(--color-foreground), transparent 24%);
  padding: calc(var(--space) * 0.25);
  border-radius: 999px;
}
.input-search__action {
  right: calc(var(--space) * 0.55);
}
.input-search__clear {
  right: calc(var(--space) * 2.05);
}
.input-search__action:hover, .input-search__clear:hover {
  color: currentColor;
  background: color-mix(in srgb, var(--color-foreground), transparent 92%);
}
.input-search__action:focus-visible, .input-search__clear:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.input-search__wrapper--collapsed .input-search__control {
  opacity: 0;
  pointer-events: none;
  padding-right: calc(var(--space) * 2.25);
}
.input-search__wrapper--collapsed .input-search__action {
  right: 50%;
  transform: translate(50%, -50%);
}
.input-select-color {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-select-color__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-select-color__status--success {
  color: var(--color-success);
}
.input-select-color__status--error {
  color: var(--color-error);
}
.input-select-color__status .icon {
  --icon-fill: transparent;
}
.input-select-color__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-select-color__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-select-color__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-select-color--small {
  --sizing: 0.75;
}
.input-select-color--medium {
  --sizing: 1;
}
.input-select-color--large {
  --sizing: 1.25;
}
.input-select-color--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-select-color--inline .input-select-color__label {
  width: var(--input-label-width, 30%);
}
.input-select-color--inline .input-select-color__label + .input-select-color__control-container, .input-select-color--inline .input-select-color__label + .input-select-color__controls {
  margin: 0;
}
.input-select-color__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-select-color__control:focus {
  outline: none;
}
.input-select-color__control::placeholder {
  opacity: 0.5;
}
.input-select-color__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-select-color--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-select-color--no-controls input[type=number]::-webkit-outer-spin-button, .input-select-color--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-select-color__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-select-color__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-select-color__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-select-color__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-select-color__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-select-color__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-select-color__control-container:hover .input-select-color__reset, .input-select-color__controls:hover .input-select-color__reset {
  opacity: 1;
}
.input-select-color__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-select-color__label + [class*=control-container], .input-select-color__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-select-color__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-select-color {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.input-select-color__label {
  display: flex;
  gap: var(--space);
}
.input-select-color__control-container {
  display: flex;
  gap: var(--space);
  flex-wrap: wrap;
  max-height: 300px;
  transition: max-height 0.3s ease-in-out;
  overflow: hidden;
  border: 1px solid var(--color-accent);
  padding: var(--space-s);
}
.input-select-color--collapsed .input-select-color__control-container {
  max-height: 0;
  padding: 0;
  opacity: 0;
}
.input-select-color__control-item {
  position: relative;
}
.input-select-color__control-item--active .input-select-color__control-preview {
  box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--input-select-color), transparent 80%);
}
.input-select-color__control-item--active .input-select-color__control-preview::before {
  transform: translate(-50%, -50%) scale(1);
}
.input-select-color__control-item--clear .input-select-color__control-preview::before {
  content: "✕";
}
.input-select-color__control-item--clear .input-select-color__control-preview {
  border: 1px solid var(--color-accent);
}
.input-select-color__control-item--clear.input-select-color__control-item--active .input-select-color__control-preview::before {
  content: "✔";
}
.input-select-color__control-item--gold .input-select-color__control-preview::after, .input-select-color__control-item--silver .input-select-color__control-preview::after, .input-select-color__control-item--bronze .input-select-color__control-preview::after {
  content: "";
}
.input-select-color__control-item--white .input-select-color__control-preview {
  outline: 1px solid var(--color-accent);
}
.input-select-color__control-label {
  font-size: 0.5em;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
.input-select-color__control-input {
  width: 0;
  height: 0;
  position: absolute;
}
.input-select-color__control-preview {
  position: relative;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background-color: var(--input-select-color);
  box-shadow: 0 0 0 0em color-mix(in srgb, var(--input-select-color), transparent 80%);
  transition: box-shadow 0.2s ease-in-out;
}
.input-select-color__control-preview::after {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border-radius: 50%;
  background-image: linear-gradient(to right bottom, transparent, color-mix(in srgb, var(--color-background), transparent 50%), color-mix(in srgb, var(--color-foreground), transparent 87.5%), transparent);
}
.input-select-color__control-preview::before {
  content: "✔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%) scale(0);
  font-size: 0.5em;
  transition: transform 0.3s ease-in-out;
}
.input-select-icon {
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-select-icon__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-select-icon__status--success {
  color: var(--color-success);
}
.input-select-icon__status--error {
  color: var(--color-error);
}
.input-select-icon__status .icon {
  --icon-fill: transparent;
}
.input-select-icon__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-select-icon__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-select-icon__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-select-icon--small {
  --sizing: 0.75;
}
.input-select-icon--medium {
  --sizing: 1;
}
.input-select-icon--large {
  --sizing: 1.25;
}
.input-select-icon--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-select-icon--inline .input-select-icon__label {
  width: var(--input-label-width, 30%);
}
.input-select-icon--inline .input-select-icon__label + .input-select-icon__control-container, .input-select-icon--inline .input-select-icon__label + .input-select-icon__controls {
  margin: 0;
}
.input-select-icon__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-select-icon__control:focus {
  outline: none;
}
.input-select-icon__control::placeholder {
  opacity: 0.5;
}
.input-select-icon__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-select-icon--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-select-icon--no-controls input[type=number]::-webkit-outer-spin-button, .input-select-icon--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-select-icon__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-select-icon__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-select-icon__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-select-icon__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-select-icon__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-select-icon__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-select-icon__control-container:hover .input-select-icon__reset, .input-select-icon__controls:hover .input-select-icon__reset {
  opacity: 1;
}
.input-select-icon__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-select-icon__label + [class*=control-container], .input-select-icon__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-select-icon__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-select-icon {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.input-select-icon__label {
  display: flex;
  gap: var(--space);
}
.input-select-icon__control-container {
  border-radius: var(--border-radius);
  transition: max-height 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.input-select-icon--collapsed .input-select-icon__control-container {
  max-height: 0;
  padding: 0;
  opacity: 0;
}
.input-select-icon__control-options {
  scrollbar-width: thin;
  scrollbar-color: red blue;
}
.input-select-icon__control-options::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.input-select-icon__control-options::-webkit-scrollbar-track {
  background: blue;
}
.input-select-icon__control-options::-webkit-scrollbar-thumb {
  background-color: red;
  border-radius: 999px;
  border: none;
}
.input-select-icon__control-options {
  -ms-overflow-style: auto;
  scrollbar-color: var(--color-accent) var(--color-background);
  flex-wrap: wrap;
  border: 1px solid var(--color-accent);
  max-height: 200px;
  scrollbar-gutter: stable;
  overflow-y: auto;
}
.input-select-icon__control-option-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-xs);
  background-color: var(--color-foreground);
  height: fit-content;
}
.input-select-icon__control-item {
  position: relative;
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius);
}
.input-select-icon__control-item:hover:not([class*="--active"]) .input-select-icon__control-preview {
  background-color: var(--color-accent);
}
.input-select-icon__control-item--active .input-select-icon__control-preview {
  background-color: color-mix(in srgb, var(--color-tertiary), transparent 50%);
}
.input-select-icon__control-item--active .input-select-icon__control-preview::before {
  transform: translate(-50%, -50%) scale(1);
}
.input-select-icon__control-item--clear .input-select-icon__control-preview {
  border: 1px solid var(--color-accent);
}
.input-select-icon__control-item--clear .input-select-icon__control-preview::before {
  content: "✕";
}
.input-select-icon__control-item--clear.input-select-icon__control-item--active .input-select-icon__control-preview::before {
  content: "✔";
}
.input-select-icon__control-label {
  font-size: 0.5em;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
.input-select-icon__control-input {
  width: 0;
  height: 0;
  position: absolute;
}
.input-select-icon__control-preview {
  position: relative;
  width: 2em;
  height: 2em;
  border-radius: var(--border-radius);
  background-color: var(--color-background);
  box-shadow: 0 0 0 0em color-mix(in srgb, var(--color-accent), transparent 80%);
  transition: box-shadow 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-select-icon__control-preview .icon {
  font-size: 1.5em;
}
.input-select-icon__control-filter {
  background-color: var(--color-background);
  position: sticky;
  top: 0;
  z-index: 2;
}.input-passcode {
  --input-control-padding-x: 0;
  --sizing: var(--form-sizing, 1);
  color: currentColor;
}
.input-passcode__status {
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 1.25em;
}
.input-passcode__status--success {
  color: var(--color-success);
}
.input-passcode__status--error {
  color: var(--color-error);
}
.input-passcode__status .icon {
  --icon-fill: transparent;
}
.input-passcode__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.input-passcode__error {
  background-color: color-mix(in srgb, var(--color-error), var(--color-background) 80%);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-error), var(--color-background) 50%);
  color: color-mix(in srgb, var(--color-error), var(--color-foreground) 50%);
  animation: popInError 0.3s var(--bezier);
  transform-origin: 0 0;
  padding: var(--space-s) var(--space);
}
@keyframes popInError {
0% {
    opacity: 0;
    transform: scale(1, 0.5) translateY(25%);
}
100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}
}
.input-passcode__error-text {
  font-size: 0.66em;
  display: block;
  line-height: 1;
}
.input-passcode--small {
  --sizing: 0.75;
}
.input-passcode--medium {
  --sizing: 1;
}
.input-passcode--large {
  --sizing: 1.25;
}
.input-passcode--inline {
  display: flex;
  align-items: center;
  gap: var(--space);
}
.input-passcode--inline .input-passcode__label {
  width: var(--input-label-width, 30%);
}
.input-passcode--inline .input-passcode__label + .input-passcode__control-container, .input-passcode--inline .input-passcode__label + .input-passcode__controls {
  margin: 0;
}
.input-passcode__control {
  padding: var(--input-control-padding, var(--input-control-padding-y, calc(0.75em * var(--sizing)))) var(--input-control-padding, var(--input-control-padding-x, calc(var(--sizing) * 1em)));
  background-color: transparent;
  border: none;
  font-size: calc(1em * var(--sizing));
  line-height: 1;
  width: 100%;
  color: var(--input-control-text-color, currentColor);
  position: relative;
  z-index: 2;
  text-align: var(--input-control-text-align, left);
}
.input-passcode__control:focus {
  outline: none;
}
.input-passcode__control::placeholder {
  opacity: 0.5;
}
.input-passcode__description {
  font-size: 0.75em;
  margin: var(--space) 0;
  opacity: 0.5;
}
.input-passcode--no-controls input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-passcode--no-controls input[type=number]::-webkit-outer-spin-button, .input-passcode--no-controls input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-passcode__control-container {
  font-size: var(--input-control-font-size, 1em);
  position: relative;
  width: 100%;
}
.input-passcode__control-container:has([disabled]):not(:has([disabled=false])) {
  opacity: 0.25;
}
.input-passcode__control-container::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  box-shadow: var(--drop-shadow);
  outline: 1px solid color-mix(in srgb, var(--color-foreground), var(--color-background) 66.66%);
  border-radius: var(--input-border-radius, var(--border-radius));
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--input-control-background, var(--color-background));
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-contrast-mode] .input-passcode__control-container::before {
  outline: 2px solid var(--color-foreground);
}
.input-passcode__control-container:has(:focus)::before {
  opacity: 1;
  outline: 1px solid var(--input-control-border-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 80%));
}
[data-contrast-mode] .input-passcode__control-container:has(:focus)::before {
  outline: 2px solid var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
  box-shadow: 0 0 0 6px var(--input-control-focus-color, color-mix(in srgb, var(--color-primary), var(--color-background) 50%));
}
.input-passcode__control-container:hover .input-passcode__reset, .input-passcode__controls:hover .input-passcode__reset {
  opacity: 1;
}
.input-passcode__label {
  font-size: calc(0.875em * var(--sizing));
  display: block;
  font-weight: 500;
}
.input-passcode__label + [class*=control-container], .input-passcode__label + [class*=controls] {
  margin-top: 0.5em;
}
.input-passcode__reset {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
}
.input-passcode__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
}
.input-passcode__control-container {
  width: var(--input-passcode-control-container-control-container-width, var(--int-input-passcode-control-container-control-container-width, 2.5em));
}
.input-passcode__control {
  text-align: center;
  font-size: var(--input-passcode-control-control-font-size, var(--int-input-passcode-control-control-font-size, 1.25em));
}.floating-header {
  --int-floating-header-surface-color: var(--color-background);
  --int-floating-header-content-color: var(--color-foreground);
  --floating-header-top: 0;
  --floating-header-padding: 1rem clamp(1rem, 3vw, 2rem);
  --floating-header-max-width: max(fit-content, 1024px);
  --floating-header-shell-padding: 0.9rem 1rem;
  --floating-header-shell-radius: 999px;
  --floating-header-shell-border: 1px solid color-mix(in srgb, var(--int-floating-header-content-color), transparent 90%);
  --floating-header-shell-background: color-mix(in srgb, var(--int-floating-header-surface-color), transparent 90%);
  --floating-header-shell-shadow: 0 18px 42px color-mix(in srgb, var(--int-floating-header-content-color), transparent 92%);
  --floating-header-shell-backdrop: blur(16px);
  --floating-header-link-color: color-mix(in srgb, var(--int-floating-header-content-color), transparent 40%);
  --floating-header-link-hover-background: color-mix(in srgb, var(--int-floating-header-content-color), transparent 94%);
  --floating-header-link-active-background: color-mix(in srgb, var(--color-primary), transparent 88%);
  --floating-header-link-active-color: var(--int-floating-header-content-color);
  --floating-header-logo-color: var(--int-floating-header-content-color);
  position: fixed;
  width: 100%;
  top: var(--floating-header-top);
  z-index: var(--z-sticky, 100);
  padding: var(--floating-header-padding);
  margin: auto;
}
.floating-header--color-mode-light {
  --int-floating-header-surface-color: var(--color-light);
  --int-floating-header-content-color: var(--color-dark);
}
.floating-header--color-mode-dark {
  --int-floating-header-surface-color: var(--color-dark);
  --int-floating-header-content-color: var(--color-light);
}
.floating-header--color-mode-auto {
  --int-floating-header-surface-color: var(--color-light);
  --int-floating-header-content-color: var(--color-dark);
}
@media (prefers-color-scheme: dark) {
.floating-header--color-mode-auto {
    --int-floating-header-surface-color: var(--color-dark);
    --int-floating-header-content-color: var(--color-light);
}
}
.floating-header--color-mode-inverse {
  --int-floating-header-surface-color: var(--color-dark);
  --int-floating-header-content-color: var(--color-light);
}
@media (prefers-color-scheme: dark) {
.floating-header--color-mode-inverse {
    --int-floating-header-surface-color: var(--color-light);
    --int-floating-header-content-color: var(--color-dark);
}
}
:root[data-color-mode=dark] .floating-header--color-mode-auto, :root[data-theme=dark] .floating-header--color-mode-auto {
  --int-floating-header-surface-color: var(--color-dark);
  --int-floating-header-content-color: var(--color-light);
}
:root[data-color-mode=light] .floating-header--color-mode-auto, :root[data-theme=light] .floating-header--color-mode-auto {
  --int-floating-header-surface-color: var(--color-light);
  --int-floating-header-content-color: var(--color-dark);
}
:root[data-color-mode=dark] .floating-header--color-mode-inverse, :root[data-theme=dark] .floating-header--color-mode-inverse {
  --int-floating-header-surface-color: var(--color-light);
  --int-floating-header-content-color: var(--color-dark);
}
:root[data-color-mode=light] .floating-header--color-mode-inverse, :root[data-theme=light] .floating-header--color-mode-inverse {
  --int-floating-header-surface-color: var(--color-dark);
  --int-floating-header-content-color: var(--color-light);
}
.floating-header--fixed {
  position: fixed;
  left: 0;
  right: 0;
}
.floating-header__shell {
  width: var(--floating-header-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: var(--floating-header-shell-padding);
  border: var(--floating-header-shell-border);
  border-radius: var(--floating-header-shell-radius);
  background: var(--floating-header-shell-background);
  box-shadow: var(--floating-header-shell-shadow);
  backdrop-filter: var(--floating-header-shell-backdrop);
}
.floating-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: start;
  color: var(--floating-header-logo-color);
  text-decoration: none;
}
.floating-header__logo:hover, .floating-header__logo:focus-visible {
  text-decoration: none;
}
.floating-header__logo-text {
  font-size: var(--font-size-s, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: color-mix(in srgb, var(--floating-header-logo-color), transparent 22%);
}
.floating-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-foreground), transparent 97%);
}
.floating-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  color: var(--floating-header-link-color);
  text-decoration: none;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}
.floating-header__nav-link:hover, .floating-header__nav-link:focus-visible {
  text-decoration: none;
  color: var(--int-floating-header-content-color);
  background: var(--floating-header-link-hover-background);
}
.floating-header__nav-link--active {
  color: var(--floating-header-link-active-color);
  background: var(--floating-header-link-active-background);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}
.floating-header__nav-icon {
  font-size: 0.95em;
  opacity: 0.8;
}
.floating-header__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.75rem;
  min-width: 0;
}
.floating-header__utilities, .floating-header__action-slot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
@media (max-width: 900px) {
.floating-header__shell {
    grid-template-columns: 1fr;
    border-radius: 1.6rem;
}
.floating-header__logo {
    justify-self: start;
}
.floating-header__nav {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.floating-header__actions {
    justify-self: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}
.floating-header__utilities, .floating-header__action-slot {
    flex-wrap: wrap;
}
}.header-user {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.55rem 0.7rem 0.55rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 90%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-background), transparent 6%);
  color: var(--color-foreground);
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.header-user:hover, .header-user:focus-visible {
  text-decoration: none;
  background: color-mix(in srgb, var(--color-foreground), transparent 96%);
  border-color: color-mix(in srgb, var(--color-primary), transparent 76%);
}
.header-user__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary), transparent 84%);
  color: var(--color-foreground);
  font-size: 0.8rem;
  font-weight: var(--font-weight-extra-bold, 700);
  letter-spacing: 0.04em;
  flex: 0 0 2.3rem;
}
.header-user__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.header-user__name, .header-user__email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-user__name {
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.1;
}
.header-user__email {
  color: color-mix(in srgb, var(--color-foreground), transparent 36%);
  font-size: 0.85rem;
  line-height: 1.1;
}
.header-user__icon {
  color: color-mix(in srgb, var(--color-foreground), transparent 28%);
  flex: 0 0 auto;
}.ikki-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space);
  padding-top: calc(var(--space-s) + env(safe-area-inset-top, 0px));
  background: var(--color-toolbar-bg, color-mix(in srgb, var(--color-background), transparent 12%));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--transition-color, 0.2s ease);
}
.ikki-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-foreground);
  font: inherit;
  min-width: 0;
}
.ikki-header__brand:hover .ikki-header__brand-default {
  opacity: 0;
  transform: translateX(-4px);
}
.ikki-header__brand:hover .ikki-header__brand-hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.ikki-header__brand:hover .ikki-header__mark-svg--default {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}
.ikki-header__brand:hover .ikki-header__mark-svg--hover {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.ikki-header__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  position: relative;
  flex: 0 0 22px;
}
.ikki-header__mark svg {
  width: 100%;
  height: 100%;
}
.ikki-header__mark-svg {
  position: absolute;
  inset: 0;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ikki-header__mark-svg--default {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.ikki-header__mark-svg--hover {
  opacity: 0;
  transform: rotate(90deg) scale(0.8);
}
.ikki-header__brand-text, .ikki-header__scrolled-title {
  font-size: var(--font-size-s);
  font-weight: 600;
  letter-spacing: normal;
  white-space: nowrap;
}
.ikki-header__brand-text {
  position: relative;
}
.ikki-header__brand-default {
  display: inline;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.ikki-header__brand-hover {
  display: inline;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  transform: translateX(4px);
  transition: opacity 0.2s ease 0.05s, transform 0.25s ease 0.05s;
}
@media (max-width: 768px) {
.ikki-header__brand-hover {
    display: none;
}
}
.ikki-header__scrolled-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100vw - 180px);
  text-align: left;
}
@media (min-width: 769px) {
.ikki-header__scrolled-title {
    max-width: 300px;
}
}
.ikki-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-shrink: 0;
}
.ikki-header-title-swap-enter-active,
.ikki-header-title-swap-leave-active {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ikki-header-title-swap-enter-from,
.ikki-header-title-swap-leave-to {
  opacity: 0;
  transform: translateY(4px);
}.ikki-app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  color: var(--color-foreground);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ikki-app-shell--sidebar-open {
  transform: translateX(var(--ikki-app-shell-sidebar-shift, 30%));
}
.ikki-app-shell > .ikki-header {
  width: min(100% - 2rem, var(--ikki-app-shell-max-width, 60rem));
  margin: 0 auto;
}
.ikki-app-shell__main {
  flex: 1;
  min-width: 0;
}
.ikki-app-shell__footer {
  width: min(100% - 2rem, var(--ikki-app-shell-max-width, 60rem));
  margin: 0 auto;
  padding: calc(var(--space) * 2) 0 calc(var(--space) * 3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--color-foreground), transparent 50%);
}
.ikki-app-shell__footer-note, .ikki-app-shell__footer-copy {
  opacity: 0.7;
}
.ikki-app-shell__footer-sep {
  opacity: 0.35;
  margin: 0 0.4rem;
}
.ikki-app-shell__footer-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.ikki-app-shell__footer-link:hover {
  opacity: 1;
}.ikki-sidebar {
  --ikki-sidebar-width: 280px;
  --ikki-sidebar-surface: var(--color-primary);
  --ikki-sidebar-color: var(--color-primary-text);
  --ikki-sidebar-hover-surface: var(--color-background);
  --ikki-sidebar-hover-color: var(--color-foreground);
  --ikki-sidebar-active-icon-color: var(--color-primary);
  --ikki-sidebar-footer-color: var(--color-dark);
  --ikki-sidebar-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--space));
  left: calc(env(safe-area-inset-left, 0px) + var(--space));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space));
  width: var(--ikki-sidebar-width);
  max-width: 80vw;
  z-index: 60;
  background: var(--ikki-sidebar-surface);
  color: var(--ikki-sidebar-color);
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-l);
  padding: 0;
  box-shadow: var(--ikki-sidebar-shadow);
  overflow: hidden;
}
.ikki-sidebar__overlay {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: transparent;
  cursor: default;
}
.ikki-sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space) var(--space) var(--space-s);
}
.ikki-sidebar__title {
  margin: 0;
  font-size: var(--font-size-m);
  font-weight: 700;
  color: var(--ikki-sidebar-color);
}
.ikki-sidebar__close {
  flex-shrink: 0;
  color: var(--ikki-sidebar-color);
}
.ikki-sidebar__loading, .ikki-sidebar__empty {
  color: var(--ikki-sidebar-color);
  opacity: 0.5;
  font-size: var(--font-size-s);
  text-align: center;
  padding: var(--space-l) var(--space);
}
.ikki-sidebar__list {
  height: 100%;
  flex-shrink: 1;
  overflow: auto;
  padding: 0 var(--space) var(--space);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.ikki-sidebar__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ikki-sidebar__row {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--border-radius);
  cursor: pointer;
  color: var(--ikki-sidebar-color);
  position: relative;
  overflow: hidden;
  transition: color 0.2s ease;
  animation: ikki-sidebar-row-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(0.08s + var(--item-index, 0) * 0.03s);
}
.ikki-sidebar__row-hover-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ikki-sidebar-hover-surface);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.ikki-sidebar__row:hover, .ikki-sidebar__row:focus-within, .ikki-sidebar__row--active {
  color: var(--ikki-sidebar-hover-color);
}
.ikki-sidebar__row:hover .ikki-sidebar__row-hover-bg, .ikki-sidebar__row:focus-within .ikki-sidebar__row-hover-bg, .ikki-sidebar__row--active .ikki-sidebar__row-hover-bg {
  opacity: 1;
  transform: scale(1);
}
.ikki-sidebar__row--active .icon,
.ikki-sidebar__row--active svg {
  color: var(--ikki-sidebar-active-icon-color);
  --icon-stroke-color: var(--ikki-sidebar-active-icon-color);
  position: relative;
  z-index: 1;
}
.ikki-sidebar__row--done .icon,
.ikki-sidebar__row--done svg {
  color: var(--ikki-sidebar-color);
  --icon-stroke-color: var(--ikki-sidebar-color);
}
.ikki-sidebar__row-title, .ikki-sidebar__row-time,
.ikki-sidebar .icon,
.ikki-sidebar svg {
  position: relative;
  z-index: 1;
}
.ikki-sidebar__row-title {
  font-size: var(--font-size-s);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.ikki-sidebar__row-time {
  font-size: var(--font-size-xs);
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.ikki-sidebar__row-progress {
  opacity: 0.5;
}
.ikki-sidebar__row:hover .ikki-sidebar__row-time, .ikki-sidebar__row:focus-within .ikki-sidebar__row-time {
  opacity: 0.7;
}
.ikki-sidebar__create {
  position: sticky;
  bottom: 0;
  padding-top: var(--space-s);
  background: linear-gradient(to top, var(--ikki-sidebar-surface) 60%, transparent);
}
.ikki-sidebar__create-button {
  width: 100%;
  --button-color: var(--color-foreground);
  --button-color-text: var(--color-background);
}
.ikki-sidebar__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--ikki-sidebar-footer-color);
  padding: var(--space-s) var(--space);
  border-top: 1px solid var(--ikki-sidebar-footer-color);
  flex-shrink: 0;
  border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
}
.ikki-sidebar__footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.ikki-sidebar__footer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.ikki-sidebar__footer-link:hover {
  opacity: 0.7;
}
.ikki-sidebar__footer-link--badge {
  font-size: var(--font-size-xxs);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-background);
  padding: 1px 6px;
  border-radius: var(--border-radius-xs);
  line-height: 1.4;
}
.ikki-sidebar-enter-active {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.ikki-sidebar-leave-active {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.ikki-sidebar-enter-from {
  transform: translateX(-20%) scale(0.95);
  opacity: 0;
}
.ikki-sidebar-leave-to {
  transform: translateX(-15%) scale(0.97);
  opacity: 0;
}
.ikki-sidebar-overlay-enter-active,
.ikki-sidebar-overlay-leave-active {
  transition: opacity 0.3s ease;
}
.ikki-sidebar-overlay-enter-from,
.ikki-sidebar-overlay-leave-to {
  opacity: 0;
}
@keyframes ikki-sidebar-row-in {
from {
    opacity: 0;
    transform: translateX(-8px) scale(0.97);
}
}.ui-dropdown-menu {
  background: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  border-radius: var(--border-radius-l);
  box-shadow: var(--shadow-l);
  min-width: var(--ui-dropdown-menu-min-width, var(--int-ui-dropdown-menu-min-width, 160px));
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--ui-dropdown-menu-gap, var(--int-ui-dropdown-menu-gap, 2px));
  outline: none;
}
.ui-dropdown-menu__trigger {
  display: inline-flex;
}
.ui-dropdown-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  cursor: default;
}
.ui-dropdown-menu__divider {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground), transparent 90%);
  margin: var(--space-xs) 0;
}
.ui-dropdown-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  border: none;
  background: transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: var(--font-size-s);
  color: var(--color-foreground);
  text-align: left;
  width: 100%;
  transition: var(--ui-dropdown-menu-item-item-transition, var(--int-ui-dropdown-menu-item-item-transition, background-color 0.12s ease));
}
.ui-dropdown-menu__item:hover, .ui-dropdown-menu__item:focus {
  background: color-mix(in srgb, var(--color-foreground), transparent 92%);
  outline: none;
}
.ui-dropdown-menu__item--disabled, .ui-dropdown-menu__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.ui-dropdown-menu__item--color-primary {
  color: var(--color-primary);
}
.ui-dropdown-menu__item--color-primary:hover, .ui-dropdown-menu__item--color-primary:focus {
  background: color-mix(in srgb, var(--color-primary), transparent 88%);
}
.ui-dropdown-menu__item--color-secondary {
  color: var(--color-secondary);
}
.ui-dropdown-menu__item--color-secondary:hover, .ui-dropdown-menu__item--color-secondary:focus {
  background: color-mix(in srgb, var(--color-secondary), transparent 88%);
}
.ui-dropdown-menu__item--color-tertiary {
  color: var(--color-tertiary);
}
.ui-dropdown-menu__item--color-tertiary:hover, .ui-dropdown-menu__item--color-tertiary:focus {
  background: color-mix(in srgb, var(--color-tertiary), transparent 88%);
}
.ui-dropdown-menu__item--color-info {
  color: var(--color-info);
}
.ui-dropdown-menu__item--color-info:hover, .ui-dropdown-menu__item--color-info:focus {
  background: color-mix(in srgb, var(--color-info), transparent 88%);
}
.ui-dropdown-menu__item--color-warning {
  color: var(--color-warning);
}
.ui-dropdown-menu__item--color-warning:hover, .ui-dropdown-menu__item--color-warning:focus {
  background: color-mix(in srgb, var(--color-warning), transparent 88%);
}
.ui-dropdown-menu__item--color-success {
  color: var(--color-success);
}
.ui-dropdown-menu__item--color-success:hover, .ui-dropdown-menu__item--color-success:focus {
  background: color-mix(in srgb, var(--color-success), transparent 88%);
}
.ui-dropdown-menu__item--color-error {
  color: var(--color-error);
}
.ui-dropdown-menu__item--color-error:hover, .ui-dropdown-menu__item--color-error:focus {
  background: color-mix(in srgb, var(--color-error), transparent 88%);
}
.ui-dropdown-menu__item--color-dark {
  color: var(--color-dark);
}
.ui-dropdown-menu__item--color-dark:hover, .ui-dropdown-menu__item--color-dark:focus {
  background: color-mix(in srgb, var(--color-dark), transparent 88%);
}
.ui-dropdown-menu__item--color-light {
  color: var(--color-light);
}
.ui-dropdown-menu__item--color-light:hover, .ui-dropdown-menu__item--color-light:focus {
  background: color-mix(in srgb, var(--color-light), transparent 88%);
}
.ui-dropdown-menu__item-icon {
  display: inline-flex;
  align-items: center;
  width: 1.1em;
  flex-shrink: 0;
  font-size: var(--font-size-s);
  opacity: 0.7;
}
.ui-dropdown-menu__item-label {
  white-space: nowrap;
  line-height: 1.4;
}.language-switch-options {
  display: grid;
  gap: 0.35rem;
}
.language-switch-options--level-0 {
  gap: 0.55rem;
}
.language-switch-options__filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  margin-bottom: 0.2rem;
}
.language-switch-options__filter-input {
  flex: 1;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 80%);
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 2%);
  color: var(--color-foreground);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 150ms ease;
}
.language-switch-options__filter-input::placeholder {
  color: color-mix(in srgb, var(--color-foreground), transparent 55%);
}
.language-switch-options__filter-input:focus {
  border-color: color-mix(in srgb, var(--color-primary), transparent 40%);
}
.language-switch-options__filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 150ms ease;
}
.language-switch-options__filter-clear:hover {
  opacity: 1;
}
.language-switch-options__filter-clear .icon {
  width: 0.75rem;
  height: 0.75rem;
}
.language-switch-options__filter-empty {
  padding: 1rem 0;
  text-align: center;
  color: color-mix(in srgb, var(--color-foreground), transparent 50%);
  font-size: 0.88rem;
}
.language-switch-options__entry {
  display: grid;
  gap: 0.35rem;
}
.language-switch-options__entry--group {
  padding-top: 0.1rem;
}
.language-switch-options__entry--branch-active > .language-switch-options__option {
  border-color: color-mix(in srgb, var(--color-primary), transparent 60%);
}
.language-switch-options--level-1, .language-switch-options--level-2, .language-switch-options--level-3 {
  margin-left: 0.85rem;
  padding-left: 0.85rem;
  border-left: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
}
.language-switch-options__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  border-radius: 0.95rem;
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 1.5%);
  color: inherit;
  text-align: left;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.language-switch-options button.language-switch-options__option {
  cursor: pointer;
}
.language-switch-options button.language-switch-options__option:hover:not(:disabled) {
  transform: translateY(-0.04rem);
  border-color: color-mix(in srgb, var(--color-primary), transparent 46%);
  background: color-mix(in srgb, var(--color-primary), transparent 94%);
}
.language-switch-options__option--active {
  border-color: color-mix(in srgb, var(--color-primary), transparent 44%);
  background: color-mix(in srgb, var(--color-primary), transparent 92%);
}
.language-switch-options__option--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.language-switch-options__option--group-label {
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 3%);
}
.language-switch-options__option-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.language-switch-options__flag {
  width: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.language-switch-options__flag-image {
  width: 1.35rem;
  height: 1rem;
  object-fit: cover;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-foreground), transparent 88%);
}
.language-switch-options__flag-emoji {
  font-size: 1rem;
  line-height: 1;
}
.language-switch-options__copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.language-switch-options__label {
  font-size: 0.95rem;
  line-height: 1.2;
}
.language-switch-options__native-name {
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
  font-size: 0.84rem;
  font-style: italic;
  line-height: 1.3;
}
.language-switch-options__description {
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  font-size: 0.84rem;
  line-height: 1.45;
}
.language-switch-options__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
.language-switch-options__group-indicator {
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.66;
  transition: transform 150ms ease;
}
.language-switch-options__group-indicator--open {
  transform: rotate(180deg);
}
.language-switch-options__code {
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-foreground), transparent 92%);
  font-size: 0.76rem;
  line-height: 1;
}
.language-switch-options__indicator {
  width: 1rem;
  height: 1rem;
}.language-switch {
  display: inline-flex;
}
.language-switch--inline {
  display: block;
}
.language-switch__context-panel {
  display: inline-flex;
}
.language-switch__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--border-color, var(--color-accent));
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-foreground), transparent 97%);
  color: var(--color-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.language-switch__trigger:hover {
  background: color-mix(in srgb, var(--color-primary), transparent 88%);
  border-color: color-mix(in srgb, var(--color-primary), transparent 35%);
  color: var(--color-foreground);
}
.language-switch__trigger:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.language-switch__panel {
  display: grid;
  gap: 0.8rem;
  min-width: min(100%, 22rem);
}
.language-switch__simple-menu {
  display: grid;
  gap: 0.75rem;
  min-width: 12rem;
  padding: 0.25rem;
}
.language-switch__simple-list {
  display: grid;
  gap: 0.15rem;
}
.language-switch__simple-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.7rem;
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  color: inherit;
  text-align: left;
  transition: background-color 150ms ease;
  cursor: pointer;
}
.language-switch__simple-option:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary), transparent 94%);
}
.language-switch__simple-option--active {
  background: color-mix(in srgb, var(--color-primary), transparent 91%);
}
.language-switch__simple-option-label {
  min-width: 0;
}
.language-switch__simple-option-indicator {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.language-switch__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.language-switch__panel-title {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
}/* ADD RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
li,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
img,
figure {
  margin: 0;
}
a.link {
  color: var(--color-foreground);
  position: relative;
  display: inline-block;
  cursor: pointer;
}
a.link::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-foreground);
  clip-path: var(--clip-path, inset(0 100% 0 0));
  transition: clip-path 0.3s ease;
}
a.link:hover {
  color: var(--color-secondary);
  --clip-path: inset(0 0% 0 0);
}
:root {
  --app-header-height: 5.5rem;
  --game-container-max-width: 960px;
  --main-max-width: 1560px;
  --space-xs: calc(var(--space) / 4);
  --space-s: calc(var(--space) / 2);
  --space: 1rem;
  --space-m: calc(var(--space) * 1);
  --space-l: calc(var(--space) * 2);
  --space-xl: calc(var(--space) * 4);
  --space-xxl: calc(var(--space) * 8);
  --spacing: clamp(var(--space), 6vw, var(--space-xxl));
  --border-radius-s: calc(var(--border-radius) / 2);
  --border-radius: 0.25em;
  --border-radius-l: calc(var(--border-radius) * 2);
  --border-radius-xl: calc(var(--border-radius) * 3);
  --border-radius-xxl: calc(var(--border-radius) * 6);
  --border-width: 1px;
  --font-size-xs: calc(var(--font-size) * 0.75);
  --font-size-s: calc(var(--font-size) * 0.875);
  --font-size: 1em;
  --font-size-m: calc(var(--font-size) * 1);
  --font-size-l: calc(var(--font-size) * 1.25);
  --font-size-xl: calc(var(--font-size) * 1.5);
  --font-size-xxl: calc(var(--font-size) * 2);
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 600;
  --font-weight-extra-bold: 700;
  --font-weight-black: 900;
  --font-family:
    var(--font-family-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --font-family-heading:
    var(--font-family-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --font-family-monospace:
    var(--font-family-mono, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace);
  --cubic-bezier: cubic-bezier(0, 0.5, 0.5, 1.5);
  --bezier: var(--cubic-bezier);
  --transition: 0.2s ease;
  --transition-fast: 0.12s ease;
  --shadow-s: 0 1px 2px color-mix(in srgb, var(--color-dark), transparent 90%);
  --shadow-m:
    0 var(--space) var(--spacing) color-mix(in srgb, var(--color-dark), transparent 95%),
    0 var(--space-xs) var(--space-s) color-mix(in srgb, var(--color-dark), transparent 90%);
  --shadow-l:
    0 8px 24px color-mix(in srgb, var(--color-dark), transparent 90%),
    0 2px 6px color-mix(in srgb, var(--color-dark), transparent 90%);
}
:root[data-color-mode=dark] {
  color-scheme: dark;
  --color-background: var(--color-dark);
  --color-foreground: var(--color-light);
}
:root[data-color-mode=light] {
  color-scheme: light;
  --color-background: var(--color-light);
  --color-foreground: var(--color-dark);
}
html,
body {
  min-height: 100%;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-family);
  line-height: 1.5;
  padding: 0;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

/* Form elements: force theme colors so dark-mode browsers don't override text */
textarea,
input,
select {
  color: var(--color-foreground);
  background-color: transparent;
  -webkit-text-fill-color: var(--color-foreground);
}
body {
  margin: 0;
}
#app {
  min-height: 100vh;
  padding: 0;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
  margin: 0;
}
.popup {
  position: fixed;
  z-index: 100;
  margin: 0 auto;
  top: 0;
  left: 0;
  inset: 0;
  background-color: transparent;
  height: calc(100vh + 2em);
  height: calc(100svh + 2em);
  width: calc(100vw + 2em);
  width: calc(100svw + 2em);
  border: none;
  display: flex;
  overflow: scroll;
}
.popup--stack {
  z-index: calc(100 + var(--popup-stack-index, 0));
}
.popup__background {
  position: fixed;
  top: 0;
  inset: 0;
  background-color: color-mix(in srgb, var(--color-accent-dark), transparent 80%);
  backdrop-filter: blur(5px);
  animation: backgroundFadeIn 0.3s var(--bezier) forwards;
  height: 100vh;
  height: 100svh;
  width: 100vw;
  width: 100svw;
}
.popup__wrapper {
  width: 100vw;
  width: 100svw;
  margin: auto;
  overflow: scroll;
  height: 100vh;
  height: 100svh;
  max-height: 100vh;
  max-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space);
}
@media screen and (width <= 50em) {
.popup__wrapper {
    width: 100%;
    padding: var(--space-xs);
    padding-bottom: calc(var(--spacing) * 2 + var(--space));
}
}
@media (max-width: 1024px) and (orientation: landscape) {
.popup__wrapper {
    padding: var(--space-s);
}
}
.popup__container {
  position: relative;
  margin: auto;
  z-index: var(--popup-container-z-index, 6);
  border-radius: var(--popup-border-radius, var(--border-radius));
  height: fit-content;
  max-height: calc(100vh - var(--space-xl) * 2);
  max-height: calc(100svh - var(--space-xl) * 2);
  color: var(--popup-container-color, var(--color-foreground));
  max-width: min(960px, 100vw - var(--spacing));
  max-width: min(960px, 100svw - var(--spacing));
  width: fit-content;
  animation: containerComeIn 0.3s var(--bezier) forwards;
  transform: scale(0.75) translateY(var(--spacing));
  opacity: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
@media screen and (width <= 50em) {
.popup__container {
    max-width: 100%;
    max-height: calc(100vh - var(--space-l) * 2);
    max-height: calc(100svh - var(--space-l) * 2);
}
}
@media (max-width: 1024px) {
.popup__container {
    max-height: calc(100vh - var(--space-l) * 2);
    max-height: calc(100svh - var(--space-l) * 2);
}
}
@media (max-width: 1024px) and (orientation: landscape) {
.popup__container {
    max-height: calc(100vh - var(--space) * 2);
    max-height: calc(100svh - var(--space) * 2);
}
}
.popup__popup {
  background: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-accent), transparent 75%);
  z-index: 5;
  border-radius: var(--popup-border-radius, var(--border-radius));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.popup__content {
  padding: var(--popup-padding, var(--space));
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  background: var(--popup-container-background, var(--color-background));
}
@media screen and (width >= 66em) {
.popup__content {
    width: var(--popup-width, fit-content);
}
}
.popup__close {
  flex-shrink: 0;
  margin: 0;
}
.popup--bottom .popup__wrapper {
  align-items: flex-end;
}
.popup--top .popup__wrapper {
  align-items: flex-start;
}
.popup__header {
  padding: var(--popup-padding, var(--space-s)) var(--popup-padding, var(--space));
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent), transparent 80%);
  background-color: transparent;
  z-index: 10;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-s);
  justify-content: space-between;
}
.popup__header-title {
  flex: 1;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--color-foreground);
}
.popup__footer {
  padding: var(--popup-padding, var(--space));
  border-radius: inherit;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-tertiary), transparent 80%);
  background-color: color-mix(in srgb, var(--color-tertiary), var(--color-background) 90%);
  z-index: 10;
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  display: flex;
  gap: var(--space);
  align-items: center;
  justify-content: flex-end;
}
.popup__footer:has(.popup__close) {
  padding-right: var(--space-xl);
}
.popup__actions {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
@media (max-width: 480px) {
.popup__actions {
    flex-direction: column-reverse;
    gap: var(--space-xs);
}
.popup__actions .popup__action {
    width: 100%;
}
}
.popup--closing .popup__container {
  animation: containerGoAway 1s ease-in-out forwards;
}
.popup--closing .popup__background {
  pointer-events: none;
  animation: backgroundFadeOut 0.5s ease-in-out forwards;
}
@keyframes backgroundFadeIn {
to {
    opacity: 1;
}
}
@keyframes backgroundFadeOut {
to {
    opacity: 0;
}
}
@keyframes containerComeIn {
to {
    transform: scale(1) translateY(0);
    opacity: 1;
}
}
@keyframes containerGoAway {
to {
    transform: scale(0.75) translateY(100%);
    opacity: 0;
}
}.ikki-app-shell__footer-locale {
  cursor: pointer;
}
.ikki-app-shell__footer-locale:hover {
  opacity: 1;
}.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--kbd-min-size, var(--int-kbd-min-size, calc(var(--space) * 1.75)));
  min-height: var(--kbd-min-size, var(--int-kbd-min-size, calc(var(--space) * 1.75)));
  padding: var(--kbd-padding, var(--int-kbd-padding, var(--space-xs) calc(var(--space-xs) * 1.75)));
  border: 1px solid var(--kbd-border-color, var(--int-kbd-border-color, color-mix(in srgb, var(--color-foreground), transparent 84%)));
  border-bottom-width: 2px;
  border-radius: var(--kbd-border-radius, var(--int-kbd-border-radius, var(--border-radius-l)));
  background: var(--kbd-background, var(--int-kbd-background, linear-gradient(180deg, color-mix(in srgb, var(--color-background), white 28%) 0%, color-mix(in srgb, var(--color-background), var(--color-foreground) 4%) 100%)));
  box-shadow: var(--kbd-box-shadow, var(--int-kbd-box-shadow, inset 0 1px 0 color-mix(in srgb, white, transparent 30%)));
  color: var(--kbd-color, var(--int-kbd-color, color-mix(in srgb, var(--color-foreground), transparent 12%)));
  font-family: var(--kbd-font-family, var(--int-kbd-font-family, var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace)));
  font-size: var(--kbd-font-size, var(--int-kbd-font-size, var(--font-size-s)));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  aspect-ratio: var(--kbd-aspect-ratio, var(--int-kbd-aspect-ratio, 1));
}
.kbd--small {
  --int-kbd-min-size: var(--space);
  --int-kdb-padding: var(--space-xs);
  --int-kbd-font-size: var(--font-size-xs);
}
.kbd--subtle {
  --int-kbd-background: color-mix(
    in srgb,
    var(--color-background),
    var(--color-foreground) 5%
  );
  --int-kbd-color: color-mix(in srgb, var(--color-foreground), transparent 50%);
  --int-kbd-box-shadow: none;
}.ui-markdown {
  --markdown-border: color-mix(in srgb, var(--color-foreground), transparent 88%);
  --markdown-emphasis: color-mix(in srgb, var(--color-foreground), transparent 18%);
  --markdown-inline-background: color-mix(in srgb, var(--color-background), var(--color-foreground) 5%);
  --markdown-inline-foreground: color-mix(in srgb, var(--color-foreground), transparent 8%);
  --markdown-soft: color-mix(in srgb, var(--color-foreground), transparent 42%);
  --markdown-surface: color-mix(in srgb, var(--color-background), var(--color-foreground) 3.5%);
  --markdown-surface-strong: color-mix(in srgb, var(--color-background), var(--color-foreground) 5%);
  --markdown-selection: color-mix(in srgb, var(--color-primary), transparent 82%);
  --markdown-code-keyword: color-mix(in srgb, var(--color-primary), var(--color-foreground) 26%);
  --markdown-code-string: color-mix(in srgb, var(--color-success), var(--color-foreground) 26%);
  --markdown-code-number: color-mix(in srgb, var(--color-warning), var(--color-foreground) 24%);
  --markdown-code-title: color-mix(in srgb, var(--color-tertiary), var(--color-foreground) 24%);
  --markdown-code-attribute: color-mix(in srgb, var(--color-info), var(--color-foreground) 20%);
  --markdown-code-tag: color-mix(in srgb, var(--color-quinary), var(--color-foreground) 24%);
  --markdown-code-meta: color-mix(in srgb, var(--color-secondary), var(--color-foreground) 30%);
  color: inherit;
  line-height: 1.7;
}
.ui-markdown > :first-child {
  margin-top: 0;
}
.ui-markdown > :last-child {
  margin-bottom: 0;
}
.ui-markdown a {
  color: var(--color-primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}
.ui-markdown p,
.ui-markdown ul,
.ui-markdown ol,
.ui-markdown blockquote,
.ui-markdown pre,
.ui-markdown table,
.ui-markdown hr {
  margin: 1rem 0 1.5rem;
}
.ui-markdown h1,
.ui-markdown h2,
.ui-markdown h3,
.ui-markdown h4,
.ui-markdown h5,
.ui-markdown h6 {
  margin: 1.5rem 0 0.85rem;
  line-height: 1.15;
}
.ui-markdown h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
}
.ui-markdown h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.ui-markdown h3 {
  font-size: clamp(1.25rem, 2vw, 1.45rem);
}
.ui-markdown ul,
.ui-markdown ol {
  padding-left: 1.4rem;
}
.ui-markdown li + li {
  margin-top: 0.35rem;
}
.ui-markdown blockquote {
  padding: 0.85rem 1rem;
  border-left: 3px solid color-mix(in srgb, var(--color-primary), transparent 50%);
  background: color-mix(in srgb, var(--color-primary), transparent 95%);
  color: var(--markdown-emphasis);
}
.ui-markdown hr {
  border: 0;
  border-top: 1px solid var(--markdown-border);
}
.ui-markdown :not(pre) > code {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--markdown-border);
  border-radius: calc(var(--border-radius) * 0.55);
  background: var(--markdown-inline-background);
  color: var(--markdown-inline-foreground);
  font-family: var(--font-family-mono);
  font-size: 0.92em;
  line-height: 1.45;
}
.ui-markdown table {
  width: 100%;
  border-collapse: collapse;
  display: table;
  font-size: 0.98rem;
  line-height: 1.55;
}
.ui-markdown thead {
  background: color-mix(in srgb, var(--color-foreground), transparent 97%);
}
.ui-markdown th,
.ui-markdown td {
  padding: 0.8rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--markdown-border);
}
.ui-markdown th {
  color: var(--color-foreground);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ui-markdown td code,
.ui-markdown th code {
  white-space: nowrap;
}
.ui-markdown img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-l);
}
.ui-markdown__code-block {
  margin: 0;
  overflow: auto;
  padding: 1rem 1.1rem;
  border: 1px solid var(--markdown-border);
  border-radius: var(--border-radius-l);
  background: linear-gradient(180deg, color-mix(in srgb, var(--markdown-surface-strong), transparent 2%) 0%, var(--markdown-surface) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-background), transparent 20%);
}
.ui-markdown__code-block code {
  display: block;
  padding: 0;
  background: transparent;
  color: var(--markdown-inline-foreground);
  font-family: var(--font-family-mono);
  font-size: 0.95rem;
  line-height: 1.65;
}.id-view {
  --id-view-background: color-mix(
  	in srgb,
  	var(--color-secondary),
  	var(--color-background) 95%
  );
  --id-view-border: color-mix(
  	in srgb,
  	var(--color-secondary),
  	var(--color-background) 80%
  );
  --id-view-color: color-mix(
  	in srgb,
  	var(--color-secondary),
  	var(--color-foreground) 50%
  );
  background-color: var(--id-view-background);
  border: 1px solid var(--id-view-border);
  color: var(--id-view-color);
  font-weight: 600;
  border-radius: var(--border-radius);
  width: fit-content;
  padding: var(--space-s);
  display: flex;
  gap: var(--space-s);
  align-items: center;
  max-width: 100%;
}
.id-view__pre {
  font-weight: 600;
  margin-right: 8px;
}
.id-view__id {
  font-family: "Courier New", Courier, monospace;
  font-size: var(--font-size-s);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.id-view__copy-icon {
  color: var(--color-secondary);
  cursor: pointer;
}
.id-view__copy-icon:hover {
  color: black;
}.ui-tooltip__panel {
  position: absolute;
  z-index: var(--ui-tooltip-panel-z-index, var(--int-ui-tooltip-panel-z-index, 100));
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  border-radius: var(--border-radius);
  padding: var(--space-xs) var(--space-s);
  box-shadow: var(--ui-tooltip-panel-shadow, var(--int-ui-tooltip-panel-shadow, 0 12px 28px color-mix(in srgb, var(--color-foreground), transparent 80%)));
  max-width: var(--tooltip-max-width);
  font-size: var(--font-size-xs);
  line-height: var(--ui-tooltip-panel-line-height, var(--int-ui-tooltip-panel-line-height, 1.35));
  white-space: nowrap;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-xs);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--bezier), transform 0.2s var(--bezier);
}
.ui-tooltip__panel--open {
  pointer-events: auto;
  animation: var(--ui-tooltip-panel-open-animation, var(--int-ui-tooltip-panel-open-animation, showTooltip 0.2s var(--bezier) forwards));
}
.ui-tooltip__panel--parent-hover {
  opacity: 0;
  pointer-events: none;
}
.ui-tooltip__panel--parent-hover.ui-tooltip__panel--open {
  animation: var(--ui-tooltip-panel-parent-hover-ui-tooltip-panel-open-animation, var(--int-ui-tooltip-panel-parent-hover-ui-tooltip-panel-open-animation, showTooltip 0.2s var(--bezier) forwards));
  pointer-events: auto;
}
:where(*:hover, *:focus-within, *:active) > .ui-tooltip__panel--parent-hover {
  animation: showTooltip 0.2s var(--bezier) forwards;
  pointer-events: auto;
}
.ui-tooltip__panel--multiline {
  white-space: pre-line;
  word-wrap: break-word;
  width: max-content;
  max-width: min(var(--tooltip-max-width), 90vw);
}
@keyframes showTooltip {
to {
    opacity: 1;
    transform: var(--to, translate(-50%, -50%));
}
}
.ui-tooltip__panel--top {
  bottom: calc(100% + var(--space-xs));
  left: 50%;
  transform: translate(-50%, 50%);
  --to: translate(-50%, 0%);
}
.ui-tooltip__panel--bottom {
  top: calc(100% + var(--space-xs));
  left: 50%;
  transform: translate(-50%, -50%);
  --to: translate(-50%, 0%);
}
.ui-tooltip__panel--left {
  right: calc(100% + var(--space-xs));
  top: 50%;
  transform: translate(50%, -50%);
  --to: translate(0%, -50%);
}
.ui-tooltip__panel--right {
  left: calc(100% + var(--space-xs));
  top: 50%;
  transform: translate(-50%, -50%);
  --to: translate(0%, -50%);
}
.ui-tooltip__arrow {
  position: absolute;
  width: var(--ui-tooltip-arrow-arrow-size, var(--int-ui-tooltip-arrow-arrow-size, 8px));
  height: var(--ui-tooltip-arrow-arrow-size, var(--int-ui-tooltip-arrow-arrow-size, 8px));
  background: var(--tooltip-bg);
  transform: rotate(45deg);
}
.ui-tooltip__panel--top .ui-tooltip__arrow {
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
}
.ui-tooltip__panel--bottom .ui-tooltip__arrow {
  left: 50%;
  top: -4px;
  transform: translateX(-50%) rotate(45deg);
}
.ui-tooltip__panel--left .ui-tooltip__arrow {
  right: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.ui-tooltip__panel--right .ui-tooltip__arrow {
  left: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.ui-tooltip__content {
  display: block;
}
.ui-tooltip__actions {
  display: inline-flex;
  gap: var(--space-xs);
}
.ui-tooltip__action {
  border: 0;
  background: color-mix(in srgb, var(--tooltip-fg), transparent 88%);
  color: var(--tooltip-fg);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--border-radius-s);
  cursor: pointer;
  font-size: var(--font-size-xs);
}
.ui-tooltip__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}.chip {
  --color-default: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-m);
  border-radius: var(--border-radius);
  background-color: var(--chip-background-color, var(--int-chip-background-color, color-mix(in srgb, var(--chip-color), var(--color-background) 95%)));
  color: var(--chip-text-color, var(--int-chip-text-color, color-mix(in srgb, var(--chip-color), var(--color-foreground) 50%)));
  border: 1px solid var(--chip-border-color, var(--int-chip-border-color, color-mix(in srgb, var(--chip-color), var(--color-background) 90%)));
  padding: var(--space-xs) var(--space-s);
  display: flex;
  gap: var(--space-s);
  align-items: center;
}
.chip--small {
  font-size: var(--font-size-s);
  padding: var(--space-xs) var(--space-s);
}
.chip--large {
  font-size: var(--font-size-l);
  padding: var(--space);
}
.chip__icon {
  font-size: var(--font-size-s);
  opacity: 0.5;
}
.chip__remove {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
}
.chip__remove:hover {
  opacity: 1;
}
.chip__remove-icon {
  font-size: var(--font-size-s);
}.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}.ui-dl {
  margin: 0;
  display: flex;
  gap: var(--space-xs);
  font-size: var(--font-size-s);
  flex-direction: column;
  position: relative;
}
.ui-dl:has(.ui-dl__pre-icon) {
  display: grid;
  grid-template: "pre-icon title" "pre-icon detail";
  grid-template-columns: auto 1fr;
  align-items: start;
}
.ui-dl__title {
  grid-area: title;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.ui-dl__icon {
  grid-area: icon;
  background-color: color-mix(in srgb, var(--color-theme, var(--color-secondary)), transparent 90%);
  color: color-mix(in srgb, var(--color-theme, var(--color-secondary)), var(--color-foreground) 50%);
  font-size: 1.5em;
  padding: var(--space-xs);
  border-radius: var(--border-radius-s);
  color: var(--color-text-secondary);
}
.ui-dl__pre-icon {
  grid-area: pre-icon;
  background-color: color-mix(in srgb, var(--color-theme, var(--color-secondary)), transparent 90%);
  color: color-mix(in srgb, var(--color-theme, var(--color-secondary)), var(--color-foreground) 50%);
  font-size: 2.5em;
  margin-right: var(--space-xs);
  padding: var(--space-xs);
  border-radius: var(--border-radius-s);
  color: var(--color-text-secondary);
}
.ui-dl__detail {
  grid-area: detail;
}
.ui-dl + .ui-dl {
  margin-top: var(--space);
}
.spacer .ui-dl,
.ui-columns .ui-dl {
  margin: 0;
}.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ui-badge-size, var(--int-ui-badge-size, calc(var(--space) * 1.5)));
  height: var(--ui-badge-size, var(--int-ui-badge-size, calc(var(--space) * 1.5)));
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--ui-badge-border-radius, var(--int-ui-badge-border-radius, 999px));
  font-size: var(--font-size-xs);
  line-height: var(--ui-badge-line-height, var(--int-ui-badge-line-height, 1));
  font-weight: var(--ui-badge-font-weight, var(--int-ui-badge-font-weight, 600));
  background: color-mix(in srgb, var(--badge-color), transparent 85%);
  color: color-mix(in srgb, var(--badge-color), var(--color-foreground) 25%);
  border: 1px solid var(--badge-color);
  flex-shrink: 0;
  gap: var(--space);
  --badge-color: var(--color-primary);
}
.ui-badge--default {
  --badge-color: var(--color-secondary);
}
.ui-badge__icon {
  color: var(--badge-color);
}.ui-columns {
  display: grid;
  gap: var(--space-m);
}
.ui-columns--1 {
  grid-template-columns: repeat(1, 1fr);
}
.ui-columns--2 {
  grid-template-columns: repeat(2, 1fr);
}
.ui-columns--3 {
  grid-template-columns: repeat(3, 1fr);
}
.ui-columns--4 {
  grid-template-columns: repeat(4, 1fr);
}
.ui-columns--auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--columns-width, 320px), 1fr));
}.spacer {
  display: flex;
  gap: var(--spacer-gap, var(--space));
}
.spacer--row, .spacer--horizontal {
  flex-direction: row;
}
.spacer--row.spacer--start, .spacer--horizontal.spacer--start {
  align-items: flex-start;
}
.spacer--row.spacer--center, .spacer--horizontal.spacer--center {
  align-items: center;
}
.spacer--row.spacer--end, .spacer--horizontal.spacer--end {
  align-items: flex-end;
}
.spacer--column, .spacer--vertical {
  flex-direction: column;
}
.spacer--column.spacer--start, .spacer--vertical.spacer--start {
  justify-content: flex-start;
}
.spacer--column.spacer--center, .spacer--vertical.spacer--center {
  justify-content: center;
}
.spacer--column.spacer--end, .spacer--vertical.spacer--end {
  justify-content: flex-end;
}
.spacer--wrap {
  flex-wrap: wrap;
}
.spacer--space-between {
  justify-content: space-between;
  align-items: center;
}
.spacer--stretch {
  justify-content: stretch;
  width: 100%;
}
.spacer--full-center {
  align-items: center;
  justify-content: center;
}.truncated-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.truncated-list__tooltip {
  max-width: 420px;
  min-width: 240px;
  width: fit-content;
  white-space: normal;
}
.truncated-list__more {
  font-size: var(--font-size-s);
  color: var(--color-text-secondary);
}.ui-notification {
  display: flex;
  align-items: center;
  gap: var(--space-s, var(--ui-notification-gap, var(--int-ui-notification-gap, var(--space-s))));
  padding: var(--space-s, var(--ui-notification-padding-y, var(--int-ui-notification-padding-y, var(--space-s)))) var(--space-m, var(--ui-notification-padding-x, var(--int-ui-notification-padding-x, var(--space))));
  border-radius: var(--border-radius, var(--ui-notification-border-radius, var(--int-ui-notification-border-radius, var(--border-radius))));
  font-size: var(--font-size-s, var(--ui-notification-font-size, var(--int-ui-notification-font-size, var(--font-size-s))));
  line-height: var(--ui-notification-line-height, var(--int-ui-notification-line-height, 1.5));
}
.ui-notification--type-success {
  background: color-mix(in srgb, var(--color-success), transparent 85%);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success), transparent 60%);
}
.ui-notification--type-error {
  background: color-mix(in srgb, var(--color-error), transparent 85%);
  color: var(--color-error);
  border: 1px solid color-mix(in srgb, var(--color-error), transparent 60%);
}
.ui-notification--type-warning {
  background: color-mix(in srgb, var(--color-warning), transparent 85%);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning), transparent 60%);
}
.ui-notification--type-info {
  background: color-mix(in srgb, var(--color-info), transparent 85%);
  color: var(--color-info);
  border: 1px solid color-mix(in srgb, var(--color-info), transparent 60%);
}
.ui-notification__message {
  flex: 1;
  font-weight: 500;
}
.ui-notification__icon {
  flex-shrink: 0;
}
.ui-notification__close {
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  padding: var(--space-xs);
  border-radius: var(--border-radius-s, var(--ui-notification-close-close-border-radius, var(--int-ui-notification-close-close-border-radius, var(--border-radius-s))));
  display: flex;
  align-items: center;
  opacity: 0.7;
}
.ui-notification__close:hover {
  opacity: 1;
}.toast-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.5rem);
  width: min(26rem, 100vw - 2rem);
  padding: var(--space, 1rem);
  pointer-events: none;
  max-height: calc(100svh - 2rem);
  overflow: hidden;
}
.toast-container > * {
  pointer-events: auto;
}
.toast-container--top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.toast-container--top-left {
  top: 0;
  left: 0;
  align-items: flex-start;
}
.toast-container--top-right {
  top: 0;
  right: 0;
  align-items: flex-end;
}
.toast-container--bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column-reverse;
}
.toast-container--bottom-left {
  bottom: 0;
  left: 0;
  align-items: flex-start;
  flex-direction: column-reverse;
}
.toast-container--bottom-right {
  bottom: 0;
  right: 0;
  align-items: flex-end;
  flex-direction: column-reverse;
}
.toast-enter-active,
.toast-leave-active {
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.toast-move {
  transition: transform 0.25s ease;
}
.toast-container--top-right .toast-enter-from,
.toast-container--top-right .toast-leave-to,
.toast-container--bottom-right .toast-enter-from,
.toast-container--bottom-right .toast-leave-to {
  opacity: 0;
  transform: translateX(2rem);
}
.toast-container--top-left .toast-enter-from,
.toast-container--top-left .toast-leave-to,
.toast-container--bottom-left .toast-enter-from,
.toast-container--bottom-left .toast-leave-to {
  opacity: 0;
  transform: translateX(-2rem);
}
.toast-container--top .toast-enter-from,
.toast-container--top .toast-leave-to {
  opacity: 0;
  transform: translateY(-1rem);
}
.toast-container--bottom .toast-enter-from,
.toast-container--bottom .toast-leave-to {
  opacity: 0;
  transform: translateY(1rem);
}
.toast {
  --toast-border-color: color-mix(in srgb, var(--toast-color), var(--color-background) 44%);
  --toast-background-color: color-mix(in srgb, var(--toast-color), var(--color-background) 92%);
  --toast-text-color: color-mix(in srgb, var(--toast-color), var(--color-foreground) 22%);
  display: flex;
  align-items: flex-start;
  gap: var(--space-s, 0.75rem);
  width: 100%;
  padding: var(--space-m, 1rem);
  border: 1px solid var(--toast-border-color);
  border-radius: var(--border-radius-m);
  background: var(--toast-background-color);
  color: var(--toast-text-color);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--color-foreground), transparent 90%);
}
.toast__content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-s, 0.75rem);
}
.toast__icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--toast-color);
}
.toast__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}
.toast__title {
  margin: 0;
  color: var(--color-foreground);
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 700;
}
.toast__message {
  margin: 0;
  line-height: 1.5;
  color: color-mix(in srgb, var(--toast-text-color), var(--color-foreground) 12%);
}
.toast__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 999rem;
  background: transparent;
  color: color-mix(in srgb, var(--toast-text-color), transparent 12%);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.toast__close:hover {
  background: color-mix(in srgb, var(--toast-color), transparent 90%);
  color: var(--color-foreground);
}
.toast__close:focus-visible {
  outline: 2px solid var(--color-focus, var(--color-primary));
  outline-offset: 2px;
}:has(> .tool-tip):hover .tool-tip {
  opacity: 1 !important;
  transition-delay: var(--tooltip-delay, 0.5s);
}
.tool-tip {
  position: absolute;
  opacity: 0;
  background-color: var(--color-foreground);
  color: var(--color-background);
  padding: var(--space-s) calc(var(--space) / 3 * 2);
  border-radius: var(--border-radius);
  font-size: var(--tooltip-font-size, 0.75em);
  z-index: var(--tool-tip-z-index, var(--int-tool-tip-z-index, 20));
  pointer-events: none;
  white-space: nowrap;
  transform: var(--tool-tip-initial-transform, var(--int-tool-tip-initial-transform, scale(0) translateX(-50%) translateY(50%)));
  transition: var(--tool-tip-transition, var(--int-tool-tip-transition, all 0.2s ease-in-out));
  transition-delay: 0s;
}
.tool-tip--bottom {
  left: 50%;
  top: 100%;
  transform: scale(1) translateX(var(--context-tooltip-x, -50%)) translateY(var(--context-tooltip-y, 50%));
}
.tool-tip--bottom::before {
  top: 0;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) rotate(-45deg);
  border-top-right-radius: 0.25em;
}
.tool-tip--top {
  left: 50%;
  bottom: 100%;
  transform: scale(1) translateX(var(--context-tooltip-x, -50%)) translateY(var(--context-tooltip-y, 0%));
}
.tool-tip--top::before {
  bottom: 0;
  left: 50%;
  transform: translateY(50%) translateX(-50%) rotate(135deg);
  border-top-right-radius: 0.25em;
  background-color: blue;
}
.tool-tip--right {
  left: 100%;
  top: 50%;
  transform: scale(1) translateX(var(--context-tooltip-x, 10%)) translateY(var(--context-tooltip-y, -50%));
}
.tool-tip--right::before {
  top: 50%;
  left: 0%;
  transform: translateY(-50%) translateX(-50%) rotate(-45deg);
  border-top-left-radius: 0.25em;
}
.tool-tip::before {
  content: "";
  width: 0.75em;
  height: 0.75em;
  display: block;
  position: absolute;
  background-color: inherit;
}
.tool-tip__text {
  position: relative;
  z-index: 2;
  width: fit-content;
  display: block;
}.platform-footer {
  --int-platform-footer-surface-color: var(--color-background);
  --int-platform-footer-content-color: var(--color-foreground);
  padding: calc(var(--space) * 1.1) var(--spacing);
  color: var(--int-platform-footer-content-color);
  border-top: 1px solid color-mix(in srgb, var(--int-platform-footer-content-color), transparent 90%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--int-platform-footer-surface-color), transparent 0%), color-mix(in srgb, var(--int-platform-footer-surface-color), var(--color-primary) 4%));
}
.platform-footer--color-mode-light {
  --int-platform-footer-surface-color: var(--color-light);
  --int-platform-footer-content-color: var(--color-dark);
}
.platform-footer--color-mode-dark {
  --int-platform-footer-surface-color: var(--color-dark);
  --int-platform-footer-content-color: var(--color-light);
}
.platform-footer--color-mode-auto {
  --int-platform-footer-surface-color: var(--color-light);
  --int-platform-footer-content-color: var(--color-dark);
}
@media (prefers-color-scheme: dark) {
.platform-footer--color-mode-auto {
    --int-platform-footer-surface-color: var(--color-dark);
    --int-platform-footer-content-color: var(--color-light);
}
}
.platform-footer--color-mode-inverse {
  --int-platform-footer-surface-color: var(--color-dark);
  --int-platform-footer-content-color: var(--color-light);
}
@media (prefers-color-scheme: dark) {
.platform-footer--color-mode-inverse {
    --int-platform-footer-surface-color: var(--color-light);
    --int-platform-footer-content-color: var(--color-dark);
}
}
:root[data-color-mode=dark] .platform-footer--color-mode-auto, :root[data-theme=dark] .platform-footer--color-mode-auto {
  --int-platform-footer-surface-color: var(--color-dark);
  --int-platform-footer-content-color: var(--color-light);
}
:root[data-color-mode=light] .platform-footer--color-mode-auto, :root[data-theme=light] .platform-footer--color-mode-auto {
  --int-platform-footer-surface-color: var(--color-light);
  --int-platform-footer-content-color: var(--color-dark);
}
:root[data-color-mode=dark] .platform-footer--color-mode-inverse, :root[data-theme=dark] .platform-footer--color-mode-inverse {
  --int-platform-footer-surface-color: var(--color-light);
  --int-platform-footer-content-color: var(--color-dark);
}
:root[data-color-mode=light] .platform-footer--color-mode-inverse, :root[data-theme=light] .platform-footer--color-mode-inverse {
  --int-platform-footer-surface-color: var(--color-dark);
  --int-platform-footer-content-color: var(--color-light);
}
.platform-footer--compact {
  padding: var(--space-s) var(--spacing);
}
.platform-footer__inner, .platform-footer__secondary {
  width: 100%;
  max-width: var(--platform-footer-max-width, 88rem);
  margin: 0 auto;
}
.platform-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  min-width: 0;
}
.platform-footer__brand, .platform-footer__meta {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}
.platform-footer__brand {
  min-width: 0;
}
.platform-footer__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.platform-footer__meta {
  justify-content: flex-end;
  text-align: right;
}
.platform-footer__secondary {
  display: grid;
  gap: calc(var(--space) * 0.45);
  margin-top: calc(var(--space) * 0.8);
  color: color-mix(in srgb, var(--int-platform-footer-content-color), transparent 32%);
  font-size: var(--font-size-s);
  line-height: 1.55;
}
@media (max-width: 700px) {
.platform-footer {
    padding: var(--space) var(--spacing);
}
.platform-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--space-s);
}
.platform-footer__nav, .platform-footer__meta {
    justify-content: flex-start;
    text-align: left;
}
}
.platform-footer--float {
  padding: var(--space-s) var(--space);
  border-top: none;
  background: transparent;
}
.platform-footer--float .platform-footer__inner {
  background: color-mix(in srgb, var(--int-platform-footer-surface-color), var(--color-primary) 4%);
  border-radius: var(--border-radius-xl);
  padding: var(--space) var(--space);
  border: 1px solid color-mix(in srgb, var(--int-platform-footer-content-color), transparent 90%);
  box-shadow: 0 -0.25rem 2rem color-mix(in srgb, var(--int-platform-footer-content-color), transparent 90%);
}.pill-header {
  --pill-header-top: 0;
  --pill-header-position: fixed;
  --pill-header-padding: 0.75rem clamp(1rem, 3vw, 2rem) 0;
  --pill-header-shell-padding: 0.3rem 0.3rem 0.3rem 1rem;
  --pill-header-shell-radius: 999px;
  --int-pill-header-translate-y: 0;
  --int-pill-header-surface-color: var(--color-dark);
  --int-pill-header-content-color: var(--color-light);
  --pill-header-shell-background: color-mix(in srgb, var(--int-pill-header-surface-color), transparent 10%);
  --pill-header-shell-shadow: 0 8px 32px color-mix(in srgb, var(--int-pill-header-surface-color), transparent 94%);
  --pill-header-shell-backdrop: blur(16px);
  --pill-header-nav-background: color-mix(in srgb, var(--int-pill-header-surface-color), transparent 0%);
  --pill-header-brand-color: var(--int-pill-header-content-color);
  --pill-header-link-color: color-mix(in srgb, var(--int-pill-header-content-color), transparent 33.33%);
  --pill-header-link-hover-color: var(--int-pill-header-content-color);
  --pill-header-link-hover-background: color-mix(in srgb, var(--int-pill-header-content-color), transparent 92%);
  --pill-header-link-active-color: var(--int-pill-header-content-color);
  --pill-header-link-active-background: color-mix(in srgb, var(--int-pill-header-content-color), transparent 94%);
  --pill-header-link-font-size: var(--font-size-s);
  --pill-header-brand-font-size: var(--font-size-xs);
  --pill-header-nav-gap: var(--space-s);
  --pill-header-link-padding: 0 var(--space-s);
  --pill-header-link-min-height: var(--space-l);
  --pill-header-toggle-size: var(--space-l);
  --pill-header-action-size: var(--space-l);
  position: var(--pill-header-position, fixed);
  top: var(--pill-header-top);
  left: 0;
  z-index: var(--z-sticky, 100);
  display: flex;
  justify-content: center;
  padding: var(--pill-header-padding);
  width: 100%;
  transform: translateY(var(--int-pill-header-translate-y));
  transition: transform 0.24s ease;
  will-change: transform;
}
.pill-header--hidden {
  --int-pill-header-translate-y: calc(-100% - var(--pill-header-top));
}
.pill-header--color-mode-light {
  --int-pill-header-surface-color: var(--color-light);
  --int-pill-header-content-color: var(--color-dark);
}
.pill-header--color-mode-dark {
  --int-pill-header-surface-color: var(--color-dark);
  --int-pill-header-content-color: var(--color-light);
}
.pill-header--color-mode-auto {
  --int-pill-header-surface-color: var(--color-light);
  --int-pill-header-content-color: var(--color-dark);
}
@media (prefers-color-scheme: dark) {
.pill-header--color-mode-auto {
    --int-pill-header-surface-color: var(--color-dark);
    --int-pill-header-content-color: var(--color-light);
}
}
:root[data-color-mode=dark] .pill-header--color-mode-auto, :root[data-theme=dark] .pill-header--color-mode-auto {
  --int-pill-header-surface-color: var(--color-dark);
  --int-pill-header-content-color: var(--color-light);
}
:root[data-color-mode=light] .pill-header--color-mode-auto, :root[data-theme=light] .pill-header--color-mode-auto {
  --int-pill-header-surface-color: var(--color-light);
  --int-pill-header-content-color: var(--color-dark);
}
.pill-header--color-mode-inverse {
  --int-pill-header-surface-color: var(--color-dark);
  --int-pill-header-content-color: var(--color-light);
}
@media (prefers-color-scheme: dark) {
.pill-header--color-mode-inverse {
    --int-pill-header-surface-color: var(--color-light);
    --int-pill-header-content-color: var(--color-dark);
}
}
:root[data-color-mode=dark] .pill-header--color-mode-inverse, :root[data-theme=dark] .pill-header--color-mode-inverse {
  --int-pill-header-surface-color: var(--color-light);
  --int-pill-header-content-color: var(--color-dark);
}
:root[data-color-mode=light] .pill-header--color-mode-inverse, :root[data-theme=light] .pill-header--color-mode-inverse {
  --int-pill-header-surface-color: var(--color-dark);
  --int-pill-header-content-color: var(--color-light);
}
.pill-header .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.pill-header__shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pill-header-nav-gap);
  padding: var(--pill-header-shell-padding);
  border-radius: var(--pill-header-shell-radius);
  background: var(--pill-header-shell-background);
  box-shadow: var(--pill-header-shell-shadow);
  backdrop-filter: var(--pill-header-shell-backdrop);
  position: relative;
}
.pill-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--pill-header-brand-font-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pill-header-brand-color);
  text-decoration: none;
  margin-left: calc(var(--space-s) * -1);
}
.pill-header__brand:hover, .pill-header__brand:focus-visible {
  text-decoration: none;
}
.pill-header__brand-text {
  font-size: inherit;
  font-weight: inherit;
}
.pill-header__nav {
  position: absolute;
  top: calc(var(--space-s) * -1);
  padding: var(--space-s);
  padding-top: var(--space-xl);
  z-index: -1;
  right: 0;
  left: calc(var(--space-s) * -1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 92%);
  border-radius: 1.75rem;
  backdrop-filter: var(--pill-header-shell-backdrop);
  background: var(--pill-header-nav-background);
  width: calc(100% + var(--space-s) * 2);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95) translateY(-8px);
  transform-origin: top center;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}
.pill-header__nav--open {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}
.pill-header__item {
  position: relative;
  display: flex;
  min-width: 0;
}
.pill-header__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--pill-header-link-min-height);
  padding: var(--pill-header-link-padding);
  border-radius: 999px;
  color: var(--pill-header-link-color);
  font-size: var(--pill-header-link-font-size);
  font-weight: 500;
  text-decoration: none;
  border: 0;
  background: var(--pill-header-link-background-color, transparent);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.pill-header__link:hover, .pill-header__link:focus-visible {
  color: var(--pill-header-link-hover-color);
  background: var(--pill-header-link-hover-background);
  text-decoration: none;
}
.pill-header__link--active {
  color: var(--pill-header-link-active-color);
  background: var(--pill-header-link-active-background);
}
.pill-header__link--disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
.pill-header__link-icon {
  font-size: 0.95em;
  opacity: 0.8;
}
.pill-header__link-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  transition: transform 160ms ease;
}
.pill-header__item--open .pill-header__link-chevron {
  transform: rotate(180deg);
}
.pill-header__submenu {
  display: grid;
  gap: var(--space-xs);
  padding: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 92%);
  border-radius: 0.875rem;
  background: var(--pill-header-shell-background);
  box-shadow: var(--pill-header-shell-shadow);
  backdrop-filter: var(--pill-header-shell-backdrop);
}
.pill-header__submenu-link {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-height: 2.25rem;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: 0.65rem;
  background: var(--pill-header-link-background-color, transparent);
  color: var(--pill-header-link-color);
  font-size: var(--pill-header-link-font-size);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.pill-header__submenu-link:hover, .pill-header__submenu-link:focus-visible {
  color: var(--pill-header-link-hover-color);
  background: var(--pill-header-link-hover-background);
  text-decoration: none;
}
.pill-header__submenu-link--active {
  color: var(--pill-header-link-active-color);
  background: var(--pill-header-link-active-background);
}
.pill-header__submenu-link--disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
.pill-header__submenu-icon {
  flex-shrink: 0;
  width: var(--space);
  height: var(--space);
  opacity: 0.8;
}
.pill-header__submenu-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.pill-header__submenu-label, .pill-header__submenu-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill-header__submenu-description {
  color: var(--pill-header-link-color);
  font-size: var(--font-size-s);
  font-weight: 400;
}
.pill-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pill-header-toggle-size);
  height: var(--pill-header-toggle-size);
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--int-pill-header-content-color), transparent 50%);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.pill-header__toggle:hover, .pill-header__toggle:focus-visible {
  color: var(--int-pill-header-content-color);
  background: var(--pill-header-link-hover-background);
}
.pill-header__toggle-icon {
  width: 16px;
  height: 16px;
}
.pill-header__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.pill-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: var(--pill-header-action-size);
  padding: 0 0.5rem;
  border: none;
  border-radius: 999px;
  background: var(--pill-header-link-background-color, transparent);
  color: var(--pill-header-link-color);
  font-size: var(--pill-header-link-font-size);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}
.pill-header__action:hover, .pill-header__action:focus-visible {
  color: var(--pill-header-link-hover-color);
  background: var(--pill-header-link-hover-background);
}
.pill-header__action--primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast, var(--color-light));
}
.pill-header__action--primary:hover, .pill-header__action--primary:focus-visible {
  background: color-mix(in srgb, var(--color-primary), transparent 15%);
  color: var(--color-primary-contrast, var(--color-light));
}
.pill-header__action--icon-only {
  padding: 0;
  width: var(--pill-header-action-size);
}
.pill-header__action--icon-only .pill-header__action-label {
  display: none;
}
.pill-header__action-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.pill-header__action-label {
  /* Visible by default */
}
.pill-header {
  /* --- Desktop (>=768px): nav inline, toggle hidden --- */
}
@media (min-width: 768px) {
.pill-header__toggle {
    display: none;
}
.pill-header__nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
}
.pill-header__submenu {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    min-width: 14rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transform-origin: top left;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.pill-header__item:hover .pill-header__submenu, .pill-header__item:focus-within .pill-header__submenu, .pill-header__submenu--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
}
.pill-header {
  /* --- Mobile (<768px): actions with icons collapse to icon-only --- */
}
@media (max-width: 767px) {
.pill-header__item {
    display: grid;
}
.pill-header__link {
    justify-content: flex-start;
    width: 100%;
}
.pill-header__link-chevron {
    margin-left: auto;
}
.pill-header__submenu {
    display: none;
    margin: 0.2rem 0 0.35rem;
    box-shadow: none;
}
.pill-header__submenu--open {
    display: grid;
}
.pill-header__action--has-icon:not(.pill-header__action--primary) .pill-header__action-label {
    display: none;
}
.pill-header__action--has-icon:not(.pill-header__action--primary) {
    padding: 0;
    width: var(--pill-header-action-size);
}
}
@media (prefers-reduced-motion: reduce) {
.pill-header {
    transition: none;
}
}.reference-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.reference-badge__surface {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: calc(var(--space) * 0.28) calc(var(--space) * 0.55);
  border-radius: var(--reference-badge-surface-border-radius, var(--int-reference-badge-surface-border-radius, 999px));
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 3%);
  color: color-mix(in srgb, var(--color-foreground), transparent 16%);
  overflow: hidden;
}
.reference-badge__label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(var(--font-size) * 0.92);
  font-weight: var(--font-weight-bold);
}
.reference-badge__actions {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--space) * 0.25);
  padding: calc(var(--space) * 0.16) calc(var(--space) * 0.18) calc(var(--space) * 0.16) calc(var(--space) * 1.8);
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-background), var(--color-foreground) 3%) 34%);
  opacity: 0;
  pointer-events: none;
  transition: var(--reference-badge-actions-action-transition, var(--int-reference-badge-actions-action-transition, opacity 140ms ease));
}
.reference-badge__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--reference-badge-action-action-size, var(--int-reference-badge-action-action-size, calc(var(--space) * 1.85)));
  height: var(--reference-badge-action-action-size, var(--int-reference-badge-action-action-size, calc(var(--space) * 1.85)));
  padding: 0;
  border-radius: var(--reference-badge-action-border-radius, var(--int-reference-badge-action-border-radius, 999px));
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 1%);
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  text-decoration: none;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.reference-badge__action:hover {
  color: var(--color-foreground);
  border-color: color-mix(in srgb, var(--color-foreground), transparent 76%);
  background: color-mix(in srgb, var(--color-foreground), transparent 96%);
}
.reference-badge:hover .reference-badge__actions, .reference-badge:focus-within .reference-badge__actions {
  opacity: 1;
  pointer-events: auto;
}.search-results {
  display: grid;
  gap: 0.2rem;
}
.search-results__status {
  padding: 0.35rem 0.55rem 0.55rem;
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.search-results__result {
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.8rem;
  color: inherit;
  text-decoration: none;
}
.search-results__result:hover {
  background: color-mix(in srgb, var(--color-primary), transparent 94%);
}
.search-results__result-kind {
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.search-results__result-title {
  font-size: 0.98rem;
}
.search-results__result-summary, .search-results__empty {
  color: color-mix(in srgb, var(--color-foreground), transparent 30%);
  font-size: 0.9rem;
  line-height: 1.45;
}
.search-results__empty {
  padding: 0.85rem;
}.section {
  padding: var(--section-padding, var(--int-section-padding, var(--space-xl) 0));
}
.section--centered {
  text-align: center;
}
.section[data-variant=hero] {
  padding: var(--space-xxl) 0 var(--space-xxl);
  min-height: 80vh;
  display: flex;
  align-items: center;
}
.section[data-variant=cta] {
  background: var(--color-primary);
  color: var(--color-background);
}
.section[data-variant=cta] :deep(*) {
  color: inherit;
}
.section[data-variant=alternate] {
  background: color-mix(in srgb, var(--color-primary), transparent 95%);
}.signin-form {
  --signin-form-accent: var(--color-primary);
  width: min(100%, 32rem);
  display: grid;
  gap: 1.35rem;
  padding: clamp(1.3rem, 3vw, 2.1rem);
  border-radius: var(--border-radius-l);
  border: 1px solid color-mix(in srgb, var(--signin-form-accent), transparent 76%);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--signin-form-accent), transparent 84%), transparent 40%), linear-gradient(180deg, color-mix(in srgb, var(--color-background), transparent 0%), color-mix(in srgb, var(--color-background), var(--signin-form-accent) 4%));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 84%), 0 1.4rem 3rem color-mix(in srgb, var(--color-foreground), transparent 92%);
}
.signin-form__brand {
  display: flex;
  align-items: center;
  min-height: 1.5rem;
}
.signin-form__header, .signin-form__form, .signin-form__footer, .signin-form__providers {
  display: grid;
  gap: 0.95rem;
}
.signin-form__eyebrow {
  margin: 0;
  color: var(--signin-form-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.signin-form__title {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.signin-form__description {
  margin: 0;
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  line-height: 1.55;
}
.signin-form__providers-label, .signin-form__field-label {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-foreground), transparent 20%);
}
.signin-form__providers-grid {
  display: grid;
  gap: 0.75rem;
}
.signin-form__divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.85rem;
  color: color-mix(in srgb, var(--color-foreground), transparent 48%);
  font-size: 0.85rem;
}
.signin-form__divider-line {
  height: 1px;
  background: color-mix(in srgb, var(--color-foreground), transparent 88%);
}
.signin-form__field {
  display: grid;
  gap: 0.5rem;
}
.signin-form__field-shell {
  position: relative;
}
.signin-form__field-control {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 84%);
  border-radius: calc(var(--border-radius, 0.8rem) * 1.1);
  background: color-mix(in srgb, var(--color-background), white 4%);
  color: var(--color-foreground);
  font: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.signin-form__field-control::placeholder {
  color: color-mix(in srgb, var(--color-foreground), transparent 56%);
}
.signin-form__field-control:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--signin-form-accent), transparent 26%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signin-form-accent), transparent 84%);
}
.signin-form__field-control:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.signin-form__field-control--has-toggle {
  padding-right: 3.3rem;
}
.signin-form__toggle-password {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-foreground), transparent 28%);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}
.signin-form__toggle-password:hover {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--signin-form-accent), transparent 90%);
}
.signin-form__supporting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.signin-form__checkbox {
  flex: 1 1 auto;
  min-width: 12rem;
}
.signin-form__link, .signin-form__alternate-link {
  color: var(--signin-form-accent);
  font-weight: 600;
  text-decoration: none;
}
.signin-form__link--button, .signin-form__alternate-link--button {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}
.signin-form__footer {
  gap: 0.7rem;
}
.signin-form__alternate {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  text-align: center;
}
.signin-form__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.signin-form :deep(.input-checkbox) {
  gap: 0;
}
.signin-form :deep(.input-checkbox__label) {
  font-size: 0.92rem;
}
@media (max-width: 560px) {
.signin-form {
    width: 100%;
    border-radius: var(--border-radius-l);
}
.signin-form__supporting {
    align-items: flex-start;
    flex-direction: column;
}
}.stat-card {
  --stat-card-color: var(--color-primary);
  --stat-card-border-color: color-mix(in srgb, var(--stat-card-color), transparent 74%);
  --stat-card-background:
    radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--stat-card-color), transparent 84%) 0,
      transparent 42%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-background), transparent 0%) 0%,
      color-mix(in srgb, var(--color-background), var(--stat-card-color) 4%) 100%
    );
  --stat-card-value-color: color-mix(in srgb, var(--color-foreground), var(--stat-card-color) 14%);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 1.5rem);
  min-height: 14rem;
  padding: clamp(1.25rem, 2vw, 2rem);
  border: 1px solid var(--stat-card-border-color);
  border-radius: var(--border-radius-l);
  background: var(--stat-card-background);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 88%), 0 1.25rem 3rem color-mix(in srgb, var(--color-background), transparent 48%);
  overflow: hidden;
}
.stat-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space);
}
.stat-card__value-wrap {
  min-width: 0;
  flex: 1 1 auto;
}
.stat-card__value {
  margin: 0;
  color: var(--stat-card-value-color);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.stat-card__affix {
  font-size: 0.48em;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.stat-card__affix--prefix {
  margin-right: 0.08em;
}
.stat-card__affix--suffix {
  margin-left: 0.1em;
}
.stat-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  color: var(--stat-card-color);
  background: color-mix(in srgb, var(--stat-card-color), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--stat-card-color), transparent 72%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 82%);
}
.stat-card__body {
  display: grid;
  gap: 0.65rem;
  max-width: 24rem;
}
.stat-card__label {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.2;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-foreground), transparent 14%);
  text-wrap: balance;
}
.stat-card__description {
  margin: 0;
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  font-size: var(--font-size-m, 1rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.stat-card--has-icon .stat-card__value-wrap {
  max-width: calc(100% - 4.25rem);
}
@media (max-width: 700px) {
.stat-card {
    min-height: 12rem;
    border-radius: var(--border-radius-l);
}
.stat-card__icon {
    width: 2.85rem;
    height: 2.85rem;
}
.stat-card__body {
    max-width: none;
}
}.signup-form {
  --signup-form-accent: var(--color-primary);
  width: min(100%, 34rem);
  display: grid;
  gap: 1.35rem;
  padding: clamp(1.3rem, 3vw, 2.1rem);
  border-radius: var(--border-radius-l);
  border: 1px solid color-mix(in srgb, var(--signup-form-accent), transparent 76%);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--signup-form-accent), transparent 84%), transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--color-background), transparent 0%), color-mix(in srgb, var(--color-background), var(--signup-form-accent) 4%));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 84%), 0 1.4rem 3rem color-mix(in srgb, var(--color-foreground), transparent 92%);
}
.signup-form__brand {
  display: flex;
  align-items: center;
  min-height: 1.5rem;
}
.signup-form__header, .signup-form__form, .signup-form__footer, .signup-form__providers, .signup-form__options {
  display: grid;
  gap: 0.95rem;
}
.signup-form__eyebrow {
  margin: 0;
  color: var(--signup-form-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.signup-form__title {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.signup-form__description {
  margin: 0;
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  line-height: 1.55;
}
.signup-form__providers-label, .signup-form__field-label {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-foreground), transparent 20%);
}
.signup-form__providers-grid {
  display: grid;
  gap: 0.75rem;
}
.signup-form__divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.85rem;
  color: color-mix(in srgb, var(--color-foreground), transparent 48%);
  font-size: 0.85rem;
}
.signup-form__divider-line {
  height: 1px;
  background: color-mix(in srgb, var(--color-foreground), transparent 88%);
}
.signup-form__field {
  display: grid;
  gap: 0.5rem;
}
.signup-form__field-shell {
  position: relative;
}
.signup-form__field-control {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 84%);
  border-radius: calc(var(--border-radius, 0.8rem) * 1.1);
  background: color-mix(in srgb, var(--color-background), white 4%);
  color: var(--color-foreground);
  font: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.signup-form__field-control::placeholder {
  color: color-mix(in srgb, var(--color-foreground), transparent 56%);
}
.signup-form__field-control:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--signup-form-accent), transparent 26%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signup-form-accent), transparent 84%);
}
.signup-form__field-control:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.signup-form__field-control--has-toggle {
  padding-right: 3.3rem;
}
.signup-form__toggle-password {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-foreground), transparent 28%);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}
.signup-form__toggle-password:hover {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--signup-form-accent), transparent 90%);
}
.signup-form__field-error {
  margin: 0;
  color: var(--color-error);
  font-size: 0.88rem;
}
.signup-form__checkbox {
  min-width: 0;
}
.signup-form__legal-note {
  margin: 0;
  color: color-mix(in srgb, var(--color-foreground), transparent 38%);
  font-size: 0.9rem;
  line-height: 1.5;
}
.signup-form__footer {
  gap: 0.7rem;
}
.signup-form__alternate {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  text-align: center;
}
.signup-form__alternate-link {
  color: var(--signup-form-accent);
  font-weight: 600;
  text-decoration: none;
}
.signup-form__alternate-link--button {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}
.signup-form__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.signup-form :deep(.input-checkbox) {
  gap: 0;
}
.signup-form :deep(.input-checkbox__label) {
  font-size: 0.92rem;
  line-height: 1.4;
}
@media (max-width: 560px) {
.signup-form {
    width: 100%;
    border-radius: var(--border-radius-l);
}
}.table-wrapper {
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th, .table td {
  padding: var(--space-s) var(--space-m);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.table th {
  font-weight: var(--font-weight-semibold);
  background: var(--color-background-secondary);
}
.table tr:hover {
  background: var(--color-background-hover);
}.ui-textarea {
  width: 100%;
  min-height: var(--ui-textarea-min-height, var(--int-ui-textarea-min-height, calc(var(--space) * 7)));
  padding: calc(var(--space) * 0.92) var(--space);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 84%);
  border-radius: var(--border-radius-xl);
  background: color-mix(in srgb, var(--color-background), transparent 2%);
  color: var(--color-foreground);
  font-size: var(--font-size-m, 1rem);
  line-height: var(--ui-textarea-line-height, var(--int-ui-textarea-line-height, 1.5));
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  outline: none;
  resize: vertical;
}
.ui-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--border-width) color-mix(in srgb, var(--color-primary), transparent 14%);
  background: color-mix(in srgb, var(--color-background), var(--color-primary) 6%);
}
.ui-textarea--is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}.video-player {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 3%);
}
.video-player__image, .video-player__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-player__image {
  z-index: 1;
  transition: opacity 180ms ease;
}
.video-player__video {
  z-index: 2;
  opacity: 0;
  transition: opacity 180ms ease;
}
.video-player--video-visible .video-player__image {
  opacity: 0;
  pointer-events: none;
}
.video-player--video-visible .video-player__video {
  opacity: 1;
}
.video-player--fit-contain .video-player__image,
.video-player--fit-contain .video-player__video {
  object-fit: contain;
}.copy-value-button {
  --copy-value-button-color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  --copy-value-button-border: color-mix(in srgb, var(--color-foreground), transparent 88%);
  --copy-value-button-background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  padding: 0;
  border-radius: 999rem;
  border: 1px solid var(--copy-value-button-border);
  background: var(--copy-value-button-background);
  color: var(--copy-value-button-color);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.copy-value-button:hover {
  color: var(--color-foreground);
  border-color: color-mix(in srgb, var(--color-foreground), transparent 76%);
  background: color-mix(in srgb, var(--color-foreground), transparent 96%);
}
.copy-value-button:focus-visible {
  outline: 2px solid var(--color-focus, var(--color-primary));
  outline-offset: 2px;
}
.copy-value-button--copied {
  --copy-value-button-color: var(--color-success);
  --copy-value-button-border: color-mix(in srgb, var(--color-success), transparent 68%);
  --copy-value-button-background: color-mix(in srgb, var(--color-success), transparent 92%);
}.theme-toggle {
  --icon-fill: color-mix(in srgb, currentColor, transparent 25%);
  --icon-fill-opacity: 1;
  --icon-stroke-color: currentColor;
  --icon-stroke-color-secondary: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--theme-toggle-size, var(--int-theme-toggle-size, calc(var(--space) * 2.5)));
  height: var(--theme-toggle-size, var(--int-theme-toggle-size, calc(var(--space) * 2.5)));
  border: 1px solid var(--border-color, var(--color-accent));
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-foreground), transparent 97%);
  color: var(--color-foreground);
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-toggle:hover {
  background: color-mix(in srgb, var(--color-primary), transparent 88%);
  border-color: color-mix(in srgb, var(--color-primary), transparent 35%);
  color: var(--color-foreground);
}
.theme-toggle:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}
.progress--size-small .progress__bar {
  height: 4px;
}
.progress--size-small .progress__label,
.progress--size-small .progress__details {
  font-size: var(--font-size-s);
}
.progress--size-medium .progress__bar {
  height: 8px;
}
.progress--size-large .progress__bar {
  height: 12px;
}
.progress--size-large .progress__label {
  font-size: var(--font-size-l);
}
.progress__bar {
  position: relative;
  width: 100%;
  background: color-mix(in srgb, var(--color-foreground), transparent 90%);
  border-radius: var(--border-radius-s);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  transition: width 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress__fill--variant-primary {
  background: var(--color-primary);
}
.progress__fill--variant-success {
  background: var(--color-success);
}
.progress__fill--variant-warning {
  background: var(--color-warning);
}
.progress__fill--variant-error {
  background: var(--color-error);
}
.progress__fill--variant-info {
  background: var(--color-info);
}
.progress__fill--indeterminate {
  width: 30% !important;
  position: absolute;
  animation: progress-indeterminate 1.5s infinite ease-in-out;
}
.progress__bar-label {
  font-size: var(--font-size-xs);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--color-foreground), transparent 80%);
}
.progress__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
}
.progress__label-text {
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
}
.progress__label-percentage {
  color: var(--color-foreground-secondary);
  font-variant-numeric: tabular-nums;
}
.progress__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  font-size: var(--font-size-s);
}
.progress__detail {
  color: var(--color-foreground-secondary);
  white-space: nowrap;
}
.progress__detail::after {
  content: "•";
  margin-left: var(--space-m);
}
.progress__detail:last-child::after {
  display: none;
}
.progress__content {
  margin-top: var(--space-s);
}
.progress__circular {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}
.progress__circular-svg {
  width: 4rem;
  height: 4rem;
  transform: rotate(-90deg);
}
.progress__circular-track {
  stroke: color-mix(in srgb, var(--color-foreground), transparent 90%);
}
.progress__circular-fill {
  stroke: var(--color-primary);
  transition: stroke-dasharray 0.3s ease;
}
.progress__circular-fill--variant-success {
  stroke: var(--color-success);
}
.progress__circular-fill--variant-warning {
  stroke: var(--color-warning);
}
.progress__circular-fill--variant-error {
  stroke: var(--color-error);
}
.progress__circular-fill--variant-info {
  stroke: var(--color-info);
}
.progress__circular-label {
  position: absolute;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-semibold);
}
@keyframes progress-indeterminate {
0% {
    transform: translateX(-100%);
}
50% {
    transform: translateX(220%);
}
100% {
    transform: translateX(360%);
}
}
@keyframes circular-indeterminate {
0% {
    stroke-dasharray: 1 283;
    stroke-dashoffset: 0;
}
50% {
    stroke-dasharray: 212.25 70.75;
    stroke-dashoffset: -35;
}
100% {
    stroke-dasharray: 212.25 70.75;
    stroke-dashoffset: -248;
}
}.pricing-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pricing-card--highlighted {
  border: 2px solid var(--color-primary);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary), transparent 85%);
}
.pricing-card--current {
  background: color-mix(in srgb, var(--color-primary), transparent 95%);
}
.pricing-card__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-xs) 0;
}
.pricing-card__description {
  color: color-mix(in srgb, var(--color-foreground), transparent 30%);
  margin: 0;
}
.pricing-card__pricing {
  text-align: center;
  padding: var(--space-l) 0;
}
.pricing-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-xs);
}
.pricing-card__amount {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.pricing-card__period {
  color: color-mix(in srgb, var(--color-foreground), transparent 30%);
  font-size: var(--font-size-m);
}
.pricing-card__monthly-equivalent {
  font-size: var(--font-size-s);
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
  margin-top: var(--space-xs);
}
.pricing-card__savings {
  font-size: var(--font-size-s);
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-xs);
}
.pricing-card__features {
  flex: 1;
  padding: 0 var(--space-l) var(--space-l);
}
.pricing-card__feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
}
.pricing-card__feature--excluded {
  color: color-mix(in srgb, var(--color-foreground), transparent 50%);
}
.pricing-card__feature-icon {
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
}
.pricing-card__feature-icon--included {
  color: var(--color-success);
}
.pricing-card__feature-icon--excluded {
  color: color-mix(in srgb, var(--color-foreground), transparent 70%);
}
.pricing-card__feature-text {
  flex: 1;
  font-size: var(--font-size-s);
}
.pricing-card__action {
  width: 100%;
}.pricing-grid__header {
  text-align: center;
  margin-bottom: var(--space-l);
}
.pricing-grid__toggle {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-xl);
}
.pricing-grid__grid {
  display: grid;
  gap: var(--space-l);
  align-items: stretch;
}
@media (min-width: 640px) {
.pricing-grid__grid {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.pricing-grid--columns-3 .pricing-grid__grid {
    grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024px) {
.pricing-grid--columns-4 .pricing-grid__grid {
    grid-template-columns: repeat(5, 1fr);
}
}
.pricing-grid__card {
  height: 100%;
}
.pricing-grid__footer {
  margin-top: var(--space-xl);
  text-align: center;
}.loader-spinner {
  width: calc(var(--loader-spinner-size) + var(--loader-spinner-padding) * 2);
  height: calc(var(--loader-spinner-size) + var(--loader-spinner-padding) * 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.loader-spinner::before {
  content: "";
  width: var(--loader-spinner-size);
  height: var(--loader-spinner-size);
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--color-foreground), transparent 85%);
  border-top-color: var(--color-primary);
  animation: loaderSpinnerRotate 0.75s linear infinite;
}
@keyframes loaderSpinnerRotate {
to {
    transform: rotate(360deg);
}
}.ui-breadcrumb {
  height: fit-content;
  display: flex;
  align-items: center;
  font-size: var(--ui-breadcrumb-font-size, var(--int-ui-breadcrumb-font-size, 1em));
}
@media screen and (max-width: 600px) {
.ui-breadcrumb {
    font-size: var(--ui-breadcrumb-font-size-mobile, var(--int-ui-breadcrumb-font-size-mobile, 0.875em));
}
}
.ui-breadcrumb__list {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}
.ui-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--ui-breadcrumb-item-gap, var(--int-ui-breadcrumb-item-gap, var(--space-s)));
  padding: var(--ui-breadcrumb-item-padding, var(--int-ui-breadcrumb-item-padding, var(--space-xs)));
}
.ui-breadcrumb__item--active {
  font-weight: bold;
}
.ui-breadcrumb__item::after {
  content: "/";
}
.ui-breadcrumb__item:last-child::after {
  content: "";
}
.ui-breadcrumb__link {
  text-decoration: none;
  color: currentColor;
}
.ui-breadcrumb__link:hover {
  text-decoration: underline;
}
.ui-breadcrumb__item:first-child {
  color: var(--color-foreground);
  font-weight: var(--font-weight-medium);
}
.ui-breadcrumb__item--active {
  font-weight: bold;
}
.ui-breadcrumb__item::after {
  content: "/";
}
.ui-breadcrumb__item:last-child::after {
  content: "";
}
.ui-breadcrumb__link {
  text-decoration: none;
}
.ui-breadcrumb__link:hover {
  text-decoration: underline;
}
.ui-breadcrumb__text {
  color: var(--color-foreground);
}.ui-pagination {
  display: flex;
  align-items: center;
  gap: var(--space);
  flex-wrap: wrap;
}
.ui-pagination__sizes, .ui-pagination__jumper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.ui-pagination__label {
  font-size: var(--font-size-s);
  color: var(--color-foreground);
}
.ui-pagination__select, .ui-pagination__input {
  min-height: var(--ui-pagination-select-ui-pagination-input-control-size, var(--int-ui-pagination-select-ui-pagination-input-control-size, calc(var(--space) * 2.25)));
  padding: 0 var(--space-s);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 82%);
  border-radius: var(--border-radius);
  background: var(--color-background);
  color: var(--color-foreground);
}
.ui-pagination__controls, .ui-pagination__pager {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.ui-pagination__button {
  min-width: var(--ui-pagination-button-control-size, var(--int-ui-pagination-button-control-size, calc(var(--space) * 2.25)));
  min-height: var(--ui-pagination-button-control-size, var(--int-ui-pagination-button-control-size, calc(var(--space) * 2.25)));
  padding: 0 var(--space-s);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 82%);
  border-radius: var(--border-radius);
  background: var(--color-background);
  color: var(--color-foreground);
  cursor: pointer;
}
.ui-pagination__button--active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary), transparent 88%);
  color: var(--color-primary);
}
.ui-pagination__ellipsis {
  padding: 0 var(--space-xs);
}.draggable-visibility-menu {
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  background: var(--color-background);
  overflow: hidden;
}
.draggable-visibility-menu .draggable__item {
  padding: var(--space-xs) var(--space-s);
  gap: var(--space-s);
  transition: background 120ms ease, opacity 120ms ease;
}
.draggable-visibility-menu .draggable__item:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground), transparent 92%);
}
.draggable-visibility-menu .draggable__item:hover {
  background: color-mix(in srgb, var(--color-foreground), transparent 96%);
}
.draggable-visibility-menu .draggable__item--hidden {
  opacity: 0.5;
}
.draggable-visibility-menu .draggable__handle {
  padding: 0;
}
.draggable-visibility-menu__label {
  flex: 1;
  font-size: var(--font-size-s);
  color: var(--color-foreground);
  line-height: 1;
}
.draggable-visibility-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: var(--border-radius-s);
  background: transparent;
  color: color-mix(in srgb, var(--color-foreground), transparent 65%);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease;
}
.draggable-visibility-menu__toggle .icon {
  width: 1rem;
  height: 1rem;
}
.draggable-visibility-menu__toggle:hover {
  background: color-mix(in srgb, var(--color-foreground), transparent 90%);
  color: var(--color-foreground);
}
.draggable-visibility-menu__toggle--visible {
  color: var(--color-primary);
}
.draggable-visibility-menu__toggle--visible:hover {
  background: color-mix(in srgb, var(--color-primary), transparent 88%);
  color: var(--color-primary);
}.ui-data-list-selection-toolbar {
  display: inline-flex;
  width: auto;
}
.ui-data-list-selection-toolbar__main {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space);
}
.ui-data-list-selection-toolbar__anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  min-width: 180px;
  font-size: var(--font-size-l);
}
.ui-data-list-selection-toolbar__anchor-icon {
  font-size: 1em;
  color: color-mix(in srgb, var(--color-secondary), var(--color-foreground) 20%);
}
.ui-data-list-selection-toolbar__summary {
  margin: 0;
  font-size: var(--font-size-s);
  color: color-mix(in srgb, var(--color-foreground), transparent 20%);
}
.ui-data-list-selection-toolbar__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-xs));
  min-width: 260px;
  max-width: min(440px, 100vw - var(--space) * 2);
  border-radius: var(--border-radius);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 80%);
  background: color-mix(in srgb, var(--color-background), transparent 4%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--color-foreground), transparent 84%);
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
}
.ui-data-list-selection-toolbar__summary-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.ui-data-list-selection-toolbar__panel-title {
  margin: 0;
  font-size: var(--font-size-s);
  font-weight: 600;
}
.ui-data-list-selection-toolbar__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-height: 240px;
  overflow: auto;
}
.ui-data-list-selection-toolbar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-width: 0;
  padding: var(--space-xs);
  border-radius: var(--border-radius-s);
  background-color: color-mix(in srgb, var(--color-background), var(--color-foreground) 4%);
}
.ui-data-list-selection-toolbar__item:hover .ui-data-list-selection-toolbar__item-remove-button {
  opacity: 1;
  transform: scale(1);
}
.ui-data-list-selection-toolbar__item-content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  min-width: 0;
}
.ui-data-list-selection-toolbar__item-icon {
  font-size: 1.25em;
  background-color: var(--color-background);
  border-radius: 50%;
  padding: var(--space-xs);
  color: var(--color-primary);
}
.ui-data-list-selection-toolbar__item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-foreground), transparent 15%);
}
.ui-data-list-selection-toolbar__item-remove-button {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.25s var(--cubic-bezier);
}
.ui-data-list-selection-toolbar__more {
  margin: 0;
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-foreground), transparent 35%);
}
.ui-data-list-selection-toolbar__controls {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
@media (max-width: 640px) {
.ui-data-list-selection-toolbar__main {
    flex-direction: column;
    align-items: flex-start;
}
.ui-data-list-selection-toolbar__panel {
    max-width: calc(100vw - var(--space-xs) * 2);
}
}
.ui-data-list-selection-toolbar-panel-enter-active,
.ui-data-list-selection-toolbar-panel-leave-active {
  transition: opacity 160ms ease, transform 180ms ease;
}
.ui-data-list-selection-toolbar-panel-enter-from,
.ui-data-list-selection-toolbar-panel-leave-to {
  opacity: 0;
  transform: translateY(8px);
}.ui-toolbar-shell {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--space);
  z-index: var(--ui-toolbar-shell-z-index, var(--int-ui-toolbar-shell-z-index, 70));
  pointer-events: none;
  padding: 0 var(--space);
}
.ui-toolbar-shell__stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-s);
}
.ui-toolbar-shell__item {
  pointer-events: none;
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: var(--toolbar-z-index, 70);
}
.ui-toolbar-shell__inner {
  pointer-events: auto;
  width: fit-content;
  max-width: var(--ui-toolbar-shell-inner-max-width, var(--int-ui-toolbar-shell-inner-max-width, min(1280px, 100%)));
  border-radius: var(--border-radius-xxl);
  background: color-mix(in srgb, var(--color-background), transparent 8%);
  box-shadow: var(--ui-toolbar-shell-inner-shadow, var(--int-ui-toolbar-shell-inner-shadow, 0 18px 48px color-mix(in srgb, var(--color-foreground), transparent 78%)));
  backdrop-filter: blur(var(--ui-toolbar-shell-inner-blur, var(--int-ui-toolbar-shell-inner-blur, 8px)));
  padding: var(--space);
  overflow: visible;
}
.ui-toolbar-shell__item--closing {
  pointer-events: none;
}
.toolbar-shell-enter-active,
.toolbar-shell-leave-active {
  transition: opacity 180ms ease, transform 220ms ease;
}
.toolbar-shell-enter-from,
.toolbar-shell-leave-to {
  opacity: 0;
  transform: translateY(var(--toolbar-shell-enter-from-toolbar-shell-leave-to-slide-offset, var(--int-toolbar-shell-enter-from-toolbar-shell-leave-to-slide-offset, 16px)));
}.ui-data-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  position: relative;
  --int-datalist-cell-padding: var(
  	--datalist-cell-padding,
  	var(--space-s) var(--space)
  );
  --int-datalist-font-size: var(--datalist-font-size, var(--font-size-s));
  --int-datalist-border-color: var(
  	--datalist-border-color,
  	color-mix(in srgb, var(--color-foreground), transparent 90%)
  );
  --int-datalist-border-radius: var(
  	--datalist-border-radius,
  	var(--border-radius)
  );
  --int-datalist-header-background: var(
  	--datalist-header-background,
  	color-mix(in srgb, var(--color-foreground), transparent 95%)
  );
  --int-datalist-header-text-color: var(
  	--datalist-header-text-color,
  	var(--color-foreground)
  );
  border-radius: var(--border-radius);
  border: 1px solid var(--datalist-table-border-color, var(--int-datalist-border-color));
  box-shadow: 0 0 10px 0 color-mix(in srgb, var(--datalist-table-border-color, var(--int-datalist-border-color)), transparent 50%);
}
.ui-data-list__content {
  transition: filter 180ms ease, opacity 180ms ease;
}
.ui-data-list__loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}
.ui-data-list__scroller {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-foreground), transparent 80%) transparent;
}
.ui-data-list__grid {
  min-width: 100%;
  width: max-content;
}
.ui-data-list__header, .ui-data-list__row {
  display: grid;
  grid-template-columns: var(--data-list-columns);
  gap: var(--space-s);
  align-items: center;
  width: 100%;
}
.ui-data-list__header {
  border-bottom: 1px solid var(--int-datalist-border-color);
  padding: 0 0 var(--space-xs);
  border-radius: var(--int-datalist-border-radius) var(--int-datalist-border-radius) 0 0;
  color: var(--int-datalist-header-text-color);
  position: sticky;
  top: 0;
  z-index: 2;
}
.ui-data-list__body {
  display: flex;
  flex-direction: column;
}
.ui-data-list__row {
  --int-datalist-row-accent: var(--datalist-row-accent, transparent);
  border-bottom: 1px solid var(--int-datalist-border-color);
  cursor: pointer;
  transition: box-shadow 0.2s ease, background-color 120ms ease;
  box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--int-datalist-row-accent), transparent 50%);
}
.ui-data-list__row .ui-data-list__cell:first-child {
  box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--int-datalist-row-accent), transparent 50%);
}
.ui-data-list__row:last-child {
  border-bottom: 0;
}
.ui-data-list__row--clickable:hover {
  background: color-mix(in srgb, var(--color-secondary), transparent 94%);
}
.ui-data-list__row:hover .ui-data-list__cell--row-checkbox {
  opacity: 1;
  pointer-events: auto;
}
.ui-data-list__row--selected {
  background: color-mix(in srgb, var(--color-secondary), transparent 90%);
}
.ui-data-list__row--active {
  background: color-mix(in srgb, var(--color-secondary), transparent 90%);
}
.ui-data-list__row--selection-disabled {
  opacity: 0.5;
}
.ui-data-list__cell {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: var(--int-datalist-font-size);
  padding: var(--int-datalist-cell-padding);
}
.ui-data-list__cell--header {
  font-weight: 600;
  background: transparent;
  border: none;
  padding: var(--int-datalist-cell-padding);
  text-align: left;
  color: inherit;
  position: relative;
  width: 100%;
  justify-content: flex-start;
}
.ui-data-list__cell--sortable {
  cursor: pointer;
}
.ui-data-list__cell--checkbox {
  justify-content: center;
  width: 28px;
  --field-min-width: 0px;
}
.ui-data-list__cell--row-checkbox {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  --field-min-width: 0px;
  position: sticky;
  left: 0;
  z-index: 10;
}
.ui-data-list__cell--settings {
  justify-content: flex-end;
  width: 32px;
}
.ui-data-list__cell--actions {
  justify-content: flex-end;
  width: 40px;
  position: sticky;
  right: 0;
  z-index: 1;
  background: transparent;
}
.ui-data-list__cell--left {
  justify-content: flex-start;
  text-align: left;
}
.ui-data-list__cell--center {
  justify-content: center;
  text-align: center;
}
.ui-data-list__cell--right {
  justify-content: flex-end;
  text-align: right;
}
.ui-data-list__header-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  min-width: 0;
}
.ui-data-list__resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--space-s);
  cursor: col-resize;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.ui-data-list__resize-handle::before {
  content: "";
  width: 2px;
  height: 58%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-foreground), transparent 72%);
  transition: background-color 120ms ease;
}
.ui-data-list__resize-handle:hover::before {
  background: color-mix(in srgb, var(--color-secondary), transparent 25%);
}
.ui-data-list__cell--header:hover .ui-data-list__resize-handle, .ui-data-list--resizing .ui-data-list__resize-handle {
  opacity: 1;
  pointer-events: auto;
}
.ui-data-list--resizing {
  user-select: none;
  cursor: col-resize;
}
.ui-data-list__header-settings {
  position: absolute;
  right: var(--space-xs);
  top: var(--space-xs);
  z-index: 3;
  align-self: start;
  margin-left: auto;
}
.ui-data-list__column-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.ui-data-list__column-menu-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid color-mix(in srgb, var(--color-foreground), transparent 90%);
}
.ui-data-list__column-menu-reset, .ui-data-list__column-menu-visibility-toggle {
  width: auto;
}
.ui-data-list--selection .ui-data-list__cell--row-checkbox {
  opacity: 1;
  pointer-events: auto;
}
.ui-data-list--loading .ui-data-list__content {
  filter: blur(2px);
  opacity: 0.25;
  pointer-events: none;
}
.ui-data-list__row-actions-trigger {
  pointer-events: none;
  transition: transform 0.25s ease-in-out;
  font-size: var(--font-size);
  transform: scale(0);
}
.ui-data-list__row:hover .ui-data-list__row-actions-trigger {
  transform: scale(1);
  pointer-events: auto;
}
.ui-data-list__sort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1em;
  line-height: 1;
}
.ui-data-list__sort-icon {
  font-size: 1em;
  transform-origin: center;
  transition: color 140ms ease, transform 140ms ease, opacity 140ms ease;
}
.ui-data-list__sort-icon--active {
  color: var(--color-secondary);
  opacity: 1;
}
.ui-data-list__sort-icon--inactive {
  color: color-mix(in srgb, var(--color-foreground), transparent 58%);
  opacity: 0.65;
  transform: scale(0.9);
}
.ui-data-list__sort-icon--ascending {
  transform: rotate(180deg) scale(1.08);
}
.ui-data-list__sort-icon--descending {
  transform: rotate(0deg) scale(1.08);
}
.ui-data-list__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  flex-wrap: wrap;
  padding: var(--space);
}
.ui-data-list__range {
  margin: 0;
  font-size: var(--font-size-s);
  color: color-mix(in srgb, var(--color-foreground), transparent 35%);
}
.ui-data-list__empty {
  text-align: center;
  color: color-mix(in srgb, var(--color-foreground), transparent 45%);
  padding: var(--space-s);
}
.ui-data-list__checkbox .ui-field {
  min-width: 0;
  gap: 0;
}
.ui-data-list__checkbox .ui-field__container {
  gap: 0;
}
.ui-data-list__checkbox .ui-field__control {
  min-height: 0;
}.ui-item-list__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ui-item-list__row {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 86%);
  border-radius: var(--border-radius);
  background: var(--color-background);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.ui-item-list__row:hover {
  border-color: color-mix(in srgb, var(--color-secondary), transparent 55%);
  background: color-mix(in srgb, var(--color-secondary), transparent 96%);
}
.ui-item-list__row--active {
  border-color: color-mix(in srgb, var(--color-secondary), transparent 35%);
  background: color-mix(in srgb, var(--color-secondary), transparent 92%);
}
.ui-item-list__row--disabled {
  opacity: 0.6;
  pointer-events: none;
}
.ui-item-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex: 1;
  width: 100%;
  padding: var(--space-s) var(--space);
  border: 0;
  background: transparent;
  text-decoration: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ui-item-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-m);
  color: var(--color-secondary);
}
.ui-item-list__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ui-item-list__label {
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}
.ui-item-list__description {
  font-size: var(--font-size-s);
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
  line-height: 1.3;
}
.ui-item-list__meta {
  font-size: var(--font-size-s);
  color: color-mix(in srgb, var(--color-foreground), transparent 35%);
}
.ui-item-list__actions {
  display: inline-flex;
  gap: var(--space-xxs);
  padding-right: var(--space-s);
}
.ui-item-list--actions-on-hover .ui-item-list__actions {
  opacity: 0;
  pointer-events: none;
  transform: translateX(4px);
  transition: opacity 150ms ease, transform 150ms ease;
}
.ui-item-list--actions-on-hover .ui-item-list__row:hover .ui-item-list__actions,
.ui-item-list--actions-on-hover .ui-item-list__row:focus-within .ui-item-list__actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.ui-item-list__empty {
  text-align: center;
  color: color-mix(in srgb, var(--color-foreground), transparent 45%);
  padding: var(--space) var(--space-s);
  margin: 0;
}.ui-scroller {
  width: 100%;
  height: 100%;
  position: relative;
}
.ui-scroller::before, .ui-scroller::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ui-scroller--show-backward-gradient::before {
  opacity: 1;
}
.ui-scroller--show-forward-gradient::after {
  opacity: 1;
}
.ui-scroller__track {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  gap: var(--scroller-gap);
}
.ui-scroller__viewport {
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ui-scroller__viewport::-webkit-scrollbar {
  display: none;
}
.ui-scroller--horizontal::before, .ui-scroller--horizontal::after {
  top: 0;
  bottom: 0;
  width: 1.75rem;
}
.ui-scroller--horizontal::before {
  left: 0;
  background: linear-gradient(to right, var(--color-background), color-mix(in srgb, var(--color-background), transparent 100%));
}
.ui-scroller--horizontal::after {
  right: 0;
  background: linear-gradient(to left, var(--color-background), color-mix(in srgb, var(--color-background), transparent 100%));
}
.ui-scroller--vertical::before, .ui-scroller--vertical::after {
  left: 0;
  right: 0;
  height: 1.75rem;
}
.ui-scroller--vertical::before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-background), color-mix(in srgb, var(--color-background), transparent 100%));
}
.ui-scroller--vertical::after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-background), color-mix(in srgb, var(--color-background), transparent 100%));
}
.ui-scroller__viewport--horizontal {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
}
.ui-scroller__viewport--horizontal .ui-scroller__track {
  flex-direction: row;
  align-items: stretch;
}
.ui-scroller__viewport--horizontal .ui-scroller__track > * {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.ui-scroller__viewport--vertical {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
}
.ui-scroller__viewport--vertical .ui-scroller__track {
  flex-direction: column;
}
.ui-scroller__viewport--vertical .ui-scroller__track > * {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}.ui-skeleton {
  position: relative;
  display: block;
  width: var(--skeleton-width);
  height: var(--skeleton-height);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-foreground), transparent 95%);
  border-radius: var(--border-radius);
}
.ui-skeleton--pill {
  border-radius: var(--ui-skeleton-pill-border-radius-round, var(--int-ui-skeleton-pill-border-radius-round, 999px));
}
.ui-skeleton--circle {
  border-radius: var(--ui-skeleton-circle-border-radius-round, var(--int-ui-skeleton-circle-border-radius-round, 999px));
}
.ui-skeleton--animated::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-background), transparent 35%) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: arSkeletonShimmer 1.2s ease-in-out infinite;
}
@keyframes arSkeletonShimmer {
to {
    transform: translateX(100%);
}
}.steps {
  --steps-color: var(--color-primary);
  --steps-circle-size: 2.25em;
  --steps-gap: var(--space-s);
  --steps-connector-thickness: 2px;
  display: flex;
  gap: 0;
}
.steps[data-direction=horizontal] {
  flex-direction: row;
  align-items: flex-start;
}
.steps[data-direction=horizontal] .steps__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.steps[data-direction=horizontal] .steps__indicator {
  display: flex;
  align-items: center;
  width: 100%;
}
.steps[data-direction=horizontal] .steps__connector {
  flex: 1;
  height: var(--steps-connector-thickness);
  margin: 0 var(--steps-gap);
}
.steps[data-direction=horizontal] .steps__connector--completed {
  background: var(--steps-color);
}
.steps[data-direction=horizontal] .steps__connector--active {
  background: linear-gradient(to right, var(--steps-color) 50%, color-mix(in srgb, var(--color-foreground), transparent 80%) 50%);
}
.steps[data-direction=horizontal] .steps__connector--pending {
  background: color-mix(in srgb, var(--color-foreground), transparent 80%);
}
.steps[data-direction=horizontal] .steps__connector--error {
  background: var(--color-error);
}
.steps[data-direction=horizontal] .steps__content {
  text-align: center;
  padding-top: var(--steps-gap);
}
.steps[data-direction=vertical] {
  flex-direction: column;
}
.steps[data-direction=vertical] .steps__step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  min-height: 0;
}
.steps[data-direction=vertical] .steps__indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.steps[data-direction=vertical] .steps__connector {
  width: var(--steps-connector-thickness);
  flex: 1;
  min-height: var(--space);
  margin: var(--steps-gap) 0;
}
.steps[data-direction=vertical] .steps__connector--completed {
  background: var(--steps-color);
}
.steps[data-direction=vertical] .steps__connector--active {
  background: linear-gradient(to bottom, var(--steps-color) 50%, color-mix(in srgb, var(--color-foreground), transparent 80%) 50%);
}
.steps[data-direction=vertical] .steps__connector--pending {
  background: color-mix(in srgb, var(--color-foreground), transparent 80%);
}
.steps[data-direction=vertical] .steps__connector--error {
  background: var(--color-error);
}
.steps[data-direction=vertical] .steps__content {
  padding-left: var(--space);
  padding-bottom: var(--space-l);
}
.steps__circle {
  width: var(--steps-circle-size);
  height: var(--steps-circle-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}
.steps__circle--pending {
  border-color: color-mix(in srgb, var(--color-foreground), transparent 70%);
  background: var(--color-background);
  color: color-mix(in srgb, var(--color-foreground), transparent 50%);
}
.steps__circle--active {
  border-color: var(--steps-color);
  background: var(--steps-color);
  color: var(--color-background);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--steps-color), transparent 80%);
}
.steps__circle--completed {
  border-color: var(--steps-color);
  background: var(--steps-color);
  color: var(--color-background);
}
.steps__circle--error {
  border-color: var(--color-error);
  background: var(--color-error);
  color: white;
}
.steps__number, .steps__check {
  line-height: 1;
}
.steps__check {
  font-size: 1em;
}
.steps__content {
  display: flex;
  flex-direction: column;
  gap: 0.125em;
  min-width: 0;
}
.steps__title {
  font-weight: 600;
  font-size: 0.875em;
  color: var(--color-foreground);
  line-height: 1.3;
}
.steps__description {
  font-size: 0.8125em;
  color: color-mix(in srgb, var(--color-foreground), transparent 40%);
  line-height: 1.4;
}
.steps__step--active .steps__title {
  color: var(--steps-color);
}
.steps__step--pending .steps__title {
  color: color-mix(in srgb, var(--color-foreground), transparent 45%);
}
.steps__step--error .steps__title {
  color: var(--color-error);
}.header-search {
  position: relative;
  flex: 0 0 auto;
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1), max-width 220ms cubic-bezier(0.22, 1, 0.36, 1), flex-basis 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.header-search--expanded {
  flex: 1 1 24rem;
  width: 100%;
  min-width: 0;
  max-width: var(--header-search-max-width, 36rem);
}
.header-search__control {
  position: relative;
  min-height: 2.5rem;
}
.header-search__trigger {
  --icon-fill: color-mix(in srgb, currentColor, transparent 25%);
  --icon-fill-opacity: 1;
  --icon-stroke-color: currentColor;
  --icon-stroke-color-secondary: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border-color, var(--color-accent));
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-foreground), transparent 97%);
  color: var(--color-foreground);
  cursor: pointer;
  transition: all 0.2s ease;
}
.header-search__trigger:hover {
  background: color-mix(in srgb, var(--color-primary), transparent 88%);
  border-color: color-mix(in srgb, var(--color-primary), transparent 35%);
  color: var(--color-foreground);
}
.header-search__trigger:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.header-search__shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.5rem 0.35rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 3%);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.header-search__shell:focus-within, .header-search--open .header-search__shell {
  border-color: color-mix(in srgb, var(--color-primary), transparent 55%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary), transparent 90%);
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 1%);
}
.header-search__icon {
  color: color-mix(in srgb, var(--color-foreground), transparent 44%);
  font-size: 0.95rem;
}
.header-search__input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.header-search__input::placeholder {
  color: color-mix(in srgb, var(--color-foreground), transparent 52%);
}
.header-search__input:focus {
  outline: none;
}
.header-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-foreground), transparent 42%);
  cursor: pointer;
}
.header-search__clear:hover {
  background: color-mix(in srgb, var(--color-foreground), transparent 94%);
  color: inherit;
}
.header-search__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 100%;
  max-height: min(70vh, 34rem);
  overflow: auto;
  padding: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 2%);
  box-shadow: 0 1.2rem 3rem color-mix(in srgb, var(--color-foreground), transparent 90%);
  transform-origin: top right;
}
@media (max-width: 700px) {
.header-search--expanded {
    max-width: none;
}
}
.header-search-control-enter-active,
.header-search-control-leave-active {
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}
.header-search-control-enter-from {
  opacity: 0;
  transform: translateX(0.85rem) scale(0.96);
  filter: blur(6px);
}
.header-search-control-leave-to {
  opacity: 0;
  transform: translateX(-0.35rem) scale(0.92);
  filter: blur(4px);
}
.header-search-panel-enter-active,
.header-search-panel-leave-active {
  transition: opacity 190ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), clip-path 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.header-search-panel-enter-from,
.header-search-panel-leave-to {
  opacity: 0;
  transform: translateY(-0.45rem) scale(0.98);
  clip-path: inset(0 0 100% 0 round 1rem);
}
@media (prefers-reduced-motion: reduce) {
.header-search {
    transition: none;
}
.header-search-control-enter-active,
  .header-search-control-leave-active,
  .header-search-panel-enter-active,
  .header-search-panel-leave-active {
    transition: none;
}
}.lokki-home {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: var(--spacing);
}
.lokki-form,
.lokki-result {
  display: grid;
  gap: calc(var(--space) * 1.15);
}
.lokki-input {
  display: grid;
  gap: 0.45rem;
}
.lokki-input span {
  font-weight: 800;
}
.lokki-input input,
.lokki-input textarea {
  width: 100%;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--color-foreground), transparent 82%);
  background: transparent;
  color: var(--color-foreground);
  -webkit-text-fill-color: var(--color-foreground);
  padding: 0.9rem 0;
  outline: none;
}
.lokki-input input::placeholder,
.lokki-input textarea::placeholder {
  color: color-mix(in srgb, currentColor, transparent 58%);
  -webkit-text-fill-color: color-mix(in srgb, currentColor, transparent 58%);
}
.lokki-input input:focus,
.lokki-input textarea:focus {
  border-color: var(--color-primary);
}
.lokki-input textarea {
  min-height: 36vh;
  resize: vertical;
  line-height: 1.55;
}
.lokki-password {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.35rem;
  align-items: center;
  border-bottom: 2px solid color-mix(in srgb, var(--color-foreground), transparent 82%);
}
.lokki-password:focus-within {
  border-color: var(--color-primary);
}
.lokki-password input {
  border-bottom: 0;
}
.lokki-password button {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-foreground);
  cursor: pointer;
}
.lokki-password button:hover {
  background: color-mix(in srgb, var(--color-foreground), transparent 92%);
}
.lokki-toggle {
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.55rem;
  font-weight: 750;
  cursor: pointer;
}
.lokki-toggle input {
  accent-color: var(--color-primary);
}
.lokki-toggle__info {
  position: relative;
  display: inline-grid;
  place-items: center;
  color: color-mix(in srgb, currentColor, transparent 38%);
}
.lokki-toggle__info small {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  width: 250px;
  transform: translateX(-50%) translateY(4px);
  border-radius: var(--border-radius);
  background: var(--color-foreground);
  color: var(--color-background);
  padding: 0.7rem 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  line-height: 1.35;
  font-weight: 500;
  z-index: 5;
}
.lokki-toggle__info:hover small, .lokki-toggle__info:focus small {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lokki-submit {
  width: fit-content;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #111827;
  padding: 0.75rem 1.4rem;
  font-weight: 850;
  cursor: pointer;
}
.lokki-submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.lokki-submit--ghost {
  background: transparent;
  color: var(--color-foreground);
}
.lokki-message {
  margin: 0;
  color: color-mix(in srgb, currentColor, transparent 26%);
}
.lokki-message--error {
  color: #ef4444;
}
.lokki-result header {
  display: grid;
  gap: 0.25rem;
}
.lokki-result header p {
  margin: 0;
  color: var(--color-primary);
  font-weight: 850;
  text-transform: uppercase;
}
.lokki-result header h1 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0;
}
.lokki-result dl {
  display: grid;
  gap: 0.8rem;
  margin: 0;
}
.lokki-result dl > div {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
}
.lokki-result dt {
  color: color-mix(in srgb, currentColor, transparent 48%);
  font-size: 0.85rem;
  font-weight: 750;
}
.lokki-result dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  word-break: break-word;
}
.lokki-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}.lokki-secret {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: var(--spacing);
  display: grid;
  gap: calc(var(--space) * 1.1);
}
.lokki-secret__header {
  display: grid;
  gap: 0.25rem;
}
.lokki-secret__header p {
  margin: 0;
  color: var(--color-primary);
  font-weight: 850;
}
.lokki-secret__header h1 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0;
}
.lokki-secret__message, .lokki-secret__expires {
  margin: 0;
  color: color-mix(in srgb, currentColor, transparent 34%);
}
.lokki-secret__message--error {
  color: #ef4444;
}
.lokki-secret__value {
  display: grid;
  gap: 0.45rem;
}
.lokki-secret__value span {
  font-weight: 800;
}
.lokki-secret__value textarea {
  width: 100%;
  min-height: 36vh;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--color-foreground), transparent 82%);
  background: transparent;
  color: var(--color-foreground);
  -webkit-text-fill-color: var(--color-foreground);
  padding: 0.9rem 0;
  outline: none;
  resize: vertical;
  line-height: 1.55;
}
.lokki-secret__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.lokki-secret__actions button {
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #111827;
  padding: 0.75rem 1.4rem;
  font-weight: 850;
  cursor: pointer;
}
.lokki-secret__danger {
  background: #ef4444 !important;
  color: #fff !important;
}.mikki-user-setup-form {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space);
  text-align: center;
}
.mikki-user-setup-form__close {
  position: absolute;
  top: calc(var(--space-s) * -1);
  right: calc(var(--space-s) * -1);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 6%);
  color: color-mix(in srgb, var(--color-foreground), transparent 26%);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-m);
  font-weight: 700;
  line-height: 1;
}
.mikki-user-setup-form__close:hover {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 10%);
}
.mikki-user-setup-form__mark, .mikki-user-setup-form__success-mark {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 1.35rem;
  background: var(--v3fa00a62);
  color: var(--color-primary-text, #fff);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--v3fa00a62), transparent 68%);
}
.mikki-user-setup-form__form, .mikki-user-setup-form__success {
  width: 100%;
  display: grid;
  gap: var(--space-s);
}
.mikki-user-setup-form__intro {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.mikki-user-setup-form__intro h2,
.mikki-user-setup-form__intro p {
  margin: 0;
}
.mikki-user-setup-form__intro h2 {
  color: var(--color-foreground);
  font-size: var(--font-size-l);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}
.mikki-user-setup-form__intro p {
  color: color-mix(in srgb, var(--color-foreground), transparent 34%);
  font-size: var(--font-size-s);
  line-height: 1.45;
}
.mikki-user-setup-form__success {
  justify-items: center;
  line-height: 1.5;
}
.mikki-user-setup-form__success strong {
  font-size: var(--font-size-l);
  font-weight: 700;
  line-height: 1.1;
}
.mikki-user-setup-form__success span {
  color: color-mix(in srgb, var(--color-foreground), transparent 30%);
}
.mikki-user-setup-form__success-mark {
  background: color-mix(in srgb, var(--color-foreground), var(--color-background) 12%);
  color: var(--color-background);
  box-shadow: none;
}
.mikki-user-setup-form__field {
  display: grid;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-align: left;
}
.mikki-user-setup-form__field input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 86%);
  border-radius: 999px;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 4%);
  color: var(--color-foreground);
  font: inherit;
  font-weight: 500;
  -webkit-text-fill-color: var(--color-foreground);
}
.mikki-user-setup-form__field input:focus {
  outline: 2px solid color-mix(in srgb, var(--v3fa00a62), transparent 48%);
  outline-offset: 2px;
}
.mikki-user-setup-form__hint {
  margin: calc(var(--space-xs) * -1) 0 0;
  color: color-mix(in srgb, var(--color-foreground), transparent 42%);
  font-size: var(--font-size-xs);
  line-height: 1.45;
  text-align: left;
}
.mikki-user-setup-form__error {
  margin: 0;
  color: var(--color-danger, #dc2626);
  font-size: var(--font-size-xs);
  text-align: left;
}
.mikki-user-setup-form__save {
  width: 100%;
}.mikki-user-setup {
  display: inline-flex;
}
.mikki-user-setup__trigger {
  color: var(--color-foreground);
}.mikki-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space);
  padding-top: calc(var(--space-s) + env(safe-area-inset-top, 0px));
  background: var(--color-toolbar-bg, color-mix(in srgb, var(--color-background), transparent 12%));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--transition-color, 0.2s ease);
}
.mikki-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-foreground);
  font: inherit;
  min-width: 0;
}
.mikki-header__brand:hover .mikki-header__brand-default {
  opacity: 0;
  transform: translateX(-4px);
}
.mikki-header__brand:hover .mikki-header__brand-hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.mikki-header__brand:hover .mikki-header__mark-svg--default {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}
.mikki-header__brand:hover .mikki-header__mark-svg--hover {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.mikki-header__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  position: relative;
  flex: 0 0 22px;
  border-radius: 5px;
  background: var(--color-primary);
  color: var(--color-primary-text, #fff);
  overflow: hidden;
}
.mikki-header__mark svg {
  width: 100%;
  height: 100%;
}
.mikki-header__mark-svg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mikki-header__mark-svg .icon,
.mikki-header__mark-svg svg {
  color: currentColor;
  --icon-stroke-color: currentColor;
}
.mikki-header__mark-svg--default {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.mikki-header__mark-svg--asset {
  inset: 0;
}
.mikki-header__mark-svg--hover {
  opacity: 0;
  transform: rotate(90deg) scale(0.8);
}
.mikki-header__mark-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mikki-header__mark-img--dark {
  display: none;
}
[data-theme=dark] .mikki-header__mark-img--light, [data-color-mode=dark] .mikki-header__mark-img--light {
  display: none;
}
[data-theme=dark] .mikki-header__mark-img--dark, [data-color-mode=dark] .mikki-header__mark-img--dark {
  display: block;
}
.mikki-header__brand-text, .mikki-header__scrolled-title {
  font-size: var(--font-size-s);
  font-weight: 600;
  letter-spacing: normal;
  white-space: nowrap;
}
.mikki-header__brand-text {
  position: relative;
}
.mikki-header__brand-default {
  display: inline;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.mikki-header__brand-hover {
  display: inline;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  transform: translateX(4px);
  transition: opacity 0.2s ease 0.05s, transform 0.25s ease 0.05s;
}
@media (max-width: 768px) {
.mikki-header__brand-hover {
    display: none;
}
}
.mikki-header__scrolled-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100vw - 180px);
  text-align: left;
}
@media (min-width: 769px) {
.mikki-header__scrolled-title {
    max-width: 300px;
}
}
.mikki-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}
.mikki-header__actions .button:not(.context-menu-items__item),
.mikki-header__actions .sil-button:not(.context-menu-items__item) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border-radius: var(--border-radius-s, 0.65rem);
  background: transparent;
  color: var(--color-primary);
  --icon-stroke-color: var(--color-primary);
  --button-color: transparent;
  --button-color-text: var(--color-primary);
  touch-action: manipulation;
  transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.mikki-header__actions .button:not(.context-menu-items__item) .icon,
.mikki-header__actions .button:not(.context-menu-items__item) svg,
.mikki-header__actions .sil-button:not(.context-menu-items__item) .icon,
.mikki-header__actions .sil-button:not(.context-menu-items__item) svg {
  width: 1.3rem;
  height: 1.3rem;
  pointer-events: none;
}
.mikki-header__actions .button:not(.context-menu-items__item):hover, .mikki-header__actions .button:not(.context-menu-items__item):focus-visible,
.mikki-header__actions .sil-button:not(.context-menu-items__item):hover,
.mikki-header__actions .sil-button:not(.context-menu-items__item):focus-visible {
  background: color-mix(in srgb, var(--color-primary), transparent 88%);
  color: var(--color-primary);
  --icon-stroke-color: var(--color-primary);
  --button-color: transparent;
  --button-color-text: var(--color-primary);
  transform: translateY(-1px);
}
.mikki-header__action {
  position: relative;
}
.mikki-header__action--active {
  background: color-mix(in srgb, var(--color-primary), transparent 88%);
  color: var(--color-primary);
  --icon-stroke-color: var(--color-primary);
  --button-color: transparent;
  --button-color-text: var(--color-primary);
}
.mikki-header__action--badge::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.35rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-background);
}
.mikki-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.mikki-header__nav a {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: color-mix(in srgb, var(--color-foreground), transparent 30%);
  text-decoration: none;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--border-radius-s);
  transition: color 0.15s ease, background 0.15s ease;
}
.mikki-header__nav a:hover, .mikki-header__nav a:focus-visible {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-foreground), transparent 92%);
}
.mikki-header__nav a.router-link-active {
  color: var(--color-foreground);
  font-weight: 600;
}
@media (max-width: 520px) {
.mikki-header__nav {
    display: none;
}
}
@media (max-width: 520px) {
.mikki-header {
    padding-inline: var(--space-s);
}
.mikki-header__actions {
    gap: 2px;
}
.mikki-header__actions .button:not(.context-menu-items__item),
  .mikki-header__actions .sil-button:not(.context-menu-items__item) {
    width: 2.625rem;
    height: 2.625rem;
    min-width: 2.625rem;
}
.mikki-header__actions .button:not(.context-menu-items__item) .icon,
  .mikki-header__actions .button:not(.context-menu-items__item) svg,
  .mikki-header__actions .sil-button:not(.context-menu-items__item) .icon,
  .mikki-header__actions .sil-button:not(.context-menu-items__item) svg {
    width: 1.22rem;
    height: 1.22rem;
}
}
.mikki-header-title-swap-enter-active,
.mikki-header-title-swap-leave-active {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mikki-header-title-swap-enter-from,
.mikki-header-title-swap-leave-to {
  opacity: 0;
  transform: translateY(4px);
}.mikki-app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  color: var(--color-foreground);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mikki-app-shell--sidebar-open {
  transform: translateX(var(--mikki-app-shell-sidebar-shift, 30%));
}
.mikki-app-shell > .mikki-header {
  width: min(100% - 2rem, var(--mikki-app-shell-max-width, 60rem));
  margin: 0 auto;
}
.mikki-app-shell__main {
  flex: 1;
  min-width: 0;
}
.mikki-app-shell__footer {
  width: min(100% - 2rem, var(--mikki-app-shell-max-width, 60rem));
  margin: 0 auto;
  padding: calc(var(--space) * 2) 0 calc(var(--space) * 3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-foreground), transparent 50%);
}
.mikki-app-shell__footer-note, .mikki-app-shell__footer-copy {
  opacity: 0.7;
}
.mikki-app-shell__footer-sep {
  opacity: 0.35;
  margin: 0 0.4rem;
}
.mikki-app-shell__footer-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
}
.mikki-app-shell__footer-link:hover, .mikki-app-shell__footer-link:focus-visible {
  color: var(--color-primary);
  opacity: 1;
}
@media (max-width: 520px) {
.mikki-app-shell--sidebar-open {
    transform: translateX(min(var(--mikki-app-shell-sidebar-shift, 30%), 5rem));
}
.mikki-app-shell__footer {
    width: min(100% - 1rem, var(--mikki-app-shell-max-width, 60rem));
    padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
    row-gap: var(--space-xs);
    font-size: 0.78rem;
}
}.mikki-sidebar {
  --mikki-sidebar-width: 280px;
  --mikki-sidebar-surface: var(--color-primary);
  --mikki-sidebar-color: var(--color-primary-text);
  --mikki-sidebar-item-surface: #fff;
  --mikki-sidebar-item-color: #000;
  --mikki-sidebar-item-muted-color: #000;
  --mikki-sidebar-hover-surface: #fff;
  --mikki-sidebar-hover-color: #000;
  --mikki-sidebar-active-icon-color: var(--color-primary);
  --mikki-sidebar-footer-color: #000;
  --mikki-sidebar-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--space));
  left: calc(env(safe-area-inset-left, 0px) + var(--space));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space));
  width: var(--mikki-sidebar-width);
  max-width: 80vw;
  z-index: 60;
  background: var(--mikki-sidebar-surface);
  color: var(--mikki-sidebar-color);
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-l);
  padding: 0;
  box-shadow: var(--mikki-sidebar-shadow);
  overflow: hidden;
}
.mikki-sidebar__overlay {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: transparent;
  cursor: default;
}
.mikki-sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space) var(--space) var(--space-s);
}
.mikki-sidebar__title {
  margin: 0;
  font-size: var(--font-size-m);
  font-weight: 700;
  color: var(--mikki-sidebar-color);
}
.mikki-sidebar__close {
  flex-shrink: 0;
  color: var(--mikki-sidebar-color);
  transition: transform 0.16s ease, opacity 0.16s ease;
}
.mikki-sidebar__close:active {
  opacity: 0.86;
  transform: scale(0.94);
}
.mikki-sidebar__loading, .mikki-sidebar__empty {
  color: var(--mikki-sidebar-color);
  opacity: 0.5;
  font-size: var(--font-size-s);
  text-align: center;
  padding: var(--space-l) var(--space);
}
.mikki-sidebar__list {
  height: 100%;
  flex-shrink: 1;
  overflow: auto;
  padding: 0 var(--space) var(--space);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.mikki-sidebar__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mikki-sidebar__row {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--border-radius);
  cursor: pointer;
  color: var(--mikki-sidebar-item-color);
  background: var(--mikki-sidebar-item-surface);
  position: relative;
  overflow: hidden;
  transition: color 0.2s ease, transform 0.16s ease, opacity 0.16s ease;
  animation: mikki-sidebar-row-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(0.08s + var(--item-index, 0) * 0.03s);
}
.mikki-sidebar__row-hover-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mikki-sidebar-hover-surface);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.mikki-sidebar__row:hover, .mikki-sidebar__row:focus-within {
  color: var(--mikki-sidebar-item-color);
}
.mikki-sidebar__row--active {
  color: var(--mikki-sidebar-item-color);
  background: var(--mikki-sidebar-item-surface);
}
.mikki-sidebar__row:hover .mikki-sidebar__row-hover-bg, .mikki-sidebar__row:focus-within .mikki-sidebar__row-hover-bg {
  opacity: 1;
  transform: scale(1);
}
.mikki-sidebar__row:active {
  opacity: 0.86;
  transform: scale(0.965);
}
.mikki-sidebar__row:not(.mikki-sidebar__row--active) .icon,
.mikki-sidebar__row:not(.mikki-sidebar__row--active) svg {
  color: var(--mikki-sidebar-item-muted-color);
  --icon-stroke-color: var(--mikki-sidebar-item-muted-color);
}
.mikki-sidebar__row--active .icon,
.mikki-sidebar__row--active svg {
  color: var(--mikki-sidebar-active-icon-color);
  --icon-stroke-color: var(--mikki-sidebar-active-icon-color);
  position: relative;
  z-index: 1;
}
.mikki-sidebar__row--done:not(.mikki-sidebar__row--active) .icon,
.mikki-sidebar__row--done:not(.mikki-sidebar__row--active) svg {
  color: currentColor;
  --icon-stroke-color: currentColor;
}
.mikki-sidebar__row-title, .mikki-sidebar__row-time,
.mikki-sidebar .icon,
.mikki-sidebar svg {
  position: relative;
  z-index: 1;
}
.mikki-sidebar__row-title {
  font-size: var(--font-size-s);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.mikki-sidebar__row-time {
  font-size: var(--font-size-xs);
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.mikki-sidebar__row-progress {
  opacity: 0.5;
}
.mikki-sidebar__row:hover .mikki-sidebar__row-time, .mikki-sidebar__row:focus-within .mikki-sidebar__row-time {
  opacity: 0.7;
}
.mikki-sidebar__create {
  position: sticky;
  bottom: 0;
  padding-top: var(--space-s);
  background: linear-gradient(to top, var(--mikki-sidebar-surface) 60%, transparent);
}
.mikki-sidebar__create-button {
  width: 100%;
  justify-content: flex-start;
  border: none;
  border-radius: var(--border-radius);
  background: var(--mikki-sidebar-item-surface);
  color: var(--mikki-sidebar-item-color);
  --button-color: var(--mikki-sidebar-item-surface);
  --button-color-text: var(--mikki-sidebar-item-color);
  transition: transform 0.16s ease, opacity 0.16s ease;
}
.mikki-sidebar__create-button:active {
  opacity: 0.86;
  transform: scale(0.965);
}
.mikki-sidebar__create-button::before {
  background: var(--mikki-sidebar-item-surface);
  border-radius: var(--border-radius);
}
.mikki-sidebar__create-button .icon,
.mikki-sidebar__create-button svg {
  color: var(--mikki-sidebar-item-color);
  --icon-stroke-color: var(--mikki-sidebar-item-color);
}
.mikki-sidebar__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--mikki-sidebar-footer-color);
  padding: var(--space-s) var(--space);
  border-top: 1px solid color-mix(in srgb, var(--mikki-sidebar-footer-color), transparent 75%);
  flex-shrink: 0;
  border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
}
.mikki-sidebar__footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-s);
  max-width: 100%;
}
.mikki-sidebar__footer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--mikki-sidebar-item-surface);
  border: none;
  color: var(--mikki-sidebar-item-color);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  border-radius: 0.35rem;
  max-width: 100%;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mikki-sidebar__footer-link:hover {
  opacity: 0.7;
}
.mikki-sidebar__footer-link:active:not(.mikki-sidebar__footer-link--plain) {
  opacity: 0.86;
  transform: scale(0.965);
}
.mikki-sidebar__footer-link--badge {
  font-size: var(--font-size-xxs);
  font-weight: 700;
  color: var(--mikki-sidebar-item-color);
  background: var(--mikki-sidebar-item-surface);
  padding: 1px 6px;
  border-radius: 0.35rem;
  line-height: 1.4;
}
.mikki-sidebar__footer-link--plain {
  background: transparent;
  color: var(--mikki-sidebar-footer-color);
  cursor: default;
  padding: 0;
  border-radius: 0;
  overflow-wrap: anywhere;
  text-align: center;
}
.mikki-sidebar__footer-link--plain:hover {
  opacity: 1;
}
.mikki-sidebar__footer-link--plain .icon,
.mikki-sidebar__footer-link--plain svg {
  color: var(--mikki-sidebar-footer-color);
  --icon-stroke-color: var(--mikki-sidebar-footer-color);
}
.mikki-sidebar__footer-link .icon,
.mikki-sidebar__footer-link svg {
  color: var(--mikki-sidebar-item-color);
  --icon-stroke-color: var(--mikki-sidebar-item-color);
}
.mikki-sidebar .mikki-sidebar__footer-row a.mikki-sidebar__footer-link, .mikki-sidebar .mikki-sidebar__footer-row a.mikki-sidebar__footer-link:visited {
  color: var(--mikki-sidebar-item-color);
}
.mikki-sidebar .mikki-sidebar__footer-row a.mikki-sidebar__footer-link--plain, .mikki-sidebar .mikki-sidebar__footer-row a.mikki-sidebar__footer-link--plain:visited {
  color: var(--mikki-sidebar-footer-color);
}
@media (prefers-color-scheme: dark) {
.mikki-sidebar {
    --mikki-sidebar-item-surface: #000;
    --mikki-sidebar-item-color: #fff;
    --mikki-sidebar-item-muted-color: #fff;
    --mikki-sidebar-hover-surface: #000;
    --mikki-sidebar-hover-color: #fff;
    --mikki-sidebar-footer-color: #fff;
}
}
[data-theme=dark] .mikki-sidebar,
[data-color-mode=dark] .mikki-sidebar {
  --mikki-sidebar-item-surface: #000;
  --mikki-sidebar-item-color: #fff;
  --mikki-sidebar-item-muted-color: #fff;
  --mikki-sidebar-hover-surface: #000;
  --mikki-sidebar-hover-color: #fff;
  --mikki-sidebar-footer-color: #fff;
}
[data-theme=light] .mikki-sidebar,
[data-color-mode=light] .mikki-sidebar {
  --mikki-sidebar-item-surface: #fff;
  --mikki-sidebar-item-color: #000;
  --mikki-sidebar-item-muted-color: #000;
  --mikki-sidebar-hover-surface: #fff;
  --mikki-sidebar-hover-color: #000;
  --mikki-sidebar-footer-color: #000;
}
.mikki-sidebar-enter-active {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.mikki-sidebar-leave-active {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.mikki-sidebar-enter-from {
  transform: translateX(-20%) scale(0.95);
  opacity: 0;
}
.mikki-sidebar-leave-to {
  transform: translateX(-15%) scale(0.97);
  opacity: 0;
}
.mikki-sidebar-overlay-enter-active,
.mikki-sidebar-overlay-leave-active {
  transition: opacity 0.3s ease;
}
.mikki-sidebar-overlay-enter-from,
.mikki-sidebar-overlay-leave-to {
  opacity: 0;
}
@keyframes mikki-sidebar-row-in {
from {
    opacity: 0;
    transform: translateX(-8px) scale(0.97);
}
}.mikki-app-shell__footer-locale-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.mikki-app-shell__footer-button {
  border: 0;
  background: transparent;
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.mikki-app-shell__footer-locale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  cursor: pointer;
}
.mikki-app-shell__footer-locale .icon,
.mikki-app-shell__footer-locale svg {
  width: 1rem;
  height: 1rem;
}
.mikki-app-shell__footer-locale:hover {
  opacity: 1;
}
.mikki-app-shell__footer-locale-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-s, 0.75rem));
  z-index: 30;
  min-width: min(18rem, 100vw - 2rem);
  padding: var(--space-s, 0.75rem);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 86%);
  border-radius: var(--border-radius, 1rem);
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 4%);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--color-foreground), transparent 88%);
}
.mikki-app-shell__footer-locale-panel .language-switch-options__option--active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-text, var(--color-background));
}
.mikki-app-shell__footer-locale-panel .language-switch-options__option--active .language-switch-options__code {
  background: color-mix(in srgb, var(--color-primary-text, var(--color-background)), transparent 82%);
  color: inherit;
}.secret-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  min-height: 100%;
  color: #111827;
}
.secret-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.secret-sidebar__close, .secret-sidebar__create, .secret-sidebar__item {
  border: 0;
  border-radius: var(--border-radius);
  background: #fff;
  color: #111827;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.secret-sidebar__close {
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
}
.secret-sidebar__create {
  padding: 0.85rem 1rem;
  font-weight: 800;
}
.secret-sidebar__list {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  overflow: auto;
}
.secret-sidebar__item {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
}
.secret-sidebar__item small {
  opacity: 0.65;
}
.secret-sidebar__empty {
  line-height: 1.45;
  opacity: 0.78;
}
.secret-sidebar__footer {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid color-mix(in srgb, currentColor, transparent 80%);
  padding-top: 0.85rem;
  font-size: 0.86rem;
  opacity: 0.78;
}
.secret-sidebar__footer a {
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}
.secret-sidebar button:hover {
  transform: translateY(-1px);
}
[data-color-mode=dark] .secret-sidebar {
  color: #fff;
}
[data-color-mode=dark] .secret-sidebar__close, [data-color-mode=dark] .secret-sidebar__create, [data-color-mode=dark] .secret-sidebar__item {
  background: #000;
  color: #fff;
}:root {
  --color-dark: #080b12;
  --color-dark-text: color-mix(in srgb, hsl(222, 38.4615384615%, 100%) 80%, #080b12);
  --color-dark-contrast: color-mix(in srgb, hsl(222, 38.4615384615%, 100%) 80%, #080b12);
  --color-light: #ffffff;
  --color-light-text: color-mix(in srgb, hsl(0, 0%, 0%) 80%, #ffffff);
  --color-light-contrast: color-mix(in srgb, hsl(0, 0%, 0%) 80%, #ffffff);
  --color-accent-dark: #111827;
  --color-accent-dark-text: color-mix(in srgb, hsl(220.9090909091, 39.2857142857%, 100%) 80%, #111827);
  --color-accent-dark-contrast: color-mix(in srgb, hsl(220.9090909091, 39.2857142857%, 100%) 80%, #111827);
  --color-accent-light: #fce7f3;
  --color-accent-light-text: color-mix(in srgb, hsl(325.7142857143, 77.7777777778%, 0%) 80%, #fce7f3);
  --color-accent-light-contrast: color-mix(in srgb, hsl(325.7142857143, 77.7777777778%, 0%) 80%, #fce7f3);
  --color-primary: #ce428e;
  --color-primary-text: color-mix(in srgb, hsl(327.4285714286, 58.8235294118%, 100%) 80%, #ce428e);
  --color-primary-contrast: color-mix(in srgb, hsl(327.4285714286, 58.8235294118%, 100%) 80%, #ce428e);
  --color-secondary: #9f2f6d;
  --color-secondary-text: color-mix(in srgb, hsl(326.7857142857, 54.3689320388%, 100%) 80%, #9f2f6d);
  --color-secondary-contrast: color-mix(in srgb, hsl(326.7857142857, 54.3689320388%, 100%) 80%, #9f2f6d);
  --color-tertiary: #2376d3;
  --color-tertiary-text: color-mix(in srgb, hsl(211.7045454545, 71.5447154472%, 100%) 80%, #2376d3);
  --color-tertiary-contrast: color-mix(in srgb, hsl(211.7045454545, 71.5447154472%, 100%) 80%, #2376d3);
  --color-quaternary: #a9e14b;
  --color-quaternary-text: color-mix(in srgb, hsl(82.4, 71.4285714286%, 0%) 80%, #a9e14b);
  --color-quaternary-contrast: color-mix(in srgb, hsl(82.4, 71.4285714286%, 0%) 80%, #a9e14b);
  --color-quinary: #f96459;
  --color-quinary-text: color-mix(in srgb, hsl(4.125, 93.023255814%, 100%) 80%, #f96459);
  --color-quinary-contrast: color-mix(in srgb, hsl(4.125, 93.023255814%, 100%) 80%, #f96459);
  --color-success: #55c267;
  --color-success-text: color-mix(in srgb, hsl(129.9082568807, 47.1861471861%, 0%) 80%, #55c267);
  --color-success-contrast: color-mix(in srgb, hsl(129.9082568807, 47.1861471861%, 0%) 80%, #55c267);
  --color-warning: #ff8d22;
  --color-warning-text: color-mix(in srgb, hsl(29.0497737557, 100%, 0%) 80%, #ff8d22);
  --color-warning-contrast: color-mix(in srgb, hsl(29.0497737557, 100%, 0%) 80%, #ff8d22);
  --color-error: #f40935;
  --color-error-text: color-mix(in srgb, hsl(348.7659574468, 92.8853754941%, 100%) 80%, #f40935);
  --color-error-contrast: color-mix(in srgb, hsl(348.7659574468, 92.8853754941%, 100%) 80%, #f40935);
  --color-info: #3bb6f1;
  --color-info-text: color-mix(in srgb, hsl(199.4505494505, 86.6666666667%, 0%) 80%, #3bb6f1);
  --color-info-contrast: color-mix(in srgb, hsl(199.4505494505, 86.6666666667%, 0%) 80%, #3bb6f1);
  --color-border: #ce428e;
  --color-border-text: color-mix(in srgb, hsl(327.4285714286, 58.8235294118%, 100%) 80%, #ce428e);
  --color-border-contrast: color-mix(in srgb, hsl(327.4285714286, 58.8235294118%, 100%) 80%, #ce428e);
  --color-red: #f40935;
  --color-red-text: color-mix(in srgb, hsl(348.7659574468, 92.8853754941%, 100%) 80%, #f40935);
  --color-red-contrast: color-mix(in srgb, hsl(348.7659574468, 92.8853754941%, 100%) 80%, #f40935);
  --color-pink: #e23ea9;
  --color-pink-text: color-mix(in srgb, hsl(320.8536585366, 73.8738738739%, 100%) 80%, #e23ea9);
  --color-pink-contrast: color-mix(in srgb, hsl(320.8536585366, 73.8738738739%, 100%) 80%, #e23ea9);
  --color-purple: #b214c0;
  --color-purple-text: color-mix(in srgb, hsl(295.1162790698, 81.1320754717%, 100%) 80%, #b214c0);
  --color-purple-contrast: color-mix(in srgb, hsl(295.1162790698, 81.1320754717%, 100%) 80%, #b214c0);
  --color-violet: #7f23d3;
  --color-violet-text: color-mix(in srgb, hsl(271.3636363636, 71.5447154472%, 100%) 80%, #7f23d3);
  --color-violet-contrast: color-mix(in srgb, hsl(271.3636363636, 71.5447154472%, 100%) 80%, #7f23d3);
  --color-indigo: #4b0082;
  --color-indigo-text: color-mix(in srgb, hsl(274.6153846154, 100%, 100%) 80%, #4b0082);
  --color-indigo-contrast: color-mix(in srgb, hsl(274.6153846154, 100%, 100%) 80%, #4b0082);
  --color-blue: #2923d3;
  --color-blue-text: color-mix(in srgb, hsl(242.0454545455, 71.5447154472%, 100%) 80%, #2923d3);
  --color-blue-contrast: color-mix(in srgb, hsl(242.0454545455, 71.5447154472%, 100%) 80%, #2923d3);
  --color-cobalt: #2376d3;
  --color-cobalt-text: color-mix(in srgb, hsl(211.7045454545, 71.5447154472%, 100%) 80%, #2376d3);
  --color-cobalt-contrast: color-mix(in srgb, hsl(211.7045454545, 71.5447154472%, 100%) 80%, #2376d3);
  --color-skyblue: #3bb6f1;
  --color-skyblue-text: color-mix(in srgb, hsl(199.4505494505, 86.6666666667%, 0%) 80%, #3bb6f1);
  --color-skyblue-contrast: color-mix(in srgb, hsl(199.4505494505, 86.6666666667%, 0%) 80%, #3bb6f1);
  --color-cyan: #2dcfdc;
  --color-cyan-text: color-mix(in srgb, hsl(184.4571428571, 71.4285714286%, 0%) 80%, #2dcfdc);
  --color-cyan-contrast: color-mix(in srgb, hsl(184.4571428571, 71.4285714286%, 0%) 80%, #2dcfdc);
  --color-teal: #49dba3;
  --color-teal-text: color-mix(in srgb, hsl(156.9863013699, 66.9724770642%, 0%) 80%, #49dba3);
  --color-teal-contrast: color-mix(in srgb, hsl(156.9863013699, 66.9724770642%, 0%) 80%, #49dba3);
  --color-green: #55c267;
  --color-green-text: color-mix(in srgb, hsl(129.9082568807, 47.1861471861%, 0%) 80%, #55c267);
  --color-green-contrast: color-mix(in srgb, hsl(129.9082568807, 47.1861471861%, 0%) 80%, #55c267);
  --color-lime: #a9e14b;
  --color-lime-text: color-mix(in srgb, hsl(82.4, 71.4285714286%, 0%) 80%, #a9e14b);
  --color-lime-contrast: color-mix(in srgb, hsl(82.4, 71.4285714286%, 0%) 80%, #a9e14b);
  --color-apple: #e7ed3f;
  --color-apple-text: color-mix(in srgb, hsl(62.0689655172, 82.8571428571%, 0%) 80%, #e7ed3f);
  --color-apple-contrast: color-mix(in srgb, hsl(62.0689655172, 82.8571428571%, 0%) 80%, #e7ed3f);
  --color-yellow: #fde824;
  --color-yellow-text: color-mix(in srgb, hsl(54.1935483871, 98.1900452489%, 0%) 80%, #fde824);
  --color-yellow-contrast: color-mix(in srgb, hsl(54.1935483871, 98.1900452489%, 0%) 80%, #fde824);
  --color-gold: #ffb647;
  --color-gold-text: color-mix(in srgb, hsl(36.1956521739, 100%, 0%) 80%, #ffb647);
  --color-gold-contrast: color-mix(in srgb, hsl(36.1956521739, 100%, 0%) 80%, #ffb647);
  --color-orange: #ff8d22;
  --color-orange-text: color-mix(in srgb, hsl(29.0497737557, 100%, 0%) 80%, #ff8d22);
  --color-orange-contrast: color-mix(in srgb, hsl(29.0497737557, 100%, 0%) 80%, #ff8d22);
  --color-brown: #806755;
  --color-brown-text: color-mix(in srgb, hsl(25.1162790698, 20.1877934272%, 100%) 80%, #806755);
  --color-brown-contrast: color-mix(in srgb, hsl(25.1162790698, 20.1877934272%, 100%) 80%, #806755);
  --color-coral: #f96459;
  --color-coral-text: color-mix(in srgb, hsl(4.125, 93.023255814%, 100%) 80%, #f96459);
  --color-coral-contrast: color-mix(in srgb, hsl(4.125, 93.023255814%, 100%) 80%, #f96459);
  --color-beige: #dabd9f;
  --color-beige-text: color-mix(in srgb, hsl(30.5084745763, 44.3609022556%, 0%) 80%, #dabd9f);
  --color-beige-contrast: color-mix(in srgb, hsl(30.5084745763, 44.3609022556%, 0%) 80%, #dabd9f);
  --color-lavender: #bface1;
  --color-lavender-text: color-mix(in srgb, hsl(261.5094339623, 46.9026548673%, 0%) 80%, #bface1);
  --color-lavender-contrast: color-mix(in srgb, hsl(261.5094339623, 46.9026548673%, 0%) 80%, #bface1);
  --color-gray: #989499;
  --color-gray-text: color-mix(in srgb, hsl(288, 2.3923444976%, 100%) 80%, #989499);
  --color-gray-contrast: color-mix(in srgb, hsl(288, 2.3923444976%, 100%) 80%, #989499);
  --color-white: #ffffff;
  --color-white-text: color-mix(in srgb, hsl(0, 0%, 0%) 80%, #ffffff);
  --color-white-contrast: color-mix(in srgb, hsl(0, 0%, 0%) 80%, #ffffff);
  --color-black: #000000;
  --color-black-text: color-mix(in srgb, hsl(0, 0%, 100%) 80%, #000000);
  --color-black-contrast: color-mix(in srgb, hsl(0, 0%, 100%) 80%, #000000);
  --color-red-light: rgb(248.9048335968, 89.7532664032, 119.5518577075);
  --color-red-light-text: color-mix(in srgb, hsl(348.7659574468, 92.8853754941%, 100%) 80%, rgb(248.9048335968, 89.7532664032, 119.5518577075));
  --color-red-light-contrast: color-mix(in srgb, hsl(348.7659574468, 92.8853754941%, 100%) 80%, rgb(248.9048335968, 89.7532664032, 119.5518577075));
  --color-red-dark: rgb(162.6748, 6.0003, 35.3351);
  --color-red-dark-text: color-mix(in srgb, hsl(348.7659574468, 92.8853754941%, 100%) 80%, rgb(162.6748, 6.0003, 35.3351));
  --color-red-dark-contrast: color-mix(in srgb, hsl(348.7659574468, 92.8853754941%, 100%) 80%, rgb(162.6748, 6.0003, 35.3351));
  --color-pink-light: rgb(235.6657, 126.3269, 197.6638);
  --color-pink-light-text: color-mix(in srgb, hsl(320.8536585366, 73.8738738739%, 0%) 80%, rgb(235.6657, 126.3269, 197.6638));
  --color-pink-light-contrast: color-mix(in srgb, hsl(320.8536585366, 73.8738738739%, 0%) 80%, rgb(235.6657, 126.3269, 197.6638));
  --color-pink-dark: rgb(166.9272648649, 25.0823351351, 117.6275027027);
  --color-pink-dark-text: color-mix(in srgb, hsl(320.8536585366, 73.8738738739%, 100%) 80%, rgb(166.9272648649, 25.0823351351, 117.6275027027));
  --color-pink-dark-contrast: color-mix(in srgb, hsl(320.8536585366, 73.8738738739%, 100%) 80%, rgb(166.9272648649, 25.0823351351, 117.6275027027));
  --color-purple-light: rgb(223.1367716981, 75.0664754717, 236.2569245283);
  --color-purple-light-text: color-mix(in srgb, hsl(295.1162790698, 81.1320754717%, 100%) 80%, rgb(223.1367716981, 75.0664754717, 236.2569245283));
  --color-purple-light-contrast: color-mix(in srgb, hsl(295.1162790698, 81.1320754717%, 100%) 80%, rgb(223.1367716981, 75.0664754717, 236.2569245283));
  --color-purple-dark: rgb(118.6726, 13.334, 128.0064);
  --color-purple-dark-text: color-mix(in srgb, hsl(295.1162790698, 81.1320754717%, 100%) 80%, rgb(118.6726, 13.334, 128.0064));
  --color-purple-dark-contrast: color-mix(in srgb, hsl(295.1162790698, 81.1320754717%, 100%) 80%, rgb(118.6726, 13.334, 128.0064));
  --color-violet-light: rgb(169.8575317073, 104.033102439, 229.958097561);
  --color-violet-light-text: color-mix(in srgb, hsl(271.3636363636, 71.5447154472%, 100%) 80%, rgb(169.8575317073, 104.033102439, 229.958097561));
  --color-violet-light-contrast: color-mix(in srgb, hsl(271.3636363636, 71.5447154472%, 100%) 80%, rgb(169.8575317073, 104.033102439, 229.958097561));
  --color-violet-dark: rgb(84.6709, 23.3345, 140.6737);
  --color-violet-dark-text: color-mix(in srgb, hsl(271.3636363636, 71.5447154472%, 100%) 80%, rgb(84.6709, 23.3345, 140.6737));
  --color-violet-dark-contrast: color-mix(in srgb, hsl(271.3636363636, 71.5447154472%, 100%) 80%, rgb(84.6709, 23.3345, 140.6737));
  --color-indigo-light: rgb(147.8151538462, 1.654, 255);
  --color-indigo-light-text: color-mix(in srgb, hsl(274.6153846154, 100%, 100%) 80%, rgb(147.8151538462, 1.654, 255));
  --color-indigo-light-contrast: color-mix(in srgb, hsl(274.6153846154, 100%, 100%) 80%, rgb(147.8151538462, 1.654, 255));
  --color-indigo-dark: rgb(50.0025, 0, 86.671);
  --color-indigo-dark-text: color-mix(in srgb, hsl(274.6153846154, 100%, 100%) 80%, rgb(50.0025, 0, 86.671));
  --color-indigo-dark-contrast: color-mix(in srgb, hsl(274.6153846154, 100%, 100%) 80%, rgb(50.0025, 0, 86.671));
  --color-blue-light: rgb(108.326, 104.033102439, 229.958097561);
  --color-blue-light-text: color-mix(in srgb, hsl(242.0454545455, 71.5447154472%, 100%) 80%, rgb(108.326, 104.033102439, 229.958097561));
  --color-blue-light-contrast: color-mix(in srgb, hsl(242.0454545455, 71.5447154472%, 100%) 80%, rgb(108.326, 104.033102439, 229.958097561));
  --color-blue-dark: rgb(27.3347, 23.3345, 140.6737);
  --color-blue-dark-text: color-mix(in srgb, hsl(242.0454545455, 71.5447154472%, 100%) 80%, rgb(27.3347, 23.3345, 140.6737));
  --color-blue-dark-contrast: color-mix(in srgb, hsl(242.0454545455, 71.5447154472%, 100%) 80%, rgb(27.3347, 23.3345, 140.6737));
  --color-cobalt-light: rgb(104.033102439, 163.4181853659, 229.958097561);
  --color-cobalt-light-text: color-mix(in srgb, hsl(211.7045454545, 71.5447154472%, 0%) 80%, rgb(104.033102439, 163.4181853659, 229.958097561));
  --color-cobalt-light-contrast: color-mix(in srgb, hsl(211.7045454545, 71.5447154472%, 0%) 80%, rgb(104.033102439, 163.4181853659, 229.958097561));
  --color-cobalt-dark: rgb(23.3345, 78.6706, 140.6737);
  --color-cobalt-dark-text: color-mix(in srgb, hsl(211.7045454545, 71.5447154472%, 100%) 80%, rgb(23.3345, 78.6706, 140.6737));
  --color-cobalt-dark-contrast: color-mix(in srgb, hsl(211.7045454545, 71.5447154472%, 100%) 80%, rgb(23.3345, 78.6706, 140.6737));
  --color-skyblue-light: rgb(124.3268, 206.3309, 245.6662);
  --color-skyblue-light-text: color-mix(in srgb, hsl(199.4505494505, 86.6666666667%, 0%) 80%, rgb(124.3268, 206.3309, 245.6662));
  --color-skyblue-light-contrast: color-mix(in srgb, hsl(199.4505494505, 86.6666666667%, 0%) 80%, rgb(124.3268, 206.3309, 245.6662));
  --color-skyblue-dark: rgb(13.334, 130.4827142857, 186.676);
  --color-skyblue-dark-text: color-mix(in srgb, hsl(199.4505494505, 86.6666666667%, 100%) 80%, rgb(13.334, 130.4827142857, 186.676));
  --color-skyblue-dark-contrast: color-mix(in srgb, hsl(199.4505494505, 86.6666666667%, 100%) 80%, rgb(13.334, 130.4827142857, 186.676));
  --color-cyan-light: rgb(114.993, 222.9984, 231.6655);
  --color-cyan-light-text: color-mix(in srgb, hsl(184.4571428571, 71.4285714286%, 0%) 80%, rgb(114.993, 222.9984, 231.6655));
  --color-cyan-light-contrast: color-mix(in srgb, hsl(184.4571428571, 71.4285714286%, 0%) 80%, rgb(114.993, 222.9984, 231.6655));
  --color-cyan-dark: rgb(25.2393571429, 142.0615244898, 151.4361428571);
  --color-cyan-dark-text: color-mix(in srgb, hsl(184.4571428571, 71.4285714286%, 100%) 80%, rgb(25.2393571429, 142.0615244898, 151.4361428571));
  --color-cyan-dark-contrast: color-mix(in srgb, hsl(184.4571428571, 71.4285714286%, 100%) 80%, rgb(25.2393571429, 142.0615244898, 151.4361428571));
  --color-teal-light: rgb(133.6606, 230.9988, 193.6636);
  --color-teal-light-text: color-mix(in srgb, hsl(156.9863013699, 66.9724770642%, 0%) 80%, rgb(133.6606, 230.9988, 193.6636));
  --color-teal-light-contrast: color-mix(in srgb, hsl(156.9863013699, 66.9724770642%, 0%) 80%, rgb(133.6606, 230.9988, 193.6636));
  --color-teal-dark: rgb(32.1483963303, 162.5280036697, 112.519387156);
  --color-teal-dark-text: color-mix(in srgb, hsl(156.9863013699, 66.9724770642%, 100%) 80%, rgb(32.1483963303, 162.5280036697, 112.519387156));
  --color-teal-dark-contrast: color-mix(in srgb, hsl(156.9863013699, 66.9724770642%, 100%) 80%, rgb(32.1483963303, 162.5280036697, 112.519387156));
  --color-green-light: rgb(141.661, 214.3313, 153.6616);
  --color-green-light-text: color-mix(in srgb, hsl(129.9082568807, 47.1861471861%, 0%) 80%, rgb(141.661, 214.3313, 153.6616));
  --color-green-light-contrast: color-mix(in srgb, hsl(129.9082568807, 47.1861471861%, 0%) 80%, rgb(141.661, 214.3313, 153.6616));
  --color-green-dark: rgb(49.119338961, 136.889961039, 63.6135701299);
  --color-green-dark-text: color-mix(in srgb, hsl(129.9082568807, 47.1861471861%, 100%) 80%, rgb(49.119338961, 136.889961039, 63.6135701299));
  --color-green-dark-contrast: color-mix(in srgb, hsl(129.9082568807, 47.1861471861%, 100%) 80%, rgb(49.119338961, 136.889961039, 63.6135701299));
  --color-lime-light: rgb(197.6638, 234.999, 134.994);
  --color-lime-light-text: color-mix(in srgb, hsl(82.4, 71.4285714286%, 0%) 80%, rgb(197.6638, 234.999, 134.994));
  --color-lime-light-contrast: color-mix(in srgb, hsl(82.4, 71.4285714286%, 0%) 80%, rgb(197.6638, 234.999, 134.994));
  --color-lime-dark: rgb(118.1011428571, 171.4371428571, 28.5728571429);
  --color-lime-dark-text: color-mix(in srgb, hsl(82.4, 71.4285714286%, 100%) 80%, rgb(118.1011428571, 171.4371428571, 28.5728571429));
  --color-lime-dark-contrast: color-mix(in srgb, hsl(82.4, 71.4285714286%, 100%) 80%, rgb(118.1011428571, 171.4371428571, 28.5728571429));
  --color-apple-light: rgb(238.9992, 242.9994, 126.9936);
  --color-apple-light-text: color-mix(in srgb, hsl(62.0689655172, 82.8571428571%, 0%) 80%, rgb(238.9992, 242.9994, 126.9936));
  --color-apple-light-contrast: color-mix(in srgb, hsl(62.0689655172, 82.8571428571%, 0%) 80%, rgb(238.9992, 242.9994, 126.9936));
  --color-apple-dark: rgb(177.1517142857, 182.8662857143, 17.1437142857);
  --color-apple-dark-text: color-mix(in srgb, hsl(62.0689655172, 82.8571428571%, 0%) 80%, rgb(177.1517142857, 182.8662857143, 17.1437142857));
  --color-apple-dark-contrast: color-mix(in srgb, hsl(62.0689655172, 82.8571428571%, 0%) 80%, rgb(177.1517142857, 182.8662857143, 17.1437142857));
  --color-yellow-light: rgb(253.6666, 239.6659, 108.9927);
  --color-yellow-light-text: color-mix(in srgb, hsl(54.1935483871, 98.1900452489%, 0%) 80%, rgb(253.6666, 239.6659, 108.9927));
  --color-yellow-light-contrast: color-mix(in srgb, hsl(54.1935483871, 98.1900452489%, 0%) 80%, rgb(253.6666, 239.6659, 108.9927));
  --color-yellow-dark: rgb(190.9326230769, 172.6240153846, 1.7436769231);
  --color-yellow-dark-text: color-mix(in srgb, hsl(54.1935483871, 98.1900452489%, 0%) 80%, rgb(190.9326230769, 172.6240153846, 1.7436769231));
  --color-yellow-dark-contrast: color-mix(in srgb, hsl(54.1935483871, 98.1900452489%, 0%) 80%, rgb(190.9326230769, 172.6240153846, 1.7436769231));
  --color-gold-light: rgb(255, 206.3309, 132.3272);
  --color-gold-light-text: color-mix(in srgb, hsl(36.1956521739, 100%, 0%) 80%, rgb(255, 206.3309, 132.3272));
  --color-gold-light-contrast: color-mix(in srgb, hsl(36.1956521739, 100%, 0%) 80%, rgb(255, 206.3309, 132.3272));
  --color-gold-dark: rgb(217.3442, 131.115251087, 0);
  --color-gold-dark-text: color-mix(in srgb, hsl(36.1956521739, 100%, 100%) 80%, rgb(217.3442, 131.115251087, 0));
  --color-gold-dark-contrast: color-mix(in srgb, hsl(36.1956521739, 100%, 100%) 80%, rgb(217.3442, 131.115251087, 0));
  --color-orange-light: rgb(255, 178.9962, 107.6593);
  --color-orange-light-text: color-mix(in srgb, hsl(29.0497737557, 100%, 0%) 80%, rgb(255, 178.9962, 107.6593));
  --color-orange-light-contrast: color-mix(in srgb, hsl(29.0497737557, 100%, 0%) 80%, rgb(255, 178.9962, 107.6593));
  --color-orange-dark: rgb(192.6763, 93.2867153846, 0);
  --color-orange-dark-text: color-mix(in srgb, hsl(29.0497737557, 100%, 100%) 80%, rgb(192.6763, 93.2867153846, 0));
  --color-orange-dark-contrast: color-mix(in srgb, hsl(29.0497737557, 100%, 100%) 80%, rgb(192.6763, 93.2867153846, 0));
  --color-brown-light: rgb(175.9819647887, 152.7413661972, 136.0081352113);
  --color-brown-light-text: color-mix(in srgb, hsl(25.1162790698, 20.1877934272%, 0%) 80%, rgb(175.9819647887, 152.7413661972, 136.0081352113));
  --color-brown-light-contrast: color-mix(in srgb, hsl(25.1162790698, 20.1877934272%, 0%) 80%, rgb(175.9819647887, 152.7413661972, 136.0081352113));
  --color-brown-dark: rgb(85.3376, 68.6701, 56.6695);
  --color-brown-dark-text: color-mix(in srgb, hsl(25.1162790698, 20.1877934272%, 100%) 80%, rgb(85.3376, 68.6701, 56.6695));
  --color-brown-dark-contrast: color-mix(in srgb, hsl(25.1162790698, 20.1877934272%, 100%) 80%, rgb(85.3376, 68.6701, 56.6695));
  --color-coral-light: rgb(250.9998, 151.6615, 144.3278);
  --color-coral-light-text: color-mix(in srgb, hsl(4.125, 93.023255814%, 0%) 80%, rgb(250.9998, 151.6615, 144.3278));
  --color-coral-light-contrast: color-mix(in srgb, hsl(4.125, 93.023255814%, 0%) 80%, rgb(250.9998, 151.6615, 144.3278));
  --color-coral-dark: rgb(217.4837418605, 22.2724313953, 7.8608581395);
  --color-coral-dark-text: color-mix(in srgb, hsl(4.125, 93.023255814%, 100%) 80%, rgb(217.4837418605, 22.2724313953, 7.8608581395));
  --color-coral-dark-contrast: color-mix(in srgb, hsl(4.125, 93.023255814%, 100%) 80%, rgb(217.4837418605, 22.2724313953, 7.8608581395));
  --color-beige-light: rgb(230.3321, 210.9978, 190.9968);
  --color-beige-light-text: color-mix(in srgb, hsl(30.5084745763, 44.3609022556%, 0%) 80%, rgb(230.3321, 210.9978, 190.9968));
  --color-beige-light-contrast: color-mix(in srgb, hsl(30.5084745763, 44.3609022556%, 0%) 80%, rgb(230.3321, 210.9978, 190.9968));
  --color-beige-dark: rgb(181.4226045113, 126.6178593985, 69.9232954887);
  --color-beige-dark-text: color-mix(in srgb, hsl(30.5084745763, 44.3609022556%, 100%) 80%, rgb(181.4226045113, 126.6178593985, 69.9232954887));
  --color-beige-dark-contrast: color-mix(in srgb, hsl(30.5084745763, 44.3609022556%, 100%) 80%, rgb(181.4226045113, 126.6178593985, 69.9232954887));
  --color-lavender-light: rgb(212.3312, 199.6639, 234.999);
  --color-lavender-light-text: color-mix(in srgb, hsl(261.5094339623, 46.9026548673%, 0%) 80%, rgb(212.3312, 199.6639, 234.999));
  --color-lavender-light-contrast: color-mix(in srgb, hsl(261.5094339623, 46.9026548673%, 0%) 80%, rgb(212.3312, 199.6639, 234.999));
  --color-lavender-dark: rgb(116.0576424779, 74.8091300885, 189.8707699115);
  --color-lavender-dark-text: color-mix(in srgb, hsl(261.5094339623, 46.9026548673%, 100%) 80%, rgb(116.0576424779, 74.8091300885, 189.8707699115));
  --color-lavender-dark-contrast: color-mix(in srgb, hsl(261.5094339623, 46.9026548673%, 100%) 80%, rgb(116.0576424779, 74.8091300885, 189.8707699115));
  --color-gray-light: rgb(186.3299, 183.6631, 186.9966);
  --color-gray-light-text: color-mix(in srgb, hsl(288, 2.3923444976%, 0%) 80%, rgb(186.3299, 183.6631, 186.9966));
  --color-gray-light-contrast: color-mix(in srgb, hsl(288, 2.3923444976%, 0%) 80%, rgb(186.3299, 183.6631, 186.9966));
  --color-gray-dark: rgb(101.7786133971, 97.9379110048, 102.7387889952);
  --color-gray-dark-text: color-mix(in srgb, hsl(288, 2.3923444976%, 100%) 80%, rgb(101.7786133971, 97.9379110048, 102.7387889952));
  --color-gray-dark-contrast: color-mix(in srgb, hsl(288, 2.3923444976%, 100%) 80%, rgb(101.7786133971, 97.9379110048, 102.7387889952));
  --color-white-light: white;
  --color-white-light-text: color-mix(in srgb, hsl(0, 0%, 0%) 80%, white);
  --color-white-light-contrast: color-mix(in srgb, hsl(0, 0%, 0%) 80%, white);
  --color-white-dark: rgb(170.0085, 170.0085, 170.0085);
  --color-white-dark-text: color-mix(in srgb, hsl(0, 0%, 0%) 80%, rgb(170.0085, 170.0085, 170.0085));
  --color-white-dark-contrast: color-mix(in srgb, hsl(0, 0%, 0%) 80%, rgb(170.0085, 170.0085, 170.0085));
  --color-black-light: rgb(84.9915, 84.9915, 84.9915);
  --color-black-light-text: color-mix(in srgb, hsl(0, 0%, 100%) 80%, rgb(84.9915, 84.9915, 84.9915));
  --color-black-light-contrast: color-mix(in srgb, hsl(0, 0%, 100%) 80%, rgb(84.9915, 84.9915, 84.9915));
  --color-black-dark: black;
  --color-black-dark-text: color-mix(in srgb, hsl(0, 0%, 100%) 80%, black);
  --color-black-dark-contrast: color-mix(in srgb, hsl(0, 0%, 100%) 80%, black);
  --color-accent: var(--color-foreground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-dark);
    --color-background-text: var(--color-light);
    --color-foreground: var(--color-light);
    --color-foreground-text: var(--color-dark);
    --color-accent-text: var(--color-accent-dark-text);
    --color-accent: var(--color-accent-dark);
    --color-accent-h: 220.9090909091deg;
    --color-accent-s: 39.2857142857%;
    --color-accent-l: 10.9803921569%;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --color-background: var(--color-light);
    --color-background-text: var(--color-dark);
    --color-foreground: var(--color-dark);
    --color-foreground-text: var(--color-light);
    --color-accent: var(--color-accent-light);
    --color-accent-text: var(--color-accent-light-text);
    --color-accent-h: 325.7142857143deg;
    --color-accent-s: 77.7777777778%;
    --color-accent-l: 94.7058823529%;
  }
}
[data-theme=dark] {
  --color-background: var(--color-dark);
  --color-background-text: var(--color-light);
  --color-foreground: var(--color-light);
  --color-foreground-text: var(--color-dark);
  --color-accent-text: var(--color-accent-dark-text);
  --color-accent: var(--color-accent-dark);
  --color-accent-h: 220.9090909091deg;
  --color-accent-s: 39.2857142857%;
  --color-accent-l: 10.9803921569%;
}

[data-theme=light] {
  --color-background: var(--color-light);
  --color-background-text: var(--color-dark);
  --color-foreground: var(--color-dark);
  --color-foreground-text: var(--color-light);
  --color-accent: var(--color-accent-light);
  --color-accent-text: var(--color-accent-light-text);
  --color-accent-h: 325.7142857143deg;
  --color-accent-s: 77.7777777778%;
  --color-accent-l: 94.7058823529%;
}

:root {
  --font-family-heading: system-ui,
                         -apple-system,
                         BlinkMacSystemFont,
                         'Segoe UI',
                         sans-serif;
  --font-family-body: system-ui,
                      -apple-system,
                      BlinkMacSystemFont,
                      'Segoe UI',
                      sans-serif;
  /* Monospace font for code */
  --font-family-mono: 'SF Mono',
                      'Monaco',
                      'Inconsolata',
                      'Roboto Mono',
                      'Noto Sans Mono',
                      'Source Code Pro',
                      Consolas,
                      'Liberation Mono',
                      Menlo,
                      Courier,
                      monospace;
  /* Language-specific font stacks for better script support */
  --font-family-armenian: 'Noto Sans Armenian', system-ui, 'Arial Unicode MS', sans-serif;
  --font-family-chinese-sc: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', system-ui, sans-serif;
  --font-family-chinese-tc: 'Noto Sans TC', 'PingFang TC', 'Hiragino Sans CNS', system-ui, sans-serif;
  --font-family-japanese: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  --font-family-korean: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-family-arabic: 'Noto Sans Arabic', Tahoma, 'Arial Unicode MS', system-ui, sans-serif;
  --font-family-hebrew: 'Noto Sans Hebrew', 'Arial Hebrew', 'Arial Unicode MS', system-ui, sans-serif;
  --font-family-thai: 'Noto Sans Thai', Thonburi, 'Arial Unicode MS', system-ui, sans-serif;
  --font-family-devanagari: 'Noto Sans Devanagari', Mangal, 'Arial Unicode MS', system-ui, sans-serif;
  --font-family-bengali: 'Noto Sans Bengali', Vrinda, 'Arial Unicode MS', system-ui, sans-serif;
  --font-family-georgian: 'Noto Sans Georgian', Sylfaen, 'Arial Unicode MS', system-ui, sans-serif;
}

/* Language-specific font optimization */
/* Armenian */
:lang(hy) {
  font-family: var(--font-family-armenian);
}

/* Chinese Simplified */
:lang(zh), :lang(zh-CN), :lang(zh-Hans) {
  font-family: var(--font-family-chinese-sc);
}

/* Chinese Traditional */
:lang(zh-TW), :lang(zh-HK), :lang(zh-Hant) {
  font-family: var(--font-family-chinese-tc);
}

/* Japanese */
:lang(ja) {
  font-family: var(--font-family-japanese);
}

/* Korean */
:lang(ko) {
  font-family: var(--font-family-korean);
}

/* Arabic and Persian */
:lang(ar), :lang(fa) {
  font-family: var(--font-family-arabic);
  direction: rtl;
  text-align: right;
}

/* Urdu */
:lang(ur) {
  font-family: var(--font-family-arabic);
  direction: rtl;
  text-align: right;
}

/* Hebrew */
:lang(he) {
  font-family: var(--font-family-hebrew);
  direction: rtl;
  text-align: right;
}

/* Thai */
:lang(th) {
  font-family: var(--font-family-thai);
}

/* Devanagari scripts (Hindi, Nepali) */
:lang(hi), :lang(ne) {
  font-family: var(--font-family-devanagari);
}

/* Bengali */
:lang(bn) {
  font-family: var(--font-family-bengali);
}

/* Georgian */
:lang(ka) {
  font-family: var(--font-family-georgian);
}

/* Ensure proper text direction for RTL languages */
[dir=rtl] {
  text-align: right;
}

/* Improve font rendering for all scripts */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ADD RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
li,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
img,
figure {
  margin: 0;
}

:root {
  --space: 1em;
  --space-m: var(--space);
  --space-s: calc(var(--space) / 2);
  --space-xs: calc(var(--space) / 3);
  --space-l: calc(var(--space) * 2);
  --space-xl: calc(var(--space) * 3);
  --spacing: clamp(2em, 8vw, 6em);
  --border-radius-xs: calc(var(--border-radius) / 3);
  --border-radius-s: calc(var(--border-radius) / 2);
  --border-radius: 1em;
  --border-radius-m: var(--border-radius);
  --border-radius-l: calc(var(--border-radius) * 1.5);
  --border-radius-xl: calc(var(--border-radius) * 3);
  --border-radius-round: 50%;
  --bezier: cubic-bezier(0, 0.75, 0.5, 1.5);
  --max-post-width: 640px;
  --max-content-width: 1200px;
  --shadow: 0 1px 2px 1px var(--drop-shadow-color, var(--color-black));
  --bezier: cubic-bezier(0, 0.75, 0.5, 1.5);
  --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
  --border-width: 1px;
  --border-width-m: 1px;
  --font-size: 1em;
  --font-size-m: 1em;
  --font-size-s: .75em;
  --font-size-xs: .66em;
  --font-size-l: 1.25em;
  --font-size-xl: 1.5em;
  --font-size-xxl: 2em;
  --font-size-xxxl: 3em;
  --font-size-xxxxl: clamp(2em, 6vw, 8em);
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-normal: 400;
  --font-weight-light: 300
  --transition-fast: .15s;
  --transition-normal: .3s;
  --transition-slow: 1s;
}

body[data-font-size=small] {
  font-size: 16px;
}
body[data-font-size=medium] {
  font-size: 18px;
}
body[data-font-size=large] {
  font-size: 20px;
}
body[data-font-size=xlarge] {
  font-size: 24px;
}

* {
  font-family: var(--font-family-body);
  font-size: var(--font-size, 1em);
}

.highlight {
  display: inline;
  position: relative;
}
.highlight::before {
  background-color: var(--color-yellow);
  z-index: -1;
  content: "";
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-xs);
  padding: var(--space-xs) var(--space-s);
  transform: translate(-50%, -50%);
  position: absolute;
}

.heading, h1:not([class]),
h2:not([class]),
h3:not([class]),
h4:not([class]),
h5:not([class]),
h6:not([class]) {
  font-family: var(--font-family-heading);
  font-weight: var(--heading-font-weight, 600);
  font-size: var(--heading-font-size, 1.5em);
  line-height: var(--heading-line-height, 1.2);
  color: var(--heading-color, currentColor);
  margin: 0;
  padding: 0;
}
.heading:has(.icon), h1:has(.icon):not([class]),
h2:has(.icon):not([class]),
h3:has(.icon):not([class]),
h4:has(.icon):not([class]),
h5:has(.icon):not([class]),
h6:has(.icon):not([class]) {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.heading:has(.icon) .icon, h1:has(.icon):not([class]) .icon,
h2:has(.icon):not([class]) .icon,
h3:has(.icon):not([class]) .icon,
h4:has(.icon):not([class]) .icon,
h5:has(.icon):not([class]) .icon,
h6:has(.icon):not([class]) .icon {
  font-size: var(--heading-icon-size, 1em);
}
.heading:has(strong), h1:has(strong):not([class]),
h2:has(strong):not([class]),
h3:has(strong):not([class]),
h4:has(strong):not([class]),
h5:has(strong):not([class]),
h6:has(strong):not([class]) {
  font-weight: normal;
  color: var(--color, var(--foreground));
}
.heading:has(strong) strong, h1:has(strong):not([class]) strong,
h2:has(strong):not([class]) strong,
h3:has(strong):not([class]) strong,
h4:has(strong):not([class]) strong,
h5:has(strong):not([class]) strong,
h6:has(strong):not([class]) strong {
  color: var(--foreground);
  font-weight: bold;
}
.heading--1, h1:not([class]) {
  font-size: 2.5em;
  line-height: 1.2;
}
.heading--2, h2:not([class]) {
  font-size: 2em;
  line-height: 1.2;
}
.heading--3, h3:not([class]) {
  font-size: 1.5em;
  line-height: 1.2;
}
.heading--4, h4:not([class]) {
  font-size: 1.25em;
  line-height: 1.2;
}
.heading--5, h5:not([class]) {
  font-size: 1em;
  line-height: 1.2;
}
.heading--6, h6:not([class]) {
  font-family: var(--font-family-heading);
  font-size: 0.875em;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

h1 + *:not([class]), h1 + .button, h1 + .button-group,
h2 + *:not([class]),
h2 + .button,
h2 + .button-group,
h3 + *:not([class]),
h3 + .button,
h3 + .button-group,
h4 + *:not([class]),
h4 + .button,
h4 + .button-group,
h5 + *:not([class]),
h5 + .button,
h5 + .button-group,
h6 + *:not([class]),
h6 + .button,
h6 + .button-group,
p + *:not([class]),
p + .button,
p + .button-group,
.button-group + *:not([class]),
.button-group + .button,
.button-group + .button-group,
hr + *:not([class]),
hr + .button,
hr + .button-group {
  margin-top: 1em;
}

[class$=__title] {
  font-family: var(--font-family-heading);
}

p {
  line-height: 1.5;
}
p:first-child {
  font-size: 1.1em;
}

ul:not([class]) {
  padding-left: 1.5em;
  margin: 1em 0;
  list-style-type: none;
}
ul:not([class]) li {
  position: relative;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
ul:not([class]) li:before {
  content: "";
  position: absolute;
  left: -1.5em;
  top: 0.5em;
  width: 0.75em;
  height: 0.75em;
  border-radius: 0.125em;
  background-color: var(--section-color, var(--color-accent, currentColor));
}
ul:not([class]) li ul:not([class]) {
  margin: 0.5em 0;
}
ul:not([class]) li ul:not([class]) li:before {
  background-color: transparent;
  border: 1px solid var(--section-color, var(--color-accent, currentColor));
}

ol:not([class]) {
  padding-left: 1.5em;
  margin: 1em 0;
  counter-reset: item;
  list-style-type: none;
}
ol:not([class]) li {
  position: relative;
  margin-bottom: 0.5em;
  line-height: 1.5;
  counter-increment: item;
}
ol:not([class]) li:before {
  content: counter(item) ".";
  position: absolute;
  left: -1.5em;
  top: 0;
  color: var(--color, var(--accent, currentColor));
  font-weight: 600;
}
ol:not([class]) li ol:not([class]) {
  margin: 0.5em 0;
  counter-reset: subitem;
}
ol:not([class]) li ol:not([class]) li {
  counter-increment: subitem;
}
ol:not([class]) li ol:not([class]) li:before {
  content: counter(item) "." counter(subitem);
}

.content > p {
  line-height: 1.75;
}
.content > p:first-of-type {
  font-size: 1.1em;
}
.content > * + * {
  margin-top: var(--space);
}
.content dl:not([class]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.content dl:not([class]) dd + dt {
  margin-top: 0.5em;
}
.content dl:not([class]):has(dt ~ dt) dt {
  font-weight: bold;
}
.content dl:not([class]):has(dt ~ dt) dd {
  font-weight: 300;
  opacity: 0.75;
}

ul:not([class]) {
  counter-reset: list;
}
ul:not([class]) dd + dt {
  margin-top: 1em;
}
ul:not([class]):has(ul > li) li {
  counter-increment: name;
}
ul:not([class]):has(ul > li) li::before {
  content: counter(name) ".";
  margin-right: 0.5em;
}

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

h1 {
  font-size: calc(var(--spacing) * 0.75);
}

.dot {
  width: var(--dot-size, 0.5em);
  height: var(--dot-size, 0.5em);
  border-radius: 50%;
  display: block;
  background-color: var(--dot-color, currentColor);
}

hr {
  width: 100%;
  height: 2px;
  background-color: var(--accent);
  color: var(--accent);
  border: none;
}

p code:not([class]) {
  max-width: 100%;
  width: fit-content;
  border-radius: calc(var(--border-radius) / 2);
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  transform: translateY(33.33%);
  display: inline-block;
}

.icon--star-m.icon--animated:hover svg {
  animation: ICON_STAR_M 1s ease-in-out forwards;
}
@keyframes ICON_STAR_M {
  0% {
    transform: rotate(0deg);
  }
  25%, 100% {
    transform: rotate(72deg);
  }
}

.icon--graph-up.icon--animated:hover svg line {
  stroke-dashoffset: 2em;
  stroke-dasharray: 2em;
  animation: ICON_GRAPH_UP_LINES 1s linear forwards;
}
@keyframes ICON_GRAPH_UP_LINES {
  0% {
    stroke-dashoffset: 2em;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.icon--graph-up.icon--animated:hover svg line:nth-child(1) {
  animation-delay: 0.1s;
}
.icon--graph-up.icon--animated:hover svg line:nth-child(2) {
  animation-delay: 0.2s;
}
.icon--graph-up.icon--animated:hover svg line:nth-child(3) {
  animation-delay: 0.3s;
}
.icon--graph-up.icon--animated:hover svg line:nth-child(4) {
  animation-delay: 0.4s;
}
.icon--graph-up.icon--animated:hover svg line:nth-child(5) {
  animation-delay: 0.5s;
}
.icon--graph-up.icon--animated:hover svg line:nth-child(6) {
  animation-delay: 0.6s;
}
.icon--graph-up.icon--animated:hover svg polyline {
  stroke-dashoffset: 5em;
  stroke-dasharray: 5em;
  animation: ICON_GRAPH_UP_ARROW 1s linear forwards;
}
@keyframes ICON_GRAPH_UP_ARROW {
  0% {
    stroke-dashoffset: 5em;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.icon--temple.icon--animated:hover svg line:nth-child(1),
.icon--temple.icon--animated:hover svg line:nth-child(2),
.icon--temple.icon--animated:hover svg line:nth-child(3),
.icon--temple.icon--animated:hover svg line:nth-child(4),
.icon--temple2.icon--animated:hover svg line:nth-child(1),
.icon--temple2.icon--animated:hover svg line:nth-child(2),
.icon--temple2.icon--animated:hover svg line:nth-child(3),
.icon--temple2.icon--animated:hover svg line:nth-child(4) {
  color: red;
  fill: blue;
  animation: ICON_TEMPLE_PILARS 0.5s ease-in-out forwards;
}
@keyframes ICON_TEMPLE_PILARS {
  50% {
    stroke-dasharray: 2em;
    stroke-dashoffset: -2em;
  }
  0%, 100% {
    stroke-dasharray: 2em;
    stroke-dashoffset: 0em;
  }
}
.icon--temple.icon--animated:hover svg path,
.icon--temple2.icon--animated:hover svg path {
  animation: ICON_TEMPLE_ROOF 0.5s ease-in-out forwards;
}
@keyframes ICON_TEMPLE_ROOF {
  50% {
    transform: translateY(50%);
  }
  0%, 100% {
    transform: translateY(0%);
  }
}

.icon--chip.icon--animated:hover svg {
  animation: ICON_CHIP 1s ease-in-out infinite;
}
@keyframes ICON_CHIP {
  0% {
    transform: rotate(0deg);
  }
  25%, 100% {
    transform: rotate(90deg);
  }
}

.icon--luggage.icon--animated:hover {
  overflow: hidden;
}
.icon--luggage.icon--animated:hover svg {
  animation: ICON_LUGGAGE 1s ease-in-out forwards;
}
@keyframes ICON_LUGGAGE {
  0% {
    transform: translateX(0%);
  }
  25%, 49.9% {
    transform: translateX(200%);
  }
  50% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0%);
  }
}

.icon--rocket.icon--animated {
  --animation-time: 5s;
}
@keyframes ICON_ROCKET_FIRE_WIGGLE {
  0%, 100% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(-5%, 5%);
  }
}
.icon--rocket.icon--animated path:nth-child(6), .icon--rocket.icon--animated path:nth-child(2) {
  animation: ICON_ROCKET_FIRE_WIGGLE var(--animation-time, 1s) ease-in-out infinite;
}
.icon--rocket.icon--animated path:nth-child(2) {
  stroke: none;
}
.icon--rocket.icon--animated path:nth-child(6) {
  --icon-stroke-color-secondary: var(--color-yellow);
}
.icon--rocket.icon--animated path:nth-child(2) {
  --icon-fill: var(--color-orange);
  stroke: none;
}
.icon--rocket.icon--animated:hover {
  --animation-time: 2s;
}

.icon--three-dots.icon--animated svg circle {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.icon--three-dots.icon--animated svg circle:nth-child(1) {
  animation: THREE_DOTS_HORIZONTAL_ANIMATION 1s 0.33s infinite;
}
.icon--three-dots.icon--animated svg circle:nth-child(2) {
  animation: THREE_DOTS_HORIZONTAL_ANIMATION 1s 0.66s infinite;
}
.icon--three-dots.icon--animated svg circle:nth-child(3) {
  animation: THREE_DOTS_HORIZONTAL_ANIMATION 1s 0.99s infinite;
}
@keyframes THREE_DOTS_HORIZONTAL_ANIMATION {
  100%, 0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

.icon--alarm-bell.icon--animated:hover svg {
  animation: ICON_ALARM_BELL 0.3s ease-in-out infinite;
}
@keyframes ICON_ALARM_BELL {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0);
  }
}

.icon--search-m.icon--animated:hover svg {
  animation: ICON_SEARCH 1s ease-in-out infinite;
  --icon-fill: var(--primary-rgb);
}
@keyframes ICON_SEARCH {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.icon--add-l.icon--animated:hover svg line:nth-child(1) {
  animation: ICON_ADD_LINE_Y 2s ease-in-out infinite;
}
.icon--add-l.icon--animated:hover svg line:nth-child(2) {
  animation: ICON_ADD_LINE_X 2s ease-in-out infinite;
}
@keyframes ICON_ADD_LINE_X {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20%, 80% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes ICON_ADD_LINE_Y {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  20%, 80% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

.icon--music-note.icon--animated:hover svg {
  animation: ICON_MUSIC_NOTE 1s ease-in-out infinite;
  --icon-fill: var(--primary-rgb);
}
@keyframes ICON_MUSIC_NOTE {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  20% {
    transform: translateY(-20%) rotate(-5deg);
  }
  40% {
    transform: translateY(0) rotate(5deg);
  }
  60% {
    transform: translateY(-15%) rotate(-3deg);
  }
  80% {
    transform: translateY(0) rotate(3deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.icon--compass.icon--animated:hover svg polygon {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: ICON_COMPASS_POINTER 1s infinite;
}
@keyframes ICON_COMPASS_POINTER {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.icon--terminal.icon--animated svg line {
  animation: ICON_TERMINAL_LINE_BLINK 2s ease-in-out infinite;
}
@keyframes ICON_TERMINAL_LINE_BLINK {
  30%, 70% {
    opacity: 1;
  }
  0%, 100% {
    opacity: 0;
  }
}
.icon--note-edit line {
  stroke-linecap: round;
}

@keyframes ICONS_SETTINGS_LINE1 {
  0%, 100% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 30;
  }
}
@keyframes ICONS_SETTINGS_LINE2 {
  0% {
    stroke-dashoffset: 15;
  }
  25% {
    stroke-dashoffset: 30;
  }
  75% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 15;
  }
}
@keyframes ICONS_SETTINGS_LINE3 {
  0%, 100% {
    stroke-dashoffset: 30;
  }
  50% {
    stroke-dashoffset: 0;
  }
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg line:nth-child(1) {
  animation: ICONS_SETTINGS_LINE1 1.5s linear infinite;
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg line:nth-of-type(2) {
  animation: ICONS_SETTINGS_LINE2 1.5s linear infinite;
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg line:nth-of-type(3) {
  animation: ICONS_SETTINGS_LINE3 1.5s linear infinite;
}
@keyframes ICONS_SETTINGS_CIRCLE1 {
  0%, 100% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-40%);
  }
}
@keyframes ICONS_SETTINGS_CIRCLE2 {
  0% {
    transform: translateX(-20%);
  }
  25% {
    transform: translateX(-40%);
  }
  75% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-20%);
  }
}
@keyframes ICONS_SETTINGS_CIRCLE3 {
  0%, 100% {
    transform: translateX(-40%);
  }
  50% {
    transform: translateX(0%);
  }
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg g:nth-of-type(1) circle {
  animation: ICONS_SETTINGS_CIRCLE1 1.5s linear infinite;
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg g:nth-of-type(2) circle {
  animation: ICONS_SETTINGS_CIRCLE2 1.5s linear infinite;
}
*:has(> .icon--settings5.icon--animated):hover .icon--settings5.icon--animated svg g:nth-of-type(3) circle {
  animation: ICONS_SETTINGS_CIRCLE3 1.5s linear infinite;
}

.icon--settings5.icon--animated svg line:nth-child(1) {
  stroke-dashoffset: 0;
}
.icon--settings5.icon--animated svg line:nth-of-type(2) {
  stroke-dashoffset: 15;
}
.icon--settings5.icon--animated svg line:nth-of-type(3) {
  stroke-dashoffset: 30;
}
.icon--settings5.icon--animated svg g:nth-of-type(1) circle {
  transform: translateX(0%);
}
.icon--settings5.icon--animated svg g:nth-of-type(2) circle {
  transform: translateX(-20%);
}
.icon--settings5.icon--animated svg g:nth-of-type(3) circle {
  transform: translateX(-40%);
}

*:has(> .icon--arrow-left.icon--animated):hover .icon--arrow-left.icon--animated svg {
  animation: ICON_ARROW_LEFT 0.3s ease-in-out forwards;
}
@keyframes ICON_ARROW_LEFT {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

*:has(> .icon--arrow-right.icon--animated):hover .icon--arrow-right.icon--animated svg {
  animation: ICON_ARROW_RIGHT 0.3s ease-in-out forwards;
}
@keyframes ICON_ARROW_RIGHT {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(0%);
  }
}

*:has(> .icon--arrow-up.icon--animated):hover .icon--arrow-up.icon--animated svg {
  animation: ICON_ARROW_UP 0.3s ease-in-out forwards;
}
@keyframes ICON_ARROW_UP {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}

*:has(> .icon--arrow-down.icon--animated):hover .icon--arrow-down.icon--animated svg {
  animation: ICON_ARROW_DOWN 0.3s ease-in-out forwards;
}
@keyframes ICON_ARROW_DOWN {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(0%);
  }
}

*:has(> .icon--arrow-up-left.icon--animated):hover .icon--arrow-up-left.icon--animated svg {
  animation: ICON_ARROW_UP_LEFT 0.3s ease-in-out forwards;
}
@keyframes ICON_ARROW_UP_LEFT {
  0% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}

a.link {
  color: var(--color-foreground);
  position: relative;
  display: inline-block;
  cursor: pointer;
}
a.link::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-foreground);
  clip-path: var(--clip-path, inset(0 100% 0 0));
  transition: clip-path 0.3s ease;
}
a.link:hover {
  color: var(--color-secondary);
  --clip-path: inset(0 0% 0 0);
}

:root {
  --app-header-height: 5.5rem;
  --game-container-max-width: 960px;
  --main-max-width: 1560px;
  --space-xs: calc(var(--space) / 4);
  --space-s: calc(var(--space) / 2);
  --space: 1rem;
  --space-m: calc(var(--space) * 1);
  --space-l: calc(var(--space) * 2);
  --space-xl: calc(var(--space) * 4);
  --space-xxl: calc(var(--space) * 8);
  --spacing: clamp(var(--space), 6vw, var(--space-xxl));
  --border-radius-s: calc(var(--border-radius) / 2);
  --border-radius: 0.25em;
  --border-radius-l: calc(var(--border-radius) * 2);
  --border-radius-xl: calc(var(--border-radius) * 3);
  --border-radius-xxl: calc(var(--border-radius) * 6);
  --border-width: 1px;
  --font-size-xs: calc(var(--font-size) * 0.75);
  --font-size-s: calc(var(--font-size) * 0.875);
  --font-size: 1em;
  --font-size-m: calc(var(--font-size) * 1);
  --font-size-l: calc(var(--font-size) * 1.25);
  --font-size-xl: calc(var(--font-size) * 1.5);
  --font-size-xxl: calc(var(--font-size) * 2);
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 600;
  --font-weight-extra-bold: 700;
  --font-weight-black: 900;
  --font-family:
    var(--font-family-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --font-family-heading:
    var(--font-family-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --font-family-monospace:
    var(--font-family-mono, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace);
  --cubic-bezier: cubic-bezier(0, 0.5, 0.5, 1.5);
  --bezier: var(--cubic-bezier);
  --transition: 0.2s ease;
  --transition-fast: 0.12s ease;
  --shadow-s: 0 1px 2px color-mix(in srgb, var(--color-dark), transparent 90%);
  --shadow-m:
    0 var(--space) var(--spacing) color-mix(in srgb, var(--color-dark), transparent 95%),
    0 var(--space-xs) var(--space-s) color-mix(in srgb, var(--color-dark), transparent 90%);
  --shadow-l:
    0 8px 24px color-mix(in srgb, var(--color-dark), transparent 90%),
    0 2px 6px color-mix(in srgb, var(--color-dark), transparent 90%);
}

:root[data-color-mode=dark] {
  color-scheme: dark;
  --color-background: var(--color-dark);
  --color-foreground: var(--color-light);
}

:root[data-color-mode=light] {
  color-scheme: light;
  --color-background: var(--color-light);
  --color-foreground: var(--color-dark);
}

html,
body {
  min-height: 100%;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-family);
  line-height: 1.5;
  padding: 0;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

/* Form elements: force theme colors so dark-mode browsers don't override text */
textarea,
input,
select {
  color: var(--color-foreground);
  background-color: transparent;
  -webkit-text-fill-color: var(--color-foreground);
}

body {
  margin: 0;
}

#app {
  min-height: 100vh;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
  margin: 0;
}

body,
html {
  margin: 0;
  background: var(--color-background);
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
}

body {
  background-color: var(--color-accent);
  background-image: radial-gradient(ellipse at center, var(--color-background) 0%, var(--color-background) 50%, black 100%);
  background-attachment: fixed;
  background-size: 100% 100%;
  color: var(--color-foreground);
  padding: 0;
  margin: 0;
  font-size: clamp(var(--font-size-base), 1.25vmin, var(--font-size-xl));
  font-family: var(--font-family-body);
  scroll-behavior: smooth;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-foreground), transparent 90%) transparent;
}

@media screen and (width <= 66em) {
  .hide-mobile {
    display: none;
  }
}

:root {
  --context-panel-background: var(--color-foreground);
  --context-panel-color-text: var(--color-background);
}

.id {
  font-size: var(--font-size-s);
  font-family: "Courier New", Courier, monospace;
  background-color: color-mix(in srgb, var(--color-accent), transparent 75%);
  width: fit-content;
  padding: var(--space-xs);
  border-radius: var(--border-radius-xs);
  border: var(--border-width-s) solid color-mix(in srgb, var(--color-primary), var(--color-accent) 50%);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}
.id span {
  position: relative;
  left: 0;
  width: fit-content;
  transform: translateX(0%);
  transition: all 0.2s ease-in-out;
}
.id:hover {
  text-overflow: none;
}
.id:hover span {
  transition: none;
  left: 100%;
  position: relative;
  display: block;
  transform: translateX(-100%);
  width: fit-content;
}

html {
  height: initial !important;
  scroll-snap-type: none !important;
  overflow-x: hidden;
}

body {
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  display: block !important;
  background: color-mix(in srgb, var(--color-background), var(--color-primary) 4%);
}

button,
input,
textarea {
  font: inherit;
}

.lokki-page {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: var(--spacing);
  display: grid;
  gap: calc(var(--space) * 1.5);
}

.lokki-panel {
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 4%);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
  border-radius: calc(var(--border-radius) * 2);
  padding: calc(var(--space) * 1.5);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--color-foreground), transparent 92%);
}

.lokki-button {
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.25rem;
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.lokki-button:hover {
  transform: translateY(-1px);
}
.lokki-button:active {
  transform: translateY(0) scale(0.98);
}
.lokki-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.lokki-button--ghost {
  background: color-mix(in srgb, var(--color-foreground), transparent 92%);
  color: var(--color-foreground);
}
.lokki-button--danger {
  background: #ef4444;
  color: #fff;
}

.lokki-field {
  display: grid;
  gap: 0.45rem;
}
.lokki-field label {
  font-weight: 750;
}
.lokki-field small {
  color: color-mix(in srgb, currentColor, transparent 45%);
  line-height: 1.4;
}
.lokki-field input,
.lokki-field textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 84%);
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-background), var(--color-foreground) 3%);
  color: var(--color-foreground);
  -webkit-text-fill-color: var(--color-foreground);
  padding: 1rem;
  outline: none;
}
.lokki-field input:focus,
.lokki-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary), transparent 78%);
}
.lokki-field textarea {
  min-height: 220px;
  resize: vertical;
}

.lokki-status {
  border-radius: var(--border-radius);
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--color-primary), transparent 84%);
  color: var(--color-foreground);
  line-height: 1.45;
}
.lokki-status--error {
  background: color-mix(in srgb, #ef4444, transparent 82%);
}
.lokki-status--success {
  background: color-mix(in srgb, #22c55e, transparent 82%);
}