html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 2;
  tab-size: 2;
}

body {
  margin: 0;
  background: var(--mmo-color-bg);
  color: var(--mmo-color-text);
  font-family: var(--mmo-font-ui);
  font-size: var(--mmo-text-md);
  line-height: var(--mmo-line-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--mmo-color-selection);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre {
  margin: 0;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--mmo-color-focus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

[hidden] {
  display: none !important;
}

:root {
  --mmo-color-bg: #F1F3F7;
  --mmo-color-surface: #FFFFFF;
  --mmo-color-surface-2: #F8F9FB;
  --mmo-color-surface-3: #E6E9F0;
  --mmo-color-overlay: rgba(13, 18, 27, 0.55);
  --mmo-color-line: #E6E9F0;
  --mmo-color-line-strong: #D6DBE5;
  --mmo-color-text: #161C27;
  --mmo-color-text-2: #4A5468;
  --mmo-color-text-3: #8C96AB;
  --mmo-color-text-on-brand: #FFFFFF;
  --mmo-color-text-on-ink: #FFFFFF;
  --mmo-color-brand: #2F62F0;
  --mmo-color-brand-ink: #1A3CAF;
  --mmo-color-brand-soft: #EEF3FF;
  --mmo-color-brand-line: #BBCDFF;
  --mmo-color-ok: #0F8A4D;
  --mmo-color-ok-soft: #E4F6EC;
  --mmo-color-warn: #B4700B;
  --mmo-color-warn-soft: #FDF2DD;
  --mmo-color-bad: #CE2C35;
  --mmo-color-bad-soft: #FDE9EA;
  --mmo-color-info: #1F4BD8;
  --mmo-color-info-soft: #EEF3FF;
  --mmo-color-ink: #0E1730;
  --mmo-color-ink-2: #16224A;
  --mmo-color-ink-text: #B7C4DE;
  --mmo-color-ink-line: rgba(255, 255, 255, 0.12);
  --mmo-color-focus: #2F62F0;
  --mmo-color-selection: #DCE6FF;
  --mmo-color-viz-1: #2F62F0;
  --mmo-color-viz-2: #0E9BA0;
  --mmo-color-viz-3: #7A5AF0;
  --mmo-color-viz-4: #E0891B;
  --mmo-color-viz-5: #CE2C35;
  --mmo-color-viz-6: #5E7A8C;
  --mmo-space-none: 0;
  --mmo-space-xxs: 2px;
  --mmo-space-xs: 4px;
  --mmo-space-sm: 8px;
  --mmo-space-md: 12px;
  --mmo-space-lg: 16px;
  --mmo-space-xl: 24px;
  --mmo-space-xxl: 32px;
  --mmo-space-xxxl: 48px;
  --mmo-space-huge: 72px;
  --mmo-radius-xs: 6px;
  --mmo-radius-sm: 8px;
  --mmo-radius-md: 12px;
  --mmo-radius-lg: 16px;
  --mmo-radius-xl: 22px;
  --mmo-radius-full: 999px;
  --mmo-text-xxs: 11px;
  --mmo-text-xs: 12px;
  --mmo-text-sm: 13px;
  --mmo-text-md: 15px;
  --mmo-text-lg: 17px;
  --mmo-text-xl: 20px;
  --mmo-text-xxl: 24px;
  --mmo-text-h3: 19px;
  --mmo-text-h2: 26px;
  --mmo-text-h1: 34px;
  --mmo-text-display: 48px;
  --mmo-font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mmo-font-display: "Archivo", "Public Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mmo-font-prose: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mmo-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mmo-weight-normal: 400;
  --mmo-weight-medium: 500;
  --mmo-weight-semi: 600;
  --mmo-weight-bold: 700;
  --mmo-line-tight: 1.15;
  --mmo-line-snug: 1.35;
  --mmo-line-normal: 1.55;
  --mmo-line-loose: 1.72;
  --mmo-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --mmo-shadow-md: 0 6px 16px -4px rgba(16, 24, 40, 0.1), 0 2px 6px -2px rgba(16, 24, 40, 0.06);
  --mmo-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.18), 0 6px 14px -6px rgba(16, 24, 40, 0.1);
  --mmo-motion-fast: 120ms;
  --mmo-motion-base: 180ms;
  --mmo-motion-slow: 260ms;
  --mmo-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mmo-z-base: 1;
  --mmo-z-sticky: 100;
  --mmo-z-drawer: 200;
  --mmo-z-overlay: 300;
  --mmo-z-popover: 400;
  --mmo-z-toast: 500;
  --mmo-layout-header: 53px;
  --mmo-layout-statusbar: 30px;
  --mmo-layout-sidebar: 232px;
  --mmo-layout-rail: 62px;
  --mmo-layout-panel: 340px;
  --mmo-layout-content: 1180px;
  --mmo-layout-prose: 68ch;
  --mmo-layout-control: 34px;
  --mmo-layout-control-sm: 28px;
  --mmo-layout-icon: 20px;
}

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button, input[type="button"], input[type="submit"], input[type="reset"] {
  appearance: none;
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-sm);
  background: transparent;
}

[data-theme="dark"] {
  color-scheme: dark;
  --mmo-color-bg: #0A0F18;
  --mmo-color-surface: #131A26;
  --mmo-color-surface-2: #0F1622;
  --mmo-color-surface-3: #1C2532;
  --mmo-color-overlay: rgba(2, 5, 12, 0.66);
  --mmo-color-line: #242E3E;
  --mmo-color-line-strong: #334054;
  --mmo-color-text: #E9EDF5;
  --mmo-color-text-2: #A7B1C4;
  --mmo-color-text-3: #6E7A90;
  --mmo-color-text-on-brand: #08101F;
  --mmo-color-brand: #6E95FF;
  --mmo-color-brand-ink: #A9C1FF;
  --mmo-color-brand-soft: #16213A;
  --mmo-color-brand-line: #2C3E6B;
  --mmo-color-ok: #4ADE80;
  --mmo-color-ok-soft: #10261A;
  --mmo-color-warn: #F5B546;
  --mmo-color-warn-soft: #2A2011;
  --mmo-color-bad: #FF8085;
  --mmo-color-bad-soft: #2C1416;
  --mmo-color-info: #6E95FF;
  --mmo-color-info-soft: #16213A;
  --mmo-color-ink-line: rgba(255, 255, 255, 0.14);
  --mmo-color-focus: #6E95FF;
  --mmo-color-selection: #1B2C52;
  --mmo-color-viz-1: #6E95FF;
  --mmo-color-viz-2: #2DD4BF;
  --mmo-color-viz-3: #A78BFA;
  --mmo-color-viz-4: #F5B546;
  --mmo-color-viz-5: #FF8085;
  --mmo-color-viz-6: #8FA3B5;
  --mmo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --mmo-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
  --mmo-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}

[data-theme="light"] {
  color-scheme: light;
}

:root {
  --mmo-color-primary: var(--mmo-color-brand);
  --mmo-color-secondary: var(--mmo-color-viz-2);
  --mmo-color-success: var(--mmo-color-ok);
  --mmo-color-warning: var(--mmo-color-warn);
  --mmo-color-error: var(--mmo-color-bad);
  --mmo-color-yellow: var(--mmo-color-warn);
  --mmo-color-background: var(--mmo-color-surface);
  --mmo-color-app-bg: var(--mmo-color-bg);
  --mmo-color-layout: var(--mmo-color-surface);
  --mmo-color-sidebar: var(--mmo-color-surface);
  --mmo-color-menu: var(--mmo-color-surface);
  --mmo-color-emphasis: var(--mmo-color-surface-3);
  --mmo-color-border: var(--mmo-color-line-strong);
  --mmo-color-shadow: var(--mmo-color-overlay);
  --mmo-color-title: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-text-3);
  --mmo-color-muted: var(--mmo-color-text-3);
  --mmo-color-grey: var(--mmo-color-text-3);
  --mmo-color-dark-grey: var(--mmo-color-text-2);
  --mmo-color-dark: var(--mmo-color-text);
  --mmo-color-light: var(--mmo-color-surface-2);
  --mmo-color-white: var(--mmo-color-surface);
  --mmo-color-demo: var(--mmo-color-viz-3);
  --mmo-color-event: var(--mmo-color-viz-2);
  --mmo-size-font: var(--mmo-text-md);
  --mmo-size-padding: var(--mmo-space-lg);
  --mmo-size-margin: var(--mmo-space-lg);
  --mmo-size-gap: var(--mmo-space-lg);
  --mmo-size-border: 4px;
  --mmo-size-radius: var(--mmo-radius-md);
  --mmo-size-icon: 20px;
  --mmo-size-input: var(--mmo-layout-control);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mmo-font-display);
  font-size: var(--mmo-text-h3);
  font-weight: var(--mmo-weight-semi);
  line-height: var(--mmo-line-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  color: var(--mmo-color-text);
}

h1 {
  font-size: var(--mmo-text-h1);
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--mmo-text-h2);
}

h3 {
  font-size: var(--mmo-text-h3);
}

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

h5 {
  font-size: var(--mmo-text-md);
}

h6 {
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mmo-color-text-3);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--mmo-color-brand);
  text-decoration: none;
  transition: color var(--mmo-motion-fast) var(--mmo-motion-ease);
}

a:hover {
  color: var(--mmo-color-brand-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:visited {
  color: var(--mmo-color-brand);
}

strong, b {
  font-weight: var(--mmo-weight-semi);
  color: var(--mmo-color-text);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-2);
}

mark {
  background: var(--mmo-color-warn-soft);
  color: var(--mmo-color-text);
  padding: 0 3px;
  border-radius: 3px;
}

sub, sup {
  font-size: 0.6em;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

hr {
  height: 1px;
  border: 0;
  background: var(--mmo-color-line);
  margin: var(--mmo-space-xl) 0;
}

blockquote {
  padding: var(--mmo-space-xs) 0 var(--mmo-space-xs) var(--mmo-space-lg);
  border-left: 3px solid var(--mmo-color-brand);
  color: var(--mmo-color-text);
  font-size: var(--mmo-text-lg);
}

code, kbd, samp, pre {
  font-family: var(--mmo-font-mono);
  font-size: 0.9em;
}

code {
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text);
  padding: 1.5px var(--mmo-space-xs);
  border-radius: var(--mmo-radius-xs);
}

pre {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--mmo-color-line-strong) transparent;
  padding: var(--mmo-space-lg);
  line-height: var(--mmo-line-snug);
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
}

kbd {
  border: 1px solid var(--mmo-color-line-strong);
  border-bottom-width: 2px;
  border-radius: var(--mmo-radius-xs);
  padding: 1px var(--mmo-space-xs);
  background: var(--mmo-color-surface);
  font-size: var(--mmo-text-xxs);
}

main {
  display: block;
}

article, section {
  min-width: 0;
}

figure figcaption {
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-3);
  margin-top: var(--mmo-space-sm);
}

details {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-sm);
  padding: var(--mmo-space-md) var(--mmo-space-lg);
}

details + details {
  margin-top: var(--mmo-space-sm);
}

summary {
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  font-weight: var(--mmo-weight-semi);
  list-style: none;
}

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

summary::after {
  content: "";
  float: right;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-right: 2px solid var(--mmo-color-text-3);
  border-bottom: 2px solid var(--mmo-color-text-3);
  transform: rotate(45deg);
  transition: transform var(--mmo-motion-fast) var(--mmo-motion-ease);
}

details[open] > summary::after {
  transform: rotate(-135deg);
}

details[open] > summary {
  margin-bottom: var(--mmo-space-md);
}

body::after {
  content: "phone";
  display: none;
}

.button, button, input[type="submit"], input[type="button"], input[type="reset"] {
  height: var(--mmo-layout-control);
  padding: 0 var(--mmo-space-md);
  border-radius: var(--mmo-radius-sm);
  font-family: inherit;
  font-size: var(--mmo-text-sm);
  line-height: 1;
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mmo-space-sm);
  border: 1px solid var(--mmo-color-line-strong);
  background: var(--mmo-color-surface);
  color: var(--mmo-color-text);
  font-weight: var(--mmo-weight-semi);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  border-color: var(--mmo-color-text-3);
  background: var(--mmo-color-surface-2);
  text-decoration: none;
}

.button:active, button:active {
  transform: translateY(0.5px);
}

.button[disabled], button[disabled], .button.disabled, input[type="submit"][disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  background: var(--mmo-color-surface-2);
  border-color: var(--mmo-color-line);
}

a.button {
  line-height: 1;
  color: var(--mmo-color-text);
}

a.button:hover {
  color: var(--mmo-color-text);
}

.button.primary, button.primary {
  background: var(--mmo-color-brand);
  border-color: var(--mmo-color-brand);
  color: var(--mmo-color-text-on-brand);
}

.button.primary:hover, button.primary:hover {
  background: var(--mmo-color-brand-ink);
  border-color: var(--mmo-color-brand-ink);
  color: var(--mmo-color-text-on-brand);
}

.button.success, button.success {
  background: var(--mmo-color-ok);
  border-color: var(--mmo-color-ok);
  color: var(--mmo-color-surface);
}

.button.success:hover, button.success:hover {
  background: color-mix(in oklab, var(--mmo-color-text) 18%, var(--mmo-color-ok));
  border-color: color-mix(in oklab, var(--mmo-color-text) 18%, var(--mmo-color-ok));
  color: var(--mmo-color-surface);
}

.button.warning, button.warning, .button.yellow, button.yellow {
  background: var(--mmo-color-warn);
  border-color: var(--mmo-color-warn);
  color: var(--mmo-color-surface);
}

.button.warning:hover, button.warning:hover, .button.yellow:hover, button.yellow:hover {
  background: color-mix(in oklab, var(--mmo-color-text) 18%, var(--mmo-color-warn));
  border-color: color-mix(in oklab, var(--mmo-color-text) 18%, var(--mmo-color-warn));
  color: var(--mmo-color-surface);
}

.button.error, button.error, button.delete {
  background: var(--mmo-color-bad);
  border-color: var(--mmo-color-bad);
  color: var(--mmo-color-surface);
}

.button.error:hover, button.error:hover, button.delete:hover {
  background: color-mix(in oklab, var(--mmo-color-text) 18%, var(--mmo-color-bad));
  border-color: color-mix(in oklab, var(--mmo-color-text) 18%, var(--mmo-color-bad));
  color: var(--mmo-color-surface);
}

.button.dark, button.dark, .button.dark-grey, button.dark-grey {
  background: var(--mmo-color-text);
  border-color: var(--mmo-color-text);
  color: var(--mmo-color-surface);
}

.button.dark:hover, button.dark:hover, .button.dark-grey:hover, button.dark-grey:hover {
  background: var(--mmo-color-text-2);
  border-color: var(--mmo-color-text-2);
  color: var(--mmo-color-surface);
}

.button.grey, button.grey {
  background: var(--mmo-color-text-3);
  border-color: var(--mmo-color-text-3);
  color: var(--mmo-color-surface);
}

.button.grey:hover, button.grey:hover {
  background: var(--mmo-color-text-2);
  border-color: var(--mmo-color-text-2);
  color: var(--mmo-color-surface);
}

.button.transparent, button.transparent, .button.borderless, button.borderless {
  background: transparent;
  border-color: transparent;
  color: var(--mmo-color-text-2);
}

.button.transparent:hover, button.transparent:hover, .button.borderless:hover, button.borderless:hover {
  background: var(--mmo-color-surface-3);
  border-color: transparent;
  color: var(--mmo-color-text);
}

.button.outline, button.outline {
  background: transparent;
  border-color: var(--mmo-color-brand);
  color: var(--mmo-color-brand);
}

.button.outline:hover, button.outline:hover {
  background: var(--mmo-color-brand-soft);
  border-color: var(--mmo-color-brand);
  color: var(--mmo-color-brand-ink);
}

.button.round, button.round, .button.square, button.square {
  width: var(--mmo-layout-control);
  height: var(--mmo-layout-control);
  padding: 0;
  flex: 0 0 auto;
}

.button.round, button.round {
  border-radius: var(--mmo-radius-full);
}

.button.square, button.square {
  border-radius: var(--mmo-radius-sm);
}

.button.sm, button.sm {
  height: var(--mmo-layout-control-sm);
  padding: 0 var(--mmo-space-sm);
  font-size: var(--mmo-text-xs);
}

.button.sm.round, button.sm.round, .button.sm.square, button.sm.square {
  width: var(--mmo-layout-control-sm);
  padding: 0;
}

.button.lg, button.lg {
  height: 44px;
  padding: 0 var(--mmo-space-xl);
  font-size: var(--mmo-text-md);
  border-radius: var(--mmo-radius-md);
}

.button.block, button.block {
  display: flex;
  width: 100%;
}

.button.badge, button.badge {
  position: relative;
}

.button.badge[data-count]::after, button.badge[data-count]::after {
  content: attr(data-count);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--mmo-radius-full);
  background: var(--mmo-color-bad);
  color: var(--mmo-color-surface);
  font-size: 10px;
  font-weight: var(--mmo-weight-bold);
  line-height: 17px;
  text-align: center;
}

.button.informative, button.informative {
  background: transparent;
  border-color: transparent;
  color: var(--mmo-color-brand);
  padding: 0;
  height: auto;
}

.button.informative:hover, button.informative:hover {
  background: transparent;
  color: var(--mmo-color-brand-ink);
  text-decoration: underline;
}

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

.button-group > .button, .button-group > button {
  border-radius: 0;
  margin-left: -1px;
}

.button-group > .button:first-child, .button-group > button:first-child {
  border-radius: var(--mmo-radius-sm) 0 0 var(--mmo-radius-sm);
  margin-left: 0;
}

.button-group > .button:last-child, .button-group > button:last-child {
  border-radius: 0 var(--mmo-radius-sm) var(--mmo-radius-sm) 0;
}

.button-group > .button:hover, .button-group > button:hover, .button-group > .button:focus-visible, .button-group > button:focus-visible {
  z-index: 1;
}

label {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-xs);
  min-width: 0;
}

.label {
  font-size: var(--mmo-text-xs);
  font-weight: var(--mmo-weight-medium);
  color: var(--mmo-color-text-2);
  line-height: var(--mmo-line-snug);
}

.label.inline {
  flex-direction: row;
  align-items: center;
}

label:has(> input[type="checkbox"], > input[type="radio"]) {
  flex-direction: row;
  align-items: center;
  gap: var(--mmo-space-sm);
}

.input {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  min-height: var(--mmo-layout-control);
  padding: 0 var(--mmo-space-md);
  border: 1px solid var(--mmo-color-line-strong);
  border-radius: var(--mmo-radius-sm);
  background: var(--mmo-color-surface);
  color: var(--mmo-color-text);
  transition: border-color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  min-width: 0;
}

.input:hover {
  border-color: var(--mmo-color-text-3);
}

.input:focus-within {
  border-color: var(--mmo-color-brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mmo-color-brand) 22%, transparent);
}

.input > mmo-icon, .input > svg {
  color: var(--mmo-color-text-3);
  flex: 0 0 auto;
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"]), select, textarea {
  width: 100%;
  min-height: var(--mmo-layout-control);
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  border: 1px solid var(--mmo-color-line-strong);
  border-radius: var(--mmo-radius-sm);
  background: var(--mmo-color-surface);
  color: var(--mmo-color-text);
  font-size: var(--mmo-text-sm);
  transition: border-color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
}

input:hover:not([disabled], [readonly]), select:hover:not([disabled]), textarea:hover:not([disabled], [readonly]) {
  border-color: var(--mmo-color-text-3);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--mmo-color-brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mmo-color-brand) 22%, transparent);
}

input::placeholder, textarea::placeholder {
  color: var(--mmo-color-text-3);
}

input[disabled], select[disabled], textarea[disabled], input[readonly], textarea[readonly], .input:has(input[readonly]), .readonly {
  background: var(--mmo-color-surface-2);
  color: var(--mmo-color-text-2);
  cursor: not-allowed;
}

textarea {
  min-height: 84px;
  resize: vertical;
  line-height: var(--mmo-line-normal);
}

select:not([multiple], [size]) {
  appearance: none;
  padding-right: var(--mmo-space-xxl);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

select[multiple], select[size] {
  padding: var(--mmo-space-xs);
  cursor: default;
}

select[multiple] option, select[size] option {
  padding: var(--mmo-space-xxs) var(--mmo-space-xs);
  border-radius: var(--mmo-radius-xs);
}

input[type="date"], input[type="time"], input[type="datetime-local"], input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

input[type="number"] {
  text-align: right;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mmo-color-text);
  box-shadow: 0 0 0 1000px var(--mmo-color-surface) inset;
}

.input > input, .input > select, .input > textarea {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: none;
  padding: var(--mmo-space-sm) 0;
  color: inherit;
  font-size: var(--mmo-text-sm);
}

.input > input:hover, .input > select:hover, .input > textarea:hover, .input > input:focus, .input > select:focus, .input > textarea:focus {
  border-color: transparent;
  box-shadow: none;
}

.input > select:not([multiple], [size]) {
  padding-right: 0;
  background-image: none;
}

.input > input[readonly], .input > textarea[readonly], .input > input[disabled], .input > select[disabled], .input > textarea[disabled] {
  background: none;
}

input.space-chars {
  font-family: var(--mmo-font-mono);
  letter-spacing: 0.22em;
}

input[type="checkbox"], input[type="radio"] {
  appearance: none;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 0;
  border: 1.5px solid var(--mmo-color-line-strong);
  background: var(--mmo-color-surface);
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease);
}

input[type="checkbox"] {
  border-radius: 5px;
}

input[type="radio"] {
  border-radius: var(--mmo-radius-full);
}

input[type="checkbox"]:hover, input[type="radio"]:hover {
  border-color: var(--mmo-color-brand);
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--mmo-color-brand);
  border-color: var(--mmo-color-brand);
}

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='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size: 100%;
}

input[type="radio"]:checked {
  box-shadow: inset 0 0 0 3.5px var(--mmo-color-surface);
}

input[type="checkbox"][disabled], input[type="radio"][disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

input[type="checkbox"].slider {
  width: 34px;
  height: 20px;
  border-radius: var(--mmo-radius-full);
  background: var(--mmo-color-line-strong);
  border-color: var(--mmo-color-line-strong);
  position: relative;
}

input[type="checkbox"].slider::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 14px;
  height: 14px;
  border-radius: var(--mmo-radius-full);
  background: var(--mmo-color-surface);
  transition: transform var(--mmo-motion-base) var(--mmo-motion-ease);
}

input[type="checkbox"].slider:checked {
  background-image: none;
}

input[type="checkbox"].slider:checked::after {
  transform: translateX(14px);
}

input[type="checkbox"].slider.compact {
  width: 30px;
  height: 18px;
}

input[type="checkbox"].slider.compact::after {
  width: 12px;
  height: 12px;
}

input[type="checkbox"].slider.compact:checked::after {
  transform: translateX(12px);
}

.radio-tabs {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--mmo-color-surface-3);
  border-radius: var(--mmo-radius-sm);
}

.radio-tabs label {
  flex-direction: row;
  align-items: center;
  gap: var(--mmo-space-xs);
  padding: var(--mmo-space-xs) var(--mmo-space-md);
  border-radius: var(--mmo-radius-xs);
  font-size: var(--mmo-text-sm);
  font-weight: var(--mmo-weight-medium);
  color: var(--mmo-color-text-2);
  cursor: pointer;
}

.radio-tabs label:hover {
  color: var(--mmo-color-text);
}

.radio-tabs input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.radio-tabs label:has(input:checked) {
  background: var(--mmo-color-surface);
  color: var(--mmo-color-text);
  font-weight: var(--mmo-weight-semi);
  box-shadow: var(--mmo-shadow-sm);
}

input[type="range"] {
  appearance: none;
  width: 100%;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--mmo-radius-full);
  background: var(--mmo-color-surface-3);
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: var(--mmo-radius-full);
  background: var(--mmo-color-brand);
  border: 2px solid var(--mmo-color-surface);
  box-shadow: var(--mmo-shadow-sm);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--mmo-radius-full);
  background: var(--mmo-color-brand);
  border: 2px solid var(--mmo-color-surface);
}

input[type="color"] {
  width: var(--mmo-layout-control);
  height: var(--mmo-layout-control);
  padding: 3px;
  border: 1px solid var(--mmo-color-line-strong);
  border-radius: var(--mmo-radius-sm);
  background: var(--mmo-color-surface);
  cursor: pointer;
}

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

input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: var(--mmo-radius-xs);
}

input[type="file"] {
  padding: 0;
  border: 1px dashed var(--mmo-color-line-strong);
  background: var(--mmo-color-surface-2);
  border-radius: var(--mmo-radius-sm);
  font-size: var(--mmo-text-sm);
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  height: var(--mmo-layout-control-sm);
  padding: 0 var(--mmo-space-md);
  border-radius: var(--mmo-radius-sm);
  font-family: inherit;
  font-size: var(--mmo-text-sm);
  line-height: 1;
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  margin: 3px var(--mmo-space-sm) 3px 3px;
  border: 1px solid var(--mmo-color-line-strong);
  background: var(--mmo-color-surface);
  color: var(--mmo-color-text);
  font-weight: var(--mmo-weight-semi);
}

input[type="file"]:hover {
  border-color: var(--mmo-color-brand);
}

.invalid, .invalid .input, .invalid input, input.invalid, input:user-invalid {
  border-color: var(--mmo-color-bad);
}

.required, .required .input {
  border-color: var(--mmo-color-warn);
}

.valid, .valid .input, input.valid {
  border-color: var(--mmo-color-ok);
}

.invalid:focus-within, .invalid input:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mmo-color-bad) 22%, transparent);
}

.helper, .error-message {
  font-size: var(--mmo-text-xs);
  line-height: var(--mmo-line-snug);
  color: var(--mmo-color-text-3);
}

.error-message {
  color: var(--mmo-color-bad);
}

.underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

form {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-lg);
  min-width: 0;
}

fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-lg);
  min-width: 0;
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  padding: var(--mmo-space-xl);
  margin: 0;
  min-width: 0;
}

fieldset > legend {
  font-family: var(--mmo-font-display);
  font-size: var(--mmo-text-lg);
  font-weight: var(--mmo-weight-semi);
  line-height: var(--mmo-line-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  padding: 0 var(--mmo-space-sm);
  margin-left: calc(0px - var(--mmo-space-sm));
  color: var(--mmo-color-text);
}

fieldset.borderless, fieldset.block {
  border: 0;
  padding: 0;
  background: none;
}

fieldset.bordered {
  border-color: var(--mmo-color-line-strong);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--mmo-space-md) var(--mmo-space-lg);
  align-items: end;
}

.field-inline {
  display: grid;
  grid-template-columns: minmax(110px, 30%) 1fr;
  gap: var(--mmo-space-sm) var(--mmo-space-md);
  align-items: center;
}

.field-inline > .label {
  text-align: right;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mmo-text-sm);
  text-align: left;
}

table caption {
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mmo-color-text-3);
  text-align: left;
  padding-bottom: var(--mmo-space-sm);
}

table th {
  font-weight: var(--mmo-weight-semi);
  color: var(--mmo-color-text-2);
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  vertical-align: bottom;
}

table td {
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  border-top: 1px solid var(--mmo-color-line);
  vertical-align: middle;
}

table thead th {
  border-bottom: 1px solid var(--mmo-color-line-strong);
}

table tbody tr:first-child td {
  border-top: 0;
}

table tfoot td {
  border-top: 1px solid var(--mmo-color-line-strong);
  font-weight: var(--mmo-weight-semi);
}

table tr.category th, table tr.category td {
  background: var(--mmo-color-surface-2);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mmo-color-text-3);
}

table.minimal th, table.minimal td {
  padding: var(--mmo-space-xs) var(--mmo-space-sm);
}

table.minimal td {
  border-top: 0;
}

table.compact th, table.compact td {
  padding: var(--mmo-space-xs) var(--mmo-space-sm);
  font-size: var(--mmo-text-xs);
}

table.bordered {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  overflow: hidden;
}

table.bordered th, table.bordered td {
  border-right: 1px solid var(--mmo-color-line);
}

table.bordered th:last-child, table.bordered td:last-child {
  border-right: 0;
}

table.data {
  font-size: var(--mmo-text-sm);
  background: var(--mmo-color-surface);
}

table.data thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--mmo-color-surface-2);
  border-bottom: 1px solid var(--mmo-color-line);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mmo-color-text-3);
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  white-space: nowrap;
}

table.data td {
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  border-top: 1px solid var(--mmo-color-line);
  white-space: nowrap;
}

table.data tbody tr {
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease);
}

table.data tbody tr:hover {
  background: var(--mmo-color-surface-2);
}

table.data tbody tr[aria-selected="true"], table.data tbody tr.selected {
  background: var(--mmo-color-brand-soft);
}

table.data th[data-sort] {
  cursor: pointer;
  user-select: none;
}

table.data th[data-sort]:hover {
  color: var(--mmo-color-text);
}

table.data th[data-sort="asc"]::after, table.data th[data-sort="desc"]::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--mmo-space-xs);
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

table.data th[data-sort="asc"]::after {
  border-bottom: 5px solid var(--mmo-color-brand);
}

table.data th[data-sort="desc"]::after {
  border-top: 5px solid var(--mmo-color-brand);
}

table.data td.number, table.data th.number, table.data td.currency {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-family: var(--mmo-font-mono);
  font-size: var(--mmo-text-xs);
}

table.data td:has(> input[type="checkbox"]), table.data th:has(> input[type="checkbox"]) {
  width: 34px;
}

table.data td.actions, table.data th.actions {
  width: 40px;
  text-align: right;
}

table.data .who {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  min-width: 0;
}

table.data .who .sub {
  display: block;
  font-size: var(--mmo-text-xxs);
  color: var(--mmo-color-text-3);
}

table.data.compact td, table.data.compact thead th {
  padding: var(--mmo-space-xs) var(--mmo-space-sm);
}

.table-wrap {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--mmo-color-line-strong) transparent;
  max-width: 100%;
}

.table-tools {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  flex-wrap: wrap;
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  border-bottom: 1px solid var(--mmo-color-line);
}

.table-foot {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-md);
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-2);
  border-top: 1px solid var(--mmo-color-line);
}

.table-empty {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-md);
  min-width: 0;
  align-items: center;
  text-align: center;
  padding: var(--mmo-space-huge) var(--mmo-space-xl);
  color: var(--mmo-color-text-2);
}

.table-empty .title {
  font-family: var(--mmo-font-display);
  font-size: var(--mmo-text-lg);
  font-weight: var(--mmo-weight-semi);
  line-height: var(--mmo-line-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

ul, ol {
  padding-left: var(--mmo-space-xl);
}

li + li {
  margin-top: var(--mmo-space-xs);
}

li::marker {
  color: var(--mmo-color-text-3);
}

dl {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-sm);
  min-width: 0;
}

dt {
  font-weight: var(--mmo-weight-semi);
}

dd {
  margin: 0;
  color: var(--mmo-color-text-2);
}

dl.list {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 0;
  font-size: var(--mmo-text-sm);
}

dl.list > dt, dl.list > dd {
  padding: var(--mmo-space-sm) 0;
  border-top: 1px solid var(--mmo-color-line);
}

dl.list > dt {
  color: var(--mmo-color-text-3);
  font-weight: var(--mmo-weight-medium);
  padding-right: var(--mmo-space-lg);
}

dl.list > dd {
  text-align: right;
}

dl.list > dt:first-of-type, dl.list > dt:first-of-type + dd {
  border-top: 0;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.list > * {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-md);
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  margin: 0;
  border-bottom: 1px solid var(--mmo-color-line);
  min-width: 0;
}

.list > *:last-child {
  border-bottom: 0;
}

.list > *:hover {
  background: var(--mmo-color-surface-2);
}

.list > .selected {
  background: var(--mmo-color-brand-soft);
  color: var(--mmo-color-brand-ink);
}

.list > * > a {
  flex: 1 1 auto;
  color: inherit;
  min-width: 0;
}

.list.bordered {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  overflow: hidden;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu a, .menu > li > span, .menu .menu-item {
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  display: flex;
  align-items: center;
  gap: var(--mmo-space-md);
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  border-radius: var(--mmo-radius-sm);
  color: var(--mmo-color-text-2);
  font-weight: var(--mmo-weight-medium);
  font-size: var(--mmo-text-sm);
  text-decoration: none;
  min-width: 0;
}

.menu a:hover, .menu .menu-item:hover {
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text);
  text-decoration: none;
}

.menu a[aria-current], .menu a.selected, .menu .menu-item.selected {
  background: var(--mmo-color-brand-soft);
  color: var(--mmo-color-brand-ink);
  font-weight: var(--mmo-weight-semi);
}

.menu .menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.menu .count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-left: auto;
  padding: 0 var(--mmo-space-sm);
  border-radius: var(--mmo-radius-full);
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-semi);
}

.menu a[aria-current] .count {
  background: var(--mmo-color-brand);
  color: var(--mmo-color-text-on-brand);
}

.menu .menu-group {
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mmo-color-text-3);
  padding: var(--mmo-space-lg) var(--mmo-space-md) var(--mmo-space-xs);
}

.tree, .tree ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tree ul {
  padding-left: var(--mmo-space-lg);
  border-left: 1px solid var(--mmo-color-line);
  margin-left: var(--mmo-space-md);
}

.tree li {
  margin-top: 1px;
}

.tree summary, .tree li > a, .tree li > span {
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  padding: var(--mmo-space-xs) var(--mmo-space-sm);
  border-radius: var(--mmo-radius-xs);
  font-size: var(--mmo-text-sm);
  color: var(--mmo-color-text-2);
}

.tree summary:hover, .tree li > a:hover {
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text);
}

.tree .selected > summary, .tree li > a.selected {
  background: var(--mmo-color-brand-soft);
  color: var(--mmo-color-brand-ink);
}

.tree details {
  border: 0;
  padding: 0;
  background: none;
}

.tree summary::after {
  display: none;
}

.tree summary::before {
  content: "";
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-left: 5px solid var(--mmo-color-text-3);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--mmo-motion-fast) var(--mmo-motion-ease);
}

.tree details[open] > summary::before {
  transform: rotate(90deg);
}

.tree details[open] > summary {
  margin-bottom: 0;
}

.toc ul, nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc {
  border-left: 2px solid var(--mmo-color-line);
  font-size: var(--mmo-text-sm);
}

.toc a {
  display: block;
  padding: var(--mmo-space-xs) 0 var(--mmo-space-xs) var(--mmo-space-md);
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--mmo-color-text-2);
}

.toc a:hover {
  color: var(--mmo-color-text);
  text-decoration: none;
}

.toc a[aria-current], .toc a.active {
  color: var(--mmo-color-brand);
  border-left-color: var(--mmo-color-brand);
  font-weight: var(--mmo-weight-semi);
}

.toc .level-3 a {
  padding-left: var(--mmo-space-xl);
  font-size: var(--mmo-text-xs);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  font-size: var(--mmo-text-sm);
  color: var(--mmo-color-text-3);
  min-width: 0;
}

.breadcrumbs a {
  color: var(--mmo-color-text-3);
}

.breadcrumbs a:hover {
  color: var(--mmo-color-text);
  text-decoration: none;
}

.breadcrumbs > *:last-child {
  color: var(--mmo-color-text);
  font-weight: var(--mmo-weight-semi);
}

.breadcrumbs .sep {
  color: var(--mmo-color-line-strong);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mmo-space-xs);
}

.pager a, .pager button {
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  min-width: var(--mmo-layout-control);
  height: var(--mmo-layout-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--mmo-space-sm);
  border: 1px solid transparent;
  border-radius: var(--mmo-radius-sm);
  background: none;
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-sm);
}

.pager a:hover, .pager button:hover {
  border-color: var(--mmo-color-line-strong);
  color: var(--mmo-color-text);
  text-decoration: none;
}

.pager a[aria-current] {
  background: var(--mmo-color-text);
  color: var(--mmo-color-surface);
  font-weight: var(--mmo-weight-semi);
}

.pager [disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.card {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-md);
  min-width: 0;
  padding: var(--mmo-space-lg);
  min-width: 0;
}

.card > header {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  min-width: 0;
}

.card > header h1, .card > header h2, .card > header h3 {
  font-family: var(--mmo-font-display);
  font-size: var(--mmo-text-h3);
  font-weight: var(--mmo-weight-semi);
  line-height: var(--mmo-line-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  flex: 1 1 auto;
}

.card > footer {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  min-width: 0;
  margin-top: auto;
  padding-top: var(--mmo-space-sm);
  flex-wrap: wrap;
}

.card.link {
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
}

.card.link:hover {
  border-color: var(--mmo-color-line-strong);
  box-shadow: var(--mmo-shadow-md);
}

.card.flat {
  border: 0;
  background: var(--mmo-color-surface-2);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mmo-space-lg);
}

.panel {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel > header, .panel-head {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-md);
  padding: var(--mmo-space-md) var(--mmo-space-lg);
  border-bottom: 1px solid var(--mmo-color-line);
  min-height: 46px;
}

.panel > header h1, .panel > header h2, .panel > header h3, .panel-head h3 {
  font-family: var(--mmo-font-display);
  font-size: var(--mmo-text-lg);
  font-weight: var(--mmo-weight-semi);
  line-height: var(--mmo-line-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  flex: 1 1 auto;
}

.panel > footer, .panel-foot {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  padding: var(--mmo-space-sm) var(--mmo-space-lg);
  border-top: 1px solid var(--mmo-color-line);
}

.panel-body {
  padding: var(--mmo-space-lg);
  min-width: 0;
}

.widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--mmo-space-lg);
}

.widget {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-sm);
  min-width: 0;
  padding: var(--mmo-space-lg);
  min-width: 0;
}

.widget > header {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  min-width: 0;
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-xs);
}

.widget .value {
  font-family: var(--mmo-font-display);
  font-size: var(--mmo-text-h2);
  font-weight: var(--mmo-weight-semi);
  line-height: var(--mmo-line-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.widget .delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--mmo-text-xs);
  font-weight: var(--mmo-weight-semi);
}

.widget .delta.up {
  color: var(--mmo-color-ok);
}

.widget .delta.down {
  color: var(--mmo-color-bad);
}

.widget > footer {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  min-width: 0;
  justify-content: space-between;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--mmo-color-surface-3);
  border-radius: var(--mmo-radius-sm);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

.tab, .tabs > a, .tabs > button {
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  position: relative;
  padding: var(--mmo-space-xs) var(--mmo-space-md);
  border: 0;
  border-radius: var(--mmo-radius-xs);
  background: none;
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-sm);
  font-weight: var(--mmo-weight-medium);
  white-space: nowrap;
}

.tab:hover, .tabs > a:hover, .tabs > button:hover {
  color: var(--mmo-color-text);
  text-decoration: none;
}

.tab.active, .tabs > a.active, .tabs > button.active {
  background: var(--mmo-color-brand);
  color: var(--mmo-color-text-on-brand);
  box-shadow: var(--mmo-shadow-sm);
}

.tab:hover, .tabs > a:hover {
  color: var(--mmo-color-text);
  text-decoration: none;
}

.tab.active, .tab[aria-selected="true"], .tabs > a[aria-current] {
  background: var(--mmo-color-brand);
  color: var(--mmo-color-text-on-brand);
  box-shadow: var(--mmo-shadow-sm);
}

.tabs.line {
  gap: var(--mmo-space-lg);
  padding: 0;
  background: none;
  border-radius: 0;
  border-bottom: 1px solid var(--mmo-color-line);
  width: auto;
}

.tabs.line .tab, .tabs.line > a, .tabs.line > button {
  padding: var(--mmo-space-sm) 0;
  border-radius: 0;
}

.tabs.line .tab.active, .tabs.line .tab[aria-selected="true"], .tabs.line > a[aria-current] {
  background: none;
  box-shadow: none;
  color: var(--mmo-color-text);
  font-weight: var(--mmo-weight-semi);
}

.tabs.line .tab.active::after, .tabs.line .tab[aria-selected="true"]::after, .tabs.line > a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--mmo-color-brand);
  border-radius: 2px 2px 0 0;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  flex-wrap: wrap;
  padding: var(--mmo-space-sm);
  min-width: 0;
}

.toolbar.bordered {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-sm);
}

.toolbar .spacer {
  margin-left: auto;
}

.toolbar .sep {
  width: 1px;
  height: 18px;
  background: var(--mmo-color-line-strong);
  flex: 0 0 auto;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--mmo-space-xs);
  padding: 2px var(--mmo-space-sm);
  border-radius: var(--mmo-radius-full);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-semi);
  line-height: 1.5;
  white-space: nowrap;
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text-2);
}

.status-tag, .status {
  display: inline-flex;
  align-items: center;
  gap: var(--mmo-space-xs);
  padding: 2px var(--mmo-space-sm);
  border-radius: var(--mmo-radius-full);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-semi);
  line-height: 1.5;
  white-space: nowrap;
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text-2);
}

.status-tag::before, .status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--mmo-radius-full);
  background: currentColor;
  flex: 0 0 auto;
}

.status-tag:empty, .status:empty {
  display: none;
}

.status.success, .status-tag.success {
  background: var(--mmo-color-ok-soft);
  color: var(--mmo-color-ok);
}

.status.warning, .status-tag.warning {
  background: var(--mmo-color-warn-soft);
  color: var(--mmo-color-warn);
}

.status.error, .status-tag.error {
  background: var(--mmo-color-bad-soft);
  color: var(--mmo-color-bad);
}

.status.info, .status-tag.info {
  background: var(--mmo-color-info-soft);
  color: var(--mmo-color-info);
}

.status.big {
  font-size: var(--mmo-text-sm);
  padding: var(--mmo-space-xs) var(--mmo-space-md);
}

.callout {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-sm);
  min-width: 0;
  padding: var(--mmo-space-lg);
  border: 1px solid var(--mmo-color-line);
  border-left: 3px solid var(--mmo-color-text-3);
  border-radius: var(--mmo-radius-sm);
  background: var(--mmo-color-surface-2);
  font-size: var(--mmo-text-sm);
}

.callout > .title {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  min-width: 0;
  font-weight: var(--mmo-weight-semi);
}

.callout.info {
  border-left-color: var(--mmo-color-info);
  background: var(--mmo-color-info-soft);
}

.callout.success {
  border-left-color: var(--mmo-color-ok);
  background: var(--mmo-color-ok-soft);
}

.callout.warning {
  border-left-color: var(--mmo-color-warn);
  background: var(--mmo-color-warn-soft);
}

.callout.error {
  border-left-color: var(--mmo-color-bad);
  background: var(--mmo-color-bad-soft);
}

.popover, .dropdown-menu {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  box-shadow: var(--mmo-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  z-index: var(--mmo-z-popover);
  padding: var(--mmo-space-xs);
  min-width: 180px;
}

.popover a, .dropdown-menu a, .dropdown-menu button {
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  border-radius: var(--mmo-radius-xs);
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-sm);
  text-align: left;
  width: 100%;
}

.popover a:hover, .dropdown-menu a:hover, .dropdown-menu button:hover {
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text);
  text-decoration: none;
}

.dropdown-menu .sep {
  height: 1px;
  background: var(--mmo-color-line);
  margin: var(--mmo-space-xs) 0;
}

.drawer {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(var(--mmo-layout-panel), 100%);
  z-index: var(--mmo-z-drawer);
  background: var(--mmo-color-surface);
  border-left: 1px solid var(--mmo-color-line);
  box-shadow: var(--mmo-shadow-lg);
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--mmo-z-overlay);
  background: var(--mmo-color-overlay);
  backdrop-filter: blur(2px);
}

dialog, .modal {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-lg);
  box-shadow: var(--mmo-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-lg);
  min-width: 0;
  padding: var(--mmo-space-xl);
  max-width: min(560px, calc(100vw - var(--mmo-space-xxl)));
  color: var(--mmo-color-text);
}

dialog::backdrop {
  background: var(--mmo-color-overlay);
}

.toasts {
  position: fixed;
  right: var(--mmo-space-lg);
  bottom: var(--mmo-space-lg);
  z-index: var(--mmo-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-sm);
  max-width: calc(100vw - var(--mmo-space-xxl));
}

.toast {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  box-shadow: var(--mmo-shadow-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--mmo-space-md);
  padding: var(--mmo-space-md);
  border-left: 3px solid var(--mmo-color-text-3);
  width: 300px;
  max-width: 100%;
  font-size: var(--mmo-text-sm);
}

.toast .title {
  font-weight: var(--mmo-weight-semi);
  display: block;
}

.toast .body {
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-xs);
}

.toast.success {
  border-left-color: var(--mmo-color-ok);
}

.toast.warning {
  border-left-color: var(--mmo-color-warn);
}

.toast.error {
  border-left-color: var(--mmo-color-bad);
}

.toast.info {
  border-left-color: var(--mmo-color-info);
}

.tooltip {
  position: absolute;
  z-index: var(--mmo-z-popover);
  padding: var(--mmo-space-xs) var(--mmo-space-sm);
  border-radius: var(--mmo-radius-xs);
  background: var(--mmo-color-text);
  color: var(--mmo-color-surface);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-medium);
  white-space: nowrap;
  box-shadow: var(--mmo-shadow-md);
  pointer-events: none;
}

.loading, .skeleton {
  background: linear-gradient(90deg, var(--mmo-color-surface-3) 0%, var(--mmo-color-surface-2) 50%, var(--mmo-color-surface-3) 100%);
  background-size: 200% 100%;
  animation: mmo-shimmer 1.3s linear infinite;
  border-radius: var(--mmo-radius-xs);
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--mmo-color-line-strong);
  border-top-color: var(--mmo-color-brand);
  border-radius: var(--mmo-radius-full);
  animation: mmo-spin 0.7s linear infinite;
}

.aside {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-lg);
  min-width: 0;
  position: sticky;
  top: var(--mmo-space-lg);
  align-self: start;
}

.highlight-target, :target {
  animation: mmo-highlight 1.6s var(--mmo-motion-ease);
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: var(--mmo-radius-full);
  background: var(--mmo-color-brand-soft);
  color: var(--mmo-color-brand-ink);
  font-family: var(--mmo-font-display);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.lg {
  width: 40px;
  height: 40px;
  font-size: var(--mmo-text-sm);
}

.avatar.sm {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

.prose {
  font-family: var(--mmo-font-prose);
  font-size: var(--mmo-text-lg);
  line-height: var(--mmo-line-loose);
  color: var(--mmo-color-text);
  max-width: var(--mmo-layout-prose);
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose h2, .prose h3, .prose h4 {
  font-family: var(--mmo-font-display);
  color: var(--mmo-color-text);
  letter-spacing: -0.02em;
  line-height: var(--mmo-line-tight);
}

.prose h2 {
  font-size: var(--mmo-text-h2);
  margin-top: 1.9em;
}

.prose h3 {
  font-size: var(--mmo-text-h3);
  margin-top: 1.6em;
}

.prose h4 {
  font-size: var(--mmo-text-lg);
  margin-top: 1.4em;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose ul, .prose ol {
  padding-left: 1.2em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose li::marker {
  color: var(--mmo-color-text-3);
}

.prose blockquote {
  font-size: var(--mmo-text-xl);
  line-height: var(--mmo-line-snug);
  font-weight: var(--mmo-weight-semi);
  padding-left: var(--mmo-space-xl);
}

.prose figure {
  margin: 0;
}

.prose figure img {
  border-radius: var(--mmo-radius-md);
  width: 100%;
}

.prose figcaption {
  font-family: var(--mmo-font-ui);
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-3);
  margin-top: var(--mmo-space-sm);
}

.prose code {
  font-size: 0.85em;
}

.prose pre {
  font-family: var(--mmo-font-mono);
  font-size: var(--mmo-text-sm);
}

.prose table {
  font-family: var(--mmo-font-ui);
  font-size: var(--mmo-text-sm);
}

.prose .callout {
  font-family: var(--mmo-font-ui);
  font-size: var(--mmo-text-sm);
  line-height: var(--mmo-line-normal);
}

.prose > p:first-child {
  font-size: var(--mmo-text-xl);
  color: var(--mmo-color-text-2);
  line-height: var(--mmo-line-snug);
}

.prose .sources {
  font-family: var(--mmo-font-ui);
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-3);
  border-top: 1px solid var(--mmo-color-line);
  padding-top: var(--mmo-space-md);
  margin-top: var(--mmo-space-xxl);
}

.hero {
  position: relative;
  padding: var(--mmo-space-huge) var(--mmo-space-xl) 0;
  text-align: center;
  color: var(--mmo-color-text-on-ink);
  background: radial-gradient(760px 420px at 50% -40px, rgba(47, 98, 240, 0.45), transparent 70%), var(--mmo-color-ink);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-in {
  max-width: 1080px;
  margin: 0 auto;
}

.hero .eyebrow {
  color: #93B0FF;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: -0.035em;
  color: var(--mmo-color-text-on-ink);
  margin-top: var(--mmo-space-lg);
}

.hero h1 em {
  font-style: normal;
  color: #93B0FF;
}

.hero .sub {
  max-width: 60ch;
  margin: var(--mmo-space-lg) auto 0;
  color: var(--mmo-color-ink-text);
  font-size: var(--mmo-text-lg);
}

.hero-cta {
  display: flex;
  gap: var(--mmo-space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--mmo-space-xl);
}

.hero-cta .button:not(.primary), .hero-cta button:not(.primary) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--mmo-color-text-on-ink);
}

.hero-cta .button:not(.primary):hover, .hero-cta button:not(.primary):hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--mmo-color-text-on-ink);
}

.hero .trust {
  display: flex;
  gap: var(--mmo-space-lg);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--mmo-space-lg);
  font-size: var(--mmo-text-xs);
  color: #7E8DAE;
}

.hero .trust > * {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
}

.hero .shot {
  max-width: 940px;
  margin: var(--mmo-space-xxxl) auto;
  border-radius: var(--mmo-radius-lg) var(--mmo-radius-lg) 0 0;
  border: 1px solid var(--mmo-color-ink-line);
  background: var(--mmo-color-surface);
  box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  text-align: left;
}

.band {
  padding: var(--mmo-space-huge) var(--mmo-space-xl);
}

.band.alt {
  background: var(--mmo-color-surface-2);
  border-block: 1px solid var(--mmo-color-line);
}

.band.tight {
  padding-block: var(--mmo-space-xxxl);
}

.band-in {
  max-width: var(--mmo-layout-content);
  margin: 0 auto;
}

.band-head {
  max-width: 640px;
  margin: 0 auto var(--mmo-space-xxl);
  text-align: center;
}

.band-head h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  margin-top: var(--mmo-space-md);
}

.band-head p {
  margin-top: var(--mmo-space-md);
  color: var(--mmo-color-text-2);
}

.logos {
  display: flex;
  gap: var(--mmo-space-huge);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--mmo-space-xxl) var(--mmo-space-xl);
  border-bottom: 1px solid var(--mmo-color-line);
}

.logos > * {
  font-family: var(--mmo-font-display);
  font-weight: var(--mmo-weight-semi);
  font-size: var(--mmo-text-lg);
  color: var(--mmo-color-text-3);
  letter-spacing: -0.01em;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--mmo-color-line);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-lg);
  overflow: hidden;
}

.stats > * {
  background: var(--mmo-color-surface);
  padding: var(--mmo-space-xl);
}

.stats b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: block;
  font-family: var(--mmo-font-display);
  font-size: 38px;
  letter-spacing: -0.035em;
  line-height: var(--mmo-line-tight);
}

.stats b small {
  font-size: var(--mmo-text-xl);
  color: var(--mmo-color-text-3);
  font-weight: inherit;
}

.stats p {
  margin-top: var(--mmo-space-sm);
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-sm);
}

.sources {
  margin-top: var(--mmo-space-md);
  font-size: var(--mmo-text-xxs);
  color: var(--mmo-color-text-3);
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mmo-space-lg);
}

.features > * {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-lg);
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  padding: var(--mmo-space-xl);
}

.features > *:hover {
  border-color: var(--mmo-color-line-strong);
  box-shadow: var(--mmo-shadow-md);
}

.features .mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--mmo-radius-md);
  background: var(--mmo-color-brand-soft);
  color: var(--mmo-color-brand);
  margin-bottom: var(--mmo-space-lg);
}

.features h3 {
  font-size: var(--mmo-text-h3);
}

.features p {
  margin-top: var(--mmo-space-sm);
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-sm);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps > li {
  display: grid;
  grid-template-columns: 52px 1fr 1fr;
  gap: var(--mmo-space-xxl);
  align-items: start;
  padding: var(--mmo-space-xl) 0;
  margin: 0;
  border-top: 1px solid var(--mmo-color-line);
}

.steps > li:last-child {
  border-bottom: 1px solid var(--mmo-color-line);
}

.steps .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-family: var(--mmo-font-mono);
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-3);
  padding-top: 4px;
}

.steps .step-label {
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mmo-color-brand);
  display: block;
  margin-bottom: var(--mmo-space-sm);
}

.steps h3 {
  font-size: var(--mmo-text-h3);
}

.steps p {
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-sm);
}

.steps .tags {
  display: flex;
  gap: var(--mmo-space-sm);
  flex-wrap: wrap;
  margin-top: var(--mmo-space-md);
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--mmo-space-lg);
}

.plans > * {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-md);
  min-width: 0;
  padding: var(--mmo-space-xl);
}

.plans > .featured {
  border-color: var(--mmo-color-brand);
  box-shadow: var(--mmo-shadow-md);
}

.plans .price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-family: var(--mmo-font-display);
  font-size: 34px;
  letter-spacing: -0.03em;
}

.plans .price small {
  font-size: var(--mmo-text-sm);
  color: var(--mmo-color-text-3);
  font-weight: var(--mmo-weight-medium);
}

.plans ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-sm);
  font-size: var(--mmo-text-sm);
}

.plans li {
  display: flex;
  gap: var(--mmo-space-sm);
  align-items: flex-start;
  margin: 0;
  color: var(--mmo-color-text-2);
}

.faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-sm);
}

.cta-band {
  background: var(--mmo-color-ink);
  color: var(--mmo-color-text-on-ink);
  border-radius: var(--mmo-radius-xl);
  padding: var(--mmo-space-xxxl) var(--mmo-space-xl);
  text-align: center;
}

.cta-band h2 {
  font-size: clamp(24px, 3vw, 34px);
  color: var(--mmo-color-text-on-ink);
}

.cta-band p {
  margin-top: var(--mmo-space-md);
  color: var(--mmo-color-ink-text);
}

.cta-band .hero-cta {
  margin-top: var(--mmo-space-xl);
}

.site-footer {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--mmo-space-xxl);
  max-width: var(--mmo-layout-content);
  margin: 0 auto;
}

.site-footer h5 {
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mmo-color-text-3);
  margin-bottom: var(--mmo-space-md);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-sm);
}

.site-footer li {
  margin: 0;
  font-size: var(--mmo-text-sm);
  color: var(--mmo-color-text-2);
}

.site-footer a {
  color: var(--mmo-color-text-2);
}

.site-footer a:hover {
  color: var(--mmo-color-text);
}

.site-legal {
  display: flex;
  justify-content: space-between;
  gap: var(--mmo-space-lg);
  flex-wrap: wrap;
  max-width: var(--mmo-layout-content);
  margin: var(--mmo-space-xxl) auto 0;
  padding-top: var(--mmo-space-lg);
  border-top: 1px solid var(--mmo-color-line);
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-3);
}

.blog-hero {
  padding: var(--mmo-space-xxxl) var(--mmo-space-xl) var(--mmo-space-xxl);
  text-align: center;
  border-bottom: 1px solid var(--mmo-color-line);
}

.blog-hero h1 {
  font-size: clamp(32px, 4.4vw, 48px);
  margin-top: var(--mmo-space-md);
}

.blog-hero p {
  max-width: 58ch;
  margin: var(--mmo-space-lg) auto 0;
  color: var(--mmo-color-text-2);
}

.chips {
  display: flex;
  gap: var(--mmo-space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--mmo-space-xl);
}

.chip {
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  padding: var(--mmo-space-xs) var(--mmo-space-md);
  border: 1px solid var(--mmo-color-line-strong);
  border-radius: var(--mmo-radius-full);
  background: var(--mmo-color-surface);
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-sm);
  font-weight: var(--mmo-weight-medium);
}

.chip:hover {
  border-color: var(--mmo-color-text-3);
  color: var(--mmo-color-text);
  text-decoration: none;
}

.chip[aria-pressed="true"], .chip.active {
  background: var(--mmo-color-text);
  border-color: var(--mmo-color-text);
  color: var(--mmo-color-surface);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--mmo-space-xl);
}

.post {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-lg);
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.post:hover {
  border-color: var(--mmo-color-line-strong);
  box-shadow: var(--mmo-shadow-md);
}

.post-body {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-sm);
  padding: var(--mmo-space-lg);
  flex: 1 1 auto;
}

.post h3 {
  font-size: var(--mmo-text-h3);
  line-height: var(--mmo-line-snug);
}

.post h2 a, .post h3 a {
  color: inherit;
}

.post h2 a:hover, .post h3 a:hover {
  color: var(--mmo-color-brand);
  text-decoration: none;
}

.post p {
  font-size: var(--mmo-text-sm);
  color: var(--mmo-color-text-2);
  flex: 1 1 auto;
}

.post.featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  margin-bottom: var(--mmo-space-xxl);
}

.post.featured .post-thumb {
  min-height: 230px;
}

.post.featured .post-body {
  padding: var(--mmo-space-xxl);
  justify-content: center;
  gap: var(--mmo-space-md);
}

.post.featured h2 {
  font-size: var(--mmo-text-h2);
}

.post.featured p {
  font-size: var(--mmo-text-md);
}

.post-thumb {
  position: relative;
  min-height: 160px;
  background: linear-gradient(135deg, var(--mmo-color-ink) 0%, var(--mmo-color-ink-2) 55%, #2C3E7A 100%);
  overflow: hidden;
}

.post-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 26% 30%, rgba(255, 255, 255, 0.14) 0, transparent 42%), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: auto, 34px 34px;
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.post-thumb .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mmo-space-xs);
  padding: 2px var(--mmo-space-sm);
  border-radius: var(--mmo-radius-full);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-semi);
  line-height: 1.5;
  white-space: nowrap;
  position: absolute;
  top: var(--mmo-space-md);
  left: var(--mmo-space-md);
  z-index: 2;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(6px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-3);
  flex-wrap: wrap;
}

.post-meta .sep {
  color: var(--mmo-color-line-strong);
}

.post-meta .avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.newsletter {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-lg);
  display: flex;
  align-items: center;
  gap: var(--mmo-space-xxl);
  flex-wrap: wrap;
  padding: var(--mmo-space-xxl);
  background: var(--mmo-color-surface-2);
  margin-top: var(--mmo-space-xxxl);
}

.newsletter h3 {
  font-size: var(--mmo-text-xl);
}

.newsletter p {
  margin-top: var(--mmo-space-sm);
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-sm);
}

.newsletter form {
  display: flex;
  gap: var(--mmo-space-sm);
  margin-left: auto;
  flex-wrap: wrap;
}

.newsletter input {
  min-width: 230px;
  width: auto;
}

.reading-progress {
  position: sticky;
  top: 0;
  z-index: var(--mmo-z-sticky);
  height: 2px;
  background: var(--mmo-color-brand);
  transform-origin: left;
  transition: width var(--mmo-motion-fast) linear;
}

.article-header {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--mmo-space-xl) 0 var(--mmo-space-xxl);
  text-align: center;
}

.article-header h1 {
  font-size: clamp(30px, 4vw, 44px);
  margin-top: var(--mmo-space-md);
}

.article-header .post-meta {
  justify-content: center;
  margin-top: var(--mmo-space-lg);
  font-size: var(--mmo-text-sm);
}

.article-cover {
  height: 300px;
  border-radius: var(--mmo-radius-lg);
  margin-bottom: var(--mmo-space-xxxl);
}

.rail-block {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-md);
  min-width: 0;
}

.rail-block + .rail-block {
  margin-top: var(--mmo-space-xl);
}

.rail-block h5 {
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mmo-color-text-3);
}

.author-card {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  display: flex;
  gap: var(--mmo-space-md);
  align-items: flex-start;
  padding: var(--mmo-space-lg);
}

.author-card .avatar {
  width: 40px;
  height: 40px;
  font-size: var(--mmo-text-sm);
}

.author-card b {
  display: block;
  font-size: var(--mmo-text-sm);
}

.author-card span {
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-2);
}

.share {
  display: flex;
  gap: var(--mmo-space-sm);
}

.share > * {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  width: var(--mmo-layout-control);
  height: var(--mmo-layout-control);
  border: 1px solid var(--mmo-color-line-strong);
  border-radius: var(--mmo-radius-sm);
  color: var(--mmo-color-text-2);
}

.share > *:hover {
  color: var(--mmo-color-text);
  border-color: var(--mmo-color-text-3);
  text-decoration: none;
}

.rail-cta {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  padding: var(--mmo-space-lg);
  background: var(--mmo-color-surface-2);
}

.rail-cta b {
  display: block;
  font-size: var(--mmo-text-sm);
}

.rail-cta p {
  margin-top: var(--mmo-space-sm);
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-2);
}

.rail-cta .button, .rail-cta button {
  width: 100%;
  margin-top: var(--mmo-space-md);
}

.related {
  margin-top: var(--mmo-space-huge);
  padding-top: var(--mmo-space-xxl);
  border-top: 1px solid var(--mmo-color-line);
}

.related > h2 {
  font-size: var(--mmo-text-xl);
  margin-bottom: var(--mmo-space-xl);
}

.related .post-thumb {
  min-height: 120px;
}

.topics {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-xl);
  min-width: 0;
  max-width: var(--mmo-layout-content);
  margin: 0 auto;
}

.topics-hero {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-md);
  min-width: 0;
  padding: var(--mmo-space-xl) 0 var(--mmo-space-lg);
}

.topics-eyebrow {
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mmo-color-brand);
  align-self: flex-start;
}

.topics-hero h1 {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-md);
  min-width: 0;
  font-size: clamp(28px, 3.6vw, 40px);
  margin: 0;
}

.topics-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--mmo-radius-md);
  background: var(--mmo-color-brand-soft);
  color: var(--mmo-color-brand);
  font-size: 22px;
}

.topics-hero p {
  max-width: 68ch;
  margin: 0;
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-md);
}

.topics-stats {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-lg);
  min-width: 0;
  font-size: var(--mmo-text-sm);
  color: var(--mmo-color-text-3);
}

.topics-stats b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--mmo-color-text);
  font-weight: var(--mmo-weight-semi);
}

.topics-toolbar {
  position: sticky;
  z-index: var(--mmo-z-sticky);
  background: var(--mmo-color-surface);
  top: var(--mmo-space-sm);
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  display: flex;
  align-items: center;
  gap: var(--mmo-space-md);
  min-width: 0;
  flex-wrap: wrap;
  padding: var(--mmo-space-sm);
  box-shadow: var(--mmo-shadow-sm);
}

.topics-toolbar:not(:has(.topics-chips)) {
  background: none;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}

.topics-search {
  flex-direction: row;
  flex: 0 1 320px;
}

.topics-search input {
  min-height: 0;
  width: 100%;
}

.topics-chips {
  display: flex;
  gap: var(--mmo-space-sm);
  flex: 1 1 280px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  padding-right: var(--mmo-space-xl);
}

.topics-chips::-webkit-scrollbar {
  display: none;
}

.topics-chips .chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--mmo-space-xs);
}

.chip-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: var(--mmo-text-xxs);
  opacity: 0.65;
}

.topics-block {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-md);
  min-width: 0;
}

.topics-heading {
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: inherit;
  color: var(--mmo-color-text-3);
  margin: var(--mmo-space-sm) 0 0;
}

.topics-pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--mmo-space-md);
}

.topic-page {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-md);
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  display: flex;
  align-items: center;
  gap: var(--mmo-space-md);
  min-width: 0;
  padding: var(--mmo-space-md);
  color: var(--mmo-color-text);
}

.topic-page:hover {
  border-color: var(--mmo-color-brand-line);
  box-shadow: var(--mmo-shadow-sm);
  text-decoration: none;
}

.topic-page-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.topic-page-body b {
  font-weight: var(--mmo-weight-semi);
  font-size: var(--mmo-text-sm);
}

.topic-page-body small {
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topic-go {
  color: var(--mmo-color-text-3);
  transition: transform var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease);
}

.topic-page:hover .topic-go {
  color: var(--mmo-color-brand);
  transform: translateX(3px);
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--mmo-space-lg);
}

.topic {
  background: var(--mmo-color-surface);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-lg);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  --topic-accent: var(--mmo-color-brand);
}

.topic:hover {
  border-color: var(--mmo-color-line-strong);
  box-shadow: var(--mmo-shadow-md);
}

.topics-grid > .topic:nth-child(6n+1) {
  --topic-accent: var(--mmo-color-viz-1);
}

.topics-grid > .topic:nth-child(6n+2) {
  --topic-accent: var(--mmo-color-viz-2);
}

.topics-grid > .topic:nth-child(6n+3) {
  --topic-accent: var(--mmo-color-viz-3);
}

.topics-grid > .topic:nth-child(6n+4) {
  --topic-accent: var(--mmo-color-viz-4);
}

.topics-grid > .topic:nth-child(6n+5) {
  --topic-accent: var(--mmo-color-viz-5);
}

.topics-grid > .topic:nth-child(6n+6) {
  --topic-accent: var(--mmo-color-viz-6);
}

.topic > header {
  display: flex;
  align-items: flex-start;
  gap: var(--mmo-space-md);
  padding: var(--mmo-space-lg) var(--mmo-space-lg) var(--mmo-space-md);
}

.topic > header > div {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-xs);
  min-width: 0;
  flex: 1 1 auto;
}

.topic h2 {
  font-size: var(--mmo-text-lg);
  line-height: var(--mmo-line-snug);
  margin: 0;
}

.topic h2 a {
  color: inherit;
}

.topic h2 a:hover {
  color: var(--mmo-color-brand);
  text-decoration: none;
}

.topic > header p {
  margin: 0;
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topic-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--mmo-radius-sm);
  background: color-mix(in oklab, var(--topic-accent, var(--mmo-color-brand)) 14%, transparent);
  color: var(--topic-accent, var(--mmo-color-brand));
  font-size: 17px;
}

.topic-count {
  display: inline-flex;
  align-items: center;
  gap: var(--mmo-space-xs);
  padding: 2px var(--mmo-space-sm);
  border-radius: var(--mmo-radius-full);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-semi);
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text-2);
}

.topic-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--mmo-space-sm);
  flex: 1 1 auto;
}

.topic-list > li {
  margin: 0;
}

.topic-list a {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  min-width: 0;
  padding: 5px var(--mmo-space-sm);
  border-radius: var(--mmo-radius-sm);
  color: var(--mmo-color-text);
  font-size: var(--mmo-text-sm);
}

.topic-list a > span:first-of-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.topic-list a > mmo-icon {
  color: var(--mmo-color-text-3);
  flex: 0 0 auto;
}

.topic-list a:hover {
  background: var(--mmo-color-surface-2);
  text-decoration: none;
}

.topic-list a:hover > mmo-icon {
  color: var(--topic-accent, var(--mmo-color-brand));
}

.topic-list code {
  font-size: var(--mmo-text-xs);
}

.topic > footer {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  min-width: 0;
  justify-content: space-between;
  padding: var(--mmo-space-sm) var(--mmo-space-lg) var(--mmo-space-md);
  margin-top: var(--mmo-space-sm);
  border-top: 1px solid var(--mmo-color-line);
}

.topic-more {
  cursor: pointer;
  transition: background var(--mmo-motion-fast) var(--mmo-motion-ease), border-color var(--mmo-motion-fast) var(--mmo-motion-ease), color var(--mmo-motion-fast) var(--mmo-motion-ease), box-shadow var(--mmo-motion-fast) var(--mmo-motion-ease);
  padding: 0;
  border: 0;
  background: none;
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-xs);
  font-weight: var(--mmo-weight-medium);
}

.topic-more:hover {
  color: var(--mmo-color-text);
}

.topic.filtering .topic-more {
  display: none;
}

.topic-open {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-xs);
  min-width: 0;
  margin-left: auto;
  font-size: var(--mmo-text-xs);
  font-weight: var(--mmo-weight-semi);
  color: var(--topic-accent, var(--mmo-color-brand));
}

.topic-open:hover {
  text-decoration: none;
}

.topic-open mmo-icon {
  transition: transform var(--mmo-motion-fast) var(--mmo-motion-ease);
}

.topic-open:hover mmo-icon {
  transform: translateX(3px);
}

.topics-empty {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-sm);
  min-width: 0;
  align-items: center;
  padding: var(--mmo-space-xxxl) var(--mmo-space-lg);
  border: 1px dashed var(--mmo-color-line-strong);
  border-radius: var(--mmo-radius-lg);
  color: var(--mmo-color-text-3);
  text-align: center;
}

.topics-empty mmo-icon {
  font-size: 28px;
}

.dump {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--mmo-color-line-strong) transparent;
  position: relative;
  margin: var(--mmo-space-lg) 0;
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  background: var(--mmo-color-surface-2);
  color: var(--mmo-color-text);
  border: 1px solid var(--mmo-color-line);
  border-left: 4px solid var(--mmo-color-brand);
  border-radius: var(--mmo-radius-sm);
  font-family: var(--mmo-font-mono);
  font-size: var(--mmo-text-sm);
  line-height: var(--mmo-line-snug);
  text-align: left;
  overflow-wrap: anywhere;
}

.dump > header {
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mmo-color-text-3);
  padding-bottom: var(--mmo-space-xs);
  margin-bottom: var(--mmo-space-xs);
  border-bottom: 1px solid var(--mmo-color-line);
}

.dump > header a {
  color: var(--mmo-color-text-2);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--mmo-weight-medium);
}

.dump > article::before {
  content: "dump#" attr(data-num);
  display: inline-flex;
  align-items: center;
  gap: var(--mmo-space-xs);
  padding: 2px var(--mmo-space-sm);
  border-radius: var(--mmo-radius-full);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-semi);
  line-height: 1.5;
  white-space: nowrap;
  padding: 0 var(--mmo-space-sm);
  background: var(--mmo-color-brand-soft);
  color: var(--mmo-color-brand-ink);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-medium);
  white-space: nowrap;
  font-family: var(--mmo-font-ui);
  width: fit-content;
  margin-bottom: var(--mmo-space-xs);
}

.dump > article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mmo-space-xs);
}

.dump .log {
  margin-bottom: var(--mmo-space-xs);
  font-weight: var(--mmo-weight-semi);
}

.dump .log.emergency, .dump .log.alert, .dump .log.critical, .dump .log.error {
  color: var(--mmo-color-bad) !important;
}

.dump .log.warning {
  color: var(--mmo-color-warn) !important;
}

.dump .log.notice, .dump .log.info, .dump .log.debug {
  color: var(--mmo-color-text-2) !important;
  background: none !important;
}

.dump .log small {
  font-weight: var(--mmo-weight-normal);
  color: var(--mmo-color-text-3);
}

.dump .trace {
  margin: 0;
  padding-left: var(--mmo-space-lg);
  font: inherit;
  font-weight: var(--mmo-weight-normal);
  color: var(--mmo-color-text-2);
  white-space: pre-wrap;
}

details.array, details.object {
  font-family: var(--mmo-font-mono);
  font-size: var(--mmo-text-sm);
  line-height: var(--mmo-line-snug);
}

:is(.dump, details.array, details.object) details, :is(.dump, details.array, details.object):is(details) {
  border: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

:is(.dump, details.array, details.object) details + details {
  margin-top: 0;
}

:is(.dump, details.array, details.object) details[open] > summary, :is(.dump, details.array, details.object):is(details)[open] > summary {
  margin-bottom: 0;
}

:is(.dump, details.array, details.object) summary {
  display: inline-flex;
  align-items: center;
  color: var(--mmo-color-viz-3);
  font-weight: var(--mmo-weight-normal);
  border-radius: var(--mmo-radius-xs);
  padding: 0 var(--mmo-space-xs);
}

:is(.dump, details.array, details.object) summary::after {
  display: none;
}

:is(.dump, details.array, details.object) summary::before {
  content: "";
  flex: 0 0 auto;
  border-left: 5px solid var(--mmo-color-text-3);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: var(--mmo-space-xs);
  transition: transform var(--mmo-motion-fast) var(--mmo-motion-ease);
}

:is(.dump, details.array, details.object) summary:hover {
  background: var(--mmo-color-surface-3);
}

:is(.dump, details.array, details.object) summary:focus-visible {
  outline: 2px solid var(--mmo-color-focus);
  outline-offset: 0;
}

:is(.dump, details.array, details.object) summary span {
  font-weight: var(--mmo-weight-bold);
  font-style: italic;
}

:is(.dump, details.array, details.object) details[open] > summary::before, :is(.dump, details.array, details.object):is(details)[open] > summary::before {
  transform: rotate(90deg);
}

:is(.dump, details.array, details.object) dl {
  display: flex;
  flex-direction: column;
  margin: var(--mmo-space-xxs) 0 var(--mmo-space-xxs) var(--mmo-space-sm);
  padding-left: var(--mmo-space-sm);
  border-left: 1px solid var(--mmo-color-line-strong);
}

:is(.dump, details.array, details.object) .item {
  display: flex;
  align-items: baseline;
  border-radius: var(--mmo-radius-xs);
}

:is(.dump, details.array, details.object) .item:hover:not(:has(.item:hover)) {
  background: var(--mmo-color-brand-soft);
}

:is(.dump, details.array, details.object) .item:hover:not(:has(.item:hover)) > dt {
  color: var(--mmo-color-brand-ink);
}

:is(.dump, details.array, details.object) dt, :is(.dump, details.array, details.object) dd {
  margin: 0;
  padding: 1px var(--mmo-space-sm);
}

:is(.dump, details.array, details.object) dt {
  flex: 0 0 auto;
  font-weight: var(--mmo-weight-normal);
  color: var(--mmo-color-text-2);
}

:is(.dump, details.array, details.object) dt::after {
  content: ":";
  color: var(--mmo-color-text-3);
}

:is(.dump, details.array, details.object) dd {
  flex: 1 1 auto;
  min-width: 0;
}

:is(.dump, details.array, details.object) .public > dt::before, :is(.dump, details.array, details.object) .protected > dt::before, :is(.dump, details.array, details.object) .private > dt::before {
  display: inline-block;
  margin-right: var(--mmo-space-xs);
  font-size: var(--mmo-text-xxs);
}

:is(.dump, details.array, details.object) .public > dt::before {
  content: "🔓";
}

:is(.dump, details.array, details.object) .protected > dt::before {
  content: "🔒";
}

:is(.dump, details.array, details.object) .protected > dt {
  color: var(--mmo-color-warn);
}

:is(.dump, details.array, details.object) .private > dt::before {
  content: "🔐";
}

:is(.dump, details.array, details.object) .private > dt {
  color: var(--mmo-color-bad);
}

:is(.dump, details.array, details.object) .bool, :is(.dump, details.array, details.object) .null {
  display: inline-flex;
  align-items: center;
  gap: var(--mmo-space-xs);
  padding: 2px var(--mmo-space-sm);
  border-radius: var(--mmo-radius-full);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-semi);
  line-height: 1.5;
  white-space: nowrap;
  padding: 0 var(--mmo-space-sm);
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text-2);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-medium);
  white-space: nowrap;
  font-family: var(--mmo-font-mono);
  font-weight: var(--mmo-weight-bold);
}

:is(.dump, details.array, details.object) .bool[value=true] {
  background: var(--mmo-color-ok-soft);
  color: var(--mmo-color-ok);
}

:is(.dump, details.array, details.object) .bool[value=false] {
  background: var(--mmo-color-bad-soft);
  color: var(--mmo-color-bad);
}

:is(.dump, details.array, details.object) .null {
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text-3);
}

:is(.dump, details.array, details.object) .number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: var(--mmo-weight-bold);
  color: var(--mmo-color-info);
}

:is(.dump, details.array, details.object) .string {
  color: var(--mmo-color-ok);
  white-space: normal;
}

:is(.dump, details.array, details.object) .string::before, :is(.dump, details.array, details.object) .string::after {
  color: var(--mmo-color-text-3);
}

:is(.dump, details.array, details.object) .string::before {
  content: "(" attr(data-length) ") \"";
}

:is(.dump, details.array, details.object) .string::after {
  content: "\"";
}

:is(.dump, details.array, details.object) .string small {
  display: none;
}

:is(.dump, details.array, details.object) .space, :is(.dump, details.array, details.object) .tab, :is(.dump, details.array, details.object) .rc {
  color: var(--mmo-color-text-3);
  opacity: 0.6;
}

:is(.dump, details.array, details.object) .eol {
  color: var(--mmo-color-text-3);
  opacity: 0.6;
}

:is(.dump, details.array, details.object) .enum {
  display: inline;
  color: var(--mmo-color-viz-3);
}

:is(.dump, details.array, details.object) .enum i {
  color: var(--mmo-color-text-3);
}

:is(.dump, details.array, details.object) .closure, :is(.dump, details.array, details.object) .resource {
  display: inline;
  color: var(--mmo-color-viz-2);
}

:is(.dump, details.array, details.object) .closure > span, :is(.dump, details.array, details.object) .resource > span {
  font-weight: var(--mmo-weight-semi);
  margin-right: var(--mmo-space-sm);
}

:is(.dump, details.array, details.object) .hidden-value {
  font-style: italic;
  color: var(--mmo-color-text-3);
}

:is(.dump, details.array, details.object) .max-level > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--mmo-space-xs);
  padding: 2px var(--mmo-space-sm);
  border-radius: var(--mmo-radius-full);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-semi);
  line-height: 1.5;
  white-space: nowrap;
  padding: 0 var(--mmo-space-sm);
  background: var(--mmo-color-bad-soft);
  color: var(--mmo-color-bad);
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-medium);
  white-space: nowrap;
  font-style: italic;
  margin-right: var(--mmo-space-xs);
}

:is(.dump, details.array, details.object) .link {
  color: var(--mmo-color-brand-ink);
  font-weight: var(--mmo-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:is(.dump, details.array, details.object) :target {
  outline: 2px dashed var(--mmo-color-focus);
  outline-offset: 2px;
  border-radius: var(--mmo-radius-xs);
}

.vflex, .hflex {
  display: flex;
  position: relative;
}

.vflex.spaced, .hflex.spaced {
  justify-content: space-around;
}

.vflex.evenly, .hflex.evenly {
  justify-content: space-evenly;
}

.vflex.between, .hflex.between {
  justify-content: space-between;
}

.vflex.start, .hflex.start {
  align-items: flex-start;
}

.vflex.stretch, .hflex.stretch {
  align-items: stretch;
}

.vflex.inline, .hflex.inline {
  display: inline-flex;
}

.hflex {
  flex-direction: row;
}

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

.hflex.center {
  justify-content: center;
}

.hflex.justify-center {
  align-items: center;
}

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

.vflex {
  flex-direction: column;
}

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

.vflex.center {
  align-items: center;
}

.vflex.justify-center {
  justify-content: center;
}

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

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

.gap {
  gap: var(--mmo-space-lg);
}

.gap-sm {
  gap: var(--mmo-space-sm);
}

.gap-lg {
  gap: var(--mmo-space-xl);
}

.wrap {
  flex-wrap: wrap;
}

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

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

.flex-1 {
  flex: 1 1 100%;
}

.grow {
  flex-grow: 1;
}

.width-1-2 {
  width: 50%;
}

.width-1-3 {
  width: 33.3333%;
}

.width-2-3 {
  width: 66.6666%;
}

.width-1-4 {
  width: 25%;
}

.width-3-4 {
  width: 75%;
}

.width-1-5 {
  width: 20%;
}

.gap > .width-1-2 {
  width: calc(50% - var(--mmo-space-lg) / 2);
}

.gap > .width-1-3 {
  width: calc(33.3333% - var(--mmo-space-lg) * 2 / 3);
}

.gap > .width-2-3 {
  width: calc(66.6666% - var(--mmo-space-lg) / 3);
}

.gap > .width-1-4 {
  width: calc(25% - var(--mmo-space-lg) * 3 / 4);
}

.gap > .width-3-4 {
  width: calc(75% - var(--mmo-space-lg) / 4);
}

.gap > .width-1-5 {
  width: calc(20% - var(--mmo-space-lg) * 4 / 5);
}

.min-width-1-2 {
  min-width: 50%;
}

.min-width-1-3 {
  min-width: 33.3333%;
}

.min-width-2-3 {
  min-width: 66.6666%;
}

.min-width-1-4 {
  min-width: 25%;
}

.min-width-3-4 {
  min-width: 75%;
}

.min-width-1-5 {
  min-width: 20%;
}

.gap > .min-width-1-2 {
  min-width: calc(50% - var(--mmo-space-lg) / 2);
}

.gap > .min-width-1-3 {
  min-width: calc(33.3333% - var(--mmo-space-lg) * 2 / 3);
}

.gap > .min-width-2-3 {
  min-width: calc(66.6666% - var(--mmo-space-lg) / 3);
}

.gap > .min-width-1-4 {
  min-width: calc(25% - var(--mmo-space-lg) * 3 / 4);
}

.gap > .min-width-3-4 {
  min-width: calc(75% - var(--mmo-space-lg) / 4);
}

.gap > .min-width-1-5 {
  min-width: calc(20% - var(--mmo-space-lg) * 4 / 5);
}

.max-width-1-2 {
  max-width: 50%;
}

.max-width-1-3 {
  max-width: 33.3333%;
}

.max-width-2-3 {
  max-width: 66.6666%;
}

.max-width-1-4 {
  max-width: 25%;
}

.max-width-3-4 {
  max-width: 75%;
}

.max-width-1-5 {
  max-width: 20%;
}

.gap > .max-width-1-2 {
  max-width: calc(50% - var(--mmo-space-lg) / 2);
}

.gap > .max-width-1-3 {
  max-width: calc(33.3333% - var(--mmo-space-lg) * 2 / 3);
}

.gap > .max-width-2-3 {
  max-width: calc(66.6666% - var(--mmo-space-lg) / 3);
}

.gap > .max-width-1-4 {
  max-width: calc(25% - var(--mmo-space-lg) * 3 / 4);
}

.gap > .max-width-3-4 {
  max-width: calc(75% - var(--mmo-space-lg) / 4);
}

.gap > .max-width-1-5 {
  max-width: calc(20% - var(--mmo-space-lg) * 4 / 5);
}

.height-1-2 {
  height: 50%;
}

.height-1-3 {
  height: 33.3333%;
}

.height-2-3 {
  height: 66.6666%;
}

.height-1-4 {
  height: 25%;
}

.height-3-4 {
  height: 75%;
}

.height-1-5 {
  height: 20%;
}

.gap > .height-1-2 {
  height: calc(50% - var(--mmo-space-lg) / 2);
}

.gap > .height-1-3 {
  height: calc(33.3333% - var(--mmo-space-lg) * 2 / 3);
}

.gap > .height-2-3 {
  height: calc(66.6666% - var(--mmo-space-lg) / 3);
}

.gap > .height-1-4 {
  height: calc(25% - var(--mmo-space-lg) * 3 / 4);
}

.gap > .height-3-4 {
  height: calc(75% - var(--mmo-space-lg) / 4);
}

.gap > .height-1-5 {
  height: calc(20% - var(--mmo-space-lg) * 4 / 5);
}

.min-height-1-2 {
  min-height: 50%;
}

.min-height-1-3 {
  min-height: 33.3333%;
}

.min-height-2-3 {
  min-height: 66.6666%;
}

.min-height-1-4 {
  min-height: 25%;
}

.min-height-3-4 {
  min-height: 75%;
}

.min-height-1-5 {
  min-height: 20%;
}

.gap > .min-height-1-2 {
  min-height: calc(50% - var(--mmo-space-lg) / 2);
}

.gap > .min-height-1-3 {
  min-height: calc(33.3333% - var(--mmo-space-lg) * 2 / 3);
}

.gap > .min-height-2-3 {
  min-height: calc(66.6666% - var(--mmo-space-lg) / 3);
}

.gap > .min-height-1-4 {
  min-height: calc(25% - var(--mmo-space-lg) * 3 / 4);
}

.gap > .min-height-3-4 {
  min-height: calc(75% - var(--mmo-space-lg) / 4);
}

.gap > .min-height-1-5 {
  min-height: calc(20% - var(--mmo-space-lg) * 4 / 5);
}

.max-height-1-2 {
  max-height: 50%;
}

.max-height-1-3 {
  max-height: 33.3333%;
}

.max-height-2-3 {
  max-height: 66.6666%;
}

.max-height-1-4 {
  max-height: 25%;
}

.max-height-3-4 {
  max-height: 75%;
}

.max-height-1-5 {
  max-height: 20%;
}

.gap > .max-height-1-2 {
  max-height: calc(50% - var(--mmo-space-lg) / 2);
}

.gap > .max-height-1-3 {
  max-height: calc(33.3333% - var(--mmo-space-lg) * 2 / 3);
}

.gap > .max-height-2-3 {
  max-height: calc(66.6666% - var(--mmo-space-lg) / 3);
}

.gap > .max-height-1-4 {
  max-height: calc(25% - var(--mmo-space-lg) * 3 / 4);
}

.gap > .max-height-3-4 {
  max-height: calc(75% - var(--mmo-space-lg) / 4);
}

.gap > .max-height-1-5 {
  max-height: calc(20% - var(--mmo-space-lg) * 4 / 5);
}

.hidden {
  display: none !important;
}

.m-auto {
  margin: auto;
}

.fit-content {
  width: fit-content;
}

.overflow-auto {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--mmo-color-line-strong) transparent;
}

.scrollable {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--mmo-color-line-strong) transparent;
  max-height: 100%;
}

.toggle:not(.active) {
  display: none;
}

.sticky {
  position: sticky;
  z-index: var(--mmo-z-sticky);
  background: var(--mmo-color-surface);
}

.sticky:not(.top, .bottom, .left, .right) {
  top: 0;
}

.sticky.top {
  top: 0;
}

.sticky.bottom {
  bottom: 0;
}

.sticky.left {
  left: 0;
}

.sticky.right {
  right: 0;
}

thead.sticky, tfoot.sticky {
  z-index: calc(var(--mmo-z-sticky) + 1);
}

thead .sticky.left, thead .sticky.right, tfoot .sticky.left, tfoot .sticky.right {
  z-index: calc(var(--mmo-z-sticky) + 2);
}

.cluster {
  display: flex;
  align-items: center;
  gap: var(--mmo-space-sm);
  min-width: 0;
  flex-wrap: wrap;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--mmo-space-md);
  min-width: 0;
}

.autogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mmo-space-lg);
}

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

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

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

.text-small {
  font-size: var(--mmo-text-sm);
}

.text-large {
  font-size: var(--mmo-text-lg);
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.eyebrow {
  font-size: var(--mmo-text-xxs);
  font-weight: var(--mmo-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mmo-color-brand);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  display: block;
}

.numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-vertical, .text-sideway {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.text-sideway {
  transform: rotate(180deg);
}

.number, .currency {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-family: var(--mmo-font-mono);
  font-size: 0.95em;
  white-space: nowrap;
}

.currency {
  color: var(--mmo-color-ok);
}

.currency::after {
  content: " €";
  color: var(--mmo-color-text-3);
}

.time, .date, .datetime {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--mmo-color-text-2);
  white-space: nowrap;
}

.characters-left {
  display: block;
  text-align: right;
  font-size: var(--mmo-text-xxs);
  color: var(--mmo-color-text-3);
}

.hint {
  display: block;
  font-size: var(--mmo-text-xs);
  color: var(--mmo-color-text-3);
  line-height: var(--mmo-line-snug);
}

.primary {
  background: var(--mmo-color-brand-soft);
  color: var(--mmo-color-brand-ink);
}

.text-primary {
  color: var(--mmo-color-brand);
}

.primary.solid {
  background: var(--mmo-color-brand);
  color: var(--mmo-color-text-on-brand);
}

.secondary {
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text);
}

.text-secondary {
  color: var(--mmo-color-text-2);
}

.secondary.solid {
  background: var(--mmo-color-text-2);
  color: var(--mmo-color-surface);
}

.success {
  background: var(--mmo-color-ok-soft);
  color: var(--mmo-color-ok);
}

.text-success {
  color: var(--mmo-color-ok);
}

.success.solid {
  background: var(--mmo-color-ok);
  color: var(--mmo-color-surface);
}

.warning, .yellow {
  background: var(--mmo-color-warn-soft);
  color: var(--mmo-color-warn);
}

.text-warning, .text-yellow {
  color: var(--mmo-color-warn);
}

.warning.solid, .yellow.solid {
  background: var(--mmo-color-warn);
  color: var(--mmo-color-surface);
}

.error {
  background: var(--mmo-color-bad-soft);
  color: var(--mmo-color-bad);
}

.text-error {
  color: var(--mmo-color-bad);
}

.error.solid {
  background: var(--mmo-color-bad);
  color: var(--mmo-color-surface);
}

.info {
  background: var(--mmo-color-info-soft);
  color: var(--mmo-color-info);
}

.text-info {
  color: var(--mmo-color-info);
}

.info.solid {
  background: var(--mmo-color-info);
  color: var(--mmo-color-surface);
}

.muted, .grey {
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-text-3);
}

.text-muted, .text-grey {
  color: var(--mmo-color-text-3);
}

.dark, .dark-grey {
  background: var(--mmo-color-text);
  color: var(--mmo-color-surface);
}

.text-dark, .text-dark-grey {
  color: var(--mmo-color-text);
}

.white {
  background: var(--mmo-color-surface);
  color: var(--mmo-color-text);
}

.text-white {
  color: var(--mmo-color-surface);
}

#app > *:not([slot]) + *:not([slot]) {
  margin-top: var(--mmo-space-lg);
}

#app > h2:not([slot]) + *, #app > h3:not([slot]) + *, #app > h4:not([slot]) + * {
  margin-top: var(--mmo-space-sm);
}

#app > h2:not([slot]) {
  margin-top: var(--mmo-space-xxxl);
}

#app > h3:not([slot]) {
  margin-top: var(--mmo-space-xxl);
}

#app > h4:not([slot]) {
  margin-top: var(--mmo-space-xl);
}

#app > ul, #app > ol {
  padding-left: var(--mmo-space-xl);
}

#app li + li {
  margin-top: var(--mmo-space-xs);
}

#app > article > *:not([slot]) + *:not([slot]), #app > mmo-markdown > *:not([slot]) + *:not([slot]), #app > article > mmo-markdown > *:not([slot]) + *:not([slot]) {
  margin-top: var(--mmo-space-lg);
}

#app > article > h2:not([slot]) + *, #app > mmo-markdown > h2:not([slot]) + *, #app > article > mmo-markdown > h2:not([slot]) + *, #app > article > h3:not([slot]) + *, #app > mmo-markdown > h3:not([slot]) + *, #app > article > mmo-markdown > h3:not([slot]) + *, #app > article > h4:not([slot]) + *, #app > mmo-markdown > h4:not([slot]) + *, #app > article > mmo-markdown > h4:not([slot]) + * {
  margin-top: var(--mmo-space-sm);
}

#app > article > h2:not([slot]), #app > mmo-markdown > h2:not([slot]), #app > article > mmo-markdown > h2:not([slot]) {
  margin-top: var(--mmo-space-xxxl);
}

#app > article > h3:not([slot]), #app > mmo-markdown > h3:not([slot]), #app > article > mmo-markdown > h3:not([slot]) {
  margin-top: var(--mmo-space-xxl);
}

#app > article > h4:not([slot]), #app > mmo-markdown > h4:not([slot]), #app > article > mmo-markdown > h4:not([slot]) {
  margin-top: var(--mmo-space-xl);
}

#app > article > ul, #app > mmo-markdown > ul, #app > article > mmo-markdown > ul, #app > article > ol, #app > mmo-markdown > ol, #app > article > mmo-markdown > ol {
  padding-left: var(--mmo-space-xl);
}

#app > article li + li, #app > mmo-markdown li + li, #app > article > mmo-markdown li + li {
  margin-top: var(--mmo-space-xs);
}

#app > article, #app > mmo-markdown, #app > article > mmo-markdown {
  display: block;
  max-width: var(--mmo-layout-content);
  margin: 0 auto;
}

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

.demo p > code, .demo li > code {
  padding: var(--mmo-space-xs);
  font-weight: var(--mmo-weight-semi);
  background: var(--mmo-color-surface-3);
  color: var(--mmo-color-brand-ink);
}

.demo .scrollable {
  margin-top: var(--mmo-space-md);
  overflow: auto;
  border-bottom: 1px solid var(--mmo-color-line-strong);
  width: 100%;
}

.demo .scrollable thead:not(.sticky) {
  position: sticky;
  top: 0;
  z-index: var(--mmo-z-sticky);
}

.demo .preview {
  border-radius: var(--mmo-radius-xs);
  padding: var(--mmo-space-xs);
  gap: var(--mmo-space-xs);
  background: var(--mmo-color-surface-2);
  width: 100%;
}

.demo .preview.layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: var(--mmo-space-lg);
}

.demo .preview.layout > div {
  height: fit-content;
  background-image: linear-gradient(135deg, #ffffffbf 10%, #0000 0, #0000 50%, #ffffffbf 0, #ffffffbf 60%, #0000 0, #0000);
  background-size: 7.07px 7.07px;
  background-color: rgba(0, 0, 0, 0.5);
}

.demo .preview.layout > div > div {
  border-radius: var(--mmo-radius-xs);
  padding: var(--mmo-space-md);
  background: var(--mmo-color-brand);
  color: var(--mmo-color-text-on-brand);
}

.demo .preview.layout--padding > div > div {
  background: var(--mmo-color-brand) !important;
}

.demo .preview.layout > div .m {
  margin: var(--mmo-space-md);
}

.demo .preview.layout > div .mt {
  margin-top: var(--mmo-space-sm);
}

.demo .preview.layout > div .ml {
  margin: 0 var(--mmo-space-lg);
}

.demo .preview.font .font-xs {
  font-size: var(--mmo-text-xs);
}

.demo .preview.font .font-s {
  font-size: var(--mmo-text-sm);
}

.demo .preview.font .font-m {
  font-size: var(--mmo-text-md);
}

.demo .preview.font .font-l {
  font-size: var(--mmo-text-lg);
}

.demo .preview.font .font-xl {
  font-size: var(--mmo-text-xl);
}

.demo .preview.sandbox {
  padding: var(--mmo-space-sm);
}

.demo .preview.sandbox button {
  margin: var(--mmo-space-md) 0;
}

.demo .preview.sandbox textarea {
  width: 100%;
  height: 150px;
}

.demo .overview {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: var(--mmo-space-md);
  gap: var(--mmo-space-md);
  min-height: 100px;
}

.demo .overview .item {
  padding: var(--mmo-space-md);
}

.demo .titles h1:first-child, .demo .titles h2:first-child, .demo .titles h3:first-child, .demo .titles h4:first-child, .demo .titles h5:first-child, .demo .titles h6:first-child {
  margin-top: revert;
}

.demo .flex .hflex, .demo .align .hflex, .demo .justify .hflex, .demo .flex .vflex, .demo .align .vflex, .demo .justify .vflex {
  background: var(--mmo-color-surface-3);
}

.demo .flex .hflex div, .demo .align .hflex div, .demo .justify .hflex div, .demo .flex .vflex div, .demo .align .vflex div, .demo .justify .vflex div {
  border-radius: var(--mmo-radius-sm);
  background: var(--mmo-color-brand);
  color: var(--mmo-color-text-on-brand);
}

.demo mmo-code.align label .hflex.gap div, .demo mmo-code.justify label .hflex.gap div, .demo mmo-code.flex label .hflex.gap div, .demo mmo-code.align label .vflex.gap div, .demo mmo-code.justify label .vflex.gap div, .demo mmo-code.flex label .vflex.gap div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mmo-space-md);
}

.demo mmo-code.flex label {
  width: 100%;
}

.demo mmo-code.align label, .demo mmo-code.justify label {
  width: 45%;
}

.demo mmo-code.align label .hflex.gap div {
  padding: 0;
}

.demo mmo-code.align label .hflex.gap div:nth-child(1) {
  min-width: 50px;
  min-height: 50px;
}

.demo mmo-code.align label .hflex.gap div:nth-child(2) {
  min-width: 40px;
  min-height: 40px;
}

.demo mmo-code.align label .hflex.gap div:nth-child(3) {
  min-width: 60px;
  min-height: 60px;
}

.demo .color-chart {
  padding: var(--mmo-space-md);
  text-align: center;
}

.demo .palette-name-color {
  width: 120px;
}

.demo .palette-color {
  padding: var(--mmo-space-sm) var(--mmo-space-md);
  border: 1px solid var(--mmo-color-line);
  border-radius: var(--mmo-radius-sm);
  text-align: center;
  width: 150px;
}

.demo .color-text p {
  color: var(--mmo-color-brand);
}

.demo figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--mmo-space-md);
  gap: var(--mmo-space-xs);
  border: 1px solid var(--mmo-color-line);
  position: relative;
  flex-grow: 1;
  flex-basis: 130px;
}

.demo figure:hover {
  background: var(--mmo-color-surface-2);
}

.demo figcaption {
  cursor: pointer;
}

.demo mmo-specimen figure {
  display: block;
  flex: initial;
  padding: 0;
  border: 0;
  gap: initial;
}

.demo mmo-specimen figure:hover {
  background: none;
}

.demo mmo-specimen figcaption {
  cursor: auto;
}

.demo #assets-container img {
  max-width: 230px;
  max-height: 150px;
}

.demo .icons-fontawesome figure {
  width: 90px;
  flex-basis: auto;
  flex-grow: initial;
}

.demo .icons-fontawesome figcaption {
  font-size: var(--mmo-text-sm);
}

.demo .border-solid {
  border: 3px solid var(--mmo-color-text);
}

.demo .border-dashed {
  border-left: 2px dashed var(--mmo-color-text);
  border-right: 2px dashed var(--mmo-color-text);
}

.demo .border-dotted {
  border-top: 6px dotted var(--mmo-color-text);
  border-bottom: 6px dotted var(--mmo-color-text);
}

.demo .shadow-l {
  box-shadow: -8px 0 12px -6px var(--mmo-color-brand);
}

.demo .shadow-r {
  box-shadow: 8px 0 12px -6px var(--mmo-color-brand);
}

.demo .shadow-t {
  box-shadow: 0 -8px 12px -6px var(--mmo-color-brand);
}

.demo .shadow-b {
  box-shadow: 0 8px 12px -6px var(--mmo-color-brand);
}

.demo .shadow-lt {
  box-shadow: -8px -8px 12px -6px var(--mmo-color-brand);
}

.demo .shadow-ltr {
  box-shadow: -8px -8px 12px -6px var(--mmo-color-brand), 8px -8px 12px -6px var(--mmo-color-brand);
}

.demo .shadow-ltrb {
  box-shadow: 0 0 12px 2px var(--mmo-color-brand);
}

.demo #mmo-icons {
  width: 0;
  height: 0;
}

.demo .bg-stripes {
  background-image: linear-gradient(135deg, #ffffffbf 10%, #0000 0, #0000 50%, #ffffffbf 0, #ffffffbf 60%, #0000 0, #0000);
  background-size: 7.07px 7.07px;
}

.tooltip-demo mmo-tooltip {
  position: inherit;
}

:root {
  --mmo-color-bg: #F1F3F7;
  --mmo-color-surface: #FFFFFF;
  --mmo-color-surface-2: #F8F9FB;
  --mmo-color-surface-3: #E6E9F0;
  --mmo-color-overlay: rgba(13, 18, 27, 0.55);
  --mmo-color-line: #E6E9F0;
  --mmo-color-line-strong: #D6DBE5;
  --mmo-color-text: #161C27;
  --mmo-color-text-2: #4A5468;
  --mmo-color-text-3: #8C96AB;
  --mmo-color-text-on-brand: #FFFFFF;
  --mmo-color-text-on-ink: #FFFFFF;
  --mmo-color-brand: #2F62F0;
  --mmo-color-brand-ink: #1A3CAF;
  --mmo-color-brand-soft: #EEF3FF;
  --mmo-color-brand-line: #BBCDFF;
  --mmo-color-ok: #0F8A4D;
  --mmo-color-ok-soft: #E4F6EC;
  --mmo-color-warn: #B4700B;
  --mmo-color-warn-soft: #FDF2DD;
  --mmo-color-bad: #CE2C35;
  --mmo-color-bad-soft: #FDE9EA;
  --mmo-color-info: #1F4BD8;
  --mmo-color-info-soft: #EEF3FF;
  --mmo-color-ink: #0E1730;
  --mmo-color-ink-2: #16224A;
  --mmo-color-ink-text: #B7C4DE;
  --mmo-color-ink-line: rgba(255, 255, 255, 0.12);
  --mmo-color-focus: #2F62F0;
  --mmo-color-selection: #DCE6FF;
  --mmo-color-viz-1: #2F62F0;
  --mmo-color-viz-2: #0E9BA0;
  --mmo-color-viz-3: #7A5AF0;
  --mmo-color-viz-4: #E0891B;
  --mmo-color-viz-5: #CE2C35;
  --mmo-color-viz-6: #5E7A8C;
  --mmo-space-none: 0;
  --mmo-space-xxs: 2px;
  --mmo-space-xs: 4px;
  --mmo-space-sm: 8px;
  --mmo-space-md: 12px;
  --mmo-space-lg: 16px;
  --mmo-space-xl: 24px;
  --mmo-space-xxl: 32px;
  --mmo-space-xxxl: 48px;
  --mmo-space-huge: 72px;
  --mmo-radius-xs: 6px;
  --mmo-radius-sm: 8px;
  --mmo-radius-md: 12px;
  --mmo-radius-lg: 16px;
  --mmo-radius-xl: 22px;
  --mmo-radius-full: 999px;
  --mmo-text-xxs: 11px;
  --mmo-text-xs: 12px;
  --mmo-text-sm: 13px;
  --mmo-text-md: 15px;
  --mmo-text-lg: 17px;
  --mmo-text-xl: 20px;
  --mmo-text-xxl: 24px;
  --mmo-text-h3: 19px;
  --mmo-text-h2: 26px;
  --mmo-text-h1: 34px;
  --mmo-text-display: 48px;
  --mmo-font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mmo-font-display: "Archivo", "Public Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mmo-font-prose: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mmo-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mmo-weight-normal: 400;
  --mmo-weight-medium: 500;
  --mmo-weight-semi: 600;
  --mmo-weight-bold: 700;
  --mmo-line-tight: 1.15;
  --mmo-line-snug: 1.35;
  --mmo-line-normal: 1.55;
  --mmo-line-loose: 1.72;
  --mmo-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --mmo-shadow-md: 0 6px 16px -4px rgba(16, 24, 40, 0.1), 0 2px 6px -2px rgba(16, 24, 40, 0.06);
  --mmo-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.18), 0 6px 14px -6px rgba(16, 24, 40, 0.1);
  --mmo-motion-fast: 120ms;
  --mmo-motion-base: 180ms;
  --mmo-motion-slow: 260ms;
  --mmo-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mmo-z-base: 1;
  --mmo-z-sticky: 100;
  --mmo-z-drawer: 200;
  --mmo-z-overlay: 300;
  --mmo-z-popover: 400;
  --mmo-z-toast: 500;
  --mmo-layout-header: 53px;
  --mmo-layout-statusbar: 30px;
  --mmo-layout-sidebar: 232px;
  --mmo-layout-rail: 62px;
  --mmo-layout-panel: 340px;
  --mmo-layout-content: 1180px;
  --mmo-layout-prose: 68ch;
  --mmo-layout-control: 34px;
  --mmo-layout-control-sm: 28px;
  --mmo-layout-icon: 20px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --mmo-color-bg: #0A0F18;
  --mmo-color-surface: #131A26;
  --mmo-color-surface-2: #0F1622;
  --mmo-color-surface-3: #1C2532;
  --mmo-color-overlay: rgba(2, 5, 12, 0.66);
  --mmo-color-line: #242E3E;
  --mmo-color-line-strong: #334054;
  --mmo-color-text: #E9EDF5;
  --mmo-color-text-2: #A7B1C4;
  --mmo-color-text-3: #6E7A90;
  --mmo-color-text-on-brand: #08101F;
  --mmo-color-brand: #6E95FF;
  --mmo-color-brand-ink: #A9C1FF;
  --mmo-color-brand-soft: #16213A;
  --mmo-color-brand-line: #2C3E6B;
  --mmo-color-ok: #4ADE80;
  --mmo-color-ok-soft: #10261A;
  --mmo-color-warn: #F5B546;
  --mmo-color-warn-soft: #2A2011;
  --mmo-color-bad: #FF8085;
  --mmo-color-bad-soft: #2C1416;
  --mmo-color-info: #6E95FF;
  --mmo-color-info-soft: #16213A;
  --mmo-color-ink-line: rgba(255, 255, 255, 0.14);
  --mmo-color-focus: #6E95FF;
  --mmo-color-selection: #1B2C52;
  --mmo-color-viz-1: #6E95FF;
  --mmo-color-viz-2: #2DD4BF;
  --mmo-color-viz-3: #A78BFA;
  --mmo-color-viz-4: #F5B546;
  --mmo-color-viz-5: #FF8085;
  --mmo-color-viz-6: #8FA3B5;
  --mmo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --mmo-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
  --mmo-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}

[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mmo-color-bg: #0A0F18;
    --mmo-color-surface: #131A26;
    --mmo-color-surface-2: #0F1622;
    --mmo-color-surface-3: #1C2532;
    --mmo-color-overlay: rgba(2, 5, 12, 0.66);
    --mmo-color-line: #242E3E;
    --mmo-color-line-strong: #334054;
    --mmo-color-text: #E9EDF5;
    --mmo-color-text-2: #A7B1C4;
    --mmo-color-text-3: #6E7A90;
    --mmo-color-text-on-brand: #08101F;
    --mmo-color-brand: #6E95FF;
    --mmo-color-brand-ink: #A9C1FF;
    --mmo-color-brand-soft: #16213A;
    --mmo-color-brand-line: #2C3E6B;
    --mmo-color-ok: #4ADE80;
    --mmo-color-ok-soft: #10261A;
    --mmo-color-warn: #F5B546;
    --mmo-color-warn-soft: #2A2011;
    --mmo-color-bad: #FF8085;
    --mmo-color-bad-soft: #2C1416;
    --mmo-color-info: #6E95FF;
    --mmo-color-info-soft: #16213A;
    --mmo-color-ink-line: rgba(255, 255, 255, 0.14);
    --mmo-color-focus: #6E95FF;
    --mmo-color-selection: #1B2C52;
    --mmo-color-viz-1: #6E95FF;
    --mmo-color-viz-2: #2DD4BF;
    --mmo-color-viz-3: #A78BFA;
    --mmo-color-viz-4: #F5B546;
    --mmo-color-viz-5: #FF8085;
    --mmo-color-viz-6: #8FA3B5;
    --mmo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --mmo-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
    --mmo-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  }

  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mmo-color-bg: #0A0F18;
    --mmo-color-surface: #131A26;
    --mmo-color-surface-2: #0F1622;
    --mmo-color-surface-3: #1C2532;
    --mmo-color-overlay: rgba(2, 5, 12, 0.66);
    --mmo-color-line: #242E3E;
    --mmo-color-line-strong: #334054;
    --mmo-color-text: #E9EDF5;
    --mmo-color-text-2: #A7B1C4;
    --mmo-color-text-3: #6E7A90;
    --mmo-color-text-on-brand: #08101F;
    --mmo-color-brand: #6E95FF;
    --mmo-color-brand-ink: #A9C1FF;
    --mmo-color-brand-soft: #16213A;
    --mmo-color-brand-line: #2C3E6B;
    --mmo-color-ok: #4ADE80;
    --mmo-color-ok-soft: #10261A;
    --mmo-color-warn: #F5B546;
    --mmo-color-warn-soft: #2A2011;
    --mmo-color-bad: #FF8085;
    --mmo-color-bad-soft: #2C1416;
    --mmo-color-info: #6E95FF;
    --mmo-color-info-soft: #16213A;
    --mmo-color-ink-line: rgba(255, 255, 255, 0.14);
    --mmo-color-focus: #6E95FF;
    --mmo-color-selection: #1B2C52;
    --mmo-color-viz-1: #6E95FF;
    --mmo-color-viz-2: #2DD4BF;
    --mmo-color-viz-3: #A78BFA;
    --mmo-color-viz-4: #F5B546;
    --mmo-color-viz-5: #FF8085;
    --mmo-color-viz-6: #8FA3B5;
    --mmo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --mmo-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
    --mmo-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 481px) {
  body::after {
    content: "tablet";
  }
}

@media (min-width: 981px) {
  body::after {
    content: "desktop";
  }
}

@media (min-width: 1707px) {
  body::after {
    content: "wide";
  }
}

@media (max-width: 720px) {
  .table-wrap {
    overflow-x: auto;
  }

  .prose {
    font-size: var(--mmo-text-md);
  }

  .prose h2 {
    font-size: var(--mmo-text-xl);
  }

  .prose blockquote {
    font-size: var(--mmo-text-lg);
    padding-left: var(--mmo-space-md);
  }

  .hflex:not(.keep-row) {
    flex-direction: column;
  }

  .width-1-2, .width-1-3, .width-1-4, .width-2-3, .width-3-4, .width-1-5 {
    width: 100% !important;
  }

  .flex-0 {
    flex: 0 1 auto;
  }
}

@keyframes mmo-shimmer {
  from {
    background-position: 200% 0;
  }

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

@keyframes mmo-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mmo-highlight {
  from {
    background: var(--mmo-color-warn-soft);
  }

  to {
    background: transparent;
  }
}

@media (max-width: 900px) {
  .band {
    padding: var(--mmo-space-xxxl) var(--mmo-space-lg);
  }

  .hero {
    padding: var(--mmo-space-xxxl) var(--mmo-space-lg) 0;
  }

  .steps > li {
    grid-template-columns: 32px 1fr;
    gap: var(--mmo-space-lg);
  }

  .steps > li > :last-child {
    grid-column: 2;
  }

  .site-footer {
    grid-template-columns: 1fr 1fr;
  }

  .logos {
    gap: var(--mmo-space-xl);
  }

  .post.featured {
    grid-template-columns: 1fr;
  }

  .post.featured .post-body {
    padding: var(--mmo-space-xl);
  }

  .blog-hero {
    padding: var(--mmo-space-xxl) var(--mmo-space-lg) var(--mmo-space-xl);
  }

  .article-cover {
    height: 200px;
    margin-bottom: var(--mmo-space-xxl);
  }

  .newsletter {
    padding: var(--mmo-space-xl);
  }

  .newsletter form {
    margin-left: 0;
    width: 100%;
  }

  .newsletter input {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .site-footer {
    grid-template-columns: 1fr;
  }

  .cta-band {
    padding: var(--mmo-space-xxl) var(--mmo-space-lg);
  }
}

@media (max-width: 700px) {
  .topics-hero {
    padding-top: var(--mmo-space-md);
  }

  .topics-search {
    flex: 1 1 100%;
  }
}

@media (max-width: 620px) {
  .phone-hidden {
    display: none !important;
  }
}

@media (min-width: 621px) {
  .phone-only {
    display: none !important;
  }
}

@media print {
  .no-print, .no-print * {
    display: none !important;
  }

  .print-break-before {
    break-before: page;
  }

  .print-break-after {
    break-after: page;
  }

  body {
    background: #fff;
    color: #000;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  a[href^="#"]::after, a[href^="javascript"]::after {
    content: "";
  }

  .card, .panel, pre, table {
    box-shadow: none !important;
    break-inside: avoid;
  }
}
/*# sourceMappingURL=mmo.client.css.map */