@abraham/modern.css 0.0.0-stage → 0.0.0

package/dist/modern.css

@@ -0,0 +1,2241 @@
+@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;
+    }
+  }
+}