/* ═══════════════════════════════════════════════════════════════════════════
   HUB 2026 — the consolidated homepage sections.

   Loaded LAST, after home-refresh.css and product-system.css, so these rules
   win without specificity games. Three things live here:

     1. .showcase  — the single Lumen Agent showcase (flagship film + eight jobs
                     on one rail and one stage), replacing the old #scenes and
                     #flows sections.
     2. .bench     — the single tool bench (every tool + the hub itself),
                     replacing the old surface grid and feature atlas.
     3. .rewind    — the forward/rewind history animation under #history.

   Tool colour is the load-bearing idea: every mark, chip and chain node reads
   its own --product-tone from the .tone-* classes in product-system.css, so a
   reader can tell which tool is doing the work at a glance. New tones for the
   non-editor actors (connectors, sharing, the hub, formats) are declared below.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --tone-connect: #2f80ed;   /* Gmail / Drive / Calendar — anything outside Lumen */
  --tone-share:   #0f9d8f;   /* links, publishing, the guest portal */
  --tone-hub:     #5965d8;   /* the library and the app frame itself */
  --tone-formats: #d9682a;   /* .docx / .xlsx / MP4 handoffs */
}
.tone-connect { --product-tone: var(--tone-connect); --product-soft: rgba(47, 128, 237, .13); }
.tone-share   { --product-tone: var(--tone-share);   --product-soft: rgba(15, 157, 143, .13); }
.tone-hub     { --product-tone: var(--tone-hub);     --product-soft: rgba(89, 101, 216, .13); }
.tone-formats { --product-tone: var(--tone-formats); --product-soft: rgba(217, 104, 42, .13); }

/* The sprite itself must not occupy layout; only its <use> references paint. */
.tool-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Every <use> icon in these sections is a stroked line icon in the tool tone. */
.st-mark svg, .cn svg, .bt-ico svg, .bp-ico svg, .hx-ico svg, .df svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Anchors that must clear the sticky header when linked directly. */
.anchor-offset { display: block; position: relative; top: -96px; visibility: hidden; }


/* ═══════════════════════════════════════════════════════════════════════════
   1 · AGENT SHOWCASE
   One rail, one stage, nine films. The rail is the story ("here is everything
   it can finish"), the stage is the proof.
   ═══════════════════════════════════════════════════════════════════════════ */
.showcase { padding: 84px 0 90px; }
.showcase .head { margin-bottom: 34px; }

.showcase-shell {
  display: grid;
  grid-template-columns: minmax(292px, .74fr) minmax(0, 1.26fr);
  gap: clamp(22px, 3vw, 42px);
  align-items: start;
  scroll-margin-top: 84px;
}
@media (max-width: 1000px) { .showcase-shell { grid-template-columns: minmax(0, 1fr); } }

/* ── The rail ─────────────────────────────────────────────────────────────
   Nine jobs is a lot of vertical space, so the rail scrolls inside itself on
   tall screens and the tabs are compact: tool marks first (the colour cue),
   then the prompt. */
.show-rail {
  display: grid;
  gap: 7px;
  max-height: 640px;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* Stacked, nine tabs would push the film a screen and a half down the page, so
   on a phone the stage leads and the list of other jobs follows it. */
@media (max-width: 1000px) {
  .show-rail { max-height: none; overflow: visible; }
  .show-stage { order: -1; margin-bottom: 26px; }
}

.show-tab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  padding: 13px 15px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
.show-tab:hover { border-color: #c3cbe8; transform: translateX(3px); }
.show-tab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.show-tab[aria-selected="true"] {
  border-color: transparent;
  background: linear-gradient(150deg, #fff, #f7f9ff);
  box-shadow: 0 0 0 2px var(--mid), 0 18px 38px -28px rgba(89, 101, 216, .9);
}

.st-flag {
  display: inline-flex;
  /* The tab is a single-column grid, so it is `justify-self` — not
     `align-self` — that stops the badge stretching the full card width. */
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--grad);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* The colour cue. Marks overlap slightly so a four-tool job still reads as one
   object rather than a row of unrelated squares. */
.st-marks { display: flex; align-items: center; }
.st-mark {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-right: -6px;
  padding: 6px;
  border: 1px solid #fff;
  border-radius: 9px;
  color: var(--product-tone);
  background: var(--product-soft);
  box-shadow: 0 4px 12px -6px rgba(20, 27, 61, .5);
  transition: transform .22s cubic-bezier(.32, 1.5, .5, 1);
}
.st-mark:last-child { margin-right: 0; }
.show-tab:hover .st-mark,
.show-tab[aria-selected="true"] .st-mark { transform: translateY(-2px); }
.show-tab[aria-selected="true"] .st-mark {
  color: #fff;
  background: var(--product-tone);
  border-color: color-mix(in srgb, var(--product-tone) 55%, var(--surface));
}
/* Stagger the lift so the marks pop like a hand of cards. */
.show-tab .st-mark:nth-child(2) { transition-delay: .04s; }
.show-tab .st-mark:nth-child(3) { transition-delay: .08s; }
.show-tab .st-mark:nth-child(4) { transition-delay: .12s; }

.st-prompt { display: block; color: var(--ink); font-size: 14px; font-weight: 680; line-height: 1.36; }
.st-from { display: block; margin-top: 4px; color: var(--mut); font-size: 11.5px; font-weight: 560; }

/* Playback progress for the film this tab controls — driven from timeupdate. */
.st-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.st-bar i { display: block; width: 0; height: 100%; background: var(--grad); transition: width .2s linear; }
.show-tab[aria-selected="true"] .st-bar { background: rgba(89, 101, 216, .12); }

/* ── The stage ───────────────────────────────────────────────────────────── */
.show-stage { min-width: 0; }
.show-panel[hidden] { display: none; }
.show-panel { animation: showFade .45s ease both; }
@keyframes showFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The tool chain: what ran, in order, in each tool's own colour. Nodes light up
   left to right when the panel appears, which is the "watch it move" beat. */
.show-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.show-chain .cn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 8px;
  border: 1px solid color-mix(in srgb, var(--product-tone) 26%, var(--surface));
  border-radius: 999px;
  color: color-mix(in srgb, var(--product-tone) 78%, #101736);
  background: var(--product-soft);
  font-size: 12.5px;
  font-weight: 730;
  white-space: nowrap;
  animation: cnIn .5s cubic-bezier(.2, .9, .3, 1) both;
  animation-delay: calc(var(--i, 0) * .09s);
}
.show-chain .cn svg { width: 16px; height: 16px; color: var(--product-tone); }
.show-chain i {
  width: 13px; height: 2px;
  border-radius: 2px;
  background: #cdd4e6;
  animation: cnLine .5s ease both;
  animation-delay: calc((var(--i, 0) + .5) * .09s);
}
@keyframes cnIn { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes cnLine { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
/* A seven-tool chain wraps to four rows at phone width; tighten it to two. */
@media (max-width: 560px) {
  .show-chain { gap: 5px; }
  .show-chain .cn { gap: 5px; padding: 5px 9px 5px 6px; font-size: 11px; }
  .show-chain .cn svg { width: 14px; height: 14px; }
  .show-chain i { width: 9px; }
}

.show-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 34px 78px -46px rgba(20, 27, 61, .62);
}
.show-card video {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  background: #eef1f7;
}
.show-live {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  color: #e8ecff;
  background: rgba(13, 18, 42, .74);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.show-live .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #67d7b1;
  animation: showPulse 2s ease-out infinite;
}
@keyframes showPulse {
  0%   { box-shadow: 0 0 0 0 rgba(103, 215, 177, .65); }
  70%  { box-shadow: 0 0 0 9px rgba(103, 215, 177, 0); }
  100% { box-shadow: 0 0 0 0 rgba(103, 215, 177, 0); }
}

.show-copy { margin-top: 18px; }
.show-title { display: block; color: var(--ink); font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; letter-spacing: -.032em; line-height: 1.22; }
.show-note { margin: 10px 0 0; color: var(--ink2); font-size: 14.5px; line-height: 1.62; }
.show-copy .scene-out { margin-top: 15px; }
.show-copy .scene-out .o svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.6; }

/* ── Why it works / CTA ──────────────────────────────────────────────────── */
.show-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 44px;
}
@media (max-width: 900px) { .show-why { grid-template-columns: minmax(0, 1fr); } }
.show-why .sw {
  padding: 21px 22px 23px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(150deg, #fbfcff, #f4f6fd);
}
.show-why .e {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  color: #fff;
  background: var(--grad);
  font-size: 11.5px;
  font-weight: 850;
}
.show-why b { display: block; margin-top: 14px; color: var(--ink); font-size: 15.5px; letter-spacing: -.02em; }
.show-why span:not(.e) { display: block; margin-top: 7px; color: var(--mut); font-size: 13.5px; line-height: 1.55; }

.show-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 34px; text-align: center; }
.show-cta .btn.big { padding: 15px 26px; font-size: 15.5px; }
.show-cta .note { flex-basis: 100%; margin-top: 4px; color: var(--mut); font-size: 12.5px; }


/* ═══════════════════════════════════════════════════════════════════════════
   2 · TOOL BENCH
   Every tool, one panel at a time. The whole product surface in the height of
   a single card instead of a grid plus five accordions.
   ═══════════════════════════════════════════════════════════════════════════ */
#surfaces { background: #f6f7fb; border-top: 1px solid #e7e9f1; border-bottom: 1px solid #e7e9f1; }
#surfaces .head { max-width: 780px; }

.bench { margin-top: 4px; }

.bench-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 22px;
}
.bt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 9px;
  border: 1px solid #e1e5f0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink2);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s, box-shadow .2s, color .16s;
}
.bt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--product-tone) 45%, var(--surface)); color: var(--ink); }
.bt:focus-visible { outline: 2px solid var(--product-tone); outline-offset: 2px; }
.bt-ico {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 6px;
  border-radius: 50%;
  color: var(--product-tone);
  background: var(--product-soft);
  transition: transform .22s cubic-bezier(.32, 1.5, .5, 1), background .18s, color .18s;
}
.bt:hover .bt-ico { transform: rotate(-8deg) scale(1.06); }
.bt[aria-selected="true"] {
  border-color: transparent;
  color: #fff;
  background: var(--product-tone);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--product-tone) 85%, transparent);
}
.bt[aria-selected="true"] .bt-ico { color: var(--product-tone); background: #fff; }

.bench-stage { min-width: 0; }
.bench-panel[hidden] { display: none; }
.bench-panel {
  position: relative;
  padding: 30px 32px 32px;
  border: 1px solid #e3e7f1;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 70px -52px rgba(20, 27, 61, .7);
  animation: benchIn .4s ease both;
}
@media (max-width: 640px) { .bench-panel { padding: 24px 20px 26px; } }
@keyframes benchIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* A wash of the active tool's colour across the top edge, so the panel itself
   is colour-coded to the tool you picked. */
.bench-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 150px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, var(--product-soft), transparent 88%);
  pointer-events: none;
}

.bp-head {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
}
@media (max-width: 720px) { .bp-head { grid-template-columns: 48px minmax(0, 1fr); } .bp-go { grid-column: 1 / -1; } }
.bp-ico {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  padding: 13px;
  border-radius: 17px;
  color: #fff;
  background: var(--product-tone);
  box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--product-tone) 90%, transparent);
  animation: bpPop .5s cubic-bezier(.3, 1.5, .5, 1) both;
}
@media (max-width: 720px) { .bp-ico { width: 48px; height: 48px; padding: 11px; } }
@keyframes bpPop { from { opacity: 0; transform: scale(.7) rotate(-12deg); } to { opacity: 1; transform: none; } }
.bp-head h3 { font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.035em; }
.bp-head small { display: block; margin-top: 3px; color: var(--mut); font-size: 13px; }
.bp-go {
  color: var(--product-tone);
  font-size: 13px;
  font-weight: 780;
  white-space: nowrap;
}
.bp-go:hover { text-decoration: underline; text-underline-offset: 3px; }

.bp-lead { position: relative; margin: 17px 0 0; max-width: 760px; color: var(--ink2); font-size: 15px; line-height: 1.62; }

/* Capability chips: everything the old feature atlas listed, tinted to the tool
   and dealt in on a short stagger so the panel resolves rather than snaps. */
.bp-chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.bp-chips span {
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--product-tone) 20%, var(--line));
  border-radius: 8px;
  color: #43506a;
  background: color-mix(in srgb, var(--product-tone) 5%, var(--surface));
  font-size: 11.5px;
  font-weight: 650;
  animation: chipIn .34s ease both;
  animation-delay: calc(var(--d, 0) * 18ms);
  transition: transform .14s ease, border-color .14s, color .14s;
}
.bp-chips span:hover { transform: translateY(-1px); border-color: var(--product-tone); color: color-mix(in srgb, var(--product-tone) 72%, #101736); }
@keyframes chipIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── The hub itself ──────────────────────────────────────────────────────── */
.hub-extras {
  margin-top: 16px;
  border: 1px solid #e1e5f0;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.hub-extras > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 21px;
  cursor: pointer;
  list-style: none;
  font-weight: 780;
}
.hub-extras > summary::-webkit-details-marker { display: none; }
.hub-extras > summary::before {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 8px;
  color: #574fd5;
  background: #f0efff;
  font-size: 15px;
}
.hub-extras[open] > summary::before { content: "−"; }
.hub-extras[open] > summary { border-bottom: 1px solid #eaecf3; }
.hx-sum span { display: block; margin-top: 2px; color: var(--mut); font-size: 12.5px; font-weight: 560; }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #eaecf3;
}
@media (max-width: 1000px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .hub-grid { grid-template-columns: minmax(0, 1fr); } }
.hx { padding: 21px; background: #fff; }
.hx-head { display: flex; align-items: center; gap: 11px; }
.hx-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  padding: 9px;
  border-radius: 11px;
  color: var(--product-tone);
  background: var(--product-soft);
}
.hx-head h4 { margin: 0; font-size: 15.5px; letter-spacing: -.02em; }
.hx-head small { display: block; margin-top: 2px; color: #7a8497; font-size: 11.5px; line-height: 1.35; }
.hx p { margin: 12px 0 0; color: #536075; font-size: 13.5px; line-height: 1.55; }
.hx .bp-chips { margin-top: 13px; }
.hx .bp-chips span { animation: none; }
.hx-go { display: inline-flex; margin-top: 14px; color: var(--product-tone); font-size: 12.5px; font-weight: 760; }
.hx-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.hub-foot { margin: 0; padding: 16px 21px; border-top: 1px solid #eaecf3; color: var(--mut); font-size: 12.5px; }
.hub-foot a { color: #5149d6; font-weight: 700; }
.hub-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ═══════════════════════════════════════════════════════════════════════════
   3 · AGENT DOORWAY
   ═══════════════════════════════════════════════════════════════════════════ */
.agent-door .door {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(300px, .98fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(30px, 4vw, 46px);
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(145deg, #11162d, #24204f 62%, #12343e);
}
/* minmax(0, 1fr), not 1fr: a grid item defaults to min-width:auto, so the
   nowrap CTA below would otherwise force the track wider than the card and get
   clipped by the overflow:hidden above. */
@media (max-width: 900px) { .agent-door .door { grid-template-columns: minmax(0, 1fr); } }
.agent-door .door::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(120% 90% at 80% 0%, #000, transparent 70%);
}
.agent-door .door-copy { position: relative; z-index: 2; }
.agent-door .eyebrow { color: var(--halo); }
.agent-door h2 { margin-top: 12px; color: #fff; font-size: clamp(27px, 3.6vw, 40px); letter-spacing: -.045em; }
.agent-door p { margin: 16px 0 0; max-width: 540px; color: #b7c1e6; font-size: 16px; line-height: 1.62; }
.door-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.door-cta .btn.big { padding: 14px 24px; font-size: 15px; }
/* On a narrow phone these labels are wider than the card; let them wrap and
   stack rather than dictate the layout. */
@media (max-width: 560px) {
  .door-cta { flex-direction: column; align-items: stretch; }
  .door-cta .btn { justify-content: center; white-space: normal; text-align: center; }
}
.door-cta .btn.ghost { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); color: #eaeefc; }
.door-cta .btn.ghost:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .32); }

.door-facts { position: relative; z-index: 2; display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.door-facts li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  transition: border-color .18s, background .18s, transform .18s;
}
.door-facts li:hover { transform: translateX(3px); border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); }
.door-facts .df {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 38px; height: 38px;
  padding: 9px;
  border-radius: 11px;
  color: var(--product-tone);
  background: color-mix(in srgb, var(--product-tone) 22%, transparent);
}
.door-facts b { color: #fff; font-size: 14.5px; font-weight: 720; }
.door-facts li > span:not(.df) { color: #a8b2d8; font-size: 12.5px; line-height: 1.5; }


/* ═══════════════════════════════════════════════════════════════════════════
   4 · REWIND ANIMATION (#history)
   A single 16s loop, shared by every child: the document plays forward through
   four states, holds at "now", rewinds past the automatic AI checkpoint, and
   lands restored. Every keyframe list below uses the same percentage stops, so
   the page only has to keep one timeline in its head.
   ═══════════════════════════════════════════════════════════════════════════ */
.rewind {
  margin: 42px 0 0;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(155deg, #fbfcff, #f2f5fc);
  box-shadow: 0 30px 70px -54px rgba(20, 27, 61, .8);
}
.rw-frame {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(210px, .65fr);
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
}
@media (max-width: 760px) { .rw-frame { grid-template-columns: minmax(0, 1fr); } }

/* ── The document ────────────────────────────────────────────────────────── */
.rw-doc {
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e6f1;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 18px 40px -30px rgba(20, 27, 61, .6);
}
.rw-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  border-bottom: 1px solid #eef0f6;
  background: #fafbfe;
}
.rw-bar i { width: 8px; height: 8px; border-radius: 50%; background: #dfe3ee; }
.rw-bar i:first-child { background: #f3b0bd; }
.rw-bar i:nth-child(2) { background: #f6d59c; }
.rw-bar i:nth-child(3) { background: #a9dcc6; }
.rw-bar span { margin-left: 7px; color: #8b93a8; font-size: 10.5px; font-weight: 650; }

.rw-page { position: relative; height: 208px; padding: 18px 20px; }
.rw-v { position: absolute; inset: 18px 20px auto; display: grid; gap: 8px; opacity: 0; }
.rw-v .h { height: 12px; width: 46%; border-radius: 4px; background: linear-gradient(90deg, #2b3350, #5965d8); }
.rw-v .l { height: 7px; border-radius: 4px; background: #e4e8f2; }
.rw-v .acc { height: 7px; width: 64%; border-radius: 4px; background: linear-gradient(90deg, #78d5ce, #5965d8); }
.rw-v .acc.tall { height: 22px; width: 78%; border-radius: 6px; background: linear-gradient(115deg, rgba(120, 213, 206, .32), rgba(89, 101, 216, .3)); border: 1px dashed rgba(89, 101, 216, .45); }
.rw-v .w48 { width: 48%; } .rw-v .w60 { width: 60%; } .rw-v .w66 { width: 66%; }
.rw-v .w70 { width: 70%; } .rw-v .w72 { width: 72%; } .rw-v .w74 { width: 74%; }
.rw-v .w78 { width: 78%; } .rw-v .w80 { width: 80%; } .rw-v .w84 { width: 84%; }
.rw-v .w86 { width: 86%; } .rw-v .w88 { width: 88%; } .rw-v .w90 { width: 90%; } .rw-v .w92 { width: 92%; }

/* Visible while the playhead is on that version — forward, then again on the
   way back. Steps, not fades, so the swap reads as a jump between saved states. */
.rw-v1 { animation: rwV1 16s steps(1, end) infinite; }
.rw-v2 { animation: rwV2 16s steps(1, end) infinite; }
.rw-v3 { animation: rwV3 16s steps(1, end) infinite; }
.rw-v4 { animation: rwV4 16s steps(1, end) infinite; }
@keyframes rwV1 { 0% { opacity: 1 } 10% { opacity: 0 } 76% { opacity: 1 } 100% { opacity: 1 } }
@keyframes rwV2 { 0% { opacity: 0 } 10% { opacity: 1 } 20% { opacity: 0 } 66% { opacity: 1 } 76% { opacity: 0 } 100% { opacity: 0 } }
@keyframes rwV3 { 0% { opacity: 0 } 20% { opacity: 1 } 30% { opacity: 0 } 56% { opacity: 1 } 66% { opacity: 0 } 100% { opacity: 0 } }
@keyframes rwV4 { 0% { opacity: 0 } 30% { opacity: 1 } 56% { opacity: 0 } 100% { opacity: 0 } }

.rw-flag-restore {
  position: absolute;
  right: 13px; bottom: 13px;
  padding: 6px 11px;
  border-radius: 999px;
  color: #fff;
  background: #22a06b;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: 0;
  animation: rwFlag 16s ease infinite;
}
@keyframes rwFlag {
  0%, 74% { opacity: 0; transform: translateY(6px) scale(.9); }
  80%     { opacity: 1; transform: none; }
  96%     { opacity: 1; transform: none; }
  100%    { opacity: 0; transform: translateY(6px) scale(.9); }
}

/* ── The version list ────────────────────────────────────────────────────── */
.rw-side { display: flex; flex-direction: column; gap: 12px; }
.rw-dir { position: relative; height: 30px; }
.rw-dir .d {
  position: absolute;
  inset: 0 auto 0 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 780;
  opacity: 0;
}
.rw-dir .d svg { width: 13px; height: 13px; fill: currentColor; }
.rw-dir .d-fwd { color: #4a55c8; background: #eceefc; animation: rwFwd 16s steps(1, end) infinite; }
.rw-dir .d-rew { color: #b4562d; background: #fdefe6; animation: rwRew 16s steps(1, end) infinite; }
.rw-dir .d-res { color: #1b7a56; background: #e6f6ef; animation: rwRes 16s steps(1, end) infinite; }
@keyframes rwFwd { 0% { opacity: 1 } 46% { opacity: 0 } 100% { opacity: 0 } }
@keyframes rwRew { 0% { opacity: 0 } 46% { opacity: 1 } 76% { opacity: 0 } 100% { opacity: 0 } }
@keyframes rwRes { 0% { opacity: 0 } 76% { opacity: 1 } 100% { opacity: 1 } }

/* The version rows are painted by an infinite animation, so their colours
   have to be variables: an animated declaration outranks any rule a theme
   sheet could add. */
:root { --rw-idle: #fff; --rw-on: #f4f5ff; }
.rw-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rw-list li {
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: #fff;
  transition: none;
}
.rw-list b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 700; }
.rw-list span { display: block; margin-top: 2px; color: var(--mut); font-size: 11px; }
/* Each row is highlighted exactly while its version is on screen. */
.rw-list .rw-s1 { animation: rwS1 16s steps(1, end) infinite; }
.rw-list .rw-s2 { animation: rwS2 16s steps(1, end) infinite; }
.rw-list .rw-s3 { animation: rwS3 16s steps(1, end) infinite; }
.rw-list .rw-s4 { animation: rwS4 16s steps(1, end) infinite; }
@keyframes rwS1 { 0% { border-color: var(--mid); background: var(--rw-on) } 10% { border-color: transparent; background: var(--rw-idle) } 76% { border-color: var(--mid); background: var(--rw-on) } 100% { border-color: var(--mid); background: var(--rw-on) } }
@keyframes rwS2 { 0% { border-color: transparent; background: var(--rw-idle) } 10% { border-color: var(--mid); background: var(--rw-on) } 20% { border-color: transparent; background: var(--rw-idle) } 66% { border-color: var(--mid); background: var(--rw-on) } 76% { border-color: transparent; background: var(--rw-idle) } 100% { border-color: transparent; background: var(--rw-idle) } }
@keyframes rwS3 { 0% { border-color: transparent; background: var(--rw-idle) } 20% { border-color: var(--mid); background: var(--rw-on) } 30% { border-color: transparent; background: var(--rw-idle) } 56% { border-color: var(--mid); background: var(--rw-on) } 66% { border-color: transparent; background: var(--rw-idle) } 100% { border-color: transparent; background: var(--rw-idle) } }
@keyframes rwS4 { 0% { border-color: transparent; background: var(--rw-idle) } 30% { border-color: var(--mid); background: var(--rw-on) } 56% { border-color: transparent; background: var(--rw-idle) } 100% { border-color: transparent; background: var(--rw-idle) } }

/* ── The scrubber ────────────────────────────────────────────────────────── */
.rw-track {
  position: relative;
  height: 34px;
  margin-top: 18px;
  border-radius: 999px;
  background: #e8ebf4;
}
.rw-track::before { content: ""; position: absolute; inset: 15px 16px auto; height: 4px; border-radius: 999px; background: #d5dae8; }
.rw-fill {
  position: absolute;
  top: 15px; left: 16px;
  height: 4px;
  width: 0;
  border-radius: 999px;
  background: var(--grad);
  animation: rwFill 16s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes rwFill {
  0% { width: 0 } 10% { width: 26% } 20% { width: 53% } 30% { width: 82% }
  46% { width: 82% } 56% { width: 53% } 66% { width: 26% } 76% { width: 0 } 100% { width: 0 }
}
.rw-stop {
  position: absolute;
  top: 12px;
  left: var(--p);
  width: 10px; height: 10px;
  margin-left: -5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #b9c1d6;
}
.rw-stop-ai { background: #78d5ce; }
.rw-head {
  position: absolute;
  top: 5px;
  left: 6%;
  width: 24px; height: 24px;
  margin-left: -12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 6px 16px -6px rgba(89, 101, 216, .9);
  animation: rwHead 16s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes rwHead {
  0% { left: 6% } 10% { left: 35% } 20% { left: 64% } 30% { left: 94% }
  46% { left: 94% } 56% { left: 64% } 66% { left: 35% } 76% { left: 6% } 100% { left: 6% }
}
.rewind figcaption { margin-top: 15px; color: var(--mut); font-size: 13px; text-align: center; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOTION PREFERENCES
   Everything above is decoration on top of static content, so honouring the
   preference is simply a matter of freezing it — nothing disappears.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .show-panel, .show-chain .cn, .show-chain i, .bench-panel, .bp-ico, .bp-chips span { animation: none !important; }
  .show-live .pulse { animation: none; }
  .show-tab:hover, .bt:hover, .door-facts li:hover, .st-mark { transform: none !important; }
  .rw-v, .rw-flag-restore, .rw-dir .d, .rw-list li, .rw-fill, .rw-head { animation: none !important; }
  /* Freeze the scrubber on the restored state, which is the point being made. */
  .rw-v1 { opacity: 1; }
  .rw-dir .d-res { opacity: 1; }
  .rw-list .rw-s1 { border-color: var(--mid); background: #f4f5ff; }
  .rw-fill { width: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   NO-JS FALLBACK
   Both switchers hide their inactive panels with the `hidden` attribute, which
   only the scripts remove. If the scripts never run, `.no-js` (set on <html>
   and cleared by the first inline script) un-hides everything so the page is
   still a complete, readable list.
   ═══════════════════════════════════════════════════════════════════════════ */
.no-js .show-panel[hidden], .no-js .bench-panel[hidden] { display: block; }
.no-js .show-rail, .no-js .bench-rail { display: none; }
.no-js .showcase-shell { grid-template-columns: 1fr; }
.no-js .show-stage { display: grid; gap: 40px; }
.no-js .bench-stage { display: grid; gap: 16px; }