:root {
  --mobile-basis-w: 390;
  --mobile-basis-h: 667;
  --mobile-min: 0;
  --mobile-max: 767;
  --mobile-floor: 0;
  --mobile-squish:0;
  --desktop-basis-w: 1440;
  --desktop-basis-h: 750;
  --desktop-min: 768;
  --desktop-max: 1800;
  --desktop-squish: 1;
  --desktop-floor: 500;
  --active-basis-w: var(--mobile-basis-w);
  --active-basis-h: var(--mobile-basis-h);
  --active-min: var(--mobile-min);
  --active-max: var(--mobile-max);
  --active-squish: var(--mobile-squish);
  --active-floor: var(--mobile-floor);
  --basis-aspect-ratio: calc(var(--active-basis-w) / var(--active-basis-h));
  --safe-vh: max(1vh, 1px * var(--active-floor) / 100);
  /* stylelint-disable */
  --pxv-unit: max((var(--active-min) * 1px / var(--active-basis-w)),
      min((var(--active-max) * 1px / var(--active-basis-w)),
        min((1vw * 100 / var(--active-basis-w)),
          calc(((1vw * 100 / var(--active-basis-w)) * (1 - var(--active-squish))) + ((var(--safe-vh) * var(--basis-aspect-ratio) * 100 / var(--active-basis-w)) * var(--active-squish))))));
  /* stylelint-enable */
  --font-max-clamp: 9999px;
  --font-size: calc(16 * var(--pxv-unit));
}

:root {
  --easing: cubic-bezier(0.23, 1, 0.32, 1);
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
}

html:focus-within {
  scroll-behavior: smooth;
}

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin: 0;
}

:where(ul[role=list], ol[role=list]) {
  list-style: none;
}

:where(a:not([class])) {
  text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

hr {
  block-size: 1px;
  inline-size: 100%;
  border: none;
  background-color: currentcolor;
  margin-block: var(--type-margin);
}

button {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  line-height: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --font-family-system: system-ui, helvetica,arial, sans-serif;
  --font-family-heading: var(--font-family-system);
  --font-family-monospace: ui-monospace, sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
  --font-min-clamp: 11px;
  --line-height: 1.35;
  --text-wrap: pretty;
  --letter-spacing: normal;
  --type-margin: calc(15 * var(--pxv-unit));
  --hanging-punctuation: first allow-end last;
  --quote-hang: -0.45em;
}

:where(*, *::before, *::after) {
  font-size: clamp(var(--font-min-clamp), var(--font-size), var(--font-max-clamp));
}

html {
  font-family: var(--font-family-system);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  text-wrap: var(--text-wrap);
  hanging-punctuation: var(--hanging-punctuation);
}

.hanging-quote {
  hanging-punctuation: var(--hanging-punctuation);
}

@supports not (hanging-punctuation: first) {
  .hanging-quote {
    text-indent: var(--quote-hang);
  }
}
:where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre):not(:last-child) {
  margin-block-end: var(--type-margin);
}

:where(h1, h2, h3, h4, h5, h6, .heading--xxxl, .heading--xxl, .heading--xl, .heading--l, .heading--m, .heading--s, .heading--xs, .heading--xxs) {
  line-height: 1.2;
  font-family: var(--font-family-heading);
}

code,
kbd,
samp,
pre,
tt {
  font-family: var(--font-family-monospace);
}

.heading--xxxl {
  --font-size: calc(38 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .heading--xxxl {
    --font-size: calc(64 * var(--pxv-unit));
  }
}

.heading--xxl {
  --font-size: calc(34 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .heading--xxl {
    --font-size: calc(60 * var(--pxv-unit));
  }
}
.heading--xxl {
  line-height: 1.2;
}

.heading--xl {
  --font-size: calc(30 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .heading--xl {
    --font-size: calc(48 * var(--pxv-unit));
  }
}
.heading--xl {
  --font-min-clamp: 28px;
}

.heading--l {
  --font-size: calc(26 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .heading--l {
    --font-size: calc(38 * var(--pxv-unit));
  }
}
.heading--l {
  --font-min-clamp: 24px;
}

.heading--m {
  --font-size: calc(22 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .heading--m {
    --font-size: calc(32 * var(--pxv-unit));
  }
}
.heading--m {
  --font-min-clamp: 20px;
}

.heading--s {
  --font-size: calc(20 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .heading--s {
    --font-size: calc(26 * var(--pxv-unit));
  }
}
.heading--s {
  --font-min-clamp: 18px;
}

.heading--xs {
  --font-size: calc(18 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .heading--xs {
    --font-size: calc(20 * var(--pxv-unit));
  }
}
.heading--xs {
  --font-min-clamp: 16px;
}

.heading--xxs {
  --font-size: calc(16 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .heading--xxs {
    --font-size: calc(18 * var(--pxv-unit));
  }
}
.heading--xxs {
  --font-min-clamp: 16px;
}

.body--l {
  --font-size: calc(16 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .body--l {
    --font-size: calc(18 * var(--pxv-unit));
  }
}
.body--l {
  --font-min-clamp: 14px;
}

.body--m {
  --font-size: calc(14 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .body--m {
    --font-size: calc(16 * var(--pxv-unit));
  }
}

.body--s {
  --font-size: calc(12 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .body--s {
    --font-size: calc(14 * var(--pxv-unit));
  }
}

.body--xs {
  --font-size: calc(11 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .body--xs {
    --font-size: calc(12 * var(--pxv-unit));
  }
}

.body--xxs {
  --font-size: calc(10 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .body--xxs {
    --font-size: calc(11 * var(--pxv-unit));
  }
}

.body--xxxs {
  --font-size: calc(10 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .body--xxxs {
    --font-size: calc(10 * var(--pxv-unit));
  }
}

.longform {
  line-height: 1.5;
}

.caps {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.w--100 {
  font-weight: 100;
}

.w--200 {
  font-weight: 200;
}

.w--300 {
  font-weight: 300;
}

.w--400 {
  font-weight: 400;
}

.w--500 {
  font-weight: 500;
}

.w--600 {
  font-weight: 600;
}

.w--700 {
  font-weight: 700;
}

.w--800 {
  font-weight: 800;
}

.w--900 {
  font-weight: 900;
}

.wrap-pretty {
  text-wrap: pretty;
}

.wrap-balance {
  text-wrap: balance;
}

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

.text-right {
  text-align: right;
}

:root {
  --container-size: calc(1280 * var(--pxv-unit));
  --mobile-gutters: 5%;
  --border-radius: calc(5 * var(--pxv-unit));
}

@media (min-width: 768px) {
  :root {
    --active-basis-w: var(--desktop-basis-w);
    --active-basis-h: var(--desktop-basis-h);
    --active-min: var(--desktop-min);
    --active-max: var(--desktop-max);
    --active-squish: var(--desktop-squish);
    --active-floor: var(--desktop-floor);
  }
}
#wpadminbar {
  position: fixed !important;
  opacity: 0.3 !important;
  transition: transform 0.3s, opacity 0.3s;
  transform: translateY(-80%) !important;
}
#wpadminbar:hover {
  opacity: 1 !important;
  transform: none !important;
}

body {
  min-height: 100vh;
}

.container {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-size);
  }
}
@media (max-width: 767px) {
  .container {
    padding-left: var(--mobile-gutters);
    padding-right: var(--mobile-gutters);
  }
}

@media (max-width: 767px) {
  .desktop-only {
    display: none;
  }
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

#breakpoints {
  display: none;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  #breakpoints {
    z-index: 1;
  }
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.abs-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fit-photo {
  position: relative;
}
.fit-photo.absolute {
  position: absolute;
}
.fit-photo > img,
.fit-photo > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fit-photo.cover > img, .fit-photo.cover > video {
  object-fit: cover;
}
.fit-photo.contain > img, .fit-photo.contain > video {
  object-fit: contain;
}

.clip-container {
  clip-path: inset(0);
  pointer-events: none;
}
.clip-container__inner {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateZ(0);
}

.color--white {
  color: #fff;
}
.color--black {
  color: #000;
}

.background--white {
  background-color: #fff;
}
.background--black {
  background-color: #000;
}

.flex {
  display: flex;
}

.flex.wrap {
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .flex.wrap-mobile {
    flex-wrap: wrap;
  }
}

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

@media (max-width: 767px) {
  .flex.inline-mobile {
    display: inline-flex;
  }
}

.flex.center {
  align-items: center;
  justify-content: center;
}

.flex.j-sb {
  justify-content: space-between;
}

.flex.j-c {
  justify-content: center;
}

.flex.j-start {
  justify-content: flex-start;
}

.flex.j-end {
  justify-content: flex-end;
}

.flex.a-c {
  align-items: center;
}

.flex.a-start {
  align-items: flex-start;
}

.flex.a-baseline {
  align-items: baseline;
}

.flex.a-end {
  align-items: flex-end;
}

.flex.column {
  flex-direction: column;
}

@media (min-width: 768px) {
  .flex.column-desktop {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .flex.column-mobile {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .flex.column-mobile-reverse {
    flex-direction: column-reverse;
  }
}

.flex.row-reverse {
  flex-direction: row-reverse;
}

@media (min-width: 768px) {
  .flex.row-reverse-desktop {
    flex-direction: row-reverse;
  }
}

@media (min-width: 768px) {
  .flex.a-c-desktop {
    align-items: center;
  }
}

@media (min-width: 768px) {
  .flex.a-start-desktop {
    align-items: flex-start;
  }
}

@media (min-width: 768px) {
  .flex.j-c-desktop {
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .flex.j-sb-desktop {
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .flex.j-end-desktop {
    justify-content: flex-end;
  }
}

.flex.j-sa {
  justify-content: space-around;
}

.flex.j-se {
  justify-content: space-evenly;
}

.flex.grow {
  flex-grow: 1;
}

.flex.grow-0 {
  flex-grow: 0;
}

.flex.no-shrink {
  flex-shrink: 0;
}

.flex.a-self-start {
  align-self: flex-start;
}

.flex.a-self-c {
  align-self: center;
}

.flex.a-self-end {
  align-self: flex-end;
}

[scrim] {
  position: relative;
  overflow: hidden;
  display: block;
  --scrim-color: 0, 0, 0;
  --scrim-dir: 22.5deg;
  --scrim-a: 1;
  --scrim-dist: 100%;
}
[scrim]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: block;
  background-image: linear-gradient(var(--scrim-dir), rgba(var(--scrim-color), calc(var(--scrim-a) * 1)) 0%, rgba(var(--scrim-color), calc(var(--scrim-a) * 0.852)) calc(var(--scrim-dist) * 0.12), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.621)) calc(var(--scrim-dist) * 0.28), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.385)) calc(var(--scrim-dist) * 0.46), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.183)) calc(var(--scrim-dist) * 0.66), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.054)) calc(var(--scrim-dist) * 0.85), rgba(var(--scrim-color), 0) var(--scrim-dist));
}

/* Intermediate Directions */
[scrim~=to-t-tr] {
  --scrim-dir: 22.5deg;
}

[scrim~=to-r-tr] {
  --scrim-dir: 67.5deg;
}

[scrim~=to-r-br] {
  --scrim-dir: 112.5deg;
}

[scrim~=to-b-br] {
  --scrim-dir: 157.5deg;
}

[scrim~=to-b-bl] {
  --scrim-dir: 202.5deg;
}

[scrim~=to-l-bl] {
  --scrim-dir: 247.5deg;
}

[scrim~=to-l-tl] {
  --scrim-dir: 292.5deg;
}

[scrim~=to-t-tl] {
  --scrim-dir: 337.5deg;
}

/* Cardinal/Ordinal Directions */
[scrim~=to-t] {
  --scrim-dir: to top;
}

[scrim~=to-b] {
  --scrim-dir: to bottom;
}

[scrim~=to-l] {
  --scrim-dir: to left;
}

[scrim~=to-r] {
  --scrim-dir: to right;
}

[scrim~=to-tr] {
  --scrim-dir: to top right;
}

[scrim~=to-tl] {
  --scrim-dir: to top left;
}

[scrim~=to-br] {
  --scrim-dir: to bottom right;
}

[scrim~=to-bl] {
  --scrim-dir: to bottom left;
}

/* --- INTENSITY & DISTANCE (Stay as *= for flexibility) --- */
[scrim*=".1"] {
  --scrim-a: 0.1;
}

[scrim*=".2"] {
  --scrim-a: 0.2;
}

[scrim*=".3"] {
  --scrim-a: 0.3;
}

[scrim*=".4"] {
  --scrim-a: 0.4;
}

[scrim*=".5"] {
  --scrim-a: 0.5;
}

[scrim*=".6"] {
  --scrim-a: 0.6;
}

[scrim*=".7"] {
  --scrim-a: 0.7;
}

[scrim*=".8"] {
  --scrim-a: 0.8;
}

[scrim*=".9"] {
  --scrim-a: 0.9;
}

[scrim*="10%"] {
  --scrim-dist: 10%;
}

[scrim*="25%"] {
  --scrim-dist: 25%;
}

[scrim*="33%"] {
  --scrim-dist: 33.3%;
}

[scrim*="50%"] {
  --scrim-dist: 50%;
}

[scrim*="66%"] {
  --scrim-dist: 66.6%;
}

[scrim*="75%"] {
  --scrim-dist: 75%;
}

[shadow],
[shadow-hover] {
  --shadow-elevation: 12;
  --shadow-weight: 1.3;
  --shadow-spread: -1px;
  --shadow-opacity: 0.08;
  --shadow-color: 0, 0, 0;
  --shadow-active: 0;
}

[shadow] {
  transition: box-shadow 0.4s var(--easing);
  box-shadow: 0 calc(var(--shadow-elevation, 12) * 1px) calc(var(--shadow-elevation, 12) * 2px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.4 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 2px) calc(var(--shadow-elevation, 12) * 4px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.3 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 4px) calc(var(--shadow-elevation, 12) * 8px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.2 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 8px) calc(var(--shadow-elevation, 12) * 16px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.1 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 10px) calc(var(--shadow-elevation, 12) * 20px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.05 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 12px) calc(var(--shadow-elevation, 12) * 24px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.02 * var(--shadow-active, 0)));
}
@media (prefers-reduced-motion: reduce) {
  [shadow] {
    transition: none;
  }
}
[shadow] {
  --shadow-elevation: 12;
  --shadow-weight: 1.3;
  --shadow-spread: -1px;
  --shadow-opacity: 0.08;
  --shadow-active: 1;
}

[shadow-hover] {
  transition: box-shadow 0.4s var(--easing);
  box-shadow: 0 calc(var(--shadow-elevation, 12) * 1px) calc(var(--shadow-elevation, 12) * 2px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.4 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 2px) calc(var(--shadow-elevation, 12) * 4px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.3 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 4px) calc(var(--shadow-elevation, 12) * 8px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.2 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 8px) calc(var(--shadow-elevation, 12) * 16px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.1 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 10px) calc(var(--shadow-elevation, 12) * 20px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.05 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 12px) calc(var(--shadow-elevation, 12) * 24px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.02 * var(--shadow-active, 0)));
}
@media (prefers-reduced-motion: reduce) {
  [shadow-hover] {
    transition: none;
  }
}
[shadow-hover]:is(:hover, :focus-visible) {
  --shadow-active: 1;
}

[shadow~="10"],
[shadow-hover~="10"]:is(:hover, :focus-visible) {
  --shadow-elevation: 1.5;
  --shadow-weight: 0.8;
  --shadow-spread: 0px;
}

[shadow~="20"],
[shadow-hover~="20"]:is(:hover, :focus-visible) {
  --shadow-elevation: 4;
  --shadow-weight: 1;
  --shadow-spread: 0px;
}

[shadow~="30"],
[shadow-hover~="30"]:is(:hover, :focus-visible) {
  --shadow-elevation: 12;
  --shadow-weight: 1.3;
  --shadow-spread: -1px;
}

[shadow~="40"],
[shadow-hover~="40"]:is(:hover, :focus-visible) {
  --shadow-elevation: 28;
  --shadow-weight: 1.8;
  --shadow-spread: -4px;
}

[shadow~="50"],
[shadow-hover~="50"]:is(:hover, :focus-visible) {
  --shadow-elevation: 52;
  --shadow-weight: 2.8;
  --shadow-spread: -10px;
}

[shadow~=".1"],
[shadow-hover~=".1"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.1;
}

[shadow~=".2"],
[shadow-hover~=".2"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.2;
}

[shadow~=".3"],
[shadow-hover~=".3"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.3;
}

[shadow~=".4"],
[shadow-hover~=".4"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.4;
}

[shadow~=".5"],
[shadow-hover~=".5"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.5;
}

[shadow~=".6"],
[shadow-hover~=".6"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.6;
}

[shadow~=".7"],
[shadow-hover~=".7"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.7;
}

[shadow~=".8"],
[shadow-hover~=".8"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.8;
}

[shadow~=".9"],
[shadow-hover~=".9"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.9;
}

[shadow~=blue],
[shadow-hover~=blue]:is(:hover, :focus-visible) {
  --shadow-color: 0, 20, 190;
}

[inset-border] {
  position: relative;
  --inset-border-width: calc(5 * var(--pxv-unit));
  --inset-border-color: currentColor;
  --inset-border-speed: 350ms;
}
[inset-border]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--inset-border-color);
  transition: box-shadow var(--inset-border-speed) var(--easing, ease);
}
@media (hover: hover) {
  [inset-border]:where(:not(:disabled, [aria-disabled=true])):hover::after {
    box-shadow: inset 0 0 0 var(--inset-border-width) var(--inset-border-color);
  }
}
[inset-border]:where(:not(:disabled, [aria-disabled=true])):focus-visible::after {
  box-shadow: inset 0 0 0 var(--inset-border-width) var(--inset-border-color);
}
@media (prefers-reduced-motion: reduce) {
  [inset-border]::after {
    transition: none;
  }
}

[btn] {
  --btn-bg: #001a3d;
  --btn-color: #fff;
  --btn-hover-bg: #123456;
  --btn-hover-color: #fff;
  --btn-radius: calc(999 * var(--pxv-unit));
  --btn-weight: 600;
  --btn-nudge: 0.01em;
  --btn-gap: 0.5em;
  --btn-speed: 0.2s;
  --btn-focus: #0061c7;
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  margin: 0;
  font-family: inherit;
  font-weight: var(--btn-weight);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  --btn-font-size: calc(12 * var(--pxv-unit));
  --btn-font-max: 12px;
}
@media (min-width: 768px) {
  [btn] {
    --btn-font-size: calc(14 * var(--pxv-unit));
    --btn-font-max: 14px;
  }
}
[btn] {
  font-size: clamp(var(--font-min-clamp, 11px), var(--btn-font-size), var(--btn-font-max));
  --btn-x-pad: 1.5em;
  --btn-y-pad: 0.75em;
  padding: calc(var(--btn-y-pad) - var(--btn-nudge, 0em)) var(--btn-x-pad) calc(var(--btn-y-pad) + var(--btn-nudge, 0em));
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border, var(--btn-bg));
  border-radius: var(--btn-radius);
  transition: background-color var(--btn-speed) var(--easing, ease), color var(--btn-speed) var(--easing, ease), border-color var(--btn-speed) var(--easing, ease);
}
[btn] :where(span, svg) {
  font-size: inherit;
}
[btn]:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 3px;
}
[btn]:is(:disabled, [aria-disabled=true]) {
  opacity: 0.5;
  cursor: not-allowed;
}

[btn~=xs] {
  --btn-font-size: calc(10 * var(--pxv-unit));
  --btn-font-max: 10px;
}
@media (min-width: 768px) {
  [btn~=xs] {
    --btn-font-size: calc(11 * var(--pxv-unit));
    --btn-font-max: 11px;
  }
}
[btn~=xs] {
  font-size: clamp(var(--font-min-clamp, 11px), var(--btn-font-size), var(--btn-font-max));
  --btn-x-pad: 1.5em;
  --btn-y-pad: 0.5em;
  padding: calc(var(--btn-y-pad) - var(--btn-nudge, 0em)) var(--btn-x-pad) calc(var(--btn-y-pad) + var(--btn-nudge, 0em));
}

[btn~=s] {
  --btn-font-size: calc(11 * var(--pxv-unit));
  --btn-font-max: 11px;
}
@media (min-width: 768px) {
  [btn~=s] {
    --btn-font-size: calc(12 * var(--pxv-unit));
    --btn-font-max: 12px;
  }
}
[btn~=s] {
  font-size: clamp(var(--font-min-clamp, 11px), var(--btn-font-size), var(--btn-font-max));
  --btn-x-pad: 1.5em;
  --btn-y-pad: 0.625em;
  padding: calc(var(--btn-y-pad) - var(--btn-nudge, 0em)) var(--btn-x-pad) calc(var(--btn-y-pad) + var(--btn-nudge, 0em));
}

[btn~=m] {
  --btn-font-size: calc(12 * var(--pxv-unit));
  --btn-font-max: 12px;
}
@media (min-width: 768px) {
  [btn~=m] {
    --btn-font-size: calc(14 * var(--pxv-unit));
    --btn-font-max: 14px;
  }
}
[btn~=m] {
  font-size: clamp(var(--font-min-clamp, 11px), var(--btn-font-size), var(--btn-font-max));
  --btn-x-pad: 1.5em;
  --btn-y-pad: 0.75em;
  padding: calc(var(--btn-y-pad) - var(--btn-nudge, 0em)) var(--btn-x-pad) calc(var(--btn-y-pad) + var(--btn-nudge, 0em));
}

[btn~=l] {
  --btn-font-size: calc(14 * var(--pxv-unit));
  --btn-font-max: 14px;
}
@media (min-width: 768px) {
  [btn~=l] {
    --btn-font-size: calc(16 * var(--pxv-unit));
    --btn-font-max: 16px;
  }
}
[btn~=l] {
  font-size: clamp(var(--font-min-clamp, 11px), var(--btn-font-size), var(--btn-font-max));
  --btn-x-pad: 1.5em;
  --btn-y-pad: 0.75em;
  padding: calc(var(--btn-y-pad) - var(--btn-nudge, 0em)) var(--btn-x-pad) calc(var(--btn-y-pad) + var(--btn-nudge, 0em));
}

[btn~=inverted] {
  --btn-bg: #fff;
  --btn-color: #001a3d;
  --btn-hover-bg: color-mix(in srgb, #fff 90%, #123456);
  --btn-hover-color: #123456;
}

[btn~=outline] {
  background: transparent;
  color: var(--btn-bg);
  border-color: currentcolor;
}

[btn~=block] {
  display: flex;
  width: 100%;
}

@media (hover: hover) {
  [btn]:where(:not(:disabled, [aria-disabled=true])):hover {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-color);
    border-color: var(--btn-hover-border, var(--btn-hover-bg));
  }
}
[btn]:where(:not(:disabled, [aria-disabled=true])):active {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  border-color: var(--btn-hover-border, var(--btn-hover-bg));
}

@media (prefers-reduced-motion: reduce) {
  [btn] {
    transition: none;
  }
}
:root {
  --form-radius: calc(4 * var(--pxv-unit));
  --form-padding-x: 0.875em;
  --form-padding-y: 0.4375em;
  --form-bg: #fff;
  --form-border: #c5cbd1;
  --form-muted: #68717e;
  --form-accent: #001a3d;
  --form-focus: #0061c7;
  --form-error: #b42318;
}

:where(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], input[type=number], input[type=date], input[type=datetime-local], input[type=month], input[type=week], input[type=time], select, textarea) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--form-padding-y) var(--form-padding-x);
  font: inherit;
  font-size: max(1em, 16px);
  line-height: 1.5;
  color: inherit;
  background-color: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
}
:where(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], input[type=number], input[type=date], input[type=datetime-local], input[type=month], input[type=week], input[type=time], select, textarea)::placeholder {
  color: var(--form-muted);
  opacity: 1;
}
:where(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], input[type=number], input[type=date], input[type=datetime-local], input[type=month], input[type=week], input[type=time], select, textarea):read-only:not(select) {
  background-color: color-mix(in srgb, var(--form-bg) 94%, currentcolor);
}
:where(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], input[type=number], input[type=date], input[type=datetime-local], input[type=month], input[type=week], input[type=time], select, textarea)[aria-invalid=true] {
  border-color: var(--form-error);
}
:where(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], input[type=number], input[type=date], input[type=datetime-local], input[type=month], input[type=week], input[type=time], select, textarea):focus {
  border-color: var(--form-focus);
  outline: none;
}

:where(textarea) {
  resize: vertical;
}

:where(select:not([multiple], [size])),
:where(select[size="1"]:not([multiple])) {
  appearance: none;
  padding-inline-end: calc(var(--form-padding-x) + 1.5em);
  background-image: var(--form-select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2368717e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: right var(--form-padding-x) center;
  background-size: 1em 1em;
}

:where(select:dir(rtl)) {
  background-position: left var(--form-padding-x) center;
}

:where(select[multiple], select[size]:not([size="1"])) {
  padding: 0;
}
:where(select[multiple], select[size]:not([size="1"])) option {
  padding: 0.375em 0.625em;
}

:where(input[type=checkbox], input[type=radio]) {
  appearance: none;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 1.375em;
  height: 1.375em;
  margin: 0 0.5em 0 0;
  padding: 0;
  font: inherit;
  background: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: 0.1em;
  cursor: pointer;
  vertical-align: -0.125em;
  transition: border-color 0.2s, background-color 0.2s;
}
:where(input[type=checkbox], input[type=radio])::before {
  content: "";
  font-size: inherit;
  width: 0.825em;
  height: 0.825em;
  background: var(--form-check-color, #fff);
  clip-path: polygon(12% 44%, 38% 70%, 88% 16%, 100% 28%, 38% 94%, 0 56%);
  transform: scale(0);
  transition: transform 0.2s ease;
}
:where(input[type=checkbox], input[type=radio]):checked {
  border-color: var(--form-accent);
}
:where(input[type=checkbox], input[type=radio]):checked::before {
  transform: scale(1);
}

:where(input[type=checkbox]:checked, input[type=checkbox]:indeterminate) {
  background-color: var(--form-accent);
  border-color: var(--form-accent);
}

:where(input[type=checkbox]:indeterminate)::before {
  clip-path: inset(42% 8%);
  transform: scale(1);
}

:where(input[type=radio]) {
  border-radius: 50%;
}
:where(input[type=radio])::before {
  width: 0.6875em;
  height: 0.6875em;
  border-radius: 50%;
  background: var(--form-accent);
  clip-path: none;
}

:where(input[type=range], progress) {
  accent-color: var(--form-accent);
}

:where(input[type=range]) {
  appearance: none;
  width: 100%;
  height: 1.75em;
  padding: 0;
  margin: 0;
  font: inherit;
  background: transparent;
  cursor: pointer;
}
:where(input[type=range])::-webkit-slider-runnable-track {
  height: 0.1875em;
  border-radius: calc(999 * var(--pxv-unit));
  background: linear-gradient(to right, var(--form-accent) 0 var(--form-range-fill, 0%), var(--form-border) var(--form-range-fill, 0%) 100%);
}
:where(input[type=range])::-webkit-slider-thumb {
  appearance: none;
  width: 1.375em;
  height: 1.375em;
  margin-top: -0.59375em;
  border: 0;
  border-radius: 50%;
  background: var(--form-accent);
}
:where(input[type=range])::-moz-range-track {
  height: 0.1875em;
  border-radius: calc(999 * var(--pxv-unit));
  background: var(--form-border);
}
:where(input[type=range])::-moz-range-progress {
  height: 0.1875em;
  border-radius: calc(999 * var(--pxv-unit));
  background: var(--form-accent);
}
:where(input[type=range])::-moz-range-thumb {
  width: 1.375em;
  height: 1.375em;
  border: 0;
  border-radius: 50%;
  background: var(--form-accent);
}

:where(input[type=checkbox], input[type=radio])[aria-invalid=true] {
  border-color: var(--form-error);
}

:where(input[type=checkbox], input[type=radio], input[type=range], input[type=color], input[type=file]):where(:focus-visible) {
  outline: 2px solid var(--form-focus);
  outline-offset: 3px;
}

:where(input:not([type=hidden]), select, textarea):where(:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

:where(label, legend) {
  font: inherit;
  color: inherit;
}

:where(label) {
  display: inline-block;
  margin-block-end: 0.5em;
}

:where(label:has(> input[type=checkbox], > input[type=radio])) {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5em;
  line-height: 1.5;
}
:where(label:has(> input[type=checkbox], > input[type=radio])) > :where(input) {
  flex-shrink: 0;
  margin: 0;
  margin-block-start: 0.0625em;
}

:where(fieldset) {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

:where(legend) {
  padding: 0;
  margin-block-end: 0.5em;
}

:where(.form-help, .form-error) {
  margin-block: 0.5em 0;
  font-size: 0.875em;
  line-height: 1.5;
  color: var(--form-muted);
}

:where(.form-error) {
  color: var(--form-error);
}

@media (forced-colors: active) {
  :where(input[type=checkbox], input[type=radio]) {
    appearance: auto;
  }
  :where(input[type=checkbox], input[type=radio])::before {
    display: none;
  }
  :where(select:not([multiple], [size])),
  :where(select[size="1"]:not([multiple])) {
    appearance: auto;
    background-image: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(input[type=checkbox], input[type=radio]) {
    transition: none;
  }
  :where(input[type=checkbox], input[type=radio])::before {
    transition: none;
  }
}
:root {
  --table-padding-x: 1em;
  --table-padding-y: 0.75em;
  --table-border: #d1d5db;
  --table-heading-weight: 600;
  --table-heading-background: #f8f9fa;
  --table-stripe-background: #f1f3f5;
  --table-scroll-background: rgba(0, 0, 0, 0.05);
  --table-scroll-fade-width: 2em;
}

:where(.table-min, .table-bordered, .table-zebra) {
  width: 100%;
  border-collapse: collapse;
  font: inherit;
  color: inherit;
}
:where(.table-min, .table-bordered, .table-zebra) > caption {
  padding-block-end: 0.75em;
  text-align: start;
}
:where(.table-min, .table-bordered, .table-zebra) > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  padding: var(--table-padding-y) var(--table-padding-x);
  text-align: start;
  vertical-align: top;
}
:where(.table-min, .table-bordered, .table-zebra) > :is(thead, tbody, tfoot) > tr > th {
  font-weight: var(--table-heading-weight);
}

.table-min > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  border-bottom: 1px solid var(--table-border);
}

.table-bordered > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  border: 1px solid var(--table-border);
}

.table-bordered > thead > tr > :is(th, td) {
  background: var(--table-heading-background);
}

.table-zebra > thead > tr > :is(th, td) {
  border-bottom: 1px solid var(--table-border);
}

.table-zebra > tbody > tr:nth-child(even) > :is(th, td) {
  background: var(--table-stripe-background);
}

.table-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}
.table-scroll:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 4px;
}

.table-scroll-frame {
  position: relative;
  min-width: 0;
}
.table-scroll-frame::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--table-scroll-fade-width);
  pointer-events: none;
  background: linear-gradient(to left, var(--table-scroll-background), transparent);
  opacity: 0;
}
@media (max-width: 767px) {
  .table-scroll-frame::after {
    opacity: 1;
  }
}

/* this is modules index */
:root {
  --font-family-monospace: "Geist Mono", ui-monospace, sfmono-regular, menlo, monaco, consolas, monospace;
  --font-min-clamp: 12px;
  --active-squish: 0.5;
  --active-floor: 400;
  --active-max: 1800;
  --active-basis-h: 750;
  --body-bg: #fdfdfd;
}

body {
  background: var(--body-bg);
  padding: 0;
}

html.lenis,
html.lenis:focus-within {
  scroll-behavior: auto;
}

main {
  padding-bottom: calc(300 * var(--pxv-unit));
}

section {
  margin-top: calc(50 * var(--pxv-unit));
}

#width {
  position: sticky;
  top: 0;
  padding: calc(11 * var(--pxv-unit)) 0;
  background: var(--body-bg);
  border-bottom: 1px solid #ccc;
}

.box {
  background-color: gold;
  color: navy;
  width: calc(270 * var(--pxv-unit));
  height: calc(200 * var(--pxv-unit));
  border: 15px solid purple;
}
@media (min-width: 768px) {
  .box {
    background-color: indianred;
    border: calc(12 * var(--pxv-unit)) solid goldenrod;
    color: whitesmoke;
  }
}

#dev-config--width {
  position: static;
  background: lightgreen;
  padding: calc(10 * var(--pxv-unit)) calc(15 * var(--pxv-unit));
  opacity: 0.8;
}
#dev-config--width::before,
#dev-config--width span {
  font-weight: bold;
  font-size: calc(20 * var(--pxv-unit));
}
@media (width >= 1px) and (max-width: 374px) {
  #dev-config--width {
    background: lightseagreen;
  }
  #dev-config--width::before {
    content: "Below $ms ";
  }
}
@media (min-width: 320px) {
  #dev-config--width {
    background: lightblue;
  }
  #dev-config--width::before {
    content: "$ms ";
  }
}
@media (min-width: 375px) {
  #dev-config--width {
    background: lightgoldenrodyellow;
  }
  #dev-config--width::before {
    content: "$mm";
  }
}
@media (min-width: 500px) {
  #dev-config--width {
    background: yellow;
  }
  #dev-config--width::before {
    content: "$ml";
  }
}
@media (min-width: 600px) {
  #dev-config--width {
    background: lightsalmon;
  }
  #dev-config--width::before {
    content: "$ts";
  }
}
@media (min-width: 768px) {
  #dev-config--width {
    background: lightsteelblue;
  }
  #dev-config--width::before {
    content: "$tm";
  }
}
@media (min-width: 1024px) {
  #dev-config--width {
    background: lightpink;
  }
  #dev-config--width::before {
    content: "$tl";
  }
}
@media (min-width: 1440px) {
  #dev-config--width {
    background: rgb(90, 216, 244);
  }
  #dev-config--width::before {
    content: "$dm";
  }
}
@media (min-width: 1600px) {
  #dev-config--width {
    background: rgb(147, 245, 128);
  }
  #dev-config--width::before {
    content: "$dl";
  }
}
@media (min-width: 1800px) {
  #dev-config--width {
    background: yellow;
  }
  #dev-config--width::before {
    content: "$dxl";
  }
}

#hud-container {
  width: 100%;
  max-width: calc(480 * var(--pxv-unit));
  margin-block: calc(24 * var(--pxv-unit));
  background: #fff;
  color: #41464b;
  padding: calc(15 * var(--pxv-unit));
  border-radius: calc(10 * var(--pxv-unit));
  font-family: "Courier New", monospace;
  border: 1px solid #dedede;
}

.hud-header {
  font-weight: bold;
  border-bottom: 1px solid #333;
  margin-bottom: calc(15 * var(--pxv-unit));
  padding-bottom: calc(5 * var(--pxv-unit));
  text-transform: uppercase;
  font-size: calc(12.8 * var(--pxv-unit));
}

.control-group {
  margin-bottom: calc(12 * var(--pxv-unit));
}

.control-group label {
  display: block;
  font-size: calc(12 * var(--pxv-unit));
  margin-bottom: calc(5 * var(--pxv-unit));
}

.control-group input {
  width: 100%;
  accent-color: #dd1694;
}

.quote-demo {
  max-width: 38rem;
  margin-block: 1.5rem;
  border-inline-start: 1px solid cadetblue;
}

.scrim-demo-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(10 * var(--pxv-unit));
}

.scrim-demo-item {
  min-width: 0;
}

@media (width < 768px) {
  .scrim-demo-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.scrim-demo .wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  flex-shrink: 1;
  border-radius: calc(10 * var(--pxv-unit));
  overflow: hidden;
}

.scrim-demo figure {
  margin: 0;
  height: 100%;
  width: 100%;
}

.scrim-demo figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(10 * var(--pxv-unit));
}

.scrim-demo article {
  position: absolute;
  bottom: calc(10 * var(--pxv-unit));
  z-index: 2;
  padding: calc(20 * var(--pxv-unit));
  pointer-events: none;
}

.scrim-demo article h2 {
  color: white;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 calc(2 * var(--pxv-unit)) calc(4 * var(--pxv-unit)) rgba(0, 0, 0, 0.3);
}

.scrim-demo .top-aligned {
  top: calc(1 * var(--pxv-unit));
  bottom: auto;
}

.scrim-demo .right {
  right: calc(5 * var(--pxv-unit));
}

.shadow-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(180 * var(--pxv-unit))), 1fr));
  gap: calc(40 * var(--pxv-unit));
  padding: calc(24 * var(--pxv-unit));
  margin-block: calc(20 * var(--pxv-unit)) calc(60 * var(--pxv-unit));
}

.shadow-demo-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(12 * var(--pxv-unit));
  min-height: calc(150 * var(--pxv-unit));
  padding: calc(24 * var(--pxv-unit));
  border: 1px solid #ddd;
  border-radius: calc(12 * var(--pxv-unit));
  background: white;
  color: #222;
  text-align: center;
  overflow-wrap: anywhere;
}
.shadow-demo-card code {
  font-size: calc(13 * var(--pxv-unit));
}
.shadow-demo-card:focus-visible {
  outline: 3px solid #0061c7;
  outline-offset: calc(5 * var(--pxv-unit));
}

.flex-demo {
  gap: calc(12 * var(--pxv-unit));
  padding: calc(16 * var(--pxv-unit));
  margin-block: calc(12 * var(--pxv-unit)) calc(24 * var(--pxv-unit));
  border: 1px dashed cadetblue;
  background: #f4f7f8;
}
.flex-demo > span {
  padding: calc(12 * var(--pxv-unit));
  background: #d4e8ed;
  border-radius: calc(4 * var(--pxv-unit));
}

.flex-demo-tall {
  min-height: calc(160 * var(--pxv-unit));
}

.flex-demo-flow {
  max-width: calc(260 * var(--pxv-unit));
}
.flex-demo-flow > span {
  width: calc(110 * var(--pxv-unit));
}

.flex-demo-large {
  font-size: calc(28 * var(--pxv-unit));
}

.demo-layout {
  position: relative;
  display: grid;
  grid-template-columns: calc(190 * var(--pxv-unit)) minmax(0, 1fr);
  padding-top: calc(24 * var(--pxv-unit));
  gap: calc(96 * var(--pxv-unit));
  padding-inline: calc(24 * var(--pxv-unit)) calc(48 * var(--pxv-unit));
}
.demo-layout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(238 * var(--pxv-unit));
  width: 1px;
  background: #e3e6e9;
  pointer-events: none;
}

.demo-nav {
  max-height: calc(100svh - calc(128 * var(--pxv-unit)));
  overflow-y: auto;
}
.demo-nav summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(10 * var(--pxv-unit));
  padding: calc(10 * var(--pxv-unit)) calc(8 * var(--pxv-unit));
  list-style: none;
  border-radius: calc(6 * var(--pxv-unit));
  cursor: pointer;
  color: #343b43;
  font-size: max(12px, calc(15 * var(--pxv-unit)));
  font-weight: 600;
}
.demo-nav summary::-webkit-details-marker {
  display: none;
}
.demo-nav summary::before {
  content: "";
  width: calc(4 * var(--pxv-unit));
  height: calc(4 * var(--pxv-unit));
  flex-shrink: 0;
  border-right: 1.5px solid #67717d;
  border-bottom: 1.5px solid #67717d;
  transform: rotate(-45deg);
  transition: transform 250ms ease;
}
.demo-nav summary:focus-visible {
  outline: 2px solid #0061c7;
  outline-offset: calc(2 * var(--pxv-unit));
}
.demo-nav details[open] > summary::before {
  transform: rotate(45deg);
}
.demo-nav details {
  interpolate-size: allow-keywords;
}
.demo-nav details::details-content {
  height: 0;
  overflow: clip;
  opacity: 0;
  transition: height 250ms ease, opacity 250ms ease, content-visibility 250ms allow-discrete;
}
.demo-nav details[open]::details-content {
  height: auto;
  opacity: 1;
}
.demo-nav.is-jumping summary::before,
.demo-nav.is-jumping details::details-content {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .demo-nav summary::before,
  .demo-nav details::details-content {
    transition: none;
  }
}
.demo-nav .demo-subnav [aria-current] {
  border-radius: 0;
  background: #edf0f3;
  color: #151a20;
  font-weight: 600;
}
.demo-nav .demo-subnav [aria-current]::before {
  background: #dd1694;
}
.demo-nav {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pxv-unit));
  padding: calc(4 * var(--pxv-unit));
  font-size: max(12px, calc(15 * var(--pxv-unit)));
}
.demo-nav strong {
  margin: 0 calc(8 * var(--pxv-unit)) calc(20 * var(--pxv-unit));
  color: #171b20;
  font-size: max(12px, calc(16 * var(--pxv-unit)));
  letter-spacing: -0.02em;
}
.demo-nav a {
  padding: calc(8 * var(--pxv-unit)) calc(10 * var(--pxv-unit));
  border-radius: calc(4 * var(--pxv-unit));
  color: #606872;
  font-size: max(12px, calc(14 * var(--pxv-unit)));
  line-height: 1.4;
  text-decoration: none;
}
.demo-nav a:hover, .demo-nav a:focus-visible {
  text-decoration: none;
  color: #151a20;
}
.demo-nav a:focus-visible {
  outline: 2px solid #0061c7;
  outline-offset: calc(-2 * var(--pxv-unit));
}

.demo-content {
  max-width: calc(1100 * var(--pxv-unit));
}
.demo-content section > p:not([class]),
.demo-content section > ul,
.demo-content .docs-topic > p,
.demo-content .docs-media-example > p,
.demo-content .docs-reference,
.demo-content .docs-note {
  max-width: 72ch;
  color: #41464b;
  font-size: calc(16 * var(--pxv-unit));
  line-height: 1.65;
}
.demo-content section > p:not([class]) {
  margin-block: calc(12 * var(--pxv-unit)) calc(20 * var(--pxv-unit));
}
.demo-content > main > section {
  position: relative;
  margin-top: calc(96 * var(--pxv-unit));
  padding-top: calc(64 * var(--pxv-unit));
}
.demo-content > main > section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--section-rule-left, calc(-72 * var(--pxv-unit)));
  right: var(--section-rule-right, calc(-48 * var(--pxv-unit)));
  border-top: 1px solid #e3e6e9;
  pointer-events: none;
}
.demo-content > main > section > h2 {
  margin-bottom: calc(20 * var(--pxv-unit));
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.demo-content #getting-started > section,
.demo-content #components > section,
.demo-content #utilities > section,
.demo-content #typography > section,
.demo-content #scaling > section {
  margin-top: calc(48 * var(--pxv-unit));
}
.demo-content #getting-started > section > h3,
.demo-content #components > section > h3,
.demo-content #utilities > section > h3,
.demo-content #typography > section > h3,
.demo-content #scaling > section > h3 {
  line-height: 1.25;
  margin-bottom: calc(20 * var(--pxv-unit));
}
.demo-content #getting-started h4,
.demo-content #components h4,
.demo-content #utilities h4,
.demo-content .docs-topic h4 {
  margin-block: calc(32 * var(--pxv-unit)) calc(12 * var(--pxv-unit));
  line-height: 1.3;
}
.demo-content {
  min-width: 0;
}
.demo-content section[id] {
  scroll-margin-top: calc(112 * var(--pxv-unit));
}
.demo-content section > p:not([class]),
.demo-content section > ul,
.demo-content .demo-description,
.demo-content .docs-topic > p,
.demo-content .docs-media-example > p,
.demo-content .docs-reference,
.demo-content .docs-reference dt,
.demo-content .docs-reference dd,
.demo-content .docs-note,
.demo-content .demo-note,
.demo-content .demo-note strong {
  --font-size: calc(16 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .demo-content section > p:not([class]),
  .demo-content section > ul,
  .demo-content .demo-description,
  .demo-content .docs-topic > p,
  .demo-content .docs-media-example > p,
  .demo-content .docs-reference,
  .demo-content .docs-reference dt,
  .demo-content .docs-reference dd,
  .demo-content .docs-note,
  .demo-content .demo-note,
  .demo-content .demo-note strong {
    --font-size: calc(18 * var(--pxv-unit));
  }
}
.demo-content section > p:not([class]),
.demo-content section > ul,
.demo-content .demo-description,
.demo-content .docs-topic > p,
.demo-content .docs-media-example > p,
.demo-content .docs-reference,
.demo-content .docs-reference dt,
.demo-content .docs-reference dd,
.demo-content .docs-note,
.demo-content .demo-note,
.demo-content .demo-note strong {
  --font-max-clamp: 18px;
  font-size: clamp(var(--font-min-clamp), var(--font-size), var(--font-max-clamp));
}
.demo-content .type-scale-table caption,
.demo-content .type-scale-table th,
.demo-content .type-scale-table td {
  --font-size: calc(14 * var(--pxv-unit));
}
@media (min-width: 768px) {
  .demo-content .type-scale-table caption,
  .demo-content .type-scale-table th,
  .demo-content .type-scale-table td {
    --font-size: calc(16 * var(--pxv-unit));
  }
}
.demo-content .type-scale-table caption,
.demo-content .type-scale-table th,
.demo-content .type-scale-table td {
  --font-max-clamp: 18px;
  font-size: clamp(var(--font-min-clamp), var(--font-size), var(--font-max-clamp));
}

@media (width < 768px) {
  .demo-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(16 * var(--pxv-unit));
    padding-inline: calc(20 * var(--pxv-unit));
  }
  .demo-content {
    padding-inline: 0;
  }
  .demo-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .demo-nav strong {
    width: 100%;
    margin-bottom: 0;
  }
}
.type-example-label {
  margin-block: calc(24 * var(--pxv-unit)) calc(8 * var(--pxv-unit));
  white-space: pre-wrap;
}
.type-example-label code {
  font-size: calc(13 * var(--pxv-unit));
}

.demo-content code {
  font-weight: 500;
  padding: calc(2 * var(--pxv-unit)) calc(5 * var(--pxv-unit));
  border-radius: calc(3 * var(--pxv-unit));
  color: #dd1694;
  background: #f4eff3;
  font-size: calc(13 * var(--pxv-unit));
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.demo-content pre {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-block: calc(16 * var(--pxv-unit)) calc(24 * var(--pxv-unit));
  padding: calc(16 * var(--pxv-unit)) calc(20 * var(--pxv-unit));
  border: 1px solid #dedede;
  border-radius: calc(8 * var(--pxv-unit));
  background: #fff;
}
.demo-content pre code {
  padding: 0;
  background: transparent;
}

.demo-content .type-example-label {
  width: fit-content;
  margin-block: calc(28 * var(--pxv-unit)) calc(12 * var(--pxv-unit));
  padding: 0;
  border: 0;
  background: transparent;
}
.demo-content .type-example-label code {
  padding: calc(2 * var(--pxv-unit)) calc(5 * var(--pxv-unit));
  border-radius: calc(3 * var(--pxv-unit));
  background: #f4eff3;
}

.demo-nav-group > a {
  display: block;
}

.demo-subnav {
  margin: calc(2 * var(--pxv-unit)) 0 calc(12 * var(--pxv-unit)) calc(8 * var(--pxv-unit));
  padding: 0;
  border-left: 1px solid #e3e6e9;
  list-style: none;
}
.demo-subnav a {
  position: relative;
  display: block;
  padding-left: calc(20 * var(--pxv-unit));
  border-radius: 0;
  font-size: max(12px, calc(14 * var(--pxv-unit)));
}
.demo-subnav a::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -1px;
  width: 2px;
  background: transparent;
}
.demo-subnav a:hover:not([aria-current]) {
  background: #fff;
}
.demo-subnav a:hover:not([aria-current])::before {
  background: #c8c4c6;
}

.docs-definitions dt {
  margin-top: calc(16 * var(--pxv-unit));
  font-weight: 700;
}
.docs-definitions dd {
  margin-top: calc(4 * var(--pxv-unit));
}

.docs-sample {
  padding: calc(20 * var(--pxv-unit));
  margin-block: calc(12 * var(--pxv-unit));
  border: 1px solid #d0d0d0;
  border-radius: calc(8 * var(--pxv-unit));
}

.docs-media-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(24 * var(--pxv-unit));
}

.docs-media {
  width: min(100%, calc(280 * var(--pxv-unit)));
  aspect-ratio: 16/9;
  background: #eee;
}

@media (width < 768px) {
  .demo-nav {
    max-height: none;
    overflow: visible;
  }
}
.docs-reference {
  display: grid;
  grid-template-columns: minmax(calc(160 * var(--pxv-unit)), max-content) minmax(0, 1fr);
  gap: 0 calc(24 * var(--pxv-unit));
  margin-block: calc(20 * var(--pxv-unit)) calc(32 * var(--pxv-unit));
}
.docs-reference dt,
.docs-reference dd {
  padding-block: calc(12 * var(--pxv-unit));
  border-bottom: 1px solid #e8e8e8;
  font-size: calc(15 * var(--pxv-unit));
  line-height: 1.6;
}
.docs-reference dt {
  font-weight: 600;
}

.docs-topic {
  margin-block: calc(36 * var(--pxv-unit)) calc(48 * var(--pxv-unit));
}

.docs-media-example {
  flex: 1 1 calc(220 * var(--pxv-unit));
  max-width: calc(360 * var(--pxv-unit));
}
.docs-media-example h5 {
  font-weight: 600;
}
.docs-media-example p {
  margin-block: calc(6 * var(--pxv-unit)) calc(16 * var(--pxv-unit));
  font-size: calc(14 * var(--pxv-unit));
}
.docs-media-example .docs-media {
  width: 100%;
  border-radius: calc(6 * var(--pxv-unit));
  overflow: hidden;
}

@media (width < 600px) {
  .docs-reference {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-reference dt {
    padding-bottom: 0;
    border: 0;
  }
  .docs-reference dd {
    padding-top: calc(4 * var(--pxv-unit));
  }
}
.demo-content .code-block {
  max-width: 72ch;
  font-family: inherit;
  font-size: calc(16 * var(--pxv-unit));
  border-color: #1e293b;
  background: #0f172a;
  color: #f8fafc;
  white-space: pre;
  overflow-x: auto;
}
.demo-content .code-block code {
  font-weight: 400;
  color: inherit;
  background: transparent;
  overflow-wrap: normal;
}
.demo-content .code-block code span {
  font-size: inherit;
  line-height: inherit;
}
.demo-content .code-block .code-tag {
  color: #f472b6;
}
.demo-content .code-block .code-attr {
  color: #cbd5e1;
}
.demo-content .code-block .code-string {
  color: #7dd3fc;
}
.demo-content .code-block .code-punctuation {
  color: #94a3b8;
}
.demo-content .code-block .code-comment {
  color: #94a3b8;
  font-style: italic;
}

.demo-description {
  max-width: 72ch;
  margin-top: calc(16 * var(--pxv-unit));
  color: #41464b;
  font-size: calc(18 * var(--pxv-unit));
  line-height: 1.6;
}
.demo-description p {
  font-size: inherit;
}

.demo-github {
  display: inline-flex;
  align-items: center;
}
.demo-github img {
  width: auto;
  height: calc(20 * var(--pxv-unit));
}
.demo-github:focus-visible {
  outline: 2px solid #0061c7;
  outline-offset: calc(4 * var(--pxv-unit));
}

.demo-npm {
  display: inline-flex;
  margin-left: 0;
  vertical-align: middle;
}
.demo-npm img {
  width: auto;
  height: calc(20 * var(--pxv-unit));
}
.demo-npm:focus-visible {
  outline: 2px solid #0061c7;
  outline-offset: calc(4 * var(--pxv-unit));
}

.demo-sidebar {
  overflow-anchor: none;
  position: sticky;
  top: calc(88 * var(--pxv-unit));
  margin-top: calc(-12 * var(--pxv-unit));
  align-self: start;
}

.demo-size-helpers {
  position: fixed;
  bottom: calc(16 * var(--pxv-unit));
  left: calc(24 * var(--pxv-unit));
  z-index: 10;
  padding: calc(8 * var(--pxv-unit));
  background: #fdfdfd;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: calc(8 * var(--pxv-unit));
  margin-top: 0;
  font-family: monospace;
}
.demo-size-helpers #demo-viewport {
  font-size: calc(12 * var(--pxv-unit));
  font-family: var(--font-family-system);
}
.demo-size-helpers #dev-config--width {
  padding: calc(6 * var(--pxv-unit)) calc(8 * var(--pxv-unit));
  border-radius: calc(4 * var(--pxv-unit));
}
.demo-size-helpers #dev-config--width::before {
  font-size: calc(14 * var(--pxv-unit));
}

@media (width < 768px) {
  .demo-layout::before {
    display: none;
  }
  .demo-sidebar {
    display: none;
  }
}
.text-helper-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(24 * var(--pxv-unit));
  margin-block: calc(20 * var(--pxv-unit)) calc(40 * var(--pxv-unit));
}
.text-helper-grid > div > p {
  margin-bottom: calc(12 * var(--pxv-unit));
}

.text-helper-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.text-helper-sample {
  padding: calc(20 * var(--pxv-unit));
  border: 1px solid #e1e4e7;
  border-radius: calc(6 * var(--pxv-unit));
  background: #fff;
  font-size: calc(16 * var(--pxv-unit));
}

.text-helper-headline {
  font-size: calc(23 * var(--pxv-unit));
  font-weight: 600;
}

.text-helper-headline:not(.wrap-pretty, .wrap-balance) {
  text-wrap: wrap;
}

#text-helpers > h4 {
  margin-block: calc(32 * var(--pxv-unit)) calc(12 * var(--pxv-unit));
}

@media (width < 900px) {
  .text-helper-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.demo-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--pxv-unit));
  min-height: calc(48 * var(--pxv-unit));
  padding: calc(6 * var(--pxv-unit)) calc(24 * var(--pxv-unit));
  background: #222;
  color: #fff;
}
.demo-header .demo-site-title {
  margin: 0;
  font-size: calc(20 * var(--pxv-unit));
  line-height: 1.2;
  white-space: nowrap;
}
.demo-header .demo-site-title a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}
.demo-header .demo-site-title a:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: calc(4 * var(--pxv-unit));
}
.demo-header .demo-description {
  margin: calc(4 * var(--pxv-unit)) 0 0;
  max-width: none;
  font-size: calc(12 * var(--pxv-unit));
  line-height: 1.4;
}

.demo-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(12 * var(--pxv-unit));
}

@media (width < 768px) {
  .demo-header {
    gap: calc(12 * var(--pxv-unit));
    padding-inline: calc(16 * var(--pxv-unit));
  }
  .demo-header .demo-site-title {
    font-size: calc(16 * var(--pxv-unit));
  }
  .demo-header .demo-description {
    display: none;
  }
  .demo-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: calc(6 * var(--pxv-unit));
  }
}
.demo-brand {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--pxv-unit));
}

.type-scale-table-wrap {
  max-width: calc(680 * var(--pxv-unit));
  margin-block: calc(24 * var(--pxv-unit)) calc(40 * var(--pxv-unit));
  overflow-x: auto;
}

#pxv .type-scale-table-wrap {
  max-width: 72ch;
  font-size: calc(16 * var(--pxv-unit));
}

.type-scale-table {
  width: 100%;
}
.type-scale-table th:first-child,
.type-scale-table td:first-child {
  white-space: nowrap;
}
.type-scale-table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.type-scale-table caption {
  padding-bottom: calc(12 * var(--pxv-unit));
  color: #606872;
  font-size: calc(13 * var(--pxv-unit));
  text-align: left;
}
.type-scale-table th,
.type-scale-table td {
  padding: calc(10 * var(--pxv-unit)) calc(16 * var(--pxv-unit));
  border-bottom: 1px solid #e3e6e9;
  font-size: calc(14 * var(--pxv-unit));
  text-align: left;
}
.type-scale-table thead th {
  background: #edf0f3;
  font-weight: 600;
}
.type-scale-table tbody th {
  font-weight: 400;
}

.demo-note {
  max-width: 72ch;
  margin-block: calc(24 * var(--pxv-unit));
  padding: calc(20 * var(--pxv-unit)) calc(24 * var(--pxv-unit));
  border-left: 3px solid #dd1694;
  border-radius: 0 calc(6 * var(--pxv-unit)) calc(6 * var(--pxv-unit)) 0;
  background: #f4eff3;
  color: #41464b;
  font-size: calc(16 * var(--pxv-unit));
  line-height: 1.65;
}
.demo-note strong {
  display: block;
  margin-bottom: calc(6 * var(--pxv-unit));
  color: #24292f;
  font-size: calc(14 * var(--pxv-unit));
}
.demo-note p {
  margin: 0;
  font-size: inherit;
}

.demo-hero {
  --hero-left: calc(36 * var(--pxv-unit));
  position: sticky;
  top: calc(calc(64 * var(--pxv-unit)) - var(--hero-height, 33.333vw));
  z-index: 20;
  width: 100%;
  aspect-ratio: 3/1;
  min-height: calc(240 * var(--pxv-unit));
  isolation: isolate;
}
.demo-hero > img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  transform: translate3d(0, var(--hero-parallax, 0), 0);
}
.demo-hero .demo-hero-title {
  position: relative;
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  transform-origin: left var(--hero-title-baseline, 100%);
  transform: scale(calc(1 + (var(--hero-title-end-scale) - 1) * var(--hero-progress, 0)));
}
.demo-hero .demo-hero-title a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}
.demo-hero .demo-hero-title a:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: calc(4 * var(--pxv-unit));
}

.demo-hero-baseline {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}

.demo-hero-brand {
  position: absolute;
  z-index: 2;
  left: var(--hero-left);
  right: calc(24 * var(--pxv-unit));
  bottom: calc(24 * var(--pxv-unit));
  transform: translateY(calc((calc(8 * var(--pxv-unit)) + var(--hero-title-descent, 0) * (1 - var(--hero-title-end-scale))) * var(--hero-progress, 0)));
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(24 * var(--pxv-unit));
}
.demo-hero-brand .demo-actions {
  transform: translateX(calc(var(--hero-title-width, 0) * (var(--hero-title-end-scale) - 1) * var(--hero-progress, 0)));
}

@media (width < 768px) {
  .demo-hero {
    --hero-left: calc(20 * var(--pxv-unit));
    top: calc(calc(104 * var(--pxv-unit)) - var(--hero-height, 33.333vw));
  }
  .demo-hero .demo-hero-title {
    font-size: calc(28 * var(--pxv-unit));
    transform: none;
  }
  .demo-hero-brand {
    bottom: calc(16 * var(--pxv-unit));
    flex-direction: column;
    align-items: flex-start;
    gap: calc(10 * var(--pxv-unit));
    transform: none;
  }
  .demo-hero-brand .demo-actions {
    transform: none;
  }
}
.demo-header[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .demo-hero .demo-hero-title {
    transition: none;
  }
}
.demo-github,
.demo-npm {
  transition: filter 0.2s var(--easing);
}
.demo-github:hover, .demo-github:focus-visible,
.demo-npm:hover,
.demo-npm:focus-visible {
  filter: brightness(1.2);
}

.type-example-row {
  display: grid;
  grid-template-columns: calc(180 * var(--pxv-unit)) minmax(0, 1fr);
  align-items: start;
  gap: calc(32 * var(--pxv-unit));
  padding-block: calc(28 * var(--pxv-unit));
  border-bottom: 1px solid #e3e6e9;
}
.type-example-row .type-example-preview {
  min-width: 0;
}

.demo-content .type-example-row .type-example-label {
  margin: 0;
}

@media (width < 900px) {
  .type-example-row {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(16 * var(--pxv-unit));
  }
}
.demo-hero-size-probe {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.btn-demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(20 * var(--pxv-unit));
  padding: calc(24 * var(--pxv-unit));
  margin-block: calc(16 * var(--pxv-unit)) calc(24 * var(--pxv-unit));
  border: 1px solid #e3e6e9;
  border-radius: calc(8 * var(--pxv-unit));
}
.btn-demo-row > div {
  display: grid;
  justify-items: start;
  gap: calc(10 * var(--pxv-unit));
}
.btn-demo-row p {
  margin: 0;
}

.btn-demo-dark {
  background: #172332;
}

.btn-demo-block {
  max-width: 72ch;
  margin-block: calc(24 * var(--pxv-unit));
}

.btn-demo-configured {
  --btn-bg: #752b67;
  --btn-hover-bg: #5c2051;
  --btn-radius: calc(6 * var(--pxv-unit));
  --btn-weight: 500;
}

.btn-demo-reveal {
  --btn-bg: #172332;
  --btn-hover-bg: #172332;
  --btn-hover-border: #172332;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-demo-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #7c3aed;
  transform: translateX(-101%);
  transition: transform 350ms var(--easing);
}
.btn-demo-reveal:where(:not(:disabled, [aria-disabled=true])):focus-visible::before {
  transform: translateX(0);
}
@media (hover: hover) {
  .btn-demo-reveal:where(:not(:disabled, [aria-disabled=true])):hover::before {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-demo-reveal::before {
    transform: none;
    transition: none;
  }
}

.btn-demo-size-only {
  --btn-font-size: calc(12 * var(--pxv-unit));
  --btn-font-max: 12px;
}
@media (min-width: 768px) {
  .btn-demo-size-only {
    --btn-font-size: calc(14 * var(--pxv-unit));
    --btn-font-max: 14px;
  }
}
.btn-demo-size-only {
  font-size: clamp(var(--font-min-clamp, 11px), var(--btn-font-size), var(--btn-font-max));
  --btn-x-pad: 1.5em;
  --btn-y-pad: 0.75em;
  padding: calc(var(--btn-y-pad) - var(--btn-nudge, 0em)) var(--btn-x-pad) calc(var(--btn-y-pad) + var(--btn-nudge, 0em));
  appearance: none;
  background: #fff;
  color: #172332;
  border: 1px dashed currentcolor;
  border-radius: calc(4 * var(--pxv-unit));
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.btn-demo-size-only:hover {
  background: #edf0f3;
}
.btn-demo-size-only:focus-visible {
  outline: 2px solid #0061c7;
  outline-offset: 3px;
}

#buttons .btn-demo-row > div > p code,
#buttons .btn-demo-label code {
  padding: 0;
  color: #68717e;
  background: transparent;
  font-size: calc(12 * var(--pxv-unit));
  font-weight: 400;
}

#buttons .btn-demo-dark > div > p code {
  color: #b6c2d2;
}

#buttons .btn-demo-row {
  align-items: flex-start;
  gap: calc(28 * var(--pxv-unit));
}

.btn-demo-source {
  margin-block: calc(16 * var(--pxv-unit)) calc(28 * var(--pxv-unit));
}
.btn-demo-source > summary {
  width: fit-content;
  cursor: pointer;
  color: #172332;
  font-size: var(--body-m);
  padding-block: calc(8 * var(--pxv-unit));
}
.btn-demo-source > summary:focus-visible {
  outline: 2px solid #0061c7;
  outline-offset: 3px;
}
.btn-demo-source > p {
  margin-top: calc(12 * var(--pxv-unit));
}

:is(#type-body, #type-caps) .type-example-preview :is(.body--xs, .body--xxs, .body--xxxs) {
  --font-min-clamp: 0px;
}

.demo-content .type-example-sizes {
  margin: calc(10 * var(--pxv-unit)) 0 0;
  color: #68717e;
  font-size: calc(12 * var(--pxv-unit));
  line-height: 1.6;
}

.demo-content :is(p, dd, td, li) a:not([btn]) {
  color: #27313b;
  text-decoration-line: underline;
  text-decoration-color: #dd1694;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.demo-content :is(p, dd, td, li) a:not([btn]):hover {
  color: #a5106f;
  text-decoration-color: #dd1694;
  text-decoration-thickness: 2px;
}
.demo-content :is(p, dd, td, li) a:not([btn]):focus-visible {
  outline: 2px solid #fc7f71;
  outline-offset: 3px;
  border-radius: calc(2 * var(--pxv-unit));
}
@media (prefers-reduced-motion: reduce) {
  .demo-content :is(p, dd, td, li) a:not([btn]) {
    transition: none;
  }
}

.form-demo {
  padding: calc(28 * var(--pxv-unit));
  margin-block: calc(24 * var(--pxv-unit));
  border: 1px solid #dedede;
  border-radius: calc(8 * var(--pxv-unit));
  font-size: max(16px, calc(16 * var(--pxv-unit)));
  color: #172332;
}
.form-demo > [btn] {
  margin-top: calc(24 * var(--pxv-unit));
}

.form-demo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(24 * var(--pxv-unit));
}

.form-demo-full {
  grid-column: 1/-1;
}

.form-demo-choice {
  display: flex;
  align-items: flex-start;
  width: fit-content;
  line-height: 1.5;
}
.form-demo-choice input {
  flex-shrink: 0;
}

.form-demo-custom {
  --form-bg: #fff9f7;
  --form-border: #963a30;
  --form-radius: 0;
  --form-accent: #963a30;
  --form-focus: #963a30;
}
.form-demo-custom > .form-demo-choice {
  margin-top: calc(24 * var(--pxv-unit));
}

@media (width < 768px) {
  .form-demo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.form-demo :is(input[type=range], input[type=file], progress, meter) {
  display: block;
  max-width: 100%;
  width: 100%;
  font: inherit;
}

.form-demo input[type=color] {
  display: block;
  width: 3em;
  height: 2em;
}

.mixin-shadow-card {
  transition: box-shadow 0.4s var(--easing);
  box-shadow: 0 calc(var(--shadow-elevation, 12) * 1px) calc(var(--shadow-elevation, 12) * 2px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.4 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 2px) calc(var(--shadow-elevation, 12) * 4px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.3 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 4px) calc(var(--shadow-elevation, 12) * 8px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.2 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 8px) calc(var(--shadow-elevation, 12) * 16px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.1 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 10px) calc(var(--shadow-elevation, 12) * 20px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.05 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 12px) calc(var(--shadow-elevation, 12) * 24px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.02 * var(--shadow-active, 0)));
}
@media (prefers-reduced-motion: reduce) {
  .mixin-shadow-card {
    transition: none;
  }
}
.mixin-shadow-card {
  --shadow-elevation: 4;
  --shadow-weight: 1;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-active: 1;
  transition: box-shadow 0.4s var(--easing);
  box-shadow: 0 calc(var(--shadow-elevation, 12) * 1px) calc(var(--shadow-elevation, 12) * 2px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.4 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 2px) calc(var(--shadow-elevation, 12) * 4px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.3 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 4px) calc(var(--shadow-elevation, 12) * 8px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.2 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 8px) calc(var(--shadow-elevation, 12) * 16px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.1 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 10px) calc(var(--shadow-elevation, 12) * 20px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.05 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 12px) calc(var(--shadow-elevation, 12) * 24px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.02 * var(--shadow-active, 0)));
}
@media (prefers-reduced-motion: reduce) {
  .mixin-shadow-card {
    transition: none;
  }
}
.mixin-shadow-card:is(:hover, :focus-visible) {
  --shadow-elevation: 12;
  --shadow-weight: 1.3;
  --shadow-spread: -1px;
  --shadow-opacity: 0.2;
  --shadow-active: 1;
}

.mixin-shadow-hover {
  transition: box-shadow 0.4s var(--easing);
  box-shadow: 0 calc(var(--shadow-elevation, 12) * 1px) calc(var(--shadow-elevation, 12) * 2px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.4 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 2px) calc(var(--shadow-elevation, 12) * 4px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.3 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 4px) calc(var(--shadow-elevation, 12) * 8px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.2 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 8px) calc(var(--shadow-elevation, 12) * 16px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.1 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 10px) calc(var(--shadow-elevation, 12) * 20px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.05 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 12px) calc(var(--shadow-elevation, 12) * 24px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.02 * var(--shadow-active, 0)));
}
@media (prefers-reduced-motion: reduce) {
  .mixin-shadow-hover {
    transition: none;
  }
}
.mixin-shadow-hover:is(:hover, :focus-visible) {
  --shadow-elevation: 4;
  --shadow-weight: 1;
  --shadow-spread: 0px;
  --shadow-opacity: 0.2;
  --shadow-color: 0, 20, 190;
  --shadow-active: 1;
}

.mixin-scrim-image {
  position: relative;
  overflow: hidden;
  display: block;
  --scrim-color: 0, 20, 72;
  --scrim-dir: to top;
  --scrim-a: 0.6;
  --scrim-dist: 75%;
}
.mixin-scrim-image::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: block;
  background-image: linear-gradient(var(--scrim-dir), rgba(var(--scrim-color), calc(var(--scrim-a) * 1)) 0%, rgba(var(--scrim-color), calc(var(--scrim-a) * 0.852)) calc(var(--scrim-dist) * 0.12), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.621)) calc(var(--scrim-dist) * 0.28), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.385)) calc(var(--scrim-dist) * 0.46), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.183)) calc(var(--scrim-dist) * 0.66), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.054)) calc(var(--scrim-dist) * 0.85), rgba(var(--scrim-color), 0) var(--scrim-dist));
}

.inset-demo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(160 * var(--pxv-unit));
  padding: 0;
  border: 1px solid #dedede;
  border-radius: calc(12 * var(--pxv-unit));
  background: #fff;
  color: #172332;
  font: inherit;
  text-align: center;
  text-decoration: none;
  --inset-border-color: #2a649c;
}
.inset-demo-card img {
  display: block;
  width: 100%;
  height: calc(140 * var(--pxv-unit));
  object-fit: cover;
  border-radius: calc(12 * var(--pxv-unit)) calc(12 * var(--pxv-unit)) 0 0;
}
.inset-demo-card span {
  padding: calc(24 * var(--pxv-unit));
}
.inset-demo-card:focus-visible {
  outline: 2px solid #0061c7;
  outline-offset: 4px;
}
.inset-demo-card:disabled {
  opacity: 0.55;
}

.inset-demo-mixin {
  position: relative;
  --inset-border-width: calc(5 * var(--pxv-unit));
  --inset-border-color: #a5106f;
  --inset-border-speed: 350ms;
}
.inset-demo-mixin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--inset-border-color);
  transition: box-shadow var(--inset-border-speed) var(--easing, ease);
}
@media (hover: hover) {
  .inset-demo-mixin:where(:not(:disabled, [aria-disabled=true])):hover::after {
    box-shadow: inset 0 0 0 var(--inset-border-width) var(--inset-border-color);
  }
}
.inset-demo-mixin:where(:not(:disabled, [aria-disabled=true])):focus-visible::after {
  box-shadow: inset 0 0 0 var(--inset-border-width) var(--inset-border-color);
}
@media (prefers-reduced-motion: reduce) {
  .inset-demo-mixin::after {
    transition: none;
  }
}

.inset-demo-example {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(16 * var(--pxv-unit));
}
.inset-demo-example .inset-demo-card {
  width: 100%;
  flex: 1;
}

.inset-demo-grid {
  padding: 0;
  margin-block: calc(24 * var(--pxv-unit));
}

#tables .table-scroll-frame {
  margin-block: calc(24 * var(--pxv-unit));
}

#tables .table-scroll > table {
  min-width: 40rem;
}

.demo-code-scroll {
  position: relative;
  max-width: 72ch;
  min-width: 0;
  margin-block: calc(16 * var(--pxv-unit)) calc(24 * var(--pxv-unit));
  font-size: calc(16 * var(--pxv-unit));
}
.demo-code-scroll > .code-block {
  margin-block: 0;
}
@media (max-width: 767px) {
  .demo-code-scroll::after {
    content: "";
    position: absolute;
    inset-block: 1px;
    right: 1px;
    width: 2.5em;
    border-radius: 0 calc(8 * var(--pxv-unit)) calc(8 * var(--pxv-unit)) 0;
    background: linear-gradient(to left, #0f172a, transparent);
    pointer-events: none;
  }
}

.demo-content #tables .table-usage {
  max-width: none;
  width: 100%;
}

.demo-menu-toggle {
  display: none;
}

.demo-mobile-nav {
  transition: box-shadow 0.4s var(--easing);
  box-shadow: 0 calc(var(--shadow-elevation, 12) * 1px) calc(var(--shadow-elevation, 12) * 2px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.4 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 2px) calc(var(--shadow-elevation, 12) * 4px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.3 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 4px) calc(var(--shadow-elevation, 12) * 8px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.2 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 8px) calc(var(--shadow-elevation, 12) * 16px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.1 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 10px) calc(var(--shadow-elevation, 12) * 20px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.05 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 12px) calc(var(--shadow-elevation, 12) * 24px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.02 * var(--shadow-active, 0)));
}
@media (prefers-reduced-motion: reduce) {
  .demo-mobile-nav {
    transition: none;
  }
}
.demo-mobile-nav {
  --shadow-elevation: 28;
  --shadow-weight: 1.8;
  --shadow-spread: -4px;
  --shadow-opacity: 0.15;
  --shadow-active: 1;
  position: fixed;
  inset: 0 0 0 auto;
  width: min(85vw, 360px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 88px 20px 32px;
  border: 0;
  background: #fdfdfd;
  color: #343b43;
  overflow-y: auto;
}
.demo-mobile-nav::backdrop {
  background: rgba(0, 0, 0, 0.2);
}
.demo-mobile-nav .demo-nav {
  display: block;
  max-height: none;
  overflow: visible;
}
.demo-mobile-nav .demo-nav summary {
  padding-block: 16px;
  font-size: 18px;
}

.demo-menu-close {
  position: absolute;
  top: 24px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: #eee;
  color: #343b43;
  font-size: 30px;
  cursor: pointer;
}

.demo-menu-open {
  overflow: hidden;
}

.demo-menu-toggle:focus-visible,
.demo-menu-close:focus-visible {
  outline: 2px solid #dd1694;
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .demo-menu-toggle {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
  }
}
.demo-menu-toggle > span,
.demo-menu-close > span {
  font-size: inherit;
  line-height: 1;
}

.demo-scaling-link {
  margin-left: auto;
  color: #fff;
  font: 500 14px/1.3 var(--font-family-system);
  text-decoration: none;
  white-space: nowrap;
}
.demo-scaling-link span {
  font-size: inherit;
}
.demo-scaling-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.demo-scaling-link:focus-visible {
  outline: 2px solid #dd1694;
  outline-offset: 4px;
}
@media (max-width: 767px) {
  .demo-scaling-link {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 12px;
  }
}

.demo-content hr {
  background-color: #e3e6e9;
}