gmx.css/dist/gmx.css

A micro Material Design 3 based CSS-only framework.

/* src/_base.css */
@media (prefers-color-scheme: light) {
  :root,
  ::backdrop {
    --m3-scheme-primary: rgb(101, 85, 143);
    --m3-scheme-on-primary: rgb(255, 255, 255);
    --m3-scheme-primary-container: rgb(233, 221, 255);
    --m3-scheme-on-primary-container: rgb(32, 16, 71);
    --m3-scheme-inverse-primary: rgb(207, 189, 254);
    --m3-scheme-secondary: rgb(98, 91, 113);
    --m3-scheme-on-secondary: rgb(255, 255, 255);
    --m3-scheme-secondary-container: rgb(232, 222, 248);
    --m3-scheme-on-secondary-container: rgb(30, 25, 43);
    --m3-scheme-tertiary: rgb(126, 82, 96);
    --m3-scheme-on-tertiary: rgb(255, 255, 255);
    --m3-scheme-tertiary-container: rgb(255, 217, 227);
    --m3-scheme-on-tertiary-container: rgb(49, 16, 29);
    --m3-scheme-error: rgb(186, 26, 26);
    --m3-scheme-on-error: rgb(255, 255, 255);
    --m3-scheme-error-container: rgb(255, 218, 214);
    --m3-scheme-on-error-container: rgb(65, 0, 2);
    --m3-scheme-background: rgb(253, 247, 255);
    --m3-scheme-on-background: rgb(29, 27, 32);
    --m3-scheme-surface: rgb(253, 247, 255);
    --m3-scheme-on-surface: rgb(29, 27, 32);
    --m3-scheme-surface-variant: rgb(231, 224, 235);
    --m3-scheme-on-surface-variant: rgb(73, 69, 78);
    --m3-scheme-inverse-surface: rgb(50, 47, 53);
    --m3-scheme-inverse-on-surface: rgb(245, 239, 247);
    --m3-scheme-outline: rgb(122, 117, 127);
    --m3-scheme-outline-variant: rgb(202, 196, 207);
    --m3-scheme-shadow: rgb(0, 0, 0);
    --m3-scheme-scrim: rgb(0, 0, 0);
    --m3-scheme-surface-dim: rgb(222, 216, 224);
    --m3-scheme-surface-bright: rgb(253, 247, 255);
    --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
    --m3-scheme-surface-container-low: rgb(248, 242, 250);
    --m3-scheme-surface-container: rgb(242, 236, 244);
    --m3-scheme-surface-container-high: rgb(236, 230, 238);
    --m3-scheme-surface-container-highest: rgb(230, 224, 233);
    --m3-scheme-surface-tint: rgb(101, 85, 143);
  }
}
:root {
  --m3-util-elevation-0: none;
  --m3-util-elevation-1:
    0px 3px 1px -2px rgb(from var(--m3-scheme-shadow) r g b / 20%),
    0px 2px 2px 0px rgb(from var(--m3-scheme-shadow) r g b / 14%),
    0px 1px 5px 0px rgb(from var(--m3-scheme-shadow) r g b / 12%);
  --m3-util-elevation-2:
    0px 2px 4px -1px rgb(from var(--m3-scheme-shadow) r g b / 20%),
    0px 4px 5px 0px rgb(from var(--m3-scheme-shadow) r g b / 14%),
    0px 1px 10px 0px rgb(from var(--m3-scheme-shadow) r g b / 12%);
  --m3-util-elevation-3:
    0px 5px 5px -3px rgb(from var(--m3-scheme-shadow) r g b / 20%),
    0px 8px 10px 1px rgb(from var(--m3-scheme-shadow) r g b / 14%),
    0px 3px 14px 2px rgb(from var(--m3-scheme-shadow) r g b / 12%);
  --m3-util-elevation-4:
    0px 5px 5px -3px rgb(from var(--m3-scheme-shadow) r g b / 20%),
    0px 8px 10px 1px rgb(from var(--m3-scheme-shadow) r g b / 14%),
    0px 3px 14px 2px rgb(from var(--m3-scheme-shadow) r g b / 12%);
  --m3-util-elevation-5:
    0px 8px 10px -6px rgb(from var(--m3-scheme-shadow) r g b / 20%),
    0px 16px 24px 2px rgb(from var(--m3-scheme-shadow) r g b / 14%),
    0px 6px 30px 5px rgb(from var(--m3-scheme-shadow) r g b / 12%);
  --m3-util-bottom-offset: 0;
  --m3-util-rounding-none: 0;
  --m3-util-rounding-extra-small: .25rem;
  --m3-util-rounding-small: .5rem;
  --m3-util-rounding-medium: .75rem;
  --m3-util-rounding-large: 1rem;
  --m3-util-rounding-extra-large: 1.75rem;
  --m3-util-rounding-full: 100rem;
  --m3-font:
    Roboto,
    "Helvetica Neue",
    "Arial Nova",
    "Nimbus Sans",
    Noto Sans,
    Arial,
    sans-serif;
}
:root {
  --m3-snackbar-shape: var(--m3-util-rounding-extra-small);
  --m3-segmented-button-shape: var(--m3-util-rounding-full);
  --m3-button-shape: var(--m3-util-rounding-full);
  --m3-chip-shape: var(--m3-util-rounding-small);
  --m3-textfield-outlined-shape: var(--m3-util-rounding-extra-small);
  --m3-textfield-filled-shape: var(--m3-util-rounding-extra-small);
  --m3-datefield-shape: var(--m3-util-rounding-extra-small);
  --m3-date-picker-shape: var(--m3-util-rounding-large);
  --m3-slider-track-out-shape: .5rem;
  --m3-slider-track-in-shape: .125rem;
  --m3-slider-thumb-shape: var(--m3-util-rounding-full);
  --m3-menu-shape: var(--m3-util-rounding-extra-small);
  --m3-linear-progress-shape: var(--m3-util-rounding-full);
  --m3-bottom-sheet-shape: var(--m3-util-rounding-extra-large);
  --m3-card-shape: var(--m3-util-rounding-medium);
  --m3-fab-small-shape: var(--m3-util-rounding-small);
  --m3-fab-normal-shape: var(--m3-util-rounding-large);
  --m3-fab-large-shape: var(--m3-util-rounding-extra-large);
  --m3-dialog-shape: var(--m3-util-rounding-extra-large);
  --m3-checkbox-shape: .175rem;
  --m3-radio-shape: var(--m3-util-rounding-full);
  --m3-switch-track-shape: var(--m3-util-rounding-full);
  --m3-switch-handle-shape: var(--m3-util-rounding-full);
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
}
[disabled],
.segmented input:disabled + label {
  color: rgb(from var(--m3-scheme-on-surface) r g b / 38%);
  pointer-events: none;
}
img[width][height] {
  height: auto;
}
summary {
  cursor: pointer;
}
a {
  text-decoration: none;
}
iconify-icon:not(aside iconify-icon, iconify-icon[width][height]) {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.switch input,
.chip input,
.tabs input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}
html,
body {
  margin: 0;
}
body {
  font-family: var(--m3-font);
  font-size: 1rem;
  letter-spacing: .03125rem;
  line-height: 1.5rem;
  background: var(--m3-scheme-background);
  color: var(--m3-scheme-on-background);
  min-height: 100vh;
}
main {
  display: flex;
  min-height: 100vh;
}

/* src/_button.css */
img.btn {
  object-fit: cover;
  object-position: center;
  border: none;
}
:where(button, .btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--m3-scheme-primary);
  border: 1px solid transparent;
  border-radius: var(--m3-button-shape);
  color: var(--m3-scheme-on-primary);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  padding: .65rem 1.5rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: .1s;
}
:where(button, .btn):has(i) {
  padding: .65rem 1rem;
}
:where(button, .btn):hover {
  background: rgb(from var(--m3-scheme-primary) r g b / 90%);
  box-shadow: var(--m3-util-elevation-1);
}
:where(button, .btn) i {
  max-width: none;
}
:where(button, .btn) i * {
  font-size: 1.125rem;
  margin: 0 .5rem 0 0;
}
:where(button, .btn).tonal {
  background: var(--m3-scheme-secondary-container);
  color: var(--m3-scheme-on-secondary-container);
}
:where(button, .btn).tonal:hover,
.segmented input:checked + .btn:hover,
.chip:has(input:checked):hover {
  background: rgb(from var(--m3-scheme-primary) r g b / 20%);
}
:where(button, .btn).text,
:where(button, .btn).outline,
.segmented :where(button, .btn) {
  box-shadow: none;
  background: transparent;
  color: var(--m3-scheme-primary);
}
:where(button, .btn).text:hover,
:where(button, .btn).outline:hover,
.segmented :where(button, .btn):hover,
.tabs > label:has(input:checked):hover {
  box-shadow: none;
  background: rgb(from var(--m3-scheme-primary) r g b / 10%);
}
:where(button, .btn).outline,
.segmented {
  border: .0625rem solid var(--m3-scheme-outline);
}
:where(button, .btn).text {
  padding: .8rem .8rem;
}
:where(button, .btn).elevated {
  background: var(--m3-scheme-surface-container-low);
  color: var(--m3-scheme-primary);
  box-shadow: var(--m3-util-elevation-1);
}
:where(button, .btn).elevated:hover {
  background: rgb(from var(--m3-scheme-primary) r g b / 5%);
  box-shadow: var(--m3-util-elevation-2);
}
.segmented {
  display: inline-flex;
  overflow: hidden;
  border-radius: var(--m3-segmented-button-shape);
}
.segmented > * {
  border-radius: 0;
}
.segmented > *:not(:last-child) {
  border-right: .0625rem solid var(--m3-scheme-outline);
}
.segmented input:checked + label {
  background: var(--m3-scheme-secondary-container);
}
.segmented input:checked + label:hover {
  background: var(--m3-scheme-secondary-container);
}
.segmented input:checked + label i:not(.checked) {
  display: none;
}
.segmented input:not(:checked) + label i.checked {
  display: none;
}
.segmented input {
  display: none;
}
.segmented label.btn {
  color: var(--m3-scheme-on-secondary-container);
}
.segmented label.btn:hover,
main > aside li:not(.active):hover i,
.menu > *:hover,
.chip:hover,
.tabs > *:hover {
  background: var(--m3-scheme-surface-container-highest);
}
:where(button, .btn).icon,
:where(button, .btn).fab:not(.extended) {
  aspect-ratio: 1/1;
  width: var(--size);
  height: var(--size);
}
:where(button, .btn).chip.icon {
  --size: 2rem;
}
:where(button, .btn).icon,
:where(button, .btn).fab.small {
  --size: 2.65rem;
}
:where(button, .btn).icon i *,
:where(button, .btn).fab i * {
  font-size: 1.5rem;
  margin-right: 0;
}
:where(button, .btn).fab.small {
  border-radius: var(--m3-fab-small-shape);
}
:where(button, .btn).fab {
  box-shadow: var(--m3-util-elevation-2);
  --size: 3.5rem;
  border-radius: var(--m3-fab-normal-shape);
}
:where(button, .btn).fab.large {
  --size: 5.5rem;
  border-radius: var(--m3-fab-large-shape);
}
:where(button, .btn).fab.large i * {
  font-size: 2.5rem;
}
:where(button, .btn).fab.extended {
  width: auto;
}
:where(button, .btn).fab.extended i * {
  margin-right: .5rem;
}

/* src/_card.css */
.card {
  padding: inherit;
  background: var(--m3-scheme-surface-container-low);
  color: var(--m3-scheme-on-surface);
  box-shadow: var(--m3-util-elevation-1);
  border-radius: var(--m3-card-shape);
}
.container:not(:has(> header, > footer)),
.container > header,
.container > footer {
  padding: 1rem;
  border-radius: var(--m3-util-rounding-extra-large);
  background: var(--m3-scheme-surface-container);
  color: var(--m3-scheme-on-surface);
}
.container:has(> header, > footer) {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.container > header {
  border-radius: var(--m3-util-rounding-extra-large) var(--m3-util-rounding-extra-large) var(--m3-util-rounding-small) var(--m3-util-rounding-small);
  flex-grow: 1;
}
.container > footer {
  border-radius: var(--m3-util-rounding-small) var(--m3-util-rounding-small) var(--m3-util-rounding-extra-large) var(--m3-util-rounding-extra-large);
}

/* src/_chip.css */
.chip {
  display: inline-flex;
  padding: .35rem 1rem;
  border-radius: var(--m3-chip-shape);
  background: var(--m3-scheme-surface);
  color: var(--m3-scheme-on-surface-variant);
  border: solid .0625rem var(--m3-scheme-outline);
}
.chip:not(.icon) i * {
  margin-left: -.25rem;
}
.chip:not(.icon) i:last-child {
  margin-left: .65rem;
  margin-right: -.75rem;
}
.chip:has(input:not(:checked)):hover {
  box-shadow: none;
}
.chip:has(input:checked) {
  border-color: transparent;
  background: var(--m3-scheme-secondary-container);
  color: var(--m3-scheme-on-secondary-container);
}

/* src/_dialog.css */
.dialog-trigger + input:not(:checked) + .dialog {
  display: none;
}
.dialog-trigger + input:checked + .dialog {
  display: block;
}
.dialog-trigger + input:checked::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
:is(dialog, .dialog) {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 20;
  background: var(--m3-scheme-surface-container-high);
  border: none;
  border-radius: var(--m3-dialog-shape);
  min-width: 35rem;
  max-width: 35rem;
  text-align: center;
  padding: 1.45rem 1.5rem;
}
dialog:not(.bottom-sheet)[open],
.dialog-trigger + input:checked + .dialog:not(.bottom-sheet) {
  animation: dialog-in .5s cubic-bezier(.05, .7, .1, 1), dialog-opacity .5s cubic-bezier(.05, .7, .1, 1);
}
@keyframes dialog-in {
  0% {
    transform: translate(-50%, -70%);
    clip-path: inset(0 0 100% 0 round var(--m3-util-rounding-extra-large));
  }
  100% {
    transform: translate(-50%, -50%);
    clip-path: inset(0 0 0 0 round var(--m3-util-rounding-extra-large));
  }
}
@keyframes dialog-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
:is(dialog, .dialog).bottom-sheet {
  top: 100%;
  transform: translate(-50%, -100%);
  overflow: hidden;
  background: var(--m3-scheme-surface-container-low);
  color: var(--m3-scheme-on-surface);
  border-radius: var(--m3-bottom-sheet-shape) var(--m3-bottom-sheet-shape) 0 0;
  padding: 1rem 1rem;
  border: none;
}
dialog[open].bottom-sheet,
.dialog-trigger + input:checked + .dialog.bottom-sheet {
  animation: dialog-bottom .5s cubic-bezier(.05, .7, .1, 1);
}
@keyframes dialog-bottom {
  0% {
    transform: translate(-50%, 50%);
  }
  100% {
    transform: translate(-50%, -100%);
  }
}
dialog::backdrop,
.dialog-trigger + input:checked::after {
  background: rgb(from var(--m3-scheme-scrim) r g b / 30%);
}
:is(dialog, .dialog) form {
  text-align: right;
}

/* src/_field.css */
.field {
  position: relative;
}
.field:not(:last-child, :is(nav, .row) .field, .grid > .field) {
  margin-bottom: 1rem;
}
.field :is(input, textarea) {
  display: block;
  border: none;
  outline: none;
  min-width: 15.5rem;
  border-bottom: 1px solid var(--m3-scheme-outline);
  background: var(--m3-scheme-surface-container-highest);
  border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
  box-sizing: border-box;
  font: inherit;
  padding: 1.5rem 1rem .5rem;
  transition: all 0.15s ease-out;
}
.field :is(input, textarea):hover {
  background: rgb(from var(--m3-scheme-on-surface) r g b / 15%);
}
.field label {
  position: absolute;
  top: 1rem;
  bottom: 0;
  left: 1rem;
  display: flex;
  align-items: self-start;
  pointer-events: none;
}
.field label span {
  transition: all 0.15s ease-out;
}
.field :is(input, textarea):focus {
  outline: none;
  border-bottom: 2px solid var(--m3-scheme-primary);
}
.field :is(input, textarea):focus + label span,
.field :not(:is(input, textarea):placeholder-shown) + label span {
  font-size: .75rem;
  transform: translate(0, -50%);
}
.field :is(input, textarea):focus + label span {
  color: var(--m3-scheme-primary);
}
.field:has(i) :is(input, textarea) {
  padding: 1.5rem 1rem .5rem 2.85rem;
}
.field:has(i) label {
  left: 2.85rem;
}
.field i {
  position: absolute;
  pointer-events: none;
  left: .65rem;
}
.field i * {
  font-size: 1.5rem;
}

/* src/_form.css */
.checkbox,
.radio {
  display: inline-block;
  position: relative;
}
.checkbox:not(:last-child),
.radio:not(:last-child) {
  margin-right: .75rem;
}
.checkbox input,
.radio input {
  appearance: none;
  width: 2.25rem;
  height: 2.25rem;
  position: absolute;
  margin: -.35rem -.45rem;
  border-radius: var(--m3-util-rounding-full);
  background: transparent;
  transition: .1s;
}
.radio input {
  margin: -.375rem -.5rem;
}
.checkbox:hover input,
.radio:hover input {
  background: rgb(from var(--m3-scheme-primary) r g b / 10%);
}
.checkbox span,
.radio span {
  position: relative;
  cursor: pointer;
  padding: 0 .115rem;
}
.checkbox span:before,
.radio span::before {
  content: "";
  appearance: none;
  background: transparent;
  border: .15rem solid currentColor;
  border-radius: var(--m3-checkbox-shape);
  padding: .45rem;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: .5rem;
}
.checkbox input:checked + span:before,
.radio input:checked + span:before {
  background: var(--m3-scheme-primary);
  border-color: var(--m3-scheme-primary);
}
.checkbox input:checked + span:after {
  content: "";
  display: block;
  position: absolute;
  top: .3rem;
  left: .5rem;
  width: 4.75px;
  height: .7rem;
  border: solid #ffffff;
  border-width: 0 .1em .1em 0;
  transform: rotate(45deg);
}
.radio span::before {
  border-radius: var(--m3-radio-shape);
  padding: .3rem;
  border: 4px solid transparent;
  outline: .15rem solid currentColor;
}
.radio input:checked + span:before {
  border-color: var(--m3-scheme-surface-container);
  outline-color: var(--m3-scheme-primary);
}

/* src/_grid.css */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.grid > * {
  margin: 0;
  grid-column: span var(--num);
}
.grid > .s1,
.grid.all-s1 > * {
  --num: 1;
}
.grid > .s2,
.grid.all-s2 > * {
  --num: 2;
}
.grid > .s3,
.grid.all-s3 > * {
  --num: 3;
}
.grid > .s4,
.grid.all-s4 > * {
  --num: 4;
}
.grid > .s5,
.grid.all-s5 > * {
  --num: 5;
}
.grid > .s6,
.grid.all-s6 > * {
  --num: 6;
}
.grid > .s7,
.grid.all-s7 > * {
  --num: 7;
}
.grid > .s8,
.grid.all-s8 > * {
  --num: 8;
}
.grid > .s9,
.grid.all-s9 > * {
  --num: 9;
}
.grid > .s10,
.grid.all-s10 > * {
  --num: 10;
}
.grid > .s11,
.grid.all-s11 > * {
  --num: 11;
}
.grid > .s12,
.grid.all-s12 > * {
  --num: 12;
}
@media screen and (min-width: 48em) {
  .grid > .m1,
  .grid.all-m1 > * {
    --num: 1;
  }
  .grid > .m2,
  .grid.all-m2 > * {
    --num: 2;
  }
  .grid > .m3,
  .grid.all-m3 > * {
    --num: 3;
  }
  .grid > .m4,
  .grid.all-m4 > * {
    --num: 4;
  }
  .grid > .m5,
  .grid.all-m5 > * {
    --num: 5;
  }
  .grid > .m6,
  .grid.all-m6 > * {
    --num: 6;
  }
  .grid > .m7,
  .grid.all-m7 > * {
    --num: 7;
  }
  .grid > .m8,
  .grid.all-m8 > * {
    --num: 8;
  }
  .grid > .m9,
  .grid.all-m9 > * {
    --num: 9;
  }
  .grid > .m10,
  .grid.all-m10 > * {
    --num: 10;
  }
  .grid > .m11,
  .grid.all-m11 > * {
    --num: 11;
  }
  .grid > .m12,
  .grid.all-m12 > * {
    --num: 12;
  }
}
@media screen and (min-width: 64em) {
  .grid > .l1,
  .grid.all-l1 > * {
    --num: 1;
  }
  .grid > .l2,
  .grid.all-l2 > * {
    --num: 2;
  }
  .grid > .l3,
  .grid.all-l3 > * {
    --num: 3;
  }
  .grid > .l4,
  .grid.all-l4 > * {
    --num: 4;
  }
  .grid > .l5,
  .grid.all-l5 > * {
    --num: 5;
  }
  .grid > .l6,
  .grid.all-l6 > * {
    --num: 6;
  }
  .grid > .l7,
  .grid.all-l7 > * {
    --num: 7;
  }
  .grid > .l8,
  .grid.all-l8 > * {
    --num: 8;
  }
  .grid > .l9,
  .grid.all-l9 > * {
    --num: 9;
  }
  .grid > .l10,
  .grid.all-l10 > * {
    --num: 10;
  }
  .grid > .l11,
  .grid.all-l11 > * {
    --num: 11;
  }
  .grid > .l12,
  .grid.all-l12 > * {
    --num: 12;
  }
}
.grid-outline {
  border-bottom: 1px solid var(--m3-scheme-outline-variant);
  border-left: 1px solid var(--m3-scheme-outline-variant);
  gap: 0;
}
.grid-outline > * {
  border-top: 1px solid var(--m3-scheme-outline-variant);
  border-right: 1px solid var(--m3-scheme-outline-variant);
}

/* src/_menu.css */
details .menu {
  position: absolute;
  z-index: 2;
}
.list-box,
.menu {
  background: var(--m3-scheme-surface-container-high);
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.list-box > * {
  padding: 1.15rem 1rem .75rem;
}
.list-box > * > article * {
  margin: 0;
}
.list-box > * i *,
.menu > * i * {
  font-size: 1.5rem;
  margin-right: 1rem;
}
.list-box > * + * {
  border-top: 1px solid var(--m3-scheme-outline-variant);
}
.menu {
  background: var(--m3-scheme-surface-container);
  box-shadow: var(--m3-util-elevation-2);
  font-size: .875rem;
  font-weight: 500;
  border-radius: var(--m3-menu-shape);
  padding: .5rem 0;
  min-width: 7rem;
  max-width: 17.5rem;
}
.menu > * {
  padding: .75rem;
  cursor: pointer;
  transition: .1s;
}

/* src/_nav.css */
main > aside {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  padding: 0 .75rem;
}
main > aside > :is(menu, .row) {
  display: flex;
  height: 100%;
  justify-content: center;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
main > article {
  width: 93.5%;
  margin: 0 0 0 auto;
  padding: 0 1.5rem;
}
@media screen and (max-width: 64em) {
  main > aside {
    background: var(--m3-scheme-surface);
    top: auto;
    bottom: 0;
    padding: .25rem 0;
    width: 100%;
    z-index: 100;
    height: min-content;
  }
  main > aside > :is(menu, .row) {
    justify-content: space-around;
    flex-direction: row;
  }
  main {
    padding: 0 1rem;
    margin: 0 auto 2rem;
  }
  main > article {
    width: 100%;
    padding: 0 0 !important;
    margin-bottom: 2.25rem;
  }
  :is(dialog, .dialog) {
    min-width: 100% !important;
    width: 100%;
  }
}
:is(nav, .row):not(.segmented),
.list-box > *,
.menu > *,
label.checkbox *,
label.radio *,
.field:has(i) {
  display: flex;
  align-items: center;
  align-self: normal;
  text-align: start;
}
:is(nav, .row) *:not(main > aside *, :is(h1, h2, h3, h4, h5, h6)) {
  margin-bottom: 0;
  margin-top: 0;
}
main > aside li,
main > aside li:has(* > i) > * {
  width: 3.5rem;
  margin: .25rem 0;
  cursor: pointer;
  display: flex;
  text-align: center;
  list-style-type: none;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  color: inherit;
}
main > aside li span {
  font-size: .75rem;
  font-weight: 500;
}
main > aside li i {
  width: 100%;
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  padding: .25rem;
  border-radius: var(--m3-util-rounding-full);
  transition: .1s;
}
main > aside li.active i {
  background: var(--m3-scheme-secondary-container);
}
main > aside li i * {
  font-size: 1.5rem;
}
main > article > section {
  margin: 3.5rem 0;
}
main > aside * {
  align-self: center;
}

/* src/_progress.css */
progress:not(.circle, [value]):after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: var(--m3-scheme-primary);
  animation: 1.2s to-linear linear infinite;
}
@keyframes to-linear {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
progress {
  appearance: none;
}
progress:not(.circle) {
  position: relative;
  height: .25rem;
  border-radius: var(--m3-linear-progress-shape);
  overflow: hidden;
}
::-webkit-progress-value {
  background: var(--m3-scheme-primary);
}
::-webkit-progress-bar {
  background: var(--m3-scheme-primary-container);
}
progress.circle::-webkit-progress-value {
  background: transparent;
}
progress.circle::-webkit-progress-bar {
  background: transparent;
}
progress.circle {
  display: inline-block;
  position: relative;
  width: 3rem;
  height: 3rem;
  background: conic-gradient(var(--m3-scheme-primary) calc(var(--value) * 1%), transparent 0);
  border-radius: 50%;
}
progress.circle::after {
  content: "";
  position: absolute;
  inset: 10%;
  background: var(--m3-scheme-surface-container);
  border-radius: 50%;
}
progress.circle.spin {
  animation: spin 1s infinite linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* src/_slider.css */
.slider {
  display: block;
  position: relative;
  height: 2.75rem;
  min-width: 10rem;
}
.slider input {
  position: absolute;
  left: -.5rem;
  right: -.5rem;
  width: calc(100% + 1rem);
  height: 100%;
  opacity: 0;
  appearance: none;
  margin: 0;
  cursor: pointer;
}
.slider input:active ~ .thumb {
  width: .125rem;
}
.slider .track::before {
  position: absolute;
  content: " ";
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: calc(var(--percent) - .375rem);
  height: 1rem;
  pointer-events: none;
  background: var(--m3-scheme-primary);
  border-start-start-radius: var(--m3-slider-track-out-shape);
  border-end-start-radius: var(--m3-slider-track-out-shape);
  border-start-end-radius: var(--m3-slider-track-in-shape);
  border-end-end-radius: var(--m3-slider-track-in-shape);
}
.slider .track::after {
  position: absolute;
  content: " ";
  right: 0;
  top: 50%;
  translate: 0 -50%;
  width: calc(100% - var(--percent) - .375rem);
  height: 1rem;
  pointer-events: none;
  background: var(--m3-scheme-primary-container);
  border-start-start-radius: var(--m3-slider-track-in-shape);
  border-end-start-radius: var(--m3-slider-track-in-shape);
  border-start-end-radius: var(--m3-slider-track-out-shape);
  border-end-end-radius: var(--m3-slider-track-out-shape);
}
.slider .thumb {
  position: absolute;
  left: var(--percent);
  translate: -50% 0;
  width: .25rem;
  height: 2.75rem;
  border-radius: 1.25rem;
  background: var(--m3-scheme-primary);
  pointer-events: none;
  transition: width .2s;
}
.slider .tooltip {
  position: absolute;
  background: var(--m3-scheme-inverse-surface);
  color: var(--m3-scheme-inverse-on-surface);
  width: 3rem;
  text-align: center;
  padding: .65rem 0;
  font-weight: 500;
  font-size: .875rem;
  border-radius: var(--m3-slider-thumb-shape);
  left: var(--percent);
  top: -3rem;
  translate: -50% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.slider:hover .tooltip {
  opacity: 1;
}

/* src/_switch.css */
.switch {
  position: relative;
  display: inline-block;
  width: 3.25rem;
  height: 2rem;
}
.switch > span {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--m3-scheme-surface-container-highest);
  border: solid .125rem var(--m3-scheme-outline);
  transition: .2s;
  border-radius: 2rem;
}
.switch > span:before {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  left: .4rem;
  bottom: .4rem;
  background: var(--m3-scheme-outline);
  transition: .2s;
  border-radius: var(--m3-switch-handle-shape);
}
.switch > input:not(:checked):active + span::before {
  width: 1.7rem;
  height: 1.7rem;
  bottom: 1px;
  left: 1px;
}
.switch > input:hover + span {
  border-color: var(--m3-scheme-on-surface-variant);
}
.switch > input:hover + span:before {
  background: var(--m3-scheme-on-surface-variant);
  box-shadow: 0 0 0 .95rem rgb(from var(--m3-scheme-outline) r g b / 20%);
}
.switch > input:checked + span {
  background: var(--m3-scheme-primary);
  border-color: var(--m3-scheme-primary);
}
.switch > input:checked + span:before {
  width: 1.55rem;
  height: 1.55rem;
  background: #ffffff;
  transform: translateX(1rem);
  bottom: 1.5px;
}
.switch > input:checked:hover + span:before {
  background: var(--m3-scheme-secondary-container);
  box-shadow: 0 0 0 .75rem rgb(from var(--m3-scheme-outline) r g b / 20%);
}
.switch > input:checked:active + span::before {
  width: 1.8rem;
  height: 1.8rem;
  bottom: 0px;
  left: 4px;
}
.switch > input:checked + span::after {
  content: "";
  display: block;
  position: absolute;
  top: .45rem;
  right: .65rem;
  width: .3rem;
  height: 11px;
  border: solid var(--m3-scheme-primary);
  border-width: 0 .15em .15em 0;
  transform: rotate(45deg);
}

/* src/_tabs.css */
.tabs {
  display: flex;
  background: var(--m3-scheme-surface);
  border-bottom: 1px solid var(--m3-scheme-outline-variant);
}
.tabs.variable {
  padding: 0 1rem;
}
.tabs.variable > * {
  width: max-content;
  padding: .65rem 1rem;
}
.tabs > * {
  position: relative;
  font-size: .875rem;
  font-weight: 500;
  padding: .65rem 0;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: .1s;
}
.tabs i {
  display: block;
}
.tabs i * {
  font-size: 1.5rem;
}
.tabs > label:has(input:checked) {
  color: var(--m3-scheme-primary);
}
.tabs > label:has(input:checked):after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: .15rem;
  width: 3rem;
  margin: 0 auto;
  background: var(--m3-scheme-primary);
}

/* src/_tooltip.css */
[class*=tooltipped] {
  position: relative;
}
[class*=tooltipped]:hover::after {
  visibility: visible;
  opacity: 1;
}
[class*=tooltipped]:focus {
  user-select: none;
}
[class*=tooltipped]::after {
  --space: .35rem;
  content: attr(aria-label);
  background-color: var(--m3-scheme-inverse-surface);
  color: var(--m3-scheme-inverse-on-surface);
  text-align: left;
  position: absolute;
  visibility: hidden;
  padding: .4rem .6rem;
  border-radius: var(--m3-util-rounding-extra-small);
  font-size: .75rem;
  white-space: nowrap;
  opacity: 0;
  transition: .2s;
  z-index: 1000;
  pointer-events: none;
}
[class*=tooltipped].rich::after {
  white-space: normal;
  width: 14rem;
  padding: 1rem .85rem;
  font-size: .875rem;
  border-radius: var(--m3-util-rounding-small);
  box-shadow: var(--m3-util-elevation-3);
}
.tooltipped::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  margin-bottom: var(--space);
}
.tooltipped-bottom::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  margin-top: var(--space);
}
.tooltipped-left::after {
  top: 50%;
  right: 100%;
  transform: translateY(-50%) scale(0.8);
  margin-right: var(--space);
}
.tooltipped-right::after {
  top: 50%;
  left: 100%;
  transform: translateY(-50%) scale(0.8);
  margin-left: var(--space);
}
.tooltipped:hover::after,
.tooltipped-bottom:hover:after,
.tooltipped:focus::after,
.tooltipped-bottom:focus:after {
  transform: translateX(-50%) scale(1);
}
.tooltipped-left:hover::after,
.tooltipped-right:hover:after,
.tooltipped-left:focus::after,
.tooltipped-right:focus:after {
  transform: translateY(-50%) scale(1);
}

/* src/_typography.css */
:is(h1, h2, h3, h4, h5, h6),
[class^=display] {
  display: block;
  font-weight: 400;
  margin: .75rem 0;
  line-height: normal;
}
h1 {
  font-size: 3.5625rem;
}
h2 {
  font-size: 2.8125rem;
}
h3 {
  font-size: 2.25rem;
}
h4 {
  font-size: 2rem;
}
h5 {
  font-size: 1.75rem;
}
h6 {
  font-size: 1.5rem;
}
h1.small {
  font-size: 3.0625rem;
}
h2.small {
  font-size: 2.3125rem;
}
h3.small {
  font-size: 1.75rem;
}
h4.small {
  font-size: 1.5rem;
}
h5.small {
  font-size: 1.25rem;
}
h6.small {
  font-size: 1rem;
}
h1.display,
.display-xxxl {
  font-size: 4.25rem;
}
h2.display,
.display-xxl,
.text-xxxl {
  font-size: 3.75rem;
}
h3.display,
.display-xl,
.text-xxl {
  font-size: 3rem;
}
h4.display,
.display-l,
.text-xl {
  font-size: 2.125rem;
}
h5.display,
.display-base,
.text-lg {
  font-size: 1.25rem;
}
h6.display,
.display-sm,
.text-base {
  font-size: 1rem;
}
.text-sm {
  font-size: .875rem;
  line-height: 1.25rem;
  letter-spacing: .015625rem;
}
a:not(.btn, :has(*:not(span))) {
  color: inherit;
  background:
    linear-gradient(
      to top,
      var(--m3-scheme-primary) 50%,
      transparent 50%);
  background-size: 100% 200%;
  background-position: 0 7.5%;
  border-radius: var(--m3-util-rounding-extra-small);
  background-repeat: no-repeat;
  transition: .25s;
  will-change: background-position;
}
a:not(.btn, :has(*:not(span))):hover {
  color: var(--m3-scheme-on-primary);
  background-position: 0 100%;
}
code,
kbd {
  background: var(--m3-scheme-surface-variant);
  font-size: .9rem;
  border-radius: .25rem;
  letter-spacing: 0;
  padding: 0 .25rem;
}
kbd {
  border: 1px solid var(--m3-scheme-outline);
  border-bottom: 3px solid var(--m3-scheme-outline);
}
pre {
  letter-spacing: 0;
  overflow-x: auto;
}
i {
  line-height: 0;
}
hr {
  border: none;
  height: .025rem;
  background: var(--m3-scheme-outline-variant);
}
blockquote {
  background: var(--m3-scheme-surface-container-highest);
  border-radius: var(--m3-util-rounding-medium);
  border-left: .25rem dotted var(--m3-scheme-primary);
  margin: 0;
  padding: .75rem 1rem;
}
pre {
  background: var(--m3-scheme-surface-container-highest);
  padding: .75rem;
  border-radius: var(--m3-util-rounding-medium);
  margin: 0;
}
pre > code {
  padding: 0;
  font-size: 1rem;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table :is(th, td) {
  padding: .35rem;
  text-align: left;
}
table th:not(tfoot th) {
  border-bottom: 1px solid var(--m3-scheme-outline);
}
table tfoot th {
  border-top: 1px solid var(--m3-scheme-outline);
}

/* src/_util.css */
.primary {
  background: var(--m3-scheme-primary) !important;
  color: var(--m3-scheme-on-primary) !important;
}
.primary-container {
  background: var(--m3-scheme-primary-container) !important;
  color: var(--m3-scheme-on-primary-container) !important;
}
.secondary {
  background: var(--m3-scheme-secondary) !important;
  color: var(--m3-scheme-on-secondary) !important;
}
.secondary-container {
  background: var(--m3-scheme-secondary-container) !important;
  color: var(--m3-scheme-on-secondary-container) !important;
}
.tertiary {
  background: var(--m3-scheme-tertiary) !important;
  color: var(--m3-scheme-on-tertiary) !important;
}
.tertiary-container {
  background: var(--m3-scheme-tertiary-container) !important;
  color: var(--m3-scheme-on-tertiary-container) !important;
}
.background {
  background: var(--m3-scheme-background) !important;
  color: var(--m3-scheme-on-background) !important;
}
.surface {
  background: var(--m3-scheme-surface) !important;
  color: var(--m3-scheme-on-surface) !important;
}
.inverse-surface {
  background: var(--m3-scheme-inverse-surface) !important;
  color: var(--m3-scheme-inverse-on-surface) !important;
}
.surface-variant {
  background: var(--m3-scheme-surface-variant) !important;
  color: var(--m3-scheme-on-surface-variant) !important;
}
.error {
  background: var(--m3-scheme-error) !important;
  color: var(--m3-scheme-on-error) !important;
}
.error-container {
  background: var(--m3-scheme-error-container) !important;
  color: var(--m3-scheme-on-error-container) !important;
}
.accent-gradient {
  background-image:
    linear-gradient(
      to bottom,
      var(--m3-scheme-primary-container),
      var(--m3-scheme-tertiary-container)) !important;
  color: var(--m3-scheme-on-primary-container) !important;
}
[class*=elevate] {
  box-shadow: var(--elevate-size) !important;
  --elevate-size: var(--m3-util-elevation-2);
}
.elevate-none {
  --elevate-size: 0;
}
.elevate-auto {
  --elevate-size: auto;
}
.elevate-s {
  --elevate-size: var(--m3-util-elevation-1);
}
.elevate-l {
  --elevate-size: var(--m3-util-elevation-3);
}
.elevate-xl {
  --elevate-size: var(--m3-util-elevation-4);
}
.elevate-xxl {
  --elevate-size: var(--m3-util-elevation-5);
}
[class*=margin]:not(.margin-left, .margin-right, .margin-top, .margin-bottom, .margin-horiz, .margin-vert) {
  margin: var(--margin-size) !important;
}
[class*=margin] {
  --margin-size: 1rem;
}
.margin-none {
  --margin-size: 0;
}
.margin-auto {
  --margin-size: auto;
}
.margin-xs {
  --margin-size: 0.25rem;
}
.margin-s {
  --margin-size: 0.5rem;
}
.margin-l {
  --margin-size: 1.5rem;
}
.margin-xl {
  --margin-size: 2rem;
}
.margin-left,
.margin-horiz {
  margin-inline-start: var(--margin-size) !important;
}
.margin-right,
.margin-horiz {
  margin-inline-end: var(--margin-size) !important;
}
.margin-top,
.margin-vert {
  margin-block-start: var(--margin-size) !important;
}
.margin-bottom,
.margin-vert {
  margin-block-end: var(--margin-size) !important;
}
[class*=padding]:not(.padding-left, .padding-right, .padding-top, .padding-bottom, .padding-horiz, .padding-vert) {
  padding: var(--padding-size) !important;
}
[class*=padding] {
  --padding-size: 1rem;
}
.padding-none {
  --padding-size: 0;
}
.padding-auto {
  --padding-size: auto;
}
.padding-xs {
  --padding-size: 0.25rem;
}
.padding-s {
  --padding-size: 0.5rem;
}
.padding-l {
  --padding-size: 1.5rem;
}
.padding-xl {
  --padding-size: 2rem;
}
.padding-left,
.padding-horiz {
  padding-inline-start: var(--padding-size) !important;
}
.padding-right,
.padding-horiz {
  padding-inline-end: var(--padding-size) !important;
}
.padding-top,
.padding-vert {
  padding-block-start: var(--padding-size) !important;
}
.padding-bottom,
.padding-vert {
  padding-block-end: var(--padding-size) !important;
}
[class*=gap] {
  gap: var(--gap-size) !important;
  --gap-size: 1rem;
}
.gap-none {
  --gap-size: 0;
}
.gap-auto {
  --gap-size: auto;
}
.gap-xs {
  --gap-size: 0.25rem;
}
.gap-s {
  --gap-size: 0.5rem;
}
.gap-l {
  --gap-size: 1.5rem;
}
.gap-xl {
  --gap-size: 2rem;
}
[class*=round] {
  border-radius: var(--round-size) !important;
  --round-size: var(--m3-util-rounding-medium);
}
.round-none {
  --round-size: var(--m3-util-rounding-none);
}
.round-xs {
  --round-size: var(--m3-util-rounding-extra-small);
}
.round-s {
  --round-size: var(--m3-util-rounding-small);
}
.round-l {
  --round-size: var(--m3-util-rounding-large);
}
.round-xl {
  --round-size: var(--m3-util-rounding-extra-large);
}
.round-full {
  --round-size: var(--m3-util-rounding-full);
}
.hidden {
  display: none !important;
}
.block {
  display: block !important;
}
.inline-block {
  display: inline-block !important;
}
.inline {
  display: inline !important;
}
.flex {
  display: flex !important;
}
.inline-flex {
  display: inline-flex !important;
}
.flex-row {
  flex-direction: row !important;
}
.flex-col {
  flex-direction: column !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.flex-max,
.all-max * {
  display: flex !important;
  flex: 1 !important;
  flex-grow: 1 !important;
}
[class*=align] {
  align-content: var(--alignment) !important;
  align-items: var(--alignment) !important;
  align-self: var(--alignment) !important;
}
.align-start {
  --alignment: start;
}
.align-end {
  --alignment: end;
}
.align-center {
  --alignment: center;
}
.align-baseline {
  --alignment: baseline ;
}
.align-stretch {
  --alignment: stretch ;
}
[class*=justify] {
  justify-content: var(--justification) !important;
  justify-items: var(--justification) !important;
  justify-self: var(--justification) !important;
}
.justify-left {
  --justification: left;
}
.justify-center {
  --justification: center;
}
.justify-right {
  --justification: right;
}
.justify-between {
  --justification: space-between;
}
.justify-around {
  --justification: space-around;
}
[class*=text] {
  text-align: var(--text) !important;
}
.text-left {
  --text: left;
}
.text-center {
  --text: center;
}
.text-right {
  --text: right;
}
[class*=overflow] {
  overflow: var(--overflow) !important;
}
.overflow-auto {
  --overflow: auto;
}
.overflow-hidden {
  --overflow: hidden;
}
.overflow-visible {
  --overflow: visible;
}
.overflow-scroll {
  --overflow: scroll;
}
[class*=width] {
  width: var(--width) !important;
}
.width-min {
  --width: min-content;
}
.width-max {
  --width: max-content;
}
.width-fit {
  --width: fit-content;
}
.width-full {
  --width: 100%;
}
.scroll {
  overflow-x: auto !important;
}
.scroll > * {
  min-width: max-content;
}
input.base {
  appearance: none;
}

/* src/gmx.css */