/* SPDX-License-Identifier: MIT. Kiara HUD 3.0 (D097/D102): colours from paczka LCD 1.5.1 palety.json, the same as on the cube.
   Without data-theme the page follows the system theme; data-theme="light"|"dark" is set only by QC (no stored preference). */
:root { --bg: #181010; --grid: #211c18; --dim: #393029; --mid: #948673; --fg: #e7dfc6; --hi: #fff7de; --cu-dim: #633418; --cu: #c66931; --cu-hi: #efa25a;
  --ok-dim: #315952; --ok: #7bb2a5; --ok-hi: #b5e7d6; --warn: #c66931; --plate: #efa25a; --plate-ink: #181010; color-scheme: dark;
  --obudowa: #2a2622; --obudowa-krawedz: #3a3530; --obudowa-cien: rgba(0, 0, 0, .8); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #efe7d6; --grid: #ded3bd; --dim: #c6b69c; --mid: #6b6152; --fg: #292018; --hi: #100c08;
  --cu-dim: #deb694; --cu: #944918; --cu-hi: #7b3410; --ok-dim: #adc7bd; --ok: #316d63; --ok-hi: #21514a; --warn: #944918; --plate: #944918; --plate-ink: #efe7d6; color-scheme: light; } }
:root[data-theme="light"] { --bg: #efe7d6; --grid: #ded3bd; --dim: #c6b69c; --mid: #6b6152; --fg: #292018; --hi: #100c08;
  --cu-dim: #deb694; --cu: #944918; --cu-hi: #7b3410; --ok-dim: #adc7bd; --ok: #316d63; --ok-hi: #21514a; --warn: #944918; --plate: #944918; --plate-ink: #efe7d6; color-scheme: light; }
/* Atkinson Hyperlegible Next (SIL OFL 1.1, assets/FONT-LICENSE.txt), variable 200-800, the same files as the phone panel. */
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/kiara-adblock/assets/atkinson-latin-ext.ca1969afa905.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/kiara-adblock/assets/atkinson-latin.1e4cea71d75e.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* SPDX-License-Identifier: MIT. Kiara HUD 3.0 for the public pages (web v7.1, D102). Colours from tokens.css (= the cube).
   One pixel: the cube screen, pixel lettering and the scene share one scale (x2; x3 from 1280 px). No inline styles in HTML. */
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--fg); font: 400 17px/1.5 'Atkinson Hyperlegible Next', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
canvas[data-text] { display: inline-block; vertical-align: middle; }
canvas.lcd { display: block; width: 256px; height: 256px; background: var(--bg); }
a { color: var(--fg); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--ok); }
h1, h2, h3 { overflow-wrap: normal; hyphens: manual; }
h2 { font: 800 26px/1.15 'Atkinson Hyperlegible Next', sans-serif; margin-bottom: 14px; }
h3 { font: 700 19px/1.25 'Atkinson Hyperlegible Next', sans-serif; }
ul, ol { padding-left: 1.2em; }
code, .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 15px; overflow-wrap: anywhere; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: 16px; top: -100px; background: var(--ok); color: var(--bg); padding: 12px 16px; font-weight: 700; z-index: 10; }
.skip:focus { top: 8px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--ok-hi); outline-offset: 3px; }
.ui-icon { width: 20px; height: 20px; flex: none; vertical-align: -4px; stroke: currentColor; }
.external-icon { width: 16px; height: 16px; margin-left: 4px; }

/* own status bar: stage, candidate and date (the portal bar above it carries the ESP32AI.ME brand) */
.portal { border-bottom: 1px solid var(--grid); }
.portal > div { max-width: 1440px; margin: 0 auto; padding: 6px 16px; display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between;
  font: 700 15px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .3px; color: var(--mid); }
.portal .krotki { display: none; }
@media (max-width: 479px) { .portal > div { font-size: 13px; letter-spacing: 0; padding-top: 4px; padding-bottom: 4px; } .portal .pelny { display: none; } .portal .krotki { display: inline; } }   /* phone: one line, BETA / version / date */

/* header: portrait D032, name, navigation, language */
.gora { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 10px; }
.gora .marka { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; font: 700 20px/1 'Atkinson Hyperlegible Next', sans-serif; white-space: nowrap; }
.portret { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--dim); }
.gora nav { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; font-weight: 700; font-size: 16px; flex-basis: 100%; order: 3; }
.gora nav a { min-height: 48px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration-color: transparent; }
.gora nav a[aria-current="page"] { text-decoration-color: var(--ok); }
.gora .preferences { margin-left: auto; order: 2; }   /* phone: brand and language on one row, navigation below */
/* language switch: a code in an outline, not underlined like the navigation (design-qc 16.10) */
.jezyk { font: 700 15px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .5px; min-height: 48px; min-width: 48px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: inset 0 0 0 2px var(--dim); }
.skala { height: 6px; margin-top: 6px; background: repeating-linear-gradient(90deg, var(--mid) 0 2px, transparent 2px 16px) bottom / 100% 6px no-repeat,
  repeating-linear-gradient(90deg, var(--dim) 0 2px, transparent 2px 4px) bottom / 100% 2px no-repeat; }

/* buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 20px; background: transparent; color: var(--fg);
  border: 2px solid var(--ok); font: 700 18px/1.2 'Atkinson Hyperlegible Next', sans-serif; cursor: pointer; text-decoration: none; text-align: center; }
.btn.pelny { background: var(--ok); color: var(--bg); }
.link-mocny { font-weight: 700; font-size: 18px; min-height: 48px; display: inline-flex; align-items: center; gap: 6px; }
.cta { display: flex; gap: 12px 18px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

/* expandable rows: own HUD marker (square with plus / minus drawn in CSS, not a text glyph), target >= 48 px */
summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; font-size: 18px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; flex: none; width: 22px; height: 22px; border: 2px solid var(--mid);
  background: linear-gradient(var(--fg), var(--fg)) center / 10px 2px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 2px 10px no-repeat; }
details[open] > summary::before { border-color: var(--ok); background: linear-gradient(var(--fg), var(--fg)) center / 10px 2px no-repeat; }

/* HUD frame: corners only */
.hud { position: relative; padding: 16px; }
.hud::before, .hud::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hud::before { background:
    linear-gradient(var(--mid), var(--mid)) left top / 12px 2px no-repeat, linear-gradient(var(--mid), var(--mid)) left top / 2px 12px no-repeat,
    linear-gradient(var(--mid), var(--mid)) right top / 12px 2px no-repeat, linear-gradient(var(--mid), var(--mid)) right top / 2px 12px no-repeat; }
.hud::after { background:
    linear-gradient(var(--mid), var(--mid)) left bottom / 12px 2px no-repeat, linear-gradient(var(--mid), var(--mid)) left bottom / 2px 12px no-repeat,
    linear-gradient(var(--mid), var(--mid)) right bottom / 12px 2px no-repeat, linear-gradient(var(--mid), var(--mid)) right bottom / 2px 12px no-repeat; }

/* ---------------- home (web v7.1) */
.hero { padding: 14px 0 22px; }
.kod { margin-bottom: 10px; }
.hero h1 { font: 800 32px/1.08 'Atkinson Hyperlegible Next', sans-serif; letter-spacing: -0.4px; max-width: 22ch; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--ok); }
.lead { font-size: 18px; margin-top: 14px; max-width: 36em; }
@media (max-width: 359px) { .hero h1 { font-size: 28px; } .lead { font-size: 17px; } }   /* 320 px: the primary action stays on the first screen (EN lead is longer) */
.scena { position: relative; height: 444px; margin: 20px -16px 0; overflow: hidden; }
.scena #brama { position: absolute; left: 0; top: 0; }
.scena .kostka { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 14px; border-radius: 20px; background: var(--obudowa);
  box-shadow: inset 0 0 0 2px var(--obudowa-krawedz), 0 18px 40px -18px var(--obudowa-cien); }
.podpis-ruch { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; justify-content: space-between; margin-top: 10px; }
.podpis { font-size: 16px; color: var(--mid); max-width: 44em; }
.ruch { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px; background: none; border: 0; color: var(--fg);
  font: 700 16px 'Atkinson Hyperlegible Next', sans-serif; text-decoration: underline; text-decoration-color: var(--ok); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.ruch:disabled { color: var(--mid); text-decoration-color: var(--dim); cursor: default; }
.sekcja { border-top: 2px solid var(--dim); padding: 28px 0; }
.sekcja .wstep { margin-bottom: 14px; max-width: 36em; }
.sekcja p + p { margin-top: 10px; }
.nie-lista, .kroki { list-style: none; padding: 0; display: grid; }
.nie-lista li { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--grid); }
@media (max-width: 479px) { .nie-lista li { grid-template-columns: 1fr; gap: 8px; } }   /* phone: drawing above the text, not a 22-character column */
.nie-lista li b, .kroki li b { display: block; font-size: 18px; }
.nie-lista canvas { margin-top: 4px; }
.kroki li { display: grid; grid-template-columns: 28px 1fr; gap: 6px 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--grid); }
.kroki li canvas[data-text] { margin-top: 2px; }
.kroki figure { grid-column: 2; margin-top: 10px; }
@media (max-width: 399px) { .kroki figure { grid-column: 1 / -1; } }   /* 320 px: the 284 px cube body needs the whole row */
.kroki figcaption, .zatrzymane figure > figcaption { font-size: 16px; color: var(--mid); margin-top: 6px; max-width: 28em; }
.zatrzymane { display: grid; gap: 18px; }
.zatrzymane figure { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.zatrzymane figure > * { flex: none; }
.zatrzymane figure > figcaption { flex: 0 0 100%; max-width: 36em; }
/* system font on purpose: this is the phone's browser, not Kiara */
.przegladarka { width: 256px; border: 2px solid var(--dim); border-radius: 14px; padding: 10px; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--bg); }
.przegladarka .pasek { font-size: 16px; color: var(--fg); border-radius: 8px; background: var(--grid); padding: 6px 10px; overflow-wrap: anywhere; }
.przegladarka .blad { font-size: 18px; font-weight: 700; margin: 26px 6px 4px; }
.przegladarka .blad + p { font-size: 16px; color: var(--mid); margin: 0 6px 30px; }
/* the small cube body around LCD frames in the text (the same object as in the hero) */
.obudowa { display: inline-block; padding: 14px; border-radius: 20px; background: var(--obudowa); box-shadow: inset 0 0 0 2px var(--obudowa-krawedz); }
.sklepy { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 16px; }
.wspolpraca { margin-top: 12px; font: 400 15px/1.5 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--mid); max-width: 44em; }
.wspolpraca b { color: var(--fg); }

/* ---------------- information pages (same language, same tokens) */
.page-heading { padding: 18px 0 26px; }
.eyebrow { font: 700 15px/1.3 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .5px; color: var(--ok); margin-bottom: 10px; }
.page-heading h1 { font: 800 30px/1.1 'Atkinson Hyperlegible Next', sans-serif; letter-spacing: -0.3px; max-width: 24ch; }
.section, .callout, .fleet, .author, .comparison, .release-status, .faq, .steps, .updates, .story-blocks { margin-bottom: 28px; }
.section { border-top: 2px solid var(--dim); padding-top: 24px; }
.section-head { display: grid; gap: 8px; margin-bottom: 14px; }
.section-head p, .section > p, .prose p { max-width: 40em; }
.prose ol, .callout ul { margin: 10px 0; display: grid; gap: 6px; max-width: 40em; }
.note, .caption, .disclosure { font-size: 16px; color: var(--mid); margin-top: 10px; max-width: 44em; }
.callout { position: relative; padding: 18px; }
.callout, .fleet, .author { background: var(--grid); }
.callout h2, .fleet h2 { font-size: 22px; }
.callout p + p { margin-top: 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 12px 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px; border: 2px solid var(--ok);
  font-weight: 700; text-decoration: none; text-align: center; }
.button.primary { background: var(--ok); color: var(--bg); }
.button.secondary { margin-bottom: 18px; }
.text-link { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; font-weight: 700; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; margin: 14px 0 6px; }
.metrics > div { padding: 12px 14px; border-left: 2px solid var(--ok-dim); }
.metrics dt { font-size: 15px; color: var(--mid); }
.metrics dd { font: 800 26px/1.15 'Atkinson Hyperlegible Next', sans-serif; font-variant-numeric: tabular-nums; margin-top: 4px; }
.fleet { padding: 18px; }
.fleet dl, .size-list, .release-status { display: grid; gap: 0; margin-top: 10px; }
.fleet dl > div, .size-list > div, .release-status > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--dim); }
.fleet dd, .release-status dd { font-weight: 700; }
.size-list dd { text-align: right; }
.steps { list-style: none; padding: 0; counter-reset: krok; display: grid; }
.steps li { counter-increment: krok; display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--grid); }
.steps li::before { content: counter(krok, decimal-leading-zero); grid-row: span 2; font: 700 15px/1.6 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--ok); }
.steps p { max-width: 40em; }
.faq details, .layer-list details { border-top: 1px solid var(--grid); padding: 4px 0; }
.faq details p { margin: 4px 0 12px 34px; max-width: 40em; }
.story-blocks { display: grid; gap: 0; }
.story-blocks section { padding: 16px 0; border-top: 1px solid var(--dim); }
.story-blocks h2 { font-size: 21px; margin-bottom: 6px; }
.story-blocks p { max-width: 40em; }
.comparison { display: grid; gap: 14px; }
.comparison article { position: relative; padding: 18px; border-left: 2px solid var(--ok); background: var(--grid); }
.comparison h2 { font-size: 22px; margin-bottom: 2px; }
.comparison h3 { color: var(--mid); font-size: 16px; margin-bottom: 8px; }
.gates { list-style: none; padding: 0; display: grid; }
.gates li { display: grid; grid-template-columns: 40px 1fr; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--grid); }
.gate-index { font: 700 15px/1.6 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--mid); }
.gate-state { grid-column: 2; justify-self: start; font: 700 15px/1.3 ui-monospace, 'SF Mono', Menlo, monospace; padding: 4px 8px; border: 1px solid var(--dim); color: var(--mid); }
.gate-state.done { border-color: var(--ok); color: var(--ok); }
.updates { list-style: none; padding: 0; display: grid; }
.updates li { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--grid); }
.update-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 700 15px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--mid); }
.updates h2 { font-size: 21px; margin: 2px 0 4px; }
.updates h3 { font-size: 19px; margin: 2px 0 4px; text-wrap: balance; }   /* contributions: rows under their section heading */
.contributions { margin-top: 44px; } .contributions > h2 { font-size: 24px; margin-bottom: 12px; }   /* one step under the page title (design-qc 17.10) */
.contributions .updates li:last-child { border-bottom: 0; } .contributions .updates p:has(> .text-link) { margin: 0; }
.updates p { max-width: 40em; }
.composition { display: block; width: 100%; height: 48px; margin: 12px 0; }
/* Lab measurement (17.10): big figures on the front page, dithered canvases drawn by measure.js; numbers stay as text without JS */
.metrics.liczby dt .pod { display: block; margin-top: 4px; font: 400 15px/1.45 'Atkinson Hyperlegible Next', sans-serif; color: var(--mid); }   /* meaning-bearing captions: body font, readable for 65+ (design-qc 17.10) */
.metrics dd small { font-size: .5em; font-weight: 700; color: var(--mid); }
.metrics.duze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metrics.duze > div { display: flex; flex-direction: column; }
.metrics.duze dd { order: -1; margin: 0 0 4px; font-size: 46px; line-height: 1; color: var(--hi); white-space: nowrap; }
.metrics.duze dt { color: var(--fg); }
.metrics.duze.sredni dd { font-size: 40px; }
.metrics.duze dd { white-space: normal; } .metrics.duze dd small { display: inline-block; white-space: nowrap; }   /* "324 z 324" wraps its tail, never past the column */   /* one number grammar on both pages; the measurements page a step smaller */
.werdykt { margin-top: 6px; max-width: 40em; }
.slupki { margin: 18px 0 6px; }
.slupki figcaption { font: 400 15px/1.45 'Atkinson Hyperlegible Next', sans-serif; color: var(--fg); margin-bottom: 8px; }
.slupki ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.slupki li { display: grid; grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 15px; }
.slupki .ile { font-weight: 700; font-variant-numeric: tabular-nums; }
canvas.slupek, canvas.slupek-maly, canvas.wykres { display: block; image-rendering: pixelated; }
canvas.slupek, canvas.wykres { width: 100%; }
.zmierzone .link-mocny { margin-top: 6px; }
.podpis-pomiaru { margin-top: 12px; max-width: 44em; font: 400 15px/1.5 'Atkinson Hyperlegible Next', sans-serif; color: var(--fg); }   /* the sentence that prevents a wrong reading is prose; .wspolpraca stays the paid-collaboration label */
.legenda { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0 14px; font: 400 15px/1.45 'Atkinson Hyperlegible Next', sans-serif; color: var(--fg); }
.legenda i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.lg-down { background: var(--ok); } .lg-up { background: var(--mid); }
.legenda i.lg-th { width: 22px; height: 8px; vertical-align: 1px; border-left: 2px solid var(--cu-hi); border-right: 2px solid var(--cu-hi);   /* the threshold as a gate stroke with caps, as drawn */
  background: linear-gradient(var(--cu-hi), var(--cu-hi)) center / 100% 2px no-repeat; }
.legenda i.lg-gap { width: 4px; background: var(--mid); }
.pasy, .dns-siatka { display: grid; gap: 24px; }
.dns-siatka { gap: 14px; }
.pas { display: grid; gap: 6px; min-width: 0; }
.pas-gora { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.pas-gora h3 { font-size: 17px; margin: 0; }
.chip { font: 400 15px/1.45 'Atkinson Hyperlegible Next', sans-serif; color: var(--mid); }
.dns-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; min-width: 0; }
.dns-wiersz .nazwa { font-weight: 700; } .dns-wiersz .ile { font: 400 15px/1.45 'Atkinson Hyperlegible Next', sans-serif; color: var(--fg); }
.dns-wiersz canvas { grid-column: 1 / -1; }
.tabela { overflow-x: auto; border-top: 1px solid var(--dim); margin-bottom: 10px; }
table.pomiar { border-collapse: collapse; width: 100%; min-width: 660px; font-size: 15px; font-variant-numeric: tabular-nums; }
table.pomiar th, table.pomiar td { text-align: left; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--grid); vertical-align: middle; }
table.pomiar th { font: 400 12px/1.3 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .6px; text-transform: uppercase; color: var(--mid); }
table.pomiar th .jedn { text-transform: none; letter-spacing: 0; }   /* uppercase turned Mb/s into MB/S, eight times the unit (design-qc 17.10) */
table.pomiar .jm { display: none; color: var(--mid); } .nowrap { white-space: nowrap; }
table.pomiar td.mode { font-weight: 700; white-space: nowrap; }
table.pomiar .v { font-weight: 700; color: var(--hi); }
table.pomiar canvas { display: inline-block; vertical-align: middle; margin-left: 8px; }
.slaby { color: var(--cu-hi); } .dobry { color: var(--ok); }
.lista { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 44em; }
.mono-lista { font: 400 13px/1.5 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--mid); overflow-wrap: anywhere; }
.pamiec-tryby { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 16px; font-size: 15px; }
.pamiec-tryby b { font: 700 14px/1 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--mid); margin-right: 8px; }
.section > p + :is(.dns-siatka, .tabela, dl, canvas, .legenda) { margin-top: 16px; }
.section > h3 { margin: 28px 0 8px; }
@media (max-width: 679px) {   /* phone: each mode as its own block of label/value lines instead of a sideways-scrolling table */
  table.pomiar { min-width: 0; } table.pomiar thead { display: none; } .tabela { border-top: 0; }
  table.pomiar tr { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--dim); }
  table.pomiar td { border: 0; padding: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  table.pomiar td.mode { display: block; white-space: normal; margin-bottom: 4px; }
  table.pomiar td[data-label]::before { content: attr(data-label); margin-right: auto; font: 400 12px/1.3 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .6px; text-transform: uppercase; color: var(--mid); }
  table.pomiar canvas { margin-left: 0; }
  table.pomiar .jm { display: inline; }
  .pamiec-tryby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dns-wiersz { grid-template-columns: minmax(0, 1fr); }   /* name, then the count, then the cells */
  .slupki li { grid-template-columns: minmax(0, 1fr) auto; } .slupki canvas.slupek { grid-column: 1 / -1; grid-row: 2; } }
/* mandatory layer in patina (protection), not copper: copper means a warning on the cube (design-qc 16.10) */
.segment.s-0 { fill: var(--ok); } .segment.s-1 { fill: url(#obie-warstwy); } .segment.s-2 { fill: var(--mid); }
.hatch-a { fill: var(--mid); } .hatch-b { fill: var(--ok); }   /* both layers at once: patina and mid stripes */
.legend { display: grid; gap: 0; }
.legend > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0 8px 22px; border-bottom: 1px solid var(--grid); position: relative; }
.legend > div::before { content: ""; position: absolute; left: 0; top: 14px; width: 12px; height: 12px; }
.legend-0::before { background: var(--ok); } .legend-1::before { background: repeating-linear-gradient(45deg, var(--ok) 0 2px, var(--mid) 2px 4px); } .legend-2::before { background: var(--mid); }
.legend dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.catalog-controls { display: grid; gap: 12px; margin: 10px 0; }
.catalog-controls label { display: grid; gap: 4px; font-weight: 700; }
input[type="search"], select { min-height: 48px; padding: 0 12px; background: var(--bg); color: var(--fg); border: 2px solid var(--mid); font: 400 17px 'Atkinson Hyperlegible Next', sans-serif; max-width: 100%; }
/* WebKit keeps the native select at its own height; the HUD select draws its own chevron */
select { -webkit-appearance: none; appearance: none; height: 48px; padding-right: 40px; border-radius: 0;
  background: linear-gradient(45deg, transparent 50%, var(--fg) 50%) right 22px center / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--fg) 50%) right 15px center / 7px 7px no-repeat, var(--bg); }
.catalog { display: grid; gap: 12px; }
.source-row { display: grid; gap: 10px; padding: 16px; background: var(--grid); border-left: 2px solid var(--ok-dim); min-width: 0; }
.source-row h3 span { display: block; font-weight: 400; color: var(--mid); font-size: 16px; }
.source-row dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.source-row dt { font-size: 15px; color: var(--mid); }
.source-row dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.source-row details code { display: block; margin: 4px 0 8px; }
.annotation { font-size: 16px; color: var(--mid); }
.author { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 18px; }
.author img { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 2px var(--dim); }
.author > div { flex: 1 1 260px; }

/* footer */
footer { border-top: 2px solid var(--dim); margin-top: 32px; padding: 24px 0 40px; color: var(--mid); font-size: 16px; }
footer .footer-top { display: grid; gap: 6px; margin-bottom: 12px; }
footer .footer-top .marka-stopka { font-weight: 700; color: var(--fg); min-height: 48px; display: inline-flex; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
footer nav a, footer .footer-bottom a { min-height: 48px; display: inline-flex; align-items: center; color: var(--fg); }
footer .footer-bottom { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; margin-top: 10px; }
footer .footer-bottom p { flex-basis: 100%; }

@media (min-width: 600px) {
  .gora { flex-wrap: nowrap; }
  .gora nav { flex-basis: auto; margin-left: auto; order: 2; }
  .gora .preferences { margin-left: 0; order: 3; }
}
@media (min-width: 700px) {
  .przegladarka { min-height: 284px; }   /* next to the cube screen: the same height */
  .scena { height: 320px; }
  .scena .kostka { left: auto; right: 32px; bottom: auto; top: 10px; transform: none; }
  .catalog-controls { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .wrap, .portal > div { padding-left: 48px; padding-right: 48px; }
  .hero { padding: 24px 0 36px; }
  .hero h1 { font-size: 52px; max-width: 24ch; }
  .hero-dol { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; }
  .hero-dol .cta { margin-top: 0; }
  .lead { font-size: 21px; max-width: 30em; }
  /* the scene in the same 7/5 grid as the text: the cube's left edge is the CTA axis */
  .scena { height: 340px; margin: 24px -48px 0; padding: 0 48px; display: grid; grid-template-columns: 7fr 5fr; column-gap: 48px; align-items: start; }
  .scena .kostka { position: relative; grid-column: 2; justify-self: start; right: auto; top: auto; }
  .sekcja { padding: 48px 0; }
  .sekcja .siatka { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; }
  .nie-lista li { grid-template-columns: 128px 1fr; gap: 24px; }
  .kroki li { grid-template-columns: 28px minmax(0, 1fr) 284px; }   /* fixed figure column: frames on one axis */
  .kroki figure { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
  h2 { font-size: 34px; }
  .contributions { margin-top: 64px; } .contributions > h2 { font-size: 28px; }
  .metrics.duze dd { font-size: 64px; }
  .page-heading { padding: 32px 0 40px; }
  .page-heading h1 { font-size: 46px; }
  .section-head { grid-template-columns: 5fr 7fr; gap: 48px; align-items: end; }
  .comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .metrics dd { font-size: 32px; }
}
@media (min-width: 1280px) {
  .nie-lista li { grid-template-columns: 192px 1fr; }
  .scena canvas.lcd { width: 384px; height: 384px; }
  .scena { height: 460px; }
}