/* SPDX-License-Identifier: GPL-3.0-or-later */
/* SPDX-FileCopyrightText: 2026 Lukas Hois-Zelinka */
/* All colours are custom properties. Three blocks define them: the light default, the dark theme
   for a dark system setting (unless the visitor chose light), and the dark theme chosen by the
   toggle. scripts/check-site.py computes the WCAG contrast of these pairs; keep the blocks in sync.
   --line is decorative only (hairlines around cards, no information), so it has no contrast pair.
   --accent-2 is the second stop of the button gradient (on-accent is checked on both stops).
   --glow is a translucent accent tint behind the hero picture and the closing section; the check
   composites it over --bg and --surface at full strength and tests all text colours on the result.
   --bar is the translucent header background (a solid --bg is the fallback without backdrop-filter). */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f2f4f8;
  --text: #14181f;
  --muted: #4a5360;
  --link: #0a559f;
  --accent: #0a559f;
  --on-accent: #ffffff;
  --border: #6b7480;
  --focus: #0a559f;
  --code-bg: #e8ecf2;
  --line: #d5dae2;
  --accent-2: #0d6bc4;
  --glow: rgba(10, 85, 159, 0.16);
  --bar: rgba(255, 255, 255, 0.86);
  /* Spacing scale: every gap, margin and padding below uses these steps (rem). */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3.5rem;
  --space-10: 5.5rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1319;
    --surface: #1a2029;
    --text: #e8ecf2;
    --muted: #aab3c0;
    --link: #8cc2fa;
    --accent: #8cc2fa;
    --on-accent: #0b1220;
    --border: #7c8796;
    --focus: #ffd166;
    --code-bg: #232b36;
    --line: #2b3440;
    --accent-2: #a9d2fc;
    --glow: rgba(140, 194, 250, 0.22);
    --bar: rgba(15, 19, 25, 0.86);
  }
}
:root[data-theme="dark"] {
  --bg: #0f1319;
  --surface: #1a2029;
  --text: #e8ecf2;
  --muted: #aab3c0;
  --link: #8cc2fa;
  --accent: #8cc2fa;
  --on-accent: #0b1220;
  --border: #7c8796;
  --focus: #ffd166;
  --code-bg: #232b36;
  --line: #2b3440;
  --accent-2: #a9d2fc;
  --glow: rgba(140, 194, 250, 0.22);
  --bar: rgba(15, 19, 25, 0.86);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.7 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 var(--space-4); }
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.25; font-weight: 600; }
h1 { font-size: clamp(1.85rem, 4.4vw, 2.75rem); margin: 0 0 var(--space-4); letter-spacing: -0.02em; line-height: 1.12; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 1.9rem); margin: 0 0 var(--space-6); }
h3 { font-size: 1.1rem; margin: 0 0 var(--space-1); }
p { margin: 0 0 var(--space-4); max-width: 64ch; }
code, kbd {
  font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}
pre {
  background: var(--code-bg);
  padding: var(--space-4) var(--space-4);
  border-radius: 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
  margin: 0 0 var(--space-4);
  font-size: 0.95rem;
  line-height: 1.6;
}
pre code { background: none; padding: 0; overflow-wrap: normal; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: var(--on-accent); padding: var(--space-2) var(--space-4); z-index: 10;
}
.skip:focus { left: 0; }

header.site {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.site { background: var(--bar); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
}
header.site .wrap {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2) var(--space-6); padding-top: var(--space-2); padding-bottom: var(--space-2); max-width: 76rem;
}
.brand { font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.brand img { width: 1.6rem; height: 1.6rem; }
nav.main { display: flex; flex-wrap: nowrap; gap: var(--space-1) var(--space-5); flex: 1 1 auto; min-width: 0; font-size: 0.95rem; white-space: nowrap; }
.tools { flex: none; }
@media (max-width: 66rem) { nav.main { display: none; } .brand { margin-right: auto; } }
nav.main a { color: var(--muted); padding: var(--space-1) 0; text-decoration: none; transition: color 160ms ease; }
nav.main a:hover { color: var(--text); text-decoration: underline; }
.tools { display: flex; align-items: center; gap: var(--space-2); }
/* Language selector: a details element (no JavaScript); the summary shows the current language. */
.langsel { position: relative; }
.langsel summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: 999px; font-size: 0.95rem; color: var(--text); cursor: pointer;
  transition: background-color 160ms ease;
}
.langsel summary::-webkit-details-marker { display: none; }
.langsel summary::after {
  content: ""; width: 0.4rem; height: 0.4rem; margin: 0 var(--space-1) 0.2rem 0.1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.langsel[open] summary::after { transform: rotate(-135deg); margin-bottom: -0.15rem; }
.langsel summary:hover, .langsel[open] summary { background: var(--surface); }
.flag { display: block; width: 1.5rem; height: 1rem; border-radius: 2px; flex: none; }
.lpanel {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); min-width: 100%; z-index: 30; padding: var(--space-1);
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 30px -14px rgba(8, 20, 40, 0.45);
}
.lpanel .lang {
  display: flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-3); border-radius: 8px;
  color: var(--text); text-decoration: none; white-space: nowrap; font-size: 0.95rem;
}
.lpanel .lang:hover { background: var(--surface); }
.theme-toggle {
  display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.5rem; padding: 0;
  background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  transition: background-color 160ms ease;
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { background: var(--surface); }
.theme-toggle[aria-pressed="true"] { background: var(--surface); }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }

/* Sections alternate between the page background and the surface colour; cards switch colour with them. */
section { padding: var(--space-9) 0; }
@media (min-width: 48rem) { section { padding: var(--space-10) 0; } }
section h2 { text-align: center; letter-spacing: -0.01em; font-weight: 700; }
section.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.alt .card, section.alt ol.steps li { background: var(--bg); border: 1px solid var(--line); }

/* Hero: text left, product picture right (below the buttons on phones). */
.hero {
  overflow-x: clip;
  padding: var(--space-7) 0 var(--space-8);
  background: radial-gradient(60rem 32rem at 78% 38%, var(--glow), transparent 70%);
}
@media (min-width: 60rem) { .hero { padding: var(--space-9) 0 var(--space-9); } }
.hero .wrap { max-width: 76rem; }
.hero-grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-8); } }
.hero-copy p { margin-left: 0; }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.pill {
  display: inline-block; padding: var(--space-1) var(--space-3); border-radius: 999px; font-size: 0.875rem; font-weight: 500; line-height: 1.6;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
}
.lead { font-size: 1.2rem; color: var(--muted); max-width: 32rem; }
.cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 var(--space-5); }
.note { color: var(--muted); font-size: 0.95rem; }
.hero .note { margin-bottom: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: var(--space-2) var(--space-6); border-radius: 999px;
  font-weight: 600; text-decoration: none; color: var(--on-accent); border: 2px solid var(--accent);
  background: var(--accent); background-image: linear-gradient(135deg, var(--accent-2), var(--accent));
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}
.btn.big { min-height: 3.25rem; padding: var(--space-3) var(--space-7); font-size: 1.1rem; }
.btn.small { min-height: 2.5rem; padding: var(--space-1) var(--space-4); font-size: 0.95rem; }
.btn.secondary { background: transparent; background-image: none; color: var(--link); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px var(--accent); text-decoration: none; }
.btn.secondary:hover { background: var(--surface); box-shadow: none; }
.btn:active { transform: translateY(0); box-shadow: none; }

.hero-visual { margin: 0; position: relative; isolation: isolate; padding: 0 0 var(--space-8); }
.hero-visual::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -8% -4%;
  background: radial-gradient(closest-side, var(--glow), transparent);
}
.stack { position: relative; perspective: 1800px; }
.stack img {
  height: auto; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(8, 20, 40, 0.45), 0 8px 20px -8px rgba(8, 20, 40, 0.3);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.stack .main { width: 100%; }
.stack .side { position: absolute; left: -4%; bottom: calc(-1 * var(--space-7)); width: 46%; }
@media (min-width: 60rem) {
  .stack .main { transform: rotateY(-6deg) rotateX(1.5deg); transform-origin: 70% 50%; }
  .stack .side { transform: rotateY(-6deg) translateZ(30px); transform-origin: 100% 50%; }
  .stack:hover .main, .stack:hover .side { transform: none; }
}
@media (max-width: 36rem) { .stack .side { left: 0; width: 50%; bottom: calc(-1 * var(--space-6)); } }
.shot-light { display: block; }
.shot-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-light { display: none; }
  :root:not([data-theme="light"]) .shot-dark { display: block; }
}
:root[data-theme="dark"] .shot-light { display: none; }
:root[data-theme="dark"] .shot-dark { display: block; }
:root[data-theme="light"] .shot-light { display: block; }
:root[data-theme="light"] .shot-dark { display: none; }
figcaption { color: var(--muted); font-size: 0.9rem; line-height: 1.5; text-align: center; margin: var(--space-9) auto 0; max-width: 32rem; }
.motion { text-align: center; margin: var(--space-6) auto 0; max-width: none; }
.motion-toggle {
  display: none; min-height: 2.5rem; padding: 0 var(--space-4); font: inherit; font-size: 0.95rem; color: var(--text);
  background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
}
.js .motion-toggle { display: inline-flex; align-items: center; }
.motion-toggle:hover { background: var(--surface); }
.motion-toggle .m-play, .paused .motion-toggle .m-pause { display: none; }
.paused .motion-toggle .m-play { display: inline; }
.paused .feel * { animation-play-state: paused !important; }
.sample { color: var(--muted); font-size: 0.85rem; margin: var(--space-4) 0 0; text-align: center; max-width: none; }

.cards { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.cards.four { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card, ol.steps li {
  background: var(--surface); border: 1px solid transparent; border-radius: 18px; padding: var(--space-6);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover, .card:focus-within, ol.steps li:hover { transform: translateY(-4px); border-color: var(--border); box-shadow: 0 14px 30px -14px rgba(8, 20, 40, 0.35); }
.card p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.card .ico { display: block; width: 2rem; height: 2rem; margin-bottom: var(--space-4); fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card .btn { margin-top: var(--space-5); }
.cards .card.highlight { grid-column: 1 / -1; border-color: var(--accent); }
.ba { text-align: center; margin: calc(-1 * var(--space-2)) auto var(--space-8); font-size: 1.1rem; color: var(--muted); }

/* "How it feels": three small animated pictures (CSS only, stopped under reduced motion). */
.feel .card { padding: var(--space-4) var(--space-4) var(--space-6); text-align: center; }
.feel .card h3, .feel .card p { padding: 0 var(--space-2); }
.feel svg { display: block; width: 100%; height: auto; margin-bottom: var(--space-3); }
.feel .paper { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.feel .bar { fill: var(--line); }
.feel .ln { fill: var(--border); opacity: 0.45; }
.feel .hd { fill: var(--accent); opacity: 0.85; }
.feel .land { fill: var(--surface); }
.feel .road { fill: none; stroke: var(--border); stroke-width: 2; opacity: 0.55; stroke-linecap: round; }
.feel .pin { fill: var(--accent); }
.feel .base { fill: var(--line); }
.feel .puck-body { fill: var(--accent); }
.feel .puck-top { fill: var(--accent-2); }
.feel .chev { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.feel { --feel-dur: 5s; }
.feel .thumb { fill: var(--accent); opacity: 0.8; }
.feel .pic { fill: var(--line); }
.feel .dot { fill: var(--border); opacity: 0.45; }
.feel .dot-on { fill: var(--accent); }
.feel .mark { fill: none; stroke: var(--on-accent); stroke-width: 2.5; stroke-linecap: round; }
.feel .mark-dot { fill: var(--on-accent); }
.feel .arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.feel .scrolling, .feel .pages, .feel .thumb, .feel .dot-on { transform-box: fill-box; }
.feel .cap-shadow { fill: var(--border); opacity: 0.35; }
.feel .zooming, .feel .twist-cap { transform-box: view-box; }
.feel .zooming { transform-origin: 84px 66px; }
.feel .twist-cap { transform-origin: 182px 82px; }
.feel .scrolling, .feel .pages, .feel .thumb, .feel .dot-on, .feel .cap, .feel .cap-shadow, .feel .zooming, .feel .twist-cap,
.feel .c-up, .feel .c-down, .feel .c-left, .feel .c-right, .feel .arc-cw, .feel .arc-ccw {
  animation-duration: var(--feel-dur); animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
/* One loop per card, all moving parts share the same keyframe grid so cause and effect stay in sync. */
/* Browser: push forward and back (vertical scroll), then tilt right and back (horizontal pan). */
.f-browser .scrolling { animation-name: b-content; }
.f-browser .thumb-v { animation-name: b-thumb-v; }
.f-browser .thumb-h { animation-name: b-thumb-h; }
.f-browser .cap { animation-name: b-cap; }
.f-browser .cap-shadow { animation-name: b-shadow; }
.f-browser .c-up { animation-name: b-chev-v; }
.f-browser .c-right { animation-name: b-chev-h; }
@keyframes b-content { 0%, 5% { transform: translate(0, 0); } 15%, 25% { transform: translate(0, -64px); } 35%, 55% { transform: translate(0, 0); } 65%, 75% { transform: translate(-60px, 0); } 85%, 100% { transform: translate(0, 0); } }
@keyframes b-thumb-v { 0%, 5% { transform: translateY(0); } 15%, 25% { transform: translateY(41px); } 35%, 100% { transform: translateY(0); } }
@keyframes b-thumb-h { 0%, 55% { transform: translateX(0); } 65%, 75% { transform: translateX(36px); } 85%, 100% { transform: translateX(0); } }
@keyframes b-cap { 0%, 5% { transform: translate(0, 0); } 15%, 25% { transform: translate(0, -7px); } 35%, 55% { transform: translate(0, 0); } 65%, 75% { transform: translate(7px, 0); } 85%, 100% { transform: translate(0, 0); } }
@keyframes b-shadow { 0%, 5% { transform: translate(0, 0); } 15%, 25% { transform: translate(0, 3px); } 35%, 55% { transform: translate(0, 0); } 65%, 75% { transform: translate(-3px, 0); } 85%, 100% { transform: translate(0, 0); } }
@keyframes b-chev-v { 0%, 5% { opacity: 0.25; } 15%, 25% { opacity: 1; } 35%, 100% { opacity: 0.25; } }
@keyframes b-chev-h { 0%, 55% { opacity: 0.25; } 65%, 75% { opacity: 1; } 85%, 100% { opacity: 0.25; } }
/* PDF: two pushes, each advances one page in steps; page 3 is a copy of page 1, so the loop has no jump. */
.f-pdf .pages { animation-name: p-pages; }
.f-pdf .dot-on { animation-name: p-dot; animation-timing-function: steps(1, end); }
.f-pdf .cap { animation-name: p-cap; }
.f-pdf .cap-shadow { animation-name: p-shadow; }
.f-pdf .c-up { animation-name: p-chev; }
@keyframes p-pages { 0% { transform: translateY(0); } 15% { transform: translateY(0); animation-timing-function: steps(6, end); } 25% { transform: translateY(-112px); } 55% { transform: translateY(-112px); animation-timing-function: steps(6, end); } 65%, 100% { transform: translateY(-224px); } }
@keyframes p-dot { 0% { transform: translateX(0); } 25% { transform: translateX(12px); } 65%, 100% { transform: translateX(0); } }
@keyframes p-cap { 0%, 12% { transform: translateY(0); } 17% { transform: translateY(-7px); } 24%, 52% { transform: translateY(0); } 57% { transform: translateY(-7px); } 64%, 100% { transform: translateY(0); } }
@keyframes p-shadow { 0%, 12% { transform: translateY(0); } 17% { transform: translateY(3px); } 24%, 52% { transform: translateY(0); } 57% { transform: translateY(3px); } 64%, 100% { transform: translateY(0); } }
@keyframes p-chev { 0%, 12% { opacity: 0.25; } 17% { opacity: 1; } 24%, 52% { opacity: 0.25; } 57% { opacity: 1; } 64%, 100% { opacity: 0.25; } }
/* Map: the cap turns clockwise while the map zooms in, and back while it zooms out. */
.f-map .zooming { animation-name: m-zoom; }
.f-map .twist-cap { animation-name: m-turn; }
.f-map .arc-cw { animation-name: m-arc-cw; }
.f-map .arc-ccw { animation-name: m-arc-ccw; }
@keyframes m-zoom { 0%, 8% { transform: scale(1); } 38%, 52% { transform: scale(1.5); } 88%, 100% { transform: scale(1); } }
@keyframes m-turn { 0%, 8% { transform: rotate(0deg); } 38%, 52% { transform: rotate(28deg); } 88%, 100% { transform: rotate(0deg); } }
@keyframes m-arc-cw { 0%, 5% { opacity: 0; } 15%, 32% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes m-arc-ccw { 0%, 52% { opacity: 0; } 62%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
.feel .arc-cw, .feel .arc-ccw { opacity: 0; }
.feel .chev { opacity: 0.25; }

.dl .card { display: flex; flex-direction: column; align-items: stretch; }
.dl .card h3 { font-size: 1.25rem; }
.dl .card p { margin-bottom: var(--space-5); flex: 0 1 auto; }
#download .cta { justify-content: center; margin: var(--space-6) 0 0; }
.status { text-align: center; color: var(--muted); font-size: 0.95rem; margin: var(--space-6) auto 0; max-width: 44rem; }
details.more { max-width: 44rem; margin: var(--space-4) auto 0; color: var(--muted); font-size: 0.95rem; }
details.more > summary { text-align: center; }
details.more pre { margin-top: var(--space-3); text-align: left; }

ol.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
ol.steps li { counter-increment: step; }
ol.steps li::before {
  content: counter(step); display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--accent); background-image: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--on-accent); font-weight: 700; margin-bottom: var(--space-4);
}
ol.steps p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }

.faq { max-width: 44rem; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: var(--space-1) 0; }
.faq summary, details.more > summary { cursor: pointer; padding: var(--space-3) 0; transition: color 160ms ease; }
.faq summary:hover { color: var(--link); }
.faq summary { list-style-position: inside; }
.faq summary h3 { display: inline; margin: 0; font-size: 1.05rem; font-weight: 600; }
.faq details p { margin: 0 0 var(--space-4); color: var(--muted); }

.closing { text-align: center; background: radial-gradient(48rem 20rem at 50% 0%, var(--glow), transparent 75%); }
.closing h2 { margin-bottom: var(--space-5); }
.closing .cta { justify-content: center; margin-top: 0; }
.morelinks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-6); color: var(--muted); font-size: 0.95rem; margin: var(--space-7) 0 0; padding: 0; list-style: none; }
.morelinks a { white-space: nowrap; }
footer.site { border-top: 1px solid var(--line); padding: var(--space-6) 0 var(--space-8); color: var(--muted); font-size: 0.9rem; }
footer.site p { margin: 0 auto; text-align: center; }
footer.site a { color: var(--link); }

@media (max-width: 40rem) {
  nav.main { display: none; }
  header.site .wrap { gap: var(--space-2); }
  .brand { margin-right: auto; }
  .tools { gap: var(--space-2); }
  .langsel summary { padding: 0 var(--space-2) 0 var(--space-3); gap: var(--space-1); }
  .lname { font-size: 0; }
  .lname::after { content: attr(data-code); font-size: 0.95rem; }
  .cta { flex-direction: column; }
  .cta .btn { width: 100%; }
  .lead { font-size: 1.1rem; }
  .card, ol.steps li { padding: var(--space-5); }
  .faq summary, details.more > summary { padding: var(--space-4) 0; }
  .morelinks { gap: 0 var(--space-5); }
  .morelinks a { display: inline-block; padding: var(--space-3) 0; }
}
@media (max-width: 26rem) { header.site .btn.small { display: none; } }
@media (max-width: 24rem) { .btn.small { padding-left: var(--space-3); padding-right: var(--space-3); } .brand { font-size: 1.05rem; } }
/* Balanced headlines and short blocks, no single-word last lines in running text. */
h1, h2, .ba, .status { text-wrap: balance; }
h3, p { text-wrap: pretty; }
/* Calm static frame under reduced motion: the middle of each movement. */
@media (prefers-reduced-motion: reduce) {
  .f-browser .scrolling { transform: translate(-24px, -32px); }
  .f-browser .thumb-v { transform: translateY(20px); }
  .f-browser .thumb-h { transform: translateX(14px); }
  .f-pdf .pages { transform: translateY(-112px); }
  .f-pdf .dot-on { transform: translateX(12px); }
  .f-map .zooming { transform: scale(1.25); }
  .f-map .twist-cap { transform: rotate(14deg); }
  .f-map .arc-cw { opacity: 1; }
  .f-browser .cap { transform: translate(3px, -5px); }
  .f-pdf .cap { transform: translateY(-5px); }
  .f-browser .cap-shadow { transform: translate(-1px, 2px); }
  .f-pdf .cap-shadow { transform: translateY(2px); }
  .f-browser .c-up, .f-browser .c-right, .f-pdf .c-up { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover, .card:focus-within, ol.steps li:hover, .btn:hover { transform: none; }
  .motion-toggle, .js .motion-toggle { display: none; }
}