:root { --lavender:#e4b2f4; --sky:#b9e9ff; --lemon:#fbf59d; --mint:#b8f9aa; }
body { background:var(--paper); }
[hidden] { display:none !important; }
.booktype { min-height:100vh; color:var(--ink); }
.back-link { position:absolute; z-index:2; top:28px; left:42px; color:var(--ink); font-size:14px; font-weight:700; text-decoration:none; }
.intro-screen { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(440px,1fr); align-items:stretch; max-width:1440px; margin:auto; padding:80px 7% 56px; gap:8%; }
.intro-image { min-height:570px; overflow:hidden; border-radius:14px; background:var(--lavender); box-shadow:0 8px 24px #0b271822; }
.intro-image img { width:100%; height:100%; object-fit:cover; object-position:48% center; mix-blend-mode:multiply; }
.intro-copy { align-self:center; max-width:480px; }
.intro-copy h1,.quiz-body h1,.result-hero h1 { margin:0; font-size:clamp(46px,5.5vw,76px); line-height:1.02; letter-spacing:-.05em; }
.intro-copy p:not(.eyebrow) { max-width:390px; font-size:18px; line-height:1.45; }
.intro-copy .primary-action { margin-top:24px; gap:12px; background:var(--ink); color:var(--paper); }
.quiz-screen,.result-screen { min-height:100vh; }
.quiz-bar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; background:#f8f7f2; }
.quiz-bar strong { font-size:16px; }
.circle-nav { width:40px; height:40px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); font-size:26px; line-height:1; cursor:pointer; }
.quiz-body { position:relative; display:flex; min-height:calc(100vh - 144px); flex-direction:column; align-items:center; justify-content:center; padding:42px 86px 86px; }
.quiz-body.is-entering { animation:question-enter .24s ease both; }
.quiz-body.is-advancing .answer,.quiz-body.is-advancing .visual-choice,.quiz-body.is-advancing .next-arrow { pointer-events:none; }
.quiz-body.is-leaving { animation:question-leave .18s ease both; }
.quiz-count { color:#55635a; font-size:13px; font-weight:700; }
.quiz-body h1 { max-width:950px; margin:0 0 56px; text-align:center; font-size:clamp(34px,4.1vw,56px); }
.answer-set { display:flex; max-width:710px; flex-wrap:wrap; justify-content:center; gap:14px; }
.answer { min-height:46px; padding:10px 22px; border:1px solid var(--ink); border-radius:999px; background:var(--paper); box-shadow:2px 2px 0 var(--ink); color:var(--ink); font-weight:650; cursor:pointer; transition:transform .15s,background .15s,color .15s; }
.answer:hover,.answer:focus-visible,.answer.is-selected { background:var(--ink); color:var(--paper); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); outline:0; }
.choice-grid { grid-template-columns:repeat(4,minmax(120px,150px)); width:min(100%,654px); gap:18px; }
.visual-choice { overflow:hidden; padding:0; border:0; border-radius:12px; background:var(--paper); color:var(--ink); box-shadow:0 5px 12px #0b271824; cursor:pointer; }
.visual-choice span { display:grid; height:130px; place-items:center; font-size:70px; }
.visual-choice strong { display:block; padding:12px 8px 14px; font-size:15px; }
.visual-choice.is-selected { outline:3px solid var(--ink); transform:translateY(-5px); }
.next-arrow { position:absolute; right:28px; top:50%; width:44px; height:44px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); font-size:28px; cursor:pointer; opacity:.35; }
.next-arrow.is-ready { opacity:1; }
.progress-area { position:fixed; z-index:3; bottom:0; left:0; right:0; padding:15px 5.2% 18px; background:#f8f7f2; }
.progress-meta { display:flex; justify-content:space-between; margin-bottom:9px; font-size:12px; font-weight:700; }
.progress-track { height:4px; overflow:hidden; border-radius:3px; background:#dfe2d9; }.progress-track span { display:block; height:100%; background:var(--ink); transition:width .3s ease; }
@keyframes question-enter { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes question-leave { to { opacity:0; transform:translateX(-18px); } }
.result-hero { padding:76px 8% 62px; background:#f7f6f0; text-align:center; }.result-hero > h1 { margin:0 0 38px; }
.persona-card { display:grid; grid-template-columns:180px minmax(0,480px); align-items:center; max-width:780px; margin:auto; gap:38px; padding:28px 34px; border-radius:12px; background:var(--paper); text-align:left; box-shadow:0 10px 28px #0b271814; }.persona-mark { display:grid; width:170px; height:170px; place-items:center; border-radius:12px; font-size:84px; }.persona-card h2 { margin:0 0 12px; font-size:36px; line-height:1.04; letter-spacing:-.035em; }.persona-card p { margin:9px 0; line-height:1.45; }
.type-check { position:absolute; z-index:2; right:max(4%,42px); top:470px; width:min(425px,34vw); padding:30px 36px 28px; border-radius:0 0 18px 18px; background:var(--paper); box-shadow:0 6px 14px #0b271830; text-align:center; }.type-check button { position:absolute; top:14px; right:14px; width:26px; height:26px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); font-size:18px; cursor:pointer; }.type-check h2 { margin:8px 0 12px; font-size:25px; }.type-check p { margin:0 0 20px; font-size:14px; line-height:1.35; }.type-check.is-dismissed { display:none; }
.recommendation-section,.other-types { max-width:1440px; margin:auto; padding:80px 42px; }.section-heading { align-items:end; }.type-books { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:32px; gap:22px; }.type-books .book-card { display:block; position:relative; min-width:0; padding:12px; border-radius:10px; color:var(--ink); background:var(--white); text-decoration:none; box-shadow:0 1px 0 #0b27180f; }.type-books .book-card:hover { transform:translateY(-3px); box-shadow:0 8px 18px #0b27181c; }.type-books .cover-wrap { height:280px; display:grid; place-items:center; overflow:hidden; border-radius:6px; background:#f8f8f6; }.type-books .cover-wrap img { width:100%; height:100%; object-fit:contain; }.type-books .cover-wrap::after { position:absolute; top:18px; right:18px; content:'♡'; display:grid; width:28px; height:28px; place-items:center; border:1px solid var(--ink); border-radius:50%; background:var(--paper); }.type-books .book-info { padding:12px 0 3px; }.type-books .book-info strong,.type-books .book-info span { display:block; }.type-books .book-info strong { font-size:16px; line-height:1.2; }.type-books .book-info span { margin-top:4px; color:#667168; font-size:13px; }.type-books .book-info em { display:block; margin-top:8px; color:#397452; font-size:12px; font-style:normal; font-weight:600; line-height:1.25; }.second-shelf { padding-top:6px; }.result-restart { display:flex; margin:44px auto 0; background:var(--ink); color:var(--paper); }
.other-types { padding-top:22px; background:var(--soft-green); border-radius:18px 18px 0 0; }.other-types h2 { margin-top:0; }.type-list { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.type-chip { display:flex; align-items:center; gap:12px; min-height:70px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); text-align:left; cursor:pointer; }.type-chip span { display:grid; flex:0 0 44px; width:44px; height:44px; place-items:center; border-radius:9px; font-size:27px; }.type-chip strong,.type-chip small { display:block; }.type-chip small { margin-top:2px; color:#536158; }
@media (max-width:760px) { .back-link { position:static; display:block; padding:20px 20px 0; }.intro-screen { min-height:auto; grid-template-columns:1fr; padding:24px 20px 48px; gap:34px; }.intro-image { min-height:310px; }.intro-copy h1 { font-size:50px; }.intro-copy p:not(.eyebrow) { font-size:16px; }.quiz-bar { height:56px; padding:0 14px; }.quiz-body { min-height:calc(100vh - 132px); padding:28px 18px 96px; justify-content:flex-start; }.quiz-body h1 { margin:28px 0 42px; font-size:34px; }.answer-set { gap:12px; }.answer { max-width:100%; font-size:14px; }.choice-grid { grid-template-columns:repeat(2,minmax(120px,1fr)); width:min(100%,360px); }.visual-choice span { height:110px; }.next-arrow { position:static; margin-top:36px; }.result-hero { padding:48px 20px 42px; }.result-hero > h1 { font-size:52px; }.persona-card { grid-template-columns:1fr; gap:20px; padding:25px; text-align:center; }.persona-mark { margin:auto; }.persona-card h2 { font-size:30px; }.type-check { position:relative; top:auto; right:auto; width:auto; margin:0 20px; padding:28px 24px; }.recommendation-section,.other-types { padding:55px 20px; }.section-heading { display:block; }.section-heading .pill-button { margin-top:14px; }.type-books { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }.type-books .book-card { padding:8px; }.type-books .cover-wrap { height:210px; }.type-books .cover-wrap img { max-width:120px; max-height:180px; }.type-books .book-info strong { font-size:14px; }.type-list { grid-template-columns:1fr; }.progress-area { padding:12px 20px 15px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; animation:none!important; } }