:root {
  color-scheme: light;
  --cream: #fff8ee;
  --paper: #fffdf9;
  --ink: #35302d;
  --muted: #81766d;
  --soft: #f3e8dc;
  --line: #eadbcd;
  --coral: #ef8064;
  --coral-dark: #d9614b;
  --peach: #ffc8a9;
  --sage: #a8c8b7;
  --blue: #7ca8be;
  --yellow: #f5c967;
  --shadow: 0 26px 75px rgba(101, 71, 46, .14);
  --body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --display: "Songti SC", STSong, "Noto Serif CJK SC", Georgia, serif;
}

* { box-sizing: border-box; }

html { background: #efe7de; scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 198, 163, .35), transparent 20rem),
    radial-gradient(circle at 91% 95%, rgba(168, 200, 183, .28), transparent 24rem),
    #efe7de;
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

html.access-locked .app-shell,
html.access-locked .toast { display: none; }
html.access-granted .access-gate { display: none; }

.access-gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 196, 158, .34), transparent 18rem),
    radial-gradient(circle at 87% 90%, rgba(168, 200, 183, .28), transparent 19rem),
    #efe7de;
}

.access-card {
  position: relative;
  width: min(100%, 410px);
  padding: 39px 29px 30px;
  overflow: hidden;
  border: 1px solid #ead3c2;
  border-radius: 28px;
  background: rgba(255, 253, 249, .94);
  box-shadow: 0 24px 65px rgba(101, 71, 46, .15);
  text-align: center;
}

.access-card::before,
.access-card::after { position: absolute; color: rgba(213, 132, 103, .13); font-family: Georgia, serif; font-size: 130px; line-height: 1; pointer-events: none; }
.access-card::before { top: -42px; left: -25px; content: "✦"; }
.access-card::after { right: -25px; bottom: -52px; content: "♡"; }
.access-mark { position: relative; z-index: 1; width: 55px; height: 55px; margin: 0 auto 17px; display: grid; place-items: center; border-radius: 18px; color: #fffaf4; background: linear-gradient(145deg, var(--coral), var(--coral-dark)); box-shadow: 0 10px 22px rgba(217, 97, 75, .24); font-size: 25px; }
.access-kicker { position: relative; z-index: 1; margin: 0; color: #bd846f; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.access-card h1 { position: relative; z-index: 1; margin: 14px 0 0; color: #403630; font-family: var(--display); font-size: 31px; letter-spacing: -.04em; }
.access-lead { position: relative; z-index: 1; margin: 13px auto 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.access-form { position: relative; z-index: 1; display: grid; gap: 11px; margin-top: 25px; }
.access-input, .access-submit { min-height: 53px; border-radius: 15px; font: inherit; }
.access-input { width: 100%; padding: 0 15px; border: 1px solid #eadbd1; outline: none; color: var(--ink); background: #fff; font-size: 16px; letter-spacing: .08em; text-align: center; }
.access-input:focus { border-color: #dd917c; box-shadow: 0 0 0 4px rgba(221, 145, 124, .14); }
.access-submit { width: 100%; border: 0; color: white; background: var(--coral); box-shadow: 0 11px 22px rgba(217, 97, 75, .2); cursor: pointer; font-weight: 800; }
.access-submit span { margin-left: 8px; font-size: 18px; }
.access-message { position: relative; z-index: 1; min-height: 20px; margin: 13px 0 0; color: #bd4e4e; font-size: 12px; font-weight: 750; }
.access-note { position: relative; z-index: 1; margin: 14px 0 0; color: #b1a096; font-size: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(217, 97, 75, .3); outline-offset: 3px; }

.app-shell {
  width: min(100%, 460px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--cream);
  box-shadow: var(--shadow);
}

.screen { min-height: 100vh; min-height: 100dvh; animation: screen-in .42s ease both; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

.intro-screen { padding: max(22px, env(safe-area-inset-top)) 22px 34px; }

.topline, .result-topline, .quiz-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-mark {
  color: #b09b8c;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
}

.top-pill, .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 12px;
  border: 1px solid rgba(239, 128, 100, .23);
  border-radius: 999px;
  color: var(--coral-dark);
  background: rgba(255, 255, 255, .62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.hero-visual {
  position: relative;
  margin: 25px -22px 0;
  overflow: hidden;
  background: #f8d8c1;
  border-radius: 0 0 42% 42% / 0 0 9% 9%;
}

.hero-visual::after {
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  content: "";
  background: linear-gradient(to top, rgba(255, 248, 238, .42), transparent);
  pointer-events: none;
}

.hero-visual img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.hero-sticker {
  position: absolute;
  z-index: 1;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, .82);
  border-radius: 13px 13px 13px 4px;
  color: #486057;
  background: rgba(255, 250, 240, .9);
  box-shadow: 0 10px 20px rgba(92, 68, 45, .1);
  font-size: 11px;
  font-weight: 800;
  transform: rotate(-5deg);
}

.sticker-one { top: 18%; left: 6%; }
.sticker-two { right: 7%; bottom: 13%; color: #a55b4d; transform: rotate(5deg); }

.intro-copy { padding: 29px 4px 0; text-align: center; }
.intro-copy .eyebrow { background: #fff2e7; }

.intro-copy h1 {
  margin: 17px 0 0;
  color: #3d3430;
  font-family: var(--display);
  font-size: clamp(31px, 8.1vw, 39px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.04em;
}

.intro-copy h1 em { color: var(--coral-dark); font-style: normal; }

.lead {
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 24px 0 25px;
  padding: 14px 6px;
  border: 1px solid rgba(220, 184, 155, .46);
  border-radius: 18px;
  background: rgba(255, 255, 255, .53);
}

.feature-row span { color: #9b8779; font-size: 10px; line-height: 1.5; }
.feature-row b { display: block; color: var(--coral-dark); font-size: 22px; line-height: 1.1; }

.primary-btn, .secondary-btn, .quiet-btn {
  min-height: 53px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.primary-btn {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  color: #fffaf5;
  background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  box-shadow: 0 13px 27px rgba(217, 97, 75, .23);
  font-weight: 800;
}

.primary-btn span { font-size: 20px; transition: transform .18s ease; }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 17px 30px rgba(217, 97, 75, .28); }
.primary-btn:hover span { transform: translateX(3px); }
.primary-btn:disabled { cursor: not-allowed; opacity: .42; transform: none; box-shadow: none; }

.privacy-note, .quiz-footnote { margin: 14px 0 0; color: #ab9c91; font-size: 11px; }

.quiz-screen { padding: max(20px, env(safe-area-inset-top)) 22px 28px; }
.quiz-topline { color: #b09b8c; }
.quiz-brand { color: #8f7568; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.quiz-counter { color: var(--coral-dark); font-size: 13px; font-weight: 800; }
.quiet-btn { min-height: 32px; padding: 0; border: 0; color: #a18e82; background: transparent; font-size: 12px; cursor: pointer; }
.progress-track { height: 5px; margin: 17px 0 0; overflow: hidden; border-radius: 999px; background: #f1e5db; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f4b277, var(--coral)); transition: width .35s ease; }

.question-wrap { padding-top: 42px; }
.question-progress { display: flex; align-items: baseline; gap: 9px; }
.question-progress span { color: #b09d91; font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.question-progress strong { color: var(--coral-dark); font-size: 25px; letter-spacing: -.05em; }
.question-kicker { margin: 30px 0 0; color: #ba856a; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.question-title { margin: 12px 0 0; color: #3b332e; font-family: var(--display); font-size: clamp(27px, 7vw, 34px); line-height: 1.35; letter-spacing: -.04em; }
.question-hint { margin: 15px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.options { display: grid; gap: 11px; margin-top: 29px; }
.option-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 68px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: #564b44;
  background: rgba(255, 253, 249, .86);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.55;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.option-btn:hover { border-color: #e8a58d; transform: translateY(-1px); box-shadow: 0 7px 15px rgba(120, 78, 53, .08); }
.option-btn.selected { border-color: var(--coral); background: #fff0e8; box-shadow: 0 8px 18px rgba(217, 97, 75, .12); }
.option-letter { display: grid; flex: 0 0 29px; width: 29px; height: 29px; place-items: center; border: 1px solid #ecd1c3; border-radius: 10px; color: #c67d68; background: #fff9f3; font-size: 12px; font-weight: 850; }
.selected .option-letter { border-color: var(--coral); color: #fff; background: var(--coral); }

.quiz-nav { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; margin-top: 27px; }
.secondary-btn { border: 1px solid var(--line); color: #9b8b80; background: rgba(255, 255, 255, .65); cursor: pointer; font-size: 13px; font-weight: 750; }
.secondary-btn:not(:disabled):hover { border-color: #dda28e; color: var(--coral-dark); }
.secondary-btn:disabled { cursor: not-allowed; opacity: .35; }
.next-btn { min-height: 53px; font-size: 13px; }

.reveal-screen { display: grid; place-items: center; align-content: center; padding: 30px; background: radial-gradient(circle at 50% 42%, #fff5e2, var(--cream) 38%); text-align: center; }
.reveal-screen h2 { margin: 24px 0 0; font-family: var(--display); font-size: 31px; letter-spacing: -.04em; }
.reveal-screen > p:last-child { max-width: 275px; margin: 13px auto 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.reveal-orbit { position: relative; width: 145px; height: 145px; display: grid; place-items: center; border: 1px solid rgba(239, 128, 100, .3); border-radius: 50%; color: var(--coral); background: radial-gradient(circle, #fff 0 26%, #ffe7d6 27% 42%, transparent 43%); box-shadow: 0 0 0 19px rgba(239, 128, 100, .06), 0 0 0 40px rgba(239, 128, 100, .035); animation: breathe 1.45s ease-in-out infinite; }
.reveal-orbit::before, .reveal-orbit::after { position: absolute; border: 1px dashed rgba(239, 128, 100, .38); border-radius: 50%; content: ""; }
.reveal-orbit::before { inset: -16px 22px; transform: rotate(32deg); }
.reveal-orbit::after { inset: 22px -16px; transform: rotate(-32deg); }
.reveal-orbit i { font-size: 45px; font-style: normal; }
@keyframes breathe { 50% { transform: scale(1.045); } }

.result-screen { padding: max(22px, env(safe-area-inset-top)) 18px 32px; }
.result-topline { padding: 0 4px; }
.result-hero-card { position: relative; margin-top: 21px; padding: 12px 12px 26px; overflow: hidden; border-radius: 28px; color: #fffaf2; background: linear-gradient(145deg, #587f7a, #e58769 115%); box-shadow: 0 19px 42px rgba(123, 93, 74, .2); text-align: center; }
.result-hero-card::before, .result-hero-card::after { position: absolute; color: rgba(255, 255, 255, .13); font-size: 90px; line-height: 1; content: "✦"; }
.result-hero-card::before { top: -24px; left: 18px; transform: rotate(18deg); }
.result-hero-card::after { right: 12px; bottom: -31px; transform: rotate(-16deg); }
.result-visual { position: relative; z-index: 1; overflow: hidden; border: 3px solid rgba(255, 255, 255, .72); border-radius: 21px; background: #f7d4bb; }
.result-visual img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.result-hero-card > .result-sparkles { margin-top: 19px; }

.result-flat-visual {
  height: 228px;
  border-color: rgba(255, 255, 255, .62);
  background:
    linear-gradient(145deg, rgba(255,255,255,.32), transparent 48%),
    #e9ded2;
}

.result-flat-visual > span { position: absolute; display: block; }
.flat-sun { top: 34px; left: 50%; width: 46px; height: 46px; border-radius: 50%; background: #f4c96c; transform: translateX(-50%); box-shadow: 0 0 0 10px rgba(244,201,108,.17); }
.flat-arc { left: 50%; border: 2px solid rgba(105,139,125,.45); border-bottom: 0; border-radius: 160px 160px 0 0; transform: translateX(-50%); }
.flat-arc-one { top: 41px; width: 222px; height: 105px; }
.flat-arc-two { top: 68px; width: 160px; height: 78px; border-color: rgba(207,133,103,.38); }
.flat-person { border-radius: 50%; }
.flat-parent-head { left: calc(50% - 86px); top: 85px; width: 34px; height: 34px; background: #6f8e86; }
.flat-parent-body { left: calc(50% - 106px); top: 119px; width: 74px; height: 59px; border-radius: 47px 47px 10px 10px; background: #6f8e86; transform: rotate(10deg); }
.flat-child-head { left: calc(50% + 50px); top: 101px; width: 29px; height: 29px; background: #db9273; }
.flat-child-body { left: calc(50% + 36px); top: 130px; width: 63px; height: 48px; border-radius: 43px 43px 10px 10px; background: #db9273; transform: rotate(-9deg); }
.flat-dialogue { top: 91px; width: 30px; height: 19px; border: 2px solid rgba(81,105,100,.72); border-radius: 50%; }
.flat-dialogue::after { position: absolute; bottom: -5px; width: 7px; height: 7px; border-right: 2px solid rgba(81,105,100,.72); border-bottom: 2px solid rgba(81,105,100,.72); background: #e9ded2; content: ""; transform: rotate(28deg); }
.flat-dialogue-left { left: calc(50% - 122px); }
.flat-dialogue-left::after { right: 2px; }
.flat-dialogue-right { left: calc(50% + 78px); border-color: rgba(199,112,88,.68); }
.flat-dialogue-right::after { left: 2px; border-color: rgba(199,112,88,.68); }
.flat-paper { top: 178px; width: 48px; height: 37px; border-radius: 8px; box-shadow: 3px 5px 0 rgba(91,71,56,.08); transform: rotate(-7deg); }
.flat-paper-heart { left: calc(50% - 107px); background: #f3c3b0; }
.flat-paper-bridge { left: calc(50% - 24px); background: #b8d1d4; transform: rotate(4deg); }
.flat-paper-leaf { left: calc(50% + 60px); background: #c7d5b8; transform: rotate(-5deg); }
.flat-heart { position: absolute; left: 15px; top: 11px; width: 17px; height: 14px; background: #d77965; transform: rotate(-45deg); }
.flat-heart::before, .flat-heart::after { position: absolute; width: 17px; height: 14px; border-radius: 50%; background: #d77965; content: ""; }
.flat-heart::before { top: -8px; left: 0; }
.flat-heart::after { top: 0; left: 8px; }
.flat-bridge { position: absolute; left: 10px; bottom: 8px; width: 28px; height: 15px; border: 3px solid #638d99; border-bottom: 0; border-radius: 24px 24px 0 0; }
.flat-bridge::before, .flat-bridge::after { position: absolute; bottom: -4px; width: 3px; height: 10px; background: #638d99; content: ""; }
.flat-bridge::before { left: 2px; }
.flat-bridge::after { right: 2px; }
.flat-leaf { position: absolute; left: 19px; top: 8px; width: 17px; height: 22px; border-radius: 100% 0 100% 0; background: #739b61; transform: rotate(35deg); }
.flat-leaf::after { position: absolute; left: 7px; top: 2px; width: 2px; height: 19px; background: #d5e2bf; content: ""; transform: rotate(-35deg); }
.result-sparkles { position: relative; color: rgba(255, 245, 217, .73); font-size: 13px; letter-spacing: .2em; }
.result-overline, .section-label { margin: 13px 0 0; color: rgba(255, 247, 235, .76); font-size: 10px; font-weight: 850; letter-spacing: .15em; }
.type-emoji { position: relative; width: 70px; height: 70px; margin: 16px auto 0; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.55); border-radius: 23px; background: rgba(255,255,255,.16); font-size: 35px; box-shadow: 0 9px 20px rgba(48, 54, 41, .1); }
.type-emoji-seedling { background: rgba(189, 171, 158, .82); }
.seedling-stem { position: absolute; left: 33px; top: 31px; width: 4px; height: 28px; border-radius: 999px; background: #5f9650; transform: rotate(7deg); }
.seedling-leaf { position: absolute; width: 27px; height: 14px; border-radius: 100% 0 100% 0; background: #74a94d; box-shadow: inset -2px -2px 0 rgba(60, 116, 51, .17); }
.seedling-leaf-left { left: 17px; top: 32px; transform: rotate(-28deg); }
.seedling-leaf-right { left: 35px; top: 24px; transform: scaleX(-1) rotate(-28deg); }
.result-hero-card h1 { position: relative; margin: 13px 0 0; font-family: var(--display); font-size: 34px; letter-spacing: -.04em; }
.result-tagline { position: relative; max-width: 315px; margin: 10px auto 0; color: rgba(255,255,255,.88); font-size: 13px; line-height: 1.7; }
.similarity-row { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 25px; color: rgba(255,255,255,.76); font-size: 11px; }
.similarity-row strong { color: #fff8cf; font-size: 25px; }
.similarity-track { position: relative; height: 6px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.25); }
.similarity-track i { display: block; height: 100%; border-radius: inherit; background: #fff3ae; }

.result-content { display: grid; gap: 14px; margin-top: 14px; }
.result-card { padding: 24px 20px; border: 1px solid rgba(229, 210, 195, .9); border-radius: 22px; background: rgba(255, 253, 249, .82); box-shadow: 0 9px 24px rgba(117, 84, 56, .05); }
.result-card .section-label { margin: 0; color: #bf826e; }
.result-card h2 { margin: 8px 0 0; color: #3d3430; font-family: var(--display); font-size: 23px; line-height: 1.35; letter-spacing: -.03em; }
.quote-card { background: linear-gradient(145deg, #fff1e6, #f5eee2); }
.big-quote { margin: 16px 0 0; color: #59453d; font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1.55; }
.quote-note { margin: 13px 0 0; color: #9d887c; font-size: 12px; line-height: 1.8; }

.foundation-card { background: #fffaf2; }
.foundation-card > .rich-copy { max-width: 680px; color: #77675e; font-size: 14px; }
.foundation-grid { display: grid; gap: 13px; margin-top: 22px; }
.foundation-item { display: grid; grid-template-columns: 32px 1fr; gap: 11px; padding-top: 14px; border-top: 1px solid #ead9cb; }
.foundation-index { color: #c47f68; font-family: Georgia, serif; font-size: 15px; font-weight: 700; }
.foundation-item strong { color: #5e514a; font-size: 14px; }
.foundation-item p { margin: 5px 0 0; color: #81736b; font-size: 12px; line-height: 1.8; }
.report-boundary { margin: 20px 0 0; padding-top: 15px; border-top: 1px dashed #e2cfc0; color: #ad998d; font-size: 11px; line-height: 1.8; }

.expert-voices-card { background: #fbfaf5; }
.expert-voices-intro { margin: 12px 0 0; color: #a08f83; font-size: 12px; line-height: 1.75; }
.expert-voices-grid { display: grid; gap: 11px; margin-top: 21px; }
.expert-voice { display: grid; grid-template-columns: 45px 1fr; gap: 4px 11px; padding: 14px 0; border-top: 1px solid #e8e0d6; }
.expert-avatar { grid-row: span 2; width: 45px; height: 45px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; color: #fffdf8; font-family: Georgia, serif; font-size: 12px; font-weight: 800; letter-spacing: -.04em; box-shadow: 0 4px 9px rgba(93,73,58,.11); }
.avatar-coral { background: #cf8b78; }
.avatar-sage { background: #7ea18f; }
.avatar-blue { background: #86aabd; }
.avatar-yellow { color: #74603c; background: #e6c67c; }
.avatar-mauve { background: #a294ac; }
.avatar-olive { background: #a4a977; }
.expert-identity { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 8px; }
.expert-identity strong { color: #554a44; font-size: 13px; }
.expert-identity small { color: #b1a49b; font-family: Georgia, serif; font-size: 10px; }
.expert-identity em { grid-column: 1 / -1; color: #bd7b67; font-size: 10px; font-style: normal; font-weight: 800; }
.expert-voice > p { grid-column: 2; margin: 2px 0 0; color: #74665e; font-size: 12px; line-height: 1.75; }

.translation-card { background: #f5f8f1; border-color: #dce6d5; }
.translation-card .section-label { color: #789777; }
.translation-row { margin-top: 20px; padding: 14px 16px; border-left: 3px solid #e5b29c; border-radius: 0 14px 14px 0; background: rgba(255, 255, 255, .5); }
.translation-row + .translation-row { margin-top: 11px; border-left-color: #91b5a2; }
.translation-row span { color: #bd806a; font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.translation-row p { margin: 7px 0 0; color: #685a52; font-family: var(--display); font-size: 17px; line-height: 1.7; }
.translation-row strong { color: #b8614c; }

.dimension-bars { display: grid; gap: 15px; margin-top: 22px; }
.dimension-item { display: grid; gap: 6px; }
.dimension-caption { display: flex; align-items: baseline; justify-content: space-between; color: #5d5048; font-size: 12px; font-weight: 750; }
.dimension-caption strong { color: var(--coral-dark); font-size: 15px; }
.dimension-caption small { margin-left: 2px; color: #b9a79c; font-size: 10px; font-weight: 500; }
.dimension-track { height: 7px; overflow: hidden; border-radius: 999px; background: #f0e3d9; }
.dimension-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f7b27e, var(--coral)); animation: grow-bar .75s var(--bar-delay) ease both; transform-origin: left; }
.dimension-item p { margin: 0; color: #a18f83; font-size: 10px; line-height: 1.55; }
@keyframes grow-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.two-col-card { display: grid; gap: 25px; }
.two-col-card > div + div { padding-top: 23px; border-top: 1px dashed #e8d7cb; }
.rich-copy { margin-top: 13px; color: #70625a; font-size: 13px; line-height: 1.9; }
.rich-copy strong { color: #b35f4e; font-weight: 800; }
.expert-card { border-color: #d7e5da; background: linear-gradient(145deg, #f3faf3, #fffdf8); }
.expert-card .section-label { color: #65907b; }
.expert-card h2 { color: #426d5b; }

.second-card { background: #f4f6f0; }
.second-badge { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: #69816d; background: #e5eee2; font-size: 11px; font-weight: 850; }
.second-main { display: flex; align-items: center; gap: 11px; margin-top: 14px; }
.second-emoji { font-size: 32px; }
.second-main h2 { margin: 0; font-size: 20px; }
.second-main p { margin: 3px 0 0; color: #8d9b8b; font-size: 11px; }
.second-main > strong { margin-left: auto; color: #66876f; font-size: 19px; }
.second-card > p:last-child { margin: 16px 0 0; color: #748274; font-size: 12px; line-height: 1.8; }

.detail-list { display: grid; gap: 11px; margin: 17px 0 0; padding: 0; list-style: none; }
.detail-list li { position: relative; padding: 12px 13px 12px 35px; border-radius: 13px; color: #6e5d54; background: #fff7f0; font-size: 13px; line-height: 1.75; }
.detail-list li::before { position: absolute; top: 13px; left: 14px; color: var(--coral); font-weight: 900; content: "✦"; }
.action-card { background: #fffaf1; }
.script-card { background: #f4f8f9; }
.script-card .detail-list li { background: #eaf4f4; }
.script-card .detail-list li::before { color: #6f9c9d; content: "“"; font-family: Georgia, serif; font-size: 24px; line-height: 1; }
.empty-detail { color: var(--muted); font-size: 13px; line-height: 1.8; }

.closing-card { padding: 29px 21px 24px; text-align: center; background: linear-gradient(145deg, #fff1e4, #f5f7ec); }
.closing-icon { width: 50px; height: 50px; margin: 0 auto; display: grid; place-items: center; border-radius: 17px; color: #fff; background: var(--coral); font-size: 25px; box-shadow: 0 9px 17px rgba(217,97,75,.22); }
.closing-card h2 { margin-top: 15px; }
.closing-card p { margin: 12px 0 20px; color: #7b6c63; font-size: 13px; line-height: 1.9; }
.result-footer { padding: 25px 0 0; color: #b09c90; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-align: center; }

/* Long-form report sections follow the reference's editorial card treatment:
   generous margins, quiet borders, serif headlines, and readable bullets. */
.action-card,
.script-card {
  position: relative;
  overflow: hidden;
  padding: 32px 28px 36px;
  border: 1.5px solid #e5d3c3;
  border-radius: 28px;
  box-shadow: none;
}

.action-card {
  background: #fffaf2;
}

.script-card {
  background: #f3f8f3;
  border-color: #d5e4d7;
}

.action-card .section-label,
.script-card .section-label {
  color: #c47f68;
  font-size: 13px;
  letter-spacing: .08em;
}

.action-card h2,
.script-card h2 {
  margin-top: 13px;
  font-size: 29px;
  line-height: 1.35;
  letter-spacing: -.055em;
}

.card-motif { position: absolute; top: 29px; right: 27px; width: 47px; height: 35px; opacity: .56; }
.motif-steps { display: grid; align-content: end; gap: 4px; }
.motif-steps i { display: block; height: 5px; border-radius: 999px; background: #d99982; transform: rotate(-8deg); }
.motif-steps i:nth-child(1) { width: 25px; margin-left: 17px; }
.motif-steps i:nth-child(2) { width: 35px; margin-left: 7px; }
.motif-steps i:nth-child(3) { width: 43px; }
.motif-connection i { position: absolute; top: 7px; width: 20px; height: 20px; border: 3px solid #82a98b; border-radius: 50%; }
.motif-connection i:first-child { left: 1px; }
.motif-connection i:last-child { right: 1px; border-color: #d5826f; }
.motif-connection::before { position: absolute; top: 16px; left: 14px; width: 21px; height: 3px; background: #b0c9b3; content: ""; }

.long-copy { display: grid; gap: 13px; margin-top: 22px; }
.long-copy p { margin: 0; color: #6f6057; font-size: 15px; line-height: 2; }
.long-copy p::first-letter { color: #bc725d; }
.script-copy p { color: #60776a; }
.script-copy strong { color: #b7614e; }

@media (min-width: 700px) {
  .action-card,
  .script-card { padding-right: 40px; padding-left: 40px; }
  .action-card h2,
  .script-card h2 { font-size: 34px; }
  .long-copy p { font-size: 17px; }
}

.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; max-width: calc(100% - 40px); padding: 12px 16px; border-radius: 999px; color: #fff8f0; background: rgba(58, 45, 38, .9); box-shadow: 0 10px 24px rgba(38, 28, 22, .16); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .22s ease, transform .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 700px) {
  .app-shell { margin: 28px auto; border-radius: 33px; }
  .intro-screen { padding-left: 30px; padding-right: 30px; }
  .hero-visual { margin-left: -30px; margin-right: -30px; }
  .result-screen { padding-left: 22px; padding-right: 22px; }
}