/* mars-ui tokens — generated from tokens/tokens.json, do not edit by hand. Colors, shadows and radii are visually derived from Geist (Vercel's design system, vercel.com/geist); values were read from its public CSS custom properties on 2026-09-15. Geist Sans/Mono fonts: SIL OFL 1.1. mars-ui is not a Vercel product. */
:root{
  --mu-gray-100:hsl(0,0%,95%);
  --mu-gray-200:hsl(0,0%,92%);
  --mu-gray-300:hsl(0,0%,90%);
  --mu-gray-400:hsl(0,0%,92%);
  --mu-gray-500:hsl(0,0%,79%);
  --mu-gray-600:hsl(0,0%,66%);
  --mu-gray-700:hsl(0,0%,56%);
  --mu-gray-800:hsl(0,0%,49%);
  --mu-gray-900:hsl(0,0%,30%);
  --mu-gray-1000:hsl(0,0%,9%);
  --mu-blue-100:hsl(212,100%,97%);
  --mu-blue-200:hsl(210,100%,96%);
  --mu-blue-300:hsl(210,100%,94%);
  --mu-blue-400:hsl(209,100%,90%);
  --mu-blue-500:hsl(209,100%,80%);
  --mu-blue-600:hsl(208,100%,66%);
  --mu-blue-700:hsl(212,100%,48%);
  --mu-blue-800:hsl(212,100%,41%);
  --mu-blue-900:hsl(211,100%,42%);
  --mu-blue-1000:hsl(211,100%,15%);
  --mu-red-100:hsl(0,100%,97%);
  --mu-red-200:hsl(0,100%,96%);
  --mu-red-300:hsl(0,100%,95%);
  --mu-red-400:hsl(0,90%,92%);
  --mu-red-500:hsl(0,82%,85%);
  --mu-red-600:hsl(359,90%,71%);
  --mu-red-700:hsl(358,75%,59%);
  --mu-red-800:hsl(358,70%,52%);
  --mu-red-900:hsl(358,66%,48%);
  --mu-red-1000:hsl(355,49%,15%);
  --mu-amber-100:hsl(39,100%,95%);
  --mu-amber-200:hsl(44,100%,92%);
  --mu-amber-300:hsl(43,96%,90%);
  --mu-amber-400:hsl(42,100%,78%);
  --mu-amber-500:hsl(38,100%,71%);
  --mu-amber-600:hsl(36,90%,62%);
  --mu-amber-700:hsl(39,100%,57%);
  --mu-amber-800:hsl(35,100%,52%);
  --mu-amber-900:hsl(30,100%,32%);
  --mu-amber-1000:hsl(20,79%,17%);
  --mu-green-100:hsl(120,60%,96%);
  --mu-green-200:hsl(120,60%,95%);
  --mu-green-300:hsl(120,60%,91%);
  --mu-green-400:hsl(122,60%,86%);
  --mu-green-500:hsl(124,60%,75%);
  --mu-green-600:hsl(125,60%,64%);
  --mu-green-700:hsl(131,41%,46%);
  --mu-green-800:hsl(132,43%,39%);
  --mu-green-900:hsl(133,50%,32%);
  --mu-green-1000:hsl(128,29%,15%);
  --mu-teal-100:hsl(169,70%,96%);
  --mu-teal-200:hsl(167,70%,94%);
  --mu-teal-300:hsl(168,70%,90%);
  --mu-teal-400:hsl(170,70%,85%);
  --mu-teal-500:hsl(170,70%,72%);
  --mu-teal-600:hsl(170,70%,57%);
  --mu-teal-700:hsl(173,80%,36%);
  --mu-teal-800:hsl(173,83%,30%);
  --mu-teal-900:hsl(174,91%,25%);
  --mu-teal-1000:hsl(171,80%,13%);
  --mu-purple-100:hsl(276,100%,97%);
  --mu-purple-200:hsl(277,87%,97%);
  --mu-purple-300:hsl(274,78%,95%);
  --mu-purple-400:hsl(276,71%,92%);
  --mu-purple-500:hsl(274,70%,82%);
  --mu-purple-600:hsl(273,72%,73%);
  --mu-purple-700:hsl(272,51%,54%);
  --mu-purple-800:hsl(272,47%,45%);
  --mu-purple-900:hsl(274,71%,43%);
  --mu-purple-1000:hsl(276,100%,15%);
  --mu-pink-100:hsl(330,100%,96%);
  --mu-pink-200:hsl(340,90%,96%);
  --mu-pink-300:hsl(340,82%,94%);
  --mu-pink-400:hsl(341,76%,91%);
  --mu-pink-500:hsl(340,75%,84%);
  --mu-pink-600:hsl(341,75%,73%);
  --mu-pink-700:hsl(336,80%,58%);
  --mu-pink-800:hsl(336,74%,51%);
  --mu-pink-900:hsl(336,65%,45%);
  --mu-pink-1000:hsl(333,74%,15%);
  --mu-orange-100:hsl(24,100%,96%);
  --mu-orange-200:hsl(24,100%,94%);
  --mu-orange-300:hsl(24,100%,90%);
  --mu-orange-400:hsl(24,100%,84%);
  --mu-orange-500:hsl(23,100%,74%);
  --mu-orange-600:hsl(22,100%,65%);
  --mu-orange-700:hsl(22,100%,58%);
  --mu-orange-800:hsl(20,100%,50%);
  --mu-orange-900:hsl(18,85%,40%);
  --mu-orange-1000:hsl(18,70%,16%);
  --mu-lime-100:hsl(66,80%,95%);
  --mu-lime-200:hsl(66,80%,92%);
  --mu-lime-300:hsl(66,75%,86%);
  --mu-lime-400:hsl(66,70%,76%);
  --mu-lime-500:hsl(66,65%,62%);
  --mu-lime-600:hsl(66,65%,50%);
  --mu-lime-700:hsl(66,70%,44%);
  --mu-lime-800:hsl(66,70%,39%);
  --mu-lime-900:hsl(66,80%,26%);
  --mu-lime-1000:hsl(66,60%,12%);
  --mu-gray-alpha-100:#0000000d;
  --mu-gray-alpha-200:#00000014;
  --mu-gray-alpha-300:#0000001a;
  --mu-gray-alpha-400:#00000014;
  --mu-gray-alpha-500:#00000036;
  --mu-gray-alpha-600:#00000057;
  --mu-gray-alpha-700:#00000070;
  --mu-gray-alpha-800:#00000082;
  --mu-gray-alpha-900:#000000b3;
  --mu-gray-alpha-1000:#000000e8;
  --mu-background-100:hsl(0,0%,100%);
  --mu-background-200:hsl(0,0%,98%);
  --mu-shadow-border-base:0 0 0 1px #00000014;
  --mu-shadow-small:0px 2px 2px #0000000a;
  --mu-shadow-medium:0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a;
  --mu-shadow-large:0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
  --mu-shadow-tooltip:0 0 0 1px #00000014, 0px 1px 1px #00000005, 0px 4px 8px #0000000a, 0 0 0 1px hsla(0, 0%, 98%, 1);
  --mu-shadow-menu:0 0 0 1px #00000014, 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f, 0 0 0 1px hsla(0, 0%, 98%, 1);
  --mu-shadow-modal:0 0 0 1px #00000014, 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, 0 0 0 1px hsla(0, 0%, 98%, 1);
  --mu-focus-ring:0 0 0 2px hsla(0, 0%, 100%, 1), 0 0 0 4px hsla(212, 100%, 48%, 1);
  --mu-focus-color:hsl(212,100%,48%);
  --mu-focus-border:0 0 0 1px #00000057, 0px 0px 0px 4px #00000029;
  --mu-radius-sm:6px;
  --mu-radius-md:12px;
  --mu-radius-lg:16px;
  --mu-radius-full:9999px;
  --mu-space-1:4px;
  --mu-space-2:8px;
  --mu-space-3:12px;
  --mu-space-4:16px;
  --mu-space-5:20px;
  --mu-space-6:24px;
  --mu-space-8:32px;
  --mu-space-10:40px;
  --mu-space-12:48px;
  --mu-space-16:64px;
  --mu-font-sans:'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mu-font-mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="dark"]{
  --mu-gray-100:hsl(0,0%,10%);
  --mu-gray-200:hsl(0,0%,12%);
  --mu-gray-300:hsl(0,0%,16%);
  --mu-gray-400:hsl(0,0%,18%);
  --mu-gray-500:hsl(0,0%,27%);
  --mu-gray-600:hsl(0,0%,53%);
  --mu-gray-700:hsl(0,0%,56%);
  --mu-gray-800:hsl(0,0%,49%);
  --mu-gray-900:hsl(0,0%,63%);
  --mu-gray-1000:hsl(0,0%,93%);
  --mu-blue-100:hsl(216,50%,12%);
  --mu-blue-200:hsl(214,59%,15%);
  --mu-blue-300:hsl(213,71%,20%);
  --mu-blue-400:hsl(212,78%,23%);
  --mu-blue-500:hsl(211,86%,27%);
  --mu-blue-600:hsl(206,100%,50%);
  --mu-blue-700:hsl(212,100%,48%);
  --mu-blue-800:hsl(212,100%,41%);
  --mu-blue-900:hsl(210,100%,66%);
  --mu-blue-1000:hsl(206,100%,96%);
  --mu-red-100:hsl(357,37%,12%);
  --mu-red-200:hsl(357,46%,16%);
  --mu-red-300:hsl(356,54%,22%);
  --mu-red-400:hsl(357,55%,26%);
  --mu-red-500:hsl(357,60%,32%);
  --mu-red-600:hsl(358,75%,59%);
  --mu-red-700:hsl(358,75%,59%);
  --mu-red-800:hsl(358,69%,52%);
  --mu-red-900:hsl(358,100%,69%);
  --mu-red-1000:hsl(353,90%,96%);
  --mu-amber-100:hsl(35,100%,8%);
  --mu-amber-200:hsl(32,100%,10%);
  --mu-amber-300:hsl(33,100%,15%);
  --mu-amber-400:hsl(35,100%,17%);
  --mu-amber-500:hsl(35,91%,22%);
  --mu-amber-600:hsl(39,85%,49%);
  --mu-amber-700:hsl(39,100%,57%);
  --mu-amber-800:hsl(35,100%,52%);
  --mu-amber-900:hsl(39,90%,50%);
  --mu-amber-1000:hsl(40,94%,93%);
  --mu-green-100:hsl(136,50%,9%);
  --mu-green-200:hsl(137,50%,12%);
  --mu-green-300:hsl(136,50%,14%);
  --mu-green-400:hsl(135,70%,16%);
  --mu-green-500:hsl(135,70%,23%);
  --mu-green-600:hsl(135,70%,34%);
  --mu-green-700:hsl(131,41%,46%);
  --mu-green-800:hsl(132,43%,39%);
  --mu-green-900:hsl(131,43%,57%);
  --mu-green-1000:hsl(136,73%,94%);
  --mu-teal-100:hsl(169,78%,7%);
  --mu-teal-200:hsl(170,74%,9%);
  --mu-teal-300:hsl(171,75%,13%);
  --mu-teal-400:hsl(171,85%,13%);
  --mu-teal-500:hsl(172,85%,20%);
  --mu-teal-600:hsl(172,85%,32%);
  --mu-teal-700:hsl(173,80%,36%);
  --mu-teal-800:hsl(173,83%,30%);
  --mu-teal-900:hsl(174,90%,41%);
  --mu-teal-1000:hsl(166,71%,93%);
  --mu-purple-100:hsl(283,30%,12%);
  --mu-purple-200:hsl(281,38%,16%);
  --mu-purple-300:hsl(279,44%,23%);
  --mu-purple-400:hsl(277,46%,28%);
  --mu-purple-500:hsl(274,49%,35%);
  --mu-purple-600:hsl(272,51%,54%);
  --mu-purple-700:hsl(272,51%,54%);
  --mu-purple-800:hsl(272,47%,45%);
  --mu-purple-900:hsl(275,80%,71%);
  --mu-purple-1000:hsl(281,73%,96%);
  --mu-pink-100:hsl(335,32%,12%);
  --mu-pink-200:hsl(335,43%,16%);
  --mu-pink-300:hsl(335,47%,21%);
  --mu-pink-400:hsl(335,51%,22%);
  --mu-pink-500:hsl(335,57%,27%);
  --mu-pink-600:hsl(336,75%,40%);
  --mu-pink-700:hsl(336,80%,58%);
  --mu-pink-800:hsl(336,74%,51%);
  --mu-pink-900:hsl(341,90%,67%);
  --mu-pink-1000:hsl(333,90%,96%);
  --mu-orange-100:hsl(22,60%,10%);
  --mu-orange-200:hsl(22,65%,13%);
  --mu-orange-300:hsl(22,70%,17%);
  --mu-orange-400:hsl(22,75%,21%);
  --mu-orange-500:hsl(22,80%,27%);
  --mu-orange-600:hsl(22,90%,40%);
  --mu-orange-700:hsl(22,100%,58%);
  --mu-orange-800:hsl(20,100%,50%);
  --mu-orange-900:hsl(24,100%,66%);
  --mu-orange-1000:hsl(28,100%,94%);
  --mu-lime-100:hsl(66,50%,9%);
  --mu-lime-200:hsl(66,50%,12%);
  --mu-lime-300:hsl(66,55%,15%);
  --mu-lime-400:hsl(66,60%,18%);
  --mu-lime-500:hsl(66,65%,24%);
  --mu-lime-600:hsl(66,70%,34%);
  --mu-lime-700:hsl(66,70%,44%);
  --mu-lime-800:hsl(66,70%,45%);
  --mu-lime-900:hsl(66,70%,60%);
  --mu-lime-1000:hsl(66,80%,92%);
  --mu-gray-alpha-100:#ffffff0f;
  --mu-gray-alpha-200:#ffffff17;
  --mu-gray-alpha-300:#ffffff21;
  --mu-gray-alpha-400:#ffffff24;
  --mu-gray-alpha-500:#ffffff3d;
  --mu-gray-alpha-600:#ffffff82;
  --mu-gray-alpha-700:#ffffff8a;
  --mu-gray-alpha-800:#ffffff78;
  --mu-gray-alpha-900:#ffffff9c;
  --mu-gray-alpha-1000:#ffffffeb;
  --mu-background-100:hsl(0,0%,4%);
  --mu-background-200:hsl(0,0%,0%);
  --mu-shadow-border-base:0 0 0 1px #ffffff25;
  --mu-shadow-small:0px 1px 2px #00000029;
  --mu-shadow-medium:0px 2px 2px #00000052, 0px 8px 8px -8px #00000029;
  --mu-shadow-large:0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
  --mu-shadow-tooltip:0 0 0 1px #ffffff25, 0px 1px 1px #00000005, 0px 4px 8px #0000000a, 0 0 0 1px hsla(0, 0%, 0%, 1);
  --mu-shadow-menu:0 0 0 1px #ffffff25, 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f, 0 0 0 1px hsla(0, 0%, 0%, 1);
  --mu-shadow-modal:0 0 0 1px #ffffff25, 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, 0 0 0 1px hsla(0, 0%, 0%, 1);
  --mu-focus-ring:0 0 0 2px hsla(0, 0%, 4%, 1), 0 0 0 4px hsla(210, 100%, 66%, 1);
  --mu-focus-color:hsl(210,100%,66%);
  --mu-focus-border:0 0 0 1px #ffffff82, 0px 0px 0px 4px #ffffff3d;
}

/* mars-ui type scale — generated from tokens.json */
.heading-72{font-family:var(--mu-font-sans);font-size:72px;line-height:72px;letter-spacing:-0.04em;font-weight:600}
.heading-72.mono{font-family:var(--mu-font-mono)}
.heading-64{font-family:var(--mu-font-sans);font-size:64px;line-height:64px;letter-spacing:-0.04em;font-weight:600}
.heading-64.mono{font-family:var(--mu-font-mono)}
.heading-56{font-family:var(--mu-font-sans);font-size:56px;line-height:56px;letter-spacing:-0.04em;font-weight:600}
.heading-56.mono{font-family:var(--mu-font-mono)}
.heading-48{font-family:var(--mu-font-sans);font-size:48px;line-height:56px;letter-spacing:-0.04em;font-weight:600}
.heading-48.mono{font-family:var(--mu-font-mono)}
.heading-40{font-family:var(--mu-font-sans);font-size:40px;line-height:48px;letter-spacing:-0.04em;font-weight:600}
.heading-40.mono{font-family:var(--mu-font-mono)}
.heading-32{font-family:var(--mu-font-sans);font-size:32px;line-height:40px;letter-spacing:-0.02em;font-weight:600}
.heading-32.mono{font-family:var(--mu-font-mono)}
.heading-28{font-family:var(--mu-font-sans);font-size:28px;line-height:36px;letter-spacing:-0.02em;font-weight:600}
.heading-28.mono{font-family:var(--mu-font-mono)}
.heading-24{font-family:var(--mu-font-sans);font-size:24px;line-height:32px;letter-spacing:-0.02em;font-weight:600}
.heading-24.mono{font-family:var(--mu-font-mono)}
.heading-20{font-family:var(--mu-font-sans);font-size:20px;line-height:28px;letter-spacing:-0.02em;font-weight:600}
.heading-20.mono{font-family:var(--mu-font-mono)}
.heading-16{font-family:var(--mu-font-sans);font-size:16px;line-height:24px;letter-spacing:-0.01em;font-weight:600}
.heading-16.mono{font-family:var(--mu-font-mono)}
.heading-14{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;letter-spacing:0;font-weight:600}
.heading-14.mono{font-family:var(--mu-font-mono)}
.copy-16{font-family:var(--mu-font-sans);font-size:16px;line-height:24px;letter-spacing:0;font-weight:400}
.copy-16.mono{font-family:var(--mu-font-mono)}
.copy-14{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;letter-spacing:0;font-weight:400}
.copy-14.mono{font-family:var(--mu-font-mono)}
.copy-13{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;letter-spacing:0;font-weight:400}
.copy-13.mono{font-family:var(--mu-font-mono)}
.label-14{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;letter-spacing:0;font-weight:500}
.label-14.mono{font-family:var(--mu-font-mono)}
.label-13{font-family:var(--mu-font-sans);font-size:13px;line-height:16px;letter-spacing:0;font-weight:500}
.label-13.mono{font-family:var(--mu-font-mono)}
.label-12{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;letter-spacing:0;font-weight:500}
.label-12.mono{font-family:var(--mu-font-mono)}
.button-14{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;letter-spacing:0;font-weight:500}
.button-14.mono{font-family:var(--mu-font-mono)}
.button-12{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;letter-spacing:0;font-weight:500}
.button-12.mono{font-family:var(--mu-font-mono)}


/* ==== src/base.css ==== */
/* mars-ui — base: fonts, reset, typography. Tokens live in tokens.css (--mu-*). */

/* Geist Sans / Geist Mono — SIL Open Font License 1.1 (dist/fonts/LICENSE-OFL.txt).
   Self-hosted variable woff2 next to ds.css (fonts/). If you prefer Google Fonts, add the link from
   tokens.json → fonts.google to <head>; the same family name is then already loaded and these
   @font-face rules are skipped. Both paths are fine. */
@font-face{font-family:'Geist';src:url('fonts/Geist-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/GeistMono-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{color-scheme:light;-webkit-text-size-adjust:100%}
[data-theme="dark"]{color-scheme:dark}
body{background:var(--mu-background-200);color:var(--mu-gray-900);font-family:var(--mu-font-sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
a{color:var(--mu-blue-900);text-decoration:none}
a:hover{text-decoration:underline}
strong,b{font-weight:600;color:var(--mu-gray-1000)}
code,kbd,pre,.mono{font-family:var(--mu-font-mono)}
/* Mono inline v sans texte: o krok menšie (15 → 14, 13 → 12), aby opticky sedelo s okolím */
:not(pre)>code,.num,.cell,.src{font-size:.93em}
.num{font-family:var(--mu-font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
kbd{display:inline-block;padding:0 6px;font-size:12px;line-height:20px;border:1px solid var(--mu-gray-alpha-400);border-bottom-width:2px;border-radius:var(--mu-radius-sm);background:var(--mu-background-100);color:var(--mu-gray-1000)}
hr{border:0;border-top:1px solid var(--mu-gray-alpha-400);margin:24px 0}
::selection{background:var(--mu-blue-200);color:var(--mu-gray-1000)}
:focus-visible{outline:none;box-shadow:var(--mu-focus-ring);border-radius:var(--mu-radius-sm)}

/* headings: Geist Sans, tight tracking, primary text color */
h1,h2,h3,h4{font-family:var(--mu-font-sans);color:var(--mu-gray-1000);font-weight:600}
h1{font-size:32px;line-height:40px;letter-spacing:-0.02em}
h2{font-size:28px;line-height:36px;letter-spacing:-0.02em;margin-bottom:16px}
h3{font-size:22px;line-height:30px;letter-spacing:-0.02em;margin:36px 0 12px}
h4{font-size:16px;line-height:24px;letter-spacing:-0.01em;margin-bottom:8px}
p{margin-bottom:12px;max-width:820px}

/* type roles (DESIGN_SYSTEM.md §3) — utility classes for the three text roles below headings */
.text-body{font-family:var(--mu-font-sans);font-size:15px;line-height:24px;font-weight:400}
.text-small{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:400}
.text-label{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* lists: the global reset removes padding, so markers would hang outside cards */
ul,ol{margin:0 0 12px;padding-left:24px;max-width:820px}
li{padding-left:4px}
li+li{margin-top:8px}
li>ul,li>ol{margin:8px 0 0}
ul>li::marker{color:var(--mu-gray-700)}
ol>li::marker{color:var(--mu-gray-900);font-weight:500;font-variant-numeric:tabular-nums}
ul.plain,ol.plain{list-style:none;padding-left:0}
ul.plain>li,ol.plain>li{padding-left:0}
.text-small li+li{margin-top:4px}
:is(.card,figure,.note)>:last-child{margin-bottom:0}
.text-primary{color:var(--mu-gray-1000)}
.text-secondary{color:var(--mu-gray-900)}
.text-muted{color:var(--mu-gray-700)}
.pos{color:var(--mu-green-900);font-weight:500}
.neg{color:var(--mu-red-900);font-weight:500}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* layout */
.wrap{max-width:1480px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:960px;margin:0 auto;padding:0 24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
.grid2 .full,.grid3 .full{grid-column:1/-1}
@media(max-width:880px){.grid2,.grid3{grid-template-columns:1fr}}
section{padding:40px 0;border-bottom:1px solid var(--mu-gray-alpha-400)}
.sec-num{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--mu-gray-900);margin-bottom:8px}

@media print{
  body{background:#fff}
  nav,.no-print{display:none!important}
  section{break-inside:avoid;padding:20px 0}
  figure,.card,.tbl-scroll{break-inside:avoid;border-color:#ddd}
}


/* ==== src/components.css ==== */
/* mars-ui — components. Class names are a stable API (used by templates, charts.js and the React layer). */

/* ---- topbar: logo | slash | app name ........ meta row ---- */
header.topbar,.topbar{background:var(--mu-background-100);border-bottom:1px solid var(--mu-gray-alpha-400)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;color:var(--mu-gray-1000)}
.brand svg,.brand img{display:block;height:22px;width:auto}
.brand .slash{width:1px;height:22px;background:var(--mu-gray-alpha-400);transform:skewX(-14deg)}
.brand .app{font-size:14px;font-weight:500;color:var(--mu-gray-1000)}
.meta-row{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--mu-gray-900)}

/* ---- tabs (nav) ---- */
nav.tabs,nav{position:sticky;top:0;background:color-mix(in srgb,var(--mu-background-100) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--mu-gray-alpha-400);z-index:50}
nav .wrap{display:flex;gap:0;overflow-x:auto}
nav a{position:relative;font-family:var(--mu-font-sans);font-size:14px;font-weight:500;color:var(--mu-gray-900);text-decoration:none;padding:14px 12px 12px;white-space:nowrap;border-bottom:2px solid transparent;transition:color .12s}
nav a:hover{color:var(--mu-gray-1000);text-decoration:none}
nav a.active{color:var(--mu-gray-1000);border-bottom-color:var(--mu-gray-1000)}
nav a.right{margin-left:auto}

/* ---- card / figure ---- */
.card,figure{background:var(--mu-background-100);border:1px solid var(--mu-gray-alpha-400);border-radius:var(--mu-radius-md);padding:20px 20px 16px;margin:0}
.card-elevated{box-shadow:var(--mu-shadow-small)}
figcaption,.card-title{font-weight:600;color:var(--mu-gray-1000);font-size:18px;line-height:26px;letter-spacing:-0.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fig-sub,.card-sub{font-size:13px;line-height:18px;color:var(--mu-gray-900);margin:4px 0 12px}
.fig-sub .chip{vertical-align:middle}
.mkt-label{font-weight:400;color:var(--mu-gray-900)}

/* ---- stat tile ---- */
.stat{display:flex;flex-direction:column;gap:4px}
.stat .label{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--mu-gray-900)}
.stat .value{font-family:var(--mu-font-mono);font-size:28px;line-height:36px;font-weight:600;color:var(--mu-gray-1000);letter-spacing:-0.02em}
.stat .delta{font-size:13px;line-height:18px;color:var(--mu-gray-900)}

/* ---- table ---- */
.tbl-scroll{overflow-x:auto;margin:14px 0;border:1px solid var(--mu-gray-alpha-400);border-radius:var(--mu-radius-md);background:var(--mu-background-100)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:620px}
th{background:var(--mu-background-200);font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--mu-gray-900);text-align:left;padding:10px 12px;vertical-align:bottom;border-bottom:1px solid var(--mu-gray-alpha-400)}
td{padding:10px 12px;border-top:1px solid var(--mu-gray-alpha-400);vertical-align:middle;color:var(--mu-gray-1000)}
tbody tr:first-child td{border-top:0}
th.num{text-align:right;font-family:var(--mu-font-sans);font-size:12px;white-space:nowrap} /* .num utility must not turn headers mono */
td.num{text-align:right;font-family:var(--mu-font-mono);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.grp th{text-align:center;color:var(--mu-gray-1000);padding:10px 12px 8px;border-bottom:1px solid var(--mu-gray-alpha-400)}
table.grouped th.gs,table.grouped td.gs{border-left:1px solid var(--mu-gray-alpha-400)}
tr.hl td{background:var(--mu-background-200)}
tbody tr:hover td{background:var(--mu-gray-100)}
.tbl-compact td,.tbl-compact th{padding:6px 10px}

/* ---- badge (chip) ---- */
.chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--mu-font-sans);font-size:12px;font-weight:500;line-height:20px;font-variant-numeric:tabular-nums;padding:0 8px;border-radius:var(--mu-radius-full);white-space:nowrap;letter-spacing:0}
.chip-ok,.chip-green{background:var(--mu-green-100);color:var(--mu-green-900)}
.chip-warn,.chip-amber{background:var(--mu-amber-100);color:var(--mu-amber-900)}
.chip-crit,.chip-red{background:var(--mu-red-100);color:var(--mu-red-900)}
.chip-info,.chip-blue{background:var(--mu-blue-100);color:var(--mu-blue-900)}
.chip-neutral,.chip-gray{background:var(--mu-gray-100);color:var(--mu-gray-1000)}
.chip-purple{background:var(--mu-purple-100);color:var(--mu-purple-900)}
.chip-teal{background:var(--mu-teal-100);color:var(--mu-teal-900)}
.chip-pink{background:var(--mu-pink-100);color:var(--mu-pink-900)}
.chip-inverted{background:var(--mu-gray-1000);color:var(--mu-background-100)}
.chip-sans{font-family:var(--mu-font-sans)} /* default since 1.2.0, kept as alias */
.chip-mono{font-family:var(--mu-font-mono)} /* only for a code or ID inside the chip */

/* ---- button ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;font-family:var(--mu-font-sans);font-size:14px;font-weight:500;line-height:20px;border-radius:var(--mu-radius-sm);border:1px solid var(--mu-gray-alpha-400);background:var(--mu-background-100);color:var(--mu-gray-1000);cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}
.btn:hover{background:var(--mu-gray-100);text-decoration:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--mu-gray-1000);color:var(--mu-background-100);border-color:var(--mu-gray-1000)}
.btn-primary:hover{background:var(--mu-gray-900);border-color:var(--mu-gray-900)}
.btn-secondary{background:var(--mu-background-100)}
.btn-tertiary{border-color:transparent;background:transparent}
.btn-tertiary:hover{background:var(--mu-gray-100)}
.btn-error{background:var(--mu-red-800);border-color:var(--mu-red-800);color:#fff}
.btn-error:hover{background:var(--mu-red-900);border-color:var(--mu-red-900)}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.btn-lg{height:48px;padding:0 20px;font-size:16px}
.btn-block{width:100%}

/* ---- input ---- */
.input,input[type="text"].input,input[type="password"].input,input[type="number"].input,input[type="email"].input,select.input,textarea.input{width:100%;height:40px;padding:0 12px;font-family:var(--mu-font-sans);font-size:14px;color:var(--mu-gray-1000);background:var(--mu-background-100);border:1px solid var(--mu-gray-alpha-400);border-radius:var(--mu-radius-sm);transition:box-shadow .12s,border-color .12s}
textarea.input{height:auto;padding:10px 12px;line-height:20px}
.input::placeholder{color:var(--mu-gray-700)}
.input:hover{border-color:var(--mu-gray-alpha-600)}
.input:focus{outline:none;border-color:var(--mu-gray-alpha-600);box-shadow:var(--mu-focus-ring)}
.input-mono{font-family:var(--mu-font-mono)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:14px;line-height:20px;font-weight:500;color:var(--mu-gray-1000)}
.field .hint{font-size:13px;line-height:18px;color:var(--mu-gray-900)}
.field .error{font-size:13px;line-height:18px;color:var(--mu-red-900)}

/* ---- legend ---- */
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px;line-height:18px;color:var(--mu-gray-900)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
.sw-dashed{background:var(--mu-gray-100);border:1px dashed var(--mu-gray-700)}
.sw-dotted{background:var(--mu-gray-100);border:1px dotted var(--mu-gray-600)}
.sw-goal{background:var(--mu-gray-100);border:1px dashed var(--mu-gray-1000)}

/* ---- note / callout ---- */
.note{border:1px solid var(--mu-gray-alpha-400);border-radius:var(--mu-radius-md);background:var(--mu-background-100);padding:12px 16px;font-size:15px;line-height:24px;color:var(--mu-gray-900)}
.note-warn{background:var(--mu-amber-100);border-color:var(--mu-amber-400);color:var(--mu-amber-900)}
.note-error{background:var(--mu-red-100);border-color:var(--mu-red-400);color:var(--mu-red-900)}
.note-ok{background:var(--mu-green-100);border-color:var(--mu-green-400);color:var(--mu-green-900)}

/* ---- SVG charts (charts.js) ---- */
svg text{font-family:var(--mu-font-sans);font-variant-numeric:tabular-nums}
svg text.v{font-family:var(--mu-font-mono)} /* values and axis ticks */
.chart-empty{padding:28px 0;color:var(--mu-gray-700);font-size:13px}

/* ---- footer ---- */
footer.site{max-width:1480px;margin:0 auto;padding:28px 24px 40px;font-size:13px;line-height:18px;color:var(--mu-gray-900);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer.site a{color:inherit}

/* ---- docs / methodology page: definition list, formula, cell reference, annotated screenshot ---- */
dl.spec{display:grid;grid-template-columns:200px 1fr;gap:8px 16px;font-size:15px;line-height:24px;margin:8px 0 0}
dl.spec dt{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--mu-gray-900);padding-top:4px}
dl.spec dd{color:var(--mu-gray-1000);margin:0}
@media(max-width:640px){dl.spec{grid-template-columns:1fr}}
.formula{font-family:var(--mu-font-mono);font-size:14px;line-height:20px;background:var(--mu-background-200);border:1px solid var(--mu-gray-alpha-400);border-radius:var(--mu-radius-sm);padding:10px 12px;margin:8px 0;white-space:pre-wrap;color:var(--mu-gray-1000)}
.cell{font-family:var(--mu-font-mono);background:var(--mu-amber-100);color:var(--mu-amber-900);padding:0 6px;border-radius:4px;white-space:nowrap}
.src{font-family:var(--mu-font-mono);color:var(--mu-gray-900)}
figure.shot,.shot{margin-top:12px;padding:0;border:0;background:none}
.shot img{width:100%;height:auto;border:1px solid var(--mu-gray-alpha-400);border-radius:var(--mu-radius-sm);display:block}
.shot .cap{font-size:13px;line-height:18px;color:var(--mu-gray-900);margin-top:8px}
.metric{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:16px 0}
.metric .def{font-size:15px}
.metric .def b{color:var(--mu-gray-1000)}
.band{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px}


/* ==== src/brand.css ==== */
/* mars-ui — brand layer. Neutrals (grays, backgrounds, borders) always stay as they are;
   a client only supplies an accent and a logo. Override in the project's :root or on .brand-<client>.

   :root{ --brand-primary: var(--mu-blue-700); --brand-primary-text: var(--mu-blue-900); --brand-primary-bg: var(--mu-blue-100); }

   Logo: inline SVG with fill="currentColor" inside .brand (topbar) — inherits --mu-gray-1000 and flips in dark mode.
   Status colors (green / amber / red) are universal and are NOT changed per client. */
:root{
  --brand-primary:var(--mu-blue-700);
  --brand-primary-text:var(--mu-blue-900);
  --brand-primary-bg:var(--mu-blue-100);
  --brand-secondary:var(--mu-teal-700);
}
.brand-accent{color:var(--brand-primary-text)}
.bg-brand{background:var(--brand-primary-bg)}
.btn-brand{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.btn-brand:hover{filter:brightness(.92)}
.chip-brand{background:var(--brand-primary-bg);color:var(--brand-primary-text)}
a.brand-link{color:var(--brand-primary-text)}