/* NZXT-ESC public gallery (/gallery/*), rendered by functions/gallery.
   Not part of the Vite bundle: copied verbatim to dist/gallery.css.
   Same visual family as public/faq.css: dark shell, DMSans, purple accent,
   squared corners everywhere except round LCD previews and small dots. */

@font-face {
  font-family: 'DMSans';
  src: url('/fonts/DMSans-Variable.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0b0b0e;
  --surface: #121216;
  --surface-2: #18181d;
  --surface-3: #202027;
  --line: #26262d;
  --line-2: #3a3a43;
  --text: #ececf1;
  --muted: #a1a1ad;
  --muted-2: #7c7c88;
  --accent: #a855f7;
  --accent-2: #c084fc;
  --accent-ink: #faf5ff;
  --max: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 DMSans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
button, input, select { font: inherit; color: inherit; }
[id] { scroll-margin-top: 80px; }

/* ---------- Header / footer ---------- */
.g-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 24px;
  background: rgba(11, 11, 14, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.g-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); }
.g-brand:hover { text-decoration: none; }
.g-brand__text b { display: block; font-size: 15px; letter-spacing: 0.04em; }
.g-brand__text small { display: block; color: var(--muted); font-size: 11px; }
.g-nav { display: flex; align-items: center; gap: 4px; }
.g-nav > a:not(.g-btn) { padding: 8px 10px; color: var(--muted); display: inline-flex; }
.g-nav > a:not(.g-btn):hover { color: var(--text); text-decoration: none; }
.g-foot {
  max-width: var(--max); margin: 48px auto 0; padding: 24px;
  border-top: 1px solid var(--line); color: var(--muted-2); font-size: 13px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.g-foot p { margin: 0; max-width: 720px; }
.g-foot nav { display: flex; gap: 16px; }
.g-foot a { color: var(--muted); }

/* ---------- Buttons ---------- */
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.g-btn:hover { background: var(--surface-3); text-decoration: none; }
.g-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.g-btn--primary:hover { background: #9333ea; border-color: #9333ea; }
.g-btn--small { min-height: 32px; padding: 0 12px; font-size: 13px; }
.g-btn--large { min-height: 48px; padding: 0 22px; font-size: 15px; }
.g-btn:focus-visible, .g-card:focus-visible, .g-cat:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---------- Layout ---------- */
.g-wrap { max-width: var(--max); margin: 0 auto; padding: 24px 24px 0; }
.g-eyebrow { margin: 0 0 12px; color: var(--accent-2); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.g-eyebrow a { color: inherit; }
.g-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: end;
  padding: 24px 0 28px; border-bottom: 1px solid var(--line);
}
.g-hero--compact { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
.g-hero h1 { font-size: clamp(34px, 4.6vw, 60px); max-width: 980px; }
.g-lead { margin: 16px 0 0; max-width: 860px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.g-lead strong { color: var(--text); }
.g-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
/* Cell borders come from the 1px grid gap over the line color, so any number of cells stays outlined. */
.g-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--line); background: var(--line); }
.g-stats div { padding: 16px; background: var(--surface); }
.g-stats dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.g-stats dd { margin: 4px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }

.g-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; margin-top: 24px; }
/* minmax(0, 1fr): the panels must shrink to the 260px column. With an auto
   track, the search input and sort select kept their intrinsic width (much
   wider in Firefox) and pushed the panels over the results. */
.g-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-self: start; position: sticky; top: 80px; min-width: 0; }
/* Sticky and taller than short screens once the stargazer panel is at the bottom: it scrolls
   on its own (mouse wheel over it), the same as the FAQ's right column, without a visible
   scrollbar. Only where the column is sticky. */
@media (min-width: 961px) {
  .g-side { max-height: calc(100vh - 100px); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
  .g-side::-webkit-scrollbar { display: none; }
}
.g-panel { display: block; padding: 14px; border: 1px solid var(--line); background: var(--surface); }
.g-panel__title { display: block; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
.g-search, .g-sort { display: flex; }
.g-search input, .g-sort select {
  flex: 1; min-width: 0; width: 100%; height: 40px; padding: 0 10px;
  background: var(--bg); border: 1px solid var(--line-2); border-right: 0; outline: none;
}
.g-search input:focus, .g-sort select:focus { border-color: var(--accent); }
.g-search button, .g-sort button { height: 40px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--surface-3); cursor: pointer; font-size: 13px; font-weight: 700; }
.g-cats { display: grid; gap: 2px; }
.g-cat {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 10px; color: var(--muted); font-size: 14px; font-weight: 600;
  border: 1px solid transparent;
}
.g-cat span { color: var(--muted-2); font-size: 12px; }
.g-cat:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.g-cat--active { background: var(--surface-2); border-color: var(--line-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.g-help p { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.g-help strong { color: var(--text); }
.g-help a { display: block; margin-top: 4px; font-size: 13px; }

.g-content { min-width: 0; }
.g-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.g-head h2 { font-size: 24px; }
.g-head p { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- Cards ---------- */
.g-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.g-card { display: block; border: 1px solid var(--line); background: var(--surface); color: var(--text); transition: border-color 0.15s, background 0.15s; }
.g-card:hover { border-color: var(--line-2); background: var(--surface-2); text-decoration: none; }
.g-card__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 1;
  padding: 12%; border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 50% 42%, rgba(168, 85, 247, 0.1), transparent 55%), #0e0e12;
}
.g-card__media img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 10px #1d1d23, 0 0 0 11px #34343d; }
.g-card__video { position: absolute; top: 12%; left: 12%; width: 76%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.g-card__video.is-playing { opacity: 1; }
.g-badge {
  position: absolute; top: 10px; z-index: 1; padding: 4px 7px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line-2); background: rgba(11, 11, 14, 0.88); color: var(--accent-2);
}
.g-badge { left: 10px; }
.g-badge--featured { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.g-badge--new { color: #fde68a; }
.g-card__body { display: block; padding: 12px; }
.g-card__title { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-card__by { display: block; color: var(--muted); font-size: 13px; }
.g-card__meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 12px; }
.g-empty { padding: 40px; border: 1px solid var(--line); color: var(--muted); text-align: center; }

.g-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.g-page { display: inline-flex; align-items: center; min-width: 38px; height: 38px; padding: 0 12px; justify-content: center; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 700; }
.g-page:hover { background: var(--surface-2); text-decoration: none; }
.g-page--current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- Home sections ---------- */
.g-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.g-section h2 { font-size: 28px; margin-bottom: 14px; }
.g-section h3 { font-size: 17px; margin: 20px 0 8px; }
.g-section p { color: var(--muted); line-height: 1.7; }
.g-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 36px; }
.g-features { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: var(--surface); align-self: start; }
.g-feature { padding: 16px; border-bottom: 1px solid var(--line); }
.g-feature:nth-child(odd) { border-right: 1px solid var(--line); }
.g-feature:nth-last-child(-n + 2) { border-bottom: 0; }
.g-feature strong { display: block; }
.g-feature span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.g-landings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.g-landing { display: block; padding: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.g-landing:hover { border-color: var(--line-2); background: var(--surface-2); text-decoration: none; }
.g-landing small { color: var(--accent-2); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.g-landing strong { display: block; margin-top: 6px; font-size: 17px; line-height: 1.25; }
.g-landing span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.g-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g-faq__item { padding: 16px; border: 1px solid var(--line); background: var(--surface); }
.g-faq__item h3 { margin: 0; font-size: 16px; }
.g-faq__item p { margin: 8px 0 0; font-size: 14px; }
.g-more { margin-top: 16px; }
.g-howto__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.g-howto__steps li { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); background: var(--surface); counter-increment: step; }
.g-howto__steps li::before { content: "Step " counter(step); color: var(--accent-2); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.g-howto__steps strong { font-size: 17px; line-height: 1.25; }
.g-howto__steps span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.g-howto__steps a { margin-top: auto; padding-top: 4px; font-size: 13px; }
.g-howto .g-more { color: var(--muted); font-size: 14px; }

/* ---------- Preset detail ---------- */
.g-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.g-crumbs li + li::before { content: '›'; margin-right: 6px; color: var(--muted-2); }
.g-crumbs a { color: var(--muted); }
.g-crumbs [aria-current] { color: var(--text); }
.g-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; }
.g-stage {
  display: grid; place-items: center; min-height: 560px; padding: 48px;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.12), transparent 60%), #0e0e12;
}
.g-stage > img, .g-stage > video { grid-area: 1 / 1; }
.g-stage video { background: transparent; }
.g-stage img, .g-stage video { width: min(100%, 440px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 18px #1d1d23, 0 0 0 19px #3a3a43, 0 30px 80px rgba(0, 0, 0, 0.6); }
.g-info h1 { font-size: clamp(34px, 3.6vw, 48px); }
.g-by { margin: 8px 0 0; color: var(--muted); }
.g-by strong { color: var(--text); }
.g-desc { margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.g-cta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 22px 0; }
.g-cta__main { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.g-cta__note { color: var(--muted); font-size: 12px; }
.g-card__likes { white-space: nowrap; }
/* "Like This Design": likes are given in the app only, so this explains and offers the install dialog. Works without JS (<details>). */
.g-like { margin: -10px 0 22px; }
.g-like > summary { list-style: none; cursor: pointer; }
.g-like > summary::-webkit-details-marker { display: none; }
.g-like > summary span { color: #f472b6; }
.g-like[open] > summary { border-color: #f472b6; }
.g-like__note { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; }
.g-like__note p { margin: 0 0 10px; }
.g-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--line); background: var(--line); }
.g-facts div { padding: 12px 14px; background: var(--surface); }
/* A last row with two cells: the last one takes the empty slot. */
.g-facts div:last-child:nth-child(3n + 2) { grid-column: span 2; }
.g-facts dt { color: var(--muted-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.g-facts dd { margin: 4px 0 0; font-weight: 700; }
.g-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.g-tags li { padding: 5px 9px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 12px; }
.g-tags li:has(a) { padding: 0; }
.g-tags a { display: block; padding: 5px 9px; color: var(--accent-2); text-decoration: none; }
.g-tags a:hover, .g-tags a:focus-visible { color: var(--accent-ink); background: var(--accent); }
.g-share { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.g-list { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.8; }
.g-list strong { color: var(--text); }

/* ---------- Install dialog ---------- */
.g-dialog {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 28px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
}
.g-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.g-dialog h2 { font-size: 24px; padding-right: 40px; }
.g-dialog__close { position: absolute; top: 12px; right: 12px; margin: 0; }
.g-dialog__close button { width: 36px; height: 36px; border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; font-size: 20px; line-height: 1; }
.g-dialog__lead { color: var(--muted); }
.g-steps { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.g-step { padding: 16px; border: 1px solid var(--line); background: var(--bg); }
.g-step h3 { font-size: 16px; margin: 0 0 6px; }
.g-step p { margin: 0 0 12px; color: var(--muted); }
.g-substeps { margin: 0 0 12px; padding-left: 20px; color: var(--muted); }
.g-copy { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.g-copy code { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-dialog__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); }
.g-dialog__foot { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.g-error-links { margin-top: 24px; max-width: 420px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-detail { grid-template-columns: 1fr; }
  .g-stage { min-height: 0; }
}
@media (max-width: 960px) {
  .g-hero, .g-split { grid-template-columns: 1fr; }
  .g-layout { grid-template-columns: 1fr; }
  .g-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-landings { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .g-top { padding: 0 16px; }
  .g-nav > a:not(.g-btn) { display: none; }
  .g-brand__text b { font-size: 13px; letter-spacing: 0.02em; }
  .g-wrap { padding: 16px 16px 0; }
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .g-side { grid-template-columns: minmax(0, 1fr); }
  .g-landings, .g-faq__grid, .g-features, .g-howto__steps { grid-template-columns: 1fr; }
  .g-feature { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .g-facts { grid-template-columns: 1fr 1fr; }
  .g-facts div:last-child:nth-child(3n + 2) { grid-column: auto; }
  .g-facts div:last-child:nth-child(odd) { grid-column: span 2; }
  .g-stage { padding: 28px; }
  .g-foot { padding: 20px 16px; }
}

/* GitHub Stargazers panel (server/stargazers.ts): same block in the gallery's left column and
   the FAQ's right column. GitHub pictures are people, so they are round; hover is the accent. */
.sg-title { display: flex; align-items: center; gap: 6px; }
.sg-title .sg-star { flex-shrink: 0; color: #fde68a; }
.sg-count { margin-left: auto; color: var(--muted-2); font-weight: 700; letter-spacing: 0; }
.sg-join { margin: -4px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.sg-join a { color: var(--accent-2); }
.sg-wall { display: flex; flex-wrap: wrap; gap: 4px; }
.sg-av { display: block; width: 24px; height: 24px; border-radius: 50%; line-height: 0; }
.sg-av img { display: block; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--surface-3); transition: box-shadow 0.15s ease; }
.sg-av:hover img, .sg-av:focus-visible img { box-shadow: 0 0 0 2px var(--accent); }
.sg-av:focus-visible { outline: none; }