/* SocraTask landing. Colours come from web/src/lib/theme.css; images are real app screenshots
   (regenerate with web/scripts/landing-screenshots.mjs). */

:root {
  --paper: #faf6ed;
  --surface: #fffdf8;
  --surface-low: #f3eee1;
  --ink: #1e2a20;
  --ink-soft: #5c6b5e;
  --eco: #55825c;
  --eco-deep: #40663f;
  --line: #d8d2c2;
  --radius: 14px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: 'Roboto', system-ui, sans-serif;
  --nav-h: 34px;
}

/* One page-aware actor. The overlay never takes space or intercepts a hit target. */
.landing-spark-stage { position: fixed; inset: 0; overflow: hidden; z-index: 11; pointer-events: none; visibility: hidden; }
.landing-spark-stage[data-ready] { visibility: visible; }
.landing-spark-stage * { pointer-events: none; }
.landing-spark { position: absolute; left: 0; top: 0; width: 170px; height: 170px; overflow: visible; transform-origin: 50% 81.0546875%; }
.landing-spark[data-scroll-motion="jump"], .landing-spark[data-scroll-motion="greet"], .landing-spark[data-scroll-motion="settle"] { will-change: transform; }
.landing-spark-shadow { position: absolute; left: 0; top: 0; width: 72px; height: 6px; border-radius: 50%; background: #174e3b; opacity: 0; transform-origin: 50% 0; }
.spark-controls { margin-top: 16px; }
.spark-controls:has([hidden]) { display: none; }
.spark-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); font: 500 12px/1.5 var(--font); cursor: pointer; }
.spark-toggle[hidden] { display: none; }
.spark-toggle:hover { border-color: var(--eco); color: var(--eco-deep); }
.spark-toggle:focus-visible { outline: 2px solid var(--eco); outline-offset: 3px; }
.spark-toggle:disabled { cursor: default; opacity: .7; }
.spark-toggle .spark-play-icon { display: none; }
.spark-toggle[aria-pressed="true"] .spark-play-icon { display: block; }
.spark-toggle[aria-pressed="true"] .spark-pause-icon { display: none; }
@media (prefers-reduced-motion: reduce) { .landing-spark { will-change: auto; } }
@media print { .landing-spark-stage, .spark-toggle, .spark-controls { display: none; } }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  padding-top: 68px;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--eco-deep); }

h1, h2, h3 { line-height: 1.15; margin: 0 0 14px; text-wrap: balance; }
h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 20px; font-weight: 700; }
p { margin: 0 0 14px; }
.muted { color: var(--ink-soft); font-size: 15px; }

/* ---------- top bar: full-width row, becomes a floating pill on scroll ---------- */

.topbar { position: fixed; inset: 0 0 auto; z-index: 10; }

.bar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 14px 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.topbar.scrolled .bar-inner {
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 10px auto 0;
  padding: 7px 7px 7px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(30, 42, 32, 0.12);
  animation: pillDrop 0.5s var(--ease);
}

@keyframes pillDrop { from { transform: translateY(-120%); } }

.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; margin-right: auto; flex-shrink: 0; }
.topbar.scrolled .brand { margin-right: 8px; }
.topbar.scrolled .brand img { width: 26px; height: 26px; }

.wordmark { font-family: Chango, sans-serif; font-weight: 400; font-size: 20px; color: var(--eco); letter-spacing: 0.5px; white-space: nowrap; }
.wordmark.small { font-size: 16px; }

/* Links keep identical size and padding in both bar states, so the highlight always matches them. */
.topbar nav { position: relative; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.topbar nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--nav-h);
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.topbar nav a:hover { color: var(--ink); }
.topbar nav a.on { color: #fff; }
.topbar nav a:focus-visible { outline: 2px solid var(--eco); outline-offset: 2px; }

.nico { width: 18px; height: 18px; flex-shrink: 0; }
.topbar nav a.on .nico { filter: brightness(0) invert(1); }

.navhi {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--nav-h);
  width: 0;
  border-radius: 999px;
  background: var(--eco);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s var(--ease), width 0.35s var(--ease), opacity 0.2s ease;
}
.navhi.show { opacity: 1; }
.navhi.instant { transition: opacity 0.2s ease; }

.topbar .btn { flex-shrink: 0; }

/* ---------- buttons and links ---------- */

.btn {
  display: inline-block;
  white-space: nowrap;
  background: var(--eco);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 20px;
  transition: background 0.2s ease;
}
.btn:hover { background: var(--eco-deep); }
.btn:focus-visible { outline: 2px solid var(--eco); outline-offset: 3px; }
.btn.big { font-size: 16px; padding: 13px 26px; }
.btn.cream { background: var(--paper); color: var(--eco-deep); }
.btn.cream:hover { background: #fff; }

.textlink { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--line); }
.textlink:hover { text-decoration-color: var(--eco); }

/* ---------- screenshots ---------- */

.shot { margin: 0; }
.shot img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px -12px rgba(30, 42, 32, 0.25);
}
.shot figcaption { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }

/* ---------- hero ---------- */

main { display: block; }

.hero { max-width: 1180px; margin: 0 auto; padding: 72px 28px 40px; }
.hero h1 { max-width: 16em; }
.hero h1 { font-family: Chango, sans-serif; font-weight: 400; font-size: clamp(34px, 5vw, 56px); letter-spacing: 0; }
.lede { font-size: 19px; color: var(--ink-soft); max-width: 36em; }
.ctas { display: flex; align-items: center; gap: 24px; margin-top: 26px; flex-wrap: wrap; }
.fineprint { margin-top: 18px; font-size: 14px; color: var(--ink-soft); }
.hero-shot { margin-top: 44px; }

/* ---------- changelog ---------- */

.news { max-width: 1180px; margin: 0 auto; padding: 24px 28px 48px; scroll-margin-top: 70px; }
.news h2 { font-size: 20px; margin-bottom: 12px; }
.changelog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.changelog li { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 4px 0; font-size: 15px; color: var(--ink-soft); }
.changelog li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.changelog time { font-size: 13px; font-weight: 700; color: var(--eco-deep); }
.changelog strong { color: var(--ink); }

/* ---------- content blocks ---------- */

.apptitle { display: flex; align-items: center; gap: 12px; }
.apptitle img { width: 36px; height: 36px; flex-shrink: 0; }
.desc { color: var(--ink-soft); max-width: 46em; margin-bottom: 24px; }
.block h3 { margin-top: 40px; }
.shot.wide { margin: 8px 0 24px; }
.block .facts { max-width: 760px; }

.block { max-width: 1180px; margin: 0 auto; padding: 72px 28px; border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.blockhead { max-width: 760px; margin-bottom: 36px; }
.blockhead p, .splitcopy p { color: var(--ink-soft); }

.subhead { margin-top: 8px; }
.subcopy { color: var(--ink-soft); margin-bottom: 24px; }

.steps { list-style: none; margin: 0 0 64px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.steps li { display: flex; flex-direction: column; gap: 16px; }
.steps strong { display: block; font-size: 17px; margin-bottom: 4px; }
.steps p { color: var(--ink-soft); font-size: 15px; margin: 0; }
.steps em { font-style: normal; font-weight: 700; color: var(--ink); }
.stepno {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-bottom: 8px;
  border-radius: 50%; background: var(--eco); color: #fff; font-size: 13px; font-weight: 800;
}

.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.split.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.split.reverse .shot { order: 2; }
.split.small { margin-top: 56px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
.split.small.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.split.textonly { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.plain { margin: 0 0 16px; padding-left: 20px; color: var(--ink-soft); }
.plain li { margin-bottom: 8px; }
.plain strong { color: var(--ink); }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts span { color: var(--ink-soft); }

.faq { max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--eco); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--ink-soft); margin: 0 0 18px; max-width: 40em; }

/* ---------- beta band ---------- */

.beta { background: var(--eco); color: #fff; margin-top: 24px; }
.betacopy { max-width: 1180px; margin: 0 auto; padding: 64px 28px; }
.beta h2 { color: #fff; }
.beta p { color: #e9f1e4; max-width: 34em; margin-bottom: 26px; }

/* ---------- footer ---------- */

footer { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto; padding: 26px 28px 40px; font-size: 14px; color: var(--ink-soft); }
footer p { margin: 0; }
footer p:last-child { margin-left: auto; }

/* ---------- responsive ---------- */

/* Not enough room for labels: icons only (still with the highlight), never clipped text. */
@media (max-width: 1220px) {
  .topbar nav a span { display: none; }
  .topbar nav a { padding: 0 10px; }
  .changelog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .changelog li:nth-child(3) { padding-left: 0; border-left: none; }
}

@media (max-width: 860px) {
  .split, .split.reverse, .split.small, .split.small.reverse, .split.textonly, .pair, .steps { grid-template-columns: 1fr; gap: 28px; }
  .split.reverse .shot { order: 0; }
  .steps { gap: 40px; }
  .block { padding: 56px 20px; }
  .hero, .news { padding-left: 20px; padding-right: 20px; }
  .bar-inner { padding: 12px 20px; }
  .facts li { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 640px) {
  .topbar nav { display: none; }
  .changelog { grid-template-columns: 1fr; }
  .changelog li, .changelog li + li { padding-left: 0; border-left: none; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  body { font-size: 16px; }
  footer p:last-child { margin-left: 0; }
}

@media (max-width: 380px) {
  .bar-inner { padding: 12px 14px; gap: 8px; }
  .topbar .brand { gap: 8px; }
  .topbar .wordmark { font-size: 16px; }
  .topbar .btn { padding: 9px 13px; font-size: 13px; }
  .topbar.scrolled .brand { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .navhi, .topbar nav a, .btn { transition: none; }
  .topbar.scrolled .bar-inner { animation: none; }
}

/* The three Unit path crops have different shapes; show them in equal frames. */
.steps .shot img { aspect-ratio: 1 / 1; object-fit: contain; background: #f8f5ec; }

/* ---------- animations ---------- */

/* Only hidden once JS has confirmed it can reveal them (html.anim). */
.anim .rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease) var(--d, 0ms), transform 0.7s var(--ease) var(--d, 0ms);
}
.anim .rise.zoom { transform: translateY(28px) scale(0.97); }
.anim .rise.in { opacity: 1; transform: none; }

.anim .hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) rotate(2deg);
  transition: opacity 0.5s var(--ease) var(--d), transform 0.7s cubic-bezier(0.2, 1.2, 0.3, 1) var(--d);
}
.anim .hero h1.in .word { opacity: 1; transform: none; }

/* Screenshots lift a little under the pointer. */
.shot img { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
@media (hover: hover) {
  .shot:hover img { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 18px 40px -14px rgba(30, 42, 32, 0.32); }
}

/* Section logos give a small bounce when their section appears. */
.anim .apptitle.in img { animation: logoPop 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) 0.15s both; }
@keyframes logoPop { from { transform: scale(0.4) rotate(-12deg); opacity: 0; } }

/* The active nav logo pops as the highlight arrives. */
.topbar nav a.on .nico { animation: navPop 0.45s cubic-bezier(0.2, 1.5, 0.3, 1); }
@keyframes navPop { 40% { transform: scale(1.25); } }

.stepno { transition: transform 0.4s cubic-bezier(0.2, 1.4, 0.3, 1); }
.steps li:hover .stepno { transform: scale(1.15); }

.btn { transition: background 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(64, 102, 63, 0.55); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* FAQ answers slide open where the browser supports animating to auto height. */
.faq { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height 0.3s var(--ease), content-visibility 0.3s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq summary::after { content: '+'; transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { content: '+'; transform: rotate(45deg); }

/* The beta band's button breathes gently to draw the eye, once it's on screen. */
.anim .beta .btn.in { animation: nudge 2.8s ease-in-out 1s 2; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  .shot img, .btn, .stepno, .faq details::details-content, .faq summary::after { transition: none; }
  .topbar nav a.on .nico { animation: none; }
  .anim .rise, .anim .hero h1 .word { opacity: 1; transform: none; transition: none; }
  .anim .apptitle.in img, .anim .beta .btn.in { animation: none; }
}

/* ---------- tour video ---------- */

.btn.ghost { background: transparent; color: var(--eco-deep); box-shadow: inset 0 0 0 2px var(--eco); display: inline-flex; align-items: center; gap: 10px; }
.btn.ghost:hover { background: var(--eco); color: #fff; box-shadow: inset 0 0 0 2px var(--eco), 0 6px 16px -6px rgba(64, 102, 63, 0.55); }
.btn .playico { fill: currentColor; transition: transform 0.35s cubic-bezier(0.2, 1.5, 0.3, 1); }
.btn.ghost:hover .playico { transform: scale(1.25) translateX(2px); }

.watch { position: relative; overflow: clip; }
.watch > *:not(.watch-deco) { position: relative; z-index: 1; }

/* Soft shapes that slowly change form behind the player. */
.watch-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.wb { position: absolute; display: block; opacity: 0.2; translate: 0 calc(var(--sy, 0) * var(--par, -40px)); animation: wbMorph var(--dur, 16s) ease-in-out infinite, wbDrift calc(var(--dur, 16s) * 0.8) ease-in-out infinite; }
.wb1 { width: 340px; height: 340px; left: 1%; top: 150px; background: var(--eco); --dur: 17s; --par: -50px; }
.wb2 { width: 280px; height: 280px; right: 2%; top: 60px; background: #d6a03c; --dur: 14s; --par: 40px; animation-delay: -4s; }
.wb3 { width: 300px; height: 300px; right: 8%; bottom: 40px; background: #258b83; opacity: 0.16; --dur: 19s; --par: -30px; animation-delay: -9s; }
@keyframes wbMorph {
  0%, 100% { border-radius: 62% 38% 54% 46% / 52% 44% 56% 48%; }
  33% { border-radius: 38% 62% 41% 59% / 60% 38% 62% 40%; }
  66% { border-radius: 50% 50% 33% 67% / 41% 62% 38% 59%; }
}
@keyframes wbDrift { 0%, 100% { rotate: 0deg; scale: 1; } 50% { rotate: 24deg; scale: 1.08; } }

.theater { margin-top: 8px; }
.stage3d { position: relative; perspective: 1500px; max-width: 1040px; margin: 0 auto; }
.player-shadow { position: absolute; inset: 8% 5% -5%; border-radius: 40px; background: rgba(30, 42, 32, 0.42); filter: blur(34px); opacity: 0.55; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.stage3d:hover .player-shadow { opacity: 0.7; transform: translateY(8px) scale(1.01); }

.player {
  position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  background: #ede7d6; border: 1px solid var(--line);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.45s var(--ease);
  will-change: transform;
}
.player.tilting { transition: transform 0.1s linear; }
.player .facade { position: absolute; inset: 0; display: block; color: inherit; cursor: pointer; transition: opacity 0.5s var(--ease), transform 0.7s var(--ease), visibility 0s linear 0.7s; }
.player .facade:focus-visible { outline: 3px solid var(--eco); outline-offset: -3px; border-radius: 22px; }
.poster { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07) translate(-0.8%, -0.6%); } }

.glare { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 50%); opacity: 0; transition: opacity 0.35s ease; mix-blend-mode: soft-light; pointer-events: none; }
.player:hover .glare { opacity: 1; }
.facade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 42, 32, 0) 55%, rgba(30, 42, 32, 0.28)); pointer-events: none; }

.playbtn {
  position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; z-index: 2;
  display: grid; place-items: center; border-radius: 50%; background: var(--eco);
  box-shadow: 0 16px 38px -10px rgba(40, 70, 42, 0.75), inset 0 0 0 3px rgba(255, 255, 255, 0.22);
  transition: transform 0.4s cubic-bezier(0.2, 1.5, 0.3, 1), border-radius 0.4s var(--ease), background 0.2s ease;
}
.playbtn svg { width: 38px; height: 38px; fill: #fff; transform: translateX(0.5px); transition: transform 0.4s cubic-bezier(0.2, 1.5, 0.3, 1); }
.ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--eco); opacity: 0; animation: ringPulse 2.8s ease-out infinite; }
.ring.r2 { animation-delay: 1.4s; }
@keyframes ringPulse { from { transform: scale(1); opacity: 0.6; } to { transform: scale(2); opacity: 0; } }
.player:hover .playbtn { transform: scale(1.12); border-radius: 30%; background: var(--eco-deep); }
.player:hover .playbtn svg { transform: translateX(0.5px) scale(1.1); }

.runtime { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255, 253, 248, 0.94); color: var(--ink); font-size: 14px; font-weight: 700; box-shadow: 0 6px 18px -8px rgba(30, 42, 32, 0.5); }
.runtime i { width: 9px; height: 9px; border-radius: 50%; background: var(--eco); animation: liveDot 1.8s ease-in-out infinite; }
@keyframes liveDot { 50% { transform: scale(0.55); opacity: 0.6; } }

/* Loading, then live: the poster lifts away and the YouTube player fades in. */
.player.loading .playbtn { border-radius: 50%; }
.player.loading .playbtn svg { opacity: 0; }
.player.loading .playbtn::after { content: ''; position: absolute; inset: 22px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.player iframe.yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.6s ease 0.15s; background: #000; }
.player.live iframe.yt { opacity: 1; }
.player.live .facade { opacity: 0; transform: scale(1.08); visibility: hidden; pointer-events: none; }
.player.live { transform: none; box-shadow: 0 0 0 2px rgba(85, 130, 92, 0.35); }

/* Little tags that float around the player. */
.chipf { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--surface); border: 2px solid var(--c, var(--eco)); color: var(--ink); font-size: 14px; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(30, 42, 32, 0.45); animation: bob 5s ease-in-out infinite; white-space: nowrap; }
.chipf i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--eco)); }
.chip1 { left: -18px; top: 32%; --c: #8a63ce; transform: rotate(-4deg); }
.chip2 { right: -22px; top: 12%; --c: #d6a03c; animation-delay: -1.7s; transform: rotate(3deg); }
.chip3 { left: 7%; bottom: -16px; --c: #527ce0; animation-delay: -3.1s; transform: rotate(-2deg); }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

.chapters { list-style: none; margin: 40px auto 0; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.chapters a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none;
  font-size: 15px; font-weight: 500; line-height: 1.2;
  transition: transform 0.3s var(--ease), border-color 0.2s ease, background 0.25s ease, box-shadow 0.3s var(--ease);
}
.chapters img { width: 24px; height: 24px; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.2, 1.6, 0.3, 1); }
.chapters time { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--eco-deep); font-variant-numeric: tabular-nums; }
.chapters a:hover { transform: translateY(-3px); border-color: var(--eco); box-shadow: 0 10px 22px -12px rgba(30, 42, 32, 0.4); }
.chapters a:hover img { transform: scale(1.18) rotate(-8deg); }
.chapters a:focus-visible { outline: 2px solid var(--eco); outline-offset: 2px; }
.chapters a.on { background: #eef3e8; border-color: var(--eco); }
.chapters a.on time { color: var(--ink); }
.watchnote { max-width: 1040px; margin: 22px auto 0; font-size: 14px; color: var(--ink-soft); text-align: center; }

/* Entrance: the frame unrolls from a small rounded shape while the page's own rise animation lifts it in. */
.anim .stage3d .player { clip-path: inset(12% 14% 12% 14% round 56px); opacity: 0; }
.anim .stage3d.in .player { clip-path: inset(0 round 22px); opacity: 1; transition: clip-path 1s var(--ease) 0.1s, opacity 0.6s ease 0.1s, transform 0.45s var(--ease); }
.anim .stage3d .chipf { opacity: 0; scale: 0.6; }
.anim .stage3d.in .chipf { opacity: 1; scale: 1; transition: opacity 0.5s ease, scale 0.6s cubic-bezier(0.2, 1.6, 0.3, 1); }
.anim .stage3d.in .chip1 { transition-delay: 0.7s; }
.anim .stage3d.in .chip2 { transition-delay: 0.85s; }
.anim .stage3d.in .chip3 { transition-delay: 1s; }
.anim .stage3d .player-shadow { opacity: 0; }
.anim .stage3d.in .player-shadow { opacity: 0.55; transition-delay: 0.3s; }

@media (max-width: 1080px) {
  .chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chipf { display: none; }
  .wb { opacity: 0.12; }
  .playbtn { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .playbtn svg { width: 30px; height: 30px; }
}
@media (max-width: 560px) {
  .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player { border-radius: 16px; }
  .runtime { right: 10px; bottom: 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .wb, .poster, .ring, .runtime i, .chipf, .player.loading .playbtn::after { animation: none; }
  .wb { translate: none; border-radius: 62% 38% 54% 46% / 52% 44% 56% 48%; }
  .player, .playbtn, .playbtn svg, .chapters a, .chapters img, .player iframe.yt, .player .facade, .player-shadow, .btn .playico { transition: none; }
  .player { transform: none; }
  .anim .stage3d .player, .anim .stage3d.in .player { clip-path: none; opacity: 1; transition: none; }
  .anim .stage3d .chipf, .anim .stage3d.in .chipf { scale: 1; opacity: 1; transition: none; }
  .ring { display: none; }
}

/* Once the video is playing, the floating tags step aside. */
.stage3d.playing .chipf { opacity: 0 !important; scale: 0.6 !important; transition: opacity 0.4s ease, scale 0.4s ease !important; }