@font-face {
  font-display: swap;
  font-family: 'DB HelvethaicaMon X';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/DBHelvethaicaMonX/DBHelvethaicaMonX-Reg.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'DB HelvethaicaMon X';
  font-style: normal;
  font-weight: 500 600;
  src: url('../fonts/DBHelvethaicaMonX/DBHelvethaicaMonX-Med.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'DB HelvethaicaMon X';
  font-style: normal;
  font-weight: 700 900;
  src: url('../fonts/DBHelvethaicaMonX/DBHelvethaicaMonX-Bd.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/BaiJamjuree/BaiJamjuree-Regular-Thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-display: swap;
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/BaiJamjuree/BaiJamjuree-Regular-Latin.woff2') format('woff2');
  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;
}

@font-face {
  font-display: swap;
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/BaiJamjuree/BaiJamjuree-Medium-Thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-display: swap;
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/BaiJamjuree/BaiJamjuree-Medium-Latin.woff2') format('woff2');
  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;
}

@font-face {
  font-display: swap;
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/BaiJamjuree/BaiJamjuree-SemiBold-Thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-display: swap;
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/BaiJamjuree/BaiJamjuree-SemiBold-Latin.woff2') format('woff2');
  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;
}

@font-face {
  font-display: swap;
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/BaiJamjuree/BaiJamjuree-Bold-Thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-display: swap;
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/BaiJamjuree/BaiJamjuree-Bold-Latin.woff2') format('woff2');
  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;
}

:root {
  /* Hardcode light mode for now. Website currently supports only light color. */
  color-scheme: light;

  --twl-font-db-helvethaica: 'DB HelvethaicaMon X', Arial, 'Helvetica Neue', sans-serif;
  --twl-font-bai-jamjuree: 'Bai Jamjuree', Arial, 'Helvetica Neue', sans-serif;

  --Action-font-family: var(--twl-font-db-helvethaica);
  --Action-font-size-xs: 12px;
  --Action-font-size-sm: 14px;
  --Action-font-size-md: 16px;
  --Action-font-size-lg: 20px;
  --Body-font-family: var(--twl-font-bai-jamjuree);
  --Body-font-size-xs: 10px;
  --Body-font-size-sm: 12px;
  --Body-font-size-md: 14px;
  --Body-font-size-lg: 16px;
  --Body-font-size-xlg: 20px;
  --Body-font-line-height-xs: 15px;
  --Body-font-line-height-sm: 18px;
  --Body-font-line-height-md: 21px;
  --Body-font-line-height-lg: 24px;
  --Body-font-line-height-xlg: 30px;
  --Heading-font-family: var(--twl-font-db-helvethaica);
  --Heading-font-size-sm: 20px;
  --Heading-font-size-md: 24px;
  --Heading-font-size-lg: 32px;
  --Title-Hero-font-family: var(--twl-font-db-helvethaica);
  --Title-Hero-font-size: 64px;
  --Title-Page-font-family: var(--twl-font-db-helvethaica);
  --Title-Page-font-size-sm: 24px;
  --Title-Page-font-size-lg: 32px;
  --Title-Page-font-size-xlg: 48px;

  --twl-type-scale-01: 0.625rem;
  --twl-type-scale-02: 0.75rem;
  --twl-type-scale-03: 0.875rem;
  --twl-type-scale-04: 1rem;
  --twl-type-scale-05: 1.25rem;
  --twl-type-scale-06: 1.5rem;
  --twl-type-scale-08: 2rem;
  --twl-type-scale-11: 4rem;
  --twl-line-height-01: 0.9375rem;
  --twl-line-height-02: 1.125rem;
  --twl-line-height-03: 1.3125rem;
  --twl-line-height-04: 1.5rem;
  --twl-line-height-05: 1.875rem;

  --twl-space-1: 4px;
  --twl-space-2: 8px;
  --twl-radius-xs: 0.25rem;
  --twl-radius-sm: 0.5rem;
  --twl-radius-md: 0.625rem;
  --twl-radius-lg: 1rem;
  --twl-radius-xl: 1.5rem;
  --twl-radius-full: 999px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --Radius-xs: var(--twl-radius-xs);
  --Radius-sm: var(--twl-radius-sm);
  --Radius-md: var(--twl-radius-md);
  --Radius-lg: var(--twl-radius-lg);
  --Radius-xl: var(--twl-radius-xl);
  --Radius-full: var(--twl-radius-full);
  --twl-elevation-xs: 0 2px 10px 0 rgba(7, 7, 8, 0.1);
  --twl-elevation-sm: 0 4px 20px 0 rgba(7, 7, 8, 0.1);
  --twl-elevation-md: 0 4px 20px 0 rgba(7, 7, 8, 0.2);
  --twl-shadow-sm: 0 4px 10px 0 rgba(7, 7, 8, 0.05);
  --Elevation-xs: var(--twl-elevation-xs);
  --Elevation-sm: var(--twl-elevation-sm);
  --Elevation-md: var(--twl-elevation-md);

  --twl-ref-static-base-black: #070708;
  --twl-ref-static-base-white: #ffffff;
  --twl-ref-opacity-black-0: rgba(7, 7, 8, 0);
  --twl-ref-opacity-black-5: rgba(7, 7, 8, 0.05);
  --twl-ref-opacity-black-10: rgba(7, 7, 8, 0.1);
  --twl-ref-opacity-black-16: rgba(7, 7, 8, 0.16);
  --twl-ref-opacity-black-20: rgba(7, 7, 8, 0.2);
  --twl-ref-opacity-black-32: rgba(0, 0, 0, 0.32);
  --twl-ref-opacity-black-50: rgba(7, 7, 8, 0.5);
  --twl-ref-opacity-black-60: rgba(7, 7, 8, 0.6);
  --twl-ref-opacity-black-70: rgba(7, 7, 8, 0.7);
  --twl-ref-opacity-black-72: rgba(7, 7, 8, 0.72);
  --twl-ref-opacity-black-74: rgba(7, 7, 8, 0.74);
  --twl-ref-opacity-black-90: rgba(7, 7, 8, 0.9);
  --twl-ref-opacity-white-0: rgba(255, 255, 255, 0);
  --twl-ref-opacity-white-5: rgba(255, 255, 255, 0.05);
  --twl-ref-opacity-white-10: rgba(255, 255, 255, 0.1);
  --twl-ref-opacity-white-18: rgba(255, 255, 255, 0.18);
  --twl-ref-opacity-white-20: rgba(255, 255, 255, 0.2);
  --twl-ref-opacity-white-50: rgba(255, 255, 255, 0.5);
  --twl-ref-opacity-white-60: rgba(255, 255, 255, 0.6);
  --twl-ref-opacity-white-70: rgba(255, 255, 255, 0.7);
  --twl-ref-opacity-white-80: rgba(255, 255, 255, 0.8);
  --twl-ref-opacity-white-90: rgba(255, 255, 255, 0.9);
  --twl-ref-brand-600-dark: #ff9f8a;

  /* Legacy palette → design-system refs (see Brand/Success/Warning/Danger); public aliases for old CSS */
  --twl-ref-legacy-tunwalai-100: var(--twl-ref-brand-50);
  --twl-ref-legacy-tunwalai-200: var(--twl-ref-brand-100);
  --twl-ref-legacy-tunwalai-400: var(--twl-ref-brand-200);
  --twl-ref-legacy-tunwalai-700: var(--twl-ref-brand-500);
  --twl-ref-legacy-mint-100: var(--twl-ref-success-50);
  --twl-ref-legacy-mint-500: var(--twl-ref-success-200);
  --twl-ref-legacy-mint-700: var(--twl-ref-success-500);
  --twl-ref-legacy-blonde-100: var(--twl-ref-warning-50);
  --twl-ref-legacy-blonde-500: var(--twl-ref-warning-100);
  --twl-ref-legacy-blonde-700: var(--twl-ref-warning-500);
  --twl-ref-legacy-cherry-100: var(--twl-ref-danger-50);
  --twl-ref-legacy-cherry-500: var(--twl-ref-danger-200);
  --twl-ref-legacy-cherry-700: var(--twl-ref-danger-500);
  --tunwalai-100: var(--twl-ref-legacy-tunwalai-100);
  --tunwalai-200: var(--twl-ref-legacy-tunwalai-200);
  --tunwalai-400: var(--twl-ref-legacy-tunwalai-400);
  --tunwalai-700: var(--twl-ref-legacy-tunwalai-700);
  --tunwalai-700-primary: var(--twl-ref-legacy-tunwalai-700);
  --mint-100: var(--twl-ref-legacy-mint-100);
  --mint-500: var(--twl-ref-legacy-mint-500);
  --mint-700: var(--twl-ref-legacy-mint-700);
  --blonde-100: var(--twl-ref-legacy-blonde-100);
  --blonde-500: var(--twl-ref-legacy-blonde-500);
  --blonde-700: var(--twl-ref-legacy-blonde-700);
  --cherry-100: var(--twl-ref-legacy-cherry-100);
  --cherry-500: var(--twl-ref-legacy-cherry-500);
  --cherry-700: var(--twl-ref-legacy-cherry-700);

  --twl-sem-bg-neutral-primary: var(--twl-ref-neutral-300);
  --twl-sem-bg-neutral-secondary: var(--twl-ref-neutral-200);
  --twl-sem-bg-neutral-tertiary: var(--twl-ref-neutral-100);
  --twl-sem-bg-brand-default: var(--twl-ref-brand-500);
  --twl-sem-bg-brand-secondary: var(--twl-ref-brand-600);
  --twl-sem-bg-brand-secondary-dark: var(--twl-ref-brand-600-dark);
  --twl-sem-bg-brand-hover: var(--twl-ref-brand-600);
  --twl-sem-bg-brand-active: var(--twl-ref-brand-700);
  --twl-sem-bg-brand-disabled: var(--twl-ref-brand-200);
  --twl-sem-bg-brand-subtle: var(--twl-ref-brand-50);
  --twl-sem-bg-brand-subtle-active: var(--twl-ref-brand-100);
  --twl-sem-bg-danger-default: var(--twl-ref-danger-500);
  --twl-sem-bg-danger-subtle: var(--twl-ref-danger-50);
  --twl-sem-bg-success-default: var(--twl-ref-success-500);
  --twl-sem-bg-success-subtle: var(--twl-ref-success-50);
  --twl-sem-bg-warning-default: var(--twl-ref-warning-500);
  --twl-sem-bg-warning-subtle: var(--twl-ref-warning-50);
  --twl-sem-bg-gold-default: var(--twl-ref-gold-500);
  --twl-sem-bg-gold-subtle: var(--twl-ref-gold-100);
  --twl-sem-bg-silver-default: var(--twl-ref-silver-500);
  --twl-sem-bg-silver-subtle: var(--twl-ref-silver-100);
  --twl-sem-bg-bronze-default: var(--twl-ref-bronze-500);
  --twl-sem-bg-bronze-subtle: var(--twl-ref-bronze-100);

  --twl-sem-text-neutral-primary: var(--twl-ref-neutral-900);
  --twl-sem-text-neutral-secondary: var(--twl-ref-neutral-600);
  --twl-sem-text-neutral-tertiary: var(--twl-ref-neutral-500);
  --twl-sem-text-neutral-placeholder: var(--twl-ref-neutral-500);
  --twl-sem-text-neutral-disabled: var(--twl-ref-neutral-400);
  --twl-sem-text-brand-default: var(--twl-ref-brand-600);
  --twl-sem-text-brand-hover: var(--twl-ref-brand-700);
  --twl-sem-text-brand-active: var(--twl-ref-brand-800);
  --twl-sem-text-brand-disabled: var(--twl-ref-brand-200);
  --twl-sem-text-brand-on-disabled: var(--twl-ref-brand-400);
  --twl-sem-text-danger-default: var(--twl-ref-danger-500);
  --twl-sem-text-success-default: var(--twl-ref-success-500);
  --twl-sem-text-warning-default: var(--twl-ref-warning-500);
  --twl-sem-text-static-white: var(--twl-ref-static-base-white);

  --twl-sem-icon-neutral-primary: var(--twl-ref-neutral-900);
  --twl-sem-icon-neutral-secondary: var(--twl-ref-neutral-600);
  --twl-sem-icon-neutral-tertiary: var(--twl-ref-neutral-500);
  --twl-sem-icon-neutral-disabled: var(--twl-ref-neutral-400);
  --twl-sem-icon-brand-default: var(--twl-ref-brand-600);
  --twl-sem-icon-brand-hover: var(--twl-ref-brand-700);
  --twl-sem-icon-brand-active: var(--twl-ref-brand-800);
  --twl-sem-icon-brand-disabled: var(--twl-ref-brand-200);
  --twl-sem-icon-brand-on-disabled: var(--twl-ref-brand-400);
  --twl-sem-icon-danger-default: var(--twl-ref-danger-500);
  --twl-sem-icon-success-default: var(--twl-ref-success-500);
  --twl-sem-icon-warning-default: var(--twl-ref-warning-500);

  --twl-sem-border-neutral-subtle: var(--twl-ref-neutral-200);
  --twl-sem-border-neutral-default: var(--twl-ref-neutral-300);
  --twl-sem-border-brand-default: var(--twl-ref-brand-500);
  --twl-sem-border-brand-hover: var(--twl-ref-brand-600);
  --twl-sem-border-brand-active: var(--twl-ref-brand-700);
  --twl-sem-border-brand-disabled: var(--twl-ref-brand-200);
  --twl-sem-border-brand-focus: var(--twl-ref-brand-600);
  --twl-sem-border-brand-subtle: var(--twl-ref-brand-200);
  --twl-sem-border-danger-default: var(--twl-ref-danger-500);
  --twl-sem-border-danger-subtle: var(--twl-ref-danger-200);
  --twl-sem-border-success-subtle: var(--twl-ref-success-200);
  --twl-sem-border-warning-subtle: var(--twl-ref-warning-200);

  --Background-Brand-default: var(--twl-sem-bg-brand-default);
  --Background-Brand-secondary: var(--twl-sem-bg-brand-secondary);
  --Background-Brand-secondary-dark: var(--twl-sem-bg-brand-secondary-dark);
  --Background-Brand-hover: var(--twl-sem-bg-brand-hover);
  --Background-Brand-active: var(--twl-sem-bg-brand-active);
  --Background-Brand-disabled: var(--twl-sem-bg-brand-disabled);
  --Background-Brand-subtle: var(--twl-sem-bg-brand-subtle);
  --Background-Brand-subtle-active: var(--twl-sem-bg-brand-subtle-active);
  --Background-Neutral-primary: var(--twl-sem-bg-neutral-primary);
  --Background-Neutral-secondary: var(--twl-sem-bg-neutral-secondary);
  --Background-Neutral-tertiary: var(--twl-sem-bg-neutral-tertiary);
  --Background-Danger-default: var(--twl-sem-bg-danger-default);
  --Background-Danger-subtle: var(--twl-sem-bg-danger-subtle);
  --Background-Success-default: var(--twl-sem-bg-success-default);
  --Background-Success-subtle: var(--twl-sem-bg-success-subtle);
  --Background-Warning-default: var(--twl-sem-bg-warning-default);
  --Background-Warning-subtle: var(--twl-sem-bg-warning-subtle);
  --Background-Gold-default: var(--twl-sem-bg-gold-default);
  --Background-Gold-subtle: var(--twl-sem-bg-gold-subtle);
  --Background-Silver-default: var(--twl-sem-bg-silver-default);
  --Background-Silver-subtle: var(--twl-sem-bg-silver-subtle);
  --Background-Bronze-default: var(--twl-sem-bg-bronze-default);
  --Background-Bronze-subtle: var(--twl-sem-bg-bronze-subtle);
  --Text-Brand-default: var(--twl-sem-text-brand-default);
  --Text-Brand-hover: var(--twl-sem-text-brand-hover);
  --Text-Brand-active: var(--twl-sem-text-brand-active);
  --Text-Brand-disabled: var(--twl-sem-text-brand-disabled);
  --Text-Brand-on-brand-disabled: var(--twl-sem-text-brand-on-disabled);
  --Text-Danger-default: var(--twl-sem-text-danger-default);
  --Text-Success-default: var(--twl-sem-text-success-default);
  --Text-Warning-default: var(--twl-sem-text-warning-default);
  --Text-Static-white: var(--twl-sem-text-static-white);
  --Opacity-Base-0: var(--twl-ref-opacity-white-0);
  --Opacity-Base-60: var(--twl-ref-opacity-white-60);
  --Opacity-Base-70: var(--twl-ref-opacity-white-70);
  --Opacity-Base-90: var(--twl-ref-opacity-white-90);
  --Static-Base-black: var(--twl-ref-static-base-black);
  --Static-Base-white: var(--twl-ref-static-base-white);
  --Static-Opacity-Black-10: var(--twl-ref-opacity-black-10);
  --Static-Opacity-Black-16: var(--twl-ref-opacity-black-16);
  --Static-Opacity-Black-32: var(--twl-ref-opacity-black-32);
  --Static-Opacity-Black-50: var(--twl-ref-opacity-black-50);
  --Static-Opacity-Black-60: var(--twl-ref-opacity-black-60);
  --Static-Opacity-Black-70: var(--twl-ref-opacity-black-70);
  --Static-Opacity-Black-72: var(--twl-ref-opacity-black-72);
  --Static-Opacity-Black-74: var(--twl-ref-opacity-black-74);
  --Static-Opacity-Black-90: var(--twl-ref-opacity-black-90);
  --Static-Opacity-White-5: var(--twl-ref-opacity-white-5);
  --Static-Opacity-White-10: var(--twl-ref-opacity-white-10);
  --Static-Opacity-White-18: var(--twl-ref-opacity-white-18);
  --Static-Opacity-White-80: var(--twl-ref-opacity-white-80);
  --Icon-Brand-default: var(--twl-sem-icon-brand-default);
  --Icon-Brand-hover: var(--twl-sem-icon-brand-hover);
  --Icon-Brand-active: var(--twl-sem-icon-brand-active);
  --Icon-Brand-disabled: var(--twl-sem-icon-brand-disabled);
  --Icon-Brand-on-brand-disabled: var(--twl-sem-icon-brand-on-disabled);
  --Border-Brand-default: var(--twl-sem-border-brand-default);
  --Border-Brand-hover: var(--twl-sem-border-brand-hover);
  --Border-Brand-active: var(--twl-sem-border-brand-active);
  --Border-Brand-disabled: var(--twl-sem-border-brand-disabled);
  --Border-Brand-focus: var(--twl-sem-border-brand-focus);
  --Border-Brand-subtle: var(--twl-sem-border-brand-subtle);
  --Border-Danger-default: var(--twl-sem-border-danger-default);
  --Border-Danger-subtle: var(--twl-sem-border-danger-subtle);
  --Border-Success-subtle: var(--twl-sem-border-success-subtle);
  --Border-Warning-subtle: var(--twl-sem-border-warning-subtle);
  --twl-ref-tun-hetero-bg: var(--twl-ref-brand-500);
  --twl-ref-tun-hetero-border: var(--twl-ref-brand-500);
  --twl-ref-tun-hetero-icon: var(--twl-ref-brand-500);
  --twl-ref-tun-hetero-text: var(--twl-ref-brand-500);

  --twl-theme-accent-bg: var(--twl-sem-bg-brand-subtle);
  --twl-theme-accent-bg-active: var(--twl-sem-bg-brand-subtle-active);
  --twl-theme-accent-fill: var(--twl-sem-bg-brand-default);
  --twl-theme-accent-fill-hover: var(--twl-sem-bg-brand-hover);
  --twl-theme-accent-fill-active: var(--twl-sem-bg-brand-active);
  --twl-theme-accent-text: var(--twl-sem-text-brand-default);
  --twl-theme-accent-hover: var(--twl-sem-bg-brand-hover);
  --twl-theme-accent-active: var(--twl-sem-bg-brand-active);
  --twl-theme-accent-border: var(--twl-sem-border-brand-default);
  --twl-theme-accent-gradient-end: var(--twl-ref-brand-gradient-end);

  --background-base: var(--twl-ref-base-bg-base);
  --background-raised: var(--twl-ref-base-bg-raised);
  --background-inverse: var(--twl-ref-base-inverse);
  --background-on-color: var(--twl-ref-base-on-color);
  --Base-bg-base: var(--twl-ref-base-bg-base);
  --Base-bg-raised: var(--twl-ref-base-bg-raised);
  --Base-border-raised: var(--twl-ref-base-bg-raised);
  --Base-inverse: var(--twl-ref-base-inverse);
  --Base-on-color: var(--twl-ref-base-on-color);
  --Base-bg-on-color: var(--twl-ref-base-on-color);
  --brand-active: var(--twl-sem-text-brand-active);
  --brand-border: var(--twl-sem-border-brand-default);
  --brand-default: var(--twl-sem-text-brand-default);
  --brand-gradient-end: var(--twl-ref-brand-gradient-end);
  --brand-hover: var(--twl-sem-text-brand-hover);
  --brand-subtle: var(--twl-sem-bg-brand-subtle);
  --brand-subtle-active: var(--twl-sem-bg-brand-subtle-active);
  --border-default: var(--twl-sem-border-neutral-default);
  --border-subtle: var(--twl-sem-border-neutral-subtle);
  --Border-Neutral-default: var(--twl-sem-border-neutral-default);
  --Border-Neutral-subtle: var(--twl-sem-border-neutral-subtle);
  --Icon-Neutral-primary: var(--twl-sem-icon-neutral-primary);
  --Icon-Neutral-secondary: var(--twl-sem-icon-neutral-secondary);
  --Icon-Neutral-tertiary: var(--twl-sem-icon-neutral-tertiary);
  --Icon-Neutral-disabled: var(--twl-sem-icon-neutral-disabled);
  --Icon-Danger-default: var(--twl-sem-icon-danger-default);
  --Icon-Success-default: var(--twl-sem-icon-success-default);
  --Icon-Warning-default: var(--twl-sem-icon-warning-default);
  --text-primary: var(--twl-sem-text-neutral-primary);
  --text-secondary: var(--twl-sem-text-neutral-secondary);
  --text-tertiary: var(--twl-sem-text-neutral-tertiary);
  --text-disabled: var(--twl-sem-text-neutral-disabled);
  --Base-bg-default: var(--twl-ref-base-bg-base);
  --Text-Neutral-primary: var(--twl-sem-text-neutral-primary);
  --Text-Neutral-secondary: var(--twl-sem-text-neutral-secondary);
  --Text-Neutral-tertiary: var(--twl-sem-text-neutral-tertiary);
  --Text-Neutral-disabled: var(--twl-sem-text-neutral-disabled);
  --Base-border-default: var(--twl-sem-border-neutral-default);

  --story-mobile-hero-bg: #121212;
  --story-mobile-hero-bg-0: rgba(18, 18, 18, 0);
  --story-mobile-hero-bg-80: rgba(18, 18, 18, 0.8);
  --story-mobile-hero-border-subtle: var(--Static-Opacity-White-18);
  --story-mobile-hero-brand-default: var(--twl-ref-brand-500);
  --story-mobile-hero-brand-text: var(--twl-ref-brand-600-dark);
  --story-mobile-completed-badge-text: #070708;
  --story-mobile-hero-category-border: #44464b;
  --story-mobile-hero-danger-text: #ec5f65;
  --story-mobile-hero-text-primary: var(--Static-Base-white);
  --story-mobile-hero-text-secondary: #d4d4d8;
  --story-mobile-hero-text-tertiary: #9a9da2;

  --story-detail-content-inline-size: 956px;
  --story-detail-head-inline-size: 1068px;

  --story-dream-chat-action: #1e8cff;
  --story-dream-chat-action-hover: #167be5;
  --story-dream-chat-close-bg: #191919;
  --story-dream-chat-close-hover-bg: #333333;
  --story-dream-chat-floating-message-line-height: 1.35;
  --story-dream-chat-floating-shadow: 0 4px 8px var(--Static-Opacity-Black-10);
  --story-dream-chat-gradient-end: #b371fd;
  --story-dream-chat-gradient-middle: var(--story-dream-chat-action);
  --story-dream-chat-gradient-start: #79f2f1;
  --story-dream-chat-mobile-name-font-family: var(--twl-font-bai-jamjuree);
  --story-dream-chat-mobile-name-line-height: 19px;
  --story-dream-chat-gradient: linear-gradient(
    90deg,
    var(--story-dream-chat-gradient-start) 0%,
    var(--story-dream-chat-gradient-middle) 50%,
    var(--story-dream-chat-gradient-end) 100%
  );
  --story-dream-chat-gradient-reversed: linear-gradient(
    135deg,
    var(--story-dream-chat-gradient-end) 0%,
    var(--story-dream-chat-gradient-middle) 50%,
    var(--story-dream-chat-gradient-start) 100%
  );
  --story-dream-chat-gradient-tilted: linear-gradient(
    135deg,
    var(--story-dream-chat-gradient-start) 0%,
    var(--story-dream-chat-gradient-middle) 52%,
    var(--story-dream-chat-gradient-end) 100%
  );

  --story-header-menu-item-radius: 6px;
  --story-header-menu-shadow: 0 12px 32px var(--Static-Opacity-Black-16);
  --story-header-title-font-size-desktop: 48px;
  --story-header-title-font-size-mobile: 28px;
  --story-header-exclusive-bg: linear-gradient(90deg, #ffecbd 0%, rgba(255, 236, 189, 0) 100%);
  --story-header-lead-time-bg: linear-gradient(90deg, #ffdddd 0%, rgba(255, 221, 221, 0) 100%);
  --story-promotion-countdown-radius: 6px;
  --story-promotion-link-font-size: 18px;
  --story-promotion-link-line-height: 1.21;
  --story-read-bar-shadow: 0 8px 18px var(--Static-Opacity-Black-10);
}

:root,
html[data-mode='light'],
html[data-mode='system'] {
  --twl-ref-base-bg-base: var(--twl-ref-static-base-white);
  --twl-ref-base-bg-raised: var(--twl-ref-static-base-white);
  --twl-ref-base-inverse: var(--twl-ref-neutral-900);
  --twl-ref-base-on-color: var(--twl-ref-static-base-white);
  --twl-ref-brand-50: #fff3f0;
  --twl-ref-brand-100: #ffe0d9;
  --twl-ref-brand-200: #ffc4b6;
  --twl-ref-brand-300: #ffa590;
  --twl-ref-brand-400: #ff8e76;
  --twl-ref-brand-500: #ff775f;
  --twl-ref-brand-600: #e85d45;
  --twl-ref-brand-700: #c04528;
  --twl-ref-brand-800: #8f2f18;
  --twl-ref-brand-900: #5c1d0c;
  --twl-ref-brand-gradient-end: #ff775f;
  --twl-ref-neutral-50: #fafafa;
  --twl-ref-neutral-100: #f2f2f3;
  --twl-ref-neutral-200: #e4e5e7;
  --twl-ref-neutral-300: #cacbce;
  --twl-ref-neutral-400: #9a9da2;
  --twl-ref-neutral-500: #6d7078;
  --twl-ref-neutral-600: #44464b;
  --twl-ref-neutral-700: #26282b;
  --twl-ref-neutral-800: #151619;
  --twl-ref-neutral-900: #070708;
  --twl-ref-danger-50: #fceeee;
  --twl-ref-danger-200: #f2a8aa;
  --twl-ref-danger-500: #c72126;
  --twl-ref-success-50: #effbf7;
  --twl-ref-success-200: #a4efd8;
  --twl-ref-success-500: #1abc8c;
  --twl-ref-warning-50: #fef7e8;
  --twl-ref-warning-100: #fceac1;
  --twl-ref-warning-200: #f9d585;
  --twl-ref-warning-500: #b0800c;
  --twl-ref-gold-100: #fff5db;
  --twl-ref-gold-500: #ffc15f;
  --twl-ref-silver-100: #e6e6e6;
  --twl-ref-silver-500: #cbcbcb;
  --twl-ref-bronze-100: #ffe5da;
  --twl-ref-bronze-500: #ffab88;
  --twl-ref-tun-bl-bg: #efe8fe;
  --twl-ref-tun-bl-border: #a078fd;
  --twl-ref-tun-bl-text: #a078fd;
  --twl-ref-tun-gl-bg: #ffecf4;
  --twl-ref-tun-gl-border: #ff3d91;
  --twl-ref-tun-gl-text: #ff3d91;
  --twl-ref-tun-fanfic-bg: #e6f8ff;
  --twl-ref-tun-fanfic-border: #22bcf2;
  --twl-ref-tun-fanfic-text: #22bcf2;
}

html[data-mode='light'] {
  color-scheme: light;
}

html[data-mode='dark'] {
  color-scheme: dark;

  --Base-border-raised: var(--twl-ref-neutral-200);
  --Opacity-Base-0: var(--twl-ref-opacity-black-0);
  --Opacity-Base-60: var(--twl-ref-opacity-black-60);
  --Opacity-Base-70: var(--twl-ref-opacity-black-70);
  --Opacity-Base-90: var(--twl-ref-opacity-black-90);
  --twl-ref-base-bg-base: var(--twl-ref-neutral-50);
  --twl-ref-base-bg-raised: var(--twl-ref-neutral-100);
  --twl-ref-base-inverse: var(--twl-ref-static-base-white);
  --twl-ref-base-on-color: var(--twl-ref-neutral-50);
  --twl-ref-brand-50: #3d1a14;
  --twl-ref-brand-100: #5c271d;
  --twl-ref-brand-200: #7d3829;
  --twl-ref-brand-300: #a04c39;
  --twl-ref-brand-400: #d26952;
  --twl-ref-brand-500: #ff8770;
  --twl-ref-brand-600: #ff9f8a;
  --twl-ref-brand-700: #ffb8a6;
  --twl-ref-brand-800: #ffd2c4;
  --twl-ref-brand-900: #ffeae2;
  --twl-ref-brand-gradient-end: #ff8770;
  --twl-ref-neutral-50: #070708;
  --twl-ref-neutral-100: #151619;
  --twl-ref-neutral-200: #26282b;
  --twl-ref-neutral-300: #44464b;
  --twl-ref-neutral-400: #6d7078;
  --twl-ref-neutral-500: #9a9da2;
  --twl-ref-neutral-600: #cacbce;
  --twl-ref-neutral-700: #e4e5e7;
  --twl-ref-neutral-800: #f2f2f3;
  --twl-ref-neutral-900: #fafafa;
  --twl-ref-danger-50: #45141a;
  --twl-ref-danger-200: #642021;
  --twl-ref-danger-500: #ec5f65;
  --twl-ref-success-50: #164134;
  --twl-ref-success-200: #218365;
  --twl-ref-success-500: #5fe7be;
  --twl-ref-warning-50: #30220a;
  --twl-ref-warning-100: #4a3611;
  --twl-ref-warning-200: #5c4310;
  --twl-ref-warning-500: #ebb845;
  --twl-ref-gold-100: #634c13;
  --twl-ref-gold-500: #ffc15f;
  --twl-ref-silver-100: #575757;
  --twl-ref-silver-500: #cbcbcb;
  --twl-ref-bronze-100: #5f311d;
  --twl-ref-bronze-500: #ffab88;
  --twl-ref-tun-bl-bg: #452f79;
  --twl-ref-tun-bl-border: #ae8dfc;
  --twl-ref-tun-bl-text: #ae8dfc;
  --twl-ref-tun-gl-bg: #601a38;
  --twl-ref-tun-gl-border: #fc589f;
  --twl-ref-tun-gl-text: #fc589f;
  --twl-ref-tun-fanfic-bg: #145a72;
  --twl-ref-tun-fanfic-border: #63cff5;
  --twl-ref-tun-fanfic-text: #63cff5;
}

html[data-mode='system'] {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-mode]),
  html[data-mode='system'] {
    --Base-border-raised: var(--twl-ref-neutral-200);
    --Opacity-Base-0: var(--twl-ref-opacity-black-0);
    --Opacity-Base-60: var(--twl-ref-opacity-black-60);
    --Opacity-Base-70: var(--twl-ref-opacity-black-70);
    --Opacity-Base-90: var(--twl-ref-opacity-black-90);
    --twl-ref-base-bg-base: var(--twl-ref-neutral-50);
    --twl-ref-base-bg-raised: var(--twl-ref-neutral-100);
    --twl-ref-base-inverse: var(--twl-ref-static-base-white);
    --twl-ref-base-on-color: var(--twl-ref-neutral-50);
    --twl-ref-brand-50: #3d1a14;
    --twl-ref-brand-100: #5c271d;
    --twl-ref-brand-200: #7d3829;
    --twl-ref-brand-300: #a04c39;
    --twl-ref-brand-400: #d26952;
    --twl-ref-brand-500: #ff8770;
    --twl-ref-brand-600: #ff9f8a;
    --twl-ref-brand-700: #ffb8a6;
    --twl-ref-brand-800: #ffd2c4;
    --twl-ref-brand-900: #ffeae2;
    --twl-ref-brand-gradient-end: #ff8770;
    --twl-ref-neutral-50: #070708;
    --twl-ref-neutral-100: #151619;
    --twl-ref-neutral-200: #26282b;
    --twl-ref-neutral-300: #44464b;
    --twl-ref-neutral-400: #6d7078;
    --twl-ref-neutral-500: #9a9da2;
    --twl-ref-neutral-600: #cacbce;
    --twl-ref-neutral-700: #e4e5e7;
    --twl-ref-neutral-800: #f2f2f3;
    --twl-ref-neutral-900: #fafafa;
    --twl-ref-danger-50: #45141a;
    --twl-ref-danger-200: #642021;
    --twl-ref-danger-500: #ec5f65;
    --twl-ref-success-50: #164134;
    --twl-ref-success-200: #218365;
    --twl-ref-success-500: #5fe7be;
    --twl-ref-warning-50: #30220a;
    --twl-ref-warning-100: #4a3611;
    --twl-ref-warning-200: #5c4310;
    --twl-ref-warning-500: #ebb845;
    --twl-ref-gold-100: #634c13;
    --twl-ref-gold-500: #ffc15f;
    --twl-ref-silver-100: #575757;
    --twl-ref-silver-500: #cbcbcb;
    --twl-ref-bronze-100: #5f311d;
    --twl-ref-bronze-500: #ffab88;
    --twl-ref-tun-bl-bg: #452f79;
    --twl-ref-tun-bl-border: #ae8dfc;
    --twl-ref-tun-bl-text: #ae8dfc;
    --twl-ref-tun-gl-bg: #601a38;
    --twl-ref-tun-gl-border: #fc589f;
    --twl-ref-tun-gl-text: #fc589f;
    --twl-ref-tun-fanfic-bg: #145a72;
    --twl-ref-tun-fanfic-border: #63cff5;
    --twl-ref-tun-fanfic-text: #63cff5;
  }
}

[data-theme] {
  --twl-house-theme-active-accent-bg: var(--twl-house-theme-light-accent-bg);
  --twl-house-theme-active-accent-bg-active: var(--twl-house-theme-light-accent-bg-active);
  --twl-house-theme-active-accent-color: var(--twl-house-theme-light-accent-color);
  --twl-house-theme-active-accent-gradient-end: var(--twl-house-theme-light-accent-gradient-end);
  --twl-house-theme-active-text-color: var(--twl-house-theme-light-text-color);
  --twl-house-theme-active-button-bg: var(--twl-house-theme-light-button-bg);
  --twl-house-theme-active-button-color: var(--twl-house-theme-light-button-color);
  --twl-house-theme-active-button-text: var(--twl-house-theme-light-button-text);

  --twl-theme-accent-bg: var(--twl-house-theme-active-accent-bg, var(--twl-sem-bg-brand-subtle));
  --twl-theme-accent-bg-active: var(
    --twl-house-theme-active-accent-bg-active,
    var(--twl-sem-bg-brand-subtle-active)
  );
  --twl-theme-accent-fill: var(
    --twl-house-theme-active-accent-color,
    var(--twl-sem-bg-brand-default)
  );
  --twl-theme-accent-fill-hover: var(
    --twl-house-theme-active-accent-color,
    var(--twl-sem-bg-brand-hover)
  );
  --twl-theme-accent-fill-active: var(
    --twl-house-theme-active-accent-color,
    var(--twl-sem-bg-brand-active)
  );
  --twl-theme-accent-text: var(
    --twl-house-theme-active-accent-color,
    var(--twl-sem-text-brand-default)
  );
  --twl-theme-accent-hover: var(
    --twl-house-theme-active-accent-color,
    var(--twl-sem-text-brand-hover)
  );
  --twl-theme-accent-active: var(
    --twl-house-theme-active-accent-color,
    var(--twl-sem-text-brand-active)
  );
  --twl-theme-accent-border: var(
    --twl-house-theme-active-accent-color,
    var(--twl-sem-border-brand-default)
  );
  --twl-theme-accent-gradient-end: var(
    --twl-house-theme-active-accent-gradient-end,
    var(--twl-ref-brand-gradient-end)
  );
  --twl-theme-house-text: var(--twl-house-theme-active-text-color, var(--text-primary));
  --twl-theme-button-bg: var(--twl-house-theme-active-button-bg, var(--twl-theme-accent-fill));
  --twl-theme-button-color: var(
    --twl-house-theme-active-button-color,
    var(--twl-theme-accent-text)
  );
  --twl-theme-button-text: var(
    --twl-house-theme-active-button-text,
    var(--Base-bg-on-color, var(--background-on-color))
  );
}

html[data-mode='dark'] [data-theme] {
  --twl-house-theme-active-accent-bg: var(
    --twl-house-theme-dark-accent-bg,
    var(--twl-house-theme-light-accent-bg)
  );
  --twl-house-theme-active-accent-bg-active: var(
    --twl-house-theme-dark-accent-bg-active,
    var(--twl-house-theme-light-accent-bg-active)
  );
  --twl-house-theme-active-accent-color: var(
    --twl-house-theme-dark-accent-color,
    var(--twl-house-theme-light-accent-color)
  );
  --twl-house-theme-active-accent-gradient-end: var(
    --twl-house-theme-dark-accent-gradient-end,
    var(--twl-house-theme-light-accent-gradient-end)
  );
  --twl-house-theme-active-text-color: var(
    --twl-house-theme-dark-text-color,
    var(--twl-house-theme-light-text-color)
  );
  --twl-house-theme-active-button-bg: var(
    --twl-house-theme-dark-button-bg,
    var(--twl-house-theme-light-button-bg)
  );
  --twl-house-theme-active-button-color: var(
    --twl-house-theme-dark-button-color,
    var(--twl-house-theme-light-button-color)
  );
  --twl-house-theme-active-button-text: var(
    --twl-house-theme-dark-button-text,
    var(--twl-house-theme-light-button-text)
  );
}

@media (prefers-color-scheme: dark) {
  html:not([data-mode]) [data-theme],
  html[data-mode='system'] [data-theme] {
    --twl-house-theme-active-accent-bg: var(
      --twl-house-theme-dark-accent-bg,
      var(--twl-house-theme-light-accent-bg)
    );
    --twl-house-theme-active-accent-bg-active: var(
      --twl-house-theme-dark-accent-bg-active,
      var(--twl-house-theme-light-accent-bg-active)
    );
    --twl-house-theme-active-accent-color: var(
      --twl-house-theme-dark-accent-color,
      var(--twl-house-theme-light-accent-color)
    );
    --twl-house-theme-active-accent-gradient-end: var(
      --twl-house-theme-dark-accent-gradient-end,
      var(--twl-house-theme-light-accent-gradient-end)
    );
    --twl-house-theme-active-text-color: var(
      --twl-house-theme-dark-text-color,
      var(--twl-house-theme-light-text-color)
    );
    --twl-house-theme-active-button-bg: var(
      --twl-house-theme-dark-button-bg,
      var(--twl-house-theme-light-button-bg)
    );
    --twl-house-theme-active-button-color: var(
      --twl-house-theme-dark-button-color,
      var(--twl-house-theme-light-button-color)
    );
    --twl-house-theme-active-button-text: var(
      --twl-house-theme-dark-button-text,
      var(--twl-house-theme-light-button-text)
    );
  }
}

/* Legacy interaction compatibility; v3 shell owns header/footer colors.
   Exclude dream-chat links — they keep own color on hover (navbar / section / floating). */
:is(#main-body, .main-body) a:not(.btn):not(.dream-chat-btn):not(.dreamchat-see-all):not(.dreamchat-btn):not(.dreamchat-name-link):not(.dreamchat-avatar-link):not(.floating-chat-btn):not(.floating-chat-avatar-link):hover,
:is(#main-body, .main-body) a:not(.btn):not(.dream-chat-btn):not(.dreamchat-see-all):not(.dreamchat-btn):not(.dreamchat-name-link):not(.dreamchat-avatar-link):not(.floating-chat-btn):not(.floating-chat-avatar-link):focus-visible {
  color: var(--Text-Brand-hover) !important;
}

:is(#main-body, .main-body) a:not(.btn):not(.dream-chat-btn):not(.dreamchat-see-all):not(.dreamchat-btn):not(.dreamchat-name-link):not(.dreamchat-avatar-link):not(.floating-chat-btn):not(.floating-chat-avatar-link):active {
  color: var(--Text-Brand-active) !important;
}

.btn-primary {
  --bs-btn-color: var(--Text-Static-white);
  --bs-btn-bg: var(--Background-Brand-default);
  --bs-btn-border-color: var(--Border-Brand-default);
  --bs-btn-hover-color: var(--Text-Static-white);
  --bs-btn-hover-bg: var(--Background-Brand-hover);
  --bs-btn-hover-border-color: var(--Border-Brand-hover);
  --bs-btn-active-color: var(--Text-Static-white);
  --bs-btn-active-bg: var(--Background-Brand-active);
  --bs-btn-active-border-color: var(--Border-Brand-active);
  --bs-btn-disabled-color: var(--Text-Static-white);
  --bs-btn-disabled-bg: var(--Background-Brand-disabled);
  --bs-btn-disabled-border-color: var(--Border-Brand-disabled);

  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

.btn-primary:hover,
.btn-primary:is(:focus, :focus-visible) {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--Border-Brand-focus);
}

.btn-primary:is(:active, .active),
.show > .btn-primary.dropdown-toggle {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-tunwalai {
  color: var(--Text-Static-white) !important;
  background-color: var(--Background-Brand-default) !important;
  border-color: var(--Border-Brand-default) !important;
}

.btn-tunwalai:hover,
.btn-tunwalai:is(:focus, :focus-visible) {
  color: var(--Text-Static-white) !important;
  background-color: var(--Background-Brand-hover) !important;
  border-color: var(--Border-Brand-hover) !important;
}

.btn-tunwalai:is(:active, .active),
.show > .btn-tunwalai.dropdown-toggle {
  color: var(--Text-Static-white) !important;
  background-color: var(--Background-Brand-active) !important;
  border-color: var(--Border-Brand-active) !important;
}

.btn-tunwalai-outline {
  color: var(--Text-Brand-default) !important;
  background-color: var(--Base-bg-base) !important;
  border-color: var(--Border-Brand-default) !important;
}

.btn-tunwalai-outline:hover,
.btn-tunwalai-outline:is(:focus, :focus-visible) {
  color: var(--Text-Brand-hover) !important;
  background-color: var(--Background-Brand-subtle) !important;
  border-color: var(--Border-Brand-hover) !important;
}

.btn-tunwalai-outline:is(:active, .active),
.show > .btn-tunwalai-outline.dropdown-toggle {
  color: var(--Text-Brand-active) !important;
  background-color: var(--Background-Brand-subtle-active) !important;
  border-color: var(--Border-Brand-active) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus-visible {
  color: var(--Text-Brand-hover);
}

.navbar-light .navbar-nav .nav-link:is(:active, .active),
.navbar-light .navbar-nav .nav-item.active > .nav-link,
.dropdown-toggle-btn[aria-expanded='true'] {
  color: var(--Text-Brand-active);
}