/* Basecoat 1.1.0 / Maia, MIT (hunvreus). Selected native CSS components; generated by scripts/theme/build-personaliser-components.cjs. No global reset, runtime, fonts or external requests. */
/* MIT License

Copyright (c) 2025 Ronan Berder

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. */
.cp-personaliser {
    --tw-border-style: solid;
    --tw-content: "";
    --tw-shadow: 0 0 #0000;
    --tw-shadow-alpha: 100%;
    --tw-inset-shadow: 0 0 #0000;
    --tw-inset-shadow-alpha: 100%;
    --tw-ring-shadow: 0 0 #0000;
    --tw-inset-ring-shadow: 0 0 #0000;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-space-x-reverse: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-translate-z: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scale-z: 1;
    --tw-outline-style: solid;
    --font-sans: "Geist", "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-tight: -0.025em;
    --tracking-widest: 0.1em;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-xs: 4px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: #93c5fd;
  --chart-2: #3b82f6;
  --chart-3: #2563eb;
  --chart-4: #1d4ed8;
  --chart-5: #1e40af;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --sidebar-width: 16rem;
  --sidebar-mobile-width: 18rem;
  --scrollbar-track: transparent;
  --scrollbar-thumb: var(--border);
  --scrollbar-width: 0.625rem;
  --scrollbar-sm-width: 0.375rem;
  --scrollbar-radius: 9999px;
  --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
  --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');
}
.cp-personaliser .btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-outline-style: none;
    outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      opacity: 50%;
    }
    & svg {
      pointer-events: none;
    }
    & svg {
      flex-shrink: 0;
    }
  }
.cp-personaliser .card {
    display: flex;
    flex-direction: column;
    > header {
      container-type: inline-size;
      container-name: card-header;
      display: grid;
      grid-auto-rows: min-content;
      align-items: flex-start;
      &:has(>[data-slot=card-action],>.card-action) {
        grid-template-columns: 1fr auto;
      }
      &:has(>p) {
        grid-template-rows: auto auto;
      }
    }
    > header > :is(h2, h3, [data-title], .card-title) {
      --tw-leading: 1;
      line-height: 1;
    }
    > header > :is([data-slot='card-action'], .card-action) {
      grid-column-start: 2;
      grid-row: span 2 / span 2;
      grid-row-start: 1;
      align-self: flex-start;
      justify-self: flex-end;
    }
    > header > menu.card-action {
      margin: 0;
      list-style-type: none;
      padding: 0;
    }
    > footer {
      display: flex;
      align-items: center;
    }
  }
.cp-personaliser .field > input[type='checkbox']:not([role='switch']),
.cp-personaliser .input[type='checkbox']:not([role='switch']) {
    position: relative;
    flex-shrink: 0;
    appearance: none;
    --tw-outline-style: none;
    outline-style: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    &:checked:after {
      display: block;
      background-color: currentcolor;
      --tw-content: '';
      content: var(--tw-content);
      mask-image: var(--check-icon);
      mask-size: 0.875rem;
      mask-position: center;
      mask-repeat: no-repeat;
    }
  }
.cp-personaliser .field > input[type='text']:not(:is(.command > header input, .dialog > * > header input)),
.cp-personaliser .field > input[type='email'],
.cp-personaliser .field > input[type='password'],
.cp-personaliser .field > input[type='number'],
.cp-personaliser .field > input[type='file'],
.cp-personaliser .field > input[type='tel'],
.cp-personaliser .field > input[type='url'],
.cp-personaliser .field > input[type='search']:not(:is(.command > header input, .dialog > * > header input)),
.cp-personaliser .field > input[type='date'],
.cp-personaliser .field > input[type='datetime-local'],
.cp-personaliser .field > input[type='month'],
.cp-personaliser .field > input[type='week'],
.cp-personaliser .field > input[type='time'],
.cp-personaliser .input[type='text'],
.cp-personaliser .input[type='email'],
.cp-personaliser .input[type='password'],
.cp-personaliser .input[type='number'],
.cp-personaliser .input[type='file'],
.cp-personaliser .input[type='tel'],
.cp-personaliser .input[type='url'],
.cp-personaliser .input[type='search'],
.cp-personaliser .input[type='date'],
.cp-personaliser .input[type='datetime-local'],
.cp-personaliser .input[type='month'],
.cp-personaliser .input[type='week'],
.cp-personaliser .input[type='time'],
.cp-personaliser .input:not([type]) {
    width: 100%;
    min-width: 0;
    --tw-outline-style: none;
    outline-style: none;
    &::file-selector-button {
      display: inline-flex;
    }
    &::file-selector-button {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
    &::file-selector-button {
      background-color: transparent;
    }
    &::file-selector-button {
      color: var(--color-foreground);
    }
    &::placeholder {
      color: var(--color-muted-foreground);
    }
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
  }
.cp-personaliser .field > select,
.cp-personaliser select.select {
    min-width: 0;
    appearance: none;
    --tw-outline-style: none;
    outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    option, optgroup {
      background-color: Canvas;
      color: CanvasText;
    }
  }
.cp-personaliser .field > input[type='radio'],
.cp-personaliser .input[type='radio'] {
    position: relative;
    flex-shrink: 0;
    appearance: none;
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-outline-style: none;
    outline-style: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    &:checked:before {
      position: absolute;
      top: calc(1 / 2 * 100%);
      left: calc(1 / 2 * 100%);
      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
      border-radius: calc(infinity * 1px);
      --tw-content: '';
      content: var(--tw-content);
    }
  }
.cp-personaliser .field > input[type='range'],
.cp-personaliser .input[type='range'] {
    display: flex;
    appearance: none;
    align-items: center;
    padding: 0;
    --tw-outline-style: none;
    outline-style: none;
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      opacity: 50%;
    }
    --slider-value: 20%;
    &::-webkit-slider-thumb {
      display: block;
      flex-shrink: 0;
      appearance: none;
    }
    &::-webkit-slider-runnable-track {
      width: 100%;
      appearance: none;
      background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
    }
    &:dir(rtl)::-webkit-slider-runnable-track {
      background: linear-gradient(to left, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
    }
    &::-moz-range-thumb {
      display: block;
      flex-shrink: 0;
      appearance: none;
    }
    &::-moz-range-track {
      width: 100%;
      appearance: none;
      background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
    }
    &:dir(rtl)::-moz-range-track {
      background: linear-gradient(to left, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
    }
    &::-ms-thumb {
      display: block;
      flex-shrink: 0;
      appearance: none;
    }
    &::-ms-track {
      width: 100%;
      appearance: none;
    }
    &::-ms-fill-lower {
      background-color: var(--color-primary);
    }
    &::-ms-fill-upper {
      background-color: var(--color-muted);
    }
  }
.cp-personaliser .field > input[type='checkbox'][role='switch'],
.cp-personaliser .input[type='checkbox'][role='switch'] {
    display: inline-flex;
    flex-shrink: 0;
    appearance: none;
    align-items: center;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-outline-style: none;
    outline-style: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    &::before {
      content: var(--tw-content);
      pointer-events: none;
    }
    &::before {
      content: var(--tw-content);
      display: block;
    }
    &::before {
      content: var(--tw-content);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &::before {
      content: var(--tw-content);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    &::before {
      --tw-content: '';
      content: var(--tw-content);
    }
  }
.cp-personaliser .field > textarea,
.cp-personaliser .textarea {
    display: flex;
    field-sizing: content;
    min-height: calc(var(--spacing) * 16);
    width: 100%;
    --tw-outline-style: none;
    outline-style: none;
    &::placeholder {
      color: var(--color-muted-foreground);
    }
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
  }
.cp-personaliser .btn {
    border-radius: var(--radius-4xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    background-clip: padding-box;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    &:focus-visible {
      border-color: var(--color-ring);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--color-ring);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
      }
    }
    &:active {
      &:not(*[aria-haspopup]) {
        --tw-translate-y: 1px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    &[aria-invalid="true"] {
      border-color: var(--color-destructive);
    }
    &[aria-invalid="true"] {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &[aria-invalid="true"] {
      --tw-ring-color: var(--color-destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        border-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
        }
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        --tw-ring-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
        }
      }
    }
    & svg:not([class*='size-']) {
      width: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 4);
    }
  }
.cp-personaliser .btn:not([data-size]),
.cp-personaliser .btn[data-size='default'] {
    height: calc(var(--spacing) * 9);
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 3);
    &:has(*:is([data-icon='inline-end'])) {
      padding-right: calc(var(--spacing) * 2.5);
    }
    &:has(*:is([data-icon='inline-start'])) {
      padding-left: calc(var(--spacing) * 2.5);
    }
  }
.cp-personaliser .btn[data-size='xs'] {
    height: calc(var(--spacing) * 6);
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 2.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    &:has(*:is([data-icon='inline-end'])) {
      padding-right: calc(var(--spacing) * 2);
    }
    &:has(*:is([data-icon='inline-start'])) {
      padding-left: calc(var(--spacing) * 2);
    }
    & svg:not([class*='size-']) {
      width: calc(var(--spacing) * 3);
      height: calc(var(--spacing) * 3);
    }
  }
.cp-personaliser .btn[data-size='sm'] {
    height: calc(var(--spacing) * 8);
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    &:has(*:is([data-icon='inline-end'])) {
      padding-right: calc(var(--spacing) * 2);
    }
    &:has(*:is([data-icon='inline-start'])) {
      padding-left: calc(var(--spacing) * 2);
    }
  }
.cp-personaliser .btn[data-size='lg'] {
    height: calc(var(--spacing) * 10);
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 4);
    &:has(*:is([data-icon='inline-end'])) {
      padding-right: calc(var(--spacing) * 3);
    }
    &:has(*:is([data-icon='inline-start'])) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
.cp-personaliser .btn[data-size='icon'] {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }
.cp-personaliser .btn[data-size='icon-xs'] {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    & svg:not([class*='size-']) {
      width: calc(var(--spacing) * 3);
      height: calc(var(--spacing) * 3);
    }
  }
.cp-personaliser .btn[data-size='icon-sm'] {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
.cp-personaliser .btn[data-size='icon-lg'] {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
.cp-personaliser .btn:not([data-variant]),
.cp-personaliser .btn[data-variant='primary'] {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
        }
      }
    }
  }
.cp-personaliser .btn[data-variant='secondary'] {
    background-color: var(--color-secondary);
    color: var(--color-secondary-foreground);
    &:hover {
      @media (hover: hover) {
        background-color: var(--secondary);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklch,var(--secondary),var(--foreground) 5%);
        }
      }
    }
    &[aria-expanded="true"] {
      background-color: var(--color-secondary);
    }
    &[aria-expanded="true"] {
      color: var(--color-secondary-foreground);
    }
  }
.cp-personaliser .btn[data-variant='outline'] {
    border-color: var(--color-border);
    background-color: var(--color-input);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-input);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-input) 50%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-foreground);
      }
    }
    &[aria-expanded="true"] {
      background-color: var(--color-muted);
    }
    &[aria-expanded="true"] {
      color: var(--color-foreground);
    }
  }
.cp-personaliser .btn[data-variant='ghost'] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-muted);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-foreground);
      }
    }
    &[aria-expanded="true"] {
      background-color: var(--color-muted);
    }
    &[aria-expanded="true"] {
      color: var(--color-foreground);
    }
    &:is(html.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-muted);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
          }
        }
      }
    }
  }
.cp-personaliser .btn[data-variant='link'] {
    color: var(--color-primary);
    text-underline-offset: 4px;
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
.cp-personaliser .btn[data-variant='destructive'] {
    background-color: var(--color-destructive);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
    }
    color: var(--color-destructive);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
        }
      }
    }
    &:focus-visible {
      border-color: var(--color-destructive);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
      }
    }
    &:focus-visible {
      --tw-ring-color: var(--color-destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
      }
    }
    &:is(html.dark *) {
      background-color: var(--color-destructive);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
      }
    }
    &:is(html.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-destructive);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
          }
        }
      }
    }
    &:is(html.dark *) {
      &:focus-visible {
        --tw-ring-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
        }
      }
    }
  }
.cp-personaliser .field > textarea,
.cp-personaliser .textarea {
    resize: none;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-input);
    background-color: var(--color-input);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:focus-visible {
      border-color: var(--color-ring);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--color-ring);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
      }
    }
    &[aria-invalid="true"] {
      border-color: var(--color-destructive);
    }
    &[aria-invalid="true"] {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &[aria-invalid="true"] {
      --tw-ring-color: var(--color-destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
      }
    }
    @media (width >= 48rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        border-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
        }
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        --tw-ring-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
        }
      }
    }
  }
.cp-personaliser .field > input[type='text']:not(:is(.command > header input, .dialog > * > header input)),
.cp-personaliser .field > input[type='email'],
.cp-personaliser .field > input[type='password'],
.cp-personaliser .field > input[type='number'],
.cp-personaliser .field > input[type='file'],
.cp-personaliser .field > input[type='tel'],
.cp-personaliser .field > input[type='url'],
.cp-personaliser .field > input[type='search']:not(:is(.command > header input, .dialog > * > header input)),
.cp-personaliser .field > input[type='date'],
.cp-personaliser .field > input[type='datetime-local'],
.cp-personaliser .field > input[type='month'],
.cp-personaliser .field > input[type='week'],
.cp-personaliser .field > input[type='time'],
.cp-personaliser .field > input:not([type]),
.cp-personaliser .input[type='text'],
.cp-personaliser .input[type='email'],
.cp-personaliser .input[type='password'],
.cp-personaliser .input[type='number'],
.cp-personaliser .input[type='file'],
.cp-personaliser .input[type='tel'],
.cp-personaliser .input[type='url'],
.cp-personaliser .input[type='search'],
.cp-personaliser .input[type='date'],
.cp-personaliser .input[type='datetime-local'],
.cp-personaliser .input[type='month'],
.cp-personaliser .input[type='week'],
.cp-personaliser .input[type='time'],
.cp-personaliser .input:not([type]) {
    height: calc(var(--spacing) * 9);
    border-radius: var(--radius-4xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-input);
    background-color: var(--color-input);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &::file-selector-button {
      height: calc(var(--spacing) * 7);
    }
    &::file-selector-button {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &::file-selector-button {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
    &:focus-visible {
      border-color: var(--color-ring);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--color-ring);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
      }
    }
    &[aria-invalid="true"] {
      border-color: var(--color-destructive);
    }
    &[aria-invalid="true"] {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &[aria-invalid="true"] {
      --tw-ring-color: var(--color-destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
      }
    }
    @media (width >= 48rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        border-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
        }
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        --tw-ring-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
        }
      }
    }
  }
.cp-personaliser .field > select,
.cp-personaliser select.select {
    height: calc(var(--spacing) * 9);
    width: fit-content;
    border-radius: var(--radius-4xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-input);
    background-color: var(--color-input);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
    }
    padding-block: var(--spacing);
    padding-inline-start: calc(var(--spacing) * 3);
    padding-inline-end: calc(var(--spacing) * 8);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    & *::selection {
      background-color: var(--color-primary);
    }
    &::selection {
      background-color: var(--color-primary);
    }
    & *::selection {
      color: var(--color-primary-foreground);
    }
    &::selection {
      color: var(--color-primary-foreground);
    }
    &::placeholder {
      color: var(--color-muted-foreground);
    }
    &:focus-visible {
      border-color: var(--color-ring);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--color-ring);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
      }
    }
    &[aria-invalid="true"] {
      border-color: var(--color-destructive);
    }
    &[aria-invalid="true"] {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &[aria-invalid="true"] {
      --tw-ring-color: var(--color-destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
      }
    }
    &[data-size="sm"] {
      height: calc(var(--spacing) * 8);
    }
    @media (width >= 48rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &:is(html.dark *) {
      background-color: var(--color-input);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
      }
    }
    &:is(html.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-input);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-input) 50%, transparent);
          }
        }
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        border-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
        }
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        --tw-ring-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
        }
      }
    }
    background-image: var(--chevron-down-icon-50);
    background-size: 1rem;
    background-position: center right 0.875rem;
    background-repeat: no-repeat;
  }
.cp-personaliser .card {
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background-color: var(--color-card);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-card-foreground);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-foreground);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
    }
    &:has(>img:first-child) {
      padding-top: 0;
    }
    &>img:first-child {
      border-top-left-radius: var(--radius-xl);
      border-top-right-radius: var(--radius-xl);
    }
    &>img:last-child {
      border-bottom-right-radius: var(--radius-xl);
      border-bottom-left-radius: var(--radius-xl);
    }
  }
.cp-personaliser .card {
    gap: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 6);
  }
.cp-personaliser .card[data-size='sm'] {
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
  }
.cp-personaliser .card > header {
    gap: calc(var(--spacing) * 2);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 6);
    &:is(.border-b) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
.cp-personaliser .card[data-size='sm'] > header {
    padding-inline: calc(var(--spacing) * 4);
    &:is(.border-b) {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
.cp-personaliser .card > header > :is(h2, h3, [data-title], .card-title) {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
.cp-personaliser .card > header > :is(p, [data-description], .card-description) {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-muted-foreground);
  }
.cp-personaliser .card > section {
    padding-inline: calc(var(--spacing) * 6);
  }
.cp-personaliser .card[data-size='sm'] > section {
    padding-inline: calc(var(--spacing) * 4);
  }
.cp-personaliser .card > footer {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 6);
    &:is(.border-t) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
.cp-personaliser .card[data-size='sm'] > footer {
    padding-inline: calc(var(--spacing) * 4);
    &:is(.border-t) {
      padding-top: calc(var(--spacing) * 4);
    }
  }
.cp-personaliser .field > input[type='checkbox']:not([role='switch']),
.cp-personaliser .input[type='checkbox']:not([role='switch']) {
    display: flex;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-input);
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:checked {
      border-color: var(--color-primary);
    }
    &:checked {
      background-color: var(--color-primary);
    }
    &:checked {
      color: var(--color-primary-foreground);
    }
    &:focus-visible {
      border-color: var(--color-ring);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--color-ring);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
      }
    }
    :where(*[data-disabled="true"]) & {
      opacity: 50%;
    }
    &[aria-invalid="true"] {
      border-color: var(--color-destructive);
    }
    &[aria-invalid="true"] {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &[aria-invalid="true"] {
      --tw-ring-color: var(--color-destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
      }
    }
    &[aria-invalid="true"] {
      &:checked {
        border-color: var(--color-primary);
      }
    }
    &:is(html.dark *) {
      background-color: var(--color-input);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
      }
    }
    &:is(html.dark *) {
      &:checked {
        background-color: var(--color-primary);
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        border-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
        }
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        --tw-ring-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
        }
      }
    }
  }
.cp-personaliser .field > input[type='radio'],
.cp-personaliser .input[type='radio'] {
    display: flex;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    border-radius: calc(infinity * 1px);
    border-color: var(--color-input);
    &:checked {
      border-color: var(--color-primary);
    }
    &:checked {
      background-color: var(--color-primary);
    }
    &:checked {
      color: var(--color-primary-foreground);
    }
    &:focus-visible {
      border-color: var(--color-ring);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--color-ring);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
      }
    }
    &[aria-invalid="true"] {
      border-color: var(--color-destructive);
    }
    &[aria-invalid="true"] {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &[aria-invalid="true"] {
      --tw-ring-color: var(--color-destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
      }
    }
    &[aria-invalid="true"] {
      &:checked {
        border-color: var(--color-primary);
      }
    }
    &:is(html.dark *) {
      background-color: var(--color-input);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
      }
    }
    &:is(html.dark *) {
      &:checked {
        background-color: var(--color-primary);
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        border-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
        }
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        --tw-ring-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
        }
      }
    }
  }
.cp-personaliser .field > input[type='checkbox'][role='switch'],
.cp-personaliser .input[type='checkbox'][role='switch'] {
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    &:not(*:checked) {
      background-color: var(--color-input);
    }
    &:checked {
      background-color: var(--color-primary);
    }
    &:focus-visible {
      border-color: var(--color-ring);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--color-ring);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
      }
    }
    &[aria-invalid="true"] {
      border-color: var(--color-destructive);
    }
    &[aria-invalid="true"] {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &[aria-invalid="true"] {
      --tw-ring-color: var(--color-destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
      }
    }
    &:is(html.dark *) {
      &:not(*:checked) {
        background-color: var(--color-input);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-input) 80%, transparent);
        }
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        border-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
        }
      }
    }
    &:is(html.dark *) {
      &[aria-invalid="true"] {
        --tw-ring-color: var(--color-destructive);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
        }
      }
    }
  }
.cp-personaliser .field > input[type='range'],
.cp-personaliser .input[type='range'] {
    height: calc(var(--spacing) * 5);
    --slider-track-height: 0.75rem;
    --slider-thumb-size: 1rem;
  }