/* Self-hosted fonts (SIL Open Font License 1.1, see assets/fonts/). Latin and Latin Extended cover Polish and English. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-latin-ext.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:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-latin.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}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/instrument-sans-latin-ext.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:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/instrument-sans-latin.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}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-sans-italic-latin.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}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-ext.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:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin.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}
html, body { margin: 0; }
img { max-width: 100%; }
/* Layout: one painted day from top to bottom. Stippled sky, white paper for the product, a dusk panel for the evening,
   a block-mosaic lake for the topics, and a starfield with filament light trails at the end. */
:root {
  --papier: #fdfbf6;
  --kartka: #ffffff;
  --atrament: #2a1a10;
  --szary: #75685c;
  --linia: rgba(42, 26, 16, .13);
  --niebo: #2368c4;
  --dach: #e4512a;
  --zolty: #f6ee78;
  --noc: #05060a;
  --krem: #f3ead8;
  --krem-cichy: #b6b0a8;
  --linia-noc: rgba(243, 234, 216, .2);
  --display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --tekst: 'Instrument Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pismo: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}
body { background: var(--papier); color: var(--atrament); font: 400 17px/1.5 var(--tekst); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
img { display: block; height: auto; }
[hidden] { display: none !important; }
.ramka { box-sizing: border-box; width: 100%; max-width: 1320px; margin-inline: auto; padding-left: max(20px, min(5vw, 64px), env(safe-area-inset-left, 0px)); padding-right: max(20px, min(5vw, 64px), env(safe-area-inset-right, 0px)); }
.pas { padding-block: clamp(64px, 8vw, 104px); }
.etykieta { margin: 0; font: 500 13px/1.3 var(--pismo); letter-spacing: .08em; text-transform: uppercase; color: var(--szary); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(54px, 6.7vw, 100px); line-height: .98; letter-spacing: -.022em; }
h2 { margin: 14px 0 0; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.016em; }
h3 { margin: 0; font-size: clamp(28px, 2.7vw, 36px); line-height: 1.08; letter-spacing: -.01em; }
.wstep { margin: 14px 0 0; max-width: 36em; color: var(--szary); font-size: 18px; }
.srodek { text-align: center; }
.srodek .wstep { margin-inline: auto; }
.guzik { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px; font: 500 17px/1.1 var(--tekst); cursor: pointer; }
.guzik:hover { text-decoration: none; filter: brightness(1.12); }
.guzik.ciemny { background: var(--atrament); color: #fff; }
.guzik.jasny { background: var(--krem); color: var(--atrament); }
.guzik.jasny i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--atrament); color: var(--krem); font: normal 10px/1 var(--tekst); }
.akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }

/* The sky */
.niebo { position: relative; height: clamp(760px, 59vw, 1020px); overflow: hidden; background: #2f6ca8; color: #fff; }
.obraz { position: absolute; bottom: 0; width: max(100%, clamp(760px, 59vw, 1020px) * 16 / 9); }
.obraz img { width: 100%; max-width: none; }
.gora { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 20px; padding-block: 30px 0; }
/* Top menu: plain links and three lists that open on click. Below 1300 px it folds into one panel. */
.gora { --gut: max(20px, min(5vw, 64px)); z-index: 3; }
.gora nav { display: flex; align-items: center; gap: 4px 16px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.gora .rozwin { position: relative; margin: 0; padding: 0; border: 0; }
.gora summary { display: flex; align-items: center; gap: 6px; min-height: 0; font: inherit; list-style: none; cursor: pointer; }
.gora summary::-webkit-details-marker { display: none; }
.gora summary::after { content: ""; width: 5px; height: 5px; margin-top: -3px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); }
.gora [open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.lista { position: absolute; left: -12px; top: calc(100% + 12px); display: grid; box-sizing: border-box; width: 272px; padding: 8px; border-radius: 12px; background: var(--kartka); color: var(--atrament); box-shadow: 0 20px 44px -18px rgba(12, 36, 72, .6), 0 0 0 1px var(--linia); white-space: normal; }
.lista.dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 520px; }
.lista a { padding: 8px 10px; border-radius: 8px; font-size: 15px; line-height: 1.25; }
.lista a:hover { background: #f3eee4; text-decoration: none; }
.lista small { display: block; margin-top: 1px; color: var(--szary); font-size: 13px; font-weight: 400; }
.waskie { display: none; }
.menu-guzik { display: none; align-items: center; gap: 9px; justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: 500 16px/1 var(--tekst); cursor: pointer; }
.menu-guzik i { box-sizing: border-box; width: 18px; height: 11px; border-block: 2px solid; }
.github { display: inline-flex; align-items: center; gap: 7px; }
.github svg { width: 19px; height: 19px; fill: currentColor; }
.github span { display: inline-flex; align-items: center; gap: 3px; font-size: 14.5px; }
.github span svg { width: 13px; height: 13px; }
.github b { font-weight: 500; }
.znak { font: 400 46px/1 var(--display); letter-spacing: -.02em; }
.gora .guzik { min-height: 46px; }
.gora .prawa { display: flex; align-items: center; justify-self: end; gap: 18px; font-size: 15.5px; font-weight: 500; white-space: nowrap; }
.tytul { position: relative; padding-top: clamp(36px, 4.6vw, 64px); text-align: center; text-shadow: 0 1px 18px rgba(16, 50, 110, .32); }
.tytul .pod { margin: 18px auto 0; max-width: 38em; text-wrap: balance; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4; color: rgba(255, 255, 255, .92); }
.tytul .akcje { justify-content: center; text-shadow: none; }
.tytul .bez { margin: 14px 0 0; font-size: 15.5px; font-weight: 500; text-wrap: balance; }
.mowi { position: absolute; left: var(--x); bottom: var(--y); max-width: 240px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--krem); color: var(--atrament); font: 500 14px/1.25 var(--tekst); white-space: nowrap; transform: translateX(-50%); cursor: pointer; }
.mowi::after { content: ""; position: absolute; left: 50%; top: 100%; border: 6px solid transparent; border-top-color: var(--krem); transform: translateX(-50%); }
.ludzik { position: absolute; left: var(--x); bottom: var(--z); width: var(--w); height: auto; overflow: visible; transform: translateX(-50%); }
.oczy { transform-box: fill-box; transform-origin: center; animation: mrug 5.5s infinite; }
@keyframes mrug { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { .oczy { animation: none; } }

/* The opening: words on the left, the printer rising out of the clouds, its live card beside it. */
.obraz { left: auto; right: 0; transform: none; --x: 35.4%; --z: 9.4%; --w: 3.4%; --y: 22.6%; }
.tytul { text-align: left; }
.tytul > *, .tytul .pod { max-width: 640px; margin-left: 0; }
.tytul .pod { max-width: 31em; }
.tytul .akcje { justify-content: flex-start; }
.stan { position: absolute; right: 36.2%; bottom: 13%; width: clamp(236px, 19vw, 300px); color: var(--atrament); }
.stan .rzad { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--linia); }
.stan .wiersz { display: flex; align-items: baseline; gap: 8px; }
.stan .wiersz b, .stan .ile { font: 400 22px/1 var(--display); }
.stan .kropka { display: inline-flex; align-items: center; gap: 6px; color: var(--szary); font-size: 13px; }
.stan .kropka::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pomarancz, #e4572e); }
.stan .gotowa::before { background: #3f9a5b; }
.stan .ile { margin-left: auto; }
.stan .plik { margin-top: 4px; color: var(--szary); font: 400 12.5px/1.2 var(--pismo); }
.stan .pasek { height: 4px; margin-top: 7px; border-radius: 2px; background: var(--linia); overflow: hidden; }
.stan .pasek i { display: block; width: var(--p); height: 100%; background: var(--atrament); }
.stan .dane { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; color: var(--szary); font: 400 12.5px/1.2 var(--pismo); }
.stan .szpule { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.stan .szpule i { display: block; height: 15px; border-radius: 4px; background: linear-gradient(to top, var(--c) var(--p), var(--linia) var(--p)); }

/* Printer families, resting on the page colour where the clouds end. */
.dziala { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px clamp(18px, 3vw, 44px); box-sizing: border-box; max-width: 1320px; margin: -58px auto 0; padding: 0 20px; list-style: none; font: 400 clamp(21px, 2vw, 27px)/1.25 var(--display); }
.dziala li:first-child { color: var(--szary); font: 500 12.5px/1.3 var(--pismo); letter-spacing: .08em; text-transform: uppercase; }

/* The product on a stage of thin arcs, with notes pinned around it. */
.podium { position: relative; margin-top: 44px; padding: 34px 0 0; }
.luki { position: absolute; left: 50%; top: 0; bottom: 0; width: min(100vw, 1500px); background: repeating-radial-gradient(circle at 50% 100%, transparent 0 15.6%, var(--linia) 15.6% calc(15.6% + 1px)), radial-gradient(circle at 50% 100%, rgba(42, 26, 16, .035) 0 32%, transparent 32%); transform: translateX(-50%); pointer-events: none; }
.podium .okno { position: relative; width: min(860px, 72%); margin: 0 auto; }

/* The live window: the app's own light theme, running on sample data. */
.apka { --tlo: #f3f3f2; --plansza: #fcfcfc; --pole: #e9eae8; --kraw: #d8dad7; --pis: #242724; --dim: #646b64; --zywy: #2f7d4f; position: relative; box-sizing: border-box; width: min(920px, 100%); margin: 0 auto; padding: 10px; overflow: hidden; border-radius: 12px; background: var(--tlo); color: var(--pis); font: 400 13px/1.25 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; text-align: left; box-shadow: 0 30px 60px -24px rgba(42, 26, 16, .38), 0 0 0 1px var(--linia); }
.apka button { color: inherit; font: inherit; }
.apka-pasek { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border: 1px solid var(--kraw); border-radius: 10px; background: #eeeeeb; }
.swiatla { display: flex; gap: 6px; margin-right: 4px; }
.swiatla i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.swiatla i:nth-child(2) { background: #febc2e; }
.swiatla i:nth-child(3) { background: #28c840; }
.apka-pasek img { width: 74px; height: auto; filter: invert(1) brightness(.2); }
.apka-ile { color: var(--dim); white-space: nowrap; }
.apka-zywo { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--zywy); font-size: 12px; white-space: nowrap; }
.apka-zywo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.apka-flota { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin-top: 8px; }
.apka-karta { display: flex; flex-direction: column; min-width: 0; padding: 9px 10px 10px; border: 1px solid var(--kraw); border-radius: 12px; background: var(--plansza); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.apka-karta:hover { border-color: #9aa39b; box-shadow: 0 6px 16px -10px rgba(42, 26, 16, .5); }
.k-gora { display: flex; align-items: center; gap: 6px; min-width: 0; }
.k-gora b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.k-chip { padding: 1px 4px; border: 1px solid var(--kraw); border-radius: 4px; color: var(--dim); font-size: 9.5px; font-style: normal; line-height: 1.2; }
.k-stan { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.k-stan::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pis); }
.k-stan.gotowy::before { background: var(--zywy); }
.k-stan.pauza::before { background: #d08a2e; }
.k-stan.czeka::before { background: #b5bab5; }
.k-zad { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 7px; }
.k-zad span { overflow: hidden; font-size: 12px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.k-zad strong { font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.k-pasek { display: block; height: 4px; margin-top: 3px; overflow: hidden; border-radius: 2px; background: var(--pole); }
.k-pasek i { display: block; height: 100%; border-radius: 2px; background: #8f9c90; transition: width .6s; }
.k-czas { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--pole); color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.k-temp { display: flex; justify-content: space-between; gap: 8px; padding-block: 6px; border-bottom: 1px solid var(--pole); color: var(--dim); font-size: 11px; white-space: nowrap; }
.k-temp b { color: var(--pis); font-size: 15px; font-weight: 600; }
.k-temp .komora b { color: #4a7096; }
.k-sloty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: auto; padding-top: 7px; font-size: 10px; }
.k-sloty.jedna { grid-template-columns: minmax(0, 1fr); }
.k-slot { min-width: 0; color: var(--dim); white-space: nowrap; }
.k-slot b { color: var(--pis); font-weight: 600; }
.k-slot i { display: block; height: 5px; margin-block: 3px; overflow: hidden; border-radius: 2px; background: linear-gradient(to right, var(--c) var(--p), var(--pole) var(--p)); }
.apka-druk { display: flex; flex-direction: column; margin-top: 8px; }
.d-gora { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.d-gora span { color: var(--dim); }
.d-przycisk { min-height: 30px; padding: 0 12px; border: 1px solid var(--kraw); border-radius: 8px; background: var(--plansza); cursor: pointer; }
.d-przycisk:hover { border-color: #9aa39b; }
.d-siatka { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.d-pole { box-sizing: border-box; min-width: 0; padding: 12px; border: 1px solid var(--kraw); border-radius: 12px; background: var(--plansza); }
.d-pole h4 { margin: 0 0 8px; color: var(--dim); font: 600 10.5px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: .06em; }
.d-kamera { position: relative; margin: 0; overflow: hidden; border-radius: 8px; background: #161514; }
.d-kamera img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.d-kamera figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: 5px; background: rgba(20, 20, 20, .66); color: #fff; font-size: 11px; }
.d-historia { display: grid; margin: 0; padding: 0; list-style: none; }
.d-historia li { display: flex; justify-content: space-between; gap: 10px; padding-block: 7px; border-top: 1px solid var(--pole); }
.d-historia li:first-child { border-top: 0; padding-top: 0; }
.d-historia span { color: var(--dim); white-space: nowrap; }
.d-akcje { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.d-tytul { display: flex; align-items: baseline; gap: 8px; }
.d-tytul b { font-size: 19px; font-weight: 600; }
.d-tytul strong { margin-left: auto; font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.d-plik { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 6px; color: var(--dim); }
.d-sloty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.d-sloty.jedna { grid-template-columns: minmax(0, 1fr); }
.d-slot { min-height: 44px; padding: 6px; border: 1px solid var(--kraw); border-radius: 8px; background: none; text-align: left; font-size: 11px !important; cursor: pointer; }
.d-slot[aria-pressed="true"] { border-color: var(--pis); }
.d-slot i { display: block; height: 7px; margin-top: 4px; overflow: hidden; border-radius: 2px; background: linear-gradient(to right, var(--c) var(--p), var(--pole) var(--p)); }
.d-podpowiedz { min-height: 2.5em; margin: 8px 0 0; color: var(--dim); }
.apka-tost { position: absolute; left: 50%; bottom: 14px; margin: 0; padding: 8px 14px; border-radius: 10px; background: var(--pis); color: #fff; white-space: nowrap; transform: translateX(-50%); }
.okno img { width: 100%; border-radius: 12px; box-shadow: 0 30px 60px -24px rgba(42, 26, 16, .38), 0 0 0 1px var(--linia); }
.karta { box-sizing: border-box; padding: 14px 16px; background: var(--kartka); border-radius: 12px; box-shadow: 0 14px 34px -18px rgba(42, 26, 16, .4), 0 0 0 1px var(--linia); font-size: 14px; }
.karta p { margin: 0; }
.notka { position: absolute; }
.notka { --bok: max((1192px - 100vw) / 2 + 12px, -130px); }
.notka.ams { left: var(--bok); top: 30%; width: 216px; }
.notka.dzis { right: var(--bok); top: 7%; width: 216px; }
.znacznik { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; font-size: 14px; font-weight: 500; }
.znacznik.niebieski { background: var(--niebo); color: #fff; }
.znacznik.zolty { background: var(--zolty); color: var(--atrament); }
.znacznik svg { position: absolute; width: 18px; height: 18px; }
.niebieski svg { right: -11px; top: -13px; color: var(--niebo); }
.zolty svg { left: -11px; top: -13px; color: var(--zolty); transform: scaleX(-1); }
.notka.gotowy { left: var(--bok); top: 12%; }
.notka.alarm { right: var(--bok); top: 40%; }
.slupki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.slupki div { display: grid; gap: 6px; justify-items: center; font: 500 12px/1 var(--pismo); color: var(--szary); }
.slupki i { position: relative; display: block; width: 22px; height: 74px; overflow: hidden; border-radius: 11px; background: #efe9dd; }
.slupki i::after { content: ""; position: absolute; inset: auto 0 0; height: var(--p); border-radius: 11px; background: var(--c); }
.naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.naglowek b { font-weight: 600; }
.naglowek span { color: var(--szary); font-size: 13px; }
.wiersze { display: grid; gap: 8px; margin-top: 10px; }
.wiersze div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wiersze b { font-weight: 600; }
.wiersze span { color: var(--szary); font-size: 13px; white-space: nowrap; }
.podpis { margin: 18px 0 0; color: var(--szary); font-size: 14px; text-align: center; }

/* The sky comes back for the plain facts. */
.pasmo { box-sizing: border-box; min-height: 21.4vw; margin-top: clamp(28px, 3.4vw, 44px); padding-block: clamp(76px, 8.4vw, 116px) clamp(112px, 10vw, 142px); background: var(--papier) url(a/popoludnie.webp) center / cover; color: #fff; text-align: center; text-shadow: 0 1px 18px rgba(16, 50, 110, .32); }
.pasmo h2 { margin: 0; }
.fakty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; max-width: 1060px; margin: clamp(22px, 3vw, 36px) auto 0; }
.fakty b { display: block; font: 400 clamp(58px, 6.4vw, 92px)/1 var(--display); letter-spacing: -.02em; }
.fakty span { display: block; margin-top: 2px; font-size: 16px; font-weight: 500; line-height: 1.3; }

/* The same evening, two ways: two typed logs on one beat, over tiles that rise like a print. */
.scena { position: relative; margin-top: 30px; padding: clamp(14px, 4vw, 54px); overflow: hidden; border-radius: 18px; background: #34386e url(a/wieczor.webp) center / cover; }
.mozaika { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.okienka { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); }
.okienko { display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; border-radius: 12px; }
.okienko.bez { background: var(--atrament); color: var(--krem); }
.okienko.z { background: var(--papier); color: var(--atrament); }
.belka { display: flex; align-items: center; gap: 6px; min-height: 38px; padding-inline: 14px; font: 400 13px/1 var(--pismo); }
.bez .belka { background: #3b2719; }
.z .belka { background: #efe8da; }
.belka i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .35; }
.belka span { flex: 1; margin-right: 39px; text-align: center; }
.dziennik { flex: 1; margin: 0; padding: 8px 16px 4px; list-style: none; font: 400 14.5px/1.45 var(--pismo); }
.dziennik li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding-block: 8px; border-bottom: 1px solid rgba(243, 234, 216, .15); }
.z .dziennik li { border-bottom-color: var(--linia); }
.dziennik time { opacity: .62; }
.wiersz { display: grid; }
.wiersz > span { grid-area: 1 / 1; }
.gra .pod { opacity: .22; }
.pisze .pis::after { content: "▍"; color: var(--dach); }
.okienko figcaption { padding: 12px 16px 16px; font-size: 15px; line-height: 1.35; }
.okienko figcaption b { display: block; font: 400 25px/1.1 var(--display); }
.okienko figcaption span { opacity: .72; }
.powtorz { margin-top: 12px; padding: 10px 0; border: 0; background: none; color: inherit; font: 500 16px var(--tekst); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: pointer; }

/* Topics: one card floating on the lake, every tab in view at once. */
.jezioro { position: relative; margin-top: 30px; padding: clamp(14px, 3.4vw, 44px); border-radius: 18px; background: #6fa3d8 url(a/jezioro.webp) center / cover; image-rendering: pixelated; }
.jezioro > * { image-rendering: auto; }
.zakladki { display: grid; grid-template-columns: repeat(8, auto); justify-content: center; gap: 2px; width: fit-content; max-width: 100%; margin: 0 auto 12px; padding: 5px; border-radius: 10px; background: rgba(255, 255, 255, .94); }
.zakladki button { min-height: 40px; padding: 6px 13px; border: 0; border-radius: 6px; background: none; color: var(--szary); font: 400 14px/1.15 var(--pismo); cursor: pointer; }
.zakladki button:hover { color: var(--atrament); }
.zakladki button[aria-pressed="true"] { background: #e3ddd1; color: var(--atrament); font-weight: 500; }
.temat { box-sizing: border-box; max-width: 1040px; min-height: 560px; margin-inline: auto; padding: clamp(18px, 2.6vw, 30px); border-radius: 14px; background: var(--kartka); box-shadow: 0 24px 50px -28px rgba(10, 30, 60, .6); }
.temat .opis { margin: 6px 0 20px; max-width: 37em; color: var(--szary); }
.wiecej { color: var(--atrament); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.plansze { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 24px 26px; align-items: start; }
.plansze figure { margin: 0; min-width: 0; }
.plansze img { width: auto; max-width: 100%; max-height: 366px; border-radius: 10px; box-shadow: 0 0 0 1px var(--linia); }
.plansze figcaption { margin-top: 10px; color: var(--szary); font-size: 15px; line-height: 1.38; }
.plansze figcaption b { display: block; color: var(--atrament); font: 400 24px/1.12 var(--display); }
.linie { display: grid; margin: 0; padding: 0; list-style: none; }
.linie li { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 12px; padding-block: 9px; border-top: 1px solid var(--linia); font-size: 15.5px; line-height: 1.38; }
.linie li b { font-weight: 600; }
.linie li span { color: var(--szary); }
.jezioro .podpis { width: fit-content; margin: 14px auto 0; padding: 7px 12px; border-radius: 6px; background: var(--atrament); color: #fff; font: 400 13px/1.2 var(--pismo); }

/* Cloud */
.cloud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); grid-template-rows: auto 1fr; gap: 26px clamp(36px, 5vw, 72px); align-items: start; }
.cloud-widok { grid-column: 2; grid-row: 1 / 3; }
.cloud-widok .okno { margin: 0; }
.cloud-widok .okno img { width: 100%; }
.sledzenie { position: relative; width: min(600px, 92%); margin: -92px 0 0 auto; padding: 16px 18px; }
.cloud-widok .podpis { text-align: left; }
.cloud-plany .plany { margin-top: 0; }
.etapy { position: relative; display: grid; grid-template-columns: repeat(6, auto); gap: 6px; margin: 16px 0 6px; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.2; }
.etapy li { padding-top: 16px; border-top: 3px solid var(--atrament); }
.etapy .teraz { border-top-color: var(--dach); font-weight: 600; }
.etapy .dalej { border-top-color: var(--linia); color: var(--szary); }
.plany { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.plany .karta { padding: 16px 18px; font-size: 15px; }
.plany h3 { font-size: 30px; }
.plany ul { margin: 8px 0 0; padding: 0; list-style: none; }
.plany li { padding-block: 6px; border-top: 1px solid var(--linia); line-height: 1.3; }
.drobne { margin: 14px 0 0; color: var(--szary); font-size: 14px; }

/* Compatibility and questions */
.dwa { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 84px); align-items: start; }
.tabelka { margin-top: 22px; }
table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px; }
th:first-child { width: 31%; }
.krotko { display: none; }
.niewidoczne { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
th { padding: 0 4px 8px 0; border-bottom: 1px solid var(--atrament); font: 500 12.5px/1.2 var(--pismo); text-align: left; }
td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--linia); }
td:first-child { font: 400 23px/1.05 var(--display); }
.legenda { margin: 10px 0 0; color: var(--szary); font-size: 14px; }
details { padding-block: 10px; border-top: 1px solid var(--linia); }
details:first-of-type { margin-top: 22px; border-top-color: var(--atrament); }
summary { min-height: 30px; font: 400 24px/1.2 var(--display); cursor: pointer; }
details p { margin: 6px 0 4px; color: var(--szary); }
.legenda a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.przygotuj { margin: 8px 0 4px; }
.przygotuj div { padding-block: 7px; border-top: 1px solid var(--linia); }
.przygotuj dt { font-weight: 600; }
.przygotuj dd { margin: 0; color: var(--szary); font-size: 15.5px; line-height: 1.4; }

/* The night: filament run out into light trails. */
.stopka { background: var(--noc) url(a/gwiazdy.webp); color: var(--krem); }
.stopka .etykieta { color: var(--krem-cichy); }
.wydanie { margin: 12px 0 0; color: var(--krem-cichy); font: 400 14px/1.45 var(--pismo); }
.wydanie a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pobierz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 26px; }
.pobierz > div { display: flex; flex-direction: column; align-items: flex-start; }
.pobierz h3 { margin-bottom: 6px; }
.pobierz p { margin: 0 0 16px; color: var(--krem-cichy); font-size: 15.5px; line-height: 1.42; }
.przycisk { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: auto; padding: 0 18px; border: 1px solid var(--linia-noc); border-radius: 12px; font-weight: 500; }
.przycisk:hover { background: var(--krem); color: var(--noc); text-decoration: none; }
.przycisk i { font-style: normal; }
.tworca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(28px, 4vw, 56px); margin-top: clamp(34px, 4vw, 48px); padding-top: 26px; border-top: 1px solid var(--linia-noc); }
.tworca .etykieta { grid-column: 1 / -1; }
.tworca p:not(.etykieta) { margin: 0; color: var(--krem-cichy); font-size: 16px; line-height: 1.45; }
.tworca .teza:not(.etykieta) { color: var(--krem); font: 400 clamp(24px, 2.2vw, 30px)/1.16 var(--display); }
.kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 34px 28px; margin-top: clamp(44px, 6vw, 64px); padding-top: 34px; border-top: 1px solid var(--linia-noc); }
.kolumny ul { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15.5px; }
.kolumny .etykieta::after { display: none; }
.kolumny .znak { font-size: 38px; }
.kolumny p { color: var(--krem-cichy); }
.kreski { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--krem-cichy); font-size: 14px; }
.koniec { position: relative; z-index: 1; margin-block: clamp(56px, 7vw, 92px) 0; font-size: clamp(46px, 7vw, 104px); line-height: 1; letter-spacing: -.02em; text-align: center; }
.trasa { position: relative; overflow: hidden; margin-top: clamp(-90px, -5vw, -24px); }
.tor { position: relative; width: max(100%, 860px); margin-left: calc((100% - max(100%, 860px)) * .52); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 13%); mask-image: linear-gradient(to bottom, transparent, #000 13%); }
.tor img { width: 100%; max-width: none; }
.tor { --x: 41%; --z: 28.8%; --w: 3%; --y: 45%; }
.trasa .mowi { cursor: default; transform: translateX(-84%); }
.trasa .mowi::after { left: 84%; }

/* Very wide screens: keep the whole printer inside the sky. */
@media (min-width: 1921px) {
  .niebo { height: min(56.25vw, 1400px); }
}
/* Tablets: words in a narrower column, the printer eased right. */
@media (min-width: 721px) and (max-width: 1180px) {
  .obraz { right: min(0px, 51vw - 548px); }
  .tytul > * { max-width: max(44vw, 330px); }
  .obraz .ludzik, .obraz .mowi { display: none; }
  .stan { bottom: 8%; }
}
/* Between phone and desktop the card keeps only the three printers. */
@media (min-width: 721px) and (max-width: 1280px) {
  .stan .naglowek, .stan .plik, .stan .dane, .stan .szpule { display: none; }
  .stan .naglowek + .rzad { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .stan { right: 39.5%; width: 236px; }
}
@media (min-width: 721px) and (max-width: 820px) {
  .stan { display: none; }
}
/* The notes need the margins beside the window; the window itself carries the same facts. */
@media (max-width: 1399px) {
  .notka { display: none; }
  .podium .okno { width: 100%; }
}
@media (max-width: 1300px) {
  .menu-guzik { display: inline-flex; }
  .gora nav { position: absolute; left: var(--gut); top: calc(100% + 10px); z-index: 4; display: none; gap: 0; box-sizing: border-box; width: min(360px, 100% - 2 * var(--gut)); max-height: calc(100svh - 110px); overflow-y: auto; padding: 8px; border-radius: 14px; background: var(--kartka); color: var(--atrament); box-shadow: 0 20px 44px -18px rgba(12, 36, 72, .6), 0 0 0 1px var(--linia); font-size: 16px; white-space: normal; }
  .gora nav.otwarte { display: grid; }
  .gora nav > a, .gora summary, .waskie a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; }
  .gora summary { justify-content: space-between; }
  .lista, .lista.dwie { position: static; width: auto; grid-template-columns: minmax(0, 1fr); padding: 0 0 6px 10px; background: none; box-shadow: none; }
  .lista small { display: none; }
}
@media (max-width: 960px) {
  .jezyk, .logowanie { display: none; }
  .waskie { display: grid; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--linia); }
}
@media (max-width: 1080px) {
  .podium { padding-top: 0; }
  .luki { display: none; }
  .apka-flota .k-temp small { display: none; }
  .zakladki { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; box-sizing: border-box; }
  .zakladki button { padding-inline: 4px; }
  .temat { min-height: 0; }
}
@media (max-width: 860px) {
  .okienka, .cloud, .dwa, .pobierz, .tworca { grid-template-columns: minmax(0, 1fr); }
  .cloud { grid-template-rows: none; }
  .cloud-widok { grid-column: auto; grid-row: auto; }
  .sledzenie { width: auto; margin: 12px 0 0; }
  .fakty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plansze { grid-template-columns: minmax(0, 1fr); }
  .plansze img { max-height: 340px; margin-inline: auto; }
  .linie li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .etapy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  th .dlugo { display: none; }
  th .krotko { display: inline; }
}
@media (max-width: 720px) {
  .niebo { height: calc(clamp(820px, 226vw, 1000px) + 86px); background: linear-gradient(#2f6ca8 50%, var(--papier) 50%); }
  .obraz { left: auto; right: 0; bottom: 86px; width: max(100%, clamp(820px, 226vw, 1000px) * .4426); transform: none; }
  .obraz .mowi { max-width: 92px; padding: 6px 8px; font-size: 12.5px; white-space: normal; text-align: left; }
  .obraz { --x: 10%; --z: 11%; --w: 11%; --y: 22.5%; }
  .obraz .mowi { left: 3%; transform: none; }
  .obraz .mowi::after { left: 30%; }
  .tytul { text-align: center; }
  .tytul .bez { font-size: 14px; }
  .tytul > *, .tytul .pod { max-width: none; margin-inline: auto; }
  .tytul .akcje { justify-content: center; }
  .stan { right: 50vw; bottom: -78px; width: min(320px, 88vw); padding: 10px 14px; transform: translateX(50%); }
  .stan .naglowek, .stan .plik, .stan .dane, .stan .szpule { display: none; }
  .stan .rzad { margin-top: 6px; padding-top: 6px; }
  .stan .naglowek + .rzad { margin-top: 0; padding-top: 0; border-top: 0; }
  .stan .pasek { margin-top: 5px; }
  .dziala { margin-top: 18px; }
  .dziala li:first-child { flex-basis: 100%; text-align: center; }
  .gora { grid-template-columns: auto auto auto; justify-content: space-between; padding-top: 18px; }
  .gora .znak { font-size: 40px; }
  .prawa .github { display: none; }
  .tytul { padding-top: 26px; }
  .plany { grid-template-columns: minmax(0, 1fr); }
  .apka { padding: 8px; }
  .apka-flota { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .swiatla, .k-chip, .k-czas, .k-temp, .k-sloty { display: none; }
  .k-zad span { font-size: 11.5px; }
  .k-zad strong { font-size: 17px; }
  .apka-karta { padding: 8px 9px 9px; }
  .k-pasek { margin-top: 4px; }
  .d-siatka { grid-template-columns: minmax(0, 1fr); }
  .kreski { justify-content: flex-start; }
  .trasa .mowi { max-width: 116px; font-size: 13px; white-space: normal; text-align: center; transform: translateX(-50%); }
  .trasa .mowi::after { left: 50%; }
}
@media (max-width: 480px) {
  h1 { font-size: 11.4vw; }
  .zakladki button { padding-inline: 2px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  .gora .znak { font-size: 34px; }
  .gora .guzik { padding-inline: 14px; }
  .tytul { padding-top: 14px; }
  .tytul .pod { margin-top: 12px; }
  .tytul .akcje { gap: 8px; margin-top: 18px; }
  .tytul .bez { font-size: 13px; }
  .obraz .mowi { display: none; }
}