@gjsify/site 0.0.0-stage → 0.63.1-next.236

package/lib/client/site.css

@@ -0,0 +1,1286 @@
+/*
+ * One stylesheet for the whole page, driven by the tokens below. The app's own colours only ever
+ * reach `--brand`, which paints the masthead; every other surface is the site's own neutral
+ * palette, so a pale brand colour cannot make the body text unreadable.
+ */
+
+:root {
+  color-scheme: light dark;
+
+  --brand: var(--brand-light, #84bbfd);
+  /* Text on the brand. A colour cannot be measured in CSS, so the generator measures the app's
+   * `<branding>` against near-black and white and writes the winner into `--band-fg-*`; these
+   * fallbacks belong to the two default brand colours above. */
+  --band-fg: var(--band-fg-light, #10233b);
+  /* Pills, dividers and hover fills drawn on the brand: the text colour, thinned. */
+  --band-line: color-mix(in srgb, var(--band-fg) 18%, transparent);
+  --band-tint: color-mix(in srgb, var(--band-fg) 10%, transparent);
+
+  --bg: #fff;
+  --surface: #f6f5f4;
+  --fg: #1d1d20;
+  --muted: #5e5c64;
+  --line: rgb(0 0 0 / 0.1);
+  --accent: #1c71d8;
+  --accent-fg: #fff;
+  --shadow: 0 8px 24px rgb(0 0 0 / 0.14);
+  /* Lifts the screenshot off the brand band without drawing a card around it. */
+  --shot-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.25);
+
+  --radius: 10px;
+  --radius-lg: 14px;
+  --max: 64rem;
+  --text: 45rem;
+  --shot-h: 28rem;
+
+  font-family: "Adwaita Sans", Inter, "Segoe UI", system-ui, -apple-system, "Cantarell", sans-serif;
+  line-height: 1.5;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --brand: var(--brand-dark, #1a5fb4);
+    --band-fg: var(--band-fg-dark, #fff);
+    --bg: #1a1a1c;
+    --surface: #26262a;
+    --fg: #f6f5f4;
+    --muted: #b6b4b1;
+    --line: rgb(255 255 255 / 0.11);
+    --accent: #3584e4;
+    --shadow: 0 8px 24px rgb(0 0 0 / 0.5);
+    --shot-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.45);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+}
+
+a {
+  color: inherit;
+}
+
+img,
+picture {
+  max-width: 100%;
+}
+
+h1,
+h2,
+h3 {
+  line-height: 1.2;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.icon {
+  display: block;
+  width: 1em;
+  height: 1em;
+  flex: none;
+}
+
+/* One content width for the whole page: the bar, the hero, the facts, the text and the footer all
+ * start and end on the same two lines. */
+.bar-inner,
+.hero-inner,
+.badges,
+.column,
+.footer-inner {
+  width: min(100% - 2rem, var(--max));
+  margin-inline: auto;
+}
+
+/* Masthead: bar, hero, facts and screenshots on the app's own colour */
+
+.masthead {
+  background: var(--brand);
+  color: var(--band-fg);
+}
+
+main {
+  padding-block-start: 2.5rem;
+}
+
+/* The bar is painted in the same colour as the masthead below it, so at rest the two read as one
+ * surface and, once it sticks over the text, it is already an opaque bar — no script has to notice
+ * the moment it detaches. */
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--brand);
+  color: var(--band-fg);
+}
+
+.bar-inner {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  min-height: 3.5rem;
+}
+
+/* Scrolling shrinks the bar and lifts it off the page — driven by the scroll position itself, so
+ * no script is involved. A browser without scroll-driven animations keeps the resting bar, which
+ * is legible at every scroll position because it is opaque. */
+@supports (animation-timeline: scroll()) {
+  .topbar,
+  .bar-inner {
+    animation: linear both;
+    animation-timeline: scroll(root block);
+    animation-range: 0 6rem;
+  }
+
+  .topbar {
+    animation-name: bar-detach;
+  }
+
+  .bar-inner {
+    animation-name: bar-compact;
+  }
+
+  /* The shrinking is the motion here; the shadow alone still marks the detached bar. */
+  @media (prefers-reduced-motion: reduce) {
+    .bar-inner {
+      animation-name: none;
+    }
+  }
+}
+
+@keyframes bar-detach {
+  to {
+    box-shadow: 0 1px 12px rgb(0 0 0 / 0.22);
+  }
+}
+
+@keyframes bar-compact {
+  to {
+    min-height: 2.75rem;
+  }
+}
+
+.bar-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.bar-brand img {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.bar-end {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-inline-start: auto;
+}
+
+/* On the brand colour the muted greys of the text column would be unreadable, so the bar fades its
+ * own text colour instead and restores it fully on hover. */
+.bar-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.9rem;
+  text-decoration: none;
+  opacity: 0.75;
+}
+
+.bar-link:hover,
+.bar-languages a:hover {
+  opacity: 1;
+}
+
+.bar-languages ul,
+.footer-languages ul,
+.card-list,
+.os-group ul,
+.tags,
+.carousel-track,
+.footer-legal,
+.languages-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.bar-languages ul,
+.footer-languages ul {
+  display: flex;
+  gap: 0.75rem;
+  font-size: 0.85rem;
+}
+
+.bar-languages a {
+  text-decoration: none;
+  opacity: 0.75;
+}
+
+.footer-languages a {
+  color: var(--muted);
+  text-decoration: none;
+}
+
+.bar-languages [aria-current],
+.footer-languages [aria-current] {
+  font-weight: 700;
+}
+
+.hero-inner {
+  display: flex;
+  align-items: center;
+  gap: 1.75rem;
+  padding-block: 2.5rem 1.75rem;
+}
+
+.hero-icon {
+  position: relative;
+  flex: none;
+  isolation: isolate;
+}
+
+/* The soft glow: the icon again, blown up and blurred behind itself. */
+.hero-icon::before {
+  content: "";
+  position: absolute;
+  inset: -18%;
+  z-index: -1;
+  background-image: var(--icon-url);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  filter: blur(26px) saturate(1.5);
+  opacity: 0.55;
+}
+
+.hero-icon img {
+  display: block;
+  width: 7rem;
+  height: 7rem;
+}
+
+.hero-text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 2.75rem);
+  letter-spacing: -0.02em;
+}
+
+.hero-by {
+  margin: 0.25rem 0 0;
+  opacity: 0.8;
+}
+
+/* Buttons and the download split */
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1.15rem;
+  border: none;
+  border-radius: var(--radius);
+  background: var(--accent);
+  color: var(--accent-fg);
+  font: inherit;
+  font-weight: 700;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.button:hover {
+  background: color-mix(in srgb, var(--accent) 88%, var(--fg));
+}
+
+.button .icon {
+  font-size: 1.1em;
+}
+
+.download {
+  flex: none;
+  margin-inline-start: auto;
+  min-width: 0;
+}
+
+.download-split {
+  display: flex;
+  gap: 2px;
+}
+
+.download-cta {
+  border-radius: var(--radius) 0 0 var(--radius);
+}
+
+.download-toggle {
+  padding-inline: 0.6rem;
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+
+/* The accent would have to be contrasted against the app's colour, which is unknowable here. The
+ * band's text colour was already measured against it, so the button inverts that pair and is
+ * readable on any brand. */
+.masthead .download-split .button {
+  background: var(--band-fg);
+  color: var(--brand);
+}
+
+.masthead .download-split .button:hover {
+  background: color-mix(in srgb, var(--band-fg) 86%, var(--brand));
+}
+
+/* Badges */
+
+/* One equal column per fact, however many facts there are, spread over the hero's width. */
+.badges {
+  display: grid;
+  grid-template-columns: repeat(var(--badge-count, 4), minmax(0, 1fr));
+  gap: 0.75rem 1rem;
+  list-style: none;
+  padding: 1.25rem 0 0.5rem;
+  border-block-start: 1px solid var(--band-line);
+}
+
+.badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  min-width: 0;
+  text-align: center;
+}
+
+.badge-pill {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 999px;
+  background: var(--band-tint);
+  font-size: 1.15rem;
+}
+
+/* The platform badge draws one glyph per system, so its chip grows into a pill instead. A
+ * Firefox and a Chromium glyph are only distinguishable at a size the others do not need. */
+.badge-platforms {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 1.6rem;
+}
+
+.badge:has(.badge-platforms) .badge-pill {
+  width: auto;
+  min-width: 2.5rem;
+  height: 2.75rem;
+  padding-inline: 0.85rem;
+}
+
+/* Hovering or tabbing to a platform brings up the colour that system is known by; at rest they all
+ * share the band's text colour, so the row stays one row and not a fruit salad. */
+.platform {
+  color: inherit;
+  transition: color 150ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .platform {
+    transition: none;
+  }
+}
+
+.platform:hover {
+  color: var(--platform-color);
+}
+
+/* A glyph is not focusable and a touch screen cannot hover, so there the colours are simply on. */
+@media (hover: none) {
+  .platform {
+    color: var(--platform-color);
+  }
+}
+
+.platform-linux {
+  --platform-color: #f5c211;
+}
+
+.platform-darwin {
+  --platform-color: #d9d9dd;
+}
+
+.platform-win32 {
+  --platform-color: #3584e4;
+}
+
+.platform-android {
+  --platform-color: #3ddc84;
+}
+
+.platform-web {
+  --platform-color: #62a0ea;
+}
+
+.platform-firefox {
+  --platform-color: #ff7139;
+}
+
+.platform-chromium {
+  --platform-color: #4285f4;
+}
+
+/* Kept in the flow even when a badge has no value, so every label sits on the same line. */
+.badge-value {
+  line-height: 1.5;
+  min-height: 1.5em;
+  font-weight: 700;
+  font-size: 0.95rem;
+  /* A long licence id must wrap inside the badge instead of widening the row. */
+  overflow-wrap: anywhere;
+}
+
+.badge-label {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+/* Screenshot band — the bottom of the masthead, whose colour it already sits on. */
+
+.band {
+  padding-block: 1.5rem 3rem;
+}
+
+.carousel {
+  display: block;
+  position: relative;
+}
+
+/* One slide fills the track, so the snapped screenshot is centred and no neighbour peeks in. */
+.carousel-track {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+
+.carousel-track::-webkit-scrollbar {
+  display: none;
+}
+
+.slide {
+  flex: 0 0 100%;
+  scroll-snap-align: center;
+}
+
+/* Shrink-wrapped around the screenshot: the rounded corners and the shadow belong to the image,
+ * not to a box the letterboxed image sits in. */
+.slide figure {
+  margin: 0;
+  width: fit-content;
+  max-width: 86vw;
+  margin-inline: auto;
+  position: relative;
+}
+
+/* A fixed track height keeps mixed aspect ratios from resizing the band slide by slide; a shot
+ * that does not fill it sits centred rather than stretched. */
+.slide picture {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--shot-h);
+}
+
+/* `--shot-w` is the CSS width this screenshot's renditions were cut for: at that width a 2560px
+ * source is a 2× image, and above it the browser would be upscaling. Width and max-height
+ * together shrink-wrap the artwork — `object-fit: contain` would letterbox it instead, and the
+ * shadow would then be drawn around the empty strip. */
+.slide img {
+  width: min(100%, var(--shot-w, 100%));
+  height: auto;
+  max-height: 100%;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shot-shadow);
+}
+
+/* A window shot carries its own rounded corners and shadow (like on Flathub): show it as it is. */
+.slide picture[data-frame="none"] img,
+.lightbox picture[data-frame="none"] img {
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.slide figcaption {
+  margin-top: 0.85rem;
+  text-align: center;
+  font-size: 0.9rem;
+}
+
+.slide-expand,
+.carousel-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--bg) 85%, transparent);
+  backdrop-filter: blur(8px);
+  color: var(--fg);
+  cursor: pointer;
+  padding: 0;
+}
+
+.slide-expand {
+  position: absolute;
+  inset-block-start: 0.6rem;
+  inset-inline-end: 0.6rem;
+  width: 2rem;
+  height: 2rem;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.slide:hover .slide-expand,
+.slide-expand:focus-visible {
+  opacity: 1;
+}
+
+.carousel-arrow {
+  position: absolute;
+  inset-block-start: calc(var(--shot-h) / 2);
+  translate: 0 -50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.1rem;
+  z-index: 1;
+}
+
+/* At the edges of the band: a screenshot shrink-wraps to its own aspect, so there is no image edge
+ * to pin them to that would not move from slide to slide. */
+.carousel-prev {
+  inset-inline-start: clamp(0.75rem, 3vw, 2.5rem);
+}
+
+.carousel-next {
+  inset-inline-end: clamp(0.75rem, 3vw, 2.5rem);
+}
+
+.carousel-dots {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  margin: 1rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.carousel-dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: currentcolor;
+  opacity: 0.35;
+  cursor: pointer;
+}
+
+.carousel-dot[aria-current="true"] {
+  opacity: 1;
+}
+
+.lightbox {
+  border: none;
+  padding: 0;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: 100vw;
+  height: 100vh;
+  background: transparent;
+  color: #fff;
+}
+
+.lightbox::backdrop {
+  background: rgb(0 0 0 / 0.94);
+}
+
+.lightbox figure {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  margin: 0;
+  padding: 1.5rem;
+}
+
+/* The cloned figure loses the .slide sizing rules, so the lightbox caps it itself. */
+.lightbox picture {
+  display: flex;
+  min-height: 0;
+  max-width: 100%;
+}
+
+/* The clone keeps the picture's `--shot-w`, so the full-screen view stops at the same width the
+ * renditions were cut for instead of upscaling the file the browser already fetched. */
+.lightbox img {
+  width: min(100%, var(--shot-w, 100%));
+  height: auto;
+  /* Leaves room for the figure padding, the gap and the caption. */
+  max-height: calc(100vh - 8rem);
+  object-fit: contain;
+  border-radius: var(--radius-lg);
+}
+
+.lightbox figcaption {
+  text-align: center;
+}
+
+.lightbox .dialog-close {
+  position: absolute;
+  inset-block-start: 1rem;
+  inset-inline-end: 1rem;
+  color: #fff;
+}
+
+/* Text column */
+
+.about h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1.5rem;
+}
+
+.about p {
+  color: var(--fg);
+}
+
+.about ul {
+  padding-inline-start: 1.25rem;
+}
+
+.card {
+  display: block;
+  margin-block: 2rem;
+  padding: 1.25rem 1.5rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+}
+
+.release-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.release-head h2,
+.release-head h3 {
+  margin: 0;
+  font-size: 1.15rem;
+}
+
+.date-pill {
+  flex: none;
+  margin: 0;
+  padding: 0.1rem 0.6rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--bg);
+  color: var(--muted);
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
+.release-body ul {
+  padding-inline-start: 1.25rem;
+}
+
+.release-body.clamped {
+  max-height: 11rem;
+  overflow: hidden;
+  mask-image: linear-gradient(to bottom, #000 60%, transparent);
+}
+
+.release-more {
+  margin-top: 0.5rem;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--accent);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.older summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  cursor: pointer;
+  list-style: none;
+}
+
+.older summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary-chevron {
+  margin-inline-start: auto;
+  color: var(--muted);
+}
+
+.older[open] .summary-chevron {
+  rotate: 180deg;
+}
+
+.release-old {
+  margin-top: 1.5rem;
+}
+
+/* Link cards, also the download rows */
+
+.links h2,
+.support h2 {
+  font-size: 1.15rem;
+}
+
+.card-list,
+.os-group ul {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.card-list li + li,
+.os-group li + li {
+  border-top: 1px solid var(--line);
+}
+
+.card-list a,
+.target a,
+.target-link {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  padding: 0.7rem 1rem;
+  text-decoration: none;
+  color: inherit;
+}
+
+.card-list a:hover,
+.target a:hover {
+  background: color-mix(in srgb, var(--fg) 6%, transparent);
+}
+
+/* A target that is announced but cannot be downloaded yet: same row, no hover, muted. */
+.target-link {
+  cursor: default;
+}
+
+.target-link .target-icon,
+.target-link .target-name {
+  opacity: 0.6;
+}
+
+.link-icon,
+.target-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--muted);
+  font-size: 1rem;
+}
+
+.link-text,
+.target-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.link-title,
+.target-name {
+  font-weight: 600;
+}
+
+.link-url,
+.target-meta {
+  color: var(--muted);
+  font-size: 0.78rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.link-external {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--muted);
+}
+
+.target-size {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--muted);
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Tags */
+
+.tags-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem 3rem;
+  margin-block: 2rem;
+}
+
+.tag-group h3 {
+  margin: 0 0 0.5rem;
+  color: var(--muted);
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tags li {
+  padding: 0.15rem 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface);
+  font-size: 0.85rem;
+}
+
+/* Dialogs */
+
+.download-dialog,
+.support-dialog {
+  width: 34rem;
+  max-width: min(34rem, calc(100vw - 2rem));
+  max-height: 85vh;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  background: var(--bg);
+  color: var(--fg);
+  overflow: auto;
+}
+
+.download-dialog::backdrop,
+.support-dialog::backdrop {
+  background: rgb(0 0 0 / 0.5);
+}
+
+.dialog-head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--line);
+  background: var(--bg);
+}
+
+.dialog-head h2 {
+  margin: 0;
+  font-size: 1.05rem;
+}
+
+.dialog-close {
+  display: inline-flex;
+  padding: 0.4rem;
+  border: none;
+  border-radius: 8px;
+  background: none;
+  color: var(--muted);
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.dialog-close:hover {
+  background: var(--surface);
+  color: var(--fg);
+}
+
+.os-tabs {
+  display: flex;
+  gap: 0.35rem;
+  padding: 0.9rem 1.25rem 0;
+}
+
+.os-tab {
+  display: inline-flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.25rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--muted);
+  font: inherit;
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+
+.os-tab .icon {
+  font-size: 1.1rem;
+}
+
+.os-tab[aria-selected="true"] {
+  border-color: transparent;
+  background: var(--accent);
+  color: var(--accent-fg);
+}
+
+.os-groups {
+  padding: 0 1.25rem;
+}
+
+.os-group h3 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 1.1rem 0 0.5rem;
+  font-size: 0.95rem;
+}
+
+/* With tabs visible the group heading only repeats the selected tab. */
+.os-tabs:not([hidden]) ~ .os-groups h3 {
+  display: none;
+}
+
+.os-tabs:not([hidden]) ~ .os-groups .os-group ul {
+  margin-top: 1rem;
+}
+
+.os-note {
+  margin: 0.5rem 0 0;
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.dialog-foot {
+  margin: 1rem 0 0;
+  padding: 0 1.25rem 1.25rem;
+  font-size: 0.9rem;
+}
+
+.dialog-foot a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+/* Without JavaScript the dialog is not a modal but a panel: everything stays reachable. */
+app-download:not([data-enhanced]) dialog,
+app-support:not([data-enhanced]) dialog {
+  display: block;
+  position: static;
+  width: 100%;
+  max-width: none;
+  max-height: none;
+  margin-block-start: 1rem;
+  overflow: visible;
+}
+
+app-download:not([data-enhanced]) .dialog-head,
+app-support:not([data-enhanced]) .dialog-head {
+  position: static;
+}
+
+app-download:not([data-enhanced]) .download-toggle {
+  display: none;
+}
+
+/* The inline panel is taller than the name, so the hero reads top down, not centred. */
+.hero-inner:has(app-download:not([data-enhanced])) {
+  align-items: flex-start;
+}
+
+.support {
+  margin-block: 2rem;
+}
+
+/* Footer */
+
+.footer {
+  margin-top: 3rem;
+  padding-block: 2rem 3rem;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.footer-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.footer p {
+  margin: 0;
+}
+
+.footer-source a,
+.footer-made a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.footer-legal {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.25rem;
+}
+
+/* The language picker shown when no page has been chosen yet. */
+
+.root main {
+  width: min(100% - 2rem, var(--text));
+  margin-inline: auto;
+  padding-block: 4rem;
+  text-align: center;
+}
+
+.languages-list {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+/* Breakpoints */
+
+@media (max-width: 1000px) {
+  :root {
+    --shot-h: 22rem;
+  }
+}
+
+@media (max-width: 760px) {
+  .hero-inner {
+    flex-wrap: wrap;
+    padding-block: 2.25rem 1.5rem;
+  }
+
+  .download {
+    flex: 1 1 100%;
+    margin-inline-start: 0;
+  }
+
+  .download-split {
+    width: 100%;
+  }
+
+  .download-cta {
+    flex: 1;
+  }
+}
+
+@media (max-width: 600px) {
+  :root {
+    --shot-h: 15rem;
+  }
+
+  /* A portrait phone shot would be tiny in a 15rem track. When any slide has one, the track is as
+   * tall for all of them (no jump between slides) and landscape slides sit centred in it. */
+  .carousel[data-portrait] {
+    --shot-h: min(70svh, 40rem);
+  }
+
+  .carousel[data-portrait] .slide {
+    display: flex;
+    align-items: center;
+  }
+
+  .carousel[data-portrait] .slide:not([data-portrait]) picture {
+    height: 15rem;
+  }
+
+  .hero-inner {
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  /* Two columns on a phone; an odd last badge takes the whole final row instead of hanging left. */
+  .badges {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1.1rem 1rem;
+  }
+
+  .badges[data-odd] .badge:last-child {
+    grid-column: 1 / -1;
+  }
+
+  .band {
+    padding-block: 1.75rem;
+  }
+
+  .carousel-arrow {
+    display: none;
+  }
+
+  .card {
+    padding: 1rem 1.1rem;
+  }
+
+  .release-head {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.35rem;
+  }
+
+  .tags-section {
+    gap: 1.25rem;
+  }
+
+  .os-tab span:not(.icon) {
+    font-size: 0.7rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel-track {
+    scroll-behavior: auto;
+  }
+
+  .slide-expand {
+    transition: none;
+  }
+}
+
+/* Bank transfer card in the support dialog */
+
+.card-list .sepa {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem 1.25rem;
+  padding: 1rem;
+}
+
+.sepa-text {
+  flex: 1 1 14rem;
+  min-width: 0;
+}
+
+.sepa-text h3 {
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
+}
+
+.sepa-details {
+  margin: 0;
+}
+
+.sepa-row {
+  padding-block: 0.3rem;
+}
+
+.sepa-row dt {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.sepa-row dd {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sepa-value {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.9rem;
+  user-select: all;
+}
+
+.sepa-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.2rem 0.55rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.sepa-copy[hidden] {
+  display: none;
+}
+
+.sepa-copy:hover {
+  background: color-mix(in srgb, var(--fg) 6%, var(--bg));
+}
+
+.sepa-qr {
+  flex: none;
+  margin: 0 auto;
+  text-align: center;
+}
+
+/* Scanners need dark modules on a light ground: the SVG carries its own white quiet zone in both themes. */
+.qr {
+  display: block;
+  width: 9.5rem;
+  height: 9.5rem;
+  border-radius: 8px;
+}
+
+.sepa-qr figcaption {
+  margin-top: 0.4rem;
+  color: var(--muted);
+  font-size: 0.78rem;
+}