body{margin:0;background:#f2eee7;color:#332d29;font-family:Georgia,'Songti SC',serif}.wrap{max-width:660px;margin:auto;padding:24px 16px}.top{display:flex;justify-content:space-between;color:#9b7658;font-size:12px;letter-spacing:2px;margin:12px 0 25px}.paper{background:#fffdf8;border:1px solid #e1d8ca;padding:clamp(24px,6vw,55px);min-height:550px;box-shadow:0 20px 60px #5b3b1a0e}.eyebrow{color:#a47d5d;letter-spacing:3px;font-size:11px}.hero{text-align:center;padding:65px 0 20px}.hero h1{font-size:clamp(25px,5vw,36px);font-weight:400;line-height:1.55}.hero p,.muted{color:#877c71;line-height:2;font-size:14px}.quote{background:#f6f0e7;padding:20px;text-align:left;line-height:2;color:#68594c;margin:36px 0}.btn{background:#393139;color:white;border:0;padding:14px 25px;min-height:47px;cursor:pointer;font:14px inherit;letter-spacing:1px}.btn.secondary{background:transparent;border:1px solid #b9aa98;color:#594c42}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.actions button{flex:1}.q{font-size:26px;font-weight:400;line-height:1.7;margin:35px 0}.opt{display:block;width:100%;text-align:left;background:transparent;border:1px solid #e4d8ca;padding:17px;margin:11px 0;cursor:pointer;font:15px/1.7 inherit;color:#3f3833}.opt:hover{background:#f6ede1;border-color:#a78363}.progress{height:4px;background:#eee7df;margin:24px 0}.progress div{height:100%;background:#b38a65}.result{text-align:center}.seal{border:1px solid #b8a087;border-radius:50%;width:80px;height:80px;display:grid;place-items:center;margin:25px auto;font-size:38px;color:#ad805b}.result h1{font-size:38px;font-weight:400}.section{text-align:left;border-top:1px solid #e9dfd3;padding:22px 0}.section h3{font-size:17px;font-weight:400}.section p{font-size:14px;line-height:2.1;color:#635c55}.bar{margin:12px 0}.bar span{display:flex;justify-content:space-between;font-size:12px}.track{height:6px;background:#eee5db;margin-top:6px}.fill{height:100%;background:#b48c6a}.foot{text-align:center;font-size:11px;color:#9b8e80;margin-top:24px;line-height:1.8}#share{background:#fffaf1;padding:30px;border:1px solid #e0d4c5;margin-top:20px}.heroicon{width:106px;height:106px;margin:0 auto 24px;display:grid;place-items:center;background:#f1e7d8;border-radius:22px}#pwd{width:100%;max-width:300px;display:block;margin:25px auto;padding:14px;text-align:center;letter-spacing:8px;font-size:24px;border:1px solid #cbb69e;background:#fff}.chosen{background:#f4e8d9!important;border-color:#a47e5f!important}
/* A physical paper leaf turns from the right edge, with a soft spine shadow. */
.paper{position:relative;overflow:hidden;perspective:1500px;isolation:isolate}
.paper.turning{pointer-events:none}
.page-leaf{position:absolute;inset:0;z-index:30;pointer-events:none;transform-origin:left center;transform-style:preserve-3d;backface-visibility:visible;animation:leafTurn .92s cubic-bezier(.42,.04,.26,.98) forwards}
.page-leaf-front,.page-leaf-back{position:absolute;inset:0;backface-visibility:hidden;border:1px solid #e2d5c4;background:linear-gradient(90deg,#e8dbc8 0%,#fffdf7 5%,#fffdf8 86%,#f1e8dc 100%);box-shadow:inset 15px 0 22px -18px #755a3d55, -4px 8px 20px #503a2530}
.page-leaf-back{transform:rotateY(180deg);background:linear-gradient(90deg,#f5eadd,#fffaf1 75%,#dfceb7);box-shadow:inset -15px 0 24px -15px #70543766}
.page-leaf-front:after{content:' ';position:absolute;top:10%;bottom:10%;left:10%;width:1px;background:#cdbda855;box-shadow:0 0 18px #c9b79b44}
@keyframes leafTurn{0%{transform:rotateY(0deg)}100%{transform:rotateY(-180deg)}}
.paper.page-reveal> :not(.page-leaf){animation:none}
@keyframes pageReveal{from{opacity:.45;transform:translateX(7px)}to{opacity:1;transform:translateX(0)}}
.paper .question-enter{animation:none}
@keyframes questionEnter{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
.opt{transition:background .24s,border-color .24s,transform .24s,box-shadow .24s}
.opt:active{transform:scale(.985)}
.opt.selected{background:#f1e2d1!important;border-color:#a47d5d!important;transform:translateX(5px);box-shadow:inset 3px 0 #ae8763}
.opt.selected::after{content:' ✓';float:right;color:#9a7354}
.opt:disabled{cursor:default}
.loading-stage{text-align:center;display:flex;min-height:510px;flex-direction:column;justify-content:center;align-items:center;gap:16px}
.loading-book{width:126px;height:104px;position:relative;perspective:800px;margin-bottom:15px}
.loading-book .leaf{position:absolute;top:10px;left:50%;width:52px;height:82px;background:linear-gradient(95deg,#f9f0e2,#e5d3bc);border:1px solid #bca387;border-radius:2px 10px 10px 2px;transform-origin:left center;animation:leafFlip 1.15s ease-in-out infinite}
.loading-book .leaf:nth-child(2){animation-delay:.35s;background:#f7ead8}.loading-book .leaf:nth-child(3){animation-delay:.7s;background:#fdf5e9}
.loading-book:before{content:'';position:absolute;top:10px;right:50%;width:52px;height:82px;background:#e9dac5;border:1px solid #bca387;border-radius:10px 2px 2px 10px}
@keyframes leafFlip{0%,10%{transform:rotateY(0)}55%,90%{transform:rotateY(-170deg)}100%{transform:rotateY(-180deg)}}
.loading-title{font-size:25px;font-weight:400;letter-spacing:2px}.loading-sub{font-size:13px;color:#9a816c;min-height:24px;transition:opacity .2s}.loading-dots{display:flex;gap:9px}.loading-dots i{width:6px;height:6px;background:#b99a7a;border-radius:50%;animation:dotPulse 1s infinite}.loading-dots i:nth-child(2){animation-delay:.15s}.loading-dots i:nth-child(3){animation-delay:.3s}@keyframes dotPulse{50%{opacity:.2;transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.page-leaf,.paper.page-reveal>*,.paper .question-enter,.loading-book .leaf,.loading-dots i{animation:none!important}.opt{transition:none!important}}

/* V5: a stable book page, with a single quiet paper turn and no content flashing. */
.paper{min-height:680px;box-sizing:border-box;overflow:hidden;overflow-anchor:none}
.paper.stable-turning{pointer-events:none}
.wrap{position:relative}.stable-turn-overlay{position:absolute;inset:0;z-index:50;pointer-events:none;overflow:hidden;perspective:1400px}
.stable-turn-paper{position:absolute;inset:0;background:linear-gradient(90deg,#e8dfd2 0%,#fffdf8 5%,#fffdf8 94%,#e9dece 100%);border-left:1px solid #c9bba7;box-shadow:inset 14px 0 25px -22px #7c644c;transform-origin:left center;animation:stablePaperTurn .7s cubic-bezier(.45,.1,.25,1) forwards;backface-visibility:hidden}
@keyframes stablePaperTurn{0%{transform:rotateY(0deg)}48%{transform:rotateY(-82deg)}100%{transform:rotateY(-179deg)}}
@media(max-width:520px){.paper{min-height:700px}.paper .q{margin-top:25px}.paper .opt{padding:14px}}
@media(prefers-reduced-motion:reduce){.stable-turn-paper{animation:none}}

/* Single-leaf reading mode. Restore the wider paper proportions of the original design on desktop. */
.paper.book-active{padding:8px 0;min-height:0;overflow:visible;background:transparent;border:0;box-shadow:none;width:min(560px,calc(100vw - 42px));margin-inline:auto}
#flipbook{margin:0 auto;width:100%;position:relative;overflow:visible} .paper.book-active .stf__parent{margin:0 auto!important} .paper.book-active .stf__wrapper{margin:0 auto!important}
.flip-page{background:#fffdf8;box-sizing:border-box;padding:36px 25px;border:1px solid #e1d6c8;overflow:hidden;box-shadow:inset 8px 0 16px #9b806414;height:100%}
.flip-page .q{font-size:clamp(19px,4.7vw,25px);margin:26px 0 22px}
.flip-page .opt{font-size:14px;padding:13px 12px;margin:10px 0}
.flip-page .actions{margin-top:18px}
@media(max-width:440px){.flip-page{padding:25px 18px}.paper.book-active{padding:8px 0}}

/* V12: use one shared paper width for intro, preference, questions and results. */
:root{--leaf-width:560px}
.wrap{max-width:660px;box-sizing:border-box}
.paper{box-sizing:border-box;width:min(var(--leaf-width),100%);margin-inline:auto}
.paper.book-active{box-sizing:border-box;width:min(var(--leaf-width),100%);padding:0;margin-inline:auto}
#flipbook{max-width:100%}
@media(max-width:600px){.wrap{padding-inline:16px}.paper,.paper.book-active{width:100%}}
#pwd{box-sizing:border-box;width:min(100%,300px);min-width:0;max-width:100%;padding:14px 12px}#pwd::placeholder{color:#b7aca1;opacity:1;font-size:16px;letter-spacing:1px;font-weight:400}*{box-sizing:border-box}button,input{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #967456;outline-offset:4px}button:disabled{cursor:wait}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.tiny{font-size:12px!important;line-height:1.8!important}.center{text-align:center}.facts{display:grid;grid-template-columns:1fr 1fr;gap:15px;text-align:center;color:#967d66;font-size:13px}.resume{margin-top:28px;padding:18px;background:#f6f0e7;text-align:center;font-size:14px;color:#756351}.result h1{font-size:clamp(26px,7vw,38px);overflow-wrap:anywhere}.result-subtitle{font-size:18px;font-weight:400;line-height:1.8}.work{color:#9b7658}.scale-labels{display:flex;justify-content:space-between;font-size:11px;color:#938575}.bar{margin:20px 0}.section p{overflow-wrap:anywhere}.spoiler-toggle{font-size:13px;padding:10px 16px;margin:8px 0 12px}#savedPreview{width:100%;margin-top:22px;border:1px solid #d8c7b5}#downloadLink{color:#856040;display:block;text-align:center;margin:16px 0}#downloadLink[hidden],#savedPreview[hidden],[hidden]{display:none!important}.flip-page{height:auto;padding:32px 25px;box-shadow:inset 8px 0 16px #9b806414}.flip-page .q{font-size:23px;line-height:1.6;margin:23px 0 19px}.flip-page .opt{font-size:15px;line-height:1.65;margin:10px 0;padding:14px 12px}.flip-page .opt.selected{transform:none}.letter{color:#ad8769;margin-right:10px}.flip-page .actions{margin-top:20px}.flip-page .btn{padding:12px 10px;font-size:13px}.paper.book-active{min-height:0!important}.paper:not(.book-active){min-height:550px}.top{letter-spacing:1px;font-size:11px;gap:10px}#pwd{font-size:18px;letter-spacing:1px;color:#625b55}.paper .section:last-of-type{padding-bottom:0}@media(max-width:440px){.flip-page{padding:24px 18px}.flip-page .q{font-size:21px}.paper:not(.book-active){padding:28px 22px}.hero{padding-top:42px}.top{font-size:10px}.hero h1{font-size:25px}}

.save-modal{width:min(94vw,680px);max-height:90dvh;padding:0;border:0;border-radius:12px;background:#fffaf2;overflow:auto;overscroll-behavior:contain}.save-modal::backdrop{background:#000a}.save-modal-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fffaf2;z-index:1}.save-modal-head button{padding:8px 14px;border:1px solid #cbb69e;border-radius:6px;background:white;color:#67523e}.save-modal #savedPreview{display:block;width:100%;max-width:100%;margin:0;border:0;border-radius:0}body:has(.save-modal[open]){overflow:hidden}

/* Keep answer taps still while the paper animation owns movement. */
.flip-page .opt:active{transform:none}