/* SystemFlow - What's New
   The reel's whole look lives here; it no longer rides deck.css. Ten chapters,
   five layouts, one visual voice: near-black stage, one accent per chapter
   (--ac, set from the slide), mono eyebrows, huge sans with a serif landing.

   Motion budget: transform and opacity only - nothing here animates paint.
   Every entrance honours prefers-reduced-motion at the end of the file. */

.wn {
  --wn-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --wn-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wn-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --serif: 'Iowan Old Style', 'Palatino', Georgia, 'Times New Roman', serif;

  /* ── the grade ──
     The reel is a screening room: one warm ink stage in either app theme,
     ivory type, and four chapter accents pulled from print - sage, brass,
     heather, ember. Color arrives as tint and mix, never as glow; nothing
     here is fluorescent. These overrides are scoped to .wn and re-point the
     tokens the rest of this file already reads, so the app's own palette is
     untouched. */
  --wn-sage:    #9cb894;
  --wn-brass:   #c9a86d;
  --wn-heather: #ad9fc2;
  --wn-ember:   #c97f6d;

  --bg:       #14120f;
  --fg:       #ece7dd;
  --fg-dim:   #b9b2a4;
  --fg-faint: #958e80;
  --fg-ghost: #7b7466;
  --border2:    rgba(236, 231, 221, 0.14);
  --border-dim: rgba(236, 231, 221, 0.08);

  --accent: var(--wn-sage);
  --green:  var(--wn-sage);
  --amber:  var(--wn-brass);
  --purple: var(--wn-heather);
  --red:    var(--wn-ember);

  --ac: var(--accent);
  --px: 0; --py: 0;      /* pointer, -0.5..0.5, written from JS */
  --mx: 50%; --my: 40%;  /* pointer, absolute, for the spotlight */

  position: fixed;
  inset: 0;
  z-index: 460;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  animation: wn-in 380ms var(--wn-out) both;
}
@keyframes wn-in { from { opacity: 0; } }
.wn.wn-closing { animation: wn-out 240ms var(--wn-soft) both; pointer-events: none; }
@keyframes wn-out { to { opacity: 0; } }

/* ══════════════════════ the room ══════════════════════ */

.wn-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* A wide wash in the chapter's colour; it re-tints as --ac changes. */
.wn-aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(46% 42% at 24% 18%, color-mix(in oklab, var(--ac) 11%, transparent), transparent 70%),
    radial-gradient(40% 44% at 82% 78%, color-mix(in oklab, var(--ac) 8%, transparent), transparent 72%);
  transition: background 900ms var(--wn-soft);
  transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -10px), 0);
}
.wn-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  animation: wn-drift 22s var(--wn-soft) infinite alternate;
}
.wn-orb.a { width: 42vw; height: 42vw; left: -12vw; top: -14vw;
  background: radial-gradient(circle, color-mix(in oklab, var(--ac) 16%, transparent), transparent 66%); }
.wn-orb.b { width: 36vw; height: 36vw; right: -10vw; bottom: -16vw; animation-delay: -11s;
  background: radial-gradient(circle, color-mix(in oklab, var(--fg) 7%, transparent), transparent 66%); }
@keyframes wn-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, 3vw, 0) scale(1.12); }
}
.wn-spot {
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my),
    color-mix(in oklab, var(--fg) 4%, transparent), transparent 70%);
}
.wn-grain {
  position: absolute; inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wn-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, transparent 60%, rgba(0, 0, 0, 0.5));
}

/* ══════════════════════ chrome ══════════════════════ */

.wn-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px;
}
.wn-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.wn-branddot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ac);
  transition: background 700ms var(--wn-soft);
  animation: wn-blink 2.2s var(--wn-soft) infinite;
}
@keyframes wn-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.wn-top-actions { display: flex; align-items: center; gap: 8px; }

.wn-iconbtn, .wn-quiet {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: color-mix(in oklab, var(--fg) 4%, transparent);
  color: var(--fg-dim);
  cursor: pointer;
  transition: color 160ms var(--wn-soft), background 160ms var(--wn-soft),
              border-color 160ms var(--wn-soft), transform 180ms var(--wn-out);
}
.wn-iconbtn { width: 34px; height: 34px; }
.wn-quiet { height: 34px; padding: 0 15px; font: 600 12px/1 var(--sans); gap: 7px; }
.wn-iconbtn:hover, .wn-quiet:hover {
  color: var(--fg);
  background: color-mix(in oklab, var(--fg) 9%, transparent);
  transform: translateY(-1px);
}

.wn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: 13px;
  background: var(--fg);
  color: var(--bg);
  font: 700 13px/1 var(--sans);
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 200ms var(--wn-out), filter 200ms var(--wn-soft);
}
.wn-cta:hover { transform: translateY(-2px); filter: brightness(0.94); }
.wn-cta:active { transform: translateY(0); }
.wn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 13px;
  border: 1px solid var(--border2);
  background: color-mix(in oklab, var(--fg) 4%, transparent);
  color: var(--fg-dim);
  font: 650 13px/1 var(--sans);
  cursor: pointer;
  transition: color 160ms var(--wn-soft), background 160ms var(--wn-soft), transform 200ms var(--wn-out);
}
.wn-ghost:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent); transform: translateY(-2px); }
.wn-link {
  border: none; background: none; padding: 0;
  color: var(--fg-faint);
  font: 600 12px/1 var(--sans);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--fg) 26%, transparent);
  transition: color 160ms var(--wn-soft);
}
.wn-link:hover { color: var(--fg); }

.wn-iconbtn:focus-visible, .wn-quiet:focus-visible, .wn-cta:focus-visible,
.wn-ghost:focus-visible, .wn-step:focus-visible, .wn-navbtn:focus-visible, .wn-link:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

/* ══════════════════════ slides ══════════════════════ */

.wn-slides {
  position: relative; z-index: 2;
  width: min(1120px, calc(100vw - 96px));
  min-height: 0;
}
/* Remounted per slide (React key): a rise with a slight scale press,
   like a cut in a title sequence. */
.wn-slide { animation: wn-cut 620ms var(--wn-out) both; }
@keyframes wn-cut {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ── type ── */
.wn-words { display: inline; }
.wn-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; }
.wn-word:not(:last-child) { margin-right: 0.26em; }
.wn-word > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(110%);
  animation: wn-word 640ms var(--wn-out) both;
}
@keyframes wn-word { to { transform: none; } }
.wn-word > i.wn-serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: color-mix(in oklab, var(--ac) 55%, var(--fg));
}

.wn-h1, .wn-h2 { margin: 0; letter-spacing: -0.035em; color: var(--fg); }
.wn-h1 { font: 800 clamp(42px, 5.6vw, 70px)/1.04 var(--sans); }
.wn-h2 { font: 800 clamp(28px, 3.6vw, 44px)/1.08 var(--sans); }
.wn-h2.center { text-align: center; }

.wn-lede {
  margin: 0;
  max-width: 52ch;
  font: 450 14px/1.65 var(--sans);
  color: var(--fg-dim);
  animation: wn-rise 700ms var(--wn-out) 0.35s both;
}
.wn-lede.center { text-align: center; margin-inline: auto; }
@keyframes wn-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.wn-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ac) 75%, var(--fg));
  animation: wn-rise 600ms var(--wn-out) 0.1s both;
}
.wn-kicker > i {
  width: 22px; height: 1.5px;
  background: var(--ac);
  transform-origin: left center;
  animation: wn-rule 700ms var(--wn-out) 0.2s both;
}
@keyframes wn-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.wn-capline {
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-ghost);
}
.wn-capline.mid { fill: var(--fg-ghost); font: 600 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: none; }

/* ── bullets ── */
.wn-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.wn-points li {
  display: flex; align-items: center; gap: 11px;
  font: 550 13px/1.5 var(--sans);
  color: var(--fg-dim);
  animation: wn-rise 560ms var(--wn-out) both;
}
.wn-tickmark {
  flex: none;
  width: 19px; height: 19px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ac);
  background: color-mix(in oklab, var(--ac) 13%, transparent);
}

/* ── the ghost chapter numeral ── */
.wn-chapnum {
  position: absolute;
  top: -0.42em; left: -0.06em;
  z-index: -1;
  font: 800 clamp(120px, 15vw, 190px)/1 var(--sans);
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--ac) 22%, transparent);
  animation: wn-num 900ms var(--wn-out) both;
  pointer-events: none;
}
@keyframes wn-num {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════ cover ══════════════════════ */

.wn-cover {
  display: grid; justify-items: center; text-align: center; gap: 20px;
}
.wn-verpill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: color-mix(in oklab, var(--fg) 4%, transparent);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  animation: wn-rise 600ms var(--wn-out) 0.05s both;
}
.wn-verpill > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ac); animation: wn-blink 2s var(--wn-soft) infinite; }
.wn-verpill b { color: var(--fg); }
.wn-verpill em { font-style: normal; color: var(--fg-ghost); }

.wn-cover-hint {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11.5px/1 var(--sans);
  color: var(--fg-ghost);
  animation: wn-rise 700ms var(--wn-out) 0.6s both;
}
.wn-ping {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ac);
  animation: wn-blink 1.6s var(--wn-soft) infinite;
}

/* The receipts strip: the product's own numbers, counted live. */
.wn-ticker {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 14px;
}
.wn-tick-cell {
  display: grid; gap: 6px; justify-items: center;
  min-width: 128px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--border-dim);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  animation: wn-pop-in 560ms var(--wn-spring) both;
}
@keyframes wn-pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
.wn-tick-cell b { font: 800 24px/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wn-tick-cell span { font: 600 10px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-ghost); max-width: 16ch; text-align: center; }

/* ══════════════════════ metrics wall ══════════════════════ */

.wn-metrics { display: grid; gap: 34px; justify-items: center; }
.wn-metrics .wn-copy.center { display: grid; justify-items: center; gap: 14px; text-align: center; }
.wn-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}
.wn-tile {
  display: grid; align-content: start; gap: 8px;
  padding: 24px 22px;
  border-radius: 20px;
  border: 1px solid var(--border-dim);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  animation: wn-pop-in 620ms var(--wn-spring) both;
  transition: border-color 220ms var(--wn-soft), transform 240ms var(--wn-out);
}
.wn-tile:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--ac) 40%, transparent); }
.wn-tile b {
  font: 800 clamp(30px, 3.4vw, 44px)/1 var(--sans);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--ac) 55%, var(--fg));
}
.wn-tile b em { font-style: normal; font-size: 0.55em; margin-left: 2px; color: var(--fg-dim); }
.wn-tile-k { font: 700 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); }
.wn-tile-s { font: 500 11px/1.5 var(--sans); color: var(--fg-ghost); }

/* ══════════════════════ film scenes & splits ══════════════════════ */

.wn-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.wn-copy { position: relative; display: grid; justify-items: start; gap: 16px; }
.wn-copy .wn-h2 { max-width: 15ch; }

/* the product window */
.wn-stage {
  position: relative;
  min-width: 0;
  animation: wn-stage 760ms var(--wn-out) 0.2s both;
  transform-style: preserve-3d;
  perspective: 1100px;
}
@keyframes wn-stage {
  from { opacity: 0; transform: perspective(1100px) rotateY(-5deg) translateY(20px); }
  to   { opacity: 1; transform: perspective(1100px) rotateY(0deg) translateY(0); }
}
.wn-window {
  border-radius: 18px;
  border: 1px solid var(--border2);
  background: color-mix(in oklab, var(--fg) 3%, var(--bg));
  box-shadow: 0 44px 90px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  /* the window leans with the pointer - camera handling, not a hover trick.
     --px/--py are written from JS and stay 0 under prefers-reduced-motion. */
  transform: rotateY(calc(var(--px) * 3.5deg)) rotateX(calc(var(--py) * -2.5deg));
}
.wn-windowbar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-dim);
  background: color-mix(in oklab, var(--fg) 4%, transparent);
}
.wn-dot { width: 10px; height: 10px; border-radius: 50%; opacity: 0.85; }
.wn-dot.r { background: #c2766a; } .wn-dot.y { background: #c8a45f; } .wn-dot.g { background: #93ab84; }
.wn-windowtitle {
  margin-left: 8px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--fg-ghost);
}
.wn-windowlive {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac);
  background: color-mix(in oklab, var(--ac) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--ac) 30%, transparent);
  transition: color 200ms, background 200ms;
}
.wn-windowlive.held { color: var(--amber); background: color-mix(in oklab, var(--amber) 12%, transparent); border-color: color-mix(in oklab, var(--amber) 30%, transparent); }
.wn-windowbody {
  aspect-ratio: 440 / 260;
  /* a slow push-in, like a locked-off camera creeping toward the subject */
  animation: wn-breathe 9s ease-in-out infinite alternate;
}
@keyframes wn-breathe { from { transform: scale(1); } to { transform: scale(1.015); } }
.wn-film { display: block; width: 100%; height: 100%; }
.wn-floor {
  position: absolute;
  left: 8%; right: 8%; bottom: -26px;
  height: 40px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, 0.55), transparent 75%);
  filter: blur(6px);
  pointer-events: none;
}

/* split rows */
.wn-rows { display: grid; gap: 12px; align-content: center; }
.wn-featrow {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--border-dim);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  animation: wn-slide-in 560ms var(--wn-out) both;
  transition: border-color 200ms var(--wn-soft), transform 220ms var(--wn-out);
}
.wn-featrow:hover { transform: translateX(4px); border-color: color-mix(in oklab, var(--ac) 36%, transparent); }
@keyframes wn-slide-in {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}
.wn-featic {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: var(--ac);
  background: color-mix(in oklab, var(--ac) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--ac) 28%, transparent);
}
.wn-featrow b { display: block; font: 700 13.5px/1.3 var(--sans); margin-bottom: 3px; }
.wn-featrow p { margin: 0; font: 450 12px/1.55 var(--sans); color: var(--fg-dim); }

/* ══════════════════════ the training world ══════════════════════ */

.wn-world {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.wn-counters { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 6px; }
.wn-counter { display: grid; gap: 5px; animation: wn-rise 600ms var(--wn-out) both; }
.wn-counter b {
  font: 800 clamp(30px, 3.2vw, 42px)/1 var(--sans);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--ac) 55%, var(--fg));
}
.wn-counter b em { font-style: normal; font-size: 0.6em; margin-left: 1px; color: var(--fg-dim); }
.wn-counter span { font: 600 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-ghost); }

.wn-mix {
  display: grid; gap: 10px; align-content: center;
  padding: 26px;
  border-radius: 20px;
  border: 1px solid var(--border-dim);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  animation: wn-pop-in 640ms var(--wn-spring) 0.25s both;
}
.wn-mix .wn-capline { margin-bottom: 6px; }
.wn-bar {
  display: grid;
  grid-template-columns: 132px 1fr 44px;
  align-items: center; gap: 12px;
  animation: wn-rise 520ms var(--wn-out) both;
}
.wn-bar-k { font: 600 11.5px/1 var(--sans); color: var(--fg-dim); text-transform: capitalize; }
.wn-bar-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--fg) 7%, transparent);
  overflow: hidden;
}
.wn-bar-track i {
  position: absolute; inset: 0;
  border-radius: 4px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--ac) 75%, transparent),
    color-mix(in oklab, var(--ac) 45%, transparent));
  transform: scaleX(var(--w, 0));
  transform-origin: left center;
  animation: wn-grow 900ms var(--wn-out) both;
}
@keyframes wn-grow { from { transform: scaleX(0); } }
.wn-bar-v { font: 700 11px/1 var(--mono); color: var(--fg-faint); text-align: right; font-variant-numeric: tabular-nums; }

/* ══════════════════════ the bento ══════════════════════ */

.wn-bentoslide { display: grid; gap: 30px; justify-items: center; }
.wn-bentoslide .wn-copy.center { display: grid; justify-items: center; gap: 14px; text-align: center; }
.wn-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}
.wn-cell {
  position: relative;
  display: grid; align-content: start; gap: 8px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--border-dim);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  overflow: hidden;
  animation: wn-pop-in 600ms var(--wn-spring) both;
  transition: border-color 220ms var(--wn-soft), transform 240ms var(--wn-out);
}
.wn-cell:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--ac) 38%, transparent); }
.wn-cell-ic {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  color: var(--ac);
  background: color-mix(in oklab, var(--ac) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--ac) 26%, transparent);
}
.wn-cell b { font: 700 13px/1.3 var(--sans); }
.wn-cell-s { font: 450 11px/1.5 var(--sans); color: var(--fg-dim); }

/* each cell carries a tiny looping stage above the text */
.wn-cell-art {
  position: relative;
  height: 64px;
  margin: -4px -4px 4px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  overflow: hidden;
}
.wn-art-keys { display: flex; gap: 6px; align-items: center; justify-content: center; height: 100%; }
.wn-art-keys kbd {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: color-mix(in oklab, var(--fg) 7%, transparent);
  font: 700 12px/1 var(--mono);
  color: var(--fg-dim);
  animation: wn-keypress 2.8s var(--wn-soft) infinite;
}
@keyframes wn-keypress {
  0%, 12%, 100% { transform: none; }
  6% { transform: translateY(2px) scale(0.94); }
}
.wn-art-select { position: relative; height: 100%; }
.wn-art-select i {
  position: absolute;
  width: 22px; height: 15px;
  border-radius: 5px;
  background: color-mix(in oklab, var(--ac) 24%, transparent);
  border: 1px solid color-mix(in oklab, var(--ac) 45%, transparent);
}
.wn-art-select i:nth-child(1) { left: 22%; top: 20%; }
.wn-art-select i:nth-child(2) { left: 55%; top: 24%; }
.wn-art-select i:nth-child(3) { left: 30%; top: 58%; }
.wn-art-select i:nth-child(4) { left: 62%; top: 56%; }
.wn-art-select b {
  position: absolute; inset: 12% 14%;
  border-radius: 7px;
  border: 1.5px dashed color-mix(in oklab, var(--ac) 60%, transparent);
  background: color-mix(in oklab, var(--ac) 7%, transparent);
  transform-origin: top left;
  animation: wn-marquee 3.2s var(--wn-out) infinite;
}
@keyframes wn-marquee {
  0% { transform: scale(0.1); opacity: 0; }
  18% { opacity: 1; }
  45%, 78% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
.wn-art-trace { display: flex; gap: 10px; align-items: center; justify-content: center; height: 100%; }
.wn-art-trace i {
  width: 26px; height: 18px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  border: 1px solid var(--border2);
  opacity: 0.4;
}
.wn-art-trace i.lit {
  opacity: 1;
  background: color-mix(in oklab, var(--ac) 24%, transparent);
  border-color: color-mix(in oklab, var(--ac) 55%, transparent);
  animation: wn-lit 2.6s var(--wn-soft) infinite;
}
.wn-art-trace i.lit.d2 { animation-delay: 0.35s; }
@keyframes wn-lit {
  0%, 100% { transform: none; }
  30% { transform: translateY(-3px); }
}
.wn-art-weight { position: relative; height: 100%; }
.wn-art-weight b {
  position: absolute; left: 18%; top: 26%;
  width: 34px; height: 24px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--ac) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--ac) 50%, transparent);
  animation: wn-toss 3.4s var(--wn-spring) infinite;
}
@keyframes wn-toss {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  40% { transform: translateX(52px) rotate(3deg); }
  55% { transform: translateX(46px) rotate(-1deg); }
  65% { transform: translateX(48px) rotate(0deg); }
}
.wn-art-weight i {
  position: absolute; left: 24%; bottom: 14%;
  width: 44px; height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  filter: blur(3px);
  animation: wn-toss-sh 3.4s var(--wn-spring) infinite;
}
@keyframes wn-toss-sh {
  0%, 100% { transform: translateX(0) scaleX(1); }
  40% { transform: translateX(52px) scaleX(1.3); }
  65% { transform: translateX(48px) scaleX(1); }
}

/* ══════════════════════ outro ══════════════════════ */

.wn-outro { display: grid; justify-items: center; gap: 18px; text-align: center; }
.wn-seal {
  position: relative;
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ac);
  background: color-mix(in oklab, var(--ac) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--ac) 38%, transparent);
  animation: wn-pop-in 640ms var(--wn-spring) both;
}
.wn-sealring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--ac) 50%, transparent);
  animation: wn-sealring 2.4s var(--wn-out) infinite;
}
.wn-sealring.d2 { animation-delay: 1.2s; }
@keyframes wn-sealring {
  from { transform: scale(1); opacity: 0.8; }
  to   { transform: scale(1.7); opacity: 0; }
}
.wn-outro-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; animation: wn-rise 700ms var(--wn-out) 0.5s both; }
.wn-outro-links {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-ghost);
  animation: wn-rise 700ms var(--wn-out) 0.65s both;
}

/* ══════════════════════ chapter rail + transport ══════════════════════ */

.wn-rail {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; gap: 7px;
}
.wn-step {
  position: relative;
  height: 30px;
  min-width: 38px;
  padding: 0 11px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border-dim);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  color: var(--fg-ghost);
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.1em;
  cursor: pointer;
  overflow: hidden;
  transition: color 200ms var(--wn-soft), border-color 200ms var(--wn-soft), min-width 300ms var(--wn-out);
}
.wn-step:hover { color: var(--fg); border-color: var(--border2); }
.wn-step.done { color: var(--fg-faint); border-color: color-mix(in oklab, var(--ac) 30%, transparent); }
.wn-step.live {
  color: var(--fg);
  border-color: color-mix(in oklab, var(--ac) 55%, transparent);
  min-width: 118px;
}
.wn-step span { position: relative; z-index: 1; }
/* the fill IS the timer: it runs for exactly the slide's hold */
.wn-step i {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--ac) 18%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
}
.wn-step.live i { animation: wn-fill linear both; }
.wn-step.done i { transform: scaleX(1); background: color-mix(in oklab, var(--ac) 10%, transparent); }
@keyframes wn-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.wn-nav {
  position: absolute; bottom: 20px; right: 26px; z-index: 5;
  display: flex; gap: 8px;
}
.wn-navbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: color-mix(in oklab, var(--fg) 4%, transparent);
  color: var(--fg-dim);
  cursor: pointer;
  transition: color 160ms var(--wn-soft), background 160ms var(--wn-soft), transform 180ms var(--wn-out);
}
.wn-navbtn:hover:not(:disabled) { color: var(--fg); background: color-mix(in oklab, var(--fg) 9%, transparent); transform: translateY(-1px); }
.wn-navbtn:disabled { opacity: 0.28; cursor: default; }

.wn-drive {
  position: absolute; bottom: 28px; left: 26px; z-index: 5;
  display: flex; gap: 16px;
  font: 500 10.5px/1 var(--sans);
  color: var(--fg-ghost);
}
.wn-drive kbd {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  margin-right: 5px;
  border-radius: 5px;
  border: 1px solid var(--border2);
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  font: 700 9px/1 var(--mono);
  color: var(--fg-faint);
}

/* ══════════════════════ changelog panel ══════════════════════ */

.wn-log {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: 30px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: wn-in 220ms var(--wn-soft) both;
}
.wn-logcard {
  width: min(680px, 100%);
  max-height: min(76vh, 720px);
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: color-mix(in oklab, var(--fg) 4%, var(--bg));
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: wn-pop-in 420ms var(--wn-spring) both;
}
.wn-logcard header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-dim);
}
.wn-logcard h3 { margin: 0; font: 800 16px/1 var(--sans); letter-spacing: -0.02em; }
.wn-logbody { overflow-y: auto; padding: 8px 22px 22px; }
.wn-logbody section + section { margin-top: 20px; }
.wn-logbody h4 {
  display: flex; align-items: baseline; gap: 10px;
  margin: 16px 0 10px;
  font: 700 13.5px/1 var(--sans);
}
.wn-ver {
  padding: 4px 9px;
  border-radius: 7px;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ac);
  background: color-mix(in oklab, var(--ac) 12%, transparent);
}
.wn-logbody time { margin-left: auto; font: 500 11px/1 var(--sans); color: var(--fg-ghost); }
.wn-logbody ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wn-logbody li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--border-dim);
  background: color-mix(in oklab, var(--fg) 2.5%, transparent);
}
.wn-logic {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 9px;
  color: var(--fg-dim);
  background: color-mix(in oklab, var(--fg) 6%, transparent);
}
.wn-logbody li b { display: block; font: 700 12.5px/1.3 var(--sans); margin-bottom: 2px; }
.wn-logbody li p { margin: 0; font: 450 11.5px/1.5 var(--sans); color: var(--fg-dim); }

/* ══════════════════════ film atoms ══════════════════════ */

.wn-gridline { fill: none; stroke: color-mix(in oklab, var(--fg) 5%, transparent); stroke-width: 1; }
.wn-plate { fill: color-mix(in oklab, var(--fg) 3%, transparent); stroke: var(--border-dim); }
.wn-node {
  fill: color-mix(in oklab, var(--ac) 20%, var(--bg));
  stroke: color-mix(in oklab, var(--ac) 55%, transparent);
  stroke-width: 1.5;
}
.wn-node.lifted { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5)); }
.wn-node-l { fill: color-mix(in oklab, var(--fg) 40%, transparent); }
.wn-node-l.dim { fill: color-mix(in oklab, var(--fg) 18%, transparent); }
.wn-led { fill: var(--accent); animation: wn-blink 2s var(--wn-soft) infinite; }
.wn-node-ghost {
  fill: none;
  stroke: color-mix(in oklab, var(--fg) 35%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}
.wn-pop { transform-box: fill-box; transform-origin: center; animation: wn-svg-pop 520ms var(--wn-spring) both; }
@keyframes wn-svg-pop { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
.wn-wire {
  fill: none;
  stroke: color-mix(in oklab, var(--ac) 50%, transparent);
  stroke-width: 2;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: wn-draw 850ms var(--wn-out) both;
}
@keyframes wn-draw { to { stroke-dashoffset: 0; } }
.wn-pkt { fill: var(--fg); }
.wn-pkt.alt { fill: var(--ac); }
.wn-chip {
  fill: color-mix(in oklab, var(--fg) 6%, transparent);
  stroke: var(--border-dim);
  transform-box: fill-box; transform-origin: center;
  animation: wn-svg-pop 460ms var(--wn-spring) both;
}
.wn-halo {
  fill: none;
  stroke: color-mix(in oklab, var(--ac) 55%, transparent);
  stroke-width: 1.6;
  transform-box: fill-box; transform-origin: center;
  animation: wn-halok 1.8s var(--wn-out) both;
}
.wn-halo.loop { animation: wn-halok 1.8s var(--wn-out) infinite; }
@keyframes wn-halok {
  from { opacity: 0.9; transform: scale(0.55); }
  to   { opacity: 0; transform: scale(1.35); }
}
.wn-pulse {
  fill: none; stroke: var(--ac); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: wn-halok 1.2s var(--wn-out) 2.15s both;
}
.wn-eyebrow { fill: var(--fg-ghost); font: 700 9px/1 var(--mono); letter-spacing: 0.16em; }
.wn-strong { fill: var(--fg); font: 800 16px/1 var(--sans); letter-spacing: -0.02em; }
.wn-strong.crit { fill: var(--red); font-size: 13px; }
.wn-sig { fill: var(--fg-dim); font: 500 10.5px/1 var(--sans); }
.wn-dot-sig { fill: var(--ac); }
.wn-track { fill: color-mix(in oklab, var(--fg) 9%, transparent); }
.wn-meter {
  fill: color-mix(in oklab, var(--ac) 70%, transparent);
  transform-box: fill-box; transform-origin: left center;
  animation: wn-grow 1s var(--wn-out) 1.6s both;
}
.wn-meter.crit { fill: color-mix(in oklab, var(--red) 75%, transparent); }
.wn-tipbg {
  fill: color-mix(in oklab, var(--fg) 5%, var(--bg));
  stroke: var(--border2);
}
.wn-verdict { opacity: 0; animation: wn-svg-rise 640ms var(--wn-out) 1.3s both; }
@keyframes wn-svg-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.wn-row-in { opacity: 0; animation: wn-svg-rise 460ms var(--wn-out) both; }
.wn-toast { opacity: 0; animation: wn-svg-toast 600ms var(--wn-spring) 2.2s both; }
@keyframes wn-svg-toast {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}
.wn-toastbg {
  fill: color-mix(in oklab, var(--ac) 14%, transparent);
  stroke: color-mix(in oklab, var(--ac) 45%, transparent);
}
.wn-toastbg.crit {
  fill: color-mix(in oklab, var(--red) 16%, transparent);
  stroke: color-mix(in oklab, var(--red) 55%, transparent);
}
.wn-toastdot { fill: var(--red); animation: wn-blink 1.2s var(--wn-soft) infinite; }
.wn-toast-t { fill: var(--ac); font: 700 9.5px/1 var(--mono); letter-spacing: 0.08em; }
.wn-toast-t.crit { fill: var(--red); }

/* chaos */
.wn-wire.doomed { animation: wn-draw 850ms var(--wn-out) both, wn-die 700ms ease 1.9s both; }
@keyframes wn-die { to { stroke: color-mix(in oklab, var(--red) 60%, transparent); opacity: 0.35; } }
.wn-pop.blown .wn-node { animation: wn-blown 900ms var(--wn-out) 1.7s both; }
@keyframes wn-blown {
  0%   { fill: color-mix(in oklab, var(--ac) 20%, var(--bg)); }
  30%  { fill: color-mix(in oklab, var(--red) 70%, transparent); stroke: var(--red); }
  100% { fill: color-mix(in oklab, var(--red) 26%, transparent); stroke: var(--red); opacity: 0.55; }
}
.wn-pop.hurt .wn-node { animation: wn-hurt 1.2s var(--wn-soft) 2.2s both; }
@keyframes wn-hurt {
  0%   { stroke: color-mix(in oklab, var(--ac) 55%, transparent); }
  50%  { stroke: var(--amber); }
  100% { stroke: var(--amber); }
}
.wn-blast {
  fill: none; stroke: var(--red); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: wn-blastk 1.6s var(--wn-out) 1.75s both;
}
.wn-blast.d2 { animation-delay: 2.05s; }
@keyframes wn-blastk {
  0%   { opacity: 0.9; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(3.4); }
}
.wn-skull { opacity: 0; animation: wn-svg-fade 300ms ease 1.95s both; }
@keyframes wn-svg-fade { to { opacity: 1; } }
.wn-x { stroke: var(--red); stroke-width: 3; stroke-linecap: round; }

/* ai core */
.wn-chip-core {
  fill: color-mix(in oklab, var(--ac) 16%, var(--bg));
  stroke: color-mix(in oklab, var(--ac) 55%, transparent);
  stroke-width: 1.5;
}
.wn-core-tick {
  fill: none; stroke: var(--ac); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: wn-draw 500ms var(--wn-out) 1.3s both;
}

/* tutorial cursor rides a path, carrying the component half way */
.wn-cur-tut { offset-rotate: 0deg; offset-path: path("M 40 44 L 230 128 L 342 122"); animation: wn-cur-tutk 4.6s var(--wn-soft) 0.5s infinite; }
@keyframes wn-cur-tutk {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  46%, 54% { offset-distance: 52%; }
  88% { offset-distance: 100%; opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.wn-carry { offset-rotate: 0deg; offset-path: path("M 40 44 L 230 128"); animation: wn-carryk 4.6s var(--wn-soft) 0.5s infinite; }
@keyframes wn-carryk {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  44% { offset-distance: 98%; opacity: 1; }
  48%, 100% { offset-distance: 100%; opacity: 0; }
}
.wn-dropped { opacity: 0; animation: wn-svg-fade 260ms ease 2.6s both; }
.wn-await { opacity: 0; animation: wn-svg-fade 400ms ease 3s both; }

/* demo cursor loops the canvas */
.wn-cur-demo { offset-rotate: 0deg; offset-path: path("M 100 80 L 126 96 L 226 164 L 326 96 L 200 60"); animation: wn-cur-demok 6s var(--wn-soft) 0.8s infinite; }
@keyframes wn-cur-demok {
  0% { offset-distance: 0%; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.wn-rec { animation: wn-svg-rise 500ms var(--wn-out) 0.3s both; }
.wn-recpill { fill: color-mix(in oklab, var(--red) 12%, transparent); stroke: color-mix(in oklab, var(--red) 45%, transparent); }
.wn-recdot { fill: var(--red); animation: wn-blink 1.1s var(--wn-soft) infinite; }
.wn-rec .wn-toast-t { fill: var(--red); }

/* library fan */
.wn-card { fill: color-mix(in oklab, var(--fg) 5%, var(--bg)); stroke: var(--border2); }
.wn-card-l { fill: color-mix(in oklab, var(--fg) 7%, transparent); }
.wn-fan { transform-box: fill-box; transform-origin: 50% 90%; animation: wn-fank 700ms var(--wn-spring) both; }
@keyframes wn-fank {
  from { opacity: 0; transform: translateY(30px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.wn-fan.f0, .wn-fan.f2 { animation-name: wn-fan-dim; }
@keyframes wn-fan-dim {
  from { opacity: 0; transform: translateY(30px) scale(0.9); }
  to   { opacity: 0.55; transform: none; }
}

/* ══════════════════════ responsive ══════════════════════ */

@media (max-width: 1020px) {
  .wn-slides { width: calc(100vw - 48px); }
  .wn-wall, .wn-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wn-scene, .wn-world { grid-template-columns: 1fr; gap: 26px; }
  .wn-stage { order: -1; }
  .wn-copy .wn-h2 { max-width: none; }
  .wn-chapnum { display: none; }
  .wn-drive { display: none; }
}
@media (max-width: 620px) {
  .wn-wall, .wn-bento { grid-template-columns: 1fr; }
  .wn-rail { display: none; }
  .wn-ticker { gap: 8px; }
  .wn-tick-cell { min-width: 104px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wn, .wn *, .wn *::before, .wn *::after {
    animation: none !important;
    transition: none !important;
  }
  .wn-word > i { transform: none; }
  .wn-step i, .wn-bar-track i, .wn-meter { transform: scaleX(1); }
  .wn-verdict, .wn-row-in, .wn-toast, .wn-dropped, .wn-await, .wn-skull,
  .wn-carry, .wn-cur-tut, .wn-cur-demo { opacity: 1; }
}

/* ══════════════════════ changelog: search, filters, categories ══════════════════════ */
/* Driven entirely by releases.json: adding a release or a category needs no
   CSS. Unknown categories fall through to the neutral tone below. */

.wn-logcard { grid-template-rows: auto auto 1fr; }
.wn-logcard header { gap: 12px; }
.wn-logcount {
  margin-left: auto; margin-right: 4px;
  font: 600 10.5px/1 var(--mono); letter-spacing: 0.04em;
  color: var(--fg-ghost);
  white-space: nowrap;
}

.wn-logfilter {
  display: grid; gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-dim);
}
.wn-search {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border-dim);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  color: var(--fg-ghost);
  transition: border-color 160ms var(--wn-soft), background 160ms var(--wn-soft);
}
.wn-search:focus-within {
  border-color: color-mix(in oklab, var(--ac) 55%, transparent);
  background: color-mix(in oklab, var(--ac) 6%, transparent);
}
.wn-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  color: var(--fg);
  font: 500 12.5px/1 var(--sans);
}
.wn-search input::placeholder { color: var(--fg-ghost); }
.wn-search input::-webkit-search-cancel-button { display: none; }
.wn-clear {
  flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 6px;
  border: 0; cursor: pointer;
  color: var(--fg-ghost); background: color-mix(in oklab, var(--fg) 8%, transparent);
}
.wn-clear:hover { color: var(--fg); }

.wn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wn-chip {
  padding: 5px 11px;
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--fg-dim);
  font: 600 11px/1 var(--sans);
  transition: color 140ms var(--wn-soft), background 140ms var(--wn-soft),
              border-color 140ms var(--wn-soft), transform 140ms var(--wn-soft);
}
.wn-chip:hover { color: var(--fg); transform: translateY(-1px); }
.wn-chip.on {
  color: var(--ac);
  border-color: color-mix(in oklab, var(--ac) 45%, transparent);
  background: color-mix(in oklab, var(--ac) 12%, transparent);
}

.wn-empty { margin: 24px 4px; font: 500 12.5px/1.5 var(--sans); color: var(--fg-ghost); }
.wn-logsum { margin: -4px 0 12px; font: 450 12px/1.55 var(--sans); color: var(--fg-dim); max-width: 62ch; }

/* "New" marker on the release the reader has not opened yet. */
.wn-newtag {
  padding: 3px 7px;
  border-radius: 6px;
  font: 800 9px/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ac);
  background: color-mix(in oklab, var(--ac) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--ac) 40%, transparent);
}

/* Category badge on each entry. */
.wn-cat {
  display: inline-block; vertical-align: middle;
  margin-left: 8px; padding: 2px 7px;
  border-radius: 5px;
  font: 700 9px/1.4 var(--sans); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fg-dim);
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  border: 1px solid var(--border-dim);
}
.wn-cat-performance, .wn-cat-reliability {
  color: var(--wn-sage); background: rgba(156, 184, 148, 0.12); border-color: rgba(156, 184, 148, 0.3);
}
.wn-cat-security, .wn-cat-offline {
  color: var(--wn-brass); background: rgba(201, 168, 109, 0.12); border-color: rgba(201, 168, 109, 0.3);
}
.wn-cat-uiux, .wn-cat-canvas, .wn-cat-onboarding {
  color: var(--wn-heather); background: rgba(173, 159, 194, 0.13); border-color: rgba(173, 159, 194, 0.32);
}
.wn-cat-infrastructure, .wn-cat-developer, .wn-cat-platform {
  color: var(--wn-ember); background: rgba(201, 127, 109, 0.11); border-color: rgba(201, 127, 109, 0.28);
}

/* Staggered entrance. Cheap: one transform+opacity per row, capped so a long
   changelog does not animate for two seconds. */
.wn-logbody section { animation: wn-log-rise 340ms var(--wn-soft) both; animation-delay: calc(min(var(--wn-i, 0), 6) * 45ms); }
.wn-logbody li { animation: wn-log-rise 300ms var(--wn-soft) both; animation-delay: calc(min(var(--wn-i, 0), 10) * 22ms); }
.wn-logbody li { transition: border-color 160ms var(--wn-soft), background 160ms var(--wn-soft), transform 160ms var(--wn-soft); }
.wn-logbody li:hover {
  border-color: color-mix(in oklab, var(--ac) 32%, var(--border-dim));
  background: color-mix(in oklab, var(--fg) 4.5%, transparent);
  transform: translateX(2px);
}
@keyframes wn-log-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wn-logbody section, .wn-logbody li { animation: none; }
  .wn-logbody li:hover { transform: none; }
  .wn-chip:hover { transform: none; }
}

@media (max-width: 640px) {
  .wn-log { padding: 12px; }
  .wn-logcard { max-height: 88vh; border-radius: 16px; }
  .wn-logcard header, .wn-logfilter { padding-left: 16px; padding-right: 16px; }
  .wn-logbody { padding: 8px 16px 18px; }
  .wn-logcount { display: none; }
  .wn-logbody h4 { flex-wrap: wrap; gap: 8px; }
  .wn-logbody time { margin-left: 0; width: 100%; }
  .wn-chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
  .wn-chips::-webkit-scrollbar { display: none; }
  .wn-chip { flex: none; }
}