/* Spider Studios interactive book journey v2 — isolated lower-page component */
.book-story-section{position:relative;margin:32px 0 58px;padding:46px 34px 34px;border-radius:30px;overflow:hidden;color:#eef4ff;background:radial-gradient(circle at 14% 0%,rgba(174,63,255,.20),transparent 28%),radial-gradient(circle at 88% 10%,rgba(29,145,255,.22),transparent 32%),linear-gradient(145deg,#07143d 0%,#0d1d59 55%,#111c4b 100%);box-shadow:0 28px 70px rgba(15,27,80,.16)}
.book-story-section:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.14) 0 1px,transparent 1.5px);background-size:34px 34px;opacity:.10;pointer-events:none}
.book-story-head,.book-stage-shell,.book-chapters,.book-story-bottom{position:relative;z-index:2}
.book-story-head{display:flex;justify-content:space-between;gap:28px;align-items:flex-start;max-width:1180px;margin:0 auto 28px}.book-story-head h2{font-size:clamp(34px,4vw,58px);line-height:1;margin:8px 0 12px;color:#fff;letter-spacing:-.045em}.book-story-head h2 span{background:linear-gradient(90deg,#ff43c0,#a861ff,#32b7ff);-webkit-background-clip:text;background-clip:text;color:transparent}.book-story-head p{max-width:720px;color:#b8c5e9;font-size:15px;line-height:1.65;margin:0}.book-story-head .mini-kicker{color:#ff58b6;letter-spacing:.22em;font-weight:800;font-size:10px}
.book-sound-toggle{display:flex;align-items:center;gap:9px;flex:0 0 auto;border:1px solid rgba(161,184,255,.34);background:rgba(255,255,255,.07);color:#fff;border-radius:999px;padding:10px 14px 10px 12px;cursor:pointer;transition:.25s}.book-sound-toggle:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}.book-sound-toggle .sound-icon{font-size:16px}.book-sound-toggle b{font-size:12px}.book-sound-toggle i{width:7px;height:7px;border-radius:50%;background:#54e3ff;box-shadow:0 0 12px #54e3ff}.book-sound-toggle[aria-pressed="false"] i{background:#7080aa;box-shadow:none}.book-sound-toggle[aria-pressed="false"]{opacity:.76}
.book-stage-shell{display:grid;grid-template-columns:46px minmax(0,1050px) 46px;justify-content:center;align-items:center;gap:16px;perspective:1800px;max-width:1180px;margin:0 auto}.book-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(139,165,255,.45);background:rgba(8,18,59,.82);color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:.25s}.book-arrow:hover{transform:scale(1.08);border-color:#62c8ff;box-shadow:0 0 22px rgba(68,162,255,.24)}
.open-book{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;min-height:430px;transform-style:preserve-3d;filter:drop-shadow(0 25px 28px rgba(0,0,0,.30))}.book-page{position:relative;min-width:0;background:linear-gradient(105deg,#f5ead7 0%,#fffaf0 42%,#f5ead7 100%);color:#13204a;overflow:hidden}.book-page-left{border-radius:20px 4px 4px 22px;transform:rotateY(2deg);box-shadow:inset -16px 0 22px rgba(102,74,45,.13),inset 0 1px 0 rgba(255,255,255,.8)}.book-page-right{border-radius:4px 20px 22px 4px;transform:rotateY(-2deg);box-shadow:inset 16px 0 22px rgba(102,74,45,.12),inset 0 1px 0 rgba(255,255,255,.8)}.book-page:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(65,87,123,.045) 28px)}.book-spine{position:absolute;z-index:8;left:50%;top:4px;bottom:4px;width:18px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(49,32,25,.25),rgba(255,255,255,.55),rgba(49,32,25,.22));filter:blur(.6px);opacity:.7}.book-shadow{position:absolute;z-index:-1;left:4%;right:4%;bottom:-18px;height:34px;border-radius:50%;background:rgba(0,0,0,.38);filter:blur(18px)}
.page-inner{position:relative;z-index:2;height:100%;padding:38px 44px;box-sizing:border-box}.chapter-no{position:absolute;right:32px;top:26px;font-size:62px;font-weight:900;color:rgba(105,79,255,.09);line-height:1}.chapter-kicker{font-size:10px;letter-spacing:.2em;color:#6f58e8;font-weight:800}.page-inner h3{font-size:38px;margin:7px 0 8px;letter-spacing:-.035em;color:#111e4a}.chapter-lead{font-size:17px;line-height:1.4;max-width:380px;color:#435175}.page-inner ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}.page-inner li{font-size:13px;color:#334365;padding-left:23px;position:relative}.page-inner li:before{content:"✓";position:absolute;left:0;top:-1px;width:16px;height:16px;border-radius:5px;background:#172f78;color:#fff;font-size:10px;display:grid;place-items:center}.hand-note{position:absolute;left:44px;bottom:30px;font-family:"Comic Sans MS","Segoe Print",cursive;font-size:17px;line-height:1.05;color:#30447a;transform:rotate(-4deg)}.hand-note span{display:block;width:106%;height:3px;background:#ff48b7;border-radius:99px;margin-top:5px;transform:rotate(-2deg)}
.book-visual-wrap{display:flex;flex-direction:column;justify-content:center}.book-visual{height:165px;position:relative;margin:0 0 18px;border-radius:24px;background:linear-gradient(145deg,#111d55,#223b89);box-shadow:0 20px 35px rgba(26,38,85,.22);overflow:hidden}.book-visual:before,.book-visual:after{content:"";position:absolute;border-radius:50%}.book-visual:before{width:140px;height:140px;right:-28px;top:-25px;background:radial-gradient(circle,#5fe4ff 0 2px,rgba(90,182,255,.18) 3px 48%,transparent 50%)}.book-visual:after{left:28px;bottom:30px;width:62%;height:8px;background:linear-gradient(90deg,#ff50c6,#9d5bff,#53d8ff);box-shadow:0 -30px 0 -2px rgba(255,255,255,.16),0 -58px 0 -2px rgba(255,255,255,.09)}.book-visual i,.book-visual b,.book-visual span{position:absolute;display:block}.book-visual i{left:34px;top:34px;width:68px;height:68px;border:7px solid #fff;border-radius:50%;opacity:.9}.book-visual i:after{content:"";position:absolute;inset:18px;border:6px solid #ff59be;border-radius:50%}.book-visual b{left:91px;top:21px;width:7px;height:58px;background:#fff;transform:rotate(38deg);border-radius:9px}.book-visual span{right:48px;bottom:35px;width:88px;height:60px;border:2px solid rgba(255,255,255,.42);border-radius:12px;background:linear-gradient(135deg,rgba(255,78,194,.22),rgba(79,199,255,.18))}.book-visual-design i{border-radius:14px;border-width:4px;width:82px;height:82px}.book-visual-design i:after{border-radius:8px}.book-visual-design b{transform:rotate(-34deg);background:#57d8ff}.book-visual-develop i{border-radius:12px;border:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.9) 0 3px,transparent 3px 11px);width:120px}.book-visual-develop i:after{display:none}.book-visual-develop b{width:70px;height:40px;left:auto;right:42px;top:42px;transform:none;background:rgba(255,255,255,.12);border:2px solid #5ee1ff}.book-visual-launch i{border:0;width:0;height:0;border-left:28px solid transparent;border-right:28px solid transparent;border-bottom:88px solid #f3f7ff;border-radius:0;transform:rotate(25deg);left:70px;top:24px}.book-visual-launch i:after{display:none}.book-visual-launch b{left:78px;top:102px;width:22px;height:42px;background:linear-gradient(#ffdf55,#ff5e33);transform:rotate(25deg)}.book-visual-grow i{border:0;border-radius:0;width:190px;height:100px;left:44px;top:30px;background:linear-gradient(145deg,transparent 45%,#5cddff 46% 49%,transparent 50%),linear-gradient(25deg,transparent 40%,#ff54bd 41% 44%,transparent 45%)}.book-visual-grow i:after{display:none}.book-visual-grow b{left:auto;right:58px;top:22px;width:20px;height:108px;background:linear-gradient(#55e3ff,#775cff);transform:none;box-shadow:-30px 30px 0 -2px #a75cff,-60px 54px 0 -4px #ff52bd}.book-visual-wrap h4{font-size:16px;margin:0 0 7px;color:#15244e}.book-visual-wrap>p{font-size:13px;line-height:1.55;color:#52617e;margin:0 0 16px}.book-result{margin-top:auto;padding:13px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(120,89,255,.09),rgba(62,195,255,.08));border:1px solid rgba(83,103,165,.12)}.book-result small{display:block;font-size:9px;letter-spacing:.18em;color:#8d65f5;font-weight:800;margin-bottom:4px}.book-result strong{font-size:13px;color:#1c2c56}
.page-flip-layer{pointer-events:none;position:absolute;z-index:12;right:0;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;opacity:0}.page-flip-layer .flip-front,.page-flip-layer .flip-back{position:absolute;inset:0;backface-visibility:hidden;background:linear-gradient(105deg,#fff8e9,#f0dfc6);border-radius:4px 20px 22px 4px;box-shadow:-12px 0 28px rgba(54,38,22,.22)}.page-flip-layer .flip-back{transform:rotateY(180deg);background:linear-gradient(255deg,#fff8e9,#ecd9bd)}.book-stage-shell.is-flipping .page-flip-layer{opacity:1;animation:bookPageFlip .82s cubic-bezier(.24,.68,.24,1)}.book-stage-shell.is-flipping .open-book{animation:bookBreathe .82s ease}.book-stage-shell.is-opening .open-book{animation:bookOpen .72s cubic-bezier(.18,.86,.28,1)}
@keyframes bookPageFlip{0%{transform:rotateY(0)}45%{transform:rotateY(-95deg)}100%{transform:rotateY(-180deg)}}@keyframes bookBreathe{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(3px) scale(.992)}}@keyframes bookOpen{0%{transform:rotateX(8deg) scale(.94);opacity:.3}100%{transform:none;opacity:1}}
.book-chapters{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:26px auto 0;max-width:1080px}.book-chapters button{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid rgba(135,160,238,.16);background:rgba(255,255,255,.045);color:#bfcbed;padding:11px 12px;border-radius:15px;cursor:pointer;transition:.25s}.book-chapters button:hover,.book-chapters button.active{background:rgba(255,255,255,.09);border-color:rgba(107,197,255,.46);color:#fff;transform:translateY(-2px)}.book-chapters i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(96,100,255,.16);font-size:10px;font-weight:800;color:#8ddcff}.book-chapters b{display:block;font-size:12px}.book-chapters small{display:block;font-size:9px;color:#8394c3;margin-top:2px}.book-chapters button.active i{background:linear-gradient(135deg,#ff48bf,#6671ff,#43d5ff);color:#fff;box-shadow:0 0 18px rgba(87,155,255,.35)}
.book-story-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;max-width:1080px;margin:20px auto 0}.story-progress{height:3px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden}.story-progress span{display:block;height:100%;width:20%;border-radius:inherit;background:linear-gradient(90deg,#ff48bf,#765dff,#3bd5ff);transition:width .45s ease}.book-story-cta{display:inline-flex;align-items:center;gap:20px;text-decoration:none;color:#fff;font-weight:800;font-size:13px;padding:13px 20px;border-radius:999px;background:linear-gradient(90deg,#f52bc5,#7b4dff,#1da9ff);box-shadow:0 12px 28px rgba(106,70,255,.26)}.book-story-cta span{transition:.25s}.book-story-cta:hover span{transform:translateX(5px)}.book-story-bottom p{margin:0;text-align:right;font-size:11px;color:#94a5cf}.book-story-bottom p b{color:#e8eeff}
@media(max-width:900px){.book-story-section{padding:36px 18px 28px;border-radius:24px}.book-story-head{display:block}.book-sound-toggle{margin-top:16px}.book-stage-shell{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}.open-book{min-height:0}.page-inner{padding:28px 24px}.page-inner h3{font-size:30px}.chapter-lead{font-size:15px}.hand-note{position:static;margin-top:20px}.book-visual{height:135px}.book-chapters{grid-template-columns:1fr 1fr}.book-story-bottom{grid-template-columns:1fr}.book-story-bottom p{text-align:left}.book-story-cta{justify-self:start}}
@media(max-width:640px){.book-stage-shell{grid-template-columns:1fr}.book-arrow{position:absolute;z-index:20;top:50%;transform:translateY(-50%)}.book-prev{left:8px}.book-next{right:8px}.book-arrow:hover{transform:translateY(-50%) scale(1.05)}.open-book{display:block}.book-page{min-height:350px;border-radius:16px!important;transform:none!important}.book-page-right{display:none}.book-spine{display:none}.page-flip-layer{width:100%}.book-chapters{grid-template-columns:1fr}.book-story-head h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){.book-stage-shell.is-flipping .page-flip-layer,.book-stage-shell.is-opening .open-book{animation:none!important}}


/* v8 — physical page-turn + chapter micro-animation polish */
.book-story-section{margin-top:28px!important;margin-bottom:52px!important}
.open-book{min-height:390px!important;perspective:2200px}
.book-page{transition:filter .35s ease,transform .35s ease}
.book-stage-shell.is-flipping .book-page-left,
.book-stage-shell.is-flipping .book-page-right{filter:saturate(.97) brightness(.985)}
.page-flip-layer{
  overflow:visible;
  transform-origin:left center;
  will-change:transform,filter,opacity;
}
.page-flip-layer:before{
  content:"";position:absolute;z-index:4;top:1.5%;bottom:1.5%;left:-5px;width:30px;
  background:linear-gradient(90deg,rgba(45,27,13,.32),rgba(55,36,20,.10),transparent);
  filter:blur(3px);opacity:0;transition:opacity .15s ease;pointer-events:none
}
.page-flip-layer:after{
  content:"";position:absolute;z-index:5;inset:0;border-radius:4px 20px 22px 4px;
  background:
    radial-gradient(ellipse at 7% 50%,rgba(255,255,255,.92),rgba(255,255,255,.16) 17%,transparent 36%),
    linear-gradient(90deg,rgba(255,255,255,.2),transparent 24%,rgba(94,60,29,.08) 88%,rgba(48,29,16,.13));
  mix-blend-mode:soft-light;opacity:.68;backface-visibility:hidden;pointer-events:none
}
.page-flip-layer .flip-front,
.page-flip-layer .flip-back{
  overflow:hidden;
  background:
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(65,87,123,.035) 28px),
    linear-gradient(105deg,#fffaf0 0%,#f8ead3 47%,#ead7b9 100%);
}
.page-flip-layer .flip-front:before,
.page-flip-layer .flip-back:before{
  content:"";position:absolute;inset:-4%;
  background:linear-gradient(90deg,transparent 0 55%,rgba(74,47,23,.13) 77%,rgba(32,18,8,.22) 100%);
  opacity:.65;pointer-events:none
}
.page-flip-layer .flip-back{
  background:
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(65,87,123,.03) 28px),
    linear-gradient(255deg,#fffaf0 0%,#f3e2c8 55%,#e5cfac 100%)
}
.book-stage-shell.is-flipping .page-flip-layer:before{opacity:1}
.book-stage-shell.flip-forward .page-flip-layer{
  opacity:1;animation:bookPageCurlForward .92s cubic-bezier(.20,.68,.18,1)
}
.book-stage-shell.flip-backward .page-flip-layer{
  left:0;right:auto;transform-origin:right center;opacity:1;
  animation:bookPageCurlBackward .92s cubic-bezier(.20,.68,.18,1)
}
.book-stage-shell.flip-backward .page-flip-layer .flip-front,
.book-stage-shell.flip-backward .page-flip-layer .flip-back{
  border-radius:20px 4px 4px 22px
}
.book-stage-shell.flip-backward .page-flip-layer:before{left:auto;right:-5px;transform:scaleX(-1)}
.book-stage-shell.is-flipping .open-book{animation:bookBreatheV8 .92s ease}
.book-stage-shell.is-flipping .book-shadow{animation:bookShadowPulse .92s ease}

@keyframes bookPageCurlForward{
  0%{transform:rotateY(0deg) rotateZ(0deg) skewY(0deg);filter:brightness(1);opacity:1}
  16%{transform:rotateY(-26deg) rotateZ(-.4deg) skewY(.4deg);filter:brightness(1.04)}
  46%{transform:rotateY(-93deg) rotateZ(-1.1deg) skewY(1.2deg);filter:brightness(.88)}
  72%{transform:rotateY(-147deg) rotateZ(-.5deg) skewY(.5deg);filter:brightness(.97)}
  100%{transform:rotateY(-180deg) rotateZ(0deg);filter:brightness(1);opacity:1}
}
@keyframes bookPageCurlBackward{
  0%{transform:rotateY(0deg) rotateZ(0deg) skewY(0deg);filter:brightness(1);opacity:1}
  16%{transform:rotateY(26deg) rotateZ(.4deg) skewY(-.4deg);filter:brightness(1.04)}
  46%{transform:rotateY(93deg) rotateZ(1.1deg) skewY(-1.2deg);filter:brightness(.88)}
  72%{transform:rotateY(147deg) rotateZ(.5deg) skewY(-.5deg);filter:brightness(.97)}
  100%{transform:rotateY(180deg) rotateZ(0deg);filter:brightness(1);opacity:1}
}
@keyframes bookBreatheV8{
  0%,100%{transform:translateY(0) scale(1)}
  35%{transform:translateY(2px) scale(.994)}
  62%{transform:translateY(4px) scale(.989)}
}
@keyframes bookShadowPulse{
  0%,100%{opacity:.7;transform:scaleX(1)}
  50%{opacity:.95;transform:scaleX(.94)}
}

/* Subtle chapter-specific motion on the right page */
.book-stage-shell:not(.is-flipping) .book-visual i,
.book-stage-shell:not(.is-flipping) .book-visual b,
.book-stage-shell:not(.is-flipping) .book-visual span{
  animation-duration:3.8s;animation-iteration-count:infinite;animation-timing-function:ease-in-out
}
.book-stage-shell[data-book-stage="0"] .book-visual i{animation-name:strategyPulse}
.book-stage-shell[data-book-stage="1"] .book-visual i{animation-name:designFloat}
.book-stage-shell[data-book-stage="1"] .book-visual b{animation-name:designPen}
.book-stage-shell[data-book-stage="2"] .book-visual i{animation-name:codeScan}
.book-stage-shell[data-book-stage="2"] .book-visual b{animation-name:codeBadge}
.book-stage-shell[data-book-stage="3"] .book-visual i{animation-name:rocketLift}
.book-stage-shell[data-book-stage="3"] .book-visual b{animation-name:rocketFlame}
.book-stage-shell[data-book-stage="4"] .book-visual b{animation-name:growBars}

@keyframes strategyPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes designFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes designPen{0%,100%{transform:rotate(-34deg) translate(0,0)}50%{transform:rotate(-30deg) translate(4px,-4px)}}
@keyframes codeScan{0%,100%{filter:brightness(1)}50%{filter:brightness(1.28)}}
@keyframes codeBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes rocketLift{0%,100%{transform:rotate(25deg) translate(0,0)}50%{transform:rotate(25deg) translate(-5px,-8px)}}
@keyframes rocketFlame{0%,100%{transform:rotate(25deg) scaleY(.9);filter:brightness(1)}50%{transform:rotate(25deg) scaleY(1.15);filter:brightness(1.3)}}
@keyframes growBars{0%,100%{transform:scaleY(.88);transform-origin:bottom}50%{transform:scaleY(1.05);transform-origin:bottom}}

/* More obvious active chapter and moving progress glow */
.book-chapters{position:relative}
.book-chapters button{position:relative;overflow:hidden}
.book-chapters button.active{
  box-shadow:0 10px 25px rgba(33,157,255,.13),inset 0 0 22px rgba(121,78,255,.08)
}
.book-chapters button.active:after{
  content:"";position:absolute;height:2px;left:12px;right:12px;bottom:5px;border-radius:99px;
  background:linear-gradient(90deg,#ff45bd,#7d62ff,#45d5ff);
  box-shadow:0 0 12px rgba(79,188,255,.55);
  animation:chapterGlow 1.8s ease-in-out infinite
}
@keyframes chapterGlow{0%,100%{opacity:.5;transform:scaleX(.72)}50%{opacity:1;transform:scaleX(1)}}
.story-progress span{position:relative}
.story-progress span:after{
  content:"";position:absolute;right:0;top:50%;width:9px;height:9px;border-radius:50%;transform:translate(50%,-50%);
  background:#9feaff;box-shadow:0 0 12px #52ccff,0 0 18px rgba(255,63,190,.55)
}

/* Slightly more compact book without crowding */
.page-inner{padding-top:30px!important;padding-bottom:26px!important}
.book-visual{height:142px!important}

/* Mobile: one-page reading mode with full-width turn */
@media(max-width:640px){
  .book-story-section{margin-bottom:40px!important}
  .open-book{min-height:365px!important}
  .book-page-left{display:block!important}
  .book-page-right{display:none!important}
  .page-flip-layer{left:0!important;right:auto!important;width:100%!important;transform-origin:left center!important}
  .book-stage-shell.flip-backward .page-flip-layer{transform-origin:right center!important}
  .book-chapters{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important;overflow-x:auto;padding-bottom:6px}
  .book-chapters button{min-width:88px;display:block;text-align:center;padding:9px 8px}
  .book-chapters button span small{display:none}
  .book-chapters i{margin:0 auto 5px}
}
@media(prefers-reduced-motion:reduce){
  .book-visual i,.book-visual b,.book-visual span,.book-chapters button.active:after{animation:none!important}
}

/* v23: sound intentionally removed */
.book-sound-toggle{display:none!important}