/* mixy1 ui for the web: the components' stylesheet. Load mixy1-tokens.css
   first (every colour, shadow, size and radius is a token there); this
   file adds what a token cannot say: the fonts, the scene, the glass and
   the no-CSS register's flattening.

   Light by design: glass is a small pre-blurred copy of the scene under
   the panel's tint (as the native crate does it), not backdrop-filter,
   which re-blurs whenever anything behind moves; nothing animates for
   ever; the scene is one picture, loaded only for the theme shown. */

@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url(fonts/Geist.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-display: swap; src: url(fonts/Geist-Medium.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600 700; font-display: swap; src: url(fonts/Geist-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url(fonts/GeistMono.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500 700; font-display: swap; src: url(fonts/GeistMono-Medium.woff2) format("woff2"); }

:root, [data-theme="day"] {
  --mx-font: var(--font-sans);
  --mx-control-font: var(--font-sans);
  /* The scene, dissolved into the ground at its foot, and the copy glass
     shows. Pages hosting the kit elsewhere keep img/ next to this file. */
  --mx-scene: url(img/valletta-day.webp);
  --mx-glass: url(img/valletta-day-glass.webp);
}
[data-theme="evening"] { --mx-scene: url(img/valletta-evening.webp); --mx-glass: url(img/valletta-evening-glass.webp); }
[data-theme="night"] { --mx-scene: url(img/valletta-night.webp); --mx-glass: url(img/valletta-night-glass.webp); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --mx-scene: url(img/valletta-night.webp); --mx-glass: url(img/valletta-night-glass.webp); }
}
/* Phones and small windows: the smaller scene (half the bytes). */
@media (max-width: 1000px) {
  :root, [data-theme="day"] { --mx-scene: url(img/valletta-day-1280.webp); }
  [data-theme="evening"] { --mx-scene: url(img/valletta-evening-1280.webp); }
  [data-theme="night"] { --mx-scene: url(img/valletta-night-1280.webp); }
}
@media (max-width: 1000px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --mx-scene: url(img/valletta-night-1280.webp); }
}
/* No-CSS: the page as the browser would draw it. mixy.one's Times; simd's
   dark variant keeps the sans. */
[data-theme="nocss"], [data-theme="nocss-dark"] { --mx-scene: none; --mx-glass: none; }
[data-theme="nocss"] { --mx-font: var(--font-serif); --mx-control-font: system-ui, sans-serif; }
[data-theme="nocss"] [class*="mx-"], [data-theme="nocss-dark"] [class*="mx-"] {
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
}

.mx-root, .mx-app, .mx-stage, .mx-panel, .mx-tip, .mx-menu { font-family: var(--mx-font); font-size: 13px; line-height: 18px; color: var(--ink); -webkit-font-smoothing: antialiased; }
.mx-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
body:has(> .mx-app) { margin: 0; }

/* ---------- the scene ---------- */
/* An app: the window's height, the scene behind, panels 10px apart and
   10px in, the page itself never scrolls (panels scroll inside). */
.mx-app {
  box-sizing: border-box; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); overflow: hidden;
  background: var(--mx-scene) center 30% / cover no-repeat fixed, var(--ground);
}
.mx-main { flex: 1; min-height: 0; display: flex; gap: var(--space-4); }
.mx-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; }
/* The scene in any box (a preview, a page's header): glass inside it
   lines up only in a .mx-app. */
.mx-stage { position: relative; background: var(--mx-scene) center 30% / cover no-repeat, var(--ground); }
.mx-pad { padding: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.mx-col { display: flex; flex-direction: column; gap: var(--space-3); }
.mx-row-flex { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.mx-grow { flex: 1; min-width: 0; }

/* Focus: a 2px ring outside a 2px gap, on everything that takes focus. */
.mx-focusable:focus-visible, .mx-btn:focus-visible, .mx-seg-opt:focus-visible, .mx-chip:focus-visible, .mx-input:focus-within, .mx-row:focus-visible, .mx-filter-opt:focus-visible, .mx-theme-opt:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- surfaces ---------- */
/* Glass: the blurred copy of the scene where the panel is (both pinned
   to the window), under the panel's tint, with a rim. */
.mx-panel {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: linear-gradient(var(--panel), var(--panel)), var(--mx-glass) center 30% / cover no-repeat fixed, var(--ground);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-panel);
}
/* Live blur, for glass over something that moves (video, a map): it costs
   a blur on every frame that changes. */
.mx-panel.live-blur { background: var(--panel); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); }
.mx-panel.solid { background: linear-gradient(var(--panel), var(--panel)), var(--ground); }
[data-theme^="nocss"] .mx-panel { background: var(--ground); border: 1px solid var(--line); }
.mx-panel-head { display: flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-3) 0 var(--space-5); border-bottom: 1px solid var(--line); flex: none; }
.mx-panel-title { font-size: 12.5px; line-height: 18px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-panel-body { padding: var(--space-5); min-height: 0; }
.mx-panel-body.flush { padding: 0; }

.mx-card { position: relative; background: var(--raised); border-radius: var(--radius-track); box-shadow: var(--shadow-raised), inset 0 0 0 1px var(--line); padding: var(--space-5); }
[data-theme^="nocss"] .mx-card { border: 1px solid var(--line); }
.mx-card.clickable { cursor: pointer; }
.mx-card.clickable:hover { background: var(--raised-hover); }
.mx-card.selected { box-shadow: inset 0 0 0 1.5px var(--accent); }
[data-theme^="nocss"] .mx-card.selected { border: 2px solid var(--ink); }

.mx-callout { display: flex; align-items: center; gap: var(--space-2); min-height: 38px; padding: var(--space-2) var(--space-1) var(--space-2) var(--space-4); border-radius: var(--radius-track); font-size: 12px; line-height: 16px; }
.mx-callout > .text { flex: 1; min-width: 0; }
.mx-callout.good { background: var(--good-soft); color: var(--good); }
.mx-callout.warn { background: var(--warn-soft); color: var(--warn); }
.mx-callout.bad { background: var(--bad-soft); color: var(--bad); }
.mx-callout.info { background: var(--info-soft); color: var(--info); }
.mx-callout.accent { background: var(--accent-soft); color: var(--accent-text); }
.mx-callout b { font-weight: 600; }
[data-theme^="nocss"] .mx-callout { border: 1px solid currentColor; }

/* ---------- buttons ---------- */
.mx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--size-control); padding: 0 var(--space-4); flex: none;
  border: 0; border-radius: var(--radius-control);
  font-family: var(--mx-control-font); font-size: 12.5px; line-height: 16px; font-weight: 500; white-space: nowrap; text-decoration: none;
  color: var(--ink); background: var(--raised); box-shadow: var(--shadow-raised), inset 0 0 0 1px var(--line-strong);
  cursor: pointer; transition: background-color 90ms, opacity 90ms;
}
.mx-btn:hover { background: var(--raised-hover); }
.mx-btn:active { opacity: .78; }
.mx-btn:disabled { opacity: .45; cursor: default; }
.mx-btn.sm { height: var(--size-control-sm); padding: 0 var(--space-3); font-size: 12px; }
.mx-btn.square { width: var(--size-control); padding: 0; }
.mx-btn.sm.square { width: var(--size-control-sm); }
.mx-btn.primary { color: var(--on-primary); background: var(--primary); box-shadow: var(--shadow-primary); }
.mx-btn.primary:hover { background: var(--primary-hover); }
.mx-btn.ghost { background: transparent; box-shadow: none; color: var(--ink-muted); }
.mx-btn.ghost:hover { background: var(--hover); color: var(--ink); }
.mx-btn.danger { color: var(--bad); background: transparent; box-shadow: inset 0 0 0 1px var(--bad); }
.mx-btn.danger:hover { background: var(--bad-soft); }
.mx-btn[aria-pressed="true"] { color: var(--accent-text); background: var(--accent-soft); box-shadow: none; }
.mx-btn .mx-ico { width: 14px; height: 14px; flex: none; }
[data-theme^="nocss"] .mx-btn { border: 1px solid var(--line-strong); background: var(--ground); }
[data-theme^="nocss"] .mx-btn.ghost { border-color: transparent; text-decoration: underline; color: var(--link); }
[data-theme^="nocss"] .mx-btn.primary { background: var(--primary); }
[data-theme^="nocss"] .mx-btn.danger { border-color: var(--bad); }

/* ---------- segmented (tabs, levels, filters) ---------- */
.mx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-track); background: var(--track); flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.mx-seg.fill { display: flex; }
.mx-seg.fill .mx-seg-opt { flex: 1; }
.mx-seg-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--size-control); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-control);
  font-family: var(--mx-control-font); font-size: 12.5px; line-height: 16px; font-weight: 500; white-space: nowrap;
  color: var(--ink-muted); background: transparent; cursor: pointer;
}
.mx-seg.sm .mx-seg-opt { height: var(--size-control-sm); padding: 0 var(--space-3); font-size: 12px; }
.mx-seg-opt:hover { color: var(--ink); }
.mx-seg-opt[aria-checked="true"] { color: var(--on-thumb); background: var(--thumb); box-shadow: var(--shadow-thumb); }
.mx-seg-opt .count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.mx-seg-opt[aria-checked="true"] .count { color: inherit; opacity: .7; }
[data-theme^="nocss"] .mx-seg { background: transparent; padding: 0; gap: var(--space-2); flex-wrap: wrap; }
[data-theme^="nocss"] .mx-seg-opt { border: 1px solid var(--line-strong); color: var(--ink); }
[data-theme^="nocss"] .mx-seg-opt[aria-checked="true"] { color: var(--on-thumb); border-color: var(--thumb); }

/* ---------- chips (toggles) and checkboxes ---------- */
.mx-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); height: var(--size-control-sm); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-control); font-family: var(--mx-control-font); font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--ink-muted); background: var(--track); cursor: pointer; white-space: nowrap;
}
.mx-chip:hover { color: var(--ink); }
.mx-chip[aria-checked="true"] { color: var(--accent-text); background: var(--accent-soft); }
.mx-chip .key { font-family: var(--font-mono); font-size: 10.5px; opacity: .7; }
[data-theme^="nocss"] .mx-chip { border: 1px solid var(--line-strong); background: var(--ground); color: var(--ink); }
[data-theme^="nocss"] .mx-chip[aria-checked="true"] { background: var(--thumb); color: var(--on-thumb); }

.mx-check { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: 13px; line-height: 18px; color: var(--ink); }
.mx-check input { appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px; flex: none; border-radius: var(--radius-xs); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); display: grid; place-content: center; cursor: pointer; }
.mx-check input:checked { background: var(--primary); box-shadow: none; }
.mx-check input:checked::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--on-primary); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.mx-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-theme^="nocss"] .mx-check input { border: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; }

/* ---------- stepper ---------- */
.mx-stepper { display: inline-flex; align-items: center; height: var(--size-control); padding: 2px; border-radius: var(--radius-track); background: var(--track); flex: none; }
.mx-stepper button { width: 24px; height: 24px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink-muted); font: 500 14px/1 var(--font-mono); cursor: pointer; }
.mx-stepper button:hover { background: var(--hover); color: var(--ink); }
.mx-stepper button:disabled { opacity: .35; cursor: default; }
.mx-stepper button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.mx-stepper .value { min-width: 38px; padding: 0 var(--space-1); text-align: center; font: 500 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
[data-theme^="nocss"] .mx-stepper { border: 1px solid var(--line-strong); background: var(--ground); }

/* ---------- fields ---------- */
.mx-field { display: inline-flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.mx-field > .mx-label { padding-left: 1px; }
.mx-input { display: flex; align-items: center; gap: var(--space-2); height: var(--size-control); padding: 0 var(--space-3); border-radius: var(--radius-control); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-faint); min-width: 0; }
.mx-input input, .mx-input select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--ink); font: 400 13px/18px var(--mx-control-font); }
.mx-input input::placeholder { color: var(--ink-faint); }
.mx-input select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 16px; }
.mx-input select option { background: var(--float); color: var(--ink); }
.mx-input.select { position: relative; }
.mx-input.select::after { content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.mx-input .mx-ico { width: 14px; height: 14px; flex: none; }
.mx-input.search { height: 32px; padding: 0 var(--space-2) 0 var(--space-4); }
.mx-input.search .mx-kbd { margin-left: auto; }
[data-theme^="nocss"] .mx-input { border: 1px solid var(--line-strong); background: var(--ground); }

/* ---------- keys ---------- */
.mx-kbd { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 20px; height: 18px; padding: 0 5px; border-radius: var(--radius-xs); font: 500 11px/14px var(--font-mono); color: var(--ink-muted); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -1px 0 var(--line-strong); white-space: nowrap; flex: none; }
[data-theme^="nocss"] .mx-kbd { border: 1px solid var(--line-strong); background: var(--ground); color: var(--ink); }
.mx-keyhint { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; }

/* ---------- status ---------- */
.mx-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-xs); font: 500 11.5px/16px var(--mx-control-font); white-space: nowrap; flex: none; }
.mx-badge.neutral { color: var(--neutral); background: var(--neutral-soft); }
.mx-badge.accent { color: var(--accent-text); background: var(--accent-soft); }
.mx-badge.good { color: var(--good); background: var(--good-soft); }
.mx-badge.warn { color: var(--warn); background: var(--warn-soft); }
.mx-badge.bad { color: var(--bad); background: var(--bad-soft); }
.mx-badge.info { color: var(--info); background: var(--info-soft); }
[data-theme^="nocss"] .mx-badge { border: 1px solid currentColor; }

.mx-live { display: inline-flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-control); background: var(--track); font: 500 11.5px/16px var(--font-mono); color: var(--ink-muted); white-space: nowrap; flex: none; }
.mx-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.mx-live.flame .dot { background: var(--flame); box-shadow: 0 0 0 3px rgba(255, 0, 0, .18); }
/* A pulse only where asked: it repaints for as long as it shows. */
.mx-live.pulse .dot { animation: mx-pulse 1.6s ease-in-out infinite; }
.mx-live b { color: var(--ink); font-weight: 600; }
[data-theme^="nocss"] .mx-live { border: 1px solid var(--line-strong); background: var(--ground); }
@keyframes mx-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .mx-live.pulse .dot { animation: none; } }

.mx-delta { font: 600 11.5px/16px var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-delta.up { color: var(--good); }
.mx-delta.down { color: var(--bad); }
.mx-delta.flat { color: var(--ink-faint); }

/* ---------- data ---------- */
.mx-label { font: 500 10.5px/14px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.mx-stat { display: inline-flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; }
.mx-stat .value { font: 500 24px/28px var(--font-mono); letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.mx-stat .word { font-size: 13px; color: var(--ink-muted); }
.mx-stats { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.mx-meter { height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.mx-meter > span { display: block; height: 100%; background: var(--accent); }
.mx-meter.warn > span { background: var(--warn); }
.mx-meter.bad > span { background: var(--bad); }

.mx-list { display: flex; flex-direction: column; }
.mx-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3);
  min-height: var(--size-row); padding: var(--space-1) var(--space-3); border-radius: var(--radius-control); color: var(--ink);
}
.mx-row.clickable { cursor: pointer; }
.mx-row.clickable:hover { background: var(--hover); }
.mx-row[aria-selected="true"] { background: var(--selected); }
.mx-row .lead { font: 500 12px/16px var(--font-mono); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.mx-row .main { min-width: 0; }
.mx-row .title { font-size: 13px; line-height: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-row .meta { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-muted); flex-wrap: wrap; }
.mx-row .value { font: 500 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.mx-row .trail { font-size: 12px; color: var(--ink-faint); text-align: right; white-space: nowrap; }
.mx-list.ruled .mx-row { border-radius: 0; }
.mx-list.ruled .mx-row + .mx-row { border-top: 1px solid var(--line); }
[data-theme^="nocss"] .mx-row[aria-selected="true"] { outline: 2px solid var(--ink); outline-offset: -2px; }
.mx-empty { padding: var(--space-8) var(--space-5); text-align: center; color: var(--ink-faint); font-size: 12px; }

.mx-filters { display: flex; flex-direction: column; gap: 2px; }
.mx-filters > .mx-label { padding: var(--space-3) var(--space-3) var(--space-1); }
.mx-filter-opt { display: flex; align-items: center; gap: var(--space-3); height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink); font: 400 13px/18px var(--mx-control-font); text-align: left; cursor: pointer; width: 100%; }
.mx-filter-opt:hover { background: var(--hover); }
.mx-filter-opt[aria-checked="true"] { background: var(--selected); font-weight: 500; }
.mx-filter-opt .swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.mx-filter-opt .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-filter-opt .count { font: 400 11.5px/16px var(--font-mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
[data-theme^="nocss"] .mx-filter-opt[aria-checked="true"] { background: var(--thumb); color: var(--on-thumb); }
[data-theme^="nocss"] .mx-filter-opt[aria-checked="true"] .count { color: inherit; }

/* ---------- tooltip and menu ---------- */
.mx-tip-wrap { position: relative; display: inline-flex; }
.mx-tip { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: max-content; max-width: 280px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-track); background: var(--float); color: var(--ink); box-shadow: var(--shadow-float); font: 400 12px/16px var(--mx-font); opacity: 0; pointer-events: none; transition: opacity 120ms 300ms; }
.mx-tip.center { left: 50%; transform: translateX(-50%); }
.mx-tip.end { left: auto; right: 0; }
.mx-tip-wrap:hover .mx-tip, .mx-tip-wrap:focus-within .mx-tip, .mx-tip.open { opacity: 1; }
[data-theme^="nocss"] .mx-tip { border: 1px solid var(--line); }

/* A menu under a button: <details class="mx-more"><summary class="mx-btn
   ghost square">⋯</summary><div class="mx-menu">…</div></details>. */
.mx-more { position: relative; flex: none; }
.mx-more > summary { list-style: none; }
.mx-more > summary::-webkit-details-marker { display: none; }
.mx-more[open] > summary { background: var(--hover); color: var(--ink); }
.mx-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; display: flex; flex-direction: column; gap: var(--space-3); min-width: 200px; max-width: min(560px, calc(100vw - 20px)); padding: var(--space-4); border-radius: var(--radius-track); background: var(--float); box-shadow: var(--shadow-float); }
.mx-menu .item { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.mx-menu .item > .mx-label { width: 72px; flex: none; }
[data-theme^="nocss"] .mx-menu { border: 1px solid var(--line); }

/* ---------- shell ---------- */
/* The title bar: the lockup and context left, the main control centred,
   status and theme right. Groups marked data-keep="N" give way to its ⋯
   menu when it is too narrow, the lowest N first (mixy1.js); the rest
   always stay. */
.mx-titlebar { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); height: var(--size-bar); padding: 0 var(--space-2) 0 var(--space-5); flex: none; min-width: 0; }
.mx-titlebar .left, .mx-titlebar .right, .mx-titlebar .center { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: none; }
.mx-titlebar .right { gap: var(--space-1); }
.mx-titlebar .center { gap: var(--space-1); }
.mx-titlebar .spring { flex: 1; min-width: 0; }
.mx-titlebar .sep { width: 1px; height: 18px; margin: 0 var(--space-2); background: var(--line-strong); flex: none; }
.mx-titlebar .mx-more { display: none; }
.mx-titlebar.overflowing .mx-more { display: block; }
.mx-titlebar [data-keep].away { display: none; }
/* In a desktop shell (Electron, Tauri) the bar drags the window; its controls do not. */
.mx-titlebar { -webkit-app-region: drag; app-region: drag; }
.mx-titlebar button, .mx-titlebar input, .mx-titlebar select, .mx-titlebar a, .mx-titlebar summary, .mx-titlebar [role="radiogroup"], .mx-menu { -webkit-app-region: no-drag; app-region: no-drag; }
.mx-winctl { display: flex; gap: 2px; margin-left: var(--space-1); flex: none; }
.mx-winctl button { width: 36px; height: var(--size-control); display: grid; place-content: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink-muted); cursor: pointer; }
.mx-winctl button:hover { background: var(--hover); color: var(--ink); }
.mx-winctl button.close:hover { background: #c42b1c; color: #ffffff; }
.mx-winctl svg { width: 10px; height: 10px; }

.mx-statusbar { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); height: var(--size-status); padding: 0 var(--space-5); font-size: 12px; line-height: 16px; color: var(--ink-muted); flex: none; }
.mx-statusbar .text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- brand ---------- */
/* The flame is a still; img/mixy1-flame.gif plays it (and repaints while
   it shows). */
.mx-lockup { display: inline-flex; align-items: baseline; gap: .28em; color: var(--ink); text-decoration: none; white-space: nowrap; flex: none; }
.mx-lockup .project { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.01em; font-size: 15px; }
.mx-lockup img { display: block; align-self: center; height: 30px; width: auto; margin-bottom: -6px; }

.mx-themes { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-track); background: var(--track); flex: none; }
.mx-theme-opt { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--size-control-sm); min-width: var(--size-control-sm); padding: 0 var(--space-2); justify-content: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink-muted); font: 500 12px/16px var(--mx-control-font); cursor: pointer; white-space: nowrap; }
.mx-theme-opt:hover { color: var(--ink); }
.mx-theme-opt[aria-checked="true"] { background: var(--thumb); color: var(--on-thumb); box-shadow: var(--shadow-thumb); }
.mx-theme-opt svg { width: 13px; height: 13px; shape-rendering: crispEdges; fill: currentColor; }
[data-theme^="nocss"] .mx-themes { background: transparent; border: 1px solid var(--line-strong); }

.mx-ico { display: inline-block; vertical-align: middle; }

/* ---------- the no-CSS page ---------- */
/* A page that is mostly text, as mixy.one: Times, ~65 characters a line. */
.mx-page { max-width: 42rem; margin: 0 auto; padding: var(--space-10) var(--space-6); font: 400 17px/28px var(--mx-font); color: var(--ink); background: var(--ground); }
.mx-page a { color: var(--link); }
.mx-page a:visited { color: var(--link-visited); }
.mx-page h1, .mx-page h2 { font-family: var(--mx-font); font-weight: 700; line-height: 1.2; }
.mx-page hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-8) 0; }