/* ================================================================================================== */
/*  Don't edit directly • Generated on Thu, 08 Jan 2026 02:34:36 GMT • muibook.com                                        */
/* ================================================================================================== */

/* ================================================================================================== */
/*  Typography on the Web • Orchestrating Vertical Rhythm                                             */
/* ================================================================================================== */
/*  An introduction to baseline grids and vertical rhythm in web typography.                          */
/*  The video below explores the history of type through letterpress and how these                    */
/*  traditional principles can guide modern decisions.                                                */
/* ================================================================================================== */
/*  Watch: https://youtu.be/FFGSy0EfA9Y by Michael Trilford                                           */
/* ================================================================================================== */

/* ================================================================================================== */
/*                                         Type Scale                                                 */
/* -------------------------------------------------------------------------------------------------- */
/*   6px |  7px |  8px |  9px | 10px |  11px |  12px |  14px |  16px |  18px |  21px |  24px |  36px  */
/*  48px | 60px | 72px | 84px | 96px | 108px | 120px | 132px | 144px | 156px | 168px | 180px | 192px  */
/* ================================================================================================== */

/* ================================================================================================= */
/*                                           Leading Scale                                           */
/* ------------------------------------------------------------------------------------------------- */
/* ======================================= 18 / 11  =  1.636 ======================================= */
/* ======================================= 18 / 12  =  1.500 ======================================= */
/* ======================================= 21 / 14  =  1.500 ======================================= */
/* ======================================= 24 / 16  =  1.500 ======================================= */
/* ======================================= 24 / 18  =  1.333 ======================================= */
/* ======================================= 24 / 21  =  1.143 ======================================= */
/* ======================================= 36 / 24  =  1.500 ======================================= */
/* ======================================= 48 / 36  =  1.333 ======================================= */
/* ======================================= 60 / 48  =  1.250 ======================================= */
/* ======================================= 72 / 60  =  1.200 ======================================= */
/* ======================================= 84 / 72  =  1.167 ======================================= */
/* ======================================= 96 / 84  =  1.143 ======================================= */
/* ====================================== 108 / 96  =  1.125 ======================================= */
/* ================================================================================================= */

:where(html) {
  --font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-size-15: 1.1rem;
  --font-size-25: 1.2rem;
  --font-size-50: 1.4rem;
  --font-size-100: 1.6rem;
  --font-size-200: 1.8rem;
  --font-size-300: 2.1rem;
  --font-size-400: 2.4rem;
  --font-size-500: 3.6rem;
  --font-size-600: 4.8rem;
  --font-size-700: 6rem;
  --font-size-800: 7.2rem;
  --font-size-900: 8.4rem;
  --font-size-1000: 9.6rem;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --line-height-15: 1.63636364;
  --line-height-25: 1.5;
  --line-height-50: 1.5;
  --line-height-100: 1.5;
  --line-height-200: 1.33333333;
  --line-height-300: 1.14285714;
  --line-height-400: 1.5;
  --line-height-500: 1.33333333;
  --line-height-600: 1.25;
  --line-height-700: 1.2;
  --line-height-800: 1.16666667;
  --line-height-900: 1.14285714;
  --line-height-1000: 1.125;
  --black: black;
  --black-opacity-0: oklch(0% 0 0 / 0);
  --black-opacity-10: oklch(0% 0 0 / 0.1);
  --black-opacity-20: oklch(0% 0 0 / 0.2);
  --black-opacity-30: oklch(0% 0 0 / 0.3);
  --black-opacity-40: oklch(0% 0 0 / 0.4);
  --black-opacity-50: oklch(0% 0 0 / 0.5);
  --black-opacity-60: oklch(0% 0 0 / 0.6);
  --black-opacity-70: oklch(0% 0 0 / 0.7);
  --black-opacity-80: oklch(0% 0 0 / 0.8);
  --black-opacity-90: oklch(0% 0 0 / 0.9);
  --black-opacity-100: oklch(0% 0 0);
  --white: #ffffff;
  --white-opacity-0: oklch(100% 0.00011 271.152 / 0);
  --white-opacity-10: oklch(100% 0.00011 271.152 / 0.1);
  --white-opacity-20: oklch(100% 0.00011 271.152 / 0.2);
  --white-opacity-30: oklch(100% 0.00011 271.152 / 0.3);
  --white-opacity-40: oklch(100% 0.00011 271.152 / 0.4);
  --white-opacity-50: oklch(100% 0.00011 271.152 / 0.5);
  --white-opacity-60: oklch(100% 0.00011 271.152 / 0.6);
  --white-opacity-70: oklch(100% 0.00011 271.152 / 0.7);
  --white-opacity-80: oklch(100% 0.00011 271.152 / 0.8);
  --white-opacity-90: oklch(100% 0.00011 271.152 / 0.9);
  --white-opacity-100: oklch(100% 0.00011 271.152);
  --grey-100: oklch(97.015% 0.00011 271.152);
  --grey-200: oklch(92.191% 0.0001 271.152);
  --grey-300: oklch(84.522% 0.0001 271.152);
  --grey-400: oklch(73.802% 0.00008 271.152);
  --grey-500: oklch(62.675% 0.00007 271.152);
  --grey-600: oklch(51.028% 0.00006 271.152);
  --grey-700: oklch(44.953% 0.00005 271.152);
  --grey-800: oklch(38.666% 0.00004 271.152);
  --grey-900: oklch(32.109% 0.00004 271.152);
  --grey-1000: oklch(25.197% 0.00003 271.152);
  --grey-1100: oklch(17.764% 0.00002 271.152);
  --grey-1200: oklch(11.492% 0.00001 271.152);
  --red-100: oklch(98% 0.03 25.0);
  --red-200: oklch(95% 0.10 25.0);
  --red-300: oklch(82% 0.14 25.0);
  --red-400: oklch(72% 0.17 25.0);
  --red-500: oklch(62% 0.19 25.0);
  --red-600: oklch(52% 0.19 25.0);
  --red-700: oklch(46% 0.19 25.0);
  --red-800: oklch(40% 0.19 25.0);
  --red-900: oklch(34% 0.19 25.0);
  --red-1000: oklch(28% 0.19 25.0);
  --orange-100: oklch(98% 0.03 71);
  --orange-200: oklch(94% 0.07 71);
  --orange-300: oklch(90% 0.11 71);
  --orange-400: oklch(85% 0.14 71);
  --orange-500: oklch(78% 0.16 71);
  --orange-600: oklch(70% 0.16 71);
  --orange-700: oklch(64% 0.16 71);
  --orange-800: oklch(57% 0.16 71);
  --orange-900: oklch(51% 0.16 71);
  --orange-1000: oklch(45% 0.16 71);
  --green-100: oklch(96.2% 0.034 145);
  --green-200: oklch(92% 0.075 145);
  --green-300: oklch(88% 0.120 145);
  --green-400: oklch(84.5% 0.160 145);
  --green-500: oklch(70% 0.220 145);
  --green-600: oklch(63% 0.200 145);
  --green-700: oklch(57% 0.180 145);
  --green-800: oklch(52% 0.160 145);
  --green-900: oklch(46% 0.140 145);
  --green-1000: oklch(42% 0.120 145);
  --blue-100: oklch(95.6% 0.022 250);
  --blue-200: oklch(91% 0.045 250);
  --blue-300: oklch(82% 0.091 250);
  --blue-400: oklch(78.8% 0.105 250);
  --blue-500: oklch(73% 0.130 245);
  --blue-600: oklch(67% 0.150 249);
  --blue-700: oklch(63% 0.155 249);
  --blue-800: oklch(57% 0.167 251);
  --blue-900: oklch(52% 0.178 253);
  --blue-1000: oklch(48% 0.151 253);
  --radius-100: 4px;
  --radius-150: 6px;
  --radius-200: 8px;
  --radius-300: 16px;
  --radius-400: 24px;
  --radius-500: 36px;
  --radius-600: 48px;
  --radius-000: 0;
  --space-100: 0.6rem;
  --space-200: 0.8rem;
  --space-300: 1.2rem;
  --space-400: 1.6rem;
  --space-500: 2.4rem;
  --space-600: 3.6rem;
  --space-700: 4.8rem;
  --space-800: 6rem;
  --space-000: 0;
  --space-025: 0.2rem;
  --space-050: 0.4rem;
  --stroke-size-100: 1px;
  --stroke-size-200: 2px;
  --stroke-size-300: 3px;
  --stroke-size-400: 4px;
  --stroke-size-500: 5px;
  --stroke-solid: solid;
  --stroke-outset: outset;
  --speed-100: 0.1s;
  --speed-200: 0.2s;
  --speed-300: 0.3s;
  --speed-400: 0.4s;
}