:root {
  --paper:#fff9f2; --surface:#fff; --ink:#292724; --muted:#706c66;
  --border:#34312e; --yellow:#ffe69a; --sage:#d9e9d2; --peach:#ffd8c8;
  --line:#e3dcd2; --radius:12px; --button-radius:10px;
  --shadow:2px 2px 0 var(--border); --card-shadow:3px 3px 0 var(--border);
  --font:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.7;min-height:100dvh}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
button:disabled{cursor:default}
main{width:100%;max-width:784px;margin:0 auto;padding:56px 32px 64px}
.screen{animation:arrive 180ms ease-out}
.eyebrow{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:1.5px}
h1,h2,p{overflow-wrap:break-word}
.intro{max-width:640px;margin:auto;padding-top:16px}
.cover-heading{display:grid;grid-template-columns:minmax(0,1fr) 44%;gap:16px;align-items:center;margin:24px 0}
.intro h1{font-size:clamp(36px,6vw,56px);font-weight:700;line-height:1.35;margin:0;letter-spacing:-1px}
.intro h1 em{font-style:normal;white-space:nowrap;background:linear-gradient(transparent 67%,var(--yellow) 67%);padding-bottom:2px}
.hero{display:block;width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.sub{font-size:16px;line-height:1.9;color:var(--muted);margin:24px 0 32px}
.facts{display:flex;justify-content:space-between;gap:16px;padding:20px 0;margin:0 0 32px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:24px;min-height:48px;padding:12px 20px;border:2px solid var(--border);border-radius:var(--button-radius);background:var(--yellow);color:var(--ink);font-size:14px;font-weight:600;box-shadow:var(--shadow);transition:transform 120ms ease-out,box-shadow 120ms ease-out,background 120ms ease-out;line-height:1.5}
.intro>.primary{width:min(100%,336px);margin:auto;justify-content:space-between}
.text-btn,.back{border:0;background:transparent;color:var(--muted);font-size:12px;min-height:44px;padding:8px 0;text-underline-offset:5px}
.intro>.text-btn{display:block;margin:8px auto 0}
.hint{font-size:12px;line-height:1.8;color:var(--muted);margin:0 0 24px}
.intro>.hint{margin:24px 0 0;text-align:center}
.progress-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);gap:16px}
.progress-meta strong{font-size:18px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.progress{height:6px;background:#e9e2d8;border-radius:3px;overflow:hidden;margin:12px 0 32px}
.progress i{display:block;height:100%;background:var(--ink);transition:width 180ms ease-out}
.chapter{font-size:12px;color:var(--muted);letter-spacing:1px}
.question-art{display:block;width:100%;height:176px;object-fit:contain;mix-blend-mode:multiply;margin:8px auto 16px}
.question h1{font-size:24px;font-weight:600;line-height:1.6;margin:0 0 12px;outline:none}
.options{display:grid;gap:16px}
.option{display:flex;align-items:center;gap:16px;min-height:64px;padding:16px 20px;border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);text-align:left;font-size:15px;line-height:1.7;transition:background 160ms ease-out,transform 120ms ease-out,box-shadow 120ms ease-out}
.option .letter{flex:0 0 28px;height:28px;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--muted);background:var(--paper);border-radius:6px}
.option.selected{background:var(--sage);transform:translate(2px,2px);box-shadow:none}
.option.selected .letter{background:var(--ink);color:var(--surface)}
.question-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px}
.question-nav span{font-size:11px;color:var(--muted)}
.back:disabled{opacity:.4}
.result-note{font-size:11px;color:var(--muted);font-weight:400;margin:0 0 40px}
.result-identity{display:grid;grid-template-columns:minmax(0,1fr) 144px;gap:16px;align-items:center;margin:16px 0 24px}
.result h1{font-size:36px;font-weight:700;line-height:1.4;margin:0 0 8px}
.result-art{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.nickname{font-size:14px;color:var(--muted)}
.quote{font-size:23px;font-weight:600;line-height:1.8;padding:24px 28px;margin:0 0 32px;background:var(--yellow);border-radius:var(--radius);text-wrap:pretty}
.score-box{background:var(--sage);border:2px solid var(--border);border-radius:16px;padding:24px 28px;margin:0 0 24px;box-shadow:var(--card-shadow)}
.score-heading{display:flex;gap:12px;align-items:baseline;font-size:13px}
.score-heading strong{font-size:72px;font-weight:600;line-height:1.2;letter-spacing:-3px;font-variant-numeric:tabular-nums}
.score-heading small{color:var(--muted);font-size:12px}
.bar-row{display:grid;grid-template-columns:64px minmax(0,1fr) 32px;gap:16px;align-items:center;font-size:12px;margin-top:20px}
.bar-row .track{height:6px;background:#bdcfb6;border-radius:3px;overflow:hidden}
.bar-row i{display:block;height:100%;background:var(--ink);border-radius:3px}
.bar-row>span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.flexible{font-size:12px;color:var(--muted);line-height:1.9;margin:24px 0}
.report{padding:24px 0}
.report+.report{border-top:1px solid var(--line)}
.report h2{font-size:18px;font-weight:600;margin:0 0 12px}
.report p{font-size:15px;color:var(--muted);line-height:2;white-space:pre-line;margin:0}
.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:32px 0 8px}
.actions .primary{width:100%;gap:0}
.revealing{min-height:65dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:14px;color:var(--muted)}
.revealing .dots{font-size:28px;letter-spacing:12px;color:var(--ink);animation:pulse 650ms ease-out infinite alternate}
#toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);background:var(--ink);color:var(--surface);border-radius:10px;padding:12px 20px;font-size:12px;opacity:0;pointer-events:none;transition:opacity 160ms ease-out;text-align:center;z-index:5}
#toast.show{opacity:1}
@media(hover:hover){.primary:hover:not(:disabled),.secondary:hover:not(:disabled),.option:hover:not(:disabled){transform:translate(1px,1px);box-shadow:1px 1px 0 var(--border)}.option:hover:not(:disabled){background:#fff4d8}.text-btn:hover,.back:hover:not(:disabled){color:var(--ink);text-decoration:underline}}
.primary:active:not(:disabled),.secondary:active:not(:disabled),.option:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}
@keyframes arrive{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes pulse{to{opacity:.35}}
@media(max-width:600px){main{padding:32px 20px 48px}.intro{padding-top:8px}.cover-heading{gap:8px;grid-template-columns:minmax(0,1fr) 42%;margin:24px 0}.intro h1{font-size:clamp(30px,8.2vw,46px);letter-spacing:-.8px}.eyebrow{font-size:11px;letter-spacing:1px}.sub{font-size:14px;margin:16px 0 24px}.facts{font-size:11px;gap:8px;margin-bottom:24px;padding:16px 0}.primary{font-size:14px}.question h1{font-size:20px}.question-art{height:140px;margin-bottom:16px}.progress{margin-bottom:24px}.option{padding:14px;gap:12px;font-size:14px;min-height:60px}.options{gap:12px}.result-note{margin-bottom:32px}.result-identity{grid-template-columns:minmax(0,1fr) 96px;gap:8px}.result h1{font-size:28px}.nickname{font-size:12px}.quote{font-size:20px;padding:20px;margin-bottom:24px}.score-box{padding:20px}.score-heading strong{font-size:64px}.bar-row{gap:12px}.report{padding:24px 0}.report h2{font-size:16px}.report p{font-size:14px}.actions{gap:12px}.actions .primary{padding:12px 8px;font-size:13px}}
@media(max-width:350px){main{padding-left:16px;padding-right:16px}.intro h1{font-size:29px}.facts{font-size:10px}.result-identity{grid-template-columns:minmax(0,1fr) 72px}.result h1{font-size:25px}.option{padding:12px;gap:10px}.question-nav span{font-size:10px}}
@media(max-height:720px) and (max-width:600px){main{padding-top:24px}.question-art{height:104px}.progress{margin-bottom:16px}.question .hint{margin-bottom:16px}.option{padding:12px;min-height:56px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Result storybook: scoped so the quiz and login remain unchanged. */
.storybook{--book-blue:#dceaf4;--book-peach:#ffd8c8}
.storybook .book-hero{padding:0 0 8px}.storybook .result-note{margin-bottom:32px}.storybook .result-identity{grid-template-columns:minmax(0,1fr) 180px;margin-bottom:20px}.storybook .result-art{aspect-ratio:4/5;mix-blend-mode:normal}.identity-hook{font-size:19px;line-height:1.85;font-weight:500;margin:0 0 24px}.storybook blockquote{margin-left:0;margin-right:0}.storybook .quote{font-size:21px;margin-bottom:24px}.dimension-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.dimension{padding:20px 16px;background:var(--sage);border-radius:12px;min-width:0}.dimension>span{font-size:12px}.dimension>p{margin:8px 0;white-space:nowrap}.dimension strong{font-size:38px;line-height:1.3;font-weight:600;font-variant-numeric:tabular-nums}.dimension small{font-size:10px;margin-left:4px;color:var(--muted)}.dimension details{font-size:11px}.dimension details p{font-size:12px;line-height:1.9}.book-footnote{font-size:11px;color:var(--muted);line-height:1.9;margin:16px 0 0}.book-nav{display:flex;flex-wrap:wrap;gap:8px 20px;padding:24px 0;border-bottom:1px solid var(--line)}.book-nav a{color:var(--muted);font-size:12px;min-height:44px;display:flex;align-items:center;text-underline-offset:5px}.book-chapter{padding:48px 0;scroll-margin-top:24px}.book-chapter+.book-chapter{border-top:1px solid var(--line)}.chapter-heading{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}.chapter-heading>span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.chapter-heading h2{font-size:24px;line-height:1.5;margin:0;font-weight:600}.portrait-body,.book-copy p,.scene-intro,.companion>p,.relation-tip p,.profile-preview p,.advice-body{font-size:15px;line-height:2;white-space:pre-line;margin:0;color:var(--muted)}.book-copy{margin-top:32px}.book-copy h3{font-size:17px;margin:0 0 12px;font-weight:600}.strength{padding-left:20px;border-left:3px solid #a6b99b}.signature{background:#fff0e6;padding:24px;border-radius:12px}.comic-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.comic-panel{min-width:0;margin:0;background:var(--surface);border:2px solid var(--border);border-radius:12px;overflow:hidden}.comic-panel figcaption{padding:12px 16px;font-size:12px;font-weight:600;background:var(--sage)}.comic-panel.inner figcaption{background:var(--book-peach)}.comic-placeholder{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--paper);color:var(--muted);font-size:11px;margin:16px;border:1px dashed #b6aaa0;border-radius:8px}.placeholder-frame{width:48px;height:40px;border:1.5px solid #b6aaa0;border-radius:12px 12px 12px 2px}.comic-panel blockquote{font-size:17px;font-weight:600;line-height:1.8;padding:0 20px;margin:20px 0 16px}.comic-scene{font-size:13px;line-height:1.9;color:var(--muted);padding:0 20px 20px;margin:0}.contrast-reveal{font-size:20px;font-weight:600;line-height:1.9;margin:24px 0 0;padding:24px;background:var(--yellow);border-radius:12px}.companions{display:grid;gap:24px;margin-top:24px}.companion{padding:24px;background:var(--surface);border-radius:16px;border:1.5px solid var(--line)}.companion .relation-kind{font-size:11px;color:var(--muted);margin-bottom:16px}.companion-heading{display:flex;gap:16px;align-items:center;margin-bottom:20px}.companion-heading img{width:72px;height:80px;object-fit:contain}.companion-heading h3{font-size:19px;margin:0 0 8px}.companion-heading p{font-size:13px;margin:0;line-height:1.8}.relation-tip{padding:16px;background:var(--paper);border-radius:10px;margin-top:20px}.relation-tip strong{font-size:12px}.relation-tip p{font-size:14px;margin-top:8px}.profile-preview{margin-top:16px}.profile-preview summary,.dimension summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;line-height:1.6}.profile-preview summary{font-size:13px;text-underline-offset:4px}.profile-preview p{font-size:14px;margin-top:16px}.profile-preview blockquote{font-size:16px;margin:16px 0}.advice-chapter .advice-body{font-size:16px;color:var(--ink)}.share-preview{margin:32px 0 24px;padding:24px;border:2px solid var(--border);border-radius:16px;box-shadow:var(--card-shadow);background:var(--sage)}.share-preview h3{font-size:19px;font-weight:600;line-height:1.8;margin:16px 0}.share-preview>p{font-size:14px;line-height:1.9}.share-preview .share-caption{font-size:12px;color:var(--muted);margin-top:24px}.share-text{display:block;margin:8px auto 0;text-decoration:underline}.book-guidance{font-size:10px;line-height:1.9;color:var(--muted);padding-top:24px;border-top:1px solid var(--line)}.book-guidance p{margin:8px 0}.storybook details summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:600px){.storybook .result-identity{grid-template-columns:minmax(0,1fr) 112px;gap:12px}.storybook h1{font-size:28px}.identity-hook{font-size:17px}.storybook .quote{font-size:19px}.dimension-grid{gap:8px}.dimension{padding:16px 10px}.dimension strong{font-size:32px}.dimension small{font-size:9px;margin-left:2px}.dimension>span{font-size:11px}.dimension summary{font-size:10px}.book-nav{gap:0;justify-content:space-between}.book-nav a{font-size:11px}.book-chapter{padding:36px 0}.chapter-heading h2{font-size:21px}.portrait-body,.book-copy p,.scene-intro{font-size:14px}.comic-pair{grid-template-columns:1fr;gap:20px}.comic-placeholder{aspect-ratio:1;max-height:300px}.comic-panel figcaption{font-size:13px}.comic-panel blockquote{font-size:18px}.contrast-reveal{font-size:18px;padding:20px}.companion{padding:20px}.companion-heading h3{font-size:18px}.advice-chapter .advice-body{font-size:15px}.share-preview{padding:20px}.share-preview h3{font-size:17px}}
@media(max-width:350px){.storybook .result-identity{grid-template-columns:minmax(0,1fr) 88px}.storybook h1{font-size:25px}.dimension strong{font-size:28px}.dimension{padding:12px 8px}.chapter-heading{gap:8px}.chapter-heading h2{font-size:19px}}
.storybook .comic-art{display:block;width:calc(100% - 32px);aspect-ratio:1;object-fit:contain;margin:16px;border-radius:8px}
/* Progressive reading: one chapter at a time, with an explicit chapter index. */
.storybook [hidden]{display:none!important}
.book-directory{margin:24px 0 0;padding:24px 0;border-top:1px solid var(--line)}
.directory-label{display:flex;justify-content:space-between;gap:12px;margin:0 0 16px;font-size:13px;font-weight:600;line-height:1.8}
.directory-title{font-weight:inherit}.directory-down{display:inline-block;flex-shrink:0;vertical-align:-3px;margin-left:6px}
.directory-label>span{font-size:11px;color:var(--muted);font-weight:400}
.storybook .book-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;border:0}
.book-tab{display:flex;align-items:center;gap:12px;min-width:0;min-height:88px;padding:16px;text-align:left;color:var(--ink);background:var(--surface);border:1.5px solid var(--border);border-radius:12px;box-shadow:2px 2px 0 var(--border);transition:background 150ms ease-out,transform 120ms ease-out,box-shadow 120ms ease-out}
.book-tab[aria-selected="true"]{background:var(--yellow);transform:translate(2px,2px);box-shadow:none}
.tab-number{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.tab-copy{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.tab-copy strong{font-size:15px;font-weight:600}.tab-copy small{font-size:11px;line-height:1.6;color:var(--muted)}
.tab-arrow{font-size:18px}.book-tab[aria-selected="true"] .tab-arrow{transform:rotate(45deg)}
.storybook .book-chapter{padding:24px 0 32px;outline:none}.storybook .book-chapter+.book-chapter{border-top:0}
.chapter-intro{font-size:13px;line-height:1.9;color:var(--muted);margin:0 0 24px}
.reading-fold{margin:0 0 12px;padding:0 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.reading-fold>summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:64px;padding:16px 0;cursor:pointer;font-size:15px;font-weight:600;list-style:none;line-height:1.8}
.reading-fold>summary::-webkit-details-marker{display:none}
.fold-symbol::after{content:'+';font-size:22px;font-weight:400;color:var(--muted)}.reading-fold[open] .fold-symbol::after{content:'−'}
.reading-fold>p{padding:0 0 24px;margin:0;font-size:14px;line-height:2;color:var(--muted);white-space:pre-line}
.storybook .book-copy{margin:0 0 12px}.storybook .reading-fold{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.storybook .comic-placeholder{aspect-ratio:auto;max-height:none;min-height:72px;flex-direction:row;gap:12px;margin:16px 16px 0;border:0;background:var(--paper)}
.storybook .placeholder-frame{width:24px;height:22px;border-radius:6px;flex:0 0 auto}
.storybook .comic-panel blockquote{margin:20px 0;font-size:18px;line-height:1.85}
.scene-fold{margin:0 20px 16px}.scene-fold summary,.interaction-fold summary{cursor:pointer;min-height:44px;align-content:center;font-size:12px;line-height:1.8;color:var(--muted)}
.scene-fold .comic-scene{padding:12px 0 0;font-size:12px}.interaction-fold>p{font-size:14px;line-height:2;color:var(--muted);white-space:pre-line;margin:12px 0 0}
.storybook .contrast-reveal{font-size:18px;margin-top:20px;padding:20px}.storybook .companion-heading{margin-bottom:8px}
.storybook .share-preview{margin-top:24px}.share-preview>summary{font-size:13px;min-height:44px;align-content:center;cursor:pointer;line-height:1.8}.storybook .book-guidance{padding-top:16px}.book-guidance summary{font-size:11px;min-height:44px;align-content:center;cursor:pointer}
@media(hover:hover){.book-tab:hover:not([aria-selected="true"]){background:#fff4d8;transform:translate(1px,1px);box-shadow:1px 1px 0 var(--border)}.reading-fold>summary:hover,.scene-fold>summary:hover,.interaction-fold>summary:hover{color:var(--ink)}}
.book-tab:active{transform:translate(2px,2px);box-shadow:none}
@media(max-width:600px){.directory-label{display:block}.directory-label>span{display:block;margin-top:4px}.book-tab{min-height:84px;padding:12px;gap:8px}.tab-copy strong{font-size:13px}.tab-copy small{font-size:10px}.tab-arrow{font-size:16px}.tab-number{font-size:10px}.storybook .book-nav{gap:10px}.storybook .comic-pair{gap:16px}.reading-fold{padding:0 16px}.reading-fold>summary{font-size:14px;min-height:60px}.storybook .chapter-heading{margin-bottom:16px}}
@media(max-width:350px){.book-tab{padding:12px 10px;gap:6px}.tab-copy strong{font-size:12px}.tab-copy small{font-size:9px}.tab-arrow{font-size:14px}}
/* Compact chapter index: four equal touch targets on a single row. */
.storybook .book-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.storybook .book-tab{min-height:58px;padding:8px 4px;gap:3px;flex-direction:column;justify-content:center;text-align:center;border-radius:9px;box-shadow:1px 1px 0 var(--border)}
.storybook .book-tab[aria-selected="true"]{transform:translate(1px,1px);box-shadow:none}
.storybook .tab-copy{flex:none;display:block}.storybook .tab-copy strong{font-size:12px;line-height:1.5;white-space:nowrap}
.storybook .tab-number{font-size:10px;line-height:1.3}.storybook .tab-copy small,.storybook .tab-arrow{display:none}
.storybook .book-directory{padding:20px 0 12px}.storybook .directory-label{margin-bottom:12px}
@media(max-width:350px){.storybook .book-nav{gap:5px}.storybook .book-tab{padding:8px 2px}.storybook .tab-copy strong{font-size:10px}}
.storybook .comic-art{height:auto}
.dev-preview{padding:20px;margin-bottom:32px;border:1px dashed var(--border);border-radius:12px;background:#fff4d8}.dev-preview label{display:block;font-size:13px;font-weight:600;margin-bottom:12px}.dev-preview select{width:100%;min-height:44px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font:inherit;font-size:14px;color:var(--ink)}.dev-preview p{font-size:11px;color:var(--muted);line-height:1.8;margin:12px 0}.dev-preview a{font-size:12px;color:var(--ink);text-underline-offset:4px}

/* Keep the generated image visible for native mobile long-press saving. */
.result-image-dialog{width:min(94vw,720px);max-height:90dvh;box-sizing:border-box;padding:20px;border:1.5px solid var(--ink);border-radius:18px;background:var(--paper,#fff9f2);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.result-image-dialog::backdrop{background:rgb(0 0 0 / 55%)}
.result-image-dialog h2{font-size:20px;margin:0 0 10px}.result-image-dialog p{font-size:14px;line-height:1.8;margin:0 0 16px}
.result-image-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.result-image-actions .primary{width:auto;flex:1;text-align:center;text-decoration:none;justify-content:center;font-size:14px;padding:12px}
.result-image-dialog>img{display:block;width:100%;height:auto;-webkit-touch-callout:default;user-select:auto}

.site-filing{padding:24px 16px max(24px,env(safe-area-inset-bottom));text-align:center;font-size:12px;line-height:1.8;color:var(--muted)}
.site-filing a{color:inherit;text-decoration:none}.site-filing a:hover{text-decoration:underline}.site-filing a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}