:root {
  --ink: #281924;
  --muted: #735f6d;
  --paper: #fffafc;
  --blush: #f7e8ee;
  --wine: #67243f;
  --wine-dark: #461329;
  --rose: #c76c8e;
  --line: #ead7df;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 70% 5%, #f4dce6 0, transparent 28rem), var(--paper); }
button { font: inherit; }
button:focus-visible { outline: 3px solid #d18aa4; outline-offset: 3px; }

.shell { width: min(100% - 36px, 760px); margin: 0 auto; }
.landing { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 72px 0; }
.eyebrow { color: var(--wine); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.landing h1 { font-size: clamp(3.5rem, 12vw, 7rem); line-height: .88; margin: 18px 0 24px; color: var(--wine-dark); }
.lede { max-width: 660px; margin: 0; font: 1.35rem/1.55 Georgia, serif; color: #4e3644; }
.promise { display: flex; gap: 15px; align-items: flex-start; margin: 34px 0; padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.62); }
.promise > span { color: var(--rose); font-size: 1.5rem; line-height: 1; }
.promise p { margin: 0; line-height: 1.55; color: var(--muted); }
.promise strong { color: var(--ink); }
.primary { border: 0; border-radius: 999px; padding: 16px 24px; background: var(--wine); color: white; font-weight: 800; cursor: pointer; box-shadow: 0 10px 28px rgba(103,36,63,.2); transition: transform .18s, background .18s; }
.primary:hover { transform: translateY(-2px); background: var(--wine-dark); }
.primary span { margin-left: 16px; }
.fineprint { max-width: 570px; margin: 24px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }

.quiz { min-height: 100vh; padding: 28px 0 44px; }
.quizHeader { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-weight: 700; font-size: .85rem; }
.wordmark { border: 0; padding: 0; background: none; color: var(--wine-dark); font: 700 1.2rem Georgia, serif; cursor: pointer; }
.progress { height: 4px; margin-top: 18px; border-radius: 99px; background: var(--blush); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wine), var(--rose)); transition: width .25s; }
.questionCard { padding: clamp(44px, 10vh, 92px) 0 40px; animation: rise .26s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.questionCard h2 { max-width: 720px; margin: 15px 0 32px; font-size: clamp(2rem, 5vw, 3.35rem); line-height: 1.08; color: var(--wine-dark); }
.choices { display: grid; gap: 11px; }
.choice { width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: center; text-align: left; padding: 15px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.74); color: var(--ink); line-height: 1.4; cursor: pointer; transition: border .15s, transform .15s, background .15s; }
.choice:hover, .choice.selected { border-color: var(--rose); background: white; transform: translateX(3px); }
.letter { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blush); color: var(--wine); font-size: .78rem; font-weight: 900; }
.selected .letter { background: var(--wine); color: white; }
.quizFooter { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.back { border: 0; background: none; color: var(--wine); font-weight: 800; cursor: pointer; padding: 8px 0; }
.back:disabled { opacity: .3; cursor: default; }

.resultHero { color: white; background: radial-gradient(circle at 78% 15%, #9f4f6e 0, transparent 25rem), linear-gradient(135deg, #3f1126, #67243f); }
.resultInner { width: min(100% - 36px, 940px); margin: 0 auto; min-height: 650px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 80px 0; }
.resultHero .eyebrow { color: #efb7ca; }
.resultLabel { margin: 42px 0 7px; color: #e9bacb; font-size: .82rem; font-weight: 700; }
.resultHero h1 { max-width: 850px; margin: 0; font-size: clamp(3rem, 9vw, 6.8rem); line-height: .92; }
.resultHero blockquote { margin: 28px 0 12px; max-width: 680px; font: italic 1.25rem/1.5 Georgia, serif; color: #f4dbe4; }
.resultHero p:not(.resultLabel) { max-width: 700px; line-height: 1.65; color: #f4e8ed; }
.resultActions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.primary.light { background: white; color: var(--wine-dark); box-shadow: none; }
.secondaryButton { border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 15px 22px; color: white; background: transparent; font-weight: 800; cursor: pointer; }
.resultsBody { width: min(100% - 36px, 1040px); margin: 0 auto; }
.summaryGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: -44px 0 90px; position: relative; }
.summaryGrid article { min-height: 205px; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 16px 45px rgba(65,20,39,.09); }
.summaryGrid span { display: block; margin-bottom: 14px; color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.summaryGrid strong { display: block; color: var(--wine-dark); font: 700 1.55rem/1.1 Georgia, serif; }
.summaryGrid p { margin: 14px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.matrixSection { padding-bottom: 86px; }
.sectionHeading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 38px; }
.sectionHeading h2, .interpretation h2 { margin: 9px 0 0; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; color: var(--wine-dark); }
.sectionHeading > p { max-width: 310px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.bars { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 42px; }
.barLabel { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 10px; font-size: .88rem; font-weight: 700; }
.barLabel span { display: flex; align-items: center; }
.barLabel b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--blush); color: var(--wine); font-size: .68rem; }
.barLabel strong { color: var(--wine); }
.barTrack { height: 9px; overflow: hidden; border-radius: 99px; background: var(--blush); }
.barTrack span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wine), var(--rose)); }
.interpretation { margin: 0 -34px; padding: 64px 34px; border-radius: 24px; background: var(--blush); }
.interpretation > p { max-width: 830px; color: #503642; font: 1.1rem/1.75 Georgia, serif; }
.interpretation .caveat { margin-top: 30px; padding-top: 22px; border-top: 1px solid #dfc4cf; color: var(--muted); font: .82rem/1.6 Inter, sans-serif; }
.powerNumbers { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 75px 0; }
.powerNumbers > div:not(.powerLine) { text-align: center; }
.powerNumbers span { display: block; color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.powerNumbers strong { color: var(--wine-dark); font: 700 2rem Georgia, serif; }
.powerLine { position: relative; height: 4px; border-radius: 99px; background: linear-gradient(90deg, #c887a1, #6d2945); }
.powerLine span { position: absolute; top: 50%; width: 18px; height: 18px; border: 4px solid white; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 1px var(--wine); transform: translate(-50%, -50%); }
.siteFooter { display: flex; justify-content: space-between; gap: 20px; padding: 26px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }

@media (max-width: 720px) {
  .summaryGrid { grid-template-columns: 1fr; margin-bottom: 70px; }
  .summaryGrid article { min-height: 0; }
  .bars { grid-template-columns: 1fr; gap: 24px; }
  .sectionHeading { display: block; }
  .sectionHeading > p { margin-top: 18px; }
  .interpretation { margin-inline: -18px; padding-inline: 18px; border-radius: 0; }
  .quizFooter span { display: none; }
  .siteFooter { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.versionPill{display:inline-flex;margin-left:10px;padding:4px 8px;border:1px solid currentColor;border-radius:99px;font:800 .62rem/1 Inter,sans-serif;letter-spacing:.1em;vertical-align:middle}
.introNotice{max-width:700px;margin:24px 0 0;padding:18px 20px;border-left:4px solid var(--rose);border-radius:0 12px 12px 0;background:rgba(255,255,255,.6);color:var(--muted);font-size:.88rem;line-height:1.6}
.choice.rating{grid-template-columns:44px 1fr}.ratingValue{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--blush);color:var(--wine);font-weight:900}.choice.selected .ratingValue{background:var(--wine);color:#fff}
.nextRow{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:24px}.nextRow .primary:disabled{opacity:.35;cursor:not-allowed;transform:none}.selectionHint{color:var(--muted);font-size:.8rem}
.contextBadge{display:inline-block;margin-bottom:12px;padding:6px 10px;border-radius:99px;background:var(--blush);color:var(--wine);font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.contextList{display:grid;gap:10px;margin-top:22px}.contextList div{padding:14px 16px;border:1px solid #dfc4cf;border-radius:12px;background:rgba(255,255,255,.45);font-size:.88rem;line-height:1.5}
.resultNote{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.25);font-size:.88rem!important}.coPrimary{font-size:clamp(2.5rem,7vw,5.4rem)!important}
@media(max-width:520px){.choice.rating{grid-template-columns:38px 1fr}.nextRow{align-items:flex-end}.selectionHint{max-width:150px}.versionPill{display:table;margin:10px 0 0}}