:root {
  --bg: #06181f;
  --fg: #e8f6f8;
  --muted: #c4dce1;
  --accent: #22d3ee;
  --accent-ink: #042f35;
  --link: #67e8f9;
  --link-hover: #cffafe;
  --donate: #fb7185;
  --glass: rgba(8, 30, 38, .5);
  --line: rgba(255, 255, 255, .18);
  --badge-bg: rgba(34, 211, 238, .18);
  --badge-fg: #a5f3fc;
  --radius: 20px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--fg); line-height: 1.5; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.rule { border: 0; height: 1px; background: var(--line); margin: 14px 0; width: 100%; }

/* Page frame and background artwork */
.page { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; overflow: clip; isolation: isolate; }
.inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }

/* Background art: a 3000px-wide image at its natural size, pinned to the page content
   (not scaled with the window). The hexagons thin out one by one toward the image edges
   and then disappear, so there is never a hard edge. That fade is part of the image. */
.art { position: absolute; z-index: 0; width: 3000px; height: 1000px; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }
/* Landing: anchored to the bottom, behind the Recent releases strip. */
.art--landing { left: 50%; bottom: 0; transform: translateX(-50%); }
/* Downloads and docs: anchored to the top. */
.art--downloads { left: 50%; top: 0; height: 1150px; transform: translateX(-50%); }
/* Below the art, a plain faint hex grid continues to the bottom of the page. It is a tile
   that repeats vertically, drawn on the same grid as the art so the join is invisible. */
.art-tail { position: absolute; z-index: 0; left: 50%; top: 1150px; bottom: 0; width: 3000px; transform: translateX(-50%); background-repeat: repeat-y; background-size: 3000px 138px; pointer-events: none; }
/* Fixed background: the art stays still while the page scrolls. */
.artfix { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
/* About: the spotlight sits at x=1102 in the image. This offset lines that point up with the
   centre of the photo (content column left edge + 162px). If you change the intro layout,
   adjust the 940px below to match. */
.art--about { left: calc(max((100% - 1120px) / 2, 0px) - 940px); top: 0; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px 24px 56px; display: flex; flex-direction: column; gap: 28px; flex: 1; }
.page-title { margin: 0; font-size: 2.5rem; letter-spacing: -.02em; color: #fff; }
.section-title { margin: 0 0 16px; font-size: 1.25rem; color: #fff; }

/* Navigation */
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 32px; }
.nav__brand, .nav__links { display: flex; align-items: center; }
.nav__brand { gap: 12px; }
.nav__name { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.125rem; color: #fff; text-decoration: none; margin-right: 4px; }
.nav__logo { width: 70px; height: 70px; border-radius: 9px; }
.nav__rule { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.social { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: #d5eaee; }
.social:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.social svg { width: 15px; height: 15px; fill: currentColor; }
.nav__links { gap: 24px; font-size: .9375rem; }
.nav__links > a:not(.donate) { color: #d5eaee; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav__links > a:not(.donate):hover { color: #fff; }
.nav__links > a[aria-current="page"] { color: #fff; font-weight: 700; border-bottom-color: var(--accent); box-shadow: 0 9px 12px -9px rgba(34, 211, 238, .95); }
.donate { display: inline-flex; align-items: center; gap: 6px; background: var(--donate); color: #1c1917; font-weight: 600; font-size: .875rem; padding: 8px 16px; border-radius: 999px; text-decoration: none; }
.donate:hover { color: #1c1917; filter: brightness(1.08); }
.donate svg { width: 14px; height: 14px; }

/* Downloads page: the nav stays at the top while the page scrolls. It gets a frosted
   background once the page has scrolled (the is-stuck class is added by app.js). */
.nav--sticky { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.nav--sticky.is-stuck { background: rgba(6, 24, 31, .72); border-bottom-color: var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
@supports not (backdrop-filter: blur(1px)) { .nav--sticky.is-stuck { background: rgba(6, 24, 31, .94); } }

/* Glass cards, buttons, badges */
.card { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: var(--radius); }
@supports not (backdrop-filter: blur(1px)) { .card { background: rgba(8, 30, 38, .88); } }
.tile { padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: transform .15s, border-color .15s; }
.tile:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .4); }
.tile__title { margin: 0; font-size: 1.0625rem; color: #fff; }
.tile__title--tool { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.tile__friendly { margin-top: 2px; font-size: .9375rem; font-weight: 500; color: #d5eaee; }
.tile__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.tile__head .tile__title--tool { min-width: 0; }
.tile__id { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tile__id .badge { flex: none; }
.tile__date { margin-left: auto; }
.tile__friendly + p { margin-top: 8px; }
.badge--category { background: transparent; border: 1px solid rgba(165, 243, 252, .45); }
.tile p { margin: 4px 0 0; line-height: 1.5; font-size: .875rem; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.row--start { justify-content: flex-start; }
.badge { background: var(--badge-bg); color: var(--badge-fg); font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: auto; font-size: .875rem; font-weight: 600; }
.actions a { text-decoration: none; }
.actions a:hover { text-decoration: underline; }
.btn { background: var(--accent); color: var(--accent-ink); padding: 9px 16px; border-radius: 10px; }
.actions a.btn:hover { color: var(--accent-ink); text-decoration: none; filter: brightness(1.08); }
.shot { width: 100%; height: 96px; object-fit: cover; border-radius: 10px; display: block; }
.shot--empty { position: relative; overflow: hidden; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.shot--empty::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 25% 30%, rgba(34, 211, 238, .15), transparent 15%), radial-gradient(circle at 75% 70%, rgba(14, 116, 144, .3), transparent 20%); filter: blur(14px); }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--tight { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--releases { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Recent release cards: a small screenshot beside the title keeps the card close to its
   old height. */
.release__top { display: flex; align-items: stretch; flex: 1; gap: 14px; }
.release__shot { flex: 0 0 96px; width: 96px; height: auto; min-height: 72px; border-radius: 10px; object-fit: cover; display: block; }
.release__meta { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.release__meta > .row { margin-top: auto; }
.release__meta .tile__title--tool { font-size: 1.125rem; }
.release__meta .tile__friendly { margin-top: 0; }

/* Downloads toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.search { flex: 1 1 220px; min-width: 0; padding: 11px 16px; font: inherit; color: var(--fg); background: var(--glass); border: 1px solid var(--line); border-radius: 12px; }
.search::placeholder { color: #9bbcc4; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-size: .875rem; font-weight: 600; color: #d5eaee; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; cursor: pointer; }
.chip:hover { color: #fff; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Landing hero */
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; padding: 24px 0; }
.hero__logo { width: 1254px; max-width: 70vw; height: auto; }
.hero__logo--empty { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 24px; border-radius: 64px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(34, 211, 238, .22), rgba(14, 116, 144, .22)); color: var(--badge-fg); font-weight: 600; font-size: .9375rem; }
.hero__tagline { margin: 0; max-width: 600px; font-size: 1.25rem; color: #b6d2d8; }

/* About */
.intro { padding: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.photo { width: 220px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.photo--empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; background: linear-gradient(135deg, rgba(34, 211, 238, .2), rgba(14, 116, 144, .2)); color: var(--badge-fg); font-size: .875rem; font-weight: 600; }
.intro__text { flex: 1 1 360px; display: flex; flex-direction: column; gap: 6px; }
.intro__text .tile__title { font-size: 1.375rem; }
.intro__text p { margin: 0; font-size: 1rem; line-height: 1.65; }

/* Docs */
.docs { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.docs__nav { flex: 0 0 240px; padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: .9375rem; }
.docs__nav a { text-decoration: none; color: #d5eaee; }
.docs__nav a:hover { color: #fff; }
.docs__nav a[aria-current="page"] { color: #fff; font-weight: 700; }
.prose { flex: 1 1 480px; min-width: 0; padding: 28px 32px; line-height: 1.7; }
.prose h1 { margin: 0 0 12px; font-size: 2rem; color: #fff; }
.prose h2 { margin: 28px 0 8px; font-size: 1.375rem; color: #fff; }
.prose h3 { margin: 22px 0 6px; font-size: 1.125rem; color: #fff; }
.prose p, .prose li { max-width: 72ch; color: var(--muted); }
.prose code { background: rgba(255, 255, 255, .1); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.prose pre { background: rgba(0, 0, 0, .35); padding: 14px 16px; border-radius: 12px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose img { max-width: 100%; border-radius: 12px; }

@media (max-width: 720px) {
  .nav { padding: 16px 20px; }
  .wrap { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .nav--sticky { transition: none; }
  .tile:hover { transform: none; }
}