@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');/* Brighterly DS — client.css — GENERATED, do not edit.
 * Source: tokens/*.tokens.json. Regenerate: pnpm build:tokens.
 * Self-contained — import exactly ONE mode file (client OR admin). */

:root {
  /* primitives — internal; never reference directly in UI */
  --btly-color-base-white: #FFFFFF;
  --btly-color-base-black: #000000;
  --btly-color-base-transparent: rgba(0, 0, 0, 0);
  --btly-color-base-blackout: rgba(31, 31, 31, 0.4);
  --btly-color-gray-50: #FAFAFA;
  --btly-color-gray-100: #F0F0F0;
  --btly-color-gray-200: #DEDEDE;
  --btly-color-gray-300: #BEBEBE;
  --btly-color-gray-400: #949494;
  --btly-color-gray-500: #737373;
  --btly-color-gray-600: #636363;
  --btly-color-gray-700: #4F4F4F;
  --btly-color-gray-800: #3D3D3D;
  --btly-color-gray-900: #303030;
  --btly-color-gray-950: #1F1F1F;
  --btly-color-ultraviolet-50: #F9F9FF;
  --btly-color-ultraviolet-100: #EFEFFF;
  --btly-color-ultraviolet-200: #DBDBFF;
  --btly-color-ultraviolet-300: #B9B8FF;
  --btly-color-ultraviolet-400: #9085FF;
  --btly-color-ultraviolet-500: #7352FC;
  --btly-color-ultraviolet-600: #6435EE;
  --btly-color-ultraviolet-700: #5216CF;
  --btly-color-ultraviolet-800: #3E11A1;
  --btly-color-ultraviolet-900: #30147B;
  --btly-color-ultraviolet-950: #1D124B;
  --btly-color-ultraviolet-500-a25: rgba(115, 82, 252, 0.25);
  --btly-color-blue-50: #EFF6FF;
  --btly-color-blue-100: #DBEAFE;
  --btly-color-blue-200: #BEDBFF;
  --btly-color-blue-300: #8EC5FF;
  --btly-color-blue-400: #51A2FF;
  --btly-color-blue-500: #2B7FFF;
  --btly-color-blue-600: #155DFC;
  --btly-color-blue-700: #1447E6;
  --btly-color-blue-800: #193CB8;
  --btly-color-blue-900: #1C398E;
  --btly-color-blue-950: #162456;
  --btly-color-blue-600-a25: rgba(21, 93, 252, 0.25);
  --btly-color-sky-50: #EDF9FF;
  --btly-color-sky-100: #D7F1FF;
  --btly-color-sky-200: #AFE4FF;
  --btly-color-sky-300: #7FCDFF;
  --btly-color-sky-400: #5CBDFF;
  --btly-color-sky-500: #46B0F7;
  --btly-color-sky-600: #0491D9;
  --btly-color-sky-700: #006DAF;
  --btly-color-sky-800: #004E7F;
  --btly-color-sky-900: #003858;
  --btly-color-sky-950: #00212E;
  --btly-color-emerald-50: #ECFDF5;
  --btly-color-emerald-100: #D0FAE5;
  --btly-color-emerald-200: #A4F4CF;
  --btly-color-emerald-300: #5EE9B5;
  --btly-color-emerald-400: #00D492;
  --btly-color-emerald-500: #00BC7D;
  --btly-color-emerald-600: #009966;
  --btly-color-emerald-700: #007A55;
  --btly-color-emerald-800: #006045;
  --btly-color-emerald-900: #004F3B;
  --btly-color-emerald-950: #002C22;
  --btly-color-green-50: #ECFCEF;
  --btly-color-green-100: #D3F8DB;
  --btly-color-green-200: #A6F1B9;
  --btly-color-green-300: #6CE090;
  --btly-color-green-400: #3CD677;
  --btly-color-green-500: #0ACC68;
  --btly-color-green-600: #00AC44;
  --btly-color-green-700: #008522;
  --btly-color-green-800: #005F16;
  --btly-color-green-900: #004314;
  --btly-color-green-950: #002609;
  --btly-color-sunshine-50: #FFFBE2;
  --btly-color-sunshine-100: #FFF8D2;
  --btly-color-sunshine-200: #FFF0B5;
  --btly-color-sunshine-300: #FFE284;
  --btly-color-sunshine-400: #FFCE2B;
  --btly-color-sunshine-500: #FFB900;
  --btly-color-sunshine-600: #D49900;
  --btly-color-sunshine-700: #A27300;
  --btly-color-sunshine-800: #734F01;
  --btly-color-sunshine-900: #523704;
  --btly-color-sunshine-950: #271903;
  --btly-color-orange-50: #FFF2EC;
  --btly-color-orange-100: #FFE2D4;
  --btly-color-orange-200: #FFC6AB;
  --btly-color-orange-300: #FFA17B;
  --btly-color-orange-400: #FF8658;
  --btly-color-orange-500: #FF7342;
  --btly-color-orange-600: #E04F10;
  --btly-color-orange-700: #B52C00;
  --btly-color-orange-800: #831F00;
  --btly-color-orange-900: #5C1B02;
  --btly-color-orange-950: #390D00;
  --btly-color-amber-50: #FFF7ED;
  --btly-color-amber-100: #FFEDD5;
  --btly-color-amber-200: #FED7AA;
  --btly-color-amber-300: #FDBA74;
  --btly-color-amber-400: #FB923C;
  --btly-color-amber-500: #F97316;
  --btly-color-amber-600: #EA580C;
  --btly-color-amber-700: #C2410C;
  --btly-color-amber-800: #9A3412;
  --btly-color-amber-900: #7C2D12;
  --btly-color-amber-950: #431407;
  --btly-color-red-50: #FFF8F7;
  --btly-color-red-100: #FFEDEB;
  --btly-color-red-200: #FFD7D4;
  --btly-color-red-300: #FBB2AA;
  --btly-color-red-400: #FA766E;
  --btly-color-red-500: #ED3E3E;
  --btly-color-red-600: #D40A24;
  --btly-color-red-700: #AD0719;
  --btly-color-red-800: #830711;
  --btly-color-red-900: #680009;
  --btly-color-red-950: #400506;
  --btly-color-pink-50: #FFF8FA;
  --btly-color-pink-100: #FFF0F4;
  --btly-color-pink-200: #FFDFEA;
  --btly-color-pink-300: #FFC2D6;
  --btly-color-pink-400: #FC9ABE;
  --btly-color-pink-500: #FF6DA9;
  --btly-color-pink-600: #E14B8E;
  --btly-color-pink-700: #BA276E;
  --btly-color-pink-800: #8A144F;
  --btly-color-pink-900: #671039;
  --btly-color-pink-950: #38081E;
  --btly-font-family-mona-sans: "Mona Sans";
  --btly-font-family-inter: Inter;
  --btly-font-family-roboto: Roboto;
  --btly-font-weight-bold: 700;
  --btly-font-weight-semibold: 600;
  --btly-font-weight-medium: 500;
  --btly-font-weight-regular: 400;
  --btly-font-weight-semibold-compact: 600;
  --btly-number-0: 0;
  --btly-number-1: 1px;
  --btly-number-2: 2px;
  --btly-number-4: 4px;
  --btly-number-6: 6px;
  --btly-number-8: 8px;
  --btly-number-10: 10px;
  --btly-number-12: 12px;
  --btly-number-14: 14px;
  --btly-number-16: 16px;
  --btly-number-18: 18px;
  --btly-number-20: 20px;
  --btly-number-24: 24px;
  --btly-number-28: 28px;
  --btly-number-32: 32px;
  --btly-number-36: 36px;
  --btly-number-40: 40px;
  --btly-number-48: 48px;
  --btly-number-56: 56px;
  --btly-number-64: 64px;
  --btly-number-72: 72px;
  --btly-number-80: 80px;
  --btly-number-88: 88px;
  --btly-number-96: 96px;
  --btly-number-112: 112px;
  --btly-number-128: 128px;
  --btly-number-160: 160px;
  --btly-number-1-5: 1.5px;
  --btly-number-full: 9999px;

  /* semantic (client) — the public surface for ALL UI */
  --btly-text-primary: var(--btly-color-gray-950);
  --btly-text-secondary: var(--btly-color-gray-800);
  --btly-text-tertiary: var(--btly-color-gray-500);
  --btly-text-disabled: var(--btly-color-gray-300);
  --btly-text-placeholder: var(--btly-color-gray-300);
  --btly-text-inverse: var(--btly-color-base-white);
  --btly-text-brand: var(--btly-color-ultraviolet-500);
  --btly-action-primary-default: var(--btly-color-ultraviolet-500);
  --btly-action-primary-hover: var(--btly-color-ultraviolet-600);
  --btly-action-primary-pressed: var(--btly-color-ultraviolet-700);
  --btly-action-primary-disabled: var(--btly-color-gray-200);
  --btly-action-primary-disabled-text: var(--btly-color-gray-400);
  --btly-action-accent-default: var(--btly-color-sunshine-400);
  --btly-action-accent-hover: var(--btly-color-sunshine-500);
  --btly-action-accent-pressed: var(--btly-color-sunshine-600);
  --btly-action-accent-disabled: var(--btly-color-gray-200);
  --btly-action-accent-disabled-text: var(--btly-color-gray-400);
  --btly-action-secondary-default: var(--btly-color-gray-700);
  --btly-action-secondary-hover: var(--btly-color-gray-800);
  --btly-action-secondary-pressed: var(--btly-color-gray-700);
  --btly-action-secondary-disabled: var(--btly-color-gray-200);
  --btly-action-secondary-disabled-text: var(--btly-color-gray-400);
  --btly-action-tertiary-default: var(--btly-color-gray-500);
  --btly-action-tertiary-hover: var(--btly-color-gray-600);
  --btly-action-tertiary-pressed: var(--btly-color-gray-700);
  --btly-action-tertiary-disabled: var(--btly-color-gray-200);
  --btly-action-tertiary-disabled-text: var(--btly-color-gray-400);
  --btly-action-destructive-default: var(--btly-color-red-500);
  --btly-action-destructive-hover: var(--btly-color-red-600);
  --btly-action-destructive-pressed: var(--btly-color-red-700);
  --btly-action-destructive-disabled: var(--btly-color-gray-200);
  --btly-action-destructive-disabled-text: var(--btly-color-gray-400);
  --btly-surface-canvas: var(--btly-color-base-white);
  --btly-surface-card: var(--btly-color-base-white);
  --btly-surface-secondary: var(--btly-color-gray-50);
  --btly-surface-tertiary: var(--btly-color-gray-100);
  --btly-surface-brand: var(--btly-color-ultraviolet-100);
  --btly-surface-inverse: var(--btly-color-gray-700);
  --btly-surface-blackout: var(--btly-color-base-blackout);
  --btly-border-default: var(--btly-color-gray-200);
  --btly-border-strong: var(--btly-color-gray-300);
  --btly-border-brand: var(--btly-color-ultraviolet-500);
  --btly-border-focus-halo: var(--btly-color-ultraviolet-500-a25);
  --btly-border-inverse: var(--btly-color-base-white);
  --btly-icon-default: var(--btly-color-gray-500);
  --btly-icon-muted: var(--btly-color-gray-400);
  --btly-icon-disabled: var(--btly-color-gray-400);
  --btly-icon-brand: var(--btly-color-ultraviolet-500);
  --btly-icon-inverse: var(--btly-color-base-white);
  --btly-status-error-text: var(--btly-color-red-500);
  --btly-status-error-bg: var(--btly-color-red-50);
  --btly-status-error-bg-strong: var(--btly-color-red-100);
  --btly-status-error-border: var(--btly-color-red-200);
  --btly-status-error-accent: var(--btly-color-red-500);
  --btly-status-attention-text: var(--btly-color-amber-500);
  --btly-status-attention-bg: var(--btly-color-amber-50);
  --btly-status-attention-bg-strong: var(--btly-color-amber-100);
  --btly-status-attention-border: var(--btly-color-amber-200);
  --btly-status-attention-accent: var(--btly-color-amber-500);
  --btly-status-warning-text: var(--btly-color-sunshine-600);
  --btly-status-warning-bg: var(--btly-color-sunshine-50);
  --btly-status-warning-bg-strong: var(--btly-color-sunshine-100);
  --btly-status-warning-border: var(--btly-color-sunshine-200);
  --btly-status-warning-accent: var(--btly-color-sunshine-500);
  --btly-status-info-text: var(--btly-color-sky-600);
  --btly-status-info-bg: var(--btly-color-sky-50);
  --btly-status-info-bg-strong: var(--btly-color-sky-100);
  --btly-status-info-border: var(--btly-color-sky-200);
  --btly-status-info-accent: var(--btly-color-sky-500);
  --btly-status-success-text: var(--btly-color-green-600);
  --btly-status-success-bg: var(--btly-color-green-50);
  --btly-status-success-bg-strong: var(--btly-color-green-100);
  --btly-status-success-border: var(--btly-color-green-200);
  --btly-status-success-accent: var(--btly-color-green-500);
  --btly-status-neutral-text: var(--btly-color-gray-500);
  --btly-status-neutral-bg: var(--btly-color-gray-50);
  --btly-status-neutral-bg-strong: var(--btly-color-gray-100);
  --btly-status-neutral-border: var(--btly-color-gray-200);
  --btly-status-neutral-accent: var(--btly-color-gray-500);
  --btly-space-0: var(--btly-number-0);
  --btly-space-1: var(--btly-number-1);
  --btly-space-2: var(--btly-number-2);
  --btly-space-4: var(--btly-number-4);
  --btly-space-6: var(--btly-number-6);
  --btly-space-8: var(--btly-number-8);
  --btly-space-10: var(--btly-number-10);
  --btly-space-12: var(--btly-number-12);
  --btly-space-16: var(--btly-number-16);
  --btly-space-20: var(--btly-number-20);
  --btly-space-24: var(--btly-number-24);
  --btly-space-32: var(--btly-number-32);
  --btly-space-36: var(--btly-number-36);
  --btly-space-40: var(--btly-number-40);
  --btly-space-48: var(--btly-number-48);
  --btly-space-56: var(--btly-number-56);
  --btly-space-64: var(--btly-number-64);
  --btly-space-72: var(--btly-number-72);
  --btly-space-80: var(--btly-number-80);
  --btly-space-96: var(--btly-number-96);
  --btly-space-112: var(--btly-number-112);
  --btly-space-128: var(--btly-number-128);
  --btly-radius-0: var(--btly-number-0);
  --btly-radius-1: var(--btly-number-1);
  --btly-radius-2: var(--btly-number-2);
  --btly-radius-4: var(--btly-number-4);
  --btly-radius-6: var(--btly-number-6);
  --btly-radius-8: var(--btly-number-8);
  --btly-radius-10: var(--btly-number-10);
  --btly-radius-12: var(--btly-number-12);
  --btly-radius-16: var(--btly-number-16);
  --btly-radius-20: var(--btly-number-20);
  --btly-radius-24: var(--btly-number-24);
  --btly-radius-32: var(--btly-number-32);
  --btly-radius-40: var(--btly-number-40);
  --btly-radius-48: var(--btly-number-48);
  --btly-radius-full: var(--btly-number-full);
  --btly-border-width-0: var(--btly-number-0);
  --btly-border-width-1: var(--btly-number-1);
  --btly-border-width-2: var(--btly-number-2);
  --btly-border-width-4: var(--btly-number-4);
  --btly-border-width-1-5: var(--btly-number-1-5);
  --btly-typography-display-xl-font: var(--btly-font-family-mona-sans);
  --btly-typography-display-xl-weight: var(--btly-font-weight-bold);
  --btly-typography-display-xl-size: var(--btly-number-88);
  --btly-typography-display-xl-line-height: var(--btly-number-96);
  --btly-typography-display-xl-letter-spacing: var(--btly-number-0);
  --btly-typography-display-l-font: var(--btly-font-family-mona-sans);
  --btly-typography-display-l-weight: var(--btly-font-weight-bold);
  --btly-typography-display-l-size: var(--btly-number-72);
  --btly-typography-display-l-line-height: var(--btly-number-80);
  --btly-typography-display-l-letter-spacing: var(--btly-number-0);
  --btly-typography-display-m-font: var(--btly-font-family-mona-sans);
  --btly-typography-display-m-weight: var(--btly-font-weight-bold);
  --btly-typography-display-m-size: var(--btly-number-64);
  --btly-typography-display-m-line-height: var(--btly-number-72);
  --btly-typography-display-m-letter-spacing: var(--btly-number-0);
  --btly-typography-heading-xl-font: var(--btly-font-family-mona-sans);
  --btly-typography-heading-xl-weight: var(--btly-font-weight-bold);
  --btly-typography-heading-xl-size: var(--btly-number-48);
  --btly-typography-heading-xl-line-height: var(--btly-number-56);
  --btly-typography-heading-xl-letter-spacing: var(--btly-number-0);
  --btly-typography-heading-l-font: var(--btly-font-family-mona-sans);
  --btly-typography-heading-l-weight: var(--btly-font-weight-bold);
  --btly-typography-heading-l-size: var(--btly-number-32);
  --btly-typography-heading-l-line-height: var(--btly-number-40);
  --btly-typography-heading-l-letter-spacing: var(--btly-number-0);
  --btly-typography-heading-m-font: var(--btly-font-family-mona-sans);
  --btly-typography-heading-m-weight: var(--btly-font-weight-bold);
  --btly-typography-heading-m-size: var(--btly-number-28);
  --btly-typography-heading-m-line-height: var(--btly-number-36);
  --btly-typography-heading-m-letter-spacing: var(--btly-number-0);
  --btly-typography-heading-s-font: var(--btly-font-family-mona-sans);
  --btly-typography-heading-s-weight: var(--btly-font-weight-bold);
  --btly-typography-heading-s-size: var(--btly-number-24);
  --btly-typography-heading-s-line-height: var(--btly-number-32);
  --btly-typography-heading-s-letter-spacing: var(--btly-number-0);
  --btly-typography-title-xl-font: var(--btly-font-family-inter);
  --btly-typography-title-xl-weight: var(--btly-font-weight-semibold);
  --btly-typography-title-xl-size: var(--btly-number-20);
  --btly-typography-title-xl-line-height: var(--btly-number-24);
  --btly-typography-title-xl-letter-spacing: var(--btly-number-0);
  --btly-typography-title-l-font: var(--btly-font-family-inter);
  --btly-typography-title-l-weight: var(--btly-font-weight-semibold);
  --btly-typography-title-l-size: var(--btly-number-18);
  --btly-typography-title-l-line-height: var(--btly-number-24);
  --btly-typography-title-l-letter-spacing: var(--btly-number-0);
  --btly-typography-title-m-font: var(--btly-font-family-inter);
  --btly-typography-title-m-weight: var(--btly-font-weight-semibold);
  --btly-typography-title-m-size: var(--btly-number-16);
  --btly-typography-title-m-line-height: var(--btly-number-24);
  --btly-typography-title-m-letter-spacing: var(--btly-number-0);
  --btly-typography-title-s-font: var(--btly-font-family-inter);
  --btly-typography-title-s-weight: var(--btly-font-weight-semibold);
  --btly-typography-title-s-size: var(--btly-number-14);
  --btly-typography-title-s-line-height: var(--btly-number-20);
  --btly-typography-title-s-letter-spacing: var(--btly-number-0);
  --btly-typography-body-xl-font: var(--btly-font-family-inter);
  --btly-typography-body-xl-weight: var(--btly-font-weight-regular);
  --btly-typography-body-xl-size: var(--btly-number-18);
  --btly-typography-body-xl-line-height: var(--btly-number-24);
  --btly-typography-body-xl-letter-spacing: var(--btly-number-0);
  --btly-typography-body-l-font: var(--btly-font-family-inter);
  --btly-typography-body-l-weight: var(--btly-font-weight-regular);
  --btly-typography-body-l-size: var(--btly-number-16);
  --btly-typography-body-l-line-height: var(--btly-number-24);
  --btly-typography-body-l-letter-spacing: var(--btly-number-0);
  --btly-typography-body-m-font: var(--btly-font-family-inter);
  --btly-typography-body-m-weight: var(--btly-font-weight-regular);
  --btly-typography-body-m-size: var(--btly-number-14);
  --btly-typography-body-m-line-height: var(--btly-number-20);
  --btly-typography-body-m-letter-spacing: var(--btly-number-0);
  --btly-typography-body-s-font: var(--btly-font-family-inter);
  --btly-typography-body-s-weight: var(--btly-font-weight-regular);
  --btly-typography-body-s-size: var(--btly-number-12);
  --btly-typography-body-s-line-height: var(--btly-number-16);
  --btly-typography-body-s-letter-spacing: var(--btly-number-0);
  --btly-typography-label-m-font: var(--btly-font-family-inter);
  --btly-typography-label-m-weight: var(--btly-font-weight-medium);
  --btly-typography-label-m-size: var(--btly-number-12);
  --btly-typography-label-m-line-height: var(--btly-number-16);
  --btly-typography-label-m-letter-spacing: var(--btly-number-0);
  --btly-typography-label-s-font: var(--btly-font-family-inter);
  --btly-typography-label-s-weight: var(--btly-font-weight-medium);
  --btly-typography-label-s-size: var(--btly-number-10);
  --btly-typography-label-s-line-height: var(--btly-number-12);
  --btly-typography-label-s-letter-spacing: var(--btly-number-0);
  --btly-discipline-math-surface: var(--btly-color-ultraviolet-50);
  --btly-discipline-math-surface-strong: var(--btly-color-ultraviolet-100);
  --btly-discipline-math-border: var(--btly-color-ultraviolet-200);
  --btly-discipline-math-accent: var(--btly-color-ultraviolet-500);
  --btly-discipline-math-text: var(--btly-color-ultraviolet-600);
  --btly-discipline-ela-surface: var(--btly-color-sky-50);
  --btly-discipline-ela-surface-strong: var(--btly-color-sky-100);
  --btly-discipline-ela-border: var(--btly-color-sky-200);
  --btly-discipline-ela-accent: var(--btly-color-sky-500);
  --btly-discipline-ela-text: var(--btly-color-sky-700);
  --btly-base-white: var(--btly-color-base-white);
  --btly-base-black: var(--btly-color-base-black);
  --btly-base-transparent: var(--btly-color-base-transparent);

  /* brand palette — illustration / marketing ONLY */
  --btly-brand-ultraviolet-50: var(--btly-color-ultraviolet-50);
  --btly-brand-ultraviolet-100: var(--btly-color-ultraviolet-100);
  --btly-brand-ultraviolet-200: var(--btly-color-ultraviolet-200);
  --btly-brand-ultraviolet-300: var(--btly-color-ultraviolet-300);
  --btly-brand-ultraviolet-400: var(--btly-color-ultraviolet-400);
  --btly-brand-ultraviolet-600: var(--btly-color-ultraviolet-600);
  --btly-brand-ultraviolet-800: var(--btly-color-ultraviolet-800);
  --btly-brand-ultraviolet-950: var(--btly-color-ultraviolet-950);
  --btly-brand-ultraviolet-500-primary: var(--btly-color-ultraviolet-500);
  --btly-brand-green-50: var(--btly-color-green-50);
  --btly-brand-green-100: var(--btly-color-green-100);
  --btly-brand-green-200: var(--btly-color-green-200);
  --btly-brand-green-300: var(--btly-color-green-300);
  --btly-brand-green-400: var(--btly-color-green-400);
  --btly-brand-green-600: var(--btly-color-green-600);
  --btly-brand-green-800: var(--btly-color-green-800);
  --btly-brand-green-950: var(--btly-color-green-950);
  --btly-brand-green-500-primary: var(--btly-color-green-500);
  --btly-brand-sky-50: var(--btly-color-sky-50);
  --btly-brand-sky-100: var(--btly-color-sky-100);
  --btly-brand-sky-200: var(--btly-color-sky-200);
  --btly-brand-sky-300: var(--btly-color-sky-300);
  --btly-brand-sky-400: var(--btly-color-sky-400);
  --btly-brand-sky-600: var(--btly-color-sky-600);
  --btly-brand-sky-800: var(--btly-color-sky-800);
  --btly-brand-sky-950: var(--btly-color-sky-950);
  --btly-brand-sky-500-primary: var(--btly-color-sky-500);
  --btly-brand-pink-50: var(--btly-color-pink-50);
  --btly-brand-pink-100: var(--btly-color-pink-100);
  --btly-brand-pink-200: var(--btly-color-pink-200);
  --btly-brand-pink-300: var(--btly-color-pink-300);
  --btly-brand-pink-400: var(--btly-color-pink-400);
  --btly-brand-pink-600: var(--btly-color-pink-600);
  --btly-brand-pink-800: var(--btly-color-pink-800);
  --btly-brand-pink-950: var(--btly-color-pink-950);
  --btly-brand-pink-500-primary: var(--btly-color-pink-500);
  --btly-brand-orange-50: var(--btly-color-orange-50);
  --btly-brand-orange-100: var(--btly-color-orange-100);
  --btly-brand-orange-200: var(--btly-color-orange-200);
  --btly-brand-orange-300: var(--btly-color-orange-300);
  --btly-brand-orange-400: var(--btly-color-orange-400);
  --btly-brand-orange-600: var(--btly-color-orange-600);
  --btly-brand-orange-800: var(--btly-color-orange-800);
  --btly-brand-orange-950: var(--btly-color-orange-950);
  --btly-brand-orange-500-primary: var(--btly-color-orange-500);
  --btly-brand-sunshine-50: var(--btly-color-sunshine-50);
  --btly-brand-sunshine-100: var(--btly-color-sunshine-100);
  --btly-brand-sunshine-200: var(--btly-color-sunshine-200);
  --btly-brand-sunshine-300: var(--btly-color-sunshine-300);
  --btly-brand-sunshine-400: var(--btly-color-sunshine-400);
  --btly-brand-sunshine-600: var(--btly-color-sunshine-600);
  --btly-brand-sunshine-800: var(--btly-color-sunshine-800);
  --btly-brand-sunshine-950: var(--btly-color-sunshine-950);
  --btly-brand-sunshine-500-primary: var(--btly-color-sunshine-500);
  --btly-brand-gray-50: var(--btly-color-gray-50);
  --btly-brand-gray-100: var(--btly-color-gray-100);
  --btly-brand-gray-200: var(--btly-color-gray-200);
  --btly-brand-gray-300: var(--btly-color-gray-300);
  --btly-brand-gray-400: var(--btly-color-gray-400);
  --btly-brand-gray-500: var(--btly-color-gray-500);
  --btly-brand-gray-600: var(--btly-color-gray-600);
  --btly-brand-gray-800: var(--btly-color-gray-800);
  --btly-brand-gray-950: var(--btly-color-gray-950);
}

/* typography — apply a whole text style via one class */
.btly-text-display-xl {
  font-family: var(--btly-typography-display-xl-font);
  font-weight: var(--btly-typography-display-xl-weight);
  font-size: var(--btly-typography-display-xl-size);
  line-height: var(--btly-typography-display-xl-line-height);
  letter-spacing: var(--btly-typography-display-xl-letter-spacing);
}

.btly-text-display-l {
  font-family: var(--btly-typography-display-l-font);
  font-weight: var(--btly-typography-display-l-weight);
  font-size: var(--btly-typography-display-l-size);
  line-height: var(--btly-typography-display-l-line-height);
  letter-spacing: var(--btly-typography-display-l-letter-spacing);
}

.btly-text-display-m {
  font-family: var(--btly-typography-display-m-font);
  font-weight: var(--btly-typography-display-m-weight);
  font-size: var(--btly-typography-display-m-size);
  line-height: var(--btly-typography-display-m-line-height);
  letter-spacing: var(--btly-typography-display-m-letter-spacing);
}

.btly-text-heading-xl {
  font-family: var(--btly-typography-heading-xl-font);
  font-weight: var(--btly-typography-heading-xl-weight);
  font-size: var(--btly-typography-heading-xl-size);
  line-height: var(--btly-typography-heading-xl-line-height);
  letter-spacing: var(--btly-typography-heading-xl-letter-spacing);
}

.btly-text-heading-l {
  font-family: var(--btly-typography-heading-l-font);
  font-weight: var(--btly-typography-heading-l-weight);
  font-size: var(--btly-typography-heading-l-size);
  line-height: var(--btly-typography-heading-l-line-height);
  letter-spacing: var(--btly-typography-heading-l-letter-spacing);
}

.btly-text-heading-m {
  font-family: var(--btly-typography-heading-m-font);
  font-weight: var(--btly-typography-heading-m-weight);
  font-size: var(--btly-typography-heading-m-size);
  line-height: var(--btly-typography-heading-m-line-height);
  letter-spacing: var(--btly-typography-heading-m-letter-spacing);
}

.btly-text-heading-s {
  font-family: var(--btly-typography-heading-s-font);
  font-weight: var(--btly-typography-heading-s-weight);
  font-size: var(--btly-typography-heading-s-size);
  line-height: var(--btly-typography-heading-s-line-height);
  letter-spacing: var(--btly-typography-heading-s-letter-spacing);
}

.btly-text-title-xl {
  font-family: var(--btly-typography-title-xl-font);
  font-weight: var(--btly-typography-title-xl-weight);
  font-size: var(--btly-typography-title-xl-size);
  line-height: var(--btly-typography-title-xl-line-height);
  letter-spacing: var(--btly-typography-title-xl-letter-spacing);
}

.btly-text-title-l {
  font-family: var(--btly-typography-title-l-font);
  font-weight: var(--btly-typography-title-l-weight);
  font-size: var(--btly-typography-title-l-size);
  line-height: var(--btly-typography-title-l-line-height);
  letter-spacing: var(--btly-typography-title-l-letter-spacing);
}

.btly-text-title-m {
  font-family: var(--btly-typography-title-m-font);
  font-weight: var(--btly-typography-title-m-weight);
  font-size: var(--btly-typography-title-m-size);
  line-height: var(--btly-typography-title-m-line-height);
  letter-spacing: var(--btly-typography-title-m-letter-spacing);
}

.btly-text-title-s {
  font-family: var(--btly-typography-title-s-font);
  font-weight: var(--btly-typography-title-s-weight);
  font-size: var(--btly-typography-title-s-size);
  line-height: var(--btly-typography-title-s-line-height);
  letter-spacing: var(--btly-typography-title-s-letter-spacing);
}

.btly-text-body-xl {
  font-family: var(--btly-typography-body-xl-font);
  font-weight: var(--btly-typography-body-xl-weight);
  font-size: var(--btly-typography-body-xl-size);
  line-height: var(--btly-typography-body-xl-line-height);
  letter-spacing: var(--btly-typography-body-xl-letter-spacing);
}

.btly-text-body-l {
  font-family: var(--btly-typography-body-l-font);
  font-weight: var(--btly-typography-body-l-weight);
  font-size: var(--btly-typography-body-l-size);
  line-height: var(--btly-typography-body-l-line-height);
  letter-spacing: var(--btly-typography-body-l-letter-spacing);
}

.btly-text-body-m {
  font-family: var(--btly-typography-body-m-font);
  font-weight: var(--btly-typography-body-m-weight);
  font-size: var(--btly-typography-body-m-size);
  line-height: var(--btly-typography-body-m-line-height);
  letter-spacing: var(--btly-typography-body-m-letter-spacing);
}

.btly-text-body-s {
  font-family: var(--btly-typography-body-s-font);
  font-weight: var(--btly-typography-body-s-weight);
  font-size: var(--btly-typography-body-s-size);
  line-height: var(--btly-typography-body-s-line-height);
  letter-spacing: var(--btly-typography-body-s-letter-spacing);
}

.btly-text-label-m {
  font-family: var(--btly-typography-label-m-font);
  font-weight: var(--btly-typography-label-m-weight);
  font-size: var(--btly-typography-label-m-size);
  line-height: var(--btly-typography-label-m-line-height);
  letter-spacing: var(--btly-typography-label-m-letter-spacing);
}

.btly-text-label-s {
  font-family: var(--btly-typography-label-s-font);
  font-weight: var(--btly-typography-label-s-weight);
  font-size: var(--btly-typography-label-s-size);
  line-height: var(--btly-typography-label-s-line-height);
  letter-spacing: var(--btly-typography-label-s-letter-spacing);
}

/* responsive typography — up-breakpoint role overrides: `md:btly-text-<role>` etc. */
@media (min-width: 740px) {
  .md\:btly-text-display-xl {
    font-family: var(--btly-typography-display-xl-font);
    font-weight: var(--btly-typography-display-xl-weight);
    font-size: var(--btly-typography-display-xl-size);
    line-height: var(--btly-typography-display-xl-line-height);
    letter-spacing: var(--btly-typography-display-xl-letter-spacing);
  }
  .md\:btly-text-display-l {
    font-family: var(--btly-typography-display-l-font);
    font-weight: var(--btly-typography-display-l-weight);
    font-size: var(--btly-typography-display-l-size);
    line-height: var(--btly-typography-display-l-line-height);
    letter-spacing: var(--btly-typography-display-l-letter-spacing);
  }
  .md\:btly-text-display-m {
    font-family: var(--btly-typography-display-m-font);
    font-weight: var(--btly-typography-display-m-weight);
    font-size: var(--btly-typography-display-m-size);
    line-height: var(--btly-typography-display-m-line-height);
    letter-spacing: var(--btly-typography-display-m-letter-spacing);
  }
  .md\:btly-text-heading-xl {
    font-family: var(--btly-typography-heading-xl-font);
    font-weight: var(--btly-typography-heading-xl-weight);
    font-size: var(--btly-typography-heading-xl-size);
    line-height: var(--btly-typography-heading-xl-line-height);
    letter-spacing: var(--btly-typography-heading-xl-letter-spacing);
  }
  .md\:btly-text-heading-l {
    font-family: var(--btly-typography-heading-l-font);
    font-weight: var(--btly-typography-heading-l-weight);
    font-size: var(--btly-typography-heading-l-size);
    line-height: var(--btly-typography-heading-l-line-height);
    letter-spacing: var(--btly-typography-heading-l-letter-spacing);
  }
  .md\:btly-text-heading-m {
    font-family: var(--btly-typography-heading-m-font);
    font-weight: var(--btly-typography-heading-m-weight);
    font-size: var(--btly-typography-heading-m-size);
    line-height: var(--btly-typography-heading-m-line-height);
    letter-spacing: var(--btly-typography-heading-m-letter-spacing);
  }
  .md\:btly-text-heading-s {
    font-family: var(--btly-typography-heading-s-font);
    font-weight: var(--btly-typography-heading-s-weight);
    font-size: var(--btly-typography-heading-s-size);
    line-height: var(--btly-typography-heading-s-line-height);
    letter-spacing: var(--btly-typography-heading-s-letter-spacing);
  }
  .md\:btly-text-title-xl {
    font-family: var(--btly-typography-title-xl-font);
    font-weight: var(--btly-typography-title-xl-weight);
    font-size: var(--btly-typography-title-xl-size);
    line-height: var(--btly-typography-title-xl-line-height);
    letter-spacing: var(--btly-typography-title-xl-letter-spacing);
  }
  .md\:btly-text-title-l {
    font-family: var(--btly-typography-title-l-font);
    font-weight: var(--btly-typography-title-l-weight);
    font-size: var(--btly-typography-title-l-size);
    line-height: var(--btly-typography-title-l-line-height);
    letter-spacing: var(--btly-typography-title-l-letter-spacing);
  }
  .md\:btly-text-title-m {
    font-family: var(--btly-typography-title-m-font);
    font-weight: var(--btly-typography-title-m-weight);
    font-size: var(--btly-typography-title-m-size);
    line-height: var(--btly-typography-title-m-line-height);
    letter-spacing: var(--btly-typography-title-m-letter-spacing);
  }
  .md\:btly-text-title-s {
    font-family: var(--btly-typography-title-s-font);
    font-weight: var(--btly-typography-title-s-weight);
    font-size: var(--btly-typography-title-s-size);
    line-height: var(--btly-typography-title-s-line-height);
    letter-spacing: var(--btly-typography-title-s-letter-spacing);
  }
  .md\:btly-text-body-xl {
    font-family: var(--btly-typography-body-xl-font);
    font-weight: var(--btly-typography-body-xl-weight);
    font-size: var(--btly-typography-body-xl-size);
    line-height: var(--btly-typography-body-xl-line-height);
    letter-spacing: var(--btly-typography-body-xl-letter-spacing);
  }
  .md\:btly-text-body-l {
    font-family: var(--btly-typography-body-l-font);
    font-weight: var(--btly-typography-body-l-weight);
    font-size: var(--btly-typography-body-l-size);
    line-height: var(--btly-typography-body-l-line-height);
    letter-spacing: var(--btly-typography-body-l-letter-spacing);
  }
  .md\:btly-text-body-m {
    font-family: var(--btly-typography-body-m-font);
    font-weight: var(--btly-typography-body-m-weight);
    font-size: var(--btly-typography-body-m-size);
    line-height: var(--btly-typography-body-m-line-height);
    letter-spacing: var(--btly-typography-body-m-letter-spacing);
  }
  .md\:btly-text-body-s {
    font-family: var(--btly-typography-body-s-font);
    font-weight: var(--btly-typography-body-s-weight);
    font-size: var(--btly-typography-body-s-size);
    line-height: var(--btly-typography-body-s-line-height);
    letter-spacing: var(--btly-typography-body-s-letter-spacing);
  }
  .md\:btly-text-label-m {
    font-family: var(--btly-typography-label-m-font);
    font-weight: var(--btly-typography-label-m-weight);
    font-size: var(--btly-typography-label-m-size);
    line-height: var(--btly-typography-label-m-line-height);
    letter-spacing: var(--btly-typography-label-m-letter-spacing);
  }
  .md\:btly-text-label-s {
    font-family: var(--btly-typography-label-s-font);
    font-weight: var(--btly-typography-label-s-weight);
    font-size: var(--btly-typography-label-s-size);
    line-height: var(--btly-typography-label-s-line-height);
    letter-spacing: var(--btly-typography-label-s-letter-spacing);
  }
}

@media (min-width: 1024px) {
  .lg\:btly-text-display-xl {
    font-family: var(--btly-typography-display-xl-font);
    font-weight: var(--btly-typography-display-xl-weight);
    font-size: var(--btly-typography-display-xl-size);
    line-height: var(--btly-typography-display-xl-line-height);
    letter-spacing: var(--btly-typography-display-xl-letter-spacing);
  }
  .lg\:btly-text-display-l {
    font-family: var(--btly-typography-display-l-font);
    font-weight: var(--btly-typography-display-l-weight);
    font-size: var(--btly-typography-display-l-size);
    line-height: var(--btly-typography-display-l-line-height);
    letter-spacing: var(--btly-typography-display-l-letter-spacing);
  }
  .lg\:btly-text-display-m {
    font-family: var(--btly-typography-display-m-font);
    font-weight: var(--btly-typography-display-m-weight);
    font-size: var(--btly-typography-display-m-size);
    line-height: var(--btly-typography-display-m-line-height);
    letter-spacing: var(--btly-typography-display-m-letter-spacing);
  }
  .lg\:btly-text-heading-xl {
    font-family: var(--btly-typography-heading-xl-font);
    font-weight: var(--btly-typography-heading-xl-weight);
    font-size: var(--btly-typography-heading-xl-size);
    line-height: var(--btly-typography-heading-xl-line-height);
    letter-spacing: var(--btly-typography-heading-xl-letter-spacing);
  }
  .lg\:btly-text-heading-l {
    font-family: var(--btly-typography-heading-l-font);
    font-weight: var(--btly-typography-heading-l-weight);
    font-size: var(--btly-typography-heading-l-size);
    line-height: var(--btly-typography-heading-l-line-height);
    letter-spacing: var(--btly-typography-heading-l-letter-spacing);
  }
  .lg\:btly-text-heading-m {
    font-family: var(--btly-typography-heading-m-font);
    font-weight: var(--btly-typography-heading-m-weight);
    font-size: var(--btly-typography-heading-m-size);
    line-height: var(--btly-typography-heading-m-line-height);
    letter-spacing: var(--btly-typography-heading-m-letter-spacing);
  }
  .lg\:btly-text-heading-s {
    font-family: var(--btly-typography-heading-s-font);
    font-weight: var(--btly-typography-heading-s-weight);
    font-size: var(--btly-typography-heading-s-size);
    line-height: var(--btly-typography-heading-s-line-height);
    letter-spacing: var(--btly-typography-heading-s-letter-spacing);
  }
  .lg\:btly-text-title-xl {
    font-family: var(--btly-typography-title-xl-font);
    font-weight: var(--btly-typography-title-xl-weight);
    font-size: var(--btly-typography-title-xl-size);
    line-height: var(--btly-typography-title-xl-line-height);
    letter-spacing: var(--btly-typography-title-xl-letter-spacing);
  }
  .lg\:btly-text-title-l {
    font-family: var(--btly-typography-title-l-font);
    font-weight: var(--btly-typography-title-l-weight);
    font-size: var(--btly-typography-title-l-size);
    line-height: var(--btly-typography-title-l-line-height);
    letter-spacing: var(--btly-typography-title-l-letter-spacing);
  }
  .lg\:btly-text-title-m {
    font-family: var(--btly-typography-title-m-font);
    font-weight: var(--btly-typography-title-m-weight);
    font-size: var(--btly-typography-title-m-size);
    line-height: var(--btly-typography-title-m-line-height);
    letter-spacing: var(--btly-typography-title-m-letter-spacing);
  }
  .lg\:btly-text-title-s {
    font-family: var(--btly-typography-title-s-font);
    font-weight: var(--btly-typography-title-s-weight);
    font-size: var(--btly-typography-title-s-size);
    line-height: var(--btly-typography-title-s-line-height);
    letter-spacing: var(--btly-typography-title-s-letter-spacing);
  }
  .lg\:btly-text-body-xl {
    font-family: var(--btly-typography-body-xl-font);
    font-weight: var(--btly-typography-body-xl-weight);
    font-size: var(--btly-typography-body-xl-size);
    line-height: var(--btly-typography-body-xl-line-height);
    letter-spacing: var(--btly-typography-body-xl-letter-spacing);
  }
  .lg\:btly-text-body-l {
    font-family: var(--btly-typography-body-l-font);
    font-weight: var(--btly-typography-body-l-weight);
    font-size: var(--btly-typography-body-l-size);
    line-height: var(--btly-typography-body-l-line-height);
    letter-spacing: var(--btly-typography-body-l-letter-spacing);
  }
  .lg\:btly-text-body-m {
    font-family: var(--btly-typography-body-m-font);
    font-weight: var(--btly-typography-body-m-weight);
    font-size: var(--btly-typography-body-m-size);
    line-height: var(--btly-typography-body-m-line-height);
    letter-spacing: var(--btly-typography-body-m-letter-spacing);
  }
  .lg\:btly-text-body-s {
    font-family: var(--btly-typography-body-s-font);
    font-weight: var(--btly-typography-body-s-weight);
    font-size: var(--btly-typography-body-s-size);
    line-height: var(--btly-typography-body-s-line-height);
    letter-spacing: var(--btly-typography-body-s-letter-spacing);
  }
  .lg\:btly-text-label-m {
    font-family: var(--btly-typography-label-m-font);
    font-weight: var(--btly-typography-label-m-weight);
    font-size: var(--btly-typography-label-m-size);
    line-height: var(--btly-typography-label-m-line-height);
    letter-spacing: var(--btly-typography-label-m-letter-spacing);
  }
  .lg\:btly-text-label-s {
    font-family: var(--btly-typography-label-s-font);
    font-weight: var(--btly-typography-label-s-weight);
    font-size: var(--btly-typography-label-s-size);
    line-height: var(--btly-typography-label-s-line-height);
    letter-spacing: var(--btly-typography-label-s-letter-spacing);
  }
}

@media (min-width: 1280px) {
  .xl\:btly-text-display-xl {
    font-family: var(--btly-typography-display-xl-font);
    font-weight: var(--btly-typography-display-xl-weight);
    font-size: var(--btly-typography-display-xl-size);
    line-height: var(--btly-typography-display-xl-line-height);
    letter-spacing: var(--btly-typography-display-xl-letter-spacing);
  }
  .xl\:btly-text-display-l {
    font-family: var(--btly-typography-display-l-font);
    font-weight: var(--btly-typography-display-l-weight);
    font-size: var(--btly-typography-display-l-size);
    line-height: var(--btly-typography-display-l-line-height);
    letter-spacing: var(--btly-typography-display-l-letter-spacing);
  }
  .xl\:btly-text-display-m {
    font-family: var(--btly-typography-display-m-font);
    font-weight: var(--btly-typography-display-m-weight);
    font-size: var(--btly-typography-display-m-size);
    line-height: var(--btly-typography-display-m-line-height);
    letter-spacing: var(--btly-typography-display-m-letter-spacing);
  }
  .xl\:btly-text-heading-xl {
    font-family: var(--btly-typography-heading-xl-font);
    font-weight: var(--btly-typography-heading-xl-weight);
    font-size: var(--btly-typography-heading-xl-size);
    line-height: var(--btly-typography-heading-xl-line-height);
    letter-spacing: var(--btly-typography-heading-xl-letter-spacing);
  }
  .xl\:btly-text-heading-l {
    font-family: var(--btly-typography-heading-l-font);
    font-weight: var(--btly-typography-heading-l-weight);
    font-size: var(--btly-typography-heading-l-size);
    line-height: var(--btly-typography-heading-l-line-height);
    letter-spacing: var(--btly-typography-heading-l-letter-spacing);
  }
  .xl\:btly-text-heading-m {
    font-family: var(--btly-typography-heading-m-font);
    font-weight: var(--btly-typography-heading-m-weight);
    font-size: var(--btly-typography-heading-m-size);
    line-height: var(--btly-typography-heading-m-line-height);
    letter-spacing: var(--btly-typography-heading-m-letter-spacing);
  }
  .xl\:btly-text-heading-s {
    font-family: var(--btly-typography-heading-s-font);
    font-weight: var(--btly-typography-heading-s-weight);
    font-size: var(--btly-typography-heading-s-size);
    line-height: var(--btly-typography-heading-s-line-height);
    letter-spacing: var(--btly-typography-heading-s-letter-spacing);
  }
  .xl\:btly-text-title-xl {
    font-family: var(--btly-typography-title-xl-font);
    font-weight: var(--btly-typography-title-xl-weight);
    font-size: var(--btly-typography-title-xl-size);
    line-height: var(--btly-typography-title-xl-line-height);
    letter-spacing: var(--btly-typography-title-xl-letter-spacing);
  }
  .xl\:btly-text-title-l {
    font-family: var(--btly-typography-title-l-font);
    font-weight: var(--btly-typography-title-l-weight);
    font-size: var(--btly-typography-title-l-size);
    line-height: var(--btly-typography-title-l-line-height);
    letter-spacing: var(--btly-typography-title-l-letter-spacing);
  }
  .xl\:btly-text-title-m {
    font-family: var(--btly-typography-title-m-font);
    font-weight: var(--btly-typography-title-m-weight);
    font-size: var(--btly-typography-title-m-size);
    line-height: var(--btly-typography-title-m-line-height);
    letter-spacing: var(--btly-typography-title-m-letter-spacing);
  }
  .xl\:btly-text-title-s {
    font-family: var(--btly-typography-title-s-font);
    font-weight: var(--btly-typography-title-s-weight);
    font-size: var(--btly-typography-title-s-size);
    line-height: var(--btly-typography-title-s-line-height);
    letter-spacing: var(--btly-typography-title-s-letter-spacing);
  }
  .xl\:btly-text-body-xl {
    font-family: var(--btly-typography-body-xl-font);
    font-weight: var(--btly-typography-body-xl-weight);
    font-size: var(--btly-typography-body-xl-size);
    line-height: var(--btly-typography-body-xl-line-height);
    letter-spacing: var(--btly-typography-body-xl-letter-spacing);
  }
  .xl\:btly-text-body-l {
    font-family: var(--btly-typography-body-l-font);
    font-weight: var(--btly-typography-body-l-weight);
    font-size: var(--btly-typography-body-l-size);
    line-height: var(--btly-typography-body-l-line-height);
    letter-spacing: var(--btly-typography-body-l-letter-spacing);
  }
  .xl\:btly-text-body-m {
    font-family: var(--btly-typography-body-m-font);
    font-weight: var(--btly-typography-body-m-weight);
    font-size: var(--btly-typography-body-m-size);
    line-height: var(--btly-typography-body-m-line-height);
    letter-spacing: var(--btly-typography-body-m-letter-spacing);
  }
  .xl\:btly-text-body-s {
    font-family: var(--btly-typography-body-s-font);
    font-weight: var(--btly-typography-body-s-weight);
    font-size: var(--btly-typography-body-s-size);
    line-height: var(--btly-typography-body-s-line-height);
    letter-spacing: var(--btly-typography-body-s-letter-spacing);
  }
  .xl\:btly-text-label-m {
    font-family: var(--btly-typography-label-m-font);
    font-weight: var(--btly-typography-label-m-weight);
    font-size: var(--btly-typography-label-m-size);
    line-height: var(--btly-typography-label-m-line-height);
    letter-spacing: var(--btly-typography-label-m-letter-spacing);
  }
  .xl\:btly-text-label-s {
    font-family: var(--btly-typography-label-s-font);
    font-weight: var(--btly-typography-label-s-weight);
    font-size: var(--btly-typography-label-s-size);
    line-height: var(--btly-typography-label-s-line-height);
    letter-spacing: var(--btly-typography-label-s-letter-spacing);
  }
}
/* Histoire playground frame — base typography + .story-page/.story-section layout. */

/* No `body { background }` here — Histoire forces body to transparent.
 * Canvas paint lives on .canvas-wrapper (see CanvasWrapper.vue). */
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--btly-font-family-inter), system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--btly-color-gray-900);
}

/* NO global reset here — the playground is the hostile-environment canary: DS components
 * must own their box (see docs/ARCHITECTURE.md). Playground chrome resets itself locally. */

.story-page {
  box-sizing: border-box;
  padding: 32px 40px 64px;
  max-width: 1280px;
}

.story-page__title {
  font-family: var(--btly-font-family-mona-sans);
  font-size: 32px;
  font-weight: var(--btly-font-weight-bold);
  letter-spacing: -0.4px;
  color: var(--btly-color-gray-900);
  margin: 0 0 8px;
  line-height: 1.15;
}

.story-page__subtitle {
  font-size: 13px;
  color: var(--btly-color-gray-500);
  margin: 0 0 32px;
  max-width: 760px;
  line-height: 1.55;
}

.story-page__subtitle code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--btly-color-gray-100);
  color: var(--btly-color-gray-800);
}

.story-section {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--btly-color-gray-100);
}

.story-section:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.story-section__title {
  font-family: var(--btly-font-family-mona-sans);
  font-size: 18px;
  font-weight: var(--btly-font-weight-bold);
  color: var(--btly-color-gray-900);
  margin: 0 0 20px;
  letter-spacing: -0.2px;
}

.story-section__hint {
  font-size: 13px;
  color: var(--btly-color-gray-500);
  margin: -16px 0 20px;
  line-height: 1.55;
  max-width: 760px;
}

.story-section__hint code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--btly-color-gray-100);
  color: var(--btly-color-gray-800);
}
/* mona-sans-vietnamese-600-normal */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/mona-sans-vietnamese-600-normal-H15QO8_e.woff2) format('woff2'), url(/assets/mona-sans-vietnamese-600-normal-CSUGlkn-.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* mona-sans-latin-ext-600-normal */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/mona-sans-latin-ext-600-normal-BQP2yqCw.woff2) format('woff2'), url(/assets/mona-sans-latin-ext-600-normal-zG757KrV.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* mona-sans-latin-600-normal */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/mona-sans-latin-600-normal-D3kMOEdx.woff2) format('woff2'), url(/assets/mona-sans-latin-600-normal-DrhsX45A.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* mona-sans-vietnamese-700-normal */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/mona-sans-vietnamese-700-normal-W-GorIPQ.woff2) format('woff2'), url(/assets/mona-sans-vietnamese-700-normal-BZbN4BnZ.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* mona-sans-latin-ext-700-normal */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/mona-sans-latin-ext-700-normal-D6dAc81M.woff2) format('woff2'), url(/assets/mona-sans-latin-ext-700-normal-ClZsQsLm.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* mona-sans-latin-700-normal */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/mona-sans-latin-700-normal-8_gKyUBn.woff2) format('woff2'), url(/assets/mona-sans-latin-700-normal-Cfm70JW0.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* mona-sans-vietnamese-800-normal */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/mona-sans-vietnamese-800-normal-BNjoVATh.woff2) format('woff2'), url(/assets/mona-sans-vietnamese-800-normal-CLwIggyj.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* mona-sans-latin-ext-800-normal */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/mona-sans-latin-ext-800-normal-DdBqzyCU.woff2) format('woff2'), url(/assets/mona-sans-latin-ext-800-normal-CKCF4DGP.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* mona-sans-latin-800-normal */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/mona-sans-latin-800-normal-B2BWrONq.woff2) format('woff2'), url(/assets/mona-sans-latin-800-normal-D86PQGi0.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-cyrillic-ext-400-normal-BQZuk6qB.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-400-normal-DQukG94-.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-cyrillic-400-normal-obahsSVq.woff2) format('woff2'), url(/assets/inter-cyrillic-400-normal-HOLc17fK.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-greek-ext-400-normal-DGGRlc-M.woff2) format('woff2'), url(/assets/inter-greek-ext-400-normal-KugGGMne.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-greek-400-normal-B4URO6DV.woff2) format('woff2'), url(/assets/inter-greek-400-normal-q2sYcFCs.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-vietnamese-400-normal-DMkecbls.woff2) format('woff2'), url(/assets/inter-vietnamese-400-normal-Bbgyi5SW.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-latin-ext-400-normal-C1nco2VV.woff2) format('woff2'), url(/assets/inter-latin-ext-400-normal-77YHD8bZ.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-latin-400-normal-C38fXH4l.woff2) format('woff2'), url(/assets/inter-latin-400-normal-CyCys3Eg.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-cyrillic-ext-600-normal-Dfes3d0z.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-600-normal-Bcila6Z-.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-cyrillic-600-normal-CWCymEST.woff2) format('woff2'), url(/assets/inter-cyrillic-600-normal-4D_pXhcN.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-greek-ext-600-normal-DRtmH8MT.woff2) format('woff2'), url(/assets/inter-greek-ext-600-normal-B8X0CLgF.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-greek-600-normal-plRanbMR.woff2) format('woff2'), url(/assets/inter-greek-600-normal-BZpKdvQh.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-vietnamese-600-normal-Cc8MFFhd.woff2) format('woff2'), url(/assets/inter-vietnamese-600-normal-BuLX-rYi.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-latin-ext-600-normal-D2bJ5OIk.woff2) format('woff2'), url(/assets/inter-latin-ext-600-normal-CIVaiw4L.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-latin-600-normal-LgqL8muc.woff2) format('woff2'), url(/assets/inter-latin-600-normal-CiBQ2DWP.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
.canvas-wrapper[data-v-194acd5d] {
  min-height: 100vh;
  background: var(--btly-color-base-white);
  color: var(--btly-color-gray-900);
}
*, ::before, ::after {--_histoire-color-primary-50: 249 249 255;--_histoire-color-primary-100: 239 239 255;--_histoire-color-primary-200: 219 219 255;--_histoire-color-primary-300: 185 184 255;--_histoire-color-primary-400: 144 133 255;--_histoire-color-primary-500: 115 82 252;--_histoire-color-primary-600: 100 53 238;--_histoire-color-primary-700: 82 22 207;--_histoire-color-primary-800: 62 17 161;--_histoire-color-primary-900: 48 20 123;--_histoire-color-gray-50: 250 250 250;--_histoire-color-gray-100: 244 244 245;--_histoire-color-gray-200: 228 228 231;--_histoire-color-gray-300: 212 212 216;--_histoire-color-gray-400: 161 161 170;--_histoire-color-gray-500: 113 113 122;--_histoire-color-gray-600: 82 82 91;--_histoire-color-gray-700: 63 63 70;--_histoire-color-gray-750: 50 50 56;--_histoire-color-gray-800: 39 39 42;--_histoire-color-gray-850: 31 31 33;--_histoire-color-gray-900: 24 24 27;--_histoire-color-gray-950: 16 16 18;}

@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)){

.resize-observer[data-v-b329ee4c]{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100%;
  border:none;
  background-color:transparent;
  pointer-events:none;
  display:block;
  overflow:hidden;
  opacity:0
}

.resize-observer[data-v-b329ee4c] object{
  display:block;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:-1
}

.v-popper__popper{
  z-index:10000;
  top:0;
  left:0;
  outline:none
}

.v-popper__popper.v-popper__popper--hidden{
  visibility:hidden;
  opacity:0;
  transition:opacity .15s,visibility .15s;
  pointer-events:none
}

.v-popper__popper.v-popper__popper--shown{
  visibility:visible;
  opacity:1;
  transition:opacity .15s
}

.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{
  transition:none!important
}

.v-popper__backdrop{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none
}

.v-popper__inner{
  position:relative;
  box-sizing:border-box;
  overflow-y:auto
}

.v-popper__inner>div{
  position:relative;
  z-index:1;
  max-width:inherit;
  max-height:inherit
}

.v-popper__arrow-container{
  position:absolute;
  width:10px;
  height:10px
}

.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{
  display:none
}

.v-popper__arrow-inner,.v-popper__arrow-outer{
  border-style:solid;
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0
}

.v-popper__arrow-inner{
  visibility:hidden;
  border-width:7px
}

.v-popper__arrow-outer{
  border-width:6px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
  left:-2px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  left:-1px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{
  border-bottom-width:0;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{
  top:-2px
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{
  top:0
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  border-top-width:0;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-top-color:transparent!important
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
  top:-4px
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  top:-6px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
  top:-2px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  top:-1px
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  border-left-width:0;
  border-left-color:transparent!important;
  border-top-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
  left:-4px
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  left:-6px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{
  right:-10px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{
  border-right-width:0;
  border-top-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{
  left:-2px
}

.v-popper--theme-tooltip .v-popper__inner{
  background:rgba(0,0,0,.8);
  color:#fff;
  border-radius:6px;
  padding:7px 12px 6px
}

.v-popper--theme-tooltip .v-popper__arrow-outer{
  border-color:#000c
}

.v-popper--theme-dropdown .v-popper__inner{
  background:#fff;
  color:#000;
  border-radius:6px;
  border:1px solid #ddd;
  box-shadow:0 6px 30px #0000001a
}

.v-popper--theme-dropdown .v-popper__arrow-inner{
  visibility:visible;
  border-color:#fff
}

.v-popper--theme-dropdown .v-popper__arrow-outer{
  border-color:#ddd
}

.htw-bind-col-size{
  grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))
}

.__histoire-json-code[data-v-d4369e5a] .cm-editor{
  height:100%;
  min-width:280px
}

.v-popper{
  line-height:0
}

.htw-dark .v-popper--theme-dropdown .v-popper__inner{
  --tw-border-opacity: 1;
  border-color:rgb(31 31 33 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color:rgb(244 244 245 / var(--tw-text-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{
  --tw-border-opacity: 1;
  border-color:rgb(63 63 70 / var(--tw-border-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{
  --tw-border-opacity: 1;
  border-color:rgb(31 31 33 / var(--tw-border-opacity, 1))
}

.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{
  transform:scale(.75)
}

.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{
  transform:none;
  transition:transform .15s cubic-bezier(0,1,.5,1)
}

.v-popper__popper:focus-visible{
  outline:none
}

.htw-range-input::-webkit-slider-thumb{
  height:.75rem;
  width:.75rem;
  -webkit-appearance:none;
  appearance:none;
  border-radius:9999px;
  border-width:1px;
  border-style:solid;
  border-color:#00000040;
  --tw-bg-opacity: 1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-range-input:is(.htw-dark *)::-webkit-slider-thumb{
  border-color:#ffffff40;
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))
}

.htw-range-input:hover::-webkit-slider-thumb{
  --tw-border-opacity: 1 !important;
  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;
  --tw-bg-opacity: 1 !important;
  background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important
}

.htw-range-input::-moz-range-thumb{
  height:.75rem;
  width:.75rem;
  -moz-appearance:none;
  appearance:none;
  border-radius:9999px;
  border-width:1px;
  border-style:solid;
  border-color:#00000040;
  --tw-bg-opacity: 1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-range-input:is(.htw-dark *)::-moz-range-thumb{
  border-color:#ffffff40;
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))
}

.htw-range-input:hover::-moz-range-thumb{
  --tw-border-opacity: 1 !important;
  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;
  --tw-bg-opacity: 1 !important;
  background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important
}

/* @TODO custom themes */

.v-popper {
  line-height: 0;
}

.htw-dark .v-popper--theme-dropdown .v-popper__inner{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1));
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-100) / var(--tw-text-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-700) / var(--tw-border-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper {
  transform: scale(.75);
}

.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper {
  transform: none;
  transition: transform .15s cubic-bezier(0, 1, .5, 1);
}

.v-popper__popper:focus-visible {
  outline: none;
}

.__histoire-scale-x-enter-active,
  .__histoire-scale-x-leave-active {
  transition: transform .15s, opacity .15s;
}

.__histoire-scale-x-enter-from,
  .__histoire-scale-x-leave-to {
  transform: scaleX(0);
  opacity: 0;
}

.__histoire-scale-y-enter-active,
  .__histoire-scale-y-leave-active {
  transition: transform .15s, opacity .15s;
}

.__histoire-scale-y-enter-from,
  .__histoire-scale-y-leave-to {
  transform: scaleY(0);
  opacity: 0;
}

.__histoire-fade-enter-active,
  .__histoire-fade-leave-active {
  transition: opacity .15s;
}

.__histoire-fade-enter-from,
  .__histoire-fade-leave-to {
  opacity: 0;
}

.__histoire-fade-bottom-enter-active,
  .__histoire-fade-bottom-leave-active {
  transition: transform .15s, opacity .15s;
  transform: translateY(0px);
}

.__histoire-fade-bottom-enter-from,
  .__histoire-fade-bottom-leave-to {
  transform: translateY(32px);
  opacity: 0;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

a,
input,
button {
  color: inherit;
}

a {
  text-decoration: inherit;
}

input, button {
  font-family: inherit;
}

a,
button {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

*, ::before, ::after{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

::backdrop{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

body,
  pre {
  margin: 0;
}

:scope,
  body,
  #app {
  height: 100%;
}

:scope {
  font-family: 'Noto Sans Display', system-ui, sans-serif;
  font-size: 1rem;
}

body {
  font-size: 1.125rem;
}

@media (min-width: 640px) {
  body {
    font-size: .875rem;
  }
}

.__histoire-render-story:not(.__histoire-render-custom-controls) {
  overflow: auto;
  min-height: 100%;
}

.__histoire-code .shiki {
  background: transparent !important;
}

.htw-prose h1:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h2:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h3:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h4:not(:hover) .header-anchor[aria-hidden="true"] {
  visibility: hidden;
}

.htw-prose hr {
  margin: 1rem 0;
}

.__histoire-pane-shadow-from-right {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right;
}

.htw-dark .__histoire-pane-shadow-from-right {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

.htw-prose{
  color:var(--tw-prose-body);
  max-width:65ch;
}

.htw-prose :where(p):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em;
  margin-bottom:1.25em
}

.htw-prose :where([class~="lead"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-lead);
  font-size:1.25em;
  line-height:1.6;
  margin-top:1.2em;
  margin-bottom:1.2em
}

.htw-prose :where(a):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:rgb(var(--_histoire-color-primary-500));
  text-decoration:none;
  font-weight:500;
}

.htw-prose :where(a):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)):hover{
  text-decoration:underline
}

.htw-prose :where(strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-bold);
  font-weight:600
}

.htw-prose :where(a strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(blockquote strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(thead th strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(ol):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:decimal;
  margin-top:1.25em;
  margin-bottom:1.25em;
  padding-inline-start:1.625em
}

.htw-prose :where(ol[type="A"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-alpha
}

.htw-prose :where(ol[type="a"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-alpha
}

.htw-prose :where(ol[type="A" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-alpha
}

.htw-prose :where(ol[type="a" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-alpha
}

.htw-prose :where(ol[type="I"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-roman
}

.htw-prose :where(ol[type="i"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-roman
}

.htw-prose :where(ol[type="I" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-roman
}

.htw-prose :where(ol[type="i" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-roman
}

.htw-prose :where(ol[type="1"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:decimal
}

.htw-prose :where(ul):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:disc;
  margin-top:1.25em;
  margin-bottom:1.25em;
  padding-inline-start:1.625em
}

.htw-prose :where(ol > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::marker{
  font-weight:400;
  color:var(--tw-prose-counters)
}

.htw-prose :where(ul > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::marker{
  color:var(--tw-prose-bullets)
}

.htw-prose :where(dt):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  margin-top:1.25em
}

.htw-prose :where(hr):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-color:var(--tw-prose-hr);
  border-top-width:1px;
  margin-top:3em;
  margin-bottom:3em
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:500;
  font-style:italic;
  color:var(--tw-prose-quotes);
  border-inline-start-width:0.25rem;
  border-inline-start-color:var(--tw-prose-quote-borders);
  quotes:"\201C""\201D""\2018""\2019";
  margin-top:1.6em;
  margin-bottom:1.6em;
  padding-inline-start:1em;
  margin-left:0;
  margin-right:0;
  background-color:rgb(var(--_histoire-color-gray-100));
  padding:.25rem .375rem;
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)) p:first-child{
  margin-top:0
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)) p:last-child{
  margin-bottom:0
}

.htw-dark .htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  background-color:rgb(var(--_histoire-color-gray-750))
}

.htw-prose :where(blockquote p:first-of-type):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:open-quote
}

.htw-prose :where(blockquote p:last-of-type):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:close-quote
}

.htw-prose :where(h1):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:800;
  font-size:2.25em;
  margin-top:0;
  margin-bottom:0.8888889em;
  line-height:1.1111111
}

.htw-prose :where(h1 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:900;
  color:inherit
}

.htw-prose :where(h2):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:700;
  font-size:1.5em;
  margin-top:2em;
  margin-bottom:1em;
  line-height:1.3333333
}

.htw-prose :where(h2 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:800;
  color:inherit
}

.htw-prose :where(h3):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  font-size:1.25em;
  margin-top:1.6em;
  margin-bottom:0.6em;
  line-height:1.6
}

.htw-prose :where(h3 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:700;
  color:inherit
}

.htw-prose :where(h4):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  margin-top:1.5em;
  margin-bottom:0.5em;
  line-height:1.5
}

.htw-prose :where(h4 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:700;
  color:inherit
}

.htw-prose :where(img):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(picture):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  display:block;
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(video):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(kbd):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:500;
  font-family:inherit;
  color:var(--tw-prose-kbd);
  box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size:0.875em;
  border-radius:0.3125rem;
  padding-top:0.1875em;
  padding-inline-end:0.375em;
  padding-bottom:0.1875em;
  padding-inline-start:0.375em
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-code);
  font-weight:normal;
  font-size:0.8rem;
  background-color:rgb(var(--_histoire-color-gray-500) / 20%);
  padding:0.05rem 0.5rem;
  border-radius:0.25rem;
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before,.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  display:none
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:"`"
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:"`"
}

.htw-prose :where(a code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(h1 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(h2 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit;
  font-size:0.875em
}

.htw-prose :where(h3 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit;
  font-size:0.9em
}

.htw-prose :where(h4 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(blockquote code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(thead th code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(pre):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-pre-code);
  background-color:var(--tw-prose-pre-bg);
  overflow-x:auto;
  font-weight:400;
  font-size:0.875em;
  line-height:1.7142857;
  margin-top:1.7142857em;
  margin-bottom:1.7142857em;
  border-radius:0.375rem;
  padding-top:0.8571429em;
  padding-inline-end:1.1428571em;
  padding-bottom:0.8571429em;
  padding-inline-start:1.1428571em
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  background-color:transparent;
  border-width:0;
  border-radius:0;
  padding:0;
  font-weight:inherit;
  color:inherit;
  font-size:inherit;
  font-family:inherit;
  line-height:inherit
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:none
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:none
}

.htw-prose :where(table):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  width:100%;
  table-layout:auto;
  margin-top:2em;
  margin-bottom:2em;
  font-size:0.875em;
  line-height:1.7142857
}

.htw-prose :where(thead):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:1px;
  border-bottom-color:var(--tw-prose-th-borders)
}

.htw-prose :where(thead th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  vertical-align:bottom;
  padding-inline-end:0.5714286em;
  padding-bottom:0.5714286em;
  padding-inline-start:0.5714286em
}

.htw-prose :where(tbody tr):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:1px;
  border-bottom-color:var(--tw-prose-td-borders)
}

.htw-prose :where(tbody tr:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:0
}

.htw-prose :where(tbody td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  vertical-align:baseline
}

.htw-prose :where(tfoot):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-top-width:1px;
  border-top-color:var(--tw-prose-th-borders)
}

.htw-prose :where(tfoot td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  vertical-align:top
}

.htw-prose :where(th, td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  text-align:start
}

.htw-prose :where(figure > *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0;
  margin-bottom:0
}

.htw-prose :where(figcaption):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-captions);
  font-size:0.875em;
  line-height:1.4285714;
  margin-top:0.8571429em
}

.htw-prose{
  --tw-prose-body:#374151;
  --tw-prose-headings:#111827;
  --tw-prose-lead:#4b5563;
  --tw-prose-links:#111827;
  --tw-prose-bold:#111827;
  --tw-prose-counters:#6b7280;
  --tw-prose-bullets:#d1d5db;
  --tw-prose-hr:#e5e7eb;
  --tw-prose-quotes:#111827;
  --tw-prose-quote-borders:#e5e7eb;
  --tw-prose-captions:#6b7280;
  --tw-prose-kbd:#111827;
  --tw-prose-kbd-shadows:rgb(17 24 39 / 10%);
  --tw-prose-code:#111827;
  --tw-prose-pre-code:#e5e7eb;
  --tw-prose-pre-bg:#1f2937;
  --tw-prose-th-borders:#d1d5db;
  --tw-prose-td-borders:#e5e7eb;
  --tw-prose-invert-body:#d1d5db;
  --tw-prose-invert-headings:#fff;
  --tw-prose-invert-lead:#9ca3af;
  --tw-prose-invert-links:#fff;
  --tw-prose-invert-bold:#fff;
  --tw-prose-invert-counters:#9ca3af;
  --tw-prose-invert-bullets:rgb(var(--_histoire-color-gray-500));
  --tw-prose-invert-hr:rgb(var(--_histoire-color-gray-800));
  --tw-prose-invert-quotes:#f3f4f6;
  --tw-prose-invert-quote-borders:rgb(var(--_histoire-color-gray-800));
  --tw-prose-invert-captions:#9ca3af;
  --tw-prose-invert-kbd:#fff;
  --tw-prose-invert-kbd-shadows:rgb(255 255 255 / 10%);
  --tw-prose-invert-code:#fff;
  --tw-prose-invert-pre-code:#d1d5db;
  --tw-prose-invert-pre-bg:rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders:#4b5563;
  --tw-prose-invert-td-borders:#374151;
  font-size:1rem;
  line-height:1.75
}

.htw-prose :where(picture > img):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0;
  margin-bottom:0
}

.htw-prose :where(li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.1rem;
  margin-bottom:0.1rem
}

.htw-prose :where(ol > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0.375em
}

.htw-prose :where(ul > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0.375em
}

.htw-prose :where(.htw-prose > ul > li p):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.75em;
  margin-bottom:0.75em
}

.htw-prose :where(.htw-prose > ul > li > p:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em
}

.htw-prose :where(.htw-prose > ul > li > p:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:1.25em
}

.htw-prose :where(.htw-prose > ol > li > p:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em
}

.htw-prose :where(.htw-prose > ol > li > p:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:1.25em
}

.htw-prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.75em;
  margin-bottom:0.75em
}

.htw-prose :where(dl):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em;
  margin-bottom:1.25em
}

.htw-prose :where(dd):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.5em;
  padding-inline-start:1.625em
}

.htw-prose :where(hr + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h2 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h3 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h4 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(thead th:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0
}

.htw-prose :where(thead th:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-end:0
}

.htw-prose :where(tbody td, tfoot td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-top:0.5714286em;
  padding-inline-end:0.5714286em;
  padding-bottom:0.5714286em;
  padding-inline-start:0.5714286em
}

.htw-prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0
}

.htw-prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-end:0
}

.htw-prose :where(figure):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(.htw-prose > :first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(.htw-prose > :last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:0
}

.htw-prose :where(h1, h2, h3, h4, th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:0.75rem;
}

.htw-prose :where(h1, h2, h3, h4, th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)):not(:first-child){
  margin-top:1.25rem
}

.htw-pointer-events-none{
  pointer-events:none
}

.htw-invisible{
  visibility:hidden
}

.htw-fixed{
  position:fixed
}

.htw-absolute{
  position:absolute
}

.htw-relative{
  position:relative
}

.htw-inset-0{
  inset:0px
}

.htw-bottom-0{
  bottom:0px
}

.htw-bottom-4{
  bottom:1rem
}

.htw-bottom-5{
  bottom:1.25rem
}

.htw-bottom-8{
  bottom:2rem
}

.htw-left-0{
  left:0px
}

.htw-left-5{
  left:1.25rem
}

.htw-left-8{
  left:2rem
}

.htw-right-0{
  right:0px
}

.htw-right-4{
  right:1rem
}

.htw-right-5{
  right:1.25rem
}

.htw-right-8{
  right:2rem
}

.htw-top-0{
  top:0px
}

.htw-top-5{
  top:1.25rem
}

.htw-top-8{
  top:2rem
}

.htw-isolate{
  isolation:isolate
}

.htw-z-10{
  z-index:10
}

.htw-z-20{
  z-index:20
}

.htw-m-0{
  margin:0px
}

.htw-m-1{
  margin:0.25rem
}

.htw-m-4{
  margin:1rem
}

.htw-m-auto{
  margin:auto
}

.-htw-my-1{
  margin-top:-0.25rem;
  margin-bottom:-0.25rem
}

.htw-mx-1{
  margin-left:0.25rem;
  margin-right:0.25rem
}

.htw-mx-2{
  margin-left:0.5rem;
  margin-right:0.5rem
}

.htw-mx-4{
  margin-left:1rem;
  margin-right:1rem
}

.htw-mx-6{
  margin-left:1.5rem;
  margin-right:1.5rem
}

.htw-my-0{
  margin-top:0px;
  margin-bottom:0px
}

.htw-my-2{
  margin-top:0.5rem;
  margin-bottom:0.5rem
}

.htw-my-4{
  margin-top:1rem;
  margin-bottom:1rem
}

.htw-my-8{
  margin-top:2rem;
  margin-bottom:2rem
}

.-htw-mt-1{
  margin-top:-0.25rem
}

.htw-mb-2{
  margin-bottom:0.5rem
}

.htw-mb-6{
  margin-bottom:1.5rem
}

.htw-mb-8{
  margin-bottom:2rem
}

.htw-ml-4{
  margin-left:1rem
}

.htw-ml-auto{
  margin-left:auto
}

.htw-mr-2{
  margin-right:0.5rem
}

.htw-mr-auto{
  margin-right:auto
}

.htw-mt-0\.5{
  margin-top:0.125rem
}

.htw-mt-1{
  margin-top:0.25rem
}

.htw-mt-2{
  margin-top:0.5rem
}

.htw-box-border{
  box-sizing:border-box
}

.htw-block{
  display:block
}

.htw-flex{
  display:flex
}

.htw-inline-flex{
  display:inline-flex
}

.htw-grid{
  display:grid
}

.\!htw-hidden{
  display:none !important
}

.htw-hidden{
  display:none
}

.htw-h-1{
  height:0.25rem
}

.htw-h-10{
  height:2.5rem
}

.htw-h-12{
  height:3rem
}

.htw-h-16{
  height:4rem
}

.htw-h-2{
  height:0.5rem
}

.htw-h-20{
  height:5rem
}

.htw-h-3{
  height:0.75rem
}

.htw-h-32{
  height:8rem
}

.htw-h-4{
  height:1rem
}

.htw-h-48{
  height:12rem
}

.htw-h-5{
  height:1.25rem
}

.htw-h-6{
  height:1.5rem
}

.htw-h-64{
  height:16rem
}

.htw-h-8{
  height:2rem
}

.htw-h-9{
  height:2.25rem
}

.htw-h-\[100px\]{
  height:100px
}

.htw-h-\[16px\]{
  height:16px
}

.htw-h-\[1px\]{
  height:1px
}

.htw-h-\[22px\]{
  height:22px
}

.htw-h-\[27px\]{
  height:27px
}

.htw-h-\[2px\]{
  height:2px
}

.htw-h-\[51px\]{
  height:51px
}

.htw-h-fit{
  height:-moz-fit-content;
  height:fit-content
}

.htw-h-full{
  height:100%
}

.htw-h-px{
  height:1px
}

.htw-h-screen{
  height:100vh
}

.htw-max-h-\[400px\]{
  max-height:400px
}

.htw-max-h-\[80vh\]{
  max-height:80vh
}

.htw-max-h-full{
  max-height:100%
}

.htw-min-h-32{
  min-height:8rem
}

.htw-min-h-\[26px\]{
  min-height:26px
}

.htw-w-0{
  width:0px
}

.htw-w-16{
  width:4rem
}

.htw-w-2{
  width:0.5rem
}

.htw-w-20{
  width:5rem
}

.htw-w-28{
  width:7rem
}

.htw-w-3{
  width:0.75rem
}

.htw-w-32{
  width:8rem
}

.htw-w-4{
  width:1rem
}

.htw-w-5{
  width:1.25rem
}

.htw-w-6{
  width:1.5rem
}

.htw-w-64{
  width:16rem
}

.htw-w-8{
  width:2rem
}

.htw-w-\[16px\]{
  width:16px
}

.htw-w-\[2px\]{
  width:2px
}

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

.htw-w-full{
  width:100%
}

.htw-w-max{
  width:-moz-max-content;
  width:max-content
}

.htw-w-px{
  width:1px
}

.htw-w-screen{
  width:100vw
}

.htw-min-w-0{
  min-width:0px
}

.htw-min-w-16{
  min-width:4rem
}

.htw-min-w-4{
  min-width:1rem
}

.htw-min-w-\[150px\]{
  min-width:150px
}

.htw-min-w-\[80px\]{
  min-width:80px
}

.htw-max-w-6{
  max-width:1.5rem
}

.htw-max-w-\[400px\]{
  max-width:400px
}

.htw-max-w-\[512px\]{
  max-width:512px
}

.htw-max-w-\[63px\]{
  max-width:63px
}

.htw-max-w-\[82px\]{
  max-width:82px
}

.htw-max-w-full{
  max-width:100%
}

.htw-max-w-none{
  max-width:none
}

.htw-flex-1{
  flex:1 1 0%
}

.htw-flex-none{
  flex:none
}

.htw-flex-shrink{
  flex-shrink:1
}

.htw-shrink{
  flex-shrink:1
}

.htw-shrink-0{
  flex-shrink:0
}

.htw-grow{
  flex-grow:1
}

.htw-rotate-90{
  --tw-rotate:90deg;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.htw-scale-0{
  --tw-scale-x:0;
  --tw-scale-y:0;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.htw-cursor-default{
  cursor:default
}

.htw-cursor-ew-resize{
  cursor:ew-resize
}

.htw-cursor-ns-resize{
  cursor:ns-resize
}

.htw-cursor-nwse-resize{
  cursor:nwse-resize
}

.htw-cursor-pointer{
  cursor:pointer
}

.htw-cursor-text{
  cursor:text
}

.htw-select-none{
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.htw-resize-none{
  resize:none
}

.htw-resize-y{
  resize:vertical
}

.htw-appearance-none{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none
}

.htw-grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\]{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
}

.htw-flex-row{
  flex-direction:row
}

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

.htw-flex-wrap{
  flex-wrap:wrap
}

.htw-flex-nowrap{
  flex-wrap:nowrap
}

.htw-place-content-between{
  place-content:space-between
}

.htw-items-start{
  align-items:flex-start
}

.htw-items-end{
  align-items:flex-end
}

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

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

.htw-items-stretch{
  align-items:stretch
}

.htw-justify-end{
  justify-content:flex-end
}

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

.htw-justify-evenly{
  justify-content:space-evenly
}

.htw-gap-0\.5{
  gap:0.125rem
}

.htw-gap-1{
  gap:0.25rem
}

.htw-gap-12{
  gap:3rem
}

.htw-gap-2{
  gap:0.5rem
}

.htw-gap-4{
  gap:1rem
}

.htw-gap-6{
  gap:1.5rem
}

.htw-gap-px{
  gap:1px
}

.htw-gap-x-2{
  -moz-column-gap:0.5rem;
       column-gap:0.5rem
}

.htw-gap-y-1{
  row-gap:0.25rem
}

.htw-space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1rem * var(--tw-space-y-reverse))
}

.htw-divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:0;
  border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(1px * var(--tw-divide-y-reverse))
}

.htw-divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-100) / var(--tw-divide-opacity, 1))
}

.htw-divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-200) / var(--tw-divide-opacity, 1))
}

.htw-overflow-auto{
  overflow:auto
}

.htw-overflow-hidden{
  overflow:hidden
}

.htw-overflow-y-auto{
  overflow-y:auto
}

.htw-overflow-y-scroll{
  overflow-y:scroll
}

.htw-scroll-smooth{
  scroll-behavior:smooth
}

.htw-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.htw-text-ellipsis{
  text-overflow:ellipsis
}

.htw-whitespace-nowrap{
  white-space:nowrap
}

.\!htw-rounded-\[3px\]{
  border-radius:3px !important
}

.htw-rounded{
  border-radius:0.375rem
}

.htw-rounded-full{
  border-radius:9999px
}

.htw-rounded-lg{
  border-radius:0.75rem
}

.htw-rounded-sm{
  border-radius:0.25rem
}

.htw-rounded-b-lg{
  border-bottom-right-radius:0.75rem;
  border-bottom-left-radius:0.75rem
}

.htw-rounded-l{
  border-top-left-radius:0.375rem;
  border-bottom-left-radius:0.375rem
}

.htw-rounded-r{
  border-top-right-radius:0.375rem;
  border-bottom-right-radius:0.375rem
}

.htw-rounded-r-lg{
  border-top-right-radius:0.75rem;
  border-bottom-right-radius:0.75rem
}

.htw-border{
  border-width:1px
}

.htw-border-0{
  border-width:0px
}

.htw-border-2{
  border-width:2px
}

.htw-border-8{
  border-width:8px
}

.htw-border-b{
  border-bottom-width:1px
}

.htw-border-l-2{
  border-left-width:2px
}

.htw-border-r{
  border-right-width:1px
}

.htw-border-t{
  border-top-width:1px
}

.htw-border-solid{
  border-style:solid
}

.htw-border-none{
  border-style:none
}

.htw-border-black\/20{
  border-color:rgb(0 0 0 / 0.2)
}

.htw-border-black\/25{
  border-color:rgb(0 0 0 / 0.25)
}

.htw-border-black\/50{
  border-color:rgb(0 0 0 / 0.5)
}

.htw-border-current{
  border-color:currentColor
}

.htw-border-gray-100{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-100) / var(--tw-border-opacity, 1))
}

.htw-border-gray-200{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-200) / var(--tw-border-opacity, 1))
}

.htw-border-gray-300\/30{
  border-color:rgb(var(--_histoire-color-gray-300) / 0.3)
}

.htw-border-gray-500\/10{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.htw-border-gray-500\/30{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.3)
}

.htw-border-gray-500\/40{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.4)
}

.htw-border-gray-500\/5{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.05)
}

.htw-border-gray-500\/50{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.5)
}

.htw-border-gray-600{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-600) / var(--tw-border-opacity, 1))
}

.htw-border-gray-800{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-border-opacity, 1))
}

.htw-border-gray-850{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.htw-border-primary-200{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-200) / var(--tw-border-opacity, 1))
}

.htw-border-primary-500{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-border-primary-900{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-900) / var(--tw-border-opacity, 1))
}

.htw-border-transparent{
  border-color:transparent
}

.\!htw-bg-primary-500{
  --tw-bg-opacity:1 !important;
  background-color:rgb(var(--_histoire-color-primary-500) / var(--tw-bg-opacity, 1)) !important
}

.htw-bg-gray-100{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-100) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-200{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-200) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-400\/25{
  background-color:rgb(var(--_histoire-color-gray-400) / 0.25)
}

.htw-bg-gray-50{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-50) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-500\/10{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.htw-bg-gray-500\/50{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.5)
}

.htw-bg-gray-700{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-800{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-800) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-200{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-200) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-50{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-50) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-500{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-500) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-500\/10{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.1)
}

.htw-bg-primary-500\/20{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.2)
}

.htw-bg-primary-500\/25{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.25)
}

.htw-bg-primary-700{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-800{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.htw-bg-transparent{
  background-color:transparent
}

.htw-bg-white{
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-bg-white\/80{
  background-color:rgb(255 255 255 / 0.8)
}

.htw-fill-primary-500{
  fill:rgb(var(--_histoire-color-primary-500))
}

.htw-fill-transparent{
  fill:transparent
}

.htw-stroke-white{
  stroke:#fff
}

.htw-stroke-2{
  stroke-width:2
}

.htw-p-1{
  padding:0.25rem
}

.htw-p-2{
  padding:0.5rem
}

.htw-p-4{
  padding:1rem
}

.htw-p-8{
  padding:2rem
}

.htw-p-px{
  padding:1px
}

.htw-px-0\.5{
  padding-left:0.125rem;
  padding-right:0.125rem
}

.htw-px-1{
  padding-left:0.25rem;
  padding-right:0.25rem
}

.htw-px-2{
  padding-left:0.5rem;
  padding-right:0.5rem
}

.htw-px-4{
  padding-left:1rem;
  padding-right:1rem
}

.htw-px-6{
  padding-left:1.5rem;
  padding-right:1.5rem
}

.htw-py-0\.5{
  padding-top:0.125rem;
  padding-bottom:0.125rem
}

.htw-py-1{
  padding-top:0.25rem;
  padding-bottom:0.25rem
}

.htw-py-12{
  padding-top:3rem;
  padding-bottom:3rem
}

.htw-py-2{
  padding-top:0.5rem;
  padding-bottom:0.5rem
}

.htw-py-3{
  padding-top:0.75rem;
  padding-bottom:0.75rem
}

.htw-py-4{
  padding-top:1rem;
  padding-bottom:1rem
}

.htw-pl-0{
  padding-left:0px
}

.htw-pl-0\.5{
  padding-left:0.125rem
}

.htw-pl-2{
  padding-left:0.5rem
}

.htw-pl-4{
  padding-left:1rem
}

.htw-pl-6{
  padding-left:1.5rem
}

.htw-pr-2{
  padding-right:0.5rem
}

.htw-pr-6{
  padding-right:1.5rem
}

.htw-pt-4{
  padding-top:1rem
}

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

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

.htw-font-mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.htw-text-2xl{
  font-size:1.5rem;
  line-height:2rem
}

.htw-text-5xl{
  font-size:3rem;
  line-height:1
}

.htw-text-lg{
  font-size:1.125rem;
  line-height:1.75rem
}

.htw-text-sm{
  font-size:0.875rem;
  line-height:1.25rem
}

.htw-text-xs{
  font-size:0.75rem;
  line-height:1rem
}

.htw-font-bold{
  font-weight:700
}

.htw-uppercase{
  text-transform:uppercase
}

.htw-leading-none{
  line-height:1
}

.htw-leading-normal{
  line-height:1.5
}

.htw-text-black\/\[1\%\]{
  color:rgb(0 0 0 / 1%)
}

.htw-text-gray-400{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-400) / var(--tw-text-opacity, 1))
}

.htw-text-gray-500{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-500) / var(--tw-text-opacity, 1))
}

.htw-text-gray-500\/20{
  color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.htw-text-gray-700{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-700) / var(--tw-text-opacity, 1))
}

.htw-text-gray-900{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-900) / var(--tw-text-opacity, 1))
}

.htw-text-inherit{
  color:inherit
}

.htw-text-orange-500{
  --tw-text-opacity:1;
  color:rgb(249 115 22 / var(--tw-text-opacity, 1))
}

.htw-text-primary-200{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-200) / var(--tw-text-opacity, 1))
}

.htw-text-primary-400{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.htw-text-primary-500{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-500) / var(--tw-text-opacity, 1))
}

.htw-text-primary-600{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-600) / var(--tw-text-opacity, 1))
}

.htw-text-primary-800{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-800) / var(--tw-text-opacity, 1))
}

.htw-text-red-500{
  --tw-text-opacity:1;
  color:rgb(239 68 68 / var(--tw-text-opacity, 1))
}

.htw-text-white{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.htw-opacity-0{
  opacity:0
}

.htw-opacity-20{
  opacity:0.2
}

.htw-opacity-25{
  opacity:0.25
}

.htw-opacity-30{
  opacity:0.3
}

.htw-opacity-40{
  opacity:0.4
}

.htw-opacity-50{
  opacity:0.5
}

.htw-opacity-60{
  opacity:0.6
}

.htw-opacity-70{
  opacity:0.7
}

.htw-shadow-xl{
  --tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.htw-outline-none{
  outline:2px solid transparent;
  outline-offset:2px
}

.htw-transition-all{
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-border{
  transition-property:border;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-colors{
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-none{
  transition-property:none
}

.htw-transition-transform{
  transition-property:transform;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-delay-150{
  transition-delay:150ms
}

.htw-duration-150{
  transition-duration:150ms
}

.htw-duration-200{
  transition-duration:200ms
}

.htw-duration-300{
  transition-duration:300ms
}

.htw-ease-\[cubic-bezier\(0\,1\,\.6\,1\)\]{
  transition-timing-function:cubic-bezier(0,1,.6,1)
}

.htw-ease-in-out{
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)
}

.htw-ease-out{
  transition-timing-function:cubic-bezier(0, 0, 0.2, 1)
}

.htw-will-change-transform{
  will-change:transform
}

.dark\:htw-prose-invert:is(.htw-dark *){
  --tw-prose-body:var(--tw-prose-invert-body);
  --tw-prose-headings:var(--tw-prose-invert-headings);
  --tw-prose-lead:var(--tw-prose-invert-lead);
  --tw-prose-links:var(--tw-prose-invert-links);
  --tw-prose-bold:var(--tw-prose-invert-bold);
  --tw-prose-counters:var(--tw-prose-invert-counters);
  --tw-prose-bullets:var(--tw-prose-invert-bullets);
  --tw-prose-hr:var(--tw-prose-invert-hr);
  --tw-prose-quotes:var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);
  --tw-prose-captions:var(--tw-prose-invert-captions);
  --tw-prose-kbd:var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code:var(--tw-prose-invert-code);
  --tw-prose-pre-code:var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders:var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders:var(--tw-prose-invert-td-borders)
}

.first\:htw-mt-0:first-child{
  margin-top:0px
}

.last\:htw-mb-0:last-child{
  margin-bottom:0px
}

.focus-within\:htw-border-primary-500:focus-within{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.focus-within\:htw-bg-gray-500\/5:focus-within{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.05)
}

.hover\:htw-border-primary-500:hover{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.hover\:htw-bg-gray-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-200) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-gray-500\/10:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.hover\:htw-bg-gray-500\/20:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.hover\:htw-bg-gray-500\/30:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.3)
}

.hover\:htw-bg-primary-100:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-100) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-200) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-300:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-300) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-50:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-50) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-500\/10:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.1)
}

.hover\:htw-bg-primary-500\/30:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.3)
}

.hover\:htw-bg-primary-500\/50:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.5)
}

.hover\:htw-bg-primary-600:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-600) / var(--tw-bg-opacity, 1))
}

.hover\:htw-text-primary-500:hover{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-500) / var(--tw-text-opacity, 1))
}

.hover\:htw-opacity-100:hover{
  opacity:1
}

.focus\:htw-border-primary-500:focus{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.focus\:htw-border-primary-500\/50:focus{
  border-color:rgb(var(--_histoire-color-primary-500) / 0.5)
}

.focus\:htw-opacity-100:focus{
  opacity:1
}

.focus-visible\:htw-border-primary-500:focus-visible{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.active\:htw-bg-gray-600\/50:active{
  background-color:rgb(var(--_histoire-color-gray-600) / 0.5)
}

.htw-group:first-child .group-first\:htw-hidden{
  display:none
}

.htw-group:nth-child(odd) .group-odd\:htw-bg-gray-100\/50{
  background-color:rgb(var(--_histoire-color-gray-100) / 0.5)
}

.htw-group:focus-within .group-focus-within\:htw-visible{
  visibility:visible
}

.htw-group:hover .group-hover\:htw-flex{
  display:flex
}

.htw-group:hover .group-hover\:htw-border-primary-500{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:hover .group-hover\:htw-bg-primary-100{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-100) / var(--tw-bg-opacity, 1))
}

.htw-group:hover .group-hover\:htw-opacity-100{
  opacity:1
}

.htw-group:hover .group-hover\:htw-opacity-90{
  opacity:0.9
}

.htw-group:active .group-active\:htw-bg-gray-500\/20{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.dark\:htw-divide-gray-750:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-750) / var(--tw-divide-opacity, 1))
}

.dark\:htw-divide-gray-800:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-divide-opacity, 1))
}

.dark\:htw-divide-gray-850:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-divide-opacity, 1))
}

.dark\:htw-border-gray-700\/30:is(.htw-dark *){
  border-color:rgb(var(--_histoire-color-gray-700) / 0.3)
}

.dark\:htw-border-gray-750:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-750) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-gray-800:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-gray-850:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-primary-900:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-900) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-white\/20:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.2)
}

.dark\:htw-border-white\/25:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.25)
}

.dark\:htw-border-white\/50:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.5)
}

.dark\:htw-bg-black:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-600:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-600) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-750:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-750) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-900:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-900) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-900\/80:is(.htw-dark *){
  background-color:rgb(var(--_histoire-color-gray-900) / 0.8)
}

.dark\:htw-bg-primary-400:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-400) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-600:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-600) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-800:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.dark\:htw-text-black:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.dark\:htw-text-gray-100:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-100) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-gray-300:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-300) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-primary-200:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-200) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-primary-400:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-white\/\[1\%\]:is(.htw-dark *){
  color:rgb(255 255 255 / 1%)
}

.dark\:focus-within\:htw-border-primary-500:focus-within:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.dark\:hover\:htw-border-primary-500:hover:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.dark\:hover\:htw-bg-gray-800:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-800) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-700:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-800:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-900:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-900) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-text-primary-400:hover:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.dark\:focus\:htw-border-primary-500:focus:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:nth-child(odd) .dark\:group-odd\:htw-bg-gray-750\/40:is(.htw-dark *){
  background-color:rgb(var(--_histoire-color-gray-750) / 0.4)
}

.htw-group:hover .group-hover\:dark\:htw-border-primary-500:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:hover .dark\:group-hover\:htw-bg-primary-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

@media (min-width: 640px){
  .sm\:htw-h-4{
    height:1rem
  }

  .sm\:htw-w-4{
    width:1rem
  }

  .sm\:htw-p-1{
    padding:0.25rem
  }

  .sm\:htw-py-4{
    padding-top:1rem;
    padding-bottom:1rem
  }
}

@media (min-width: 768px){
  .md\:htw-mx-auto{
    margin-left:auto;
    margin-right:auto
  }

  .md\:htw-mt-16{
    margin-top:4rem
  }

  .md\:htw-block{
    display:block
  }

  .md\:htw-max-w-\[600px\]{
    max-width:600px
  }

  .md\:htw-flex-col{
    flex-direction:column
  }

  .md\:htw-p-12{
    padding:3rem
  }

  .md\:htw-py-1\.5{
    padding-top:0.375rem;
    padding-bottom:0.375rem
  }
}

@media (min-width: 1024px){
  .lg\:htw-max-w-\[800px\]{
    max-width:800px
  }
}

@media (min-width: 1280px){
  .xl\:htw-max-w-\[900px\]{
    max-width:900px
  }
}

@media (max-width: 767px){
  .\!md\:htw-flex-col{
    flex-direction:column
  }
}

.histoire-story-list-folder-button:hover .\[\.histoire-story-list-folder-button\:hover_\&\]\:htw-opacity-100{
  opacity:1
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-tree-margin[data-v-64c2458f] {
  margin-left: var(--v2562213a);
}
.bind-icon-color[data-v-64c2458f] {
  color: var(--v1eff521f);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-tree-padding[data-v-ee932a0c] {
  padding-left: var(--v5352bb71);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-d15ecb89] {
  color: var(--a3f02f4e);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.landscape > div > .dragger[data-v-4f40a1bb] {
  width: .625rem;
}
.portrait > div > .dragger[data-v-4f40a1bb] {
  height: .625rem;
}
.landscape > div > .dragger.dragger-offset-before[data-v-4f40a1bb] {
  right: 0;
}
.portrait > div > .dragger.dragger-offset-before[data-v-4f40a1bb] {
  bottom: 0;
}
.landscape > div > .dragger.dragger-offset-center[data-v-4f40a1bb] {
  right: -.3125rem;
}
.portrait > div > .dragger.dragger-offset-center[data-v-4f40a1bb] {
  bottom: -.3125rem;
}
.landscape > div > .dragger.dragger-offset-after[data-v-4f40a1bb] {
  right: -.625rem;
}
.portrait > div > .dragger.dragger-offset-after[data-v-4f40a1bb] {
  bottom: -.625rem;
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.htw-base-empty[data-v-c5ecfead]:not(.no-animation) {
  animation: htw-base-empty-c5ecfead .15s .2s both;
}
@keyframes htw-base-empty-c5ecfead {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.__histoire-code-placeholder[data-v-96af7f40] {
  color: inherit;
  font-size: inherit;
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-preview-bg[data-v-c48fb2b2] {
  background-color: var(--v627bec82);
  color: var(--v35068428);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-feff9239] {
  color: var(--v60afaf4d);
}
.bind-preview-bg[data-v-feff9239] {
  background-color: var(--v3bd99e7e);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-1b279b85] {
  color: var(--ab2181a2);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.__histoire-hatched-pattern[data-v-91561117] {
  background: repeating-linear-gradient(135deg,
  transparent 0px,
  transparent 32px,
  currentColor 32px,
  currentColor 64px);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-preview-bg[data-v-18122333] {
  background-color: var(--v5f6f4ee9);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-c2a43485] {
  color: var(--v41c4d268);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-096f6d6e] {
  color: var(--v0f021d3c);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
img.colorize-black[data-v-2114f510] {
  filter: grayscale(100) brightness(0);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-9f94ad2b] {
  color: var(--v1f9aa6ca);
}
}
.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-d4369e5a] .cm-editor{height:100%;min-width:280px}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity, 1))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity, 1))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity, 1))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.htw-range-input:is(.htw-dark *)::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.htw-range-input:is(.htw-dark *)::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important}html,
body {
  background: transparent !important;
}body {
  margin: 0;
}html {
  font-size: 1rem;
  font-family: 'Noto Sans Display', system-ui, sans-serif;
}.htw-sandbox-hidden {
  display: none;
}.__histoire-render-story:not(.__histoire-render-custom-controls) {
  overflow: auto;
  min-height: 100%;
}
/* BookingDetails — a transparent booking layout: a wrapping row of date options above a Select.
   Tokens only; the 311/475 px are raw Figma constants (container min/max width, unbound). */
.booking-details[data-v-a5237ebc], .booking-details[data-v-a5237ebc] * {
    box-sizing: border-box;
}
.booking-details[data-v-a5237ebc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--btly-space-16);
    width: 100%;
    min-width: 311px;
    max-width: 475px;
}
.row[data-v-a5237ebc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--btly-space-8);
    width: 100%;
}
.btly-icon[data-v-8c9d50ed], .btly-icon[data-v-8c9d50ed] * {
  box-sizing: border-box;
}
.btly-icon[data-v-8c9d50ed] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--btly-icon-default);
}

/* Size the svg ourselves (1em) — no dependency on FontAwesome's global CSS. */
.btly-icon[data-v-8c9d50ed] svg {
  display: block;
  height: 1em;
  width: auto;
}
.btly-icon--xs[data-v-8c9d50ed] { width: var(--btly-space-16); height: var(--btly-space-16); font-size: 12px;
}
.btly-icon--sm[data-v-8c9d50ed] { width: var(--btly-space-20); height: var(--btly-space-20); font-size: 14px;
}
.btly-icon--md[data-v-8c9d50ed] { width: var(--btly-space-24); height: var(--btly-space-24); font-size: 16px;
}
.btly-icon--lg[data-v-8c9d50ed] { width: var(--btly-space-32); height: var(--btly-space-32); font-size: 20px;
}
.btly-icon--default[data-v-8c9d50ed] { color: var(--btly-icon-default);
}
.btly-icon--muted[data-v-8c9d50ed] { color: var(--btly-icon-muted);
}
.btly-icon--brand[data-v-8c9d50ed] { color: var(--btly-icon-brand);
}
.btly-icon--inverse[data-v-8c9d50ed] { color: var(--btly-icon-inverse);
}
.btly-icon--disabled[data-v-8c9d50ed] { color: var(--btly-icon-disabled);
}
.btly-icon--inherit[data-v-8c9d50ed] { color: inherit;
}
.btn[data-v-f8745e83], .btn[data-v-f8745e83] * {
    box-sizing: border-box;
}
.btn[data-v-f8745e83] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--btly-space-4);
    margin: 0;
    border: var(--btly-border-width-1-5) solid var(--btly-border-default);
    background: var(--btly-surface-card);
    appearance: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

/* 98/68 are raw Figma constants with no bound token (like ItemAnswerVertical's 165×88). */
.btn.vertical[data-v-f8745e83] {
    flex-direction: column;
    width: 98px;
    height: 68px;
    padding: var(--btly-space-12);
    border-radius: var(--btly-radius-16);
}

/* 153 is a raw Figma constant with no bound token. */
.btn.horizontal[data-v-f8745e83] {
    width: 153px;
    padding: var(--btly-space-16) var(--btly-space-12);
    border-radius: var(--btly-radius-12);
}
@media (hover: hover) {
.btn[data-v-f8745e83]:hover {
        background: var(--btly-surface-brand);
}
}
.btn[data-v-f8745e83]:active {
    background: var(--btly-surface-brand);
    border-color: var(--btly-border-brand);
}
.btn.selected[data-v-f8745e83] {
    background: var(--btly-surface-brand);
    border-color: var(--btly-border-brand);
    box-shadow: 0 0 0 2px var(--btly-border-focus-halo);
}
.btn[data-v-f8745e83]:focus-visible {
    outline: 2px solid transparent;
    border-color: var(--btly-border-brand);
    box-shadow: 0 0 0 2px var(--btly-border-focus-halo);
}

/* Placed last so it wins on equal specificity even while hovered/pressed. */
.btn.error[data-v-f8745e83],
.btn.error[data-v-f8745e83]:hover,
.btn.error[data-v-f8745e83]:active {
    background: var(--btly-base-white);
    border-color: var(--btly-status-error-accent);
    box-shadow: none;
}

/* Keep a visible (red) focus ring on error for keyboard a11y. */
.btn.error[data-v-f8745e83]:focus-visible {
    border-color: var(--btly-status-error-accent);
    box-shadow: 0 0 0 2px var(--btly-status-error-accent);
}
.title[data-v-f8745e83] {
    color: var(--btly-text-primary);
}
.meta[data-v-f8745e83] {
    display: inline-flex;
    align-items: center;
    gap: var(--btly-space-4);
}
.description[data-v-f8745e83] {
    color: var(--btly-text-tertiary);
}

/* ✓ — Icon uses color:inherit, so pin the exact Figma colour here. */
.check[data-v-f8745e83] {
    flex-shrink: 0;
    color: var(--btly-action-primary-default);
}

/* Horizontal: pin the ✓ to the top-right corner (absolute, out of flow) so it does not
   push or wrap the title + description. Figma node 14582-4965: icon left 134.5 / top 3.5
   in the 153px box → right 2.5. Vertical keeps the ✓ inline in the .meta row. */
.btn.horizontal .check[data-v-f8745e83] {
    position: absolute;
    top: 3.5px;
    right: 2.5px;
}
.btn[data-v-be89d63e], .btn[data-v-be89d63e] * {
    box-sizing: border-box;
}

/* font comes from the btly-text-title-s utility on the element itself — no `font: inherit` here
 * (the scoped rule would outweigh the global utility class). */
.btn[data-v-be89d63e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btly-space-2);
    /* Figma padding (asymmetric — tuned for the input's right slot): py-2, pr-6, pl-16. */
    padding: var(--btly-space-2) var(--btly-space-6) var(--btly-space-2) var(--btly-space-16);
    margin: 0;
    border: 0;
    appearance: none;
    /* invisible (transparent bg) — only shapes the focus ring */
    border-radius: var(--btly-radius-8);
    background: transparent;
    color: var(--btly-action-primary-default);
    cursor: pointer;
    white-space: nowrap;
}
@media (hover: hover) {
.btn[data-v-be89d63e]:not(:disabled):hover { color: var(--btly-action-primary-hover);
}
}

/* after the hover media query so it wins while pressing during hover */
.btn[data-v-be89d63e]:not(:disabled):active { color: var(--btly-action-primary-pressed);
}
.btn[data-v-be89d63e]:disabled {
    color: var(--btly-action-primary-disabled-text);
    cursor: not-allowed;
}
.btn[data-v-be89d63e]:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 2px var(--btly-border-focus-halo);
}
.dropdown-item[data-v-e18393c1], .dropdown-item[data-v-e18393c1] * {
    box-sizing: border-box;
}
.dropdown-item[data-v-e18393c1] {
    display: flex;
    align-items: flex-start;
    gap: var(--btly-space-4);
    width: 100%;
    min-height: var(--btly-space-40);
    margin: 0;
    padding: var(--btly-space-8);
    border: 0;
    border-radius: var(--btly-radius-8);
    background: transparent;
    appearance: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}
@media (hover: hover) {
.dropdown-item[data-v-e18393c1]:not(:disabled):hover { background: var(--btly-surface-tertiary);
}
    /* Selected stays brand on hover — Figma has no selected+hover variant (designer flag #5). */
.dropdown-item.selected[data-v-e18393c1]:hover { background: var(--btly-surface-brand);
}
}
.dropdown-item.selected[data-v-e18393c1] { background: var(--btly-surface-brand);
}
.dropdown-item[data-v-e18393c1]:disabled { cursor: not-allowed;
}

/* 24px icon boxes; colors follow the Figma per-state bindings. */
.checkbox[data-v-e18393c1],
.lead[data-v-e18393c1],
.trail[data-v-e18393c1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--btly-space-24);
    height: var(--btly-space-24);
}
.avatar[data-v-e18393c1] { flex-shrink: 0;
}
.checkbox[data-v-e18393c1] { color: var(--btly-icon-muted);
}
/* Figma binds the ACTION token on the checked glyph — followed literally. */
.dropdown-item.selected .checkbox[data-v-e18393c1] { color: var(--btly-action-primary-default);
}
.lead[data-v-e18393c1] { color: var(--btly-icon-default);
}
.dropdown-item.selected .lead[data-v-e18393c1] { color: var(--btly-icon-brand);
}
/* Figma binds the TEXT token on the disabled leading icon (designer flag #1) — followed literally. */
.dropdown-item:disabled .lead[data-v-e18393c1] { color: var(--btly-text-disabled);
}
.trail[data-v-e18393c1] { color: var(--btly-icon-brand);
}
.dropdown-item:disabled .trail[data-v-e18393c1] { color: var(--btly-icon-disabled);
}
.text[data-v-e18393c1] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--btly-space-2);
    min-width: 0;
    padding: var(--btly-space-2) 0;
}
.title[data-v-e18393c1] { color: var(--btly-text-secondary);
}
.dropdown-item:disabled .title[data-v-e18393c1] { color: var(--btly-text-disabled);
}
.desc[data-v-e18393c1] { color: var(--btly-text-tertiary);
}
.dropdown-item:disabled .desc[data-v-e18393c1] { color: var(--btly-text-disabled);
}
.dropdown-list[data-v-e0975fc1], .dropdown-list[data-v-e0975fc1] * {
    box-sizing: border-box;
}
.dropdown-list[data-v-e0975fc1] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-2);
    padding: var(--btly-space-4);
    border: var(--btly-border-width-1) solid var(--btly-border-default);
    border-radius: var(--btly-radius-8);
    background: var(--btly-surface-canvas);
    /* Figma "1dp shadow" effect style — effects are not in the token export (designer flagged). */
    box-shadow: 0 1px 2px 0 rgba(15, 23, 43, 0.05);
}
.title[data-v-e0975fc1] {
    display: flex;
    align-items: center;
    max-height: var(--btly-space-40);
    padding: var(--btly-space-12);
    color: var(--btly-text-secondary);
}
.list[data-v-e0975fc1] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-2);
    min-height: 0;
}

/* Scroll appears only when maxHeight caps the panel (set inline from the prop).
 * gray-200 has no semantic alias → brand token (the approved exception). */
.dropdown-list.scrollable .list[data-v-e0975fc1] {
    overflow-y: auto;
}

/* Standard scrollbar props DISABLE ::-webkit-scrollbar* in modern Chromium/Safari, so they
 * are scoped to engines without the webkit pseudo (Firefox) — each engine gets its 4px bar. */
@supports not selector(::-webkit-scrollbar) {
.dropdown-list.scrollable .list[data-v-e0975fc1] {
        scrollbar-width: thin;
        scrollbar-color: var(--btly-brand-gray-200) transparent;
}
}
.dropdown-list.scrollable .list[data-v-e0975fc1]::-webkit-scrollbar { width: var(--btly-space-4);
}
.dropdown-list.scrollable .list[data-v-e0975fc1]::-webkit-scrollbar-thumb {
    background: var(--btly-brand-gray-200);
    border-radius: var(--btly-radius-4);
}
.dropdown-list.scrollable .list[data-v-e0975fc1]::-webkit-scrollbar-track { background: transparent;
}
.select[data-v-9ed96492], .select[data-v-9ed96492] * {
    box-sizing: border-box;
}
.select[data-v-9ed96492] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-2);
    width: 100%;
}
.label-row[data-v-9ed96492] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--btly-space-8);
}
.label-row .label[data-v-9ed96492] { color: var(--btly-text-secondary);
}
.req[data-v-9ed96492] { color: var(--btly-text-brand);
}
.optional[data-v-9ed96492] { color: var(--btly-text-tertiary);
}
.field[data-v-9ed96492] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--btly-space-4);
    padding: var(--btly-space-10) var(--btly-space-8);
    /* Select's Figma resting border = border/strong (heavier than Input's border/default; spec §9). */
    border: var(--btly-border-width-1) solid var(--btly-border-strong);
    border-radius: var(--btly-radius-8);
    background: var(--btly-surface-canvas);
    box-shadow: 0 1px 2px 0 rgba(15, 23, 43, 0.05);
}
@media (hover: hover) {
.field[data-v-9ed96492]:hover { border-color: var(--btly-border-brand);
}
}
.field[data-v-9ed96492]:focus-within {
    border-color: var(--btly-border-brand);
    box-shadow: 0 0 0 2px var(--btly-border-focus-halo);
}
.trigger[data-v-9ed96492] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--btly-space-4);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--btly-text-primary);
}
.value[data-v-9ed96492] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--btly-text-primary);
}
.value.placeholder[data-v-9ed96492] { color: var(--btly-text-placeholder);
}
.lead[data-v-9ed96492],
.trail[data-v-9ed96492] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--btly-icon-muted);
}
.chevron[data-v-9ed96492] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--btly-icon-default);
    transition: transform 0.15s ease;
}
.select.open .chevron[data-v-9ed96492] { transform: rotate(180deg);
}
.action[data-v-9ed96492] { flex-shrink: 0;
}
.select.error .field[data-v-9ed96492] { border-color: var(--btly-status-error-accent);
}
.select.error .field[data-v-9ed96492]:focus-within { box-shadow: 0 0 0 2px var(--btly-status-error-accent);
}
.select.success .field[data-v-9ed96492] { border-color: var(--btly-status-success-accent);
}
.select.success .field[data-v-9ed96492]:focus-within { box-shadow: 0 0 0 2px var(--btly-status-success-accent);
}
.select.disabled .field[data-v-9ed96492] {
    background: var(--btly-surface-secondary);
    border-color: var(--btly-border-default);
    cursor: not-allowed;
}
.select.disabled .trigger[data-v-9ed96492] { cursor: not-allowed;
}
.select.disabled .value[data-v-9ed96492],
.select.disabled .value.placeholder[data-v-9ed96492] { color: var(--btly-text-disabled);
}
.select.disabled .lead[data-v-9ed96492],
.select.disabled .trail[data-v-9ed96492],
.select.disabled .chevron[data-v-9ed96492] { color: var(--btly-icon-disabled);
}
.select.disabled .label-row .label[data-v-9ed96492] { color: var(--btly-text-tertiary);
}
.select.disabled .req[data-v-9ed96492],
.select.disabled .optional[data-v-9ed96492] { color: var(--btly-text-disabled);
}

/* <p> carries a UA margin-block:1em — reset it; the field→description spacing is the root gap only. */
.description[data-v-9ed96492] { margin: 0; color: var(--btly-text-tertiary);
}
.description.is-error[data-v-9ed96492] { color: var(--btly-status-error-text);
}

/* Positioning only — the visual panel is the DS DropdownList inside. */
.panel[data-v-9ed96492] {
    position: absolute;
    top: calc(100% + var(--btly-space-4));
    left: 0;
    right: 0;
    z-index: 10;
}

.gallery-frame[data-v-f96c7b94] {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  padding: 24px;
  /* #9747FF is Figma's master-component frame colour — intentionally a raw hex,
     not a DS token: this is a dev-only playground affordance, never shipped UI. */
  border: 1px dashed #9747ff;
  border-radius: 4px;
  background: transparent;
}

.pg[data-v-e69afe85] {
  width: 475px;
}
.btn-wrap[data-v-30f1a192], .btn-wrap[data-v-30f1a192] * {
    box-sizing: border-box;
}
.btn-wrap[data-v-30f1a192] {
    display: contents;
}
.btn-wrap.has-caption[data-v-30f1a192] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--btly-space-8);
}
.caption[data-v-30f1a192] {
    color: var(--btly-text-tertiary);
    text-align: center;
}

/* UA <button> reset remainder (padding/background/color come from the always-present sz- and view- rules). */
.btn[data-v-30f1a192] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btly-space-2);
    margin: 0;
    border: var(--btly-border-width-1) solid transparent;
    appearance: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.btn[data-v-30f1a192]:disabled {
    cursor: not-allowed;
}
.btn[data-v-30f1a192]:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 2px var(--btly-border-focus-halo);
}
.label[data-v-30f1a192] {
    padding: 0 var(--btly-space-2);
    white-space: nowrap;
}
.ico[data-v-30f1a192] {
    display: inline-flex;
    flex-shrink: 0;
}
.btn.sz-lg[data-v-30f1a192] { height: 56px; padding: 0 var(--btly-space-24); border-radius: var(--btly-radius-16);
}
.btn.sz-md[data-v-30f1a192] { height: 48px; padding: 0 var(--btly-space-24); border-radius: var(--btly-radius-12);
}
.btn.sz-sm[data-v-30f1a192] { height: 44px; padding: 0 var(--btly-space-16); border-radius: var(--btly-radius-12);
}
.btn.sz-xs[data-v-30f1a192] { height: 24px; padding: 0; border-radius: var(--btly-radius-8);
}
.btn.icon-only[data-v-30f1a192] { padding: 0;
}
.btn.icon-only.sz-lg[data-v-30f1a192] { width: 56px;
}
.btn.icon-only.sz-md[data-v-30f1a192] { width: 48px;
}
.btn.icon-only.sz-sm[data-v-30f1a192] { width: 44px;
}
.btn.icon-only.sz-xs[data-v-30f1a192] { width: 24px;
}
.btn.view-primary[data-v-30f1a192] { background: var(--btly-action-primary-default); color: var(--btly-text-inverse);
}
.btn.view-accent[data-v-30f1a192] { background: var(--btly-action-accent-default); color: var(--btly-text-primary);
}
.btn.view-destructive[data-v-30f1a192] { background: var(--btly-action-destructive-default); color: var(--btly-text-inverse);
}
.btn.view-secondary[data-v-30f1a192] {
    background: var(--btly-surface-canvas);
    color: var(--btly-action-secondary-default);
    border-color: var(--btly-border-strong);
}
.btn.view-tertiary[data-v-30f1a192] { background: transparent; color: var(--btly-action-tertiary-default);
}
.btn.view-tertiary-accent[data-v-30f1a192] { background: transparent; color: var(--btly-action-primary-default);
}
@media (hover: hover) {
.btn.view-primary[data-v-30f1a192]:not(:disabled):hover { background: var(--btly-action-primary-hover);
}
.btn.view-accent[data-v-30f1a192]:not(:disabled):hover { background: var(--btly-action-accent-hover);
}
.btn.view-destructive[data-v-30f1a192]:not(:disabled):hover { background: var(--btly-action-destructive-hover);
}
.btn.view-secondary[data-v-30f1a192]:not(:disabled):hover {
        background: var(--btly-surface-secondary);
        color: var(--btly-action-secondary-hover);
}
.btn.view-tertiary[data-v-30f1a192]:not(:disabled):hover {
        background: var(--btly-surface-tertiary);
        color: var(--btly-action-tertiary-hover);
}
.btn.view-tertiary-accent[data-v-30f1a192]:not(:disabled):hover {
        background: var(--btly-surface-brand);
        color: var(--btly-action-primary-hover);
}
}

/* Pressed rules come after the hover media query so they win while pressing during hover. */
.btn.view-primary[data-v-30f1a192]:not(:disabled):active { background: var(--btly-action-primary-pressed);
}
.btn.view-accent[data-v-30f1a192]:not(:disabled):active { background: var(--btly-action-accent-pressed);
}
.btn.view-destructive[data-v-30f1a192]:not(:disabled):active { background: var(--btly-action-destructive-pressed);
}
.btn.view-secondary[data-v-30f1a192]:not(:disabled):active {
    background: var(--btly-surface-secondary);
    color: var(--btly-action-secondary-pressed);
}
.btn.view-tertiary[data-v-30f1a192]:not(:disabled):active {
    background: var(--btly-surface-tertiary);
    color: var(--btly-action-tertiary-pressed);
}
.btn.view-tertiary-accent[data-v-30f1a192]:not(:disabled):active {
    background: var(--btly-surface-brand);
    color: var(--btly-action-primary-pressed);
}
.btn.view-primary[data-v-30f1a192]:disabled { background: var(--btly-action-primary-disabled); color: var(--btly-action-primary-disabled-text);
}
.btn.view-accent[data-v-30f1a192]:disabled { background: var(--btly-action-accent-disabled); color: var(--btly-action-accent-disabled-text);
}
.btn.view-destructive[data-v-30f1a192]:disabled { background: var(--btly-action-destructive-disabled); color: var(--btly-action-destructive-disabled-text);
}
.btn.view-secondary[data-v-30f1a192]:disabled {
    background: var(--btly-surface-canvas);
    color: var(--btly-action-secondary-disabled-text);
    border-color: var(--btly-border-default);
}
.btn.view-tertiary[data-v-30f1a192]:disabled { background: transparent; color: var(--btly-action-tertiary-disabled-text);
}
.btn.view-tertiary-accent[data-v-30f1a192]:disabled { background: transparent; color: var(--btly-action-primary-disabled-text);
}

.stack[data-v-7085750c] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
}
.row[data-v-7085750c] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.col[data-v-452b546c] {
  display: flex;
  gap: 24px;
}
.cell[data-v-452b546c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-452b546c] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}

.cell[data-v-a3b86901] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.cap[data-v-a3b86901] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.btn[data-v-0f578b5f], .btn[data-v-0f578b5f] * {
    box-sizing: border-box;
}
.btn[data-v-0f578b5f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    gap: var(--btly-space-12);
    padding: var(--btly-space-12) var(--btly-space-24);
    border: var(--btly-border-width-1) solid var(--btly-border-default);
    appearance: none;
    font: inherit;
    border-radius: var(--btly-radius-12);
    background: var(--btly-surface-card);
    color: var(--btly-action-secondary-default);
    /* Raw shadow value — the DS has no shadow token, so this (geometry + colour) is unavoidable. */
    box-shadow: 0 1px 4px 0 rgba(28, 44, 120, 0.06);
    cursor: pointer;
}

/* hover-capable pointers only — on touch, :hover would stick after a tap */
@media (hover: hover) {
.btn[data-v-0f578b5f]:hover {
        background: var(--btly-surface-brand);
        border-color: var(--btly-border-brand);
        color: var(--btly-action-primary-hover);
}
}
.btn[data-v-0f578b5f]:active {
    background: var(--btly-surface-brand);
    border-color: var(--btly-border-brand);
    color: var(--btly-action-primary-pressed);
}

/* No Focus state in Figma yet — system focus-halo ring meanwhile, keeping the 1dp elevation.
 * Transparent outline (not none) so it still renders in forced-colors mode. */
.btn[data-v-0f578b5f]:focus-visible {
    outline: 2px solid transparent;
    border-color: var(--btly-border-brand);
    box-shadow:
        0 1px 4px 0 rgba(28, 44, 120, 0.06),
        0 0 0 2px var(--btly-border-focus-halo);
}
.logo[data-v-0f578b5f] {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--btly-space-24);
    height: var(--btly-space-24);
}
.logo[data-v-0f578b5f] svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Playground: the button at its natural width, unframed (per the gallery-frame convention). */
.pg[data-v-54354416] {
  width: 400px;
}
/* height 4px + width 100% are component constants (Figma space/4 height; the 343px in
 * Figma is only the artboard width — the bar stretches to its container). */
.progress[data-v-a517b947], .progress[data-v-a517b947] * {
    box-sizing: border-box;
}
.progress[data-v-a517b947] {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: var(--btly-radius-4);
    overflow: hidden;
    background: var(--btly-surface-tertiary);
}

/* Fill width is set inline from the clamped value. Brand token (no semantic exists for
 * this progress purple — maintainer-approved exception, see spec §5). */
.fill[data-v-a517b947] {
    height: 100%;
    border-radius: var(--btly-radius-4);
    background: var(--btly-brand-ultraviolet-400);
}
.cpb[data-v-af1445e8], .cpb[data-v-af1445e8] * {
    box-sizing: border-box;
}
.cpb[data-v-af1445e8] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-4);
    width: 100%;
}

/* Completed has no bar — a bottom hairline replaces it; padding gives the line room. */
.cpb.completed[data-v-af1445e8] {
    padding-bottom: var(--btly-space-8);
    border-bottom: var(--btly-border-width-1-5) solid var(--btly-border-default);
}
.title[data-v-af1445e8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--btly-space-8);
}
.label[data-v-af1445e8] {
    color: var(--btly-text-primary);
}
.value[data-v-af1445e8] {
    flex-shrink: 0;
    color: var(--btly-text-tertiary);
}

/* Icon uses color="inherit" and picks up this success color. */
.check[data-v-af1445e8] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--btly-status-success-accent);
}

.cell[data-v-d8a03ecf] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-d8a03ecf] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}

/* Playground: give the (unframed) full-width bar a demo width. */
.pg[data-v-d8a03ecf] {
  width: 372px;
}
.link[data-v-02a27411], .link[data-v-02a27411] * {
    box-sizing: border-box;
}
.link[data-v-02a27411] {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
    cursor: pointer;
}
.link[data-v-02a27411]:focus-visible {
    outline: 2px solid var(--btly-border-focus-halo);
    outline-offset: 2px;
    border-radius: 2px;
}
.link.p-default[data-v-02a27411] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.link.p-default.sz-sm[data-v-02a27411] { padding: var(--btly-space-12);
}
.link.p-default.sz-lg[data-v-02a27411] { padding: var(--btly-space-12) var(--btly-space-16);
}
.link.c-secondary[data-v-02a27411] { color: var(--btly-action-tertiary-default);
}
.link.c-primary[data-v-02a27411] { color: var(--btly-action-primary-default);
}
.link.c-inverse[data-v-02a27411] { color: var(--btly-text-inverse);
}
@media (hover: hover) {
.link.c-secondary[data-v-02a27411]:not(.is-disabled):hover { color: var(--btly-action-tertiary-hover);
}
.link.c-primary[data-v-02a27411]:not(.is-disabled):hover { color: var(--btly-action-primary-hover);
}
.link.c-inverse[data-v-02a27411]:not(.is-disabled):hover { color: var(--btly-brand-gray-100);
}
}

/* Pressed rules come after the hover media query so they win while pressing during hover. */
.link.c-secondary[data-v-02a27411]:not(.is-disabled):active { color: var(--btly-action-tertiary-pressed);
}
.link.c-primary[data-v-02a27411]:not(.is-disabled):active { color: var(--btly-action-primary-pressed);
}
.link.c-inverse[data-v-02a27411]:not(.is-disabled):active { color: var(--btly-brand-gray-200);
}

/* Shared for all colors; last so it wins over the color rules. */
.link.is-disabled[data-v-02a27411] {
    color: var(--btly-text-disabled);
    pointer-events: none;
    cursor: default;
}
/* min-width 343px is a raw component constant — unbound in Figma, off the space scale. */
.card-booking-details[data-v-2ff845e2], .card-booking-details[data-v-2ff845e2] * {
    box-sizing: border-box;
}
.card-booking-details[data-v-2ff845e2] {
    display: flex;
    flex-direction: column;
    min-width: 343px;
    padding: var(--btly-space-4);
    border-radius: var(--btly-radius-16);
}
.card-booking-details.math[data-v-2ff845e2] { background: var(--btly-discipline-math-surface-strong);
}
/* Figma prop value "reading" ↔ token axis "ela" (designer flag #2) — followed literally. */
.card-booking-details.reading[data-v-2ff845e2] { background: var(--btly-discipline-ela-surface-strong);
}

/* Rendered as <button> when interactive — carry the full UA button reset either way. */
.header[data-v-2ff845e2] {
    display: flex;
    align-items: center;
    gap: var(--btly-space-4);
    width: 100%;
    margin: 0;
    padding: var(--btly-space-12);
    border: 0;
    background: transparent;
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
}
button.header[data-v-2ff845e2] { cursor: pointer;
}
.head-icon[data-v-2ff845e2] {
    display: inline-flex;
    flex-shrink: 0;
}
.card-booking-details.math .head-icon[data-v-2ff845e2] { color: var(--btly-discipline-math-accent);
}
.card-booking-details.reading .head-icon[data-v-2ff845e2] { color: var(--btly-discipline-ela-accent);
}
.title[data-v-2ff845e2] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--btly-text-primary);
}
.trail-icon[data-v-2ff845e2] {
    display: inline-flex;
    flex-shrink: 0;
}
/* plus (collapsed) uses the action token; chevron uses icon-default (Figma binds a stale raw
 * $slate-500 here — outside the token system; designer flag #1). */
.card-booking-details.collapsed .trail-icon[data-v-2ff845e2] { color: var(--btly-action-primary-default);
}
.card-booking-details:not(.collapsed) .trail-icon[data-v-2ff845e2] { color: var(--btly-icon-default);
}
.content[data-v-2ff845e2] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-8);
    width: 100%;
    padding: var(--btly-space-12);
    border-radius: var(--btly-radius-16);
    background: var(--btly-surface-card);
}

.cell[data-v-f53ebde5] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-f53ebde5] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.pg[data-v-f53ebde5] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 343px;
}
/* 20×20 is a raw component constant — unbound in Figma, not on the space scale (like TutorAvatar's 42). */
.card-review-avatar[data-v-4922d5ee], .card-review-avatar[data-v-4922d5ee] * {
    box-sizing: border-box;
}
.card-review-avatar[data-v-4922d5ee] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: var(--btly-radius-full);
}
.initial[data-v-4922d5ee] {
    color: var(--btly-text-primary);
}
.photo[data-v-4922d5ee] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The common slot usage is a bare <img> — same fill/cover treatment. */
.card-review-avatar img[data-v-4922d5ee-s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Background tint per hue (brand palette — decorative surface). */
.card-review-avatar.is-pink[data-v-4922d5ee] { background: var(--btly-brand-pink-200);
}
.card-review-avatar.is-sky[data-v-4922d5ee] { background: var(--btly-brand-sky-200);
}
.card-review-avatar.is-green[data-v-4922d5ee] { background: var(--btly-brand-green-200);
}
.card-review-avatar.is-sunshine[data-v-4922d5ee] { background: var(--btly-brand-sunshine-200);
}
.card-review-avatar.is-orange[data-v-4922d5ee] { background: var(--btly-brand-orange-200);
}
.card-review-avatar.is-ultraviolet[data-v-4922d5ee] { background: var(--btly-brand-ultraviolet-200);
}
.card-review-avatar.is-gray[data-v-4922d5ee] { background: var(--btly-brand-gray-200);
}
/* 16×16 brand-green square with a centered white IconStar. */
.tp-star[data-v-e0eab306], .tp-star[data-v-e0eab306] * {
    box-sizing: border-box;
}
.tp-star[data-v-e0eab306] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btly-space-16);
    height: var(--btly-space-16);
    background: var(--btly-brand-green-500-primary);
}

/* Half: left 50% green (filled), right 50% gray (empty). The star stays fully white on top.
 * Brand tokens — no appropriate semantic exists for this decorative fill (see spec §5). */
.tp-star.is-half[data-v-e0eab306] {
    background: linear-gradient(
        to right,
        var(--btly-brand-green-500-primary) 50%,
        var(--btly-brand-gray-200) 50%
    );
}
.tp-star.is-sharp[data-v-e0eab306] {
    border-radius: var(--btly-radius-0);
}
.tp-star.is-rounded[data-v-e0eab306] {
    border-radius: var(--btly-radius-4);
}
/* TrustpilotRating — a hugging row of five TrustpilotStars. Tokens only. */
.tp-rating[data-v-5bac3fa1], .tp-rating[data-v-5bac3fa1] * {
    box-sizing: border-box;
}
.tp-rating[data-v-5bac3fa1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btly-space-2);
}
/* CardReview — a fixed-size testimonial card (311x190 are raw Figma constants). Tokens only. */
.card-review[data-v-0d769d01], .card-review[data-v-0d769d01] * {
    box-sizing: border-box;
}
.card-review[data-v-0d769d01] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 311px;
    height: 190px;
    background: var(--btly-surface-card);
    border: var(--btly-border-width-1) solid var(--btly-border-default);
    border-radius: var(--btly-radius-16);
    overflow: hidden;
}
.header[data-v-0d769d01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--btly-space-8);
    width: 100%;
    padding: var(--btly-space-12) var(--btly-space-16) var(--btly-space-8);
}
.user[data-v-0d769d01] {
    display: flex;
    align-items: center;
    gap: var(--btly-space-4);
    min-width: 0;
}
.name-loc[data-v-0d769d01] {
    display: flex;
    align-items: center;
    gap: var(--btly-space-8);
    min-width: 0;
}
.name[data-v-0d769d01] {
    overflow: hidden;
    color: var(--btly-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.country[data-v-0d769d01] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--btly-space-2);
    color: var(--btly-text-tertiary);
    white-space: nowrap;
}
.body[data-v-0d769d01] {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--btly-space-4);
    width: 100%;
    padding: var(--btly-space-8) var(--btly-space-16) var(--btly-space-16);
}
/* Both are <p>s carrying a UA margin-block:1em — reset it; title→description spacing is the .body gap only. */
.title[data-v-0d769d01] {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--btly-text-primary);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.description[data-v-0d769d01] {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    color: var(--btly-text-tertiary);
}

.rows[data-v-648c6c9e] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.row[data-v-bf0f290d] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cell[data-v-bf0f290d] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.cap[data-v-bf0f290d] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
/* Box: 24px (md) / 20px (sm); 16px glyph; 24px hover/focus halo — Figma raw values.
 * `size` changes only the box/tap area, not the glyph (Figma glyph is 16px for both). */
.btly-checkbox[data-v-ed135165], .btly-checkbox[data-v-ed135165] * {
  box-sizing: border-box;
}
.btly-checkbox[data-v-ed135165] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btly-checkbox.sz-md[data-v-ed135165] {
  width: 24px;
  height: 24px;
}
.btly-checkbox.sz-sm[data-v-ed135165] {
  width: 20px;
  height: 20px;
}
.native[data-v-ed135165] {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.native[data-v-ed135165]:disabled {
  cursor: not-allowed;
}
.box[data-v-ed135165] {
  position: relative; /* paints above the hover halo without needing z-index */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--btly-icon-muted);
  pointer-events: none;
}
.box[data-v-ed135165] svg {
  display: block;
  height: 1em;
  width: auto;
}
.btly-checkbox.is-checked .box[data-v-ed135165] {
  color: var(--btly-action-primary-default);
}
.btly-checkbox[data-v-ed135165]::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--btly-surface-brand);
  opacity: 0;
}
.btly-checkbox[data-v-ed135165]:not(.is-disabled):has(.native:focus-visible)::before {
  opacity: 1;
}
@media (hover: hover) {
.btly-checkbox[data-v-ed135165]:not(.is-disabled):hover::before {
    opacity: 1;
}
.btly-checkbox:not(.is-disabled).is-checked:hover .box[data-v-ed135165] {
    color: var(--btly-action-primary-hover);
}
}
.btly-checkbox.is-disabled .box[data-v-ed135165] {
  color: var(--btly-action-tertiary-disabled);
}
.btly-checkbox.is-disabled.is-checked .box[data-v-ed135165] {
  color: var(--btly-action-secondary-disabled);
}

/* Gallery = static, non-interactive samples (no toggling). */
.grid[data-v-a392c9ab] {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  pointer-events: none;
}
.cell[data-v-a392c9ab] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.row[data-v-a392c9ab] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cap[data-v-a392c9ab] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.counter[data-v-2b70aaf0], .counter[data-v-2b70aaf0] * {
    box-sizing: border-box;
}
.counter[data-v-2b70aaf0] {
    white-space: nowrap;
}
.current[data-v-2b70aaf0] {
    color: var(--btly-text-brand);
}
.rest[data-v-2b70aaf0] {
    color: var(--btly-text-tertiary);
}

.cell[data-v-4bbe712e] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-4bbe712e] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}

.cell[data-v-5e9c77af] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-5e9c77af] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.pg[data-v-5e9c77af] {
  width: 272px;
}
.demo-avatar[data-v-5e9c77af] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--btly-brand-pink-500-primary);
  color: var(--btly-text-inverse);
}

.cell[data-v-a6bc096e] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-a6bc096e] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.pg[data-v-a6bc096e] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 280px;
}
.input[data-v-41dabd09], .input[data-v-41dabd09] * {
    box-sizing: border-box;
}
.input[data-v-41dabd09] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-2);
    width: 100%;
}
.label-row[data-v-41dabd09] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--btly-space-8);
}
.label-row label[data-v-41dabd09] { color: var(--btly-text-secondary);
}
.req[data-v-41dabd09] { margin-left: var(--btly-space-2); color: var(--btly-text-brand);
}
.optional[data-v-41dabd09] { color: var(--btly-text-tertiary);
}
.field[data-v-41dabd09] {
    display: flex;
    align-items: center;
    /* Asymmetric padding (py space-10, px space-8) confirmed against Figma — not a mistake. */
    gap: var(--btly-space-4);
    padding: var(--btly-space-10) var(--btly-space-8);
    border: var(--btly-border-width-1) solid var(--btly-border-strong);
    border-radius: var(--btly-radius-8);
    background: var(--btly-surface-canvas);
    /* Figma "1dp shadow" effect style — effects are not in the token export (designer flagged). */
    box-shadow: 0 1px 2px 0 rgba(15, 23, 43, 0.05);
}
@media (hover: hover) {
.field[data-v-41dabd09]:hover { border-color: var(--btly-border-brand);
}
}
.field[data-v-41dabd09]:focus-within {
    border-color: var(--btly-border-brand);
    box-shadow: 0 0 0 2px var(--btly-border-focus-halo);
}
.field input[data-v-41dabd09] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--btly-text-primary);
}
.field input[data-v-41dabd09]::placeholder { color: var(--btly-text-placeholder);
}
.lead[data-v-41dabd09],
.trail[data-v-41dabd09] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--btly-icon-muted);
}
.action[data-v-41dabd09] { flex-shrink: 0;
}

/* Status rules override the hover/focus border colour above. */
.input.error .field[data-v-41dabd09] { border-color: var(--btly-status-error-accent);
}
.input.error .field[data-v-41dabd09]:focus-within { box-shadow: 0 0 0 2px var(--btly-status-error-accent);
}
.input.success .field[data-v-41dabd09] { border-color: var(--btly-status-success-accent);
}
.input.success .field[data-v-41dabd09]:focus-within { box-shadow: 0 0 0 2px var(--btly-status-success-accent);
}
.input.disabled .field[data-v-41dabd09] {
    background: var(--btly-surface-secondary);
    border-color: var(--btly-border-default);
    cursor: not-allowed;
}
.input.disabled .field input[data-v-41dabd09] { color: var(--btly-text-disabled); cursor: not-allowed;
}
.input.disabled .lead[data-v-41dabd09],
.input.disabled .trail[data-v-41dabd09] { color: var(--btly-icon-disabled);
}
.input.disabled .label-row label[data-v-41dabd09] { color: var(--btly-text-tertiary);
}
.input.disabled .optional[data-v-41dabd09] { color: var(--btly-text-disabled);
}
/* Safety net: even if the consumer ignores the #action slot's `disabled` prop, clicks are blocked. */
.input.disabled .action[data-v-41dabd09] { pointer-events: none;
}

/* <p> carries a UA margin-block:1em — reset it; the field→description spacing is the root gap only. */
.description[data-v-41dabd09] { margin: 0; color: var(--btly-text-tertiary);
}
.description.is-error[data-v-41dabd09] { color: var(--btly-status-error-text);
}
/* FormAuthSocial — social + email sign-up section. Nested layout (Figma node 14547-4892):
   alternative-login{buttons,divider} + input-caption{Input,caption}. Tokens only. */
.form-auth-social[data-v-6e26b253], .form-auth-social[data-v-6e26b253] * {
    box-sizing: border-box;
}
.form-auth-social[data-v-6e26b253] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--btly-space-16);
    width: 100%;
}
.alternative-login[data-v-6e26b253] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--btly-space-16);
    width: 100%;
}
.buttons[data-v-6e26b253] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-12);
    width: 100%;
}
.divider[data-v-6e26b253] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--btly-space-8);
    width: 100%;
}
.line[data-v-6e26b253] {
    flex: 1 0 0;
    min-width: 1px;
    height: var(--btly-border-width-1);
    background: var(--btly-border-default);
}
.or[data-v-6e26b253] {
    color: var(--btly-text-tertiary);
}
.input-caption[data-v-6e26b253] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--btly-space-12);
    width: 100%;
}
/* <p> carries a UA margin-block:1em — reset it; Input→caption spacing is the .input-caption gap only. */
.caption[data-v-6e26b253] {
    display: flex;
    align-items: flex-start;
    gap: var(--btly-space-8);
    margin: 0;
    color: var(--btly-text-tertiary);
    width: 100%;
}
.lock[data-v-6e26b253] {
    flex-shrink: 0;
}

.pg[data-v-3c0ff9bf] {
  width: 343px;
}
.evt[data-v-3c0ff9bf] {
  margin-top: 16px;
  color: #737373;
  font-size: 12px;
}
/* FormBookingDetails — a transparent booking form: a BookingDetails above two stacked CTAs.
   Fluid width; 475px is a raw Figma constant (max width). Tokens only. */
.form-booking-details[data-v-3a942281], .form-booking-details[data-v-3a942281] * {
    box-sizing: border-box;
}
.form-booking-details[data-v-3a942281] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--btly-space-16);
    width: 100%;
    max-width: 475px;
}
.actions[data-v-3a942281] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-8);
    width: 100%;
}

/* The composed Buttons fill the row. Button's .btn-wrap is `display: contents`, so its inner
   `.btn` is a direct flex child of .actions — width:100% stretches it full-width. */
.actions[data-v-3a942281] .btn {
    width: 100%;
}

.pg[data-v-334e3fc0] {
  width: 475px;
}
.evt[data-v-334e3fc0] {
  margin-top: 16px;
  color: #737373;
  font-size: 12px;
}

.matrix[data-v-4018ff29] {
  display: grid;
  grid-template-columns: repeat(4, 56px);
  grid-auto-rows: 48px;
  align-items: center;
  justify-items: center;
  gap: 12px;
}
.axis[data-v-4018ff29] {
  display: grid;
  grid-template-columns: repeat(4, 56px);
  gap: 12px;
  justify-items: center;
}
.lbl[data-v-4018ff29] {
  font-size: 11px;
  color: var(--btly-text-tertiary);
}
.extra[data-v-4018ff29] {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}
.cell[data-v-4018ff29] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.row[data-v-4018ff29] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cap[data-v-4018ff29] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}

.cell[data-v-dd8309a0] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-dd8309a0] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.pg[data-v-dd8309a0] {
  width: 360px;
}
.input-otp[data-v-786d8f87], .input-otp[data-v-786d8f87] * {
    box-sizing: border-box;
}
.input-otp[data-v-786d8f87] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-2);
    width: 100%;
}

/* The box styles live on the <input> itself — no .field wrapper (no icons/slots). The scoped
 * element selector outweighs the global .btly-text-heading-s class, so the letter-spacing
 * below wins over the text style's 0 (Figma: 4px gap between the digit glyphs). */
.input-otp input[data-v-786d8f87] {
    width: 100%;
    margin: 0;
    padding: var(--btly-space-12);
    border: var(--btly-border-width-1) solid var(--btly-border-strong);
    border-radius: var(--btly-radius-12);
    background: var(--btly-surface-canvas);
    /* Figma "1dp shadow" effect style — effects are not in the token export (designer flagged). */
    box-shadow: 0 1px 2px 0 rgba(15, 23, 43, 0.05);
    color: var(--btly-text-primary);
    text-align: center;
    letter-spacing: var(--btly-space-4);
    outline: 0;
}
.input-otp input[data-v-786d8f87]::placeholder { color: var(--btly-text-placeholder);
}
@media (hover: hover) {
.input-otp input[data-v-786d8f87]:hover { border-color: var(--btly-border-brand);
}
}
.input-otp input[data-v-786d8f87]:focus {
    border-color: var(--btly-border-brand);
    box-shadow: 0 0 0 2px var(--btly-border-focus-halo);
}

/* Status rules override the hover/focus border colour above. */
.input-otp.error input[data-v-786d8f87] { border-color: var(--btly-status-error-accent);
}
.input-otp.error input[data-v-786d8f87]:focus { box-shadow: 0 0 0 2px var(--btly-status-error-accent);
}
.input-otp.success input[data-v-786d8f87] { border-color: var(--btly-status-success-accent);
}
.input-otp.success input[data-v-786d8f87]:focus { box-shadow: 0 0 0 2px var(--btly-status-success-accent);
}
.input-otp.disabled input[data-v-786d8f87] {
    background: var(--btly-surface-secondary);
    border-color: var(--btly-border-default);
    color: var(--btly-text-disabled);
    cursor: not-allowed;
}

/* <p> carries a UA margin-block:1em — reset it; the field→description spacing is the root gap only. */
.description[data-v-786d8f87] { margin: 0; color: var(--btly-text-tertiary);
}
.description.is-error[data-v-786d8f87] { color: var(--btly-status-error-text);
}

.cell[data-v-9a4af4d5] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-9a4af4d5] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.pg[data-v-9a4af4d5] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 260px;
}
.item[data-v-a4eaed5a], .item[data-v-a4eaed5a] * {
    box-sizing: border-box;
}
.item[data-v-a4eaed5a] {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    gap: var(--btly-space-12);
    padding: var(--btly-space-20) var(--btly-space-16);
    border: var(--btly-border-width-1-5) solid var(--btly-border-default);
    border-radius: var(--btly-radius-16);
    background: var(--btly-base-white);
    appearance: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
}
@media (hover: hover) {
.item[data-v-a4eaed5a]:hover {
        background: var(--btly-surface-brand);
}
}
.item[data-v-a4eaed5a]:active,
.item.selected[data-v-a4eaed5a] {
    background: var(--btly-surface-brand);
    border-color: var(--btly-border-brand);
}
.item[data-v-a4eaed5a]:active {
    box-shadow: 0 0 0 2px var(--btly-border-focus-halo);
}
.item.selected[data-v-a4eaed5a] {
    box-shadow:
            0 0 0 2px var(--btly-border-focus-halo),
            0 0 8px 0 var(--btly-border-focus-halo);
}
.item[data-v-a4eaed5a]:focus-visible {
    outline: 2px solid transparent;
    border-color: var(--btly-border-brand);
    box-shadow: 0 0 0 2px var(--btly-border-focus-halo);
}
.item.selected[data-v-a4eaed5a]:focus-visible {
    box-shadow:
            0 0 0 2px var(--btly-border-focus-halo),
            0 0 8px 0 var(--btly-border-focus-halo);
}
.slot-box[data-v-a4eaed5a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--btly-space-24);
    height: var(--btly-space-24);
}
.emoji[data-v-a4eaed5a] {
    flex-shrink: 0;
    color: var(--btly-base-black);
    white-space: nowrap;
}
.text[data-v-a4eaed5a] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-2);
    flex: 1 0 0;
    min-width: 1px;
}
.title[data-v-a4eaed5a] {
    color: var(--btly-text-primary);
}
.description[data-v-a4eaed5a] {
    color: var(--btly-text-tertiary);
}
.check[data-v-a4eaed5a] {
    font-size: 16px;
    color: var(--btly-action-primary-default);
    opacity: 0;
}
.item:active .check[data-v-a4eaed5a],
.item.selected .check[data-v-a4eaed5a] {
    opacity: 1;
}

/* Flex-wrap grid: ~2 cards per row (capped via max-width), wrapping to 1 on a
 * narrow pane. The frame's padding gives the selected/pressed focus-halo shadow
 * room so it isn't clipped. */
.gallery[data-v-2055417e] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 760px;
}
.cell[data-v-2055417e] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 360px;
}
.cap[data-v-2055417e] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
/* width:165px / height:88px are raw Figma values with no bound token (component
 * constants, like the Checkbox's 20px box). */
.item[data-v-00f4278d], .item[data-v-00f4278d] * {
    box-sizing: border-box;
}
.item[data-v-00f4278d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 165px;
    min-height: 72px;
    margin: 0;
    gap: var(--btly-space-8);
    padding: var(--btly-space-16);
    border: var(--btly-border-width-1-5) solid var(--btly-border-default);
    border-radius: var(--btly-radius-20);
    background: var(--btly-base-white);
    appearance: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
}
@media (hover: hover) {
.item[data-v-00f4278d]:hover {
        background: var(--btly-surface-brand);
}
}

/* :active and .selected share styling — matches the Figma Pressed/Selected variants. */
.item[data-v-00f4278d]:active,
.item.selected[data-v-00f4278d] {
    background: var(--btly-surface-brand);
    border-color: var(--btly-border-brand);
    box-shadow:
            0 0 0 2px var(--btly-border-focus-halo),
            0 0 8px 0 var(--btly-border-focus-halo);
}

/* Radius stays 20 in ALL states. Figma's Selected variant still shows radius/16 — judged a
 * designer oversight (Pressed/Selected share every other style; the corner would visibly
 * morph on select). Maintainer decision 2026-07-07; flagged to the designer to fix in Figma. */
.item[data-v-00f4278d]:focus-visible {
    outline: 2px solid transparent;
    border-color: var(--btly-border-brand);
    box-shadow:
            0 0 0 2px var(--btly-border-focus-halo),
            0 0 8px 0 var(--btly-border-focus-halo);
}

/* Background uses brand palette — no semantic token exists for this decorative
 * surface, and primitives are forbidden (maintainer decision, see spec §5).
 * The base rule pins the `pink` default so an out-of-contract `color` (plain-JS
 * consumers) degrades to the default tint instead of a transparent box. */
.emoji[data-v-00f4278d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 88px;
    border-radius: var(--btly-radius-16);
    background: var(--btly-brand-pink-200);
}
.emoji.is-pink[data-v-00f4278d] { background: var(--btly-brand-pink-200);
}
.emoji.is-sky[data-v-00f4278d] { background: var(--btly-brand-sky-200);
}
.emoji.is-green[data-v-00f4278d] { background: var(--btly-brand-green-200);
}
.emoji.is-sunshine[data-v-00f4278d] { background: var(--btly-brand-sunshine-200);
}
.emoji.is-orange[data-v-00f4278d] { background: var(--btly-brand-orange-200);
}
.emoji.is-ultraviolet[data-v-00f4278d] { background: var(--btly-brand-ultraviolet-200);
}
.emoji.is-gray[data-v-00f4278d] { background: var(--btly-brand-gray-200);
}

/* No gap — title/description line-heights provide the spacing (Figma gap-0). */
.text[data-v-00f4278d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.title[data-v-00f4278d] {
    color: var(--btly-text-primary);
}
.description[data-v-00f4278d] {
    color: var(--btly-text-tertiary);
}

/* The frame's padding gives the selected/pressed focus-halo shadow room so it isn't clipped. */
.gallery[data-v-a0b278e7] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 760px;
}
.cell[data-v-a0b278e7] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
.cell.wide[data-v-a0b278e7] {
  flex: 1 1 100%;
}
.row[data-v-a0b278e7] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.cap[data-v-a0b278e7] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.level[data-v-3eb35b53], .level[data-v-3eb35b53] * {
    box-sizing: border-box;
}
.level[data-v-3eb35b53] {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--btly-space-2);
    width: 64px;
    height: 24px;
    background: var(--btly-base-transparent);
}
.bar[data-v-3eb35b53] {
    flex: 1 0 0;
    min-width: 1px;
    border-radius:
        var(--btly-radius-4) var(--btly-radius-4)
        var(--btly-radius-2) var(--btly-radius-2);
}

/* Intrinsic diagram geometry (like an icon glyph size) — Figma binds these as raw px. */
.bar[data-v-3eb35b53]:nth-child(1) { height: 10px;
}
.bar[data-v-3eb35b53]:nth-child(2) { height: 18px;
}
.bar[data-v-3eb35b53]:nth-child(3) { height: 24px;
}
.bar.empty[data-v-3eb35b53] {
    background: var(--btly-action-primary-disabled);
}
.bar.filled[data-v-3eb35b53] {
    background: var(--btly-action-accent-default);
}
.level.full .bar.filled[data-v-3eb35b53] {
    background: var(--btly-status-success-accent);
}

.stack[data-v-ee97f1bf] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}
.row[data-v-ee97f1bf] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.row.dark[data-v-ee97f1bf],
.stack.dark[data-v-ee97f1bf] {
  background: var(--btly-brand-gray-950);
  border-radius: 8px;
}
.list-answers[data-v-7f269f64], .list-answers[data-v-7f269f64] * {
    box-sizing: border-box;
}
.list-answers[data-v-7f269f64] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-12);
}
.description[data-v-7f269f64] {
    color: var(--btly-text-secondary);
    text-align: center;
}
.answers[data-v-7f269f64] {
    display: flex;
    gap: var(--btly-space-12);
}
.answers.list[data-v-7f269f64] {
    flex-direction: column;
}
.answers.grid[data-v-7f269f64] {
    flex-wrap: wrap;
    justify-content: center;
}
.disclaimer[data-v-7f269f64] {
    color: var(--btly-text-secondary);
    text-align: center;
}

/* Consumer-provided links inside the disclaimer get the brand link style. */
.disclaimer[data-v-7f269f64] a {
    color: var(--btly-text-brand);
    text-decoration: underline;
}

.cell[data-v-19188f7d] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-19188f7d] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}

/* Playground: give the (unframed) full-width list a demo width. */
.pg[data-v-19188f7d] {
  width: 400px;
}

/* Placeholder standing in for ItemAnswerVertical (not built yet) — mirrors its Figma
 * frame (165px card, radius/20) so the grid layout reads correctly. Playground-only. */
.placeholder-card[data-v-19188f7d] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 165px;
  min-height: 72px;
  padding: var(--btly-space-16);
  border: var(--btly-border-width-1-5) solid var(--btly-border-default);
  border-radius: var(--btly-radius-20);
  background: var(--btly-base-white);
  color: var(--btly-text-primary);
  text-align: center;
}
.list-progress-bar[data-v-f398906c], .list-progress-bar[data-v-f398906c] * {
    box-sizing: border-box;
}
.list-progress-bar[data-v-f398906c] {
    display: flex;
    flex-direction: column;
    gap: var(--btly-space-24);
}

.row[data-v-0d18bdd8] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.row-head[data-v-0d18bdd8] {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--btly-text-primary);
}

/* Playground: give the (unframed) full-width container a demo width. */
.pg[data-v-0d18bdd8] {
  width: 372px;
}
.logo[data-v-a1fee6a6], .logo[data-v-a1fee6a6] * {
    box-sizing: border-box;
}
.logo[data-v-a1fee6a6] {
    display: inline-flex;
}

/* v-html'd SVG carries its own colours + intrinsic size; :deep reaches it. */
.logo[data-v-a1fee6a6] svg {
    display: block;
}

.row[data-v-90f05430] {
  display: flex;
  align-items: center;
  gap: 48px;
}

/* Brand backdrop so the white logo variants are visible. */
.row.dark[data-v-90f05430] {
  padding: 24px;
  border-radius: var(--btly-radius-16);
  background: var(--btly-action-primary-default);
}

/* Bars are full-width, so the gallery is a vertical stack; the frame gives it a width. */
.gallery[data-v-78050bb1] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Playground: give the (unframed) bar a demo width. */
.gallery.pg[data-v-78050bb1] {
  max-width: 420px;
}
.cell[data-v-78050bb1] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-78050bb1] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.quiz-header[data-v-5f406621], .quiz-header[data-v-5f406621] * {
    box-sizing: border-box;
}
.quiz-header[data-v-5f406621] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: var(--btly-space-56);
}

/* Full-width strips (progress bar); rendered only when their slot is filled. */
.top[data-v-5f406621],
.bottom[data-v-5f406621] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--btly-space-8);
}
.header[data-v-5f406621] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Side boxes: always reserved (equal 56px) so the centre logo stays centred. */
.leading[data-v-5f406621],
.trailing[data-v-5f406621] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: var(--btly-space-56);
}
.leading[data-v-5f406621] { height: var(--btly-space-40);
}
.trailing[data-v-5f406621] { height: var(--btly-space-32);
}

.cell[data-v-eea8471d] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-eea8471d] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.nav[data-v-eea8471d] {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--btly-icon-default);
}
.counter[data-v-eea8471d] {
  color: var(--btly-text-tertiary);
}

/* Playground: give the (unframed) full-width header a demo width. */
.pg[data-v-eea8471d] {
  width: 380px;
}
.layout[data-v-4f214934], .layout[data-v-4f214934] * {
    box-sizing: border-box;
}
.layout[data-v-4f214934] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--btly-space-8);
    width: 100%;
    min-height: 100%;
    padding: var(--btly-space-8) var(--btly-space-16) var(--btly-space-16);
    background: var(--btly-surface-secondary);
    overflow: hidden;
}
.header[data-v-4f214934] {
    width: 100%;
    height: var(--btly-space-56);
    flex-shrink: 0;
}
.content[data-v-4f214934] {
    width: 100%;
    flex: 1 0 0;
    min-height: 0;
}

/* Mobile frame so the fluid QuizLayout (min-height:100%) has a bounded parent to fill.
 * Playground chrome resets itself locally (no global reset in the canary playground). */
.frame[data-v-e6661dda] {
  box-sizing: border-box;
  width: 375px;
  height: 655px;
  border: 1px solid var(--btly-border-default);
  overflow: hidden;
}
.demo-header[data-v-e6661dda] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--btly-radius-12);
  background: var(--btly-surface-card);
  color: var(--btly-text-tertiary);
}
.demo-content[data-v-e6661dda] {
  display: flex;
  flex-direction: column;
  gap: var(--btly-space-8);
  width: 100%;
  height: 100%;
}
.demo-block[data-v-e6661dda] {
  flex: 1 0 0;
  border-radius: var(--btly-radius-12);
  background: var(--btly-surface-card);
}

.cell[data-v-fc0e869b] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap[data-v-fc0e869b] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.pg[data-v-fc0e869b] {
  width: 360px;
}
.model[data-v-fc0e869b] {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
/* White pill: [star + rating + caption] | divider | [count + caption], 24px tall.
 * All values are Figma-bound semantic tokens; the two heights use the space scale
 * (repo precedent: TrustPilotStar's 16×16 box = --btly-space-16). */
.tp-badge[data-v-71707d34], .tp-badge[data-v-71707d34] * {
    box-sizing: border-box;
}
.tp-badge[data-v-71707d34] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btly-space-6);
    height: var(--btly-space-24);
    padding: var(--btly-space-0) var(--btly-space-6) var(--btly-space-0) var(--btly-space-4);
    border-radius: var(--btly-radius-8);
    background: var(--btly-surface-card);
    color: var(--btly-text-secondary);
    white-space: nowrap;
}
.group[data-v-71707d34] {
    display: inline-flex;
    align-items: center;
    gap: var(--btly-space-4);
}
.divider[data-v-71707d34] {
    flex-shrink: 0;
    width: var(--btly-border-width-1);
    height: var(--btly-space-16);
    background: var(--btly-border-default);
}

.gallery[data-v-c208c0c2] {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.cell[data-v-c208c0c2] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.cap[data-v-c208c0c2] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.backdrop[data-v-c208c0c2] {
  padding: 16px;
  border-radius: 8px;
  background: var(--btly-surface-brand);
}

.rows[data-v-20b0200a] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery[data-v-caea0f13] {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.cell[data-v-caea0f13] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cap[data-v-caea0f13] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
/* 42×42 is a raw component constant — unbound in Figma and not on the space scale. */
.tutor-avatar[data-v-afd48f95], .tutor-avatar[data-v-afd48f95] * {
    box-sizing: border-box;
}
.tutor-avatar[data-v-afd48f95] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: var(--btly-radius-12);
    background: var(--btly-surface-tertiary);
}
.photo[data-v-afd48f95] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The common slot usage is a bare <img> — give it the same fill/cover treatment. */
.tutor-avatar img[data-v-afd48f95-s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.row[data-v-c42bad15] {
  display: flex;
  gap: 24px;
}
.cell[data-v-c42bad15] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.cap[data-v-c42bad15] {
  margin: 0;
  font-size: 12px;
  color: var(--btly-text-tertiary);
}
.demo-initials[data-v-c42bad15] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--btly-brand-sky-200);
  color: var(--btly-text-secondary);
}
/*$vite$:1*/