@font-face { font-family: "Fraunces"; src: url("/assets/fraunces-display.woff") format("woff"); font-weight: 800; font-display: swap; }

/* The colours of old Chinese painting: paper and ink, azurite (石青) for the West, cinnabar (朱砂) for the East, gold for the
   seam between them. Malachite (石绿) is the buy button and nothing else, so the one thing to press is the one thing that
   colour on the page. */
:root {
  color-scheme: light;
  --bg: #fbf6ea; --panel: #fffdf8; --line: rgba(34, 32, 46, .16); --shadow: 0 1px 2px rgba(70, 50, 20, .06), 0 10px 26px rgba(70, 50, 20, .07);
  --text: #22202e; --muted: #645f55; --gold: #7c611c; --gilt: #d9b860; --west: #27398f; --east: #b53a20;
  --sky-west-1: #1c2a6e; --sky-west-2: #32469e; --sky-east-1: #a32c15; --sky-east-2: #c4472a;
  --buy: #0e7c66;
  --agree: #8fd19e; --lean: #e6c868; --disagree: #b53a20;
  --display: "Fraunces", Georgia, "Noto Serif SC", "Songti SC", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--body); overflow-wrap: break-word; overflow-x: clip; }
a { color: var(--gold); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.12; margin: 1.5em 0 .5em; }
h1 { font-size: clamp(32px, 8vw, 50px); margin-top: .5em; }
h2 { font-size: clamp(25px, 5.5vw, 32px); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }
main { max-width: 680px; margin: 0 auto; padding: 0 16px 48px; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; max-width: 680px; margin: 0 auto; padding: 10px 16px 6px; }
.mark { font: 800 22px var(--display); color: var(--text); text-decoration: none; }
.top nav { display: flex; gap: 0 14px; font-size: 15px; flex-basis: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
@media (max-width: 420px) { .top nav { gap: 0 10px; } }
.lang-menu { position: relative; font-size: 14px; color: var(--muted); }
.lang-menu summary { cursor: pointer; padding: 4px 0 4px 12px; }
.lang-menu ul { position: absolute; right: 0; z-index: 9; margin: 2px 0 0; padding: 6px 0; list-style: none; min-width: 130px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.lang-menu a { display: block; padding: 7px 14px; color: var(--text); text-decoration: none; }
.lang-menu a[aria-current] { font-weight: 700; }
.lang-offer { display: block; padding: 7px 16px; text-align: center; font-size: 14px; color: #fff; background: var(--sky-west-1); text-decoration: none; }
.top nav a { color: var(--muted); text-decoration: none; padding: 4px 0; }
.top nav a:hover { color: var(--text); }
.foot { max-width: 680px; margin: 0 auto; padding: 20px 16px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot a { color: var(--muted); margin-right: 16px; display: inline-block; padding: 2px 0; }
.lede { font-size: 18px; line-height: 1.5; color: #3d3a48; }
.muted, .note { color: var(--muted); font-size: 15px; }
.kicker { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }
.hanzi { font-family: "Noto Serif SC", "Songti SC", "SimSun", serif; }

/* Form */
.person-form { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; box-shadow: var(--shadow); }
.field { margin-bottom: 14px; position: relative; min-width: 0; }
.field label, .field .label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
input, select { width: 100%; min-width: 0; font: inherit; color: var(--text); background: #fff; border: 1px solid rgba(34, 32, 46, .3); border-radius: 9px; padding: 11px 12px; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--west); outline-offset: 2px; }
.date-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(76px, 1fr) minmax(0, 1.15fr); gap: 8px; }
.date-row select { padding-left: 9px; padding-right: 4px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); margin-top: 8px; }
.check input { width: 20px; height: 20px; flex: none; }
.btn { display: inline-block; width: 100%; font: 700 18px var(--body); color: #fff; background: var(--buy); border: 0; border-radius: 12px; padding: 15px 16px; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 8px 18px rgba(14, 124, 102, .26); }
.btn:hover { filter: brightness(1.07); }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid rgba(34, 32, 46, .32); font-weight: 600; box-shadow: none; }
.btn.alt { background: transparent; color: var(--buy); border: 1.5px solid var(--buy); box-shadow: none; }
/* One question at a time. */
.steps-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 14px; }
.steps-bar i { height: 4px; border-radius: 2px; background: var(--line); transition: background .25s; }
.steps-bar i.on { background: var(--buy); }
.stepped .q { display: block; font: 800 24px/1.2 var(--display); color: var(--text); margin-bottom: 10px; }
.step[hidden] { display: none; }
.step.enter { animation: step-in .25s ease-out both; }
.step-actions { display: flex; gap: 6px; align-items: center; }
.step-actions .btn { flex: 1; }
.btn-back { font: 600 15px var(--body); color: var(--muted); background: none; border: 0; padding: 10px; cursor: pointer; }
.go-note { font-size: 16px; line-height: 1.45; margin: 0 0 12px; }
.go-note b.w { color: var(--west); } .go-note b.e { color: var(--east); }
.form-error { color: var(--disagree); font-size: 15px; margin: 8px 0 0; }
p.owned { color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
p.owned a { font-weight: 600; margin-right: 8px; }
.btn-link { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.my-list { list-style: none; padding: 0; margin: 0 0 8px; }
.my-list li { border-bottom: 1px solid var(--line); padding: 10px 0; }
.my-list a { font-weight: 600; }
.my-list small { display: block; color: var(--muted); }
.form-note { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.place-list { position: absolute; z-index: 5; left: 0; right: 0; margin: 4px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 9px; max-height: 260px; overflow-y: auto; box-shadow: var(--shadow); }
.place-list li { padding: 10px 12px; cursor: pointer; font-size: 15px; }
.place-list li[aria-selected="true"], .place-list li:hover { background: #f3ecdc; }

/* Result */
.result { margin-top: 32px; scroll-margin-top: 12px; }
.result > h2:first-of-type { margin-top: .2em; }
.tabs { display: flex; gap: 8px; margin: 16px 0 10px; }
.tab { flex: 1; font: 600 15px var(--body); color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 9px; padding: 9px 6px; cursor: pointer; }
.tab[aria-selected="true"] { color: var(--text); border-color: var(--text); }
.card-frame { display: flex; justify-content: center; }
.card-frame canvas { width: 100%; max-width: 360px; height: auto; border-radius: 12px; display: block; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 360px; margin: 12px auto 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 14px 0; min-width: 0; box-shadow: var(--shadow); }
.panel h3 { margin-top: 0; }
.two { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; }
.two .panel { margin: 0; }
.west h3 { color: var(--west); }
.east h3 { color: var(--east); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
td, th { text-align: left; padding: 5px 6px 5px 0; border-bottom: 1px solid rgba(34, 32, 46, .1); font-weight: 400; }
th { color: var(--muted); font-size: 13px; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; margin-bottom: 12px; }
.pillars div { border: 1px solid var(--line); border-radius: 9px; padding: 8px 2px; }
.pillars small { display: block; color: var(--muted); font-size: 12px; }
.pillars b { display: block; font: 600 25px/1.2 "Noto Serif SC", "Songti SC", "SimSun", serif; }
.bars { margin-top: 10px; }
.bar { display: grid; grid-template-columns: 76px minmax(0, 1fr) 22px; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0; color: var(--muted); }
.bar i { display: block; height: 9px; border-radius: 5px; }
.west .bar i { background: var(--west); }
.east .bar i { background: var(--east); }
.topic { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.topic h3 { margin: 0 0 6px; }
.topic p { margin-bottom: .55em; font-size: 16px; }
.topic b.w { color: var(--west); font-weight: 600; }
.topic b.e { color: var(--east); font-weight: 600; }
.badge { display: inline-block; font-size: 13px; font-weight: 700; border-radius: 6px; padding: 1px 7px; margin-right: 6px; color: #14161f; }
.badge.agree { background: var(--agree); }
.badge.lean { background: var(--lean); }
.badge.disagree { background: var(--disagree); color: #fff; }
.badge.quiet { background: var(--muted); }
.offer { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 12px 0; box-shadow: var(--shadow); }
.offer h3 { margin: 0 0 4px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.offer .price { color: var(--text); font-family: var(--body); font-size: 19px; font-weight: 700; }
.offer .price s { color: var(--muted); font-weight: 400; font-size: 15px; margin-left: 4px; }
.offer.top { border: 2px solid var(--buy); }
.offer.top .kicker { color: var(--buy); }
.offer .inside { margin: 8px 0 12px; padding-left: 18px; font-size: 15px; line-height: 1.45; }
.offer .inside li { margin-bottom: 5px; }
.rare { border-left: 3px solid var(--gilt); padding: 6px 12px; font-size: 16px; }
.rare small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.r-next { margin-top: 28px; }
.linkbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.linkbox .btn { width: auto; }
.examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.examples canvas { width: 100%; height: auto; border-radius: 7px; display: block; }
.examples figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }
.examples figure { margin: 0; min-width: 0; }
.banner { background: rgba(217, 184, 96, .16); border: 1px solid rgba(124, 97, 28, .35); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }

/* Articles */
.answer { font-size: 20px; line-height: 1.5; }
blockquote { margin: 1em 0; padding: 12px 16px; border-left: 3px solid var(--gilt); background: rgba(124, 97, 28, .06); }
blockquote .hanzi { font-size: 21px; display: block; }
.cta { margin: 28px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); }
.cta .btn { margin-top: 6px; }
.grid-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; }
.grid-links a { display: block; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; text-decoration: none; color: var(--text); }
.grid-links small { display: block; color: var(--muted); }
.table-wrap { overflow-x: auto; }
small.src { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.hanzi-s { font-family: "Noto Serif SC", "Songti SC", "SimSun", serif; }
.report blockquote { font-size: 17px; }
.report blockquote a { color: var(--muted); }

/* The one picture: two skies and a seam. */
.mark { display: inline-flex; align-items: center; gap: 8px; }
.mark-icon { width: 22px; height: 22px; flex: none; }
/* The first screen: two actual skies, the West's at night and the East's at dawn, behind the header, the example and the
   form. The gold seam runs down the middle of everything, the form included, because the comparison is the product. */
.frame { position: relative; }
.has-stage .top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; }
.stage { position: relative; overflow: hidden; color: #fff; width: 100vw; margin-left: calc(50% - 50vw); padding-top: 78px;
  background: radial-gradient(ellipse 38% 55% at 50% 58%, rgba(217, 184, 96, .16), transparent 70%),
    linear-gradient(165deg, var(--sky-west-1), var(--sky-west-2)) left / 50% 100% no-repeat,
    linear-gradient(195deg, var(--sky-east-1), var(--sky-east-2)) right / 50% 100% no-repeat; }
.stage::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(transparent, rgba(10, 8, 30, .18)); pointer-events: none; }
.has-stage .mark, .has-stage .lang-menu summary { color: #fff; }
.has-stage .top nav a { color: rgba(255, 255, 255, .82); }
.has-stage .top nav a:hover { color: #fff; }
.has-stage .mark-icon path:first-of-type { stroke: #b4c1ff; }
.has-stage .mark-icon path:last-of-type { stroke: #ffb79a; }
.stage .sky-seam, .stage .sky-node { display: none; }
.hero { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 18px 16px 34px; text-align: center; }
.hero h1 { color: #fff; font-size: clamp(30px, 7.4vw, 56px); margin: 14px auto 10px; max-width: 15em; text-shadow: 0 2px 22px rgba(8, 6, 30, .35); }
.hero .lede { color: rgba(255, 255, 255, .9); margin: 0 auto 20px; max-width: 30em; }
.hero-form { text-align: left; }
.hero .person-form { position: relative; max-width: 520px; margin: 0 auto; border: 0; border-top: 3px solid var(--gilt); box-shadow: 0 2px 6px rgba(8, 6, 30, .2), 0 28px 60px rgba(8, 6, 30, .38); }
.hero .form-note { color: var(--muted); }
.sky { position: absolute; left: 50%; top: 50%; width: clamp(520px, 130vw, 1040px); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .7; }
.sky-half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.sky-half.w { left: 0; } .sky-half.e { right: 0; }
.sky-layer { position: absolute; top: 0; width: 200%; height: 100%; }
.sky-half.w .sky-layer { left: 0; } .sky-half.e .sky-layer { right: 0; }
.sky-wheel { animation: sky-turn 300s linear infinite; will-change: transform; }
.sky-half.e .sky-wheel { animation-direction: reverse; }
.sky-w, .sky-e { fill: none; }
.sky-w { stroke: rgba(255, 255, 255, .3); }
.sky-e { stroke: rgba(255, 240, 225, .36); }
.sky-w text { fill: rgba(255, 255, 255, .7); stroke: none; font-size: 26px; text-anchor: middle; dominant-baseline: central; }
.sky-e text { fill: rgba(255, 240, 225, .78); stroke: none; font-size: 21px; text-anchor: middle; dominant-baseline: central; font-family: "Noto Serif SC", "Songti SC", SimSun, serif; }
.sky-e .tri { stroke: rgba(255, 240, 225, .75); stroke-width: 3; }
.sky-stars { fill: rgba(255, 255, 255, .85); }
.sky-clouds { fill: none; stroke: rgba(255, 240, 225, .3); }
.sky-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--gilt); }
.sky-node { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--gilt); }
@keyframes sky-turn { to { transform: rotate(360deg); } }

/* The example on the first screen: what each system says about one real person, and then about the visitor. */
.says { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: end; transition: opacity .4s; }
/* The gold seam between the two answers, ending in a node above the name. */
.says::before { content: ""; position: absolute; left: 50%; top: 26px; bottom: 34px; width: 1.5px; margin-left: -.75px; background: linear-gradient(transparent, var(--gilt)); }
.says::after { content: ""; position: absolute; left: 50%; bottom: 30px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gilt); box-shadow: 0 0 12px var(--gilt); }
.says.turning { opacity: 0; }
.says-side { padding: 0 18px; }
.says-side.w { text-align: right; }
.says-side small { display: block; font-size: 13px; letter-spacing: .06em; color: rgba(255, 255, 255, .78); }
.says-side b { display: block; font: 800 clamp(40px, 12vw, 84px)/1.02 var(--display); color: #fff; }
.says-side.w b { text-shadow: 0 0 34px rgba(120, 150, 255, .45); }
.says-side.e b { text-shadow: 0 0 34px rgba(255, 170, 110, .45); }
.says-who { grid-column: 1 / -1; text-align: center; margin: 10px 0 0; font-size: 14px; }
.says-who span { display: inline-block; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; padding: 2px 12px; border-radius: 99px; }
.says.yours .says-who span { background: var(--gilt); border-color: var(--gilt); color: #22202e; font-weight: 700; }
.says.yours .says-side b { animation: step-in .45s ease-out both; }
.says-side b.long { font-size: clamp(26px, 7.4vw, 62px); }

/* One drawing per reading. They stay still: the coins, the cards and the chart are what move, once the reader starts. */
.page-art { display: flex; margin: 10px 0 0; }
.art { height: 76px; width: auto; max-width: 100%; }
.art-w, .art-e { font-size: 30px; text-anchor: middle; }
.art-w { fill: var(--west); } .art-e { fill: var(--east); font-family: "Noto Serif SC", "Songti SC", SimSun, serif; }
.rule { height: 13px; margin: 40px 0 -8px; background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; position: relative; }
.rule::after { content: ""; position: absolute; left: 50%; top: 2px; width: 9px; height: 9px; margin-left: -4.5px; background: var(--gilt); transform: rotate(45deg); box-shadow: 0 0 0 6px var(--bg); }
.readings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 14px 0 8px; padding: 0; }
.readings a { display: block; height: 100%; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); transition: border-color .2s; box-shadow: var(--shadow); }
.ticks { list-style: none; padding: 0; margin: 8px 0 0; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: 7px; line-height: 1.4; }
.ticks li::before { content: "✓"; position: absolute; left: 2px; color: var(--gold); font-weight: 700; }
.readings a:hover { border-color: var(--gold); }
.readings .page-art { margin: 0 0 10px; height: 66px; }
.readings .art { height: 66px; }
.readings b { display: block; font: 800 18px/1.2 var(--display); }
.readings small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* The Life palace is where a Zi Wei reading starts, so it's the one thing on that chart that draws the eye, once. */
.palace.life.rv.on { animation: life-glow 1.5s ease-out .5s 1 both; }
@keyframes life-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(211, 180, 104, 0); } 40% { box-shadow: 0 0 0 3px rgba(211, 180, 104, .5); } }

/* A result arriving: what's being worked out, then the two answers meeting at the seam. */
.staging { text-align: center; padding: 50px 0 60px; }
.staging-mark { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid transparent; border-left-color: var(--west); border-right-color: var(--east); animation: spin 1.2s linear infinite; }
.staging p { color: var(--muted); }
.staging p.in { animation: step-in .3s ease-out both; }
@keyframes step-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.duel { display: grid; grid-template-columns: 1fr 1fr; margin: 6px 0 14px; overflow: hidden; }
.duel-side { padding: 18px 14px 20px; min-width: 0; color: #fff; }
.duel-side.w { text-align: right; border-right: 1.5px solid var(--gilt); border-radius: 14px 0 0 14px; background: linear-gradient(165deg, var(--sky-west-1), var(--sky-west-2)); }
.duel-side.e { border-radius: 0 14px 14px 0; background: linear-gradient(195deg, var(--sky-east-1), var(--sky-east-2)); }
.duel-side small { display: block; font-size: 14px; }
.duel-side b { font: 800 clamp(32px, 9.5vw, 46px)/1.1 var(--display); }

/* Things appear as they come into view, once. Only opacity and transform, so a phone keeps up. */
.rv { opacity: 0; transform: translateY(10px); transition: opacity .45s ease-out, transform .45s ease-out; transition-delay: calc(var(--i, 0) * 60ms); }
.rv.on { opacity: 1; transform: none; }
.duel-side.w.rv { transform: translateX(-26px); }
.duel-side.e.rv { transform: translateX(26px); transition-delay: .24s; }
.duel-side.rv.on { transform: none; }
.pillars > div.rv { transform: rotateX(70deg); transform-origin: top; }
.pillars > div.rv.on { transform: none; }
.bar.rv { transform: none; }
.bar i { transform-origin: left center; }
.bar.rv i { transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 70ms); }
.bar.rv.on i { transform: none; }
.figure > .yao.rv { transform: scaleX(.3); }
.figure > .yao.rv.on { transform: none; }

/* West and East, side by side. Two columns even on a phone: the comparison is the point. */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; margin: 12px 0 20px; font-size: 15px; line-height: 1.45; }
.vs-head { font-weight: 700; padding: 6px 10px; border-radius: 8px 8px 0 0; }
.vs-head.w { color: #fff; background: var(--sky-west-2); }
.vs-head.e { color: #fff; background: var(--sky-east-2); }
.vs-label { grid-column: 1 / -1; color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 12px 0 4px; border-top: 1px solid var(--line); margin-top: 8px; }
.vs-label:nth-child(3) { border-top: 0; margin-top: 0; }
.vs-cell { padding: 2px 10px 8px; min-width: 0; overflow-wrap: anywhere; }
.vs-cell.w { border-left: 3px solid var(--west); }
.vs-cell.e { border-left: 3px solid var(--east); }
.vs-verdict { grid-column: 1 / -1; color: var(--muted); font-size: 14px; padding-top: 4px; }
.two-always { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.two-always .panel { padding: 10px; font-size: 14px; }
.two-always .pillars b { font-size: 17px; }
.report-view { margin-bottom: 26px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.v-title { margin-top: 18px; }
.cast-pair { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 14px 0; }
.cast-one { display: flex; align-items: center; gap: 14px; }
.cast-one p { margin: 0; }
.cast-one small { display: block; font-size: 13px; }

/* Tarot */
.tcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 14px; }
.tcard { margin: 0; font-size: 12px; line-height: 1.3; text-align: center; min-width: 0; }
.tcard img, .tback { display: block; width: 100%; height: auto; aspect-ratio: 360 / 620; border-radius: 6px; margin: 4px 0; }
.tcard.reversed img { transform: rotate(180deg); }
/* A card back in the site's own two colours, with a gold seam. */
.tback { border: 1px solid var(--gold); background:
  linear-gradient(90deg, transparent calc(50% - .5px), var(--gilt) calc(50% - .5px), var(--gilt) calc(50% + .5px), transparent calc(50% + .5px)),
  radial-gradient(circle at 50% 50%, transparent 22%, rgba(217, 184, 96, .7) 22.5%, transparent 23.5%),
  linear-gradient(90deg, var(--sky-west-1) 50%, var(--sky-east-1) 50%); }
.tflip { position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .1, .2, 1); aspect-ratio: 360 / 620; margin: 4px 0; }
.tflip > * { position: absolute; inset: 0; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tflip .tfront { transform: rotateY(180deg); }
.tcard.reversed .tflip .tfront { transform: rotateY(180deg) rotate(180deg); }
.turned .tflip { transform: rotateY(180deg); }
.tname { min-height: 2.6em; }
.two-always.ask-pair { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.ask-pair .panel { padding: 8px; }
.ask-pair h3 { font-size: 16px; margin-bottom: 6px; }
.ask-pair .tcards { gap: 4px; margin: 0; }
.ask-pair .tcard { font-size: 11px; }
.ask-pair .cast-pair { flex-direction: column; gap: 10px; }
.ask-pair .cast-pair p { margin: 0; font-size: 14px; }
.ask-pair .cast-pair small { display: block; font-size: 12px; }
.ask-pair .figure { width: 66px; }

/* I Ching */
.toss { display: flex; align-items: center; gap: 20px; margin: 14px 0; }
.coins { display: flex; gap: 10px; flex-wrap: wrap; perspective: 500px; }
/* An old round coin with a square hole. 背, the plain side, shows first; a toss spins it and it lands on one side. */
.coin { position: relative; width: 62px; height: 62px; transform-style: preserve-3d; transition: transform .3s; }
.coin-face { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e2c98a, #a9863e); box-shadow: inset 0 0 0 3px #8a6c2e; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #4a3814; }
.coin-face i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; background: var(--bg); box-shadow: 0 0 0 2px #8a6c2e; }
.coin-face em { position: absolute; font-style: normal; font-weight: 700; font-size: 11px; line-height: 1; }
.coin-face em:nth-of-type(1) { top: 7px; left: 50%; margin-left: -5.5px; }
.coin-face em:nth-of-type(2) { bottom: 7px; left: 50%; margin-left: -5.5px; }
.coin-face em:nth-of-type(3) { right: 7px; top: 50%; margin-top: -5.5px; }
.coin-face em:nth-of-type(4) { left: 7px; top: 50%; margin-top: -5.5px; }
.coin-face.front { transform: rotateY(180deg); }
.coin.t { transform: rotateY(180deg); }
.coin.spin { animation: coin-h .9s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms) both; }
.coin.spin.t { animation-name: coin-t; }
@keyframes coin-h { 0% { transform: rotateY(0) translateY(0); } 45% { transform: rotateY(900deg) translateY(-22px); } 100% { transform: rotateY(1800deg) translateY(0); } }
@keyframes coin-t { 0% { transform: rotateY(0) translateY(0); } 45% { transform: rotateY(990deg) translateY(-22px); } 100% { transform: rotateY(1980deg) translateY(0); } }
.figure { display: grid; gap: 7px; width: 84px; flex: none; }
.yao.drop i { animation: yao-in .45s ease-out both; }
@keyframes yao-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.yao { display: flex; gap: 12px; height: 9px; }
.yao i { flex: 1; background: var(--text); border-radius: 2px; }
.yao.empty { border-bottom: 1px dashed var(--line); }
.yao.moving i { background: var(--gold); }
.cast-head { display: flex; align-items: center; gap: 18px; }
.cast-head h2 { margin: 0 0 4px; }
.cast-table { width: 100%; font-size: 14px; }
.cast-table tr.moved td { color: var(--gold); }

/* Zi Wei */
.palaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 14px 0; }
.palace, .palace-centre { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 8px; font-size: 13px; min-width: 0; }
.palace h4 { margin: 0; font-size: 14px; }
.palace ul { list-style: none; margin: 4px 0 0; padding: 0; }
.palace .major b { color: var(--gold); }
.palace .major em { color: var(--east); font-style: normal; }
.palace .minor { color: var(--muted); font-size: 12px; }
.palace.life { border: 2px solid var(--east); }
.palace.unread { opacity: .6; }
.palace.unread.rv:not(.on) { opacity: 0; }
.palace-centre { text-align: center; grid-column: 1 / -1 !important; grid-row: auto !important; }
.palace { grid-row: auto !important; grid-column: auto !important; }

/* Result page */
.r-summary { color: var(--muted); font-size: 15px; }
.r-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 20px; }
.r-tools .btn { font-size: 15px; padding: 10px 8px; }
.report h2 { color: var(--text); }
.report p { font-size: 18px; line-height: 1.65; }
.r-note, .r-help { color: var(--muted); font-size: 14px; margin-top: 18px; }
.r-link { font-size: 14px; overflow-wrap: anywhere; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Anyone who has asked for less motion gets the finished page, and a coin that simply lands. */
@media (prefers-reduced-motion: reduce) {
  .spinner, .staging-mark, .sky-wheel, .coin.spin, .coin.spin.t, .yao.drop i, .staging p.in, .step.enter { animation: none; }
  .tflip, .coin, .says { transition: none; }
}

/* Wide screens: the header on one line, a first screen that fills the window, and the home page's lists spread out. */
@media (min-width: 900px) {
  .top { max-width: 1120px; flex-wrap: nowrap; padding: 16px 24px 10px; }
  .top nav { flex-basis: auto; order: 1; margin-left: auto; gap: 0 22px; }
  .lang-menu { order: 2; }
  .stage { min-height: min(880px, 100vh); padding-top: 60px; }
  .hero { max-width: 920px; padding: 40px 24px 80px; }
  .hero .lede { font-size: 20px; }
  .has-stage main { max-width: 1112px; }
  .has-stage main > p, .has-stage .result { max-width: 680px; }
  .has-stage .result { margin-left: auto; margin-right: auto; }
  .examples.wide { gap: 20px; }
  .examples.wide figcaption { font-size: 14px; }
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
  .readings.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .readings.wide a { padding: 18px; }
}
@media (min-width: 620px) {
  .two { grid-template-columns: 1fr 1fr; }
  .btn { width: auto; min-width: 220px; }
  .person-form .btn { width: 100%; }
  .card-actions .btn, .r-tools .btn { width: 100%; min-width: 0; }
  .palaces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .palace { grid-row: unset; grid-column: unset; }
}
@media (min-width: 620px) {
  /* The square chart: each palace keeps the row and column set on it inline. */
  .palaces .palace[style] { grid-row: var(--r) !important; grid-column: var(--c) !important; }
  .palaces .palace-centre { grid-column: 2 / 4 !important; grid-row: 2 / 4 !important; align-self: center; border: 0; }
}
@media print {
  :root { --bg: #fff; --panel: #fff; --line: #ccc; --text: #111; --muted: #555; --shadow: none; }
  html, body { background: #fff; color: #111; font-size: 12pt; }
  .rv { opacity: 1 !important; transform: none !important; }
  .bar.rv i { transform: none !important; }
  .bar i, .yao i, .badge, .vs-head { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .palace, .panel, .vs-label { break-inside: avoid; }
  .v-title, .report-view .lede, .vs-head, .vs-label { break-after: avoid; }
  .top nav, .r-tools, .r-help, .foot a, .btn { display: none; }
  .report h2, h1 { color: #111; }
  .report p { font-size: 12pt; }
  blockquote { background: none; }
}