:root {
  --bg: #050805;
  --panel: #0b100c;
  --line: #1d2b20;
  --fg: #d2e5d5;
  --dim: #6d8572;
  --acc: #3dff7a;
  --amber: #ffb347;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}
body::after { /* faint CRT scanlines */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 2px 3px);
  z-index: 5;
}

.top { padding: 34px 24px 10px; max-width: 1400px; margin: 0 auto; }
@media (max-width: 900px) { .top { padding-top: 70px; } } /* the fixed picker sits above the title on narrow screens */
h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; letter-spacing: .5px; }
.prompt { color: var(--acc); }
.cursor { color: var(--acc); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sub { color: var(--dim); margin: 0 0 18px; }
.dim { color: var(--dim); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips + .chips { margin-top: 8px; } /* the type picker sits right above the group chips */
.chip {
  font-family: var(--mono); font-size: 12px;
  background: none; color: var(--dim);
  border: none; border-radius: 0;
  padding: 5px 4px; cursor: pointer;
}
.chip:hover { color: var(--fg); }
.chip.on { background: var(--acc); color: var(--bg); }

.grid {
  max-width: 1400px; margin: 22px auto 40px; padding: 0 24px;
  columns: 4 260px; column-gap: 16px;
}
.tile {
  break-inside: avoid; margin-bottom: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  overflow: hidden; cursor: zoom-in;
  transition: border-color .15s, box-shadow .15s;
  display: block; width: 100%; padding: 0; text-align: left;
  font-family: var(--mono); color: var(--fg);
  position: relative;
}
/* viewfinder corner brackets on hover */
.tile::before, .tile::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  opacity: 0; transition: opacity .12s; pointer-events: none; z-index: 1;
}
.tile::before { top: 6px; left: 6px; border-top: 2px solid var(--acc); border-left: 2px solid var(--acc); }
.tile::after { top: 6px; right: 6px; border-top: 2px solid var(--acc); border-right: 2px solid var(--acc); }
.tile:hover { border-color: var(--acc); box-shadow: 0 0 24px -6px #3dff7a55; }
.tile:hover::before, .tile:hover::after { opacity: 1; }
.tile img { width: 100%; height: auto; display: block; opacity: 0; transition: opacity .25s; } /* static ads keep their own ratio (4:5, 2:1) */
.tile img.loaded { opacity: 1; }
.tile.anim img { aspect-ratio: var(--tile-ar, 16/9); object-position: center; }
.tile .meta { padding: 9px 12px 11px; }
.tile .t { font-size: 12.5px; }
.tile .g { font-size: 10.5px; color: var(--dim); letter-spacing: .5px; text-transform: uppercase; }
.tile .badge {
  float: right; font-size: 10px;
  border-radius: 0; padding: 1px 6px;
}
.tile:not(.anim) .badge { color: var(--acc); border: 1px solid var(--acc); }
.tile.anim .badge { color: var(--amber); border: 1px solid var(--amber); }
.empty { max-width: 1400px; margin: 0 auto; padding: 20px 24px; }
.foot { max-width: 1400px; margin: 0 auto; padding: 0 24px 40px; font-size: 12px; }

/* ---- lightbox ---- */
.lb {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(2, 4, 2, .93);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
}
.lb[hidden] { display: none; }
.lb-stage {
  position: relative;
  max-width: min(92vw, 1400px); max-height: 82vh;
  display: flex; align-items: center; justify-content: center;
  animation: pop .18s ease-out;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
}
@keyframes pop { from { transform: scale(.86); opacity: 0; } }
.lb-stage img {
  max-width: 100%; max-height: 82vh; display: block;
  border: 1px solid var(--line); border-radius: 0;
  cursor: zoom-in; transition: transform .18s ease-out;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.lb-stage img.zoomed { transform: scale(2.4); cursor: zoom-out; }
.lb-stage iframe {
  width: min(92vw, 1280px); height: min(82vh, 720px); /* overridden inline by sizeFrame() per ratio */
  border: 1px solid var(--line); border-radius: 0; background: #000;
  display: block;
}
.lb-close {
  position: fixed; top: 14px; right: 20px;
  background: none; border: none; color: var(--dim);
  font-size: 30px; cursor: pointer; font-family: var(--mono);
}
.lb-close:hover { color: var(--acc); }
/* the aspect-ratio picker: fixed top right of the page, above the lightbox; it shapes the tile
   thumbnails on the grid and the frame in the lightbox */
.ar-pick {
  position: fixed; top: 20px; right: 24px; z-index: 11;
  display: flex; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--line);
}
body.lb-open .ar-pick { right: 64px; } /* clear the lightbox close button */
/* the download button: the open spot as an mp4 at the picked ratio, left of the picker */
.lb-dl {
  position: fixed; top: 20px; right: 268px; z-index: 11;
  font-family: var(--mono); font-size: 12px; line-height: 1; text-decoration: none;
  padding: 10px 12px; color: var(--amber); border: 1px solid var(--amber); background: var(--panel);
}
.lb-dl:hover { background: var(--amber); color: var(--bg); }
.lb-dl[hidden] { display: none; }
/* no offline render at this ratio: inert, so it cannot be clicked into a 404 */
.lb-dl.no-render { color: var(--dim, #888); border-color: var(--dim, #888); opacity: .6; cursor: not-allowed; }
.lb-dl.no-render:hover { background: var(--panel); color: var(--dim, #888); }
@media (max-width: 640px) { .lb-dl { right: 224px; padding: 10px 8px; } }
/* every ratio of a spot in one click (its manifest `downloadAll`), under the single download */
.lb-dlall { top: 62px; }
/* a spot with an extra ratio (9:16) adds a fifth chip, so the button moves one chip further left */
body.ar-extra .lb-dl { right: 314px; }
@media (max-width: 640px) { body.ar-extra .lb-dl { right: 264px; } }
.ar-pick button {
  font-family: var(--mono); font-size: 12px; line-height: 1;
  background: none; color: var(--dim); border: none; border-radius: 0;
  padding: 7px 9px; cursor: pointer; min-width: 44px;
}
.ar-pick button:hover { color: var(--fg); }
.ar-pick button.on { background: var(--acc); color: var(--bg); }
.ar-pick button:focus-visible { outline: 1px solid var(--acc); outline-offset: 1px; }
@media (max-width: 640px) { .ar-pick { right: 16px; } body.lb-open .ar-pick { right: 52px; } .ar-pick button { padding: 7px 6px; min-width: 36px; } }
.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 0;
  font-size: 20px; padding: 14px 16px; cursor: pointer; font-family: var(--mono);
}
.lb-nav:hover { border-color: var(--acc); color: var(--acc); }
.lb-prev { left: 18px; } .lb-next { right: 18px; }
.lb-caption {
  margin-top: 14px; font-size: 12.5px; display: flex; gap: 16px; align-items: baseline;
}
@media (max-width: 640px) { .lb-nav { display: none; } }