/* Macierz: the visual system of the brandmarkdown board, shared by the tools opened from the board (10-11.10.2026, owner decision:
   "uspójnijmy kolorystykę wszędzie, niech te narzędzia, w które wchodzi się z planszy, będą spójne z planszą").
   Source of the values: pl4yground/index.html (light by default, dark when chosen). On the site this file is /bmd-kit/macierz.css.

   OPT-IN. Nothing here applies until a page carries the class on <html>. Switching a tool over is three lines in <head>,
   after the tool's <meta> tags and BEFORE its own <style> (so the tool's own rules still win where it needs them):
     <html lang="en" class="bmd-macierz">
     <script src="/bmd-kit/macierz.js"></script>          (theme before first paint + the light/dark button)
     <link rel="stylesheet" href="/bmd-kit/macierz.css">
   then a block of tool-only fixes in the tool's <style>, every selector under html.bmd-macierz.

   Theme: the same as the board, one choice for the board and every tool. Light = html[data-theme=light] (the default),
   dark = no attribute. Storage key "bmd.pl4y.theme" (on the site "bmd.pl4y.theme"), values "light" or "dark".
   macierz.js sets it before paint, puts a .mz-theme button into .head .left (or into any [data-mz-theme] slot) and follows
   changes made in another tab.

   Rules: interface text never below 12px (--mz-fs-xs). Lime is a fill with dark text; where an accent is text or a thin line,
   use --mz-acc (lime in dark, olive #5F7300 in light). A selected segment is an inverted pill (--mz-fg on --mz-bg), as on the board.
   Colors and fonts of the user's brand (swatches, specimens, posters, previews) never take these tokens.

   Layers in this file: 1 tokens, 2 base, 3 components (.mz-*) for new UI, 4 cockpit (the classes the existing tools share:
   .head .left .brand .tagline .fn .cta .hud .panel .kick .lbl .seg .chip .mini .fld .ta .toast ...), 5 the chain UI drawn by
   brand.js and shuffle-hint.js (brand.js logic unchanged), 6 legal corner, 7 reduced motion. */

@font-face{font-family:"Inter Tight";src:url("/brandmarkdown/fonts/InterTight-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("/brandmarkdown/fonts/InterTight-pl.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
@font-face{font-family:"BW Haas Head";src:url("/brand-file/fonts/BwHaasHead-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"BW Haas Head";src:url("/brand-file/fonts/BwHaasHead-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------- 1 tokens: dark (no data-theme), as on the board ---------- */
html.bmd-macierz{
  color-scheme:dark;
  --mz-bg:#0B0B0B;--mz-surface:#161616;--mz-surface-2:#1E1E1E;--mz-surface-3:#2A2A2A;
  --mz-glass:rgba(22,22,22,.9);--mz-panel:rgba(18,18,18,.96);
  --mz-fg:#F4F4F0;--mz-mute:rgba(244,244,240,.72);--mz-dim:rgba(244,244,240,.6);
  --mz-edge:rgba(244,244,240,.18);--mz-line:rgba(244,244,240,.1);--mz-dot:rgba(244,244,240,.13);
  --mz-lime:#D4FF00;--mz-lime-hover:#E0FF33;--mz-on-lime:#0A0A0A;--mz-lime-soft:rgba(212,255,0,.14);--mz-acc:#D4FF00;
  --mz-warn-bg:rgba(217,119,87,.18);--mz-warn:#F0A585;--mz-danger:#FF7A6B;
  --mz-focus:#F4F4F0;
  --mz-shadow-card:0 20px 50px -24px rgba(0,0,0,.8);
  --mz-shadow-float:0 12px 30px -14px rgba(0,0,0,.75);
  --mz-shadow-panel:0 30px 80px -30px rgba(0,0,0,.9);
  /* type */
  --mz-sans:"BW Haas Head",system-ui,-apple-system,sans-serif;
  --mz-head:"Inter Tight","BW Haas Head",system-ui,sans-serif;--mz-h-weight:600;
  --mz-h1-ls:-.045em;--mz-h1-ws:.04em;--mz-h2-ls:-.035em;--mz-h2-ws:.1em;--mz-h3-ls:-.02em;
  --mz-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --mz-fs-min:12px;--mz-fs-xs:12px;--mz-fs-s:13px;--mz-fs-m:14px;--mz-fs-l:15px;--mz-fs-xl:17px;--mz-fs-h3:18px;--mz-fs-h2:26px;--mz-fs-h1:clamp(20px,2.2vw,26px);
  --mz-label-ls:.04em;--mz-caps-ls:.12em;
  /* shape */
  --mz-r-s:10px;--mz-r-field:12px;--mz-r:14px;--mz-r-card:18px;--mz-r-panel:22px;--mz-r-pill:999px;
  --mz-pill-h:36px;--mz-pill-h-s:30px;--mz-pill-h-l:44px;--mz-float-h:48px;
  --mz-gap:16px;--mz-blur:blur(12px);
  --mz-ease:cubic-bezier(.22,1,.36,1);
  --mz-dots-img:radial-gradient(circle,var(--mz-dot) 1px,transparent 1.2px);--mz-dots-size:24px 24px;
  /* cockpit geometry: header bar under the chain bar, tool content below it */
  --mz-head-top:60px;--mz-top:120px;--mz-x:16px;
}
/* ---------- 1 tokens: light (default), as on the board and the brandmarkdown.com landing ---------- */
html.bmd-macierz[data-theme=light]{
  color-scheme:light;
  --mz-bg:#F1F6FA;--mz-surface:#FFFFFF;--mz-surface-2:#E8EEF3;--mz-surface-3:#DCE4EB;
  --mz-glass:rgba(255,255,255,.9);--mz-panel:rgba(255,255,255,.97);
  --mz-fg:#0A0A0A;--mz-mute:rgba(10,10,10,.72);--mz-dim:rgba(10,10,10,.63);
  --mz-edge:rgba(10,10,10,.2);--mz-line:rgba(10,10,10,.08);--mz-dot:rgba(10,10,10,.16);
  --mz-lime-soft:rgba(212,255,0,.42);--mz-acc:#5F7300;
  --mz-warn-bg:rgba(217,119,87,.16);--mz-warn:#8F3B1B;--mz-danger:#B42318;
  --mz-focus:#0A0A0A;
  --mz-shadow-card:0 1px 0 rgba(10,10,10,.04),0 18px 40px -24px rgba(10,30,60,.3);
  --mz-shadow-float:0 8px 24px -14px rgba(10,30,60,.35);
  --mz-shadow-panel:0 30px 80px -30px rgba(10,30,60,.45);
}
@media (max-width:900px){html.bmd-macierz{--mz-head-top:12px;--mz-top:116px;--mz-x:12px}}

/* ---------- 2 base (only on pages that opt in) ---------- */
html.bmd-macierz,html.bmd-macierz body{background-color:var(--mz-bg);color:var(--mz-fg);font-family:var(--mz-sans);-webkit-font-smoothing:antialiased}
html.bmd-macierz body{background-image:var(--mz-dots-img);background-size:var(--mz-dots-size)}
html.bmd-macierz ::selection{background:var(--mz-lime);color:var(--mz-on-lime)}
html.bmd-macierz :focus-visible{outline:2px solid var(--mz-focus);outline-offset:2px}

/* ---------- 3 components (use as classes in new tools) ---------- */
html.bmd-macierz .mz-dots{background-color:var(--mz-bg);background-image:var(--mz-dots-img);background-size:var(--mz-dots-size)}
html.bmd-macierz .mz-card{background:var(--mz-surface);border-radius:var(--mz-r-card);box-shadow:var(--mz-shadow-card)}
html.bmd-macierz .mz-float{display:flex;align-items:center;gap:6px;min-height:var(--mz-float-h);padding:4px;border-radius:var(--mz-r-pill);background:var(--mz-glass);-webkit-backdrop-filter:var(--mz-blur);backdrop-filter:var(--mz-blur);box-shadow:var(--mz-shadow-float)}
html.bmd-macierz .mz-panel{background:var(--mz-panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:var(--mz-r-panel);box-shadow:var(--mz-shadow-panel),inset 0 0 0 1px var(--mz-line)}
html.bmd-macierz .mz-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--mz-pill-h);padding:0 14px;border:0;border-radius:var(--mz-r-pill);background:var(--mz-surface-2);color:var(--mz-fg);font:500 var(--mz-fs-s)/1 var(--mz-sans);letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .3s var(--mz-ease),color .3s var(--mz-ease)}
html.bmd-macierz .mz-pill:hover{background:var(--mz-surface-3)}
html.bmd-macierz .mz-pill.is-lime{background:var(--mz-lime);color:var(--mz-on-lime);font-weight:700}
html.bmd-macierz .mz-pill.is-lime:hover{background:var(--mz-lime-hover)}
html.bmd-macierz .mz-pill.is-on,html.bmd-macierz .mz-pill[aria-pressed=true]{background:var(--mz-fg);color:var(--mz-bg)}
html.bmd-macierz .mz-pill.is-quiet{background:transparent;box-shadow:inset 0 0 0 1px var(--mz-edge)}
html.bmd-macierz .mz-pill.is-quiet:hover{background:var(--mz-lime);color:var(--mz-on-lime);box-shadow:none}
html.bmd-macierz .mz-icon{display:inline-grid;place-items:center;width:var(--mz-pill-h);height:var(--mz-pill-h);border:0;border-radius:50%;background:transparent;color:var(--mz-mute);cursor:pointer;transition:background .3s var(--mz-ease),color .3s var(--mz-ease)}
html.bmd-macierz .mz-icon:hover{background:var(--mz-surface-2);color:var(--mz-fg)}
html.bmd-macierz .mz-field{height:40px;padding:0 14px;border:0;border-radius:var(--mz-r-field);background:var(--mz-surface-2);color:var(--mz-fg);font:var(--mz-fs-m)/1.4 var(--mz-sans);outline:none}
html.bmd-macierz .mz-field::placeholder{color:var(--mz-dim)}
html.bmd-macierz .mz-field:focus{box-shadow:0 0 0 1.5px var(--mz-acc)}
html.bmd-macierz .mz-label{font:500 var(--mz-fs-xs)/1.3 var(--mz-mono);letter-spacing:var(--mz-label-ls);color:var(--mz-dim);word-spacing:normal}
html.bmd-macierz .mz-label b{color:var(--mz-acc);font-weight:600}
html.bmd-macierz .mz-caps{font:500 var(--mz-fs-xs)/1.3 var(--mz-mono);letter-spacing:var(--mz-caps-ls);text-transform:uppercase;color:var(--mz-dim);word-spacing:normal}
html.bmd-macierz .mz-toast{display:flex;align-items:center;height:36px;padding:0 16px;border-radius:var(--mz-r-pill);background:var(--mz-lime);color:var(--mz-on-lime);font:600 var(--mz-fs-s)/1 var(--mz-sans);box-shadow:var(--mz-shadow-float)}
html.bmd-macierz .mz-logo{font:700 var(--mz-fs-l)/1 var(--mz-sans);letter-spacing:-.02em;color:var(--mz-fg);text-decoration:none}
html.bmd-macierz .mz-logo em,html.bmd-macierz .mz-logo span{font-style:normal;color:var(--mz-acc)}
html.bmd-macierz .mz-theme{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;margin:0 -4px 0 -6px;border:0;border-radius:50%;background:transparent;color:var(--mz-mute);font:15px/1 var(--mz-sans);cursor:pointer;transition:background .3s var(--mz-ease),color .3s var(--mz-ease)}
html.bmd-macierz .mz-theme:hover{background:var(--mz-surface-2);color:var(--mz-fg)}
html.bmd-macierz .mz-h1{font:var(--mz-h-weight) var(--mz-fs-h1)/1.02 var(--mz-head);letter-spacing:var(--mz-h1-ls);word-spacing:var(--mz-h1-ws)}
html.bmd-macierz .mz-h2{font:var(--mz-h-weight) var(--mz-fs-h2)/1.05 var(--mz-head);letter-spacing:var(--mz-h2-ls);word-spacing:var(--mz-h2-ws)}
html.bmd-macierz .mz-h3{font:var(--mz-h-weight) var(--mz-fs-h3)/1.2 var(--mz-head);letter-spacing:var(--mz-h3-ls)}

/* ---------- 4 cockpit: the classes the existing tools share (built from the old Gradient cockpit) ----------
   The tool's own color variables are mapped onto the board tokens, so the many rules that read --fg, --ink, --strong, --line
   follow the theme. --lime is NOT mapped: it is a fill everywhere; where it was text, the rules below use --mz-acc. */
html.bmd-macierz{--bg:var(--mz-bg);--bg-dark:var(--mz-bg);--fg:var(--mz-fg);--muted:var(--mz-surface-2);--step:var(--mz-surface-3);--caption:var(--mz-dim);
  --line:var(--mz-edge);--ink:var(--mz-dim);--strong:var(--mz-fg);--focus:var(--mz-focus);--logo:var(--mz-fg);--sans:var(--mz-sans);
  --mz-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F4F4F0' stroke-width='1.5'/%3E%3C/svg%3E")}
html.bmd-macierz[data-theme=light]{--mz-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230A0A0A' stroke-width='1.5'/%3E%3C/svg%3E")}
/* the brandmarkdown bridge frame (casing, notches, rails, ignition line, side ticks) is not part of the board */
html.bmd-macierz .desk{background:transparent}
html.bmd-macierz .deck,html.bmd-macierz .ign,html.bmd-macierz .rail,html.bmd-macierz .loop,html.bmd-macierz .ladder{display:none}
/* header: two floating bars under the chain bar, like .bar and .ctl on the board */
html.bmd-macierz .head{top:var(--mz-head-top);left:var(--mz-x);right:var(--mz-x);padding:0;gap:12px}
html.bmd-macierz .head::before{display:none}
html.bmd-macierz .head .left,html.bmd-macierz .head .fn{height:var(--mz-float-h);padding:4px;gap:4px;border-radius:var(--mz-r-pill);background:var(--mz-glass);-webkit-backdrop-filter:var(--mz-blur);backdrop-filter:var(--mz-blur);box-shadow:var(--mz-shadow-float)}
html.bmd-macierz .head .left{padding:4px 8px 4px 18px;gap:12px;min-width:0}
html.bmd-macierz .brand.bmd{font:700 var(--mz-fs-l)/1 var(--mz-sans);letter-spacing:-.02em;color:var(--mz-fg)}
html.bmd-macierz .brand.bmd span{color:var(--mz-acc)}
html.bmd-macierz .left .div{background:var(--mz-edge);opacity:1;height:18px}
html.bmd-macierz .tagline{font:500 var(--mz-fs-xs)/1 var(--mz-mono);letter-spacing:.08em;text-transform:none;color:var(--mz-mute)}
html.bmd-macierz .tagline .prod{color:var(--mz-fg)}
html.bmd-macierz .tagline button{letter-spacing:.08em;text-transform:none;color:var(--mz-mute)}
html.bmd-macierz .tagline button:hover,html.bmd-macierz .tagline button[aria-pressed=true]{color:var(--mz-fg)}
html.bmd-macierz .burger{width:40px;height:40px;padding:0 11px;border-radius:50%}
html.bmd-macierz .burger i{align-self:stretch;width:auto;background:var(--mz-fg)}
html.bmd-macierz .burger:hover{background:var(--mz-surface-2)}
html.bmd-macierz .burger:hover i{background:var(--mz-fg)}
/* the main action: a lime pill with the dark round icon, as "Fill the gaps" on the board */
html.bmd-macierz .cta{height:40px;gap:12px;padding:0 4px 0 18px;background:var(--mz-lime);color:var(--mz-on-lime);font:700 var(--mz-fs-m)/1 var(--mz-sans);letter-spacing:0;text-transform:none}
html.bmd-macierz .cta:hover{background:var(--mz-lime-hover)}
html.bmd-macierz .cta i{width:32px;height:32px;background:#0A0A0A;color:var(--mz-lime)}
html.bmd-macierz .cta.dark{background:var(--mz-fg);color:var(--mz-bg);box-shadow:none}
html.bmd-macierz .cta.dark:hover{background:var(--mz-mute)}
html.bmd-macierz .cta.dark i{background:var(--mz-lime);color:#0A0A0A}
html.bmd-macierz .export-main .cta{height:52px;padding-left:22px}
html.bmd-macierz .export-main .cta i{width:42px;height:42px}
html.bmd-macierz kbd{font-size:var(--mz-fs-xs);opacity:.7;letter-spacing:.04em}
/* status bar bottom-left, like the progress pill on the board */
html.bmd-macierz .hud{height:44px;gap:8px;padding:0 14px;border-radius:var(--mz-r-pill);background:var(--mz-glass);-webkit-backdrop-filter:var(--mz-blur);backdrop-filter:var(--mz-blur);box-shadow:var(--mz-shadow-float);
  font:500 var(--mz-fs-xs)/1 var(--mz-mono);letter-spacing:.02em;text-transform:none;color:var(--mz-mute)}
html.bmd-macierz .hud b{color:var(--mz-fg)}
html.bmd-macierz .hud .sep{opacity:1;color:var(--mz-dim)}
html.bmd-macierz .hud .led{background:var(--mz-acc);box-shadow:none}
html.bmd-macierz .hud .led.off{background:var(--mz-edge)}
html.bmd-macierz .hud .play:hover{color:var(--mz-fg)}
html.bmd-macierz .lang button{color:var(--mz-mute);padding:6px 4px;letter-spacing:.02em}
html.bmd-macierz .lang button[aria-pressed=true]{color:var(--mz-fg);font-weight:700}
html.bmd-macierz .lang button:hover{color:var(--mz-fg)}
/* side panel: the DESIGN.md panel of the board (white in light, near black in dark) */
html.bmd-macierz .panel{top:var(--mz-top);border-radius:var(--mz-r-panel);background:var(--mz-panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--mz-shadow-panel),inset 0 0 0 1px var(--mz-line);word-spacing:normal}
html.bmd-macierz .panel::before{display:none}
html.bmd-macierz .panel.drop{box-shadow:inset 0 0 0 2px var(--mz-acc),var(--mz-shadow-panel)}
html.bmd-macierz .panel-scroll{scrollbar-color:var(--mz-edge) transparent}
html.bmd-macierz .kick{font:500 var(--mz-fs-xs)/1.3 var(--mz-mono);letter-spacing:var(--mz-caps-ls);text-transform:uppercase;color:var(--mz-dim)}
html.bmd-macierz .kick b{color:var(--mz-acc);font-weight:600}
html.bmd-macierz .panel-head h1{font:var(--mz-h-weight) var(--mz-fs-h2)/1.05 var(--mz-head);letter-spacing:var(--mz-h2-ls);word-spacing:var(--mz-h2-ws);color:var(--mz-fg)}
html.bmd-macierz .panel-head p{font-size:var(--mz-fs-m);color:var(--mz-mute);word-spacing:normal}
html.bmd-macierz section.grp + section.grp,html.bmd-macierz .panel-head + section.grp{box-shadow:0 -1px 0 var(--mz-line)}
html.bmd-macierz .lbl{font:500 var(--mz-fs-xs)/1.3 var(--mz-mono);letter-spacing:var(--mz-caps-ls);text-transform:uppercase;color:var(--mz-dim)}
html.bmd-macierz .lbl>span:first-child{color:var(--mz-fg)}
html.bmd-macierz .lbl>span:first-child::before{color:var(--mz-acc)}
html.bmd-macierz .lbl .sub{letter-spacing:.04em;text-transform:none;color:var(--mz-dim)}
html.bmd-macierz .sublbl,html.bmd-macierz .fl{font:500 var(--mz-fs-xs)/1.3 var(--mz-mono);letter-spacing:var(--mz-caps-ls);text-transform:uppercase;color:var(--mz-dim)}
html.bmd-macierz .note{font-size:var(--mz-fs-s);color:var(--mz-mute)}
html.bmd-macierz .read,html.bmd-macierz .cap{font:500 var(--mz-fs-xs)/1.35 var(--mz-mono);letter-spacing:.02em;text-transform:none;color:var(--mz-dim)}
html.bmd-macierz .read b{color:var(--mz-acc);font-weight:600}
/* segmented choice: a track of pills, the chosen one inverted, as the Preview / Code switch on the board */
html.bmd-macierz .seg{background:var(--mz-surface-2);gap:2px}
html.bmd-macierz .seg button{font:500 var(--mz-fs-s)/1 var(--mz-sans);letter-spacing:0;text-transform:none;color:var(--mz-mute)}
html.bmd-macierz .seg.num button{font:500 var(--mz-fs-xs)/1 var(--mz-mono);letter-spacing:.02em}
html.bmd-macierz .seg button:hover{color:var(--mz-fg)}
html.bmd-macierz .seg button[aria-pressed=true]{background:var(--mz-fg);color:var(--mz-bg)}
/* chips and small buttons: the pills on the board's cards */
html.bmd-macierz .chip{height:32px;padding:0 13px;background:var(--mz-surface-2);font:500 var(--mz-fs-s)/1 var(--mz-sans);letter-spacing:0;text-transform:none;color:var(--mz-fg)}
html.bmd-macierz .chip:hover{background:var(--mz-surface-3);color:var(--mz-fg)}
html.bmd-macierz .chip[aria-pressed=true]{background:var(--mz-fg);color:var(--mz-bg)}
html.bmd-macierz .chip.auto{box-shadow:inset 0 0 0 1.5px var(--mz-acc);color:var(--mz-fg)}
html.bmd-macierz .mini{height:32px;padding:0 13px;background:var(--mz-surface-2);color:var(--mz-fg);font:500 var(--mz-fs-xs)/1 var(--mz-mono);letter-spacing:.04em;text-transform:none}
html.bmd-macierz .mini:hover{background:var(--mz-lime);color:var(--mz-on-lime)}
html.bmd-macierz .mini[aria-pressed=true]{background:var(--mz-fg);color:var(--mz-bg)}
html.bmd-macierz .mini:disabled,html.bmd-macierz .mini:disabled:hover{opacity:.45;background:var(--mz-surface-2);color:var(--mz-fg)}
html.bmd-macierz .export-code .mini{height:36px;letter-spacing:.02em}
/* fields */
html.bmd-macierz .fld,html.bmd-macierz .ta,html.bmd-macierz .panel textarea,html.bmd-macierz .panel .txt{background:var(--mz-surface-2);color:var(--mz-fg);font-family:var(--mz-sans);font-size:var(--mz-fs-m);box-shadow:none}
html.bmd-macierz .fld{height:40px;border-radius:var(--mz-r-pill)}
html.bmd-macierz .ta,html.bmd-macierz .panel textarea{border-radius:var(--mz-r-field)}
html.bmd-macierz .fld::placeholder,html.bmd-macierz .ta::placeholder,html.bmd-macierz .panel textarea::placeholder,html.bmd-macierz .panel .txt::placeholder{color:var(--mz-dim)}
html.bmd-macierz .fld:focus,html.bmd-macierz .ta:focus,html.bmd-macierz .panel textarea:focus,html.bmd-macierz .panel .txt:focus{outline:none;box-shadow:0 0 0 1.5px var(--mz-acc)}
html.bmd-macierz .fld:focus-visible,html.bmd-macierz .ta:focus-visible,html.bmd-macierz .panel textarea:focus-visible,html.bmd-macierz .panel .txt:focus-visible{outline:2px solid var(--mz-focus);outline-offset:1px;box-shadow:none}
html.bmd-macierz .panel select,html.bmd-macierz .row select{height:40px;background:var(--mz-surface-2) var(--mz-chev) right 14px center no-repeat;color:var(--mz-fg);font:500 var(--mz-fs-s)/1 var(--mz-sans);letter-spacing:0;text-transform:none}
html.bmd-macierz select option{background:var(--mz-surface);color:var(--mz-fg)}
/* sliders and switches */
html.bmd-macierz .sl label,html.bmd-macierz .tg{font-size:var(--mz-fs-m);color:var(--mz-fg)}
html.bmd-macierz .sl output{font:500 var(--mz-fs-xs)/1 var(--mz-mono);letter-spacing:.02em;color:var(--mz-dim)}
html.bmd-macierz input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--mz-acc) var(--p),var(--mz-surface-3) var(--p))}
html.bmd-macierz input[type=range]::-moz-range-track{background:linear-gradient(to right,var(--mz-acc) var(--p),var(--mz-surface-3) var(--p))}
html.bmd-macierz input[type=range]::-webkit-slider-thumb{background:var(--mz-surface);box-shadow:inset 0 0 0 2px var(--mz-fg),0 2px 8px rgba(10,30,60,.3)}
html.bmd-macierz input[type=range]::-moz-range-thumb{background:var(--mz-surface);box-shadow:inset 0 0 0 2px var(--mz-fg)}
html.bmd-macierz input[type=range]:focus-visible{outline:2px solid var(--mz-focus);outline-offset:2px}
html.bmd-macierz .sw-btn{background:var(--mz-surface-3)}
html.bmd-macierz .sw-btn::after{background:var(--mz-surface);box-shadow:0 1px 3px rgba(0,0,0,.25)}
html.bmd-macierz .sw-btn[aria-checked=true]{background:var(--mz-acc)}
html.bmd-macierz[data-theme=light] .sw-btn[aria-checked=true]::after{background:#fff}
/* panel footer, phone sheet grip, toast */
html.bmd-macierz .panel-foot{box-shadow:0 -1px 0 var(--mz-line)}
html.bmd-macierz .panel-foot,html.bmd-macierz .panel-foot .pf{font:500 var(--mz-fs-xs)/1.35 var(--mz-mono);letter-spacing:.02em;text-transform:none;color:var(--mz-dim)}
html.bmd-macierz .panel-foot p{font:var(--mz-fs-xs)/1.45 var(--mz-sans);color:var(--mz-dim)}
html.bmd-macierz .panel-foot a{color:var(--mz-mute)}
html.bmd-macierz .panel-foot a:hover{color:var(--mz-fg)}
html.bmd-macierz .sheet-grip button{background:var(--mz-edge)}
html.bmd-macierz .toast{height:36px;padding:0 16px;border-radius:var(--mz-r-pill);background:var(--mz-lime);color:var(--mz-on-lime);font:600 var(--mz-fs-s)/1 var(--mz-sans);letter-spacing:0;text-transform:none;box-shadow:var(--mz-shadow-float)}
html.bmd-macierz .toast::before{background:var(--mz-on-lime);box-shadow:none}
@media (max-width:900px){
  html.bmd-macierz .head .left{padding:4px 4px 4px 14px;gap:8px}
  html.bmd-macierz .head .fn{gap:2px}
  html.bmd-macierz .fn .cta{height:40px}
  html.bmd-macierz .panel{top:auto}
}
@media (max-width:520px){html.bmd-macierz .brand.bmd span{display:none}}

/* ---------- 5 chain UI from brand.js / shuffle-hint.js, restyled (no change to their logic) ---------- */
/* top: chain bar with the way back, current tool, New, save status and link toggle */
html.bmd-macierz .r3bar{top:12px;width:auto;max-width:calc(100vw - 32px);height:36px;gap:6px;padding:0 4px 0 4px;background:var(--mz-glass);-webkit-backdrop-filter:var(--mz-blur);backdrop-filter:var(--mz-blur);border:0;border-radius:var(--mz-r-pill);box-shadow:var(--mz-shadow-float);
  font:500 var(--mz-fs-xs)/1 var(--mz-mono);letter-spacing:.02em;text-transform:none;color:var(--mz-mute)}
html.bmd-macierz .r3bar::before,html.bmd-macierz .r3bar::after{display:none}
html.bmd-macierz .r3bar a:hover{color:var(--mz-fg)}
html.bmd-macierz .r3bar a.cur{color:var(--mz-fg);font-weight:600}
html.bmd-macierz .r3bar a.r3pl{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--mz-r-pill);background:var(--mz-lime);color:var(--mz-on-lime);font-weight:600}
html.bmd-macierz .r3bar a.r3pl:hover{background:var(--mz-lime-hover);color:var(--mz-on-lime)}
html.bmd-macierz .r3bar a.has::after{background:var(--mz-acc)}
html.bmd-macierz .r3bar .r3ch{gap:2px}
html.bmd-macierz .r3bar .r3ch i{font-size:var(--mz-fs-xs);opacity:1;color:var(--mz-dim)}
html.bmd-macierz .r3bar .r3new{height:28px;padding:0 10px;border-radius:var(--mz-r-pill);opacity:1;color:var(--mz-mute)}
html.bmd-macierz .r3bar .r3new:hover{color:var(--mz-fg);background:var(--mz-surface-2)}
html.bmd-macierz .r3s{height:28px;gap:2px}
html.bmd-macierz .r3s button{height:28px;padding:0 12px;font:500 var(--mz-fs-xs)/1 var(--mz-mono);letter-spacing:.02em;text-transform:none}
html.bmd-macierz .r3s button:focus-visible,html.bmd-macierz .r3bar a:focus-visible,html.bmd-macierz .r3bar .r3new:focus-visible{outline:2px solid var(--mz-focus);outline-offset:2px}
html.bmd-macierz .r3s .r3m{background:var(--mz-lime-soft);color:var(--mz-fg)}
html.bmd-macierz .r3s .r3m:hover{background:var(--mz-lime);color:var(--mz-on-lime)}
html.bmd-macierz .r3s .r3m i{background:var(--mz-acc);box-shadow:none}
html.bmd-macierz .r3s[data-state=pending] .r3m,html.bmd-macierz .r3s[data-state=share] .r3m{background:var(--mz-warn-bg);color:var(--mz-warn)}
html.bmd-macierz .r3s[data-state=pending] .r3m i,html.bmd-macierz .r3s[data-state=share] .r3m i{background:#D97757;box-shadow:none}
html.bmd-macierz .r3s[data-state=saving] .r3m,html.bmd-macierz .r3s[data-state=unlinked] .r3m,html.bmd-macierz .r3s[data-state=proposal] .r3m{background:var(--mz-surface-2);color:var(--mz-fg)}
html.bmd-macierz .r3s[data-state=saving] .r3m i{background:var(--mz-acc)}
html.bmd-macierz .r3s[data-state=unlinked] .r3m i,html.bmd-macierz .r3s[data-state=proposal] .r3m i{background:var(--mz-dim)}
html.bmd-macierz .r3s[data-state=unlinked] .r3m:hover,html.bmd-macierz .r3s[data-state=proposal] .r3m:hover,html.bmd-macierz .r3s[data-state=pending] .r3m:hover,html.bmd-macierz .r3s[data-state=share] .r3m:hover{background:var(--mz-surface-3);color:var(--mz-fg)}
html.bmd-macierz .r3s .r3k{color:var(--mz-mute)}
html.bmd-macierz .r3s .r3k:hover{color:var(--mz-fg);background:var(--mz-surface-2)}
html.bmd-macierz .r3s .r3k[aria-pressed=false]{color:var(--mz-acc)}
html.bmd-macierz .r3s .r3k svg{width:13px;height:13px}
html.bmd-macierz .r3t{top:56px;height:34px;padding:0 16px;background:var(--mz-lime);color:var(--mz-on-lime);box-shadow:var(--mz-shadow-float);font:600 var(--mz-fs-s)/1 var(--mz-sans);letter-spacing:0;text-transform:none}
/* undo toast after "New" (inline styles in brand.js, hence !important) */
html.bmd-macierz #r3undo{background:var(--mz-panel)!important;color:var(--mz-fg)!important;box-shadow:var(--mz-shadow-panel),inset 0 0 0 1px var(--mz-line)!important;font:500 var(--mz-fs-xs)/1.35 var(--mz-mono)!important;letter-spacing:.02em!important;text-transform:none!important}
/* bottom: next-step bar, a floating card instead of the notch */
html.bmd-macierz.r3-nb{--r3nb:116px}
html.bmd-macierz .r3nx{bottom:16px;background:var(--mz-panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:0;border-radius:var(--mz-r-card);box-shadow:var(--mz-shadow-panel),inset 0 0 0 1px var(--mz-line);color:var(--mz-fg);font-family:var(--mz-sans)}
html.bmd-macierz .r3nx::before,html.bmd-macierz .r3nx::after{display:none}
html.bmd-macierz .r3nx a:focus-visible,html.bmd-macierz .r3nx button:focus-visible{outline:2px solid var(--mz-focus)}
html.bmd-macierz .r3pg{font-size:var(--mz-fs-xs)}
html.bmd-macierz .r3pg a{color:var(--mz-mute)}
html.bmd-macierz .r3pg a:hover{color:var(--mz-fg)}
html.bmd-macierz .r3pg a.done::before{background:var(--mz-acc)}
html.bmd-macierz .r3pg a.cur{color:var(--mz-fg)}
html.bmd-macierz .r3pg a.r3plg{color:var(--mz-acc)!important}
html.bmd-macierz .r3nc,html.bmd-macierz .r3nx .r3nc{font:500 var(--mz-fs-xs)/1.2 var(--mz-mono);letter-spacing:var(--mz-caps-ls);color:var(--mz-dim)}
html.bmd-macierz .r3nb{color:var(--mz-mute)}
html.bmd-macierz .r3na{font-size:var(--mz-fs-xs);color:var(--mz-mute)}
html.bmd-macierz .r3nb:hover,html.bmd-macierz .r3na:hover{color:var(--mz-fg)}
html.bmd-macierz .r3nn{font-size:var(--mz-fs-xs);color:var(--mz-warn)}
html.bmd-macierz .r3go,html.bmd-macierz .r3nx .r3go{background:var(--mz-lime);color:var(--mz-on-lime);font-family:var(--mz-sans)}
html.bmd-macierz .r3go small{font-size:var(--mz-fs-xs);color:rgba(10,10,10,.7)}
html.bmd-macierz .r3go:hover{background:var(--mz-lime-hover);box-shadow:none}
html.bmd-macierz .r3nx .r3go:focus-visible{outline:2px solid var(--mz-focus);outline-offset:3px}
html.bmd-macierz .r3cf{background:var(--mz-panel);box-shadow:var(--mz-shadow-panel),inset 0 0 0 1px var(--mz-line)}
html.bmd-macierz .r3cf p{color:var(--mz-fg)}
html.bmd-macierz .r3cf .n{background:var(--mz-surface-2);color:var(--mz-fg)}
html.bmd-macierz .r3cf .n:hover{background:var(--mz-surface-3)}
html.bmd-macierz .r3cf button:focus-visible{outline:2px solid var(--mz-focus)}
@media (max-width:900px){
  html.bmd-macierz.r3-on{--r3m:68px;--r3x:12px}
  html.bmd-macierz .r3bar{top:var(--r3m,64px);left:var(--r3x,12px);right:var(--r3x,12px);width:auto;height:36px;padding:0 4px;background:var(--mz-glass);border-radius:var(--mz-r-pill);box-shadow:var(--mz-shadow-float);letter-spacing:0}
  html.bmd-macierz .r3bar .r3sh{display:inline-flex;align-items:center;gap:2px}
  html.bmd-macierz .r3bar .r3sh>i,html.bmd-macierz .r3bar .r3sh a.cur{display:none}
  html.bmd-macierz .r3bar .r3sh a.r3pl{padding:0 10px}
  html.bmd-macierz .r3bar .r3new{padding:0 8px}
  html.bmd-macierz .r3s button{padding:0 10px;letter-spacing:0}
  html.bmd-macierz .r3t{top:calc(var(--r3m,64px) + 44px)}
  html.bmd-macierz.r3-nb{--r3nb:calc(114px + env(safe-area-inset-bottom,0px))}
  html.bmd-macierz .r3nx{bottom:0;border-radius:var(--mz-r-card) var(--mz-r-card) 0 0}
  html.bmd-macierz .r3n0 .r3nn,html.bmd-macierz .r3n0 .r3na,html.bmd-macierz .r3n0 .r3nc{font-size:var(--mz-fs-xs)}
  html.bmd-macierz .r3nb{background:var(--mz-surface-2);color:var(--mz-fg)}
}
/* the way back to the board, for tools without the chain bar (inline styles in brand.js, hence !important) */
html.bmd-macierz #bmd-pl4y-back{background:var(--mz-lime)!important;color:var(--mz-on-lime)!important;font:600 var(--mz-fs-xs)/1 var(--mz-mono)!important;box-shadow:var(--mz-shadow-float)}
/* shuffle hint ("Press Space for ...") */
html.bmd-macierz .r3shuf{background:var(--mz-glass);box-shadow:var(--mz-shadow-float);color:var(--mz-mute);font:500 var(--mz-fs-xs)/1 var(--mz-mono);letter-spacing:.02em;text-transform:none}
html.bmd-macierz .r3shuf:hover{color:var(--mz-fg)}
html.bmd-macierz .r3shuf kbd{background:var(--mz-lime);color:var(--mz-on-lime);opacity:1;font-size:var(--mz-fs-xs);letter-spacing:.02em;box-shadow:0 3px 0 #7C9500}
html.bmd-macierz .r3shuf b{color:var(--mz-acc);font-weight:600}

/* ---------- 6 legal corner added to every tool page at build time (Privacy · Terms) ---------- */
html.bmd-macierz .bmd-lc{right:16px;bottom:12px;height:28px;padding:0 4px;background:var(--mz-glass);color:var(--mz-mute);box-shadow:var(--mz-shadow-float);font:500 var(--mz-fs-xs)/1 var(--mz-mono);letter-spacing:.02em}
html.bmd-macierz .bmd-lc a{height:28px}
html.bmd-macierz .bmd-lc a:hover,html.bmd-macierz .bmd-lc a:focus-visible{color:var(--mz-fg)}
html.bmd-macierz .bmd-lc i{opacity:1;color:var(--mz-dim)}

/* ---------- 7 one still frame when the system asks for less motion ---------- */
@media (prefers-reduced-motion:reduce){
  html.bmd-macierz *,html.bmd-macierz *::before,html.bmd-macierz *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}