/* The homepage's drawings of the write screen as it is now (the page, since
 * 2026-11-11): one dark page, the chapter's name in Lora at its top, the
 * words and Aa on the right, paragraphs of prose, and the focused paragraph's
 * actions in the margin — round icons, the name sliding out — with the steer
 * box and the AI's progress line above it. Every homepage animation draws
 * from this kit (`.pm-*`), so they all look like the app. No beat cards,
 * no commit. The app's own rules: src/lib/ui/page-editor.css, page-top.css.
 */
.pm {
  --pm-btn: 30px;
  --pm-gutter: 50px;
  --pm-face:
    radial-gradient(140% 120% at 0% 0%, rgba(240, 106, 155, 0.09), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 45%, var(--bg-deep)) 100%);
  position: relative;
  border-radius: 22px;
  padding: 22px 26px 26px calc(var(--pm-gutter) + 8px);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(167, 139, 250, 0.10), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(240, 106, 155, 0.08), transparent 60%),
    linear-gradient(180deg, #17141b, #110f14);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 var(--hairline),
    0 40px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 120px -40px rgba(240, 106, 155, 0.35);
  color: var(--fg);
  text-align: left;
  user-select: none;
  overflow: hidden;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .pm {
    --pm-face: radial-gradient(140% 120% at 0% 0%, rgba(240, 106, 155, 0.09), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, rgba(calc(var(--surface__r) * 0.45 + var(--bg-deep__r) * 0.55), calc(var(--surface__g) * 0.45 + var(--bg-deep__g) * 0.55), calc(var(--surface__b) * 0.45 + var(--bg-deep__b) * 0.55), calc(var(--surface__a) * 0.45 + var(--bg-deep__a) * 0.55)) 100%);
  }
}
/* The window's three dots: it reads as the app at a glance. */
.pm-dots { position: absolute; top: 14px; left: 16px; display: flex; gap: 6px; }
.pm-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }

/* The page's top: the chapter, then the words and Aa. */
.pm-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 8px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.pm-chap { font-family: var(--font-display); font-size: calc(21px / var(--tz, 1)); font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pm-meta { display: flex; align-items: center; gap: 12px; flex: none; font-size: calc(12px / var(--tz, 1)); color: var(--fg-3); }
.pm-meta b { color: var(--fg-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-words { display: inline-block; }
.pm-words.bump { animation: pm-bump 0.6s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes pm-bump { 40% { transform: scale(1.15); color: var(--accent-text); } }
.pm-aa { font-family: var(--font-display); font-size: calc(13px / var(--tz, 1)); color: var(--fg-2); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }

/* A paragraph: its text, the thin line down its left edge when it's the
   one being worked on (rose and breathing while the AI writes). */
.pm-para { position: relative; margin: 0 0 14px; transition: margin 0.45s cubic-bezier(.2, .8, .2, 1); }
.pm-text {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(15px / var(--tz, 1));
  line-height: 1.72;
  color: var(--fg);
  min-height: 1.72em;
  text-wrap: pretty;
}
.pm-text::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px; left: -10px;
  width: 1px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.25s, box-shadow 0.25s;
}
.pm-para.is-active .pm-text::before { background: rgba(255, 255, 255, 0.22); }
.pm-para.is-running .pm-text::before {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(240, 106, 155, 0.6);
  animation: pm-breathe 1.8s ease-in-out infinite;
}
@keyframes pm-breathe { 50% { opacity: 0.45; } }
/* The writer's own draft: the prose colour with the faintest rose. */
.pm-text.is-draft { color: #f1dbe3; }
.pm-text .pm-w { animation: pm-w 0.5s ease-out both; }
@keyframes pm-w { from { opacity: 0; filter: blur(5px); } }
.pm-text .pm-new { border-radius: 3px; background: rgba(240, 106, 155, 0.16); box-shadow: 0 0 0 2px rgba(240, 106, 155, 0.16); transition: background 1.6s, box-shadow 1.6s; }
.pm-text .pm-new.settled { background: transparent; box-shadow: 0 0 0 2px transparent; }
.pm-dash { position: absolute; left: calc(var(--pm-gutter) * -1 + 12px); top: 0.86em; width: 7px; height: 1px; background: var(--border-strong); }
.pm-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -0.17em; background: var(--accent); animation: pm-blink 0.9s steps(1) infinite; }
@keyframes pm-blink { 50% { opacity: 0; } }

/* The margin: the focused paragraph's actions, stacked, round icons. */
.pm-rail {
  position: absolute;
  left: calc(var(--pm-gutter) * -1);
  top: 2px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.22s, transform 0.22s cubic-bezier(.2, .9, .3, 1.1);
  pointer-events: none;
}
.pm-para.has-rail .pm-rail { opacity: 1; transform: none; }
.pm-btn {
  height: var(--pm-btn);
  min-width: var(--pm-btn);
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--pm-face);
  box-shadow: inset 0 1px 0 var(--hairline), 0 10px 24px -16px rgba(0, 0, 0, 0.9);
  color: var(--fg-2);
  font-size: calc(12px / var(--tz, 1));
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.2s;
}
.pm-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pm-btn-label { max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.22s ease, opacity 0.16s, margin 0.22s; }
.pm-btn.is-hover { color: var(--fg); border-color: var(--border-strong); }
.pm-btn.is-hover .pm-btn-label { max-width: 120px; opacity: 1; margin: 0 4px 0 6px; }
.pm-btn.is-press { transform: scale(0.92); box-shadow: 0 0 0 5px rgba(240, 106, 155, 0.18); }
.pm-btn.is-on { color: var(--accent-text); border-color: var(--accent-border); }
.pm-btn.is-spark { color: var(--spark-text); border-color: rgba(167, 139, 250, 0.45); }

/* Above the paragraph: the AI's progress line, or the steer box — the
   sidebar's face, a pill the width of the page. */
.pm-box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 0;
  margin: 0 0 0 0;
  padding: 0 6px 0 14px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--pm-face);
  font-size: calc(12.5px / var(--tz, 1));
  font-weight: 600;
  color: var(--fg-2);
  opacity: 0;
  transform-origin: 0 50%;
  transform: scaleX(0.15);
  transition: height 0.4s cubic-bezier(.2, .8, .2, 1), margin 0.4s cubic-bezier(.2, .8, .2, 1), opacity 0.3s, transform 0.45s cubic-bezier(.2, .9, .25, 1), border-color 0.3s;
}
.pm-box.is-open { height: 38px; margin-bottom: 10px; opacity: 1; transform: none; border-color: var(--border); box-shadow: inset 0 1px 0 var(--hairline), 0 12px 28px -18px rgba(0, 0, 0, 0.9); }
.pm-box-label { flex: none; padding-right: 10px; border-right: 1px solid rgba(240, 106, 155, 0.3); font-size: calc(10.5px / var(--tz, 1)); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); line-height: 16px; }
.pm-box-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--fg); font-weight: 500; }
.pm-go { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #f27aa6, #d94d82); color: #fff; transition: transform 0.12s, box-shadow 0.2s; }
.pm-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pm-go.is-press { transform: scale(0.88); box-shadow: 0 0 0 5px rgba(240, 106, 155, 0.25); }
.pm-spin { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: var(--accent); animation: pm-spin 0.8s linear infinite; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
.pm-box.is-progress { color: #fff; }

/* The pointer: a person using the app. */
.pm-cursor {
  position: absolute;
  left: 0; top: 0;
  z-index: 9;
  width: 18px; height: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.pm-cursor.is-on { opacity: 1; }
.pm-cursor svg { width: 100%; height: 100%; }
.pm-ripple { position: absolute; z-index: 8; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid rgba(255, 157, 192, 0.8); pointer-events: none; }

@media (max-width: 720px) {
  .pm { --pm-gutter: 42px; --pm-btn: 28px; padding: 18px 16px 18px calc(var(--pm-gutter) + 4px); border-radius: 18px; }
  .pm-chap { font-size: calc(18px / var(--tz, 1)); }
  .pm-text { font-size: calc(14px / var(--tz, 1)); }
  .pm-dots { display: none; }
  .pm-top { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pm *, .pm *::before { animation: none !important; transition: none !important; }
}

/* Sepia: the app's own Sepia page (Aa → Sepia; src/lib/ui/page-top.css),
   its tokens redefined so every piece of the kit takes the light. The SAME
   values as the app's — every text colour 4.5:1 or more (WCAG AA), the
   draft 7:1; tests/demo-colors.test.mjs fails when the two drift apart. The
   guides' hero and mid card use this kit too (site.css .gp-*, linked on
   guide pages): keep it in step with the app. */
.pm.pm-sepia {
  --fg: #3a2f22;
  --fg-2: #4a3d2d;
  --fg-soft: #5b4b38;
  --fg-3: #5e4e3b;
  --fg-4: #705d46;
  --ok: #1f6e37;
  --warn: #8a5410;
  --surface: #fbf4e6;
  --bg-deep: #eadcc3;
  --border: rgba(80, 60, 30, 0.16);
  --border-strong: rgba(80, 60, 30, 0.26);
  --hairline: #fffaf0;
  --accent-text: #a8285a;
  --accent-border: rgba(194, 58, 108, 0.38);
  --spark-text: #6a3fc4;
  --pm-face:
    radial-gradient(140% 120% at 0% 0%, rgba(240, 106, 155, 0.07), transparent 60%),
    linear-gradient(180deg, #fdf8ee 0%, #f3e7d2 100%);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(180deg, #f6eddc, #f0e4cd);
  border-color: rgba(255, 240, 210, 0.5);
  box-shadow:
    inset 0 1px 0 #fffaf0,
    0 40px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 120px -30px rgba(240, 106, 155, 0.4);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .pm.pm-sepia {
    --fg__r: 58;
    --fg__g: 47;
    --fg__b: 34;
    --fg__a: 1;
    --fg-2__r: 74;
    --fg-2__g: 61;
    --fg-2__b: 45;
    --fg-2__a: 1;
    --fg-soft__r: 91;
    --fg-soft__g: 75;
    --fg-soft__b: 56;
    --fg-soft__a: 1;
    --fg-3__r: 94;
    --fg-3__g: 78;
    --fg-3__b: 59;
    --fg-3__a: 1;
    --fg-4__r: 112;
    --fg-4__g: 93;
    --fg-4__b: 70;
    --fg-4__a: 1;
    --ok__r: 31;
    --ok__g: 110;
    --ok__b: 55;
    --ok__a: 1;
    --warn__r: 138;
    --warn__g: 84;
    --warn__b: 16;
    --warn__a: 1;
    --surface__r: 251;
    --surface__g: 244;
    --surface__b: 230;
    --surface__a: 1;
    --bg-deep__r: 234;
    --bg-deep__g: 220;
    --bg-deep__b: 195;
    --bg-deep__a: 1;
    --border__r: 80;
    --border__g: 60;
    --border__b: 30;
    --border__a: 0.16;
    --border-strong__r: 80;
    --border-strong__g: 60;
    --border-strong__b: 30;
    --border-strong__a: 0.26;
    --hairline__r: 255;
    --hairline__g: 250;
    --hairline__b: 240;
    --hairline__a: 1;
    --accent-text__r: 168;
    --accent-text__g: 40;
    --accent-text__b: 90;
    --accent-text__a: 1;
    --accent-border__r: 194;
    --accent-border__g: 58;
    --accent-border__b: 108;
    --accent-border__a: 0.38;
    --spark-text__r: 106;
    --spark-text__g: 63;
    --spark-text__b: 196;
    --spark-text__a: 1;
  }
}
.pm-sepia .pm-dots i { background: rgba(80, 60, 30, 0.22); }
.pm-sepia .pm-btn { box-shadow: inset 0 1px 0 #fffaf0, 0 8px 18px -12px rgba(80, 55, 20, 0.35); }
.pm-sepia .pm-box.is-open { box-shadow: inset 0 1px 0 #fffaf0, 0 8px 18px -12px rgba(80, 55, 20, 0.35); }
.pm-sepia .pm-box.is-progress, .pm-sepia .pm-box { color: var(--fg); }
.pm-sepia .pm-spin { border-color: rgba(60, 50, 40, 0.18); border-top-color: var(--accent); }
.pm-sepia .pm-para.is-active .pm-text::before { background: rgba(60, 50, 40, 0.28); }
.pm-sepia .pm-text.is-draft { color: #554634; }
.pm-sepia .pm-text .pm-new { background: rgba(240, 106, 155, 0.18); box-shadow: 0 0 0 2px rgba(240, 106, 155, 0.18); }
.pm-sepia .pm-text .pm-new.settled { background: transparent; box-shadow: 0 0 0 2px transparent; }
.pm-sepia .pm-dash { background: rgba(60, 50, 40, 0.25); }
.pm-sepia .pm-cursor svg path { fill: #1b1720; stroke: #fff; }

/* ---- The hero (#hero-beats): the page itself, playing ---------------- */
.hb { position: relative; display: flex; align-items: center; min-height: 560px; }
.hb .pm { width: 100%; max-width: 560px; margin-left: auto; min-height: 470px; }
.hb .pm-paras { position: relative; }
.hb.live .pm-para.is-empty .pm-text { color: transparent; }
@media (max-width: 1000px) {
  .hb { min-height: 0; padding: 28px 0 64px; }
  .hb .pm { margin: 0 auto; }
}
@media (max-width: 720px) {
  .hb { padding: 8px 0 48px; }
  .hb .pm { min-height: 440px; }
}

/* Shared (added with KudoAI's section): a NOTE on the page — the app's
   yellow sticky, out of the book (src/lib/ui/page-editor.css .is-note),
   with its "Not in the book" tag. */
.pm-para.is-note .pm-text {
  padding: 10px 14px 12px;
  font-family: var(--font-ui);
  font-size: calc(13px / var(--tz, 1));
  line-height: 1.55;
  color: #3b3110;
  background: linear-gradient(180deg, #fff3a6 0%, #fde98a 100%);
  border-radius: 3px 3px 12px 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 16px rgba(60, 40, 10, 0.22), 0 1px 3px rgba(0, 0, 0, 0.15);
  transform: rotate(-0.3deg);
}
.pm-para.is-note .pm-text::before { display: none; }
.pm-note-tag {
  position: absolute;
  right: 10px;
  bottom: -9px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: calc(10px / var(--tz, 1));
  font-weight: 700;
  color: #6b5a1a;
  background: #fff7c7;
  box-shadow: 0 0 0 1px rgba(120, 100, 20, 0.2);
}

/* The hero's note: the tag only once it's a note; room under it for the tag. */
.hb .pm-para:not(.is-note) .pm-note-tag { display: none; }
.hb .pm-para.is-note { margin-bottom: 20px; }

/* ---- The hero's explosion (#hero-beats, /home-beats.js): the features
   flying onto the page — the idea's sticky, Expand's light, the Bible's
   cards and their dock, KudoAI's orb and bubble, Suggest's three cards, the
   edit pass's magnifier and ticks, each feature's name popping. Light cards
   on the dark hero, every text colour 4.5:1 or more. Transform and opacity
   only, no backdrop-filter. */
.hz { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hz > * { position: absolute; animation-play-state: var(--pm-play, running); }
.hz-ring { width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(255, 157, 192, 0.9); box-shadow: 0 0 24px rgba(240, 106, 155, 0.7), inset 0 0 18px rgba(196, 167, 255, 0.6); }
.hz-spark { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 10px currentColor, 0 0 6px rgba(255, 255, 255, 0.8); }
.hz-badge {
  z-index: 3;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: calc(13px / var(--tz, 1));
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, #c2336d, #8f2a9e);
  box-shadow: 0 10px 30px -8px rgba(240, 106, 155, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hz-badge.is-violet { background: linear-gradient(135deg, #6d3fd0, #4a2aa8); box-shadow: 0 10px 30px -8px rgba(139, 92, 246, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.hz-plus { font-size: calc(15px / var(--tz, 1)); font-weight: 900; color: #a8285a; text-shadow: 0 1px 0 #fff; white-space: nowrap; }

/* The idea: the yellow sticky, flying in. */
.hz-sticky {
  padding: 10px 14px 12px;
  font-family: var(--font-ui);
  font-size: calc(13.5px / var(--tz, 1));
  line-height: 1.5;
  color: #3b3110;
  background: linear-gradient(180deg, #fff3a6 0%, #fde98a 100%);
  border-radius: 3px 3px 12px 3px;
  box-shadow: 0 18px 40px -10px rgba(60, 40, 10, 0.55), 0 0 40px rgba(255, 220, 110, 0.55);
  will-change: transform;
}
.hz-sticky.is-ghost { box-shadow: none; filter: blur(3px); }

/* Words blooming in. */
.hz-w { display: inline-block; animation: hz-w 0.45s cubic-bezier(.2, .9, .3, 1.2) both; animation-play-state: var(--pm-play, running); }
@keyframes hz-w { from { opacity: 0; transform: translateY(7px) scale(.9); filter: blur(4px); } }
.hz-ai { border-radius: 3px; background: rgba(139, 92, 246, 0.14); transition: background 1.6s; }
.hz-sugtext { border-radius: 3px; background: rgba(245, 166, 106, 0.18); }
.hz-sweep {
  z-index: 2;
  border-radius: 6px;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 157, 192, 0) 30%, rgba(255, 157, 192, 0.65) 48%, rgba(255, 255, 255, 0.9) 50%, rgba(196, 167, 255, 0.55) 54%, transparent 70%) no-repeat;
  background-size: 50% 100%;
  mix-blend-mode: multiply;
}
.pm-text.hz-names { animation: hz-glow 1.2s ease-out; }
@keyframes hz-glow { 30% { text-shadow: 0 0 14px rgba(240, 106, 155, 0.55); } }
.pm-para.is-editing .pm-text { background-image: linear-gradient(transparent 92%, rgba(139, 92, 246, 0.35) 92%); }

/* The Bible: cards bursting out, then docking in its stack. */
.hz-card {
  z-index: 2;
  padding: 10px 12px 11px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf2, #f5ead6);
  border: 1px solid rgba(80, 60, 30, 0.14);
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  color: #3a2f22;
  --c: #c2336d;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .hz-card {
    --c__r: 194;
    --c__g: 51;
    --c__b: 109;
    --c__a: 1;
  }
}
.hz-card.is-apricot { --c: #a85a12; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .hz-card.is-apricot {
    --c__r: 168;
    --c__g: 90;
    --c__b: 18;
    --c__a: 1;
  }
}
.hz-card.is-violet { --c: #6a3fc4; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .hz-card.is-violet {
    --c__r: 106;
    --c__g: 63;
    --c__b: 196;
    --c__a: 1;
  }
}
.hz-card.is-pink { --c: #b02a7a; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .hz-card.is-pink {
    --c__r: 176;
    --c__g: 42;
    --c__b: 122;
    --c__a: 1;
  }
}
.hz-card.is-sky { --c: #1f6a9a; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .hz-card.is-sky {
    --c__r: 31;
    --c__g: 106;
    --c__b: 154;
    --c__a: 1;
  }
}
.hz-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.hz-av { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: calc(12px / var(--tz, 1)); font-weight: 800; color: #fff; background: var(--c); }
.hz-card b { flex: 1; min-width: 0; font-size: calc(13px / var(--tz, 1)); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-card em { flex: none; font-style: normal; font-size: calc(9.5px / var(--tz, 1)); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; color: #1f6e37; background: #dff3e3; }
.hz-card-fact { display: block; font-size: calc(11.5px / var(--tz, 1)); line-height: 1.4; color: #4a3d2d; }
.hz-dock {
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffaf2, #f2e5cd);
  border: 1px solid rgba(80, 60, 30, 0.16);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7), 0 0 30px -6px rgba(139, 92, 246, 0.6);
  font-size: calc(12px / var(--tz, 1));
  font-weight: 700;
  color: #3a2f22;
  white-space: nowrap;
  transform-origin: 100% 50%;
}
.hz-dock-stack { position: relative; width: 20px; height: 18px; }
.hz-dock-stack i { position: absolute; inset: 0; border-radius: 4px; background: #fff; border: 1px solid rgba(80, 60, 30, 0.25); }
.hz-dock-stack i:nth-child(1) { transform: rotate(-12deg); background: #f4c9da; }
.hz-dock-stack i:nth-child(2) { transform: rotate(8deg); background: #ddd0fb; }
.hz-dock-n { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: #6a3fc4; font-variant-numeric: tabular-nums; }

/* KudoAI: the orb, its bubble, the beam. */
.hz-orb {
  z-index: 4;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #c9e2ff 14%, #6aa9ff 38%, #6a3fc4 72%, #2a1a6a 100%);
  box-shadow: 0 0 30px rgba(106, 169, 255, 0.85), 0 0 70px rgba(139, 92, 246, 0.6);
}
.hz-orb i { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(160, 200, 255, 0.6); animation: hz-orb 1.4s ease-out infinite; animation-play-state: var(--pm-play, running); }
@keyframes hz-orb { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.hz-bubble {
  z-index: 4;
  width: min(250px, 62vw);
  padding: 10px 13px 11px;
  border-radius: 16px 16px 4px 16px;
  background: #fffaf2;
  color: #3a2f22;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(80, 60, 30, 0.12);
  font-size: calc(12.5px / var(--tz, 1));
  line-height: 1.45;
  transform-origin: 100% 100%;
  opacity: 0;
}
.hz-bubble-who { display: block; font-size: calc(10.5px / var(--tz, 1)); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #5a34b0; margin-bottom: 3px; }
.hz-bubble-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hz-bubble.is-working .hz-bubble-text { color: #5a34b0; font-weight: 700; }
.hz-beam { z-index: 3; height: 3px; margin-top: -1.5px; transform-origin: 0 50%; border-radius: 3px; background: linear-gradient(90deg, rgba(106, 169, 255, 0.9), #fff, rgba(240, 106, 155, 0.9)); box-shadow: 0 0 14px rgba(160, 200, 255, 0.9); }

/* Suggest next beat: three cards in a fan. */
.hz-sug {
  z-index: 3;
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf2, #f5ead6);
  border: 1px solid rgba(80, 60, 30, 0.14);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.75);
  color: #3a2f22;
  transform-origin: 50% 100%;
}
.hz-sug-kind { display: inline-block; margin-bottom: 4px; padding: 2px 7px; border-radius: 999px; font-size: calc(9.5px / var(--tz, 1)); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: #1f6a9a; }
.hz-sug.is-progress .hz-sug-kind { background: #a8285a; }
.hz-sug.is-twist .hz-sug-kind { background: #6a3fc4; }
.hz-sug b { display: block; font-family: var(--font-display); font-size: calc(13.5px / var(--tz, 1)); line-height: 1.3; font-weight: 600; }
.hz-sug.is-picked { box-shadow: 0 0 0 2px #6a3fc4, 0 0 40px rgba(139, 92, 246, 0.8), 0 20px 40px -14px rgba(0, 0, 0, 0.75); }

/* The edit pass: the magnifier and its ticks. */
.hz-lens { z-index: 4; left: 0; top: 0; width: 48px; height: 48px; filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.8)); }
.hz-lens svg { width: 100%; height: 100%; fill: rgba(196, 167, 255, 0.18); stroke: #6a3fc4; stroke-width: 4; stroke-linecap: round; }
.hz-check {
  z-index: 3;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: calc(11.5px / var(--tz, 1));
  font-weight: 800;
  white-space: nowrap;
  color: #fff;
  background: #5a34b0;
  box-shadow: 0 10px 24px -8px rgba(90, 52, 176, 0.8);
}
.hz-check.is-small { font-size: calc(10.5px / var(--tz, 1)); padding: 4px 8px; }

@media (max-width: 720px) {
  .hz-badge { font-size: calc(12px / var(--tz, 1)); padding: 6px 12px; }
  .hz-orb { width: 42px; height: 42px; }
  .hz-sug b { font-size: calc(12px / var(--tz, 1)); }
  .hz-card-fact { font-size: calc(11px / var(--tz, 1)); }
  .hz-card b { font-size: calc(12px / var(--tz, 1)); }
  .hz-card em { padding: 2px 4px; font-size: calc(8.5px / var(--tz, 1)); }
}
.hz-sticky-title { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: calc(17px / var(--tz, 1)); font-weight: 700; line-height: 1.2; color: #3b3110; }

/* KudoAI's flood: paragraphs pouring in, the page racing up under them. */
.hb .pm-paras { will-change: transform; }
.pm-text.hz-pour { animation: hz-pour 0.45s cubic-bezier(.2, .9, .3, 1.1) both; animation-play-state: var(--pm-play, running); background: linear-gradient(90deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0) 70%); border-radius: 3px; }
@keyframes hz-pour { from { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } }
.hb.is-flooding .pm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.55), inset 0 0 60px rgba(139, 92, 246, 0.35);
  animation: pm-breathe 0.6s ease-in-out infinite;
  animation-play-state: var(--pm-play, running);
}
.hb.is-flooding .pm-words { color: #5a34b0; }
.hz-bubble.is-flood { width: auto; display: flex; align-items: center; gap: 10px; }
.hz-bubble.is-flood .hz-bubble-who { margin: 0; }
.hz-bubble-n { display: inline-block; min-width: 42px; padding: 3px 9px; border-radius: 999px; font-size: calc(14px / var(--tz, 1)); font-weight: 900; color: #fff; background: #5a34b0; font-variant-numeric: tabular-nums; text-align: center; }
.hz-fold { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; animation: hz-fold 0.5s ease-out both; }
.hz-fold i { flex: 1; height: 1px; background: rgba(90, 52, 176, 0.35); }
.hz-fold b { font-size: calc(11.5px / var(--tz, 1)); font-weight: 800; color: #5a34b0; padding: 2px 10px; border-radius: 999px; background: rgba(139, 92, 246, 0.12); }
@keyframes hz-fold { from { opacity: 0; transform: scaleX(.3); } }
/* The page's top stays put over the paragraphs racing up under it. */
.hb .pm-top { position: relative; z-index: 2; }
.hb .pm-top::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(var(--pm-gutter) * -1 - 10px);
  right: -28px;
  top: -40px;
  bottom: -14px;
  background: linear-gradient(180deg, #f6eddc 0%, #f6eddc calc(100% - 14px), rgba(246, 237, 220, 0) 100%);
}
.hb .pm-dots { z-index: 3; }
.hb .pm-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--hairline); }
.hb .pm-words { transition: transform 0.3s cubic-bezier(.2, .9, .3, 1.2); transform-origin: 100% 50%; }
.hb.is-flooding .pm-words { transform: scale(1.35); font-weight: 800; }

/* The idea sticky, scribbled by hand: a title and the cast in a pen's hand. */
.hz-sticky.is-scribble { padding: 12px 16px 14px; font-family: "Caveat", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; color: #2c2410; }
.hz-sticky.is-scribble .hz-sticky-title { font-family: inherit; font-size: calc(26px / var(--tz, 1)); line-height: 1; margin-bottom: 8px; color: #b02a5c; transform: rotate(-2deg); }
.hz-scrib { display: block; font-size: calc(19px / var(--tz, 1)); line-height: 1.15; margin-top: 5px; }
.hz-scrib u { font-weight: 700; text-decoration: underline wavy rgba(176, 42, 92, 0.75); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.hz-scrib-mark { font-style: normal; font-weight: 700; color: #b02a5c; }
/* Fuller: the paragraph's width, room to breathe, the plot in a line. */
.hz-sticky.is-scribble { padding: 16px 20px 20px; min-height: 230px; box-sizing: border-box; }
.hz-sticky.is-scribble .hz-sticky-title { font-size: calc(30px / var(--tz, 1)); margin-bottom: 10px; }
.hz-sticky.is-scribble .hz-scrib { font-size: calc(20px / var(--tz, 1)); margin-top: 7px; }
.hz-scrib.is-plot { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px dashed rgba(176, 42, 92, 0.35); font-size: calc(21px / var(--tz, 1)); color: #4a2a10; }
@media (max-width: 720px) {
  .hz-sticky.is-scribble { padding: 12px 14px 14px; min-height: 0; }
  .hz-sticky.is-scribble .hz-sticky-title { font-size: calc(25px / var(--tz, 1)); }
  .hz-sticky.is-scribble .hz-scrib { font-size: calc(17px / var(--tz, 1)); }
}