/* GENERATED from axui.src.css by build-css.mjs. Edit the source. */
/* Axis UI replica kit (tryaxis.so)
   Pixel-faithful HTML/CSS replicas of the real Axis client: window chrome, Docs editor, Slides editor, Video review,
   Space app, Spaces sidebar and chat composer, re-themed to Axis Noir.

   Sizing: wrap any component in .axui (the size container). Inside .axui-win, calc(var(--u)*1) = one real Axis pixel at a
   1000px-wide pane; --axui-scale enlarges everything (2 = a 500px-wide Axis pane). Narrow containers switch to the
   stacked layouts Axis itself uses. Built by build-css.mjs: never hand-edit axui.css. */

@font-face { font-family: 'AxuiMono'; src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'); font-weight: 100 800; font-display: swap; }

@property --axui-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

.axui {
  container: axui / inline-size;
  --ax-bg: #07090a;
  --ax-chrome: #0a0d0e;
  --ax-surface: #0e1213;
  --ax-surface-2: #121718;
  --ax-raise: #161c1d;
  --ax-line: rgba(255, 255, 255, .075);
  --ax-line-2: rgba(255, 255, 255, .12);
  --ax-text: #e9efed;
  --ax-text-2: rgba(233, 239, 237, .86);
  --ax-muted: #8a9694;
  --ax-faint: #5d6866;
  --ax-accent: #37cdbc;
  --ax-accent-soft: #84e4d8;
  --ax-on-accent: #03201d;
  --ax-green: #4abe7b;
  --ax-amber: #e2ae58;
  --ax-red: #f16570;
  --ax-chart: #1fa594;
  --ax-theo: #e9b872;
  --ax-ease: cubic-bezier(.22, .7, .18, 1);
  position: relative;
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--ax-text);
}
.axui *, .axui *::before, .axui *::after { box-sizing: border-box; }
.axui :where(h1, h2, h3, h4, p, ul, ol, li, figure, table) { margin: 0; padding: 0; }
.axui :where(ul, ol) { list-style: none; }
.axui :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: default; }
.axui .axui-mono-t { font-family: 'AxuiMono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }

/* ---------- window ---------- */
.axui-win {
  --axui-scale: 1;
  --u: calc(.1cqi * var(--axui-scale));
  --axui-h: 680;
  position: relative;
  height: calc(var(--u) * var(--axui-h));
  overflow: hidden;
  border-radius: calc(var(--u)*14);
  background: var(--ax-bg);
  font-size: calc(var(--u)*13);
  line-height: 1.4;
  isolation: isolate;
}
.axui-win::after { /* the glass edge: 1px hairline, brighter along the top */
  content: ''; position: absolute; inset: 0; z-index: 30; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .085), inset 0 1px 0 rgba(255, 255, 255, .11);
}
.axui-win.bare { height: auto; overflow: visible; background: none; }
.axui-win.bare::after { display: none; }
.axui-i { width: calc(var(--u)*16); height: calc(var(--u)*16); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.axui-i.sm { width: calc(var(--u)*14); height: calc(var(--u)*14); }
.axui-i.xs { width: calc(var(--u)*12); height: calc(var(--u)*12); }

/* title bar: traffic lights, project monogram, pane title */
.axui-bar {
  position: relative; z-index: 3; display: flex; align-items: center; gap: calc(var(--u)*12); height: calc(var(--u)*46); padding: 0 calc(var(--u)*12) 0 calc(var(--u)*16);
  border-bottom: 1px solid var(--ax-line);
  background: linear-gradient(180deg, #0d1112, var(--ax-chrome));
}
/* macOS window controls: 12px circles 8px apart, 20px in from the window edge, each with its darker rim */
.axui-lights { display: flex; flex: none; gap: calc(var(--u)*8); margin: 0 calc(var(--u)*6) 0 calc(var(--u)*4); }
.axui-lights i { width: calc(var(--u)*12); height: calc(var(--u)*12); border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 max(.5px, calc(var(--u)*.75)) #e0443e; }
.axui-lights i:nth-child(2) { background: #febc2e; box-shadow: inset 0 0 0 max(.5px, calc(var(--u)*.75)) #dea123; }
.axui-lights i:nth-child(3) { background: #28c840; box-shadow: inset 0 0 0 max(.5px, calc(var(--u)*.75)) #1aab29; }
/* the pane's own type tile in the title bar (cycles with the title in the Make window) */
.axui-ticon { display: grid; flex: none; }
.axui-ticon > .axui-tile { grid-area: 1 / 1; transition: opacity .45s ease; }
.axui-ticon > .axui-tile:not(.is-on) { opacity: 0; }
.axui-bar .axui-tile, .axui-bar .axui-tile > .axui-i { width: calc(var(--u)*22); height: calc(var(--u)*22); }
.axui-mono {
  display: grid; place-items: center; width: calc(var(--u)*22); height: calc(var(--u)*22); border-radius: calc(var(--u)*6); flex: none;
  background: linear-gradient(180deg, #17403b, #10302c); box-shadow: inset 0 0 0 1px rgba(132, 228, 216, .18);
  color: var(--ax-accent-soft); font-size: calc(var(--u)*12.5); font-weight: 700; letter-spacing: -.01em;
}
.axui-title { display: grid; min-width: 0; flex: 1; font-size: calc(var(--u)*15); font-weight: 650; letter-spacing: -.012em; color: var(--ax-text); }
.axui-title > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .45s ease, transform .5s var(--ax-ease); }
.axui-title > span:not(.is-on) { opacity: 0; transform: translateY(calc(var(--u)*4)); }
.axui-bar-end { display: flex; gap: calc(var(--u)*6); color: var(--ax-muted); }
.axui-bar-end .axui-btn { color: var(--ax-muted); }

/* tool buttons, groups, dividers (EditorChrome) */
.axui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u)*6); flex: none;
  height: calc(var(--u)*32); min-width: calc(var(--u)*32); padding: 0 calc(var(--u)*7); border-radius: calc(var(--u)*8);
  color: var(--ax-text-2); font-size: calc(var(--u)*12.5); font-weight: 500; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}
.axui-btn.t { padding: 0 calc(var(--u)*10); }
.axui-btn.sm { height: calc(var(--u)*28); min-width: calc(var(--u)*28); font-size: calc(var(--u)*12); }
.axui-btn.sm.t { padding: 0 calc(var(--u)*8); }
.axui-btn.is-active { background: rgba(55, 205, 188, .15); color: var(--ax-accent); }
.axui-btn.is-accent { color: var(--ax-accent); }
.axui-btn.is-play { color: var(--ax-accent); background: rgba(55, 205, 188, .15); }
.axui-btn.is-muted { color: var(--ax-muted); }
.axui-btn.is-solid { height: calc(var(--u)*28); padding: 0 calc(var(--u)*10); background: var(--ax-accent); color: var(--ax-on-accent); font-size: calc(var(--u)*12); font-weight: 650; }
.axui-badge { display: inline-grid; place-items: center; min-width: calc(var(--u)*18); height: calc(var(--u)*17); padding: 0 calc(var(--u)*5); border-radius: calc(var(--u)*99); background: rgba(55, 205, 188, .15); font-size: calc(var(--u)*10.5); }
.axui-group {
  display: inline-flex; align-items: center; gap: calc(var(--u)*2); padding: calc(var(--u)*4); border-radius: calc(var(--u)*12);
  border: 1px solid rgba(255, 255, 255, .085); background: rgba(14, 18, 19, .95);
  box-shadow: 0 calc(var(--u)*8) calc(var(--u)*24) rgba(0, 0, 0, .22);
}
.axui-div { width: 1px; height: calc(var(--u)*20); margin: 0 calc(var(--u)*4); flex: none; background: var(--ax-line-2); }
.axui-sp { flex: 1; min-width: 0; }
.axui-saved { display: inline-flex; align-items: center; gap: calc(var(--u)*5); padding: 0 calc(var(--u)*8); color: var(--ax-muted); font-size: calc(var(--u)*13); white-space: nowrap; }
.axui-saved .axui-i { width: calc(var(--u)*14); height: calc(var(--u)*14); }
.axui-chip { display: inline-flex; align-items: center; gap: calc(var(--u)*5); height: calc(var(--u)*20); padding: 0 calc(var(--u)*7); border-radius: calc(var(--u)*6); font-size: calc(var(--u)*11); font-weight: 600; white-space: nowrap; }
.axui-chip::before { content: ''; width: calc(var(--u)*6); height: calc(var(--u)*6); border-radius: 50%; background: currentColor; }
.axui-chip.ok { color: var(--ax-green); background: rgba(74, 190, 123, .13); }
.axui-chip.low { color: var(--ax-amber); background: rgba(226, 174, 88, .14); }
.axui-chip.ordered { color: var(--ax-accent); background: rgba(55, 205, 188, .14); }
.axui-chip.plain::before { display: none; }

/* stacked views (one window, several panes) */
.axui-views { position: absolute; inset: calc(var(--u)*46) 0 0; }
.axui-view {
  position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0;
  transition: opacity .55s ease, visibility 0s linear .55s;
}
.axui-views > .axui-view:not(.is-on) { opacity: 0; visibility: hidden; }
.axui-views > .axui-view.is-on { transition-delay: 0s; }
.axui-tb { display: flex; align-items: center; gap: calc(var(--u)*2); height: calc(var(--u)*46); padding: 0 calc(var(--u)*12) 0 calc(var(--u)*14); flex: none; border-bottom: 1px solid var(--ax-line); }

/* ---------- timeline primitives (driven by axui.js) ---------- */
.axui-scene.is-armed [data-at]:not(.is-in) { opacity: 0; transform: translateY(calc(var(--u)*8)); }
.axui-scene.is-armed [data-at] { transition: opacity .6s ease, transform .7s var(--ax-ease); }
.axui-scene.is-armed [data-at][data-fx="fade"]:not(.is-in) { transform: none; }
.axui-scene.is-armed [data-at][data-fx="grow"]:not(.is-in) { opacity: 1; transform: scaleY(0); }
.axui-scene.is-armed [data-at][data-fx="grow"] { transform-origin: 50% 100%; transition: transform .9s var(--ax-ease); }
.axui-scene.is-armed [data-at][data-fx="pop"]:not(.is-in) { transform: scale(.6); }
.axui-scene.is-armed [data-at][data-fx="left"]:not(.is-in) { transform: translateX(calc(var(--u)*-10)); }
.axui-scene.is-armed [data-at][data-fx="collapse"]:not(.is-in) { opacity: 0; max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; transform: none; overflow: hidden; }
.axui-scene.is-armed [data-at][data-fx="collapse"] { max-height: calc(var(--u)*640); transition: opacity .5s ease .15s, max-height .6s var(--ax-ease), margin .6s var(--ax-ease), padding .6s var(--ax-ease); }
.axui-scene.is-armed [data-out]:not([data-fx="flag"]).is-out { opacity: 0 !important; transform: none; }
.axui-scene.is-armed [data-out]:not([data-fx="flag"]) { transition: opacity .4s ease, transform .6s var(--ax-ease); }
.axui-scene.is-armed [data-at][data-fx="flag"]:not(.is-in) { opacity: 1; transform: none; }
.axui-scene.is-armed [data-at][data-fx="flag"] { transition: none; }
.axui-snap *, .axui-snap *::before, .axui-snap *::after { transition: none !important; }
.axui-scene:not(.is-armed) .axui-swap > .a { opacity: 0; }
.axui-scene:not(.is-armed) .axui-swap > .b { opacity: 1; transform: none; }
.axui-scene.is-paused *, .axui-scene.is-paused *::before, .axui-scene.is-paused *::after { animation-play-state: paused !important; }

/* remote carets: the agent (teal) and collaborators */
.axui-caret { position: relative; display: inline-block; width: calc(var(--u)*2); height: 1.18em; margin: 0 1px; vertical-align: -.22em; }
.axui-caret::before { content: ''; position: absolute; inset: 0; border-radius: 1px; background: var(--c, var(--ax-accent)); }
.axui-caret::after {
  content: attr(data-name); position: absolute; left: -1px; bottom: 100%; margin-bottom: calc(var(--u)*1);
  padding: calc(var(--u)*2) calc(var(--u)*5) calc(var(--u)*3); border-radius: calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*1); background: var(--c, var(--ax-accent)); color: #06201d;
  font: 650 calc(var(--u)*10.5)/1 'DM Sans', ui-sans-serif, sans-serif; font-style: normal; letter-spacing: 0; white-space: nowrap;
}
.axui-caret.idle::before { animation: axui-blink 1.1s steps(1) infinite; }
.axui-scene.is-paused .axui-caret.idle::before { animation-play-state: running !important; }
@keyframes axui-blink { 50% { opacity: .15; } }
.axui-dots { display: inline-flex; gap: calc(var(--u)*2.5); color: var(--ax-accent); }
.axui-dots i { width: calc(var(--u)*4); height: calc(var(--u)*4); border-radius: 50%; background: currentColor; animation: axui-dot 1.2s ease-in-out infinite; }
.axui-dots i:nth-child(2) { animation-delay: .15s; }
.axui-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes axui-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(calc(var(--u)*-2)); } }

/* ---------- Docs editor ---------- */
.axui-busy {
  display: inline-flex; align-items: center; gap: calc(var(--u)*7); height: calc(var(--u)*28); padding: 0 calc(var(--u)*12) 0 calc(var(--u)*10); border-radius: calc(var(--u)*99);
  background: rgba(55, 205, 188, .09); box-shadow: inset 0 0 0 1px rgba(55, 205, 188, .22); font-size: calc(var(--u)*12); color: var(--ax-text); white-space: nowrap;
}
.axui-doc-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.axui-doc-page { --axui-scroll: 214; position: absolute; inset: 0 0 auto; padding: calc(var(--u)*26) 0 calc(var(--u)*140); transition: transform 1.4s cubic-bezier(.45, .05, .2, 1) !important; }
.axui-doc-page.is-in, .axui-scene:not(.is-armed) .axui-doc-page { transform: translateY(calc(var(--u) * var(--axui-scroll) * -1)) !important; }
.axui-doc-col { position: relative; width: min(calc(var(--u)*700), calc(100% - calc(var(--u)*64))); margin: 0 auto; }
.axui-doc-col > * + * { margin-top: calc(var(--u)*16); }
.axui-doc li { position: relative; padding-left: calc(var(--u)*50); font-size: calc(var(--u)*16.5); line-height: 1.62; color: var(--ax-text); }
.axui-doc li::before { content: ''; position: absolute; left: calc(var(--u)*14); top: .72em; width: calc(var(--u)*5); height: calc(var(--u)*5); border-radius: 50%; background: var(--ax-muted); }
.axui-doc li + li { margin-top: calc(var(--u)*4); }
.axui-doc h2 { position: relative; padding-top: calc(var(--u)*14); font-size: calc(var(--u)*26); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: #f3f6f5; }
.axui-doc h2 .axui-i { position: absolute; left: calc(var(--u)*-34); top: calc(50% + calc(var(--u)*7)); translate: 0 -50%; color: var(--ax-muted); width: calc(var(--u)*15); height: calc(var(--u)*15); }
.axui-doc p { font-size: calc(var(--u)*16.5); line-height: 1.62; color: var(--ax-text-2); }
.axui-doc p em { font-style: italic; color: var(--ax-text); }
.axui-doc p b { font-weight: 650; color: var(--ax-text); }
.axui-ask { border-radius: calc(var(--u)*5); transition: background-color .5s ease, box-shadow .5s ease; }
.axui-ask.is-asked { background: rgba(55, 205, 188, .065); box-shadow: 0 0 0 calc(var(--u)*7) rgba(55, 205, 188, .065); }
.axui-dtable { width: 100%; border-collapse: collapse; }
.axui-dtable th, .axui-dtable td { border: 1px solid rgba(255, 255, 255, .085); padding: calc(var(--u)*10) calc(var(--u)*12) calc(var(--u)*13); text-align: left; vertical-align: top; font-size: calc(var(--u)*15.5); line-height: 1.4; }
.axui-dtable th { background: rgba(255, 255, 255, .03); font-weight: 650; color: #f1f5f4; white-space: nowrap; }
.axui-dtable th .axui-i { width: calc(var(--u)*15); height: calc(var(--u)*15); margin: 0 calc(var(--u)*9) calc(var(--u)*-2) 0; color: var(--ax-muted); stroke-width: 1.5; }
.axui-dtable td { color: var(--ax-text-2); background: rgba(255, 255, 255, .008); }
.axui-block { position: relative; }
.axui-gutter { position: absolute; left: calc(var(--u)*-46); top: calc(var(--u)*6); display: flex; gap: calc(var(--u)*6); color: var(--ax-faint); }
.axui-gutter .axui-i { width: calc(var(--u)*15); height: calc(var(--u)*15); }
.axui-chart { margin-top: calc(var(--u)*24) !important; padding: calc(var(--u)*18) calc(var(--u)*22) calc(var(--u)*16); border: 1px solid var(--ax-line-2); border-radius: calc(var(--u)*12); background: rgba(255, 255, 255, .012); }
.axui-chart h3 { font-size: calc(var(--u)*15.5); font-weight: 650; color: #f1f5f4; letter-spacing: -.005em; }
.axui-plot { position: relative; display: grid; grid-template-columns: calc(var(--u)*30) 1fr; height: calc(var(--u)*140); margin-top: calc(var(--u)*16); }
.axui-plot-y { position: relative; color: var(--ax-muted); font-size: calc(var(--u)*11.5); }
.axui-plot-y span { position: absolute; right: calc(var(--u)*8); translate: 0 -50%; }
.axui-plot-area { position: relative; display: flex; align-items: flex-end; justify-content: space-around; border-left: 1px solid var(--ax-line-2); border-bottom: 1px solid var(--ax-line-2); padding: 0 4%; }
.axui-plot-area > div { position: relative; width: 17%; height: 100%; display: flex; align-items: flex-end; }
.axui-plot-area b { display: block; width: 100%; height: calc(var(--v) / 42 * 100%); border-radius: calc(var(--u)*2) calc(var(--u)*2) 0 0; background: linear-gradient(180deg, #27b6a5, var(--ax-chart)); }
.axui-plot-area span { position: absolute; top: calc(100% + calc(var(--u)*8)); left: 50%; translate: -50% 0; white-space: nowrap; color: var(--ax-muted); font-size: calc(var(--u)*11.5); }
.axui-chart figcaption { margin-top: calc(var(--u)*28); color: var(--ax-muted); font-size: calc(var(--u)*12.5); line-height: 1.5; }

/* the chat composer (Docs dock, Space home, sessions) */
.axui-composer {
  position: absolute; z-index: 4; left: 50%; bottom: calc(var(--u)*16); translate: -50% 0; width: min(calc(var(--u)*660), calc(100% - calc(var(--u)*32)));
  display: flex; align-items: center; gap: calc(var(--u)*8); height: calc(var(--u)*56); padding: 0 calc(var(--u)*8) 0 calc(var(--u)*10); border-radius: calc(var(--u)*28);
  background: rgba(18, 23, 24, .9); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 calc(var(--u)*18) calc(var(--u)*40) rgba(0, 0, 0, .5), 0 calc(var(--u)*4) calc(var(--u)*12) rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.axui-composer.is-static { position: relative; left: auto; bottom: auto; translate: none; width: 100%; }
.axui-composer .axui-btn { color: var(--ax-text-2); }
.axui-composer-in { position: relative; flex: 1; min-width: 0; font-size: calc(var(--u)*16); white-space: nowrap; overflow: hidden; color: var(--ax-text); }
.axui-composer-in .ph { position: absolute; inset: 0; color: var(--ax-muted); transition: none !important; }
.axui-composer-in .axui-caret { --c: var(--ax-text); width: calc(var(--u)*1.5); }
.axui-composer-in .axui-caret::after { display: none; }
.axui-model { display: flex; align-items: center; gap: calc(var(--u)*7); padding: 0 calc(var(--u)*4); flex: none; }
.axui-model-ic { width: calc(var(--u)*18); height: calc(var(--u)*18); border-radius: calc(var(--u)*5); background: linear-gradient(135deg, #d97757, #c46647); flex: none; }
.axui-model-t { display: flex; flex-direction: column; line-height: 1.15; }
.axui-model-t b { font-size: calc(var(--u)*13); font-weight: 600; color: var(--ax-text); }
.axui-model-t small { font-size: calc(var(--u)*11); color: var(--ax-muted); }
.axui-send { display: grid; place-items: center; width: calc(var(--u)*40); height: calc(var(--u)*40); border-radius: 50%; flex: none; background: rgba(255, 255, 255, .08); color: var(--ax-muted); transition: background-color .35s ease, color .35s ease, transform .35s var(--ax-ease); }
.axui-send .axui-i { width: calc(var(--u)*18); height: calc(var(--u)*18); stroke-width: 2.2; }
.axui-send.is-ready { background: var(--ax-accent); color: var(--ax-on-accent); }
.axui-send.is-in:not(.is-out) { background: var(--ax-accent); color: var(--ax-on-accent); }

/* ---------- Slides editor ---------- */
.axui-stb { display: flex; align-items: center; gap: calc(var(--u)*10); height: calc(var(--u)*64); padding: 0 calc(var(--u)*14); flex: none; }
.axui-stb .axui-btn .axui-i { width: calc(var(--u)*17); height: calc(var(--u)*17); }
.axui-swatch-sq { width: calc(var(--u)*15); height: calc(var(--u)*15); border-radius: calc(var(--u)*4); background: #0d1719; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.axui-zoom { padding: 0 calc(var(--u)*6); font-size: calc(var(--u)*13.5); font-weight: 500; color: var(--ax-text-2); display: inline-flex; align-items: center; gap: calc(var(--u)*4); }
.axui-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.axui-stage > .axui-slide { grid-area: 1 / 1; --sw: calc(var(--u)*600); box-shadow: 0 calc(var(--u)*14) calc(var(--u)*40) rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); transition: opacity .6s ease, transform .7s var(--ax-ease); }
.axui-stage > .axui-slide:not(.is-on) { opacity: 0; transform: scale(.985); }
.axui-reel { flex: none; border-top: 1px solid var(--ax-line); background: rgba(14, 18, 19, .45); }
.axui-reel-bar { display: flex; align-items: center; gap: calc(var(--u)*4); height: calc(var(--u)*44); padding: 0 calc(var(--u)*8); }
.axui-reel-bar .axui-n { margin-left: calc(var(--u)*4); color: var(--ax-muted); font-size: calc(var(--u)*12.5); }
.axui-reel-bar .axui-group { padding: calc(var(--u)*2); border-radius: calc(var(--u)*9); box-shadow: none; }
.axui-thumbs { display: flex; gap: calc(var(--u)*12); padding: calc(var(--u)*2) calc(var(--u)*14) calc(var(--u)*14); overflow: hidden; }
.axui-thumb { position: relative; flex: none; width: calc(var(--u)*170); padding: calc(var(--u)*3); border-radius: calc(var(--u)*10); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); transition: box-shadow .45s ease; }
.axui-thumb.is-on { box-shadow: 0 0 0 2px var(--ax-accent); }
.axui-thumb > .axui-slide { --sw: calc(var(--u)*164); border-radius: calc(var(--u)*7); }
.axui-thumb > .axui-slide * { transition: none !important; }
.axui-thumb-n { position: absolute; left: calc(var(--u)*8); bottom: calc(var(--u)*8); display: grid; place-items: center; min-width: calc(var(--u)*20); height: calc(var(--u)*20); padding: 0 calc(var(--u)*4); border-radius: calc(var(--u)*6); background: rgba(0, 0, 0, .72); color: #fff; font-size: calc(var(--u)*11); font-weight: 650; transition: background-color .45s ease, color .45s ease; }
.axui-thumb.is-on .axui-thumb-n { background: var(--ax-accent); color: var(--ax-on-accent); }

/* a slide: 1em = 1/96 of its width, so the same markup renders on the stage and in thumbnails */
.axui-slide {
  --sw: calc(var(--u)*600); --deck-bg: #0d1719; --deck-ink: #f2ebdf; --deck-k: #82c6b2;
  position: relative; flex: none; width: var(--sw); aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--u)*2);
  font-size: calc(var(--sw) / 96); background: radial-gradient(120% 90% at 85% 10%, rgba(130, 198, 178, .07), transparent 60%), var(--deck-bg);
  color: var(--deck-ink); font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}
.axui-sl { position: absolute; inset: 0; padding: 7.4em 0 0 7em; }
.axui-sl-k { font-size: 1.5em; color: var(--deck-k); letter-spacing: .005em; }
.axui-sl-h { margin-top: .3em; width: 14.6em; font-size: 3.4em; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.axui-sl-p { position: absolute; left: 4.4em; top: 15.1em; width: 28em; font-size: 1.6em; line-height: 1.38; color: rgba(242, 235, 223, .78); }
.axui-sl-stat { position: absolute; left: 7em; top: 31.4em; display: flex; align-items: center; gap: 2.4em; }
.axui-sl-stat b { counter-reset: n var(--axui-n); font-size: 4.4em; font-weight: 700; color: var(--deck-k); line-height: 1; min-width: 2.25em; }
.axui-sl-stat b::before { content: counter(n) '%'; }
.axui-sl-stat span { font-size: 1.32em; line-height: 1.35; color: rgba(242, 235, 223, .8); }
.axui-sl-stat span strong { font-weight: 700; color: var(--deck-ink); }
.axui-sl-sw { position: absolute; left: 7em; top: 39em; display: flex; gap: 2.1em; }
.axui-sl-sw i { width: 7.5em; height: 7.5em; border-radius: 50%; background: var(--c); }
.axui-sl-foot { position: absolute; left: 5.6em; right: 5.6em; bottom: 2.7em; display: flex; justify-content: space-between; font-size: 1.25em; color: rgba(242, 235, 223, .62); }
.axui-label { position: absolute; left: 60em; top: 7.5em; width: 28em; height: 38em; border-radius: 1.4em; padding: 2em; background: var(--lb); color: var(--li); box-shadow: 0 1.4em 3em rgba(0, 0, 0, .35); }
.axui-label > div { height: 100%; border: .2em solid currentColor; border-radius: 1em; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 5.6em; }
.axui-label .q { font-size: 1.65em; font-weight: 700; letter-spacing: .26em; }
.axui-label .n { margin-top: .55em; font-size: 4em; font-style: italic; line-height: 1.05; }
.axui-label .r { width: 8em; height: .2em; background: currentColor; margin-top: auto; }
.axui-label .d { margin-top: 2.6em; font-size: 1.3em; }
.axui-label .v { margin: 3.4em 0 3.6em; font-size: 1.1em; opacity: .9; }
/* slide build-in: children with data-b reveal in order when the slide turns on */
.axui-stage > .axui-slide [data-b] { transition: opacity .6s ease, transform .75s var(--ax-ease), --axui-n 1.4s cubic-bezier(.2, .6, .2, 1); transition-delay: calc(var(--b, 0) * 110ms + 120ms); }
.axui-scene.is-armed .axui-stage > .axui-slide:not(.is-on) [data-b] { opacity: 0; transform: translateY(1.6em); transition-delay: 0s; transition-duration: .2s; }
.axui-scene.is-armed .axui-stage > .axui-slide:not(.is-on) .axui-label { transform: translateY(1.2em) scale(.97); }
.axui-sl-stat b { --axui-n: var(--to, 0); }
.axui-scene.is-armed .axui-stage > .axui-slide:not(.is-on) .axui-sl-stat b { --axui-n: 0; }
/* title and summary slides */
.axui-sl.title .axui-sl-k::before { content: ''; display: block; width: 2.4em; height: .12em; background: var(--deck-k); margin-bottom: 1.1em; }
.axui-sl.title .axui-sl-h { margin-top: .6em; width: 12em; font-size: 4.2em; }
.axui-sl.title .axui-sl-p { left: 4.4em; top: 21.6em; width: 24em; }
.axui-sl.title .axui-label { left: 70em; top: 27em; width: 13em; height: 17em; padding: 1em; }
.axui-sl.title .axui-label > div { padding-top: 2.6em; }
.axui-sl.title .axui-label .q { font-size: .9em; }
.axui-sl.title .axui-label .n { font-size: 2.2em; }
.axui-sl.title .axui-label .r { width: 4em; margin-top: 1.6em; }
.axui-sl.title .axui-label .d { margin-top: 1em; font-size: .8em; }
.axui-sl.sum .axui-sl-h { width: 26em; font-size: 3em; }
.axui-sl-rule { position: absolute; left: 7em; right: 7em; top: 27.5em; height: .1em; background: rgba(242, 235, 223, .14); }
.axui-sl-stats { position: absolute; left: 7em; right: 7em; top: 31em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3em; }
.axui-sl-stats b { display: block; font-size: 4em; color: var(--deck-k); line-height: 1; }
.axui-sl-stats span { display: block; margin-top: .8em; font-size: 1.3em; line-height: 1.4; color: rgba(242, 235, 223, .75); }

/* ---------- Video review ---------- */
.axui-vbody { flex: 1; min-height: 0; display: flex; }
.axui-player { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.axui-vstage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: #000; overflow: hidden; }
.axui-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #050708; }
.axui-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* shots: one frame per beat ([data-shot-from/to], driven by the film clock), cross-faded, each with its own slow push-in */
.axui-frame .axui-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; }
.axui-frame .axui-shot:first-child { opacity: 1; }
.axui-scene.is-armed .axui-frame .axui-shot { opacity: 0; }
.axui-scene.is-armed .axui-frame .axui-shot.is-cur { opacity: 1; }
.axui-frame .axui-shot img { transform-origin: var(--o, 50% 55%); transform: scale(calc(1.03 + var(--shot, 0) * .09)); }
.axui-end { position: absolute; left: 9%; top: 50%; translate: 0 -50%; display: grid; gap: calc(var(--u)*8); color: #f3efe6; text-shadow: 0 calc(var(--u)*2) calc(var(--u)*18) rgba(0, 0, 0, .5); }
.axui-end b { font: 400 calc(var(--u)*54)/1 Georgia, 'Iowan Old Style', 'Times New Roman', serif; letter-spacing: -.01em; }
.axui-end small { font: 600 calc(var(--u)*11)/1 'DM Sans', sans-serif; letter-spacing: .32em; text-transform: uppercase; color: rgba(243, 239, 230, .7); }
.axui-end i { display: block; width: calc(var(--u)*46); height: calc(var(--u)*2); background: #9fd8c8; border-radius: calc(var(--u)*2); opacity: .8; }
.axui-shot.is-cur .axui-end { animation: axui-endin 1.1s var(--ax-ease) both; }
@keyframes axui-endin { from { opacity: 0; translate: 0 calc(-50% + calc(var(--u)*10)); } }
.axui-frame::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .35)); pointer-events: none; }
.axui-pin { position: absolute; z-index: 2; translate: -50% -100%; color: var(--ax-accent); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.axui-pin .axui-i { width: calc(var(--u)*24); height: calc(var(--u)*24); fill: currentColor; stroke: rgba(0, 0, 0, .5); stroke-width: 1.5; }
.axui-pin.is-open { color: #fff; }
.axui-vctl { flex: none; padding: calc(var(--u)*8) calc(var(--u)*12) calc(var(--u)*8); border-top: 1px solid var(--ax-line); background: var(--ax-bg); }
.axui-lane { position: relative; height: calc(var(--u)*20); margin-bottom: calc(var(--u)*4); }
.axui-lane > i { position: absolute; top: calc(var(--u)*4); left: var(--x); translate: -50% 0; width: calc(var(--u)*12); height: calc(var(--u)*12); border-radius: 50%; border: 2px solid var(--ax-bg); background: var(--ax-accent); }
.axui-lane > i.addr { background: var(--ax-green); }
.axui-lane > i.is-sel { box-shadow: 0 0 0 calc(var(--u)*1.5) rgba(55, 205, 188, .6); }
.axui-track { position: relative; height: calc(var(--u)*32); border-radius: calc(var(--u)*8); background: var(--ax-surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, .09); }
.axui-beats { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: inherit; }
.axui-beats > span { flex: var(--w) 1 0; display: flex; align-items: center; padding: 0 calc(var(--u)*7); min-width: 0; border-left: 1px solid rgba(7, 9, 10, .7); background: rgba(255, 255, 255, .045); color: var(--ax-muted); font-size: calc(var(--u)*10.5); font-weight: 500; white-space: nowrap; overflow: hidden; transition: background-color .4s ease, color .4s ease; }
.axui-beats > span:nth-child(2n) { background: rgba(255, 255, 255, .025); }
.axui-beats > span.is-cur { background: rgba(55, 205, 188, .2); color: var(--ax-text); }
.axui-played { position: absolute; inset: 0 auto 0 0; width: calc(var(--film, 0) * 100%); background: rgba(55, 205, 188, .12); border-radius: calc(var(--u)*8) 0 0 calc(var(--u)*8); }
.axui-head { position: absolute; top: calc(var(--u)*-4); bottom: calc(var(--u)*-4); left: calc(var(--film, 0) * 100%); width: calc(var(--u)*2); translate: -50% 0; border-radius: calc(var(--u)*2); background: var(--ax-accent); }
.axui-head::before { content: ''; position: absolute; top: calc(var(--u)*-4); left: 50%; translate: -50% 0; width: calc(var(--u)*10); height: calc(var(--u)*10); border-radius: 50%; background: var(--ax-accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.axui-transport { display: flex; align-items: center; gap: calc(var(--u)*2); margin-top: calc(var(--u)*6); }
.axui-tc { display: flex; align-items: baseline; gap: calc(var(--u)*4); margin-left: calc(var(--u)*6); white-space: nowrap; }
.axui-tc b { font-size: calc(var(--u)*13); font-weight: 500; color: var(--ax-text); }
.axui-tc span { font-size: calc(var(--u)*12); color: var(--ax-muted); }
.axui-beat { margin-left: calc(var(--u)*8); max-width: calc(var(--u)*200); padding: calc(var(--u)*2) calc(var(--u)*8); border-radius: calc(var(--u)*6); background: rgba(255, 255, 255, .07); color: var(--ax-muted); font-size: calc(var(--u)*11.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.axui-loopdot { width: calc(var(--u)*6); height: calc(var(--u)*6); margin: 0 calc(var(--u)*2) 0 calc(var(--u)*-6); border-radius: 50%; background: var(--ax-accent); }
.axui-comments { width: calc(var(--u)*340); flex: none; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--ax-line); background: var(--ax-bg); }
.axui-ch { padding: calc(var(--u)*10) calc(var(--u)*12) calc(var(--u)*8); border-bottom: 1px solid var(--ax-line); flex: none; }
.axui-ch-row { display: flex; align-items: center; gap: calc(var(--u)*2); }
.axui-ch-row h4 { font-size: calc(var(--u)*13); font-weight: 650; color: var(--ax-text); margin-right: auto; }
.axui-ch-row + .axui-ch-row { margin: calc(var(--u)*8) calc(var(--u)*-4) 0; }
.axui-ch-row .axui-btn i { width: calc(var(--u)*6); height: calc(var(--u)*6); border-radius: 50%; background: var(--ax-accent); }
.axui-ch-row .axui-btn i.g { background: var(--ax-green); }
.axui-ch-row .axui-btn i.m { background: var(--ax-muted); }
.axui-ch-row .axui-btn small { font-family: 'AxuiMono', 'JetBrains Mono', ui-monospace, monospace; font-size: calc(var(--u)*10.5); opacity: .7; }
.axui-clist { flex: 1; min-height: 0; overflow: hidden; padding: calc(var(--u)*8); }
.axui-cgroup { display: flex; align-items: center; gap: calc(var(--u)*6); padding: calc(var(--u)*2) calc(var(--u)*6) calc(var(--u)*6); font-size: calc(var(--u)*10.5); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ax-muted); }
.axui-cgroup i { width: calc(var(--u)*6); height: calc(var(--u)*6); border-radius: 50%; background: var(--ax-accent); }
.axui-cgroup.g i { background: var(--ax-green); }
.axui-cmt { margin-bottom: calc(var(--u)*6); padding: calc(var(--u)*10); border-radius: calc(var(--u)*12); border: 1px solid transparent; }
.axui-cmt.is-sel { border-color: rgba(55, 205, 188, .55); background: rgba(55, 205, 188, .055); }
.axui-cmt-top { display: flex; gap: calc(var(--u)*10); }
.axui-cmt-snap { width: calc(var(--u)*72); height: calc(var(--u)*46); flex: none; border-radius: calc(var(--u)*6); background: #000 center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09); }
.axui-tcode { display: inline-block; padding: calc(var(--u)*1) calc(var(--u)*6); border-radius: calc(var(--u)*6); background: rgba(55, 205, 188, .15); color: var(--ax-accent); font-family: 'AxuiMono', 'JetBrains Mono', ui-monospace, monospace; font-size: calc(var(--u)*11); font-weight: 650; }
.axui-cmt .axui-cmt-beat { margin-top: calc(var(--u)*3); font-size: calc(var(--u)*11); color: var(--ax-muted); }
.axui-cmt > p:not([class]) { margin-top: calc(var(--u)*7); font-size: calc(var(--u)*13); line-height: 1.38; color: var(--ax-text); }
.axui-cmt .axui-cmt-by { display: flex; align-items: center; gap: calc(var(--u)*4); margin-top: calc(var(--u)*7); font-size: calc(var(--u)*11); color: var(--ax-muted); }
.axui-cmt-by b { font-weight: 550; color: rgba(233, 239, 237, .8); }
.axui-cmt-by .axui-i { width: calc(var(--u)*11); height: calc(var(--u)*11); }
.axui-cmt-by .is-agent { color: var(--ax-accent); }
.axui-cmt-by .ok { margin-left: calc(var(--u)*4); padding: calc(var(--u)*1) calc(var(--u)*6); border-radius: calc(var(--u)*99); background: rgba(74, 190, 123, .15); color: var(--ax-green); font-size: calc(var(--u)*10.5); font-weight: 550; }
.axui-vcomposer { flex: none; padding: calc(var(--u)*12); border-top: 1px solid var(--ax-line); }
.axui-vbox { border-radius: calc(var(--u)*12); border: 1px solid rgba(255, 255, 255, .1); background: rgba(14, 18, 19, .8); }
.axui-vbox-top { display: flex; align-items: center; gap: calc(var(--u)*4); padding: calc(var(--u)*8) calc(var(--u)*8) 0; }
.axui-vbox-top .axui-tcode { font-size: calc(var(--u)*11.5); }
.axui-vbox-in { padding: calc(var(--u)*7) calc(var(--u)*10); min-height: calc(var(--u)*40); font-size: calc(var(--u)*13); line-height: 1.38; color: var(--ax-muted); }
.axui-vbox-bot { display: flex; align-items: center; gap: calc(var(--u)*6); padding: 0 calc(var(--u)*8) calc(var(--u)*8); font-size: calc(var(--u)*11); color: var(--ax-muted); }
.axui-vbox-bot span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.axui-kbd { display: inline-block; padding: 0 calc(var(--u)*4); border-radius: calc(var(--u)*4); border: 1px solid rgba(255, 255, 255, .14); font-family: 'AxuiMono', 'JetBrains Mono', ui-monospace, monospace; font-size: calc(var(--u)*10); }
.axui-current { padding: 0 calc(var(--u)*4); border-radius: calc(var(--u)*4); background: rgba(74, 190, 123, .15); color: var(--ax-green); font-size: calc(var(--u)*10); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Space app ---------- */
.axui-appbar { display: flex; align-items: center; gap: calc(var(--u)*4); height: calc(var(--u)*44); padding: 0 calc(var(--u)*10); flex: none; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.axui-tab { display: inline-flex; align-items: center; gap: calc(var(--u)*6); height: calc(var(--u)*32); padding: 0 calc(var(--u)*8); border-radius: calc(var(--u)*8); font-size: calc(var(--u)*12.5); font-weight: 500; color: var(--ax-muted); }
.axui-tab.primary { padding: 0 calc(var(--u)*10); font-size: calc(var(--u)*13); color: var(--ax-text); }
.axui-tab.is-on { background: rgba(55, 205, 188, .15); color: var(--ax-accent); }
.axui-tab .em { font-size: calc(var(--u)*15); line-height: 1; }
.axui-appstatus { margin-right: calc(var(--u)*4); font-size: calc(var(--u)*12); color: var(--ax-muted); white-space: nowrap; }
/* the app's own UI (rendered inside Axis' app frame) */
.axui-app { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: calc(var(--u)*22) calc(var(--u)*26); background: radial-gradient(90% 60% at 100% 0%, rgba(55, 205, 188, .045), transparent 60%), #0a0d0e; }
.axui-app-h { display: flex; align-items: flex-end; gap: calc(var(--u)*12); }
.axui-app-h h3 { font-size: calc(var(--u)*21); font-weight: 700; letter-spacing: -.02em; color: #f3f6f5; }
.axui-app-h p { margin-top: calc(var(--u)*3); font-size: calc(var(--u)*12.5); color: var(--ax-muted); }
.axui-app-h .axui-sp + * { margin-bottom: calc(var(--u)*2); }
.axui-abtn { display: inline-flex; align-items: center; gap: calc(var(--u)*6); height: calc(var(--u)*32); padding: 0 calc(var(--u)*12); border-radius: calc(var(--u)*9); font-size: calc(var(--u)*12.5); font-weight: 600; color: var(--ax-text); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); white-space: nowrap; }
.axui-abtn.pri { background: var(--ax-accent); color: var(--ax-on-accent); box-shadow: none; }
.axui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u)*12); margin-top: calc(var(--u)*18); }
.axui-kpi { padding: calc(var(--u)*13) calc(var(--u)*15); border-radius: calc(var(--u)*12); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.axui-kpi small { display: block; font-size: calc(var(--u)*11.5); color: var(--ax-muted); }
.axui-kpi b { display: flex; align-items: baseline; gap: calc(var(--u)*6); margin-top: calc(var(--u)*4); font-size: calc(var(--u)*22); font-weight: 700; letter-spacing: -.02em; color: #f3f6f5; }
.axui-kpi b em { font-style: normal; font-size: calc(var(--u)*12); font-weight: 500; color: var(--ax-muted); letter-spacing: 0; }
.axui-swap { display: inline-grid; }
.axui-swap > * { grid-area: 1 / 1; justify-self: start; transition: opacity .5s ease, transform .6s var(--ax-ease); }
.axui-swap > .b { opacity: 0; transform: translateY(calc(var(--u)*6)); }
.axui-swap.is-in > .a { opacity: 0; transform: translateY(calc(var(--u)*-6)); }
.axui-swap.is-in > .b { opacity: 1; transform: none; }
.axui-atable { width: 100%; margin-top: calc(var(--u)*16); border-collapse: separate; border-spacing: 0; border-radius: calc(var(--u)*12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); overflow: hidden; }
.axui-atable th { padding: calc(var(--u)*9) calc(var(--u)*14); text-align: left; font-size: calc(var(--u)*11); font-weight: 600; letter-spacing: .02em; color: var(--ax-muted); background: rgba(255, 255, 255, .025); border-bottom: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; }
.axui-atable td { padding: calc(var(--u)*11) calc(var(--u)*14); font-size: calc(var(--u)*13); color: var(--ax-text-2); border-bottom: 1px solid rgba(255, 255, 255, .055); white-space: nowrap; transition: background-color .6s ease; }
.axui-atable tr:last-child td { border-bottom: 0; }
.axui-atable td:first-child { color: var(--ax-text); font-weight: 550; }
.axui-atable td small { display: block; font-size: calc(var(--u)*11); font-weight: 400; color: var(--ax-muted); }
.axui-atable .num { text-align: right; font-variant-numeric: tabular-nums; }
.axui-meter { display: flex; align-items: center; gap: calc(var(--u)*10); }
.axui-meter em { position: relative; width: calc(var(--u)*90); height: calc(var(--u)*5); border-radius: calc(var(--u)*9); background: rgba(255, 255, 255, .07); overflow: hidden; }
.axui-meter em b { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: rgba(233, 239, 237, .55); transition: width 1s var(--ax-ease), background-color .6s ease; }
.axui-meter.low em b { background: var(--ax-amber); }
.axui-meter span { min-width: calc(var(--u)*40); text-align: right; font-variant-numeric: tabular-nums; }
.axui-atable tr.is-in:not(.is-out) td { background: rgba(55, 205, 188, .07); }
.axui-alog { display: flex; align-items: center; gap: calc(var(--u)*8); margin-top: calc(var(--u)*14); padding: 0 calc(var(--u)*4); font-size: calc(var(--u)*12); color: var(--ax-muted); white-space: nowrap; overflow: hidden; }
.axui-alog .axui-i { color: var(--ax-accent); }
.axui-alog b { font-weight: 600; color: var(--ax-text-2); }
.axui-toast {
  position: absolute; z-index: 5; right: calc(var(--u)*18); bottom: calc(var(--u)*18); display: flex; align-items: center; gap: calc(var(--u)*10); max-width: calc(var(--u)*380);
  padding: calc(var(--u)*10) calc(var(--u)*12) calc(var(--u)*10) calc(var(--u)*10); border-radius: calc(var(--u)*12); background: rgba(22, 28, 29, .94); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 calc(var(--u)*16) calc(var(--u)*40) rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.axui-toast-ic { display: grid; place-items: center; width: calc(var(--u)*28); height: calc(var(--u)*28); border-radius: calc(var(--u)*8); background: rgba(55, 205, 188, .14); color: var(--ax-accent); flex: none; }
.axui-toast p { font-size: calc(var(--u)*12.5); line-height: 1.35; color: var(--ax-text); }
.axui-toast p small { display: block; font-size: calc(var(--u)*11.5); color: var(--ax-muted); }

/* ---------- Spaces sidebar ---------- */
.axui-side { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0 calc(var(--u)*10) calc(var(--u)*10); background: linear-gradient(180deg, #0b0e0f, #090b0c); font-size: calc(var(--u)*13); }
/* full-height sidebar: its top strip is the window's title bar, so the traffic lights sit here, top-left */
.axui-side-top { display: flex; align-items: center; flex: none; height: calc(var(--u)*46); margin: 0 calc(var(--u)*-10); padding: 0 calc(var(--u)*20); }
.axui-side-top .axui-lights { margin: 0; }
.axui-side-h { display: flex; align-items: center; gap: calc(var(--u)*10); height: calc(var(--u)*50); padding: 0 calc(var(--u)*6); }
.axui-side-top + .axui-side-h { height: calc(var(--u)*40); margin-bottom: calc(var(--u)*6); }
/* Harbor & Pine, the fictional studio's mark: a pine over the harbour line on deep green */
.axui-org { display: grid; place-items: center; flex: none; width: calc(var(--u)*22); height: calc(var(--u)*22); border-radius: calc(var(--u)*6); background: linear-gradient(160deg, #2d6e5d, #143a32 78%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .4); }
.axui-org svg { width: calc(var(--u)*18); height: calc(var(--u)*18); display: block; }
/* Sessions | Files: the floating sidebar's pill (client SidebarPanelToggle), centred above the list */
.axui-pill { display: flex; align-self: center; flex: none; padding: calc(var(--u)*2); border-radius: 999px; background: rgba(7, 9, 10, .4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .075); }
.axui-pill span { display: flex; align-items: center; gap: calc(var(--u)*6); height: calc(var(--u)*24); padding: 0 calc(var(--u)*14); border-radius: 999px; font-size: calc(var(--u)*11); font-weight: 500; color: var(--ax-muted); white-space: nowrap; }
.axui-pill span.is-on { background: rgba(55, 205, 188, .15); color: var(--ax-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.axui-pill .axui-i { width: calc(var(--u)*14); height: calc(var(--u)*14); stroke-width: 2; }
.axui-pill + .axui-search { margin-top: calc(var(--u)*12); }
.axui-side-h b { flex: 1; font-family: 'AxuiMono', 'JetBrains Mono', ui-monospace, monospace; font-size: calc(var(--u)*12.5); font-weight: 500; letter-spacing: .28em; color: var(--ax-text-2); }
.axui-seg { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*4); padding: calc(var(--u)*4); border-radius: calc(var(--u)*10); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.axui-seg span { display: flex; align-items: center; justify-content: center; gap: calc(var(--u)*6); height: calc(var(--u)*28); border-radius: calc(var(--u)*7); font-family: 'AxuiMono', 'JetBrains Mono', ui-monospace, monospace; font-size: calc(var(--u)*12); color: var(--ax-muted); }
.axui-seg span.is-on { background: rgba(55, 205, 188, .14); color: var(--ax-accent); }
.axui-search { display: flex; align-items: center; gap: calc(var(--u)*8); margin-top: calc(var(--u)*10); height: calc(var(--u)*36); padding: 0 calc(var(--u)*12); border-radius: calc(var(--u)*10); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); color: var(--ax-muted); }
.axui-side-sec { display: flex; align-items: center; gap: calc(var(--u)*6); margin: calc(var(--u)*18) 0 calc(var(--u)*6); padding: 0 calc(var(--u)*4); font-size: calc(var(--u)*11.5); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ax-muted); }
.axui-side-sec small { font-size: calc(var(--u)*11); letter-spacing: .1em; }
.axui-row { display: flex; align-items: center; gap: calc(var(--u)*10); height: calc(var(--u)*34); padding: 0 calc(var(--u)*8); border-radius: calc(var(--u)*8); color: var(--ax-text); font-size: calc(var(--u)*14); white-space: nowrap; }
.axui-row .em { width: calc(var(--u)*18); text-align: center; font-size: calc(var(--u)*14); }
.axui-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.axui-row time { color: var(--ax-muted); font-size: calc(var(--u)*12); }
.axui-row .axui-i { color: var(--ax-muted); }
.axui-row.sub { padding-left: calc(var(--u)*34); font-size: calc(var(--u)*13.5); }
.axui-row.sub .axui-i { color: var(--ax-accent); }
.axui-row.is-on { background: rgba(55, 205, 188, .09); }
/* Doc type tiles: the product's coloured squircle with a white glyph, one per kind (same art and colours as
   src/shared/docs/docTypeTileArt.ts in the axis repo, 18px in the sidebar). Glyphs are the #axui-t-* sprite symbols. */
.axui-tile { flex: none; display: inline-grid; place-items: center; width: calc(var(--u)*18); height: calc(var(--u)*18); background: linear-gradient(var(--t), var(--b)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.75c7.75 0 10.25 2.5 10.25 10.25S19.75 22.25 12 22.25 1.75 19.75 1.75 12 4.25 1.75 12 1.75Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.75c7.75 0 10.25 2.5 10.25 10.25S19.75 22.25 12 22.25 1.75 19.75 1.75 12 4.25 1.75 12 1.75Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.axui-tile > .axui-i, .axui-row .axui-tile > .axui-i { width: calc(var(--u)*18); height: calc(var(--u)*18); color: #fff; }
.axui-tile.docs { --t: #5086ee; --b: #2F6FEB; }
.axui-tile.slides { --t: #df8934; --b: #D9730D; }
.axui-tile.app { --t: #319fb6; --b: #0A8DA8; }
.axui-tile.video { --t: #e5656b; --b: #E0484F; }

/* ---------- compact layouts (narrow panes and phone screens) ---------- */

/* ---------- Fleet console (Space app): live map, KPIs, van board. Admin tabs live behind the ••• button. ---------- */
.fl-bar { display: flex; align-items: center; gap: calc(var(--u)*9); height: calc(var(--u)*48); padding: 0 calc(var(--u)*12) 0 calc(var(--u)*14); flex: none; border-bottom: 1px solid rgba(255, 255, 255, .06); background: #0a0d0e; }
.fl-logo { display: grid; place-items: center; width: calc(var(--u)*26); height: calc(var(--u)*26); border-radius: calc(var(--u)*8); background: linear-gradient(150deg, #37cdbc, #1a8f83); color: #04201c; }
.fl-name { font-size: calc(var(--u)*14.5); font-weight: 650; letter-spacing: -.015em; color: #f3f6f5; }
.fl-live { display: inline-flex; align-items: center; gap: calc(var(--u)*6); padding: calc(var(--u)*3) calc(var(--u)*8); border-radius: calc(var(--u)*99); background: rgba(74, 190, 123, .12); font-size: calc(var(--u)*11); font-weight: 600; color: var(--ax-green); }
.fl-live i { width: calc(var(--u)*6); height: calc(var(--u)*6); border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(74, 190, 123, .6); animation: fl-ping 1.8s ease-out infinite; }
@keyframes fl-ping { 70%, 100% { box-shadow: 0 0 0 calc(var(--u)*7) rgba(74, 190, 123, 0); } }
.fl-seg { display: inline-flex; padding: calc(var(--u)*3); border-radius: calc(var(--u)*9); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.fl-seg span { padding: calc(var(--u)*4) calc(var(--u)*10); border-radius: calc(var(--u)*6); font-size: calc(var(--u)*12); font-weight: 550; color: var(--ax-muted); }
.fl-seg .is-on { background: rgba(255, 255, 255, .09); color: var(--ax-text); }
.fl-pick { display: inline-flex; align-items: center; gap: calc(var(--u)*5); height: calc(var(--u)*28); padding: 0 calc(var(--u)*9); border-radius: calc(var(--u)*8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: calc(var(--u)*12); color: var(--ax-text-2); }
.fl-more { color: var(--ax-muted); }
.fl-body { position: relative; flex: 1; min-height: 0; display: flex; }
.fl-map { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.fl-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fl-svg .fl-sea { fill: url(#fl-sea); stroke: rgba(55, 205, 188, .28); stroke-width: 1.2; }
.fl-svg .fl-park { fill: #0d1714; }
.fl-svg .fl-pier { fill: none; stroke: #1d2628; stroke-width: 5; stroke-linecap: round; }
.fl-svg .fl-minor path { fill: none; stroke: #161d1f; stroke-width: 1.6; stroke-linecap: round; }
.fl-svg .fl-main path { fill: none; stroke: #222c2f; stroke-width: 4.2; stroke-linecap: round; }
.fl-svg .fl-labels text { font: 600 8.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em; fill: #48545a; }
.fl-svg .fl-route { fill: none; stroke: #37cdbc; stroke-width: 3.4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(55, 205, 188, .55)); transition: opacity .6s ease, stroke .6s ease; }
.fl-svg .fl-closed { fill: none; stroke: #f16570; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: .02 .018; opacity: 0; transition: opacity .5s ease; }
.fl-svg .fl-new { fill: none; stroke: #84e4d8; stroke-width: 3.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(55, 205, 188, .8)); }
.axui-scene.is-armed .fl-svg .fl-closed:not(.is-in)[data-fx] { opacity: 0; }
.axui-scene.is-armed .fl-svg .fl-closed.is-in[data-fx] { opacity: 1; transition: opacity .5s ease; }
.axui-scene.is-armed .fl-svg .fl-new.is-in[data-fx] { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ax-ease); }
.axui-scene:not(.is-armed) .fl-svg .fl-new { stroke-dashoffset: 0; }
.axui-scene:not(.is-armed) .fl-svg .fl-route, .fl-svg:has(.fl-new.is-in) .fl-route { opacity: .18; }
.fl-svg:has(.fl-new.is-in) .fl-closed { opacity: .35 !important; }
.fl-svg .fl-depot circle { fill: #11181a; stroke: rgba(255, 255, 255, .25); stroke-width: 1.4; }
.fl-svg .fl-depot use { color: #e9efed; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fl-svg .fl-dest circle { fill: #e9efed; }
.fl-svg .fl-dest .fl-dest-ring { fill: rgba(233, 239, 237, .1); stroke: rgba(233, 239, 237, .4); stroke-width: 1.2; }
.fl-svg .fl-closure-in > circle { fill: #f16570; }
.fl-svg .fl-closure-in .fl-closure-ring { fill: rgba(241, 101, 112, .22); animation: fl-pulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.fl-svg .fl-closure use { color: #2a0b0e; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fl-svg .fl-closure { transform-box: fill-box; transform-origin: center; }
@keyframes fl-pulse { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.fl-svg .fl-van circle { fill: var(--c); stroke: #07090a; stroke-width: 2.5; }
.fl-svg .fl-van .h { fill: var(--c); opacity: .2; stroke: none; }
.fl-svg .fl-van text { font: 700 10.5px 'DM Sans', sans-serif; fill: #07090a; text-anchor: middle; }
.fl-svg .fl-van7 { --c: #37cdbc; }
.fl-svg .fl-van7 .h { animation: fl-pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; opacity: .45; }
.fl-map::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45)), linear-gradient(90deg, transparent 85%, rgba(7, 9, 10, .55)); }
.fl-kpis { position: absolute; z-index: 2; left: calc(var(--u)*14); top: calc(var(--u)*14); display: flex; gap: calc(var(--u)*8); }
.fl-kpi { padding: calc(var(--u)*9) calc(var(--u)*12) calc(var(--u)*10); border-radius: calc(var(--u)*12); background: rgba(12, 16, 17, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 calc(var(--u)*10) calc(var(--u)*24) calc(var(--u)*-10) rgba(0, 0, 0, .8); }
.fl-kpi small { display: block; font-size: calc(var(--u)*10.5); font-weight: 550; color: var(--ax-muted); letter-spacing: .01em; }
.fl-kpi b { display: flex; align-items: baseline; gap: calc(var(--u)*6); margin-top: calc(var(--u)*3); font-size: calc(var(--u)*21); font-weight: 700; letter-spacing: -.025em; color: #f3f6f5; font-variant-numeric: tabular-nums; }
.fl-kpi b em { font-style: normal; font-size: calc(var(--u)*11.5); font-weight: 500; color: var(--ax-muted); letter-spacing: 0; }
.fl-delta { font-size: calc(var(--u)*11); font-weight: 650; letter-spacing: 0; }
.fl-delta .dn { color: var(--ax-red); } .fl-delta .up { color: var(--ax-green); }
.fl-alert { position: absolute; z-index: 2; left: calc(var(--u)*14); top: calc(var(--u)*86); display: flex; align-items: center; gap: calc(var(--u)*8); padding: calc(var(--u)*8) calc(var(--u)*12); border-radius: calc(var(--u)*10); background: rgba(60, 16, 20, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(241, 101, 112, .35); font-size: calc(var(--u)*12); color: #f7c9cd; white-space: nowrap; }
.fl-alert .axui-i { color: #f16570; } .fl-alert b { color: #fff; font-weight: 600; }
.axui-scene:not(.is-armed) .fl-alert { display: none; }
.fl-ctl { position: absolute; z-index: 2; right: calc(var(--u)*14); bottom: calc(var(--u)*14); display: grid; border-radius: calc(var(--u)*10); overflow: hidden; background: rgba(12, 16, 17, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.fl-ctl span { display: grid; place-items: center; width: calc(var(--u)*30); height: calc(var(--u)*30); color: var(--ax-text-2); border-top: 1px solid rgba(255, 255, 255, .06); }
.fl-ctl span:first-child { border-top: 0; }
.fl-toast.axui-toast { left: calc(var(--u)*14); right: auto; bottom: calc(var(--u)*14); z-index: 3; }
.fl-side { width: calc(var(--u)*330); flex: none; display: flex; flex-direction: column; border-left: 1px solid rgba(255, 255, 255, .06); background: #0a0d0e; }
.fl-side-h { display: flex; align-items: center; gap: calc(var(--u)*7); padding: calc(var(--u)*14) calc(var(--u)*16) calc(var(--u)*10); }
.fl-side-h > b { font-size: calc(var(--u)*14); font-weight: 650; color: #f3f6f5; }
.fl-side-n { padding: calc(var(--u)*1) calc(var(--u)*6); border-radius: calc(var(--u)*6); background: rgba(255, 255, 255, .07); font-size: calc(var(--u)*11); font-weight: 600; color: var(--ax-muted); }
.fl-filter { padding: calc(var(--u)*3) calc(var(--u)*8); border-radius: calc(var(--u)*7); font-size: calc(var(--u)*11.5); font-weight: 550; color: var(--ax-muted); }
.fl-filter.is-on { background: rgba(55, 205, 188, .14); color: var(--ax-accent); }
.fl-vans { margin: 0; padding: 0 calc(var(--u)*8); }
.fl-vans li { display: flex; align-items: center; gap: calc(var(--u)*11); padding: calc(var(--u)*10) calc(var(--u)*8); border-radius: calc(var(--u)*10); transition: background-color .6s ease, box-shadow .6s ease; }
.fl-vans li + li { margin-top: calc(var(--u)*2); }
.fl-vans li.fl-v7.is-in:not(.is-out) { background: rgba(241, 101, 112, .08); box-shadow: inset 0 0 0 1px rgba(241, 101, 112, .25); }
.fl-num { display: grid; place-items: center; width: calc(var(--u)*28); height: calc(var(--u)*28); flex: none; border-radius: 50%; background: var(--c); font-size: calc(var(--u)*12); font-weight: 700; color: #07090a; box-shadow: 0 0 0 calc(var(--u)*3) rgba(255, 255, 255, .04); }
.fl-who { flex: 1; min-width: 0; }
.fl-who b { display: block; font-size: calc(var(--u)*12.5); font-weight: 600; color: var(--ax-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-who small { display: block; margin-top: calc(var(--u)*1); font-size: calc(var(--u)*11); color: var(--ax-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-prog { display: block; height: calc(var(--u)*3); margin-top: calc(var(--u)*7); border-radius: calc(var(--u)*3); background: rgba(255, 255, 255, .07); overflow: hidden; }
.fl-prog i { display: block; width: var(--w); height: 100%; border-radius: calc(var(--u)*3); background: linear-gradient(90deg, rgba(55, 205, 188, .5), #37cdbc); }
.fl-eta { flex: none; text-align: right; }
.fl-eta b { display: block; font-size: calc(var(--u)*13); font-weight: 650; color: var(--ax-text); font-variant-numeric: tabular-nums; }
.fl-eta small { display: block; font-size: calc(var(--u)*10.5); color: var(--ax-muted); }
.fl-eta .axui-swap > * { justify-self: end; }
.fl-eta .late small, .fl-eta .late b { color: #f16570; } .fl-eta .good small { color: var(--ax-green); }
.fl-chart { margin: auto calc(var(--u)*16) 0; padding: calc(var(--u)*14) 0 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.fl-chart-h { display: flex; align-items: baseline; justify-content: space-between; font-size: calc(var(--u)*11.5); color: var(--ax-muted); }
.fl-chart-h > b { font-size: calc(var(--u)*12.5); font-weight: 600; color: var(--ax-text); }
.fl-chart-h span b { color: var(--ax-text); font-weight: 650; }
.fl-bars { display: flex; align-items: flex-end; gap: calc(var(--u)*6); height: calc(var(--u)*74); margin-top: calc(var(--u)*12); }
.fl-bars i { flex: 1; height: var(--h); border-radius: calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*2) calc(var(--u)*2); background: linear-gradient(#37cdbc, rgba(55, 205, 188, .35)); }
.fl-bars i.now { background: linear-gradient(#84e4d8, #37cdbc); box-shadow: 0 0 calc(var(--u)*12) rgba(55, 205, 188, .5); }
.fl-bars i.next { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.fl-hours { display: flex; justify-content: space-between; margin-top: calc(var(--u)*6); font-size: calc(var(--u)*10); color: var(--ax-faint); }
.fl-log { display: flex; align-items: center; gap: calc(var(--u)*8); margin: calc(var(--u)*12) calc(var(--u)*16) calc(var(--u)*14); font-size: calc(var(--u)*11.5); color: var(--ax-muted); white-space: nowrap; overflow: hidden; }
.fl-log .axui-i { color: var(--ax-accent); flex: none; } .fl-log b { font-weight: 600; color: var(--ax-text-2); }

@container axui (max-width: 600px) {
  .axui-win { --axui-scale: 1.1; }
}
@container axui (max-width: 480px) {
  .axui-win { --axui-scale: 1.72; --axui-h: 700; border-radius: calc(var(--u)*12); }
  .axui-doc-page { --axui-scroll: 200; }
  .axui-bar { gap: calc(var(--u)*10); padding: 0 calc(var(--u)*10) 0 calc(var(--u)*14); }
  .axui-lights { margin-right: calc(var(--u)*2); }
  .axui-hide-c { display: none !important; }
  .axui-doc-col { width: calc(100% - calc(var(--u)*40)); }
  .axui-gutter { display: none; }
  .axui-doc h2 .axui-i { display: none; }
  .axui-dtable th:nth-child(n+3), .axui-dtable td:nth-child(n+3) { display: none; }
  .axui-composer { width: calc(100% - calc(var(--u)*20)); bottom: calc(var(--u)*10); height: calc(var(--u)*50); }
  .axui-model { display: none; }
  .axui-stb { height: calc(var(--u)*52); gap: calc(var(--u)*6); padding: 0 calc(var(--u)*10); }
  .axui-stage > .axui-slide { --sw: calc(var(--u)*540); }
  .axui-thumb { width: calc(var(--u)*150); }
  .axui-thumb > .axui-slide { --sw: calc(var(--u)*144); }
  .axui-vbody { flex-direction: column; }
  .axui-vstage { flex: none; }
  .axui-comments { width: auto; flex: 1; border-left: 0; border-top: 1px solid var(--ax-line); }
  .axui-vcomposer { display: none; }
  .fl-body { flex-direction: column; }
  .fl-map { flex: none; height: calc(var(--u)*360); }
  .fl-svg { inset: auto 0 calc(var(--u)*-30) 0; height: auto; aspect-ratio: 620 / 590; }
  .fl-side { width: auto; flex: 1; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
  .fl-kpi b { font-size: calc(var(--u)*19); }
  .fl-alert { top: calc(var(--u)*80); right: calc(var(--u)*14); white-space: normal; }
  .fl-toast.axui-toast { left: calc(var(--u)*12); right: calc(var(--u)*12); top: calc(var(--u)*80); bottom: auto; }
  .fl-log { display: none; }
  .axui-app { padding: calc(var(--u)*18) calc(var(--u)*16); }
  .axui-kpi { padding: calc(var(--u)*10) calc(var(--u)*11); }
  .axui-kpi b { font-size: calc(var(--u)*18); }
  .axui-meter em { width: calc(var(--u)*46); }
  .axui-toast { left: calc(var(--u)*12); right: calc(var(--u)*12); bottom: calc(var(--u)*12); max-width: none; }
}