/* ==========================================================
   Homepage "天盤 Celestial Luopan" — page-specific styles.
   Loads after luopan.css (tokens, header, footer, buttons).
   ========================================================== */
/* ==========================================================
   3D Crystal Ornament (carried over unchanged from index.css)
   ========================================================== */
.crystal-ornament {
  position: relative;
  width: 240px;
  height: 300px;
  transform-style: preserve-3d;
  animation: spinOrnament 30s linear infinite;
  will-change: transform;
}

@keyframes spinOrnament {
  0% { transform: rotateX(-15deg) rotateY(0deg); }
  100% { transform: rotateX(-15deg) rotateY(360deg); }
}

/* Top Jade Sphere (Solid 3D Billboard) */
.jade-sphere {
  position: absolute;
  top: -5px;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a3e4d7 0%, #2d5a27 30%, #163e13 70%, #050f05 100%);
  box-shadow:
    inset -10px -10px 25px rgba(0, 0, 0, 0.9),
    inset 10px 10px 20px rgba(255, 255, 255, 0.35),
    0 15px 35px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(45, 90, 39, 0.5);
  z-index: 10;
  transform-style: preserve-3d;
  animation: counterSpinJade 30s linear infinite;
  will-change: transform;
}

/* Specular curved reflection highlight on top jade sphere */
.jade-sphere::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 15px;
  width: 70px;
  height: 35px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50% 50% 40% 40% / 60% 60% 30% 30%;
  transform: rotate(-15deg);
  pointer-events: none;
}

@keyframes counterSpin {
  0% { transform: rotateY(360deg); }
  100% { transform: rotateY(0deg); }
}

@keyframes counterSpinJade {
  0% { transform: rotateY(360deg) rotateX(15deg); }
  100% { transform: rotateY(0deg) rotateX(15deg); }
}


/* Pentagonal Glass Pillar (5 sides) */
.crystal-pillar {
  position: absolute;
  top: 90px;
  left: calc(50% - 30px);
  width: 60px;
  height: 120px;
  transform-style: preserve-3d;
}

.pillar-face {
  position: absolute;
  width: 61.5px;
  height: 120px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 60%,
    rgba(255, 255, 255, 0.14) 100%
  );
  border: 1px solid rgba(212, 175, 55, 0.15);
  box-shadow: 
    inset 0 0 15px rgba(255, 255, 255, 0.1),
    inset -5px -5px 15px rgba(212, 175, 55, 0.05);
}

.pillar-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: 5px;
  border: 1px dashed rgba(212, 175, 55, 0.2);
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--f-han);
  color: rgba(212, 175, 55, 0.85);
  text-shadow: 0 0 4px rgba(212, 175, 55, 0.5);
  box-sizing: border-box;
  padding: 10px 0;
}

.pillar-face.p1 { transform: rotateY(0deg) translateZ(41px); }
.pillar-face.p2 { transform: rotateY(72deg) translateZ(41px); }
.pillar-face.p3 { transform: rotateY(144deg) translateZ(41px); }
.pillar-face.p4 { transform: rotateY(216deg) translateZ(41px); }
.pillar-face.p5 { transform: rotateY(288deg) translateZ(41px); }

/* 3D Bagua Octagonal Base Plate (with thickness) */
.bagua-base-3d {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 110px; /* Centered flat at Y=210px when rotated 90deg */
  left: calc(50% - 100px);
  transform-style: preserve-3d;
}

.bagua-face-top {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.25);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  box-shadow: inset 0 0 25px rgba(212, 175, 55, 0.2);
}

.bagua-face-bottom {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.08);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  box-shadow: inset 0 0 25px rgba(212, 175, 55, 0.2);
}

.bagua-face-top { transform: rotateX(90deg) translateZ(-13px); }
.bagua-face-top svg {
  transform: rotate(22.5deg);
  transform-origin: center;
}
.bagua-face-bottom { transform: rotateX(90deg) translateZ(13px); }

.bagua-side {
  position: absolute;
  width: 78px;
  height: 26px;
  top: calc(50% - 13px);
  left: calc(50% - 39px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.12) 100%
  );
  box-shadow: 
    inset 0 0 10px rgba(255, 255, 255, 0.1),
    inset -3px -3px 8px rgba(212, 175, 55, 0.05);
}

.bagua-side.s1 { transform: rotateY(0deg) translateZ(92.4px); }
.bagua-side.s2 { transform: rotateY(45deg) translateZ(92.4px); }
.bagua-side.s3 { transform: rotateY(90deg) translateZ(92.4px); }
.bagua-side.s4 { transform: rotateY(135deg) translateZ(92.4px); }
.bagua-side.s5 { transform: rotateY(180deg) translateZ(92.4px); }
.bagua-side.s6 { transform: rotateY(225deg) translateZ(92.4px); }
.bagua-side.s7 { transform: rotateY(270deg) translateZ(92.4px); }
.bagua-side.s8 { transform: rotateY(315deg) translateZ(92.4px); }

.bagua-side .side-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--f-han);
  font-size: 12px;
  font-weight: 900;
  color: #111111;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
  line-height: 1;
}

/* 3D Zodiac 12-sided Base Plate (with thickness) */
.zodiac-base-3d {
  position: absolute;
  width: 240px;
  height: 240px;
  top: 90px; /* Centered flat at Y=210px, translated lower to Y=238px */
  left: calc(50% - 120px);
  transform-style: preserve-3d;
}

.zodiac-face-top {
  position: absolute;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.3);
  clip-path: polygon(50% 0%, 75% 6.7%, 93.3% 25%, 100% 50%, 93.3% 75%, 75% 93.3%, 50% 100%, 25% 93.3%, 6.7% 75%, 0% 50%, 6.7% 25%, 25% 6.7%);
  box-shadow: inset 0 0 30px rgba(212, 175, 55, 0.25);
}

.zodiac-face-bottom {
  position: absolute;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, 0.10);
  clip-path: polygon(50% 0%, 75% 6.7%, 93.3% 25%, 100% 50%, 93.3% 75%, 75% 93.3%, 50% 100%, 25% 93.3%, 6.7% 75%, 0% 50%, 6.7% 25%, 25% 6.7%);
  box-shadow: inset 0 0 30px rgba(212, 175, 55, 0.25);
}

.zodiac-face-top { transform: rotateX(90deg) translateZ(-18px); }
.zodiac-face-bottom { transform: rotateX(90deg) translateZ(-50px); }

.zodiac-side {
  position: absolute;
  width: 63.5px;
  height: 32px;
  top: calc(50% - 16px);
  left: calc(50% - 31.75px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.12) 100%
  );
  box-shadow: 
    inset 0 0 10px rgba(255, 255, 255, 0.1),
    inset -3px -3px 8px rgba(212, 175, 55, 0.05);
}

.zodiac-side.z1 { transform: translateY(34px) rotateY(0deg) translateZ(115.9px); }
.zodiac-side.z2 { transform: translateY(34px) rotateY(30deg) translateZ(115.9px); }
.zodiac-side.z3 { transform: translateY(34px) rotateY(60deg) translateZ(115.9px); }
.zodiac-side.z4 { transform: translateY(34px) rotateY(90deg) translateZ(115.9px); }
.zodiac-side.z5 { transform: translateY(34px) rotateY(120deg) translateZ(115.9px); }
.zodiac-side.z6 { transform: translateY(34px) rotateY(150deg) translateZ(115.9px); }
.zodiac-side.z7 { transform: translateY(34px) rotateY(180deg) translateZ(115.9px); }
.zodiac-side.z8 { transform: translateY(34px) rotateY(210deg) translateZ(115.9px); }
.zodiac-side.z9 { transform: translateY(34px) rotateY(240deg) translateZ(115.9px); }
.zodiac-side.z10 { transform: translateY(34px) rotateY(270deg) translateZ(115.9px); }
.zodiac-side.z11 { transform: translateY(34px) rotateY(300deg) translateZ(115.9px); }
.zodiac-side.z12 { transform: translateY(34px) rotateY(330deg) translateZ(115.9px); }

.zodiac-side .side-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--f-han);
  font-size: 11px;
  font-weight: 900;
  color: #111111;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
  line-height: 1;
  letter-spacing: 0.5px;
}

/* Volumetric 3D Mineral Beads (Billboarded Spheres resting on top of Bagua) */
.mineral-bead {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 167px; /* Tangent to top face of Bagua base (Y=197px), sitting exactly on top of it */
  left: calc(50% - 15px);
  transform-style: preserve-3d;
}

.bead-orbit-corrector {
  position: absolute;
  width: 30px;
  height: 30px;
  transform-style: preserve-3d;
  animation: counterSpin 30s linear infinite;
  will-change: transform;
}

.bead-sphere {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow:
    inset -4px -4px 10px rgba(0, 0, 0, 0.8),
    inset 4px 4px 8px rgba(255, 255, 255, 0.45),
    0 5px 12px rgba(0, 0, 0, 0.3);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Specular curved reflection highlight on beads */
.bead-sphere::before {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 5px;
  width: 20px;
  height: 10px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50% 50% 40% 40% / 60% 60% 30% 30%;
  transform: rotate(-15deg);
  pointer-events: none;
}

/* Custom gradients for the 3D beads (vibrant crystal colors) and static counter-transforms to prevent squashing */
.bead-1 .bead-sphere {
  background: radial-gradient(circle at 30% 30%, #f0d7fa 0%, #8e44ad 40%, #4a235a 100%);
  transform: rotateY(-22.5deg) rotateX(15deg);
}
.bead-2 .bead-sphere {
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d5dbdb 40%, #7f8c8d 100%);
  transform: rotateY(-67.5deg) rotateX(15deg);
}
.bead-3 .bead-sphere {
  background: radial-gradient(circle at 30% 30%, #fdebd0 0%, #e67e22 40%, #7e5109 100%);
  transform: rotateY(-112.5deg) rotateX(15deg);
}
.bead-4 .bead-sphere {
  background: radial-gradient(circle at 30% 30%, #ebedef 0%, #34495e 40%, #1b2631 100%);
  transform: rotateY(-157.5deg) rotateX(15deg);
}
.bead-5 .bead-sphere {
  background: radial-gradient(circle at 30% 30%, #fadbd8 0%, #e74c3c 40%, #78281f 100%);
  transform: rotateY(-202.5deg) rotateX(15deg);
}
.bead-6 .bead-sphere {
  background: radial-gradient(circle at 30% 30%, #a9dfbf 0%, #27ae60 40%, #145a32 100%);
  transform: rotateY(-247.5deg) rotateX(15deg);
}
.bead-7 .bead-sphere {
  background: radial-gradient(circle at 30% 30%, #d6eaf8 0%, #2980b9 40%, #1b4f72 100%);
  transform: rotateY(-292.5deg) rotateX(15deg);
}
.bead-8 .bead-sphere {
  background: radial-gradient(circle at 30% 30%, #f9ebd2 0%, #f39c12 40%, #7e5109 100%);
  transform: rotateY(-337.5deg) rotateX(15deg);
}

.bead-1 { transform: rotateY(22.5deg) translateZ(85px); }
.bead-2 { transform: rotateY(67.5deg) translateZ(85px); }
.bead-3 { transform: rotateY(112.5deg) translateZ(85px); }
.bead-4 { transform: rotateY(157.5deg) translateZ(85px); }
.bead-5 { transform: rotateY(202.5deg) translateZ(85px); }
.bead-6 { transform: rotateY(247.5deg) translateZ(85px); }
.bead-7 { transform: rotateY(292.5deg) translateZ(85px); }
.bead-8 { transform: rotateY(337.5deg) translateZ(85px); }

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 84px;
}
.hero-inner {
  flex: 1;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  position: relative;
}
.hero-copy { position: relative; z-index: 3; padding: 40px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 28px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cinnabar);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cinnabar) 25%, transparent);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot { 50% { box-shadow: 0 0 0 9px transparent; } }

.hero-title {
  font-family: var(--f-han);
  font-weight: 900;
  font-size: clamp(3rem, 7.2vw, 7.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin-bottom: 30px;
}
.hero-title > span { display: block; }
.ht-1 { color: var(--fg); }
.ht-2 {
  font-family: var(--f-brush);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cinnabar);
  position: relative;
  width: fit-content;
}
.ht-2::after {
  content: attr(data-fill);
  position: absolute; inset: 0;
  color: var(--cinnabar);
  -webkit-text-stroke: 0;
  clip-path: inset(0 100% 0 0);
  animation: inkFill 2.6s var(--ease) 0.9s forwards;
}
@keyframes inkFill { to { clip-path: inset(0 0 0 0); } }
html[lang="en"] .hero-title { font-family: var(--f-disp); font-weight: 600; font-size: clamp(2.8rem, 6.2vw, 6.4rem); letter-spacing: -0.02em; }
html[lang="en"] .ht-2 { font-style: italic; font-weight: 400; }

.hero-desc {
  max-width: 540px;
  font-size: 1.06rem;
  color: var(--fg-2);
  margin-bottom: 40px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- The Luopan stage ---------- */
.hero-stage {
  position: relative;
  height: 100%;
  min-height: 560px;
  display: grid;
  place-items: center;
  z-index: 1;
}
.luopan {
  --size: min(880px, 60vw, 92vh);
  position: relative;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
}
.luopan-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* 天池 — the heaven pool at the centre, always lacquer-dark so the glass ornament reads */
.tianchi {
  position: absolute;
  left: 50%; top: 50%;
  width: 45%; height: 45%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(216, 178, 90, 0.16), transparent 58%),
    radial-gradient(circle, #16130f 0%, var(--pool) 72%);
  box-shadow:
    inset 0 0 0 1px rgba(216, 178, 90, 0.35),
    inset 0 0 0 7px rgba(7, 6, 5, 0.9),
    inset 0 0 0 8px rgba(216, 178, 90, 0.18),
    inset 0 20px 60px rgba(0, 0, 0, 0.8),
    0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.tianchi::before, .tianchi::after {
  content: '';
  position: absolute;
  left: 50%; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(transparent, rgba(226, 70, 44, 0.9) 12%, rgba(226, 70, 44, 0.9) 88%, transparent);
  transform: translateX(-50%) rotate(var(--needle, 0deg));
  animation: needleSettle 7s ease-in-out infinite;
}
.tianchi::after {
  top: 50%; bottom: auto; left: 8%; right: 8%;
  width: auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 178, 90, 0.35) 15%, rgba(216, 178, 90, 0.35) 85%, transparent);
  transform: translateY(-50%);
  animation: none;
}
@keyframes needleSettle {
  0%, 100% { transform: translateX(-50%) rotate(-1.6deg); }
  30% { transform: translateX(-50%) rotate(1.2deg); }
  60% { transform: translateX(-50%) rotate(-0.5deg); }
}

.orn-anchor {
  position: absolute;
  left: 50%; top: 50%;
  width: 240px; height: 300px;
  margin: -168px 0 0 -120px;
  transform: scale(var(--orn-scale, 1));
  transform-origin: 50% 56%;
  z-index: 4;
}
.hero-visual-frame {
  position: relative;
  width: 240px; height: 300px;
  transition: transform 0.5s var(--ease);
  transform-style: preserve-3d;
}
.hero-visual-frame::before {
  content: '';
  position: absolute;
  left: 50%; top: 58%;
  width: 300px; height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(216, 178, 90, 0.16) 0%, rgba(216, 178, 90, 0) 68%);
  pointer-events: none;
}
/* Ornament side labels (dark text on glass) glow faintly in the lacquered pool */
.hero-visual-frame .bagua-side .side-content,
.hero-visual-frame .zodiac-side .side-content { color: #1a140c; }
.hero-visual-frame .bagua-side,
.hero-visual-frame .zodiac-side {
  background: linear-gradient(135deg, rgba(243, 229, 190, 0.55) 0%, rgba(216, 178, 90, 0.28) 60%, rgba(243, 229, 190, 0.42) 100%);
}

/* ---------- Almanac instrument strip ---------- */
.almanac-strip {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter) 28px;
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 0.9fr 1fr 1.15fr 0.9fr;
  border-top: 1px solid transparent;
}
.alm-cell {
  padding: 16px 18px 4px;
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.alm-cell:first-child { border-left: 0; padding-left: 0; }
.alm-k {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.alm-v { font-size: 1.05rem; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alm-v.han { font-family: var(--f-han); font-weight: 700; letter-spacing: 0.08em; font-size: 1.2rem; }
.alm-v .acc { color: var(--cinnabar); }
.alm-v small { font-size: 0.72rem; color: var(--fg-3); font-weight: 500; margin-left: 6px; font-family: var(--f-mono); letter-spacing: 0; }

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 110px;
  z-index: 3;
  writing-mode: vertical-rl;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--fg-3);
  display: flex; align-items: center; gap: 12px;
}
.scroll-cue::after {
  content: '';
  width: 1px; height: 56px;
  background: linear-gradient(var(--fg-3), transparent);
  animation: cueDrop 2.2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cueDrop { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 1100px) {
  .almanac-strip { grid-template-columns: repeat(3, 1fr); }
  .alm-cell:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .scroll-cue { display: none; }
}
@media (max-width: 900px) {
  .hero { padding-top: 76px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-stage { order: -1; min-height: 0; height: 92vw; max-height: 540px; margin: 0 calc(var(--gutter) * -1); overflow: hidden; display: block; }
  .luopan { --size: min(150vw, 820px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .hero-copy { padding: 8px 0 36px; }
  .hero-title { font-size: clamp(2.7rem, 12vw, 4.6rem); }
  html[lang="en"] .hero-title { font-size: clamp(2.4rem, 10.5vw, 4.2rem); }
}
@media (max-width: 600px) {
  .almanac-strip { grid-template-columns: 1fr 1fr; }
  .alm-cell { padding-left: 12px !important; border-left: 1px solid var(--line) !important; }
  .alm-cell:first-child { grid-column: 1 / -1; }
  .alm-cell:first-child, .alm-cell:nth-child(2n) { padding-left: 0 !important; border-left: 0 !important; }
  .hero-cta .btn { flex: 1 1 auto; }
}

/* ==========================================================
   Marquee band
   ========================================================== */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq-track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.mq-track.rev { animation-direction: reverse; animation-duration: 80s; margin-top: 10px; }
.mq-item {
  display: inline-flex; align-items: center;
  font-family: var(--f-han);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.1;
  padding: 0 0.45em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  white-space: nowrap;
}
.mq-item.fill { color: var(--fg); -webkit-text-stroke: 0; }
.mq-item.cin { color: var(--cinnabar); -webkit-text-stroke: 0; }
.mq-track.rev .mq-item { font-size: clamp(1rem, 2vw, 1.4rem); font-family: var(--f-mono); font-weight: 400; color: var(--fg-3); -webkit-text-stroke: 0; letter-spacing: 0.2em; }
.mq-sep { width: 10px; height: 10px; background: var(--cinnabar); transform: rotate(45deg); flex-shrink: 0; margin: 0 0.6em; align-self: center; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================
   壹 Services — 四象 Four Symbols
   ========================================================== */
.sixiang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.sixiang::after {
  /* the centre 中宮 point where the four quarters meet */
  content: '中';
  position: absolute;
  left: 50%; top: 50%;
  width: 58px; height: 58px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  background: var(--bg);
  border: 1px solid var(--line-2);
  font-family: var(--f-han);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--dir-c);
  border-color: var(--dir-c);
  box-shadow: 0 0 24px -4px color-mix(in srgb, var(--dir-c) 60%, transparent);
  font-family: var(--f-brush);
  font-weight: 400;
  font-size: 1.45rem;
  z-index: 3;
  pointer-events: none;
}
.sx-card {
  --sx: var(--jade);
  position: relative;
  min-height: 380px;
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: color 0.5s var(--ease);
}
.sx-card:nth-child(2n) { border-right: 0; }
.sx-card:nth-child(n+3) { border-bottom: 0; }
.sx-card.sx-east  { --sx: var(--dir-e); --sx-t: var(--dir-e);     --sx-on: var(--dir-e-on); --sx-o: 0% 0%; }
.sx-card.sx-south { --sx: var(--dir-s); --sx-t: var(--dir-s);     --sx-on: var(--dir-s-on); --sx-o: 100% 0%; }
.sx-card.sx-west  { --sx: var(--dir-w); --sx-t: var(--dir-w-ink); --sx-on: var(--dir-w-on); --sx-o: 0% 100%; }
.sx-card.sx-north { --sx: var(--dir-n); --sx-t: var(--dir-n);     --sx-on: var(--dir-n-on); --sx-o: 100% 100%; }
.sx-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--sx);
  clip-path: circle(0% at var(--sx-o));
  transition: clip-path 0.9s var(--ease);
  z-index: -1;
}
.sx-card:hover::before, .sx-card:focus-within::before { clip-path: circle(145% at var(--sx-o)); }
.sx-card:hover, .sx-card:focus-within { color: var(--sx-on); }
.sx-glyph {
  position: absolute;
  right: -0.08em; bottom: -0.22em;
  font-family: var(--f-han);
  font-weight: 900;
  font-size: clamp(7rem, 14vw, 12rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--sx-t) 38%, transparent);
  font-family: var(--f-brush);
  writing-mode: vertical-rl;
  z-index: -1;
  transition: transform 0.9s var(--ease), -webkit-text-stroke-color 0.5s;
  pointer-events: none;
}
.sx-card:hover .sx-glyph, .sx-card:focus-within .sx-glyph { transform: translateY(-6%) scale(1.06); -webkit-text-stroke-color: color-mix(in srgb, var(--sx-on) 30%, transparent); }
.sx-card.has-constellation .sx-glyph { display: none; }
.sx-constellation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.sx-meta { display: flex; align-items: center; gap: 14px; }
.sx-dir {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--f-han);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--sx-t);
  font-family: var(--f-brush);
  font-weight: 400;
  font-size: 1.35rem;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sx) 12%, transparent);
  transition: color 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.sx-card:hover .sx-dir, .sx-card:focus-within .sx-dir { color: inherit; }
.sx-name { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
.sx-body { max-width: min(420px, 68%); position: relative; }
.sx-body h3 { font-family: var(--f-han); font-weight: 900; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.25; margin-bottom: 12px; }
.sx-body p { font-size: 0.98rem; opacity: 0.82; }
@media (max-width: 760px) {
  .sx-body { max-width: 100%; }
  .sixiang { grid-template-columns: 1fr; }
  .sixiang::after { display: none; }
  .sx-card { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; min-height: 300px; }
  .sx-card:last-child { border-bottom: 0 !important; }
}

/* ==========================================================
   貳 Live Lo Shu — flying stars right now
   ========================================================== */
.loshu-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.loshu-copy .sec-head { margin-bottom: 36px; grid-template-columns: 1fr; }
.loshu-copy .sec-num { grid-row: auto; font-size: clamp(4.5rem, 9vw, 7.5rem); margin-bottom: 28px; }
.ls-toggle {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  margin-bottom: 30px;
}
.ls-toggle button {
  border: 0;
  background: transparent;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.ls-toggle button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.ls-detail {
  min-height: 160px;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  margin-bottom: 30px;
}
.ls-detail-k { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.ls-detail-star {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--f-han); font-weight: 900; font-size: 2.2rem; margin: 6px 0 8px;
}
.ls-detail-star .num { font-family: var(--f-disp); font-weight: 400; font-size: 3.2rem; line-height: 1; color: var(--star, var(--fg)); }
.ls-detail p { color: var(--fg-2); max-width: 460px; }

.loshu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  aspect-ratio: 1;
  position: relative;
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
}
.loshu-grid::before {
  content: attr(data-year);
  position: absolute;
  left: 50%; top: -0.62em;
  transform: translateX(-50%);
  padding: 0 14px;
  background: var(--bg);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--fg-3);
}
.ls-cell {
  --star: var(--fg);
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(8px, 1.4vw, 16px);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.3s, background 0.3s;
}
.ls-cell::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--star) 34%, transparent), transparent 70%);
  opacity: 0.55;
  transition: opacity 0.4s;
}
.ls-cell:hover, .ls-cell:focus-visible, .ls-cell.is-active { border-color: var(--star); transform: translateY(-3px); }
.ls-cell:hover::before, .ls-cell.is-active::before { opacity: 1; }
.ls-dir { position: relative; font-family: var(--f-han); font-size: 0.82rem; font-weight: 700; color: var(--fg-3); }
.ls-num {
  position: relative;
  font-family: var(--f-disp);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 0.9;
  color: var(--star);
  align-self: flex-end;
}
.ls-name { position: relative; font-family: var(--f-han); font-size: 0.82rem; font-weight: 700; color: var(--fg-2); }
.ls-cell.center { border-style: dashed; }
.ls-cell.center .ls-dir { color: var(--gold); }
.ls-cell.changed .ls-num { animation: starFlip 0.7s var(--ease); }
@keyframes starFlip { 0% { transform: translateY(40%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.star-1 { --star: #cfd8e6; } .star-2 { --star: #8a8378; } .star-3 { --star: #4fae94; }
.star-4 { --star: #74c16e; } .star-5 { --star: #e0b23a; } .star-6 { --star: #e8e4da; }
.star-7 { --star: #e2462c; } .star-8 { --star: #f1ead9; } .star-9 { --star: #b36ad6; }
body.theme-bright .star-1 { --star: #56709a; } body.theme-bright .star-2 { --star: #3b352d; }
body.theme-bright .star-3 { --star: #237560; } body.theme-bright .star-4 { --star: #3f8a39; }
body.theme-bright .star-5 { --star: #a67a0e; } body.theme-bright .star-6 { --star: #6c6a64; }
body.theme-bright .star-7 { --star: #c3321b; } body.theme-bright .star-8 { --star: #8b6d2e; }
body.theme-bright .star-9 { --star: #7b3aa0; }
.ls-legend { font-family: var(--f-mono); font-size: 0.7rem; color: var(--fg-3); letter-spacing: 0.08em; margin-top: 14px; text-align: center; }
@media (max-width: 900px) {
  .loshu-wrap { grid-template-columns: 1fr; }
}

/* ==========================================================
   參 Instruments — tool index
   ========================================================== */
.inst-list { list-style: none; border-top: 1px solid var(--line-2); }
.inst-list li { border-bottom: 1px solid var(--line-2); }
.inst-row {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(90px, 160px) minmax(0, 1fr) 56px;
  align-items: center;
  gap: clamp(14px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px) 12px;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease);
}
.inst-row::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease);
  z-index: -1;
}
.inst-row:hover, .inst-row:focus-visible { color: var(--bg); }
.inst-row:hover::before, .inst-row:focus-visible::before { transform: scaleY(1); }
.inst-n { font-family: var(--f-mono); font-size: 0.8rem; color: var(--fg-3); transition: color 0.3s; }
.inst-row:hover .inst-n { color: var(--cinnabar); }
.inst-han {
  font-family: var(--f-han);
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.04em;
  transition: transform 0.55s var(--ease);
}
.inst-row:hover .inst-han { transform: translateX(10px); }
.inst-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inst-title { font-weight: 700; font-size: 1.1rem; }
.inst-desc { color: var(--fg-2); font-size: 0.94rem; transition: color 0.4s; }
.inst-row:hover .inst-desc { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.inst-go {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  transition: background 0.4s, border-color 0.4s, transform 0.55s var(--ease);
}
.inst-go svg { width: 20px; height: 20px; }
.inst-row:hover .inst-go { background: var(--cinnabar); border-color: var(--cinnabar); color: var(--cinnabar-ink); transform: rotate(-45deg); }
@media (max-width: 700px) {
  .inst-row { grid-template-columns: 34px minmax(0, 1fr) 44px; row-gap: 8px; }
  .inst-han { grid-column: 2; }
  .inst-body { grid-column: 2; grid-row: 2; }
  .inst-go { grid-column: 3; grid-row: 1 / span 2; width: 44px; height: 44px; }
  .inst-n { grid-row: 1 / span 2; align-self: start; padding-top: 8px; }
}

/* ==========================================================
   肆 Handbook
   ========================================================== */
.hb {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.handbook-tabs {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  counter-reset: hbtab;
  border-left: 1px solid var(--line-2);
}
.tab-btn {
  counter-increment: hbtab;
  position: relative;
  text-align: left;
  background: none;
  border: 0;
  padding: 16px 0 16px 26px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg-3);
  cursor: pointer;
  transition: color 0.3s;
  display: flex; gap: 14px; align-items: baseline;
}
.tab-btn::before {
  content: counter(hbtab, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 400;
}
.tab-btn::after {
  content: '';
  position: absolute;
  left: -1.5px; top: 12px; bottom: 12px;
  width: 3px;
  background: var(--cinnabar);
  transform: scaleY(0);
  transition: transform 0.4s var(--ease);
}
.tab-btn:hover { color: var(--fg); }
.tab-btn.active { color: var(--fg); }
.tab-btn.active::after { transform: scaleY(1); }

.hb-pages {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(26px, 4.5vw, 60px);
  overflow: hidden;
}
.hb-pages::before {
  content: '宅';
  position: absolute;
  right: -0.1em; top: -0.18em;
  font-family: var(--f-han);
  font-weight: 900;
  font-size: 16rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  pointer-events: none;
}
.tab-content { display: none; position: relative; }
.tab-content.active { display: block; animation: pageIn 0.6s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.handbook-body h4 {
  font-family: var(--f-han);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.25;
  margin-bottom: 16px;
}
.handbook-body h5 { font-family: var(--f-han); font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; color: var(--cinnabar); }
.section-intro { color: var(--fg-2); font-size: 1.02rem; margin-bottom: 34px; max-width: 720px; }
.section-intro strong { color: var(--fg); }
.ritual-list { list-style: none; display: grid; gap: 4px; }
.ritual-list li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.list-num {
  font-family: var(--f-disp);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--cinnabar);
}
.ritual-list strong { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.ritual-list span:not(.list-num) { color: var(--fg-2); }
.handbook-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; }
.handbook-info-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
.handbook-info-card ul, .handbook-info-card ol { padding-left: 20px; display: grid; gap: 10px; color: var(--fg-2); }
.handbook-info-card li::marker { color: var(--cinnabar); }
.handbook-info-card strong { color: var(--fg); }

.ritual-timeline { position: relative; display: grid; gap: 6px; }
.ritual-timeline::before {
  content: '';
  position: absolute;
  left: 19px; top: 10px; bottom: 10px;
  width: 1px;
  background: linear-gradient(var(--cinnabar), var(--line-2));
}
.timeline-item { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 14px 0; position: relative; }
.timeline-badge {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--cinnabar);
  color: var(--cinnabar);
  font-family: var(--f-mono);
  font-size: 0.85rem;
  z-index: 1;
}
.timeline-content strong { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.timeline-content p { color: var(--fg-2); margin-bottom: 8px; }
.chant-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 14px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--cinnabar);
  background: color-mix(in srgb, var(--cinnabar) 9%, transparent);
}
.chant-text { font-family: var(--f-han); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.06em; color: var(--fg); }
.btn-copy {
  border: 1px solid var(--line-2);
  background: var(--bg);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--fg-2);
  transition: border-color 0.3s, color 0.3s;
}
.btn-copy:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.highlight-quote {
  font-family: var(--f-han);
  font-size: 1.2rem !important;
  font-weight: 700;
  color: var(--cinnabar) !important;
  letter-spacing: 0.08em;
}
.faq-list { display: grid; }
.faq-item { padding: 22px 0; border-top: 1px solid var(--line); }
.faq-q { font-weight: 700; font-size: 1.06rem; margin-bottom: 8px; display: flex; gap: 12px; }
.faq-q::before { content: '問'; font-family: var(--f-han); color: var(--cinnabar); font-weight: 900; }
.faq-a { color: var(--fg-2); display: flex; gap: 12px; }
.faq-a::before { content: '答'; font-family: var(--f-han); color: var(--fg-3); font-weight: 900; flex-shrink: 0; }
html[lang="en"] .faq-q::before { content: 'Q'; font-family: var(--f-mono); }
html[lang="en"] .faq-a::before { content: 'A'; font-family: var(--f-mono); }

@media (max-width: 900px) {
  .hb { grid-template-columns: 1fr; }
  .handbook-tabs {
    position: relative; top: 0;
    flex-direction: row;
    overflow-x: auto;
    border-left: 0;
    border-bottom: 1px solid var(--line-2);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .handbook-tabs::-webkit-scrollbar { display: none; }
  .tab-btn { padding: 14px 18px 14px 0; white-space: nowrap; }
  .tab-btn::after { left: 0; right: 18px; top: auto; bottom: -1px; width: auto; height: 3px; transform: scaleX(0); transform-origin: left; }
  .tab-btn.active::after { transform: scaleX(1); }
  .handbook-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   伍 Masters & booking
   ========================================================== */
.masters-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.master {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(26px, 3.5vw, 44px);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  overflow: hidden;
  transition: border-color 0.4s, transform 0.5s var(--ease);
}
.master:hover { border-color: var(--cinnabar); transform: translateY(-4px); }
.m-seal {
  width: 76px;
  padding: 16px 0;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  background: var(--cinnabar);
  color: var(--cinnabar-ink);
  font-family: var(--f-han);
  font-weight: 900;
  font-size: 1.9rem;
  letter-spacing: 0.1em;
  line-height: 1;
  border-radius: 4px;
  align-self: start;
  box-shadow: inset 0 0 0 3px var(--cinnabar), inset 0 0 0 5px var(--cinnabar-ink);
  transform: rotate(-2deg);
}
.master:nth-child(2) .m-seal { background: transparent; color: var(--cinnabar); box-shadow: inset 0 0 0 2px var(--cinnabar); transform: rotate(2deg); }
.m-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.m-name { font-family: var(--f-han); font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
.m-title { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cinnabar); width: fit-content; }
a.m-title:hover { text-decoration: underline; text-underline-offset: 4px; }
.m-desc { color: var(--fg-2); font-size: 0.97rem; }
.m-phone { font-family: var(--f-mono); font-size: 0.9rem; color: var(--fg); margin-bottom: 8px; }
.m-body .btn { margin-top: auto; }

/* The letter — quick consult form */
.letter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(26px, 5vw, 80px);
  padding: clamp(28px, 5vw, 64px);
  background: var(--fg);
  color: var(--bg);
  border-radius: 4px;
  overflow: hidden;
}
.letter::before {
  content: '緣';
  position: absolute;
  left: -0.06em; bottom: -0.3em;
  font-family: var(--f-han);
  font-weight: 900;
  font-size: clamp(12rem, 26vw, 22rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--bg) 18%, transparent);
  pointer-events: none;
}
.letter-intro { position: relative; }
.letter-intro .form-title { font-family: var(--f-han); font-weight: 900; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.15; margin-bottom: 14px; }
.letter-intro p { color: color-mix(in srgb, var(--bg) 70%, transparent); max-width: 340px; }
.letter-stamp {
  margin-top: 30px;
  width: 92px; height: 92px;
  border: 2px solid var(--cinnabar);
  color: var(--cinnabar);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-han);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.1;
  text-align: center;
  transform: rotate(-12deg);
  opacity: 0.85;
}
#consult-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 62%, transparent); }
.form-group input, .form-group select, .form-group textarea {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--bg) 30%, transparent);
  border-radius: 0;
  padding: 10px 0;
  font-size: 1.05rem;
  color: var(--bg);
  transition: border-color 0.3s;
  width: 100%;
}
.form-group select { appearance: none; -webkit-appearance: none; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e2462c' fill='none' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 24px; }
.form-group select option { color: #1c1712; background: #f1e9da; }
.form-group textarea { resize: vertical; min-height: 90px; }
.form-group input::placeholder, .form-group textarea::placeholder { color: color-mix(in srgb, var(--bg) 38%, transparent); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-bottom-color: var(--cinnabar); }
#consult-form .btn { grid-column: 1 / -1; justify-content: space-between; padding: 20px 28px; }
.letter .btn-seal::before { background: var(--bg); }
.letter .btn-seal:hover { color: var(--fg); }
@media (max-width: 900px) {
  .masters-grid, .letter { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .master { grid-template-columns: 1fr; }
  .m-seal { writing-mode: horizontal-tb; width: auto; padding: 12px 18px; font-size: 1.4rem; justify-self: start; }
  #consult-form { grid-template-columns: 1fr; }
}

/* ==========================================================
   Brush script (書法) for highlighted Chinese words
   ========================================================== */
.sec-num, .ft-giant, .chant-text, .highlight-quote, .letter-stamp, .mq-item.fill, .mq-item.cin, .ls-detail-star span:not(.num), .m-seal, .letter::before, .hb-pages::before {
  font-family: var(--f-brush) !important;
  font-weight: 400 !important;
}
.sec-num { -webkit-text-stroke-width: 1.2px; }
.m-seal { font-size: 2.1rem; }
html[lang="en"] .ht-2 { font-family: var(--f-disp); }

/* ==========================================================
   高科技 · 玄學 — radar sweep, hologram pool, HUD, guardians
   ========================================================== */

.tianchi-holo {
  position: absolute;
  left: 50%; top: 50%;
  width: 45%; height: 45%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  background: repeating-linear-gradient(0deg, rgba(120, 220, 200, 0.07) 0 1px, transparent 1px 4px);
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 71%);
  mask: radial-gradient(circle, #000 60%, transparent 71%);
  mix-blend-mode: screen;
}
.tianchi-holo::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 22%;
  top: -22%;
  background: linear-gradient(transparent, rgba(150, 240, 220, 0.14), transparent);
  animation: holoScan 4.8s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes holoScan { 0% { top: -22%; } 70%, 100% { top: 100%; } }

/* HUD corner brackets + coordinates */
.lp-hud { position: absolute; inset: -2%; pointer-events: none; }
.lp-hud i {
  position: absolute; width: 26px; height: 26px;
  border: 1px solid var(--line-2);
}
.lp-hud i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.lp-hud i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.lp-hud i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.lp-hud i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.lp-hud-read {
  position: absolute;
  left: 34px; bottom: 4px;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  line-height: 1.7;
  white-space: nowrap;
}
.lp-hud-read b { color: var(--cinnabar); font-weight: 500; }
.lp-hud-read .blink { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .lp-hud, .guardian .g-name { display: none; }
  .guardian .g-mark { width: 38px; height: 38px; font-size: 1.1rem; }
}

/* Lo Shu cells carry the colour of their palace's element */
.ls-cell { border-top: 2px solid var(--pal, var(--line)); }
.ls-cell .ls-dir { color: var(--pal-t, var(--pal, var(--fg-3))); }
.pal-wood  { --pal: var(--dir-e); }
.pal-fire  { --pal: var(--dir-s); }
.pal-metal { --pal: var(--dir-w); --pal-t: var(--dir-w-ink); }
.pal-water { --pal: var(--dir-n); }
.pal-earth { --pal: var(--dir-c); }

/* Marquee mountains by element */
.mq-item.el-wood  { -webkit-text-stroke-color: color-mix(in srgb, var(--dir-e) 70%, transparent); }
.mq-item.el-fire  { -webkit-text-stroke-color: color-mix(in srgb, var(--dir-s) 70%, transparent); }
.mq-item.el-metal { -webkit-text-stroke-color: color-mix(in srgb, var(--dir-w-ink) 70%, transparent); }
.mq-item.el-water { -webkit-text-stroke-color: color-mix(in srgb, var(--dir-n) 80%, transparent); }
.mq-item.el-earth { -webkit-text-stroke-color: color-mix(in srgb, var(--dir-c) 70%, transparent); }
.mq-item.fill.el-wood  { color: var(--dir-e); }
.mq-item.fill.el-fire  { color: var(--dir-s); }
.mq-item.fill.el-metal { color: var(--dir-w-ink); }
.mq-item.fill.el-water { color: var(--dir-n); }
.mq-item.fill.el-earth { color: var(--dir-c); }

/* 沖煞 cell */
.alm-v .sha { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .lp-sweep, .tianchi-holo::after, .guardian .g-mark, .lp-hud-read .blink { animation: none !important; }
  .lp-sweep { display: none; }
}

/* 简体 decorative pseudo-text */
html[lang="zh-Hans"] .letter::before { content: '缘'; }
html[lang="zh-Hans"] .faq-q::before { content: '问'; }