:root {
  --paper: #f6efe8;
  --ink: #1e1a18;
  --muted: #776d66;
  --line: rgba(30, 26, 24, .14);
  --wine: #80283c;
  --rose: #d98491;
  --peach: #efb69e;
  --cream: #fffaf4;
  font-family: Inter, "PingFang SC", "Noto Sans SC", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { background: #d8d0c8; }
body { margin: 0; color: var(--ink); min-height: 100vh; }
button { font: inherit; }

.app-shell {
  width: min(100%, 520px);
  min-height: 100svh;
  margin: 0 auto;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 70px rgba(50, 37, 31, .18);
}

.screen { display: none; min-height: 100svh; position: relative; }
.screen.is-active { display: flex; animation: fade-in .42s ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.intro-screen { padding: 22px 22px 28px; flex-direction: column; isolation: isolate; }
.topbar, .quiz-header, .result-nav { display: flex; align-items: center; position: relative; z-index: 2; }
.topbar { gap: 9px; font-size: 10px; letter-spacing: .16em; font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 50%; font-size: 16px; }
.issue { margin-left: auto; color: var(--muted); }

.hero-copy { position: relative; z-index: 2; margin-top: clamp(55px, 10vh, 92px); }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 700; color: var(--wine); }
h1 { font-family: Georgia, "Songti SC", serif; font-weight: 500; font-size: clamp(41px, 10.8vw, 58px); line-height: 1.06; letter-spacing: -.045em; margin: 14px 0 20px; }
h1 em { color: var(--wine); font-style: normal; }
.lead { color: var(--muted); font-size: 15px; line-height: 1.8; }

.ambient { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .75; z-index: -1; }
.ambient-one { width: 280px; height: 280px; right: -150px; top: 40px; background: radial-gradient(circle, rgba(217,132,145,.32), transparent 68%); }
.ambient-two { width: 300px; height: 300px; left: -180px; bottom: 120px; background: radial-gradient(circle, rgba(239,182,158,.42), transparent 68%); }

.orbit-card { width: 236px; height: 214px; position: relative; margin: 12px auto 4px; }
.orbit { position: absolute; inset: 48px 14px; border: 1px solid rgba(128,40,60,.38); border-radius: 50%; transform: rotate(-18deg); }
.orbit-b { inset: 25px 49px; transform: rotate(49deg); }
.heart-core { position: absolute; inset: 0; margin: auto; width: 92px; height: 112px; display: grid; place-items: center; color: #fff; font-size: 30px; background: linear-gradient(145deg, #b74860, #6d1d31); border-radius: 55% 55% 48% 48%; transform: rotate(-7deg); box-shadow: 0 20px 55px rgba(128,40,60,.28); }
.orbit-label { position: absolute; border: 1px solid var(--line); background: rgba(255,250,244,.75); backdrop-filter: blur(8px); padding: 5px 9px; border-radius: 20px; font-size: 10px; letter-spacing: .12em; }
.label-a { top: 26px; right: 5px; }.label-b { bottom: 28px; left: 7px; }.label-c { right: 4px; bottom: 53px; }

.intro-map { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); background:rgba(255,250,244,.56); margin:4px 0 18px; position:relative; z-index:2; }
.intro-map div { padding:11px 8px; text-align:center; border-right:1px solid var(--line); }
.intro-map div:last-child { border-right:0; }
.intro-map strong { display:block; font-family:Georgia,serif; color:var(--wine); font-size:19px; font-weight:500; }
.intro-map span { display:block; color:var(--muted); font-size:9px; letter-spacing:.08em; margin-top:3px; }

.intro-actions { margin-top: auto; position: relative; z-index: 2; }
.primary-button, .secondary-button { width: 100%; min-height: 56px; border-radius: 3px; border: 0; cursor: pointer; font-weight: 700; letter-spacing: .04em; transition: transform .16s ease, box-shadow .16s ease; }
.primary-button { background: var(--wine); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-shadow: 0 10px 30px rgba(128,40,60,.2); }
.primary-button:active, .secondary-button:active { transform: scale(.985); }
.fine-print { text-align: center; color: #9b918a; font-size: 10px; margin: 13px 0 0; }

.chapter-screen { padding:28px 24px 34px; flex-direction:column; justify-content:center; background:linear-gradient(155deg,#f7eee7 0%,#efe0dc 100%); }
.chapter-line { width:58px; height:2px; background:var(--wine); margin-bottom:28px; }
.chapter-number { position:absolute; right:14px; top:34px; font-family:Georgia,serif; font-size:118px; line-height:1; color:rgba(128,40,60,.07); }
.chapter-screen h2 { font-family:Georgia,"Songti SC",serif; font-size:clamp(38px,10vw,52px); line-height:1.15; font-weight:500; max-width:390px; margin:14px 0 18px; position:relative; }
.chapter-screen > p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:1.9; max-width:390px; margin:0 0 60px; }
.chapter-screen .primary-button { margin-top:auto; }

.quiz-screen { flex-direction: column; padding: 20px 18px 28px; }
.quiz-header { gap: 13px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; font-size: 18px; }
.progress-wrap { flex: 1; }
.progress-meta { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px; }
.progress-track, .mini-track { height: 2px; background: rgba(30,26,24,.12); overflow: hidden; }
.progress-fill, .mini-track div { height: 100%; background: var(--wine); transition: width .35s ease; }
.question-stage { margin-top: clamp(55px, 9vh, 94px); }
.question-number { color: var(--wine); font-family: Georgia, serif; font-size: 14px; font-style: italic; }
.question-stage h2 { font-family: Georgia, "Songti SC", serif; font-size: clamp(27px, 7vw, 35px); line-height: 1.35; font-weight: 500; margin: 14px 0 9px; }
.question-hint { font-size: 12px; color: var(--muted); margin-bottom: 32px; }
.answers { display: grid; gap: 11px; }
.answer-button { border: 1px solid var(--line); background: rgba(255,250,244,.62); min-height: 68px; padding: 14px 16px; text-align: left; border-radius: 4px; display: flex; align-items: center; gap: 14px; cursor: pointer; color: var(--ink); transition: border-color .18s, background .18s, transform .18s; }
.answer-button:hover { border-color: var(--wine); background: #fffaf4; transform: translateX(3px); }
.answer-key { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-family: Georgia, serif; font-size: 12px; color: var(--wine); }
.answer-copy { line-height: 1.55; font-size: 14px; }

.loading-screen { align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 24px; }
.scanner { width: 170px; height: 170px; position: relative; display: grid; place-items: center; margin-bottom: 35px; }
.scanner-ring { position: absolute; inset: 0; border: 1px solid rgba(128,40,60,.32); border-radius: 50%; animation: scan 1.8s ease-in-out infinite; }
.scanner-ring::after { content:""; position:absolute; inset:22px; border:1px dashed rgba(128,40,60,.32); border-radius:50%; }
.scanner-heart { font-size: 46px; color: var(--wine); animation: beat 1s ease-in-out infinite; }
@keyframes scan { 50% { transform: rotate(130deg) scale(.92); } }
@keyframes beat { 50% { transform: scale(.85); opacity:.72; } }
.loading-screen h2 { font-family: Georgia, "Songti SC", serif; font-size: 27px; font-weight: 500; margin: 8px 0; }
.loading-screen > p:last-child { color: var(--muted); font-size: 13px; }

.result-screen { background: #eee4da; flex-direction: column; }
.result-nav { padding: 19px 20px 14px; justify-content: space-between; font-size: 9px; letter-spacing: .16em; }
.icon-button.light { border-color: rgba(255,255,255,.32); color: white; }
.result-card { margin: 0 14px; min-height: 490px; padding: 26px 25px; color: white; background: linear-gradient(145deg, #8e3349 0%, #501827 100%); position: relative; overflow: hidden; box-shadow: 0 22px 50px rgba(77,28,42,.22); }
.result-card::before, .result-card::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.16); border-radius:50%; }
.result-card::before { width: 310px; height: 310px; right:-150px; top:-100px; }
.result-card::after { width: 190px; height: 190px; left:-110px; bottom:-80px; }
.result-code { font-size: 9px; letter-spacing: .18em; opacity: .65; }
.result-symbol { position: absolute; right: 26px; top: 50px; font-size: 70px; color: rgba(255,255,255,.16); }
.light-text { color: rgba(255,255,255,.65); margin-top: 68px; }
.result-card h2 { font-family: Georgia, "Songti SC", serif; font-size: 44px; font-weight: 500; letter-spacing: -.04em; margin: 9px 0 15px; position: relative; z-index: 1; }
.result-tagline { max-width: 300px; font-family: Georgia, "Songti SC", serif; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.83); }
.score-block { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: end; position: absolute; left:25px; right:25px; bottom:70px; }
.score-number strong { font-family: Georgia, serif; font-size: 52px; font-weight: 400; }.score-number span { font-size:14px; opacity:.6; }
.score-label { display:block; font-size:9px; letter-spacing:.14em; margin-bottom:10px; opacity:.65; }
.mini-track { background:rgba(255,255,255,.2); }.mini-track div { background:#fff; width:0; }
.keyword-row { position:absolute; left:25px; right:25px; bottom:25px; display:flex; gap:8px; flex-wrap:wrap; }
.keyword-row span { border:1px solid rgba(255,255,255,.28); border-radius:20px; padding:5px 9px; font-size:10px; }

.result-content { padding: 32px 20px 34px; }
.result-summary { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); margin-bottom:24px; background:rgba(255,250,244,.5); }
.result-summary div { padding:14px 16px; border-right:1px solid var(--line); }
.result-summary div:last-child { border-right:0; }
.result-summary span { display:block; font-size:9px; letter-spacing:.14em; color:var(--muted); margin-bottom:5px; }
.result-summary strong { font-family:Georgia,"Songti SC",serif; font-size:18px; font-weight:500; }
.dimension-panel { padding:23px 20px 18px; background:#fff9f2; border:1px solid rgba(30,26,24,.1); margin-bottom:18px; }
.panel-heading span { font-size:9px; letter-spacing:.16em; color:var(--wine); }
.panel-heading h3 { font-family:Georgia,"Songti SC",serif; font-size:22px; font-weight:500; margin:7px 0 20px; }
.dimension-bars { display:grid; gap:12px; }
.dimension-row { display:grid; grid-template-columns:64px 1fr 25px; gap:10px; align-items:center; }
.dimension-row > span { font-size:11px; color:#655c57; }
.dimension-row strong { font-family:Georgia,serif; font-size:11px; font-weight:500; text-align:right; }
.dimension-track { height:5px; background:rgba(30,26,24,.09); overflow:hidden; border-radius:8px; }
.dimension-track i { display:block; height:100%; border-radius:8px; }
.panel-note { color:#9b918a; font-size:9px; line-height:1.6; margin:16px 0 0; }
.contrast-panel { padding:23px; color:white; background:linear-gradient(145deg,#312c31,#171518); margin-bottom:23px; }
.contrast-panel .small-label { color:rgba(255,255,255,.55)!important; }
.contrast-panel h3 { font-family:Georgia,"Songti SC",serif; font-size:23px; font-weight:500; margin:9px 0 12px; }
.contrast-panel p:last-child { color:rgba(255,255,255,.7); font-size:12px; line-height:1.85; margin:0; }
.insight-block { display:grid; grid-template-columns:34px 1fr; gap:14px; padding: 21px 0; border-top:1px solid var(--line); }
.section-index { color:var(--wine); font-family:Georgia,serif; font-size:12px; font-style:italic; }
.insight-block h3, .match-block h3 { margin:0 0 9px; font-family:Georgia,"Songti SC",serif; font-size:21px; font-weight:500; }
.insight-block p, .match-block p { margin:0; color:#665d57; font-size:13px; line-height:1.85; }
.warning-block { border-bottom:1px solid var(--line); }
.match-block { margin:27px 0; padding:24px; background:#fff9f2; border-left:3px solid var(--wine); }
.small-label { font-size:9px!important; letter-spacing:.16em; color:var(--wine)!important; margin-bottom:9px!important; }
.checklist-block { margin:0 0 27px; padding:22px 22px 17px; border:1px solid var(--line); background:rgba(255,250,244,.4); }
.checklist-block ol { margin:13px 0 0; padding-left:22px; }
.checklist-block li { color:#665d57; font-size:12px; line-height:1.75; padding:5px 0 8px 4px; border-bottom:1px solid rgba(30,26,24,.08); }
.checklist-block li:last-child { border-bottom:0; }
.primary-button.dark { background:var(--ink); box-shadow:none; }
.secondary-button { margin-top:10px; background:transparent; border:1px solid var(--ink); }
.text-button { display:block; margin:18px auto 0; border:0; background:transparent; color:var(--muted); text-decoration:underline; cursor:pointer; }
.result-note { margin-top:22px; }

.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); background:var(--ink); color:white; padding:10px 15px; border-radius:40px; font-size:12px; opacity:0; pointer-events:none; transition:.25s; z-index:20; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (max-height: 760px) { .hero-copy { margin-top:34px; } .orbit-card { height:170px; transform:scale(.88); margin-top:-3px; margin-bottom:-10px; } }
@media (min-width: 521px) { body { padding: 24px 0; } .app-shell, .screen { min-height: calc(100vh - 48px); } .app-shell { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }