@charset "UTF-8";

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600&display=swap');

:root {
  /* Font Families*/
  --xl-font-roboto: 'Roboto', sans-serif;
  --xl-font-roboto-condensed: 'Roboto Condensed', sans-serif;
  --xl-mono: 'Source Code Pro', monospace;
  /* Font Features*/
  --xl-font-features-default: 'liga' on, 'kern' on, 'clig' on;
  --xl-font-features-heading: 'liga' on, 'kern' on;
  --xl-font-features-mono: 'liga' off, 'kern' on, 'zero' on;
  /* Typography Scale*/
  --xl-xl: clamp(2.4rem, 5vw, 3.5rem)
  --xl-h1: clamp(1.75rem, 3vw + 0.5rem, 2.2rem);
  --xl-h2: clamp(1.5rem, 2.6vw + 0.4rem, 1.8rem);
  --xl-h3: clamp(1.2rem, 2.2vw + 0.3rem, 1.35rem);
  --xl-h4: clamp(1.125rem, 2vw + 0.25rem, 1.625rem);
  --xl-h5: clamp(1rem, 1.8vw + 0.2rem, 1.375rem);
  --xl-h6: clamp(0.875rem, 1.5vw + 0.15rem, 1.25rem);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem; /*14px*/
  --text-base: 1rem;
  --txt-base: clamp(1rem, 2vw, 1.125rem);
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  /*  Line Heights */
  --lh-1: 1;
  --lh-2: 1.2;
  --lh-3: 1.3;
  --lh-4: 1.4;
  --lh-5: 1.5;
  --lh-6: 1.6;
  /* Font Weights */
  --txt-3: 300;
  --txt-4: 400;
  --txt-5: 500;
  --txt-6: 600;
  --txt-7: 700;
  --txt-8: 800;
  --txt-9: 900;
  /* Spacing Scale */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
  --radius-code: 0.25rem;
  /* Layout Dimensions */
  --banner-h: 36px;
  --nav-h: 60px;
  --sidebar-width: 340px;
  --right-width: 350px;
  --collapsed-width: 2rem;
  --header-height: 64px;
  --toc-indent: 28px;
  /* Transitions */
  --transition-slow: 0.4s;
  --transition-fast: 0.2s;
  --transition-speed: 0.3s;
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* Durations */
  --motion-fast: 80ms;
  --motion-base: 120ms;
  --motion-slow: 200ms;
  /* Easing curves */
  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Borders */
  --xl-borderWidth-thin: max(1px, 0.0625rem);
  --xl-borderWidth-thick: max(4px, 0.25rem);
  --xl-borderWidth-xthick: max(6px, 0.375rem);
}
/* ============================================
   LIGHT THEME COLORS
   ============================================ */
:root[data-theme='light'] {
  /* Primary Colors */
  --xl-green: oklch(0.6804 0.139468 166.986);  /*#00b386*/  
  --xl-green-h: oklch(0.6208 0.1263 167.59);  /*#009e77*/
  --xl-green-1: oklch(95% 0.052 163.051);
  --xl-green-4: oklch(76.5% 0.177 163.223); /*00d492*/
  --xl-green-5: oklch(0.7019 0.15768 160.437);
  --xl-green-5-hover: oklch(0.62 0.18 158);
  --xl-green-6: oklch(0.596 0.145 163.225); /*#009966*/
  --xl-green-7: oklch(0.596 0.145 163.225);
  --xl-green-drk: oklch(0.4885 0.0826 172.5); /*#1f6f5b*/
  --xl-green-start: oklch(0.6804 0.139468 166.986);  /*#00b386*/
  --xl-green-mid: oklch(0.7624 0.1544 159.36); /*#3ecf8e*/;
  --xl-red: oklch(0.5517 0.2051 24.53); /*#cf222e*/
  --xl-red-h: oklch(0.4591 0.1777 21.87); /*a40e26*/
  --xl-red-a: oklch(0.3798 0.1485 23.87); /*7f0716*/
  /* Text Colors */
  --xl-primary: oklch(0.2542 0.0111 254.04);
  --xl-primary-1: oklch(0.2785 0.0132 253.04);
  --xl-primary-2: oklch(0.2785 0.0132 253.04); /*#c9d1d9 for 010409*/ 
  --xl-muted: oklch(0.4951 0.0215 250.78);  /*59636e*/
  --xl-muted-h: oklch(0.42 0.02 250); /*#454e58*/
  --xl-muted-1: oklch(0.5 0.02 260);
  --xl-muted-2: oklch(0.4594 0.0219 250.81);
  --xl-muted-2-hover: oklch(0.52 0.021 250.78);
  --xl-muted-hxx: oklch(30% 0.02 260); /*#282e38*/
  /* Alpha Colors */
  --xl-green-dim: oklch(0.7019 0.15768 160.4375 / .08);
  --xl-green-5-10: oklch(0.6804 0.139468 166.986 / 0.10);
  --xl-green-5-20: oklch(0.6804 0.139468 166.986 / 0.20);
  --xl-bg-5-10: oklch(0.1763 0.014 258.36 / 0.10);
   --xl-green-30: oklch(0.7019 0.15768 160.4375 / .30)
  /* Background Colors*/
  --xl-bg: oklch(0.9842 0.0034 247.86); /*#f8fafc*/
  --xl-bg-muted: oklch(0.9782 0.0034 247.86); /*f6f8fa*/
  --xl-bg-muted-h: oklch(0.9777 0.0051 247.88); /*f5f8fb*/
  --xl-bg-1: oklch(0.9703 0.0103 247.93); /*#f0f6fc*/
  --xl-bg-2: oklch(0.9782 0.0034 247.86); /*#f6f8fa*/
  --xl-bg-3: oklch(0.9782 0.0034 247.86);
  --xl-bg-3-h: oklch(0.967 0.0029 264.54);
  --xl-bg-4: oklch(0.1039 0.0194 248.35); /*010409*/
  --xl-bd: oklch(0.8758 0.0123 247.97); /*#d0d7de*/
  --xl-bd-1: oklch(0.3837 0.0179 254.74); /*d1d9e0*/
  --xl-bd-2: oklch(0.8717 0.0093 258.34); /*#d1d5db*/
  --bg-sidebar: oklch(1 0 0);
  --xl-menu-title: oklch(0.9683 0.0069 247.9); /*#f1f5f9*/
  --submenu-hover-bg: rgba(0, 0, 0, 0.04);
    /* Code Colors */
  --code-bg: oklch(0.9612 0 0);
  --code-block: #FAFAFC;  
  /* Shadows  */
  --xl-sd-sm: 0px 1px 0px #ffffff0a, 0px -1px 0px #ffffff0a;
  --xl-sd-md: 0 3px 6px rgba(140, 149, 159, 0.15);
  --xl-sd-inset: 0 1px 0 #ffffff0a, 0 -1px 0 #ffffff0a;
  --xl-sd-inset-1: 0 2px 4px -1px #00000008, 0 -1px 0 #ffffff0d;
  --xl-sd-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.05);
  --xl-sd-2: 0 2px 6px rgba(0,0,0,0.15);
  --xl-sd-3: 0 2px 4px rgba(0, 0, 0, 0.1);
  --xl-sd-doc: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 230, 120, 0.6);
  /* Alert Box Colors*/
  --tip-bg: oklch(0.74 0.14 230 / 0.12);
  --tip-bd: oklch(0.74 0.14 230 / 0.28);
  --tip-fg: oklch(0.47 0.12 230);
  --tip-bg-hover: oklch(0.74 0.14 230 / 0.18);
  --tip-bd-hover: oklch(0.74 0.14 230 / 0.4);
  --tip-code-bg: oklch(96% 0.02 240);
  --tip-code-fg: oklch(40% 0.09 230);
  --tip-code-bd: oklch(85% 0.03 230);

  --note-bg: oklch(0.85 0.12 135 / 0.12);
  --note-bd: oklch(0.85 0.12 135 / 0.28);
  --note-fg: oklch(0.35 0.14 135);
  --note-bg-hover: oklch(0.85 0.12 135 / 0.18);
  --note-bd-hover: oklch(0.85 0.12 135 / 0.4);
  --note-code-bg: oklch(96% 0.03 135);
  --note-code-fg: oklch(40% 0.09 135);
  --note-code-bd: oklch(85% 0.03 135);

  --info-bg: oklch(0.74 0.18 220 / 0.14);
  --info-bd: oklch(0.74 0.18 220 / 0.32);
  --info-fg: oklch(0.48 0.14 220);
  --info-bg-hover: oklch(0.74 0.18 220 / 0.20);
  --info-bd-hover: oklch(0.74 0.18 220 / 0.42);
  --info-code-bg: oklch(96% 0.02 230);
  --info-code-fg: oklch(40% 0.09 230);
  --info-code-bd: oklch(85% 0.03 230);

  --error-bg: oklch(0.70 0.20 28 / 0.12);
  --error-bd: oklch(0.70 0.20 28 / 0.30);
  --error-fg: oklch(0.52 0.23 28);
  --error-bg-hover: oklch(0.70 0.20 28 / 0.18);
  --error-bd-hover: oklch(0.70 0.20 28 / 0.45);
  --error-code-bg: oklch(96% 0.02 30);
  --error-code-fg: oklch(40% 0.12 28);
  --error-code-bd: oklch(85% 0.03 30);

  --help-bg: oklch(0.70 0.15 260 / 0.12);
  --help-bd: oklch(0.70 0.15 260 / 0.28);
  --help-fg: oklch(0.45 0.15 260);
  --help-bg-hover: oklch(0.70 0.15 260 / 0.18);
  --help-bd-hover: oklch(0.70 0.15 260 / 0.40);
  --help-code-bg: oklch(96% 0.02 255);
  --help-code-fg: oklch(40% 0.09 260);
  --help-code-bd: oklch(85% 0.03 255);

  --warn-bg: oklch(0.81 0.17 80 / 0.15);
  --warn-bd: oklch(0.81 0.17 80 / 0.35);
  --warn-fg: oklch(0.55 0.17 80);
  --warn-bg-hover: oklch(0.81 0.17 80 / 0.22);
  --warn-bd-hover: oklch(0.81 0.17 80 / 0.50);
  --warn-code-bg: oklch(96% 0.03 85);
  --warn-code-fg: oklch(40% 0.10 80);
  --warn-code-bd: oklch(85% 0.03 80);

  /* Prism Theme ── PRISM.JS — PREMIUM PRO THEME (LIGHT + DARK, 2025 EDITION) */
  --prism-fg: #24292f;
  --prism-bg: #FAFAFC;
  --prism-inline-bg: #F1F1F5;
  --prism-border: #E5E6EB;
  --prism-text: #1A1A1F;
  --prism-inline-text: #A06000;
  --prism-comment: #8A93A8;
  --prism-punctuation: #6B6F7A;
  --prism-tag: #D91E3A;
  --prism-keyword: #8E44FF;
  --prism-property: #C47300;
  --prism-function: #0067CE;
  --prism-number: #C25E00;
  --prism-string: #0CA770;
  --prism-operator: #0097B8;
  --prism-inserted: #009E3E;
  --prism-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ============================================
   DARK THEME COLORS
   ============================================ */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* Primary Colors*/
  --xl-green: oklch(0.7019 0.15768 160.4375);  /*#00bc7d*/
  --xl-green-h: oklch(0.7605 0.167679 161.6423);  /*#00d18f*/
  --xl-green-a: oklch(0.6203 0.1384 160.85);  /*#009f6a*/
  --xl-green-5: oklch(0.7624 0.1544 159.36);
  --xl-green-5-hover: oklch(0.82 0.17 158);
  --xl-green-6: oklch(0.7862 0.192 155.63);
  --xl-green-start: oklch(0.7019 0.15768 160.4375);  /*#00bc7d*/
  --xl-green-mid: oklch(0.7845 0.1325 181.91); /*#2dd4bf*/;
  --xl-red: oklch(58.6% 0.253 17.585); /*#ec003f*/
  --xl-red-h: oklch(71.2% 0.194 13.428); /*#ff637e*/
  --xl-red-a: oklch(0.673 0.2146 25.04); /*ff4d4d*/
  /* Text Colors*/
  --xl-primary: oklch(0.9703 0.0103 247.93);
  --xl-primary-1: oklch(0.8569 0.0141 247.99);
  --xl-primary-2: oklch(0.2785 0.0132 253.04); /*#c9d1d9 for 010409*/ 
  --xl-muted: oklch(0.6769 0.0155 254.64);  /*9198a1*/
  --xl-muted-h: oklch(0.75 0.015 255); /*#a8afb8*/
  --xl-muted-1: oklch(75% 0.025 240);
  --xl-muted-2: oklch(0.6198 0.0165 251.24);
  --xl-muted-2-hover: oklch(0.70 0.015 254.64);
  --xl-muted-hxx: oklch(88% 0.02 240); /*#ccdae4*/

  /* Alpha Colors */
  --xl-green-dim: oklch(0.7019 0.15768 160.4375 / .12);
  --xl-green-5-10: oklch(69.6% 0.17 162.48 / 0.15);
  --xl-green-5-20: oklch(69.6% 0.17 162.48 / 0.25);
  --xl-green-30: oklch(0.7019 0.15768 160.4375 / .30)

  /* Background Colors */
  --xl-bg: oklch(0.1763 0.014 258.36);
  --xl-bg-muted: oklch(0.2198 0.0182 255.71); /*151b23*/
  --xl-bg-muted-h: oklch(0.2819 0.0256 255.73); /*212a36*/
  --xl-bg-1: oklch(0.1039 0.0194 248.35); /*010409*/
  --xl-bg-2: oklch(0.2202 0.0157 256.82); /*161b22*/
  --xl-bg-3: oklch(0.2666 0.015 256.8); /*21262d*/
  --xl-bg-3-h: oklch(0.33 0.0149 252.31); /*30363d*/
  --xl-bg-4: oklch(0.1039 0.0194 248.35); /*010409*/
  --xl-bd: oklch(0.33 0.0149 252.31); /*30363d*/
  --xl-bd-1: oklch(0.3837 0.0179 254.74); /*3d444d*/
  --xl-bd-2: oklch(0.33 0.0149 252.31); /*#30363d*/
  --bg-sidebar: oklch(0.2202 0.0157 256.82); /*161b22*/
  --xl-menu-title: oklch(0.2598 0.0175 244.95); /*#1d252c*/
  --submenu-hover-bg: rgba(255, 255, 255, 0.04);
  
  /* Code Colors */
  --code-bg: oklch(0.2598 0.0175 244.95);
  --code-block: #282c34;

  /* Shadows*/
  --xl-sd-sm: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
  --xl-sd-md: 0 3px 6px rgba(1, 4, 9, 0.6);
  --xl-sd-inset: 0 1px 1px 0 #1f23280f, 0 1px 3px 0 #1f23280f;
  --xl-sd-inset-1: 0 1px 2px 0 #1f232812, 0 2px 6px 0 #1f232814;
  --xl-sd-1: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 12px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.55);
  --xl-sd-2: 0 2px 6px rgba(0,0,0,0.35);
  --xl-sd-3: 0 2px 4px rgba(0,0,0,0.30);
  --xl-sd-doc: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 0 12px rgba(0, 230, 120, 0.8);

  /* Alert Box Colors */
  --tip-bg: oklch(0.7 0.14 230 / 0.2);
  --tip-bd: oklch(0.7 0.14 230 / 0.45);
  --tip-fg: oklch(0.88 0.12 230);
  --tip-bg-hover: oklch(0.7 0.14 230 / 0.28);
  --tip-bd-hover: oklch(0.7 0.14 230 / 0.55);
  --tip-code-bg: oklch(28% 0.02 240);
  --tip-code-fg: oklch(88% 0.05 230);
  --tip-code-bd: oklch(40% 0.03 230);

  --note-bg: oklch(0.28 0.12 135 / 0.2);
  --note-bd: oklch(0.28 0.12 135 / 0.45);
  --note-fg: oklch(0.9 0.14 135);
  --note-bg-hover: oklch(0.28 0.12 135 / 0.28);
  --note-bd-hover: oklch(0.28 0.12 135 / 0.55);
  --note-code-bg: oklch(24% 0.03 135);
  --note-code-fg: oklch(88% 0.05 135);
  --note-code-bd: oklch(40% 0.03 135);

  --info-bg: oklch(0.68 0.18 220 / 0.22);
  --info-bd: oklch(0.68 0.18 220 / 0.48);
  --info-fg: oklch(0.88 0.14 220);
  --info-bg-hover: oklch(0.68 0.18 220 / 0.30);
  --info-bd-hover: oklch(0.68 0.18 220 / 0.55);
  --info-code-bg: oklch(28% 0.02 240);
  --info-code-fg: oklch(88% 0.05 230);
  --info-code-bd: oklch(40% 0.03 230);

  --error-bg: oklch(0.45 0.20 28 / 0.22);
  --error-bd: oklch(0.45 0.20 28 / 0.45);
  --error-fg: oklch(0.92 0.18 28);
  --error-bg-hover: oklch(0.45 0.20 28 / 0.30);
  --error-bd-hover: oklch(0.45 0.20 28 / 0.55);
  --error-code-bg: oklch(28% 0.05 30);
  --error-code-fg: oklch(88% 0.10 28);
  --error-code-bd: oklch(40% 0.04 28);

  --help-bg: oklch(0.42 0.15 260 / 0.22);
  --help-bd: oklch(0.42 0.15 260 / 0.45);
  --help-fg: oklch(0.90 0.12 260);
  --help-bg-hover: oklch(0.42 0.15 260 / 0.30);
  --help-bd-hover: oklch(0.42 0.15 260 / 0.55);
  --help-code-bg: oklch(28% 0.03 255);
  --help-code-fg: oklch(88% 0.05 260);
  --help-code-bd: oklch(40% 0.03 255);

  --warn-bg: oklch(0.45 0.17 80 / 0.22);
  --warn-bd: oklch(0.45 0.17 80 / 0.45);
  --warn-fg: oklch(0.92 0.14 80);
  --warn-bg-hover: oklch(0.45 0.17 80 / 0.30);
  --warn-bd-hover: oklch(0.45 0.17 80 / 0.55);
  --warn-code-bg: oklch(28% 0.04 85);
  --warn-code-fg: oklch(88% 0.06 80);
  --warn-code-bd: oklch(40% 0.04 80);

  /* Prism Theme ── PRISM.JS — PREMIUM PRO THEME (LIGHT + DARK, 2025 EDITION) */
  --prism-fg: #e6edf3;
  --prism-bg: #1f2228;
  --prism-inline-bg: #2A2C33;
  --prism-border: #2B2D33;
  --prism-text: #E8E8F2;
  --prism-inline-text: #FFD479;
  --prism-comment: #6D7A99;
  --prism-punctuation: #AEAFB7;
  --prism-tag: #FF6F7D;
  --prism-keyword: #C28CFF;
  --prism-property: #FFD479;
  --prism-function: #6ECBFF;
  --prism-number: #FFB86C;
  --prism-string: #8AFFC1;
  --prism-operator: #5BF0E6;
  --prism-inserted: #00C853;
  --prism-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

   
/* ─── TOC Variables ─────────────────────────────────────────── */
  .xls-toc {
  --toc-accent:      #059669;
  --toc-accent-dim:  #05966930;
  --toc-accent-bg:   #f0fdf4;
  --toc-radius:      10px;
  --toc-font:        'Inter', system-ui, sans-serif;
}
/* Prism Font ── PRISM.JS — PREMIUM PRO THEME (LIGHT + DARK, 2025 EDITION) */
:root {
  --prism-font: var(--xl-font-monospace);
  --prism-padding: 1.25em 1.5em;
  --prism-radius: var(--radius);
} 
/* ============================================================
   PRISM.JS — PREMIUM PRO THEME (LIGHT + DARK, 2025 EDITION)
   FULLY VARIABLE-DRIVEN
   ============================================================ */

/* ------------------------------------------
   LIGHT THEME VARIABLES
   ------------------------------------------ */
   :root[data-theme='light'] {
    /* background */   
    --prism-border: #E5E6EB;
    /* text */
    --prism-text: #1A1A1F;
    --prism-inline-text: #A06000;
    /* tokens */
    --prism-comment: #8A93A8;
    --prism-punctuation: #6B6F7A;
    --prism-tag: #D91E3A;
    --prism-keyword: #8E44FF;
    --prism-property: #C47300;
    --prism-function: #0067CE;
    --prism-number: #C25E00;
    --prism-string: #0CA770;
    --prism-operator: #0097B8;
    --prism-inserted: #009E3E;
}
/* ------------------------------------------
   DARK THEME VARIABLES
   ------------------------------------------ */
:root[data-theme='dark'] {
    /* background */
    --prism-border: #2B2D33;
    /* text */
    --prism-text: #E8E8F2;
    --prism-inline-text: #FFD479;
    /* tokens */
    --prism-comment: #6D7A99;
    --prism-punctuation: #AEAFB7;
    --prism-tag: #FF6F7D;
    --prism-keyword: #C28CFF;
    --prism-property: #FFD479;
    --prism-function: #6ECBFF;
    --prism-number: #FFB86C;
    --prism-string: #8AFFC1;
    --prism-operator: #5BF0E6;
    --prism-inserted: #00C853;
}
:root[data-theme="light"] {
  --tooltip-bg: rgba(36, 41, 47, 0.95);  /* #24292f */
  --tooltip-fg: #ffffff;
  --tooltip-bd: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] {
  --tooltip-bg: rgba(22, 27, 34, 0.95);  /* #161b22 */
  --tooltip-fg: #e6edf3;
  --tooltip-bd: rgba(240, 246, 252, 0.08);
}
 
/* ----------------------------------------------------------
   Code Block (2025 Modern Layout)
---------------------------------------------------------- */
:root[data-theme="light"] {
  --border-color: #e5e7eb;
  --hover-bg: rgba(0, 0, 0, 0.05);
}
:root[data-theme="dark"] {  
  --border-color: #1f242c;
  --hover-bg: rgba(255,255,255,0.06);
}
/* Light theme */
:root[data-theme='light'] {
  --scrollbar-thumb: #3d444db3;
  --scrollbar-track: #f0f0f0;
}
/* Dark theme */
:root[data-theme='dark'] {
  --scrollbar-thumb: #3d444db3;
  --scrollbar-track: #1e1e1e;
}
/* Firefox */
* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin; /* ultra-thin in Firefox */
}
/* WebKit browsers */
::-webkit-scrollbar {
  width: 8px;   /* ultra-thin vertical scrollbar */
  height: 8px;  /* ultra-thin horizontal scrollbar */
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid var(--scrollbar-track); /* keeps thumb “floating” */
  transition: background-color 0.3s ease, transform 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(61, 68, 77, 0.9); /* slightly darker on hover */
  transform: scale(1.1); /* subtle “pop” effect */
}
/* ============================================
   BASE STYLES & RESET
   Core HTML element styling 2
   ============================================ */

/* Universal Reset*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}

html { scroll-behavior: smooth; }