/* Visara AI
   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; }

/* a video's still on the wall and in the gallery grid; the video plays when it is opened */
.play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  pointer-events: none;
}
.play svg { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; }
.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); }

/* flex-end keeps Generate on the right when it wraps onto a line of its own */
.console-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

/* .kinds is picture or video, at the top of the prompt box; it is only there while a video machine is online */
.shapes, .kinds { display: flex; gap: 2px; min-width: 0; margin: 0; padding: 3px; border: 0; border-radius: 999px; background: var(--panel-deep); }
.shapes input, .kinds input { position: absolute; opacity: 0; pointer-events: none; }
.shapes label, .kinds 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, .kinds label:hover { color: var(--text); }
.shapes input:checked + label, .kinds input:checked + label { background: var(--raised); color: var(--text); }
.shapes input:focus-visible + label, .kinds input:focus-visible + label { outline: 2px solid var(--acid); outline-offset: 1px; }
.kinds { justify-self: start; }
.kinds label { padding: 0 14px; font-weight: 600; }
.kinds svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* the style row under the prompt: one choice, scrolls sideways when it doesn't fit */
.styles { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 3px 0; border: 0; overflow-x: auto; scrollbar-width: none; }
.styles::-webkit-scrollbar { display: none; }
.styles-label { flex: none; margin-right: 4px; font-size: 13px; color: var(--faint); }
.styles input { position: absolute; opacity: 0; pointer-events: none; }
.styles label {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.styles label:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }
.styles input:checked + label { border-color: transparent; background: var(--raised); color: var(--text); }
.styles 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 { margin-top: -10px; font-size: 13px; color: var(--faint); text-align: center; text-wrap: balance; }
/* inline, so the arrow stays with the first word when the line wraps on a phone */
.deal svg { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; fill: var(--acid); }

/* the prompt helper switch, with the counter and Generate on the right */
.helper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-left: auto;
  padding: 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.helper:hover { color: var(--text); }
/* a video has no prompt helper, so the counter takes its place on the right */
.helper[hidden] + .count { margin-left: auto; }
.helper input { position: absolute; opacity: 0; pointer-events: none; }
.switch {
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color 0.15s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--faint);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.helper input:checked + .switch { background: var(--acid); box-shadow: none; }
.helper input:checked + .switch::after { transform: translateX(12px); background: var(--on-acid); }
.helper input:focus-visible + .switch { outline: 2px solid var(--acid); outline-offset: 2px; }

.count { 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, .frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame video { background: #000000; }

.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); } }
/* while a video is made: how far the machine has come, and the time so far */
.bar { display: block; width: min(220px, 70%); height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--acid); transition: width 0.6s ease; }
.working-note { margin-top: -6px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }

.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, .detail-frame video { 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: 12px; }
  .console { margin-top: 4px; }
  .console textarea { min-height: 0; height: 52px; } /* two lines instead of the three rows="3" asks for */
}

@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); }
  /* the fade at the right edge shows there are more styles */
  .styles {
    padding-right: 32px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
}

@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; }
  .play { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .play svg { width: 13px; height: 13px; }
  .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, .switch, .switch::after, .styles label, .bar i { 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; }