@charset "UTF-8";

:root {
  color: #1f2933;
  background: #f4f7f8;
  font-family: "Inter", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }

main {
  min-height: 100vh;
  padding: 28px;
  background:
    linear-gradient(120deg, rgba(17, 94, 89, 0.13), transparent 42%),
    linear-gradient(300deg, rgba(190, 82, 61, 0.12), transparent 38%),
    #f4f7f8;
}

.hidden { display: none !important; }
.eyebrow { margin: 0 0 10px; color: #0f766e; font-weight: 800; letter-spacing: 0; }
.icon { color: #c2410c; font-size: 24px; font-weight: 900; }

.intro {
  max-width: 1180px;
  min-height: calc(100vh - 56px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 42px;
  align-items: center;
}

.introCopy h1 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(42px, 7vw, 86px);
  line-height: 0.98;
  letter-spacing: 0;
}

.lead {
  max-width: 620px;
  margin: 22px 0 0;
  color: #52616b;
  font-size: 20px;
  line-height: 1.7;
}

.introStats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 22px;
}

.introStats span,
.keywordRow span,
.pillCloud span {
  border: 1px solid #cbd8dc;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px 16px;
  color: #30404a;
}

.introStats b { color: #c2410c; }

.testModeSelector {
  max-width: 500px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
  border: 0;
  padding: 0;
}

.testModeSelector legend {
  margin-bottom: 8px;
  color: #30404a;
  font-size: 14px;
  font-weight: 850;
}

.testModeOption {
  min-height: 112px;
  display: grid;
  gap: 5px;
  align-content: center;
  border: 1px solid #cbd8dc;
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.74);
  color: #30404a;
  text-align: left;
  cursor: pointer;
}

.testModeOption span { color: #c2410c; font-size: 12px; font-weight: 900; }
.testModeOption strong { color: #1f2933; font-size: 15px; }
.testModeOption small { color: #687780; font-size: 12px; line-height: 1.45; }
.testModeOption:hover { border-color: #0f766e; }
.testModeOption.selected {
  border-color: #0f766e;
  background: #e6f3f0;
  box-shadow: inset 0 0 0 1px #0f766e;
}

.birthSelector {
  max-width: 500px;
  margin: 0 0 20px;
}

.birthSelector > label {
  display: block;
  margin-bottom: 8px;
  color: #30404a;
  font-size: 14px;
  font-weight: 850;
}

.monthControl {
  display: grid;
  grid-template-columns: minmax(108px, 0.55fr) minmax(108px, 0.55fr) minmax(190px, 1fr);
  gap: 10px;
}

.monthControl select {
  width: 100%;
  min-height: 50px;
  border: 1px solid #cbd8dc;
  border-radius: 8px;
  padding: 0 42px 0 14px;
  background: rgba(255, 255, 255, 0.88);
  color: #30404a;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.monthControl select:focus {
  border-color: #0f766e;
  outline: 3px solid rgba(15, 118, 110, 0.12);
}

.zodiacMatch {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 8px;
  padding: 8px 13px;
  background: rgba(216, 243, 239, 0.58);
  color: #0b4d48;
}

.zodiacMatch > span { color: #c2410c; font-size: 22px; line-height: 1; }
.zodiacMatch strong { font-size: 14px; }
.zodiacMatch small { margin-left: auto; color: #52616b; font-weight: 800; }
.birthSelector > p { margin: 7px 0 0; color: #687780; font-size: 12px; line-height: 1.5; }

.introActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.resumeBanner {
  max-width: 500px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 20px;
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(230, 243, 240, 0.9);
}
.resumeBanner > div:first-child { display: grid; gap: 4px; min-width: 0; }
.resumeBanner span { color: #52616b; font-size: 12px; font-weight: 800; }
.resumeBanner strong { color: #1f2933; font-size: 14px; line-height: 1.45; }
.resumeActions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.resumeActions .primaryAction { min-height: 42px; padding-inline: 14px; }
.textAction {
  min-height: 42px;
  border: 0;
  padding: 0 8px;
  background: transparent;
  color: #52616b;
  font-weight: 800;
  cursor: pointer;
}
.textAction:hover { color: #0b605a; }

.heroButton {
  min-width: 172px;
  min-height: 56px;
  box-shadow: 0 16px 34px rgba(15, 118, 110, 0.22);
}

.trustStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  color: #52616b;
}

.trustStrip span {
  border-left: 3px solid #c2410c;
  padding: 4px 0 4px 10px;
  font-size: 14px;
  font-weight: 800;
}

.primaryAction,
.ghostAction,
.panel button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  padding: 0 20px;
  background: #0f766e;
  color: white;
  font-weight: 850;
  cursor: pointer;
}

.ghostAction {
  border: 1px solid #cbd8dc;
  background: rgba(255, 255, 255, 0.75);
  color: #30404a;
}

.primaryAction:hover,
.panel button:hover { background: #0b605a; }
.ghostAction:hover { border-color: #0f766e; color: #0b4d48; }
.primaryAction:active,
.ghostAction:active,
.panel button:active { transform: translateY(1px); }
.primaryAction:disabled,
.ghostAction:disabled,
.panel button:disabled {
  background: #9aa8ad;
  border-color: #9aa8ad;
  color: white;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.heroVisual,
.panel,
.question,
.shareCard,
.profilePanel,
.dimensionPanel {
  border: 1px solid #d7e0e4;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 45px rgba(32, 49, 57, 0.08);
}

.heroVisual {
  min-height: 680px;
  padding: 26px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(216, 243, 239, 0.74), rgba(255, 250, 244, 0.92)),
    #ffffff;
}

.heroVisual::before {
  content: "";
  position: absolute;
  inset: 28px 42px auto auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(15, 118, 110, 0.2);
}

.heroVisual::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(194, 65, 12, 0.08);
}

.cardTop,
.shareCardHeader {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #52616b;
  font-size: 13px;
  font-weight: 850;
}

.cardTop b,
.shareCardHeader b { color: #c2410c; }

.previewCard,
.floatingCard,
.posterPreview {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(203, 216, 220, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 50px rgba(32, 49, 57, 0.12);
}

.mainPreview {
  left: 34px;
  top: 34px;
  width: min(70%, 390px);
  padding: 22px;
}

.previewContent {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
}

.previewContent img {
  width: 152px;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(32, 49, 57, 0.12);
}

.previewContent p {
  margin: 0;
  color: #52616b;
  font-weight: 800;
}

.previewContent h2 {
  margin: 2px 0 4px;
  color: #0f766e;
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: 0;
}

.previewContent strong {
  font-size: 22px;
  line-height: 1.3;
}

.miniTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.miniTags span {
  border-radius: 999px;
  background: #d8f3ef;
  color: #0b4d48;
  padding: 8px 12px;
  font-weight: 850;
}

.floatingCard {
  width: 230px;
  padding: 16px;
}

.floatingCard b,
.posterPreview strong {
  display: block;
  color: #1f2933;
  margin-bottom: 8px;
}

.floatingCard span,
.posterPreview span {
  color: #52616b;
  font-size: 14px;
  line-height: 1.55;
}

.insightCard {
  right: 28px;
  top: 320px;
}

.aiPreview {
  right: 44px;
  top: 450px;
  width: 260px;
}

.careerPreview {
  left: 48px;
  bottom: 62px;
  width: 292px;
}

.miniMeter {
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #dbe4e7;
}

.miniMeter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0f766e, #c2410c);
}

.posterPreview {
  right: 28px;
  bottom: 42px;
  width: 230px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(194, 65, 12, 0.1)),
    rgba(255, 255, 255, 0.9);
}

.topbar {
  max-width: 1180px;
  margin: 0 auto 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
}

.topbar h2 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.05;
  letter-spacing: 0;
}

.progressBox { min-width: 210px; color: #52616b; font-weight: 800; }
.progressMeta { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.progressMeta strong { color: var(--ink); font-size: 14px; }
.progressMeta span { color: var(--teal-dark); font-size: 14px; }
.progress, .meter { height: 9px; background: #dbe4e7; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress i, .meter i { display: block; height: 100%; background: linear-gradient(90deg, #0f766e, #c2410c); }

.testLayout {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

.panel { position: sticky; top: 24px; padding: 22px; }
.panel h3 { margin: 12px 0 10px; }
.panel p { color: #52616b; line-height: 1.65; }
.panel button { width: 100%; }
.panel button:disabled { background: #9aa8ad; cursor: not-allowed; }

.testModeBadge {
  margin: 0 0 16px;
  border-left: 3px solid #c2410c;
  padding: 5px 0 5px 10px;
  color: #52616b;
  font-size: 13px;
  font-weight: 850;
}

.questions { display: grid; gap: 14px; }
.question { padding: 18px; }
.qhead { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; }
.qhead span { color: #c2410c; font-size: 18px; font-weight: 900; }
.qhead p { margin: 0; font-size: 17px; line-height: 1.55; font-weight: 750; }
.scale { margin-top: 16px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.scale button { min-height: 44px; border: 1px solid #cbd8dc; background: #f9fbfb; border-radius: 8px; color: #30404a; cursor: pointer; }
.scale button.selected { border-color: #0f766e; background: #d8f3ef; color: #0b4d48; font-weight: 850; }

.forcedChoice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.forcedChoice button {
  min-height: 104px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid #cbd8dc;
  border-radius: 8px;
  padding: 14px;
  background: #f9fbfb;
  color: #30404a;
  text-align: left;
  cursor: pointer;
}

.forcedChoice button > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #cbd8dc;
  border-radius: 50%;
  color: #718087;
  font-size: 12px;
  font-weight: 900;
}

.forcedChoice button strong { font-size: 15px; line-height: 1.55; }
.forcedChoice button:hover { border-color: #0f766e; }
.forcedChoice button.selected { border-color: #0f766e; background: #d8f3ef; color: #0b4d48; }
.forcedChoice button.selected > span { border-color: #0f766e; background: #0f766e; color: white; }

.result {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.shareCard {
  --type-accent: #0f766e;
  --type-soft: #e6f7f3;
  min-height: 700px;
  padding: clamp(28px, 5vw, 56px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 34px;
  background:
    linear-gradient(135deg, var(--type-soft), rgba(255, 253, 249, 0.98) 72%),
    #ffffff;
  position: relative;
  overflow: hidden;
}

.shareCard::after {
  content: "";
  position: absolute;
  right: -130px;
  bottom: -180px;
  width: 460px;
  height: 460px;
  border: 1px solid color-mix(in srgb, var(--type-accent) 30%, transparent);
  border-radius: 50%;
}

.shareCardHeader {
  position: relative;
  z-index: 1;
  color: var(--type-accent);
  font-size: 15px;
  letter-spacing: 0;
}

.shareCardHeader small {
  color: #718087;
  font-size: 11px;
  font-weight: 850;
}

.resultStage {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(340px, 430px);
  gap: clamp(30px, 6vw, 74px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.typeBlock { position: relative; z-index: 1; }
.typeBlock p { margin: 0 0 8px; color: #52616b; font-weight: 800; }
.typeBlock h2 { margin: 0; font-size: clamp(82px, 14vw, 176px); line-height: 0.86; color: var(--type-accent); letter-spacing: 0; }
.typeBlock strong { display: block; margin-top: 22px; font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
.typeBlock > small {
  display: block;
  margin-top: 7px;
  color: #52616b;
  font-size: 16px;
  font-weight: 750;
}

.typeVisual {
  margin: 0;
  justify-self: end;
  width: min(100%, 430px);
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid color-mix(in srgb, var(--type-accent) 22%, transparent);
  box-shadow: 0 28px 64px rgba(32, 49, 57, 0.13);
  overflow: hidden;
  position: relative;
}

.typeVisual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zodiacBadge {
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.7);
}

.zodiacBadge > span:first-child {
  color: #c2410c;
  font-size: 23px;
  line-height: 1;
}

.zodiacBadge b,
.zodiacBadge small { display: block; }
.zodiacBadge b { color: #1f2933; font-size: 13px; }
.zodiacBadge small { color: #718087; font-size: 9px; font-weight: 800; }
.zodiacBadge em { color: #718087; font-size: 11px; font-style: normal; font-weight: 800; }

.keywordRow {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
  position: relative;
  z-index: 1;
}

.keywordRow span {
  border-color: rgba(15, 118, 110, 0.18);
  background: rgba(255, 255, 255, 0.64);
  color: #0b4d48;
  font-weight: 800;
}

.personalityStory {
  max-width: 850px;
  border-top: 1px solid color-mix(in srgb, var(--type-accent) 20%, transparent);
  padding-top: 22px;
  position: relative;
  z-index: 1;
}

.personalityStory > span {
  display: block;
  margin-bottom: 7px;
  color: var(--type-accent);
  font-size: 10px;
  font-weight: 900;
}

.personalityStory > p {
  margin: 0;
  color: #52616b;
  font-size: 18px;
  line-height: 1.85;
}

.resultConfidencePanel {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: 24px;
  align-items: center;
  border-top: 1px solid #d7e0e4;
  border-bottom: 1px solid #d7e0e4;
  padding: 18px 4px;
}

.resultConfidencePanel div { display: grid; gap: 3px; }
.resultConfidencePanel span { color: #c2410c; font-size: 12px; font-weight: 900; }
.resultConfidencePanel strong { color: #1f2933; font-size: 18px; }
.resultConfidencePanel p { margin: 0; color: #52616b; line-height: 1.65; }

.sectionHeading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  gap: 6px 28px;
  align-items: end;
  padding: 30px 4px 4px;
}

.sectionHeading p {
  grid-column: 1 / -1;
  margin: 0;
  color: #c2410c;
  font-size: 13px;
  font-weight: 900;
}

.sectionHeading h2 {
  margin: 0;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.08;
  letter-spacing: 0;
}

.sectionHeading > span { color: #52616b; line-height: 1.65; }

.resultGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.profilePanel,
.dimensionPanel { padding: 20px; }
.profilePanel h3,
.dimensionPanel h3 { margin: 0 0 14px; font-size: 18px; }
.profilePanel p { margin: 0; color: #52616b; line-height: 1.75; }
.profilePanel ul { margin: 0; padding-left: 20px; color: #52616b; line-height: 1.75; }
.pillCloud { display: flex; flex-wrap: wrap; gap: 10px; }
.pillCloud span { background: #f9fbfb; font-weight: 800; }
.aiPanel { background: linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(194, 65, 12, 0.08)), rgba(255, 255, 255, 0.88); }

.zodiacAnalysis {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 14px;
}

.zodiacIdentity {
  min-height: 230px;
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 18px;
  align-items: center;
  border: 1px solid #d7e0e4;
  border-radius: 8px;
  padding: 24px;
  background:
    linear-gradient(140deg, rgba(194, 65, 12, 0.11), rgba(255, 255, 255, 0.88)),
    #ffffff;
  box-shadow: 0 18px 45px rgba(32, 49, 57, 0.08);
}

.zodiacIdentity > span {
  color: #c2410c;
  font-size: 88px;
  line-height: 1;
  text-align: center;
}

.zodiacIdentity p { margin: 0 0 6px; color: #0f766e; font-size: 12px; font-weight: 900; }
.zodiacIdentity h3 { margin: 0 0 10px; font-size: 32px; }
.zodiacIdentity div > span { color: #52616b; line-height: 1.65; }

.fusionHeading { padding-top: 36px; }

.fusionPanel {
  border-top: 1px solid rgba(15, 118, 110, 0.22);
  border-bottom: 1px solid rgba(15, 118, 110, 0.22);
  padding: 30px 0;
}

.fusionIntro {
  max-width: 820px;
  padding: 0 4px 24px;
}

.fusionIntro > span { color: #c2410c; font-size: 12px; font-weight: 900; }
.fusionIntro h3 { margin: 7px 0 10px; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; }
.fusionIntro p { margin: 0; color: #52616b; font-size: 17px; line-height: 1.75; }

.fusionGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.fusionPanel + .zodiacAnalysis { margin-top: 14px; }

.fusionGrid article {
  min-height: 210px;
  border: 1px solid #d7e0e4;
  border-radius: 8px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 36px rgba(32, 49, 57, 0.07);
}

.fusionGrid article > span { color: #c2410c; font-size: 13px; font-weight: 900; }
.fusionGrid h4 { margin: 10px 0 9px; font-size: 19px; }
.fusionGrid p { margin: 0; color: #52616b; line-height: 1.75; }

.bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.bars article {
  border: 1px solid #d7e0e4;
  border-radius: 8px;
  padding: 14px;
  background: #f9fbfb;
}

.barHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.barHead span { color: #52616b; }
.barHead b { color: #1f2933; }
.bars p { color: #52616b; line-height: 1.55; margin: 12px 0 0; font-size: 14px; }
.dimensionLabels {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  color: #52616b;
  font-size: 12px;
}
.dimensionLabels strong { color: var(--ink); font-size: 13px; }
.dimensionLabels span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.dimensionScale {
  height: 10px;
  display: flex;
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 999px;
  background: #dbe4e7;
}
.dimensionScale i { background: #d6a04f; }
.dimensionScale b { background: var(--teal); }
.dimensionScale > span {
  width: 2px;
  height: 16px;
  position: absolute;
  left: 50%;
  top: -3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(31, 41, 51, 0.16);
}
.dimensionResult.balanced { border-color: #d6a04f; background: #fffaf0; }
.profileHint { margin-bottom: 10px !important; font-size: 13px; }
.resultDetails summary { color: var(--ink); font-size: 18px; font-weight: 850; cursor: pointer; }
.resultDetails[open] summary { margin-bottom: 12px; }
.shareTools { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 0 20px; }

.posterPage {
  --type-accent: #0f766e;
  --type-soft: #e6f7f3;
  max-width: 1180px;
  margin: 0 auto;
}

.posterToolbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  gap: 20px;
  align-items: center;
  margin-bottom: 18px;
}

.posterToolbar > div { text-align: center; }
.posterToolbar p { margin: 0; color: #1f2933; font-size: 18px; font-weight: 900; }
.posterToolbar span { display: block; margin-top: 4px; color: #718087; font-size: 13px; }
.posterToolbar .primaryAction { justify-self: end; }
.posterToolbar .posterBack { justify-self: start; }

.posterWorkspace {
  min-height: calc(100vh - 170px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  border: 1px solid #d5dfe1;
  border-radius: 8px;
  padding: clamp(20px, 5vw, 56px);
  background: #e9eff0;
}

.posterCard {
  container-type: inline-size;
  width: min(100%, 600px);
  max-width: 600px;
  min-width: 0;
  justify-self: center;
  aspect-ratio: 3 / 4;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  gap: clamp(10px, 2.2cqi, 18px);
  padding: clamp(22px, 6cqi, 40px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--type-accent) 25%, #d7e0e4);
  border-radius: 8px;
  background: #fffdf9;
  box-shadow: 0 30px 80px rgba(32, 49, 57, 0.18);
}

.posterCardHeader,
.posterFooter {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.posterCardHeader span { color: var(--type-accent); font-size: clamp(11px, 2.8cqi, 16px); font-weight: 900; }
.posterCardHeader small,
.posterFooter small { color: #718087; font-size: clamp(8px, 2cqi, 11px); font-weight: 750; }

.posterIdentity { text-align: center; }
.posterIdentity p { margin: 0 0 3px; color: #718087; font-size: clamp(10px, 2.4cqi, 14px); font-weight: 800; }
.posterIdentity h1 {
  margin: 0;
  color: var(--type-accent);
  font-size: clamp(68px, 19cqi, 116px);
  line-height: 0.9;
  letter-spacing: 0;
}
.posterIdentity strong { display: block; margin-top: 9px; color: #1f2933; font-size: clamp(22px, 6cqi, 36px); line-height: 1.1; }
.posterIdentity span { display: block; margin-top: 4px; color: #718087; font-size: clamp(11px, 2.8cqi, 16px); font-weight: 750; }

.posterVisual {
  min-height: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--type-soft);
}

.posterVisual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.posterVisual figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  border: 1px solid color-mix(in srgb, var(--type-accent) 24%, #ffffff);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.92);
  color: #52616b;
  font-size: clamp(9px, 2.2cqi, 12px);
  font-weight: 850;
}

.posterKeywords { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.posterKeywords span {
  border: 1px solid color-mix(in srgb, var(--type-accent) 22%, #d7e0e4);
  border-radius: 999px;
  padding: 6px 11px;
  background: var(--type-soft);
  color: var(--type-accent);
  font-size: clamp(9px, 2.4cqi, 13px);
  font-weight: 850;
}

.posterCard blockquote {
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--type-accent) 20%, #d7e0e4);
  padding-top: 12px;
  color: #46565f;
  font-size: clamp(11px, 2.8cqi, 16px);
  line-height: 1.65;
  text-align: center;
}

.posterFooter { padding-top: 2px; }
.posterFooter > div { min-width: 0; }
.posterFooter span,
.posterFooter strong { display: block; color: var(--type-accent); font-size: clamp(9px, 2.3cqi, 13px); font-weight: 900; }
.posterFooter strong { margin-top: 2px; color: var(--ink); }
.posterFooter small { max-width: 58%; overflow-wrap: anywhere; text-align: right; line-height: 1.3; }
.posterActions { display: flex; justify-content: center; gap: 10px; padding: 18px 0 4px; }

.actionToast {
  max-width: calc(100vw - 32px);
  min-height: 44px;
  display: flex;
  align-items: center;
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  transform: translate(-50%, 18px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 10px 16px;
  background: #173d3a;
  color: white;
  box-shadow: 0 16px 40px rgba(31, 41, 51, 0.22);
  font-size: 14px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.actionToast[data-tone="error"] { background: #8a3328; }
.actionToast.visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 900px) {
  main { padding: 18px; }
  .intro { min-height: auto; display: block; padding: 24px 0; }
  .heroVisual { min-height: 700px; margin-top: 24px; }
  .mainPreview { width: calc(100% - 48px); left: 24px; top: 24px; }
  .insightCard { left: 24px; right: auto; top: 382px; width: calc(50% - 30px); }
  .aiPreview { right: 24px; bottom: 128px; width: calc(50% - 30px); }
  .careerPreview { left: 24px; bottom: 34px; width: calc(50% - 30px); }
  .posterPreview { right: 24px; bottom: 34px; width: calc(50% - 30px); }
  .topbar, .testLayout { display: block; }
  .resultStage { grid-template-columns: 1fr; }
  .typeVisual { justify-self: center; max-width: 300px; }
  .progressBox { margin-top: 18px; }
  .panel { position: static; margin-bottom: 16px; }
  .resultGrid, .bars, .zodiacAnalysis { grid-template-columns: 1fr; }
  .fusionGrid { grid-template-columns: 1fr; }
  .sectionHeading { grid-template-columns: 1fr; }
  .sectionHeading p { grid-column: auto; }
  .posterToolbar { grid-template-columns: 1fr auto; }
  .posterToolbar > div { grid-column: 1 / -1; grid-row: 1; }
  .posterToolbar .posterBack { grid-column: 1; grid-row: 2; }
  .posterToolbar .primaryAction { grid-column: 2; grid-row: 2; }
}

@media (max-width: 560px) {
  main { padding: 14px; }
  .introCopy h1 { font-size: 44px; }
  .lead { font-size: 17px; }
  .primaryAction, .ghostAction { width: 100%; }
  .introActions { display: grid; }
  .testModeSelector { grid-template-columns: 1fr; }
  .monthControl { grid-template-columns: 1fr 1fr; }
  .zodiacMatch { grid-column: 1 / -1; }
  .heroVisual { min-height: 780px; padding: 18px; }
  .mainPreview { width: calc(100% - 36px); left: 18px; top: 18px; padding: 16px; }
  .previewContent { grid-template-columns: 112px 1fr; gap: 12px; }
  .previewContent img { width: 112px; }
  .previewContent h2 { font-size: 48px; }
  .previewContent strong { font-size: 18px; }
  .insightCard, .aiPreview, .careerPreview, .posterPreview {
    left: 18px;
    right: 18px;
    width: auto;
  }
  .insightCard { top: 390px; }
  .aiPreview { top: 500px; bottom: auto; }
  .careerPreview { top: 622px; bottom: auto; }
  .posterPreview { top: 710px; bottom: auto; }
  .scale { grid-template-columns: 1fr; }
  .forcedChoice { grid-template-columns: 1fr; }
  .question { padding: 16px; }
  .qhead { grid-template-columns: 36px 1fr; }
  .shareCard { min-height: auto; gap: 26px; }
  .shareCardHeader small { font-size: 9px; }
  .typeBlock strong { margin-top: 16px; }
  .typeVisual { max-width: 260px; }
  .resultConfidencePanel { grid-template-columns: 1fr; gap: 14px; }
  .personalityStory > p { font-size: 16px; line-height: 1.75; }
  .zodiacIdentity { grid-template-columns: 76px 1fr; padding: 18px; }
  .zodiacIdentity > span { font-size: 64px; }
  .keywordRow span, .pillCloud span { padding: 8px 12px; }
  .shareTools { display: grid; }
  .posterToolbar { grid-template-columns: 1fr; gap: 10px; }
  .posterToolbar > div { grid-column: 1; grid-row: 1; }
  .posterToolbar .posterBack { grid-column: 1; grid-row: 2; justify-self: center; }
  .posterToolbar .primaryAction { display: none; }
  .posterToolbar .ghostAction,
  .posterToolbar .primaryAction { width: auto; min-width: 0; padding-inline: 14px; }
  .posterPage,
  .posterWorkspace { width: 100%; min-width: 0; }
  .posterPage { overflow: hidden; }
  .posterWorkspace { min-height: auto; display: flex; justify-content: center; padding: 10px; }
  .posterCard {
    flex: 0 0 calc(100vw - 48px);
    width: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
  }
  .posterVisual figcaption { right: 8px; bottom: 8px; padding: 5px 8px; }
  .posterActions { display: grid; }
}

/* 2026 product redesign: calmer hierarchy, single-question flow, layered report. */
:root {
  --ink: #203038;
  --muted: #617078;
  --line: #d5dfdc;
  --paper: #f5f7f4;
  --surface: #ffffff;
  --teal: #16766e;
  --teal-dark: #0d5d57;
  --teal-soft: #e5f1ee;
  --coral: #ce654c;
  --mustard: #d6a135;
}

html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--paper); overflow-x: hidden; }

main {
  padding: 0;
  background: var(--paper);
}

.eyebrow {
  color: var(--teal);
  font-size: 13px;
  text-transform: uppercase;
}

.intro {
  width: min(1240px, calc(100% - 64px));
  min-height: 100vh;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  gap: 72px;
  padding: 56px 0;
}

.introCopy h1 {
  max-width: 640px;
  font-size: clamp(44px, 5.1vw, 68px);
  line-height: 1.06;
  font-weight: 900;
}

.lead {
  max-width: 580px;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.75;
}

.introStats { margin: 24px 0 20px; }
.introStats span {
  border-radius: 6px;
  background: var(--surface);
  padding: 8px 12px;
  font-size: 14px;
}

.testModeSelector,
.birthSelector { max-width: 560px; }

.testModeOption {
  min-height: 104px;
  background: var(--surface);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.testModeOption:hover { transform: translateY(-2px); }
.testModeOption.selected {
  border-color: var(--teal);
  background: var(--teal-soft);
  box-shadow: inset 0 0 0 1px var(--teal);
}

.monthControl select,
.zodiacMatch { background: var(--surface); }

.primaryAction,
.panel button,
.questionNavButton.primary {
  background: var(--teal);
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.primaryAction:hover,
.panel button:hover,
.questionNavButton.primary:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
}

.heroButton { box-shadow: 0 12px 28px rgba(22, 118, 110, 0.18); }
.trustStrip { margin-top: 18px; }
.trustStrip span { border-color: var(--coral); font-size: 13px; }

.heroVisual {
  min-height: 690px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.heroVisual::before,
.heroVisual::after { display: none; }

#heroPersonalityCard { height: 100%; }

.personalityCard {
  min-height: 642px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  background: var(--surface);
  box-shadow: 0 28px 70px rgba(32, 48, 56, 0.12);
}

.personalityCardHeader {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.personalityCardHeader small { color: var(--coral); font-weight: 900; }

.personalityCardScene {
  display: grid;
  grid-template-columns: minmax(250px, 1.15fr) minmax(170px, 0.85fr);
  gap: 26px;
  align-items: center;
  margin-top: 22px;
}

.personalityCardScene figure {
  min-height: 330px;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #edf4e9;
}

.personalityCardScene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.personalityCardIdentity p { margin: 0; color: var(--muted); font-weight: 800; }
.personalityCardIdentity h2 {
  margin: 8px 0 12px;
  color: var(--teal);
  font-size: clamp(64px, 7vw, 96px);
  line-height: 0.86;
}
.personalityCardIdentity strong { display: block; font-size: 27px; }
.personalityCardIdentity small { display: block; margin-top: 5px; color: var(--muted); font-size: 15px; }
.personalityCardDescription { margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }

.personalityCardKeywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.personalityCardKeywords span {
  border: 1px solid #c9ded9;
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 13px;
  font-weight: 850;
}

.personalityCardDimension {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: auto;
  padding-top: 22px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.personalityCardDimension i {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4ebe9;
}
.personalityCardDimension b { display: block; height: 100%; background: var(--teal); }
.personalityCardDimension strong { color: var(--ink); }

.heroProof {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding: 14px 2px 0;
  color: var(--muted);
  font-size: 13px;
}
.heroProof strong { color: var(--ink); text-align: right; }

.test {
  width: min(1120px, calc(100% - 56px));
  margin: 0 auto;
  padding: 42px 0 64px;
}

.topbar {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.topbar h2 { max-width: 820px; font-size: clamp(24px, 2.6vw, 36px); overflow-wrap: anywhere; }
.progress i { transition: width 420ms cubic-bezier(.22, .8, .3, 1); background: var(--teal); }

.testLayout {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 34px;
  margin-top: 32px;
}

.panel {
  top: 20px;
  align-self: start;
  border: 0;
  border-left: 3px solid var(--coral);
  border-radius: 0;
  padding: 4px 0 4px 20px;
  background: transparent;
  box-shadow: none;
}
.panelStep { color: var(--coral); font-size: 11px; font-weight: 900; }
.panel h3 { margin-top: 8px; font-size: 22px; }
.panel button { margin-top: 16px; }

.questionStage { min-width: 0; }
.questions { min-height: 500px; display: block; }

.question {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(28px, 5vw, 54px);
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(32, 48, 56, 0.08);
}

.questionContext {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.questionContext > span { color: var(--coral); }
.qhead { grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.qhead span { color: var(--coral); font-size: 20px; }
.qhead p { max-width: 700px; font-size: clamp(20px, 2.5vw, 29px); line-height: 1.55; font-weight: 800; }

.scale { margin-top: 42px; gap: 10px; }
.scale button {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  background: #fbfcfb;
  font-size: 13px;
  line-height: 1.35;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.scale button:hover { transform: translateY(-3px); border-color: var(--teal); }
.scaleDot {
  width: 24px;
  height: 24px;
  border: 2px solid #b6c5c1;
  border-radius: 50%;
  background: var(--surface);
}
.scale button.selected { border-color: var(--teal); background: var(--teal-soft); }
.scale button.selected .scaleDot { border: 7px solid var(--teal); }

.forcedChoice { margin-top: 38px; gap: 14px; }
.forcedChoice button {
  min-height: 180px;
  padding: 24px;
  background: #fbfcfb;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.forcedChoice button:hover { transform: translateY(-3px); }
.questionHint { margin: 30px 0 0; color: #7b898e; font-size: 13px; }

.questionNav {
  min-height: 58px;
  display: grid;
  grid-template-columns: 124px 1fr 124px;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
}
.answerSaveFeedback {
  min-height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}
.answerSaveFeedback[data-tone="success"] { color: var(--teal-dark); }
.answerSaveFeedback[data-tone="pending"] { color: #52616b; }
.answerSaveFeedback[data-tone="error"] { color: #8a3328; }
.answerSaveFeedback .textAction { min-height: 44px; color: #8a3328; text-decoration: underline; text-underline-offset: 3px; }
.question[aria-busy="true"] [data-index] { cursor: progress; }
.questionStatus {
  min-width: 0;
  min-height: 46px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.questionStatus:hover,
.questionStatus:focus-visible {
  border-color: var(--line);
  background: var(--surface);
  color: var(--teal-dark);
}
.questionNavButton {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}
.questionNavButton.primary { border-color: var(--teal); color: white; }
.questionNavButton:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.questionStatus:disabled { opacity: 0.58; cursor: wait; }

.questionMapDialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 72px rgba(22, 43, 49, 0.2);
  overflow: auto;
}
.questionMapDialog::backdrop { background: rgba(22, 43, 49, 0.42); backdrop-filter: blur(3px); }
.questionMapDialog[open] { animation: questionMapIn 180ms ease-out; }
.questionMapHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px 20px;
  border-bottom: 1px solid var(--line);
}
.questionMapHeader h2 { margin: 2px 0 5px; font-size: 25px; }
.questionMapHeader > div > span { color: var(--muted); font-size: 14px; font-weight: 750; }
.dialogClose {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.dialogClose:hover { border-color: var(--teal); color: var(--teal-dark); }
.questionMapLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 18px 28px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.questionMapLegend span { display: inline-flex; align-items: center; gap: 7px; }
.questionMapLegend i {
  width: 14px;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
}
.questionMapLegend i.answered { border-color: var(--teal); background: var(--teal); }
.questionMapLegend i.current { border: 2px solid var(--coral); background: var(--surface); }
.questionMapGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  padding: 20px 28px 28px;
}
.questionMapCell {
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.questionMapCell:hover { transform: translateY(-2px); border-color: var(--teal); }
.questionMapCell.answered { border-color: var(--teal); background: var(--teal); color: white; }
.questionMapCell.current { box-shadow: 0 0 0 2px var(--coral); }
.questionMapCell.current.answered { box-shadow: 0 0 0 2px var(--coral), inset 0 0 0 1px white; }

@keyframes questionMapIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.siteFooter {
  width: min(1180px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 30px auto 0;
  border-top: 1px solid rgba(122, 143, 151, 0.28);
  padding: 22px 0 4px;
  color: #687780;
  font-size: 12px;
}
.siteFooter p { margin: 0; }
.siteFooter nav { display: flex; flex-wrap: wrap; gap: 4px; }
.siteFooter button {
  min-height: 44px;
  border: 0;
  padding: 0 10px;
  background: transparent;
  color: #52616b;
  font-weight: 800;
  cursor: pointer;
}
.siteFooter button:hover { color: #0b605a; text-decoration: underline; text-underline-offset: 4px; }

.infoDialog {
  width: min(660px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid #d7e0e4;
  border-radius: 8px;
  background: #fffdf9;
  color: #1f2933;
  box-shadow: 0 24px 72px rgba(22, 43, 49, 0.2);
  overflow: auto;
}
.infoDialog::backdrop { background: rgba(22, 43, 49, 0.42); backdrop-filter: blur(3px); }
.infoDialog[open] { animation: questionMapIn 180ms ease-out; }
.infoDialogHeader {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #d7e0e4;
  padding: 24px 28px 19px;
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(8px);
}
.infoDialogHeader h2 { margin: 2px 0 0; font-size: 25px; }
.infoDialogBody { padding: 0 28px 26px; }
.infoDialogBody section { padding: 24px 0; border-bottom: 1px solid #e4eaed; outline: none; }
.infoDialogBody section:focus h3 { color: #0f766e; }
.infoDialogBody h3 { margin: 0 0 10px; font-size: 17px; }
.infoDialogBody p { margin: 7px 0 0; color: #52616b; font-size: 14px; line-height: 1.75; }
.infoDialogBody .trademarkNote { margin-top: 22px; font-size: 11px; color: #7b898e; }

.choiceAccepted { animation: choicePulse 320ms ease; }
.questionEnterForward { animation: questionForward 360ms cubic-bezier(.22, .8, .3, 1); }
.questionEnterBack { animation: questionBack 360ms cubic-bezier(.22, .8, .3, 1); }

@keyframes choicePulse {
  50% { transform: translateY(-2px) scale(1.018); }
}
@keyframes questionForward {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes questionBack {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: translateX(0); }
}

.result:not(.hidden) { display: flex; flex-direction: column; }
.result > .shareCard { order: 0; }
.result > .resultQuickNav { order: 1; }
.result > .detailHeading { order: 2; }
.result > .resultConfidencePanel { order: 3; }
.result > .dimensionPanel { order: 4; }
.result > .resultExpandButton { order: 5; }
.result > .mbtiGrid { order: 6; }
.result > .fusionHeading { order: 7; }
.result > .fusionPanel { order: 8; }
.result > .zodiacAnalysis { order: 9; }
.result > .shareTools { order: 10; }

.resultQuickNav {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 18px 0 6px;
}
.resultQuickNav a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.resultQuickNav a:hover { border-color: var(--teal); color: var(--teal-dark); }

.shareCard { background: var(--type-soft); box-shadow: 0 22px 60px rgba(32, 48, 56, 0.1); }
.shareCard::after { display: none; }
.shareCardHeader small { display: none; }
.resultKeywords {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.resultKeywords span {
  border: 1px solid color-mix(in srgb, var(--type-accent) 24%, var(--line));
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--type-accent);
  background: color-mix(in srgb, var(--type-soft) 78%, #fff);
  font-size: 13px;
  font-weight: 850;
}
.resultExpandButton { display: none; }
.resultConfidencePanel { border-left-color: var(--teal); background: var(--surface); }
.meter i { background: var(--teal); transition: width 700ms cubic-bezier(.22, .8, .3, 1); }
.aiPanel { background: var(--teal-soft); }
.sectionHeading { scroll-margin-top: 20px; }

/* Conversion and accessibility pass: faster start, quieter choices, clearer trust. */
:where(button, a, select, [tabindex]):focus-visible {
  outline: 3px solid rgba(206, 101, 76, 0.46);
  outline-offset: 3px;
}

.intro {
  min-height: min(900px, 100vh);
  gap: 54px;
  padding: 34px 0;
}

.introCopy h1 {
  max-width: 590px;
  font-size: clamp(40px, 4.4vw, 58px);
  line-height: 1.08;
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
}

.headlineKeep { white-space: nowrap; }

.lead {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.65;
}

.introStats { margin: 18px 0 14px; }
.testModeSelector {
  max-width: 560px;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  gap: 8px;
  margin-bottom: 14px;
}

.testModeSelector legend { margin-bottom: 7px; }
.testModeOption {
  min-height: 76px;
  align-content: center;
  padding: 11px 13px;
}

.testModeOption strong { font-size: 14px; }
.testModeOption small { color: #52616b; }
.deepModeOption {
  border-color: #9dafb3;
  border-style: dashed;
  background: transparent;
}
.deepModeOption span { color: #3f555d; }
.deepModeOption strong { font-size: 13px; }
.deepModeOption small { color: #455a62; }
.deepModeOption.selected {
  border-style: solid;
  background: #f0f7f5;
}

.heroButton {
  min-height: 50px;
  padding-inline: 24px;
}

.trustStrip { margin-top: 13px; }
.heroVisual { min-height: 610px; }
.personalityCard { min-height: 584px; padding: 24px; }
.personalityCardScene { margin-top: 16px; }
.personalityCardScene figure { min-height: 292px; }
.personalityCardDescription { margin-top: 18px; }

.testAssurance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  border-bottom: 1px solid var(--line);
  padding: 0 0 15px;
  color: #52616b;
  font-size: 13px;
  font-weight: 750;
}

.testAssurance span:first-child {
  flex: 0 0 auto;
  color: var(--teal-dark);
}

.testAssurance span:first-child::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--teal);
  vertical-align: 1px;
}

.assessmentNotice,
.resultBirthSelector,
.zodiacEmptyState {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.assessmentNotice {
  margin: 18px 0 0;
  border-left: 3px solid var(--mustard);
  padding: 18px 20px;
}

.assessmentNotice strong { display: block; margin-bottom: 7px; font-size: 15px; }
.assessmentNotice p { margin: 4px 0 0; color: #52616b; font-size: 13px; line-height: 1.65; }

.resultBirthSelector {
  margin: 0 0 18px;
  padding: 22px;
}

.resultBirthSelector h3 { margin: 0 0 6px; font-size: 18px; }
.resultBirthSelector > p { margin: 0 0 14px; color: #52616b; font-size: 14px; line-height: 1.6; }
.resultBirthSelector .monthControl { max-width: 620px; }
.zodiacEmptyState {
  margin: 0 0 18px;
  border-style: dashed;
  padding: 20px 22px;
  color: #52616b;
  font-size: 14px;
  line-height: 1.65;
}

.result > .shareCard { order: 0; }
.result > .resultQuickNav { order: 1; }
.result > .detailHeading { order: 2; }
.result > .resultConfidencePanel { order: 3; }
.result > .assessmentNotice { order: 4; }
.result > .dimensionPanel { order: 5; }
.result > .resultExpandButton { order: 6; }
.result > .mbtiGrid { order: 7; }
.result > .fusionHeading { order: 8; }
.result > .resultBirthSelector { order: 9; }
.result > .zodiacEmptyState { order: 10; }
.result > .fusionPanel { order: 11; }
.result > .zodiacAnalysis { order: 12; }
.result > .shareTools { order: 13; }

@media (min-width: 1041px) {
  .intro {
    align-items: start;
    padding-top: 72px;
  }

  .introCopy { padding-top: 14px; }
  .introActions #previewResult { display: none; }
}

@media (max-width: 1040px) {
  .intro {
    width: min(760px, calc(100% - 48px));
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 38px 0 56px;
  }
  .heroVisual { min-height: auto; }
  .personalityCard { min-height: 610px; }
}

@media (max-width: 760px) {
  .intro { width: calc(100% - 32px); max-width: 620px; }
  .test { width: 100vw; max-width: 100vw; margin: 0; padding: 26px 16px 60px; overflow: hidden; }
  .result { width: 100vw; max-width: 100vw; margin: 0; padding: 0 14px 32px; overflow: hidden; }
  .intro { min-height: 0; gap: 34px; padding: 24px 0 48px; }
  .introCopy h1 { max-width: 340px; font-size: 34px; line-height: 1.12; }
  .lead { margin-top: 11px; font-size: 15px; line-height: 1.6; }
  .introStats { gap: 7px; margin: 13px 0 12px; }
  .introStats span { padding: 7px 9px; font-size: 12px; }
  .resumeBanner { align-items: stretch; flex-direction: column; gap: 10px; }
  .resumeActions { display: grid; grid-template-columns: 1fr 1fr; }
  .siteFooter { align-items: flex-start; flex-direction: column; gap: 8px; padding-inline: 2px; }
  .siteFooter nav { margin-left: -10px; }
  .infoDialogHeader { padding: 21px 20px 17px; }
  .infoDialogBody { padding: 0 20px 22px; }
  .testModeSelector { grid-template-columns: 1fr; gap: 7px; margin-bottom: 11px; }
  .testModeOption { min-height: 66px; }
  .deepModeOption { min-height: 56px; grid-template-columns: 1fr auto; column-gap: 10px; }
  .deepModeOption span { grid-column: 1 / -1; }
  .deepModeOption small { align-self: center; text-align: right; }
  .introActions { display: grid; }
  .heroButton { width: 100%; min-height: 52px; }
  .trustStrip { margin-top: 10px; }
  .testAssurance { align-items: flex-start; flex-direction: column; gap: 6px; margin-top: 10px; padding-bottom: 12px; line-height: 1.5; }
  .monthControl { grid-template-columns: 1fr 1fr; }
  .zodiacMatch { grid-column: 1 / -1; }
  .personalityCard { min-height: auto; padding: 20px; }
  .personalityCardScene { grid-template-columns: 1fr; }
  .personalityCardScene figure { min-height: 280px; }
  .personalityCardIdentity h2 { font-size: 68px; }
  .heroProof { flex-direction: column; }
  .heroProof strong { text-align: left; }
  .topbar,
  .testLayout,
  .questionStage,
  .questions,
  .question,
  .resultStage,
  .personalityStory { width: 100%; max-width: 100%; min-width: 0; }
  .topbar h2 { width: calc(100vw - 32px); max-width: calc(100vw - 32px); word-break: break-all; }
  .testLayout { max-width: none; margin-inline: 0; }
  .topbar { align-items: flex-start; }
  .progressBox { width: 100%; }
  .testLayout { grid-template-columns: 1fr; gap: 0; }
  .panel { display: none; }
  .questions { min-height: 0; }
  .question { min-height: 500px; padding: 24px 20px; }
  .qhead { display: block; }
  .qhead > span { display: block; margin-bottom: 10px; }
  .qhead p { width: 100%; min-width: 0; font-size: 20px; overflow-wrap: anywhere; word-break: break-all; }
  .scale { grid-template-columns: 1fr; margin-top: 26px; }
  .scale button { min-height: 54px; flex-direction: row; justify-content: flex-start; padding: 10px 16px; }
  .scaleDot { width: 20px; height: 20px; }
  .forcedChoice { grid-template-columns: 1fr; }
  .forcedChoice { margin-top: 24px; gap: 10px; }
  .forcedChoice button { min-height: 108px; padding: 18px; }
  .questionNav { width: 100%; grid-template-columns: 76px minmax(0, 1fr) 90px; gap: 8px; }
  .questionNavButton { font-size: 13px; }
  .questionStatus { padding-inline: 4px; font-size: 12px; }
  .questionMapHeader { padding: 22px 20px 17px; }
  .questionMapLegend { padding: 16px 20px 0; gap: 12px; }
  .questionMapGrid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; padding: 18px 20px 22px; }
  .questionMapCell { font-size: 11px; }
  .questionNavButton,
  .questionStatus,
  .scale button,
  .forcedChoice button,
  .resultQuickNav a,
  .resultExpandButton,
  .resultBirthSelector select { min-height: 44px; }
  .assessmentNotice { margin-top: 14px; padding: 16px; }
  .resultBirthSelector { padding: 18px; }
  .resultBirthSelector .monthControl { grid-template-columns: 1fr 1fr; }
  .resultBirthSelector .zodiacMatch { grid-column: 1 / -1; }
  .zodiacEmptyState { padding: 17px 18px; }
  .resultQuickNav { justify-content: flex-start; overflow-x: auto; }
  .resultQuickNav a { white-space: nowrap; }
  .result[data-report-expanded="false"] > .reportExtended { display: none; }
  .resultExpandButton {
    display: block;
    width: 100%;
    margin: 12px 0 4px;
    border: 1px solid var(--teal);
    border-radius: 6px;
    padding: 13px 16px;
    color: var(--teal-dark);
    background: var(--surface);
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
  }
  .resultExpandButton:hover { background: var(--teal-soft); }
  .shareCard { width: calc(100vw - 28px); max-width: calc(100vw - 28px); padding: 28px; }
  .shareCardHeader { min-width: 0; }
  .shareCardHeader small { display: none; }
  .resultStage { grid-template-columns: minmax(0, 1fr); }
  .personalityStory,
  .personalityStory > p {
    display: block;
    width: 280px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
    white-space: normal;
  }
  .personalityStory > p { font-size: 15px; line-height: 1.75; }
}

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