:root {
    --mm-color-ink-900: #111111;
    --mm-color-paper-0: #ffffff;
    --mm-color-paper-25: #fdfdfd;
    --mm-color-paper-50: #fcfcfc;
    --mm-color-paper-75: #fbfbfb;
    --mm-color-paper-100: #f7f7f7;
    --mm-color-neutral-200: #f5f5f5;
    --mm-color-neutral-300: #c6c6c6;
    --mm-color-neutral-350: #d1d5db;
    --mm-color-neutral-400: #bdbdbd;
    --mm-color-neutral-600: #5f5f5f;
    --mm-color-accent-500: #eab308;
    --mm-color-accent-100: #fef9c3;
    --mm-color-accent-50: #fffbe8;
    --mm-color-positive-500: #16a34a;
    --mm-color-positive-300: #86efac;
    --mm-color-positive-100: #dcfce7;
    --mm-color-positive-50: #f0fdf4;
    --mm-color-negative-500: #b91c1c;
    --mm-color-negative-600: #991b1b;
    --mm-color-negative-300: #fca5a5;
    --mm-color-negative-100: #fee2e2;
    --mm-color-negative-50: #fef2f2;
    --mm-color-info-300: #94a3b8;
    --mm-color-info-50: #f8fafc;
    --mm-color-warning-500: #ca8a04;
    --mm-color-warning-50: #fefce8;
    --mm-color-code-bg: #0f172a;
    --mm-color-code-fg: #e2e8f0;
    --mm-color-stripe-1: #e5e7eb;
    --mm-color-stripe-2: #f3f4f6;

    --mm-ink: var(--mm-color-ink-900);
    --mm-paper: var(--mm-color-paper-0);
    --mm-subtle: var(--mm-color-neutral-200);
    --mm-border: var(--mm-color-neutral-300);
    --mm-accent: var(--mm-color-accent-500);
    --mm-positive: var(--mm-color-positive-500);
    --mm-negative: var(--mm-color-negative-500);
    --mm-muted: var(--mm-color-neutral-600);

    --mm-bg-body-start: var(--mm-paper);
    --mm-bg-body-end: var(--mm-color-paper-100);
    --mm-bg-nav: var(--mm-color-paper-75);
    --mm-bg-preview: var(--mm-color-paper-25);
    --mm-bg-empty: var(--mm-color-paper-50);
    --mm-bg-table-header: var(--mm-subtle);
    --mm-bg-kbd: var(--mm-paper);
    --mm-bg-pill: var(--mm-color-accent-50);
    --mm-bg-badge: var(--mm-paper);
    --mm-bg-badge-accent: var(--mm-color-accent-100);
    --mm-bg-badge-positive: var(--mm-color-positive-100);
    --mm-bg-badge-danger: var(--mm-color-negative-100);

    --mm-bg-alert-info: var(--mm-color-info-50);
    --mm-bg-alert-success: var(--mm-color-positive-50);
    --mm-bg-alert-warning: var(--mm-color-warning-50);
    --mm-bg-alert-error: var(--mm-color-negative-50);
    --mm-border-alert-info: var(--mm-color-info-300);
    --mm-border-alert-success: var(--mm-positive);
    --mm-border-alert-warning: var(--mm-color-warning-500);
    --mm-border-alert-error: var(--mm-negative);

    --mm-space-1: 0.25rem;
    --mm-space-2: 0.5rem;
    --mm-space-3: 0.75rem;
    --mm-space-4: 1rem;
    --mm-space-5: 1.25rem;
    --mm-space-6: 1.5rem;
    --mm-space-7: 2rem;
    --mm-space-8: 3rem;

    --mm-font-family-base: "Nimbus Mono PS", "Courier New", monospace;
    --mm-font-size-nav-title: 0.8rem;
    --mm-font-size-nav-title-desktop: 1rem;
    --mm-font-size-source: 0.82rem;
    --mm-font-size-caption: 0.75rem;
    --mm-font-size-body-strong: 0.95rem;
    --mm-font-size-title: 2rem;
    --mm-font-size-section-title: 1.55rem;

    --mm-border-width-1: 0.0625rem;
    --mm-border-width-2: 0.1rem;
    --mm-border-width-3: 0.125rem;
    --mm-border-width-6: 0.375rem;
    --mm-radius: 0;
    --mm-shadow-offset: 0.125rem;
    --mm-shadow: var(--mm-shadow-offset) var(--mm-shadow-offset) var(--mm-color-neutral-400);

    --mm-size-shell-max-width: 76.25rem;
    --mm-size-nav-icon-width: 1rem;
    --mm-size-nav-icon-height: 0.75rem;
    --mm-size-nav-max-height: 32rem;
    --mm-size-type-min-column: 9.375rem;
    --mm-size-space-label-column: 6.875rem;
    --mm-size-space-bar-height: 0.875rem;
    --mm-size-input-min-height: 2.625rem;
    --mm-size-textarea-min-height: 7rem;
    --mm-size-inline-form-min-width: 15rem;
    --mm-size-layout-sidebar-width: 16.25rem;
    --mm-size-layout-min-height-offset: 11.25rem;
    --mm-size-swatch-height: 4rem;

    --mm-motion-duration-nav-expand: 280ms;
    --mm-motion-duration-nav-fade: 220ms;
    --mm-motion-duration-nav-state-lock: 300ms;
    --mm-motion-ease-standard: ease;

    --mm-space-nav-item-gap: 0.35rem;
    --mm-space-heading-top: 0.4rem;
    --mm-space-source-padding: 0.8rem;
    --mm-space-pill-y: 0.2rem;
    --mm-space-pill-x: 0.6rem;
    --mm-space-control-y: 0.55rem;
    --mm-space-control-x: 0.75rem;
    --mm-space-badge-y: 0.2rem;
    --mm-space-badge-x: 0.55rem;
    --mm-space-alert-y: 0.8rem;
    --mm-space-alert-x: 0.9rem;
    --mm-space-table-cell-y: 0.55rem;
    --mm-space-table-cell-x: 0.65rem;
    --mm-space-kbd-y: 0.1rem;
    --mm-space-kbd-x: 0.38rem;
    --mm-space-checkbox-offset: 0.2rem;

    --mm-gap-type-scale: 0.6rem;
    --mm-gap-space-row: 0.6rem;
    --mm-gap-alert: 0.35rem;
    --mm-gap-empty: 0.65rem;
    --mm-gap-field: 0.35rem;

    --mm-position-sticky-top: 0;

    --mm-btn-bg: var(--mm-paper);
    --mm-btn-bg-hover: var(--mm-subtle);
    --mm-btn-fg: var(--mm-ink);
    --mm-btn-border: var(--mm-border);
    --mm-btn-shadow: var(--mm-shadow);
    --mm-btn-primary-bg: var(--mm-accent);
    --mm-btn-primary-bg-hover: var(--mm-color-warning-500);
    --mm-btn-primary-fg: var(--mm-ink);
    --mm-btn-danger-bg: var(--mm-negative);
    --mm-btn-danger-bg-hover: var(--mm-color-negative-600);
    --mm-btn-danger-fg: var(--mm-paper);
    --mm-btn-disabled-bg: var(--mm-color-neutral-350);
    --mm-btn-disabled-fg: var(--mm-muted);
}

* {
    box-sizing: border-box;
}

body.minimui-page {
    margin: 0;
    padding: var(--mm-space-3);
    background: linear-gradient(180deg, var(--mm-bg-body-start) 0%, var(--mm-bg-body-end) 100%);
    color: var(--mm-ink);
    font-family: var(--mm-font-family-base);
}

.mm-shell {
    max-width: var(--mm-size-shell-max-width);
    margin: 0 auto;
    min-width: 0;
}

.mm-top {
    border: var(--mm-border-width-1) solid var(--mm-border);
    padding: var(--mm-space-5);
    background: var(--mm-paper);
}

.mm-top h1 {
    margin: 0;
    font-size: var(--mm-font-size-title);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.mm-top p {
    margin: var(--mm-space-3) 0 0;
    color: var(--mm-muted);
    max-width: 70ch;
}

.mm-layout {
    display: grid;
    grid-template-columns: 1fr;
    border: var(--mm-border-width-1) solid var(--mm-border);
    border-top: 0;
    min-height: auto;
}

.mm-nav {
    border-right: 0;
    border-bottom: var(--mm-border-width-1) solid var(--mm-border);
    background: var(--mm-bg-nav);
    position: static;
    top: auto;
    align-self: start;
}

.mm-nav-title {
    display: block;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--mm-font-size-nav-title);
    color: var(--mm-muted);
}

.mm-nav-disclosure {
    width: 100%;
}

.mm-nav-mobile {
    display: block;
}

.mm-nav-desktop {
    display: none;
}

.mm-nav-disclosure summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mm-space-4);
}

.mm-nav-disclosure summary::-webkit-details-marker {
    display: none;
}

.mm-nav-icon {
  position: relative;
  display: inline-block;
  width: var(--mm-size-nav-icon-width);
  height: var(--mm-size-nav-icon-height);
  border-top: var(--mm-border-width-2) solid currentColor;
  border-bottom: var(--mm-border-width-2) solid currentColor;
}

.mm-nav-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: var(--mm-border-width-2) solid currentColor;
  transform: translateY(-50%);
}

.mm-nav ol {
    padding: var(--mm-space-4);
}

.mm-nav-mobile > ol {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition:
        max-height var(--mm-motion-duration-nav-expand) var(--mm-motion-ease-standard),
        opacity var(--mm-motion-duration-nav-fade) var(--mm-motion-ease-standard),
        margin-top var(--mm-motion-duration-nav-expand) var(--mm-motion-ease-standard);
}

.mm-nav-mobile[open] > ol,
.mm-nav-mobile.is-open > ol {
    max-height: var(--mm-size-nav-max-height);
    opacity: 1;
    margin-top: var(--mm-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .mm-nav-mobile > ol {
    transition: none;
  }
}

.mm-nav li + li {
    margin-top: var(--mm-space-nav-item-gap);
}

.mm-nav a {
    color: var(--mm-ink);
    text-decoration: none;
    border-bottom: var(--mm-border-width-3) solid transparent;
}

.mm-nav a:hover {
    text-decoration: underline;
}

.mm-nav a[aria-current="true"] {
    font-weight: 700;
    border-bottom-color: var(--mm-ink);
}

.mm-content {
    display: grid;
    min-width: 0;
}

.mm-component {
    background: var(--mm-paper);
    border-bottom: var(--mm-border-width-1) solid var(--mm-border);
    padding: var(--mm-space-4);
    min-width: 0;
}

.mm-component > header h2 {
    margin: var(--mm-space-heading-top) 0 0;
    font-size: var(--mm-font-size-section-title);
    overflow-wrap: anywhere;
}

.mm-summary {
    margin: var(--mm-space-2) 0 0;
    color: var(--mm-muted);
}

.mm-preview {
    margin-top: var(--mm-space-4);
    border: var(--mm-border-width-1) dashed var(--mm-border);
    padding: var(--mm-space-4);
    display: grid;
    gap: var(--mm-space-3);
    background: var(--mm-bg-preview);
    min-width: 0;
    overflow-x: auto;
}

.mm-source {
    margin-top: var(--mm-space-4);
}

.mm-source summary {
    cursor: pointer;
}

.mm-source pre {
    margin: var(--mm-space-3) 0 0;
    background: var(--mm-color-code-bg);
    color: var(--mm-color-code-fg);
    font-size: var(--mm-font-size-source);
    overflow-x: auto;
    padding: var(--mm-space-source-padding);
}

.mm-token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--mm-size-type-min-column), 1fr));
    gap: var(--mm-space-3);
}

.mm-swatch {
    border: var(--mm-border-width-1) solid var(--mm-border);
}

.mm-swatch-chip {
    height: var(--mm-size-swatch-height);
    border-bottom: var(--mm-border-width-1) solid var(--mm-border);
}

.mm-swatch-label {
    padding: var(--mm-space-2);
    font-size: var(--mm-font-size-source);
}

.mm-swatch-chip--ink {
    background: var(--mm-ink);
}

.mm-swatch-chip--paper {
    background: var(--mm-paper);
}

.mm-swatch-chip--border {
    background: var(--mm-border);
}

.mm-swatch-chip--accent {
    background: var(--mm-accent);
}

.mm-swatch-chip--positive {
    background: var(--mm-positive);
}

.mm-swatch-chip--negative {
    background: var(--mm-negative);
}

.mm-type-scale {
    display: grid;
    gap: var(--mm-gap-type-scale);
}

.mm-space-scale {
    display: grid;
    gap: var(--mm-space-2);
}

.mm-space-row {
    display: grid;
    grid-template-columns: var(--mm-size-space-label-column) 1fr;
    align-items: center;
    gap: var(--mm-gap-space-row);
}

.mm-space-bar {
    border: var(--mm-border-width-1) solid var(--mm-border);
    height: var(--mm-size-space-bar-height);
    background: repeating-linear-gradient(
        -45deg,
        var(--mm-color-stripe-1),
        var(--mm-color-stripe-1) var(--mm-border-width-6),
        var(--mm-color-stripe-2) var(--mm-border-width-6),
        var(--mm-color-stripe-2) calc(var(--mm-border-width-6) * 2)
    );
}

.mm-space-bar--1 {
    width: calc(var(--mm-space-1) * 3);
}

.mm-space-bar--2 {
    width: calc(var(--mm-space-2) * 3);
}

.mm-space-bar--3 {
    width: calc(var(--mm-space-3) * 3);
}

.mm-space-bar--4 {
    width: calc(var(--mm-space-4) * 3);
}

.mm-space-bar--5 {
    width: calc(var(--mm-space-6) * 3);
}

.mm-space-bar--6 {
    width: calc(var(--mm-space-7) * 3);
}

.mm-space-bar--7 {
    width: calc(var(--mm-space-8) * 3);
}

.mm-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-space-2);
}

.mm-inline-list--center {
    justify-content: center;
}

.mm-card {
    border: var(--mm-border-width-1) solid var(--mm-border);
    padding: var(--mm-space-4);
    background: var(--mm-paper);
}

.mm-pill {
    border: var(--mm-border-width-1) solid var(--mm-border);
    background: var(--mm-bg-pill);
    padding: var(--mm-space-pill-y) var(--mm-space-pill-x);
    font-size: var(--mm-font-size-nav-title);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mm-input {
    border: var(--mm-border-width-1) solid var(--mm-border);
    padding: var(--mm-space-control-y) var(--mm-space-control-x);
    min-height: var(--mm-size-input-min-height);
    font: inherit;
    width: 100%;
}

.mm-stack {
    display: grid;
    gap: var(--mm-space-3);
}

.mm-mini-layout {
    border: var(--mm-border-width-1) solid var(--mm-border);
}

.mm-mini-layout > div {
    border-bottom: var(--mm-border-width-1) solid var(--mm-border);
    padding: var(--mm-space-3) var(--mm-space-4);
}

.mm-mini-layout > div:last-child {
    border-bottom: 0;
}

.mm-badge {
    display: inline-flex;
    align-items: center;
    border: var(--mm-border-width-1) solid var(--mm-border);
    padding: var(--mm-space-badge-y) var(--mm-space-badge-x);
    font-size: var(--mm-font-size-caption);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--mm-bg-badge);
}

.mm-badge--accent {
    background: var(--mm-bg-badge-accent);
}

.mm-badge--positive {
    background: var(--mm-bg-badge-positive);
    border-color: var(--mm-color-positive-300);
}

.mm-badge--danger {
    background: var(--mm-bg-badge-danger);
    border-color: var(--mm-color-negative-300);
}

.mm-alert {
    border: var(--mm-border-width-1) solid var(--mm-border);
    border-left: var(--mm-border-width-6) solid var(--mm-border);
    padding: var(--mm-space-alert-y) var(--mm-space-alert-x);
    display: grid;
    gap: var(--mm-gap-alert);
}

.mm-alert h4 {
    margin: 0;
    font-size: var(--mm-font-size-body-strong);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mm-alert p {
    margin: 0;
}

.mm-alert--info {
    border-left-color: var(--mm-border-alert-info);
    background: var(--mm-bg-alert-info);
}

.mm-alert--success {
    border-left-color: var(--mm-border-alert-success);
    background: var(--mm-bg-alert-success);
}

.mm-alert--warning {
    border-left-color: var(--mm-border-alert-warning);
    background: var(--mm-bg-alert-warning);
}

.mm-alert--error {
    border-left-color: var(--mm-border-alert-error);
    background: var(--mm-bg-alert-error);
}

.mm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mm-font-size-body-strong);
}

.mm-table th,
.mm-table td {
    border: var(--mm-border-width-1) solid var(--mm-border);
    padding: var(--mm-space-table-cell-y) var(--mm-space-table-cell-x);
    text-align: left;
    vertical-align: top;
}

.mm-table th {
    background: var(--mm-bg-table-header);
    font-size: var(--mm-font-size-source);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mm-kbd {
    border: var(--mm-border-width-1) solid var(--mm-border);
    background: var(--mm-bg-kbd);
    padding: var(--mm-space-kbd-y) var(--mm-space-kbd-x);
    font-size: var(--mm-font-size-caption);
}

.mm-empty {
    border: var(--mm-border-width-1) dashed var(--mm-border);
    padding: var(--mm-space-5);
    text-align: center;
    display: grid;
    gap: var(--mm-gap-empty);
    background: var(--mm-bg-empty);
}

.mm-empty h4,
.mm-empty p {
    margin: 0;
}

.mm-field {
    display: grid;
    gap: var(--mm-gap-field);
}

.mm-field label {
    font-size: var(--mm-font-size-source);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mm-help {
    margin: 0;
    color: var(--mm-muted);
    font-size: var(--mm-font-size-source);
}

.mm-text-muted {
    color: var(--mm-muted);
}

.mm-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mm-space-3);
}

.mm-select,
.mm-textarea {
    border: var(--mm-border-width-1) solid var(--mm-border);
    min-height: var(--mm-size-input-min-height);
    padding: var(--mm-space-control-y) var(--mm-space-control-x);
    font: inherit;
    background: var(--mm-paper);
    width: 100%;
}

.mm-textarea {
    min-height: var(--mm-size-textarea-min-height);
    resize: vertical;
}

.mm-checkbox-row {
    display: flex;
    align-items: start;
    gap: var(--mm-space-2);
}

.mm-checkbox-row input {
    margin-top: var(--mm-space-checkbox-offset);
}

.mm-form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--mm-space-2);
    align-items: center;
    width: 100%;
}

.mm-form-actions .btn {
    top: 0;
    width: 100%;
}

.mm-inline-form {
    display: grid;
    gap: var(--mm-space-2);
    width: 100%;
}

.mm-inline-form .mm-input {
    min-width: 0;
    border-right: var(--mm-border-width-1) solid var(--mm-border);
}

body.minimui-page .btn {
    top: 0;
    border-color: var(--mm-btn-border);
    background: var(--mm-btn-bg);
    color: var(--mm-btn-fg);
    box-shadow: var(--mm-btn-shadow);
}

body.minimui-page .btn:hover:not(:disabled) {
    background: var(--mm-btn-bg-hover);
    color: var(--mm-btn-fg);
}

body.minimui-page .btn:disabled {
    background: var(--mm-btn-disabled-bg);
    color: var(--mm-btn-disabled-fg);
}

.mm-btn--secondary {
    --mm-btn-bg: var(--mm-paper);
    --mm-btn-bg-hover: var(--mm-subtle);
    --mm-btn-fg: var(--mm-ink);
    --mm-btn-border: var(--mm-border);
}

.mm-btn--primary {
    --mm-btn-bg: var(--mm-btn-primary-bg);
    --mm-btn-bg-hover: var(--mm-btn-primary-bg-hover);
    --mm-btn-fg: var(--mm-btn-primary-fg);
    --mm-btn-border: var(--mm-btn-primary-bg);
}

.mm-btn--danger {
    --mm-btn-bg: var(--mm-btn-danger-bg);
    --mm-btn-bg-hover: var(--mm-btn-danger-bg-hover);
    --mm-btn-fg: var(--mm-btn-danger-fg);
    --mm-btn-border: var(--mm-btn-danger-bg);
}

.mm-inline-form .btn {
    top: 0;
    width: 100%;
}

@media (min-width: 40rem) {
    body.minimui-page {
        padding: var(--mm-space-5);
    }

    .mm-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mm-inline-form {
        display: flex;
        gap: 0;
        align-items: stretch;
    }

    .mm-inline-form .mm-input {
        flex: 1;
        min-width: var(--mm-size-inline-form-min-width);
        border-right: 0;
    }

    .mm-inline-form .btn {
        width: auto;
    }

    .mm-form-actions {
        flex-direction: row;
        width: auto;
    }

    .mm-form-actions .btn {
        width: auto;
    }
}

@media (min-width: 58rem) {
    body.minimui-page {
        padding: var(--mm-space-7);
    }

    .mm-layout {
        grid-template-columns: var(--mm-size-layout-sidebar-width) 1fr;
        min-height: calc(100vh - var(--mm-size-layout-min-height-offset));
        min-height: calc(100dvh - var(--mm-size-layout-min-height-offset));
    }

    .mm-nav {
        border-right: var(--mm-border-width-1) solid var(--mm-border);
        border-bottom: 0;
        position: static;
        align-self: stretch;
    }

    .mm-nav-mobile {
        display: none;
    }

    .mm-nav-desktop {
        display: block;
        position: sticky;
        top: var(--mm-position-sticky-top);
    }

    .mm-nav-desktop .mm-nav-title {
        font-size: var(--mm-font-size-nav-title-desktop);
        text-align: center;
        padding: var(--mm-space-4);
        border-bottom: var(--mm-border-width-1) solid var(--mm-border);
    }
}

.mm-marketing-shell {
    max-width: none;
    margin: 0;
}