/* Matrix Calm 1.0.0 — generated from tokens.json; design inputs, not an implemented UI. */
:root, [data-theme="light"] {
  --matrix-brand: #0066CC;
  --matrix-brand-hover: #005BB5;
  --matrix-brand-pressed: #004F9E;
  --matrix-on-brand: #FFFFFF;
  --matrix-link: #0066CC;
  --matrix-canvas: #F5F5F7;
  --matrix-surface: #FFFFFF;
  --matrix-surface-raised: #FFFFFF;
  --matrix-surface-subtle: #F5F5F7;
  --matrix-text: #1D1D1F;
  --matrix-muted: #6E6E73;
  --matrix-placeholder: #6E6E73;
  --matrix-border: #D2D2D7;
  --matrix-control-border: #86868B;
  --matrix-focus: #0066CC;
  --matrix-focus-gap: #FFFFFF;
  --matrix-selected: #EAF3FF;
  --matrix-selected-text: #0055AA;
  --matrix-hover: #F5F5F7;
  --matrix-pressed: #E8E8ED;
  --matrix-disabled-background: #E8E8ED;
  --matrix-disabled-text: #6E6E73;
  --matrix-success: #1D7339;
  --matrix-success-background: #EDF8F0;
  --matrix-warning: #8A5600;
  --matrix-warning-background: #FFF5DB;
  --matrix-danger: #B42318;
  --matrix-danger-background: #FFF0EE;
  --matrix-on-danger: #FFFFFF;
  --matrix-overlay: rgba(0, 0, 0, 0.32);
  --matrix-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
  --matrix-shadow-popover: 0 8px 28px rgba(0, 0, 0, 0.12);
  --matrix-shadow-dialog: 0 20px 60px rgba(0, 0, 0, 0.18);
  color-scheme: light;
}
:root {
  --matrix-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  --matrix-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --matrix-radius-control: 10px;
  --matrix-radius-panel: 16px;
  --matrix-radius-menu: 12px;
  --matrix-radius-dialog: 20px;
  --matrix-radius-sheet: 24px;
  --matrix-radius-pill: 999px;
  --matrix-space-4: 0.25rem;
  --matrix-space-8: 0.5rem;
  --matrix-space-12: 0.75rem;
  --matrix-space-16: 1rem;
  --matrix-space-20: 1.25rem;
  --matrix-space-24: 1.5rem;
  --matrix-space-32: 2rem;
  --matrix-space-40: 2.5rem;
  --matrix-space-48: 3rem;
  --matrix-space-64: 4rem;
  --matrix-space-80: 5rem;
  --matrix-space-96: 6rem;
  --matrix-type-display: 3.5rem;
  --matrix-leading-display: 1.07143;
  --matrix-type-page-title: 2rem;
  --matrix-leading-page-title: 1.18750;
  --matrix-type-section-title: 1.375rem;
  --matrix-leading-section-title: 1.27273;
  --matrix-type-item-title: 1.0625rem;
  --matrix-leading-item-title: 1.41176;
  --matrix-type-body: 1.0625rem;
  --matrix-leading-body: 1.52941;
  --matrix-type-control: 1rem;
  --matrix-leading-control: 1.37500;
  --matrix-type-table: 0.875rem;
  --matrix-leading-table: 1.42857;
  --matrix-type-caption: 0.8125rem;
  --matrix-leading-caption: 1.38462;
  --matrix-type-code: 0.875rem;
  --matrix-leading-code: 1.57143;
  --matrix-motion-fast: 120ms;
  --matrix-motion-standard: 180ms;
  --matrix-motion-dialog: 240ms;
  --matrix-ease: cubic-bezier(0.2, 0, 0, 1);
  --matrix-control-min-height: 40px;
  --matrix-touch-min: 48px;
  --matrix-nav-opacity: 1;
  --matrix-nav-blur: 0px;
}
[data-theme="dark"] {
  --matrix-brand: #2997FF;
  --matrix-brand-hover: #50AAFF;
  --matrix-brand-pressed: #1685E8;
  --matrix-on-brand: #001A33;
  --matrix-link: #2997FF;
  --matrix-canvas: #000000;
  --matrix-surface: #1D1D1F;
  --matrix-surface-raised: #2C2C2E;
  --matrix-surface-subtle: #242426;
  --matrix-text: #F5F5F7;
  --matrix-muted: #AEAEB2;
  --matrix-placeholder: #AEAEB2;
  --matrix-border: #48484A;
  --matrix-control-border: #8E8E93;
  --matrix-focus: #64B5FF;
  --matrix-focus-gap: #000000;
  --matrix-selected: #102C46;
  --matrix-selected-text: #7ABEFF;
  --matrix-hover: #2C2C2E;
  --matrix-pressed: #38383A;
  --matrix-disabled-background: #38383A;
  --matrix-disabled-text: #AEAEB2;
  --matrix-success: #63D48A;
  --matrix-success-background: #102F1E;
  --matrix-warning: #FFD166;
  --matrix-warning-background: #382B0F;
  --matrix-danger: #FF8A80;
  --matrix-danger-background: #412321;
  --matrix-on-danger: #330600;
  --matrix-overlay: rgba(0, 0, 0, 0.60);
  --matrix-shadow-card: none;
  --matrix-shadow-popover: 0 8px 28px rgba(0, 0, 0, 0.36);
  --matrix-shadow-dialog: 0 20px 60px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]), [data-theme="system"] {
  --matrix-brand: #2997FF;
  --matrix-brand-hover: #50AAFF;
  --matrix-brand-pressed: #1685E8;
  --matrix-on-brand: #001A33;
  --matrix-link: #2997FF;
  --matrix-canvas: #000000;
  --matrix-surface: #1D1D1F;
  --matrix-surface-raised: #2C2C2E;
  --matrix-surface-subtle: #242426;
  --matrix-text: #F5F5F7;
  --matrix-muted: #AEAEB2;
  --matrix-placeholder: #AEAEB2;
  --matrix-border: #48484A;
  --matrix-control-border: #8E8E93;
  --matrix-focus: #64B5FF;
  --matrix-focus-gap: #000000;
  --matrix-selected: #102C46;
  --matrix-selected-text: #7ABEFF;
  --matrix-hover: #2C2C2E;
  --matrix-pressed: #38383A;
  --matrix-disabled-background: #38383A;
  --matrix-disabled-text: #AEAEB2;
  --matrix-success: #63D48A;
  --matrix-success-background: #102F1E;
  --matrix-warning: #FFD166;
  --matrix-warning-background: #382B0F;
  --matrix-danger: #FF8A80;
  --matrix-danger-background: #412321;
  --matrix-on-danger: #330600;
  --matrix-overlay: rgba(0, 0, 0, 0.60);
  --matrix-shadow-card: none;
  --matrix-shadow-popover: 0 8px 28px rgba(0, 0, 0, 0.36);
  --matrix-shadow-dialog: 0 20px 60px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

    .matrix-ui { font-family: var(--matrix-font); color: var(--matrix-text); background: var(--matrix-canvas); font-size: var(--matrix-type-body); line-height: var(--matrix-leading-body); letter-spacing: 0; }
    .matrix-ui *, .matrix-ui *::before, .matrix-ui *::after { box-sizing: border-box; }
    .matrix-ui :is(button, input, select, textarea) { font: inherit; }
    .matrix-ui :is(input, select, textarea) { font-size: 1rem; }
    .matrix-ui :is(button, input, select) { min-height: var(--matrix-control-min-height); }
    .matrix-ui :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--matrix-focus); outline-offset: 3px; }
    .matrix-ui :lang(zh) { letter-spacing: 0; }
    .matrix-number { font-variant-numeric: tabular-nums; }
    .matrix-primary { background: var(--matrix-brand); color: var(--matrix-on-brand); border: 1px solid transparent; border-radius: var(--matrix-radius-control); padding: 10px 18px; font-weight: 500; transition: background-color var(--matrix-motion-fast) var(--matrix-ease); }
    @media (hover: hover) { .matrix-primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--matrix-brand-hover); } }
    .matrix-primary:not(:disabled):not([aria-disabled="true"]):active { background: var(--matrix-brand-pressed); }
    .matrix-primary:disabled, .matrix-primary[aria-disabled="true"] { background: var(--matrix-disabled-background); color: var(--matrix-disabled-text); cursor: not-allowed; }
    .matrix-panel { background: var(--matrix-surface); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-panel); }
    .matrix-input { background: var(--matrix-surface); color: var(--matrix-text); border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); padding: 10px 12px; }
    .matrix-input::placeholder { color: var(--matrix-placeholder); opacity: 1; }
    .matrix-input[aria-invalid="true"] { border-color: var(--matrix-danger); }
    .matrix-error { color: var(--matrix-danger); }
    .matrix-muted { color: var(--matrix-muted); }
    .matrix-navigation { background: var(--matrix-surface); }
    /* Translucency is off by default. It can only be opted into for tested navigation surfaces. */
    @supports (backdrop-filter: blur(20px)) {
      [data-transparency="enhanced"] { --matrix-nav-opacity: .94; --matrix-nav-blur: 20px; }
      [data-transparency="enhanced"] .matrix-navigation { background: color-mix(in srgb, var(--matrix-surface) 94%, transparent); backdrop-filter: blur(var(--matrix-nav-blur)); }
    }
    [data-transparency="reduced"] .matrix-navigation { background: var(--matrix-surface); backdrop-filter: none; }
    @media (prefers-reduced-transparency: reduce) {
      .matrix-navigation, [data-transparency="enhanced"] .matrix-navigation { background: var(--matrix-surface); backdrop-filter: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      :root { --matrix-motion-fast: 0ms; --matrix-motion-standard: 0ms; --matrix-motion-dialog: 0ms; }
      .matrix-ui, .matrix-ui * { scroll-behavior: auto !important; }
      .matrix-ui *, .matrix-ui *::before, .matrix-ui *::after { animation: none !important; transition: none !important; }
    }
    @media (prefers-contrast: more) {
      :root, [data-theme] { --matrix-control-border: var(--matrix-text); --matrix-border: var(--matrix-text); }
      .matrix-navigation, [data-transparency="enhanced"] .matrix-navigation { background: var(--matrix-surface); backdrop-filter: none; }
    }
    @media (forced-colors: active) {
      .matrix-ui :is(button, input, select, textarea) { border: 1px solid ButtonText; }
      .matrix-ui :focus-visible { outline-color: Highlight; }
      .matrix-primary { color: ButtonText; background: ButtonFace; }
    }
    @media (pointer: coarse) {
      .matrix-ui :is(button, input, select, summary, [role="button"]) { min-height: var(--matrix-touch-min); }
      .matrix-ui .matrix-icon-button { min-width: var(--matrix-touch-min); }
    }