/* guanxingtai-intro.css — the introduction of 观星台 (chart.astro.nyc) on astro.nyc.
 * Author: [ASTRO-H3] helper of the 命理学 iMac window — a17 supervisor (Claude Opus 5.5), 2026-11-15. New file.
 *
 * The owner (N159, N160, N189, N190): a "fancy home page introduction with animation" for 观星台 — the opening
 * culminating in a burst of light, the stars that link, a sample chart to play with, and the page opening into the
 * paper-and-ink 观星台 at its end. Ink black and lamp gold; then 观星台's own paper and ink (web/src/design/tokens.css:
 * --paper #f4f1e9, --surface #faf8f2, --ink #253b36, --ink-2 #4f625a).
 * Every selector is under .astro-gxt. Static first: .is-live is set only by assets/js/motion/guanxingtai-intro.js;
 * without it the page is complete — the opening is one still screen, every chart of the sample is shown.
 *
 * Co-written by [ASTRO-I3] helper of the 命理学 iMac window — a5 supervisor, session of 2026-11-15 (Claude Opus 5.5),
 * 2026-11-15 (integration point D): the paper end's ink is no longer 观星台's deep green #253b36 (the owner's N165:
 * the main colour must not be the deep green) but a warm near-black, #1D1A15 — the paper ink of the home page's
 * opening (opening-night-sky.css --ns-paper-ink) — with #4a4337 for its second ink (15.4:1 and 8.7:1 on the paper
 * #f4f1e9); the variable names --gx-pink / --gx-pink-2 are kept. One quiet gold focus ring everywhere on this page
 * (--gx-focus #A97E36, 2 px, offset 3 px: 5.4:1 on the ink black, 3.3:1 on the paper) in place of the cinnabar one
 * and of the browser's own blue ring that a clicked chart part showed in Chromium.
 */

/* ---------- isolation from the page's other stylesheets (Bricks, WordPress) ----------
 * The technique of home-sections.css / site-header.css ([ASTRO-F6], build/fixes/bricks-css/README.md):
 * the root from initial values; every descendant except SVG / img / canvas rolled back to the browser's defaults at
 * (0,1,1), before this file's own rules, which are all at (0,2,0) or more; SVG keeps its presentational attributes and
 * the outside rules that reach it are rolled back one by one; Bricks' :focus rule rolled back at (0,3,0). No rem. */
.astro-gxt { all: initial; min-width: 0; min-height: 0; }
.astro-gxt *:not(svg, svg *, img, canvas),
.astro-gxt :where(*:not(svg, svg *, img, canvas))::before,
.astro-gxt :where(*:not(svg, svg *, img, canvas))::after,
.astro-gxt :where(*:not(svg, svg *, img, canvas))::marker { all: revert; box-sizing: border-box; }
.astro-gxt svg, .astro-gxt svg * { border-color: revert; min-width: revert; min-height: revert; box-sizing: revert; }
.astro-gxt canvas { border-color: revert; box-sizing: revert; vertical-align: revert; max-width: revert; max-inline-size: revert; }
.astro-gxt.astro-gxt :focus { outline: revert; outline-offset: revert; }
/* [ASTRO-I3] one ring: none for a pointer's focus (the browser's own blue ring is not shown), the gold one for the
 * keyboard's — every focusable element of the page, buttons, the link and the sample's chart parts alike. Same
 * weight as the rule above and after it, so it wins over Bricks' :focus / :focus-visible rule as that one does. */
.astro-gxt.astro-gxt :focus:not(:focus-visible) { outline: none; }
.astro-gxt.astro-gxt :focus-visible { outline: 2px solid var(--gx-focus); outline-offset: 3px; }

.astro-gxt {
  --gx-ink: #0A0907;
  --gx-ink-2: #12100c;
  --gx-text: #ECE3D0;      /* headings */
  --gx-body: #DDD3BE;      /* running text */
  --gx-dim: #B3A994;       /* labels */
  --gx-lamp: #E2A847;      /* the lamp: lines, numerals, links */
  --gx-lamp-hi: #F6D592;
  --gx-line: rgba(226, 168, 71, .30);
  --gx-line-2: rgba(226, 168, 71, .58);
  --gx-cinnabar: #C2462F;
  /* 观星台's own paper (web/src/design/tokens.css); the ink on it a warm near-black ([ASTRO-I3], N165 — was #253b36 /
   * #4f625a, 观星台's deep green) */
  --gx-paper: #f4f1e9;
  --gx-surface: #faf8f2;
  --gx-pink: #1D1A15;
  --gx-pink-2: #4a4337;
  --gx-focus: #A97E36;     /* the one focus ring, on the ink black and on the paper */
  --gx-song: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "Source Han Serif", "Noto Serif SC", serif;
  --gx-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --gx-mono: "SF Mono", ui-monospace, Menlo, "IBM Plex Mono", Consolas, monospace;
  --gx-ease: cubic-bezier(.2, 0, 0, 1);
  --gx-x: clamp(20px, 4vw, 48px);
  --gx-top: var(--astro-header-h, 0px);
  display: block;
  position: relative;
  box-sizing: border-box;
  background: var(--gx-ink);
  color: var(--gx-body);
  font-family: var(--gx-sans);
  font-size: 17px;
  line-height: 1.9;
  text-align: start;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: break-word;
  overflow-x: clip;
}

/* ---------- shared type ---------- */
.astro-gxt .gx-kicker, .astro-gxt .gx-label {
  display: block; margin: 0; font-family: var(--gx-mono); font-size: 13px; line-height: 1.6; letter-spacing: .24em; color: var(--gx-lamp);
}
.astro-gxt .gx-h1 {
  display: block; margin: .25em 0 .2em; font-family: var(--gx-song); font-weight: 600; font-size: clamp(56px, 8.4vw, 116px);
  line-height: 1.1; letter-spacing: .22em; text-indent: .22em; color: var(--gx-text);
}
.astro-gxt .gx-line {
  display: block; margin: 0; font-family: var(--gx-song); font-size: clamp(18px, 1.9vw, 24px); line-height: 1.6; letter-spacing: .3em;
  text-indent: .3em; color: var(--gx-lamp);
}
.astro-gxt .gx-h2 {
  display: block; margin: 0; font-family: var(--gx-song); font-weight: 600; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.38;
  letter-spacing: .1em; color: var(--gx-text);
}
.astro-gxt .gx-h3 {
  display: block; margin: 0 0 .9em; padding-top: .8em; border-top: 1px solid var(--gx-line-2); font-family: var(--gx-song);
  font-weight: 400; font-size: 15px; line-height: 1.6; letter-spacing: .3em; color: var(--gx-lamp);
}

/* ---------- 1. the opening ---------- */
.astro-gxt .gx-open { display: block; position: relative; }
.astro-gxt .gx-open__pin {
  display: grid; place-items: center; position: relative; overflow: hidden;
  min-height: calc(100vh - var(--gx-top)); min-height: calc(100svh - var(--gx-top));
  padding: calc(40px + var(--gx-top)) var(--gx-x) 64px;
  background: radial-gradient(ellipse at 50% 46%, #17130c 0%, var(--gx-ink) 62%);
}
.astro-gxt .gx-open__still {
  grid-area: 1 / 1; width: min(76vh, 88vw, 640px); height: auto; overflow: visible; opacity: .5;
}
.astro-gxt .gx-em { fill: none; stroke: var(--gx-lamp); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.astro-gxt .gx-em--ring, .astro-gxt .gx-em--diamond { stroke-opacity: .7; }
.astro-gxt .gx-em-lamp { fill: var(--gx-lamp-hi); }
.astro-gxt .gx-open__words { grid-area: 1 / 1; position: relative; z-index: 2; text-align: center; padding: 24px 16px; }
.astro-gxt .gx-open__words::before {
  content: ""; position: absolute; inset: -30% -20%; z-index: -1;
  background: radial-gradient(closest-side, rgba(10, 9, 7, .86), rgba(10, 9, 7, 0));
}
.astro-gxt .gx-open__cue { display: none; }

/* live: a long scroll over a pinned screen; the module draws on a canvas and moves the five forms */
.astro-gxt.is-live .gx-open { height: 420vh; }
.astro-gxt.is-live .gx-open__pin {
  position: sticky; top: var(--gx-top); height: calc(100vh - var(--gx-top)); height: calc(100svh - var(--gx-top)); min-height: 0; padding: 0;
}
.astro-gxt.is-live .gx-open__still { display: none; }
.astro-gxt.is-live .gx-open__words { opacity: 0; transform: translateY(14px); will-change: opacity, transform; }
.astro-gxt .gx-open__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.astro-gxt .gx-open__forms { position: absolute; inset: 0; pointer-events: none; }
.astro-gxt .gx-form {
  position: absolute; left: 50%; top: 50%; width: var(--gx-s, 560px); height: var(--gx-s, 560px); margin: calc(var(--gx-s, 560px) / -2) 0 0 calc(var(--gx-s, 560px) / -2);
  will-change: transform, opacity; overflow: visible;
}
.astro-gxt .gx-form svg { width: 100%; height: 100%; overflow: visible; display: block; }
.astro-gxt .gx-form .gx-lit { opacity: 0; }
.astro-gxt .gx-form .gx-lit .gx-em { stroke: #FFF1CF; stroke-width: 2.2; }
.astro-gxt.is-live .gx-open__cue {
  display: block; position: absolute; left: 50%; bottom: 28px; width: 1px; height: 48px; margin-left: -.5px;
  background: linear-gradient(var(--gx-line-2), rgba(226, 168, 71, 0)); animation: gx-cue 2.4s var(--gx-ease) infinite;
}
@keyframes gx-cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* the opening failed in a frame: back to the still screen (the module logs one line) */
.astro-gxt.is-live.gx-open-failed .gx-open { height: auto; }
.astro-gxt.is-live.gx-open-failed .gx-open__pin { position: relative; height: auto; min-height: calc(100svh - var(--gx-top)); padding: calc(40px + var(--gx-top)) var(--gx-x) 64px; }
.astro-gxt.is-live.gx-open-failed .gx-open__still { display: block; }
.astro-gxt.is-live.gx-open-failed .gx-open__words { opacity: 1; transform: none; }
.astro-gxt.is-live.gx-open-failed .gx-open__canvas, .astro-gxt.is-live.gx-open-failed .gx-open__forms, .astro-gxt.is-live.gx-open-failed .gx-open__cue { display: none; }

/* ---------- what 观星台 is ---------- */
.astro-gxt .gx-what { display: block; max-width: 980px; margin: 0 auto; padding: clamp(72px, 12vh, 140px) var(--gx-x) 0; text-align: center; }
.astro-gxt .gx-what__trad { display: block; margin: 0 0 1.4em; font-family: var(--gx-song); font-size: clamp(17px, 1.6vw, 20px); letter-spacing: .26em; color: var(--gx-lamp); }
.astro-gxt .gx-what__you { display: block; margin: 0 0 .8em; font-family: var(--gx-song); font-weight: 600; font-size: clamp(26px, 3vw, 40px); line-height: 1.5; letter-spacing: .08em; color: var(--gx-text); text-wrap: balance; }
.astro-gxt .gx-what__p { display: block; margin: 0 auto; max-width: 30em; text-wrap: pretty; font-size: 17px; line-height: 2; color: var(--gx-body); }

/* ---------- 2. the stars that link ---------- */
.astro-gxt .gx-links { display: block; max-width: 1240px; margin: 0 auto; padding: clamp(96px, 16vh, 180px) var(--gx-x) 0; }
.astro-gxt .gx-links__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; margin: 0 0 clamp(32px, 6vh, 64px); }
.astro-gxt .gx-chain { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; font-family: var(--gx-song); font-size: 17px; letter-spacing: .2em; color: var(--gx-dim); }
.astro-gxt .gx-chain li { display: flex; align-items: center; }
.astro-gxt .gx-chain li + li::before { content: ""; display: inline-block; width: 36px; height: 1px; margin: 0 14px 0 2px; background: var(--gx-line-2); }
.astro-gxt .gx-links__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: center; }

.astro-gxt .gx-dial { display: block; position: relative; width: 100%; max-width: 680px; aspect-ratio: 1; margin: 0 auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.astro-gxt .gx-dial__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.astro-gxt .gx-rim, .astro-gxt .gx-ring { fill: none; stroke: var(--gx-line); stroke-width: 1; }
.astro-gxt .gx-rim--fine { stroke: rgba(226, 168, 71, .18); }
.astro-gxt .gx-ring--core { stroke: var(--gx-line-2); }
.astro-gxt .gx-ticks { fill: none; stroke: rgba(226, 168, 71, .34); stroke-width: 1; }
.astro-gxt .gx-ln { stroke: var(--gx-line-2); stroke-width: 1.2; transition: stroke .3s var(--gx-ease), stroke-width .3s var(--gx-ease), opacity .3s var(--gx-ease); }
.astro-gxt .gx-ln--f { stroke-dasharray: 3 6; stroke: rgba(226, 168, 71, .45); }
.astro-gxt .gx-star { fill: var(--gx-lamp); }
.astro-gxt .gx-star--c { fill: var(--gx-lamp-hi); }
.astro-gxt .gx-star--f { fill: rgba(226, 168, 71, .7); }
.astro-gxt .gx-turn { transform-origin: 320px 320px; transform-box: view-box; }
.astro-gxt .gx-dial__centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  font-family: var(--gx-song); font-size: 15px; letter-spacing: .16em; color: var(--gx-text); pointer-events: none; white-space: nowrap;
}
.astro-gxt .gx-dial__me { display: block; transform: translateY(26px); }
.astro-gxt .gx-dial__ring {
  position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--gx-mono); font-size: 12px; letter-spacing: .3em; color: var(--gx-dim);
  pointer-events: none; white-space: nowrap;
}
.astro-gxt .gx-dial__ring--t { top: calc(50% + 23.4% - 6px); }
.astro-gxt .gx-dial__ring--f { top: calc(50% + 41.9% + 22px); }
.astro-gxt .gx-dial__list { margin: 0; padding: 0; list-style: none; }
.astro-gxt .gx-node { position: absolute; transform: translate(-50%, -50%); display: block; }
.astro-gxt .gx-pick {
  display: grid; justify-items: center; gap: 0; margin: 0; padding: 6px 10px; border: 1px solid transparent; border-radius: 2px;
  background: rgba(10, 9, 7, .82); color: var(--gx-text); font-family: var(--gx-song); font-size: 17px; line-height: 1.4; letter-spacing: .1em;
  cursor: pointer; white-space: nowrap; transition: border-color .25s var(--gx-ease), color .25s var(--gx-ease), background-color .25s var(--gx-ease);
}
.astro-gxt .gx-pick__s { font-family: var(--gx-sans); font-size: 12px; letter-spacing: .12em; color: var(--gx-dim); }
.astro-gxt .gx-node--f .gx-pick { font-size: 15px; color: var(--gx-body); }
.astro-gxt .gx-pick:hover, .astro-gxt .gx-pick[aria-pressed="true"] { border-color: var(--gx-line-2); color: var(--gx-lamp-hi); }
/* the focus ring: one rule for the whole page, at the top of this file ([ASTRO-I3]; was cinnabar here). A chart part
 * of the sample is an SVG group: WebKit draws no outline on SVG, so there the same gold ring is the part's own hit
 * shape's 2 px stroke, in both engines alike (no outline, so Chromium does not draw two). */
.astro-gxt.astro-gxt .gx-part:focus-visible { outline: none; }
.astro-gxt.astro-gxt .gx-part:focus-visible .gx-hit { stroke: var(--gx-focus); stroke-width: 2px; vector-effect: non-scaling-stroke; }

/* picking: everything not joined to the pick dims */
.astro-gxt .gx-dial[data-picked] .gx-ln, .astro-gxt .gx-dial[data-picked] .gx-star--t, .astro-gxt .gx-dial[data-picked] .gx-star--f { opacity: .22; }
.astro-gxt .gx-dial[data-picked] .gx-pick { color: var(--gx-dim); }
.astro-gxt .gx-dial[data-picked] .gx-ln.is-on, .astro-gxt .gx-dial[data-picked] .gx-star.is-on { opacity: 1; }
.astro-gxt .gx-dial[data-picked] .gx-ln.is-on { stroke: var(--gx-lamp-hi); stroke-width: 2; }
.astro-gxt .gx-dial[data-picked] .gx-pick.is-on { color: var(--gx-lamp-hi); border-color: var(--gx-line-2); }
.astro-gxt .gx-spark { fill: #FFF1CF; }

.astro-gxt .gx-key { display: block; }
.astro-gxt .gx-key__t { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; margin: 0 0 32px; }
.astro-gxt .gx-key__row { display: contents; }
.astro-gxt .gx-key__n { display: block; padding: 7px 0; font-family: var(--gx-song); font-size: 17px; color: var(--gx-text); letter-spacing: .08em; }
.astro-gxt .gx-key__d { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(226, 168, 71, .14); font-size: 14px; line-height: 1.6; color: var(--gx-dim); }
.astro-gxt .gx-key__p--sub { color: var(--gx-body); }
.astro-gxt .gx-key__f { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.astro-gxt .gx-key__f .gx-key__row { display: block; padding: 3px 10px; border: 1px dashed rgba(226, 168, 71, .4); font-size: 15px; line-height: 1.6; color: var(--gx-body); }
.astro-gxt .gx-key__note { display: block; margin: 0; font-size: 14px; line-height: 1.8; color: var(--gx-dim); }
.astro-gxt .gx-key [data-key].is-on .gx-key__n, .astro-gxt .gx-key__f .gx-key__row.is-on { color: var(--gx-lamp-hi); }
.astro-gxt .gx-key__f .gx-key__row.is-on { border-style: solid; border-color: var(--gx-lamp); }
.astro-gxt .gx-key [data-key].is-on .gx-key__d { color: var(--gx-body); border-bottom-color: var(--gx-line-2); }

/* ---------- 3. the sample ---------- */
.astro-gxt .gx-sample { display: block; max-width: 1240px; margin: 0 auto; padding: clamp(110px, 18vh, 200px) var(--gx-x) clamp(72px, 12vh, 140px); }
.astro-gxt .gx-sample__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0 0 18px; padding-top: 16px; border-top: 1px solid var(--gx-line-2); }
.astro-gxt .gx-sample__who { display: flex; gap: 14px; margin: 0; font-family: var(--gx-mono); font-size: 13px; letter-spacing: .06em; color: var(--gx-dim); }
.astro-gxt .gx-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.astro-gxt .gx-switch__b {
  margin: 0; padding: 7px 16px; border: 1px solid var(--gx-line); border-radius: 2px; background: transparent; color: var(--gx-body);
  font-family: var(--gx-song); font-size: 16px; line-height: 1.5; letter-spacing: .12em; cursor: pointer;
  transition: border-color .25s var(--gx-ease), color .25s var(--gx-ease), background-color .25s var(--gx-ease);
}
.astro-gxt .gx-switch__b:hover { border-color: var(--gx-line-2); color: var(--gx-lamp-hi); }
.astro-gxt.is-live .gx-switch__b[aria-pressed="true"] { border-color: var(--gx-lamp); background: rgba(226, 168, 71, .12); color: var(--gx-lamp-hi); }
.astro-gxt .gx-read { display: none; }
.astro-gxt.is-live .gx-read {
  display: block; min-height: 1.7em; margin: 0 0 10px; font-family: var(--gx-song); font-size: 18px; line-height: 1.7; letter-spacing: .1em; color: var(--gx-lamp-hi);
}
.astro-gxt.is-live .gx-read:empty::before { content: ""; }
.astro-gxt .gx-charts { display: grid; gap: 64px; }
.astro-gxt .gx-chart { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; margin: 0; }
.astro-gxt.is-live .gx-chart.is-off { display: none; }
.astro-gxt .gx-chart__cap {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-family: var(--gx-mono); font-size: 13px; letter-spacing: .14em; color: var(--gx-dim);
}
.astro-gxt.is-live .gx-chart__cap { display: none; }
.astro-gxt .gx-chart__n { font-family: var(--gx-song); font-size: 20px; letter-spacing: .14em; color: var(--gx-text); }
.astro-gxt .gx-chart__fig { display: block; max-width: 560px; width: 100%; justify-self: center; }
.astro-gxt .gx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.astro-gxt .gx-frame { fill: none; stroke: var(--gx-line-2); stroke-width: 1.2; }
.astro-gxt .gx-rule { fill: none; stroke: var(--gx-line); stroke-width: 1; }
.astro-gxt .gx-axis { stroke: var(--gx-line-2); }
.astro-gxt .gx-tick { stroke: var(--gx-lamp); stroke-width: 1.4; }
.astro-gxt .gx-t { fill: var(--gx-body); font-family: var(--gx-song); text-anchor: middle; }
.astro-gxt .gx-t--label { font-size: 17px; fill: var(--gx-dim); letter-spacing: .1em; }
.astro-gxt .gx-t--gz { font-size: 58px; fill: var(--gx-text); }
.astro-gxt .gx-t--star { font-size: 17px; text-anchor: start; fill: var(--gx-text); }
.astro-gxt .gx-t--hua { font-size: 13px; fill: var(--gx-lamp); }
.astro-gxt .gx-t--palace { font-size: 16px; text-anchor: end; fill: var(--gx-lamp); }
.astro-gxt .gx-t--gzs { font-size: 13px; text-anchor: start; fill: var(--gx-dim); font-family: var(--gx-sans); }
.astro-gxt .gx-t--mark { font-size: 13px; fill: var(--gx-lamp); font-family: var(--gx-sans); }
.astro-gxt .gx-t--palace + .gx-t--gzs + .gx-t--mark { text-anchor: end; }
.astro-gxt .gx-t--centre { font-size: 24px; fill: var(--gx-text); letter-spacing: .12em; }
.astro-gxt .gx-t--small { font-size: 14px; fill: var(--gx-dim); }
.astro-gxt .gx-t--sign { font-size: 14px; fill: var(--gx-dim); }
.astro-gxt .gx-t--house { font-size: 12px; fill: rgba(179, 169, 148, .8); font-family: var(--gx-mono); }
.astro-gxt .gx-t--glyph { font-size: 20px; fill: var(--gx-lamp-hi); font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols", var(--gx-sans); }
.astro-gxt .gx-t--graha { font-size: 19px; fill: var(--gx-lamp-hi); }
.astro-gxt .gx-t--rank { font-size: 30px; fill: var(--gx-pink); font-family: var(--gx-song); }
.astro-gxt .gx-t--pip { font-size: 92px; fill: var(--gx-pink); font-family: "Apple Symbols", "Segoe UI Symbol", var(--gx-song); }
.astro-gxt .gx-t--rank.is-red, .astro-gxt .gx-t--pip.is-red { fill: #b0322a; }
.astro-gxt .gx-svg--card .gx-hit { fill: var(--gx-paper); }
.astro-gxt .gx-hit { fill: transparent; stroke: none; transition: fill .2s var(--gx-ease); }
.astro-gxt .gx-hit.is-soul { fill: rgba(226, 168, 71, .07); }
.astro-gxt .gx-dot { fill: var(--gx-lamp); pointer-events: none; }
.astro-gxt .gx-part { cursor: pointer; }
.astro-gxt .gx-part .gx-t, .astro-gxt .gx-part .gx-tick { pointer-events: none; }
.astro-gxt .gx-part:hover .gx-hit, .astro-gxt .gx-part.is-on .gx-hit, .astro-gxt .gx-part:focus .gx-hit { fill: rgba(226, 168, 71, .16); }
.astro-gxt .gx-svg--card .gx-part:hover .gx-hit, .astro-gxt .gx-svg--card .gx-part.is-on .gx-hit, .astro-gxt .gx-svg--card .gx-part:focus .gx-hit { fill: #fffaf0; }
.astro-gxt .gx-part.is-on .gx-t--palace, .astro-gxt .gx-part:focus .gx-t--palace { fill: var(--gx-lamp-hi); }

.astro-gxt .gx-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; color: var(--gx-body); }
.astro-gxt .gx-table th, .astro-gxt .gx-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid rgba(226, 168, 71, .14); text-align: start; vertical-align: top; font-weight: 400; }
.astro-gxt .gx-table thead th { font-family: var(--gx-mono); font-size: 12px; letter-spacing: .14em; color: var(--gx-dim); }
.astro-gxt .gx-table tbody th { font-family: var(--gx-song); color: var(--gx-text); white-space: nowrap; }
.astro-gxt .gx-table--bazi td { font-family: var(--gx-song); font-size: 22px; color: var(--gx-text); }
.astro-gxt .gx-table--bazi thead th { font-family: var(--gx-song); font-size: 15px; letter-spacing: .1em; }
.astro-gxt .gx-table tr.is-on > *, .astro-gxt .gx-table .is-on { color: var(--gx-lamp-hi); background: rgba(226, 168, 71, .08); }
.astro-gxt .gx-star-n { display: inline-block; margin-right: .7em; }
.astro-gxt .gx-star-n--minor { color: var(--gx-dim); }

/* ---------- 4. into paper and ink ---------- */
.astro-gxt .gx-dawn { display: block; height: clamp(220px, 46vh, 520px); background: linear-gradient(var(--gx-ink) 0%, #2a261d 38%, #a59f8f 76%, var(--gx-paper) 100%); }
.astro-gxt .gx-paper {
  display: block; margin: 0; padding: clamp(24px, 6vh, 64px) var(--gx-x) clamp(88px, 16vh, 168px);
  background: var(--gx-paper); color: var(--gx-pink); text-align: center;
}
.astro-gxt .gx-paper__mark { display: block; width: 116px; height: 116px; margin: 0 auto 28px; }
.astro-gxt .gx-paper__mark .gx-em { stroke: var(--gx-pink); stroke-width: 1; }
.astro-gxt .gx-paper__mark .gx-em-lamp { fill: #b08d4f; }
.astro-gxt .gx-paper__name {
  display: block; margin: 0 0 .5em; font-family: var(--gx-song); font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1.2;
  letter-spacing: .22em; text-indent: .22em; color: var(--gx-pink);
}
.astro-gxt .gx-paper__p { display: block; margin: 0 auto 2.2em; font-family: var(--gx-song); font-size: clamp(18px, 1.7vw, 21px); line-height: 2; letter-spacing: .08em; color: var(--gx-pink-2); }
.astro-gxt .gx-paper__way { display: block; margin: 0 0 1.4em; }
.astro-gxt .gx-way {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 30px; border: 1px solid var(--gx-pink); border-radius: 2px;
  background: var(--gx-pink); color: var(--gx-surface); font-family: var(--gx-song); font-size: 18px; line-height: 1.4; letter-spacing: .2em;
  text-decoration: none; transition: background-color .25s var(--gx-ease), color .25s var(--gx-ease);
}
.astro-gxt .gx-way:hover { background: transparent; color: var(--gx-pink); }
.astro-gxt .gx-way__arrow { fill: none; stroke: currentColor; stroke-width: 1.5; }
.astro-gxt .gx-paper__note { display: block; margin: 0; font-size: 14px; line-height: 1.7; letter-spacing: .06em; color: var(--gx-pink-2); }

/* the module's gentle reveal (only blocks still below the screen) */
.astro-gxt.is-live .gx-reveal.is-pending { opacity: 0; transform: translateY(10px); }
.astro-gxt.is-live .gx-reveal { transition: opacity .6s var(--gx-ease), transform .6s var(--gx-ease); }

/* ---------- the phone ---------- */
@media (max-width: 899.98px) {
  .astro-gxt .gx-links__body { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .astro-gxt .gx-chart { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 599.98px) {
  .astro-gxt { font-size: 16px; }
  .astro-gxt .gx-h1 { letter-spacing: .16em; text-indent: .16em; }
  .astro-gxt .gx-line { letter-spacing: .18em; text-indent: .18em; }
  .astro-gxt .gx-pick { padding: 3px 5px; font-size: 14px; letter-spacing: .04em; }
  .astro-gxt .gx-pick__s { font-size: 10px; letter-spacing: .04em; }
  .astro-gxt .gx-node--f .gx-pick { font-size: 12px; }
  .astro-gxt .gx-dial__centre { font-size: 13px; }
  .astro-gxt .gx-dial__ring { font-size: 10px; letter-spacing: .16em; }
  .astro-gxt .gx-dial__ring--f { top: calc(50% + 41.9% + 12px); }
  .astro-gxt .gx-chain { font-size: 15px; letter-spacing: .12em; }
  .astro-gxt .gx-chain li + li::before { width: 18px; margin: 0 8px 0 2px; }
  .astro-gxt .gx-switch { margin-left: 0; }
  .astro-gxt .gx-switch__b { padding: 6px 11px; font-size: 15px; letter-spacing: .06em; }
  .astro-gxt .gx-table { font-size: 14px; }
  /* the readout keeps two lines' room, so a long name never moves the chart under the pointer */
  .astro-gxt.is-live .gx-read { min-height: 3.4em; font-size: 16px; letter-spacing: .04em; }
  .astro-gxt .gx-what__p { text-align: start; }
}

@media print {
  .astro-gxt.is-live .gx-open { height: auto; }
  .astro-gxt.is-live .gx-chart.is-off { display: grid; }
}