/* octobooks.ai, the hero story on the landing page (round 38). Built from draft/hero-story.css by
   /tmp/hs/build_landing.py: every rule scoped to .story, every animation renamed hs-*. Edit the draft, then rebuild. */
.story { display: block; width: 100%; }
.hero-art.hero-story { max-width: 44rem; }
@media (min-width: 56.01rem) { .hero-in { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }
@media (max-width: 56rem) { .hero-art.hero-story { max-width: 40rem; } }
.story .page-lock { display: none; }
.story {
  --line: #e6e8eb;
  --ink: #16191d;
  --ink-2: #4a525b;
  --ink-3: #646d78;
  --turquoise: #0b7a75;
  --turquoise-soft: #dff3f1;
  --purple: #6b4fc4;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(22, 25, 29, 0.05), 0 8px 28px rgba(22, 25, 29, 0.07);
  --loop: 20s;
  --zoom: cubic-bezier(0.65, 0, 0.35, 1);
}
.story .stage {
  display: block; position: relative; width: min(100%, 56rem, max(20rem, calc((100vh - 21rem) * 1.6))); aspect-ratio: 16 / 10;
  margin: 0 auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  perspective: 1800px; -webkit-tap-highlight-color: transparent;
}
.story .stage:focus-visible { outline: none; }
.story .stage:focus-visible .face { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--turquoise); }
.story .hs-card { display: block; position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.story .face {
  display: block; position: absolute; inset: 0; overflow: hidden; border-radius: clamp(16px, 3vw, 28px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: var(--shadow);
}
.story .front { background: linear-gradient(150deg, #e3f6f4 0%, #efeafb 100%); }
.story .back { background: linear-gradient(150deg, #eff1f3 0%, #e1e4e9 100%); transform: rotateY(180deg); }
.story .face svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.story .stage.is-2025 .hs-card { transform: rotateY(180deg); }
.story .win-title { font-family: var(--font); font-size: 19px; font-weight: 600; fill: #4a525b; letter-spacing: -0.01em; }
.story .win-title-s { font-family: var(--font); font-size: 12px; font-weight: 600; fill: #4a525b; }
.story .tee { font-family: var(--font); font-size: 29px; font-weight: 750; fill: #ffffff; letter-spacing: -0.02em; }
.story .year { position: absolute; font-weight: 800; letter-spacing: -0.04em; line-height: 1; pointer-events: none; }
.story .year-now { top: 5%; right: 3.5%; padding: 0.35em 0.7em; border-radius: 999px; background: #ffffff; box-shadow: var(--shadow); color: var(--turquoise); font-size: clamp(0.75rem, 1.6vw, 0.95rem); letter-spacing: 0; font-weight: 700; }
.story .year-then { top: 4.5%; left: 0; right: 0; color: var(--ink); font-size: clamp(2.4rem, 10vw, 5.75rem); text-align: center; }
.story .chip { top: auto; right: auto; bottom: auto; left: auto;
  position: absolute; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.45em 0.8em; background: #ffffff; border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow); color: var(--ink); font-size: clamp(0.6875rem, 1.5vw, 0.875rem); font-weight: 600; white-space: nowrap;
  pointer-events: none; opacity: 0;
}
.story .chip-a { top: 7%; left: 3.5%; animation: hs-chip-a var(--loop) infinite both; }
.story .chip-b { bottom: 8%; right: 3.5%; animation: hs-chip-b var(--loop) infinite both; }
.story .dot { width: 0.55em; height: 0.55em; border-radius: 50%; }
.story .dot-p { background: var(--purple); }
.story .dot-t { background: #17a39b; }
@keyframes hs-chip-a {
  0%, 24% { opacity: 0; transform: translateY(8px) scale(0.85); }
  25.5% { opacity: 1; transform: translateY(0) scale(1.05); }
  26.5%, 64% { opacity: 1; transform: translateY(0) scale(1); }
  66%, 100% { opacity: 0; transform: translateY(-6px) scale(0.96); }
}
@keyframes hs-chip-b {
  0%, 36.5% { opacity: 0; transform: translateY(8px) scale(0.85); }
  38% { opacity: 1; transform: translateY(0) scale(1.05); }
  39%, 64% { opacity: 1; transform: translateY(0) scale(1); }
  66%, 100% { opacity: 0; transform: translateY(-6px) scale(0.96); }
}
.story .world { animation: hs-world var(--loop) linear infinite both; }
@keyframes hs-world { 0% { opacity: 0; } 2% { opacity: 1; } 96.5% { opacity: 1; } 100% { opacity: 0; } }
.story .cam { transform-origin: 0 0; animation: hs-cam var(--loop) var(--zoom) infinite both; }
@keyframes hs-cam {
  0%, 12% { transform: translate(-42.67px, -1770.67px) scale(5.3333); }
  18%, 46% { transform: translate(-43.39px, -478.6px) scale(2.1695); }
  52%, 66% { transform: translate(0px, -327.27px) scale(1.8182); }
  73%, 100% { transform: translate(0px, 0px) scale(1); }
}
.story .room { animation: hs-room var(--loop) ease-out infinite both; }
@keyframes hs-room { 0%, 45.5% { opacity: 0; } 50.5%, 100% { opacity: 1; } }
.story .octo .wave { transform-origin: 364px 268px; animation: hs-wave 3.2s ease-in-out infinite; }
.story .octo .eyes { transform-origin: 260px 208px; animation: hs-blink 5.5s infinite; }
.story .give { transform-origin: 158px 266px; animation: hs-wave 3.2s ease-in-out -1.6s infinite; }
.story .eyes-c { transform-origin: 260px 224px; animation: hs-blink 4.7s -2s infinite; }
@keyframes hs-wave { 0%, 60%, 100% { transform: rotate(0deg); } 70% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } 90% { transform: rotate(-4deg); } }
@keyframes hs-blink { 0%, 95.5%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(0.08); } }
.story .coral-pop { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-coral-pop var(--loop) infinite both; }
@keyframes hs-coral-pop {
  0%, 12.5% { opacity: 0; transform: scale(0.6); }
  16.5% { opacity: 1; transform: scale(1.06); }
  18%, 100% { opacity: 1; transform: scale(1); }
}
.story .trip { opacity: 0; animation: hs-trip-o var(--loop) linear infinite both; }
.story .trip .tx { animation: hs-trip-r var(--loop) cubic-bezier(0.45, 0, 0.55, 1) infinite both; }
.story .trip.left .tx { animation-name: hs-trip-l; }
.story .trip .ty { animation: hs-trip-y var(--loop) infinite both; }
@keyframes hs-trip-o { 0% { opacity: 0; } 0.6% { opacity: 1; } 4.4% { opacity: 1; } 5%, 100% { opacity: 0; } }
@keyframes hs-trip-r { 0% { transform: translateX(0); } 5%, 100% { transform: translateX(236px); } }
@keyframes hs-trip-l { 0% { transform: translateX(236px); } 5%, 100% { transform: translateX(0); } }
@keyframes hs-trip-y {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.4, 1); }
  2.5% { transform: translateY(-26px); animation-timing-function: cubic-bezier(0.6, 0, 1, 1); }
  5%, 100% { transform: translateY(0); }
}
.story .t1, .story .t1 .tx, .story .t1 .ty { animation-delay: 3.9s; }
.story .t2, .story .t2 .tx, .story .t2 .ty { animation-delay: 5.2s; }
.story .t3, .story .t3 .tx, .story .t3 .ty { animation-delay: 6.4s; }
.story .t4, .story .t4 .tx, .story .t4 .ty { animation-delay: 7.9s; }
.story .t5, .story .t5 .tx, .story .t5 .ty { animation-delay: 10.7s; }
.story .t6, .story .t6 .tx, .story .t6 .ty { animation-delay: 12s; }
.story .t7, .story .t7 .tx, .story .t7 .ty { animation-delay: 16s; }
.story .nod { transform-box: fill-box; transform-origin: 50% 100%; }
.story .nod-a { animation: hs-nod 3.4s ease-in-out infinite; }
.story .nod-b { animation: hs-nod 3.4s ease-in-out -1.7s infinite; }
@keyframes hs-nod { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }
.story .talk-arm { transform-origin: 790px 436px; animation: hs-talk 2.6s ease-in-out infinite; }
.story .talk-arm-b { transform-origin: 1060px 370px; animation: hs-talk 2.6s ease-in-out -1.3s infinite; }
@keyframes hs-talk { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } }
.story .say { transform-box: fill-box; }
.story .say-a { transform-origin: 20% 100%; animation: hs-say-a var(--loop) infinite both; }
.story .say-b { transform-origin: 80% 100%; animation: hs-say-b var(--loop) infinite both; }
@keyframes hs-say-a {
  0%, 75% { opacity: 0; transform: scale(0.5); }
  76.5% { opacity: 1; transform: scale(1.08); }
  77.5%, 84% { opacity: 1; transform: scale(1); }
  85.5%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes hs-say-b {
  0%, 85% { opacity: 0; transform: scale(0.5); }
  86.5% { opacity: 1; transform: scale(1.08); }
  87.5%, 95% { opacity: 1; transform: scale(1); }
  96.5%, 100% { opacity: 0; transform: scale(0.8); }
}
.story .back * { animation-play-state: paused; }
.story .pay { animation: hs-pay 2.2s ease-in-out infinite; }
@keyframes hs-pay { 0% { opacity: 0; transform: translate(46px, 6px); } 15% { opacity: 1; } 75% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-18px, 2px); } }
.story .hand-over { animation: hs-hand-over 2.8s ease-in infinite; }
@keyframes hs-hand-over { 0%, 35% { opacity: 1; transform: translate(0, 0); } 85% { opacity: 1; transform: translate(-70px, 96px); } 100% { opacity: 0; transform: translate(-70px, 96px); } }
.story .fall { opacity: 0; }
.story .fall-a { animation: hs-fall 5.5s linear infinite; }
.story .fall-b { animation: hs-fall 6.5s linear -2.2s infinite; }
.story .fall-c { animation: hs-fall 7s linear -4.4s infinite; }
@keyframes hs-fall {
  0% { opacity: 0; transform: translate(0, -240px); }
  8% { opacity: 1; }
  50% { transform: translate(26px, 180px); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translate(-10px, 590px); }
}
.story .tap { transform-box: fill-box; transform-origin: 100% 100%; animation: hs-tap 0.7s ease-in-out infinite; }
@keyframes hs-tap { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(11deg); } }
.story .fume { animation: hs-fume 1.4s ease-in-out infinite; }
@keyframes hs-fume { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.story .sweat { animation: hs-sweat 2.4s ease-in infinite; }
@keyframes hs-sweat { 0%, 20% { opacity: 0; transform: translateY(-8px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(34px); } }
.story .under { max-width: 46rem; margin: 1.25rem auto 0; }
.story .captions { position: relative; min-height: 3em; color: var(--ink); font-size: clamp(1rem, 2vw, 1.1875rem); font-weight: 550; letter-spacing: -0.01em; line-height: 1.4; }
.story .cap { position: absolute; top: 0; left: 0; right: 0; opacity: 0; }
.story .cap-1 { animation: hs-cap-1 var(--loop) linear infinite both; }
.story .cap-2 { animation: hs-cap-2 var(--loop) linear infinite both; }
.story .cap-3 { animation: hs-cap-3 var(--loop) linear infinite both; }
.story .cap-4 { opacity: 1; animation: hs-cap-4 var(--loop) linear infinite both; }
@keyframes hs-cap-1 { 0%, 1% { opacity: 0; } 3%, 13% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes hs-cap-2 { 0%, 15% { opacity: 0; } 17%, 47% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes hs-cap-3 { 0%, 49% { opacity: 0; } 51%, 67% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes hs-cap-4 { 0%, 69% { opacity: 0; } 71%, 96.5% { opacity: 1; } 100% { opacity: 0; } }
.story .hs-hint { margin-top: 0.25rem; color: var(--ink-3); font-size: 0.875rem; }
.story .hint-hover { display: none; }
.story .stage.is-2025 .front *, .story .stage.is-2025 ~ .under .cap { animation-play-state: paused; }
.story .stage.is-2025 .back * { animation-play-state: running; }
.story .stage.is-2025 ~ .under .cap { visibility: hidden; }
.story .stage.is-2025 ~ .under .cap-then { visibility: visible; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.story .hint-hover { display: inline; }
.story .hint-tap { display: none; }
.story .stage:hover .hs-card { transform: rotateY(180deg); }
.story .stage:hover .front *, .story .stage:hover ~ .under .cap { animation-play-state: paused; }
.story .stage:hover .back * { animation-play-state: running; }
.story .stage:hover ~ .under .cap { visibility: hidden; }
.story .stage:hover ~ .under .cap-then { visibility: visible; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.story .face *, .story .cap, .story .chip { animation: none !important; }
.story .hs-card { transition: none; }
.story .trip.t3 { opacity: 1; }
.story .trip.t3 .tx { transform: translateX(118px); }
.story .trip.t3 .ty { transform: translateY(-26px); }
.story .fall { opacity: 1; }
}
.story .tee-s { font-size: 18px; }
.story .hs-tag { font-family: var(--font); font-size: 22px; font-weight: 700; fill: #4a525b; letter-spacing: -0.01em; }
.story .year-q { display: block; margin-top: 0.12em; color: var(--ink-2); font-size: 0.26em; font-weight: 650; letter-spacing: -0.01em; }
.story .year-you {
  position: absolute; top: 5%; left: 3.5%; padding: 0.35em 0.7em; border-radius: 999px; background: #ffffff; box-shadow: var(--shadow);
  color: var(--purple); font-size: clamp(0.75rem, 1.6vw, 0.95rem); font-weight: 700; line-height: 1; pointer-events: none;
  animation: hs-cap-4 var(--loop) linear infinite both;
}
.story .year-then {
  top: 5%; left: auto; right: 3.5%; padding: 0.35em 0.7em; border-radius: 999px; background: #ffffff; box-shadow: var(--shadow);
  color: var(--ink-2); font-size: clamp(0.75rem, 1.6vw, 0.95rem); font-weight: 700; letter-spacing: 0; text-align: left;
}
.story .year-q {
  position: absolute; display: inline-block; top: 5%; left: 3.5%; margin: 0; padding: 0.35em 0.7em; border-radius: 999px; background: #ffffff;
  box-shadow: var(--shadow); color: #b3261e; font-size: clamp(0.75rem, 1.6vw, 0.95rem); font-weight: 700; line-height: 1; letter-spacing: 0; pointer-events: none;
}
.story .his-ai { filter: hue-rotate(205deg) saturate(0.7); }
.story .to-ai { opacity: 0; animation: hs-to-ai 3.2s ease-in-out -1s infinite; }
@keyframes hs-to-ai {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  10% { opacity: 1; }
  45% { transform: translate(-170px, -90px) scale(0.9); }
  85% { opacity: 1; transform: translate(-330px, 220px) scale(0.6); }
  100% { opacity: 0; transform: translate(-330px, 230px) scale(0.5); }
}
.story .chip-c, .story .chip-d { left: 5.5%; font-size: clamp(0.5625rem, 1.05vw, 0.75rem); padding: 0.35em 0.7em; }
.story .chip-c { bottom: calc(4.5% + 2.4em); animation: hs-chip-c var(--loop) infinite both; }
.story .chip-d { bottom: 4.5%; animation: hs-chip-d var(--loop) infinite both; }
@keyframes hs-chip-c {
  0%, 74% { opacity: 0; transform: translateY(8px) scale(0.85); }
  75.5% { opacity: 1; transform: translateY(0) scale(1.05); }
  76.5%, 95% { opacity: 1; transform: translateY(0) scale(1); }
  96.5%, 100% { opacity: 0; transform: translateY(-6px) scale(0.96); }
}
@keyframes hs-chip-d {
  0%, 79.5% { opacity: 0; transform: translateY(8px) scale(0.85); }
  81% { opacity: 1; transform: translateY(0) scale(1.05); }
  82%, 95% { opacity: 1; transform: translateY(0) scale(1); }
  96.5%, 100% { opacity: 0; transform: translateY(-6px) scale(0.96); }
}