@layer m.reset {
  :where(*) {
    box-sizing: border-box;
  }

  :where(:not(dialog, [popover])) {
    margin: 0;
  }

  :where(html) {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  :where(img, picture, video, canvas, svg, iframe) {
    vertical-align: middle;
  }

  :where(input, button, select, textarea) {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }

  :where(p, h1, h2, h3, h4, h5, h6, li, dd, blockquote, figcaption) {
    overflow-wrap: break-word;
  }
}

@layer m.tokens {
  :where(:root) {
    --m-primary: oklch(55% .19 40);
    --m-density: 1;
    --m-radius: .5rem;
    --m-font-sans: system-ui, sans-serif;
    --m-font-mono: ui-monospace, SFMono-Regular, monospace;
    --m-font-size: 1rem;
    --m-measure: 100ch;
  }

  :where(*) {
    --_m-space-1: calc(var(--m-density, 1) * .25rem);
    --_m-space-2: calc(var(--m-density, 1) * .5rem);
    --_m-space-3: calc(var(--m-density, 1) * .75rem);
    --_m-space-4: calc(var(--m-density, 1) * 1rem);
    --_m-space-6: calc(var(--m-density, 1) * 1.5rem);
    --_m-space-8: calc(var(--m-density, 1) * 2rem);
    --_m-text-sm: calc(var(--m-font-size, 1rem) / 1.2);
    --_m-text-base: var(--m-font-size, 1rem);
    --_m-text-lg: calc(var(--m-font-size, 1rem) * 1.2);
    --_m-text-xl: calc(var(--m-font-size, 1rem) * pow(1.2, 2));
    --_m-text-2xl: calc(var(--m-font-size, 1rem) * pow(1.2, 3));
    --_m-leading: calc(1.4 + .2 * var(--m-density, 1));
    --_m-leading-tight: calc(1.05 + .15 * var(--m-density, 1));
  }

  :where(:root) {
    --_m-bar-size: calc(2 * var(--_m-space-3) + var(--_m-text-base) * var(--_m-leading));
    --_m-sticky-offset: 0px;
  }

  :where(:root:has( > body > header > nav)) {
    --_m-sticky-offset: var(--_m-bar-size);
  }

  :where(:root:has( > body > header > nav + nav)) {
    --_m-sticky-offset: calc(2 * var(--_m-bar-size));
  }

  :where(:root, :host) {
    --_m-surface: light-dark(oklch(99% .006 80), oklch(18% .008 60));
    --_m-surface-raised: light-dark(oklch(97% .004 260), oklch(23% .008 260));
    --_m-surface-overlay: light-dark(oklch(100% 0 0), oklch(24% .008 60));
    --_m-text: light-dark(oklch(22% .012 260), oklch(93% .006 260));
    --_m-edge: color-mix(in oklch, var(--_m-text), transparent 80%);
    --_m-shadow-overlay: 0 2px 6px -2px light-dark(oklch(0% 0 0 / .15), oklch(0% 0 0 / .4)),
    0 12px 32px -8px light-dark(oklch(0% 0 0 / .3), oklch(0% 0 0 / .7));
  }

  :where(:root) {
    --_m-host-surface: transparent;
  }

  :where(:root, :host, [data-contrast]) {
    --_m-control-border: var(--_m-in-control-border, light-dark(oklch(62% .01 260), oklch(56% .01 260)));
    --_m-border: var(--_m-in-border, light-dark(oklch(89% .006 260), oklch(34% .01 260)));
    --_m-text-muted: var(--_m-in-text-muted, light-dark(oklch(48% .012 260), oklch(72% .01 260)));
    --_m-tint: color-mix(in oklch, var(--_m-text), transparent var(--_m-in-tint, 92%));
    --_m-danger: var(--_m-in-danger, light-dark(oklch(53% .2 27), oklch(70% .17 27)));
    --_m-success: var(--_m-in-success, light-dark(oklch(50% .13 150), oklch(72% .15 150)));
    --_m-underline-mix: var(--_m-in-underline-mix, 60%);
    --_m-focus-width: var(--_m-in-focus-width, 2px);
  }

  :where([data-theme="light"]) {
    --_m-scheme: light;
  }

  :where([data-theme="dark"]) {
    --_m-scheme: dark;
  }

  :where(:root, :host, [data-theme]) {
    color-scheme: var(--_m-scheme, light dark);
  }

  :where([data-theme]) {
    background-color: var(--_m-surface);
    color: var(--_m-text);
  }

  :where(*) {
    --_m-primary-light: oklch(from var(--m-primary, oklch(55% .19 40)) min(l, var(--_m-in-primary-max, 1)) c h);
    --_m-primary-dark: oklch(from var(--m-primary, oklch(55% .19 40)) max(calc(l + .1), var(--_m-in-primary-min, 0)) c h);
    --_m-primary: light-dark(var(--_m-primary-light), var(--_m-primary-dark));
    --_m-primary-hover: color-mix(in oklch, var(--_m-primary), light-dark(#000, #fff) 15%);
    --_m-primary-subtle: color-mix(in oklch, var(--_m-primary), transparent var(--_m-in-primary-subtle, 85%));
    --_m-on-primary: var(--m-on-primary, contrast-color(var(--_m-primary)));
  }

  @supports not (color: contrast-color(red)) {
    :where(*) {
      --_m-on-primary: var(--m-on-primary, light-dark(oklch(from var(--_m-primary-light) calc((.565 - l) * 1000) 0 0deg), oklch(from var(--_m-primary-dark) calc((.565 - l) * 1000) 0 0deg)));
    }
  }

  @supports not (color: oklch(from red l c h)) {
    :where(*) {
      --_m-on-primary: initial;
    }
  }

  @media (prefers-contrast: more) {
    :where(:root, :host) {
      --_m-in-border: var(--_m-control-border);
      --_m-in-control-border: light-dark(oklch(45% .01 260), oklch(72% .01 260));
      --_m-in-text-muted: light-dark(oklch(38% .012 260), oklch(82% .01 260));
      --_m-in-tint: 85%;
      --_m-in-danger: light-dark(oklch(43% .17 27), oklch(80% .12 27));
      --_m-in-success: light-dark(oklch(40% .1 150), oklch(82% .13 150));
      --_m-in-underline-mix: 0%;
      --_m-in-focus-width: 3px;
      --_m-in-primary-max: .4;
      --_m-in-primary-min: .8;
      --_m-in-primary-subtle: 70%;
    }
  }

  :where([data-contrast="more"]) {
    --_m-in-border: var(--_m-control-border);
    --_m-in-control-border: light-dark(oklch(45% .01 260), oklch(72% .01 260));
    --_m-in-text-muted: light-dark(oklch(38% .012 260), oklch(82% .01 260));
    --_m-in-tint: 85%;
    --_m-in-danger: light-dark(oklch(43% .17 27), oklch(80% .12 27));
    --_m-in-success: light-dark(oklch(40% .1 150), oklch(82% .13 150));
    --_m-in-underline-mix: 0%;
    --_m-in-focus-width: 3px;
    --_m-in-primary-max: .4;
    --_m-in-primary-min: .8;
    --_m-in-primary-subtle: 70%;
  }

  :where(:root, :host) {
    --_m-ease: cubic-bezier(.2, .8, .2, 1);
    --_m-spring: linear(0, .18 6.25%, .53 12.5%, .84 18.75%, 1.04 25%, 1.12 34%, 1.04 50%, .99 62.5%, .985 70%, 1);
  }

  :where(:root, :host, [data-motion]) {
    --_m-duration: var(--_m-in-duration, .15s);
    --_m-duration-slow: var(--_m-in-duration-slow, .25s);
    --_m-scroll-behavior: var(--_m-in-scroll-behavior, smooth);
    --_m-spin: var(--_m-in-spin, m-spin .8s linear infinite);
    --_m-slide: var(--_m-in-slide, m-slide 1.2s ease-in-out infinite);
  }

  @media (prefers-reduced-motion: reduce) {
    :where(:root, :host) {
      --_m-in-duration: 0s;
      --_m-in-duration-slow: 0s;
      --_m-in-scroll-behavior: auto;
      --_m-in-spin: m-pulse 2s ease-in-out infinite;
      --_m-in-slide: m-pulse 2s ease-in-out infinite;
    }
  }

  :where([data-motion="reduce"]) {
    --_m-in-duration: 0s;
    --_m-in-duration-slow: 0s;
    --_m-in-scroll-behavior: auto;
    --_m-in-spin: m-pulse 2s ease-in-out infinite;
    --_m-in-slide: m-pulse 2s ease-in-out infinite;
  }

  @property --_m-drop {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --_m-fade-start {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
  }

  @property --_m-fade-end {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
  }

  @keyframes m-lift {
    to {
      --_m-drop: .5rem;
    }
  }

  @keyframes m-fade {
    0% {
      --_m-fade-end: 1.5em;
      mask-image: linear-gradient(to right,
      transparent,
      black var(--_m-fade-start) calc(100% - var(--_m-fade-end)),
      transparent);
    }

    10%, 90% {
      --_m-fade-start: 1.5em;
      --_m-fade-end: 1.5em;
    }

    100% {
      --_m-fade-start: 1.5em;
      mask-image: linear-gradient(to right,
      transparent,
      black var(--_m-fade-start) calc(100% - var(--_m-fade-end)),
      transparent);
    }
  }

  @keyframes m-spin {
    to {
      rotate: 1turn;
    }
  }

  @keyframes m-slide {
    from {
      background-position: -43% 0;
    }

    to {
      background-position: 143% 0;
    }
  }

  @keyframes m-pulse {
    50% {
      opacity: .4;
    }
  }
}

@layer m.base {
  :where(html) {
    background-color: var(--_m-surface);
    color: var(--_m-text);
    scroll-behavior: var(--_m-scroll-behavior);
    scroll-padding-block-start: var(--_m-sticky-offset);
  }

  :where(body) {
    box-sizing: content-box;
    max-inline-size: var(--m-measure, 100ch);
    padding: var(--_m-space-8) var(--_m-space-4);
    font-family: var(--m-font-sans, system-ui, sans-serif);
    font-size: var(--_m-text-base);
    line-height: var(--_m-leading);
    margin-inline: auto;
  }

  :where(:host) {
    background-color: var(--_m-host-surface, var(--_m-surface));
    color: var(--_m-text);
    font-family: var(--m-font-sans, system-ui, sans-serif);
    font-size: var(--m-font-size, 1rem);
    line-height: calc(1.4 + .2 * var(--m-density, 1));
  }

  ::selection {
    background-color: var(--_m-primary-subtle);
  }

  :where(address, blockquote, details, dl, fieldset, figure, form, ol, p, pre, table, ul) {
    margin-block-end: var(--_m-space-4);
  }

  :where(article, aside, footer, header, main, nav, section) {
    margin-block-end: var(--_m-space-8);
  }

  :where(address, blockquote, details, dl, fieldset, figure, form, ol, p, pre, table, ul, article, aside, footer, header, main, nav, section):where(:last-child) {
    margin-block-end: 0;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    margin-block: var(--_m-space-8) var(--_m-space-3);
    font-weight: 650;
    line-height: var(--_m-leading-tight);
    text-wrap: balance;
  }

  :where(h1, h2, h3, h4, h5, h6):where(:first-child) {
    margin-block-start: 0;
  }

  :where(h1, h2, h3, h4, h5, h6):where(:last-child) {
    margin-block-end: 0;
  }

  :where(h1) {
    font-size: clamp(var(--_m-text-2xl),
    calc(var(--_m-text-2xl) + (100vw - 20rem) * .76 / 60),
    calc(var(--m-font-size, 1rem) * pow(1.2, 5)));
    letter-spacing: -.02em;
    font-weight: 700;
  }

  :where(h2) {
    font-size: clamp(var(--_m-text-xl),
    calc(var(--_m-text-xl) + (100vw - 20rem) * .634 / 60),
    calc(var(--m-font-size, 1rem) * pow(1.2, 4)));
    letter-spacing: -.015em;
  }

  :where(h3) {
    font-size: clamp(var(--_m-text-lg), calc(var(--_m-text-lg) + (100vw - 20rem) * .528 / 60), var(--_m-text-2xl));
    letter-spacing: -.01em;
  }

  :where(h4) {
    font-size: var(--_m-text-lg);
  }

  :where(h5) {
    font-size: var(--_m-text-base);
  }

  :where(h6) {
    font-size: var(--_m-text-sm);
    color: var(--_m-text-muted);
  }

  :where(p) {
    text-wrap: pretty;
  }

  :where(hgroup) {
    margin-block: var(--_m-space-8) var(--_m-space-4);

    &:where(:first-child) {
      margin-block-start: 0;
    }

    &:where(:last-child) {
      margin-block-end: 0;
    }

    & > :where(*) {
      margin-block: 0;
    }

    & > :where(p:has( ~ :is(h1, h2, h3, h4, h5, h6))) {
      font-size: var(--_m-text-sm);
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--_m-text-muted);
      margin-block-end: var(--_m-space-1);
      font-weight: 600;
    }

    & > :where(:is(h1, h2, h3, h4, h5, h6) ~ p) {
      font-size: var(--_m-text-lg);
      color: var(--_m-text-muted);
      text-wrap: balance;
      margin-block-start: var(--_m-space-2);
    }
  }

  :where(small) {
    font-size: .875em;
  }

  :where(mark) {
    background-color: color-mix(in oklch, var(--_m-primary), transparent 70%);
    color: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border-radius: .2em;
    padding-inline: .15em;
  }

  :where(abbr[title]) {
    text-underline-offset: .2em;
    cursor: help;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  :where(ins) {
    color: var(--_m-success);
  }

  :where(del) {
    color: var(--_m-danger);
  }

  :where(time, data, output) {
    font-variant-numeric: tabular-nums;
  }

  :where(sub, sup) {
    vertical-align: baseline;
    font-size: .75em;
    line-height: 0;
    position: relative;
  }

  :where(sup) {
    inset-block-start: -.5em;
  }

  :where(sub) {
    inset-block-end: -.25em;
  }

  @view-transition {
    navigation: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    @view-transition {
      navigation: none;
    }
  }

  :where(:root)::view-transition-group(*) {
    animation-duration: var(--_m-duration-slow);
    animation-timing-function: var(--_m-ease);
  }

  @supports (animation-timeline: scroll()) {
    :where([data-scroll-progress]:root):before {
      content: "";
      z-index: 2;
      background-color: var(--_m-primary);
      transform-origin: 0;
      block-size: 3px;
      animation: linear both m-grow;
      animation-timeline: scroll(root);
      position: fixed;
      inset: 0 0 auto;
      scale: 0 1;
    }

    :where([data-scroll-progress]:root:dir(rtl)):before {
      transform-origin: 100%;
    }
  }

  @keyframes m-grow {
    to {
      scale: 1;
    }
  }
}

@layer m.elements {
  :where(a) {
    color: var(--_m-primary);
    text-decoration-line: underline;
    -webkit-text-decoration-color: color-mix(in oklch, currentcolor, transparent var(--_m-underline-mix));
    text-decoration-color: color-mix(in oklch, currentcolor, transparent var(--_m-underline-mix));
    text-underline-offset: .2em;
    transition-property: color, text-decoration-color, text-decoration-thickness;
    transition-duration: var(--_m-duration);
    transition-timing-function: var(--_m-ease);
    text-decoration-thickness: from-font;
  }

  :where(a:visited) {
    -webkit-text-decoration-color: var(--_m-text-muted);
    text-decoration-color: var(--_m-text-muted);
  }

  :where(a:hover) {
    color: var(--_m-primary-hover);
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
  }

  :where(h1, h2, h3, h4, h5, h6) :where(a:not([role="button"])) {
    color: inherit;
  }

  :where(a > [aria-hidden="true"]) {
    font-style: normal;
    display: inline-block;
  }

  :where(ul, ol) {
    padding-inline-start: var(--_m-space-6);
  }

  :where(ol) {
    font-variant-numeric: tabular-nums;
  }

  :where(li)::marker {
    color: var(--_m-text-muted);
  }

  :where(li + li) {
    margin-block-start: var(--_m-space-1);
  }

  :where(li) > :where(ul, ol) {
    margin-block: var(--_m-space-1) 0;
  }

  :where(menu) {
    gap: var(--_m-space-2);
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    display: flex;
  }

  :where(menu > li) {
    margin: 0;
  }

  :where(dt) {
    font-weight: 600;
  }

  :where(dd) {
    margin-inline-start: var(--_m-space-4);
  }

  :where(dd + dt) {
    margin-block-start: var(--_m-space-3);
  }

  :where(blockquote) {
    border-inline-start: 3px solid var(--_m-primary);
    color: var(--_m-text-muted);
    hanging-punctuation: first last;
    padding-inline-start: var(--_m-space-4);
  }

  :where(q) {
    hanging-punctuation: first last;
  }

  :where(blockquote) :where(cite, footer) {
    font-size: var(--_m-text-sm);
    color: var(--_m-text-muted);
  }

  :where(blockquote > footer):before {
    content: "— " / "";
  }

  :where(figcaption) {
    font-size: var(--_m-text-sm);
    color: var(--_m-text-muted);
    margin-block-start: var(--_m-space-2);
  }

  :where(figcaption:first-child) {
    margin-block: 0 var(--_m-space-2);
  }

  :where(code, kbd, samp, pre) {
    font-family: var(--m-font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: .875em;
  }

  :where(code, kbd, samp) {
    border-radius: calc(var(--m-radius, .5rem) / 2);
    background-color: var(--_m-tint);
    padding: .1em .3em;
  }

  :where(kbd) {
    border: 1px solid var(--_m-border);
    border-block-end-width: 2px;
  }

  :where(pre) {
    padding: var(--_m-space-4);
    border-radius: var(--m-radius, .5rem);
    background: linear-gradient(to right, var(--_m-surface-raised) 30%, transparent) left / 2em 100% no-repeat local,
    linear-gradient(to left, var(--_m-surface-raised) 30%, transparent) right / 2em 100% no-repeat local,
    linear-gradient(to right, var(--_m-edge), transparent) left / .75em 100% no-repeat,
    linear-gradient(to left, var(--_m-edge), transparent) right / .75em 100% no-repeat var(--_m-surface-raised);
    tab-size: 2;
    line-height: 1.5;
    overflow-x: auto;
  }

  :where(pre:not([dir])) {
    direction: ltr;
  }

  :where(pre) :where(code, samp) {
    font-size: inherit;
    background: none;
    border-radius: 0;
    padding: 0;
  }

  :where(table) {
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    inline-size: 100%;
  }

  :where(caption) {
    font-size: var(--_m-text-sm);
    color: var(--_m-text-muted);
    text-align: start;
    padding-block-end: var(--_m-space-2);
  }

  :where(th, td) {
    padding: var(--_m-space-2) var(--_m-space-3);
    border-block-end: 1px solid var(--_m-border);
    text-align: start;
    vertical-align: top;
  }

  :where(th) {
    font-weight: 600;
  }

  :where(thead th) {
    background-color: var(--_m-surface);
    box-shadow: 0 var(--_m-drop) var(--_m-drop) calc(-1 * var(--_m-drop)) var(--_m-edge);
    border-block-end-width: 2px;
    position: sticky;
    inset-block-start: var(--_m-sticky-offset, 0);
  }

  :where(tbody tr) {
    transition: background-color var(--_m-duration) var(--_m-ease);
  }

  :where(tbody tr:nth-child(2n)) {
    background-color: color-mix(in oklch, var(--_m-surface-raised), transparent 40%);
  }

  :where(tbody tr:hover) {
    background-color: var(--_m-primary-subtle);
  }

  :where(tfoot) :where(th, td) {
    border-block-end: 0;
    font-weight: 600;
  }

  :where(figure:has( > table)) {
    overflow-x: auto;
  }

  :where(figure:has( > table), :is(body > header > nav, body > nav) > :is(ul, ol, menu)) {
    scroll-padding-inline: 1.5em;
  }

  @supports (animation-timeline: scroll()) {
    :where(thead) {
      view-timeline: --_m-table;
      view-timeline-inset: var(--_m-sticky-offset, 0) 0;
    }

    :where(thead th) {
      animation: linear both m-lift;
      animation-timeline: --_m-table;
      animation-range: exit-crossing exit-crossing 2rem;
    }

    :where(figure:has( > table), :is(body > header > nav, body > nav) > :is(ul, ol, menu)) {
      animation: linear both m-fade;
      animation-timeline: scroll(self inline);
    }

    :where(figure:has( > table), :is(body > header > nav, body > nav) > :is(ul, ol, menu)):where(:dir(rtl)) {
      animation-direction: reverse;
    }
  }

  :where(label) {
    display: block;
  }

  :where(:not(legend) + label) {
    margin-block-start: var(--_m-space-3);
  }

  :where(fieldset) {
    padding: var(--_m-space-3) var(--_m-space-4) var(--_m-space-4);
    border: 1px solid var(--_m-border);
    border-radius: var(--m-radius, .5rem);
  }

  :where(legend) {
    padding-inline: var(--_m-space-1);
    font-weight: 600;
  }

  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="reset"], [type="button"], [type="image"], [type="hidden"]), select, textarea) {
    inline-size: 100%;
    padding: var(--_m-space-2) var(--_m-space-3);
    border: 1px solid var(--_m-control-border);
    border-radius: var(--m-radius, .5rem);
    background-color: var(--_m-surface);
    color: var(--_m-text);
    line-height: var(--_m-leading-tight);
    appearance: none;
    transition-property: border-color, box-shadow;
    transition-duration: var(--_m-duration);
    transition-timing-function: var(--_m-ease);
    display: block;

    :where(label) > &, :where(label) + & {
      margin-block-start: var(--_m-space-1);
    }

    &:where(:focus-visible) {
      border-color: var(--_m-primary);
      box-shadow: 0 0 0 1px var(--_m-primary),
      0 0 0 4px var(--_m-primary-subtle);
      outline: 2px solid #0000;
    }

    &:where(:user-invalid, [aria-invalid="true"]) {
      border-color: var(--_m-danger);
    }

    &:where(:user-invalid, [aria-invalid="true"]):where(:focus-visible) {
      box-shadow: 0 0 0 1px var(--_m-danger),
      0 0 0 4px color-mix(in oklch, var(--_m-danger), transparent 80%);
    }

    &:where([aria-invalid="false"]) {
      border-color: var(--_m-success);
    }

    &:where([aria-invalid="false"]:focus-visible) {
      box-shadow: 0 0 0 1px var(--_m-success),
      0 0 0 4px color-mix(in oklch, var(--_m-success), transparent 80%);
    }

    &:where(:not(select, [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])) {
      background-image: var(--_m-field-icon, none);
      background-position: right var(--_m-space-3) center;
      background-repeat: no-repeat;
      background-size: 1em;

      &:where(:dir(rtl)) {
        background-position: left var(--_m-space-3) center;
      }

      &:where(:user-invalid, [aria-invalid="true"], [aria-invalid="false"]) {
        padding-inline-end: calc(var(--_m-space-3) + 1.5em);
      }

      &:where(:user-invalid, [aria-invalid="true"]) {
        --_m-field-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23de3c37' stroke-width='2.5' stroke-linecap='round'><circle cx='12' cy='12' r='9.5'/><path d='M12 7v6m0 4h.01'/></svg>");
      }

      &:where([aria-invalid="false"]) {
        --_m-field-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23319751' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
      }
    }

    &::placeholder {
      color: var(--_m-text-muted);
      opacity: 1;
    }

    &:where([readonly]) {
      border-color: var(--_m-border);
      background-color: var(--_m-surface-raised);
    }

    &:where(:disabled) {
      background-color: var(--_m-surface-raised);
      opacity: .6;
      cursor: not-allowed;
    }
  }

  :where(textarea) {
    field-sizing: content;
    min-block-size: calc(3lh + 2 * var(--_m-space-2) + 2px);
    line-height: var(--_m-leading);
    resize: vertical;
    background-position: right var(--_m-space-3) top calc(var(--_m-space-2) + (1lh - 1em) / 2);

    &:where(:dir(rtl)) {
      background-position: left var(--_m-space-3) top calc(var(--_m-space-2) + (1lh - 1em) / 2);
    }
  }

  :where(input[type="search"]) {
    background-image: var(--_m-field-icon, none),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='m15.5 15.5 5 5'/></svg>");
    background-position: right var(--_m-space-3) center,
    left var(--_m-space-3) center;
    padding-inline-start: calc(var(--_m-space-3) + 1.5em);

    &:where(:dir(rtl)) {
      background-position: left var(--_m-space-3) center,
      right var(--_m-space-3) center;
    }

    &::-webkit-search-decoration {
      appearance: none;
    }
  }

  :where(input, select, textarea, fieldset) + :where(small) {
    color: var(--_m-text-muted);
    margin-block-start: var(--_m-space-1);
    display: block;
  }

  :where(fieldset:has( + small)) {
    margin-block-end: 0;
  }

  :where(fieldset) + :where(small) {
    margin-block-end: var(--_m-space-4);
  }

  :where(:user-invalid, [aria-invalid="true"], fieldset:has(:user-invalid, [aria-invalid="true"])) + :where(small) {
    color: var(--_m-danger);
  }

  :where([aria-invalid="false"]) + :where(small) {
    color: var(--_m-success);
  }

  :where(label:has( > :disabled,  + :disabled), fieldset:disabled label) {
    color: var(--_m-text-muted);
    cursor: not-allowed;
  }

  :where(select:not([multiple], [size])) {
    background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
    background-position: calc(100% - var(--_m-space-3) - .6em) 50%,
    calc(100% - var(--_m-space-3) - .3em) 50%;
    background-repeat: no-repeat;
    background-size: .3em .3em;
    padding-inline-end: var(--_m-space-8);
  }

  @supports (appearance: base-select) {
    :where(select:not([multiple], [size])) {
      background-image: none;
      align-items: center;
      padding-inline-end: var(--_m-space-3);
      display: flex;

      & {
        appearance: base-select;
      }

      &::picker(select) {
        appearance: base-select;
      }

      &::picker-icon {
        color: var(--_m-text-muted);
        transition: rotate var(--_m-duration) var(--_m-ease);
        margin-inline-start: auto;
      }

      &:where(:open)::picker-icon {
        rotate: 180deg;
      }

      &::picker(select) {
        margin-block: var(--_m-space-1);
        padding: var(--_m-space-1);
        border: 1px solid var(--_m-border);
        border-radius: var(--m-radius, .5rem);
        background-color: var(--_m-surface-overlay);
        box-shadow: var(--_m-shadow-overlay);
        opacity: 0;
        translate: 0 calc(-1 * var(--_m-space-1));
        transition: opacity var(--_m-duration) var(--_m-ease),
        translate var(--_m-duration) var(--_m-ease),
        display var(--_m-duration) allow-discrete,
        overlay var(--_m-duration) allow-discrete;
      }

      &:where(:open)::picker(select) {
        opacity: 1;
        translate: 0;
      }

      @starting-style {
        &:where(:open)::picker(select) {
          opacity: 0;
          translate: 0 calc(-1 * var(--_m-space-1));
        }
      }
    }

    :where(select:not([multiple], [size]) option) {
      padding: var(--_m-space-2) var(--_m-space-3);
      border-radius: calc(var(--m-radius, .5rem) - 2px);

      &:where(:hover, :focus-visible) {
        background-color: var(--_m-tint);
        outline: 2px solid #0000;
      }

      &:where(:checked) {
        font-weight: 600;
      }

      &::checkmark {
        color: var(--_m-primary);
      }
    }
  }

  :where(input:is([type="checkbox"], [type="radio"])) {
    block-size: 1.125em;
    inline-size: 1.125em;
    vertical-align: top;
    border: 1px solid var(--_m-control-border);
    background-color: var(--_m-surface);
    appearance: none;
    cursor: pointer;
    transition-property: background-color, border-color, box-shadow;
    transition-duration: var(--_m-duration);
    transition-timing-function: var(--_m-ease);
    border-radius: .25em;
    place-content: center;
    margin-block-start: calc(.5lh - .5625em);
    margin-inline-end: var(--_m-space-2);
    display: inline-grid;

    &:before {
      content: "";
      background-color: var(--_m-on-primary);
      block-size: .625em;
      inline-size: .625em;
      transition: scale var(--_m-duration) var(--_m-ease);
      scale: 0;
    }

    &:where(:checked) {
      border-color: var(--_m-primary);
      background-color: var(--_m-primary);
    }

    &:where(:checked):before {
      scale: 1;
    }

    &:where(:focus-visible) {
      box-shadow: 0 0 0 2px var(--_m-surface),
      0 0 0 4px var(--_m-primary);
      outline: 2px solid #0000;
    }

    &:where(:disabled) {
      opacity: .5;
      cursor: not-allowed;
    }

    &:where([aria-invalid="true"]) {
      border-color: var(--_m-danger);
    }
  }

  :where(input[type="checkbox"]):before {
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }

  :where(input[type="checkbox"]:indeterminate) {
    border-color: var(--_m-primary);
    background-color: var(--_m-primary);

    &:before {
      clip-path: none;
      block-size: .125em;
      scale: 1;
    }
  }

  :where(input[type="radio"]) {
    border-radius: 50%;

    &:before {
      border-radius: 50%;
      block-size: .5em;
      inline-size: .5em;
    }
  }

  :where(input[type="checkbox"]:is([role="switch"], [switch])) {
    --_m-switch-travel: calc(2em - 2px - .25em - .75em);
    background-color: var(--_m-control-border);
    border-radius: 999px;
    place-content: center start;
    inline-size: 2em;
    padding-inline: .125em;

    &:before {
      clip-path: none;
      background-color: var(--_m-surface);
      border-radius: 50%;
      block-size: .75em;
      inline-size: .75em;
      transition-property: translate, background-color;
      scale: 1;
      box-shadow: 0 1px 2px oklch(0% 0 0 / .3);
    }

    &:where(:checked) {
      background-color: var(--_m-primary);
    }

    &:where(:checked):before {
      background-color: var(--_m-on-primary);
      translate: var(--_m-switch-travel) 0;
    }

    &:where(:checked:dir(rtl)):before {
      translate: calc(-1 * var(--_m-switch-travel)) 0;
    }

    &:where(:indeterminate:not(:checked)) {
      border-color: var(--_m-control-border);
      background-color: var(--_m-control-border);

      &:before {
        block-size: .75em;
      }
    }
  }

  :where(input[type="range"]) {
    --_m-range-thumb: 1.25rem;
    --_m-range-track: .5rem;
    inline-size: 100%;
    block-size: var(--_m-range-thumb);
    accent-color: var(--_m-primary);
    appearance: none;
    cursor: pointer;
    background-color: #0000;
    overflow: hidden;

    &:where(:disabled) {
      opacity: .5;
      cursor: not-allowed;
    }

    &::-webkit-slider-runnable-track {
      block-size: var(--_m-range-track);
      background-color: var(--_m-tint);
      border-radius: 999px;
    }

    &::-moz-range-track {
      block-size: var(--_m-range-track);
      background-color: var(--_m-tint);
      border-radius: 999px;
    }

    &::-moz-range-progress {
      block-size: var(--_m-range-track);
      background-color: var(--_m-primary);
      border-radius: 999px;
    }

    &::-webkit-slider-thumb {
      inline-size: var(--_m-range-thumb);
      block-size: var(--_m-range-thumb);
      background-color: var(--_m-primary);
      box-shadow: inset 0 0 0 2px var(--_m-surface);
      appearance: none;
      border-image: linear-gradient(90deg, var(--_m-primary) 50%, transparent 0) 0 1 /
      calc(50% - var(--_m-range-track) / 2) 100vw / 0 100vw;
      transition: background-color var(--_m-duration) var(--_m-ease);
      border-radius: 50%;
      margin-block-start: calc((var(--_m-range-track) - var(--_m-range-thumb)) / 2);
    }

    &::-moz-range-thumb {
      box-sizing: border-box;
      inline-size: var(--_m-range-thumb);
      block-size: var(--_m-range-thumb);
      border: 2px solid var(--_m-surface);
      background-color: var(--_m-primary);
      transition: background-color var(--_m-duration) var(--_m-ease);
      border-radius: 50%;
    }

    &:where(:dir(rtl))::-webkit-slider-thumb {
      border-image-source: linear-gradient(-90deg, var(--_m-primary) 50%, transparent 0);
    }

    &:where(:hover:not(:disabled))::-webkit-slider-thumb {
      background-color: var(--_m-primary-hover);
    }

    &:where(:hover:not(:disabled))::-moz-range-thumb {
      background-color: var(--_m-primary-hover);
    }
  }

  :where(input[type="color"]) {
    border: 1px solid var(--_m-control-border);
    border-radius: var(--m-radius, .5rem);
    background-color: var(--_m-surface);
    cursor: pointer;
    block-size: 2.25rem;
    inline-size: 3rem;
    padding: 2px;
  }

  :where(input[type="color"])::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  :where(input[type="color"])::-webkit-color-swatch {
    border-radius: calc(var(--m-radius, .5rem) - 2px);
    border: 0;
  }

  :where(input[type="color"])::-moz-color-swatch {
    border-radius: calc(var(--m-radius, .5rem) - 2px);
    border: 0;
  }

  :where(input[type="file"]) {
    inline-size: 100%;
  }

  :where(label) > :where(input:is([type="range"], [type="color"], [type="file"])) {
    margin-block-start: var(--_m-space-1);
    display: block;
  }

  :where(label:has( > span + :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="search"]), textarea, select))) {
    position: relative;

    & > :where(span) {
      color: var(--_m-text-muted);
      font-size: .75em;
      line-height: var(--_m-leading-tight);
      pointer-events: none;
      transition-property: inset-block-start, font-size;
      transition-duration: var(--_m-duration);
      transition-timing-function: var(--_m-ease);
      position: absolute;
      inset-block-start: calc(1px + var(--_m-space-1));
      inset-inline-start: calc(1px + var(--_m-space-3));
    }

    & > :where(input, textarea, select) {
      padding-block: calc(var(--_m-space-2) + .75em) var(--_m-space-1);
      margin-block-start: 0;
    }

    & > :where(textarea) {
      min-block-size: calc(3lh + var(--_m-space-2) + .75em + var(--_m-space-1) + 2px);
    }

    &:where(:has( > :placeholder-shown:not(:focus))) > :where(span) {
      font-size: 1em;
      inset-block-start: calc(1px + var(--_m-space-2) + .75em);
    }

    & > :where(:placeholder-shown:not(:focus))::placeholder {
      opacity: 0;
    }
  }

  :where(button, input:is([type="submit"], [type="reset"], [type="button"]), a[role="button"]) {
    padding: var(--_m-space-2) var(--_m-space-4);
    border: 1px solid var(--_m-primary);
    border-radius: var(--m-radius, .5rem);
    background-color: var(--_m-primary);
    color: var(--_m-on-primary);
    font-weight: 600;
    line-height: var(--_m-leading-tight);
    text-align: center;
    cursor: pointer;
    transition-property: background-color, border-color, color, box-shadow, scale;
    transition-duration: var(--_m-duration);
    transition-timing-function: var(--_m-ease);
    text-decoration-line: none;
    display: inline-block;

    &:where(:hover:not(:disabled, [aria-disabled="true"])) {
      border-color: var(--_m-primary-hover);
      background-color: var(--_m-primary-hover);
    }

    &:where(:active:not(:disabled, [aria-disabled="true"])) {
      scale: .98;
    }

    &:where(:disabled, [aria-disabled="true"]) {
      opacity: .5;
      cursor: not-allowed;
    }

    & + & {
      margin-inline-start: var(--_m-space-2);
    }

    :where(label, input, select, textarea, fieldset) + & {
      margin-block-start: var(--_m-space-4);
    }
  }

  :where(button, input):where([type="reset"], [formnovalidate]) {
    border-color: var(--_m-control-border);
    color: var(--_m-text);
    background-color: #0000;
  }

  :where(input[type="file"])::file-selector-button {
    border-color: var(--_m-control-border);
    color: var(--_m-text);
    background-color: #0000;
  }

  :where(button, input):where([type="reset"], [formnovalidate]):where(:hover:not(:disabled)) {
    border-color: var(--_m-control-border);
    background-color: var(--_m-tint);
  }

  :where(input[type="file"]:hover)::file-selector-button {
    border-color: var(--_m-control-border);
    background-color: var(--_m-tint);
  }

  :where(input[type="file"])::file-selector-button {
    padding: var(--_m-space-2) var(--_m-space-4);
    border: 1px solid var(--_m-control-border);
    border-radius: var(--m-radius, .5rem);
    cursor: pointer;
    transition: background-color var(--_m-duration) var(--_m-ease);
    margin-inline-end: var(--_m-space-3);
    font-weight: 600;
  }

  :where([role="group"], search:not(:has( > form)), search > form) {
    vertical-align: middle;
    display: inline-flex;

    &:where(:has( > input,  > select,  > textarea)) {
      display: flex;
    }

    :where(label) > &, :where(label) + & {
      margin-block-start: var(--_m-space-1);
    }

    & > :where(*) {
      border-radius: 0;
      margin: 0;
    }

    & > :where(* + *) {
      margin-inline-start: -1px;
    }

    & > :where(:focus-visible) {
      z-index: 2;
      border-radius: calc(var(--m-radius, .5rem) / 2);
      position: relative;
    }

    & > :where(:first-child) {
      border-start-start-radius: var(--m-radius, .5rem);
      border-end-start-radius: var(--m-radius, .5rem);
    }

    & > :where(:last-child) {
      border-start-end-radius: var(--m-radius, .5rem);
      border-end-end-radius: var(--m-radius, .5rem);
    }

    & > :where(input, select, textarea) {
      flex: 1;
      inline-size: auto;
      min-inline-size: 0;
    }

    & > :where(span) {
      padding: var(--_m-space-2) var(--_m-space-3);
      border: 1px solid var(--_m-control-border);
      background-color: var(--_m-surface-raised);
      color: var(--_m-text-muted);
      line-height: var(--_m-leading-tight);
      white-space: nowrap;
    }

    & > :where(:hover:not(:focus-visible, span)) {
      z-index: 1;
      position: relative;
    }

    & > :where(button, input:is([type="submit"], [type="reset"], [type="button"]), a[role="button"]) + :where(button, input:is([type="submit"], [type="reset"], [type="button"]), a[role="button"]) {
      border-inline-start-color: color-mix(in oklch, currentcolor, transparent 70%);
    }
  }

  :where(button[aria-pressed]) {
    border-color: var(--_m-control-border);
    color: var(--_m-text);
    background-color: #0000;

    &:where(:hover:not(:disabled)) {
      border-color: var(--_m-control-border);
      background-color: var(--_m-tint);
    }

    &:where([aria-pressed="true"]) {
      border-color: var(--_m-primary);
      background-color: var(--_m-primary-subtle);
      box-shadow: inset 0 0 0 1px var(--_m-primary);
    }

    &:where([aria-pressed="true"]:not(:focus-visible)) {
      z-index: 1;
      position: relative;
    }

    &:where([aria-pressed="true"]:hover:not(:disabled)) {
      border-color: var(--_m-primary-hover);
      background-color: color-mix(in oklch, var(--_m-primary), transparent 75%);
    }
  }

  :where(details) {
    padding-inline: var(--_m-space-4);
    border: 1px solid var(--_m-border);
    border-radius: var(--m-radius, .5rem);
  }

  :where(details[open]) {
    padding-block-end: var(--_m-space-4);
  }

  :where(summary) {
    margin-inline: calc(-1 * var(--_m-space-4));
    padding: var(--_m-space-3) var(--_m-space-4);
    border-radius: calc(var(--m-radius, .5rem) - 1px);
    cursor: pointer;
    font-weight: 600;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &:before {
      content: "";
      vertical-align: .15em;
      border-style: solid;
      border-color: var(--_m-text-muted);
      block-size: .45em;
      inline-size: .45em;
      transition: rotate var(--_m-duration) var(--_m-ease);
      border-width: 0 2px 2px 0;
      margin-inline: .1em .6em;
      display: inline-block;
      rotate: -45deg;
    }

    &:where(:dir(rtl)):before {
      rotate: 135deg;
    }
  }

  :where(details[open]) > :where(summary) {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }

  :where(details[open]) > :where(summary):before {
    rotate: 45deg;
  }

  @supports (interpolate-size: allow-keywords) {
    :where(details) {
      transition: padding-block-end var(--_m-duration-slow) var(--_m-ease);
    }

    :where(details)::details-content {
      contain: layout;
      interpolate-size: allow-keywords;
      block-size: 0;
      transition: block-size var(--_m-duration-slow) var(--_m-ease),
      content-visibility var(--_m-duration-slow) allow-discrete;
      overflow: clip;
    }

    :where(details[open])::details-content {
      block-size: auto;
    }
  }

  :where(dialog, [popover]) {
    max-inline-size: min(var(--m-measure, 100ch), calc(100vw - 2 * var(--_m-space-4)));
    padding: var(--_m-space-6);
    border: 1px solid var(--_m-border);
    border-radius: calc(var(--m-radius, .5rem) * 1.5);
    background-color: var(--_m-surface-overlay);
    color: var(--_m-text);
    box-shadow: var(--_m-shadow-overlay);
    opacity: 0;
    transition: opacity var(--_m-duration-slow) var(--_m-ease),
    scale var(--_m-duration-slow) var(--_m-ease),
    translate var(--_m-duration-slow) var(--_m-ease),
    display var(--_m-duration-slow) allow-discrete,
    overlay var(--_m-duration-slow) allow-discrete;
  }

  :where(dialog) {
    scale: .96;
  }

  :where(dialog:modal) {
    overscroll-behavior: contain;
  }

  :where([popover]) {
    translate: 0 var(--_m-space-2);
  }

  :where(dialog[open], [popover]:popover-open) {
    opacity: 1;
    transition-timing-function: var(--_m-ease), var(--_m-spring), var(--_m-spring);
    translate: 0;
    scale: 1;
  }

  @starting-style {
    :where(dialog[open]) {
      opacity: 0;
      scale: .96;
    }

    :where([popover]:popover-open) {
      opacity: 0;
      translate: 0 var(--_m-space-2);
    }
  }

  :where(dialog)::backdrop {
    backdrop-filter: blur(4px);
    opacity: 0;
    overscroll-behavior: contain;
    transition: opacity var(--_m-duration-slow) var(--_m-ease),
    display var(--_m-duration-slow) allow-discrete,
    overlay var(--_m-duration-slow) allow-discrete;
    background-color: oklch(0% 0 0 / .4);
    overflow: hidden;
  }

  :where(dialog[open])::backdrop {
    opacity: 1;
  }

  @media (prefers-reduced-transparency: reduce) {
    :where(dialog)::backdrop {
      backdrop-filter: none;
      background-color: oklch(0% 0 0 / .6);
    }
  }

  @starting-style {
    :where(dialog[open])::backdrop {
      opacity: 0;
    }
  }

  :where(img, video, canvas, iframe, svg) {
    max-inline-size: 100%;
  }

  :where(img, video, canvas) {
    block-size: auto;
  }

  :where(a > svg[aria-hidden="true"], a > [aria-hidden="true"] > :is(img, svg)) {
    vertical-align: -.25em;
    block-size: 1.25em;
    inline-size: auto;
  }

  :where(img, video) {
    border-radius: var(--m-radius, .5rem);
  }

  :where(iframe) {
    border: 1px solid var(--_m-border);
    border-radius: var(--m-radius, .5rem);
  }

  :where(audio) {
    inline-size: 100%;
  }

  :where(figure > img, figure > video, figure > iframe, figure > canvas, figure > svg, figure > picture > img) {
    display: block;
  }

  :where(progress) {
    background-color: var(--_m-tint);
    appearance: none;
    border: 0;
    border-radius: 999px;
    block-size: .5rem;
    inline-size: 100%;
    display: block;
    overflow: hidden;
  }

  :where(progress)::-webkit-progress-bar {
    background-color: #0000;
  }

  :where(progress)::-webkit-progress-value {
    border-radius: inherit;
    background-color: var(--_m-primary);
  }

  :where(progress)::-moz-progress-bar {
    border-radius: inherit;
    background-color: var(--_m-primary);
  }

  :where(progress:indeterminate) {
    background-image: linear-gradient(var(--_m-primary), var(--_m-primary));
    animation: var(--_m-slide);
    background-repeat: no-repeat;
    background-size: 30% 100%;
  }

  :where(progress:indeterminate)::-moz-progress-bar {
    background-color: #0000;
  }

  :where(meter) {
    --_m-warning: light-dark(oklch(62% .14 65), oklch(80% .14 75));
    vertical-align: middle;
    background: var(--_m-tint);
    appearance: none;
    border-radius: 999px;
    block-size: .5rem;
    overflow: hidden;
  }

  :where(meter)::-webkit-meter-bar {
    background: none;
    border: 0;
    block-size: 100%;
  }

  :where(meter)::-webkit-meter-optimum-value {
    background: var(--_m-success);
  }

  :where(meter)::-webkit-meter-suboptimum-value {
    background: var(--_m-warning);
  }

  :where(meter)::-webkit-meter-even-less-good-value {
    background: var(--_m-danger);
  }

  :where(meter)::-moz-meter-bar {
    background: var(--_m-success);
  }

  :where(meter:-moz-meter-sub-optimum)::-moz-meter-bar {
    background: var(--_m-warning);
  }

  :where(meter:-moz-meter-sub-sub-optimum)::-moz-meter-bar {
    background: var(--_m-danger);
  }

  :where([aria-busy="true"]) {
    cursor: progress;
  }

  :where([aria-busy="true"]):before {
    content: "";
    vertical-align: middle;
    border: .15em solid;
    block-size: 1em;
    inline-size: 1em;
    animation: var(--_m-spin);
    border-inline-end-color: #0000;
    border-radius: 50%;
    margin-block: -1em;
    margin-inline-end: .5em;
    display: inline-block;
  }

  :where(:is(article, aside, div, fieldset, figure, form, main, ol, section, ul)[aria-busy="true"]) {
    z-index: 0;
    position: relative;

    & > :where(*) {
      opacity: .4;
    }

    &:before {
      z-index: 1;
      block-size: 2em;
      inline-size: 2em;
      margin: auto;
      position: absolute;
      inset: 0;
    }
  }

  :where(body > header) {
    border-block-end: 1px solid var(--_m-border);
    padding-block-end: var(--_m-space-6);
  }

  :where(body > footer) {
    border-block-start: 1px solid var(--_m-border);
    font-size: var(--_m-text-sm);
    color: var(--_m-text-muted);
    margin-block-start: calc(var(--m-density, 1) * 3rem);
    padding-block-start: var(--_m-space-6);
  }

  :where(nav) :where(ul, ol, menu) {
    gap: var(--_m-space-2) var(--_m-space-4);
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    display: flex;
  }

  :where(nav li) {
    margin: 0;
  }

  :where(nav a:not([role="button"])) {
    color: inherit;
    text-decoration-color: #0000;

    &:where(:hover, [aria-current]:not([aria-current="false"])) {
      color: var(--_m-primary);
    }

    &:where([aria-current]:not([aria-current="false"])) {
      font-weight: 600;
    }
  }

  :where(aside) {
    padding: var(--_m-space-4);
    border-radius: var(--m-radius, .5rem);
    background-color: var(--_m-surface-raised);
  }

  :where(address) {
    font-style: normal;
  }

  :where(hr) {
    margin-block: var(--_m-space-8);
    border: 0;
    border-block-start: 1px solid var(--_m-border);
  }

  :where(body > header:has( > nav)) {
    display: contents;

    & > :where(:last-child) {
      margin-block-end: var(--_m-space-8);
    }
  }

  :where(body > header > nav) {
    z-index: 1;
    padding-block: var(--_m-space-3);
    background-color: var(--_m-surface);
    view-transition-name: m-top-nav;
    border-image: linear-gradient(to top, var(--_m-border) 1px, var(--_m-surface) 1px) fill 0 / 0 / 0 100vmax;
    position: sticky;
    inset-block-start: 0;

    &:after {
      content: "";
      block-size: var(--_m-drop);
      border-image: linear-gradient(var(--_m-edge), transparent) fill 0 / 0 / 0 100vmax;
      pointer-events: none;
      position: absolute;
      inset: 100% 0 auto;
    }
  }

  @supports (animation-timeline: scroll()) {
    :where(body > header > nav) {
      animation: linear both m-lift;
      animation-timeline: scroll(root);
      animation-range: 0 2rem;
    }
  }

  :where(body > header > nav + nav) {
    view-transition-name: m-sub-nav;
    inset-block-start: var(--_m-bar-size);
  }

  :where(body > header > nav, body > nav) :where(ul, ol, menu) {
    scrollbar-width: thin;
    flex-wrap: nowrap;
    margin: -4px;
    padding: 4px;
    overflow-x: auto;

    & > :where(li) {
      flex: none;
    }
  }

  :where(nav:not(body > nav):has( > :is(ul, ol, menu) + :is(ul, ol, menu))) {
    justify-content: space-between;
    align-items: center;
    gap: var(--_m-space-2) var(--_m-space-6);
    flex-wrap: wrap;
    display: flex;

    &:where(:not(body > header > nav)) > :where(ul, ol, menu) {
      margin-block: 0;
    }

    & > :where(:last-child) {
      min-inline-size: 0;
    }

    &:where(body > header > nav) {
      flex-wrap: nowrap;
    }
  }

  :where(nav:not(body > nav, body > header > nav):has( > ol)) {
    font-size: var(--_m-text-sm);
    margin-block-end: var(--_m-space-4);

    & > :where(ol) {
      gap: var(--_m-space-2);

      & > :where(li + li):before {
        content: "/" / "";
        color: var(--_m-text-muted);
        margin-inline-end: var(--_m-space-2);
      }

      & > :where(li:last-child), & > :where(li:last-child) :where(a) {
        color: var(--_m-text-muted);
        font-weight: inherit;
      }
    }
  }

  @media (width >= 64rem) {
    :where(body:has( > nav,  > aside)) {
      grid-template-columns: [full-start nav-start] fit-content(16rem)
      [nav-end main-start] minmax(0, var(--m-measure, 100ch))
      [main-end aside-start] fit-content(16rem)
      [aside-end full-end];
      grid-auto-flow: row dense;
      justify-content: center;
      align-items: start;
      max-inline-size: none;
      display: grid;

      & > :where(*), & > :where(header:has( > nav)) > :where(*) {
        grid-column: full;
      }

      & > :where(:not(nav, aside, main)), & > :where(header:has( > nav)) > :where(*) {
        contain: inline-size;
      }

      & > :where(main) {
        grid-column: main;
      }
    }

    :where(body > header > nav) {
      margin-inline: min(0px, (100% - min(var(--m-measure, 100ch) + 32rem, 100vw - 2 * var(--_m-space-4))) / 2);
    }

    :where(body > nav, body > aside) {
      max-block-size: calc(100dvh - var(--_m-sticky-offset) - 2 * var(--_m-space-4));
      overscroll-behavior: contain;
      position: sticky;
      inset-block-start: calc(var(--_m-sticky-offset) + var(--_m-space-4));
      overflow-y: auto;
    }

    :where(body > nav) {
      grid-column: nav;
      margin-inline-end: var(--_m-space-8);
      padding: 4px;

      & :where(ul, ol, menu) {
        gap: var(--_m-space-2);
        flex-direction: column;
        margin: 0;
        padding: 0;
        overflow: visible;
      }

      & :where(li) > :where(ul, ol, menu) {
        margin-block-start: var(--_m-space-2);
        padding-inline-start: var(--_m-space-3);
      }
    }

    :where(body > aside) {
      font-size: var(--_m-text-sm);
      background-color: #0000;
      border-radius: 0;
      grid-column: aside;
      margin-inline-start: var(--_m-space-8);
      padding: 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (container-type: scroll-state) {
      :where(:root:not([data-motion="reduce"]):has( > body > header > nav)) {
        container-type: scroll-state;
      }

      :where(body > header > nav) {
        transition: translate var(--_m-duration-slow) var(--_m-ease);
      }

      @container scroll-state(scrolled: bottom) {
        :where(:root:not(:has( > body > header > nav:focus-within)) body > header > nav) {
          translate: 0 -100%;
        }

        :where(:root:not(:has( > body > header > nav:focus-within)) thead th) {
          inset-block-start: calc(var(--_m-sticky-offset) - var(--_m-bar-size));
        }

        :where(:root:not(:has( > body > header > nav:focus-within)) body > :is(nav, aside)) {
          inset-block-start: calc(var(--_m-sticky-offset) - var(--_m-bar-size) + var(--_m-space-4));
        }
      }
    }
  }

  :where(:is(ul, ol, menu)[popover], [popover] > :is(ul, ol, menu)) {
    flex-flow: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow: visible;

    &:where([popover]:not(:popover-open)) {
      display: none;
    }

    & > :where(li) {
      margin: 0;
      padding: 0;
    }

    & > :where(li) > :where(a, button) {
      inline-size: 100%;
      padding: var(--_m-space-2) var(--_m-space-3);
      border-radius: var(--m-radius, .5rem);
      color: var(--_m-text);
      font-weight: inherit;
      text-align: start;
      background-color: #0000;
      border: 0;
      text-decoration-line: none;
      display: block;

      &:where(:hover:not(:disabled), :focus-visible) {
        background-color: var(--_m-tint);
        color: var(--_m-text);
      }

      &:where([aria-current]:not([aria-current="false"])) {
        color: var(--_m-primary);
        font-weight: 600;
      }

      &:where(:focus-visible) {
        outline-offset: -2px;
      }
    }
  }

  :where(:is(ul, ol, menu)[popover], [popover]:has( > :is(ul, ol, menu))) {
    min-inline-size: 12rem;
    padding: var(--_m-space-1);
  }

  @supports (position-area: block-end) {
    :where(:is(ul, ol, menu)[popover], [popover]:has( > :is(ul, ol, menu))) {
      margin: var(--_m-space-1) 0;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
      inset: auto;
    }
  }

  :where(article):where(:not(main > article:only-child)) {
    padding: var(--_m-space-6);
    border: 1px solid var(--_m-border);
    border-radius: calc(var(--m-radius, .5rem) * 1.5);
    background-color: var(--_m-surface-overlay);
    overflow: clip;

    & > :where(header, footer) {
      margin-inline: calc(-1 * var(--_m-space-6));
      padding: var(--_m-space-4) var(--_m-space-6);
      background-color: color-mix(in oklch, var(--_m-text), transparent 96%);
    }

    & > :where(header:first-child) {
      margin-block: calc(-1 * var(--_m-space-6)) var(--_m-space-6);
      border-block-end: 1px solid var(--_m-border);
    }

    & > :where(footer:last-child) {
      margin-block: var(--_m-space-6) calc(-1 * var(--_m-space-6));
      border-block-start: 1px solid var(--_m-border);
    }
  }

  :where(div, section):where(:has( > article + article):not(:has( > :not(article)))) {
    gap: var(--_m-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    margin-block-end: var(--_m-space-8);
    display: grid;

    &:where(:last-child) {
      margin-block-end: 0;
    }

    & > :where(article) {
      flex-direction: column;
      margin: 0;
      display: flex;

      & > :where(footer:last-child) {
        margin-block-start: auto;
      }
    }
  }
}

@layer m.a11y {
  :where(:focus-visible):where(:not(select, textarea, option, input:not([type="range"], [type="color"], [type="file"], [type="submit"], [type="reset"], [type="button"], [type="image"]))) {
    outline: var(--_m-focus-width) solid var(--_m-primary);
    outline-offset: 2px;
    animation: m-focus-in var(--_m-duration) var(--_m-ease);
  }

  :where(a:not([role="button"])) {
    border-radius: calc(var(--m-radius, .5rem) / 2);
  }

  :where(summary:focus-visible) {
    outline-offset: 0;
  }

  :where(input:is([type="range"], [type="file"])) {
    border-radius: var(--m-radius, .5rem);
  }

  @keyframes m-focus-in {
    from {
      outline-offset: 0;
    }
  }

  :where(:target) {
    animation: m-target-in calc(var(--_m-duration) * 10) var(--_m-ease);
    scroll-margin-block-start: var(--_m-space-8);
  }

  @keyframes m-target-in {
    from {
      background-color: var(--_m-primary-subtle);
    }
  }

  @media (forced-colors: active) {
    :where(button[aria-pressed="true"]) {
      color: selecteditemtext;
      forced-color-adjust: none;
      background-color: selecteditem;
      border-color: selecteditem;

      &:where(:focus-visible) {
        outline-color: canvastext;
      }
    }

    :where(input:is([type="checkbox"], [type="radio"])) {
      forced-color-adjust: none;
      background-color: canvas;
      border-color: canvastext;

      &:before {
        background-color: highlighttext;
      }

      &:where(:checked) {
        background-color: highlight;
        border-color: highlight;
      }

      &:where(:disabled) {
        border-color: graytext;
      }
    }

    :where(input[type="checkbox"]:indeterminate) {
      background-color: highlight;
      border-color: highlight;
    }

    :where(input[type="checkbox"]:is([role="switch"], [switch])) {
      &:before {
        box-shadow: none;
        background-color: canvastext;
      }

      &:where(:checked):before {
        background-color: highlighttext;
      }

      &:where(:indeterminate:not(:checked)) {
        background-color: canvas;
        border-color: canvastext;
      }
    }

    :where(progress, meter) {
      forced-color-adjust: none;
      background-color: canvas;
      border: 1px solid canvastext;
    }

    :where(meter) {
      --_m-success: Highlight;
      --_m-warning: Highlight;
      --_m-danger: Highlight;
    }

    :where(progress)::-webkit-progress-value {
      background-color: highlight;
    }

    :where(progress)::-moz-progress-bar {
      background-color: highlight;
    }

    :where(progress:indeterminate) {
      background-image: linear-gradient(highlight, highlight);
    }

    :where(progress:indeterminate)::-moz-progress-bar {
      background-color: #0000;
    }

    :where(input[type="range"]) {
      --_m-range-fill: Highlight;
      forced-color-adjust: none;

      &:where(:disabled) {
        --_m-range-fill: GrayText;
        opacity: 1;
      }

      &:where(:focus-visible) {
        outline-color: highlight;
      }

      &::-webkit-slider-runnable-track {
        background-color: canvas;
        box-shadow: inset 0 0 0 1px canvastext;
      }

      &::-moz-range-track {
        background-color: canvas;
        box-shadow: inset 0 0 0 1px canvastext;
      }

      &::-moz-range-progress {
        background-color: var(--_m-range-fill);
      }

      &::-webkit-slider-thumb {
        background-color: var(--_m-range-fill);
        border-image-source: linear-gradient(90deg, var(--_m-range-fill) 50%, transparent 0);
        box-shadow: inset 0 0 0 2px canvas;
      }

      &:where(:dir(rtl))::-webkit-slider-thumb {
        border-image-source: linear-gradient(-90deg, var(--_m-range-fill) 50%, transparent 0);
      }

      &::-moz-range-thumb {
        background-color: var(--_m-range-fill);
        border-color: canvas;
      }
    }

    :where([data-scroll-progress]:root):before {
      forced-color-adjust: none;
      background-color: highlight;
    }

    :where(mark) {
      color: marktext;
      forced-color-adjust: none;
      background-color: mark;
    }

    :where(aside, pre) {
      border: 1px solid canvastext;
    }

    :where(body > header > nav) {
      border-block-end: 1px solid canvastext;
    }

    @supports not (appearance: base-select) {
      :where(select:not([multiple], [size])) {
        appearance: auto;
        background-image: none;
        padding-inline-end: var(--_m-space-3);
      }
    }
  }

  @media print {
    :where(:root, :host) {
      color-scheme: light;
    }

    :where(*) {
      box-shadow: none;
      text-shadow: none;
      background: none;
    }

    :where(figure:has( > table)) {
      animation: none;
    }

    :where(body) {
      max-inline-size: none;
      padding: 0;
    }

    :where(a[href]:not([href^="#"], [href^="javascript:"])):after {
      content: " (" attr(href) ")";
      color: var(--_m-text-muted);
      overflow-wrap: anywhere;
      font-size: .875em;
    }

    :where(nav a):after {
      content: none;
    }

    :where(pre) {
      white-space: pre-wrap;
      border: 1px solid var(--_m-border);
      overflow: visible;
    }

    :where(thead th, body > header > nav, body > nav, body > aside) {
      position: static;
    }

    :where(body > header > nav, body > nav) :where(ul, ol, menu) {
      flex-wrap: wrap;
      overflow: visible;
    }

    :where(details)::details-content {
      content-visibility: visible;
      block-size: auto;
    }

    :where(pre, blockquote, figure, img, video, table, tr, details) {
      break-inside: avoid;
    }

    :where(h1, h2, h3, h4, h5, h6) {
      break-after: avoid;
    }

    :where([data-scroll-progress]:root):before {
      display: none;
    }
  }
}