.quiz-story{--story-progress:0;--story-one:0;--story-two:0;--story-three:0;position:relative;height:320vh;padding:0;overflow:clip;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:radial-gradient(circle at 77% 28%,color-mix(in oklch,var(--accent) 15%,transparent),transparent 34%),radial-gradient(circle at 69% 72%,color-mix(in oklch,#c9b6d0 25%,transparent),transparent 31%),var(--bg-inset)}.quiz-story-pin{position:sticky;top:72px;height:calc(100svh - 72px);min-height:640px;overflow:hidden}.quiz-story-layout{display:grid;grid-template-columns:minmax(300px,0.78fr) minmax(520px,1.22fr);align-items:center;gap:clamp(36px,5vw,88px);height:100%}.quiz-story-copy{position:relative;z-index:12}.quiz-story-copy .v3-h2{max-width:520px;margin-top:20px;font-size:clamp(2rem,3.6vw,3.45rem)}.quiz-story-lede{max-width:460px;margin-top:20px;color:var(--ink-3);font-size:1.05rem;line-height:1.6}.quiz-story-steps{display:grid;gap:7px;max-width:470px;margin:34px 0 0;padding:0;list-style:none}.quiz-story-steps li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px;border:1px solid transparent;border-radius:14px;color:var(--ink-3);opacity:0.48;transform:translateX(0);transition:opacity 300ms ease,color 300ms ease,background 300ms ease,border-color 300ms ease,transform 400ms cubic-bezier(.2,.75,.2,1)}.quiz-story-steps li.is-active{color:var(--ink);opacity:1;transform:translateX(8px);border-color:var(--rule);background:color-mix(in oklch,var(--bg-elev) 86%,transparent);box-shadow:var(--shadow-sm)}.quiz-story-step-number{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--rule);border-radius:50%;color:var(--ink-3);background:var(--bg-elev);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;transition:color 300ms ease,border-color 300ms ease,background 300ms ease}.quiz-story-steps li.is-active .quiz-story-step-number{border-color:var(--accent);color:var(--on-accent);background:var(--accent)}.quiz-story-steps strong,.quiz-story-steps small{display:block}.quiz-story-steps strong{font-size:14px;font-weight:650}.quiz-story-steps small{margin-top:3px;color:var(--ink-3);font-size:12.5px;line-height:1.4}.quiz-story-visual{position:relative;min-height:min(72vh,690px);perspective:1500px;perspective-origin:50% 45%;isolation:isolate}.quiz-story-visual::before{content:"";position:absolute;inset:7% 2% 5%;border:1px solid color-mix(in oklch,var(--rule-2) 75%,transparent);border-radius:44% 56% 52% 48% / 50% 44% 56% 50%;background:linear-gradient(color-mix(in oklch,var(--ink) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,var(--ink) 5%,transparent) 1px,transparent 1px);background-size:44px 44px;opacity:.68;transform:rotate(calc(-3deg+(var(--story-progress) * 6deg))) scale(calc(.96+(var(--story-progress) * .04)))}.quiz-story-orbit{position:absolute;z-index:-1;border:1px solid color-mix(in oklch,var(--accent) 35%,transparent);border-radius:50%;pointer-events:none}.quiz-story-orbit::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 7px color-mix(in oklch,var(--accent) 14%,transparent)}.quiz-story-orbit.orbit-one{top:12%;right:1%;width:46%;aspect-ratio:1;transform:rotate(calc(18deg+(var(--story-progress) * 90deg)))}.quiz-story-orbit.orbit-one::after{top:15%;right:12%}.quiz-story-orbit.orbit-two{bottom:5%;left:2%;width:34%;aspect-ratio:1;border-color:color-mix(in oklch,#806b8f 30%,transparent);transform:rotate(calc(-34deg - (var(--story-progress) * 75deg)))}.quiz-story-orbit.orbit-two::after{bottom:8%;left:19%;background:#806b8f;box-shadow:0 0 0 7px color-mix(in oklch,#806b8f 14%,transparent)}.quiz-story-float{position:absolute;z-index:11;padding:7px 11px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-3);background:color-mix(in oklch,var(--bg-elev) 88%,transparent);box-shadow:var(--shadow-sm);font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(10px)}.quiz-story-float::before{content:"";display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--accent)}.quiz-story-float.float-one{top:13%;left:2%;transform:translate3d(calc(var(--story-one) * -16px),calc(var(--story-progress) * 30px),0)}.quiz-story-float.float-two{top:45%;right:0;transform:translate3d(calc(var(--story-two) * 18px),calc(var(--story-progress) * -28px),0)}.quiz-story-float.float-three{bottom:10%;left:9%;transform:translate3d(calc(var(--story-three) * -20px),calc(var(--story-progress) * -22px),0)}.quiz-story-deck{position:absolute;top:50%;left:50%;z-index:4;width:min(590px,90%);height:540px;transform:translate(-50%,-50%) rotateY(calc(-3deg+(var(--story-progress) * 6deg)));transform-style:preserve-3d}.quiz-story-layer,.quiz-story-result{position:absolute;top:50%;left:50%;width:min(520px,94%);border:1px solid var(--rule);border-radius:22px;background:color-mix(in oklch,var(--bg-elev) 94%,transparent);box-shadow:0 30px 80px -36px rgba(38,25,18,.42),0 12px 28px -18px rgba(38,25,18,.24);backface-visibility:hidden;will-change:transform,opacity}.story-question{z-index:6;min-height:230px;padding:24px 26px 28px;opacity:calc(1 - var(--story-three));transform:translate( calc(-50% - (var(--story-three) * 390px)),calc(-50% - 36px - (var(--story-one) * 158px) - (var(--story-three) * 75px)) ) translateZ(calc(110px+(var(--story-one) * 55px))) rotateX(calc(-2deg - (var(--story-one) * 3deg))) rotateZ(calc(-1deg - (var(--story-three) * 5deg)))}.story-card-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--ink-3);font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase}.story-progress{height:3px;margin-top:16px;overflow:hidden;border-radius:999px;background:var(--bg-inset)}.story-progress i{display:block;width:calc(22%+(var(--story-two) * 44%));height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#e5926f)}.story-kicker{margin-top:28px;color:var(--accent);font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.story-question h3{max-width:430px;margin:10px 0 0;color:var(--ink);font-family:var(--font-serif);font-size:clamp(1.45rem,2.4vw,2rem);font-weight:450;line-height:1.18}.story-options{z-index:5;min-height:252px;padding:18px;opacity:calc(1 - var(--story-three));transform:translate( calc(-50%+(var(--story-three) * 410px)),calc(-50%+22px - (var(--story-one) * 16px)+(var(--story-three) * 36px)) ) translateZ(calc(56px+(var(--story-one) * 34px))) rotateZ(calc(.6deg+(var(--story-three) * 5deg))) scale(calc(.97+(var(--story-one) * .03)))}.story-options-list{display:grid;gap:9px}.story-option{display:grid;grid-template-columns:31px minmax(0,1fr) 22px;gap:12px;align-items:center;min-height:61px;padding:11px 14px;border:1px solid var(--rule);border-radius:12px;color:var(--ink-2);background:var(--bg);transition:border-color 280ms ease,background 280ms ease,transform 280ms ease}.story-option>span{display:grid;width:29px;height:29px;place-items:center;border-radius:8px;color:var(--ink-3);background:var(--bg-inset);font-family:var(--font-mono);font-size:10px}.story-option p{font-size:13px;font-weight:550;line-height:1.35}.story-option b{color:var(--success);opacity:0;transform:scale(.5);transition:opacity 250ms ease,transform 350ms cubic-bezier(.2,.9,.3,1.4)}.story-option.is-selected{border-color:color-mix(in oklch,var(--success) calc(var(--story-two) * 100%),var(--rule));background:color-mix(in oklch,var(--success) calc(var(--story-two) * 12%),var(--bg));transform:translateX(calc(var(--story-two) * 8px))}.story-option.is-selected>span{color:color-mix(in oklch,var(--on-accent) calc(var(--story-two) * 100%),var(--ink-3));background:color-mix(in oklch,var(--success) calc(var(--story-two) * 100%),var(--bg-inset))}.story-option.is-selected b{opacity:var(--story-two);transform:scale(calc(.5+(var(--story-two) * .5)))}.story-explanation{z-index:4;min-height:164px;padding:24px 26px;opacity:calc((1 - var(--story-three)) * (.38+(var(--story-two) * .62)));transform:translate( calc(-50% - (var(--story-three) * 330px)),calc(-50%+58px+(var(--story-one) * 154px)+(var(--story-three) * 70px)) ) translateZ(calc(10px+(var(--story-one) * 28px))) rotateX(calc(2deg+(var(--story-one) * 2deg))) rotateZ(calc(-.7deg - (var(--story-three) * 4deg))) scale(calc(.93+(var(--story-one) * .07)))}.story-explanation-label{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}.story-explanation-label::before{content:"✦"}.story-explanation p{margin-top:12px;color:var(--ink-2);font-family:var(--font-serif);font-size:1.05rem;line-height:1.48}.story-explanation em{color:var(--accent)}.quiz-story-result{z-index:10;min-height:410px;padding:34px;text-align:center;opacity:var(--story-three);transform:translate(-50%,-50%) translateZ(calc(80px+(var(--story-three) * 85px))) rotateY(calc((1 - var(--story-three)) * -14deg)) scale(calc(.72+(var(--story-three) * .28)));pointer-events:none}.story-result-mark{position:relative;width:122px;height:122px;margin:0 auto 19px}.story-result-mark::before{content:"";position:absolute;inset:16px;border-radius:50%;background:color-mix(in oklch,var(--success) 12%,var(--bg-elev));transform:scale(calc(.65+(var(--story-three) * .35)))}.story-result-mark svg{position:relative;width:100%;height:100%;overflow:visible;transform:rotate(calc((1 - var(--story-three)) * -35deg))}.story-result-mark circle{fill:none;stroke:color-mix(in oklch,var(--success) 24%,var(--rule));stroke-width:5;stroke-dasharray:321;stroke-dashoffset:calc(321 - (var(--story-three) * 321))}.story-result-mark path{fill:none;stroke:var(--success);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:calc(80 - (var(--story-three) * 80))}.story-result-label{color:var(--success);font-family:var(--font-mono);font-size:9px;font-weight:650;letter-spacing:.13em;text-transform:uppercase}.quiz-story-result h3{margin:10px 0;color:var(--ink);font-family:var(--font-serif);font-size:clamp(1.7rem,3vw,2.35rem);font-weight:450}.quiz-story-result>p{max-width:390px;margin:0 auto;color:var(--ink-3);font-size:13.5px;line-height:1.55}.story-result-meta{display:flex;justify-content:center;gap:7px;margin-top:22px;flex-wrap:wrap}.story-result-meta span{padding:7px 10px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-3);background:var(--bg);font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase}.quiz-story-meter{position:absolute;right:7%;bottom:5%;left:7%;z-index:12;height:3px;overflow:hidden;border-radius:999px;background:color-mix(in oklch,var(--rule-2) 65%,transparent)}.quiz-story-meter i{display:block;width:calc(var(--story-progress) * 100%);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#e5926f 54%,#806b8f)}@media (max-width:1080px){.quiz-story-layout{grid-template-columns:minmax(260px,.72fr) minmax(460px,1.28fr);gap:28px}.quiz-story-copy .v3-h2{font-size:clamp(1.85rem,3.1vw,2.6rem)}.quiz-story-deck{width:min(540px,92%);transform:translate(-50%,-50%) scale(.9) rotateY(calc(-3deg+(var(--story-progress) * 6deg)))}}@media (max-width:860px){.quiz-story{height:auto;padding:80px 0;overflow:hidden}.quiz-story-pin{position:relative;top:auto;height:auto;min-height:0;overflow:visible}.quiz-story-layout{grid-template-columns:1fr;gap:42px}.quiz-story-copy{text-align:center}.quiz-story-copy .v3-h2,.quiz-story-lede{margin-right:auto;margin-left:auto}.quiz-story-steps{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;text-align:left}.quiz-story-steps li,.quiz-story-steps li.is-active{grid-template-columns:34px minmax(0,1fr);align-items:start;padding:12px 10px;opacity:1;transform:none;border-color:var(--rule);background:color-mix(in oklch,var(--bg-elev) 86%,transparent)}.quiz-story-steps li:not(:first-child) .quiz-story-step-number{border-color:var(--rule);color:var(--ink-3);background:var(--bg-elev)}.quiz-story-step-number{width:32px;height:32px}.quiz-story-visual{min-height:690px}.quiz-story-deck{top:0;width:min(600px,96%);height:650px;transform:translateX(-50%)}.story-question{top:0;opacity:1;transform:translateX(-50%) rotate(-1deg)}.story-options{top:205px;opacity:1;transform:translateX(-50%) rotate(.6deg)}.story-explanation{top:445px;opacity:1;transform:translateX(-50%) rotate(-.5deg)}.quiz-story-result,.quiz-story-float,.quiz-story-orbit,.quiz-story-meter{display:none}}@media (max-width:640px){.quiz-story{padding:64px 0 54px}.quiz-story-steps{grid-template-columns:1fr;gap:8px}.quiz-story-steps small{display:none}.quiz-story-visual{min-height:635px}.quiz-story-visual::before{inset:2% -12px 2%;border-radius:28px}.quiz-story-deck{width:100%;transform:translateX(-50%) scale(.94);transform-origin:top center}.story-question,.story-options,.story-explanation{width:100%;border-radius:18px}.story-question{min-height:210px;padding:21px}.story-question h3{font-size:1.45rem}.story-options{top:188px;padding:14px}.story-option{grid-template-columns:28px minmax(0,1fr) 18px;gap:9px;min-height:57px;padding:9px 10px}.story-option>span{width:27px;height:27px}.story-explanation{top:420px;padding:21px}}@media (prefers-reduced-motion:reduce){.quiz-story{height:auto;padding:80px 0;overflow:hidden}.quiz-story-pin{position:relative;top:auto;height:auto;min-height:0;overflow:visible}.quiz-story-layout{grid-template-columns:1fr}.quiz-story-visual{min-height:690px}.quiz-story-deck{top:0;height:650px;transform:translateX(-50%)}.story-question{top:0;opacity:1;transform:translateX(-50%)}.story-options{top:205px;opacity:1;transform:translateX(-50%)}.story-explanation{top:445px;opacity:1;transform:translateX(-50%)}.quiz-story-result,.quiz-story-float,.quiz-story-orbit,.quiz-story-meter{display:none}.quiz-story *,.quiz-story *::before,.quiz-story *::after{scroll-behavior:auto !important;transition-duration:.001ms !important;animation-duration:.001ms !important}}