/* Layout: rice-paper page over faint ink-wash buildings; raised, framed panels like lacquered almanac boards.
   Chart left, luck right, interactions/elements/card below; readings and the stem index follow. */
:root {
  color-scheme: light;
  --paper: #ece6da;
  --paper-deep: #e1d9c8;
  --panel: #f6f2ea;
  --panel-2: #f2ede3;
  --ink: #2b2722;
  --qing: #3e7a6c;
  --dai: #2c3e5c;
  --ink-soft: #5d554b;
  --ink-faint: #8a8174;
  --line: #cfc5b3;
  --line-soft: #e2dbcd;
  --gold: #8c6f45;
  --gold-hi: #c9a24f;
  --gold-soft: #f1e6cc;
  --seal: #a8402e;
  --seal-hi: #cc4a3c;
  --seal-deep: #852419;
  --seal-soft: #f6e3dc;

  --wood: #2e7a4b;
  --fire: #c0392b;
  --earth: #8a5a2b;
  --metal: #b07a12;
  --water: #2a5c8f;

  --shadow-1: 0 1px 2px rgba(70, 48, 22, .07), 0 6px 16px -6px rgba(70, 48, 22, .16);
  --shadow-2: 0 1px 2px rgba(70, 48, 22, .08), 0 10px 26px -10px rgba(70, 48, 22, .26), 0 30px 60px -30px rgba(70, 48, 22, .3);
  --shadow-3: 0 2px 4px rgba(70, 48, 22, .1), 0 18px 40px -12px rgba(70, 48, 22, .34);

  --f-display: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --f-body: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --f-brush: "Ma Shan Zheng", "Noto Serif SC", "STKaiti", "KaiTi", serif;

  --r: 6px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Rice paper with a faint fibre texture; ink text; cinnabar, qing-green, dai-blue and old gold as accents. */
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(62, 122, 108, .07), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 45%, rgba(44, 62, 92, .05), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .26 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 16px/1.7 var(--f-body);
}
.panel, .pkg, .lb-inner, .combo-list {
  --ink: #2b2722; --ink-soft: #5d554b; --ink-faint: #8a8174;
  --line: #cfc5b3; --line-soft: #e2dbcd;
  --paper: #ece6da; --paper-deep: #e1d9c8; --gold: #8c6f45; --gold-soft: #f1e6cc;
  --wood: #2e7a4b; --fire: #c0392b; --earth: #8a5a2b; --metal: #b07a12; --water: #2a5c8f;
  color: var(--ink);
}
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--seal); }
.panel a:not(.btn-primary):not(.btn-gold), .pkg a:not(.btn-primary) { color: var(--seal); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Ink-wash silhouettes of a hall, gate, pavilion and pagoda, fixed behind the page */
.bg-arch {
  position: fixed; left: 0; right: 0; bottom: 0; height: min(46vh, 460px); z-index: -1;
  color: #2c3e5c; opacity: .06; pointer-events: none; will-change: transform;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
  mask-image: linear-gradient(to top, #000 55%, transparent);
}
.bg-arch svg { width: 100%; height: 100%; display: block; }
main, .site-foot { position: relative; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.zh-sm { font-size: .78em; color: var(--ink-faint); font-weight: 400; letter-spacing: .05em; }
.opt { font-size: .8em; color: var(--ink-faint); font-weight: 400; }
.sub { display: block; font-size: 12px; color: var(--ink-faint); letter-spacing: .03em; }

/* ---------- Header ---------- */
.site-head {
  border-bottom: 1px solid rgba(168, 132, 63, .45);
  background: linear-gradient(180deg, rgba(252, 249, 242, .96), rgba(246, 240, 228, .96));
  box-shadow: 0 6px 18px -12px rgba(60, 45, 20, .35);
  position: relative; z-index: 5; color: var(--ink);
}
.site-head::after { /* 回纹 meander band */
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 7.5h7.5V1.5h-5v3h2' fill='none' stroke='%23a07a2c' stroke-width='1' opacity='.55'/%3E%3Cpath d='M8 0.5v7h7.5' fill='none' stroke='%23a07a2c' stroke-width='1' opacity='.25'/%3E%3C/svg%3E");
  background-repeat: repeat-x; pointer-events: none;
}
.site-head-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; padding-block: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-seal {
  width: 46px; height: 46px; display: block; flex: none; border-radius: 4px;
  filter: drop-shadow(0 3px 6px rgba(133, 36, 25, .22)) drop-shadow(0 1px 1px rgba(60, 30, 20, .2));
  transition: transform .25s ease;
}
.brand:hover .brand-seal { transform: rotate(-4deg); }
.brand-seal .seal-mark { width: 100%; height: 100%; display: block; }
.brand-seal-sm { width: 30px; height: 30px; border-radius: 3px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font: 600 27px/1 var(--f-display); letter-spacing: .04em; font-variant-numeric: lining-nums; }
.brand-sub { font-size: 12.5px; color: var(--seal); letter-spacing: .38em; margin-top: 5px; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.nav-link {
  background: none; border: 0; padding: 7px 11px; cursor: pointer; text-decoration: none;
  color: var(--ink-soft); font-size: 14px; border-radius: var(--r);
}
.nav-link:hover { color: var(--ink); background: rgba(168, 132, 63, .1); }
.nav-link[aria-current] { color: var(--seal); font-weight: 600; }
.lang-btn {
  margin-left: 6px; border: 1px solid var(--gold); border-radius: 999px; padding: 5px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
  background: transparent; color: var(--seal); border-color: var(--seal);
}
.lang-btn:hover { background: var(--seal); color: #fff8ee; }

/* ---------- Panels ---------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, #fdfbf6 0%, var(--panel) 40%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-2);
  padding: 24px;
  min-width: 0;
}
.panel::before { /* inner frame line */
  content: ""; position: absolute; inset: 5px; border: 1px solid var(--line-soft); border-radius: 3px; pointer-events: none;
}
.panel::after { /* gold corner brackets */
  content: ""; position: absolute; inset: 3px; pointer-events: none; opacity: .7;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 16px 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top left / 1.5px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 16px 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 1.5px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 16px 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 1.5px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 16px 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 1.5px 16px no-repeat;
}
.panel > * { position: relative; }
.panel-title, .sec-head h2 { font: 600 26px/1.15 var(--f-display); margin: 0; text-wrap: balance; }
.sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.sec-head h2 { font-size: 24px; }
.seal-sm {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 3px;
  background: linear-gradient(145deg, var(--seal-hi), var(--seal) 60%, var(--seal-deep)); color: #fbf3e8; font: 17px/1 var(--f-brush);
  box-shadow: inset 0 0 0 1.5px rgba(251, 243, 232, .45), 0 2px 4px -1px rgba(124, 34, 25, .5);
}
.seal-lg { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 6px; font: 36px/1 var(--f-brush); color: #fbf3e8;
  background: linear-gradient(145deg, var(--seal-hi), var(--seal) 60%, var(--seal-deep)); box-shadow: inset 0 0 0 2px rgba(251, 243, 232, .5), 0 6px 14px -4px rgba(124, 34, 25, .55); }
.sec-note { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }


/* ---------- Landing hero: ink-wash hills on rice paper, a moon gate with the solar-term dial, cards stepping out of it ---------- */
.hero { position: relative; overflow: hidden; color: var(--ink); isolation: isolate; padding-block: 56px 120px; }
.hero-sky { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 64%; z-index: -1; }
.hero::after { /* gold meander under the landscape */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 7.5h7.5V1.5h-5v3h2' fill='none' stroke='%23a8843f' stroke-width='1' opacity='.7'/%3E%3Cpath d='M8 0.5v7h7.5' fill='none' stroke='%23a8843f' stroke-width='1' opacity='.35'/%3E%3C/svg%3E") repeat-x center;
}
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; min-height: 520px; }
.hero-copy { position: relative; padding-left: 64px; max-width: 580px; }
.tiqian { /* vertical title slip */
  position: absolute; left: 0; top: 6px; writing-mode: vertical-rl; letter-spacing: .5em;
  padding: 16px 9px; font: 600 15px/1 var(--f-body); color: #f4efe4;
  background: linear-gradient(180deg, #34496b, var(--dai)); border: 1px solid #1d2b42; border-radius: 2px;
  box-shadow: inset 0 0 0 3px var(--dai), inset 0 0 0 4px rgba(244, 239, 228, .45), 0 8px 16px -8px rgba(30, 40, 60, .6);
}
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }
.hero-title {
  margin: 0 0 22px; font: 400 clamp(48px, 5.6vw, 86px)/1.05 var(--f-brush); letter-spacing: .04em; color: var(--ink); white-space: nowrap;
  text-shadow: 0 1px 0 #fff, 0 6px 18px rgba(30, 25, 15, .12);
  text-wrap: balance;
}
.hero-title em { display: block; font-style: normal; font-size: .4em; letter-spacing: .14em; margin-top: 14px; color: var(--seal); }
:lang(en) .hero-title { font: 600 clamp(40px, 4.6vw, 66px)/1.04 var(--f-display); letter-spacing: .01em; white-space: normal; }
:lang(en) .hero-title em { font-style: italic; font-size: .6em; letter-spacing: 0; margin-top: 8px; }
:lang(en) .btn-gold, :lang(en) .btn-line { letter-spacing: .03em; }
:lang(en) .hero-now strong { letter-spacing: .02em; }
.hero-lede { margin: 0 0 30px; max-width: 30em; padding-top: 20px; border-top: 1px solid rgba(168, 132, 63, .45); color: var(--ink-soft); font-size: 16px; line-height: 1.85; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; border: 0;
  padding: 14px 30px; border-radius: 4px; font-weight: 700; font-size: 16px; letter-spacing: .12em; color: #fff8ee;
  background: linear-gradient(180deg, var(--seal-hi), var(--seal) 55%, #9a2c21);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .25), inset 0 0 0 4px var(--seal), inset 0 0 0 5px rgba(255, 240, 220, .45), 0 3px 0 var(--seal-deep), 0 14px 26px -10px rgba(133, 36, 25, .55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-gold:hover { transform: translateY(-2px); }
.btn-gold:active { transform: translateY(2px); box-shadow: inset 0 0 0 4px var(--seal), inset 0 0 0 5px rgba(255, 240, 220, .45), 0 1px 0 var(--seal-deep); }
.btn-line {
  display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 15px;
  color: var(--dai); border: 1px solid var(--dai); background: rgba(252, 249, 242, .7); transition: background .15s, color .15s; letter-spacing: .06em;
}
.btn-line:hover { background: var(--dai); color: #f4efe4; }
.hero-nums {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 14px 0; max-width: 30em;
  background: rgba(252, 249, 242, .88); border: 1px solid rgba(168, 132, 63, .45); border-radius: 3px;
  box-shadow: inset 0 0 0 3px rgba(252, 249, 242, .9), inset 0 0 0 4px rgba(168, 132, 63, .25), 0 10px 24px -14px rgba(30, 35, 50, .45);
}
.hero-nums div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero-nums div + div { border-left: 1px solid rgba(168, 132, 63, .35); }
.hero-nums dt { font: 600 36px/1 var(--f-display); font-variant-numeric: lining-nums; color: var(--dai); }
.hero-nums dd { margin: 0; font-size: 12.5px; color: var(--gold); letter-spacing: .1em; }
.hero-now { margin: 14px 0 0; max-width: 30em; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.hero-now:empty { display: none; }
.hero-now strong { color: var(--seal); letter-spacing: .1em; margin-right: 4px; }
.now-sep { color: var(--gold); margin: 0 6px; }
.now-sub { display: block; padding-left: 17px; } /* lunar date and solar term on their own line, under the pillars */
.live-dot { display: inline-block; vertical-align: middle; margin: -2px 8px 0 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--seal); box-shadow: 0 0 0 3px rgba(184, 58, 46, .18); animation: now-pulse 2.4s ease-in-out infinite; }
@keyframes now-pulse { 50% { box-shadow: 0 0 0 6px rgba(184, 58, 46, 0); } }
.gate .dial-hl { fill: rgba(184, 58, 46, .14); stroke: rgba(184, 58, 46, .45); stroke-width: .8; }
.gate text.dial-on { fill: #b83a2e; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* The dial is the top half of a moon gate; the cards sit just under its base, overlapping it a little */
.hero-fan { position: relative; height: calc(var(--gate) * .516 + var(--card-w) * 1.62 - 34px); perspective: 1400px; --spread: 82px; --card-w: 168px; --gate: 470px; }
.gate {
  position: absolute; left: 50%; top: 0; width: var(--gate); height: calc(var(--gate) * .516); transform: translateX(-50%);
  filter: drop-shadow(0 18px 30px rgba(40, 50, 70, .25)) drop-shadow(0 2px 3px rgba(40, 50, 70, .15));
}
.fan-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(6deg); animation: fan-drift 7s ease-in-out infinite; }
@keyframes fan-drift { 0%, 100% { transform: rotateX(6deg) translateY(0); } 50% { transform: rotateX(4deg) translateY(-8px); } }
.fan-card {
  position: absolute; left: 50%; bottom: 0; width: var(--card-w); margin-left: calc(var(--card-w) / -2);
  padding: 0; border: 0; background: none; cursor: zoom-in; z-index: var(--z);
  transform-origin: 50% 130%;
  transform: translateX(calc(var(--i) * var(--spread))) translateY(calc(var(--a) * 14px)) rotate(calc(var(--i) * 9deg)) translateZ(calc(var(--z) * 4px));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s;
  filter: drop-shadow(0 18px 22px rgba(30, 35, 50, .35)) drop-shadow(0 3px 4px rgba(30, 35, 50, .25));
}
.fan-card img { display: block; width: 100%; height: auto; border-radius: 12px; }
.fan-card:hover, .fan-card:focus-visible {
  z-index: 20; filter: drop-shadow(0 26px 30px rgba(30, 35, 50, .4));
  transform: translateX(calc(var(--i) * var(--spread))) translateY(calc(var(--a) * 14px - 34px)) rotate(calc(var(--i) * 5deg)) translateZ(80px) scale(1.06);
}

/* ---------- Intro + form ---------- */
/* Left column follows the long form: double-hour reference and what the chart contains */
.intro { position: sticky; top: 20px; align-self: start; }
.intro-extra { display: grid; gap: 28px; margin-top: 32px; }
.sc-title { margin: 0 0 4px; font: 600 20px/1.2 var(--f-display); }
:lang(zh) .sc-title { font: 600 18px/1.3 var(--f-body); letter-spacing: .08em; }
:lang(zh) .sc-title .zh-sm { display: none; }
.shichen { padding: 24px 26px; }
.shichen .help { margin: 0 0 12px; }
.sc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.sc-cell {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px 7px; border-radius: 4px;
  background: linear-gradient(180deg, #fffefa, #f6f0e3); border: 1px solid var(--line-soft); font-variant-numeric: tabular-nums;
  transition: background .2s, border-color .2s, transform .2s;
}
.sc-cell .sc-b { font: 700 24px/1.15 var(--f-body); }
.sc-cell .sc-a { font-size: 12.5px; color: var(--ink-soft); }
.sc-cell .sc-t { font-size: 11.5px; color: var(--ink-faint); }
.sc-cell.on { border-color: var(--seal); background: linear-gradient(180deg, #fbebe5, var(--seal-soft)); box-shadow: inset 0 0 0 1px var(--seal), 0 6px 14px -8px rgba(133, 36, 25, .5); transform: translateY(-2px); }
.gets-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gets-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 4px; background: rgba(255, 253, 247, .75); box-shadow: 0 6px 16px -12px rgba(30, 35, 50, .35); }
.gets-list .seal-sm { margin-top: 2px; }
.gets-list strong { display: block; font-size: 15px; margin-bottom: 2px; }
.gets-list div > span { font-size: 13px; color: var(--ink-soft); line-height: 1.55; display: block; }

.view { padding-block: 40px 24px; }
.view-form { padding-top: 0; }
.view-form > .form-layout { padding-top: 48px; }
.intro-title { font: 600 clamp(32px, 3.6vw, 46px)/1.1 var(--f-display); margin: 0 0 18px; }
.intro-hint { margin: 0; font-size: 14px; color: var(--ink-faint); }
:lang(zh) .intro-title { font: 400 clamp(34px, 4vw, 48px)/1.1 var(--f-brush); letter-spacing: .04em; }
.intro-title, .readings > .wrap > .sec-head h2, .stems .sec-head h2, .play .sec-head h2 { color: var(--ink); }
.readings > .wrap > .sec-head h2, .stems .sec-head h2, .play .sec-head h2 { font-size: clamp(28px, 3.2vw, 38px); }
:lang(zh) .readings > .wrap > .sec-head h2, :lang(zh) .stems .sec-head h2, :lang(zh) .play .sec-head h2 { font-family: var(--f-brush); font-weight: 400; letter-spacing: .06em; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: 56px; align-items: start; }
.intro { padding-top: 16px; position: relative; }
.eyebrow { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--seal); margin: 0 0 14px; font-weight: 600; }
h1 { font: 600 clamp(34px, 4.6vw, 56px)/1.06 var(--f-display); margin: 0 0 18px; text-wrap: balance; text-shadow: 0 1px 0 #fff, 0 2px 6px rgba(70, 48, 22, .12); }
.lede { color: var(--ink-soft); max-width: 46ch; margin: 0 0 10px; font-size: 16.5px; line-height: 1.8; }
.lede.narrow { max-width: 66ch; margin-bottom: 20px; }
.lede.wide { max-width: none; margin-bottom: 22px; } /* one long line across the section */
.privacy { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); margin: 0; padding-top: 18px; border-top: 1px solid var(--line); }

.form-panel { display: flex; flex-direction: column; gap: 22px; padding: 30px 32px; }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; padding: 0; letter-spacing: .02em; }
label.sub { margin-bottom: 4px; }
.help { font-size: 13.5px; color: var(--ink-soft); margin: 7px 0 0; line-height: 1.6; }
.solar-help { margin-top: -12px; }
input[type=text], input[type=number], input[type=email], input[type=date], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fffdf8; min-height: 46px; font-size: 15px;
  box-shadow: inset 0 2px 3px rgba(70, 48, 22, .07), 0 1px 0 rgba(255, 255, 255, .9);
}
/* our own dropdown arrow, set in from the edge, instead of the browser's */
select {
  -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer;
  background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a8843f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
}
select:disabled { opacity: .55; cursor: not-allowed; }
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; box-shadow: inset 0 2px 3px rgba(70, 48, 22, .06), 0 0 0 3px var(--gold-soft); }
input:disabled, select:disabled { opacity: .55; }
.row3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.time-row { grid-template-columns: 1fr 1fr 1.3fr; align-items: end; }

.seg { display: flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #f4ede0; box-shadow: inset 0 2px 4px rgba(70, 48, 22, .1); padding: 3px; gap: 3px; }
.seg label { flex: 1; position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 8px 8px; font-size: 14px; border-radius: 4px; transition: background .15s, box-shadow .15s; }
.seg input:checked + span {
  background: linear-gradient(180deg, #3a322b, var(--ink)); color: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 5px -1px rgba(0, 0, 0, .35);
}
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -3px; }

.check, .radio { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.check input, .radio input { margin-top: 4px; accent-color: var(--seal); width: 16px; height: 16px; flex: none; }
.time-row .check { padding-bottom: 11px; }
.radio { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); }
.radio b { color: var(--ink); font-weight: 600; }

.settings { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 10px; }
.settings summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.settings[open] summary { margin-bottom: 10px; }
.settings .field { margin-top: 12px; }

.combo { position: relative; }
.combo-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: #fffdf8; border: 1px solid var(--line); border-radius: var(--r); max-height: 280px; overflow-y: auto; box-shadow: var(--shadow-3);
}
.combo-list li { padding: 8px 10px; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.combo-list li small { color: var(--ink-faint); }
.combo-list li[aria-selected=true], .combo-list li:hover { background: var(--gold-soft); }
.combo-list li.manual { border-top: 1px solid var(--line-soft); color: var(--seal); }

.errors { background: var(--seal-soft); border: 1px solid #e3b9ad; color: #7d2419; border-radius: var(--r); padding: 10px 12px; font-size: 13.5px; margin: 0; }
.errors ul { margin: 0; padding-left: 18px; }

/* Lacquered buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  background: linear-gradient(180deg, var(--seal-hi), var(--seal) 55%, #93291f); color: #fff8ee; border: 0; border-radius: var(--r);
  padding: 13px 20px; font-weight: 600; font-size: 16px; cursor: pointer; letter-spacing: .03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 3px 0 var(--seal-deep), 0 10px 18px -6px rgba(124, 34, 25, .5);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 var(--seal-deep), 0 4px 8px -4px rgba(124, 34, 25, .5); }
.btn-primary:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-ghost {
  background: linear-gradient(180deg, #fffcf5, #f5ecda); border: 1px solid var(--gold); color: var(--ink); border-radius: 999px;
  padding: 8px 18px; cursor: pointer; font-weight: 600; font-size: 14px; white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(160, 122, 44, .35), 0 6px 12px -6px rgba(160, 122, 44, .5);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-ghost:hover { transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(160, 122, 44, .35); }

/* ---------- Summary ---------- */
.summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: start; margin-bottom: 22px; }
.sum-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sum-title h1 { font-size: clamp(28px, 3.4vw, 40px); margin: 0; }
.chip { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fffdf8; color: var(--ink-soft); box-shadow: 0 1px 2px rgba(70, 48, 22, .08); }
.sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 6px 28px; margin: 14px 0 0; grid-column: 1 / -1; }
.sum-grid div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px; font-size: 13.5px; padding-block: 5px; border-bottom: 1px dotted var(--line); }
.sum-grid dt { color: var(--ink-faint); font-size: 12px; letter-spacing: .04em; padding-top: 2px; }
.sum-grid dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.warn { grid-column: 1 / -1; background: var(--gold-soft); border: 1px solid #dcc79a; border-radius: var(--r); padding: 10px 12px; font-size: 13.5px; }
.warn p { margin: 0; } .warn p + p { margin-top: 6px; }

/* ---------- Result page night band ---------- */
#view-result { position: relative; padding-top: 96px; }
.result-sky {
  position: absolute; left: 0; right: 0; top: 0; height: 460px; z-index: -1; overflow: hidden; pointer-events: none;
  opacity: .8;
  -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent);
}
.result-sky .hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Result grid ---------- */
.result-grid {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas: "today today" "table card" "book book" "luck luck" "rel rel" "el el";
}
.area-today { grid-area: today; }
.today-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.today-date { margin-left: auto; font-size: 14px; color: var(--ink-soft); }
.today-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: start; }
.today-score { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.today-score svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.ts-track { fill: none; stroke: var(--line-soft); stroke-width: 7; }
.ts-bar { fill: none; stroke: var(--seal); stroke-width: 7; stroke-linecap: round; }
.ts-n { position: absolute; top: 40px; left: 0; right: 0; text-align: center; font: 700 44px/1 var(--f-display); font-variant-numeric: lining-nums; color: var(--seal); }
.ts-cap { font-size: 13px; color: var(--ink-soft); letter-spacing: .06em; }
.today-god { margin: 0; font-size: 15px; color: var(--ink-soft); }
.today-god strong { color: var(--seal); font-size: 18px; }
.sub-inline { color: var(--ink-faint); font-size: 13px; }
.today-theme { margin: 6px 0 16px; font: 600 20px/1.5 var(--f-body); }
.today-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.today-lists h3 { margin: 0 0 8px; font: 700 15px/1 var(--f-body); letter-spacing: .1em; display: inline-block; padding: 5px 12px; border-radius: 3px; color: #fff8ee; }
.today-yi { background: var(--wood); }
.today-ji { background: var(--seal); }
.today-lists ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; }
.today-lists li { padding-left: 18px; position: relative; }
.today-lists li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.today-notes { margin-top: 16px; padding: 12px 14px; border-radius: var(--r); background: var(--gold-soft); border: 1px solid #dcc79a; }
.today-notes h3 { margin: 0 0 6px; font: 700 14px/1.3 var(--f-body); color: #6d521b; }
.today-notes p { margin: 0; font-size: 14px; }
.today-notes p + p { margin-top: 6px; }
@media (max-width: 700px) {
  .today-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .today-date { margin-left: 0; width: 100%; }
  .today-lists { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.area-table { grid-area: table; }
.area-luck { grid-area: luck; }
.area-card { align-self: stretch; }
.area-card > .dm-panel { height: 100%; }
.area-rel { grid-area: rel; }
.area-el { grid-area: el; }
.area-card { grid-area: card; min-width: 0; }

/* ---------- Pillar table ---------- */
.table-scroll { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); }
.scroll-hint { display: none; font-size: 12px; color: var(--ink-faint); margin: 0 0 6px; }
table.pillars { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; font-variant-numeric: tabular-nums; }
.pillars th, .pillars td { padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.pillars thead th { font-weight: 600; font-size: 13px; padding-block: 10px; background: var(--panel); }
.pillars thead th .zh-sm { display: block; font-size: 12px; }
.pillars thead th.flow { color: var(--ink-soft); font-weight: 500; }
.pillars th[scope=row] {
  position: sticky; left: 0; z-index: 2; background: var(--panel); text-align: left; font-weight: 500;
  font-size: 12.5px; color: var(--ink-soft); width: 118px; min-width: 118px; line-height: 1.25; box-shadow: 1px 0 0 var(--line-soft);
}
.pillars th[scope=row] .zh-sm { display: block; font-size: 11.5px; }
.pillars thead th:first-child { position: sticky; left: 0; z-index: 3; }
.pillars tr.zebra td, .pillars tr.zebra th[scope=row] { background: #f7f2e7; }
.pillars td.flow { background: rgba(160, 122, 44, .06); }
.pillars td.sep, .pillars th.sep { border-left: 2px solid var(--line); }
.pillars td.daycol { background: rgba(168, 54, 42, .04); }
.big { font: 700 36px/1.1 var(--f-body); display: block; text-shadow: 0 1px 0 #fff, 0 3px 5px rgba(70, 48, 22, .18); }
.polel { display: block; font-size: 11px; color: var(--ink-faint); letter-spacing: .06em; margin-top: 2px; }
.stack { display: grid; grid-template-rows: repeat(3, 22px); gap: 2px; justify-items: center; align-items: center; font-size: 13.5px; }
.stack .qi { font-size: 10px; color: var(--ink-faint); margin-left: 3px; }
.ss-list { display: flex; flex-direction: column; gap: 3px; align-items: center; font-size: 12.5px; color: var(--gold); }
.void-slot { display: flex; justify-content: center; align-items: center; height: 24px; margin-top: 4px; }
.void-mark { display: inline-block; font-size: 11px; line-height: 1; padding: 3px 5px; border: 1px solid var(--seal); color: var(--seal); background: var(--seal-soft); border-radius: 3px; letter-spacing: .08em; }
.term-pop p.tp-note { color: #f3b8a4; font-weight: 600; }
.unknown { color: var(--ink-faint); font-size: 13px; }
.unknown .big { color: var(--line); text-shadow: none; }
.dash { color: var(--line); }
.table-notes { font-size: 12px; color: var(--ink-soft); margin: 12px 0 0; padding-left: 18px; }
.table-notes li + li { margin-top: 3px; }

.el-wood { color: var(--wood); } .el-fire { color: var(--fire); } .el-earth { color: var(--earth); } .el-metal { color: var(--metal); } .el-water { color: var(--water); }
.bg-wood { background: linear-gradient(90deg, #3f9562, var(--wood)); } .bg-fire { background: linear-gradient(90deg, #d9584a, var(--fire)); }
.bg-earth { background: linear-gradient(90deg, #a87443, var(--earth)); } .bg-metal { background: linear-gradient(90deg, #d39c2c, var(--metal)); }
.bg-water { background: linear-gradient(90deg, #3d78b0, var(--water)); }

/* term buttons + tooltip */
.term {
  background: none; border: 0; padding: 0; margin: 0; cursor: help; color: inherit; font: inherit; line-height: inherit;
  text-decoration: underline dotted rgba(98, 87, 75, .35); text-underline-offset: 3px;
}
.term .big { text-decoration: none; }
.term:hover { text-decoration-color: var(--gold); }
.term-pop {
  position: fixed; z-index: 50; max-width: 290px; color: #f6efe2; border-radius: 8px; padding: 11px 13px; font-size: 13px; line-height: 1.5;
  background: linear-gradient(180deg, #3a312a, #26201b); border: 1px solid #574a3c;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 16px 32px -8px rgba(0, 0, 0, .45);
}
.term-pop .tp-zh { font-size: 18px; font-weight: 700; margin-right: 8px; }
.term-pop .tp-en { font: 600 16px/1.2 var(--f-display); color: #e8cf96; }
.term-pop p { margin: 6px 0 0; color: #ddd3c2; }

/* ---------- Luck panel ---------- */
.luck-facts { display: grid; gap: 4px; font-size: 13px; margin: 0 0 14px; }
.luck-facts div { display: flex; gap: 8px; flex-wrap: wrap; }
.luck-facts dt { color: var(--ink-faint); min-width: 92px; }
.luck-facts dd { margin: 0; min-width: 0; flex: 1; }
.strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 18px 0 6px; flex-wrap: wrap; }
.strip-head h3 { font: 600 19px/1.2 var(--f-display); margin: 0; }
.strip-head .hint { font-size: 12px; color: var(--ink-faint); }
.strip { position: relative; display: flex; gap: 7px; overflow-x: auto; padding: 6px 4px 12px; scroll-snap-type: x proximity; }
.lk {
  flex: 1 0 68px; scroll-snap-align: start; min-width: 68px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: linear-gradient(180deg, #fffefb, #f5eee0); border: 1px solid var(--line); border-radius: 7px; padding: 6px 6px 8px; cursor: pointer;
  font-variant-numeric: tabular-nums; position: relative;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #e0d3bb, 0 5px 10px -6px rgba(70, 48, 22, .35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.lk:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #e0d3bb, 0 10px 16px -8px rgba(70, 48, 22, .4); }
.lk[aria-pressed=true] {
  border-color: var(--seal); background: linear-gradient(180deg, #fbe9e3, var(--seal-soft)); transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(124, 34, 25, .18), inset 0 0 0 1px var(--seal), 0 1px 0 #e3c1b6;
}
.lk .yr { font-size: 12.5px; font-weight: 600; }
.lk .age { font-size: 11px; color: var(--ink-faint); }
.lk .gz { display: flex; flex-direction: column; align-items: center; line-height: 1.2; margin-top: 2px; }
.lk .gz span { font-size: 20px; font-weight: 700; }
.lk .gz small { font-size: 11px; font-weight: 500; margin-left: 2px; color: var(--ink-soft); }
.lk .jq { font-size: 12.5px; font-weight: 600; }
.lk .pre-label { font-size: 13px; font-weight: 600; margin-top: 8px; }
.now-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 2px rgba(201, 162, 79, .25); }
.month-detail { font-size: 13px; background: #f7f2e7; border: 1px solid var(--line-soft); border-radius: var(--r); padding: 8px 10px; margin-top: 4px; box-shadow: inset 0 1px 3px rgba(70, 48, 22, .06); }
.abbr-legend { font-size: 13px; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-soft); }
.abbr-legend .term { font-weight: 700; color: var(--ink); }
.legend-now { display: inline-flex; align-items: center; gap: 5px; }
.legend-now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hi); }

/* ---------- Relations ---------- */
.rel-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; align-items: start; }
.rel-group h3 { font: 600 18px/1.2 var(--f-display); margin: 14px 0 6px; }
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rel-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 12px; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: var(--r); background: linear-gradient(180deg, #fffefb, #faf5ea); font-size: 13px; box-shadow: 0 1px 0 #fff inset, 0 3px 8px -6px rgba(70, 48, 22, .3); }
.rel-text { font-size: 17px; font-weight: 700; }
.rel-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rel-type { font-weight: 600; }
.ptag { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--paper-deep); color: var(--ink-soft); }
.ptag.new { background: var(--gold-soft); color: #6d521b; }
.rel-note { color: var(--ink-soft); font-size: 12.5px; }
.empty { font-size: 13px; color: var(--ink-faint); margin: 0; }

/* ---------- Elements ---------- */
.el-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: start; }
.el-cols .el-block + .el-block { margin-top: 0; }
.el-block h3 { font: 600 17px/1.2 var(--f-display); margin: 0 0 2px; }
.el-block .basis { font-size: 12px; color: var(--ink-faint); margin: 0 0 8px; }
.bars { display: grid; gap: 7px; }
.bar { display: grid; grid-template-columns: 74px minmax(0, 1fr) 24px; gap: 8px; align-items: center; font-size: 13px; }
.bar-track { height: 11px; background: var(--paper-deep); border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(70, 48, 22, .2); }
.bar-fill { display: block; height: 100%; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .15); }
.bar-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.season { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--gold); border-radius: var(--r); overflow: hidden; box-shadow: 0 4px 10px -6px rgba(160, 122, 44, .5); }
.season div { text-align: center; padding: 8px 4px; font-size: 14px; font-weight: 600; background: linear-gradient(180deg, #fbf3df, var(--gold-soft)); }
.season div + div { border-left: 1px solid #dcc79a; }
.season small { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-soft); }
.el-caveat { margin-top: 14px; }

/* ---------- Day Master card ---------- */
.dm-panel { padding: 0; }
.dm-panel > summary {
  list-style: none; cursor: pointer; padding: 16px 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
}
.dm-panel > summary::-webkit-details-marker { display: none; }
.dm-panel > summary .chev { margin-left: auto; color: var(--ink-faint); transition: transform .2s; }
.dm-panel[open] > summary .chev { transform: rotate(180deg); }
.dm-sum-title { font: 600 22px/1.1 var(--f-display); }
.dm-glyph { font: 42px/1 var(--f-brush); text-shadow: 0 2px 4px rgba(70, 48, 22, .2); }
.dm-body { padding: 22px 24px 24px; display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); grid-template-areas: "card text" "facts facts" "foot foot"; gap: 20px 24px; align-items: start; }
.dm-body > .tilt-wrap { grid-area: card; }
.dm-text { grid-area: text; min-width: 0; }
.dm-foot { grid-area: foot; }
.area-book { grid-area: book; }
.area-book:empty { display: none; }
.bk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.bk-head .panel-title { font-size: 24px; }
.bk-src { margin-left: auto; font-size: 13px; color: var(--gold); letter-spacing: .06em; }
.bk-body { display: grid; grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .bk-body { grid-template-columns: 96px minmax(0, 1fr); } .bk-side { grid-column: 1 / -1; } }
.bk-score { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bk-score svg { width: 88px; height: 88px; transform: rotate(-90deg); }
.bk-n { position: absolute; top: 26px; left: 0; right: 0; text-align: center; font: 700 32px/1 var(--f-display); font-variant-numeric: lining-nums; color: var(--seal); }
.bk-cap { font-size: 12px; color: var(--ink-soft); text-align: center; }
.bk-quote { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--gold-soft); border-radius: 0 var(--r) var(--r) 0; font: 500 15px/1.75 var(--f-body); }
.bk-plain { margin: 0 0 6px; font-size: 14px; }
.bk-list { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.bk-list li { display: flex; gap: 6px; align-items: baseline; }
.bk-list li > span:first-child { font-weight: 700; font-size: 17px; }
.bk-list li::after { margin-left: auto; font-size: 12px; font-weight: 600; }
.bk-top::after { content: "✓"; color: var(--wood); }
.bk-hid::after { content: "½"; color: var(--gold); }
.bk-none::after { content: "—"; color: var(--ink-faint); }
.bk-match { margin: 0 0 10px; font-size: 14px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: var(--r); }
.bk-match span { color: var(--seal); font-weight: 600; }
.bk-more summary { cursor: pointer; font-size: 13.5px; color: var(--seal); }
.bk-more p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.area-book .help { margin-top: 10px; font-size: 12.5px; }
.dm-card-btn { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%; }
.dm-name { font-size: 15px; margin: 0 0 8px; }
.dm-name strong { font: 700 32px/1 var(--f-body); margin-right: 8px; }
.lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #f4ede0; padding: 2px; box-shadow: inset 0 1px 3px rgba(70, 48, 22, .12); }
.lang-toggle button { border: 0; background: none; padding: 4px 12px; font-size: 13px; cursor: pointer; border-radius: 999px; }
.lang-toggle button[aria-pressed=true] { background: linear-gradient(180deg, #3a322b, var(--ink)); color: var(--panel); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .35); }
.dm-tag { margin: 14px 0 6px; padding-left: 12px; border-left: 2px solid var(--gold); font: italic 500 19px/1.3 var(--f-display); color: var(--ink); }
.dm-about { margin: 0; font-size: 14px; color: var(--ink-soft); max-width: 60ch; }
.dm-facts { grid-area: facts; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 253, 248, .7); overflow: hidden; }
.dm-facts div { padding: 10px 14px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); min-width: 0; }
.dm-facts div:nth-child(3n) { border-right: 0; }
.dm-facts div:nth-child(2) { grid-column: span 2; }
.dm-facts div:nth-child(2) { border-right: 0; }
.dm-facts div:nth-child(n+3) { border-bottom: 0; }
.dm-facts dt { color: var(--ink-faint); font-size: 12.5px; margin-bottom: 3px; }
.dm-facts dt .term { text-align: left; }
.dm-facts dd { margin: 0; font-size: 15px; }
.dm-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dm-note { font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 0; }
.zoom-link { background: none; border: 0; padding: 0; color: var(--seal); cursor: pointer; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* 3D card tilt with a moving sheen */
.tilt-wrap { perspective: 900px; }
.tilt { position: relative; transition: transform .25s ease; transform-style: preserve-3d; border-radius: 14px; --gx: 50%; --gy: 30%; }
.tilt img { display: block; width: 100%; height: auto; border-radius: 14px; filter: drop-shadow(0 12px 18px rgba(30, 35, 50, .28)) drop-shadow(0 2px 3px rgba(30, 35, 50, .2)); }
.tilt::after {
  content: ""; position: absolute; inset: 1.5% 2%; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .45), transparent 45%); mix-blend-mode: soft-light;
}
.tilt:hover::after { opacity: 1; }

.img-missing {
  aspect-ratio: 2496 / 4028; display: grid; place-items: center; text-align: center; padding: 12px;
  border: 2px dashed var(--line); border-radius: 12px; color: var(--ink-faint); font-size: 12px; background: var(--paper-deep);
}

/* ---------- Readings ---------- */
.readings {
  padding-block: 56px 48px; position: relative;
  background: linear-gradient(180deg, rgba(62, 122, 108, .07), rgba(62, 122, 108, 0) 70%);
  border-top: 1px solid var(--line);
}
.readings::before { /* meander band above the section */
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 8px; opacity: .8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 7.5h7.5V1.5h-5v3h2' fill='none' stroke='%23a07a2c' stroke-width='1' opacity='.45'/%3E%3C/svg%3E");
}
.steps { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); }
.step-n {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--f-display); color: var(--seal);
  background: linear-gradient(180deg, #fbe7b4, #d8a957); border: 1px solid #f0d48f; color: #3a1d10; box-shadow: 0 2px 8px -1px rgba(0, 0, 0, .5);
}
.packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 26px; align-items: stretch; }
.pkg {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 22px; border-radius: 10px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #fffefb, var(--panel) 50%, var(--panel-2));
  box-shadow: inset 0 1px 0 #fff, var(--shadow-2); transition: transform .2s ease, box-shadow .2s ease;
}
.pkg:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, var(--shadow-3); }
.pkg.featured { border-color: var(--gold); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--gold-hi), var(--shadow-3); }
.pkg.chosen { border-color: var(--seal); box-shadow: inset 0 1px 0 #fff, 0 0 0 2px var(--seal), var(--shadow-3); }
.pkg-badge {
  position: absolute; top: -11px; left: 22px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 3px 11px; border-radius: 999px; color: #fff8ee;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 3px 8px -2px rgba(160, 122, 44, .6);
}
.pkg h3 { margin: 0; font: 600 23px/1.2 var(--f-display); }
.pkg-price { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pkg-price span { font: 700 34px/1 var(--f-display); color: var(--seal); text-shadow: 0 1px 0 #fff; }
.pkg-price small { font-size: 12.5px; color: var(--ink-faint); }
.pkg-sum { margin: 0; font-size: 14px; color: var(--ink-soft); }
.pkg-list { margin: 4px 0 8px; padding: 0; list-style: none; display: grid; gap: 7px; align-content: start; font-size: 13.5px; flex: 1; }
.pkg-list li { padding-left: 18px; position: relative; }
.pkg-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.pkg-choose { align-self: stretch; }
.order-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: stretch; } /* both boxes end at the same line */
.order-why { margin-top: 6px; padding-top: 16px; border-top: 1px dashed var(--line); }
.order-why h4 { margin: 0 0 10px; font: 600 16px/1.2 var(--f-display); letter-spacing: .06em; }
.order-why ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; font-size: 13.5px; color: var(--ink-soft); }
.order-why li { padding-left: 18px; position: relative; line-height: 1.65; }
.order-why li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--seal); }
@media (max-width: 600px) { .order-why ul { grid-template-columns: minmax(0, 1fr); } }
.order-panel { display: flex; flex-direction: column; gap: 14px; }
.order-panel form { display: flex; flex-direction: column; gap: 14px; }
.order-panel .row2 { margin-top: 0; }
.order-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: #f7f2e7; border: 1px solid var(--line-soft); box-shadow: inset 0 1px 3px rgba(70, 48, 22, .07); }
.order-meta strong { font-size: 15px; }
.order-chart { font-size: 18px; letter-spacing: .08em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.order-done { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.order-done h3 { margin: 4px 0 0; font: 600 26px/1.2 var(--f-display); }
.done-ref { margin: 0; display: flex; flex-direction: column; }
.done-ref span { font-size: 12px; color: var(--ink-faint); }
.done-ref strong { font: 700 28px/1.2 var(--f-display); letter-spacing: .08em; color: var(--seal); }
.order-done p { margin: 0; }
.track-panel { display: flex; flex-direction: column; }
.track-head { margin: 0; display: flex; gap: 10px; align-items: center; font: 600 20px/1.2 var(--f-display); }
.track-help { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); }
.track-form { display: grid; gap: 12px; margin-top: 14px; }
.track-form .btn-ghost { justify-self: start; }
.track-result:empty { display: none; }
.track-result { margin-top: 14px; }
.track-card { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: #fffdf8; border: 1px solid var(--line-soft); }
.track-card p { margin: 0; }
.track-card h4 { margin: 6px 0 0; font: 600 18px/1.2 var(--f-display); }
.report-text { white-space: pre-wrap; font-size: 14px; line-height: 1.7; max-height: 480px; overflow-y: auto; padding: 10px 12px; background: var(--panel); border-radius: var(--r); border: 1px solid var(--line-soft); }
.status-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--paper-deep); color: var(--ink-soft); }
.status-pill.st-awaiting_payment { background: var(--gold-soft); color: #6d521b; }
.status-pill.st-paid, .status-pill.st-in_progress { background: #e3eef6; color: #23507c; }
.status-pill.st-delivered { background: #e2f0e6; color: #24653d; }
.status-pill.st-cancelled { background: #eee; color: #777; }
.disclaimer { font-size: 12.5px; color: var(--ink-faint); margin: 22px 0 0; text-align: center; }

/* ---------- Stem index ---------- */
.stems { padding-block: 52px 60px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(44, 62, 92, .06), transparent 40%); }
.stems-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: center; margin-bottom: 24px; }
.stems-intro .lede { max-width: 60ch; margin: 0; }
.cycle { margin: 0; padding: 16px 18px 14px; background: rgba(252, 249, 242, .85); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: inset 0 0 0 3px rgba(252, 249, 242, .9), inset 0 0 0 4px rgba(168, 132, 63, .22); display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: center; }
.cycle-svg { width: 100%; height: auto; display: block; }
.cycle figcaption { display: grid; gap: 16px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.cycle figcaption b { color: var(--ink); font-size: 15px; }
@media (min-width: 901px) { .cycle figcaption span { white-space: nowrap; } }
.cycle figcaption span { padding-left: 26px; position: relative; }
.cycle figcaption span::before { content: ""; position: absolute; left: 0; top: .85em; width: 18px; border-top: 2px solid var(--gold); }
.cycle figcaption .cy-ke::before { border-top: 2px dashed var(--seal); }
@media (max-width: 900px) { .stems-intro { grid-template-columns: minmax(0, 1fr); gap: 18px; } .cycle { max-width: 460px; } }
@media (max-width: 480px) { .cycle { grid-template-columns: 140px minmax(0, 1fr); gap: 10px; padding: 12px; } .cycle figcaption { font-size: 12.5px; } }
.gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.el-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 18px; min-width: 0; } /* subgrid keeps cards level across columns */
.el-intro {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 18px 14px 20px; background: rgba(252, 249, 242, .85); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: inset 0 0 0 3px rgba(252, 249, 242, .9), inset 0 0 0 4px rgba(168, 132, 63, .22);
}
.el-glyph { font: 58px/1 var(--f-brush); text-shadow: 0 3px 8px rgba(30, 25, 15, .16); }
.el-name { margin: 2px 0 0; font: 600 19px/1.2 var(--f-display); letter-spacing: .08em; }
.el-tags { margin: 0; font-size: 12px; color: var(--gold); letter-spacing: .06em; }
.el-desc { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-soft); text-align: left; }
.el-next { /* generating-cycle chip on the column boundary */
  position: absolute; right: -9px; top: 50%; transform: translate(50%, -50%); z-index: 1; writing-mode: vertical-rl;
  font-size: 11.5px; letter-spacing: .2em; color: var(--ink-soft); padding: 8px 2px;
  background: linear-gradient(90deg, #fffcf4, var(--paper)); border: 1px solid var(--line); border-radius: 999px;
}
.el-col:last-child .el-next { display: none; }
:lang(en) .el-next { writing-mode: horizontal-tb; font-size: 0; padding: 0; width: 18px; height: 18px; }
:lang(en) .el-next::before { content: "→"; font-size: 12px; line-height: 16px; display: block; text-align: center; }
.el-cards { display: grid; gap: 18px; }
.stem-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
.stem-card .tilt-wrap { width: 100%; max-width: 180px; margin-bottom: 4px; }
.stem-thumb { background: none; border: 0; padding: 0; cursor: zoom-in; display: block; width: 100%; }
.stem-card h4 { margin: 0; font: 600 16px/1.2 var(--f-body); display: flex; align-items: baseline; gap: 6px; }
.stem-char { font: 700 24px/1 var(--f-body); }
.stem-tag { margin: 0; font-size: 13px; line-height: 1.5; text-wrap: balance; color: var(--dai); }
@media (min-width: 1081px) { .stem-tag { min-height: 3em; } } /* five columns: two lines each, so the links line up */
.g-badge { font-size: 11px; padding: 2px 9px; border-radius: 999px; color: #fff8ee; white-space: nowrap;
  background: linear-gradient(180deg, var(--seal-hi), var(--seal)); box-shadow: 0 2px 6px -2px rgba(124, 34, 25, .55); }
.stem-card.mine .tilt img { outline: 2px solid var(--seal); outline-offset: 4px; }
@media (max-width: 1080px) {
  /* each element becomes a row: explanation, then its two cards */
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .el-col { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 20px; align-items: center; }
  .el-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-next { display: none; }
}
@media (max-width: 600px) {
  .el-col { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .el-intro { padding: 14px 14px 16px; }
  .el-glyph { font-size: 46px; }
  .stem-card .tilt-wrap { max-width: 150px; }
}

/* ---------- Lightbox ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 560px); width: 100%; max-height: 94vh; }
.lightbox::backdrop { background: rgba(30, 25, 20, .74); backdrop-filter: blur(2px); }
.lb-inner { background: var(--panel); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 94vh; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.lb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-head h3 { margin: 0; font: 600 20px/1.2 var(--f-display); flex: 1; min-width: 0; }
.lb-close { border: 0; background: var(--paper-deep); width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.lb-about { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.lb-img-wrap { overflow: auto; min-height: 0; display: flex; justify-content: center; }
.lb-img-wrap img { max-height: calc(94vh - 160px); width: auto; max-width: 100%; height: auto; display: block; }

/* ---------- Install bar (PWA) ---------- */
.install-bar {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom, 0px)); width: min(560px, calc(100% - 24px));
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 2px 0 #fff inset, 0 18px 36px -14px rgba(70, 48, 22, .45);
}
.install-bar[hidden] { display: none; }
.install-icon img { width: 44px; height: 44px; border-radius: 10px; display: block; }
.install-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.install-close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--ink-faint); cursor: pointer; padding: 4px 6px; }
@media (display-mode: standalone) { .site-head { padding-top: env(safe-area-inset-top, 0px); } }

/* ---------- Fun section on the home page ---------- */
.play { padding-block: 52px 56px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(184, 58, 46, .05), transparent 45%); }
.play-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.play-card {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: center; padding: 20px 24px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, #fffefb, var(--panel) 50%, var(--panel-2)); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: inset 0 1px 0 #fff, var(--shadow-2); transition: transform .2s ease, box-shadow .2s ease;
}
.play-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, var(--shadow-3); }
.play-art { position: relative; height: 150px; border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  background: linear-gradient(180deg, #1c2d4a, #3f5c86); box-shadow: inset 0 0 0 3px #6b4226, inset 0 0 0 4px #c9a24f; }
.play-art-theater img { height: 128px; width: auto; margin-bottom: 4px; }
.play-art-today { background: linear-gradient(180deg, #fbf3df, var(--gold-soft)); box-shadow: inset 0 0 0 1px var(--line); align-items: center; gap: 10px; }
.pa-ring { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font: 700 30px/1 var(--f-display); color: var(--seal);
  background: radial-gradient(closest-side, #fffdf7 78%, transparent 80% 100%), conic-gradient(var(--seal) 0 82%, var(--line-soft) 82% 100%); }
.pa-chips { display: flex; gap: 6px; }
.pa-yi, .pa-ji { font: 700 15px/1 var(--f-body); color: #fff8ee; padding: 6px 9px; border-radius: 3px; }
.pa-yi { background: var(--wood); } .pa-ji { background: var(--seal); }
.play-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.play-text strong { font: 600 22px/1.2 var(--f-display); }
:lang(zh) .play-text strong { font: 400 26px/1.2 var(--f-brush); letter-spacing: .04em; }
.play-text > span { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.play-text em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--seal); margin-top: 4px; }
.play-text em::after { content: " →"; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; letter-spacing: .08em; color: var(--ink-faint); margin: 0 0 14px; }
.crumbs a { color: var(--seal); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
@media (max-width: 900px) { .play-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .play-card { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 16px; } .play-art { height: 120px; } .play-art-theater img { height: 100px; } .pa-ring { width: 58px; height: 58px; font-size: 24px; } .play-art-today { flex-direction: column; gap: 8px; } .pa-yi, .pa-ji { font-size: 13px; padding: 5px 7px; } }

/* ---------- Day Master Theatre (theater.html) ---------- */
.theater { padding-block: 40px 56px; }
.th-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: start; }
.th-title { margin: 0 0 14px; }
:lang(zh) .th-title { font: 400 clamp(38px, 4.4vw, 56px)/1.1 var(--f-brush); letter-spacing: .04em; }
.th-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 22px; margin-top: 22px; }
.th-person { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.th-who { margin: 0; font: 600 20px/1.2 var(--f-display); letter-spacing: .06em; }
.th-note, .th-pair, .th-actions, .th-msg { grid-column: 1 / -1; margin: 0; }
.th-pair { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; font: 600 22px/1.3 var(--f-body); }
.th-pair:empty { display: none; }
.th-rel { font-size: 13px; font-weight: 600; color: var(--seal); padding: 2px 12px; border: 1px solid var(--seal); border-radius: 999px; letter-spacing: .06em; }
.th-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.th-actions button { flex: 1; min-width: 140px; }
.th-sample-box { margin-top: 26px; }
.th-samples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip-btn {
  border: 1px solid var(--line); background: #fffdf8; color: var(--ink); border-radius: 999px; padding: 7px 15px; font-size: 14px; cursor: pointer;
  box-shadow: 0 2px 6px -4px rgba(70, 48, 22, .4); transition: border-color .15s, background .15s;
}
.chip-btn:hover { border-color: var(--seal); background: var(--seal-soft); }
.th-stage { position: sticky; top: 20px; width: min(100%, calc((100vh - 140px) * 9 / 16)); justify-self: center; } /* whole video fits on screen under the header */
.th-screen { position: relative; border-radius: 18px; overflow: hidden; background: #1f1d1a; box-shadow: var(--shadow-3), 0 0 0 1px rgba(168, 132, 63, .5); }
.th-screen canvas { display: block; width: 100%; height: auto; } /* the canvas keeps its own 9:16 shape; the stage width sets its size */
.th-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .2); }
.th-bar span { display: block; height: 100%; width: 0; background: var(--seal); }
@media (max-width: 900px) {
  .th-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .th-stage { position: static; order: -1; width: min(100%, 420px); margin: 0 auto; }
}
@media (max-width: 560px) { .th-form { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .nav-link { padding: 7px 8px; font-size: 13.5px; } .lang-btn { margin-left: 2px; } }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding-block: 22px 34px; font-size: 12.5px; color: #c9cfd9; background: linear-gradient(180deg, #2f4262, var(--dai)); border-top: 0; }
.site-foot a { color: #e6c98a; }
.site-foot p { margin: 0 0 6px; max-width: 90ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) and (min-width: 901px) {
  .hero-fan { --spread: 50px; --card-w: 128px; --gate: 380px; }
}
@media (max-width: 1080px) {
  .result-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "today" "card" "table" "book" "luck" "rel" "el"; }
  .packages { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .order-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .intro { position: static; }
  .hero { padding-block: 40px 90px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 8px; }
  .hero-fan { --spread: 62px; --card-w: 136px; --gate: 380px; }
  .hero-copy { padding-left: 52px; }
  .form-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .rel-cols, .el-cols { grid-template-columns: minmax(0, 1fr); }
  .el-cols { gap: 16px; }
}
@media (max-width: 700px) {
  .gets-list { grid-template-columns: minmax(0, 1fr); }
  .form-panel { padding: 22px 20px; }
  .hero-fan { --spread: 48px; --card-w: 112px; --gate: 320px; }
  .sc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tiqian { font-size: 13px; padding: 12px 7px; }
  .hero-copy { padding-left: 44px; }
  .hero-nums { gap: 8px; padding-top: 14px; }
  .hero-nums dt { font-size: 28px; }
  .hero-cta { margin-bottom: 24px; }
  .scroll-hint { display: block; }
  .summary { grid-template-columns: minmax(0, 1fr); }
  .dm-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "text" "facts" "foot"; }
  .dm-facts { grid-template-columns: minmax(0, 1fr); }
  .dm-facts div, .dm-facts div:nth-child(n) { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: baseline; border-right: 0; border-bottom: 1px solid var(--line-soft); grid-column: auto; }
  .dm-facts div:last-child { border-bottom: 0; }
  .dm-facts dt { margin: 0; }
  .dm-card-btn { max-width: 260px; margin: 0 auto; }
  .panel { padding: 18px; }
  .row3 { grid-template-columns: 1fr 1fr 1fr; }
  .row2, .order-meta { grid-template-columns: minmax(0, 1fr); }
  .time-row { grid-template-columns: 1fr 1fr; }
  .time-row .check { grid-column: 1 / -1; padding-bottom: 0; }
  .sum-grid div { grid-template-columns: 104px minmax(0, 1fr); }
  .rel-list li { grid-template-columns: minmax(0, 1fr); }
  .big { font-size: 28px; }
  .pillars th[scope=row] { width: 88px; min-width: 88px; font-size: 11.5px; }
  table.pillars { min-width: 560px; }
  .site-nav { width: 100%; justify-content: flex-start; }
}
@media (max-width: 420px) {
  .hero-fan { --spread: 32px; --card-w: 96px; --gate: 290px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .fan-inner { animation: none; }
}

/* Cormorant draws old-style figures by default; prices, counts and references use lining figures */
.pkg-price span, .done-ref strong, .order-meta strong, .lk, .bar-n, .stat .n, .orow, .detail h2, .step-n { font-variant-numeric: lining-nums tabular-nums; }
:lang(zh) .stems .sec-head h2 .zh-sm { display: none; }
:lang(en) .hero-nums dd { font-size: 12px; letter-spacing: .02em; text-align: center; }


/* ---------- Chinese and English set separately ----------
   Chinese characters are dense: they need a size or two more than Latin text to read comfortably, a slightly looser
   line height, shorter lines measured in characters, and justified paragraphs. English keeps the base sizes and wraps
   by width in ch. Everything below only touches text size, spacing and line length, never layout. */
:lang(zh) body { letter-spacing: .02em; }
:lang(zh) .lede { font-size: 17px; line-height: 1.9; max-width: 36em; text-align: justify; }
:lang(zh) .lede.wide { max-width: none; }
:lang(zh) .stems-intro .lede { max-width: 30em; }
:lang(zh) .hero-lede { font-size: 17px; max-width: 28em; text-align: left; }
:lang(zh) .help, :lang(zh) .privacy, :lang(zh) .warn, :lang(zh) .errors { font-size: 14.5px; line-height: 1.75; }
:lang(zh) .sub, :lang(zh) .sum-grid dt, :lang(zh) .dm-facts dt { font-size: 13.5px; }
:lang(zh) .hero-nums dd { font-size: 14px; letter-spacing: .2em; }
:lang(zh) .hero-now { font-size: 15px; }
:lang(zh) .eyebrow { font-size: 14px; }
:lang(zh) .sc-cell .sc-a { font-size: 13.5px; } :lang(zh) .sc-cell .sc-t { font-size: 12.5px; }
:lang(zh) .gets-list strong { font-size: 16px; } :lang(zh) .gets-list div > span { font-size: 14.5px; line-height: 1.7; }
:lang(zh) .field > label, :lang(zh) .field > legend { font-size: 16px; }
:lang(zh) .seg span, :lang(zh) .check, :lang(zh) .radio, :lang(zh) .settings summary { font-size: 15px; }
:lang(zh) .chip { font-size: 13.5px; }
:lang(zh) .sum-grid div { font-size: 14.5px; }
:lang(zh) .today-date, :lang(zh) .today-god { font-size: 15.5px; }
:lang(zh) .today-theme { font-size: 21px; }
:lang(zh) .today-lists ul { font-size: 15.5px; gap: 8px; }
:lang(zh) .today-notes p { font-size: 15px; }
:lang(zh) .ts-cap, :lang(zh) .bk-cap { font-size: 13.5px; }
:lang(zh) .table-notes { font-size: 13.5px; line-height: 1.8; }
:lang(zh) .ss-list { font-size: 13.5px; }
:lang(zh) .luck-facts, :lang(zh) .month-detail, :lang(zh) .abbr-legend { font-size: 14px; }
:lang(zh) .strip-head .hint { font-size: 13px; }
:lang(zh) .rel-list li { font-size: 14px; } :lang(zh) .rel-note { font-size: 13.5px; }
:lang(zh) .el-block .basis { font-size: 13.5px; } :lang(zh) .bar { font-size: 14px; }
:lang(zh) .bk-src { font-size: 14px; }
:lang(zh) .bk-quote { font-size: 17px; line-height: 1.9; }
:lang(zh) .bk-plain, :lang(zh) .bk-list, :lang(zh) .bk-match { font-size: 15.5px; line-height: 1.8; }
:lang(zh) .bk-more summary, :lang(zh) .bk-more p { font-size: 14.5px; }
:lang(zh) .area-book .help { font-size: 13.5px; }
:lang(zh) .dm-about { font-size: 15px; line-height: 1.85; } :lang(zh) .dm-note { font-size: 13.5px; }
:lang(zh) .zoom-link { font-size: 14px; }
:lang(zh) .steps li { font-size: 15px; line-height: 1.7; }
:lang(zh) .pkg h3 { font-size: 24px; } :lang(zh) .pkg-sum { font-size: 15px; } :lang(zh) .pkg-list { font-size: 15px; gap: 8px; }
:lang(zh) .pkg-price small { font-size: 13.5px; }
:lang(zh) .order-why ul { font-size: 15px; }
:lang(zh) .disclaimer { font-size: 13.5px; }
:lang(zh) .el-desc { font-size: 14.5px; line-height: 1.8; } :lang(zh) .el-tags { font-size: 13.5px; }
:lang(zh) .stem-tag { font-size: 14.5px; } :lang(zh) .stem-card h4 { font-size: 17px; }
:lang(zh) .play-text > span { font-size: 15px; line-height: 1.75; } :lang(zh) .play-text em { font-size: 15px; }
:lang(zh) .cycle figcaption { font-size: 14px; } :lang(zh) .cycle figcaption b { font-size: 16px; }
:lang(zh) .site-foot { font-size: 13.5px; line-height: 1.8; }
:lang(zh) .install-text { font-size: 14.5px; }
:lang(zh) .nav-link { font-size: 15px; letter-spacing: .06em; }
:lang(en) .lede { max-width: 64ch; }
:lang(en) .lede.wide { max-width: none; }
:lang(en) .nav-link { letter-spacing: .02em; }
@media (max-width: 480px) { :lang(en) .hero-nums dd { font-size: 11.5px; letter-spacing: .02em; text-align: center; } }
@media (max-width: 700px) { .hero-lede br { display: none; } }


/* ======================================================================
   Old-temple style: quiet and restrained. Aged paper, sumi ink, weathered wood, moss and one vermilion accent;
   hairlines instead of frames and shadows, square corners, a light serif instead of the brush font for headings.
   Pages opt in with class="temple" on <html>.
   ====================================================================== */

.temple {
  --tp-paper: #ece6da;
  --tp-paper-2: #e4dccc;
  --tp-ink: #2b2722;
  --tp-ink-soft: #5d554b;
  --tp-wood: #4a3426;
  --tp-wood-2: #6b4c37;
  --tp-moss: #66704f;
  --tp-red: #a8402e;
  --tp-line: rgba(43, 39, 34, .22);
}
.temple body {
  background-color: var(--tp-paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.temple .bg-arch { opacity: .035; color: var(--tp-wood); }

/* header: a dark timber beam with a thin vermilion line underneath, like an eave */
.temple .site-head { background: linear-gradient(180deg, var(--tp-wood-2), var(--tp-wood)); border-bottom: 0; box-shadow: 0 2px 0 var(--tp-red), 0 10px 24px -14px rgba(40, 25, 15, .6); }
.temple .site-head::after { display: none; }
.temple .brand-name { color: #efe6d6; font-weight: 500; letter-spacing: .08em; }
.temple .brand-sub { color: #d9c3a0; letter-spacing: .5em; }
.temple .nav-link { color: #d8ccb9; letter-spacing: .14em; }
.temple .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.temple .lang-btn { color: #efe6d6; border-color: rgba(239, 230, 214, .5); }
.temple .lang-btn:hover { background: #efe6d6; color: var(--tp-wood); }

/* hero: plain paper, no painted hills; the gate becomes a thin ink wheel */
.temple .hero { padding-block: 72px 96px; background: none; }
.temple .hero::after { display: none; }
.temple .hero-sky { display: none; }
.temple .hero-in { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; }
.temple .hero-copy { padding-left: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 44px; align-items: start; }
.temple .tiqian { display: none; }

/* Chinese title set vertically, read right to left, with a vertical hairline beside it */
.temple:lang(zh) .hero-title, .temple .hero-title:lang(zh) {
  grid-row: 1 / span 5; writing-mode: vertical-rl; margin: 0; padding-left: 26px; border-left: 1px solid var(--tp-line);
  font: 500 64px/1.25 var(--f-body); letter-spacing: .32em; color: var(--tp-ink); text-shadow: none; white-space: nowrap;
}
.temple .hero-title em { color: var(--tp-red); font: 400 22px/1.4 var(--f-body); letter-spacing: .5em; margin: 0 18px 0 0; }
.temple:lang(en) .hero-title, .temple .hero-title:lang(en) { grid-column: 1 / -1; font: 500 clamp(40px, 4.4vw, 62px)/1.08 var(--f-display); text-shadow: none; color: var(--tp-ink); }
.temple:lang(en) .hero-title em, .temple .hero-title:lang(en) em { margin: 10px 0 0; font: italic 400 .52em/1.2 var(--f-display); letter-spacing: .02em; }
.temple .hero-lede { border-top: 0; padding-top: 6px; color: var(--tp-ink-soft); font-size: 16.5px; line-height: 2; max-width: 24em; }
.temple:lang(en) .hero-lede { max-width: 32em; }

/* buttons: a vermilion block and an ink outline, square corners, no gloss */
.temple .btn-gold { background: var(--tp-red); box-shadow: none; border-radius: 0; letter-spacing: .3em; padding: 14px 34px; font-weight: 600; }
.temple .btn-gold:hover { transform: none; background: #923624; }
.temple .btn-line { border-radius: 0; color: var(--tp-ink); border-color: var(--tp-ink); background: transparent; letter-spacing: .24em; }
.temple .btn-line:hover { background: var(--tp-ink); color: var(--tp-paper); }

/* numbers: no panel, just hairlines */
.temple .hero-nums { background: none; border: 0; box-shadow: none; border-top: 1px solid var(--tp-line); border-bottom: 1px solid var(--tp-line); border-radius: 0; padding: 16px 0; }
.temple .hero-nums div + div { border-left-color: var(--tp-line); }
.temple .hero-nums dt { font: 400 34px/1 var(--f-display); color: var(--tp-ink); }
.temple .hero-nums dd { color: var(--tp-moss); letter-spacing: .3em; }
.temple .hero-now { color: var(--tp-ink-soft); }
.temple .hero-now strong { color: var(--tp-red); }
.temple .live-dot { background: var(--tp-red); box-shadow: none; animation: none; }

/* the dial in ink: no fills, thin rings, muted labels; the gate opening becomes paper with a full moon outline */
.temple .gate { filter: none; }
.temple .gate > circle:nth-of-type(1) { fill: none; stroke: var(--tp-ink); stroke-width: 1; }
.temple .gate > circle:nth-of-type(2) { stroke: var(--tp-line); }
.temple .gate line { stroke: var(--tp-ink); opacity: .5; }
.temple .gate text { fill: var(--tp-ink-soft) !important; font-weight: 400 !important; }
.temple .gate text.dial-on { fill: var(--tp-red) !important; filter: none; }
.temple .gate .dial-hl { fill: rgba(168, 64, 46, .08); stroke: rgba(168, 64, 46, .4); }
.temple .gate circle[r="200"], .temple .gate circle[r="166"] { stroke: var(--tp-ink); opacity: .35; }
.temple .gate circle[r="160"] { fill: #f3eee3; stroke: var(--tp-line); }
.temple .gate circle[r="80"] { display: none; }
.temple .gate circle[r="30"] { fill: none; stroke: var(--tp-red); stroke-width: 1.4; opacity: 1; }
.temple .gate g[stroke] { display: none; }
.temple .fan-card { filter: drop-shadow(0 16px 18px rgba(40, 30, 20, .28)); }
.temple .fan-inner { animation: none; transform: rotateX(4deg); }

@media (max-width: 900px) {
  .temple .hero-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .temple .hero-copy { column-gap: 26px; }
  .temple:lang(zh) .hero-title, .temple .hero-title:lang(zh) { font-size: 46px; padding-left: 18px; }
}
.temple .hero-copy > :not(.hero-title) { grid-column: 2; }
.temple .hero-copy:lang(en) { display: block; }
.temple .btn-gold:lang(en), .temple .btn-line:lang(en) { letter-spacing: .08em; }
.temple .hero-nums dd:lang(en) { letter-spacing: .08em; }
.temple .hero-nums dt { font-variant-numeric: lining-nums; }
.temple .gate circle[r="30"] { fill: rgba(168, 64, 46, .06); }
.temple .hero-lede br { display: none; }
.temple .hero-cta { gap: 12px; }
.temple .hero-cta .btn-gold, .temple .hero-cta .btn-line { padding: 13px 24px; }
.temple .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }

/* panels and cards: flat paper with a single hairline, no gold corners or deep shadows */
.temple .panel, .temple .pkg, .temple .el-intro, .temple .play-card, .temple .cycle, .temple .gets-list li, .temple .lb-inner, .temple .install-bar {
  background: var(--panel); border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 8px 22px -18px rgba(40, 30, 20, .45);
}
.temple .panel::before { inset: 6px; border-color: var(--line-soft); border-radius: 0; }
.temple .panel::after { display: none; }
.temple .pkg:hover, .temple .play-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(40, 30, 20, .55); }
.temple .pkg.featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 8px 22px -18px rgba(40, 30, 20, .45); }
.temple .pkg.chosen { border-color: var(--seal); box-shadow: 0 0 0 1px var(--seal), 0 8px 22px -18px rgba(40, 30, 20, .45); }
.temple .pkg-badge { background: var(--ink); border-radius: 0; box-shadow: none; letter-spacing: .14em; }
.temple .pkg-price span { color: var(--seal); text-shadow: none; font-weight: 500; }
.temple .pkg-list li::before, .temple .order-why li::before, .temple .today-lists li::before { width: 5px; height: 5px; background: var(--ink-soft); }

/* buttons */
.temple .btn-primary { background: var(--seal); box-shadow: none; border-radius: 0; text-shadow: none; letter-spacing: .12em; font-weight: 600; }
.temple .btn-primary:hover { transform: none; filter: none; background: #923624; }
.temple .btn-primary:active { transform: none; box-shadow: none; }
.temple .btn-ghost { background: transparent; border: 1px solid var(--ink); border-radius: 0; box-shadow: none; letter-spacing: .08em; }
.temple .btn-ghost:hover { transform: none; background: var(--ink); color: var(--paper); }
.temple .btn-ghost:active { box-shadow: none; transform: none; }
.temple .chip-btn { border-radius: 0; border-color: var(--line); background: transparent; box-shadow: none; }
.temple .chip-btn:hover { border-color: var(--ink); background: transparent; }
.temple .zoom-link, .temple .crumbs a, .temple .play-text em { color: var(--seal); }

/* small seals stay as red stamps, flatter */
.temple .seal-sm, .temple .seal-lg { background: var(--seal); box-shadow: inset 0 0 0 1.5px rgba(251, 243, 232, .5); border-radius: 2px; }
.temple .step-n { background: none; border: 1px solid var(--ink); color: var(--ink); box-shadow: none; font-weight: 500; }

/* headings: a quiet serif, the brush font kept for the big element glyphs only */
.temple .sec-head h2, .temple .readings > .wrap > .sec-head h2, .temple .stems .sec-head h2, .temple .play .sec-head h2, .temple .intro-title, .temple .th-title {
  font-family: var(--f-body); font-weight: 500; letter-spacing: .14em; text-shadow: none;
}
.temple:lang(en) .sec-head h2, .temple:lang(en) .intro-title, .temple:lang(en) .th-title,
.temple .sec-head h2:lang(en), .temple .intro-title:lang(en), .temple .th-title:lang(en) { font-family: var(--f-display); font-weight: 500; letter-spacing: .01em; }
.temple .panel-title { font-weight: 500; letter-spacing: .06em; }
.temple h1 { text-shadow: none; font-weight: 500; }
.temple .play-text strong, .temple:lang(zh) .play-text strong { font: 500 22px/1.3 var(--f-body); letter-spacing: .1em; }
.temple .eyebrow { color: var(--seal); letter-spacing: .3em; }

/* sections: no colour washes, one hairline between them */
.temple .readings, .temple .stems, .temple .play { background: none; border-top: 1px solid var(--line); }
.temple .readings::before { display: none; }
.temple .view-form > .form-layout { padding-top: 56px; }

/* form controls */
.temple input[type=text], .temple input[type=number], .temple input[type=email], .temple input[type=date], .temple select, .temple textarea {
  border-radius: 0; background-color: #faf7f1; box-shadow: none; border-color: var(--line);
}
.temple .seg, .temple .lang-toggle { border-radius: 0; background: transparent; box-shadow: none; }
.temple .seg span, .temple .lang-toggle button { border-radius: 0; }
.temple .seg input:checked + span, .temple .lang-toggle button[aria-pressed=true] { background: var(--ink); color: var(--paper); box-shadow: none; }
.temple .sc-cell { background: transparent; border-radius: 0; }
.temple .sc-cell.on { background: rgba(168, 64, 46, .07); box-shadow: inset 0 0 0 1px var(--seal); transform: none; }

/* chart details */
.temple .pillars tr.zebra td, .temple .pillars tr.zebra th[scope=row] { background: rgba(43, 39, 34, .03); }
.temple .lk { border-radius: 0; background: transparent; box-shadow: none; }
.temple .lk[aria-pressed=true], .temple .lk.on { background: rgba(168, 64, 46, .06); }
.temple .rel-list li { border-radius: 0; background: transparent; box-shadow: none; }
.temple .today-lists h3 { border-radius: 0; }
.temple .today-yi { background: var(--moss, #66704f); }
.temple .bk-quote, .temple .today-notes { border-radius: 0; background: rgba(140, 111, 69, .08); }
.temple .order-meta, .temple .track-card, .temple .month-detail { border-radius: 0; background: rgba(43, 39, 34, .025); box-shadow: none; }
.temple .el-intro { box-shadow: none; }
.temple .el-next { background: var(--paper); }
.temple .play-art { border-radius: 0; box-shadow: inset 0 0 0 3px #4a3426; }
.temple .play-art-today { box-shadow: inset 0 0 0 1px var(--line); background: rgba(140, 111, 69, .08); }

/* footer: the same timber as the header */
.temple .site-foot { background: linear-gradient(180deg, #4a3426, #3a281d); color: #d8ccb9; border-top: 2px solid var(--seal); }
.temple .site-foot a { color: #efd9a8; }

/* theatre page frame */
.temple .th-screen { border-radius: 2px; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -20px rgba(40, 30, 20, .6); }
.temple .th-bar span { background: var(--seal); }
@media (max-width: 700px) {
  /* phones: vertical title on its own row, everything else full width below it */
  .temple .hero-copy { display: block; }
  .temple:lang(zh) .hero-title, .temple .hero-title:lang(zh) { height: 200px; font-size: 52px; margin: 0 auto 26px 0; }
  .temple .hero-title em { font-size: 19px; }
  .temple .hero-lede { max-width: none; }
}
@media (max-width: 900px) { .temple .hero-in { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 480px) { .temple .nav-link { letter-spacing: .04em; padding-inline: 7px; } }

/* "remember my chart" option and the welcome-back bar on the home page */
.remember { align-items: flex-start; }
.remember > span { display: flex; flex-direction: column; gap: 2px; }
.remember small.help { margin: 0; font-size: 13px; }
.welcome { margin-top: 18px; max-width: 30em; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(246, 242, 234, .8); }
.welcome-dm { font: 400 38px/1 var(--f-brush); }
.welcome-text { flex: 1; min-width: 12em; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.welcome-text strong { color: var(--ink); font-weight: 600; }
.welcome .zoom-link { font-size: 13px; }
.temple .welcome { border-radius: 0; }
/* keep the card fan clear of the buttons and numbers: give the fan column a little more room and fan the cards a bit tighter */
@media (min-width: 1241px) { .temple .hero-fan { --spread: 62px; --card-w: 150px; } }
/* hero dial, temple style: a soft full moon instead of the empty red ring, finer ticks, and a gentler hover */
.temple .gate circle[r="30"] { fill: #eadcb8; stroke: none; opacity: 1; }
.temple .gate circle[r="80"] { display: block; fill: rgba(234, 220, 184, .35); }
.temple .gate circle[r="160"] { fill: #f2ede2; }
.temple .gate line { opacity: .3; }
.temple .gate text { opacity: .75; }
.temple .gate text.dial-on { opacity: 1; }
.temple .fan-card:hover, .temple .fan-card:focus-visible {
  filter: drop-shadow(0 18px 20px rgba(40, 30, 20, .3));
  transform: translateX(calc(var(--i) * var(--spread))) translateY(calc(var(--a) * 14px - 18px)) rotate(calc(var(--i) * 9deg)) translateZ(calc(var(--z) * 4px)) scale(1.03);
  z-index: var(--z);
}
.temple .gate circle[r="30"], .temple .gate circle[r="80"] { cx: 250px; cy: 165px; } /* moon centred in the arch */
.temple .hero-now { white-space: normal; }
.temple .hero-now > .now-sub { white-space: nowrap; }
.temple .hero-lede { max-width: 26em; }
.now-gz { white-space: nowrap; }

/* a turning taiji (the two fish) takes the place of the moon in the dial */
.gate circle[r="30"], .gate circle[r="80"] { display: none !important; }
/* soft ink and paper tones so it sits in the dial like the moon did, rather than a hard black-and-white badge */
.taiji .tj-halo { display: none; }
.taiji .tj-yang { fill: #f3ecde; }
.taiji .tj-yin { fill: rgba(74, 64, 54, .5); }
.taiji .tj-edge { display: none; } /* no ring: the soft fish edges sit straight on the paper */
.gate .taiji { transform-box: view-box; transform-origin: 250px 165px; animation: taiji-turn 40s linear infinite; }
@keyframes taiji-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gate .taiji { animation: none; } }

/* ---------- phones: bottom tab bar, one section at a time ---------- */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(246, 242, 234, .97); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 20px -16px rgba(40, 30, 20, .5); backdrop-filter: blur(8px);
  }
  .tabbar button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; font-size: 12px; color: var(--ink-faint); cursor: pointer; letter-spacing: .04em; }
  .tabbar .tb-ic { width: 26px; height: 26px; display: grid; place-items: center; font: 400 16px/1 var(--f-body); border: 1px solid var(--line); border-radius: 2px; color: var(--ink-soft); background: var(--panel); }
  .tabbar button[aria-current="page"] { color: var(--seal); font-weight: 600; }
  .tabbar button[aria-current="page"] .tb-ic { background: var(--seal); border-color: var(--seal); color: #fbf3e6; }
  body[data-tab] { padding-bottom: calc(var(--tabbar-h, 70px) + 16px); }
  body[data-tab] .site-nav .nav-link { display: none; }
  body[data-tab] .install-bar { bottom: calc(var(--tabbar-h, 70px) + 8px); }
  /* which sections each tab shows */
  body[data-tab]:not([data-tab="stems"]) #stems,
  body[data-tab]:not([data-tab="play"]) #play,
  body[data-tab]:not([data-tab="readings"]) #readings,
  body[data-tab="stems"] main > .view, body[data-tab="play"] main > .view, body[data-tab="readings"] main > .view { display: none; }
  body[data-tab="home"] #view-form > .form-layout { display: none; }
  body[data-tab="chart"] #view-form > .hero { display: none; }
  body[data-tab="chart"] .view-form > .form-layout { padding-top: 24px; }
  body[data-tab] .stems, body[data-tab] .play, body[data-tab] .readings { border-top: 0; padding-top: 28px; }
  body[data-tab="home"] .hero { padding-bottom: 40px; }
}
/* the card fan without 3D depth: iPhone Safari could hide the middle card behind the dial */
.temple .fan-inner { transform-style: flat; transform: none; animation: none; }
.temple .fan-card { transform: translateX(calc(var(--i) * var(--spread))) translateY(calc(var(--a) * 14px)) rotate(calc(var(--i) * 9deg)); }
.temple .fan-card:hover, .temple .fan-card:focus-visible { transform: translateX(calc(var(--i) * var(--spread))) translateY(calc(var(--a) * 14px - 18px)) rotate(calc(var(--i) * 9deg)) scale(1.03); }
@media (max-width: 760px) { body[data-tab] .site-nav { width: auto; } body[data-tab] .site-head-in { flex-wrap: nowrap; } }

/* ---------- phone app polish ----------
   Calmer and lighter: a slim header, a plain tab bar with no boxed icons, the home page in reading order
   (title, intro, actions, cards, then today's pillars), and no bars floating over the content. */
@media (max-width: 760px) {
  body[data-tab] .site-head-in { padding-block: 8px; }
  body[data-tab] .brand-seal { width: 34px; height: 34px; }
  body[data-tab] .brand-name { font-size: 22px; }
  body[data-tab] .brand-sub { font-size: 10.5px; margin-top: 3px; }
  body[data-tab] .lang-btn { padding: 3px 12px; font-size: 12.5px; }

  .tabbar { padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); background: rgba(242, 237, 227, .97); }
  .tabbar button { position: relative; gap: 1px; padding: 7px 0 5px; font-size: 11.5px; letter-spacing: .06em; }
  .tabbar .tb-ic { width: auto; height: auto; border: 0; background: none; font: 400 19px/1.1 var(--f-body); color: var(--ink-faint); }
  .tabbar button[aria-current="page"] .tb-ic { background: none; color: var(--seal); }
  .tabbar button[aria-current="page"]::before { content: ""; position: absolute; top: -4px; left: 30%; right: 30%; height: 2px; background: var(--seal); }

  /* home in reading order */
  body[data-tab="home"] .hero { padding: 28px 0 32px; }
  .temple body[data-tab="home"] .hero-in { display: flex; flex-direction: column; gap: 0; }
  .temple body[data-tab="home"] .hero-copy { display: contents; }
  .temple body[data-tab="home"] .hero-title { order: 1; height: auto; margin: 0 0 18px; }
  .temple body[data-tab="home"] .hero-title:lang(zh) { height: 150px; font-size: 44px; }
  .temple body[data-tab="home"] .hero-lede { order: 2; font-size: 15.5px; line-height: 1.85; margin: 0 0 20px; }
  .temple body[data-tab="home"] .hero-cta { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 8px; }
  .temple body[data-tab="home"] .hero-cta a { justify-content: center; padding: 12px 8px; letter-spacing: .12em; }
  .temple body[data-tab="home"] .hero-fan { order: 4; margin: 4px 0 6px; }
  .temple body[data-tab="home"] .hero-now { order: 5; margin: 0 0 14px; }
  .temple body[data-tab="home"] .hero-nums { order: 6; padding: 10px 0; }
  .temple body[data-tab="home"] .hero-nums dt { font-size: 24px; }
  .temple body[data-tab="home"] .welcome { order: 7; }
  body[data-tab="home"] .install-bar {
    order: 8; position: static; transform: none; width: auto; margin: 22px 0 0; box-shadow: none; grid-template-columns: 36px minmax(0, 1fr) auto auto;
    padding: 10px 12px; background: transparent; border: 1px dashed var(--line);
  }
  body[data-tab="home"] .install-icon img { width: 36px; height: 36px; }
  body[data-tab="home"] .install-text { font-size: 13px; }
  body[data-tab]:not([data-tab="home"]) .install-bar { display: none; }

  /* section pages: a little less padding, titles a size smaller */
  body[data-tab] .stems, body[data-tab] .play, body[data-tab] .readings { padding-top: 22px; }
  body[data-tab] .sec-head h2 { font-size: 26px !important; }
}
@media (max-width: 760px) {
  .temple body[data-tab="home"] .hero-fan { margin-bottom: 34px; }
  .temple body[data-tab="home"] .hero-cta { width: 100%; }
  .temple body[data-tab="home"] .hero-cta a { width: 100%; }
}
@media (max-width: 760px) {
  .tabbar .tb-ic { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar button[aria-current="page"] .tb-ic { color: var(--seal); }
  .temple body[data-tab="home"] .hero-fan { margin-bottom: 52px; }
  .temple body[data-tab="home"] .hero-cta a:lang(en) { letter-spacing: .02em; font-size: 15px; white-space: nowrap; }
}
@media (max-width: 760px) {
  /* phones: the dial sits whole above the cards, so the taiji is not half hidden behind them */
  .temple body[data-tab="home"] .hero-fan { --gate: 260px; --card-w: 96px; --spread: 40px; height: calc(var(--gate) * .516 + var(--card-w) * 1.62 + 6px); }
}
/* the dial's flat bottom edge (base line and cut rings) fades into the paper instead of ending in a hard line */
.gate line[y1="250"][y2="250"] { display: none; }
.temple .gate { -webkit-mask-image: linear-gradient(#000 62%, transparent 98%); mask-image: linear-gradient(#000 62%, transparent 98%); }

/* ---------- Classics Class (lesson.html) and the play grid with three cards ---------- */
.play-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.play-art-lesson { background: linear-gradient(180deg, #dfe6ee, #f1e3c4); box-shadow: inset 0 0 0 1px var(--line); }
.play-art-lesson img { height: 118px; width: auto; margin-bottom: 4px; }
.ls-list { display: grid; gap: 10px; margin: 22px 0; }
.ls-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; padding: 14px 16px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 2px; color: var(--ink); }
.ls-item:hover { border-color: var(--ink); }
.ls-item[aria-pressed="true"] { border-color: var(--seal); box-shadow: inset 3px 0 0 var(--seal); }
.ls-n { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ink); font: 500 20px/1 var(--f-display); }
.ls-item[aria-pressed="true"] .ls-n { background: var(--seal); border-color: var(--seal); color: #fbf3e6; }
.ls-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ls-t strong { font: 500 17px/1.35 var(--f-body); letter-spacing: .04em; }
.ls-t span { font-size: 13px; color: var(--ink-faint); }