/* Four quiet questions, followed by a portrait-led scroll story. */
@media screen {
 body[data-view="preview"] .site-header {display:none}
 body[data-view="preview"] .result-view {padding:0 0 88px;background:#08191b}
 .answer-screen {position:relative;min-height:100svh;padding:110px 28px 40px;background:radial-gradient(ellipse at 70% 10%,#153537 0,transparent 60%),#09191c;color:#f4f2e8}
 .answer-back,.story-edit {position:absolute;top:18px;left:18px;border:0;background:transparent;color:#d7ece5;font-size:24px;cursor:pointer;width:44px;height:44px;z-index:5}
 .answer-progress {position:absolute;top:39px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
 .answer-progress i {width:4px;height:4px;background:#47625f;border-radius:50%}
 .answer-progress .current {width:17px;border-radius:3px;background:#a4e8df}
 .answer-content {padding-top:clamp(80px,16svh,165px)}
 .answer-content h1 {margin:0 0 43px;white-space:pre-line;font:400 clamp(27px,7vw,34px)/1.6 var(--serif);letter-spacing:-.05em;color:#f2f2e7;outline:none}
 .answer-content form {margin:0;max-width:100%}
 #answer-name {width:100%;border:0;border-bottom:1px solid #577871;border-radius:0;padding:13px 0 18px;background:transparent;color:#e7f7ef;font:400 23px/1.5 var(--sans);outline:none;box-shadow:none}
 #answer-name:focus {border-bottom-color:#b7ecdb}
 #answer-name::placeholder {color:#71928c}
 .calendar-choices {display:flex;gap:9px;margin-bottom:26px}
 .answer-choice {border:1px solid #385752;background:transparent;border-radius:8px;color:#c9dfd6;min-height:50px;padding:10px 18px;font:400 16px/1.5 var(--sans);cursor:pointer}
 .answer-choice[aria-pressed="true"] {background:#b3e9d8;color:#102f2b;border-color:#b3e9d8}
 .calendar-choices .answer-choice {flex:1;padding-inline:6px}
 .date-selects {display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px}
 .date-selects select {width:100%;min-width:0;height:59px;background:#15302f;color:#eff4e9;border:0;border-bottom:1px solid #618b7f;border-radius:5px;padding:0 8px;font:400 17px var(--sans);color-scheme:dark}
 .leap-option {display:flex;align-items:center;gap:8px;margin-top:18px;color:#b1cac1;font-size:14px}
 .leap-option[hidden],.calendar-assumption[hidden],.answer-error[hidden] {display:none}
 .leap-option input {width:18px;height:18px;accent-color:#b3e9d8}
 .calendar-assumption {font-size:12px;color:#b4cfc3;margin:16px 0 0}
 .answer-error {margin:16px 0 0;font-size:13px;line-height:1.8;color:#efb8a9}
 .time-wheels {position:relative;display:flex;align-items:center;justify-content:center;gap:15px;margin-top:-12px;margin-bottom:28px}
 .time-column {position:relative;width:110px;padding-top:28px;min-width:0}
 .time-unit-label {display:block;position:absolute;top:0;width:100%;text-align:center;color:#9fbbb0;font-size:12px}
 .time-wheel {height:240px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;padding-block:96px;box-sizing:border-box;outline:none;position:relative;mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);touch-action:pan-y}
 .time-wheel::-webkit-scrollbar {display:none}
 .wheel-option {height:48px;min-height:48px;display:grid;place-items:center;scroll-snap-align:center;color:#64857d;font:400 27px/1 var(--sans);cursor:pointer}
 .wheel-option[aria-selected="true"] {color:#dbf7e7;font-size:31px}
 .wheel-selection {position:absolute;left:5%;right:5%;height:48px;top:124px;background:#21433a85;border-block:1px solid #648c7955;border-radius:6px;pointer-events:none}
 .wheel-colon {padding-top:28px;color:#a5c4b6;font-size:22px}
 .time-wheel:focus-visible {outline:1px solid #b3e9d8;border-radius:6px}
 .answer-screen[data-step="3"] .answer-content {padding-top:clamp(25px,7svh,70px)}
 .answer-screen[data-step="3"] form > .answer-choice {display:block;min-width:130px;margin:auto}
 .gender-choices {display:flex;gap:12px;flex-wrap:wrap}
 .gender-choices .answer-choice {flex:1 1 40%;min-height:62px}
 .gender-choices .answer-choice:last-child {flex-basis:100%;border:0;font-size:13px;color:#98b7ab;background:transparent}
 .answer-screen :is(button,select):focus-visible {outline:2px solid #b3e9d8;outline-offset:4px}
 .webtoon-opening,.story-sales {color:#d5e4d8;overflow:hidden;font-family:var(--sans)}
 .webtoon-opening {position:relative}
 .story-panel {position:relative;margin:0;overflow:hidden}
 .story-panel img {display:block;width:100%;object-fit:cover}
 .intro-panel {height:650px;max-height:90svh;min-height:500px}
 .intro-panel img {height:100%;object-position:center 16%}
 .intro-panel:after {content:'';position:absolute;inset:0;background:linear-gradient(#08191b00 50%,#08191b)}
 .speech-bubble {overflow-wrap:anywhere;position:absolute;z-index:2;background:#f6f3e8;color:#213a31;border-radius:48% 48% 46% 44%;padding:25px 32px;text-align:center;font:400 20px/1.7 var(--serif);letter-spacing:-.04em;box-shadow:0 6px 25px #0002}
 .speech-bubble:after {content:'';position:absolute;left:58%;top:-13px;border:14px solid transparent;border-bottom-color:#f6f3e8;border-top:0;transform:rotate(18deg)}
 .intro-panel .speech-bubble {bottom:30px;left:50%;transform:translateX(-50%);width:79%;max-width:320px}
 .speech-bubble h1 {font:inherit;margin:0;color:inherit}
 .speech-bubble strong {font-weight:500}
 .story-pause {padding:38px 24px 45px;text-align:center;font:400 19px/1.9 var(--serif)}
 .story-pause p {margin:0 0 15px}
 .story-pause p:first-child {color:#aad8c1;font-size:24px}
 .reaction-panel {height:235px;margin:0 18px;border:1px solid #75917a55}
 .reaction-panel img {height:100%;object-position:50% 27%;transform:scale(1.45);transform-origin:50% 27%}
 .first-words {text-align:center;padding:48px 28px 30px}
 .first-word-seal {display:inline-block;color:#b6d8bf;font:400 13px var(--serif);padding:7px 12px;border-block:1px solid #7b967c66;margin-bottom:23px}
 .first-words h2 {font:400 23px/1.8 var(--serif);letter-spacing:-.045em;color:#f0f3df;margin:0 0 27px;word-break:keep-all}
 .first-words p {font:400 18px/1.95 var(--serif);color:#b8d1bd;margin:0;word-break:keep-all}
 .story-chart {margin:0 26px 35px;border-block:1px solid #375748}
 .story-chart summary {display:flex;justify-content:space-between;cursor:pointer;padding:18px 0;color:#acc5b2;font-size:12px;list-style:none}
 .story-chart summary:after {content:none}
 .story-chart > p,.story-assumption {font-size:11px;color:#b0c8b9;line-height:1.8}
 .story-assumption {padding:0 26px}
 .story-chart .chart-box {padding:20px 10px;margin:0 0 20px}
 .story-hook {padding-top:44px;text-align:center;background:#08191b}
 .story-hook h2,.story-offer h2,.story-contents > h2 {font:400 clamp(24px,6.5vw,30px)/1.7 var(--serif);letter-spacing:-.05em;color:#f0f3e0;margin:0 20px 30px;word-break:keep-all}
 .story-hook h2 em {color:#afd9b9;font-style:normal}
 .story-whisper {font:400 15px/1.7 var(--serif);color:#b7c8b5;margin:0 0 24px}
 .story-landscape {display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
 .hook-copy {position:relative;margin-top:-25px;padding:0 24px 50px;background:linear-gradient(transparent,#08191b 40px)}
 .hook-copy > p {position:relative;padding-top:30px;margin:0 0 26px;color:#d5e5ce;font:400 18px/1.9 var(--serif);word-break:keep-all}
 .hook-copy strong {font-weight:400}
 .story-chapter-kicker {font:400 12px/1.8 var(--sans);letter-spacing:.17em;color:#a5ceb4;margin:0 0 16px}
 .sealed-preview {border:1px solid #78947866;padding:24px 22px 15px;background:#142c26;box-shadow:inset 0 0 0 5px #091f1b;position:relative}
 .sealed-lines > div {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:43px}
 .sealed-lines span {font-size:12px;color:#b3caba;text-align:left;white-space:nowrap}
 .mosaic {display:block;height:18px;flex:0 1 46%;min-width:55px;background:repeating-linear-gradient(90deg,#a1b69d80 0 7px,#8ca98a50 7px 15px,#c4cbb75c 15px 20px);filter:blur(4px);opacity:.6}
 .sealed-lines > div:nth-child(2) .mosaic {flex-basis:38%}
 .seal-open {margin:16px 0 0;padding:13px;width:100%;border:0;border-top:1px solid #75907850;color:#d0e9cf;background:transparent;font:400 13px/1.5 var(--sans);cursor:pointer}
 .seal-open span {margin-right:7px}
 .story-offer {margin:12px 20px 45px;background:#e8eadd;color:#1e3a30;scroll-margin-top:22px}
 .story-offer > img {display:block;width:100%;height:auto}
 .story-offer-copy {padding:28px 23px 26px}
 .story-offer-copy > p {margin:0 0 14px;text-align:center;font-size:11px;letter-spacing:.12em;color:#506456}
 .story-offer h2 {color:#213e31;font-size:26px;text-align:center;margin:0 0 24px}
 .story-price {display:flex;align-items:baseline;justify-content:center;gap:12px;margin-bottom:23px}
 .story-price strong {font:500 37px/1.3 var(--sans);letter-spacing:-.05em}
 .story-price span {font-size:10px;color:#526c59}
 .story-buy.button {width:100%;min-height:57px;justify-content:space-between;background:#204e3e;color:#eff7e5;border:0;border-radius:5px;font-size:15px;padding-inline:20px}
 .payment-status {display:block;text-align:center;margin-top:12px;font-size:10px;color:#5c7263}
 .letter-panel {margin:20px 0 0;height:450px}
 .letter-panel img {height:100%;object-position:44% center}
 .letter-panel:after {content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#08191b)}
 .letter-panel .speech-bubble {bottom:25px;right:20px;font-size:17px;padding:22px 30px}
 .story-contents {padding:42px 27px 30px}
 .story-contents > h2 {margin:0 0 35px;font-size:25px}
 .story-toc {padding:26px 0;border-top:1px solid #45634e66}
 .toc-heading {display:flex;gap:15px;margin-bottom:16px}
 .toc-heading > span {font:italic 27px/1.2 var(--serif);color:#a6c5a5}
 .toc-heading small {display:block;color:#85a98d;font-size:10px;margin:0 0 8px}
 .toc-heading h3 {font:400 19px/1.65 var(--serif);margin:0;color:#dce9d0;letter-spacing:-.04em;word-break:keep-all}
 .story-toc ul {padding:0;margin:0;list-style:none}
 .story-toc li {position:relative;padding:7px 0 7px 13px;color:#b3c9b5;font-size:12px;line-height:1.7;word-break:keep-all}
 .story-toc li:before {content:'·';position:absolute;left:0;color:#80a78b}
 .story-scope {font-size:10px;line-height:1.9;color:#799a84;margin:20px 0 0}
 .final-offer {margin-bottom:20px}
 .checkout-book {width:100%;height:auto;display:block;margin-bottom:20px;border-radius:7px}
 .checkout-unavailable {font:400 16px/1.9 var(--serif);text-align:center;margin:25px 0;color:#d1e1d4}
 .purchase-bar {background:#102820f5;border-top:1px solid #71937b66;backdrop-filter:blur(15px)}
 .purchase-bar .button {background:#b4e3c9;color:#13372a}
 .story-sales button:focus-visible,.story-chart summary:focus-visible {outline:2px solid #b5e6d0;outline-offset:4px}
 @media(max-width:350px){.answer-screen{padding-inline:23px}.answer-content h1{font-size:27px}.answer-content{padding-top:65px}.intro-panel{min-height:470px}.speech-bubble{font-size:18px;padding:23px 25px}.story-hook h2{font-size:24px}.story-offer-copy{padding-inline:18px}.story-offer h2{font-size:23px}.story-price strong{font-size:33px}.story-contents{padding-inline:23px}.letter-panel{height:390px}.first-words{padding-inline:23px}.first-words h2{font-size:21px}.time-column{width:95px}}
 @media(max-height:650px){.answer-content{padding-top:35px}.answer-screen[data-step="3"]{padding-top:80px}.answer-screen[data-step="3"] .answer-content{padding-top:12px}.answer-screen[data-step="3"] h1{margin-bottom:28px}}
}

/* V7: match the reference's character → reveal → offer → report → contents sequence. */
@media screen {
 .compact-fate {padding:10px 35px 25px;text-align:center}
 .compact-fate > p {font:400 11px/1.8 var(--sans);color:#94b8a4;margin:0 0 18px;letter-spacing:.08em}
 .fate-stamps {display:grid;grid-template-columns:repeat(4,1fr);gap:9px;max-width:330px;margin:auto}
 .fate-stamp {padding:11px 4px 9px;border:1px solid #607f6260;background:linear-gradient(135deg,#1a342b,#10251f);color:#c9d9bd;position:relative}
 .fate-stamp:before {content:'';position:absolute;inset:4px;border:1px solid #78927325;pointer-events:none}
 .fate-stamp small {display:block;font-size:9px;color:#94af97;margin-bottom:8px}
 .fate-stamp b {display:block;font:400 29px/1.3 var(--serif)}
 .fate-stamp span {display:block;font-size:9px;color:#a7bda2;margin-top:9px}
 .day-stamp {border-color:#afc19a;background:#334934;color:#f1efd4}
 .story-turn {padding-top:15px}
 .scene-dialogue {height:530px;width:100%;margin:0;isolation:isolate}
 .scene-dialogue img {height:100%;width:100%;object-fit:cover;object-position:50% 35%}
 .scene-dialogue:after {content:'';position:absolute;inset:0;background:linear-gradient(#08191b00 45%,#08191b90 80%,#08191b);z-index:1;pointer-events:none}
 .scene-dialogue .speech-bubble {bottom:20px;right:20px;max-width:83%;font-size:20px;line-height:1.75;padding:29px 32px}
 .scene-dialogue .speech-bubble:after {left:32%}
 .tea-dialogue {height:500px}
 .tea-dialogue img {object-position:52% center}
 .tea-dialogue .speech-bubble {left:18px;right:auto}
 .story-turn .story-pause {padding:50px 25px 18px}
 .story-turn .story-pause p:first-child {font-size:20px;line-height:2.7;color:#d6e3cc}
 .story-turn .story-pause p:last-child {font-size:18px;margin-top:29px;color:#a2c2a4}
 .story-hook {padding-top:0}
 .chapter-gate {position:relative;text-align:center;padding:70px 25px 45px}
 .chapter-gate > span {display:block;font:400 65px/1 var(--serif);color:#8bb493;opacity:.65}
 .chapter-gate > p {font:400 11px/1.6 var(--sans);color:#a6bf9d;letter-spacing:.3em;margin:16px 0 28px}
 .chapter-gate:before,.chapter-gate:after {content:'';position:absolute;top:108px;width:45px;height:1px;background:#728b6370}
 .chapter-gate:before {left:calc(50% - 100px)}
 .chapter-gate:after {right:calc(50% - 100px)}
 .chapter-gate h2 {margin:0;font-size:26px}
 .writing-dialogue img {object-position:46% center}
 .writing-dialogue .speech-bubble {right:20px;bottom:25px}
 .wealth-dialogue {height:480px}
 .wealth-dialogue img {object-position:45% 30%}
 .wealth-dialogue .speech-bubble {left:20px;right:auto;bottom:15px}
 .love-dialogue {height:520px}
 .love-dialogue img {object-position:55% center;transform:scale(1.05)}
 .love-dialogue .speech-bubble {bottom:20px;right:18px}
 .letter-dialogue {height:470px}
 .letter-dialogue img {object-position:44% center}
 .letter-dialogue .speech-bubble {left:22px;right:auto;bottom:28px;font-size:18px}
 .story-hook .hook-copy {margin:0;padding:25px 24px 25px;background:none}
 .story-hook .hook-copy > p {padding-top:0;font-size:19px;line-height:2;margin:0 0 30px}
 .fate-window {border:1px solid #7a97706b;background:#10271f;box-shadow:inset 0 0 0 6px #0a1e18;padding:27px 15px 8px;position:relative}
 .fate-window:before,.affinity-card:before {content:'';position:absolute;inset:9px;border:1px solid #91ae722f;pointer-events:none}
 .fate-window > small {display:block;color:#8fa98a;font-size:12px;letter-spacing:.12em}
 .fate-window h3 {font:400 21px/1.8 var(--serif);color:#d7e6c7;letter-spacing:-.04em;margin:13px 0 22px}
 .year-reveal {font:400 14px/1.7 var(--serif);color:#a8c6a7;display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:15px}
 .year-reveal > span {width:70px}
 .year-reveal .mosaic {width:70px;height:25px}
 .fate-window .sealed-preview {border:0;box-shadow:none;background:transparent;padding:4px 9px}
 .wealth-calendar {background:#11291f;border:1px solid #7d956675;padding:28px 18px 10px;box-shadow:inset 0 0 0 5px #0b2019}
 .year-track {position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 28px}
 .year-track:before {content:'';position:absolute;left:10%;right:10%;top:45px;height:1px;background:linear-gradient(90deg,#55765c,#c3d69f,#55765c)}
 .year-track > div {position:relative;display:flex;align-items:center;flex-direction:column;gap:15px}
 .year-track span {color:#c2d7b6;font-size:11px;font-variant-numeric:tabular-nums}
 .year-track i {display:block;width:7px;height:7px;background:#c2d8aa;border-radius:50%;box-shadow:0 0 12px #b6dd7480}
 .year-track .mosaic {min-width:0;width:100%;height:20px;flex:none}
 .wealth-pair {display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .wealth-pair > div {padding:16px 10px;background:#243b2b;border-top:1px solid #819b6d}
 .wealth-pair span {font-size:11px;color:#c0d4ae;display:block;margin-bottom:13px}
 .wealth-pair .mosaic {min-width:0;height:28px;width:80%;margin:auto}
 .affinity-card {position:relative;background:radial-gradient(ellipse at 50% 10%,#34523a,#122b21 65%);padding:28px 18px 6px;border:1px solid #7c9a6b75}
 .affinity-portrait {position:relative;width:140px;height:180px;margin:auto;border:1px solid #718d6670;border-radius:80px 80px 3px 3px;overflow:hidden;background:linear-gradient(#133128,#071e19)}
 .affinity-portrait span {position:absolute;left:45px;top:25px;width:52px;height:66px;border-radius:50%;background:#a5bd9960;filter:blur(13px)}
 .affinity-portrait i {position:absolute;left:15px;top:91px;width:110px;height:120px;border-radius:55% 55% 0 0;background:#a5bd9955;filter:blur(15px)}
 .affinity-portrait b {position:absolute;left:0;right:0;bottom:18px;color:#d8e2c5bb;font:400 30px var(--serif)}
 .affinity-card h3 {font:400 18px/1.8 var(--serif);color:#d5e3c6;margin:22px 0 17px}
 .affinity-card .sealed-preview {border:0;background:transparent;box-shadow:none;padding:0 8px 10px}
 .affinity-card .sealed-lines>div {min-height:44px;border-bottom:1px solid #63845b30}
 .offer-transition {padding-top:45px}
 .story-offer {margin:20px 24px 55px;position:relative;background:linear-gradient(140deg,#ebecd9,#dce5cd);border:1px solid #b8c3a3;box-shadow:0 12px 35px #0003}
 .story-offer:before {content:'';position:absolute;inset:6px;border:1px solid #5d795a40;pointer-events:none}
 .story-offer-copy {padding:33px 24px 29px;position:relative}
 .story-offer h2 {font-size:25px}
 .story-offer-copy > .offer-includes {letter-spacing:0;font-size:10px;line-height:1.9;margin:-8px 0 22px}
 .story-price {display:block;text-align:center;margin-bottom:25px}
 .story-price strong {display:block;font-size:42px;margin-bottom:9px}
 .story-price span {font-size:11px}
 .story-buy.button {white-space:normal;text-align:left;line-height:1.6;overflow-wrap:anywhere;gap:12px;padding:15px 18px}
 .story-buy span {flex-shrink:0}
 .report-evidence {text-align:center;padding:16px 20px 40px}
 .report-evidence h2,.book-reveal h2 {font:400 27px/1.75 var(--serif);letter-spacing:-.04em;color:#e4ebd4;margin:0 0 27px}
 .report-volume {display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:8px;padding:24px 0;border-block:1px solid #6e8d5e55;margin:30px 0 35px}
 .report-volume strong {display:block;font:400 27px/1.5 var(--serif);color:#cfddb6}
 .report-volume span {display:block;font:10px/1.6 var(--sans);color:#8da886}
 .report-samples {display:grid;grid-template-columns:repeat(3,1fr);gap:11px;align-items:start}
 .report-sample-card {border:1px solid #80966a60;padding:0;background:#0e2420;cursor:zoom-in;min-width:0;overflow:hidden;box-shadow:0 7px 16px #0004;border-radius:1px}
 .report-sample-card:nth-child(2),.report-sample-card:nth-child(5) {transform:translateY(13px)}
 .report-sample-card span {display:block;font:9px/1.5 var(--sans);color:#b9cda8;padding:8px 3px}
 .report-sample-card img {width:100%;height:auto;display:block}
 .sample-caption {font-size:10px;color:#8faa8c;margin:32px 0 0}
 .book-reveal {text-align:center;padding:20px 20px 40px}
 .book-reveal > p {font-size:11px;color:#9bb898}
 .book-stage {perspective:1100px;padding:35px 20px 55px;display:grid;place-items:center;min-height:440px;overflow:visible}
 .seoha-book {width:230px;height:330px;position:relative;transform:rotateY(-18deg) rotateZ(-6deg);transform-style:preserve-3d;filter:drop-shadow(14px 22px 17px #0008)}
 .book-face {position:absolute;inset:0;background:#315849;overflow:hidden;border:2px solid #708b65;border-radius:2px;color:#edf0d7;transform:translateZ(17px)}
 .book-face:after {content:'';position:absolute;inset:9px;border:1px solid #bcce9855;pointer-events:none;z-index:4}
 .book-face > img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.9}
 .book-face:before {content:'';position:absolute;inset:0;background:linear-gradient(#0f3328ec,#12372a16 40%,#133b2a10 65%,#0e2b22);z-index:1}
 .book-face > p,.book-face h3,.book-owner,.book-seal {position:absolute;z-index:2;left:0;right:0;margin:0;text-align:center}
 .book-face > p {top:20px;font-size:8px;letter-spacing:.3em;color:#d2e3ba}
 .book-face h3 {top:43px;font:400 30px/1.2 var(--serif);letter-spacing:.04em;color:#f0f3d9}
 .book-face h3 span {display:block;font-size:10px;letter-spacing:.35em;margin-top:10px}
 .book-owner {bottom:32px;font:11px/1.5 var(--serif);padding-inline:20px;overflow-wrap:anywhere}
 .book-seal {left:auto;right:19px;bottom:14px;width:14px;height:16px;border:1px solid #c9dcab88;font:9px/14px var(--serif);color:#d8e9b7}
 .book-spine {position:absolute;left:-26px;top:0;width:28px;height:330px;background:repeating-linear-gradient(90deg,#274f3f 0px,#355c48 3px,#274f3f 5px);transform:rotateY(-90deg);transform-origin:right;writing-mode:vertical-rl;color:#c5d8a5;padding:29px 7px;font:12px var(--serif);letter-spacing:.3em;border:1px solid #69825b}
 .book-pages {position:absolute;inset:5px 0 5px 0;background:repeating-linear-gradient(#dddfcd 0 1px,#9ca98e 1px 2px);transform:translateZ(-12px);border-right:18px solid #d3d9bf}
 .story-contents {padding-top:40px}
 .story-toc {background:linear-gradient(110deg,#18322260,transparent);padding:25px 18px;margin:0 -12px 13px;border:1px solid #6382584d;border-left:2px solid #7f9c69;position:relative}
 .story-toc:after {content:'';position:absolute;right:6px;bottom:6px;width:17px;height:17px;border-right:1px solid #86a27050;border-bottom:1px solid #86a27050}
 .toc-heading h3 {font-size:19px;line-height:1.8}
 .toc-heading > span {font-size:24px}
 .story-toc li {font-size:12px;padding-block:8px;color:#b7cdb1}
 .closing-dialogue {padding:20px 0}
 .last-dialogue {height:520px}
 .last-dialogue img {object-position:center 15%}
 .last-dialogue .speech-bubble {left:20px;right:auto;bottom:20px}
 .final-offer {margin-bottom:20px}
 .sample-modal-label {font-size:11px;color:#9cb8a8;margin:0 0 15px;line-height:1.8}
 .sample-modal-image {width:100%;height:auto;display:block}
 .modal-inner:has(.sample-modal-image) .modal-header {position:sticky;top:0;z-index:3;background:#10252a}
 @media(max-width:350px){.compact-fate{padding-inline:26px}.fate-stamps{gap:7px}.fate-stamp b{font-size:25px}.scene-dialogue{height:455px}.scene-dialogue .speech-bubble{font-size:17px;padding:25px 27px}.chapter-gate{padding-inline:20px}.chapter-gate h2{font-size:23px}.story-hook .hook-copy{padding-inline:20px}.story-offer{margin-inline:20px}.story-offer-copy{padding-inline:21px}.story-offer h2{font-size:23px}.report-volume strong{font-size:23px}.report-volume span{font-size:9px}.seoha-book{width:210px;height:310px}.book-spine{height:310px}.book-stage{min-height:410px;padding-bottom:45px}.report-samples{gap:8px}.toc-heading h3{font-size:18px}}
 @media(prefers-reduced-motion:reduce){.seoha-book{transform:rotateY(-12deg)}}
}
@media screen {
 .book-pages {z-index:0}
 .book-spine {z-index:1}
 .book-face {z-index:2}
}
@media screen {
 .book-stage {perspective:none}
 .seoha-book {transform:rotate(-6deg) skewY(-2deg);transform-style:flat;filter:none;box-shadow:18px 23px 25px #0006}
 .book-face {transform:none}
 .book-pages {transform:translate(9px,5px);border-right:0}
 .book-spine {left:-9px;width:11px;padding:24px 1px;transform:none;font-size:7px;overflow:hidden}
}

/* Keep Seoha present throughout the four questions; controls sit below his face. */
@media screen {
 .answer-screen {display:flex;flex-direction:column;isolation:isolate;overflow:hidden;padding:96px 28px max(48px,env(safe-area-inset-bottom));background:#09191c;}
 .answer-backdrop {position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:blur(2px);transform:scale(1.025);pointer-events:none;}
 .answer-screen::before {content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(5,19,20,.28),rgba(5,19,20,.12) 28%,rgba(5,19,20,.46) 47%,rgba(5,19,20,.9) 73%,#09191c 100%);pointer-events:none;}
 .answer-screen .answer-content,.answer-screen[data-step="3"] .answer-content {padding-top:0;margin-top:auto;position:relative;}
 .answer-content h1 {margin-bottom:28px;text-shadow:0 2px 16px #09191c99;}
 .answer-progress {z-index:2;}
 .answer-progress i {background:#ffffff60;}
 .answer-progress .current {background:#b3e9d8;}
 .answer-back {text-shadow:0 1px 5px #000;}
 #answer-name::placeholder {color:#b0c5bd;}
 .answer-choice {background:#102a29a8;border-color:#72958b80;color:#e4eee5;}
 .answer-screen[data-step="3"]::before {background:linear-gradient(180deg,#09191c30,#09191c20 20%,#09191cb3 39%,#09191cf2 60%,#09191c);}
 .answer-screen[data-step="3"] {padding-bottom:30px;}
 .answer-screen[data-step="3"] .answer-content h1 {margin-bottom:22px;}
 @media(max-height:650px) {
  .answer-screen {padding-top:110px;padding-bottom:28px;}
  .answer-screen[data-step="3"] {min-height:740px;padding-top:260px;}
  .answer-screen .answer-content,.answer-screen[data-step="3"] .answer-content {padding-top:0;}
  .answer-content h1 {font-size:26px;line-height:1.45;margin-bottom:22px;}
 }
}