/* Four-area reading, scoped to the result experience. */
.reading-result .traits { gap: 9px; }
.reading-result .traits span { display: inline-flex; align-items: center; background: #fffef7; border: 1px solid #b7c8a8; border-radius: 999px; font-size: 12px; font-weight: 600; padding: 7px 14px; color: #355b42; }
.reading-tabs a:first-child { border-color: transparent; font-weight: 500; }
.reading-tabs a { font-weight: 500; }
.reading-tabs a:hover, .reading-tabs a:focus-visible { border-color: #305c4c; }
.four-area-reading { margin-top: 38px; }
.reading-area { padding-block: 26px 50px; scroll-margin-top: 24px; }
.reading-area + .reading-area { border-top: 1px solid #cdd8c9; margin-top: 20px; padding-top: 54px; }
.reading-area-heading { display: flex; align-items: center; gap: 17px; margin-bottom: 23px; }
.reading-area-heading h2 { margin: 0; font: 500 37px/1.2 "Playfair Display",Georgia,serif; letter-spacing: -.025em; }
.area-index { font: 12px "DM Mono",monospace; color: #526c55; background: #e9eee1; border: 1px solid #ced9c2; border-radius: 50%; width: 37px; height: 37px; display: grid; place-items: center; }
.area-symbol { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: auto; color: #637e68; font-size: 32px; }
.area-symbol svg { width: 1em; height: 1em; }
.area-introduction { font-size: 17px; line-height: 1.95; color: #415d4e; max-width: 950px; margin: 27px 0; }
.area-lead { margin: 28px 0 34px; padding: clamp(24px, 3vw, 36px); background: #ecefe3; border: 1px solid #dfe4d7; border-radius: 12px; }
.area-lead .area-introduction { margin: 0; }
.area-lead-illustrated { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
/* Match the overview's paper blending without changing the supplied artwork files. */
.area-artwork { display: block; width: 100%; margin-inline: auto; height: auto; aspect-ratio: 1; border-radius: 12px; mix-blend-mode: multiply; filter: saturate(.78) contrast(.96); }
.area-lead-illustrated .area-introduction { margin: 0; }
.area-pattern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 29px; }
.area-patterns { background: #fffefa; border: 1px solid #d9e0d2; border-radius: 9px; padding: 26px; }
.area-patterns > h3 { display: flex; gap: 11px; align-items: center; margin: 0 0 25px; font-size: 17px; }
.area-patterns > h3 > span { display: grid; place-items: center; background: #e8efdf; color: #41684b; border-radius: 50%; width: 27px; height: 27px; font-size: 20px; flex-shrink: 0; }
.area-challenges { background: #f7efe5; border-color: #e4d8c6; }
.area-challenges > h3 > span { background: #efe0c9; color: #805c33; }
.area-patterns article + article { border-top: 1px solid #dbe2d2; margin-top: 20px; padding-top: 20px; }
.area-challenges article + article { border-color: #e5d7c5; }
.area-patterns h4 { font: 600 15px/1.5 "DM Sans",sans-serif; margin: 0 0 8px; color: #254739; }
.area-patterns p { font-size: 14px; line-height: 1.85; color: #526657; margin: 0; }
.area-practice { display: flex; align-items: flex-start; gap: 17px; margin: 24px 0 28px; padding: 23px 26px; background: #edf1e6; border-radius: 7px; border-left: 3px solid #8cab7f; }
.area-practice-symbol { color: #577f5a; font-size: 26px; }
.area-practice .overview-eyebrow { margin: 0 0 9px; color: #526c50; }
.area-practice h3 { font-size: 16px; margin: 0 0 8px; line-height: 1.5; }
.area-practice p:last-child { color: #4f6557; font-size: 14px; line-height: 1.85; margin: 0; }
.reading-gate { margin-top: 27px; border: 1px solid #cbd7c5; border-radius: 10px; background: #fffefa; overflow: hidden; }
.gate-title { display: flex; align-items: center; gap: 11px; padding: 17px 23px; border-bottom: 1px solid #d9e1d2; background: #f1f5eb; }
.gate-title h3 { font-size: 17px; margin: 0; }
.gate-title > span:last-child { font-size: 11px; margin-left: auto; color: #58734f; }
.gate-key { color: #3d6550; font-size: 22px; }
.gate-preview { position: relative; min-height: 315px; padding: 28px; isolation: isolate; }
.gate-blur { filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; overflow: hidden; }
.gate-sample-chart { display: flex; justify-content: center; gap: 28px; align-items: center; color: #60796c; }
.gate-sample-chart i { width: 55px; height: 52px; background: #d7e1ce; border: 1px solid #adbea0; border-radius: 10px; display: grid; place-items: center; font-style: normal; color: #1f4431; font-size: 25px; }
.gate-sample-lines { display: grid; gap: 12px; margin: 23px auto; max-width: 660px; }
.gate-sample-lines b { background: #b9c7b7; height: 6px; border-radius: 10px; }
.gate-sample-lines b:nth-child(2) { width: 88%; }.gate-sample-lines b:last-child { width: 72%; }
.gate-sample-cards { display: flex; gap: 20px; justify-content: center; }
.gate-sample-cards i { width: 150px; height: 65px; border: 1px solid #becbb7; background: #e7edde; border-radius: 7px; }
.gate-preview::after { content: ""; position: absolute; z-index: 1; inset: 0; background: #f8faf0af; }
.gate-message { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; }
.gate-lock { display: grid; place-items: center; border: 1px solid #adc3a2; background: #edf4e8; width: 38px; height: 38px; border-radius: 50%; font-size: 26px; color: #365d43; margin-bottom: 11px; }
.gate-message h4 { font: 600 22px/1.4 "Playfair Display",Georgia,serif; margin: 0 0 9px; color: #264f39; }
.gate-message p { font-size: 13px; line-height: 1.75; max-width: 440px; margin: 0 0 18px; color: #4a6452; }
.access-unlock { display: inline-flex; gap: 17px; align-items: center; justify-content: center; min-height: 45px; border: 1px solid #245740; border-radius: 6px; background: #285d45; color: #fffef5; padding: 11px 19px; font: 600 13px/1.5 "DM Sans",sans-serif; cursor: pointer; }
.access-unlock:hover { background: #19472f; }
.gate-content { padding: 25px; }
.gate-content > section { margin-block: 25px; scroll-margin-top: 24px; }
.gate-content > section > h3 { font-size: 22px; margin-bottom: 20px; }
.gate-content > .code-group { margin-bottom: 20px; }
body[data-page="results"] .gate-content .code-group { border: 0; background: transparent; padding: 0; }
body[data-page="results"] .gate-content .code-list { display: grid; grid-template-columns: 1fr; gap: 20px; }
body[data-page="results"] .gate-content .code-row { min-width: 0; border-top: 1px solid #d3ddcc; border-bottom: 0; }
body[data-page="results"] .gate-content .code-position-list .code-row { border: 0; }
body[data-page="results"] .gate-content .code-row-title { flex-wrap: wrap; }
body[data-page="results"] .gate-content .code-row-title h4 { flex: 1 0 100%; }
body[data-page="results"] .gate-content .code-group > header { display: none; }
body[data-page="results"] .gate-content .code-group:has(.code-list:empty) { display: none; }
body[data-page="results"] .code-library-section { margin-bottom: 48px; }
body[data-page="results"] .decode-heading h2 { font-size: 37px; }
body[data-page="results"] .reading-trait-invitation #trait-nav-link { color: #2b5d46; font-size: 13px; font-weight: 600; text-underline-offset: 4px; }
.reading-access-dialog { width: min(480px,calc(100% - 36px)); max-height: calc(100dvh - 40px); padding: 29px; margin: auto; border: 1px solid #bfcdb6; border-radius: 13px; background: #fffdf5; color: #214638; box-shadow: 0 28px 90px #19392750; }
.reading-access-dialog::backdrop { background: #152e2b70; backdrop-filter: blur(3px); }
.access-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.access-dialog-head button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #bfcdb6; background: #f1f5e8; color: #315c44; font-size: 26px; cursor: pointer; }
.reading-access-dialog h2 { font: 600 29px/1.3 "Playfair Display",serif; margin: 0 0 16px; }
.reading-access-dialog p { font-size: 14px; color: #526a57; line-height: 1.8; }
.access-included { display: flex; gap: 12px; align-items: flex-start; padding: 16px; margin: 22px 0; border: 1px solid #d2dfc7; border-radius: 7px; background: #f0f5e9; font-size: 13px; line-height: 1.75; }
.reading-access-dialog .access-unlock { width: 100%; margin-top: 8px; }
html:lang(zh-Hant) .reading-area-heading h2, html:lang(zh-Hant) .gate-message h4, html:lang(zh-Hant) .reading-access-dialog h2 { font-family: "PingFang TC","Microsoft JhengHei",sans-serif; letter-spacing: 0; line-height: 1.5; }
@media(max-width:850px) {
  .area-lead-illustrated { grid-template-columns: 1fr; gap: 24px; }
  .area-artwork { width: 40%; }
  .area-pattern-grid { gap: 16px; }
  .area-patterns { padding: 23px; }
  .gate-content { padding: 21px; }
  body[data-page="results"] .gate-content .code-list { grid-template-columns: 1fr; gap: 0; }
}
@media(max-width:600px) {
  .area-artwork { width: 70%; }
  .reading-tabs { gap: 0 20px; }
  .reading-tabs a { min-height: 41px; }
  .reading-result .traits span { font-size: 11px; padding: 6px 12px; }
  .reading-area { padding-block: 15px 30px; }
  .reading-area + .reading-area { margin-top: 12px; padding-top: 37px; }
  .reading-area-heading { gap: 12px; margin-bottom: 21px; }
  .reading-area-heading h2 { font-size: 28px; }
  .area-index { width: 30px; height: 30px; flex-shrink: 0; font-size: 10px; }
  .area-symbol { font-size: 27px; }
  .area-introduction { font-size: 15px; line-height: 1.95; margin: 24px 0; }
  .area-pattern-grid { grid-template-columns: 1fr; gap: 16px; }
  .area-patterns h4 { font-size: 14px; }
  .area-patterns p { font-size: 13px; }
  .area-practice { padding: 21px 18px; gap: 11px; }
  .area-practice h3 { font-size: 15px; }.area-practice p:last-child { font-size: 13px; }
  .gate-title { padding: 15px; gap: 8px; flex-wrap: wrap; }
  .gate-title h3 { font-size: 16px; }.gate-title > span:last-child { font-size: 10px; }
  .gate-preview { min-height: 338px; padding: 20px; }
  .gate-message { padding: 21px; }.gate-message h4 { font-size: 21px; }.gate-message p { font-size: 12px; }
  .gate-sample-chart { gap: 13px; }.gate-sample-chart i { width: 43px; height: 43px; }
  .gate-content { padding: 17px; }
  .gate-content > section > h3 { font-size: 20px; }
  body[data-page="results"] .gate-content .holographic-chart { padding-inline: 0; border: 0; }
  body[data-page="results"] .decode-heading h2 { font-size: 30px; }
  .reading-access-dialog { padding: 24px; }.reading-access-dialog h2 { font-size: 25px; }
}
@media(prefers-reduced-motion:reduce) { .reading-area, .gate-content * { scroll-behavior: auto; } }
@media(max-width:650px) { html:lang(zh-Hant) .calculation-dialog-content h2 { font-size: 24px; line-height: 1.45; } }