/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --default-font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --default-mono-font-family: var(--font-mono);
    --color-grey-900: oklch(42.0555% .0176298 57.2073);
    --color-grey-800: oklch(51.2823% .0217153 56.8927);
    --color-grey-700: oklch(64.4519% .0251619 56.7458);
    --color-grey-600: oklch(73.3926% .0316484 62.4227);
    --color-grey-500: oklch(79.4664% .0248514 63.4185);
    --color-grey-300: oklch(89.411% .0154318 61.347);
    --color-grey-200: oklch(93.8643% .00857322 44.8437);
    --color-grey-100: oklch(96.1166% .00667632 53.4573);
    --color-grey-50: oklch(97.787% .00412755 56.4382);
    --color-purple-950: oklch(25.6424% .0862699 280.267);
    --color-purple-900: oklch(35.7206% .135864 277.538);
    --color-purple-600: oklch(55.3393% .189653 279.6);
    --color-purple-100: oklch(93.1899% .0324064 270.393);
    --color-purple-50: oklch(96.1895% .0179696 272.201);
    --color-red-900: oklch(41.1596% .101006 31.5878);
    --color-red-800: oklch(50.8471% .136005 31.7705);
    --color-red-700: oklch(56.1962% .152481 31.795);
    --color-red-400: oklch(74.2333% .125365 31.104);
    --color-red-300: oklch(83.3461% .0777281 29.6251);
    --color-red-100: oklch(94.455% .0247262 29.878);
    --color-green-900: oklch(36.9081% .0553377 177.25);
    --color-green-800: oklch(41.6609% .0673303 176.451);
    --color-green-700: oklch(49.194% .0885694 173.573);
    --color-green-400: oklch(74.2732% .103792 171.358);
    --color-green-300: oklch(84.3943% .0755336 165.069);
    --color-green-100: oklch(94.213% .0371641 178.042);
    --color-orange-900: oklch(36.6071% .070944 53.2043);
    --color-orange-800: oklch(45.2069% .0961148 57.0685);
    --color-orange-700: oklch(52.0126% .113944 61.0058);
    --color-orange-400: oklch(79.5318% .157504 85.4093);
    --color-orange-300: oklch(88.7653% .125703 92.7817);
    --color-orange-200: oklch(91.345% .102955 96.5681);
    --color-orange-100: oklch(95.401% .0548793 96.8207);
    --color-blue-950: oklch(22.0645% .0367542 248.351);
    --color-blue-900: oklch(29.0364% .0451052 249.608);
    --color-blue-800: oklch(39.9256% .107879 255.993);
    --color-blue-700: oklch(49.5201% .144792 256.961);
    --color-blue-400: oklch(76.8357% .104381 238.941);
    --color-blue-300: oklch(85.5889% .0806186 234.431);
    --color-blue-100: oklch(96.0112% .0246282 222.587);
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --leading-snug: 1.45;
    --leading-normal: 1.6;
    --spacing-1: .125rem;
    --spacing-2: .25rem;
    --spacing-3: .5rem;
    --spacing-4: .75rem;
    --spacing-5: 1rem;
    --spacing-6: 1.25rem;
    --spacing-7: 1.5rem;
    --spacing-8: 2rem;
    --spacing-9: 2.5rem;
    --spacing-10: 3.25rem;
    --spacing-13: 9.25rem;
    --spacing-15: 18.75rem;
    --spacing-16: 25.5rem;
    --spacing-17: 34.75rem;
    --spacing-18: 47.5rem;
    --font-inter: Inter;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    --color-white: oklch(99.9989% .0000537344 0);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --border-width-1: 1px;
    --border-width-2: 1.5px;
    --border-width-3: 2px;
    --tracking-tight: -.011em;
    --tracking-normal: -.009em;
    --tracking-wider: .1em;
    --border-width-4: 2.5px;
    --color-shadow-sm: oklch(0% 0 0 / .1);
    --shadow-sm-y: 1px;
    --shadow-sm-blur: 8px;
    --color-shadow-md: oklch(0% 0 0 / .06);
    --shadow-md-y: 4px;
    --shadow-md-blur: 4px;
    --color-shadow-lg: oklch(75.7568% .025983 61.5342 / .8);
    --shadow-lg-y: 10px;
    --shadow-lg-blur: 30px;
    --color-warning-text: var(--color-orange-800);
    --color-warning-bg-weak: var(--color-orange-100);
    --color-warning-stroke: var(--color-orange-400);
    --border-width-warning: var(--border-width-3);
    --color-success-bg-weak: var(--color-green-100);
    --color-warning-bg: var(--color-orange-300);
    --color-success-bg-strong: var(--color-green-700);
    --color-success-text: var(--color-green-800);
    --color-destructive-text: var(--color-red-800);
    --color-destructive-bg-weak: var(--color-red-100);
    --color-destructive-bg-strong: var(--color-red-700);
    --color-focus-border: var(--color-blue-800);
    --color-disabled-bg: var(--color-grey-200);
    --color-disabled-text-dark: var(--color-grey-900);
    --color-disabled-icon: var(--color-grey-700);
    --color-success-hover-bg-strong: var(--color-green-800);
    --color-destructive-hover-bg-strong: var(--color-red-800);
    --color-accent: var(--color-green-700);
    --color-callout-bg: var(--color-purple-600);
    --color-callout-text: var(--color-purple-50);
    --color-selection-text: var(--color-purple-950);
    --color-selection-bg: var(--color-purple-100);
    --color-bg-body: var(--color-grey-50);
    --color-text-primary: var(--color-blue-900);
    --font-body: var(--font-inter);
    --tracking-body: var(--tracking-normal);
    --leading-body: var(--leading-normal);
    --font-weight-heading: var(--font-weight-bold);
    --tracking-heading: var(--tracking-tight);
    --leading-heading: var(--leading-snug);
    --color-outline: var(--color-focus-border);
    --color-caret: var(--color-blue-800);
    --color-info-bg-strong: var(--color-blue-700);
    --color-info-bg-weak: var(--color-blue-100);
    --color-info-text: var(--color-blue-900);
    --color-container-body: var(--color-white);
    --color-success-stroke: var(--color-green-400);
    --color-disabled-bg-light: var(--color-grey-100);
    --color-border-light: var(--color-grey-300);
    --color-border-dark: var(--color-grey-500);
    --color-destructive-text-dark: var(--color-red-900);
    --color-muted: var(--color-text-secondary);
    --color-disabled-text-light: var(--color-grey-700);
    --color-info-stroke: var(--color-blue-400);
    --color-destructive-stroke: var(--color-red-400);
    --color-text-secondary: var(--color-grey-800);
    --color-warning-bg-mid: var(--color-orange-200);
    --color-button-primary-bg: var(--color-blue-900);
    --button-radius: 9999px;
    --color-button-primary-text: var(--color-white);
    --button-font-family: var(--font-body);
    --button-font-weight: var(--font-weight-bold);
    --color-button-secondary-text: var(--color-blue-800);
    --color-button-tertiary-text: var(--color-blue-800);
    --color-button-success-bg: var(--color-success-bg-strong);
    --color-button-success-text: var(--color-white);
    --color-button-destructive-bg: var(--color-destructive-bg-strong);
    --color-button-destructive-text: var(--color-white);
    --button-height: var(--spacing-9);
    --button-padding-inline: var(--spacing-6);
    --color-button-primary-hover-bg: var(--color-blue-800);
    --color-button-border: var(--color-grey-500);
    --button-border-width: var(--border-width-2);
    --color-button-hover-border: var(--color-grey-600);
    --color-button-tertiary-hover-text: var(--color-blue-900);
    --color-button-success-hover-bg: var(--color-success-hover-bg-strong);
    --color-button-destructive-hover-bg: var(--color-destructive-hover-bg-strong);
    --color-button-secondary-hover-text: var(--color-blue-800);
    --color-input-placeholder-text: var(--color-grey-900);
    --color-input-bg: var(--color-white);
    --color-input-text: var(--color-blue-900);
    --color-input-bg-active: var(--color-white);
    --color-link-text: var(--color-blue-700);
    --color-link-text-hover: var(--color-blue-800);
    --color-spinner-fg: var(--color-blue-800);
    --color-spinner-bg: var(--color-grey-300);
    --input-radius-sm: var(--radius-sm);
    --color-button-primary-active-text: var(--color-grey-200);
    --color-button-success-active-text: var(--color-grey-200);
    --color-button-destructive-active-text: var(--color-grey-200);
    --color-button-secondary-active-bg: var(--color-grey-100);
    --color-button-tertiary-active-text: var(--color-blue-950);
    --color-button-primary-active-bg: var(--color-blue-800);
    --color-button-secondary-bg: oklch(99.9989% .0000537344 0 / 0);
    --color-button-secondary-hover-bg: oklch(99.9989% .0000537344 0 / 0);
    --color-button-primary-hover-text: var(--color-white);
    --color-button-secondary-active-text: var(--color-blue-950);
    --color-button-success-hover-text: var(--color-white);
    --color-button-success-active-bg: var(--color-success-hover-bg-strong);
    --color-button-destructive-active-bg: var(--color-destructive-hover-bg-strong);
    --color-button-destructive-hover-text: var(--color-white);
    --color-button-tertiary-bg: oklch(99.9989% .0000537344 0 / 0);
    --color-button-tertiary-hover-bg: oklch(99.9989% .0000537344 0 / 0);
    --color-button-tertiary-active-bg: oklch(99.9989% .0000537344 0 / 0);
    --color-button-tertiary-disabled-text: var(--color-disabled-icon);
    --input-spacing-inline: var(--spacing-6);
    --color-button-primary-disabled-bg: var(--color-disabled-bg);
    --color-button-primary-disabled-text: var(--color-disabled-text-dark);
    --color-button-secondary-disabled-bg: var(--color-disabled-bg);
    --color-button-secondary-disabled-text: var(--color-disabled-text-dark);
    --color-button-success-disabled-bg: var(--color-disabled-bg);
    --color-button-success-disabled-text: var(--color-disabled-text-dark);
    --color-button-tertiary-disabled-bg: oklch(99.9989% .0000537344 0 / 0);
    --color-button-destructive-disabled-bg: var(--color-disabled-bg);
    --color-button-destructive-disabled-text: var(--color-disabled-text-dark);
    --color-input-text-active: var(--color-blue-900);
    --color-input-option-bg-hover: var(--color-grey-300);
    --color-input-bg-disabled: var(--color-disabled-bg-light);
    --color-input-placeholder-disabled-text: var(--color-disabled-text-light);
    --color-input-border: var(--color-grey-500);
    --color-input-border-active: var(--color-blue-400);
    --input-border-width: var(--border-width-1);
    --input-radius-lg: var(--radius-md);
    --input-border-width-active: var(--border-width-3);
    --color-input-bg-selected: var(--color-grey-900);
    --input-spacing-block: var(--spacing-5);
    --color-input-label: var(--color-grey-900);
    --color-input-text-disabled: var(--color-disabled-text-light);
    --color-button-tertiary-destructive-text: var(--color-destructive-text);
    --color-button-tertiary-destructive-text-hover: var(--color-destructive-text-dark);
    --color-button-warning-active-text: var(--color-orange-700);
    --color-button-warning-disabled-text: var(--color-disabled-text-dark);
    --color-button-warning-hover-text: var(--color-orange-800);
    --color-button-warning-text: var(--color-orange-800);
    --color-button-warning-disabled-bg: var(--color-disabled-bg);
    --color-button-warning-hover-bg: var(--color-warning-bg);
    --color-button-warning-active-bg: var(--color-warning-bg);
    --color-button-warning-bg: var(--color-warning-bg-mid);
    --color-button-primary-pressed-bg: var(--color-blue-300);
    --color-button-primary-pressed-text: var(--color-blue-900);
    --color-button-secondary-pressed-bg: var(--color-blue-100);
    --color-button-secondary-pressed-text: var(--color-blue-900);
    --color-button-tertiary-pressed-bg: oklch(99.9989% .0000537344 0 / 0);
    --color-button-tertiary-pressed-text: var(--color-blue-900);
    --color-button-success-pressed-bg: var(--color-green-300);
    --color-button-success-pressed-text: var(--color-green-900);
    --color-button-warning-pressed-bg: var(--color-orange-900);
    --color-button-warning-pressed-text: var(--color-orange-200);
    --color-button-destructive-pressed-bg: var(--color-red-300);
    --color-button-destructive-pressed-text: var(--color-red-900);
    --shadow-sm: 0 var(--shadow-sm-y) var(--shadow-sm-blur) var(--color-shadow-sm);
    --shadow-md: 0 var(--shadow-md-y) var(--shadow-md-blur) var(--color-shadow-md);
    --shadow-lg: 0 var(--shadow-lg-y) var(--shadow-lg-blur) var(--color-shadow-lg);
    --spacing-0: 0;
  }

  @media (resolution: 1x) {
    :root {
      --border-width-2: 2px;
      --border-width-4: 3px;
    }
  }
}

@layer base {
  *, :after, :before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer lookbook-base {
  dialog {
    margin: auto;
  }

  html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
  }

  abbr[title] {
    text-decoration: underline dotted;
  }

  :where(button, select) {
    text-transform: none;
  }

  ::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  legend {
    padding: 0;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }

  :where(button, label, select, summary, [role="button"], [role="option"]) {
    cursor: pointer;
  }

  :disabled, :where(label:has( > input:disabled), label:has( + input:disabled)) {
    cursor: not-allowed;
  }

  :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }

  :where(:focus, button:focus) {
    outline: none;
  }

  :where(:focus-visible, button:focus-visible):not(input:where([type="text"], [type="email"], [type="url"], [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="tel"], [type="week"]), textarea, [contenteditable]) {
    outline: 3px solid var(--color-outline, black);
    outline-offset: .15em;
    box-shadow: 0 0 0 6px #fff;
  }

  :where(:focus-visible, :target) {
    scroll-margin-block: 1rlh;
  }

  :root {
    color-scheme: light;
    interpolate-size: allow-keywords;
  }

  :where(html, body) {
    -webkit-font-smoothing: antialiased;
    font-size: 100%;
    line-height: var(--leading-body);
    font-family: var(--font-body);
    font-feature-settings: "calt" 1, "ss03" 1, "case" 1;
    background-color: var(--color-bg-body);
    letter-spacing: var(--tracking-body);
    color: var(--color-text-primary);
    accent-color: var(--color-accent);
    caret-color: var(--color-caret);
  }

  @media (prefers-reduced-motion: no-preference) {
    :where(html:focus-within) {
      scroll-behavior: smooth;
    }
  }

  :where(abbr[title], abbr[data-tooltip]) {
    cursor: help;
  }

  a {
    color: var(--color-link-text);
    text-decoration: none;
  }

  a:hover {
    color: var(--color-link-text-hover);
    text-decoration: underline;
  }

  :where(dt, summary) {
    font-weight: bold;
  }

  pre {
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    padding: var(--spacing-5);
    background-color: var(--color-info-bg-strong);
    color: var(--color-white);
  }

  :where(code, kbd, mark):not(pre > *) {
    border-radius: var(--radius-xs);
    background-color: var(--color-grey-200);
    white-space: nowrap;
    padding-inline: .2em;
  }

  code:not(pre code) {
    font-size-adjust: cap-height .65;
  }

  kbd {
    --border: var(--color-grey-600);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    border: 1px solid var(--border);
    box-shadow: 0 2px 0 var(--border);
    background-color: #fefefe;
  }

  mark {
    background-color: var(--color-callout-bg);
    color: var(--color-callout-text);
  }

  hr {
    border-color: var(--color-border-dark);
  }

  th {
    text-align: left;
  }

  ::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-text);
  }

  ::target-text {
    background-color: var(--color-callout-bg);
    color: var(--color-callout-text);
  }

  :where(h1, h2, h3, h4, h5, h6) {
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--spacing-2);
    font-weight: var(--font-weight-heading);
  }

  :where(h1, h2, h3) {
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-3xl);
  }

  h2 {
    font-size: var(--text-2xl);
  }

  h3 {
    font-size: var(--text-xl);
  }

  h4 {
    font-size: var(--text-lg);
  }

  h5 {
    font-size: var(--text-base);
  }

  h6 {
    font-size: var(--text-sm);
  }

  :root {
    --input-icon-pencil: url("data:image/svg+xml;utf8,<svg width=\"18\" height=\"19\" viewBox=\"0 0 18 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.018 2.08266C13.23 1.87073 13.4816 1.70261 13.7585 1.58792C14.0354 1.47322 14.3322 1.41418 14.6319 1.41418C14.9316 1.41418 15.2284 1.47322 15.5053 1.58792C15.7822 1.70261 16.0338 1.87073 16.2457 2.08266C16.4577 2.29459 16.6258 2.5462 16.7405 2.8231C16.8552 3.1 16.9142 3.39679 16.9142 3.69651C16.9142 3.99622 16.8552 4.29301 16.7405 4.56991C16.6258 4.84682 16.4577 5.09842 16.2457 5.31035L5.35229 16.2038L0.914215 17.4142L2.1246 12.9761L13.018 2.08266Z\" stroke=\"oklch(0.42055464277250465 0.017629829299455804 57.20727998394045)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
    --input-icon-pencil-warning: url("data:image/svg+xml;utf8,<svg width=\"18\" height=\"19\" viewBox=\"0 0 18 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.018 2.08266C13.23 1.87073 13.4816 1.70261 13.7585 1.58792C14.0354 1.47322 14.3322 1.41418 14.6319 1.41418C14.9316 1.41418 15.2284 1.47322 15.5053 1.58792C15.7822 1.70261 16.0338 1.87073 16.2457 2.08266C16.4577 2.29459 16.6258 2.5462 16.7405 2.8231C16.8552 3.1 16.9142 3.39679 16.9142 3.69651C16.9142 3.99622 16.8552 4.29301 16.7405 4.56991C16.6258 4.84682 16.4577 5.09842 16.2457 5.31035L5.35229 16.2038L0.914215 17.4142L2.1246 12.9761L13.018 2.08266Z\" stroke=\"oklch(0.4520689571827139 0.0961148162691226 57.06845838474611)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
    --input-icon-pencil-active: url("data:image/svg+xml;utf8,<svg width=\"18\" height=\"19\" viewBox=\"0 0 18 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.018 2.08266C13.23 1.87073 13.4816 1.70261 13.7585 1.58792C14.0354 1.47322 14.3322 1.41418 14.6319 1.41418C14.9316 1.41418 15.2284 1.47322 15.5053 1.58792C15.7822 1.70261 16.0338 1.87073 16.2457 2.08266C16.4577 2.29459 16.6258 2.5462 16.7405 2.8231C16.8552 3.1 16.9142 3.39679 16.9142 3.69651C16.9142 3.99622 16.8552 4.29301 16.7405 4.56991C16.6258 4.84682 16.4577 5.09842 16.2457 5.31035L5.35229 16.2038L0.914215 17.4142L2.1246 12.9761L13.018 2.08266Z\" stroke=\"oklch(0.49520078456250793 0.14479214891924955 256.96105608148923)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
    --input-icon-pencil-disabled: url("data:image/svg+xml;utf8,<svg width=\"18\" height=\"19\" viewBox=\"0 0 18 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.018 2.08266C13.23 1.87073 13.4816 1.70261 13.7585 1.58792C14.0354 1.47322 14.3322 1.41418 14.6319 1.41418C14.9316 1.41418 15.2284 1.47322 15.5053 1.58792C15.7822 1.70261 16.0338 1.87073 16.2457 2.08266C16.4577 2.29459 16.6258 2.5462 16.7405 2.8231C16.8552 3.1 16.9142 3.39679 16.9142 3.69651C16.9142 3.99622 16.8552 4.29301 16.7405 4.56991C16.6258 4.84682 16.4577 5.09842 16.2457 5.31035L5.35229 16.2038L0.914215 17.4142L2.1246 12.9761L13.018 2.08266Z\" stroke=\"oklch(0.6445190811447986 0.025161898688078468 56.7458039076113)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
    --input-icon-search: url("data:image/svg+xml;utf8,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 33 33\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.08338 2.05691C2.33463 4.92505 -0.811209 12.7211 2.05694 19.4698C4.92508 26.2186 12.7211 29.3644 19.4699 26.4963C20.4385 26.0846 21.3328 25.5715 22.1459 24.9745L29.5824 32.412C30.3634 33.1931 31.6297 33.1932 32.4108 32.4122C33.1919 31.6312 33.192 30.3649 32.411 29.5838L24.9737 22.1454C27.656 18.4917 28.3977 13.5574 26.4963 9.08335C23.6281 2.3346 15.8321 -0.811239 9.08338 2.05691ZM20.9137 20.7623C23.4505 18.1642 24.324 14.1986 22.815 10.6479C20.8109 5.93228 15.3635 3.73416 10.6479 5.73824C5.93231 7.74232 3.73419 13.1897 5.73827 17.9053C7.74235 22.6209 13.1897 24.819 17.9053 22.8149C19.0001 22.3496 19.9593 21.6987 20.7616 20.9145C20.7856 20.8878 20.8104 20.8616 20.8361 20.8359C20.8615 20.8105 20.8874 20.786 20.9137 20.7623Z\" fill=\"oklch(0.7339257262016716 0.03164836056507093 62.42273383732768)\" /></svg>");
  }

  :where(label:has( + :where(input, textarea, select, [contenteditable="true"].StyledInput),  + * > :where(input, textarea, select, [contenteditable="true"].StyledInput)), .label) {
    font-weight: var(--font-weight-bold);
    color: var(--color-input-label);
    font-size: var(--text-sm);
  }

  :where(label:has( + :where(input, textarea, select, [contenteditable="true"].StyledInput),  + * > :where(input, textarea, select, [contenteditable="true"].StyledInput)), .label):not(.label) {
    margin-bottom: var(--spacing-3);
    display: block;
  }

  :where(input, textarea)::placeholder {
    color: var(--color-input-placeholder-text);
    font-style: italic;
  }

  [contenteditable="true"][aria-placeholder]:empty:before {
    content: attr(aria-placeholder);
    color: var(--color-input-placeholder-text);
    pointer-events: none;
    display: inline-block;
  }

  [contenteditable="true"][aria-disabled="true"] {
    pointer-events: none;
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="range"]), textarea, select, [contenteditable="true"].StyledInput) {
    --border-width: var(--input-border-width);
    --border-color: var(--color-input-border);
    appearance: none;
    border-radius: var(--input-radius-sm);
    background-color: var(--color-input-bg);
    color: var(--color-input-text);
    padding: var(--input-spacing-block) var(--input-spacing-inline);
    box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="range"]), textarea, select, [contenteditable="true"].StyledInput):where(:not(select[multiple]):focus) {
    --border-width: var(--input-border-width-active);
    --border-color: var(--color-input-border-active);
    background-color: var(--color-input-bg-active);
    color: var(--color-input-text-active);
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="range"]), textarea, select, [contenteditable="true"].StyledInput):where(:disabled, :read-only, [aria-disabled="true"]) {
    background-color: var(--color-input-bg-disabled);
    box-shadow: none;
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="range"]), textarea, select, [contenteditable="true"].StyledInput):where(:disabled, :read-only, [aria-disabled="true"]):disabled {
    color: var(--color-input-text-disabled);
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="range"]), textarea, select, [contenteditable="true"].StyledInput):where(:disabled, :read-only, [aria-disabled="true"])::placeholder, :where(input:not([type="radio"], [type="checkbox"], [type="range"]), textarea, select, [contenteditable="true"].StyledInput)[aria-disabled="true"][aria-placeholder]:empty:before {
    color: var(--color-input-placeholder-disabled-text);
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="range"]), textarea, select, [contenteditable="true"].StyledInput):where(:user-invalid, :user-invalid:focus, .input-invalid, [aria-invalid="true"]) {
    --border-color: var(--color-warning-stroke);
    --border-width: var(--border-width-warning);
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="range"]), select:not([multiple])) {
    height: var(--spacing-10);
    line-height: 1;
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="range"]), select:not([multiple])).mode-inline {
    border-radius: revert-layer;
    padding: revert-layer;
    box-shadow: inset 0 calc(var(--border-width) * -1) 0 0 var(--border-color);
    font-weight: normal;
    font-size: var(--text-lg);
    background: transparent var(--input-icon-pencil) no-repeat right var(--spacing-4) center;
    background-size: .8em;
    padding-right: 2.5em;
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="range"]), select:not([multiple])).mode-inline:focus {
    background-image: var(--input-icon-pencil-active);
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="range"]), select:not([multiple])).mode-inline:disabled {
    background-image: var(--input-icon-pencil-disabled);
  }

  :where(input:not([type="radio"], [type="checkbox"], [type="range"]), select:not([multiple])).mode-inline:is(:user-invalid, :user-invalid:focus) {
    background-image: var(--input-icon-pencil-warning);
  }

  :where(textarea, [contenteditable="true"].StyledInput) {
    padding: var(--input-spacing-block) var(--input-spacing-inline);
    border-radius: var(--input-radius-lg);
    font-weight: var(--font-weight-normal);
  }

  input:where([type="search"]) {
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: left var(--spacing-4) center;
    background-image: var(--input-icon-search);
    border-radius: 4em;
    padding-left: 2.3em;
  }

  select {
    text-overflow: ellipsis;
  }

  select:not([multiple]) {
    padding-right: var(--spacing-8);
    background-repeat: no-repeat;
    background-size: .75em;
    background-position: right var(--spacing-4) center;
    background-image: url("data:image/svg+xml;utf8,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M0.679556 5.56825C1.54021 4.76907 2.88576 4.81891 3.68493 5.67956L12 14.6342L20.3151 5.67956C21.1142 4.81891 22.4598 4.76907 23.3204 5.56825C24.1811 6.36742 24.2309 7.71297 23.4318 8.57362L13.5583 19.2065C13.156 19.6399 12.5913 19.8861 12 19.8861C11.4087 19.8861 10.844 19.6399 10.4417 19.2065L0.568245 8.57362C-0.23093 7.71297 -0.181094 6.36742 0.679556 5.56825Z\" fill=\"currentColor\"/></svg>");
  }

  select[multiple] {
    --padding: 4px;
    padding: var(--padding);
    resize: block;
    height: fit-content;
  }

  select[multiple] option {
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: calc(var(--input-radius-sm)  - var(--padding) / 2);
  }

  select[multiple] option:hover:not(:checked):enabled {
    background-color: var(--color-input-option-bg-hover);
  }

  select[multiple] option:not(:last-child) {
    margin-bottom: 2px;
  }

  select[multiple] option:checked {
    background-color: var(--color-input-bg-selected);
    color: var(--color-white);
  }

  progress {
    --bg-color: var(--color-grey-300);
    --filler-color: var(--color-accent);
    --radius: 3em;
    height: var(--spacing-2);
    background-color: var(--bg-color);
    border-radius: var(--radius);
    width: 100%;
  }

  :is(progress.done, progress[value="1"], progress[value="100"]) {
    --filler-color: var(--color-success-bg-strong);
  }

  progress::-webkit-progress-bar {
    background-color: var(--bg-color);
    border-radius: var(--radius);
  }

  progress::-moz-progress-bar {
    border-radius: var(--radius);
    background-color: var(--filler-color);
    transition: width .1s;
  }

  progress::-webkit-progress-value {
    border-radius: var(--radius);
    background-color: var(--filler-color);
    transition: width .1s;
  }

  input[type="color"] {
    appearance: auto;
    padding: inherit;
    height: revert-layer;
  }

  fieldset:disabled {
    opacity: .5;
    pointer-events: none;
  }

  input[type="range"] {
    --track-color: var(--color-accent);
    --track-height: var(--spacing-3);
    --track-radius: 2em;
    --focus-ring: var(--color-outline) 0 0 0 3px;
    --thumb-color: var(--color-grey-100);
    --thumb-color-hover: var(--color-white);
    --thumb-color-active: var(--color-grey-300);
    --thumb-size: 17px;
    --thumb-base-shadow: #0003 0 1px 1px, #0000004d 0 0 1px, #0003 0 1px 5px;
    --thumb-active-shadow: #0003 0 1px 1px, #0000004d 0 0 3px;
    --thumb-transition: background-color .2s ease;
    --thumb-offset: calc((var(--thumb-size)  - var(--track-height)) / -2);
    appearance: none;
    background: none;
  }

  input[type="range"]:focus-visible {
    outline: 0;
  }

  input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--thumb-active-shadow), var(--focus-ring);
  }

  input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: var(--thumb-active-shadow), var(--focus-ring);
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: var(--thumb-color);
    cursor: grab;
    box-shadow: var(--thumb-base-shadow);
    width: var(--thumb-size);
    height: var(--thumb-size);
    top: var(--thumb-offset);
    transition: var(--thumb-transition);
    border-radius: 100%;
    position: relative;
  }

  input[type="range"]::-webkit-slider-thumb:hover {
    background-color: var(--thumb-color-hover);
  }

  input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
    background-color: var(--thumb-color-active);
    box-shadow: var(--thumb-active-shadow);
  }

  input[type="range"]::-moz-range-thumb {
    background-color: var(--thumb-color);
    cursor: grab;
    box-shadow: var(--thumb-base-shadow);
    width: var(--thumb-size);
    height: var(--thumb-size);
    top: var(--thumb-offset);
    transition: var(--thumb-transition);
    border-radius: 100%;
    position: relative;
  }

  input[type="range"]::-moz-range-thumb:hover {
    background-color: var(--thumb-color-hover);
  }

  input[type="range"]::-moz-range-thumb:active {
    background-color: var(--thumb-color-active);
    cursor: grabbing;
    box-shadow: var(--thumb-active-shadow);
  }

  input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--track-color);
    border-radius: var(--track-radius);
    height: var(--track-height);
  }

  input[type="range"]::-moz-range-track {
    background-color: var(--track-color);
    border-radius: var(--track-radius);
    height: var(--track-height);
  }
}

@layer components;

@layer lookbook-components {
  .btn {
    --bg: var(--color-button-primary-bg);
    --text: var(--color-button-primary-text);
    --bg-hover: var(--color-button-primary-hover-bg);
    --text-hover: var(--color-button-primary-hover-text);
    --bg-active: var(--color-button-primary-active-bg);
    --text-active: var(--color-button-primary-active-text);
    --bg-disabled: var(--color-button-primary-disabled-bg);
    --text-disabled: var(--color-button-primary-disabled-text);
    --bg-pressed: var(--color-button-primary-pressed-bg);
    --text-pressed: var(--color-button-primary-pressed-text);
    gap: var(--spacing-3);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    white-space: nowrap;
    font-weight: var(--button-font-weight);
    border-radius: var(--button-radius);
    height: var(--button-height);
    padding-inline: var(--button-padding-inline);
    line-height: 1;
    font-family: var(--button-font-family);
    background-color: var(--bg);
    color: var(--text);
    border: 0 solid var(--color-button-border);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
  }

  .btn:where([aria-label], :has( > .sr-only)):has( > .icon:first-child) {
    --button-height: 2.5em;
    aspect-ratio: 1;
    border-radius: 999em;
    padding: 0;
  }

  .btn:where(:focus, :hover, :active, :disabled) {
    text-decoration: none;
  }

  .btn[aria-pressed="true"] {
    color: var(--text-pressed);
    background-color: var(--bg-pressed);
  }

  .btn[aria-pressed="true"]:active {
    color: var(--text-pressed);
    background-color: oklch(from var(--bg-pressed) calc(l - .1) c h);
  }

  .btn:where(:hover, [aria-expanded="true"]) {
    border-color: var(--color-button-hover-border);
    color: var(--text-hover);
    background-color: var(--bg-hover);
  }

  .btn:active {
    border-color: var(--color-button-hover-border);
    color: var(--text-active);
    background-color: var(--bg-active);
  }

  .btn:disabled {
    background-color: var(--bg-disabled);
    color: var(--text-disabled);
  }

  .btn:where(.btn-destructive, .btn-success) {
    --color-outline: var(--bg);
  }

  .btn-secondary {
    --bg: var(--color-button-secondary-bg);
    --text: var(--color-button-secondary-text);
    --bg-active: var(--color-button-secondary-active-bg);
    --text-active: var(--color-button-secondary-active-text);
    --bg-hover: var(--color-button-secondary-hover-bg);
    --text-hover: var(--color-button-secondary-hover-text);
    --bg-disabled: var(--color-button-secondary-disabled-bg);
    --text-disabled: var(--color-button-secondary-disabled-text);
    --bg-pressed: var(--color-button-secondary-pressed-bg);
    --text-pressed: var(--color-button-secondary-pressed-text);
    border-width: var(--button-border-width);
    outline-offset: -2px;
  }

  .btn-secondary[aria-pressed="true"] {
    border-color: currentColor;
  }

  .btn-secondary:disabled {
    border-color: #0000;
  }

  .btn-success {
    --bg: var(--color-button-success-bg);
    --text: var(--color-button-success-text);
    --bg-active: var(--color-button-success-active-bg);
    --text-active: var(--color-button-success-active-text);
    --bg-hover: var(--color-button-success-hover-bg);
    --text-hover: var(--color-button-success-hover-text);
    --bg-disabled: var(--color-button-success-disabled-bg);
    --text-disabled: var(--color-button-success-disabled-text);
    --bg-pressed: var(--color-button-success-pressed-bg);
    --text-pressed: var(--color-button-success-pressed-text);
  }

  .btn-destructive {
    --bg: var(--color-button-destructive-bg);
    --text: var(--color-button-destructive-text);
    --bg-active: var(--color-button-destructive-active-bg);
    --text-active: var(--color-button-destructive-active-text);
    --bg-hover: var(--color-button-destructive-hover-bg);
    --text-hover: var(--color-button-destructive-hover-text);
    --bg-disabled: var(--color-button-destructive-disabled-bg);
    --text-disabled: var(--color-button-destructive-disabled-text);
    --bg-pressed: var(--color-button-destructive-pressed-bg);
    --text-pressed: var(--color-button-destructive-pressed-text);
  }

  .btn-warning {
    --bg: var(--color-button-warning-bg);
    --text: var(--color-button-warning-text);
    --bg-active: var(--color-button-warning-active-bg);
    --text-active: var(--color-button-warning-active-text);
    --bg-hover: var(--color-button-warning-hover-bg);
    --text-hover: var(--color-button-warning-hover-text);
    --bg-disabled: var(--color-button-warning-disabled-bg);
    --text-disabled: var(--color-button-warning-disabled-text);
    --bg-pressed: var(--color-button-warning-pressed-bg);
    --text-pressed: var(--color-button-warning-pressed-text);
  }

  .btn-tertiary {
    --bg: var(--color-button-tertiary-bg);
    --text: var(--color-button-tertiary-text);
    --bg-active: var(--color-button-tertiary-active-bg);
    --text-active: var(--color-button-tertiary-active-text);
    --bg-hover: var(--color-button-tertiary-hover-bg);
    --text-hover: var(--color-button-tertiary-hover-text);
    --bg-disabled: var(--color-button-tertiary-disabled-bg);
    --text-disabled: var(--color-button-tertiary-disabled-text);
    --color-outline: var(--text);
    --bg-pressed: var(--color-button-tertiary-pressed-bg);
    --text-pressed: var(--color-button-tertiary-pressed-text);
    outline-offset: -2px;
  }

  .btn-tertiary:not(:disabled) {
    position: relative;
  }

  .btn-tertiary:not(:disabled):active {
    top: 1px;
  }

  .btn-tertiary:where(:hover, :active, :focus-visible) {
    text-decoration: underline;
  }

  .btn-tertiary:disabled {
    color: var(--color-disabled-icon);
    background: none;
  }

  .btn-tertiary:where([aria-label], :has( > .sr-only)):has( > .icon:first-child) {
    --bg-hover: var(--color-grey-200);
    --bg-active: var(--color-grey-300);
    --bg-pressed: var(--text);
    --text-pressed: var(--color-blue-100);
    transition: background-color .15s;
  }

  .btn-tertiary:where([aria-label], :has( > .sr-only)):has( > .icon:first-child):active {
    top: auto;
  }

  .btn-tertiary:where([aria-label], :has( > .sr-only)):has( > .icon:first-child).btn-tertiary--destructive {
    --bg-hover: var(--color-destructive-bg-weak);
    --bg-active: #eed9d5;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .btn-tertiary:where([aria-label], :has( > .sr-only)):has( > .icon:first-child).btn-tertiary--destructive {
      --bg-active: color-mix(in srgb, var(--color-destructive-bg-weak), black 6%);
    }
  }

  .btn-tertiary--destructive {
    --text: var(--color-button-tertiary-destructive-text);
    --text-hover: var(--color-button-tertiary-destructive-text-hover);
    --text-active: var(--color-button-tertiary-destructive-text-hover);
  }

  @keyframes spinner {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .Spinner {
    --size: var(--spacing-8);
    --bg: var(--color-spinner-bg);
    --fg: var(--color-spinner-fg);
  }

  .Spinner--light {
    --bg: var(--color-spinner-fg);
    --fg: var(--color-spinner-bg);
  }

  @media (prefers-reduced-motion: no-preference) {
    .Spinner {
      font-size: var(--size);
      aspect-ratio: 1;
      text-indent: -9999em;
      height: 1.41421em;
      display: inline-block;
      position: relative;
    }

    .Spinner:after {
      content: " ";
      text-indent: -9999em;
      border: 2px solid var(--bg);
      border-left-color: var(--fg);
      border-radius: 50%;
      width: 1em;
      height: 1em;
      animation: .8s linear infinite spinner;
      display: inline-block;
      position: absolute;
      top: calc(50% - .5em);
      left: calc(50% - .5em);
      overflow: hidden;
      transform: translateZ(0);
    }
  }

  .input-group {
    gap: var(--spacing-3);
    align-items: center;
    display: flex;
  }

  :where(.input-group > input:not([type="range"], [type="radio"], [type="checkbox"]), .input-group__input) {
    flex: 1;
  }

  .input-group .btn {
    border-radius: var(--radius-sm);
    height: calc(var(--spacing-10)  - 4px);
  }

  .Badge {
    --fg_: var(--color-success-text);
    --bg_: var(--color-success-bg-weak);
    --fg: var(--fg_);
    --bg: var(--bg_);
    border-radius: var(--radius-lg);
    gap: var(--spacing-2);
    color: var(--fg);
    background-color: var(--bg);
    align-items: center;
    padding: .3em .6em;
    line-height: 1.3;
    display: inline-flex;
  }

  .Badge--custom {
    --color: oklch(40% .1643 var(--hue, 250));
    --bg: oklch(from var(--color) 97% .02 h);
    --fg: var(--color);
  }

  .Badge--custom.Badge--interactive:where(:hover, :focus-visible, [aria-selected="true"] *) {
    --bg: oklch(from var(--color) 94% .02 h);
  }

  .Badge--purple {
    --fg_: var(--color-purple-900);
    --bg_: var(--color-purple-100);
  }

  .Badge--grey {
    --fg_: var(--color-grey-900);
    --bg_: var(--color-grey-100);
  }

  .Badge--negative {
    --fg_: var(--color-destructive-text);
    --bg_: var(--color-destructive-bg-weak);
  }

  .Badge--orange {
    --fg_: var(--color-orange-900);
    --bg_: var(--color-orange-100);
  }

  .Badge--invert {
    --fg: var(--bg_);
    --bg: var(--fg_);
    --darken-factor: .8;
  }

  .Badge:is(button, a):where(:hover, [aria-expanded="true"]) {
    background-color: oklch(from var(--bg) calc(l * var(--darken-factor, .98)) calc(c * 1.1) h);
  }

  .Badge:is(button, a):active {
    color: oklch(from var(--fg) calc(l * .93) c h / 70%);
  }

  .Badge:is(a):where(:hover, :focus-visible), .Badge a {
    color: var(--fg);
  }

  .Badge:where([aria-selected="true"] *) {
    outline: 2px solid;
  }

  .StatusBadge {
    --fg: var(--color-success-text);
    --bg: var(--color-success-bg-weak);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    border-radius: var(--radius-lg);
    color: var(--fg);
    background-color: var(--bg);
    letter-spacing: var(--tracking-wider);
    padding: .35em 1.35em;
    line-height: 1.2;
  }

  .StatusBadge--negative {
    --fg: var(--color-destructive-text);
    --bg: var(--color-destructive-bg-weak);
  }

  .input-warning {
    color: var(--color-warning-text);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
  }

  .Box {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-7) var(--spacing-8);
    background-color: var(--color-container-body);
    transition: background-color .3s, box-shadow .3s;
    transform: translateZ(0);
  }

  .Box > :last-child:not(dialog) {
    margin-bottom: 0;
  }

  .Box--hoverable {
    background-color: rgb(from var(--color-white) r g b / 85%);
  }

  .Box--hoverable:where(:hover, :focus-visible, :focus-within) {
    box-shadow: var(--shadow-lg);
    background-color: var(--color-white);
    text-decoration: none;
  }

  .Box--hoverable:has(.BlockLink__Link:focus-visible) {
    outline: 3px solid #000;
  }

  .TabList {
    --color: var(--color-text-primary);
    --active-border: var(--border-width-4);
    --bottom-border: var(--border-width-1);
    align-items: center;
    gap: var(--spacing-4);
    border-bottom: var(--bottom-border) solid var(--color-border-dark);
    flex-wrap: wrap;
    display: flex;
  }

  .TabList [role="tab"] {
    padding: var(--spacing-4);
    text-decoration: none;
    display: inline-block;
    position: relative;
  }

  .TabList [role="tab"]:where(.TabList [role="tab"], .TabList [role="tab"] a) {
    color: var(--color);
  }

  .TabList [role="tab"]:is([aria-current="page"], [aria-selected="true"]) {
    pointer-events: none;
    font-weight: var(--font-weight-bold);
  }

  .TabList [role="tab"]:is([aria-current="page"], [aria-selected="true"]):after {
    content: "";
    inset-inline: 0;
    bottom: calc(var(--bottom-border) * -1);
    height: var(--active-border);
    background-color: var(--color);
    position: absolute;
  }

  .SegmentSwitch {
    --radius: var(--radius-md);
    --bg: var(--color-disabled-bg);
    --fg: var(--color-disabled-text-dark);
    --selected-bg: var(--color-info-bg-weak);
    --selected-color: var(--color-info-text);
    --selected-border: var(--color-info-stroke);
    --selected-border-width: var(--border-width-3);
    border-radius: var(--radius);
    text-align: center;
    background-color: var(--bg);
    align-items: center;
    display: inline-flex;
  }

  .SegmentSwitch input {
    position: absolute;
    left: -999em;
  }

  .SegmentSwitch :where(label, [role="tab"]) {
    font-weight: inherit;
    color: var(--fg);
    border-radius: var(--radius);
    white-space: nowrap;
    flex: 1;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    padding: .35em 1.35em;
    display: inline-flex;
  }

  .SegmentSwitch :where(label, [role="tab"]).SegmentSwitch--warning {
    --selected-bg: var(--color-warning-bg-weak);
    --selected-color: var(--color-warning-text);
    --selected-border: var(--color-warning-stroke);
  }

  .SegmentSwitch :where(label, [role="tab"]).SegmentSwitch--destructive {
    --selected-bg: var(--color-destructive-bg-weak);
    --selected-color: var(--color-destructive-text);
    --selected-border: var(--color-destructive-stroke);
  }

  .SegmentSwitch :where(label, [role="tab"]).SegmentSwitch--success {
    --selected-bg: var(--color-success-bg-weak);
    --selected-color: var(--color-success-text);
    --selected-border: var(--color-success-stroke);
  }

  .SegmentSwitch label:has(input:focus-visible) {
    outline: 3px solid var(--color-outline, black);
  }

  .SegmentSwitch label {
    margin: 0;
  }

  .SegmentSwitch :where(label:has(input:checked), [aria-selected="true"]) {
    cursor: default;
    background-color: var(--selected-bg);
    color: var(--selected-color);
    font-weight: var(--font-weight-bold);
    box-shadow: inset 0 0 0 var(--selected-border-width) var(--tw-shadow-color, var(--selected-border));
  }

  .SegmentSwitch [role="tab"] {
    font-weight: var(--font-weight-bold);
  }

  .SegmentSwitch:is(nav) {
    --selected-border-width: var(--border-width-4);
  }

  .SegmentSwitch:is(nav) :where(label, [role="tab"]) {
    padding-block: .75em;
  }
}

@layer app {
  html {
    padding: var(--spacing-5);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    display: flex;
  }

  body {
    max-width: var(--spacing-18);
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
  }

  p {
    margin-bottom: var(--spacing-5);
  }

  .TabContainer input[type="radio"] {
    position: absolute;
    left: -999em;
  }

  .TabContainer input[type="radio"]:checked + [role="tabpanel"] {
    display: block;
  }

  .TabContainer [role="tabpanel"] {
    display: none;
  }

  .social-btn {
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    padding-right: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    border: var(--border-width-1) solid var(--color-border-light);
    color: oklch(0% 0 0 / .8);
    background-color: oklch(from var(--color-white) l c h / 70%);
    font-weight: var(--font-weight-bold);
    border-radius: 5em;
    align-items: center;
    display: inline-flex;
  }

  .social-btn:where(:hover, :focus-visible) {
    color: #000;
    background-color: var(--color-white);
    text-decoration: none;
  }

  .social-btn:active {
    background-color: var(--color-grey-100);
    border-color: var(--color-border-dark);
    box-shadow: none;
  }

  .social-btn svg {
    width: 2em;
  }
}

@layer utilities {
  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .-top-4 {
    top: calc(var(--spacing-4) * -1);
  }

  .-right-10 {
    right: calc(var(--spacing-10) * -1);
  }

  .container {
    width: 100%;
  }

  @media (width >= 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (width >= 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (width >= 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (width >= 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (width >= 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mt-4 {
    margin-top: var(--spacing-4);
  }

  .mt-5 {
    margin-top: var(--spacing-5);
  }

  .mt-7 {
    margin-top: var(--spacing-7);
  }

  .mr-3 {
    margin-right: var(--spacing-3);
  }

  .mb-0 {
    margin-bottom: var(--spacing-0);
  }

  .mb-1 {
    margin-bottom: var(--spacing-1);
  }

  .mb-3 {
    margin-bottom: var(--spacing-3);
  }

  .mb-4 {
    margin-bottom: var(--spacing-4);
  }

  .mb-5 {
    margin-bottom: var(--spacing-5);
  }

  .mb-7 {
    margin-bottom: var(--spacing-7);
  }

  .mb-10 {
    margin-bottom: var(--spacing-10);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .hidden {
    display: none;
  }

  .w-13 {
    width: var(--spacing-13);
  }

  .w-15 {
    width: var(--spacing-15);
  }

  .w-17 {
    width: var(--spacing-17);
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .max-w-16 {
    max-width: var(--spacing-16);
  }

  .flex-col {
    flex-direction: column;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-3 {
    gap: var(--spacing-3);
  }

  .gap-5 {
    gap: var(--spacing-5);
  }

  .gap-7 {
    gap: var(--spacing-7);
  }

  .p-10 {
    padding: var(--spacing-10);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .text-2xl {
    font-size: var(--text-2xl);
  }

  .text-base {
    font-size: var(--text-base);
  }

  .text-lg {
    font-size: var(--text-lg);
  }

  .text-sm {
    font-size: var(--text-sm);
  }

  .text-xl {
    font-size: var(--text-xl);
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-pre-line {
    white-space: pre-line;
  }

  .text-muted {
    color: var(--color-muted);
  }

  .text-warning-text {
    color: var(--color-warning-text);
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }
}

@layer lookbook-utils {
  @keyframes dots {
    0%, 20% {
      color: #0000;
      text-shadow: .25em 0 #0000, .5em 0 #0000;
    }

    40% {
      color: currentColor;
      text-shadow: .25em 0 #0000, .5em 0 #0000;
    }

    60% {
      text-shadow: .25em 0, .5em 0 #0000;
    }

    80%, 100% {
      text-shadow: .25em 0, .5em 0;
    }
  }

  .LoadingDots:after {
    content: ".";
    animation: 1.5s steps(5, end) infinite dots;
  }

  .trans-appear-height {
    transition: height .3s;
    overflow-y: clip;
  }

  @starting-style {
    .trans-appear-height {
      height: 0;
    }
  }

  .trans-appear-pop {
    transition: transform .5s;
    transition-timing-function: linear(0, .01, .042 1.6%, .172 3.4%, .856 9.5%, 1.092 12.1%, 1.237 14.5%, 1.279, 1.301 16.9%, 1.305, 1.302 18.6%, 1.275 20.3%, .986 29.3%, .933, .909 34.6%, .908, .916 38.1%, 1.004 47%, 1.02, 1.028 52.2%, 1.026 55.9%, .999 64.7%, .992 69.5%, 1.002 86.5%, 1);
    transform: scale(1);
  }

  @starting-style {
    .trans-appear-pop {
      transform: scale(0);
    }
  }

  .trans-appear-majestic {
    opacity: 1;
    transition: transform 1.5s, opacity 1.5s, box-shadow 1.5s .25s;
    transform: none;
  }

  @starting-style {
    .trans-appear-majestic {
      opacity: 0;
      transform: perspective(1000px)translate3d(0, 0, -80px);
      box-shadow: none !important;
    }
  }

  .trans-float-up {
    opacity: 1;
    transition: opacity .2s, transform .2s;
    transform: none;
  }

  @starting-style {
    .trans-float-up {
      opacity: 0;
      transform: translate(0, 100%);
    }
  }
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}