/* Quasarball: quasarball.com

   Two sources, on purpose:
   - The studio's system, from quailegg.games (public/styles.css and
     brand/README.md): Fredoka headings, pill buttons with a hard bottom
     edge, links underlined in beak orange, beak focus rings on dark ground
     and ink ones on light, the speckled cream shell and its zigzag crack,
     and the same star tile the studio's games stage uses.
   - The game's own look, from ui/design/tokens.gd: the ground #0a0c13 the
     new emblem fades into, the surfaces, the amber primary, the pink brand
     color, and the brick colors measured out of the Amiga sprite sheet.

   The site is dark on purpose. The studio site is light, but its games sit
   on a dark stage; this is that stage. Its footer is the studio's cream
   shell, so every page ends in the studio's colors. */

@font-face {
  font-family: "Fredoka";
  src: url("/fonts/fredoka-latin-wght.woff2?v=99d6c78e04") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans-latin-regular.woff2?v=3af6af0024") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans-latin-bold.woff2?v=078c00d3dd") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* The game (ui/design/tokens.gd) */
  --ground: #0a0c13;
  --surface: #141926;
  --surface-2: #1c2233;
  --card: #121724;
  --field: #121428;
  --field-violet: #241a44;
  --text: #eef1f7;
  --text-2: #a6afc3;
  --text-3: #8f98ad;
  --brand: #ef6fa8;
  --primary: #ffb020;
  --primary-hover: #ffc04d;
  --primary-deep: #a86800;
  --primary-ink: #1b1203;
  --hairline: rgba(255, 255, 255, 0.08);
  --outline: rgba(255, 255, 255, 0.16);

  /* Bricks, face and lit edge, and the ball */
  --blue: #3274b8;   --blue-lit: #70b0ee;
  --green: #9ac53d;  --green-lit: #d0f080;
  --pink: #aa2e74;   --pink-lit: #ee70b1;
  --purple: #8a20cc; --purple-lit: #c77af5;
  --ball-1: #fff956; --ball-2: #ffcb00; --ball-3: #ff8900; --ball-4: #ff6600;

  /* The studio (quailegg.games brand/README.md) */
  --ink: #111111;
  --shell: #ede4c8;
  --spot: #5c3a22;
  --beak: #f0963c;
  --beak-deep: #b85f14;
  --paper: #fffcf3;

  /* Names the private stats page's stylesheet (css/download-stats.css) uses */
  --bg: var(--ground);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --muted: var(--text-2);
  --accent: #b040f0;
  --accent-2: var(--brand);
  --hilite: var(--primary);
  --line: rgba(176, 64, 240, 0.22);
  --line-soft: var(--hairline);
  --radius: 14px;

  --max-wide: 72rem;
  --gutter: 1rem;
  --zz: 14px;
  --display: "Fredoka", ui-rounded, system-ui, sans-serif;
  --font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* The studio's tiles: eggshell speckles and a night sky */
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%235C3A22'%3E%3Ccircle cx='28' cy='38' r='6' opacity='.09'/%3E%3Ccircle cx='122' cy='20' r='3' opacity='.08'/%3E%3Ccircle cx='205' cy='66' r='8' opacity='.06'/%3E%3Ccircle cx='76' cy='118' r='4' opacity='.09'/%3E%3Ccircle cx='170' cy='146' r='5.5' opacity='.08'/%3E%3Ccircle cx='22' cy='196' r='3.5' opacity='.08'/%3E%3Ccircle cx='112' cy='214' r='7' opacity='.05'/%3E%3Ccircle cx='236' cy='228' r='2.5' opacity='.09'/%3E%3Ccircle cx='250' cy='130' r='3' opacity='.06'/%3E%3C/g%3E%3C/svg%3E");
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='18' cy='30' r='1.1' opacity='.5'/%3E%3Ccircle cx='96' cy='12' r='.8' opacity='.35'/%3E%3Ccircle cx='170' cy='52' r='1.4' opacity='.45'/%3E%3Ccircle cx='60' cy='98' r='.9' opacity='.3'/%3E%3Ccircle cx='140' cy='124' r='1.2' opacity='.4'/%3E%3Ccircle cx='205' cy='160' r='.8' opacity='.35'/%3E%3Ccircle cx='30' cy='176' r='1.3' opacity='.4'/%3E%3Ccircle cx='110' cy='200' r='.9' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; --zz: 18px; }
}
@media (min-width: 64rem) {
  :root { --gutter: 2rem; }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: 1rem; }
@media (min-width: 48rem) {
  [id] { scroll-margin-top: 5.5rem; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img, svg, picture { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
code { font-family: var(--mono); font-size: 0.88em; }
strong { font-weight: 700; color: #fff; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Links and focus: the studio's treatment. Beak rings on dark ground; the
   cream footer switches them to ink, as the studio does on its cream. */
a {
  color: var(--text);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--beak);
}
a:hover { color: var(--beak); }

::selection { background: var(--beak); color: var(--ink); }

:focus-visible { outline: 3px solid var(--beak); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--beak); color: var(--ink); font-weight: 700;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; color: var(--ink); }

.wrap, .container {
  width: min(100% - 2 * var(--gutter), var(--max-wide));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Kept for the private stats page */
.eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--display); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand);
}

/* ---------- Buttons: the studio's pill with a hard bottom edge ---------- */
.btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--primary-ink);
  --btn-edge: var(--primary-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem;
  padding: 0.65rem 1.4rem;
  border: 3px solid var(--btn-edge);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display); font-weight: 600; font-size: 1.08rem; line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--btn-edge);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover {
  color: var(--btn-fg);
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--btn-edge), 0 14px 34px -8px rgba(255, 176, 32, 0.6);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge); }
.btn--large { min-height: 3.75rem; padding: 0.8rem 2rem; font-size: 1.3rem; }
.btn__icon { width: 1.35em; height: 1.35em; flex: none; }
/* A second, quieter button beside a primary one. */
.btn--quiet {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-edge: #2a3146;
}
.btn--quiet:hover { background: #262d44; box-shadow: 0 6px 0 var(--btn-edge); }
.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text-2);
  --btn-edge: #2a3146;
  background: var(--btn-bg);
  cursor: not-allowed; transform: none;
  box-shadow: 0 4px 0 var(--btn-edge);
}

/* The studio's status pill, as on its game cards */
.status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0;
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-family: var(--display); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.status::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.3);
}

/* ---------- Header ---------- */
.site-header {
  position: relative; z-index: 50;
  background: rgba(10, 12, 19, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  width: min(100% - 2 * var(--gutter), var(--max-wide));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.55rem 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--text); text-decoration: none;
}
.brand:hover { color: #fff; }
.brand img { width: 3rem; height: 3rem; margin: -0.35rem -0.2rem -0.35rem -0.45rem; }
.brand span {
  font-family: var(--display); font-weight: 600; font-size: 1.35rem;
  letter-spacing: -0.01em; white-space: nowrap;
}

.nav { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.nav a {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0.4rem 0.95rem;
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  color: var(--text); text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.nav a:hover { background: var(--surface); border-color: var(--outline); color: #fff; }
.nav a.nav__cta { background: var(--primary); border-color: var(--primary-deep); color: var(--primary-ink); }
.nav a.nav__cta:hover { background: var(--primary-hover); }

@media (max-width: 47.99rem) {
  .site-header nav { width: 100%; }
  .nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
  .nav a {
    padding: 0.4rem 0.25rem; font-size: 0.98rem;
    background: var(--surface); border-color: var(--outline);
  }
}
@media (min-width: 48rem) {
  .site-header { position: sticky; top: 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow-x: clip;
  padding: 2rem 0 3.5rem;
  background-color: var(--ground);
  background-image:
    radial-gradient(34rem 30rem at 78% 30%, rgba(255, 137, 0, 0.16), transparent 62%),
    radial-gradient(40rem 30rem at 70% 36%, rgba(36, 26, 68, 0.9), transparent 70%),
    var(--stars);
}
.hero__inner {
  display: grid;
  grid-template-areas: "art" "copy";
  gap: 0.5rem;
  align-items: center;
}
.hero__copy { grid-area: copy; }
.hero__title {
  margin: 0.9rem 0 0;
  font-size: clamp(3.4rem, 1.2rem + 10vw, 8rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: #fff8ec;
  text-shadow: 0 0 60px rgba(255, 137, 0, 0.35);
}
.hero__by {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0.8rem 0 0;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem); line-height: 1.25;
  color: var(--brand);
}
.hero__by img { width: 1.9rem; height: auto; flex: none; }
.hero__pitch { max-width: 34rem; margin: 1rem 0 1.6rem; font-size: 1.15rem; color: #d7dbe7; }

.hero__cta { display: grid; justify-items: start; gap: 0.7rem; }
/* The demo sits under the store badge and is the quieter of the two. */
.hero__demo-lead { max-width: 32rem; margin: 0; font-size: 0.95rem; color: var(--text-2); }
.hero__meta { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hero__others { margin: 0; font-size: 0.95rem; color: var(--text-2); }
.hero__note {
  max-width: 32rem; margin: 0; padding: 0.7rem 0.9rem;
  border-left: 4px solid var(--primary); border-radius: 0 0.5rem 0.5rem 0;
  background: rgba(255, 176, 32, 0.08);
  font-size: 0.95rem; color: #f3e4c8;
}

/* The emblem on its orbit, the way the studio's hero puts its quail in a
   halo and floats the game icons round it. Here the stickers are tokens. */
.hero__art {
  grid-area: art;
  position: relative;
  width: min(86vw, 24rem);
  aspect-ratio: 1;
  margin-inline: auto;
}
.hero__glow {
  position: absolute; inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 173, 0, 0.42) 0%, rgba(255, 102, 0, 0.14) 40%, transparent 70%);
  filter: blur(8px);
  animation: breathe 5s ease-in-out infinite;
}
.hero__orbit {
  position: absolute; inset: 1%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.16);
  animation: spin 90s linear infinite;
}
/* Drawn at 95% so its farthest reach -- the upper-right jet and shards, 0.96
   of the emblem's half-width -- ends about 6% of the radius inside the orbit
   (inset 1%, so 0.98) instead of the dashed line cutting through the jet. */
.hero__emblem { position: absolute; inset: 2.5%; width: 95%; height: 95%; }
.token {
  position: absolute;
  width: 19%;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
  animation: float 6s ease-in-out infinite;
}
.token--a { left: 1%; top: 10%; rotate: -12deg; }
.token--b { right: 0; top: 22%; rotate: 10deg; animation-delay: -1.5s; }
.token--c { right: 8%; bottom: 3%; rotate: -6deg; animation-delay: -3s; }
.token--d { left: 6%; bottom: 12%; rotate: 8deg; animation-delay: -4.5s; }

@keyframes breathe { 50% { opacity: 0.65; transform: scale(1.08); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes float { 50% { transform: translateY(-9px); } }

/* The hero capture leans back a little, the way the game's boards tilt. */
.hero__shot {
  position: relative;
  margin: 2.5rem 0 0;
}
.hero__shot::before {
  content: ""; position: absolute; inset: 8% 4% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 137, 0, 0.35), rgba(176, 64, 240, 0.18) 60%, transparent);
  filter: blur(40px);
}
.hero__frame {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--ground);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.hero__frame img { width: 100%; }
.hero__shot figcaption {
  position: relative;
  margin-top: 1rem;
  font-size: 0.92rem; color: var(--text-3);
}

@media (min-width: 56rem) {
  .hero { padding: 3rem 0 5rem; }
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas: "copy art";
    gap: 2rem;
  }
  .hero__art { width: min(100%, 31rem); }
  .hero__shot { margin-top: 3.5rem; perspective: 1800px; }
  .hero__frame {
    transform: rotateX(7deg) rotateY(-5deg);
    transform-origin: 50% 100%;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .hero__shot:hover .hero__frame { transform: none; }
  .hero__shot figcaption { text-align: right; }
}

/* ---------- Bands and headings ---------- */
.band { padding: 4rem 0; }
.band--field {
  background:
    radial-gradient(50rem 30rem at 10% 0%, rgba(36, 26, 68, 0.7), transparent 70%),
    var(--card);
  border-block: 1px solid var(--hairline);
}
.band__head { max-width: 44rem; margin-bottom: 2.25rem; }
.band__head h2 {
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.6rem);
  font-weight: 700;
  color: #fff;
}
/* Under each heading, a brick in place of the studio's orange bar */
.band__head h2::after {
  content: "";
  display: block;
  width: 3.5rem; height: 0.8rem;
  margin-top: 0.8rem;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--lit, var(--ball-2)) 0 38%, var(--face, var(--ball-3)) 38%);
}
.band__head p { margin: 1rem 0 0; font-size: 1.12rem; color: #cfd4e1; }
.band--looks { --lit: var(--blue-lit); --face: var(--blue); }
.band--features { --lit: var(--green-lit); --face: var(--green); }
.band--gallery { --lit: var(--pink-lit); --face: var(--pink); }
.band--download { --lit: var(--ball-2); --face: var(--ball-3); }
.band--credits { --lit: var(--purple-lit); --face: var(--purple); }
@media (min-width: 48rem) {
  .band { padding: 6rem 0; }
}

/* ---------- Two looks ---------- */
.looks { display: grid; gap: 3rem; }
.look h3 { margin: 1.3rem 0 0.6rem; font-size: 2rem; font-weight: 700; }
.look h3 span {
  display: block; margin-top: 0.25rem;
  font-family: var(--font); font-size: 1rem; font-weight: 700; letter-spacing: 0;
  color: var(--text-2);
}
.look p { margin: 0; color: #cfd4e1; max-width: 36rem; }
.look img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--ground); }
.look--modern h3 { color: var(--blue-lit); }
.look--modern picture {
  border-radius: 1rem; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(112, 176, 238, 0.45), 0 30px 70px -30px rgba(50, 116, 184, 0.8);
}
.look--classic h3 { color: var(--green-lit); }
/* The Amiga picture gets square corners and a chunky pixel frame */
.look--classic picture {
  border: 4px solid #000;
  outline: 4px solid var(--green);
  box-shadow: 8px 8px 0 #000;
}
@media (min-width: 56rem) {
  .looks { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
  .look--classic { margin-top: 5rem; }
}

/* ---------- Features ---------- */
.pieces-block {
  display: grid; gap: 1.75rem;
  margin-bottom: 3.5rem;
  padding: 1.75rem 1.25rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(36rem 20rem at 70% 50%, rgba(36, 26, 68, 0.95), transparent 70%),
    var(--field);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pieces-block h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); font-weight: 700; }
.pieces-block p { margin: 0.8rem 0 0; color: #cfd4e1; }
.pieces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 1.1rem 0.5rem;
  margin: 0; padding: 0; list-style: none;
}
.pieces li { display: grid; justify-items: center; gap: 0.35rem; text-align: center; }
.pieces img {
  width: 3.6rem; height: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.pieces li:hover img { transform: scale(1.12) rotate(-6deg); }
.pieces span { font-family: var(--display); font-weight: 500; font-size: 0.88rem; line-height: 1.15; color: var(--text-2); }
@media (min-width: 60rem) {
  .pieces-block { grid-template-columns: 19rem 1fr; gap: 2.5rem; align-items: center; padding: 2.5rem; }
  .pieces { grid-template-columns: repeat(7, 1fr); }
}

.facts {
  display: grid; gap: 0 3rem;
  margin: 0; padding: 0; list-style: none;
}
.fact { position: relative; padding: 1.4rem 0 1.4rem 2.3rem; border-top: 1px solid var(--hairline); }
.fact::before {
  content: ""; position: absolute; left: 0; top: 1.85rem;
  width: 1.4rem; height: 0.6rem; border-radius: 2px;
  background: linear-gradient(180deg, var(--lit) 0 40%, var(--face) 40%);
}
.fact:nth-child(4n + 1) { --lit: var(--blue-lit); --face: var(--blue); }
.fact:nth-child(4n + 2) { --lit: var(--pink-lit); --face: var(--pink); }
.fact:nth-child(4n + 3) { --lit: var(--green-lit); --face: var(--green); }
.fact:nth-child(4n + 4) { --lit: var(--purple-lit); --face: var(--purple); }
.fact h3 { font-size: 1.35rem; color: #fff; }
.fact p { margin: 0.4rem 0 0; color: var(--text-2); }
@media (min-width: 48rem) {
  .facts { grid-template-columns: 1fr 1fr; }
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 60rem) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
}
.shot {
  display: block; width: 100%; padding: 0;
  border: 0; border-radius: 0.75rem; overflow: hidden;
  background: var(--surface); cursor: zoom-in;
  box-shadow: 0 0 0 1px var(--hairline);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--ground); transition: transform 0.35s ease; }
.shot:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--primary), 0 18px 40px -18px rgba(255, 137, 0, 0.6); }
.shot:hover img { transform: scale(1.03); }

.lightbox {
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--text); overflow: hidden;
}
.lightbox::backdrop { background: rgba(5, 6, 12, 0.94); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox__figure { margin: 0; padding: 56px 72px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; }
.lightbox__figure img { max-width: min(1600px, 100%); max-height: calc(100vh - 200px); width: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.lightbox figcaption { max-width: 80ch; text-align: center; color: #d4d8e6; font-size: 0.98rem; }
.lightbox__count { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lightbox__btn {
  position: fixed; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 2px solid var(--outline); border-radius: 50%; cursor: pointer;
  color: var(--text); background: rgba(28, 34, 51, 0.92);
}
.lightbox__btn svg { width: 24px; height: 24px; }
.lightbox__btn:hover { background: var(--primary); border-color: var(--primary-deep); color: var(--primary-ink); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox__figure { padding: 72px 12px 88px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 20px; transform: none; }
  .lightbox__prev { left: calc(50% - 60px); }
  .lightbox__next { right: calc(50% - 60px); }
}

/* ---------- Download ---------- */
.band--download {
  background-color: var(--ground);
  background-image:
    radial-gradient(44rem 24rem at 50% 0%, rgba(255, 137, 0, 0.13), transparent 70%),
    var(--stars);
  border-top: 1px solid var(--hairline);
}
.release-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1.1rem; }
.release-line p { margin: 0; }
.band__head .release-line p { margin: 0; }
.download__demo-note { max-width: 40rem; }

.downloads { display: grid; gap: 1.25rem; }
@media (min-width: 60rem) {
  .downloads { grid-template-columns: repeat(3, 1fr); }
}
.dl {
  position: relative;
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--outline);
  border-radius: 1.25rem;
  background: var(--card);
}
.dl.is-detected {
  border: 3px solid var(--primary);
  padding: calc(1.5rem - 2px) calc(1.4rem - 2px);
  box-shadow: 0 24px 60px -30px rgba(255, 137, 0, 0.7);
}
.dl.is-detected::before {
  content: "Your computer";
  position: absolute; top: -0.85rem; left: 1.2rem;
  padding: 0.1rem 0.7rem;
  border-radius: 999px;
  background: var(--primary); color: var(--primary-ink);
  font-family: var(--display); font-weight: 600; font-size: 0.85rem;
}
.dl h3 { font-size: 1.75rem; font-weight: 700; color: #fff; }
.dl__file { margin: 0; font-family: var(--mono); font-size: 0.88rem; color: var(--text-2); overflow-wrap: anywhere; }
.dl__size { display: block; min-height: 1.6em; color: var(--text); white-space: nowrap; }
.dl__btn { align-self: stretch; }
.dl__note { margin: 0; font-size: 0.95rem; color: var(--text-2); }
.dl__note code { color: var(--text); }
.dl__reqs {
  display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem;
  margin: 0; padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.93rem;
}
.dl__reqs dt { color: var(--text-3); }
.dl__reqs dd { margin: 0; color: #d4d8e6; }
.dl__sum { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--hairline); }
.dl__exact { display: grid; gap: 2px; margin: 0 0 0.8rem; }
.dl__bytes { font-family: var(--mono); font-size: 0.82rem; color: #cdd2e0; font-variant-numeric: tabular-nums; }
.dl__sha { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.dl__sum-label { grid-column: 1 / -1; font-family: var(--display); font-size: 0.85rem; font-weight: 600; color: var(--text-3); }
.dl__exact .dl__sum-label { grid-column: auto; }
.dl__sum code { font-size: 0.78rem; line-height: 1.45; color: #cdd2e0; overflow-wrap: anywhere; word-break: break-all; }
.copy {
  min-height: 2.5rem; padding: 0.3rem 0.9rem;
  border: 2px solid var(--outline); border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-size: 0.9rem; font-weight: 600;
  color: var(--text); background: var(--surface-2);
}
.copy:hover { background: var(--primary); border-color: var(--primary-deep); color: var(--primary-ink); }

.verify { max-width: 46rem; margin: 2rem 0 0; color: var(--text-2); }
.verify summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--text); }
.verify ul { margin: 0.8rem 0 0; padding-left: 1.25rem; }
.verify li { margin-top: 0.4rem; }
.verify code { color: var(--text); overflow-wrap: anywhere; }
.fine { max-width: 46rem; margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--text-3); }

/* ---------- Credits ---------- */
.credits { display: grid; gap: 2.5rem; }
.credits h3 { margin-bottom: 0.8rem; font-size: 1.5rem; color: #fff; }
.credits p { color: #c9cedd; }
.credits__help {
  margin-top: 1.5rem; padding: 1.1rem 1.2rem;
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.credits__help p:last-child { margin-bottom: 0; }
@media (min-width: 56rem) {
  .credits { grid-template-columns: 2fr 3fr; gap: 4rem; }
}

/* ---------- Footer: the studio's cream shell, cracked open at the top ---------- */
.zigzag { position: relative; }
.zigzag::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: var(--zz);
  background: var(--zz-color, var(--shell));
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zz)) 100%;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zz)) 100%;
}
.site-footer {
  margin-top: var(--zz);
  padding: 2.5rem 0 3rem;
  color: var(--ink);
  background-color: var(--shell);
  background-image: var(--speckle), var(--speckle);
  background-size: 260px 260px, 410px 410px;
  background-position: 0 0, 97px 143px;
  font-size: 0.97rem;
}
.site-footer ::selection { background: var(--beak); color: var(--ink); }
.site-footer :focus-visible { outline-color: var(--ink); }
.site-footer a { color: var(--spot); }
.site-footer a:hover { color: var(--ink); }
.site-footer p { margin: 0; }
.site-footer__inner { display: grid; gap: 1.5rem; }
.site-footer__brand { display: flex; align-items: flex-start; gap: 0.9rem; }
.site-footer__brand > a { flex: none; }
.site-footer__brand img { width: 3.2rem; height: auto; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.site-footer__brand > a:hover img { transform: rotate(-10deg) scale(1.08); }
.site-footer__name { font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.site-footer__small { margin-top: 0.4rem !important; font-size: 0.88rem; color: var(--spot); }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.3rem;
  margin: 0 0 0 -0.7rem; padding: 0; list-style: none;
}
.site-footer .footer-links a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0.35rem 0.7rem;
  border: 2px solid transparent; border-radius: 999px;
  color: var(--ink); font-family: var(--display); font-weight: 600;
  text-decoration: none;
}
.site-footer .footer-links a:hover { background: var(--paper); border-color: var(--ink); }
@media (min-width: 56rem) {
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: center; }
  .footer-links { margin: 0; justify-content: flex-end; max-width: 34rem; }
}

/* ---------- Status pages (404) ---------- */
.status-page {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; padding-block: 3rem; padding-inline: var(--gutter); text-align: center;
  background-color: var(--ground);
  background-image: radial-gradient(30rem 24rem at 50% 30%, rgba(36, 26, 68, 0.9), transparent 70%), var(--stars);
}
.status-page img { width: 11rem; margin-bottom: 0.5rem; }
.status-page h1 { font-size: clamp(2.6rem, 1.8rem + 4vw, 4rem); font-weight: 700; }
.status-page p { max-width: 44ch; color: var(--text-2); }
.status-page .btn { margin-top: 0.75rem; }
.status-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; margin-top: 0.75rem; }
.status-page__actions .btn { margin-top: 0; }

/* ---------- Store badge ----------
   Apple's own "Download on the Mac App Store" artwork (web/img/mac-app-store-badge.svg), unaltered.
   Apple's rules: at least 40px tall, clear space of a quarter of its height on every side. */
.store-badge { display: inline-block; line-height: 0; border-radius: 0.5rem; }
.store-badge img { display: block; width: auto; height: 40px; margin: 0; }
.store-badge--large img { height: 48px; }
/* The hero leads with the store: the biggest, brightest thing under the pitch. */
.store-badge--hero img { height: 64px; }
.hero__store { display: grid; justify-items: start; gap: 0.9rem; margin: 0 0 2.4rem; }
.hero__store p { max-width: 32rem; margin: 0; font-size: 1.05rem; color: #d7dbe7; }
.download__store { margin-top: 1.1rem; }
.status-page .store-badge { margin-block: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover, .shot:hover, .shot:hover img, .pieces li:hover img { transform: none; }
}