@font-face {
  font-family: 'Ladislav';
  src: url('../fonts/Ladislav-Bold.woff2') format('woff2'), url('../fonts/Ladislav-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

/* Colour carries meaning: speed is the circle, availability the square, crimson an outage (BARVY.md, light).
   Speed (#D9480F) passes contrast only for large type; small text in its colour uses --speed-dark. */
:root {
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --surface-2: #F2EEE7;
  --line: #E5E0D7;
  --muted: #6F6C66;
  --ink: #141414;
  --speed: #D9480F;
  --speed-dark: #A8360A;
  --avail: #0E5A6B;
  --down: #9B1146;
  --ph: #A9A49C;
  --ff: 'ss01';
  --gut: 48px;
  --head: 104px;
}
@media (max-width: 760px) { :root { --gut: 24px; --head: 80px; } }

* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { overflow-x: clip; margin: 0; background: var(--bg); color: var(--ink); font-family: Ladislav, system-ui, sans-serif; font-weight: 700; font-feature-settings: var(--ff); }
p, h1, h2, h3, ul, figure { margin: 0; padding: 0; font-weight: 700; }
.speed { color: var(--speed); }
.speed-t { color: var(--speed-dark); font-feature-settings: var(--ff), 'tnum'; }
.avail { color: var(--avail); }
.down { color: var(--down); }
.muted { color: var(--muted); }
/* The page's column: 1200 wide on the desktop, the window less its gutters on smaller screens. */
.wrap { width: min(1200px, 100% - 2 * var(--gut)); margin-inline: auto; }

/* Header: only the wordmark, large enough to show its dots, in the free top left corner; no rule, no menu. */
.top { position: relative; z-index: 5; height: var(--head); }
.top .wrap { position: relative; height: 100%; display: flex; align-items: center; }
/* The wordmark: Ladislav with dotless i, its dots are the speed circle and the availability square (stem-wide, just
   above the x-height). On hover they slide together and meet over the g. The calm, single-storey g (ss03). */
.wm { white-space: nowrap; font-feature-settings: 'ss01', 'ss03'; }
.wm .li { position: relative; }
.wm .dot { position: absolute; left: calc(50% - .075em); bottom: .84em; width: .15em; height: .15em; background: var(--avail); transition: left .45s cubic-bezier(.3, .7, .2, 1); }
.wm .dot.c { border-radius: 50%; background: var(--speed); }
.logo { font-size: 58px; line-height: 1; color: var(--ink); text-decoration: none; transform: translateY(.04em); }
.logo:hover .dot.c, .logo:focus-visible .dot.c { left: calc(50% + .192em); }
.logo:hover .dot.s, .logo:focus-visible .dot.s { left: calc(50% - .342em); }
.logo:focus-visible { outline: 3px solid var(--avail); outline-offset: 8px; }
@media (max-width: 760px) {
  .logo { font-size: 42px; }
}

/* --- Figures: a stage in the story's design space, scaled and cropped into the box (fig.js). ------------------- */
.fig { position: relative; overflow: hidden; }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; isolation: isolate; }
:root:not(.ready) .stage { visibility: hidden; }
/* The first load: the film and the wordmark wait for the font and the film's layout, then come in softly at once
   (no glimpse of the bare heading or of the shapes before they are in place). */
:root:not(.ready) .film-sec, :root:not(.ready) .top .logo { opacity: 0; }
.film-sec, .top .logo { transition: opacity .45s ease; }
.blk { position: absolute; z-index: 1; }
.maps { position: absolute; inset: 0; }
.map { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; }
.shapes { position: absolute; }
.label { position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; opacity: 0; }
.hour, .axis { font-size: 15px; color: var(--muted); font-feature-settings: var(--ff), 'tnum'; }
.axis.down { color: var(--down); }
.page-name { font-size: 20px; }
.page-time, .ov-time { font-size: 20px; color: var(--speed-dark); font-feature-settings: var(--ff), 'tnum'; }
.ov-time { font-size: 16px; }
.map-label { font-size: 18px; }
.probe-name { font-size: 16px; }
.result-name { color: var(--muted); }
.probe-kpi { font-size: 44px; line-height: 1; color: var(--avail); font-feature-settings: var(--ff), 'tnum'; }
.span { font-size: 16px; font-feature-settings: var(--ff), 'tnum'; }
/* The stamp pressed onto the middle of the framed outage: an ink ring with a fine inner ring and the wordmark; the
   paper shows through it a little, as under a rubber stamp. */
.seal { z-index: 1; display: grid; place-items: center; width: 96px; height: 96px; border: 2.5px solid var(--ink); border-radius: 50%; background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--ink); }
.seal::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--ink); border-radius: 50%; }
.seal .wm { font-size: 24px; line-height: 1; padding-bottom: .1em; }
.ov-name { font-size: 16px; }
.ico { display: inline-block; flex: none; width: 12px; height: 12px; background: var(--avail); }
.ico-c { border-radius: 50%; background: var(--speed); }

.fig[data-mode='tall'] .hour, .fig[data-mode='tall'] .map-label.l1, .fig[data-mode='tall'] .map-label.l2 { display: none; }
.fig[data-mode='tall'] .axis { font-size: 11px; }
.fig[data-mode='tall'] .page-name, .fig[data-mode='tall'] .page-time { font-size: 13px; }
/* On the phone a page's time follows its name. */
.fig[data-mode='tall'] .page-name::after { content: '\00a0\00a0' attr(data-time); color: var(--speed-dark); font-feature-settings: var(--ff), 'tnum'; }
.fig[data-mode='tall'] .map-label { font-size: 12px; }
.fig[data-mode='tall'] .probe-name { font-size: 10px; }
.fig[data-mode='tall'] .probe-kpi { font-size: 22px; }
.fig[data-mode='tall'] .span { font-size: 10px; }
.fig[data-mode='tall'] .seal { width: 60px; height: 60px; border-width: 2px; }
.fig[data-mode='tall'] .seal::before { inset: 3px; }
.fig[data-mode='tall'] .seal .wm { font-size: 15px; }
.fig[data-mode='tall'] .ov-name, .fig[data-mode='tall'] .ov-time { font-size: 11px; }

/* --- The film: the window under the header, its design placed by film.js. ----------------------------------------- */
.film-sec { position: relative; }
.film { position: relative; overflow: hidden; height: calc(100vh - var(--head)); height: calc(100lvh - var(--head)); min-height: 520px; }
/* The smallest viewport (phone toolbars shown): the film's design is centred in it, the rest is background. */
.vh-probe { position: fixed; top: 0; width: 0; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }
.film .claim-blk { left: 0; top: 0; width: 640px; transform-origin: 0 0; }
.claim { font-size: 80px; line-height: .98; }
.claim .ln { display: block; width: max-content; }
.claim .q2 { margin-top: .32em; }
.film[data-mode='tall'] .claim-blk { width: 342px; }
.film[data-mode='tall'] .claim { font-size: 48px; }
.film-bg { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; opacity: 0; pointer-events: none; }
.film .map-label { font-size: 17px; }
.film .web-name { font-size: 14px; color: var(--muted); }
.film[data-mode='tall'] .map-label { font-size: 11px; }
.film[data-mode='tall'] .web-name, .film[data-mode='tall'] .hour { font-size: 10px; }
/* The log: a quiet list under the heading, the time in its colour and the sentence; lines open one under another
   (film.js), the newest in ink, the older ones step back. */
.logw { opacity: 0; }
.dom-l { left: 0; top: 0; opacity: 0; font-size: 16px; color: var(--ph); white-space: nowrap; }
.film[data-mode='tall'] .dom-l { font-size: 12px; }
.logw .ev { display: grid; grid-template-columns: 3em 1fr; height: 0; overflow: hidden; opacity: 0; font-size: 18px; line-height: 1.4; }
.logw .ev > * { padding: 3px 0; }
.logw .ev.old { color: var(--muted); }
.logw .ph { display: grid; }
.logw .ph > span { grid-area: 1 / 1; }
/* The log types its sentences: the rest of a sentence holds its place unseen, a caret stands where the typing is. */
.tw-r { visibility: hidden; }
.caret { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: baseline; }
.caret::before { content: ''; position: absolute; left: 1px; bottom: -.12em; width: 2px; height: 1.05em; background: currentColor; opacity: 0; }
.caret.on::before { opacity: 1; }
/* The field, in the rounds after the first, when its time comes: a ring goes out from it and the arrow nudges on. */
.field.hey .row { animation: hey 1.8s ease-out; }
.field.hey .go svg { animation: go 1.8s ease-in-out; }
@keyframes hey { 0% { border-color: var(--line); box-shadow: 0 0 0 0 rgba(14, 90, 107, .4); } 15% { border-color: var(--avail); } 60% { box-shadow: 0 0 0 16px rgba(14, 90, 107, 0); } 80% { border-color: var(--avail); } 100% { border-color: var(--line); box-shadow: 0 0 0 0 rgba(14, 90, 107, 0); } }
@keyframes go { 0%, 100% { transform: none; } 25%, 55% { transform: translateX(5px); } 40% { transform: translateX(0); } }
.logw .ev.old .tm { opacity: .75; }
.film[data-mode='tall'] .logw .ev { font-size: 13px; }
.film[data-mode='tall'] .logw .ev > * { padding: 2px 0; }
.tm { font-feature-settings: var(--ff), 'tnum'; }
/* The answers: the statement level with its mark, what it costs under it, muted. */
.ans { left: 0; top: 0; opacity: 0; }
.a-main { display: block; font-size: 30px; line-height: 1.2; white-space: nowrap; }
.a-sub { display: block; margin-top: 6px; font-size: 18px; line-height: 1.35; color: var(--muted); }
.film[data-mode='tall'] .a-main { font-size: 20px; white-space: normal; }
.film[data-mode='tall'] .a-sub { margin-top: 3px; font-size: 13px; }
.film .field { opacity: 0; }
.film[data-mode='tall'] .ask { margin-bottom: 4px; font-size: 20px; }
.film[data-mode='tall'] .field input { height: 40px; font-size: 18px; }
.film[data-mode='tall'] .field .row { padding: 4px 4px 4px 18px; }
.film[data-mode='tall'] .ask { padding-left: 18px; }
.film[data-mode='tall'] .field .row { gap: 12px; }
.film[data-mode='tall'] .field .go { width: 44px; height: 44px; }
.film[data-mode='tall'] .field .go svg { width: 26px; height: 26px; }
/* The way on to the text, right under the answers: the question in ink and a bare arrow that nudges down now and
   then (the field's button keeps the ring). */
.more { display: flex; align-items: center; gap: 10px; padding: 4px 0; color: var(--ink); font-size: 26px; line-height: 1.2; text-decoration: none; }
.more svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: nudge 2s ease-in-out infinite; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.more:focus-visible { outline: 3px solid var(--avail); outline-offset: 4px; }
.film[data-mode='tall'] .more { gap: 6px; font-size: 17px; }
.film[data-mode='tall'] .more svg { width: 20px; height: 20px; }
@keyframes nudge { 0%, 50%, 100% { transform: none; } 70% { transform: translateY(5px); } 85% { transform: translateY(1px); } }
@media (prefers-reduced-motion: reduce) { .more svg { animation: none; } }

/* The ring: the field's button, filled, its arrow as thick as the ring. */
.go { display: grid; place-items: center; flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--bg); cursor: pointer; transition: transform .15s; }
.go:active { transform: scale(.94); }
.go:focus-visible { outline: 4px solid var(--avail); outline-offset: 4px; }
.go svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* The field: the question above; a white pill with a fine frame, the round button inside it on the right, round as
   the circles. */
.ask { display: block; margin-bottom: 14px; padding-left: 28px; font-size: 32px; line-height: 1; }
.field .row { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 28px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); transition: border-color .15s; }
.field .row:focus-within { border-color: var(--avail); }
.field input { flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 24px; font-feature-settings: var(--ff); outline: none; }
.field input::placeholder { color: var(--ph); opacity: 1; }

/* Why it matters: the heading travels in from the film's link (page.js .why-t); two grids of dots (calc.js), the
   grid left, what it costs right; on the phone the figure over its grid. The outage's dot is a square, the speed's
   a circle, as everywhere. */
.why-t { position: absolute; left: 0; top: 0; z-index: 4; display: none; color: var(--ink); line-height: .98; white-space: nowrap; text-decoration: none; transform-origin: 0 0; }
.why-on .why-t { display: block; }
.why-on .more.travels, .why-on .why { color: transparent; }
.why-on .more.travels svg { visibility: hidden; }
.why-t svg { display: inline-block; width: .6em; height: 1em; vertical-align: -.17em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.why-t.rest svg { animation: nudge 2s ease-in-out infinite; }
.mx > * { min-width: 0; }
.mx { display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 1fr); gap: 40px; align-items: start; margin-top: 48px; }
/* The turnover as a volume: bars growing to the right (the chosen ones in ink) as wide as the grid, the amount right
   of them, the label under; the range input lies out of sight for the keys. */
.vol { position: relative; margin: 0 96px 28px 0; }
.vol-r { display: flex; align-items: flex-end; gap: 16px; }
.vol-b { flex: 1; display: flex; align-items: flex-end; gap: 4px; height: 44px; cursor: pointer; touch-action: pan-y; }
.vol-b i { flex: 1; height: 100%; border-radius: 2px; background: var(--line); transition: background .1s; }
.vol-b i.on { background: var(--ink); }
.vol-o { flex: none; display: grid; gap: 4px; width: 120px; }
.vol-o output { font-size: 22px; line-height: 1; white-space: nowrap; font-feature-settings: var(--ff), 'tnum'; }
.vol-l { font-size: 15px; line-height: 1; color: var(--muted); }
.vol-i { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.vol:has(.vol-i:focus-visible) .vol-b { outline: 3px solid var(--avail); outline-offset: 6px; }
/* The grid, with room kept right of it and under it for the two figures, so nothing moves. */
.mx-w { position: relative; padding: 0 232px 96px 0; }
.mx-c { position: relative; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.mx-c canvas { display: block; width: 100%; height: 100%; }
.mx-h { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.mx-h:active { cursor: grabbing; }
.mx-h i { width: 24px; height: 24px; border-radius: 30%; background: var(--ink); box-shadow: 0 0 0 4px var(--bg), 0 3px 12px rgba(0, 0, 0, .25); }
.mx-h:focus-visible { outline: none; }
.mx-h:focus-visible i { outline: 3px solid var(--ink); outline-offset: 5px; }
/* Showing it moves (calc.js): ringed and walking, then breathing, with a hint above it until it is taken. */
.mx-h.demo { transition: transform .2s ease-in-out; }
.mx-h.demo i { outline: 3px solid var(--ink); outline-offset: 5px; }
.mx-h.idle i { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 60%, 100% { outline: 3px solid rgba(20, 20, 20, 0); outline-offset: 2px; } 25% { outline: 3px solid var(--ink); outline-offset: 6px; } }
.mx-tip { position: absolute; left: 0; top: 0; z-index: 1; margin: 0; pointer-events: none; opacity: 0; transition: opacity .3s, transform .2s ease-in-out; }
.mx-tip { padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 15px; line-height: 1.2; white-space: nowrap; translate: -50% calc(-100% - 30px); }
.mx-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
.mx-tip.on { opacity: 1; }
/* Zkuste si to spočítat.: underlined in the speed's colour as the dot starts its walk. */
.try { background: linear-gradient(var(--speed), var(--speed)) 0 100% / 0 3px no-repeat; transition: background-size .9s ease-out .3s; }
.try.on { background-size: 100% 3px; }
.mx-lx, .mx-ly { position: absolute; left: 0; top: 0; display: grid; justify-items: start; white-space: nowrap; pointer-events: none; font-feature-settings: var(--ff), 'tnum'; }
.mx-lx { grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; align-items: end; }
.mx-lx b, .mx-ly b { font-size: 44px; line-height: 1; }
.mx-lx b { grid-row: 1 / 3; align-self: center; }
.mx-lx span { align-self: end; }
.mx-lx em { align-self: start; }
.mx-lx b { color: var(--avail); }
.mx-ly b { color: var(--speed); }
.mx-lx span, .mx-ly span { font-size: 15px; color: var(--muted); }
.mx-lx span { margin-top: 0; }
.mx-lx em, .mx-ly em { margin-top: 4px; font-size: 17px; font-style: normal; }
.mx-ly em { margin-top: 0; }
/* The brackets: under the grid as long as the hours, beside it as tall as the seconds. */
.mx-bx, .mx-by { position: absolute; left: 0; top: 0; box-sizing: border-box; pointer-events: none; }
.mx-bx { height: 9px; border: 2px solid var(--avail); border-top: 0; }
.mx-by { width: 9px; border: 2px solid var(--speed); border-left: 0; }
/* Beside: the sum, whom it hits and what it is in percent, the assumptions. */
.mx-r { padding-top: 96px; }
.mx-v { margin-top: 0; }
.mx-v b { display: block; color: var(--down); font-size: clamp(44px, 4.2vw, 72px); line-height: 1; white-space: nowrap; font-feature-settings: var(--ff), 'tnum'; }
.mx-v span { display: block; margin-top: 8px; font-size: 18px; color: var(--muted); }
.mx-v .mx-vk { margin: 0 0 6px; font-size: 20px; color: var(--ink); }
.mx-e { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; cursor: pointer; }
.mx-e:hover, .mx-e[aria-expanded='true'] { color: var(--ink); }
.mx-p { display: grid; gap: 18px; margin-top: 36px; }
.mx-p > div { position: relative; padding-left: 24px; }
.mx-p > div::before { content: ''; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; background: var(--avail); }
.mx-p .mx-ps::before { border-radius: 50%; background: var(--speed); }
.mx-p dt { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.3; white-space: nowrap; font-feature-settings: var(--ff), 'tnum'; }
.mx-p dd { margin: 2px 0 0; font-size: 16px; color: var(--muted); font-feature-settings: var(--ff), 'tnum'; }
/* The assumptions: a tinted box under the figures; on the phone a sheet from the bottom over a dimmed page. */
.mx-a { margin-top: 28px; padding: 20px 22px 22px; border-radius: 18px; background: var(--surface-2); }
.mx-a[hidden], .mx-bd[hidden] { display: none; }
.mx-bd { display: none; }
.mx-ah { font-size: 17px; }
.mx-as { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.mx-ai { display: grid; gap: 10px; margin-top: 16px; font-size: 16px; }
.mx-ai label { display: grid; grid-template-columns: 1fr 7.5em; align-items: center; gap: 12px; color: var(--muted); }
.mx-ai span { display: grid; grid-template-columns: 1fr 1.6em; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; }
.mx-ai input { width: 100%; box-sizing: border-box; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; text-align: right; font-feature-settings: var(--ff), 'tnum'; }
.mx-done { display: none; }
.mx-ai input:focus { outline: none; border-color: var(--avail); }
.mx-ai input.bad { border-color: var(--down); color: var(--down); }

/* The way on from the calculator, as from the film; on the desktop the part fills the window, so one theme at a
   time. */
.more-in { width: max-content; margin-top: 56px; }
/* The way on stands right under its part; each part is at least a window tall, so the next one never shows while it
   is read, however tall the window; the link travels down the room left and becomes the next heading (page.js). */
.read > section:not(.end) { min-height: calc(100vh - 40px); min-height: calc(100svh - 40px); margin-bottom: 128px; }
@media (min-width: 761px) {
  .read .more-in { margin-top: 48px; }
}
/* How we measure: one picture (measure.js), the names left, the typical time right, the clock over it; the key. */
.ms { position: relative; margin-top: 20px; }
/* The places as tabs over the picture. */
.ms-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.ms-tabs button { padding: 7px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 16px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.ms-tabs button:hover { color: var(--ink); }
.ms-tabs button[aria-selected='true'] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.ms-tabs button:focus-visible { outline: 3px solid var(--avail); outline-offset: 3px; }
.ms canvas { display: block; }
.ms-l { position: absolute; inset: 0; pointer-events: none; }
.ms-n, .ms-t { position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; font-feature-settings: var(--ff), 'tnum'; }
.ms-n { font-size: 17px; }
.ms-t { font-size: 17px; color: var(--speed-dark); }
.ms-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 28px; list-style: none; font-size: 16px; line-height: 1.4; color: var(--muted); }
.ms-k li { position: relative; padding-left: 28px; }
.ms-k i { position: absolute; left: 0; top: .2em; width: 16px; height: 16px; }
.ms-k .k-c { border-radius: 50%; background: var(--speed); }
.ms-k .k-s { width: 11px; height: 11px; top: .35em; left: 2px; background: var(--down); }
.ms-k .k-r { width: 11px; height: 11px; top: .35em; left: 2px; box-sizing: border-box; border: 1.5px solid var(--down); }

/* What Origin brings: the points left, the open one's text and picture right; on the phone each opens under itself. */
.pr { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 72px; margin-top: 44px; list-style: none; }
.pr > li { display: contents; }
.pr-b { grid-column: 1; display: flex; align-items: center; gap: 14px; padding: 16px 0; border: 0; border-bottom: 1.5px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: 24px; line-height: 1.15; text-align: left; cursor: pointer; transition: color .2s; }
.pr-b:hover, .pr-b[aria-expanded='true'] { color: var(--ink); }
.pr-b:focus-visible { outline: 3px solid var(--avail); outline-offset: 4px; }
.pr-b .ico { width: 13px; height: 13px; }
.pr-b .ico + .ico { margin-left: -8px; mix-blend-mode: multiply; }
.pr-p { grid-column: 2; grid-row: 1 / span 4; align-self: start; padding-top: 17px; }
.pr-p[hidden] { display: none; }
.pr-p p { max-width: 34em; font-size: 20px; line-height: 1.4; color: var(--muted); }
.pr-c { display: block; width: 100%; margin-top: 28px; }
/* All the points one under another (lite): each its heading and text left, its picture right; narrower, the picture
   under the text. */
.pr-all { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 88px; margin-top: 56px; }
.pr-all > li { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 72px; align-items: start; }
.pr-all .pr-b { grid-column: 1; padding: 0; border: 0; color: var(--ink); font-size: 28px; cursor: auto; }
.pr-all .pr-b .ico { width: 15px; height: 15px; }
.pr-all .pr-p { display: contents; }
.pr-all .pr-p p { grid-column: 1; margin-top: 16px; }
.pr-all .pr-c { grid-column: 2; grid-row: 1 / span 2; margin-top: 4px; }
@media (max-width: 980px) {
  .pr-all > li { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .pr-all .pr-c { grid-column: 1; grid-row: auto; margin-top: 24px; }
}
@media (max-width: 760px) {
  .pr-all { row-gap: 56px; margin-top: 32px; }
  .pr-all .pr-b { font-size: 22px; padding: 0; }
  .pr-all .pr-p p { margin-top: 10px; }
  .pr-all .pr-c { margin-top: 18px; }
}
/* What it costs: three promises side by side. */
.zr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 48px; list-style: none; }
.zr .ico { width: 14px; height: 14px; }
.zr h3 { margin-top: 14px; font-size: 26px; line-height: 1.15; }
.zr p { margin-top: 8px; font-size: 19px; line-height: 1.4; color: var(--muted); }
/* Whose webs we watch: one row of logos in one dark colour; where it does not fit it runs by, fading at its ends. */
.refs { display: flex; align-items: center; gap: 36px; margin-top: 56px; }
.refs-h { flex: none; font-size: 15px; color: var(--muted); }
.refs-v { flex: 1; min-width: 0; overflow: hidden; }
.refs-t { display: flex; align-items: center; gap: 48px; width: max-content; list-style: none; }
.refs-t .dup { display: none; }
.refs img { display: block; width: auto; height: 26px; opacity: .8; }
.refs .r-hudy { height: 36px; margin: -5px 0; }
.refs .r-mkluzkoviny { height: 17px; }
.refs .r-sanitino { height: 15px; }
.run .refs-v { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.run .refs-t .dup { display: block; }
.run .refs-t { animation: refs 28s linear infinite; }
@keyframes refs { to { transform: translateX(calc(-50% - 24px)); } }
@media (prefers-reduced-motion: reduce) { .run .refs-t { animation: none; } }
/* The end's picture: the first measurement, a row per place: name, the run and the circle, the time, the square. */
.first { padding: 24px 26px 22px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface); }
.first-h { font-size: 17px; color: var(--muted); }
.first-d { color: var(--ink); }
.first-h em { margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-style: normal; vertical-align: 2px; }
.first-r { display: grid; gap: 4px; margin-top: 16px; list-style: none; }
.first-r li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 3.4em 14px; align-items: center; gap: 12px; height: 40px; font-size: 16px; }
.f-v { text-align: right; color: var(--speed-dark); opacity: 0; transition: opacity .3s .8s; font-feature-settings: var(--ff), 'tnum'; }
.f-t { position: relative; height: 100%; }
.f-t::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--line); }
.f-run { position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ph); opacity: 0; }
.f-c { position: absolute; right: 0; top: 50%; width: var(--d); height: var(--d); margin-top: calc(var(--d) / -2); border-radius: 50%; background: var(--speed); transform: scale(0); transition: transform .45s cubic-bezier(.3, .7, .2, 1) .75s; }
.f-s { width: 12px; height: 12px; background: var(--avail); opacity: 0; transition: opacity .3s 1s; }
.on .f-run { animation: frun .8s cubic-bezier(.4, 0, .6, 1) forwards; }
.on .f-c { transform: scale(1); }
.on .f-v, .on .f-s { opacity: 1; }
@keyframes frun { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.first-n { margin-top: 14px; font-size: 15px; line-height: 1.4; color: var(--muted); }
/* The end: the steps after the field. */
.steps { margin-top: 36px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 20px; }
.steps li { position: relative; padding-left: 44px; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 16px; }
.steps h3 { font-size: 21px; line-height: 1.2; }
.steps p { margin-top: 4px; font-size: 17px; line-height: 1.4; color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- The read: one column of text, pictures where the text speaks of them, no rules between the parts. ---------- */
.read { overflow-x: clip; padding: 120px 0 40px; }
.read > section { position: relative; margin-bottom: 128px; }
/* A faint ground of dots behind each part, as the film's map: across the window, strongest on the right where a wide
   screen is empty, gone under the text. */
#cost::before, #jak::before { content: ''; position: absolute; z-index: -1; top: -80px; bottom: -80px; left: calc(50% - 50vw); width: 100vw; pointer-events: none;
  background-image: radial-gradient(circle, var(--line) 1.3px, transparent 1.8px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 88% 45%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 60% at 88% 45%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); }
#jak::before { -webkit-mask-image: radial-gradient(ellipse 50% 55% at 12% 60%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); mask-image: radial-gradient(ellipse 50% 55% at 12% 60%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); }
.read h2 { margin-bottom: 20px; font-size: 80px; line-height: .98; }
.txt { max-width: 720px; }
.txt p { margin-top: 20px; font-size: 24px; line-height: 1.4; }
.read figure { margin-top: 48px; }
.read figure + .txt { margin-top: 32px; }
.read figcaption { max-width: 720px; margin-top: 16px; font-size: 17px; line-height: 1.4; color: var(--muted); }
.cols { display: grid; grid-template-columns: minmax(0, 720px) 1fr; gap: 64px; align-items: end; }

/* What it is for: four uses, the mark says which side they come from (square availability, circle speed). */
.uses { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; list-style: none; }
.uses .ico { width: 14px; height: 14px; }
.uses h3 { margin-top: 14px; font-size: 26px; line-height: 1.15; }
.uses p { margin-top: 8px; font-size: 19px; line-height: 1.4; color: var(--muted); }

/* The end: the text and the field left; the overview card right (drawn by story.js) with its figures and titles. */
.end .cols { grid-template-columns: 440px 1fr; align-items: start; }
.end .cols { margin-top: 40px; }
.end .field { margin-top: 0; }
/* More: the address to write to, large. */
.end .mail { margin-top: 28px; font-size: 40px; line-height: 1.1; }
.end .mail a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .14em; }
.end .mail a:hover { color: var(--speed-dark); }
.end .mail a:focus-visible { outline: 3px solid var(--avail); outline-offset: 4px; }
@media (max-width: 760px) { .end .mail { margin-top: 20px; font-size: 30px; } }
.ov-card { position: absolute; left: 0; top: 0; z-index: 1; width: 1440px; height: 900px; opacity: 0; pointer-events: none; }
.ov-card > * { position: absolute; }
.dom { left: 680px; top: 156px; font-size: 28px; }
.kpi { top: 214px; }
.kpi.speed { left: 680px; color: var(--speed); }
.kpi.avail { left: 980px; color: var(--avail); }
.kpi-h { font-size: 18px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.kpi-v { margin-top: 8px; font-size: 84px; line-height: .9; font-feature-settings: var(--ff), 'tnum'; }
.ov-h { left: 680px; font-size: 16px; color: var(--muted); }
.ov-h.h-avail { top: 372px; }
.ov-h.h-speed { top: 560px; line-height: 1; }
.fig[data-mode='tall'] .ov-card { width: 390px; height: 720px; }
.fig[data-mode='tall'] .dom { left: 32px; top: 184px; font-size: 16px; }
.fig[data-mode='tall'] .kpi { top: 210px; }
.fig[data-mode='tall'] .kpi.speed { left: 32px; }
.fig[data-mode='tall'] .kpi.avail { left: 196px; }
.fig[data-mode='tall'] .kpi-h { font-size: 12px; gap: 6px; }
.fig[data-mode='tall'] .kpi-h .ico { width: 9px; height: 9px; }
.fig[data-mode='tall'] .kpi-v { margin-top: 4px; font-size: 34px; }
.fig[data-mode='tall'] .ov-h { left: 32px; font-size: 11px; }
.fig[data-mode='tall'] .ov-h.h-avail { top: 272px; }
.fig[data-mode='tall'] .ov-h.h-speed { top: 352px; }

.foot { padding: 32px 0 40px; font-size: 18px; color: var(--muted); }
.foot .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.foot a:hover { color: var(--speed-dark); }
.foot a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.foot .up { text-decoration: none; }
.foot .up:hover { text-decoration: underline; }
/* nehoupat.cz swings once the page has come to its end, hung from its top, slowing down. */
.swing { display: inline-block; transform-origin: 50% -0.6em; }
.swung .swing { animation: swing 2.2s cubic-bezier(.36, .07, .19, .97); }
@keyframes swing { 0% { transform: rotate(0); } 15% { transform: rotate(9deg); } 32% { transform: rotate(-7deg); } 50% { transform: rotate(4.5deg); } 67% { transform: rotate(-2.5deg); } 83% { transform: rotate(1deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .swung .swing { animation: none; } }

@media (max-width: 980px) {
  .mx { grid-template-columns: minmax(0, 760px); gap: 8px; }
  .mx-r { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 48px; padding-top: 0; }
  .mx-r .mx-a { grid-column: 1 / -1; max-width: 520px; }
  .mx-p { margin-top: 6px; }
}
@media (max-width: 1100px) {
  .mx { gap: 40px; }
  .cols, .end .cols { grid-template-columns: 1fr; gap: 40px; }
  .end .fig { max-width: 720px; }
}
@media (max-width: 760px) {
  .read { padding: 64px 0 24px; }
  .read > section { margin-bottom: 80px; }
  .read h2 { margin-bottom: 12px; font-size: min(46px, 11.6vw); line-height: .98; }
  /* The longer travelling heading on one line, as its link. */
  .read .why-l { font-size: min(46px, 8.6vw); }
  .txt p { margin-top: 14px; font-size: 18px; }
  .read figure { margin-top: 28px; }
  .read figure .fig { margin-inline: calc(-1 * var(--gut)); }
  .read figure + .txt { margin-top: 20px; }
  .read figcaption { font-size: 15px; }
  .cols, .end .cols { gap: 28px; }
  .mx { grid-template-columns: 1fr; gap: 8px; margin-top: 36px; }
  .ms { margin-top: 14px; }
  .ms-tabs { flex-wrap: nowrap; gap: 5px; margin-top: 20px; }
  .ms-tabs button { flex: none; padding: 4px 9px; font-size: 12px; }
  .ms-n, .ms-t { font-size: 13px; }
  .ms-k { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; font-size: 14px; }
  .ms-k li { padding-left: 24px; }
  .ms-k i { width: 14px; height: 14px; }
  .vol { margin: 0 0 14px; }
  .vol-b { height: 32px; }
  .vol-o { width: 84px; }
  .vol-o output { font-size: 16px; }
  .vol-l { font-size: 12px; }
  .mx-w { padding: 0 96px 62px 0; }
  .mx-h { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .mx-h i { width: 18px; height: 18px; box-shadow: 0 0 0 3px var(--bg), 0 2px 8px rgba(0, 0, 0, .25); }
  .mx-lx b, .mx-ly b { font-size: 24px; }
  .mx-lx span, .mx-ly span { font-size: 12px; }
  .mx-lx em, .mx-ly em { font-size: 14px; }
  .mx-ly span, .mx-ly em { white-space: normal; width: 6.2em; }
  .mx-r { display: block; padding-top: 0; }
  .mx-p { margin-top: 16px; }
  .mx-v { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; margin-top: 4px; }
  .mx-v b { grid-column: 2; justify-self: end; font-size: 52px; }
  .mx-v .mx-vk { grid-row: 1 / 3; align-self: center; margin: 0; font-size: 20px; }
  .mx-v span:last-child { grid-column: 2; justify-self: end; margin-top: 2px; font-size: 14px; text-align: right; }
  .mx-p { gap: 8px; margin-top: 12px; }
  .mx-p > div { padding: 0 20px 0 0; text-align: right; }
  .mx-p > div::before { left: auto; right: 0; width: 9px; height: 9px; }
  .mx-p dt { font-size: 15px; }
  .mx-p dd { font-size: 13px; }
  .mx-bd { position: fixed; inset: 0; z-index: 20; display: block; background: rgba(26, 24, 20, .35); }
  .mx-a { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; margin: 0; padding: 22px var(--gut) calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--bg); box-shadow: 0 -8px 30px rgba(0, 0, 0, .18); }
  .mx-as { font-size: 13px; }
  .mx-ai label { grid-template-columns: 1fr 7em; }
  .mx-done { display: block; width: 100%; margin-top: 20px; padding: 14px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: inherit; font-size: 17px; cursor: pointer; }
  .more-in { margin-top: 18px; gap: 6px; font-size: 17px; }
  .more-in svg { width: 20px; height: 20px; }
  .uses { margin-top: 28px; grid-template-columns: 1fr; gap: 28px; }
  .uses h3 { font-size: 21px; }
  .uses p { font-size: 17px; }
  .end .field { margin-top: 0; }
  .pr { grid-template-columns: 1fr; margin-top: 24px; }
  .pr-b { grid-column: auto; font-size: 19px; padding: 13px 0; }
  .pr-p { grid-column: auto; grid-row: auto; padding: 12px 0 20px; }
  .pr-p p { font-size: 16px; }
  .pr-c { margin-top: 16px; }
  .zr { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
  .refs { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 36px; }
  .refs img { height: 22px; }
  .refs .r-hudy { height: 30px; margin: -4px 0; }
  .refs .r-mkluzkoviny { height: 14px; }
  .refs .r-sanitino { height: 13px; }
  .first { padding: 18px 18px 16px; }
  .first-r li { grid-template-columns: 5.6em minmax(0, 1fr) 3.2em 12px; gap: 8px; height: 34px; font-size: 14px; }
  .zr h3 { margin-top: 8px; font-size: 21px; }
  .zr p { font-size: 16px; }
  .steps { margin-top: 24px; }
  .ask { font-size: 26px; margin-bottom: 10px; }
  .field input { height: 50px; font-size: 22px; }
  .field .row { gap: 14px; }
  .go { width: 52px; height: 52px; }
  .go svg { width: 30px; height: 30px; }
  .foot { font-size: 15px; }
}