:root { color-scheme: dark; }
.zx-static-opening { margin: 0; color: #f4edde; background: #020a0e; font-family: "Songti SC", "STSong", serif; }
.zx-entrance { min-height: 100svh; display: grid; place-items: center; }
.zx-entrance-frame { width: min(100%, calc(100svh * 563 / 1203)); position: relative; aspect-ratio: 563 / 1203; }
.zx-entrance-picture { display: block; }
.zx-entrance-copy { display: contents; }
#zx-entrance-image { width: 100%; height: auto; display: block; }
.zx-enter { position: absolute; left: 9.3%; top: 86.55%; width: 80.4%; height: 6.65%; min-height: 36px; display: grid; place-items: center; border-radius: 6px; text-decoration: none; }
.zx-enter span { color: transparent; }
.zx-enter:hover { box-shadow: inset 0 0 0 1px #f4edde99; }
.zx-enter:focus-visible { outline: 2px solid #f4edde; outline-offset: 4px; }
.zx-entrance-fallback { display: none; }
.zx-entrance-symbol { display: none; }
:is(.zx-entrance-pending, .zx-entrance-failed) .zx-entrance-fallback { display: block; position: absolute; inset: 22% 12% auto; text-align: center; }
:is(.zx-entrance-pending, .zx-entrance-failed) h1 { font-size: 52px; font-weight: 500; }
:is(.zx-entrance-pending, .zx-entrance-failed) p { font-size: 17px; line-height: 1.8; }
:is(.zx-entrance-pending, .zx-entrance-failed) #zx-entrance-image { visibility: hidden; }
:is(.zx-entrance-pending, .zx-entrance-failed) .zx-enter { border: 1px solid #d6b77c; }
:is(.zx-entrance-pending, .zx-entrance-failed) .zx-enter span { color: #f4edde; font-size: 21px; }

@media (min-width: 760px) and (min-aspect-ratio: 4/3) {
  .zx-entrance-frame { width: min(100%, 240svh); height: 100svh; aspect-ratio: auto; }
  .zx-entrance-picture, #zx-entrance-image { width: 100%; height: 100%; }
  #zx-entrance-image { object-fit: cover; object-position: 68% center; }
  .zx-entrance-copy { position: absolute; left: 7%; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; width: 34%; max-width: 460px; }
  .zx-entrance-copy .zx-entrance-fallback { display: block; position: static; width: 100%; text-align: center; }
  .zx-entrance-symbol { display: block; width: 72px; height: auto; margin: 0 auto 22px; filter: contrast(1.25); mix-blend-mode: screen; }
  .zx-entrance-copy h1 { margin: 0; color: #f4edde; font-size: 104px; line-height: 1.2; font-weight: 500; letter-spacing: 0; white-space: nowrap; text-shadow: 0 2px 16px #020a0e; }
  .zx-entrance-copy p { margin: 18px 0 0; font-size: 22px; line-height: 1.8; letter-spacing: 0; text-shadow: 0 2px 10px #020a0e; }
  .zx-entrance-copy .zx-enter { position: static; width: 80%; height: auto; min-height: 64px; box-sizing: border-box; padding: 12px 24px; border: 1px solid #d6b77c; background: #020a0ecc; }
  .zx-entrance-copy .zx-enter span { color: #f4edde; font-size: 24px; line-height: 1.5; }
}
@media (min-width: 760px) and (max-width: 1100px) and (min-aspect-ratio: 4/3) {
  .zx-entrance-copy { gap: 30px; }
  .zx-entrance-copy h1 { font-size: 80px; }
  .zx-entrance-copy p { font-size: 18px; }
  .zx-entrance-copy .zx-enter { min-height: 56px; }
  .zx-entrance-copy .zx-enter span { font-size: 21px; }
}
@media (min-width: 760px) and (max-height: 540px) and (min-aspect-ratio: 4/3) {
  .zx-entrance-copy { gap: 22px; }
  .zx-entrance-symbol { width: 44px; margin-bottom: 12px; }
  .zx-entrance-copy h1 { font-size: 56px; }
  .zx-entrance-copy p { margin-top: 10px; font-size: 16px; }
  .zx-entrance-copy .zx-enter { min-height: 48px; padding: 8px 16px; }
  .zx-entrance-copy .zx-enter span { font-size: 19px; }
}

body.zx-static-home { --ink: #020a0e; --card: #081317; --moon: #f4edde; --gold: #dbba7a; --gold-dim: #c4a36c; --mist: #aebbb9; color: var(--moon); background: var(--ink); }
.zx-static-home *, .zx-static-home *::before, .zx-static-home *::after { letter-spacing: 0; animation: none !important; transition: none !important; }
.zx-static-home [hidden] { display: none !important; }
.zx-static-home #starfield, .zx-static-home #heroSection, .zx-static-home .confirmed-hero-art, .zx-static-home .idiom-sources, .zx-static-home .home-identity { display: none !important; }
body.zx-static-home .wrap { width: 100%; max-width: 1180px; padding: 0 0 48px; margin: 0 auto; }
body.zx-static-home[data-view-state="new"][data-new-mode="form"] .wrap { padding-top: 0; }
.zx-static-nav { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 26px; }
.zx-static-brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: #f4edde; text-decoration: none; font: 24px/1.2 "Songti SC", "STSong", serif; }
.zx-static-brand img { display: block; object-fit: contain; }
.zx-static-nav-actions { display: flex; align-items: center; gap: 12px; }
.zx-static-nav #day-profile-link, .zx-static-nav #day-chart-switch, .zx-static-profile-fallback { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: #f4edde; background: none; border: 0; padding: 3px 0; text-decoration: none; font: 14px/1.4 var(--sans); white-space: nowrap; }
.zx-static-nav #day-chart-switch { color: #d7bd8a; font-size: 12px; }
.zx-static-nav #day-profile-link svg { flex-shrink: 0; width: 22px; height: 22px; color: #dfc185; stroke-width: 1.5; }
.zx-report-link svg { width: 23px; height: 23px; stroke-width: 1.7; }
.zx-static-home :is(a, button, input, select):focus-visible { outline: 2px solid #f2d298; outline-offset: 4px; }
.zx-static-home #result { padding: 0; margin: 0; }
.zx-static-result-hero { display: grid; grid-template-rows: auto 266px auto; position: relative; }
.zx-static-title { position: relative; z-index: 1; padding: 15px 28px 0; }
.zx-static-home #resultTitle { padding: 0; margin: 0 0 10px; color: #e1c38b; font: 15px/1.5 var(--sans); text-align: left; text-indent: 0; }
.zx-static-home #resultTitle::after { content: ''; display: inline-block; width: 56px; height: 1px; margin: 0 0 4px 16px; background: #b8975966; }
.zx-static-home #dayMasterHero { padding: 0; margin: 0; text-align: left; }
.zx-static-home #rzChars { font: 500 72px/1.15 "Songti SC", "STSong", "Noto Serif CJK SC", serif; color: #f4edde; background: none; -webkit-text-fill-color: currentColor; text-indent: 0; text-shadow: none; }
.zx-static-home #rzImage { font: 20px/1.5 "Songti SC", "STSong", serif; margin: 1px 0 0; text-indent: 0; }
.zx-static-home .zx-static-scene { position: relative; margin: 0; min-width: 0; }
#zx-static-art { display: block; position: absolute; bottom: -6px; width: 100%; height: 316px; object-fit: cover; object-position: center; mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 89%, transparent); }
.zx-static-result-hero[data-stem="ren"] #zx-static-art { height: 276px; bottom: 0; }
.zx-static-art-error { position: absolute; inset: auto 28px 90px; color: #aebbb9; font-size: 14px; text-align: center; }
.zx-static-home .confirmed-hero { padding: 5px 28px 0; border: 0; margin: 0; text-align: left; }
#zx-static-source { color: #e4c999; font: 16px/1.5 var(--sans); margin: 0 0 11px; }
.zx-static-home .idiom-composition { container-type: normal; width: auto; max-width: none; margin: 0 0 12px; }
.zx-static-home #confirmedJudgement { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 .12em; font: 500 30px/1.4 "Songti SC", "STSong", "Noto Serif CJK SC", serif; color: #f4edde; text-shadow: none; width: auto; text-align: left; }
.zx-static-home #confirmedJudgement :is(.idiom-group, .idiom-line, .idiom-char) { display: inline; opacity: 1; filter: none; transform: none; }
.zx-static-home #confirmedJudgement .idiom-group { white-space: nowrap; }
.zx-static-home #confirmedJudgement .idiom-divider { display: inline; color: inherit; font: inherit; }
.zx-static-home #confirmedExplanation { text-align: left; max-width: none; color: #d6dcd7; font: 17px/1.75 var(--sans); margin: 0; }
.zx-static-links { margin-top: 19px; }
.zx-report-link { display: flex; justify-content: center; align-items: center; gap: 20px; width: 100%; min-height: 52px; box-sizing: border-box; border: 1px solid #edd39f; border-radius: 6px; background: #d6b177; box-shadow: inset 0 1px 0 #fff4; color: #18140c; text-decoration: none; font: 500 18px/1.4 var(--sans); padding: 10px 14px; }
.zx-report-link:hover { background: #e2c18b; }
.zx-save-link { display: block; margin: 8px auto 0; min-height: 44px; padding: 5px 0; border: 0; border-bottom: 1px solid #b79561; background: none; color: #dbba7a; cursor: pointer; font: 17px/1.4 var(--sans); }
.zx-static-home #confirmedHome { padding: 30px 28px 0; }
.zx-static-home .confirmed-entry { padding-top: 0; border-top: 0; }
.zx-static-home .confirmed-section h3 { font: 500 24px/1.5 "Songti SC", "STSong", serif; color: #f4edde; }
.zx-static-home .confirmed-entry .reading-icon { display: none; }
.zx-static-home .confirmed-entry .reading-section-heading::after { content: ''; height: 1px; width: 58px; background: #b8975966; }
.zx-static-home #reportPreview, .zx-static-home #shareGate { margin: 25px 28px 0; scroll-margin-top: 20px; }
.zx-static-home #reportPreview { padding-inline: 0; }
.zx-static-home .zx-static-method { padding: 18px 0; }
.zx-static-home .zx-static-method #rzSub { font-size: 12px; line-height: 1.8; }
.zx-static-home .zx-static-name { padding: 0 28px; border: 0; margin: 16px 0 0; }
.zx-static-home .zx-static-name .zx-name-help { display: none; }
.zx-static-home .zx-static-name strong { font-size: 12px; font-weight: 400; color: #aebbb9; }
.zx-static-home .zx-static-name br { display: none; }
.zx-static-home #resultPrecision { margin: 12px 28px; }
.zx-static-home #introSection { max-width: 520px; margin: 25px auto 20px; padding: 0 28px; }
.zx-static-home #scrollCue { display: block; width: 100%; min-height: 52px; margin: 22px 0; padding: 12px 16px; color: #18140c; background: #d6b177; border: 1px solid #edd39f; border-radius: 6px; font: 500 18px/1.4 var(--sans); cursor: pointer; }
.zx-static-home #formCard, .zx-static-home #chartChooser, .zx-static-home #resumePanel { max-width: 520px; margin: 20px auto; padding: 26px 28px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.zx-static-home #formTitle { font: 500 30px/1.5 "Songti SC", "STSong", serif; letter-spacing: 0; text-indent: 0; }
.zx-static-home #formCard .row2 { align-items: stretch; }
.zx-static-home #formCard .row2 .field { display: flex; flex-direction: column; }
.zx-static-home #formCard .row2 label { flex: 1; }
.zx-static-home .card input, .zx-static-home .card select { background-color: #08171b; color: #f4edde; border-color: #566666; }
.zx-static-home #cancelChartForm { position: static; margin: 0 28px; }
.zx-static-home footer { max-width: 620px; margin: 34px auto 0; padding-inline: 28px; }
/* Mobile reading: preserve the artwork, give the text more usable line width. */
@media (max-width: 759px) {
  .zx-static-nav { min-height: 64px; padding: 10px 20px; }
  .zx-static-brand { font-size: 22px; }
  .zx-static-title { padding: 12px 20px 0; }
  .zx-static-home #resultTitle { font-size: 13px; margin-bottom: 6px; }
  .zx-static-home #rzChars { font-size: 56px; }
  .zx-static-home #rzImage { font-size: 18px; }
  .zx-static-home .zx-static-result-hero { grid-template-rows: auto 224px auto; }
  .zx-static-home #zx-static-art { height: 274px; }
  .zx-static-home [data-stem="ren"] #zx-static-art { height: 234px; }
  .zx-static-home .confirmed-hero { padding: 4px 20px 0; }
  #zx-static-source { font-size: 14px; margin-bottom: 8px; }
  .zx-static-home #confirmedJudgement { font-size: 24px; line-height: 1.4; }
  .zx-static-home .idiom-composition { margin-bottom: 10px; }
  .zx-static-home #confirmedExplanation { font-size: 15px; line-height: 1.8; }
  .zx-static-links { margin-top: 16px; }
  .zx-report-link, .zx-static-home #scrollCue { min-height: 48px; font-size: 16px; }
  .zx-save-link { font-size: 14px; margin-top: 4px; }
  .zx-static-home #confirmedHome { padding: 24px 20px 0; }
  .zx-static-home .confirmed-section { padding: 24px 0; }
  .zx-static-home .confirmed-entry { padding-top: 0; }
  .zx-static-home .confirmed-section h3 { font-size: 20px; line-height: 1.5; margin-bottom: 14px; }
  .zx-static-home .confirmed-scenes { gap: 22px; margin-top: 0; }
  .zx-static-home .confirmed-scene { padding-left: 26px; }
  .zx-static-home .confirmed-scene h4 { font-size: 16px; line-height: 1.6; text-wrap: pretty; }
  .zx-static-home :is(.confirmed-scene p,.confirmed-overuse-item p,.reading-preview-questions) { font-size: 15px; line-height: 1.8; }
  .zx-static-home .confirmed-scene p { margin-top: 6px; }
  .zx-static-home .confirmed-meta { margin-top: 16px; }
  .zx-static-home .reading-preview-questions { gap: 10px; padding-left: 1.4em; }
  .zx-static-home .reading-preview-questions li { padding-left: 3px; }
  .zx-static-home .reading-preview-note { margin-top: 14px; font-size: 14px; line-height: 1.8; }
  .zx-static-home #confirmedReadingPreview { padding-bottom: 16px; }
  .zx-static-home .zx-static-method { padding: 8px 0 12px; }
  .zx-static-home .zx-static-name { padding: 0; margin: 0; }
  .zx-static-home .zx-static-method .method-reference { margin-top: 8px; text-align: left; }
  .zx-static-home #reportPreview, .zx-static-home #shareGate { margin: 20px 20px 0; }
  .zx-static-home #reportPreview { padding-top: 24px; }
  .zx-static-home #reportPreviewTitle { font-size: 20px; line-height: 1.5; }
  .zx-static-home .report-excerpt { font-size: 15px; line-height: 1.8; }
  .zx-static-home .report-excerpt.is-annual .report-excerpt-context { font-size: 15px; line-height: 1.8; }
  .zx-static-home #introSection { margin-block: 20px 16px; padding-inline: 20px; }
  .zx-static-home #formCard, .zx-static-home #chartChooser, .zx-static-home #resumePanel { margin-block: 16px; padding: 20px; }
  .zx-static-home #formCard h2 { font-size: 24px; }
  .zx-static-home footer { margin-top: 24px; padding-inline: 20px; }
}
@media (max-width: 359px) {
  .zx-static-nav { padding-inline: 20px; gap: 8px; }
  .zx-static-title, .zx-static-home .confirmed-hero { padding-inline: 20px; }
  .zx-static-home #confirmedJudgement { font-size: 22px; }
  .zx-static-nav #day-profile-link, .zx-static-profile-fallback { font-size: 12px; }
}
@media (min-width: 760px) {
  .zx-static-nav { min-height: 96px; padding: 24px 40px; }
  .zx-static-brand { font-size: 28px; }
  .zx-static-nav #day-profile-link, .zx-static-profile-fallback { font-size: 16px; }
  .zx-static-result-hero { min-height: 660px; grid-template-columns: 44% 56%; grid-template-rows: auto 1fr; }
  .zx-static-title { grid-column: 1; grid-row: 1; padding: 30px 0 0 40px; }
  .zx-static-home #rzChars { font-size: 94px; }
  .zx-static-home #rzImage { font-size: 23px; }
  .zx-static-home .zx-static-scene { grid-column: 2; grid-row: 1 / 3; align-self: stretch; }
  #zx-static-art, .zx-static-result-hero[data-stem="ren"] #zx-static-art { inset: 0; height: 100%; width: 100%; object-fit: contain; mask-image: linear-gradient(to right, transparent, #000 9%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent); mask-composite: intersect; }
  .zx-static-result-hero[data-stem="ren"] #zx-static-art { object-fit: cover; object-position: 53% center; }
  .zx-static-home .confirmed-hero { grid-column: 1; grid-row: 2; padding: 35px 18px 28px 40px; align-self: start; }
  .zx-static-home #confirmedJudgement { font-size: 33px; }
  .zx-static-home #confirmedExplanation { max-width: 410px; font-size: 18px; line-height: 1.85; }
  .zx-static-links { max-width: 370px; margin-top: 28px; }
  .zx-static-home #confirmedHome { padding: 36px 40px 0; }
  .zx-static-home .confirmed-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .zx-static-home #reportPreview, .zx-static-home #shareGate { margin-inline: 40px; }
  .zx-static-home .zx-static-name { padding-inline: 40px; }
  .zx-static-home #resultPrecision { margin-inline: 40px; }
}