: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: 1200px) { .top { padding-top: 70px; } } /* the fixed pickers sit above the title on narrower 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;
}
.grid-cols { columns: 4 260px; column-gap: 16px; }
/* favorites fill the FIRST cells of the grid, left to right across the top; the rest of the
   gallery keeps the masonry columns below (multi-column flow fills one column top-to-bottom, so
   favorites used to stack under each other down the left column instead of sitting side by side) */
.fav-band {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
  align-items: start; /* each tile keeps its own height; the row is as tall as its tallest */
  margin-bottom: 16px;
}
.fav-band[hidden] { display: none; }
.fav-band .tile { margin-bottom: 0; } /* the grid gap already spaces the band */
.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 .open { all: unset; display: block; width: 100%; cursor: zoom-in; }
.tile .open:focus-visible { outline: 1px solid var(--acc); outline-offset: -1px; }
.tile .meta { padding: 9px 12px 11px; cursor: default; }
/* the caption is editable in place: hover shows it, an edit is marked in amber until it is applied */
.tile .t { display: inline; outline: none; cursor: text; border-bottom: 1px dashed transparent; }
.tile .t:hover { border-bottom-color: var(--dim); }
.tile .t:focus { border-bottom-color: var(--acc); background: #3dff7a14; }
.tile .t.edited { border-bottom-color: var(--amber); }
.tile .t { font-size: 12.5px; }
.tile .g { font-size: 10.5px; color: var(--dim); letter-spacing: .5px; text-transform: uppercase; }
.tile .badge { cursor: pointer; background: none; font-family: var(--mono); line-height: 1.4;
  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: 560px; z-index: 11; /* left of the picker and the soon control */
  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; } }
.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; } }

/* the caption-edits copy button: fixed top right, left of the ratio picker */
.cap-copy {
  position: fixed; top: 20px; right: 518px; z-index: 9;
  font-family: var(--mono); font-size: 12px; line-height: 1; cursor: pointer;
  padding: 10px 12px; color: var(--dim); border: 1px solid var(--line); background: var(--panel);
}
.cap-copy:hover { color: var(--fg); border-color: var(--fg); }
.cap-copy.has { color: var(--amber); border-color: var(--amber); }
.cap-copy.has:hover { background: var(--amber); color: var(--bg); }
body.lb-open .cap-copy { display: none; }
@media (max-width: 640px) { .cap-copy { top: 64px; right: 24px; } }

/* the coming-soon intro control: fixed top right, left of the ratio picker; on, every ad opens
   (and downloads) behind the picked card */
.soon-pick {
  position: fixed; top: 20px; right: 226px; z-index: 11; width: 284px;
  display: flex; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--line);
}
body.lb-open .soon-pick { right: 268px; }
.soon-pick button, .soon-pick select {
  font-family: var(--mono); font-size: 12px; line-height: 1;
  border: none; border-radius: 0; padding: 7px 9px; cursor: pointer;
}
.soon-pick button { background: none; color: var(--dim); white-space: nowrap; }
.soon-pick button:hover { color: var(--fg); }
.soon-pick button.on { background: var(--amber); color: var(--bg); }
.soon-pick select { flex: 1; min-width: 0; background: var(--bg); color: var(--fg); text-overflow: ellipsis; }
.soon-pick button:focus-visible, .soon-pick select:focus-visible { outline: 1px solid var(--amber); outline-offset: 1px; }
.lb-stage .soon-card {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; transition: opacity .22s ease-out;
}
.lb-stage .soon-card.out { opacity: 0; }
/* narrower: the soon control drops to a second row and the copy/download buttons return beside the picker */
@media (max-width: 820px) {
  .top { padding-top: 112px; }
  .soon-pick, body.lb-open .soon-pick { top: 64px; right: 24px; }
  .cap-copy { right: 226px; }
  .lb-dl { right: 268px; }
}
@media (max-width: 640px) {
  .top { padding-top: 156px; }
  .soon-pick, body.lb-open .soon-pick { right: 16px; width: min(284px, calc(100vw - 32px)); }
  .cap-copy { top: 108px; right: 24px; }
  .lb-dl { right: 224px; }
}

/* ---- permalinks: every tile and the viewer carry a copyable #<id> link ---- */
.tile .plink { float: right; margin-right: 8px; font-size: 10px; line-height: 1.4; padding: 1px 6px;
  color: var(--dim); border: 1px solid #ffffff22; text-decoration: none; font-family: var(--mono); }
.tile .plink:hover, .tile .plink:focus-visible { color: var(--acc); border-color: var(--acc); outline: none; }
.lb-caption .lb-link { color: var(--dim); text-decoration: none; font-size: 11.5px; border-bottom: 1px dashed transparent; }
.lb-caption .lb-link:hover, .lb-caption .lb-link:focus-visible { color: var(--acc); border-bottom-color: var(--acc); outline: none; }

/* ---- mark for deletion: the ✕ a tile shows top-left marks the ad and copies the marked list;
   nothing is deleted from the page; the marked ids come back in chat as one paste ---- */
.tile .mark {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: var(--mono); font-size: 12px; line-height: 1;
  padding: 5px 8px; cursor: pointer; border-radius: 0;
  color: var(--dim); background: rgba(5, 8, 5, .72); border: 1px solid var(--line);
  transition: color .12s, border-color .12s, background .12s;
}
.tile .mark:hover, .tile .mark:focus-visible { color: var(--amber); border-color: var(--amber); outline: none; }
.tile .mark.on { color: var(--bg); background: var(--amber); border-color: var(--amber); }
.tile.marked { border-color: var(--amber); box-shadow: 0 0 24px -6px #ffb34755; }
.tile.marked::before, .tile.marked::after { opacity: 1; }
.tile.marked::before { border-top-color: var(--amber); border-left-color: var(--amber); }
.tile.marked::after { border-top-color: var(--amber); border-right-color: var(--amber); }

/* ---- favorites: the ☆ a tile carries top-right pins it to the top of the grid; the ids live in
   this browser's localStorage, so the order survives a reload. Green, to read apart from the ✕ ---- */
/* the star reads green at rest so the control is findable on a dark thumbnail; the filled state
   (--bg on --acc) is what marks it favorited, so an available star never looks already active */
.tile .fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-family: var(--mono); font-size: 12px; line-height: 1;
  padding: 5px 8px; cursor: pointer; border-radius: 0;
  color: var(--acc); background: rgba(5, 8, 5, .78); border: 1px solid #3dff7a55;
  transition: color .12s, border-color .12s, background .12s;
}
.tile .fav:hover, .tile .fav:focus-visible { color: var(--bg); background: var(--acc); border-color: var(--acc); outline: none; }
.tile .fav.on { color: var(--bg); background: var(--acc); border-color: var(--acc); }
.tile.favorited { border-color: var(--acc); box-shadow: 0 0 24px -6px #3dff7a55; }
.tile.favorited::before, .tile.favorited::after { opacity: 1; }
.lb-caption .lb-fav {
  font-family: var(--mono); font-size: 11.5px; line-height: 1;
  background: none; border: none; border-radius: 0; padding: 0; cursor: pointer;
  color: var(--dim); border-bottom: 1px dashed transparent;
}
.lb-caption .lb-fav:hover, .lb-caption .lb-fav:focus-visible { color: var(--acc); border-bottom-color: var(--acc); outline: none; }
.lb-caption .lb-fav.on { color: var(--acc); border-bottom-color: var(--acc); }

.mark-bar {
  position: fixed; left: 24px; bottom: 20px; z-index: 11;
  display: flex; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--amber);
}
.mark-bar[hidden] { display: none; }
body.lb-open .mark-bar { display: none; }
.mark-bar button {
  font-family: var(--mono); font-size: 12px; line-height: 1;
  border: none; border-radius: 0; padding: 9px 10px; cursor: pointer;
  background: none; color: var(--amber); white-space: nowrap;
}
.mark-bar #markCopy:hover { background: var(--amber); color: var(--bg); }
.mark-bar #markClear { color: var(--dim); border-left: 1px solid var(--line); }
.mark-bar #markClear:hover { color: var(--fg); }
@media (max-width: 640px) { .mark-bar { left: 16px; right: 16px; bottom: 12px; } }
/* touch floor: 44x44 on a coarse pointer (Apple HIG / M3 48dp), 24x24 minimum otherwise (WCAG 2.2 SC 2.5.8) */
@media (pointer: coarse) {
  .tile .mark { min-width: 44px; min-height: 44px; }
  .tile .fav { min-width: 44px; min-height: 44px; }
  .mark-bar button { min-height: 44px; }
}