.spiral-prototype{min-height:calc(100svh - 82px);overflow:hidden;padding:clamp(34px,5vw,64px) 20px 70px;background:radial-gradient(ellipse at 50% 48%,#fffefa 0%,#f7f5ef 66%,#edf3f2 100%);color:var(--navy-deep)}
.spiral-intro{text-align:center;margin:0 auto;max-width:820px}.spiral-eyebrow{font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--teal);margin:0 0 10px}
.spiral-intro h1,.spiral-intro h2{font:400 clamp(34px,4vw,52px)/1.04 S20Interior,S20Text,sans-serif;margin:0;color:var(--navy)}.spiral-intro>p:not(.spiral-eyebrow){font-size:clamp(16px,1.6vw,20px);line-height:1.35;margin:13px 0 10px}.spiral-intro a{display:inline-block;color:var(--teal);font-weight:700;text-underline-offset:5px}
.spiral-scene{position:relative;display:grid;place-items:center;min-height:590px;max-width:1050px;margin:8px auto 0;padding:20px 55px;perspective:1500px;outline-offset:-4px}
.spiral-ground{position:absolute;left:50%;bottom:5%;width:min(680px,74vw);height:55px;transform:translateX(-50%);border-radius:50%;background:rgba(17,40,48,.20);filter:blur(24px);pointer-events:none}
.spiral-book{position:relative;width:clamp(280px,32vw,430px);aspect-ratio:612/792;transform-style:preserve-3d;transform:rotateX(4deg) rotateY(-8deg) translateY(22px) scale(.97);transition:transform .85s cubic-bezier(.2,.75,.25,1)}
.spiral-book.is-settled{transform:rotateX(1deg) rotateY(-2deg) translateY(0) scale(1)}.spiral-book.is-open{transform:none}
.spiral-depth{position:absolute;inset:0;transform:translate3d(7px,7px,-10px);background:repeating-linear-gradient(to bottom,#e4e1d9 0 1px,#c9c6be 1px 2px);border:1px solid #c4c1b9;border-radius:2px;box-shadow:5px 5px 10px rgba(7,36,50,.19)}
.spiral-paper{position:absolute;inset:0;transform:translateZ(-3px);background:#fffefa;box-shadow:0 1px 0 #d7d4cd,0 3px 0 #ece9e1,0 5px 0 #d5d2ca}
.spiral-under,.spiral-current,.spiral-cover{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#fffefa;border:1px solid rgba(22,46,55,.1);border-radius:1px;box-shadow:1px 2px 8px rgba(4,30,44,.11);user-select:none;-webkit-user-drag:none}
.spiral-under{z-index:1}
.spiral-current{z-index:2}.spiral-cover{z-index:3}.spiral-cover[hidden],.spiral-current[hidden],.spiral-final[hidden]{display:none}
.spiral-final-mark img{display:block;width:clamp(135px,16vw,230px);height:auto}
.spiral-final{position:absolute;inset:0;z-index:1;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:auto;overscroll-behavior:contain;padding:clamp(15px,2vw,30px) clamp(14px,2.2vw,33px);background:radial-gradient(ellipse at 50% 15%,#f0faf8 0%,#fffefa 49%,#fffefa 100%);border:1px solid rgba(22,46,55,.1);color:var(--navy);box-shadow:1px 2px 8px rgba(4,30,44,.11)}.spiral-final-eyebrow{margin:0 0 10px;font-size:clamp(10px,1vw,13px);font-weight:700;letter-spacing:.16em;color:var(--teal)}.spiral-final h3{margin:0 0 13px;font:400 clamp(22px,2.5vw,32px)/1.05 S20Interior,S20Text,sans-serif;color:var(--navy)}.spiral-final>p:not(.spiral-final-eyebrow){margin:0;font-size:clamp(11px,1.15vw,15px);line-height:1.35}.spiral-final-mark{display:flex;flex-direction:column;align-items:center;margin:22px 0 13px;color:var(--navy)}.spiral-final-mark strong{font:700 clamp(26px,3vw,42px)/.95 S20Text,sans-serif;letter-spacing:-.04em}.spiral-final-mark em{font-style:normal;color:var(--orange)}.spiral-final-mark span{margin-top:8px;font-size:clamp(10px,1vw,14px);font-weight:700;letter-spacing:.13em}.spiral-final ul{padding:0;margin:4px 0 15px;list-style:none;font-size:clamp(11px,1.15vw,15px);line-height:1.35}.spiral-final li+li{margin-top:4px}.spiral-purchase{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;min-height:44px;padding:8px 13px;border-radius:100px;background:var(--orange);color:var(--navy);font-size:clamp(11px,1.05vw,14px);font-weight:800;text-decoration:none;line-height:1.15}.spiral-purchase:hover{background:#ff9c41}.spiral-purchase:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.spiral-cast-shadow{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:var(--cast-shadow,0);background:linear-gradient(90deg,rgba(8,30,44,.3),rgba(8,30,44,.08) 20%,transparent 52%)}
.spiral-turning{position:absolute;inset:0;z-index:5;display:none;transform-style:preserve-3d;pointer-events:none}.spiral-turning.is-active{display:block}
.spiral-curl{position:absolute;inset:0;z-index:6;width:100%;height:100%;overflow:visible;opacity:0;pointer-events:none;filter:drop-shadow(-2px 3px 3px rgba(13,35,44,.1))}.spiral-curl.is-active{opacity:1}.spiral-curl.is-releasing{opacity:0;transition:opacity .12s ease}.spiral-corner{position:absolute;right:0;bottom:0;z-index:8;width:clamp(76px,23%,116px);height:clamp(76px,19%,116px);border:0;padding:0;background:transparent;color:var(--teal);cursor:grab;touch-action:none}.spiral-corner:active{cursor:grabbing}.spiral-corner:disabled{display:none}.spiral-corner span{position:absolute;right:12px;bottom:7px;font:400 25px S20Text,sans-serif;opacity:.52;transform:rotate(-10deg);pointer-events:none}.spiral-corner:hover span,.spiral-corner:focus-visible span{opacity:1}.spiral-corner:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.spiral-strip{position:absolute;top:0;height:100%;transform-style:preserve-3d;backface-visibility:visible;will-change:transform}.spiral-strip-face{position:absolute;inset:0;backface-visibility:hidden;background-repeat:no-repeat;background-color:#fffefa}.spiral-strip-back{transform:rotateY(180deg);background:linear-gradient(90deg,#e7e4dc,#fffefa 18%,#f9f7f1 75%,#e8e5dd);box-shadow:inset 2px 0 4px rgba(25,43,49,.06)}
.spiral-coil{position:absolute;z-index:9;left:-30px;top:0;width:48px;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35))}
.spiral-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin:4px auto 0}.spiral-controls button{display:grid;place-items:center;width:54px;height:54px;border:1.5px solid var(--teal);border-radius:50%;background:var(--paper);color:var(--teal);font:400 27px S20Text,sans-serif;cursor:pointer}.spiral-controls button:hover:not(:disabled){background:var(--teal);color:white}.spiral-controls button:disabled{opacity:.32;cursor:default}.spiral-position{min-width:120px;text-align:center;font-size:19px;font-weight:700;margin:0;color:var(--navy)}
.spiral-magnify{margin-left:5px}.spiral-magnify svg{width:24px;height:24px}.spiral-dialog{border:0;padding:0;width:min(1080px,calc(100vw - 20px));max-height:calc(100dvh - 20px);background:var(--paper);color:var(--navy);box-shadow:0 25px 90px rgba(1,25,47,.3)}.spiral-dialog::backdrop{background:rgba(4,24,40,.8)}.spiral-dialog-tools{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px;padding:7px 12px;background:var(--paper);border-bottom:1px solid var(--line)}.spiral-dialog-tools>div{display:flex;align-items:center;gap:7px}.spiral-dialog-tools button{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:4px;background:#fffefa;color:var(--teal);font:700 19px S20Text,sans-serif;cursor:pointer}.spiral-dialog-tools button:disabled{opacity:.35;cursor:default}.spiral-dialog-tools .spiral-zoom-fit{padding:0 11px;font-size:15px}.spiral-dialog-tools .spiral-dialog-close{font-size:28px}.spiral-zoom-level{min-width:48px;text-align:center;font-size:14px;font-weight:700}.spiral-dialog-scroll{overflow:auto;max-height:calc(100dvh - 82px);padding:16px;text-align:center;overscroll-behavior:contain;touch-action:pan-x pan-y;cursor:grab}.spiral-dialog-scroll.is-panning{cursor:grabbing}.spiral-dialog-scroll img{display:block;height:auto;max-width:none;margin:0 auto;box-shadow:0 8px 24px rgba(13,46,60,.14);user-select:none;-webkit-user-drag:none}
@media(max-width:700px){.spiral-prototype{min-height:calc(100svh - 70px);padding:32px 10px 55px}.spiral-intro{padding:0 12px}.spiral-intro h1,.spiral-intro h2{font-size:clamp(29px,8vw,42px)}.spiral-intro>p:not(.spiral-eyebrow){font-size:16px}.spiral-scene{min-height:0;padding:25px 34px 12px;margin-top:10px}.spiral-book{width:min(calc(100vw - 75px),330px)}.spiral-ground{bottom:1%;height:34px;width:76vw;filter:blur(15px)}.spiral-coil{left:-26px;width:43px}.spiral-controls{gap:10px;margin-top:13px}.spiral-controls button{width:48px;height:48px}.spiral-position{min-width:94px;font-size:16px}.spiral-magnify{margin-left:0}.spiral-dialog-scroll{padding:8px}.spiral-dialog-tools{padding-inline:7px}.spiral-final{padding:10px 10px 12px}.spiral-final-eyebrow{margin-bottom:4px}.spiral-final h3{font-size:19px;margin-bottom:6px}.spiral-final>p:not(.spiral-final-eyebrow){font-size:11px;line-height:1.18}.spiral-final-mark{margin:9px 0 4px}.spiral-final-mark strong{font-size:27px}.spiral-final-mark span{margin-top:3px;font-size:10px;letter-spacing:.08em}.spiral-final ul{font-size:11px;line-height:1.14;margin:2px 0 6px}.spiral-final li+li{margin-top:1px}.spiral-purchase{min-height:39px;padding:5px 9px;font-size:10px}}
@media(max-width:370px){.spiral-scene{padding-inline:27px}.spiral-book{width:calc(100vw - 68px)}.spiral-final{padding:8px}.spiral-final h3{font-size:18px}.spiral-final-mark{margin:6px 0 3px}.spiral-final ul{margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.spiral-book{transition:none;transform:none!important}.spiral-strip{will-change:auto}}
.spiral-dialog-scroll img[hidden],.spiral-dialog-final[hidden]{display:none}
.spiral-final{overscroll-behavior:auto}
.spiral-dialog.is-final .spiral-dialog-tools>div{display:none}
.spiral-dialog-final{max-width:650px;margin:0 auto;padding:clamp(25px,5vw,56px) 24px 48px;background:radial-gradient(ellipse at 50% 15%,#f0faf8,#fffefa 60%);text-align:center;color:var(--navy)}
.spiral-dialog-final h3{font:400 clamp(30px,5vw,48px)/1.08 S20Interior,S20Text,sans-serif;margin:12px 0 20px}
.spiral-dialog-final>p:not(.spiral-final-eyebrow){font-size:clamp(17px,2vw,21px);line-height:1.4}
.spiral-dialog-final .spiral-final-mark{margin:30px 0 20px}
.spiral-dialog-final .spiral-final-mark img{width:min(60%,290px)}
.spiral-dialog-final ul{list-style:none;padding:0;font-size:19px;line-height:1.5}
.spiral-dialog-final .spiral-purchase{font-size:17px;min-height:54px;margin-top:16px}
@media(max-width:700px){.spiral-final .spiral-purchase{min-height:44px;font-size:11px}.spiral-dialog-final{padding:30px 16px 40px}}

/* The embedded reader follows its introduction without the prototype scene's fixed-height gap. */
#book-reader .spiral-scene{min-height:0;margin-top:0;padding-top:10px;padding-bottom:14px}
@media(max-width:700px){#book-reader .spiral-scene{margin-top:2px;padding-top:12px;padding-bottom:10px}}
@media(max-width:700px){#book-reader.spiral-prototype{min-height:0;padding-bottom:40px}}

.spiral-purchase{gap:14px;padding:8px 9px 8px 19px;border:2px solid #d96312;background:linear-gradient(125deg,#ffad5c,var(--orange) 75%);box-shadow:0 4px 0 rgba(8,39,61,.15),0 12px 24px rgba(8,39,61,.12);transition:transform .24s ease,box-shadow .24s ease}
.spiral-purchase span{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,251,239,.88);font-size:20px}
.spiral-purchase:hover{background:linear-gradient(125deg,#ffb568,#f58025 75%);transform:translateY(-2px);box-shadow:0 6px 0 rgba(8,39,61,.14),0 16px 25px rgba(8,39,61,.17)}
@media(max-width:700px){.spiral-purchase{padding:5px 6px 5px 11px;gap:5px}.spiral-purchase span{width:25px;height:25px;font-size:16px}}
@media(prefers-reduced-motion:reduce){.spiral-purchase{transition:none}.spiral-purchase:hover{transform:none}}

.spiral-final .spiral-purchase-note{
  margin:9px 0 0;color:#345d62;font-family:S20Text,Arial,sans-serif;
  font-size:clamp(12px,1vw,14px);font-weight:500;line-height:1.3;text-wrap:pretty;
}
.spiral-dialog-final .spiral-purchase-note{font-size:14px;line-height:1.4;margin-top:12px}

.spiral-deliverable{width:100%;margin:3px 0 16px;padding:12px 10px 10px;border-top:1px solid rgba(14,79,94,.28);border-bottom:1px solid rgba(14,79,94,.28);box-sizing:border-box}
.spiral-final{justify-content:center}
.spiral-final .spiral-purchase{margin-top:0}
.spiral-deliverable-label{display:block;margin-bottom:5px;color:var(--teal);font-size:clamp(10px,.95vw,12px);font-weight:800;letter-spacing:.15em}
.spiral-deliverable p{margin:0;font-size:clamp(11px,1.1vw,14px);line-height:1.35;text-wrap:pretty}
.spiral-deliverable strong{font-weight:800}
.spiral-dialog-final .spiral-deliverable{max-width:490px;margin:12px auto 22px;padding:18px 14px}
.spiral-dialog-final .spiral-deliverable-label{font-size:13px}
.spiral-dialog-final .spiral-deliverable p{font-size:19px;line-height:1.45}

/* A short one-time celebration follows the final page turn. */
.spiral-confetti{position:absolute;inset:0;z-index:10;overflow:hidden;pointer-events:none}
.spiral-confetti i{position:absolute;top:12%;left:var(--x);width:6px;height:12px;border-radius:42% 23% 38% 29%;background:#d6a645;opacity:0;transform:translate3d(0,0,0) rotate(0deg)}
.spiral-confetti i:nth-child(4n+2){background:#f47a20;width:5px;height:10px;border-radius:28% 45% 24% 40%}
.spiral-confetti i:nth-child(4n+3){background:#0d6575;width:7px;height:7px;border-radius:45% 34% 46% 28%}
.spiral-confetti i:nth-child(4n+4){background:#a78342;width:5px;height:13px;border-radius:30% 45% 32% 44%}
.spiral-scene.is-celebrating .spiral-confetti i{animation:spiral-confetti-fall 1.4s ease-out var(--delay) both}
@keyframes spiral-confetti-fall{0%{opacity:0;transform:translate3d(0,-15px,0) rotate(0deg)}16%{opacity:.9}70%{opacity:.8}100%{opacity:0;transform:translate3d(var(--drift),var(--fall),0) rotate(var(--turn))}}
@media(max-width:700px){.spiral-final .spiral-deliverable{margin:2px 0 8px;padding:7px 4px}.spiral-final .spiral-deliverable-label{margin-bottom:3px;font-size:10px}.spiral-final .spiral-deliverable p{font-size:11.5px;line-height:1.23}.spiral-confetti i{top:8%}}
@media(max-width:370px){.spiral-final .spiral-deliverable{margin-bottom:5px;padding:5px 3px}.spiral-final .spiral-deliverable p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.spiral-scene.is-celebrating .spiral-confetti i{animation:none}.spiral-scene.is-complete .spiral-confetti i:nth-child(4n+1){opacity:.65}}