/* Full-width signature motion: the video's chapters flow into Tildew and leave as timestamped notes. */
html, body { overflow-x: clip; }
.flow { position: relative; width: 100vw; margin: 40px 0 0 calc(50% - 50vw); height: 240px; }
.fl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.fl-bars line { stroke-width: 4; stroke-linecap: round; }
.fl-bars .fl-axis { stroke-width: 1.5; stroke: var(--line); fill: none; }
.fl-band { fill: none; stroke: var(--yellow); stroke-width: 54; stroke-linecap: round; filter: drop-shadow(0 12px 18px rgba(120, 90, 0, .18)); }
.fl-out-text { font-family: "DM Sans", sans-serif; font-size: 17px; font-weight: 600; fill: var(--yellow-ink); }
.fl-out-text .kp-t { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14.5px; font-weight: 800; fill: var(--blue); }
.fl-pill {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--blue); color: #fff; border-radius: 999px; padding: 12px 20px 12px 12px;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--blue) 14%, transparent), 0 18px 40px rgba(61, 90, 254, .35);
}
.fl-mark { background: #fff; color: var(--blue); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 15px; border-radius: 10px; padding: 6px 8px; line-height: 1; }
.fl-scan { position: relative; width: 74px; height: 22px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, transparent 2px 7px); border-radius: 4px; }
.fl-scan b { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: var(--yellow); box-shadow: 0 0 10px var(--yellow); animation: fl-scan 1.6s ease-in-out infinite alternate; }
.fl-word { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
@keyframes fl-scan { from { left: 0; } to { left: calc(100% - 3px); } }
@media (max-width: 700px) {
  .flow { height: 200px; margin-top: 28px; }
  .fl-word { display: none; }
  .fl-scan { width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .fl-scan b { animation: none; } }

/* Watch vs read: one big, true comparison on a near-full-width band. */
.watchread { width: calc(100vw - 24px); margin: 88px 0 0 calc(50% - 50vw + 12px); padding: 0 !important; box-sizing: border-box; border-radius: 40px; --wr-bg: #0e0e12; --wr-fg: #f4f3ef; background: var(--wr-bg); color: var(--wr-fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .watchread { --wr-bg: #1d1d26; box-shadow: inset 0 0 0 1px #2e2e3a; } }
:root[data-theme="dark"] .watchread { --wr-bg: #1d1d26; box-shadow: inset 0 0 0 1px #2e2e3a; }
.wr-inner { max-width: 1040px; margin: 0 auto; padding: 76px max(24px, env(safe-area-inset-left, 0px)) 72px; display: flex; flex-direction: column; gap: 22px; }
.wr-kicker { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--wr-fg) 60%, transparent); }
.wr-title { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(36px, 6vw, 68px); line-height: 1.02; letter-spacing: -.03em; color: var(--wr-fg); }
.wr-title span { color: var(--yellow); }
.wr-bars { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.wr-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 16px; }
.wr-label { font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--wr-fg) 70%, transparent); }
.wr-bar { height: 54px; border-radius: 14px; display: flex; align-items: center; padding: 0 18px; font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; }
.wr-bar b { font-weight: 800; white-space: nowrap; }
.wr-watch { width: 100%; background: color-mix(in srgb, var(--wr-fg) 14%, transparent); color: var(--wr-fg); }
.wr-read { width: 2.3%; min-width: 110px; background: var(--yellow); color: var(--yellow-ink); }
.wr-fine { margin: 6px 0 0; max-width: 62ch; font-size: 15px; color: color-mix(in srgb, var(--wr-fg) 66%, transparent); }
@media (max-width: 700px) { .watchread { width: calc(100vw - 16px); margin: 64px 0 0 calc(50% - 50vw + 8px); border-radius: 28px; } .wr-inner { padding: 52px 20px; } .wr-row { grid-template-columns: 52px 1fr; } }