/* ═══════════════════════════════════════════════════════════════════════
   vbgnt public site: shared chrome for vbgnt.com.

   Dark by design: the product is a game console, and the arcade
   (gallery/index.html) it hands you is dark too, so the marketing site and
   the thing it sells look like one object. The arcade carries this same
   palette, so keep the two in step when either moves.

   Two accents, with distinct jobs: violet carries actions (buttons, links,
   hovers), cyan carries labels and affirmatives (overlines, ticks, kickers).
   Mixing those roles is what makes a two-accent system look accidental.

   Loaded by the landing page and every blog post, so nav, footer, buttons
   and prose stay one system as the site grows.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ground: #08080c;      /* the arcade's background, exactly */
  --raised: #101018;
  --card: #16161f;
  --line: #252531;
  --line-strong: #363646;

  --violet: #7c5cff;      /* ambient glow + washes only */
  --violet-hot: #9b84ff;
  --violet-deep: #6344e8;
  --violet-wash: rgba(124, 92, 255, 0.13);
  --cyan: #22d3ee;        /* actions, labels, affirmatives */
  --cyan-hot: #67e8f9;
  --on-cyan: #05050a;     /* text on a cyan fill */
  --cyan-dim: rgba(34, 211, 238, 0.5);

  --fg1: #f2f1f8;
  --fg2: #d3d1e0;
  --fg3: #b9b6c9;
  --fg4: #837f94;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-3: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sh-4: 0 24px 60px rgba(0, 0, 0, 0.55);

  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  color: var(--fg2);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
/* height:auto matters: images that carry width/height attributes (as the
   blog figures do, to reserve space before they load) otherwise keep the
   attribute height while max-width shrinks the width, and render squashed. */
::selection { background: var(--cyan); color: var(--on-cyan); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 740px; margin: 0 auto; padding: 0 32px; }

h1, h2, h3, h4 { font-family: var(--display); color: var(--fg1);
  letter-spacing: -0.03em; }
.overline { font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); }
.h2 { font-weight: 700; font-size: 38px; line-height: 1.1; margin: 14px 0 10px;
  max-width: 18ch; }
.lead { font-size: 17px; line-height: 1.62; color: var(--fg3); max-width: 60ch; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; transition: all .18s; white-space: nowrap; }
.btn-primary { background: var(--cyan); color: var(--on-cyan); }
.btn-primary:hover { background: var(--cyan-hot); }
.btn-ghost { border-color: var(--line-strong); color: var(--fg1);
  background: transparent; }
.btn-ghost:hover { border-color: var(--cyan); background: var(--violet-wash); }

/* ── nav ─────────────────────────────────────────────────────────────── */
nav { position: sticky; top: 0; z-index: 50;
  background: rgba(8, 8, 12, 0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 32px; padding: 14px 0; }
.wordmark { display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: -0.03em; color: var(--fg1); }
.nav-links { display: flex; gap: 26px; }
.nav-links a { font-size: 14.5px; font-weight: 500; color: var(--fg3);
  white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--fg1); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* ── sections ────────────────────────────────────────────────────────── */
.section { padding: 84px 0; }
.section.raised { background: var(--raised);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.grid-bg {
  background-image: radial-gradient(rgba(124, 92, 255, 0.13) 1px, transparent 1px);
  background-size: 22px 22px; }

/* ── ambient backdrop ────────────────────────────────────────────────── */
/* A dot grid that fades toward the bottom, two slow-drifting brand glows,
   and the wordmark's three chevrons drawing themselves in the left gutter.
   Decorative only, so the markup carries aria-hidden.

   Sized here for a compact header (blog posts, the blog index). The landing
   page hero is far taller and overrides the glow geometry; keep both in step.
   Any element hosting one needs position:relative and overflow:hidden. */
.ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ambient .grid { position: absolute; inset: 0;
  background-image: radial-gradient(rgba(124,92,255,0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(125% 92% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(125% 92% at 50% 0%, #000 0%, transparent 72%); }
.ambient .glow { position: absolute; border-radius: 50%; filter: blur(76px); }
.ambient .glow-a { width: 460px; height: 340px; top: -190px; left: -120px;
  background: radial-gradient(circle, rgba(124,92,255,0.30), transparent 68%);
  animation: drift-a 24s ease-in-out infinite; }
.ambient .glow-b { width: 420px; height: 300px; top: -60px; right: -150px;
  background: radial-gradient(circle, rgba(34,211,238,0.16), transparent 68%);
  animation: drift-b 29s ease-in-out infinite; }
/* The chevrons sit mostly in the left gutter, tips reaching a little behind
   the text column. The svg's ink ends 434px into a 560px box, so anchor that
   edge off the narrow wrap's content edge. */
.ambient .arcs { position: absolute; top: 10px;
  left: calc(max(20px, 50% - 338px) - 368px); width: 560px; height: 560px;
  opacity: 0.075; }
.ambient .arcs path { stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: draw 11s ease-in-out infinite; }
.ambient .arcs path:nth-child(2) { animation-delay: .45s; }
.ambient .arcs path:nth-child(3) { animation-delay: .9s; }

@keyframes drift-a { 50% { transform: translate(70px, 50px) scale(1.12); } }
@keyframes drift-b { 50% { transform: translate(-60px, 40px) scale(1.08); } }
@keyframes draw {
  0% { stroke-dashoffset: 26; } 22%, 66% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -26; } }

@media (prefers-reduced-motion: reduce) {
  .ambient .glow, .ambient .arcs path { animation: none; }
  .ambient .arcs path { stroke-dashoffset: 0; }
}

/* The blog index header hosts the ambient backdrop the same way a post
   header does, so the two entry points match. */
.index-head { position: relative; overflow: hidden; }
.index-head > .wrap { position: relative; z-index: 1; }
/* The index uses the wide .wrap rather than .wrap-narrow, so the chevrons
   anchor off a content edge 210px further out or they cross the headline. */
.index-head .ambient .arcs { left: calc(max(20px, 50% - 548px) - 344px); }

/* ── prose (blog posts) ──────────────────────────────────────────────── */
.prose { font-size: 17px; line-height: 1.74; color: var(--fg2); }
.prose > * + * { margin-top: 21px; }
.prose h2 { font-size: 27px; font-weight: 700; margin-top: 50px;
  letter-spacing: -0.026em; scroll-margin-top: 90px; }
.prose h3 { font-size: 20px; font-weight: 700; margin-top: 34px;
  letter-spacing: -0.02em; scroll-margin-top: 90px; }
.prose a { color: var(--cyan); font-weight: 500;
  border-bottom: 1px solid var(--cyan-dim); }
.prose a:hover { border-bottom-color: var(--cyan); }
.prose ul, .prose ol { padding-left: 22px; display: flex;
  flex-direction: column; gap: 10px; }
.prose li { line-height: 1.68; }
.prose li::marker { color: var(--cyan); }
.prose strong { color: var(--fg1); font-weight: 700; }
.prose em { color: var(--fg1); }
.prose blockquote { border-left: 3px solid var(--cyan);
  background: var(--violet-wash); padding: 16px 20px; border-radius: 0 10px 10px 0;
  color: var(--fg2); font-size: 16.5px; }
.prose blockquote p + p { margin-top: 12px; }
/* Long identifiers have no spaces to break at, so a single inline token like
   DisplayServer.is_touchscreen_available() pushes the page sideways on a
   phone. Let them break anywhere rather than overflow. */
.prose code { font-family: var(--mono); font-size: 0.86em;
  background: #1d1d28; padding: 2px 6px; border-radius: 5px; color: var(--cyan);
  overflow-wrap: anywhere; }
.prose pre { background: #05050a; border: 1px solid var(--line);
  color: var(--fg2); padding: 18px 20px; border-radius: 12px; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 42px 0; }
.prose figure { margin: 32px 0; }
.prose figcaption { font-size: 13.5px; color: var(--fg4); margin-top: 10px; }
.prose figure img { display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line); background: #05050a; }

/* Inline 3D asset previews. The <model-viewer> element is a deferred module,
   so before it upgrades (or with JS off) the poster <img> inside it is what
   shows: same size, same frame, no layout shift either way. */
.model-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 0; }
.model-strip figure { margin: 0; }
.prose model-viewer { display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 12px; border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 50% 0%, #14141f 0%, #06060b 70%);
  --poster-color: transparent; }
.prose model-viewer img { width: 100%; height: 100%; object-fit: contain;
  border: 0; border-radius: 12px; background: none; }
.model-strip figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.5; }
.model-strip figcaption b { color: var(--fg2); font-weight: 600; }
.model-note { font-size: 13.5px; color: var(--fg4); margin-top: 14px; }
@media (max-width: 720px) {
  .model-strip { grid-template-columns: 1fr; gap: 18px; }
}

/* Tables scroll inside their own container, so the page never scrolls sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 12px; }
.prose table { border-collapse: collapse; width: 100%; min-width: 560px;
  font-size: 14.5px; }
.prose th, .prose td { text-align: left; padding: 12px 16px;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.prose thead th { background: var(--card); font-family: var(--display);
  font-weight: 700; color: var(--fg1); font-size: 13.5px; white-space: nowrap; }
.prose tbody tr:last-child td { border-bottom: 0; }

/* Extractable summary at the top of every post (SEO + AI answer engines). */
.takeaways { border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  background: var(--card); border-radius: 0 14px 14px 0; padding: 24px 26px;
  margin-bottom: 38px; }
.takeaways h2 { font-size: 12px; font-family: var(--mono); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan);
  margin: 0 0 14px; }
.takeaways ul { margin: 0; padding-left: 20px; display: flex;
  flex-direction: column; gap: 11px; }
.takeaways li { font-size: 15.5px; line-height: 1.62; color: var(--fg2); }
.takeaways li::marker { color: var(--cyan); }

.post-faq { margin-top: 54px; }
.post-faq h2 { font-family: var(--display); font-size: 27px; font-weight: 700;
  letter-spacing: -0.026em; margin-bottom: 8px; }
.post-faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.post-faq summary { font-family: var(--display); font-weight: 700; font-size: 17.5px;
  color: var(--fg1); cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; gap: 20px; letter-spacing: -0.018em; }
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: "+"; color: var(--cyan); font-weight: 500;
  font-size: 21px; line-height: 1; flex: none; }
.post-faq details[open] summary::after { content: "\2013"; }
.post-faq p { font-size: 15.5px; line-height: 1.68; color: var(--fg3); margin-top: 10px; }

/* Primary sources for a post's factual claims. Deliberately quieter than
   the prose: it is a reference shelf, not part of the argument. */
.post-sources { margin-top: 50px; padding-top: 26px;
  border-top: 1px solid var(--line); }
.post-sources h2 { font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: 10px; }
.post-sources p { font-size: 14px; line-height: 1.6; color: var(--fg4);
  margin-bottom: 14px; max-width: 62ch; }
.post-sources ul { margin: 0; padding-left: 20px; display: flex;
  flex-direction: column; gap: 8px; }
.post-sources li { font-size: 14.5px; line-height: 1.55; color: var(--fg3); }
.post-sources li::marker { color: var(--cyan); }
.post-sources a { color: var(--fg2); border-bottom: 1px solid var(--line-strong); }
.post-sources a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }

/* Ties a post back to the product it is about. */
.try-cta { margin-top: 50px; border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 28px; background: var(--card);
  display: flex; gap: 22px; align-items: center; }
.try-cta .body { flex: 1; }
.try-cta h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.try-cta p { font-size: 15px; color: var(--fg3); line-height: 1.55; }

/* ── blog index cards ────────────────────────────────────────────────── */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  margin-top: 36px; }
.post-card { display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  box-shadow: var(--sh-1); transition: all .18s; }
.post-card:hover { border-color: var(--cyan); box-shadow: var(--sh-3);
  transform: translateY(-2px); }
.post-card .kicker { font-family: var(--mono); font-size: 11px;
  font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--cyan); }
.post-card h3 { font-size: 20px; font-weight: 700; margin: 12px 0 8px;
  line-height: 1.25; letter-spacing: -0.022em; }
.post-card p { font-size: 14.5px; color: var(--fg3); line-height: 1.55; flex: 1; }
.post-card .meta { display: flex; gap: 12px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--fg4); }
.post-card.featured { grid-column: 1 / -1; }
.post-card.featured h3 { font-size: 27px; }

/* ── post header + breadcrumbs ───────────────────────────────────────── */
.crumbs { font-family: var(--mono); font-size: 12px; color: var(--fg4);
  display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--cyan); }
.post-head { position: relative; overflow: hidden; padding: 56px 0 36px;
  border-bottom: 1px solid var(--line); }
.post-head > .wrap-narrow { position: relative; z-index: 1; }
.post-head h1 { font-size: 43px; font-weight: 700; line-height: 1.08;
  letter-spacing: -0.036em; margin: 18px 0 0; }
.post-head .standfirst { font-size: 19px; line-height: 1.55; color: var(--fg3);
  margin-top: 18px; }
.post-head .byline { display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap; margin-top: 24px; font-family: var(--mono);
  font-size: 12px; color: var(--fg4); }
.post-body { padding: 44px 0 76px; }

/* ── footer ──────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); background: var(--raised); }
.foot-cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 32px; padding: 48px 0 36px; }
.foot-cols p { font-size: 13.5px; color: var(--fg3); line-height: 1.6;
  margin-top: 14px; max-width: 260px; }
.foot-cols h4 { font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg4);
  margin-bottom: 14px; }
.foot-cols .links { display: flex; flex-direction: column; gap: 9px; }
.foot-cols .links a, .foot-cols .links span { font-size: 13.5px; color: var(--fg3); }
.foot-cols .links a:hover { color: var(--cyan); }
.foot-bar { border-top: 1px solid var(--line); display: flex;
  justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0;
  font-family: var(--mono); font-size: 12.5px; color: var(--fg4); }

@media (max-width: 1000px) {
  .post-grid { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .post-head h1 { font-size: 33px; }
}
@media (max-width: 620px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
  .nav-links { display: none; }
  .foot-cols { grid-template-columns: 1fr; }
  .h2 { font-size: 29px; }
  .section { padding: 60px 0; }
  .prose { font-size: 16.5px; }
  .prose h2 { font-size: 23px; }
  .try-cta { flex-direction: column; align-items: flex-start; }
}

/* ═══ dream.vbgnt.com additions: the gallery and its session player ═══ */
.alpha-pill { display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--violet-wash); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.hero-dream { position: relative; overflow: hidden; padding: 96px 0 72px;
  border-bottom: 1px solid var(--line); }
.hero-dream > .wrap { position: relative; z-index: 1; }
.hero-dream h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1.0;
  margin: 18px 0 16px; max-width: 14ch; }
.hero-dream .lead { font-size: 19px; max-width: 56ch; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  margin-top: 44px; }
.hero-strip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); background: #05050a; }
.hero-strip img:nth-child(even) { transform: translateY(14px); }
@media (max-width: 760px) { .hero-strip { grid-template-columns: repeat(3, 1fr); }
  .hero-strip img:nth-child(n+4) { display: none; } }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 22px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); }
.step .num { font-family: var(--mono); color: var(--cyan); font-size: 12px;
  letter-spacing: 0.14em; }
.step h3 { font-size: 20px; margin: 10px 0 8px; }
.step p { color: var(--fg3); line-height: 1.6; font-size: 15px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 34px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.compare { padding: 26px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--raised); }
.compare h3 { font-size: 24px; margin-bottom: 10px; }
.compare p { color: var(--fg3); line-height: 1.62; font-size: 15.5px; }
.compare ul { margin-top: 14px; padding-left: 20px; color: var(--fg2);
  display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.compare li::marker { color: var(--cyan); }
.compare img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); margin-bottom: 16px; }

/* gallery */
.dream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px; margin-top: 30px; }
.dream-card { border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  overflow: hidden; display: flex; flex-direction: column; }
.dream-card .art { position: relative; aspect-ratio: 16 / 9; background: var(--raised); }
.dream-card .art img { width: 100%; height: 100%; object-fit: cover; }
.dream-card .badge { position: absolute; left: 10px; top: 10px; padding: 3px 9px;
  border-radius: 999px; background: rgba(8,8,12,.85); color: var(--violet-hot);
  font-family: var(--mono); font-size: 11px; }
.dream-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.dream-card h3 { font-size: 20px; }
.dream-card .genre { font-family: var(--mono); font-size: 11.5px; color: var(--cyan);
  letter-spacing: 0.1em; text-transform: uppercase; }
.dream-card .logline { color: var(--fg3); font-size: 14.5px; line-height: 1.5; }
.sessions { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.session { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--raised);
  cursor: pointer; color: var(--fg2); font-size: 13.5px; transition: border-color .15s; }
.session:hover { border-color: var(--cyan); }
.session .n { font-family: var(--mono); color: var(--cyan); font-size: 12px; min-width: 70px; }
.session .meta { margin-left: auto; color: var(--fg4); font-family: var(--mono); font-size: 11.5px; }
.session .play { color: var(--fg1); }
.no-sessions { color: var(--fg4); font-size: 13.5px; }
.cast-row { display: flex; gap: 6px; margin-top: 4px; }
.cast-row img { width: 40px; height: 52px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line); }

/* player overlay */
.player-back { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.86);
  display: none; align-items: center; justify-content: center; padding: 20px; }
.player-back.open { display: flex; }
.player { width: min(1100px, 100%); max-height: 100%; overflow: auto;
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.player-head { display: flex; align-items: baseline; gap: 12px; }
.player-head h3 { font-size: 20px; }
.player-head .meta { color: var(--fg4); font-family: var(--mono); font-size: 12px; }
.player-head .close { margin-left: auto; }
.stage { position: relative; background: #000; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); }
.stage video { display: block; width: 100%; max-height: 70vh; background: #000; }
.stage.portrait { max-width: 440px; margin: 0 auto; }
.caption { position: absolute; left: 0; right: 0; bottom: 56px; display: flex;
  flex-direction: column; align-items: center; gap: 4px; padding: 0 24px;
  text-align: center; pointer-events: none; }
.caption .move { padding: 6px 14px; border-radius: 999px; background: rgba(8,8,12,.8);
  color: var(--cyan); font-family: var(--display); font-size: 16px; }
.caption .line { padding: 4px 12px; border-radius: 8px; background: rgba(8,8,12,.7);
  color: var(--fg1); font-size: 14px; }
.moves { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px;
  font-size: 14px; max-height: 220px; overflow: auto; }
.moves li { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px;
  border-radius: 8px; cursor: pointer; }
.moves li:hover { background: var(--card); }
.moves li.now { background: var(--violet-wash); }
.moves .t { font-family: var(--mono); font-size: 12px; color: var(--fg4); min-width: 40px; }
.moves .narr { color: var(--fg4); }
.session-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--card); color: var(--fg2); font: inherit; font-size: 13px; cursor: pointer; }
.chip.on { border-color: var(--cyan); color: var(--fg1); }

/* honest + waitlist */
.honest-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }
@media (max-width: 760px) { .honest-list { grid-template-columns: 1fr; } }
.honest-list div { padding: 18px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--fg3); font-size: 15px; line-height: 1.55; }
.honest-list strong { color: var(--fg1); display: block; margin-bottom: 4px; }
.wl { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 30px;
  padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--raised); }
@media (max-width: 860px) { .wl { grid-template-columns: 1fr; } }
.wl form { display: flex; flex-direction: column; gap: 12px; }
.wl label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fg3); }
.wl input, .wl textarea { padding: 11px 12px; border-radius: 9px; border: 1px solid var(--line-strong);
  background: var(--ground); color: var(--fg1); font: inherit; }
.wl .note { font-size: 13px; color: var(--fg4); min-height: 18px; }
.wl .note.ok { color: var(--cyan); }
footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--fg4); font-size: 13.5px; }
.foot-in { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot-in a { color: var(--fg3); }
.foot-in .sp { margin-left: auto; }