/* Baylee — the landing page at https://baylee.acevik.de/.
   The blue hour again (web/play-soon): our own painting in layers that move
   at their own pace as the page scrolls, wisteria petals falling past the
   moon, then a calm page in two fonts that comes up as it is read. Nothing
   is fetched from anyone else's server; the CSP allows no inline style, so
   everything lives here. Every movement is transform and opacity only, and
   `prefers-reduced-motion` stills all of it. */

@font-face { font-family: "Faustina"; src: url("fonts/Faustina.woff2?v=5e1bf9a0c7") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Faustina"; src: url("fonts/Faustina-Italic.woff2?v=78aa6e03e0") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/AlegreyaSans-Regular.woff2?v=2f8bb62b1e") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/AlegreyaSans-Medium.woff2?v=f2d382c484") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/AlegreyaSans-Bold.woff2?v=af19c56947") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- tokens */
:root {
  --serif: "Faustina", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --top-h: 3.9rem;
  --wrap: 72rem;

  --bg: #0b1322;
  --bg-alt: #0e1729;
  --panel: rgba(20, 31, 52, 0.78);
  --panel-solid: #121c30;
  --panel-2: #1a2740;
  --edge: rgba(222, 190, 128, 0.26);
  --edge-soft: rgba(170, 190, 220, 0.14);
  --edge-glow: rgba(232, 200, 136, 0.55);
  --ink: #e9edf5;
  --ink-soft: #c3ccdc;
  --ink-faint: #97a3b9;
  --title: #f8f2e5;
  --gold: #e0be7c;
  --gold-2: #f6dfa6;
  --gold-deep: #b98d43;
  --gold-ink: #1b1407;
  --violet: #b9a2ff;
  --violet-soft: rgba(170, 140, 255, 0.16);
  --link: #e8cb8c;
  --link-hover: #f8e6b9;
  --focus: #ffe8a8;
  --ok: #7fd3a1;
  --warn: #f0c076;
  --untested: #86c9c4;
  --bad: #f09a8f;
  --veil-top: rgba(8, 14, 28, 0.30);
  --veil-mid: rgba(11, 19, 34, 0.55);
  --hero-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 22px rgba(0, 0, 0, 0.45);
  --moon: rgba(200, 222, 255, 0.42);
  --mist: rgba(190, 210, 240, 0.10);
  --shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.75);
  --shadow-lift: 0 30px 60px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--edge);
  --top-bg: rgba(10, 17, 31, 0.80);
  --code-bg: #0a1120;
  --kbd-bg: #1b2740;
  --field-bg: rgba(9, 15, 28, 0.65);
  --field-edge: rgba(170, 190, 220, 0.55);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef2f8;
    --bg-alt: #e3e9f3;
    --panel: rgba(253, 252, 248, 0.86);
    --panel-solid: #fbfaf6;
    --panel-2: #f0eee7;
    --edge: rgba(140, 104, 40, 0.30);
    --edge-soft: rgba(40, 60, 100, 0.15);
    --edge-glow: rgba(150, 110, 40, 0.55);
    --ink: #1b2233;
    --ink-soft: #3b465a;
    --ink-faint: #576378;
    --title: #151d31;
    --gold: #1f2a44;
    --gold-2: #34446a;
    --gold-deep: #121a2c;
    --gold-ink: #f7f1e4;
    --violet: #5b3fb0;
    --violet-soft: rgba(91, 63, 176, 0.10);
    --link: #7a5516;
    --link-hover: #4f370b;
    --focus: #1f2a44;
    --ok: #1e7a4a;
    --warn: #8a5a05;
    --untested: #1f6f6a;
    --bad: #a1332a;
    --veil-top: rgba(222, 231, 244, 0.40);
    --veil-mid: rgba(232, 238, 247, 0.72);
    --hero-shadow: 0 1px 2px rgba(255, 255, 255, 0.6), 0 2px 18px rgba(255, 255, 255, 0.55);
    --moon: rgba(255, 255, 255, 0.55);
    --mist: rgba(255, 255, 255, 0.22);
    --shadow: 0 24px 50px -30px rgba(20, 30, 60, 0.38);
    --shadow-lift: 0 30px 60px -28px rgba(20, 30, 60, 0.45), 0 0 0 1px var(--edge);
    --top-bg: rgba(238, 242, 248, 0.85);
    --code-bg: #1b2233;
    --kbd-bg: #e3e8f1;
    --field-bg: rgba(255, 255, 255, 0.85);
    --field-edge: rgba(40, 60, 100, 0.6);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #eef2f8;
  --bg-alt: #e3e9f3;
  --panel: rgba(253, 252, 248, 0.86);
  --panel-solid: #fbfaf6;
  --panel-2: #f0eee7;
  --edge: rgba(140, 104, 40, 0.30);
  --edge-soft: rgba(40, 60, 100, 0.15);
  --edge-glow: rgba(150, 110, 40, 0.55);
  --ink: #1b2233;
  --ink-soft: #3b465a;
  --ink-faint: #576378;
  --title: #151d31;
  --gold: #1f2a44;
  --gold-2: #34446a;
  --gold-deep: #121a2c;
  --gold-ink: #f7f1e4;
  --violet: #5b3fb0;
  --violet-soft: rgba(91, 63, 176, 0.10);
  --link: #7a5516;
  --link-hover: #4f370b;
  --focus: #1f2a44;
  --ok: #1e7a4a;
  --warn: #8a5a05;
  --untested: #1f6f6a;
  --bad: #a1332a;
  --veil-top: rgba(222, 231, 244, 0.40);
  --veil-mid: rgba(232, 238, 247, 0.72);
  --hero-shadow: 0 1px 2px rgba(255, 255, 255, 0.6), 0 2px 18px rgba(255, 255, 255, 0.55);
  --moon: rgba(255, 255, 255, 0.55);
  --mist: rgba(255, 255, 255, 0.22);
  --shadow: 0 24px 50px -30px rgba(20, 30, 60, 0.38);
  --shadow-lift: 0 30px 60px -28px rgba(20, 30, 60, 0.45), 0 0 0 1px var(--edge);
  --top-bg: rgba(238, 242, 248, 0.85);
  --code-bg: #1b2233;
  --kbd-bg: #e3e8f1;
  --field-bg: rgba(255, 255, 255, 0.85);
  --field-edge: rgba(40, 60, 100, 0.6);
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: clamp(16px, 11px + 0.5vw, 21px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-h) + 0.8rem);
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 160ms ease, text-decoration-color 160ms ease; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--gold); color: var(--gold-ink); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--serif); color: var(--title); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; margin: 0 0 0.5em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.7rem); font-weight: 600; }
h3 { font-size: clamp(1.12rem, 1rem + 0.4vw, 1.32rem); font-weight: 600; margin-top: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
code, pre, kbd { font-family: var(--mono); font-size: 0.86em; }
code { background: var(--panel-2); border: 1px solid var(--edge-soft); border-radius: 5px; padding: 0.05em 0.35em; overflow-wrap: anywhere; }
kbd {
  display: inline-block; min-width: 1.6em; text-align: center;
  background: var(--kbd-bg); border: 1px solid var(--edge-soft); border-bottom-width: 2px; border-radius: 6px;
  padding: 0 0.4em; line-height: 1.5; font-family: var(--sans); font-size: 0.85em; font-weight: 500; color: var(--ink);
}
pre.code {
  margin: 0 0 1em; padding: 1.1em 1.2em; overflow-x: auto; max-width: 100%;
  background: var(--code-bg); color: #e6ebf5; border-radius: 14px; border: 1px solid var(--edge-soft);
  font-size: 0.78rem; line-height: 1.6; box-shadow: var(--shadow);
}
pre.code code { background: none; border: 0; padding: 0; white-space: pre; font-size: 1em; color: inherit; }
.small { font-size: 0.9rem; color: var(--ink-faint); }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { margin: 0 0 0.7em; padding-left: 1.2em; position: relative; }
.plain li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--violet-soft); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* skip link */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 60; background: var(--gold); color: var(--gold-ink); padding: 0.6em 1em; border-radius: 10px; font-family: var(--sans); font-weight: 700; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- language */
html[data-lang="en"] .de { display: none !important; }
html[data-lang="de"] .en { display: none !important; }
/* without the script both languages show, English first; inline German twins would run into the English words, so only block-level German stays */
html:not([data-lang]) .lang { display: none; }
html:not([data-lang]) span.de { display: none; }
html:not([data-lang]) h1.de, html:not([data-lang]) h2.de, html:not([data-lang]) h3.de { margin-top: 0.3em; }
html:not([data-lang]) p.de { color: var(--ink-faint); }

/* ---------------------------------------------------------------- top bar */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  transition: background-color 280ms ease, border-color 280ms ease, box-shadow 280ms ease, backdrop-filter 280ms ease;
  border-bottom: 1px solid transparent;
}
/* over the painting the bar is clear; once the page moves it frosts */
.top::before { content: ""; position: absolute; inset: 0 0 -1.5rem 0; background: linear-gradient(180deg, rgba(5, 9, 18, 0.55), rgba(5, 9, 18, 0)); pointer-events: none; transition: opacity 280ms ease; }
.top.solid, html:not([data-js]) .top {
  background: var(--top-bg);
  backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: var(--edge-soft);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.6);
}
.top.solid::before, html:not([data-js]) .top::before { opacity: 0; }
/* in the light theme the clear bar lies on a light veil: dark words on a
   light band (white ones measured 3.9:1 there) */
:root[data-theme="light"] .top::before { background: linear-gradient(180deg, rgba(238, 242, 248, 0.92), rgba(238, 242, 248, 0)); }
:root[data-theme="light"] .top:not(.solid) .nav a, :root[data-theme="light"] .top:not(.solid) .menu-btn,
:root[data-theme="light"] .top:not(.solid) .lang-btn:not([aria-pressed="true"]) { color: var(--ink); text-shadow: none; }
:root[data-theme="light"] .top:not(.solid) .nav a.here { color: var(--title); }
:root[data-theme="light"] .lang, :root[data-theme="light"] .menu-btn { background: rgba(255, 255, 255, 0.6); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .top::before { background: linear-gradient(180deg, rgba(238, 242, 248, 0.92), rgba(238, 242, 248, 0)); }
  :root:not([data-theme="dark"]) .top:not(.solid) .nav a, :root:not([data-theme="dark"]) .top:not(.solid) .menu-btn,
  :root:not([data-theme="dark"]) .top:not(.solid) .lang-btn:not([aria-pressed="true"]) { color: var(--ink); text-shadow: none; }
  :root:not([data-theme="dark"]) .top:not(.solid) .nav a.here { color: var(--title); }
  :root:not([data-theme="dark"]) .lang, :root:not([data-theme="dark"]) .menu-btn { background: rgba(255, 255, 255, 0.6); }
}
.top-inner {
  position: relative;
  max-width: var(--wrap); margin: 0 auto; padding: 0 16px; min-height: var(--top-h);
  display: flex; align-items: center; gap: 0.9rem;
}
.brand { display: inline-flex; align-items: center; min-height: 48px; border-radius: 10px; transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.brand img { width: 7.6rem; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
/* while the hero's own large logo is in view, the bar's small one waits */
html[data-js] .top:not(.solid) .brand { opacity: 0; transform: translateY(-6px) scale(0.96); pointer-events: none; }
/* ...but a keyboard that reaches it sees it */
html[data-js] .top:not(.solid) .brand:focus-visible { opacity: 1; transform: none; }
.nav { display: flex; gap: 0.1rem; margin-left: auto; font-family: var(--sans); font-weight: 500; font-size: 0.95rem; }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-soft); text-decoration: none; padding: 0 0.62em; border-radius: 999px;
  transition: color 160ms ease, background-color 160ms ease;
}
.top:not(.solid) .nav a { color: #eef1f7; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.nav a::after {
  content: ""; position: absolute; left: 0.62em; right: 0.62em; bottom: 0.45rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--violet));
  transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease);
}
.nav a:hover { color: var(--link-hover); }
.nav a:hover::after, .nav a.here::after { transform: scaleX(1); }
.nav a.here { color: var(--title); }
.top:not(.solid) .nav a.here { color: #fff; }
.lang { display: inline-flex; border: 1px solid var(--edge); border-radius: 999px; overflow: hidden; font-family: var(--sans); font-size: 0.88rem; flex: none; background: rgba(8, 14, 28, 0.25); }
.lang-btn { appearance: none; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font: inherit; font-weight: 500; padding: 0 0.85em; min-height: 44px; min-width: 44px; transition: background-color 160ms ease, color 160ms ease; }
.top:not(.solid) .lang-btn:not([aria-pressed="true"]) { color: #eef1f7; }
.lang-btn + .lang-btn { border-left: 1px solid var(--edge); }
.lang-btn[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); font-weight: 700; }
.lang-btn:hover:not([aria-pressed="true"]) { background: var(--panel-2); color: var(--ink); }
.lang-btn:focus-visible { outline-offset: -3px; }
.menu-btn {
  display: none; appearance: none; margin-left: auto; flex: none;
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--edge); background: rgba(8, 14, 28, 0.3);
  color: var(--ink); cursor: pointer; align-items: center; justify-content: center;
  transition: background-color 160ms ease, transform 160ms var(--ease);
}
.top:not(.solid) .menu-btn { color: #fff; }
.menu-btn:active { transform: scale(0.94); }
.menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 260ms var(--ease), opacity 200ms ease; }
.menu-btn .bars { position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; }
.menu-btn .bars::before { top: -6px; }
.menu-btn .bars::after { top: 6px; }
.menu-btn[aria-expanded="true"] .bars { background: transparent; }
.menu-btn[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(100svh, 62rem);
  display: flex; align-items: center;
}
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #0b1322; overflow: hidden; }
.layer { position: absolute; inset: -4% -3%; will-change: transform; }
.sky-painting {
  background: url("img/sanctuary.webp?v=dc56d10e62") center 42% / cover no-repeat;
  background-image: image-set(url("img/sanctuary-1600.avif?v=156a4b6af7") type("image/avif"), url("img/sanctuary.webp?v=dc56d10e62") type("image/webp"));
  transform: scale(1.06);
}
.sky-painting > div { position: absolute; inset: 0; background: inherit; }
/* stars: dots of light in the upper sky that breathe slowly */
.sky-stars > div {
  position: absolute; inset: 0 0 45% 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 28% 8%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 26%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 55% 12%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(2px 2px at 63% 30%, rgba(255,246,220,0.85), transparent 60%),
    radial-gradient(1px 1px at 84% 9%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 34%, rgba(220,230,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 6% 40%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 44%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 73% 48%, rgba(255,255,255,0.7), transparent 60%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
.sky-stars > div + div { inset: 5% 0 40% 0; transform: scaleX(-1); animation-duration: 8.5s; animation-delay: -3s; }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }
/* the moon's light, drifting */
.sky-light > div {
  position: absolute; inset: -12%;
  background: radial-gradient(60vmax 44vmax at 74% 14%, var(--moon) 0%, rgba(0,0,0,0) 62%);
  mix-blend-mode: screen; opacity: 0.85;
  animation: moon-drift 52s ease-in-out infinite alternate;
}
@keyframes moon-drift { from { transform: translate3d(-3%, -2%, 0); } to { transform: translate3d(4%, 3%, 0) scale(1.1); } }
/* mist over the water, two banks that slide past each other */
.sky-mist > div {
  position: absolute; left: -30%; right: -30%; height: 46%;
  background:
    radial-gradient(40% 50% at 25% 60%, var(--mist), transparent 70%),
    radial-gradient(35% 45% at 70% 50%, var(--mist), transparent 70%),
    radial-gradient(30% 40% at 50% 70%, var(--mist), transparent 70%);
  animation: mist-slide 38s ease-in-out infinite alternate;
}
.sky-mist-far > div { top: 38%; opacity: 0.8; }
.sky-mist-near > div { top: 58%; opacity: 1; animation-duration: 27s; animation-direction: alternate-reverse; }
@keyframes mist-slide { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, -2%, 0); } }
/* wisteria petals, as on the logo, falling past the moon */
.sky-petals i {
  position: absolute; top: -6%; display: block; width: 11px; height: 8px;
  border-radius: 70% 0 70% 0;
  background: linear-gradient(135deg, #e3d4ff, #9d7ff0 60%, #6f52c8);
  opacity: 0;
  animation: petal-fall 16s linear infinite;
}
.sky-petals i:nth-child(1)  { left: 6%;  animation-delay: -1s;  animation-duration: 17s; }
.sky-petals i:nth-child(2)  { left: 14%; animation-delay: -7s;  animation-duration: 21s; transform: scale(0.7); }
.sky-petals i:nth-child(3)  { left: 23%; animation-delay: -12s; animation-duration: 15s; }
.sky-petals i:nth-child(4)  { left: 31%; animation-delay: -4s;  animation-duration: 23s; }
.sky-petals i:nth-child(5)  { left: 44%; animation-delay: -15s; animation-duration: 19s; }
.sky-petals i:nth-child(6)  { left: 52%; animation-delay: -9s;  animation-duration: 25s; }
.sky-petals i:nth-child(7)  { left: 61%; animation-delay: -2s;  animation-duration: 18s; }
.sky-petals i:nth-child(8)  { left: 69%; animation-delay: -11s; animation-duration: 22s; }
.sky-petals i:nth-child(9)  { left: 77%; animation-delay: -6s;  animation-duration: 16s; }
.sky-petals i:nth-child(10) { left: 86%; animation-delay: -14s; animation-duration: 20s; }
.sky-petals i:nth-child(11) { left: 93%; animation-delay: -3s;  animation-duration: 24s; }
.sky-petals i:nth-child(12) { left: 38%; animation-delay: -18s; animation-duration: 26s; }
@keyframes petal-fall {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(0deg); }
  8%   { opacity: 0.85; }
  50%  { transform: translate3d(5vw, 55vh, 0) rotate(220deg); }
  92%  { opacity: 0.7; }
  100% { opacity: 0;   transform: translate3d(-2vw, 112vh, 0) rotate(420deg); }
}
.sky-veil { position: absolute; inset: 0; background: linear-gradient(180deg, var(--veil-top) 0%, var(--veil-mid) 58%, var(--bg) 100%); }
.sky-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4, 8, 16, 0.55) 100%); }
:root[data-theme="light"] .sky-vignette { opacity: 0.25; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sky-vignette { opacity: 0.25; } }

.hero-inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: calc(var(--top-h) + clamp(1.5rem, 5vw, 3.5rem)) 16px clamp(4.5rem, 9vw, 6.5rem);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  will-change: transform, opacity;
}
.hero-logo { width: min(30rem, 82vw); height: auto; margin: 0 0 0.8rem; filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.55)); }
.kicker {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.2em 0.7em;
  font-family: var(--sans); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 1.1rem; text-shadow: var(--hero-shadow);
  padding: 0.35em 1em; border: 1px solid var(--edge); border-radius: 999px; background: rgba(8, 14, 28, 0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
:root[data-theme="light"] .kicker { background: rgba(255, 255, 255, 0.45); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .kicker { background: rgba(255, 255, 255, 0.45); } }
h1 {
  font-size: clamp(2.3rem, 1.3rem + 4.4vw, 4.8rem); font-weight: 600; max-width: 14em; margin: 0 0 0.35em;
  text-shadow: var(--hero-shadow); letter-spacing: -0.02em;
}
h1 .glow {
  background: linear-gradient(100deg, var(--title) 0%, var(--gold-2) 40%, var(--violet) 60%, var(--title) 85%);
  background-size: 220% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 9s ease-in-out infinite alternate;
  text-shadow: none;
}
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
.lead { font-size: clamp(1.08rem, 1rem + 0.55vw, 1.34rem); max-width: 38em; color: var(--ink); margin: 0 0 2rem; text-shadow: var(--hero-shadow); }
.hero-note { max-width: 38em; font-size: 0.95rem; color: var(--ink-soft); margin: 1.4rem 0 0; text-shadow: var(--hero-shadow); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 1rem 0 0; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 3.6rem; width: 44px; height: 44px; margin-left: -22px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--ink-soft); text-decoration: none; border: 1px solid var(--edge-soft);
  animation: cue 2.4s var(--ease) infinite;
}
.scroll-cue:hover { color: var(--title); border-color: var(--edge); }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 0.75; } 50% { transform: translateY(6px); opacity: 1; } }

/* the download block, in the hero */
.dl { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.dl-meta { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); margin: 0; text-shadow: var(--hero-shadow); }
.dl-meta .sep { margin: 0 0.45em; color: var(--ink-faint); }
.dl-sub { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-faint); margin: 0; text-shadow: var(--hero-shadow); }
.dl-sub a { color: var(--link); display: inline-block; padding: 0.35em 0.1em; }
.dl-arch { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); margin: 0; max-width: 36em; text-shadow: var(--hero-shadow); }

/* ---------------------------------------------------------------- buttons */
/* One button, every state the same size and the same shape: nothing moves
   or grows. Hover and focus warm the colour and pass a soft sheen across
   once; a press darkens; disabled and busy dim. The icon and the label sit
   on one centre line at one size (the icon is 1.15em square), and a button
   that changes its words (the contact form's) keeps all of them in one grid
   cell, so it is as wide as its longest word in every state. */
.button {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.6em 1.45em; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, var(--gold-deep));
  color: var(--gold-ink);
  font-family: var(--sans); font-weight: 700; font-size: 1.05rem; line-height: 1.2; letter-spacing: 0.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  box-shadow: 0 14px 30px -16px rgba(224, 190, 124, 0.6), 0 1px 0 rgba(255,255,255,0.35) inset;
  transition: box-shadow 260ms ease, filter 200ms ease, border-color 260ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="light"] .button { background-image: linear-gradient(180deg, #3d4f7a, #1f2a44 55%, #141c30); box-shadow: 0 14px 30px -16px rgba(31, 42, 68, 0.6); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .button { background-image: linear-gradient(180deg, #3d4f7a, #1f2a44 55%, #141c30); box-shadow: 0 14px 30px -16px rgba(31, 42, 68, 0.6); } }
/* a soft band of light that passes once on hover and focus */
.button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-110%); transition: transform 900ms var(--ease);
}
.button:hover, .button:focus-visible { color: var(--gold-ink); filter: brightness(1.05) saturate(1.12); box-shadow: 0 18px 34px -16px rgba(224, 190, 124, 0.75), 0 1px 0 rgba(255,255,255,0.35) inset; }
:root[data-theme="light"] .button:hover, :root[data-theme="light"] .button:focus-visible { color: var(--gold-ink); filter: brightness(1.22); box-shadow: 0 18px 34px -16px rgba(31, 42, 68, 0.7); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .button:hover, :root:not([data-theme="dark"]) .button:focus-visible { color: var(--gold-ink); filter: brightness(1.22); box-shadow: 0 18px 34px -16px rgba(31, 42, 68, 0.7); } }
.button:hover::before, .button:focus-visible::before { transform: translateX(110%); }
.button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.button:active { filter: brightness(0.9); transition-duration: 60ms; }
.button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; filter: saturate(0.6) brightness(0.9); box-shadow: none; }
.button:disabled::before, .button[aria-disabled="true"]::before { display: none; }
.button-big { min-height: 58px; padding: 0.75em 1.9em; font-size: 1.16rem; }
.button-icon { flex: none; width: 1.15em; height: 1.15em; display: block; }
.button-ghost {
  background: rgba(8, 14, 28, 0.25); color: var(--link); border-color: var(--edge); box-shadow: none; font-weight: 500;
  min-height: 46px; font-size: 0.97rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.button-ghost::before { background: linear-gradient(105deg, transparent 35%, var(--violet-soft) 50%, transparent 65%); }
.button-ghost:hover, .button-ghost:focus-visible { color: var(--link-hover); background: var(--panel-2); border-color: var(--edge-glow); box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.7); }
:root[data-theme="light"] .button-ghost, :root[data-theme="light"] .button-ghost:hover, :root[data-theme="light"] .button-ghost:focus-visible { background: rgba(255, 255, 255, 0.7); color: var(--link); box-shadow: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .button-ghost, :root:not([data-theme="dark"]) .button-ghost:hover, :root:not([data-theme="dark"]) .button-ghost:focus-visible { background: rgba(255, 255, 255, 0.7); color: var(--link); box-shadow: none; } }

/* the contact form's button: one state at a time, each its icon and its
   words centred together; all of them share one grid cell, so the button is
   as wide as its widest state in every state (site.js sets data-state:
   idle, sending, sent, error) */
.btn-states { display: grid; }
.btn-states > .st {
  grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; white-space: nowrap;
  visibility: hidden; opacity: 0; transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.button-send[data-state="idle"] .st-idle, .button-send[data-state="sending"] .st-sending,
.button-send[data-state="sent"] .st-sent, .button-send[data-state="error"] .st-error { visibility: visible; opacity: 1; transition: opacity 180ms ease, visibility 0s; }
.button-send[data-state="sending"] { cursor: progress; filter: saturate(0.8); }
.button-send[data-state="sending"]::before { display: none; }
.i-spin { animation: spin 1s linear infinite; }
.i-spin circle { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 38 60; }
.button-send[data-state="error"] { border-color: var(--bad); }

/* ---------------------------------------------------------------- status strip */
.strip { position: relative; z-index: 2; margin-top: -2.6rem; }
.strip-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; font-family: var(--sans);
}
.stat {
  display: flex; flex-direction: column; gap: 0.15em; min-width: 0;
  background: var(--panel-solid); border: 1px solid var(--edge-soft); border-radius: 16px; padding: 0.8rem 1rem;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow);
  transition: transform 260ms var(--ease), border-color 260ms ease;
}
.stat:hover { transform: translateY(-3px); border-color: var(--edge); }
@media (max-width: 900px) { .strip-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .stat-value .small { display: none; } }
.stat-label { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.stat-value { font-size: 1rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-value a { color: var(--link); text-decoration: none; }
/* the whole card is the link's target: a finger needs more than a line */
.stat { position: relative; }
.stat-value a:first-child::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.stat-value a:hover { text-decoration: underline; }
.dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.4em; vertical-align: 0.05em; background: var(--ink-faint); }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: beacon 2.6s ease-out infinite; }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(127, 211, 161, 0.55); } 80%, 100% { box-shadow: 0 0 0 0.45em rgba(127, 211, 161, 0); } }

/* ---------------------------------------------------------------- sections */
.section { position: relative; padding: clamp(3.6rem, 8vw, 6.5rem) 0; }
.section-alt { background: var(--bg-alt); }
/* a thread of light where two sections meet */
.section-alt::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(46rem, 80%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--edge-glow), transparent);
}
.section-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 0.9rem;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ""; width: 1.8rem; height: 1px; background: linear-gradient(90deg, var(--gold), var(--violet)); }
.section-lead { max-width: 46em; color: var(--ink-soft); font-size: 1.06rem; margin-bottom: 2.2rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3.4rem; align-items: start; }
.two-col > div { min-width: 0; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; gap: 1.6rem; } }

/* a panel that follows the pointer with a soft light (site.js sets --mx/--my) */
.glass {
  position: relative; isolation: isolate; background: var(--panel); border: 1px solid var(--edge-soft); border-radius: 18px;
  box-shadow: var(--shadow);
  transition: transform 320ms var(--ease), box-shadow 320ms ease, border-color 320ms ease;
}
/* under the panel's content (z-index -1 in the panel's own stacking context),
   never over it: over it, it tinted the buttons and text it passed */
.glass::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), var(--violet-soft), transparent 60%);
  transition: opacity 320ms ease;
}
.glass:hover::after { opacity: 1; }

.features { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.features li { padding: 1.35rem 1.35rem 0.7rem; }
.features li:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--edge); }
.feat-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin-bottom: 0.9rem;
  border-radius: 12px; color: var(--gold); border: 1px solid var(--edge);
  background: linear-gradient(145deg, var(--violet-soft), transparent);
  transition: transform 420ms var(--ease-spring), color 220ms ease;
}
.feat-icon svg { width: 1.35rem; height: 1.35rem; }
.features li:hover .feat-icon { transform: rotate(-8deg) scale(1.1); color: var(--violet); }
.features h3 { font-size: 1.1rem; margin-bottom: 0.45em; }
.features p { font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }

.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.shots figure { margin: 0; }
.shots li { overflow: hidden; }
.shots li:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.shot-link { display: block; position: relative; overflow: hidden; border-radius: 18px 18px 0 0; cursor: zoom-in; }
.shot-link img { aspect-ratio: 1200 / 703; object-fit: cover; width: 100%; transition: transform 700ms var(--ease), filter 400ms ease; }
.shots li:hover .shot-link img { transform: scale(1.05); filter: saturate(1.1); }
.shot-link::after {
  content: ""; position: absolute; right: 0.7rem; bottom: 0.7rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: rgba(8, 14, 28, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f6dfa6' d='M10 4a6 6 0 1 0 3.7 10.7l4.8 4.8 1.4-1.4-4.8-4.8A6 6 0 0 0 10 4zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm-1 1.5v1.5H7.5v2H9v1.5h2V11h1.5V9H11V7.5z'/%3E%3C/svg%3E") center / 60% no-repeat;
  opacity: 0; transform: scale(0.7); transition: opacity 260ms ease, transform 260ms var(--ease-spring);
}
.shots li:hover .shot-link::after, .shot-link:focus-visible::after { opacity: 1; transform: scale(1); }
.shots figcaption { padding: 0.8rem 1rem 1rem; font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 1000px) { .shots { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .shots { grid-template-columns: 1fr; } }

/* the picture, large (a <dialog>; site.js opens it) */
.lightbox {
  width: min(96vw, 1400px); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: 16px;
  background: transparent; color: var(--ink); overflow: visible;
}
.lightbox::backdrop { background: rgba(4, 8, 16, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox[open] { animation: zoom-in 360ms var(--ease); }
.lightbox[open]::backdrop { animation: fade-in 300ms ease; }
.lightbox img { width: 100%; max-height: 82vh; object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8); }
.lightbox-cap { font-family: var(--sans); color: #e9edf5; text-align: center; margin: 0.8rem 3.5rem 0; font-size: 0.95rem; }
.lightbox-close, .lightbox-step {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
  background: rgba(8, 14, 28, 0.75); color: #fff; cursor: pointer; font: 600 1.4rem/1 var(--sans);
  display: flex; align-items: center; justify-content: center; transition: transform 200ms var(--ease-spring), background-color 200ms ease;
}
.lightbox-close:hover, .lightbox-step:hover { transform: scale(1.08); background: rgba(30, 44, 72, 0.9); }
.lightbox-close { top: -0.6rem; right: -0.6rem; }
.lightbox-step { bottom: -0.2rem; }
.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }
@keyframes zoom-in { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin: 1.4rem 0; }
.numbers > div { padding: 1rem 1.1rem; }
.numbers > div:hover { transform: translateY(-4px); border-color: var(--edge); }
.numbers dt {
  font-family: var(--sans); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.1;
  font-feature-settings: "lnum", "tnum";
  background: linear-gradient(120deg, var(--title), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .numbers dt { background: none; color: var(--title); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .numbers dt { background: none; color: var(--title); } }
.numbers dd { margin: 0.35em 0 0; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); line-height: 1.35; }
@media (max-width: 600px) { .numbers { grid-template-columns: 1fr; gap: 0.6rem; } }

.promise { font-size: 1.14rem; color: var(--title); border-left: 3px solid; border-image: linear-gradient(180deg, var(--gold), var(--violet)) 1; padding-left: 1rem; }
.links-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.4rem 0 0; }

.kv { margin: 0 0 1rem; display: grid; gap: 0.55rem; }
.kv > div { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 0.6rem; align-items: baseline; }
.kv dt { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.kv dd { margin: 0; font-family: var(--sans); font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.kv dd a { color: var(--link); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.kv dd code { white-space: normal; }
@media (max-width: 420px) { .kv > div { grid-template-columns: 1fr; gap: 0.1rem; } }
.gateway-card, .repo-card { padding: 1.4rem 1.5rem 0.7rem; }
.gateway-card:hover, .repo-card:hover { border-color: var(--edge); }
.gateway-card h3, .repo-card h3 { margin-bottom: 0.9em; }

/* ---------------------------------------------------------------- download section */
.release-head { font-family: var(--sans); font-size: 1rem; color: var(--ink-soft); margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: 0.3em 1.2em; align-items: baseline; }
.release-head .ver { font-weight: 700; color: var(--title); font-size: 1.2rem; }
.release-head .tag { display: inline-block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--edge); border-radius: 999px; padding: 0.15em 0.6em; color: var(--ink-soft); }
.release-head a { display: inline-block; padding: 0.55em 0; }
.platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin: 0 0 2.6rem; }
@media (max-width: 800px) { .platforms { grid-template-columns: 1fr; } }
.plat { padding: 1.05rem 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; font-family: var(--sans); }
.plat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.plat.mine { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 40px -12px var(--edge-glow), var(--shadow); }
.plat-name { font-weight: 700; font-size: 1.1rem; color: var(--title); display: flex; align-items: baseline; gap: 0.6em; flex-wrap: wrap; }
.plat-name .mine-tag { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--gold); color: var(--gold-ink); border-radius: 999px; padding: 0.15em 0.6em; font-weight: 700; }
.plat-sub { color: var(--ink-faint); font-size: 0.9rem; margin: -0.2rem 0 0; }
.plat-files { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.plat-files li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.6em; font-size: 0.95rem; }
.plat-files a.file { color: var(--link); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; display: inline-block; padding: 0.45em 0; }
.plat-files a.file:hover { text-decoration: underline; }
.plat-files .kind { color: var(--ink-faint); font-size: 0.85rem; }
.plat-files .size { color: var(--ink-faint); font-size: 0.85rem; font-feature-settings: "tnum"; }
.plat-files .aux { color: var(--ink-faint); font-size: 0.82rem; }
.plat-files .aux a { color: var(--ink-soft); display: inline-block; padding: 0.4em 0.15em; }
.plat-none { color: var(--ink-faint); font-size: 0.95rem; margin: 0; }
.install-notes h3 { margin-top: 1.2rem; }
.install-notes > div > h3:first-child { margin-top: 0; }
.dl-fallback { font-family: var(--sans); color: var(--ink-soft); }

/* ---------------------------------------------------------------- contact */
.contact-card { padding: 1.5rem 1.5rem 1.3rem; }
.contact-form { display: grid; gap: 1rem; font-family: var(--sans); }
.field { display: grid; gap: 0.3rem; position: relative; }
.field label { font-weight: 500; font-size: 0.95rem; color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.5em; }
.field .opt { font-weight: 400; font-size: 0.82rem; color: var(--ink-faint); }
.field input, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); width: 100%;
  /* a field's edge is how it is found: at least 3:1 to its ground (WCAG 1.4.11) */
  background: var(--field-bg); border: 1px solid var(--field-edge); border-radius: 12px;
  padding: 0.7em 0.9em; min-height: 48px;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: var(--edge); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--violet-soft), 0 0 24px -8px var(--edge-glow); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--bad); }
.field-foot { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; color: var(--ink-faint); }
.count.near { color: var(--warn); }
/* the field a person never sees; a form-filling robot fills it */
.trap { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }
.form-status { margin: 0; font-size: 0.95rem; min-height: 1.4em; }
.form-status.bad { color: var(--bad); }
.form-status.ok { color: var(--ok); }
@keyframes spin { to { transform: rotate(360deg); } }
.privacy-note { font-size: 0.86rem; color: var(--ink-faint); margin: 0; line-height: 1.45; }
.contact-done { display: none; text-align: center; padding: 1.4rem 0.5rem 0.6rem; font-family: var(--sans); }
.contact-card.sent .contact-form { display: none; }
.contact-card.sent .contact-done { display: block; animation: zoom-in 520ms var(--ease); }
.contact-done h3 { margin: 0.6rem 0 0.4rem; }
.check { width: 4.2rem; height: 4.2rem; margin: 0 auto; display: block; }
.check circle { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; }
.check path { fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; }
.contact-card.sent .check circle { animation: draw 700ms var(--ease) forwards; }
.contact-card.sent .check path { animation: draw 420ms 520ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.nojs-note { font-family: var(--sans); color: var(--ink-soft); margin: 0; }
html[data-js] .nojs-note { display: none; }
html:not([data-js]) .contact-form { display: none; }
.channels { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.6rem; }
.channels a {
  display: flex; align-items: center; gap: 0.8rem; min-height: 56px; padding: 0.6rem 1rem; border-radius: 14px;
  text-decoration: none; color: var(--ink); font-family: var(--sans); font-weight: 500;
}
.channels a:hover { transform: translateX(4px); border-color: var(--edge); color: var(--title); }
.channels svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--gold); transition: transform 300ms var(--ease-spring); }
.channels a:hover svg { transform: scale(1.15) rotate(-6deg); }
.channels small { display: block; color: var(--ink-faint); font-weight: 400; font-size: 0.85rem; }

/* ---------------------------------------------------------------- footer */
.foot { position: relative; border-top: 1px solid var(--edge-soft); background: var(--bg-alt); padding: 2.6rem 0 3rem; font-family: var(--sans); font-size: 0.86rem; color: var(--ink-faint); }
.foot-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.foot-logo { width: 7rem; margin: 0 0 1rem; opacity: 0.9; }
.notice { margin: 0 0 0.5em; max-width: 60em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 0.4em; margin: 1rem 0 0.8rem; }
.foot-links a { color: var(--link); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5em; border-radius: 8px; }
.foot-links a:first-child { padding-left: 0; }
.foot-links a:hover { text-decoration: underline; }
.colophon { margin: 0; max-width: 60em; }

/* ---------------------------------------------------------------- coming up as it is read */
html[data-js] .reveal { opacity: 0; transform: translate3d(0, 26px, 0); }
html[data-js] .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 760ms var(--ease), transform 760ms var(--ease);
  transition-delay: calc(var(--d, 0) * 70ms);
}
/* what the keyboard reaches is shown at once, whether or not it has come up */
html[data-js] .reveal:focus-within { opacity: 1; transform: none; transition: none; }
main:focus { outline: none; }
/* the hover lift must not wait for the reveal's delay */
html[data-js] .reveal.in.glass { transition: opacity 760ms var(--ease), transform 320ms var(--ease), box-shadow 320ms ease, border-color 320ms ease; }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1099px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: absolute; left: 12px; right: 12px; top: calc(100% + 6px);
    flex-direction: column; gap: 0.1rem; padding: 0.5rem;
    background: var(--panel-solid); border: 1px solid var(--edge-soft); border-radius: 18px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top; visibility: hidden;
    transition: opacity 220ms ease, transform 260ms var(--ease), visibility 0s linear 260ms;
    font-size: 1.05rem; max-height: calc(100svh - var(--top-h) - 24px); overflow-y: auto;
  }
  .nav.open { opacity: 1; transform: none; visibility: visible; transition: opacity 220ms ease, transform 260ms var(--ease), visibility 0s; }
  .nav a, .top:not(.solid) .nav a { color: var(--ink); text-shadow: none; min-height: 48px; padding: 0 1rem; border-radius: 12px; }
  .nav a:hover, .nav a.here { background: var(--panel-2); color: var(--title); }
  .nav a::after { left: 1rem; right: auto; width: 1.4rem; bottom: 0.6rem; }
  .lang { margin-left: 0; }
  /* without the script there is no menu: the links wrap under the bar */
  html:not([data-js]) .menu-btn { display: none; }
  html:not([data-js]) .nav { position: static; opacity: 1; visibility: visible; transform: none; flex-direction: row; flex-wrap: wrap; background: none; border: 0; box-shadow: none; padding: 0; order: 3; width: 100%; }
  html:not([data-js]) .top-inner { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  :root { --top-h: 3.5rem; }
  .top-inner { gap: 0.5rem; }
  .brand img { width: 6rem; }
  .lang-btn { padding: 0 0.6em; }
  .button-big { width: 100%; }
  .dl { width: 100%; }
  .hero { min-height: auto; }
  .hero-inner { padding-bottom: 5.5rem; }
  .scroll-cue { display: none; }
  .strip { margin-top: -1.6rem; }
  .stat { padding: 0.7rem 0.8rem; }
}
@media (min-width: 1800px) {
  :root { --wrap: 82rem; }
}

/* ---------------------------------------------------------------- sets and card status */
.sets-block { margin-top: 3.2rem; padding-top: 2.6rem; border-top: 1px solid var(--edge-soft); }
.sets-block .section-lead { margin-bottom: 1.2rem; }
.legend { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); }
.legend li { display: inline-flex; align-items: center; gap: 0.45em; }
.swatch { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 3px; flex: none; }
.s-implemented, .b-implemented, .pbar-full { background: var(--ok); }
.s-generated, .b-generated, .pbar-generated { background: var(--untested); }
.s-partial, .b-partial, .pbar-partial { background: var(--warn); }
.s-none, .b-none { background: var(--ink-faint); }
.s-never, .b-never { background: var(--bad); }
.sets-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin: 1.2rem 0 0.8rem; font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); }
.sets-tools[hidden] { display: none; }
.sets-search { display: inline-flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.sets-search input {
  font: inherit; color: var(--ink); background: var(--field-bg); border: 1px solid var(--field-edge); border-radius: 12px;
  padding: 0.4em 0.8em; min-height: 44px; width: min(18rem, 78vw);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sets-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--violet-soft); }
.sets-check { display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; min-height: 44px; }
.sets-check input { width: 1.2em; height: 1.2em; accent-color: var(--gold); }
.sets-total { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 0.8rem; }
.sets { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.2rem; }
.set { background: var(--panel); border: 1px solid var(--edge-soft); border-radius: 14px; transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--ease); }
.set[hidden] { display: none; }
/* a row off screen is not laid out or painted until it comes near (it
   keeps the size it last had, or a summary line's) */
.set { content-visibility: auto; contain-intrinsic-size: auto 64px; }
.set:hover { border-color: var(--edge); box-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.7); }
.set[open] { border-color: var(--edge); box-shadow: var(--shadow); }
.set-sum {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(8rem, 1fr) auto; align-items: center; gap: 0.4rem 1.2rem;
  padding: 0.7rem 1rem; min-height: 52px; cursor: pointer; list-style: none; font-family: var(--sans); border-radius: 14px;
  transition: background-color 180ms ease;
}
.set-sum::-webkit-details-marker { display: none; }
.set-sum:hover { background: var(--panel-2); }
.set-sum:active { background: var(--violet-soft); }
.set-sum:focus-visible { outline-offset: -3px; }
.set-title { display: flex; flex-direction: column; min-width: 0; padding-left: 1.3em; position: relative; }
.set-title::before {
  content: ""; position: absolute; left: 0.1em; top: 0.5em; width: 0.42em; height: 0.42em;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg); transition: transform 300ms var(--ease-spring), border-color 200ms ease;
}
.set-sum:hover .set-title::before { border-color: var(--gold); }
.set[open] > .set-sum .set-title::before { transform: rotate(45deg); border-color: var(--gold); }
.set-name { font-weight: 700; color: var(--title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-meta { font-size: 0.85rem; color: var(--ink-faint); font-feature-settings: "lnum", "tnum"; }
.set-progress { display: flex; align-items: center; gap: 0.6em; min-width: 0; }
.set-pct { flex: none; width: 3.4em; text-align: right; font-weight: 700; color: var(--ink); font-feature-settings: "lnum", "tnum"; }
.set-pct.done { color: var(--ok); }
.pbar { flex: 1; display: flex; height: 0.55rem; border-radius: 999px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--edge-soft); min-width: 4rem; }
.pbar > span { display: block; height: 100%; transition: width 1100ms var(--ease); }
html[data-js] .set:not(.shown) .pbar > span, html[data-js] .sets-overall:not(.shown) .pbar > span { width: 0 !important; }
.pbar-partial { opacity: 0.75; }
.set-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.15rem 0.8rem; font-size: 0.85rem; color: var(--ink-soft); font-feature-settings: "lnum", "tnum"; }
.set-counts .c { white-space: nowrap; }
.set-counts .c::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 2px; margin-right: 0.35em; vertical-align: 0.05em; }
.c-implemented::before { background: var(--ok); }
.c-generated::before { background: var(--untested); }
.c-partial::before { background: var(--warn); }
.c-none::before { background: var(--ink-faint); }
.c-never::before { background: var(--bad); }
@media (max-width: 760px) {
  .set-sum { grid-template-columns: 1fr; }
  .set-counts { justify-content: flex-start; padding-left: 1.3em; }
  .set-progress { padding-left: 1.3em; }
}
.set-body { padding: 0.2rem 1rem 1rem; }
.set[open] > .set-body { animation: body-in 420ms var(--ease); }
@keyframes body-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.set-foot { margin: 0.8rem 0 0; }
.set-foot a { display: inline-block; padding: 0.4em 0; }
.cfilter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.9rem; font-family: var(--sans); }
.cfilter-btn {
  appearance: none; font: inherit; font-size: 0.9rem; color: var(--ink-soft); background: transparent;
  border: 1px solid var(--edge); border-radius: 999px; padding: 0 0.95em; min-height: 44px; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-spring);
}
.cfilter-btn:hover:not([aria-pressed="true"]) { background: var(--panel-2); color: var(--ink); }
.cfilter-btn:active { transform: scale(0.95); }
.cfilter-btn[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 700; }
.cfilter-n { opacity: 0.8; font-feature-settings: "lnum", "tnum"; }
.cgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 0.9rem 0.7rem; }
@media (max-width: 420px) { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cgrid[data-filter="implemented"] .ctile:not([data-group="implemented"]),
.cgrid[data-filter="generated"] .ctile:not([data-group="generated"]),
.cgrid[data-filter="partial"] .ctile:not([data-group="partial"]),
.cgrid[data-filter="none"] .ctile:not([data-group="none"]),
.cgrid[data-filter="never"] .ctile:not([data-group="never"]) { display: none; }
/* A card's picture is shown as Scryfall serves it: whole (contain), never
   blurred, dimmed, faded, desaturated or tinted, whatever its status, which
   only the badge under it says (docs/legal.md §3; Scryfall's guidelines).
   No filter, opacity or blend on .ctile-pic, .cp-pic or their images:
   baylee-tools site checks holds this. */
.ctile { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; border-radius: 8px; animation: tile-in 480ms var(--ease) backwards; }
@keyframes tile-in { from { transform: translateY(8px); } }
.ctile-link { display: flex; flex-direction: column; gap: 0.35rem; color: inherit; text-decoration: none; border-radius: 8px; }
.ctile-link:hover .ctile-name { color: var(--link-hover); text-decoration: underline; }
.ctile-pic {
  aspect-ratio: 146 / 204; border-radius: 4.75% / 3.5%; overflow: hidden; background: var(--panel-2); border: 1px solid var(--edge-soft);
  transition: transform 320ms var(--ease), box-shadow 320ms ease;
}
.ctile-link:hover .ctile-pic, .ctile-link:focus-visible .ctile-pic { transform: translateY(-5px); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--edge); }
.ctile-pic { display: block; }
.ctile-pic img { width: 100%; height: 100%; object-fit: contain; }
.ctile-blank { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 0.6rem; font-family: var(--serif); font-size: 0.95rem; color: var(--ink-faint); }
.ctile-cap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; font-family: var(--sans); font-size: 0.85rem; line-height: 1.25; }
.ctile-name { color: var(--ink); overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.08em 0.55em; border-radius: 999px; color: var(--bg); }
.ctile-link:focus-visible { outline-offset: 3px; }

/* ---------------------------------------------------------------- stillness */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .sky-petals, .scroll-cue { display: none; }
  .layer, .hero-inner { transform: none !important; will-change: auto; }
  html[data-js] .reveal { opacity: 1; transform: none; }
  .sky-stars > div { opacity: 0.8; }
  h1 .glow { background-position: 50% 0; }
}

/* ---------------------------------------------------------------- the sets: summary, eras, a card large */
.sets-summary { display: grid; gap: 0.6rem; margin: 1.2rem 0 0.4rem; }
.sets-overall { padding: 0.9rem 1.1rem 1rem; }
.sets-overall .sets-total { margin: 0 0 0.6rem; }
.sets-overall .pbar { height: 0.75rem; }
.sets-sub { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 0.8rem 0 0.1rem; }
.set-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 0 1em; border-radius: 999px;
  font-family: var(--sans); font-weight: 500; font-size: 0.95rem; text-decoration: none;
  color: var(--title); background: var(--panel); border: 1px solid var(--edge);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.chip::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--ok); }
.chip:hover { background: var(--panel-2); border-color: var(--edge-glow); color: var(--title); }
.sets-more { margin: 1rem 0 0.4rem; }
.sets-all[hidden] { display: none; }
.sets-all { margin-top: 0.4rem; }
.sets-found:empty { display: none; }
.set-era > .set-sum .set-name { font-size: 1.08rem; }
.era-body { padding: 0.2rem 0.7rem 0.8rem; }
.sets-notes { margin-top: 1.4rem; }
.cgrid-hint { margin: -0.3rem 0 0.8rem; }
@media (hover: none) { .cgrid-hint { display: none; } }

/* a card large beside the pointer (site.js places it) */
.cpreview {
  position: fixed; left: 0; top: 0; z-index: 40; width: 16rem; max-width: calc(100vw - 16px);
  padding: 0.6rem; border-radius: 16px; background: var(--panel-solid); border: 1px solid var(--edge);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75); font-family: var(--sans); font-size: 0.85rem; line-height: 1.35;
  visibility: hidden; pointer-events: none;
}
.cpreview.on { visibility: visible; }
.cp-pic { aspect-ratio: 488 / 680; border-radius: 4.75% / 3.5%; overflow: hidden; background: var(--panel-2); }
.cp-pic img { width: 100%; height: 100%; object-fit: contain; }
.cp-artist { flex-basis: 100%; color: var(--ink-faint); }
.cp-go { margin: 0.35rem 0.1rem 0; color: var(--ink-soft); }
.cp-piclink { display: block; }
.cp-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; margin: 0.55rem 0.1rem 0.2rem; }
.cp-name { color: var(--title); font-size: 0.98rem; }
.cp-why { flex-basis: 100%; color: var(--ink-soft); }
.cp-credit { margin: 0.35rem 0.1rem 0; font-size: 0.75rem; color: var(--ink-faint); }

/* the card in a dialog */
.cardview {
  width: min(92vw, 26rem); max-height: 94vh; padding: 0.8rem; border: 1px solid var(--edge); border-radius: 18px;
  background: var(--panel-solid); color: var(--ink); overflow: visible;
}
.cardview::backdrop { background: rgba(4, 8, 16, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cardview[open] { animation: zoom-in 300ms var(--ease); }
.cardview .cp-pic { width: min(100%, calc(70vh * 488 / 680)); margin: 0 auto; }
.cardview .cp-cap, .cardview .cp-credit { font-family: var(--sans); }
.cardview .cp-name { font-size: 1.1rem; }

/* ---------------------------------------------------------------- impressum (impressum.html) */
.channels + .small { margin-top: 1.2rem; }
.legal-page main { padding-top: var(--top-h); }
.legal-page .top-inner { justify-content: flex-start; }
.legal-page .back { margin-left: auto; font-family: var(--sans); font-weight: 500; font-size: 0.95rem; color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.6em; border-radius: 999px; }
.legal-page .back:hover { color: var(--link-hover); text-decoration: underline; }
.legal { max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.legal h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin-top: 2.2rem; }
.imp-box { padding: 1.2rem 1.4rem; margin: 0 0 1rem; }
.imp-box p:last-child { margin-bottom: 0; }
.imp-address { font-size: 1.08rem; line-height: 1.7; }
/* A field's characters, each a span in a shuffled DOM order among decoys
   (impressum.js): the flexbox puts them back by their order class, the
   decoys take no room and stay invisible, yet both are in textContent and
   innerText (opacity and absolute position keep an element rendered, which
   display: none and visibility: hidden would not). Copying goes through the
   page's buttons, so the jumble cannot be selected. */
.scr-block { user-select: none; -webkit-user-select: none; }
.scr { display: inline-flex; flex-wrap: nowrap; position: relative; white-space: pre; user-select: none; -webkit-user-select: none; }
.scr > span { white-space: pre; }
.scr > .scr-x { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.o0 { order: 0; } .o1 { order: 1; } .o2 { order: 2; } .o3 { order: 3; } .o4 { order: 4; } .o5 { order: 5; } .o6 { order: 6; } .o7 { order: 7; }
.o8 { order: 8; } .o9 { order: 9; } .o10 { order: 10; } .o11 { order: 11; } .o12 { order: 12; } .o13 { order: 13; } .o14 { order: 14; } .o15 { order: 15; }
.o16 { order: 16; } .o17 { order: 17; } .o18 { order: 18; } .o19 { order: 19; } .o20 { order: 20; } .o21 { order: 21; } .o22 { order: 22; } .o23 { order: 23; }
.o24 { order: 24; } .o25 { order: 25; } .o26 { order: 26; } .o27 { order: 27; } .o28 { order: 28; } .o29 { order: 29; } .o30 { order: 30; } .o31 { order: 31; }
.o32 { order: 32; } .o33 { order: 33; } .o34 { order: 34; } .o35 { order: 35; } .o36 { order: 36; } .o37 { order: 37; } .o38 { order: 38; } .o39 { order: 39; }
.o40 { order: 40; } .o41 { order: 41; } .o42 { order: 42; } .o43 { order: 43; } .o44 { order: 44; } .o45 { order: 45; } .o46 { order: 46; } .o47 { order: 47; }
.o48 { order: 48; } .o49 { order: 49; } .o50 { order: 50; } .o51 { order: 51; } .o52 { order: 52; } .o53 { order: 53; } .o54 { order: 54; } .o55 { order: 55; }
.o56 { order: 56; } .o57 { order: 57; } .o58 { order: 58; } .o59 { order: 59; } .o60 { order: 60; } .o61 { order: 61; } .o62 { order: 62; } .o63 { order: 63; }
.imp-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.imp-dl .imp-actions { margin-top: 0; }
.imp-btn { min-height: 44px; padding: 0.4em 1.1em; font-size: 0.92rem; }
.imp-status { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); min-height: 1.4em; margin: 0.6rem 0 0; }
.imp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.2rem; align-items: center; margin: 0 0 1rem; font-family: var(--sans); }
.imp-dl dt { font-weight: 700; color: var(--ink); }
.imp-dl dd { margin: 0; min-height: 46px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; }
@media (max-width: 700px) {
  .legal-page .back { font-size: 0.88rem; padding: 0 0.3em; white-space: nowrap; }
  .imp-dl { grid-template-columns: 1fr; gap: 0.2rem; }
  .imp-dl dd + dt { margin-top: 0.6rem; }
}
.imp-status:empty { min-height: 0; margin: 0; }
.imp-why { font-family: var(--sans); color: var(--ink-soft); font-size: 0.95rem; }
html:not([data-js]) .imp-why { display: none; }
.imp-progress { display: block; width: min(18rem, 100%); height: 6px; margin: 0.8rem 0 0; accent-color: var(--gold); }
.imp-progress[hidden] { display: none; }
.imp-loaded .imp-why { display: none; }
/* the honeypot: a link no person sees, for robots that follow every href
   (crates/baylee-feedback/src/impressum.rs) */
.hp { display: none !important; }
.imp-show[hidden] { display: none; }

/* ---------------------------------------------------------------- targets
   Every link that stands alone (not inside a sentence) is at least 44 px
   tall and wide enough for a finger: the download block's small links, the
   release line, a platform's files and their checksums. */
.dl-sub a, .release-head a, .plat-files a.file, .plat-files .aux a {
  display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0;
}
.plat-files .aux a { min-width: 44px; justify-content: center; }
.dl-sub a { padding: 0 0.25em; }

/* the download lines lie on the painting: the stronger inks there */
.hero .dl-sub, .hero .dl-meta .sep { color: var(--ink-soft); }
.hero .dl-sub a { color: var(--link-hover); }