/* Fri Fantasi
   A black page with one lime accent. The top is a wall of real pictures made by the site, fading
   into black behind a large headline and the prompt box. Example prompts sit under the box, then a
   short answer to "what's the catch?". Geist throughout. */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #000000;
  --panel: #141417;
  --panel-deep: #0b0b0d;
  --raised: #2a2a31;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #f7f7f8;
  --muted: #a6a7ad;
  --faint: #707178;
  --acid: #d4ff3a;
  --acid-rgb: 212, 255, 58;
  --on-acid: #111111;
  --heart: #ff4565;
  --heart-rgb: 255, 69, 101;
  --danger: #ff8f85;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

h1, h2, h3, p { margin: 0; }

.acid { color: var(--acid); }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---- header ---- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 60px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.brand-mark { display: grid; grid-template-columns: 9px 9px; gap: 2px; }
.brand-mark i { width: 9px; height: 9px; border-radius: 2px; background: #ffffff; }
.brand-mark i:nth-child(2) { opacity: 0.45; }
.brand-mark i:nth-child(3) { opacity: 0.7; }

.cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease;
}
.cta:hover { border-color: rgba(255, 255, 255, 0.35); }

.top-nav { display: flex; align-items: center; gap: 18px; }
.nav-link { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--text); }

/* ---- hero: picture wall, headline, prompt box ---- */

.hero { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 72px; }

/* The wall sits in the page flow, so the headline under it lands in the same place at every width.
   The mask fades the pictures out towards the bottom and the sides; the headline only overlaps the
   part that is already fully faded. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  /* The wall may only be as wide as gives tiles 34% of the screen height (5 tiles at 4:5 plus gaps).
     Without this, a wide screen makes the pictures huge and pushes the prompt box out of view. */
  max-width: calc(136vh + 84px);
  margin: 0 auto;
  padding: 16px 14px 0;
  list-style: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 94%), linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 35%, transparent 94%), linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}
.tile { position: relative; }
.tile a { display: block; }
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
/* staggered from the right, so the newest picture always sits the same way */
.tile:nth-last-child(1) { margin-top: 4px; }
.tile:nth-last-child(2) { margin-top: 20px; }
.tile:nth-last-child(3) { margin-top: 8px; }
.tile:nth-last-child(4) { margin-top: 24px; }
.tile .tag { top: 12px; left: 12px; }
.tile-new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acid); }

.tile-report {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.tile:hover .tile-report, .tile-report:focus-visible { opacity: 1; }
@media (hover: none) { .tile-report { opacity: 0.8; } }
.tile-report svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* minmax(0, 1fr) keeps the long row of example prompts from widening the column */
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; margin-top: -40px; text-align: center; }

.headline {
  font-size: clamp(34px, min(8vw, 11vh), 88px);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.03em;
  word-spacing: 0.06em;
  text-transform: uppercase;
}
.headline span { display: block; }

.lede { max-width: 60ch; color: #d4d5da; font-size: 18px; text-wrap: balance; }

.console {
  width: min(100%, 860px);
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: rgba(20, 20, 23, 0.92);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.85);
  text-align: left;
  transition: border-color 0.2s ease;
}
.console:focus-within { border-color: rgba(var(--acid-rgb), 0.55); }
.console textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  resize: none;
  border: 0;
  outline: 0;
  padding: 2px 0; /* no side padding, so the text lines up with the shape buttons below */
  background: transparent;
  color: var(--text);
  font: 400 16px/1.55 var(--font);
}
.console textarea::placeholder { color: var(--faint); }

.console-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.shapes { display: flex; gap: 2px; min-width: 0; margin: 0; padding: 3px; border: 0; border-radius: 999px; background: var(--panel-deep); }
.shapes input { position: absolute; opacity: 0; pointer-events: none; }
.shapes label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--faint);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.shapes label:hover { color: var(--text); }
.shapes input:checked + label { background: var(--raised); color: var(--text); }
.shapes input:focus-visible + label { outline: 2px solid var(--acid); outline-offset: 1px; }

.ratio { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; }
.r-square { width: 11px; height: 11px; }
.r-portrait { width: 9px; height: 13px; }
.r-landscape { width: 14px; height: 9px; }

.size { padding: 0 4px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the deal, right under the prompt box */
.deal { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: -10px; font-size: 13px; color: var(--faint); text-wrap: balance; }
.deal svg { width: 10px; height: 10px; fill: var(--acid); }

.count { margin-left: auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

.generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--acid);
  color: var(--on-acid);
  font: 600 15px/1 var(--font);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.generate svg { width: 16px; height: 16px; fill: currentColor; }
.generate:hover { filter: brightness(1.06); }
.generate:active { transform: translateY(1px); }
.generate:disabled { filter: saturate(0.4) brightness(0.75); cursor: progress; }

.error { max-width: 60ch; color: var(--danger); font-size: 15px; }

/* example prompts */
/* example prompts, never wider than the prompt box */
.tries { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 860px); }
.tries-label { flex: none; font-size: 13px; color: var(--faint); }
.try-row { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-width: 0; margin: 0; padding: 0; scrollbar-width: none; }
.try-row::-webkit-scrollbar { display: none; }
.try-row li { flex: none; }
.try {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font: 500 13px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.try:hover { color: var(--text); border-color: rgba(var(--acid-rgb), 0.5); background: rgba(var(--acid-rgb), 0.06); }

/* the picture */
.result { width: min(100%, 860px); display: grid; gap: 16px; margin-top: 12px; scroll-margin-top: 84px; }

.frame {
  position: relative;
  justify-self: center;
  width: min(100%, calc(min(640px, 72vh) * var(--rw, 1) / var(--rh, 1)));
  aspect-ratio: var(--rw, 1) / var(--rh, 1);
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel-deep);
}
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.working {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 15px;
}
.spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--acid);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.result-meta { display: grid; justify-items: center; gap: 12px; }
.caption { max-width: 60ch; font-size: 14px; color: var(--muted); }

/* the picture's details, like a spec sheet */
.specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 640px);
  margin: 4px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
  text-align: left;
}
.specs div { padding: 10px 14px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-width: 0; }
.specs div:nth-child(-n+3) { border-top: 0; }
.specs div:nth-child(3n+1) { border-left: 0; }
.specs dt { font-size: 11px; color: var(--faint); }
.specs dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.read-as q { color: var(--text); }
.keep { font-size: 13px; color: var(--faint); }

.acts { display: flex; gap: 8px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 500 14px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, filter 0.15s ease;
}
.button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button:hover { border-color: rgba(255, 255, 255, 0.32); }
.button.primary { background: var(--acid); border-color: var(--acid); color: var(--on-acid); font-weight: 600; }
.button.primary:hover { filter: brightness(1.06); }
.button:disabled { opacity: 0.6; cursor: default; }

/* ---- the catch ---- */

.catch { padding-block: 64px 112px; }
.catch-head { display: grid; justify-items: center; gap: 12px; margin-bottom: 40px; text-align: center; }
.catch-head h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; font-weight: 750; letter-spacing: -0.035em; }
.catch-head p { max-width: 56ch; color: var(--muted); font-size: 18px; text-wrap: balance; }

.catch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.catch-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.catch-text { display: grid; gap: 8px; align-content: start; padding: 22px 24px 26px; }
.catch-text h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; }
.catch-text p { color: var(--muted); font-size: 15px; }

.visual { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel-deep); }
.visual img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* a label on the illustration, square-cornered so it doesn't read as a button */
.tag {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 600;
}
.tag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ad-visual img { filter: blur(18px) saturate(1.3); transform: scale(1.2); opacity: 0.75; }
.on-way { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.ad-progress { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.ad-progress i { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--acid); }

.keep-visual img { object-position: 50% 28%; }

/* ---- gallery ---- */

.gallery-page { padding-block: 48px 96px; }
.gallery-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.gallery-title h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; font-weight: 750; letter-spacing: -0.035em; }
.gallery-title p { margin-top: 8px; color: var(--muted); font-size: 16px; }

.sort { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.sort button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  font: 500 13px/1 var(--font);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.sort button:hover { color: var(--text); }
.sort button[aria-pressed="true"] { background: var(--raised); color: var(--text); }

.grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; }
.pic { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.pic-link { display: block; width: 100%; height: 100%; }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.pic:hover img { transform: scale(1.04); }
/* heart and thumbs on each picture; a soft shade keeps them readable on light pictures */
.pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); pointer-events: none; }
.pic-reacts { position: absolute; z-index: 1; left: 8px; bottom: 8px; display: flex; gap: 4px; }
.react.small {
  height: 28px;
  gap: 5px;
  padding: 0 9px;
  border-color: transparent;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
}
.react.small:hover { border-color: rgba(255, 255, 255, 0.35); }
.react.small span:empty { display: none; }
.react svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty { padding-block: 48px; text-align: center; color: var(--muted); }
.more { display: flex; justify-content: center; margin-top: 28px; }

/* one picture, big, in place of the grid */
.detail { display: grid; gap: 16px; }
.back { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.15s ease; }
.back:hover { color: var(--text); }
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.detail-frame { display: grid; place-items: center; min-height: 240px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #000000; }
.detail-frame img { display: block; width: auto; height: auto; max-width: 100%; max-height: 74vh; }
.detail-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.reactions { display: flex; gap: 8px; }
.react {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 600 14px/1 var(--font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.react:hover { border-color: rgba(255, 255, 255, 0.32); }
.react[aria-pressed="true"] { border-color: var(--acid); background: rgba(var(--acid-rgb), 0.12); color: var(--acid); }
.react[aria-pressed="true"] svg { fill: currentColor; }
/* a given heart is red, also on the small buttons in the grid and when hovered */
.react[data-kind="heart"][aria-pressed="true"],
.react.small[data-kind="heart"][aria-pressed="true"]:hover { border-color: var(--heart); background: rgba(var(--heart-rgb), 0.16); color: var(--heart); }
.react:disabled { cursor: progress; }
.detail-meta { flex: 1 1 240px; min-width: 0; font-size: 13px; color: var(--muted); }
.detail-acts { display: flex; gap: 8px; margin-left: auto; }

/* ---- other pages ---- */

.prose { max-width: 68ch; padding-block: 56px 88px; }
.prose h1 { font-size: 38px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 20px; }
.prose h2 { font-size: 20px; font-weight: 650; margin: 32px 0 8px; }
.prose p, .prose li { color: #d0d1d6; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 22px; margin: 10px 0; }
.prose a { text-underline-offset: 3px; }

/* ---- footer ---- */

.foot { border-top: 1px solid var(--line); }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 28px 40px; color: var(--faint); font-size: 13px; }
.foot nav { display: flex; gap: 20px; }
.foot a { text-decoration: none; color: var(--muted); }
.foot a:hover { color: var(--text); }

/* ---- report dialog ---- */

dialog {
  width: min(460px, calc(100vw - 32px));
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--panel);
  color: var(--text);
  padding: 24px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
dialog h2 { font-size: 20px; font-weight: 650; margin-bottom: 6px; }
dialog p { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
dialog textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel-deep);
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
}
.dialog-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---- admin ---- */

.admin { display: grid; gap: 16px; padding-block: 32px 72px; }
.admin h1 { font-size: 32px; font-weight: 700; }
.admin h2 { font-size: 20px; font-weight: 650; margin-top: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat span { display: block; color: var(--muted); font-size: 13px; }
.stat strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.actions button, .report button {
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: 500 14px/1 var(--font);
  cursor: pointer;
}
.actions button.danger { background: #b4232f; border-color: #b4232f; }
.muted { color: var(--muted); font-size: 14px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; }
td { font-variant-numeric: tabular-nums; }
.reports { display: grid; gap: 10px; }
.report { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.report img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; }
.report p { flex: 1; min-width: 0; font-size: 14px; }

/* ---- smaller screens ---- */

/* short screens such as a 1366 × 768 laptop: tighten the hero so Generate stays in view */
@media (max-height: 700px) {
  .hero-inner { gap: 16px; }
  .console { margin-top: 4px; }
  .console textarea { min-height: 64px; }
}

@media (max-width: 860px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: calc(108.8vh + 50px); padding: 14px 10px 0; }
  .tile:nth-last-child(n+5) { display: none; } /* the oldest goes first */
  .hero-inner { margin-top: -32px; }
  /* one scrolling row; the fade at the right edge shows there are more */
  .tries { justify-content: flex-start; width: calc(100% + 40px); margin-inline: -20px; padding-left: 20px; }
  .try-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-right: 48px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  }
  .catch-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .hero { padding-bottom: 48px; }
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: calc(81.6vh + 40px); padding-top: 12px; }
  .tile img { border-radius: 12px; }
  .tile:nth-last-child(1) { margin-top: 6px; }
  .tile:nth-last-child(2) { margin-top: 16px; }
  .tile:nth-last-child(3) { margin-top: 0; }
  .tile:nth-last-child(n+4) { display: none; }
  .tile .tag { top: 8px; left: 8px; height: 24px; padding: 0 8px; font-size: 11px; }
  .tile-report { top: 6px; right: 6px; width: 26px; height: 26px; }
  .count { display: none; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs div:nth-child(-n+3) { border-top: 1px solid var(--line); }
  .specs div:nth-child(-n+2) { border-top: 0; }
  .specs div:nth-child(3n+1) { border-left: 1px solid var(--line); }
  .specs div:nth-child(2n+1) { border-left: 0; }
  .hero-inner { gap: 18px; margin-top: -20px; }
  .lede { font-size: 16px; }
  .console { padding: 12px; border-radius: 20px; }
  .console textarea { min-height: 88px; }
  .shapes { flex: 1 1 100%; }
  /* three equal segments, so "Landscape" doesn't crowd the edge */
  .shapes label { flex: 1 1 0; min-width: 0; justify-content: center; gap: 5px; padding: 0 4px; font-size: 12.5px; }
  .generate { flex: 1 1 100%; height: 48px; }
  .cta { height: 34px; padding: 0 14px; font-size: 13px; }
  .top-nav { gap: 14px; }
  .nav-link { font-size: 13px; }
  .gallery-page { padding-block: 32px 72px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pic { border-radius: 10px; }
  .pic-reacts { left: 6px; bottom: 6px; gap: 3px; }
  .react.small { height: 26px; padding: 0 7px; }
  .detail-acts { margin-left: 0; width: 100%; }
  .detail-acts .button { flex: 1; }
  .detail-frame { border-radius: 14px; }
  .catch { padding-block: 48px 80px; }
  .catch-head p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
  .generate, .try { transition: none; }
}

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

[hidden] { display: none !important; }