raw.js

const css = "/* Typeography */\n:root {\n  --font-sans:\n    -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica,\n    Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";\n\n  --min-vw: 360;\n  --max-vw: 800;\n\n  --line-height: calc(2px + 2ex + 2px);\n\n  /* Vertical Spacing */\n  --vs-s: 0.5rem;\n  --vs-base: 1rem;\n  --vs-m: 1.5rem;\n  --vs-l: 2rem;\n  --vs-xl: 4rem;\n\n  /* Border Radius */\n  --br-xs: 2px;\n  --br-s: 4px;\n  --br-m: 8px;\n  --br-l: 16px;\n\n  /* Padding */\n  --pad-xs: 0.25rem;\n  --pad-s: 0.5rem;\n  --pad-m: 0.75rem;\n  --pad-l: 1rem;\n  --pad-xl: 1.5rem;\n  --pad-xxl: 2rem;\n  --pad-xxxl: 4rem;\n\n  /* Shadows - Layered, adaptive shadows with light/dark mode support */\n  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.04);\n  --shadow-2: 0 1px 3px rgb(0 0 0 / 0.06);\n  --shadow-3: 0 2px 4px rgb(0 0 0 / 0.05), 0 4px 8px rgb(0 0 0 / 0.1);\n  --shadow-4: 0 4px 8px rgb(0 0 0 / 0.06), 0 8px 16px rgb(0 0 0 / 0.12);\n  --shadow-5: 0 8px 16px rgb(0 0 0 / 0.08), 0 12px 24px rgb(0 0 0 / 0.14);\n  --shadow-6:\n    0 12px 24px rgb(0 0 0 / 0.1), 0 16px 32px rgb(0 0 0 / 0.16),\n    0 24px 48px rgb(0 0 0 / 0.18);\n\n  --box:\n    0 1px 2px rgb(0 0 0 / 0.04), inset -1px 1px 2px rgb(255 255 255 / 0.1),\n    inset 1px 1px 2px rgb(255 255 255 / 0.1);\n\n  /* Color System - OKLCH with 1-9 scales */\n  /* Base colors (scale 5) */\n  --yellow: oklch(0.88 0.15 95);\n  --amber: oklch(0.78 0.16 80);\n  --orange: oklch(0.75 0.18 65);\n  --red: oklch(0.62 0.22 35);\n  --pink: oklch(0.62 0.25 350);\n  --purple: oklch(0.65 0.24 310);\n  --indigo: oklch(0.55 0.25 275);\n  --blue: oklch(0.5 0.28 270);\n  --teal: oklch(0.82 0.08 185);\n  --green: oklch(0.72 0.18 165);\n  --lime: oklch(0.8 0.16 130);\n  --highlighter: oklch(0.88 0.22 115);\n  --brown: oklch(0.55 0.12 60);\n\n  /* Yellow scale */\n  --yellow-1: oklch(from var(--yellow) l c h / 0.1);\n  --yellow-2: oklch(from var(--yellow) l c h / 0.2);\n  --yellow-3: oklch(from var(--yellow) l c h / 0.3);\n  --yellow-4: oklch(from var(--yellow) l c h / 0.4);\n  --yellow-5: oklch(from var(--yellow) l c h / 0.5);\n  --yellow-6: oklch(from var(--yellow) l c h / 0.6);\n  --yellow-7: oklch(from var(--yellow) l c h / 0.75);\n  --yellow-8: oklch(from var(--yellow) l c h / 0.9);\n  --yellow-9: var(--yellow);\n\n  /* Amber scale */\n  --amber-1: oklch(from var(--amber) l c h / 0.1);\n  --amber-2: oklch(from var(--amber) l c h / 0.2);\n  --amber-3: oklch(from var(--amber) l c h / 0.3);\n  --amber-4: oklch(from var(--amber) l c h / 0.4);\n  --amber-5: oklch(from var(--amber) l c h / 0.5);\n  --amber-6: oklch(from var(--amber) l c h / 0.6);\n  --amber-7: oklch(from var(--amber) l c h / 0.75);\n  --amber-8: oklch(from var(--amber) l c h / 0.9);\n  --amber-9: var(--amber);\n\n  /* Orange scale */\n  --orange-1: oklch(from var(--orange) l c h / 0.1);\n  --orange-2: oklch(from var(--orange) l c h / 0.2);\n  --orange-3: oklch(from var(--orange) l c h / 0.3);\n  --orange-4: oklch(from var(--orange) l c h / 0.4);\n  --orange-5: oklch(from var(--orange) l c h / 0.5);\n  --orange-6: oklch(from var(--orange) l c h / 0.6);\n  --orange-7: oklch(from var(--orange) l c h / 0.75);\n  --orange-8: oklch(from var(--orange) l c h / 0.9);\n  --orange-9: var(--orange);\n\n  /* Red scale */\n  --red-1: oklch(from var(--red) l c h / 0.1);\n  --red-2: oklch(from var(--red) l c h / 0.2);\n  --red-3: oklch(from var(--red) l c h / 0.3);\n  --red-4: oklch(from var(--red) l c h / 0.4);\n  --red-5: oklch(from var(--red) l c h / 0.5);\n  --red-6: oklch(from var(--red) l c h / 0.6);\n  --red-7: oklch(from var(--red) l c h / 0.75);\n  --red-8: oklch(from var(--red) l c h / 0.9);\n  --red-9: var(--red);\n\n  /* Pink scale */\n  --pink-1: oklch(from var(--pink) l c h / 0.1);\n  --pink-2: oklch(from var(--pink) l c h / 0.2);\n  --pink-3: oklch(from var(--pink) l c h / 0.3);\n  --pink-4: oklch(from var(--pink) l c h / 0.4);\n  --pink-5: oklch(from var(--pink) l c h / 0.5);\n  --pink-6: oklch(from var(--pink) l c h / 0.6);\n  --pink-7: oklch(from var(--pink) l c h / 0.75);\n  --pink-8: oklch(from var(--pink) l c h / 0.9);\n  --pink-9: var(--pink);\n\n  /* Purple scale */\n  --purple-1: oklch(from var(--purple) l c h / 0.1);\n  --purple-2: oklch(from var(--purple) l c h / 0.2);\n  --purple-3: oklch(from var(--purple) l c h / 0.3);\n  --purple-4: oklch(from var(--purple) l c h / 0.4);\n  --purple-5: oklch(from var(--purple) l c h / 0.5);\n  --purple-6: oklch(from var(--purple) l c h / 0.6);\n  --purple-7: oklch(from var(--purple) l c h / 0.75);\n  --purple-8: oklch(from var(--purple) l c h / 0.9);\n  --purple-9: var(--purple);\n\n  /* Indigo scale */\n  --indigo-1: oklch(from var(--indigo) l c h / 0.1);\n  --indigo-2: oklch(from var(--indigo) l c h / 0.2);\n  --indigo-3: oklch(from var(--indigo) l c h / 0.3);\n  --indigo-4: oklch(from var(--indigo) l c h / 0.4);\n  --indigo-5: oklch(from var(--indigo) l c h / 0.5);\n  --indigo-6: oklch(from var(--indigo) l c h / 0.6);\n  --indigo-7: oklch(from var(--indigo) l c h / 0.75);\n  --indigo-8: oklch(from var(--indigo) l c h / 0.9);\n  --indigo-9: var(--indigo);\n\n  /* Green scale */\n  --green-1: oklch(from var(--green) l c h / 0.1);\n  --green-2: oklch(from var(--green) l c h / 0.2);\n  --green-3: oklch(from var(--green) l c h / 0.3);\n  --green-4: oklch(from var(--green) l c h / 0.4);\n  --green-5: oklch(from var(--green) l c h / 0.5);\n  --green-6: oklch(from var(--green) l c h / 0.6);\n  --green-7: oklch(from var(--green) l c h / 0.75);\n  --green-8: oklch(from var(--green) l c h / 0.9);\n  --green-9: var(--green);\n\n  /* Lime scale */\n  --lime-1: oklch(from var(--lime) l c h / 0.1);\n  --lime-2: oklch(from var(--lime) l c h / 0.2);\n  --lime-3: oklch(from var(--lime) l c h / 0.3);\n  --lime-4: oklch(from var(--lime) l c h / 0.4);\n  --lime-5: oklch(from var(--lime) l c h / 0.5);\n  --lime-6: oklch(from var(--lime) l c h / 0.6);\n  --lime-7: oklch(from var(--lime) l c h / 0.75);\n  --lime-8: oklch(from var(--lime) l c h / 0.9);\n  --lime-9: var(--lime);\n\n  /* Highlighter scale */\n  --highlighter-1: oklch(from var(--highlighter) l c h / 0.1);\n  --highlighter-2: oklch(from var(--highlighter) l c h / 0.2);\n  --highlighter-3: oklch(from var(--highlighter) l c h / 0.3);\n  --highlighter-4: oklch(from var(--highlighter) l c h / 0.4);\n  --highlighter-5: oklch(from var(--highlighter) l c h / 0.5);\n  --highlighter-6: oklch(from var(--highlighter) l c h / 0.6);\n  --highlighter-7: oklch(from var(--highlighter) l c h / 0.75);\n  --highlighter-8: oklch(from var(--highlighter) l c h / 0.9);\n  --highlighter-9: var(--highlighter);\n\n  /* Brown scale */\n  --brown-1: oklch(from var(--brown) l c h / 0.1);\n  --brown-2: oklch(from var(--brown) l c h / 0.2);\n  --brown-3: oklch(from var(--brown) l c h / 0.3);\n  --brown-4: oklch(from var(--brown) l c h / 0.4);\n  --brown-5: oklch(from var(--brown) l c h / 0.5);\n  --brown-6: oklch(from var(--brown) l c h / 0.6);\n  --brown-7: oklch(from var(--brown) l c h / 0.75);\n  --brown-8: oklch(from var(--brown) l c h / 0.9);\n  --brown-9: var(--brown);\n\n  /* Teal scale */\n  --teal-1: oklch(from var(--teal) l c h / 0.1);\n  --teal-2: oklch(from var(--teal) l c h / 0.2);\n  --teal-3: oklch(from var(--teal) l c h / 0.3);\n  --teal-4: oklch(from var(--teal) l c h / 0.4);\n  --teal-5: oklch(from var(--teal) l c h / 0.5);\n  --teal-6: oklch(from var(--teal) l c h / 0.6);\n  --teal-7: oklch(from var(--teal) l c h / 0.75);\n  --teal-8: oklch(from var(--teal) l c h / 0.9);\n  --teal-9: var(--teal);\n\n  /* Blue scale */\n  --blue-1: oklch(from var(--blue) l c h / 0.1);\n  --blue-2: oklch(from var(--blue) l c h / 0.2);\n  --blue-3: oklch(from var(--blue) l c h / 0.3);\n  --blue-4: oklch(from var(--blue) l c h / 0.4);\n  --blue-5: oklch(from var(--blue) l c h / 0.5);\n  --blue-6: oklch(from var(--blue) l c h / 0.6);\n  --blue-7: oklch(from var(--blue) l c h / 0.75);\n  --blue-8: oklch(from var(--blue) l c h / 0.9);\n  --blue-9: var(--blue);\n\n  /* Neutral gray scale */\n  --gray: oklch(0.5 0.02 270);\n  --slate: oklch(0.52 0.04 255);\n  --gray-1: oklch(from var(--gray) l c h / 0.1);\n  --gray-2: oklch(from var(--gray) l c h / 0.2);\n  --gray-3: oklch(from var(--gray) l c h / 0.3);\n  --gray-4: oklch(from var(--gray) l c h / 0.4);\n  --gray-5: oklch(from var(--gray) l c h / 0.5);\n  --gray-6: oklch(from var(--gray) l c h / 0.6);\n  --gray-7: oklch(from var(--gray) l c h / 0.75);\n  --gray-8: oklch(from var(--gray) l c h / 0.9);\n  --gray-9: var(--gray);\n\n  /* Slate scale */\n  --slate-1: oklch(from var(--slate) l c h / 0.1);\n  --slate-2: oklch(from var(--slate) l c h / 0.2);\n  --slate-3: oklch(from var(--slate) l c h / 0.3);\n  --slate-4: oklch(from var(--slate) l c h / 0.4);\n  --slate-5: oklch(from var(--slate) l c h / 0.5);\n  --slate-6: oklch(from var(--slate) l c h / 0.6);\n  --slate-7: oklch(from var(--slate) l c h / 0.75);\n  --slate-8: oklch(from var(--slate) l c h / 0.9);\n  --slate-9: var(--slate);\n\n  --fg-light: #000;\n  --fg-dark: #fff;\n  --fg: light-dark(var(--fg-light), var(--fg-dark));\n  --fg-05: oklch(from var(--fg) l c h / 0.05);\n  --fg-1: oklch(from var(--fg) l c h / 0.1);\n  --fg-2: oklch(from var(--fg) l c h / 0.2);\n  --fg-3: oklch(from var(--fg) l c h / 0.3);\n  --fg-4: oklch(from var(--fg) l c h / 0.4);\n  --fg-5: oklch(from var(--fg) l c h / 0.5);\n  --fg-6: oklch(from var(--fg) l c h / 0.6);\n  --fg-7: oklch(from var(--fg) l c h / 0.75);\n  --fg-8: oklch(from var(--fg) l c h / 0.9);\n  --fg-9: var(--fg);\n\n  --bg-light: #fff;\n  --bg-dark: #111;\n  --bg: light-dark(var(--bg-light), var(--bg-dark));\n\n  --fg-05: color-mix(in oklab, var(--fg), transparent 95%);\n  --fg-1: color-mix(in oklab, var(--fg), transparent 90%);\n\n  /* Fluid Type */\n  --font-size-min: 14;\n  --font-size-max: 18;\n  --font-ratio-min: 1.2;\n  --font-ratio-max: 1.33;\n  --font-width-min: 320;\n  --font-width-max: 1500;\n\n  /* Line Height Tokens */\n  --lh-tight: 1.2;\n  --lh-normal: 1.5;\n  --lh-loose: 1.8;\n\n  /* Border Tokens */\n  --border-05: solid 1px var(--fg-05);\n  --border-1: solid 1px var(--fg-2);\n  --border-2: solid 2px var(--fg-2);\n\n  /* Easing Tokens - Using linear() for modern, natural motion */\n  --ease-smooth: linear(\n    0,\n    0.0039,\n    0.0157,\n    0.0352,\n    0.0625 9.09%,\n    0.1407,\n    0.25,\n    0.3908,\n    0.5625,\n    0.7654,\n    1\n  );\n  --ease-bounce: linear(\n    0,\n    0.004,\n    0.016,\n    0.035,\n    0.063,\n    0.098,\n    0.141,\n    0.191,\n    0.25,\n    0.316,\n    0.391 36.36%,\n    0.563,\n    0.766,\n    1 54.55%,\n    0.946,\n    0.908 72.73%,\n    0.953,\n    1,\n    0.994,\n    0.998,\n    1\n  );\n  --ease-emphasized: linear(\n    0,\n    0.0038,\n    0.0155,\n    0.0352,\n    0.0625 9%,\n    0.1407,\n    0.25 18%,\n    0.5625 36%,\n    0.7655 45%,\n    1\n  );\n\n  --primary: var(--blue);\n  --error: var(--red);\n  --warning: var(--yellow);\n  --success: var(--green);\n\n  color-scheme: light dark;\n}\n\nhtml {\n  box-sizing: border-box;\n}\n\nhtml,\nbody,\nbody > .body-fill {\n  min-height: 100vh;\n  margin: 0;\n}\n\nbody > .body-fill {\n  display: flex;\n  flex-direction: column;\n}\n\nmain {\n  flex: 1;\n}\n\nheader,\nmain,\nfooter {\n  width: 100%;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n\nbody {\n  font-family: var(--font-sans);\n  line-height: var(--lh-normal);\n  margin: 0;\n  min-height: 100vh;\n  color: var(--fg);\n  background: var(--bg);\n}\n\nbody,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nli,\n.fluid,\ntextarea,\ninput,\nselect,\nbutton,\na,\nth,\ntd {\n  /* Fluid Typography System\n   *\n   * This system creates responsive font sizes that scale smoothly between viewport sizes.\n   * Set --fl (fluid level) on any element to control its size (-1 to 6).\n   *\n   * How it works:\n   * 1. Calculate min/max font sizes using pow() with modular scale ratios\n   * 2. Find the rate of change (slope) between min and max\n   * 3. Use clamp() to create a fluid value that scales with viewport/container width\n   *\n   * Formula breakdown:\n   * - --fluid-min: Minimum font size = base * ratio^level\n   * - --fluid-max: Maximum font size = base * ratio^level\n   * - --fluid-preferred: Slope of linear interpolation\n   * - --fluid-type: clamp(min, min + slope * viewport, max)\n   */\n  --fluid-min: calc(\n    var(--font-size-min) * pow(var(--font-ratio-min), var(--fl, 0))\n  );\n  --fluid-max: calc(\n    var(--font-size-max) * pow(var(--font-ratio-max), var(--fl, 0))\n  );\n  --fluid-preferred: calc(\n    (var(--fluid-max) - var(--fluid-min)) /\n      (var(--font-width-max) - var(--font-width-min))\n  );\n  --fluid-type: clamp(\n    (var(--fluid-min) / 16) * 1rem,\n    ((var(--fluid-min) / 16) * 1rem) -\n      (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +\n      (var(--fluid-preferred) * var(--variable-unit, 100vi)),\n    (var(--fluid-max) / 16) * 1rem\n  );\n  font-size: var(--fluid-type);\n  margin-block: 0 var(--vs-base);\n}\n\n/* This makes containers, with container queries use a cqi unit instead of vi */\n/* FC Fluid Container */\n.fluid-text-container,\n.fc {\n  container-type: inline-size;\n  --variable-unit: 100cqi;\n}\nh1,\n.h1 {\n  margin-block: 0 var(--vs-base);\n  --fl: 5;\n}\nh2,\n.h2 {\n  --fl: 4;\n}\nh3,\n.h3 {\n  --fl: 3;\n}\nh4,\n.h4 {\n  --fl: 2;\n}\nh5,\n.h5 {\n  --fl: 1;\n}\nh6,\n.h6 {\n  --fl: 0;\n}\n\np,\nli,\nbody,\ninput,\ntextarea,\nbutton,\nselect {\n  --fl: 0;\n}\n.fs-xs {\n  --fl: -1;\n}\n.fs-base {\n  --fl: 0;\n}\n.fs-s {\n  --fl: 1;\n}\n.fs-m {\n  --fl: 2;\n}\n.fs-l {\n  --fl: 3;\n}\n.fs-xl {\n  --fl: 4;\n}\n.fs-xxl {\n  --fl: 5;\n}\n.fs-xxxl {\n  --fl: 6;\n}\n\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n  display: block;\n  max-width: 100%;\n}\n\nbutton,\n.button {\n  appearance: none;\n  margin: 0;\n  cursor: pointer;\n  background: var(--gray-2);\n  color: var(--fg);\n  display: inline-flex;\n  justify-content: center;\n  gap: var(--gap, 1rem);\n  align-items: center;\n  line-height: var(--lh-normal);\n  border: var(--border-05);\n  border-radius: var(--br-s);\n  padding: var(--pad-s) var(--pad-xl);\n  text-decoration: none;\n  &:hover {\n    background: var(--fg-05);\n  }\n  &:active {\n    background: var(--fg-1);\n  }\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  &:focus-visible {\n    outline: 2px solid var(--fg);\n    outline-offset: 2px;\n  }\n  &.mini {\n    --fl: 0;\n    padding: var(--pad-xs) var(--pad-s);\n  }\n  &:active {\n    translate: 0 1px;\n  }\n  &.primary {\n    background: var(--primary);\n  }\n}\n\na {\n  &:hover {\n    opacity: 0.8;\n  }\n  &:active {\n    opacity: 0.6;\n  }\n  &:focus-visible {\n    outline: 2px solid var(--fg);\n    outline-offset: 2px;\n  }\n}\n\ninput,\ntextarea,\nselect {\n  &:focus-visible {\n    outline: 2px solid var(--fg);\n    outline-offset: 2px;\n  }\n  &[aria-invalid=\"true\"],\n  &.error {\n    border-color: var(--red-6);\n    &:focus-visible {\n      outline-color: var(--red-6);\n    }\n  }\n  &.success {\n    border-color: var(--green-6);\n    &:focus-visible {\n      outline-color: var(--green-6);\n    }\n  }\n  &.warning {\n    border-color: var(--yellow-7);\n    &:focus-visible {\n      outline-color: var(--yellow-7);\n    }\n  }\n}\n\nlabel {\n  display: block;\n  --fl: -1;\n}\n\n/* UTILITIES */\n\n.readable {\n  max-width: 900px;\n  width: 100%;\n}\n\n.flex {\n  display: flex;\n  gap: 20px;\n}\n\n.grid {\n  display: grid;\n  gap: var(--gap, 1rem);\n}\n\n.split {\n  display: flex;\n  gap: 20px;\n  align-items: start;\n  justify-content: space-between;\n  &.even {\n    flex: 1 1 auto;\n  }\n}\n\n.visually-hidden {\n  position: absolute;\n  overflow: hidden;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  padding: 0px;\n  border: 0px;\n}\n\n.no-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  li {\n    margin: 0;\n    padding: 0;\n  }\n}\n\n.row {\n  margin-block: var(--vs-m);\n}\n\n.circle {\n  --size: 40px;\n  border-radius: var(--size);\n  padding: 0;\n  width: var(--size);\n  height: var(--size);\n}\n\n/* Aspect Ratio Utilities */\n.aspect-square {\n  aspect-ratio: 1 / 1;\n}\n\n.aspect-video {\n  aspect-ratio: 16 / 9;\n}\n\n.aspect-4-3 {\n  aspect-ratio: 4 / 3;\n}\n\n.aspect-21-9 {\n  aspect-ratio: 21 / 9;\n}\n\n.aspect-custom {\n  aspect-ratio: var(--aspect, 1 / 1);\n}\n\n/* END UTILITIES */\n\n/* LAYOUTS */\n\n/* Card Grid Layout - Auto-fill responsive card grid */\n.layout-card {\n  display: grid;\n  grid-template-columns: repeat(\n    auto-fill,\n    minmax(var(--layout-min-card-width, var(--min-card-width, 290px)), 1fr)\n  );\n  gap: var(--layout-gap, var(--gap, 2rem));\n}\n\n/* Sidebar Layout - Sidebar + main content area */\n.layout-sidebar {\n  display: grid;\n  grid-template-columns: 250px 1fr;\n  gap: var(--layout-gap, var(--gap, 2rem));\n  align-items: start;\n}\n\n.layout-sidebar.narrow {\n  grid-template-columns: 150px 1fr;\n}\n\n.layout-sidebar.wide {\n  grid-template-columns: 350px 1fr;\n}\n\n.layout-sidebar.invert {\n  grid-template-columns: 1fr 250px;\n}\n\n.layout-sidebar.invert.narrow {\n  grid-template-columns: 1fr 150px;\n}\n\n.layout-sidebar.invert.wide {\n  grid-template-columns: 1fr 350px;\n}\n\n@media (width < 768px) {\n  .layout-sidebar,\n  .layout-sidebar.narrow,\n  .layout-sidebar.wide,\n  .layout-sidebar.invert,\n  .layout-sidebar.invert.narrow,\n  .layout-sidebar.invert.wide {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Split Layout - 50/50 two column layout */\n.layout-split {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--layout-gap, var(--gap, 2rem));\n  align-items: start;\n}\n\n@media (width < 768px) {\n  .layout-split {\n    grid-template-columns: 1fr;\n  }\n\n  .layout-split.no-stack {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n/* Three Column Layout - Three equal columns */\n.layout-three-col {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: var(--layout-gap, var(--gap, 2rem));\n  align-items: start;\n}\n\n@media (width < 1024px) {\n  .layout-three-col {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n@media (width < 768px) {\n  .layout-three-col {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Readable Layout - Max-width for optimal readability */\n.layout-readable {\n  width: 100%;\n  max-width: var(--layout-max-width, var(--max-width, 1200px));\n  padding-inline: var(--layout-padding, var(--padding, 2rem));\n}\n\n.layout-readable.center {\n  margin-inline: auto;\n}\n\n.layout-readable.end {\n  margin-inline-start: auto;\n}\n\n.layout-holy-grail {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  gap: var(--layout-gap, var(--gap, 2rem));\n}\n\n@media (width < 768px) {\n  .layout-holy-grail {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Full Bleed - Break out of readable container */\n.layout-readable .full-bleed {\n  width: 100vi;\n  margin-inline: calc(50% - 50vi);\n}\n\n/* Stack Layout - Vertical flexbox stack */\n.stack {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  gap: var(--layout-gap, var(--gap, 1rem));\n}\n\n:is(.stack) > * {\n  margin-block: 0;\n  margin-inline: 0;\n}\n\n/* Cluster Layout - Horizontal wrapping list with gap */\n.cluster {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--layout-gap, var(--gap, 1rem));\n  align-items: center;\n}\n\n/* Carousel Layout - Horizontal scroll with scroll snap */\n.carousel {\n  display: flex;\n  gap: var(--layout-gap, var(--gap, 1rem));\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scroll-padding-inline: var(--layout-padding, var(--padding, 1rem));\n  scrollbar-width: thin;\n  > * {\n    scroll-snap-align: start;\n    flex-shrink: 0;\n  }\n}\n\n/* Reel Layout - Vertical scroll with scroll snap */\n.reel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-gap, var(--gap, 1rem));\n  overflow-y: auto;\n  scroll-snap-type: y mandatory;\n  scroll-padding-block: var(--layout-padding, var(--padding, 1rem));\n  scrollbar-width: thin;\n  max-height: var(--reel-height, 80vh);\n  > * {\n    scroll-snap-align: start;\n    flex-shrink: 0;\n  }\n}\n\n.swipe {\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  border-block: var(--border-1);\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  > :nth-child(2) {\n    width: 100cqw;\n    scroll-snap-align: center;\n    padding: var(--pad-l) var(--vs-base);\n  }\n\n  > button {\n    border-radius: 0;\n    box-shadow: 1px 1px 4px rgb(0 0 0 / 0.5) inset;\n    border: none;\n    width: 200px;\n  }\n  &.stop {\n    > * {\n      &:first-of-type {\n        animation: snap_start_hack 0.001s forwards;\n      }\n      &:last-of-type {\n        scroll-snap-align: end;\n      }\n    }\n  }\n  &.full-bleed {\n    width: 100vi;\n    margin-inline: calc(50% - 50vi);\n  }\n}\n\n/* Thank you Adam Argyle @argyleink for this hack.*/\n/* nerdy.dev */\n@keyframes snap_start_hack {\n  to {\n    scroll-snap-align: start;\n  }\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n  view-transition-name: var(--transition-name);\n}\n\n/* END LAYOUTS */\n\n/* Dark mode shadow overrides - Deeper, more intense shadows */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);\n    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.6), 0 4px 8px rgb(0 0 0 / 0.4);\n    --shadow-3:\n      0 4px 8px rgb(0 0 0 / 0.65), 0 8px 16px rgb(0 0 0 / 0.45),\n      0 2px 4px rgb(0 0 0 / 0.3);\n    --shadow-4:\n      0 6px 12px rgb(0 0 0 / 0.7), 0 12px 24px rgb(0 0 0 / 0.5),\n      0 3px 6px rgb(0 0 0 / 0.35);\n    --shadow-5:\n      0 10px 20px rgb(0 0 0 / 0.75), 0 16px 32px rgb(0 0 0 / 0.55),\n      0 4px 8px rgb(0 0 0 / 0.4);\n    --shadow-6:\n      0 16px 32px rgb(0 0 0 / 0.8), 0 24px 48px rgb(0 0 0 / 0.6),\n      0 32px 64px rgb(0 0 0 / 0.5), 0 6px 12px rgb(0 0 0 / 0.45);\n  }\n}\n\n/* Boxes */\n\n.box {\n  background: var(--fg-05);\n  padding: var(--pad-m);\n  border-radius: var(--br-s);\n  border: var(--border-1);\n}\n\n.box-ghost {\n  background: transparent;\n  padding: var(--pad-m);\n  border-radius: var(--br-s);\n  border: var(--border-1);\n}\n\n.box-glow {\n  background: var(--fg-05);\n  padding: var(--pad-m);\n  border-radius: var(--br-s);\n  box-shadow: var(--box);\n}\n\n.box-semi-gloss {\n  background: var(--fg-05);\n  padding: var(--pad-m);\n  border-radius: var(--br-s);\n  box-shadow: var(--box), var(--shadow-5);\n  background: linear-gradient(180deg, var(--fg-05) 0%, var(--fg-1) 100%);\n}\n\n/* UI Elements */\n\n.header {\n  width: 100vi;\n  margin-inline: calc(50% - 50vi);\n  display: flex;\n  gap: 20px;\n  align-items: center;\n  padding: var(--pad-l) var(--pad-l);\n  justify-content: space-between;\n  > * {\n    margin: 0;\n  }\n  nav {\n    ul {\n      margin: 0;\n      padding: 0;\n      display: flex;\n      gap: var(--gap, 1rem);\n      list-style: none;\n      li {\n        margin: 0;\n        a {\n          color: var(--fg);\n          text-decoration: none;\n        }\n      }\n    }\n  }\n  &.border {\n    border-bottom: var(--border-1);\n  }\n  &.sticky {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background: var(--bg);\n  }\n}\n\n.callout {\n  --callout-color: var(--blue-1);\n  --callout-border-color: var(--blue-5);\n  padding: var(--pad-l);\n  border-radius: var(--br-m);\n  border: var(--callout-border-color) solid 1px;\n  background: var(--callout-color);\n  color: var(--fg-8);\n\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  gap: var(--layout-gap, var(--gap, 1rem));\n\n  > * {\n    margin: 0;\n  }\n\n  &.warning {\n    --callout-color: var(--yellow-1);\n    --callout-border-color: var(--yellow-5);\n  }\n\n  &.error {\n    --callout-color: var(--red-1);\n    --callout-border-color: var(--red-5);\n  }\n\n  &.ghost {\n    --callout-color: var(--gray-1);\n    --callout-border-color: var(--gray-5);\n  }\n\n  &.success {\n    --callout-color: var(--green-1);\n    --callout-border-color: var(--green-5);\n  }\n\n  &.hard {\n    border-inline-start: 6px solid var(--callout-border-color);\n  }\n}\n\n.table {\n  overflow-x: auto;\n  border: var(--border-2);\n  border-radius: var(--table-border, var(--br-m));\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n}\n\ntd,\nth {\n  text-align: left;\n  padding: var(--pad-m) var(--vs-base);\n}\n\nthead {\n  border-bottom: var(--border-2);\n}\n\ntd {\n  border-bottom: var(--border-1);\n}\n\ntr:last-child {\n  td {\n    border: none;\n  }\n}\n";
export default css;