/* Inazda Motion · Clean v1.0.0 (motion-clean.css)
   Micro-interactions for UI components in the Inazda Clean direction: motion is feedback, not a show.
   One file, no build step. Pair with motion-clean.js (ES module) for the stateful pieces.

   Tokens
   - --mc-* sit on top of the Clean --cl-* tokens. The --cl-* defaults below have zero specificity
     (:where), so the Inazda clean.css skin, or your own :root { --cl-accent: ... }, always wins.
   - Durations 120 / 160 / 200 / 280 ms, easing cubic-bezier(.2, 0, 0, 1), a gentle spring via linear()
     (1.5 % overshoot) with a cubic-bezier fallback.
   - --mc-motion is 1 normally and 0 under prefers-reduced-motion or html[data-motion="reduce"].
     Every movement (translate, scale, rotate, draw) is multiplied by it; colour and opacity stay.
   Each block is fenced with @mc:<name> / @mc:end so you can copy only what you use. */

/* @mc:tokens */
:where(:root) {
  --cl-bg: #ffffff; --cl-canvas: #f5f5f4; --cl-subtle: #fafaf9; --cl-surface: #ffffff; --cl-sunken: #f5f5f4;
  --cl-border: #e7e5e4; --cl-border-strong: #d6d3d1; --cl-field: #8c8782;
  --cl-text: #1c1917; --cl-muted: #57534e; --cl-faint: #78716c;
  --cl-ink: #1c1917; --cl-on-ink: #ffffff;
  --cl-info: #2558d6; --cl-success: #15803d; --cl-warning: #b45309; --cl-danger: #b91c1c;
  --cl-info-ink: #1e40af; --cl-success-ink: #166534; --cl-warning-ink: #92400e; --cl-danger-ink: #991b1b; --cl-neutral-ink: #44403c;
  --cl-tint: 10%;
  --cl-accent: #1f6f4a; --cl-accent-strong: #195b3d; --cl-on-accent: #ffffff;
  --cl-font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --cl-mono: "Geist Mono", ui-monospace, monospace;
  --cl-r-sm: 6px; --cl-r: 8px; --cl-r-lg: 12px;
  --cl-pop: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .08);
  --cl-scrim: rgb(12 12 11 / .32);

  /* motion */
  --mc-fast: 120ms;     /* press, hover, exits */
  --mc-base: 160ms;     /* state changes, colour */
  --mc-slow: 200ms;     /* enters, crossfades */
  --mc-settle: 280ms;   /* springs that settle */
  --mc-ease: cubic-bezier(.2, 0, 0, 1);
  --mc-spring: var(--mc-ease);
  --mc-motion: 1;
  --mc-press: .97;

  /* surfaces and state */
  --mc-ring: var(--cl-accent);
  --mc-raised: #ffffff;
  --mc-bone: #efeeec;
  --mc-lift: 0 1px 2px rgb(0 0 0 / .06), 0 12px 32px rgb(0 0 0 / .12);
  --mc-on-success: #ffffff; --mc-on-danger: #ffffff;
  --mc-info-soft: color-mix(in srgb, var(--cl-info) var(--cl-tint), var(--cl-surface));
  --mc-success-soft: color-mix(in srgb, var(--cl-success) var(--cl-tint), var(--cl-surface));
  --mc-warning-soft: color-mix(in srgb, var(--cl-warning) var(--cl-tint), var(--cl-surface));
  --mc-danger-soft: color-mix(in srgb, var(--cl-danger) var(--cl-tint), var(--cl-surface));
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) {
    --cl-bg: #0c0c0b; --cl-canvas: #111110; --cl-subtle: #141413; --cl-surface: #161615; --cl-sunken: #1c1b1a;
    --cl-border: #292827; --cl-border-strong: #3a3836; --cl-field: #6b6661;
    --cl-text: #ededec; --cl-muted: #a8a29e; --cl-faint: #938d87;
    --cl-ink: #ededec; --cl-on-ink: #0c0c0b;
    --cl-info: #7aa2ff; --cl-success: #4ade80; --cl-warning: #f59e0b; --cl-danger: #f87171;
    --cl-info-ink: #7aa2ff; --cl-success-ink: #4ade80; --cl-warning-ink: #f59e0b; --cl-danger-ink: #f87171; --cl-neutral-ink: #d6d3d1;
    --cl-tint: 14%;
    --cl-accent: #4fbf8b; --cl-accent-strong: #7dd3aa; --cl-on-accent: #0c0c0b;
    --cl-pop: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .45);
    --cl-scrim: rgb(0 0 0 / .55);
    --mc-raised: #2a2927; --mc-bone: #262524;
    --mc-lift: 0 1px 2px rgb(0 0 0 / .5), 0 12px 32px rgb(0 0 0 / .55);
    --mc-on-success: #0c0c0b; --mc-on-danger: #0c0c0b;
  }
}
:where(:root[data-theme="dark"]) {
  --cl-bg: #0c0c0b; --cl-canvas: #111110; --cl-subtle: #141413; --cl-surface: #161615; --cl-sunken: #1c1b1a;
  --cl-border: #292827; --cl-border-strong: #3a3836; --cl-field: #6b6661;
  --cl-text: #ededec; --cl-muted: #a8a29e; --cl-faint: #938d87;
  --cl-ink: #ededec; --cl-on-ink: #0c0c0b;
  --cl-info: #7aa2ff; --cl-success: #4ade80; --cl-warning: #f59e0b; --cl-danger: #f87171;
  --cl-info-ink: #7aa2ff; --cl-success-ink: #4ade80; --cl-warning-ink: #f59e0b; --cl-danger-ink: #f87171; --cl-neutral-ink: #d6d3d1;
  --cl-tint: 14%;
  --cl-accent: #4fbf8b; --cl-accent-strong: #7dd3aa; --cl-on-accent: #0c0c0b;
  --cl-pop: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .45);
  --cl-scrim: rgb(0 0 0 / .55);
  --mc-raised: #2a2927; --mc-bone: #262524;
  --mc-lift: 0 1px 2px rgb(0 0 0 / .5), 0 12px 32px rgb(0 0 0 / .55);
  --mc-on-success: #0c0c0b; --mc-on-danger: #0c0c0b;
}
/* gentle spring: 280 ms, 1.5 % overshoot. Browsers without linear() keep the ease-out curve. */
@supports (transition-timing-function: linear(0, 1)) {
  :where(:root) {
    --mc-spring: linear(0, 0.047, 0.156, 0.292, 0.432, 0.563, 0.678, 0.772, 0.847, 0.904, 0.946, 0.975, 0.994,
      1.006, 1.012, 1.015, 1.015, 1.014, 1.012, 1.01, 1.008, 1.006, 1.004, 1.003, 1);
  }
}
@media (prefers-reduced-motion: reduce) { :where(:root:not([data-motion="full"])) { --mc-motion: 0; } }
:where(:root[data-motion="reduce"]) { --mc-motion: 0; }
/* @mc:end */

/* @mc:base */
.mc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mc-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* a path that draws itself: give the <path> pathLength="1", set --mc-draw: 0 on an ancestor to draw it */
.mc-draw path { stroke-dasharray: 1; stroke-dashoffset: var(--mc-draw, 1);
  transition: stroke-dashoffset calc(var(--mc-settle) * var(--mc-motion)) var(--mc-ease) calc(40ms * var(--mc-motion)); }
.mc-spin { animation: mc-spin 800ms linear infinite; }
.mc-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--cl-border); border-radius: 4px; background: var(--cl-surface); color: var(--cl-muted); font: 500 11px/1 var(--cl-mono); }
@keyframes mc-spin { to { rotate: 360deg; } }
@keyframes mc-fade { from { opacity: 0; } }
/* @mc:end */

/* @mc:button */
.mc-btn {
  --mc-btn-bg: var(--cl-ink); --mc-btn-fg: var(--cl-on-ink); --mc-btn-bd: transparent;
  --mc-btn-hover: color-mix(in srgb, var(--cl-ink) 86%, var(--cl-surface));
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border: 1px solid var(--mc-btn-bd); border-radius: var(--cl-r);
  background: var(--mc-btn-bg); color: var(--mc-btn-fg); font: 500 14px/1 var(--cl-font); letter-spacing: -.005em; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--mc-fast) var(--mc-ease), border-color var(--mc-fast) var(--mc-ease), color var(--mc-fast) var(--mc-ease),
    scale calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring);
}
.mc-btn:hover { background: var(--mc-btn-hover); }
.mc-btn:active:not(:disabled), .mc-btn.is-pressed {
  scale: calc(1 - (1 - var(--mc-press)) * var(--mc-motion));
  transition-duration: var(--mc-fast), var(--mc-fast), var(--mc-fast), calc(var(--mc-fast) * var(--mc-motion));
  transition-timing-function: var(--mc-ease);
}
.mc-btn:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 2px; }
.mc-btn:disabled { opacity: .5; cursor: not-allowed; }
.mc-btn--accent { --mc-btn-bg: var(--cl-accent); --mc-btn-fg: var(--cl-on-accent); --mc-btn-hover: var(--cl-accent-strong); }
.mc-btn--quiet { --mc-btn-bg: var(--cl-surface); --mc-btn-fg: var(--cl-text); --mc-btn-bd: var(--cl-border-strong); --mc-btn-hover: var(--cl-sunken); }
.mc-btn--ghost { --mc-btn-bg: transparent; --mc-btn-fg: var(--cl-text); --mc-btn-hover: var(--cl-sunken); }
.mc-btn--danger { --mc-btn-bg: var(--cl-danger); --mc-btn-fg: var(--mc-on-danger); --mc-btn-hover: color-mix(in srgb, var(--cl-danger) 88%, var(--cl-text)); }
.mc-btn--sm { min-height: 32px; padding: 0 10px; font-size: 13px; }
.mc-btn--icon { width: 36px; padding: 0; }
.mc-btn--sm.mc-btn--icon { width: 32px; }
/* @mc:end */

/* @mc:async */
.mc-async { display: inline-grid; place-items: center; }
.mc-async > [data-show] { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px;
  opacity: 0; translate: 0 calc(5px * var(--mc-motion));
  transition: opacity var(--mc-base) var(--mc-ease), translate calc(var(--mc-base) * var(--mc-motion)) var(--mc-ease); }
.mc-async[data-prev="idle"] > [data-show="idle"], .mc-async[data-prev="loading"] > [data-show="loading"],
.mc-async[data-prev="done"] > [data-show="done"], .mc-async[data-prev="error"] > [data-show="error"] { translate: 0 calc(-5px * var(--mc-motion)); }
.mc-async:not([data-state]) > [data-show="idle"],
.mc-async[data-state="idle"] > [data-show="idle"], .mc-async[data-state="loading"] > [data-show="loading"],
.mc-async[data-state="done"] > [data-show="done"], .mc-async[data-state="error"] > [data-show="error"] { opacity: 1; translate: 0 0; }
.mc-async[data-state="loading"] { cursor: progress; }
.mc-async[data-state="done"] { --mc-btn-bg: var(--cl-success); --mc-btn-fg: var(--mc-on-success); --mc-btn-hover: var(--cl-success); }
.mc-async[data-state="done"] > [data-show="done"] { --mc-draw: 0; }
.mc-spinner { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* @mc:end */

/* @mc:switch */
.mc-switch { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 999px;
  background: var(--cl-field); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--mc-base) var(--mc-ease); }
.mc-switch[aria-checked="true"] { background: var(--cl-accent); }
.mc-switch:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 2px; }
.mc-switch__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); pointer-events: none;
  transition: translate calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring), scale calc(var(--mc-base) * var(--mc-motion)) var(--mc-ease); }
.mc-switch[aria-checked="true"] .mc-switch__thumb { translate: 16px 0; }
/* squash: while pressed the thumb stretches toward where it is about to travel */
.mc-switch:active .mc-switch__thumb, .mc-switch.is-pressed .mc-switch__thumb {
  translate: calc(2px * var(--mc-motion)) 0; scale: calc(1 + .25 * var(--mc-motion)) calc(1 - .08 * var(--mc-motion)); }
.mc-switch[aria-checked="true"]:active .mc-switch__thumb, .mc-switch[aria-checked="true"].is-pressed .mc-switch__thumb {
  translate: calc(16px - 2px * var(--mc-motion)) 0; }
/* @mc:end */

/* @mc:checkbox */
.mc-checkbox { display: inline-grid; grid-template-columns: 18px auto; align-items: center; column-gap: 10px;
  color: var(--cl-text); font: 400 14px/1.4 var(--cl-font); cursor: pointer; }
.mc-checkbox > input, .mc-checkbox > .mc-checkbox__mark { grid-area: 1 / 1; }
.mc-checkbox > input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--cl-field); border-radius: var(--cl-r-sm); background: var(--cl-surface); cursor: pointer;
  transition: background-color var(--mc-fast) var(--mc-ease), border-color var(--mc-fast) var(--mc-ease),
    scale calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring); }
.mc-checkbox > input:checked { border-color: var(--cl-accent); background: var(--cl-accent); }
.mc-checkbox > input:active { scale: calc(1 - .1 * var(--mc-motion)); transition-duration: var(--mc-fast), var(--mc-fast), calc(var(--mc-fast) * var(--mc-motion)); }
.mc-checkbox > input:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 2px; }
.mc-checkbox__mark { width: 18px; height: 18px; pointer-events: none; fill: none; stroke: var(--cl-on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-checkbox__mark path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset calc(var(--mc-fast) * var(--mc-motion)) var(--mc-ease); }
.mc-checkbox > input:checked + .mc-checkbox__mark path { stroke-dashoffset: 0;
  transition-duration: calc(var(--mc-slow) * var(--mc-motion)); transition-delay: calc(40ms * var(--mc-motion)); }
.mc-checkbox > :last-child { grid-column: 2; }
/* @mc:end */

/* @mc:segmented */
.mc-seg { position: relative; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--cl-border); border-radius: var(--cl-r);
  background: var(--cl-sunken); isolation: isolate; max-width: 100%; }
.mc-seg > [role="radio"] { position: relative; z-index: 1; min-height: 28px; padding: 0 12px; border: 0; border-radius: var(--cl-r-sm);
  background: transparent; color: var(--cl-muted); font: 500 13px/1 var(--cl-font); white-space: nowrap; cursor: pointer;
  transition: color var(--mc-fast) var(--mc-ease); }
.mc-seg > [role="radio"]:hover, .mc-seg > [role="radio"][aria-checked="true"] { color: var(--cl-text); }
.mc-seg > [role="radio"]:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 1px; }
.mc-seg__ind { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; width: var(--mc-w, 0px); translate: var(--mc-x, 0px) 0;
  border-radius: var(--cl-r-sm); background: var(--mc-raised); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 0 0 1px var(--cl-border); pointer-events: none;
  transition: translate calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring), width calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring); }
.mc-seg:not(.is-ready) > [aria-checked="true"] { background: var(--mc-raised); }
.mc-seg.is-instant > .mc-seg__ind { transition: none; }
/* @mc:end */

/* @mc:tabs */
.mc-tabs__list { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--cl-border); }
.mc-tabs__list::-webkit-scrollbar { display: none; }
.mc-tabs__list > [role="tab"] { position: relative; flex: none; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--cl-r-sm) var(--cl-r-sm) 0 0;
  background: none; color: var(--cl-muted); font: 500 14px/1 var(--cl-font); white-space: nowrap; cursor: pointer;
  transition: color var(--mc-fast) var(--mc-ease); }
.mc-tabs__list > [role="tab"]:hover, .mc-tabs__list > [aria-selected="true"] { color: var(--cl-text); }
.mc-tabs__list > [role="tab"]:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: -2px; }
.mc-tabs__bar { position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; background: var(--cl-text); pointer-events: none; transform-origin: 0 0;
  transform: translateX(calc(var(--mc-x, 0) * 1px)) scaleX(calc(var(--mc-w, 0) / 100));
  transition: transform calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring); }
.mc-tabs.is-instant .mc-tabs__bar { transition: none; }
.mc-tabs__panels { display: grid; }
.mc-tabs__panels > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; padding-top: 16px;
  transition: opacity var(--mc-slow) var(--mc-ease), translate calc(var(--mc-slow) * var(--mc-motion)) var(--mc-ease), visibility 0s; }
.mc-tabs__panels > [role="tabpanel"]:not(.is-active) { opacity: 0; translate: 0 calc(4px * var(--mc-motion)); visibility: hidden;
  transition-duration: var(--mc-fast), calc(var(--mc-fast) * var(--mc-motion)), 0s; transition-delay: 0s, 0s, var(--mc-fast); }
.mc-tabs__panels > [role="tabpanel"]:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 2px; border-radius: var(--cl-r-sm); }
/* @mc:end */

/* @mc:roll */
.mc-roll { display: inline-flex; font-family: var(--cl-mono); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.mc-roll__vis { display: inline-flex; }
.mc-roll__d { display: inline-block; width: 1ch; height: 1.2em; overflow: hidden; }
.mc-roll__s { display: flex; flex-direction: column; translate: 0 calc(var(--mc-d, 0) * -1.2em);
  transition: translate calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring); }
.mc-roll__s > span { display: block; height: 1.2em; text-align: center; }
.mc-roll__s.is-instant { transition: none; }
/* @mc:end */

/* @mc:delta */
.mc-stat { display: grid; gap: 6px; justify-items: start; }
.mc-stat__label { color: var(--cl-muted); font: 500 13px/1.3 var(--cl-font); }
.mc-stat__value { position: relative; isolation: isolate; margin: 0 -6px; padding: 0 6px; border-radius: var(--cl-r-sm);
  color: var(--cl-text); font: 600 28px/1.2 var(--cl-mono); letter-spacing: -.02em; }
.mc-stat__value::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--mc-flash, var(--mc-success-soft)); opacity: 0; }
.mc-stat.is-flash .mc-stat__value::before { animation: mc-flash 900ms var(--mc-ease); }
.mc-delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px;
  background: var(--cl-sunken); color: var(--cl-neutral-ink); font: 500 13px/1.4 var(--cl-mono); font-variant-numeric: tabular-nums;
  transition: background-color var(--mc-base) var(--mc-ease), color var(--mc-base) var(--mc-ease); }
.mc-delta[data-dir="up"] { background: var(--mc-success-soft); color: var(--cl-success-ink); }
.mc-delta[data-dir="down"] { background: var(--mc-danger-soft); color: var(--cl-danger-ink); }
.mc-delta > svg { transition: rotate calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring); }
.mc-delta[data-dir="down"] > svg { rotate: 180deg; }
@keyframes mc-flash { 0%, 15% { opacity: 1; } 100% { opacity: 0; } }
/* @mc:end */

/* @mc:toast */
.mc-toaster { position: fixed; z-index: 60; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px)); height: 0; margin: 0; padding: 0; list-style: none;
  transition: height calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring); }
/* is-contained: pinned inside a positioned parent instead of the viewport */
.mc-toaster.is-contained { position: absolute; left: 16px; right: 16px; width: auto; max-width: 360px; margin-left: auto; }
.mc-toast { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px;
  padding: 12px 10px 12px 14px; overflow: hidden; border: 1px solid var(--cl-border); border-radius: var(--cl-r-lg);
  background: var(--cl-surface); color: var(--cl-text); box-shadow: var(--cl-pop); font: 400 14px/1.4 var(--cl-font);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; transform-origin: 50% 0;
  translate: var(--mc-dx, 0px) var(--mc-y, 0px); scale: var(--mc-s, 1); opacity: var(--mc-o, 1);
  transition: translate calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring), scale calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring),
    opacity var(--mc-slow) var(--mc-ease); }
.mc-toast.is-dragging { transition: none; cursor: grabbing; }
.mc-toast > * { transition: opacity var(--mc-base) var(--mc-ease); }
.mc-toaster:not(.is-expanded) > .mc-toast.is-behind > * { opacity: 0; }
.mc-toast__icon { margin-top: 1px; color: var(--cl-muted); }
.mc-toast[data-tone="success"] .mc-toast__icon { color: var(--cl-success); }
.mc-toast[data-tone="danger"] .mc-toast__icon { color: var(--cl-danger); }
.mc-toast[data-tone="info"] .mc-toast__icon { color: var(--cl-info); }
.mc-toast__title { margin: 0; font-weight: 500; }
.mc-toast__body { margin: 2px 0 0; color: var(--cl-muted); font-size: 13px; }
.mc-toast__close { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px 0 -4px; padding: 0; border: 0; border-radius: var(--cl-r-sm);
  background: none; color: var(--cl-muted); cursor: pointer; transition: background-color var(--mc-fast) var(--mc-ease), color var(--mc-fast) var(--mc-ease); }
.mc-toast__close:hover { background: var(--cl-sunken); color: var(--cl-text); }
.mc-toast__close:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 0; }
/* @mc:end */

/* @mc:validate */
.mc-field { display: grid; gap: 6px; }
.mc-field__label { color: var(--cl-text); font: 500 14px/1.4 var(--cl-font); }
.mc-field__control { position: relative; }
.mc-input { width: 100%; min-height: 40px; padding: 0 38px 0 12px; border: 1px solid var(--cl-field); border-radius: var(--cl-r);
  background: var(--cl-surface); color: var(--cl-text); font: 400 15px/1.4 var(--cl-font);
  transition: border-color var(--mc-fast) var(--mc-ease); }
.mc-input::placeholder { color: var(--cl-faint); }
.mc-input:hover { border-color: var(--cl-muted); }
.mc-input:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 2px; }
.mc-input[aria-invalid="true"] { border-color: var(--cl-danger); }
.mc-input[aria-invalid="true"]:focus-visible { outline-color: var(--cl-danger); }
.mc-field__ok { position: absolute; top: 50%; right: 12px; margin-top: -8px; color: var(--cl-success); pointer-events: none;
  opacity: 0; scale: calc(1 - .3 * var(--mc-motion));
  transition: opacity var(--mc-base) var(--mc-ease), scale calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring); }
.mc-field[data-state="valid"] .mc-field__ok { opacity: 1; scale: 1; --mc-draw: 0; }
/* hint and error share one reserved line: nothing below moves when the error appears */
.mc-field__msg { display: grid; font: 400 13px/1.5 var(--cl-font); }
.mc-field__msg > * { grid-area: 1 / 1; display: flex; align-items: flex-start; gap: 6px; margin: 0;
  transition: opacity var(--mc-base) var(--mc-ease), translate calc(var(--mc-base) * var(--mc-motion)) var(--mc-ease); }
.mc-field__msg > * > svg { margin-top: 2px; width: 14px; height: 14px; }
.mc-field__hint { color: var(--cl-muted); }
.mc-field__error { color: var(--cl-danger-ink); opacity: 0; translate: 0 calc(-3px * var(--mc-motion)); }
.mc-field[data-state="invalid"] .mc-field__error { opacity: 1; translate: 0 0; }
.mc-field[data-state="invalid"] .mc-field__hint { opacity: 0; }
/* @mc:end */

/* @mc:skeleton */
.mc-load { display: grid; }
.mc-load > * { grid-area: 1 / 1; min-width: 0;
  transition: opacity var(--mc-slow) var(--mc-ease), translate calc(var(--mc-slow) * var(--mc-motion)) var(--mc-ease), visibility 0s; }
.mc-load:not([data-state="ready"]) > .mc-load__content { opacity: 0; translate: 0 calc(3px * var(--mc-motion)); visibility: hidden;
  transition-duration: var(--mc-fast), 0s, 0s; transition-delay: 0s, 0s, var(--mc-fast); }
.mc-load[data-state="ready"] > .mc-load__skeleton { opacity: 0; visibility: hidden;
  transition-duration: var(--mc-base), 0s, 0s; transition-delay: 0s, 0s, var(--mc-base); }
.mc-bone { display: block; height: 12px; border-radius: 4px; background: var(--mc-bone); animation: mc-pulse 1.4s ease-in-out infinite alternate; }
.mc-load[data-state="ready"] .mc-bone { animation: none; }
@keyframes mc-pulse { to { opacity: .5; } }
/* @mc:end */

/* @mc:list */
.mc-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mc-list__item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 4px 4px 12px; border: 1px solid var(--cl-border);
  border-radius: var(--cl-r); background: var(--cl-surface); color: var(--cl-text); font: 400 14px/1.4 var(--cl-font); }
.mc-list__item > [data-text] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-list__meta { color: var(--cl-muted); font: 400 12px/1 var(--cl-mono); }
/* @mc:end */

/* @mc:accordion */
.mc-acc { border-top: 1px solid var(--cl-border); }
.mc-acc__item { border-bottom: 1px solid var(--cl-border); }
.mc-acc__h { margin: 0; font: inherit; }
.mc-acc__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 4px;
  border: 0; border-radius: var(--cl-r-sm); background: none; color: var(--cl-text); font: 500 14px/1.4 var(--cl-font); text-align: left; cursor: pointer; }
.mc-acc__trigger:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 2px; }
.mc-acc__chev { color: var(--cl-muted); transition: rotate calc(var(--mc-slow) * var(--mc-motion)) var(--mc-ease), color var(--mc-fast) var(--mc-ease); }
.mc-acc__trigger:hover .mc-acc__chev { color: var(--cl-text); }
.mc-acc__trigger[aria-expanded="true"] .mc-acc__chev { rotate: 180deg; }
/* grid rows 0fr -> 1fr: the browser animates the real height, no measuring, no JS height maths */
.mc-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows calc(var(--mc-settle) * var(--mc-motion)) var(--mc-ease); }
.mc-acc__panel[data-open] { grid-template-rows: 1fr; }
.mc-acc__inner { min-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: opacity var(--mc-fast) var(--mc-ease), visibility 0s linear calc(var(--mc-settle) * var(--mc-motion)); }
.mc-acc__panel[data-open] > .mc-acc__inner { opacity: 1; visibility: visible;
  transition-duration: var(--mc-slow), 0s; transition-delay: calc(60ms * var(--mc-motion)), 0s; }
.mc-acc__body { padding: 0 4px 14px; color: var(--cl-muted); font: 400 14px/1.55 var(--cl-font); }
/* @mc:end */

/* @mc:popover */
.mc-pop { position: relative; display: inline-block; }
.mc-pop__panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 200px; padding: 4px;
  border: 1px solid var(--cl-border); border-radius: var(--cl-r-lg); background: var(--cl-surface); box-shadow: var(--cl-pop);
  transform-origin: var(--mc-origin, 0 0); opacity: 0; scale: calc(1 - .05 * var(--mc-motion));
  transition: opacity var(--mc-fast) var(--mc-ease), scale calc(var(--mc-fast) * var(--mc-motion)) var(--mc-ease); }
.mc-pop__panel[data-side="top"] { top: auto; bottom: calc(100% + 6px); }
.mc-pop__panel[data-align="end"] { left: auto; right: 0; }
.mc-pop__panel[data-state="open"] { opacity: 1; scale: 1; transition-duration: var(--mc-base), calc(var(--mc-base) * var(--mc-motion)); }
.mc-pop__panel[hidden] { display: none; }
.mc-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--cl-r-sm);
  background: none; color: var(--cl-text); font: 400 14px/1 var(--cl-font); text-align: left; white-space: nowrap; cursor: pointer;
  transition: background-color var(--mc-fast) var(--mc-ease); }
.mc-menu-item:hover { background: var(--cl-sunken); }
.mc-menu-item:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: -2px; background: var(--cl-sunken); }
.mc-menu-item > .mc-kbd { margin-left: auto; }
.mc-menu-item[data-tone="danger"] { color: var(--cl-danger-ink); }
.mc-menu-sep { height: 1px; margin: 4px -4px; background: var(--cl-border); }
/* @mc:end */

/* @mc:dialog */
.mc-dialog { width: min(420px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0;
  border: 1px solid var(--cl-border); border-radius: var(--cl-r-lg); background: var(--cl-surface); color: var(--cl-text); box-shadow: var(--cl-pop);
  opacity: 0; scale: calc(1 - .03 * var(--mc-motion)); translate: 0 calc(6px * var(--mc-motion));
  transition: opacity var(--mc-fast) var(--mc-ease), scale calc(var(--mc-fast) * var(--mc-motion)) var(--mc-ease), translate calc(var(--mc-fast) * var(--mc-motion)) var(--mc-ease); }
.mc-dialog[data-state="open"] { opacity: 1; scale: 1; translate: 0 0;
  transition-duration: var(--mc-slow), calc(var(--mc-slow) * var(--mc-motion)), calc(var(--mc-slow) * var(--mc-motion)); }
/* ::backdrop does not inherit custom properties in every engine, so each var() carries its value as fallback */
.mc-dialog::backdrop { background: var(--cl-scrim, rgb(12 12 11 / .32)); opacity: 0; transition: opacity var(--mc-fast, 120ms) cubic-bezier(.2, 0, 0, 1); }
.mc-dialog[data-state="open"]::backdrop { opacity: 1; transition-duration: var(--mc-slow, 200ms); }
.mc-dialog__body { display: grid; gap: 8px; padding: 20px 20px 16px; }
.mc-dialog__title { margin: 0; font: 600 18px/1.3 var(--cl-font); letter-spacing: -.01em; }
.mc-dialog__text { margin: 0; color: var(--cl-muted); font: 400 14px/1.55 var(--cl-font); }
.mc-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; }
/* @mc:end */

/* @mc:palette */
.mc-palette { width: min(560px, calc(100vw - 32px)); margin-top: max(16px, 12vh); }
.mc-palette__search { display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--cl-muted); box-shadow: inset 0 -1px 0 var(--cl-border);
  transition: box-shadow var(--mc-fast) var(--mc-ease); }
.mc-palette__search:focus-within { box-shadow: inset 0 -2px 0 var(--mc-ring); }
.mc-palette__search input { flex: 1; min-width: 0; min-height: 50px; border: 0; background: none; color: var(--cl-text); font: 400 16px/1 var(--cl-font); outline: none; }
.mc-palette__search input::placeholder { color: var(--cl-faint); }
.mc-palette__list { position: relative; max-height: min(320px, 48dvh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.mc-palette__group-label { padding: 8px 10px 4px; color: var(--cl-muted); font: 500 12px/1.4 var(--cl-font); }
.mc-palette__hl { position: absolute; top: 0; left: 6px; right: 6px; height: var(--mc-h, 36px); translate: 0 var(--mc-y, 0px); border-radius: var(--cl-r);
  background: var(--cl-sunken); pointer-events: none;
  transition: translate calc(var(--mc-fast) * var(--mc-motion)) var(--mc-ease), height calc(var(--mc-fast) * var(--mc-motion)) var(--mc-ease), opacity var(--mc-fast) var(--mc-ease); }
.mc-palette__hl::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 0; width: 2px; border-radius: 2px; background: var(--mc-ring); }
.mc-palette__hl.is-instant { transition: none; }
.mc-option { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px 0 12px;
  border-radius: var(--cl-r); color: var(--cl-text); font: 400 14px/1.3 var(--cl-font); cursor: pointer; }
.mc-option > svg { color: var(--cl-muted); }
.mc-option__hint { margin-left: auto; color: var(--cl-muted); font: 400 12px/1 var(--cl-mono); }
.mc-option[hidden], .mc-palette [role="group"][hidden] { display: none; }
.mc-palette__empty { padding: 28px 16px; color: var(--cl-muted); font: 400 14px/1.5 var(--cl-font); text-align: center; }
.mc-palette__foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px; color: var(--cl-muted); font: 400 12px/20px var(--cl-font); box-shadow: inset 0 1px 0 var(--cl-border); }
/* @mc:end */

/* @mc:copy */
.mc-copy__icon { display: inline-grid; width: 16px; height: 16px; flex: none; }
.mc-copy__icon > svg { grid-area: 1 / 1;
  transition: opacity var(--mc-fast) var(--mc-ease), scale calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring); }
.mc-copy__icon > [data-i="done"] { color: var(--cl-success); opacity: 0; scale: calc(1 - .4 * var(--mc-motion)); }
.mc-copy[data-state="done"] .mc-copy__icon > [data-i="copy"] { opacity: 0; scale: calc(1 - .4 * var(--mc-motion)); }
.mc-copy[data-state="done"] .mc-copy__icon > [data-i="done"] { opacity: 1; scale: 1; --mc-draw: 0; }
.mc-copy__label { display: inline-grid; }
.mc-copy__label > * { grid-area: 1 / 1; transition: opacity var(--mc-fast) var(--mc-ease); }
.mc-copy__label > [data-l="done"], .mc-copy[data-state="done"] .mc-copy__label > [data-l="idle"] { opacity: 0; }
.mc-copy[data-state="done"] .mc-copy__label > [data-l="done"] { opacity: 1; }
/* @mc:end */

/* @mc:tooltip */
.mc-tip { position: absolute; z-index: 50; top: 0; left: 0; max-width: 240px; padding: 5px 8px; border-radius: var(--cl-r-sm);
  background: var(--cl-ink); color: var(--cl-on-ink); font: 500 12px/1.4 var(--cl-font); white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; translate: var(--mc-tx, 0px) calc(var(--mc-ty, 0px) + 3px * var(--mc-motion));
  transition: opacity var(--mc-fast) var(--mc-ease), translate calc(var(--mc-fast) * var(--mc-motion)) var(--mc-ease), visibility 0s linear var(--mc-fast); }
.mc-tip[data-side="bottom"] { translate: var(--mc-tx, 0px) calc(var(--mc-ty, 0px) - 3px * var(--mc-motion)); }
.mc-tip[data-state="open"] { opacity: 1; visibility: visible; pointer-events: auto; translate: var(--mc-tx, 0px) var(--mc-ty, 0px); transition-delay: 0s; }
/* warm: moving between triggers swaps the label at once, without the rise */
.mc-tip.is-warm { transition-duration: 60ms, 0s, 0s; }
.mc-tip .mc-tip__key { margin-left: 6px; opacity: .72; font-family: var(--cl-mono); }
/* @mc:end */

/* @mc:progress */
.mc-progress { display: grid; gap: 8px; }
.mc-progress__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--cl-text); font: 500 14px/1.4 var(--cl-font); }
.mc-progress__label { display: inline-grid; min-width: 0; }
.mc-progress__label > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  transition: opacity var(--mc-base) var(--mc-ease), translate calc(var(--mc-base) * var(--mc-motion)) var(--mc-ease); }
.mc-progress__label > [data-show="done"] { color: var(--cl-success-ink); opacity: 0; translate: 0 calc(4px * var(--mc-motion)); }
.mc-progress[data-state="done"] .mc-progress__label > [data-show="active"] { opacity: 0; translate: 0 calc(-4px * var(--mc-motion)); }
.mc-progress[data-state="done"] .mc-progress__label > [data-show="done"] { opacity: 1; translate: 0 0; --mc-draw: 0; }
.mc-progress__num { min-width: 4ch; color: var(--cl-muted); font: 500 13px/1 var(--cl-mono); font-variant-numeric: tabular-nums; text-align: right; }
.mc-progress__track { position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: var(--mc-bone); }
.mc-progress__bar { position: absolute; inset: 0; background: var(--cl-accent); transform-origin: 0 50%; scale: var(--mc-p, 0) 1;
  transition: scale calc(var(--mc-settle) * var(--mc-motion)) var(--mc-ease), background-color var(--mc-slow) var(--mc-ease); }
.mc-progress.is-instant .mc-progress__bar { transition: none; }
.mc-progress[data-state="done"] .mc-progress__bar { background: var(--cl-success); }
/* @mc:end */

/* @mc:sortable */
.mc-sort { position: relative; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mc-sort__item { position: relative; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 12px 6px 4px;
  border: 1px solid var(--cl-border); border-radius: var(--cl-r); background: var(--cl-surface); color: var(--cl-text); font: 400 14px/1.4 var(--cl-font);
  translate: 0 var(--mc-ty, 0px);
  transition: translate calc(var(--mc-slow) * var(--mc-motion)) var(--mc-ease), scale calc(var(--mc-base) * var(--mc-motion)) var(--mc-ease),
    box-shadow var(--mc-base) var(--mc-ease), border-color var(--mc-fast) var(--mc-ease); }
.mc-sort__item > [data-text] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-sort__item.is-lifted { z-index: 2; scale: calc(1 + .02 * var(--mc-motion)); border-color: var(--cl-border-strong); box-shadow: var(--mc-lift); }
.mc-sort__item.is-dragging { transition-property: scale, box-shadow, border-color; transition-duration: calc(var(--mc-base) * var(--mc-motion)), var(--mc-base), var(--mc-fast); }
.mc-sort__item.is-instant { transition: none; }
.mc-sort__handle { display: grid; place-items: center; flex: none; width: 28px; height: 32px; padding: 0; border: 0; border-radius: var(--cl-r-sm);
  background: none; color: var(--cl-muted); cursor: grab; touch-action: none; transition: background-color var(--mc-fast) var(--mc-ease), color var(--mc-fast) var(--mc-ease); }
.mc-sort__handle:hover, .mc-sort__item.is-lifted .mc-sort__handle { background: var(--cl-sunken); color: var(--cl-text); }
.mc-sort__item.is-dragging .mc-sort__handle { cursor: grabbing; }
.mc-sort__handle:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 0; }
.mc-sort__meta { color: var(--cl-muted); font: 400 12px/1 var(--cl-mono); }
/* @mc:end */

/* @mc:row-expand */
.mc-table { width: 100%; border-collapse: collapse; color: var(--cl-text); font: 400 14px/1.4 var(--cl-font); }
.mc-table th { padding: 8px 10px; border-bottom: 1px solid var(--cl-border); background: var(--cl-subtle); color: var(--cl-muted); font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; }
.mc-table td { padding: 6px 10px; border-bottom: 1px solid var(--cl-border); vertical-align: middle; }
.mc-table .num { font-family: var(--cl-mono); font-variant-numeric: tabular-nums; text-align: right; }
.mc-table th.num { font-family: var(--cl-font); }
.mc-row { transition: background-color var(--mc-fast) var(--mc-ease); }
.mc-row:hover, .mc-row.is-open { background: var(--cl-subtle); }
.mc-row__toggle { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--cl-r-sm);
  background: none; color: var(--cl-muted); cursor: pointer; transition: background-color var(--mc-fast) var(--mc-ease), color var(--mc-fast) var(--mc-ease); }
.mc-row__toggle:hover { background: var(--cl-sunken); color: var(--cl-text); }
.mc-row__toggle:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 0; }
.mc-row__toggle > svg { transition: rotate calc(var(--mc-slow) * var(--mc-motion)) var(--mc-ease); }
.mc-row__toggle[aria-expanded="true"] > svg { rotate: 90deg; }
.mc-table .mc-row__detail > td { padding: 0; border-bottom: 0; }
.mc-row__clip { display: grid; grid-template-rows: 0fr; transition: grid-template-rows calc(var(--mc-settle) * var(--mc-motion)) var(--mc-ease); }
.mc-row__detail.is-open .mc-row__clip { grid-template-rows: 1fr; }
.mc-row__inner { min-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: opacity var(--mc-fast) var(--mc-ease), visibility 0s linear calc(var(--mc-settle) * var(--mc-motion)); }
.mc-row__detail.is-open .mc-row__inner { opacity: 1; visibility: visible; transition-duration: var(--mc-slow), 0s; transition-delay: calc(60ms * var(--mc-motion)), 0s; }
.mc-row__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px 24px; margin: 0; padding: 10px 10px 14px 48px;
  border-bottom: 1px solid var(--cl-border); background: var(--cl-subtle); font-size: 13px; }
.mc-row__body dt { color: var(--cl-muted); }
.mc-row__body dd { margin: 2px 0 0; }
/* @mc:end */

/* @mc:status */
.mc-chip { --mc-chip-fg: var(--cl-neutral-ink); --mc-chip-bg: var(--cl-sunken);
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px;
  background: var(--mc-chip-bg); color: var(--mc-chip-fg); font: 500 13px/1 var(--cl-font); white-space: nowrap; vertical-align: middle;
  transition: background-color var(--mc-slow) var(--mc-ease), color var(--mc-slow) var(--mc-ease); }
.mc-chip[data-status="running"] { --mc-chip-fg: var(--cl-info-ink); --mc-chip-bg: var(--mc-info-soft); }
.mc-chip[data-status="passed"] { --mc-chip-fg: var(--cl-success-ink); --mc-chip-bg: var(--mc-success-soft); }
.mc-chip[data-status="warning"] { --mc-chip-fg: var(--cl-warning-ink); --mc-chip-bg: var(--mc-warning-soft); }
.mc-chip[data-status="failed"] { --mc-chip-fg: var(--cl-danger-ink); --mc-chip-bg: var(--mc-danger-soft); }
.mc-chip__icon { display: inline-grid; width: 14px; height: 14px; flex: none; }
.mc-chip__icon > svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; scale: calc(1 - .5 * var(--mc-motion)); rotate: calc(-60deg * var(--mc-motion));
  transition: opacity var(--mc-base) var(--mc-ease), scale calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring), rotate calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring); }
.mc-chip__text { display: inline-grid; justify-items: center; }
.mc-chip__text > * { grid-area: 1 / 1; opacity: 0; transition: opacity var(--mc-base) var(--mc-ease); }
.mc-chip[data-status="pending"] [data-i="pending"], .mc-chip[data-status="running"] [data-i="running"], .mc-chip[data-status="passed"] [data-i="passed"],
.mc-chip[data-status="warning"] [data-i="warning"], .mc-chip[data-status="failed"] [data-i="failed"] { opacity: 1; scale: 1; rotate: 0deg; --mc-draw: 0; }
.mc-chip[data-status="pending"] [data-t="pending"], .mc-chip[data-status="running"] [data-t="running"], .mc-chip[data-status="passed"] [data-t="passed"],
.mc-chip[data-status="warning"] [data-t="warning"], .mc-chip[data-status="failed"] [data-t="failed"] { opacity: 1; }
.mc-chip .mc-spin { transform-box: fill-box; transform-origin: center; }
/* @mc:end */

/* @mc:page */
.mc-pages { position: relative; }
.mc-page[hidden] { display: none; }
.mc-page [data-focus]:focus { outline: none; }
.mc-page [data-focus]:focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 2px; border-radius: 4px; }
::view-transition-group(mc-page) { animation-duration: var(--mc-slow); animation-timing-function: var(--mc-ease); }
::view-transition-old(mc-page) { animation: mc-page-out var(--mc-fast) var(--mc-ease) both; }
::view-transition-new(mc-page) { animation: mc-page-in var(--mc-slow) var(--mc-ease) both; }
html.mc-vt-page::view-transition-old(root), html.mc-vt-page::view-transition-new(root) { animation: none; }
@keyframes mc-page-out { to { opacity: 0; translate: calc(-12px * var(--mc-dir, 1) * var(--mc-motion)) 0; } }
@keyframes mc-page-in { from { opacity: 0; translate: calc(12px * var(--mc-dir, 1) * var(--mc-motion)) 0; } }
/* @mc:end */

/* @mc:theme */
/* View Transitions: the old frame stays put, the new theme fades in over it, so nothing flashes */
html.mc-vt-theme::view-transition-old(root) { animation: none; }
html.mc-vt-theme::view-transition-new(root) { animation: mc-fade var(--mc-slow) var(--mc-ease) both; }
/* fallback for browsers without View Transitions: colours cross-fade for one beat */
html.mc-theming, html.mc-theming *, html.mc-theming *::before, html.mc-theming *::after {
  transition: background-color var(--mc-slow) var(--mc-ease), color var(--mc-slow) var(--mc-ease), border-color var(--mc-slow) var(--mc-ease),
    fill var(--mc-slow) var(--mc-ease), stroke var(--mc-slow) var(--mc-ease), box-shadow var(--mc-slow) var(--mc-ease) !important; }
.mc-theme-toggle .mc-theme-icons { display: inline-grid; width: 16px; height: 16px; }
.mc-theme-toggle .mc-theme-icons > svg { grid-area: 1 / 1;
  transition: opacity var(--mc-base) var(--mc-ease), rotate calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring), scale calc(var(--mc-settle) * var(--mc-motion)) var(--mc-spring); }
.mc-theme-toggle[aria-pressed="true"] [data-i="sun"], .mc-theme-toggle:not([aria-pressed="true"]) [data-i="moon"] {
  opacity: 0; rotate: calc(-90deg * var(--mc-motion)); scale: calc(1 - .4 * var(--mc-motion)); }
/* @mc:end */

/* @mc:reduced */
/* Under reduced motion, loops stop. Everything else is already handled by --mc-motion. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .mc-spin, :root:not([data-motion="full"]) .mc-bone { animation: none; }
}
:root[data-motion="reduce"] .mc-spin, :root[data-motion="reduce"] .mc-bone { animation: none; }
/* @mc:end */