/*! Mates CSS v0.5.0 — compact pure-CSS UI kit. MIT. */

/* src/tokens.css */
:root {
  --m-font:
    "Nunito Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  --m-font-head:
    Montserrat,
    system-ui,
    sans-serif;
  --m-mono:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  --m-fs: 16px;
  font-size: var(--m-fs);
  --m-r: 9px;
  --m-r-sm: 6px;
  --m-r-full: 999px;
  --m-bg: #ffffff;
  --m-surface: #f6f7f9;
  --m-border: #e5e8ec;
  --m-border-2: #d0d5db;
  --m-fg: #14161a;
  --m-fg-2: #5a6472;
  --m-fg-3: #8a939f;
  --m-on-primary: #ffffff;
  --m-primary: #0172ad;
  --m-primary-h: #016091;
  --m-primary-a: #014e75;
  --m-primary-soft: rgba(1,114,173,.12);
  --m-primary-soft-2: rgba(1,114,173,.22);
  --m-primary-soft-3: rgba(1,114,173,.30);
  --m-success: #0e9f6e;
  --m-warning: #c27803;
  --m-danger: #e02424;
  --m-success-soft: rgba(14,159,110,.14);
  --m-danger-soft: rgba(224,36,36,.12);
  --m-danger-ring: rgba(224,36,36,.18);
  --m-alert-success-bg: #e7f5f0;
  --m-alert-warning-bg: #f8efe1;
  --m-alert-danger-bg: #fce9e9;
  --m-banner-warn-bg: #f6ead4;
  --m-banner-danger-bg: #fae4e4;
  --m-on-success: #ffffff;
  --m-on-warning: #ffffff;
  --m-on-danger: #ffffff;
  --m-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.07);
  --m-elev:
    0 1px 2px rgba(16,24,40,.10),
    0 3px 8px rgba(16,24,40,.14),
    0 8px 20px rgba(16,24,40,.10);
  --m-elev-active: 0 1px 2px rgba(16,24,40,.16), 0 2px 4px rgba(16,24,40,.12);
  --m-range-h: 7px;
  --m-input-w: 100%;
  --m-dur: .2s;
  --m-c1: var(--m-primary);
  --m-c2: var(--m-success);
  --m-c3: var(--m-warning);
  --m-c4: var(--m-danger);
  --m-c5: #7c66dc;
  --m-c6: #0ea5b7;
  --m-chart-h: 12rem;
  --m-drawer-w: 20rem;
  --m-side: 15rem;
  --m-sheet-h: 70vh;
  --m-z-sticky: 20;
  --m-z-menu: 40;
  --m-z-drawer: 90;
  --m-z-modal: 100;
  --m-z-toast: 110;
  --m-z-tooltip: 120;
  --m-z-skip: 200;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --m-bg: #14161a;
    --m-surface: #1d2026;
    --m-border: #2c3138;
    --m-border-2: #3d434b;
    --m-fg: #e8eaed;
    --m-fg-2: #a8b0ba;
    --m-fg-3: #6f7780;
    --m-primary: #2fabdf;
    --m-primary-h: #45b9e6;
    --m-primary-a: #5ac3ed;
    --m-primary-soft: rgba(47,171,223,.16);
    --m-primary-soft-2: rgba(47,171,223,.22);
    --m-primary-soft-3: rgba(47,171,223,.30);
    --m-on-primary: #14161a;
    --m-success: #2ee06e;
    --m-warning: #ffc757;
    --m-danger: #ff5c5c;
    --m-success-soft: rgba(46,224,110,.14);
    --m-danger-soft: rgba(255,92,92,.12);
    --m-danger-ring: rgba(255,92,92,.18);
    --m-alert-success-bg: #162a22;
    --m-alert-warning-bg: #302b21;
    --m-alert-danger-bg: #2b1d21;
    --m-banner-warn-bg: #3e3625;
    --m-banner-danger-bg: #352023;
    --m-on-success: #14161a;
    --m-on-warning: #14161a;
    --m-on-danger: #14161a;
    --m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
    --m-elev: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.35);
    --m-elev-active: 0 1px 3px rgba(0,0,0,.5);
    --m-c5: #9b8cff;
    --m-c6: #2ed3e0;
  }
}
:root[data-theme=dark] {
  --m-bg: #14161a;
  --m-surface: #1d2026;
  --m-border: #2c3138;
  --m-border-2: #3d434b;
  --m-fg: #e8eaed;
  --m-fg-2: #a8b0ba;
  --m-fg-3: #6f7780;
  --m-primary: #2fabdf;
  --m-primary-h: #45b9e6;
  --m-primary-a: #5ac3ed;
  --m-primary-soft: rgba(47,171,223,.16);
  --m-primary-soft-2: rgba(47,171,223,.22);
  --m-primary-soft-3: rgba(47,171,223,.30);
  --m-on-primary: #14161a;
  --m-success: #2ee06e;
  --m-warning: #ffc757;
  --m-danger: #ff5c5c;
  --m-success-soft: rgba(46,224,110,.14);
  --m-danger-soft: rgba(255,92,92,.12);
  --m-danger-ring: rgba(255,92,92,.18);
  --m-alert-success-bg: #162a22;
  --m-alert-warning-bg: #302b21;
  --m-alert-danger-bg: #2b1d21;
  --m-banner-warn-bg: #3e3625;
  --m-banner-danger-bg: #352023;
  --m-on-success: #14161a;
  --m-on-warning: #14161a;
  --m-on-danger: #14161a;
  --m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
  --m-elev: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.35);
  --m-elev-active: 0 1px 3px rgba(0,0,0,.5);
  --m-c5: #9b8cff;
  --m-c6: #2ed3e0;
}

/* src/reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
body {
  font-family: var(--m-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--m-fg);
  background: var(--m-bg);
  -webkit-font-smoothing: antialiased;
}
:root {
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
  }
}
:root[data-theme=dark] {
  color-scheme: dark;
}
:root[data-theme=light] {
  color-scheme: light;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--m-font-head);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 1.4em 0 .5em;
}
h1 {
  font-size: 2.15rem;
}
h2 {
  font-size: 1.65rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.15rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--m-fg-3);
}
p {
  margin: .7em 0;
}
small {
  font-size: 1em;
  color: var(--m-fg-3);
}
a {
  color: var(--m-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
hr {
  border: 0;
  border-top: 1px solid var(--m-border);
  margin: 1.6em 0;
}
blockquote {
  border-left: 3px solid var(--m-border-2);
  background: var(--m-surface);
  border-radius: 0 var(--m-r-sm) var(--m-r-sm) 0;
  padding: .8em 1.2em;
  margin: 1em 0;
  color: var(--m-fg-2);
}
ul,
ol {
  padding-left: 1.4em;
}
li {
  margin: .25em 0;
}
li::marker {
  color: var(--m-fg-3);
}
kbd {
  font-family: var(--m-mono);
  font-size: 1em;
  padding: .2em .5em;
  border: 1px solid var(--m-border);
  border-bottom-width: 2px;
  border-radius: var(--m-r-sm);
  background: var(--m-surface);
}
.kbd-row {
  display: inline-flex;
  align-items: center;
  gap: .25em;
}
mark {
  padding: .1em .3em;
  border-radius: 3px;
  background: rgba(255, 199, 87, .35);
}
::selection {
  background: var(--m-primary);
  color: var(--m-on-primary);
}
:focus {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
}
@supports selector(:focus-visible) {
  :focus {
    outline: none;
  }
  :focus-visible {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
  }
}

/* src/buttons.css */
button,
.btn,
input[type=button],
input[type=submit],
input[type=reset] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .4em 1em;
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-full);
  font-family: var(--m-font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  background: var(--m-bg);
  color: var(--m-fg);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background var(--m-dur),
    color var(--m-dur),
    border-color var(--m-dur),
    box-shadow var(--m-dur),
    filter var(--m-dur);
}
button:hover,
.btn:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
  background: var(--m-surface);
  border-color: var(--m-border-2);
  text-decoration: none;
}
button:active,
.btn:active,
input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active {
  background: var(--m-border);
}
button:disabled,
.btn:disabled,
.btn[disabled],
input[type=button]:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary {
  background: var(--m-primary);
  border-color: transparent;
  color: var(--m-on-primary);
}
.btn-primary:hover {
  background: var(--m-primary-h);
  border-color: transparent;
}
.btn-primary:active {
  background: var(--m-primary-a);
  border-color: transparent;
}
.btn-dark {
  background: var(--m-fg);
  border-color: transparent;
  color: var(--m-bg);
}
.btn-dark:hover {
  background: var(--m-fg);
  opacity: .88;
  border-color: transparent;
}
.btn-dark:active {
  opacity: .78;
}
.btn-light {
  background: var(--m-bg);
  color: var(--m-fg);
  border-color: var(--m-border);
}
.btn-light:hover {
  background: var(--m-surface);
}
.btn-light:active {
  background: var(--m-border);
}
.btn-success {
  background: var(--m-success);
  border-color: transparent;
  color: var(--m-on-success);
}
.btn-success:hover {
  background: var(--m-success);
  border-color: transparent;
  filter: brightness(1.06);
}
.btn-success:active {
  background: var(--m-success);
  filter: brightness(.94);
}
.btn-danger {
  background: var(--m-danger);
  border-color: transparent;
  color: var(--m-on-danger);
}
.btn-danger:hover {
  background: var(--m-danger);
  border-color: transparent;
  filter: brightness(1.06);
}
.btn-danger:active {
  background: var(--m-danger);
  filter: brightness(.94);
}
.btn-warning {
  background: var(--m-warning);
  border-color: transparent;
  color: var(--m-on-warning);
}
.btn-warning:hover {
  background: var(--m-warning);
  border-color: transparent;
  filter: brightness(1.06);
}
.btn-warning:active {
  background: var(--m-warning);
  filter: brightness(.94);
}
.btn-outline {
  background: transparent;
  border-color: var(--m-border-2);
  color: var(--m-primary);
}
.btn-outline:hover {
  background: var(--m-primary-soft);
  border-color: var(--m-primary);
}
.btn-outline:active {
  background: var(--m-primary);
  border-color: var(--m-primary);
  color: var(--m-on-primary);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--m-fg-2);
}
.btn-ghost:hover {
  background: var(--m-surface);
  border-color: transparent;
  color: var(--m-fg);
}
.btn-ghost:active {
  background: var(--m-border);
}
.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--m-primary);
  padding-inline: .2em;
  overflow: visible;
}
.btn-link:hover {
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
}
.btn-link:active {
  background: transparent;
}
.btn-soft {
  background: var(--m-primary-soft);
  border-color: transparent;
  color: var(--m-primary);
}
.btn-soft:hover {
  background: var(--m-primary-soft-2);
  border-color: transparent;
}
.btn-soft:active {
  background: var(--m-primary-soft-3);
}
.btn-elevated {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 10px rgba(16, 24, 40, .06);
}
.btn-elevated:hover {
  filter: none;
}
.btn-elevated:active {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.btn-elevated.btn-primary:hover {
  background: var(--m-primary-h);
}
.btn-elevated.btn-primary:active {
  background: var(--m-primary-a);
}
:is(.tab, .menu-item, .seg-item, .list-item, .chip):is(:hover, :active) {
  box-shadow: none;
}
.tab,
.menu-item,
.seg-item,
.list-item {
  overflow: visible;
}
button:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab)::before,
.btn:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      circle,
      currentColor 12%,
      transparent 12.01%) center / 1400% 1400% no-repeat;
  opacity: 0;
  transition: background-size .45s ease-out, opacity .55s ease-out;
}
button:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab):active::before,
.btn:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab):active::before {
  background-size: 0 0;
  opacity: .22;
  transition: background-size 0s, opacity 0s;
}
.btn-sm {
  padding: .28em .75em;
  font-size: 1rem;
}
.btn-lg {
  padding: .55em 1.2em;
  font-size: 1.125rem;
}
.btn-block {
  display: flex;
  width: 100%;
}
.btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  line-height: 1;
  border-radius: var(--m-r);
}
.btn-icon.btn-sm {
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
}
.btn-icon.btn-lg {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
}
.btn-group {
  display: inline-flex;
}
.btn-group button,
.btn-group .btn {
  border-radius: 0;
  margin-left: -1px;
}
.btn-group button:first-child,
.btn-group .btn:first-child {
  border-radius: var(--m-r-full) 0 0 var(--m-r-full);
  margin-left: 0;
}
.btn-group button:last-child,
.btn-group .btn:last-child {
  border-radius: 0 var(--m-r-full) var(--m-r-full) 0;
}
.btn-spin::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  animation: m-spin .6s linear infinite;
}
@keyframes m-spin {
  to {
    transform: rotate(360deg);
  }
}
.btn-close {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--m-r-full);
  background: var(--m-surface);
  position: relative;
  box-shadow: none;
}
.btn-close::before,
.btn-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.btn-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.btn-close:hover {
  background: var(--m-border);
}
.btn-close:active {
  background: var(--m-border-2);
}
.fab {
  width: 3.25rem;
  height: 3.25rem;
  min-width: 3.25rem;
  padding: 0;
  border-radius: 50%;
  border-color: transparent;
  background: var(--m-primary);
  color: var(--m-on-primary);
  box-shadow: var(--m-elev);
  font-size: 1.35rem;
  line-height: 1;
}
.fab:hover {
  background: var(--m-primary-h);
  border-color: transparent;
  color: var(--m-on-primary);
}
.fab:active {
  background: var(--m-primary-a);
}
.fab.fixed {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--m-z-sticky);
}
@media (prefers-reduced-motion: reduce) {
  button,
  .btn {
    transition:
      background var(--m-dur),
      color var(--m-dur),
      border-color var(--m-dur);
  }
  button:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab)::before,
  .btn:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab)::before {
    content: none;
  }
}

/* src/tags.css */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .15em .6em;
  border-radius: var(--m-r-full);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.45;
  background: var(--m-surface);
  color: var(--m-fg-2);
  border: 1px solid var(--m-border);
  white-space: nowrap;
}
.tag-primary {
  background: var(--m-primary);
  border-color: var(--m-primary);
  color: var(--m-on-primary);
}
.tag-success {
  background: var(--m-success);
  border-color: var(--m-success);
  color: #fff;
}
.tag-warning {
  background: var(--m-warning);
  border-color: var(--m-warning);
  color: #fff;
}
.tag-danger {
  background: var(--m-danger);
  border-color: var(--m-danger);
  color: #fff;
}
.tag-soft {
  background: var(--m-primary-soft);
  border-color: transparent;
  color: var(--m-primary);
}
.tag-soft-success {
  background: var(--m-success-soft);
  border-color: transparent;
  color: var(--m-success);
}
.tag-soft-danger {
  background: var(--m-danger-soft);
  border-color: transparent;
  color: var(--m-danger);
}
.tag-rounded {
  border-radius: 6px;
}
.tag-x {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: rgba(0, 0, 0, .15);
  position: relative;
  cursor: pointer;
}
.tag-x::before,
.tag-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 55%;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tag-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.tag-x:hover {
  background: rgba(0, 0, 0, .3);
}
.tag-primary .tag-x,
.tag-success .tag-x,
.tag-warning .tag-x,
.tag-danger .tag-x {
  background: rgba(255, 255, 255, .28);
}
.tag-primary .tag-x:hover,
.tag-success .tag-x:hover,
.tag-warning .tag-x:hover,
.tag-danger .tag-x:hover {
  background: rgba(255, 255, 255, .45);
}

/* src/forms.css */
label,
.label {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  margin: .85rem 0 .2rem;
}
.choice {
  display: flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  font-size: 1rem;
  margin: .3em 0;
  cursor: pointer;
}
label:has(> input[type=checkbox]):not(.chip, .switch, .drop, .seg-item, .choice, .pick),
label:has(> input[type=radio]):not(.chip, .switch, .drop, .seg-item, .choice, .pick) {
  display: flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  font-size: 1rem;
  margin: .3em 0;
  cursor: pointer;
}
.hint {
  display: block;
  font-size: 1rem;
  color: var(--m-fg-3);
  margin-top: .3rem;
}
.m-error .input,
.m-error input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),
.m-error select,
.m-error textarea {
  border-color: var(--m-danger);
}
.m-error input:focus,
.m-error select:focus,
.m-error textarea:focus,
.m-error .input:focus {
  box-shadow: 0 0 0 3px var(--m-danger-ring);
}
.m-error .hint {
  color: var(--m-danger);
}
.m-error :is(label, .label) {
  color: var(--m-danger);
}
.m-valid .input,
.m-valid input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),
.m-valid select,
.m-valid textarea {
  border-color: var(--m-success);
}
.m-valid .hint {
  color: var(--m-success);
}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]), select, textarea),
.input {
  width: var(--m-input-w);
  padding: .5em .95em;
  background: var(--m-bg);
  border: 1px solid var(--m-border-2);
  border-radius: var(--m-r-sm);
  color: var(--m-fg);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--m-dur), box-shadow var(--m-dur);
}
::placeholder {
  color: var(--m-fg-3);
}
:where(input, select, textarea):focus,
.input:focus {
  border-color: var(--m-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--m-primary-soft);
}
input:disabled,
select:disabled,
textarea:disabled,
.input:disabled {
  background: var(--m-surface);
  color: var(--m-fg-3);
  cursor: not-allowed;
}
.input-success,
input.input-success,
select.input-success,
textarea.input-success {
  border-color: var(--m-success);
}
.input-error,
input.input-error,
select.input-error,
textarea.input-error {
  border-color: var(--m-danger);
}
textarea {
  min-height: 7.5rem;
  resize: vertical;
}
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8em center;
  background-size: .5em .6em;
  padding-right: 2.2em;
}
input[type=search] {
  padding-left: 2.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%238a939f'%3E%3Cpath d='M14.9 14.4l-.5.5a.4.4 0 0 1-.5 0L9.5 10.5A5.3 5.3 0 1 1 11.6 6.3a5.3 5.3 0 0 1-1.1 3.2l4.4 4.4a.4.4 0 0 1 0 .5zM6.3 2.4a3.9 3.9 0 1 0 3.9 3.9 3.9 3.9 0 0 0-3.9-3.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .6em center;
}
input[type=checkbox],
input[type=radio],
.check {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  margin: 0 .45em 0 0;
  flex-shrink: 0;
  vertical-align: -.18em;
  border: 1.5px solid var(--m-border-2);
  background: var(--m-bg);
  cursor: pointer;
  transition: background var(--m-dur), border-color var(--m-dur);
}
input[type=checkbox] {
  border-radius: 4px;
}
input[type=radio] {
  border-radius: 50%;
}
input[type=checkbox]:hover,
input[type=radio]:hover,
.check:hover {
  border-color: var(--m-fg-3);
}
input[type=checkbox]:checked,
input[type=radio]:checked,
.check:checked {
  background: var(--m-primary);
  border-color: var(--m-primary);
}
input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: .72em;
  background-position: center;
  background-repeat: no-repeat;
}
input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 1em;
  background-position: center;
  background-repeat: no-repeat;
}
input[type=checkbox]:disabled,
input[type=radio]:disabled,
.check:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.switch {
  position: relative;
  display: inline-block;
  width: 2.85em;
  height: 1.6em;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  position: absolute;
  z-index: 1;
}
.switch i {
  position: absolute;
  inset: 0;
  border-radius: var(--m-r-full);
  background: var(--m-border-2);
  transition: background var(--m-dur);
  pointer-events: none;
}
.switch i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: left var(--m-dur);
}
.switch input:checked + i {
  background: var(--m-primary);
}
.switch input:checked + i::after {
  left: calc(100% - 1.15em - 3px);
}
.switch input:focus + i {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
}
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.4em;
  background: transparent;
  cursor: pointer;
  --v: 50;
  --m-range-fill: var(--m-range-progress, calc(var(--v) * 1%));
  background:
    linear-gradient(
      to right,
      var(--m-primary) var(--m-range-fill),
      var(--m-border) var(--m-range-fill)) no-repeat center / 100% var(--m-range-h);
}
input[type=range]::-webkit-slider-runnable-track {
  height: var(--m-range-h);
  border-radius: var(--m-r-full);
  background: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15em;
  height: 1.15em;
  margin-top: calc(var(--m-range-h) / 2 - .575em);
  border-radius: 50%;
  background: var(--m-primary);
  border: 2px solid var(--m-bg);
  box-shadow: 0 0 0 1px var(--m-border-2);
}
input[type=range]::-moz-range-track {
  height: var(--m-range-h);
  border-radius: var(--m-r-full);
  background: var(--m-border);
}
input[type=range]::-moz-range-progress {
  height: var(--m-range-h);
  border-radius: var(--m-r-full);
  background: var(--m-primary);
}
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--m-primary);
  border: 2px solid var(--m-bg);
}
input[type=color] {
  width: 3em;
  height: 2.5em;
  padding: .2em;
  cursor: pointer;
}
.fgroup {
  display: flex;
  margin: .5rem 0;
}
.fgroup > * {
  border-radius: 0;
}
.fgroup > :first-child {
  border-radius: var(--m-r-sm) 0 0 var(--m-r-sm);
}
.fgroup > :last-child {
  border-radius: 0 var(--m-r-sm) var(--m-r-sm) 0;
}
.fgroup > * + * {
  margin-left: -1px;
}
.fgroup-label {
  display: inline-flex;
  align-items: center;
  padding: 0 .95em;
  background: var(--m-surface);
  border: 1px solid var(--m-border-2);
  color: var(--m-fg-2);
  font-size: 1rem;
  white-space: nowrap;
}
.fgroup :is(button, .btn) {
  flex-shrink: 0;
}
.field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: .65rem 0;
}
.field :is(label, .label) {
  margin: 0;
}
.field .hint {
  margin: 0;
}
fieldset,
.fieldset {
  border: 1px solid var(--m-border);
  border-radius: var(--m-r);
  padding: 1.15rem 1.35rem;
  margin: .75rem 0;
}
fieldset > legend,
.fieldset > legend {
  font-weight: 700;
  font-size: 1rem;
  padding: 0 .4em;
}
.input-wrap {
  display: flex;
  align-items: center;
  width: var(--m-input-w);
  background: var(--m-bg);
  border: 1px solid var(--m-border-2);
  border-radius: var(--m-r-sm);
  transition: border-color var(--m-dur), box-shadow var(--m-dur);
}
.input-wrap:focus-within {
  border-color: var(--m-primary);
  box-shadow: 0 0 0 3px var(--m-primary-soft);
}
.input-wrap .input,
.input-wrap input:not([type=checkbox]):not([type=radio]) {
  border: 0;
  box-shadow: none;
  outline: none;
  flex: 1;
  min-width: 0;
  width: auto;
  background: transparent;
}
.input-ico {
  display: inline-flex;
  align-items: center;
  padding: 0 .85em;
  color: var(--m-fg-3);
  flex-shrink: 0;
  font-size: .9375rem;
}
.drop {
  display: grid;
  place-items: center;
  gap: .2rem;
  padding: 2.5rem 1.25rem;
  border: 1.5px dashed var(--m-border-2);
  border-radius: var(--m-r);
  background: var(--m-surface);
  text-align: center;
  cursor: pointer;
  color: var(--m-fg-2);
  font-weight: 600;
}
.drop:hover,
.drop.active,
.drop:focus-within {
  border-color: var(--m-primary);
  background: var(--m-primary-soft);
  color: var(--m-primary);
}
.drop .hint {
  font-weight: 400;
}
.search {
  position: relative;
}
.search-panel {
  display: none;
  position: absolute;
  inset: calc(100% + 4px) 0 auto;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-sm);
  box-shadow: var(--m-shadow);
  padding: .4rem;
  z-index: var(--m-z-menu);
  max-height: 16rem;
  overflow: auto;
}
.search.open > .search-panel {
  display: block;
}
.rate {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: .12em;
}
.rate input {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5em;
  height: 1.5em;
  margin: 0;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  background-image: none;
  background: var(--m-border-2);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.rate input:checked,
.rate input:checked ~ input,
.rate:hover input:hover,
.rate:hover input:hover ~ input {
  background: var(--m-warning);
  background-image: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .4em 1em;
  border-radius: var(--m-r-full);
  border: 1px solid var(--m-border-2);
  background: var(--m-bg);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--m-fg-2);
}
.chip > input {
  margin: 0;
}
.chip:hover {
  border-color: var(--m-fg-3);
  color: var(--m-fg);
}
.chip.selected,
input:checked + .chip {
  background: var(--m-primary-soft);
  border-color: var(--m-primary);
  color: var(--m-primary);
}
.chip:has(:checked) {
  background: var(--m-primary-soft);
  border-color: var(--m-primary);
  color: var(--m-primary);
}
.seg {
  display: inline-flex;
  padding: .2rem;
  background: var(--m-surface);
  border-radius: var(--m-r-sm);
  gap: .15rem;
  max-width: 100%;
}
.seg-item {
  position: relative;
  padding: .45em 1.05em;
  border: 0;
  border-radius: calc(var(--m-r-sm) - 1px);
  background: transparent;
  color: var(--m-fg-3);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.seg-item:hover {
  color: var(--m-fg);
  background: transparent;
}
.seg-item.selected {
  background: var(--m-bg);
  color: var(--m-fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.seg-item:has(:checked) {
  background: var(--m-bg);
  color: var(--m-fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.seg-item input {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  position: absolute;
}

/* src/cards.css */
.card {
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r);
  box-shadow: var(--m-shadow);
  overflow: hidden;
}
.card-body {
  padding: 1.15rem 1.35rem;
}
.card-title {
  font-size: 1.2rem;
  margin: 0 0 .25em;
}
.card-sub {
  font-size: .9375rem;
  color: var(--m-fg-3);
  margin: 0;
}
.card-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.35rem;
  border-top: 1px solid var(--m-border);
  background: var(--m-surface);
}
.card-img {
  width: 100%;
  display: block;
}
.card-hover {
  transition: box-shadow var(--m-dur);
}
.card-hover:hover {
  box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 10px 24px rgba(16, 24, 40, .12);
}

/* src/tables.css */
.table-wrap {
  overflow-x: auto;
}
table,
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
table th,
table td,
.table th,
.table td {
  padding: .6em .9em;
  text-align: left;
  border-bottom: 1px solid var(--m-border);
}
table thead th,
.table thead th {
  font-size: .9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--m-fg-3);
  background: var(--m-surface);
}
table tbody tr,
.table tbody tr {
  transition: background var(--m-dur);
}
table tbody tr:hover,
.table tbody tr:hover {
  background: var(--m-surface);
}
table tr.selected,
.table tr.selected {
  background: var(--m-primary-soft);
}
table.striped tbody tr:nth-child(even),
.table.striped tbody tr:nth-child(even) {
  background: var(--m-surface);
}
table.bordered th,
table.bordered td,
.table.bordered th,
.table.bordered td {
  border: 1px solid var(--m-border);
}
table caption,
.table caption {
  caption-side: bottom;
  padding: .55em 0;
  font-size: 1rem;
  color: var(--m-fg-3);
  text-align: left;
}
table.sticky thead th,
.table.sticky thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
table.compact th,
table.compact td,
.table.compact th,
.table.compact td {
  padding: .35em .6em;
}
th.sorted {
  cursor: pointer;
}
th.sorted::after {
  content: "";
  display: inline-block;
  margin-left: .4em;
  border: .28em solid transparent;
  vertical-align: .12em;
}
th.sorted.asc::after {
  border-bottom-color: currentColor;
  border-top-width: 0;
}
th.sorted.desc::after {
  border-top-color: currentColor;
  border-bottom-width: 0;
  vertical-align: 0;
}

/* src/tabs.css */
.tabs {
  display: inline-flex;
  gap: .3rem;
  padding: .3rem;
  background: var(--m-surface);
  border-radius: var(--m-r-sm);
  max-width: 100%;
}
.tab {
  padding: .55em 1.2em;
  border: 0;
  border-radius: calc(var(--m-r-sm) - 1px);
  background: transparent;
  color: var(--m-fg-3);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: color var(--m-dur), background var(--m-dur);
}
.tab:hover {
  color: var(--m-fg);
}
.tab.selected {
  background: var(--m-bg);
  color: var(--m-fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.tabs-line {
  display: flex;
  background: none;
  padding: 0;
  border-radius: 0;
  border-bottom: 2px solid var(--m-border);
  width: auto;
}
.tabs-line .tab {
  border-radius: 0;
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
}
.tabs-line .tab.selected {
  background: transparent;
  box-shadow: none;
  color: var(--m-primary);
  border-bottom-color: var(--m-primary);
}
.tabs-v {
  flex-direction: column;
  align-items: stretch;
}
.tabs-line.tabs-v {
  border-bottom: 0;
  border-left: 2px solid var(--m-border);
}
.tabs-line.tabs-v .tab {
  margin-bottom: 0;
  margin-left: -2px;
  border-bottom: 0;
  border-left: 2px solid transparent;
  text-align: left;
  justify-content: flex-start;
}
.tabs-line.tabs-v .tab.selected {
  border-bottom-color: transparent;
  border-left-color: var(--m-primary);
}

/* src/feedback.css */
.toast {
  padding: .9rem 1.15rem;
  border-radius: var(--m-r-sm);
  background: var(--m-fg);
  color: var(--m-bg);
  box-shadow: var(--m-shadow);
  margin: .5rem 0;
}
.toast-title {
  font-weight: 700;
  margin: 0 0 .15em;
}
.toast p {
  margin: 0;
  font-size: 1rem;
  opacity: .85;
}
.toast-success {
  background: var(--m-success);
  color: #fff;
}
.toast-danger {
  background: var(--m-danger);
  color: #fff;
}
.toast-primary {
  background: var(--m-primary);
  color: var(--m-on-primary);
}
.toasts {
  position: fixed;
  z-index: var(--m-z-toast);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  pointer-events: none;
  bottom: 0;
  right: 0;
  max-width: 22rem;
  width: min(22rem, 100%);
}
.toasts > .toast {
  pointer-events: auto;
  margin: 0;
}
.toasts-tl {
  top: 0;
  left: 0;
  bottom: auto;
  right: auto;
}
.toasts-tr {
  top: 0;
  right: 0;
  bottom: auto;
}
.toasts-bl {
  bottom: 0;
  left: 0;
  right: auto;
}
.alert {
  padding: .9rem 1.15rem;
  border: 1px solid var(--m-border);
  border-left: 3px solid var(--m-fg-3);
  border-radius: var(--m-r-sm);
  background: var(--m-surface);
  margin: .8rem 0;
}
.alert p {
  margin: 0;
}
.alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35em;
}
.alert-title {
  margin: 0;
  font-weight: 700;
}
.alert-actions {
  display: flex;
  gap: .4rem;
  flex-shrink: 0;
}
.alert-success {
  border-left-color: var(--m-success);
  background: var(--m-alert-success-bg);
}
.alert-warning {
  border-left-color: var(--m-warning);
  background: var(--m-alert-warning-bg);
}
.alert-danger {
  border-left-color: var(--m-danger);
  background: var(--m-alert-danger-bg);
}
.alert-primary {
  border-left-color: var(--m-primary);
  background: var(--m-primary-soft);
}
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .7rem 1.15rem;
  background: var(--m-primary-soft);
  color: var(--m-fg);
  font-size: 1rem;
  font-weight: 600;
}
.banner-warn {
  background: var(--m-banner-warn-bg);
}
.banner-danger {
  background: var(--m-banner-danger-bg);
}
.empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--m-fg-2);
}
.empty-title {
  font-family: var(--m-font-head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--m-fg);
  margin: 0 0 .35em;
}
.empty-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
}
.skel {
  background:
    linear-gradient(
      90deg,
      var(--m-surface) 25%,
      var(--m-border) 50%,
      var(--m-surface) 75%);
  background-size: 200% 100%;
  animation: m-skel 1.4s ease infinite;
  border-radius: var(--m-r-sm);
}
@keyframes m-skel {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
    background: var(--m-surface);
  }
}
.skel-text {
  height: .85em;
  width: 100%;
}
.skel-avatar {
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
}
.skel-card {
  height: 6rem;
}
.spin {
  width: 1.35em;
  height: 1.35em;
  border: 2px solid var(--m-border-2);
  border-top-color: var(--m-primary);
  border-radius: 50%;
  animation: m-spin .6s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
.spin-sm {
  width: 1em;
  height: 1em;
}
.spin-lg {
  width: 2.25em;
  height: 2.25em;
  border-width: 3px;
}
.spin-block {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 6rem;
}

/* src/overlays.css */
.tooltip {
  position: relative;
  overflow: visible;
  isolation: auto;
}
.tooltip:hover,
.tooltip:focus {
  z-index: var(--m-z-tooltip);
}
.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 2px);
  padding: .35em .8em;
  border-radius: var(--m-r-sm);
  background: var(--m-fg);
  color: var(--m-bg);
  font-size: .875rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m-dur), transform var(--m-dur);
  z-index: var(--m-z-tooltip);
}
.tooltip:hover::after,
.tooltip:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.tooltip-b::after {
  bottom: auto;
  top: calc(100% + 6px);
  transform: translate(-50%, -2px);
}
.tooltip-b:hover::after,
.tooltip-b:focus::after {
  transform: translate(-50%, 0);
}
.tooltip-r::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 6px);
  transform: translate(-2px, -50%);
}
.tooltip-r:hover::after,
.tooltip-r:focus::after {
  transform: translate(0, -50%);
}
.tooltip-l::after {
  bottom: auto;
  top: 50%;
  right: calc(100% + 6px);
  left: auto;
  transform: translate(2px, -50%);
}
.tooltip-l:hover::after,
.tooltip-l:focus::after {
  transform: translate(0, -50%);
}
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--m-dur), visibility var(--m-dur);
  z-index: var(--m-z-modal);
  pointer-events: none;
}
.modal.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
}
.modal-box {
  position: relative;
  width: min(32rem, 100%);
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r);
  box-shadow: var(--m-shadow);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.4rem .6rem;
}
.modal-title {
  margin: 0;
  font-size: 1.25rem;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding: .9rem 1.4rem 1.25rem;
}
.modal-box > .modal-body {
  padding: .35rem 1.4rem;
}
.menu {
  position: relative;
  display: inline-block;
}
.menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 13rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-sm);
  box-shadow: var(--m-shadow);
  padding: .4rem;
  z-index: var(--m-z-menu);
}
.menu.open > .menu-panel {
  display: block;
}
.menu-r > .menu-panel {
  left: auto;
  right: 0;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .55em .85em;
  border-radius: calc(var(--m-r-sm) - 1px);
  color: var(--m-fg);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover {
  background: var(--m-surface);
  text-decoration: none;
}
.menu-item.selected {
  background: var(--m-primary-soft);
  color: var(--m-primary);
}
.menu-danger {
  color: var(--m-danger);
}
.menu-sep {
  border: 0;
  border-top: 1px solid var(--m-border);
  margin: .3rem .35rem;
}
.drawer {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  z-index: var(--m-z-drawer);
  transition: opacity var(--m-dur), visibility var(--m-dur);
  pointer-events: none;
}
.drawer.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}
.drawer-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(var(--m-drawer-w), 100%);
  background: var(--m-bg);
  border-right: 1px solid var(--m-border);
  box-shadow: var(--m-shadow);
  transform: translateX(-100%);
  transition: transform var(--m-dur);
  overflow: auto;
  padding: 1.15rem;
}
.drawer.open .drawer-panel {
  transform: translateX(0);
}
.drawer.drawer-r .drawer-panel,
.drawer-r > .drawer-panel {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid var(--m-border);
  transform: translateX(100%);
}
.drawer.drawer-r.open .drawer-panel {
  transform: translateX(0);
}
.sheet {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  z-index: var(--m-z-drawer);
  transition: opacity var(--m-dur), visibility var(--m-dur);
  pointer-events: none;
}
.sheet.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}
.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: var(--m-sheet-h);
  background: var(--m-bg);
  border-radius: var(--m-r) var(--m-r) 0 0;
  box-shadow: var(--m-shadow);
  transform: translateY(100%);
  transition: transform var(--m-dur);
  overflow: auto;
  padding: 0 1.35rem 1.35rem;
}
.sheet.open .sheet-panel {
  transform: translateY(0);
}
.sheet-handle {
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--m-border-2);
  margin: .65rem auto .85rem;
}
.pop {
  position: relative;
  display: inline-block;
}
.pop-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 13rem;
  padding: .9rem 1.15rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-sm);
  box-shadow: var(--m-shadow);
  z-index: var(--m-z-menu);
}
.pop.open > .pop-panel {
  display: block;
}
.pop-t > .pop-panel {
  top: auto;
  bottom: calc(100% + 6px);
}
.pop-l > .pop-panel {
  left: auto;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
}
.pop-r > .pop-panel {
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
}

/* src/accordion.css */
details,
.acc {
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-sm);
  background: var(--m-bg);
  padding: .85em 1.15em;
  margin: .6em 0;
}
details summary,
.acc summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
details summary::-webkit-details-marker,
.acc summary::-webkit-details-marker {
  display: none;
}
details summary::after,
.acc summary::after {
  content: "";
  width: .65em;
  height: .65em;
  border: 2px solid var(--m-fg-3);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
  transition: transform var(--m-dur);
}
details[open] summary::after,
.acc[open] summary::after {
  transform: rotate(225deg);
}
details[open] summary,
.acc[open] summary {
  margin-bottom: .4em;
}

/* src/navigation.css */
.nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .65rem 1.15rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r);
  box-shadow: var(--m-shadow);
  flex-wrap: wrap;
}
.nav-brand {
  font-family: var(--m-font-head);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--m-fg);
}
.nav a {
  color: var(--m-fg-3);
  font-weight: 600;
  font-size: 1rem;
}
.nav a:hover {
  color: var(--m-fg);
  text-decoration: none;
}
.nav .selected {
  color: var(--m-fg);
}
.nav-space {
  flex: 1;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4em;
  font-size: 1rem;
}
.crumbs a,
.crumbs span {
  color: var(--m-fg-3);
}
.crumbs a:hover {
  color: var(--m-fg);
}
.crumbs > * + *::before {
  content: "/";
  margin-right: .45em;
  color: var(--m-border-2);
}
.crumbs .current {
  color: var(--m-fg);
  font-weight: 600;
}
.bottom-nav {
  display: flex;
  align-items: stretch;
  background: var(--m-bg);
  border-top: 1px solid var(--m-border);
}
.bottom-nav.fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--m-z-sticky);
}
.bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2em;
  padding: .55em .35em;
  color: var(--m-fg-3);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}
.bnav-item:hover {
  color: var(--m-fg);
  background: transparent;
  text-decoration: none;
}
.bnav-item.selected {
  color: var(--m-primary);
}
.steps {
  display: flex;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: .5rem 0;
  counter-reset: st;
}
.step {
  display: flex;
  align-items: center;
  gap: .5em;
  flex: 1;
  color: var(--m-fg-3);
  font-size: 1rem;
  font-weight: 600;
  min-width: 0;
}
.step:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--m-border);
  margin-left: .5em;
}
.step-dot {
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--m-surface);
  border: 1px solid var(--m-border-2);
  font-size: .9375rem;
  counter-increment: st;
  flex-shrink: 0;
}
.step-dot::before {
  content: counter(st);
}
.step.done .step-dot,
.step.current .step-dot {
  background: var(--m-primary);
  color: var(--m-on-primary);
  border-color: var(--m-primary);
}
.step.done,
.step.current {
  color: var(--m-fg);
}
.step.done .step-dot::before {
  content: "\2713";
}
.step-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidenav {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .35rem;
}
.sidenav-item {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .55em .85em;
  border-radius: var(--m-r-sm);
  color: var(--m-fg-2);
  font-weight: 600;
  font-size: 1rem;
}
.sidenav-item:hover {
  background: var(--m-surface);
  text-decoration: none;
  color: var(--m-fg);
}
.sidenav-item.selected {
  background: var(--m-primary-soft);
  color: var(--m-primary);
}
.sidenav-item.disabled {
  opacity: .45;
  pointer-events: none;
}
.steps-v {
  flex-direction: column;
  align-items: stretch;
}
.steps-v .step {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .5em;
  flex: none;
  width: 100%;
}
.steps-v .step-dot {
  grid-column: 1;
  grid-row: 1;
}
.steps-v .step-label {
  grid-column: 2;
  grid-row: 1;
  white-space: normal;
  overflow: visible;
}
.steps-v .step:not(:last-child)::after {
  content: "";
  grid-column: 1;
  grid-row: 2;
  width: 1px;
  height: 1.15rem;
  flex: none;
  margin: .2em auto;
  background: var(--m-border);
}

/* src/indicators.css */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: var(--m-primary-soft);
  color: var(--m-primary);
  font-weight: 700;
  font-size: .9375rem;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-sm {
  width: 2.15em;
  height: 2.15em;
  font-size: .875rem;
}
.avatar-lg {
  width: 3.6em;
  height: 3.6em;
  font-size: 1.125rem;
}
.avatars {
  display: inline-flex;
  align-items: center;
}
.avatars .avatar {
  border: 2px solid var(--m-bg);
  margin-left: -.55em;
}
.avatars .avatar:first-child {
  margin-left: 0;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: 1rem;
  color: var(--m-fg-2);
}
.status-dot {
  width: .65em;
  height: .65em;
  border-radius: 50%;
  background: var(--m-fg-3);
  flex-shrink: 0;
}
.status-dot.online,
.status.online .status-dot {
  background: var(--m-success);
}
.status-dot.away,
.status.away .status-dot {
  background: var(--m-warning);
}
.status-dot.busy,
.status.busy .status-dot {
  background: var(--m-danger);
}
.status-dot.offline,
.status.offline .status-dot {
  background: var(--m-fg-3);
}
.badge {
  position: relative;
  display: inline-flex;
}
.badge-dot,
.badge-n {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(40%, -40%);
  z-index: 1;
}
.badge-dot {
  width: .65em;
  height: .65em;
  background: var(--m-danger);
  border: 2px solid var(--m-bg);
  border-radius: 50%;
}
.badge-n {
  min-width: 1.3em;
  height: 1.3em;
  padding: 0 .35em;
  background: var(--m-danger);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  border-radius: var(--m-r-full);
  display: grid;
  place-items: center;
  border: 2px solid var(--m-bg);
  line-height: 1;
}
.badge-n::after {
  content: attr(data-n);
}

/* src/progress.css */
progress,
.progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: .625rem;
  border: 0;
  overflow: hidden;
  border-radius: var(--m-r-full);
  background: var(--m-surface);
  display: block;
}
progress::-webkit-progress-bar,
.progress::-webkit-progress-bar {
  background: var(--m-surface);
}
progress::-webkit-progress-value,
.progress::-webkit-progress-value {
  background: var(--m-primary);
  border-radius: var(--m-r-full);
}
progress::-moz-progress-bar,
.progress::-moz-progress-bar {
  background: var(--m-primary);
  border-radius: var(--m-r-full);
}
progress:indeterminate::-webkit-progress-bar,
progress:not([value])::-webkit-progress-bar {
  background:
    linear-gradient(
      90deg,
      var(--m-surface) 0%,
      var(--m-primary) 45%,
      var(--m-surface) 100%);
  background-size: 200% 100%;
  animation: m-indet 1.2s linear infinite;
}
progress:indeterminate::-moz-progress-bar,
progress:not([value])::-moz-progress-bar {
  background: var(--m-primary);
  width: 35%;
}
@keyframes m-indet {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  progress:indeterminate::-webkit-progress-bar,
  progress:not([value])::-webkit-progress-bar {
    animation: none;
    background: var(--m-primary-soft-2);
  }
}

/* src/charts.css */
@property --v { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --sv { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v3 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v4 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v5 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v6 { syntax: "<number>"; inherits: true; initial-value: 0; }
.s1 {
  --m-c:var(--m-c1);
}
.s2 {
  --m-c:var(--m-c2);
}
.s3 {
  --m-c:var(--m-c3);
}
.s4 {
  --m-c:var(--m-c4);
}
.s5 {
  --m-c:var(--m-c5);
}
.s6 {
  --m-c:var(--m-c6);
}
.chart-bars {
  display: flex;
  align-items: stretch;
  gap: .6rem;
  height: var(--m-chart-h);
}
.bar {
  position: relative;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: .3rem;
  justify-items: center;
}
.bar > i {
  position: relative;
  align-self: end;
  width: 100%;
  height: calc(var(--v) * 1%);
  background: var(--m-c, var(--m-c1));
  border-radius: var(--m-r-sm) var(--m-r-sm) 0 0;
}
.bar > i[data-v]::after {
  content: attr(data-v);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -3px);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--m-fg-2);
}
.bar > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9375rem;
  color: var(--m-fg-3);
}
.bar.stacked > i {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  background: transparent;
}
.bar.stacked > i > u {
  flex: var(--sv, 1) 1 0;
  min-height: 0;
  background: var(--m-c, var(--m-c1));
}
.chart-hbars {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.hbar {
  display: grid;
  grid-template-columns: minmax(3.5rem, 9rem) 1fr auto;
  align-items: center;
  gap: .65rem;
}
.hbar > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9375rem;
  color: var(--m-fg-2);
}
.hbar > i {
  position: relative;
  display: block;
  height: 1rem;
  border-radius: var(--m-r-full);
  background: var(--m-surface);
}
.hbar > i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) * 1%);
  border-radius: inherit;
  background: var(--m-c, var(--m-c1));
}
.hbar > b {
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-fg-2);
  font-variant-numeric: tabular-nums;
}
.donut {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--m-donut-size, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(
      var(--m-c1) 0 calc(var(--v1) * 1%),
      var(--m-c2) 0 calc((var(--v1) + var(--v2)) * 1%),
      var(--m-c3) 0 calc((var(--v1) + var(--v2) + var(--v3)) * 1%),
      var(--m-c4) 0 calc((var(--v1) + var(--v2) + var(--v3) + var(--v4)) * 1%),
      var(--m-c5) 0 calc((var(--v1) + var(--v2) + var(--v3) + var(--v4) + var(--v5)) * 1%),
      var(--m-c6) 0 calc((var(--v1) + var(--v2) + var(--v3) + var(--v4) + var(--v5) + var(--v6)) * 1%),
      var(--m-border) 0);
}
.donut::before,
.ring::before {
  content: "";
  position: absolute;
  inset: var(--m-donut-w, 1.4rem);
  border-radius: 50%;
  background: var(--m-bg);
}
.donut > *,
.ring > * {
  position: relative;
  z-index: 1;
}
.donut > b,
.ring > b {
  font-size: 1.35rem;
}
.donut.pie::before {
  content: none;
}
.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--m-donut-size, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--m-c, var(--m-c1)) calc(var(--v) * 1%), var(--m-border) 0);
}
.spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: var(--m-spark-h, 3rem);
}
.spark > i {
  flex: 1;
  min-width: 0;
  height: calc(var(--v) * 1%);
  border-radius: 1px;
  background: var(--m-c, var(--m-c1));
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  font-size: .9375rem;
  color: var(--m-fg-2);
}
.legend > span {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
.legend > span > i {
  width: .8em;
  height: .8em;
  border-radius: 3px;
  background: var(--m-c, var(--m-fg-3));
  flex-shrink: 0;
}
.legend-v {
  flex-direction: column;
  gap: .45rem;
}
.bar,
.bar.stacked > i > u,
.hbar,
.ring,
.spark > i,
.donut {
  transition:
    --v .45s ease,
    --sv .45s ease,
    --v1 .45s ease,
    --v2 .45s ease,
    --v3 .45s ease,
    --v4 .45s ease,
    --v5 .45s ease,
    --v6 .45s ease;
}
@media (prefers-reduced-motion: reduce) {
  .bar,
  .bar.stacked > i > u,
  .hbar,
  .ring,
  .spark > i,
  .donut {
    transition: none;
  }
}

/* src/content.css */
.list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--m-border);
  border-radius: var(--m-r);
  overflow: hidden;
  background: var(--m-bg);
}
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8em 1.15em;
  color: var(--m-fg);
  border-bottom: 1px solid var(--m-border);
  background: transparent;
  text-align: left;
  width: 100%;
  font-weight: 600;
  font-size: 1rem;
}
.list-item:last-child {
  border-bottom: 0;
}
.list-item:hover {
  background: var(--m-surface);
  text-decoration: none;
}
.list-item.selected {
  background: var(--m-primary-soft);
  color: var(--m-primary);
}
.list-item.disabled,
.list-item[disabled] {
  opacity: .5;
  pointer-events: none;
}
.list-meta {
  font-size: 1rem;
  color: var(--m-fg-3);
  font-weight: 600;
}
.timeline {
  display: flex;
  flex-direction: column;
  padding-left: .15rem;
}
.tl-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  position: relative;
  padding-bottom: 1.15rem;
}
.tl-item:last-child {
  padding-bottom: 0;
}
.tl-dot {
  position: relative;
  width: .7em;
  height: .7em;
  margin-top: .35em;
  border-radius: 50%;
  background: var(--m-primary);
  box-shadow: 0 0 0 3px var(--m-primary-soft);
  flex-shrink: 0;
}
.tl-item:not(:last-child) .tl-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.1em;
  width: 1px;
  height: calc(100% + .55em);
  background: var(--m-border);
  transform: translateX(-50%);
}
.tl-content {
  min-width: 0;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.stat-label {
  font-size: .9375rem;
  color: var(--m-fg-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stat-val {
  font-size: 1.85rem;
  font-weight: 700;
  font-family: var(--m-font-head);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat-delta {
  font-size: .9375rem;
  font-weight: 700;
}
.stat-delta.up {
  color: var(--m-success);
}
.stat-delta.down {
  color: var(--m-danger);
}
dl,
.dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1.25rem;
}
dl dt,
.dl dt {
  color: var(--m-fg-3);
  font-size: .9375rem;
}
dl dd,
.dl dd {
  margin: 0;
  font-weight: 600;
}
code,
.code {
  font-family: var(--m-mono);
  font-size: 1em;
  padding: .15em .45em;
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: 4px;
}
pre,
.code-block {
  font-family: var(--m-mono);
  font-size: 1rem;
  padding: 1rem 1.25rem;
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-sm);
  overflow: auto;
  line-height: 1.55;
}
pre code,
.code-block code {
  padding: 0;
  background: none;
  border: 0;
}
.prose {
  max-width: 42rem;
}
.prose :where(p) {
  margin: .8em 0;
}
.prose :where(h2, h3) {
  margin-top: 1.5em;
}

/* src/shell.css */
.shell {
  display: grid;
  grid-template: auto 1fr / var(--m-side) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}
.shell-top {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--m-border);
  background: var(--m-bg);
}
.shell-side {
  border-right: 1px solid var(--m-border);
  background: var(--m-bg);
  overflow: auto;
}
.shell-main {
  min-width: 0;
  overflow: auto;
}
.shell.collapsed {
  --m-side: 3.75rem;
}
@media (max-width: 640px) {
  .shell {
    grid-template: auto auto 1fr / 1fr;
  }
  .shell-side {
    border-right: 0;
    border-bottom: 1px solid var(--m-border);
  }
}
.sticky-t {
  position: sticky;
  top: 0;
  z-index: var(--m-z-sticky);
}
.sticky-b {
  position: sticky;
  bottom: 0;
  z-index: var(--m-z-sticky);
}
.split {
  display: flex;
  min-height: 12rem;
  border: 1px solid var(--m-border);
  border-radius: var(--m-r);
  overflow: hidden;
}
.split-a {
  flex: 0 0 var(--split, 40%);
  min-width: 0;
  border-right: 1px solid var(--m-border);
  overflow: auto;
}
.split-b {
  flex: 1;
  min-width: 0;
  overflow: auto;
}
.aspect {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.aspect > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aspect-1x1 {
  aspect-ratio: 1;
}
.aspect-4x3 {
  aspect-ratio: 4 / 3;
}
.aspect-16x9 {
  aspect-ratio: 16 / 9;
}

/* src/patterns.css */
.files {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--m-border);
  border-radius: var(--m-r);
  overflow: hidden;
  background: var(--m-bg);
}
.file {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7em 1em;
  border-bottom: 1px solid var(--m-border);
}
.file:last-child {
  border-bottom: 0;
}
.file-name {
  font-weight: 600;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-meta {
  color: var(--m-fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.num {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
}
.num > * + * {
  margin-left: -1px;
}
.num .num-btn {
  min-width: 2.25rem;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.num .num-btn:first-child {
  border-radius: var(--m-r-sm) 0 0 var(--m-r-sm);
}
.num .num-btn:last-child {
  border-radius: 0 var(--m-r-sm) var(--m-r-sm) 0;
}
.num input {
  width: 4.5rem;
  min-width: 0;
  text-align: center;
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.num input::-webkit-outer-spin-button,
.num input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.num input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.pass-toggle {
  margin: 0 .3rem 0 0;
  padding: .2em .55em;
  border: 0;
  background: transparent;
  color: var(--m-fg-3);
  box-shadow: none;
  font-size: .875rem;
  border-radius: var(--m-r-sm);
}
.pass-toggle:hover {
  background: var(--m-surface);
  color: var(--m-fg);
  border-color: transparent;
}
.otp {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.otp input {
  width: 2.4em;
  height: 2.6em;
  padding: 0;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.picks {
  display: grid;
  gap: .65rem;
}
.pick {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--m-border-2);
  border-radius: var(--m-r);
  background: var(--m-bg);
  cursor: pointer;
  font-weight: 600;
}
.pick > span {
  min-width: 0;
  flex: 1;
}
.pick input {
  margin-top: .2em;
  flex-shrink: 0;
}
.pick-title {
  display: block;
}
.pick-sub {
  display: block;
  color: var(--m-fg-3);
  font-weight: 600;
  margin-top: .15em;
}
.pick.selected {
  border-color: var(--m-primary);
  background: var(--m-primary-soft);
}
.pick:has(:checked) {
  border-color: var(--m-primary);
  background: var(--m-primary-soft);
}
.props {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0;
  border: 1px solid var(--m-border);
  border-radius: var(--m-r);
  overflow: hidden;
  margin: 0;
}
.props dt,
.props dd {
  padding: .65em 1em;
  border-bottom: 1px solid var(--m-border);
  margin: 0;
}
.props dt {
  background: var(--m-surface);
  color: var(--m-fg-3);
  font-size: .9375rem;
  font-weight: 600;
}
.props dd {
  font-weight: 600;
}
.props > :nth-last-child(-n+2) {
  border-bottom: 0;
}
.result {
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto .75rem;
  border-radius: 50%;
  background: var(--m-surface);
  color: var(--m-fg-2);
  font-size: 1.35rem;
  line-height: 1;
}
.result-title {
  font-family: var(--m-font-head);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--m-fg);
  margin: 0 0 .35em;
}
.result-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.result-ok .result-title {
  color: var(--m-success);
}
.result-ok .result-icon {
  background: var(--m-success-soft);
  color: var(--m-success);
}
.result-err .result-title {
  color: var(--m-danger);
}
.result-err .result-icon {
  background: var(--m-danger-soft);
  color: var(--m-danger);
}
.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 .4em;
  border-radius: var(--m-r-full);
  background: var(--m-surface);
  color: var(--m-fg-2);
  font-size: .875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: .1em;
}
.count-primary {
  background: var(--m-primary);
  color: var(--m-on-primary);
}
.count-danger {
  background: var(--m-danger);
  color: #fff;
}
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 1.15rem;
  border-bottom: 1px solid var(--m-border);
}
.subnav a {
  padding: .55em 0;
  color: var(--m-fg-3);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.subnav a:hover {
  color: var(--m-fg);
  text-decoration: none;
}
.subnav .selected {
  color: var(--m-primary);
  border-bottom-color: var(--m-primary);
}
.toc {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.toc a {
  color: var(--m-fg-2);
  font-weight: 600;
  font-size: 1rem;
}
.toc a:hover {
  color: var(--m-fg);
  text-decoration: none;
}
.toc .selected {
  color: var(--m-primary);
}
.footer {
  padding: 1.5rem 1.25rem;
  color: var(--m-fg-3);
  text-align: center;
  border-top: 1px solid var(--m-border);
}
.msgs {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.msg {
  max-width: 80%;
  padding: .65em .95em;
  border-radius: var(--m-r);
  background: var(--m-surface);
  color: var(--m-fg);
}
.msg-out {
  align-self: flex-end;
  background: var(--m-primary);
  color: var(--m-on-primary);
}
.msg-meta {
  display: block;
  font-size: .875rem;
  color: var(--m-fg-3);
  margin-top: .25em;
  font-weight: 600;
}
.msg-out .msg-meta {
  color: inherit;
  opacity: .8;
}
.quote {
  margin: 1rem 0;
}
.quote blockquote {
  border: 0;
  background: none;
  padding: 0;
  margin: 0 0 .65rem;
  font-size: 1.15rem;
  color: var(--m-fg);
}
.quote figcaption {
  color: var(--m-fg-2);
  font-weight: 700;
}
.fig {
  margin: 1rem 0;
}
.fig img,
.fig .aspect {
  border-radius: var(--m-r);
}
.fig figcaption {
  color: var(--m-fg-3);
  margin-top: .5rem;
}
.link-card {
  display: flex;
  gap: .85rem;
  align-items: center;
  padding: .75rem;
  border: 1px solid var(--m-border);
  border-radius: var(--m-r);
  color: inherit;
  text-decoration: none;
  background: var(--m-bg);
}
.link-card:hover {
  border-color: var(--m-border-2);
  text-decoration: none;
  color: inherit;
}
.link-card-img {
  width: 5.5rem;
  height: 4rem;
  border-radius: var(--m-r-sm);
  background: var(--m-surface);
  object-fit: cover;
  flex-shrink: 0;
}
.link-card-body {
  min-width: 0;
}
.link-card-body b {
  display: block;
}
.link-card-body span {
  color: var(--m-fg-3);
  font-size: 1rem;
}
.tree {
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: 600;
}
.tree ul {
  list-style: none;
  margin: .15rem 0 .15rem .7rem;
  padding: 0 0 0 .85rem;
  border-left: 1px solid var(--m-border);
}
.tree li {
  margin: 0;
  padding: .12em 0 .12em 1.35rem;
  list-style: none;
}
.tree details {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  margin: 0 0 0 -1.35rem;
}
.tree details summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .45em;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding: .2em .4em;
  margin: 0;
  border-radius: var(--m-r-sm);
}
.tree details summary:hover {
  background: var(--m-surface);
}
.tree details[open] > summary {
  margin-bottom: 0;
}
.tree details summary::-webkit-details-marker {
  display: none;
}
.tree details summary::after {
  content: "";
  order: -1;
  width: .42em;
  height: .42em;
  flex-shrink: 0;
  margin: 0;
  border: 2px solid var(--m-fg-3);
  border-top: 0;
  border-left: 0;
  transform: rotate(-45deg);
  transition: transform var(--m-dur);
}
.tree details[open] > summary::after {
  transform: rotate(45deg);
}

/* src/layout.css */
.container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.m-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--m-gap, 1rem);
  align-items: center;
}
.m-col {
  display: flex;
  flex-direction: column;
  gap: var(--m-gap, 1rem);
}
.m-row > * {
  flex: 1 1 0;
  min-width: 0;
}
.m-row > .m-col-auto {
  flex: 0 0 auto;
  width: auto;
}
.m-row-nowrap {
  flex-wrap: nowrap;
}
.m-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--m-gap, 1rem);
}
.c-1 {
  flex: 0 0 8.3333%;
  max-width: 8.3333%;
}
.c-2 {
  flex: 0 0 16.6667%;
  max-width: 16.6667%;
}
.c-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.c-4 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.c-5 {
  flex: 0 0 41.6667%;
  max-width: 41.6667%;
}
.c-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.c-7 {
  flex: 0 0 58.3333%;
  max-width: 58.3333%;
}
.c-8 {
  flex: 0 0 66.6667%;
  max-width: 66.6667%;
}
.c-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.c-10 {
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
}
.c-11 {
  flex: 0 0 91.6667%;
  max-width: 91.6667%;
}
.c-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
.m-g-0 {
  --m-gap:0;
}
.m-g-xs {
  --m-gap:.4rem;
}
.m-g-sm {
  --m-gap:.65rem;
}
.m-g-lg {
  --m-gap:1.75rem;
}
.center {
  text-align: center;
}
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5em 0;
  color: var(--m-fg-3);
  font-size: 1rem;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--m-border);
}

/* src/utilities.css */
.m-0 {
  margin: 0;
}
.m-5 {
  margin: 5px;
}
.m-10 {
  margin: 10px;
}
.m-15 {
  margin: 15px;
}
.m-20 {
  margin: 20px;
}
.m-30 {
  margin: 30px;
}
.m-40 {
  margin: 40px;
}
.m-t-0 {
  margin-top: 0;
}
.m-t-5 {
  margin-top: 5px;
}
.m-t-10 {
  margin-top: 10px;
}
.m-t-15 {
  margin-top: 15px;
}
.m-t-20 {
  margin-top: 20px;
}
.m-t-30 {
  margin-top: 30px;
}
.m-t-40 {
  margin-top: 40px;
}
.m-b-0 {
  margin-bottom: 0;
}
.m-b-5 {
  margin-bottom: 5px;
}
.m-b-10 {
  margin-bottom: 10px;
}
.m-b-15 {
  margin-bottom: 15px;
}
.m-b-20 {
  margin-bottom: 20px;
}
.m-b-30 {
  margin-bottom: 30px;
}
.m-b-40 {
  margin-bottom: 40px;
}
.m-l-0 {
  margin-left: 0;
}
.m-l-5 {
  margin-left: 5px;
}
.m-l-10 {
  margin-left: 10px;
}
.m-l-15 {
  margin-left: 15px;
}
.m-l-20 {
  margin-left: 20px;
}
.m-l-30 {
  margin-left: 30px;
}
.m-l-40 {
  margin-left: 40px;
}
.m-r-0 {
  margin-right: 0;
}
.m-r-5 {
  margin-right: 5px;
}
.m-r-10 {
  margin-right: 10px;
}
.m-r-15 {
  margin-right: 15px;
}
.m-r-20 {
  margin-right: 20px;
}
.m-r-30 {
  margin-right: 30px;
}
.m-r-40 {
  margin-right: 40px;
}
.m-x-0 {
  margin-left: 0;
  margin-right: 0;
}
.m-x-5 {
  margin-left: 5px;
  margin-right: 5px;
}
.m-x-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.m-x-15 {
  margin-left: 15px;
  margin-right: 15px;
}
.m-x-20 {
  margin-left: 20px;
  margin-right: 20px;
}
.m-x-auto {
  margin-left: auto;
  margin-right: auto;
}
.m-y-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.m-y-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.m-y-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.m-y-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.m-y-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.p-0 {
  padding: 0;
}
.p-5 {
  padding: 5px;
}
.p-10 {
  padding: 10px;
}
.p-15 {
  padding: 15px;
}
.p-20 {
  padding: 20px;
}
.p-30 {
  padding: 30px;
}
.p-40 {
  padding: 40px;
}
.p-t-0 {
  padding-top: 0;
}
.p-t-5 {
  padding-top: 5px;
}
.p-t-10 {
  padding-top: 10px;
}
.p-t-15 {
  padding-top: 15px;
}
.p-t-20 {
  padding-top: 20px;
}
.p-t-30 {
  padding-top: 30px;
}
.p-b-0 {
  padding-bottom: 0;
}
.p-b-5 {
  padding-bottom: 5px;
}
.p-b-10 {
  padding-bottom: 10px;
}
.p-b-15 {
  padding-bottom: 15px;
}
.p-b-20 {
  padding-bottom: 20px;
}
.p-b-30 {
  padding-bottom: 30px;
}
.p-l-0 {
  padding-left: 0;
}
.p-l-5 {
  padding-left: 5px;
}
.p-l-10 {
  padding-left: 10px;
}
.p-l-15 {
  padding-left: 15px;
}
.p-l-20 {
  padding-left: 20px;
}
.p-l-30 {
  padding-left: 30px;
}
.p-r-0 {
  padding-right: 0;
}
.p-r-5 {
  padding-right: 5px;
}
.p-r-10 {
  padding-right: 10px;
}
.p-r-15 {
  padding-right: 15px;
}
.p-r-20 {
  padding-right: 20px;
}
.p-r-30 {
  padding-right: 30px;
}
.p-x-0 {
  padding-left: 0;
  padding-right: 0;
}
.p-x-5 {
  padding-left: 5px;
  padding-right: 5px;
}
.p-x-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.p-x-15 {
  padding-left: 15px;
  padding-right: 15px;
}
.p-x-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.p-y-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.p-y-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.p-y-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.p-y-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.p-y-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.m-w-auto {
  --m-input-w:auto;
  width: auto;
}
.m-w-xs {
  --m-input-w:8rem;
  width: var(--m-input-w);
}
.m-w-sm {
  --m-input-w:12rem;
  width: var(--m-input-w);
}
.m-w-md {
  --m-input-w:18rem;
  width: var(--m-input-w);
}
.m-w-lg {
  --m-input-w:26rem;
  width: var(--m-input-w);
}
.m-w-full {
  --m-input-w:100%;
  width: var(--m-input-w);
}
.mono {
  font-family: var(--m-mono);
  font-size: 1em;
}
.muted {
  color: var(--m-fg-2);
}
.subtle {
  color: var(--m-fg-3);
}
.overline {
  font-size: .9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--m-fg-3);
}
.hidden {
  display: none !important;
}
.m-flex {
  display: flex;
}
.m-inline-flex {
  display: inline-flex;
}
.m-flex-row {
  flex-direction: row;
}
.m-flex-col {
  flex-direction: column;
}
.m-flex-wrap {
  flex-wrap: wrap;
}
.m-flex-nowrap {
  flex-wrap: nowrap;
}
.m-flex-1 {
  flex: 1 1 0%;
  min-width: 0;
}
.m-flex-auto {
  flex: 1 1 auto;
}
.m-flex-none {
  flex: none;
}
.m-grow {
  flex-grow: 1;
}
.m-shrink-0 {
  flex-shrink: 0;
}
.m-basis-0 {
  flex-basis: 0;
}
.m-items-start,
.m-i-start {
  align-items: flex-start;
}
.m-items-center,
.m-i-center {
  align-items: center;
}
.m-items-end,
.m-i-end {
  align-items: flex-end;
}
.m-items-stretch,
.m-i-stretch {
  align-items: stretch;
}
.m-items-baseline,
.m-i-baseline {
  align-items: baseline;
}
.m-self-start {
  align-self: flex-start;
}
.m-self-center {
  align-self: center;
}
.m-self-end {
  align-self: flex-end;
}
.m-justify-start,
.m-j-start {
  justify-content: flex-start;
}
.m-justify-center,
.m-j-center {
  justify-content: center;
}
.m-justify-end,
.m-j-end {
  justify-content: flex-end;
}
.m-justify-between,
.m-j-between {
  justify-content: space-between;
}
.m-justify-around,
.m-j-around {
  justify-content: space-around;
}
.m-justify-evenly,
.m-j-evenly {
  justify-content: space-evenly;
}
.m-j-center-v {
  justify-content: center;
}
.m-content-start {
  align-content: flex-start;
}
.m-content-between {
  align-content: space-between;
}
.m-content-center {
  align-content: center;
}
.m-order-first {
  order: -1;
}
.m-order-last {
  order: 99;
}
.m-gap-0 {
  gap: 0;
}
.m-gap-xs {
  gap: .4rem;
}
.m-gap-sm {
  gap: .65rem;
}
.m-gap {
  gap: 1rem;
}
.m-gap-lg {
  gap: 1.75rem;
}
.m-gap-xl {
  gap: 2.5rem;
}
.m-gap-5 {
  gap: 5px;
}
.m-gap-10 {
  gap: 10px;
}
.m-gap-15 {
  gap: 15px;
}
.m-gap-20 {
  gap: 20px;
}
.m-gap-30 {
  gap: 30px;
}
.m-gap-40 {
  gap: 40px;
}
.m-gap-x-0 {
  column-gap: 0;
}
.m-gap-x-xs {
  column-gap: .4rem;
}
.m-gap-x-sm {
  column-gap: .65rem;
}
.m-gap-x {
  column-gap: 1rem;
}
.m-gap-x-lg {
  column-gap: 1.75rem;
}
.m-gap-x-5 {
  column-gap: 5px;
}
.m-gap-x-10 {
  column-gap: 10px;
}
.m-gap-x-15 {
  column-gap: 15px;
}
.m-gap-x-20 {
  column-gap: 20px;
}
.m-gap-x-30 {
  column-gap: 30px;
}
.m-gap-y-0 {
  row-gap: 0;
}
.m-gap-y-xs {
  row-gap: .4rem;
}
.m-gap-y-sm {
  row-gap: .65rem;
}
.m-gap-y {
  row-gap: 1rem;
}
.m-gap-y-lg {
  row-gap: 1.75rem;
}
.m-gap-y-5 {
  row-gap: 5px;
}
.m-gap-y-10 {
  row-gap: 10px;
}
.m-gap-y-15 {
  row-gap: 15px;
}
.m-gap-y-20 {
  row-gap: 20px;
}
.m-gap-y-30 {
  row-gap: 30px;
}
.m-grid {
  display: grid;
}
.m-inline-grid {
  display: inline-grid;
}
.m-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.m-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.m-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.m-grid-cols-auto {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.m-grid-cols-auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.m-grid-cols-auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}
.m-grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.m-grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.m-grid-flow-dense {
  grid-auto-flow: row dense;
}
.m-col-span-2 {
  grid-column: span 2/span 2;
}
.m-col-span-3 {
  grid-column: span 3/span 3;
}
.m-col-span-full {
  grid-column: 1/-1;
}
.m-row-span-2 {
  grid-row: span 2/span 2;
}
.surface {
  background: var(--m-surface);
}
.elev-1 {
  box-shadow: var(--m-shadow);
}
.elev-2 {
  box-shadow: var(--m-elev);
}
.elev-3 {
  box-shadow: 0 8px 28px rgba(16, 24, 40, .18);
}
.border {
  border: 1px solid var(--m-border);
}
.radius-sm {
  border-radius: var(--m-r-sm);
}
.radius {
  border-radius: var(--m-r);
}
.radius-full {
  border-radius: var(--m-r-full);
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-sm {
  font-size: 1rem;
}
.text-lg {
  font-size: 1.25rem;
}
.fw-500 {
  font-weight: 500;
}
.fw-700 {
  font-weight: 700;
}
.tabular {
  font-variant-numeric: tabular-nums;
}
.rel {
  position: relative;
}
.abs {
  position: absolute;
}
.fixed {
  position: fixed;
}
.inset-0 {
  inset: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-50 {
  z-index: 50;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: .75rem;
  top: -3rem;
  z-index: var(--m-z-skip);
  padding: .4em .8em;
  background: var(--m-primary);
  color: var(--m-on-primary);
  border-radius: var(--m-r-sm);
}
.skip-link:focus {
  top: .75rem;
}
.scroll-y {
  overflow-y: auto;
}
.no-scrollbar {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.overscroll-none {
  overscroll-behavior: none;
}
.is-disabled {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}
.is-loading {
  opacity: .7;
  pointer-events: none;
}
.print-only {
  display: none;
}
@media print {
  .print-only {
    display: revert;
  }
  .no-print {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .m-grid-cols-2,
  .m-grid-cols-3,
  .m-grid-cols-4 {
    grid-template-columns: 1fr;
  }
  .m-col-span-2,
  .m-col-span-3 {
    grid-column: auto;
  }
}

/* src/index.css */