/* site.css — Thiên Cơ Thủy Tạ · shared UI
   Division of labour (§30.2): background = heritage/atmosphere (chronoscape.js), panels = rigour/computation.
   The UI never changes with season or hour (§40); only the scene behind it does. */

:root {
  color-scheme: light;
  --ivory: #F6F1E7; --ivory-2: #EDE6D8; --ivory-3: #E2D9C6;
  --ink: #1D1B18; --ink-2: #47433C; --ink-3: #6F6A61; --gray: #7B8088; --line: #D8CFBC; --line-2: #EAE3D3;
  --gold: #B48F3B; --gold-2: #D6B76A; --gold-3: #F1E5C2; --cinnabar: #A8392B; --cinnabar-2: #8C2E22; --blue: #3F5B84;
  /* Semantic colours: relationship state only, never element identity (§19). */
  --s-self: #B48F3B; --s-good: #3B7A4F; --s-bad: #B23A2E; --s-neutral: #4D6A94; --s-mixed: #C7882A;
  --scene-ink: #F4EFE6;
  --font-ui: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Playfair Display", "Noto Serif", Georgia, "Times New Roman", serif;
  --font-han: "Noto Serif TC", "Songti TC", "PingFang TC", "Noto Serif CJK TC", serif;
  --radius: 8px;
  --shadow: 0 30px 80px rgba(4, 8, 18, .38), 0 4px 14px rgba(4, 8, 18, .18);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { font-family: var(--font-ui); font-size: 16px; line-height: 1.6; color: var(--scene-ink); background: #0b1020;
       -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ivory); color: var(--ink); padding: 8px 12px; z-index: 100; border-radius: 4px; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.tc-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 18px;
             padding: 14px clamp(16px, 3vw, 40px) 26px; background: linear-gradient(rgba(4, 8, 18, .72), rgba(4, 8, 18, .28) 70%, rgba(4, 8, 18, 0));
             color: var(--scene-ink); pointer-events: none; }
.tc-header > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: 30px; height: 30px; border-radius: 3px; background: var(--cinnabar); color: var(--ivory); display: grid; place-items: center;
               font-family: var(--font-han); font-size: 14px; letter-spacing: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__vi { font-family: var(--font-serif); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.brand__han { font-family: var(--font-han); font-size: 11px; letter-spacing: .3em; opacity: .75; margin-top: 3px; }
.tc-nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.tc-nav a { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 8px 8px; border-radius: 4px; opacity: .82; white-space: nowrap; }
.tc-nav a:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.tc-nav a[aria-current="page"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--gold-2); }
.tc-util { display: flex; gap: 8px; align-items: center; }
/* Language switcher: a two-way toggle in the scene chrome; the pressed side reads as the current language. */
.lang { display: inline-flex; border: 1px solid rgba(255, 255, 255, .45); border-radius: 6px; overflow: hidden; background: rgba(4, 8, 18, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lang button { appearance: none; border: 0; background: transparent; color: var(--scene-ink); font: 500 11px/1 var(--font-ui); letter-spacing: .12em; padding: 9px 10px; cursor: pointer; opacity: .7; }
.lang button + button { border-left: 1px solid rgba(255, 255, 255, .25); }
.lang button:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.lang button[aria-pressed="true"] { opacity: 1; background: rgba(255, 255, 255, .16); cursor: default; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap;
       font: 500 14px/1.2 var(--font-ui); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn--primary { background: var(--cinnabar); color: var(--ivory); box-shadow: 0 8px 20px rgba(168, 57, 43, .28); }
.btn--primary:hover { background: var(--cinnabar-2); transform: translateY(-1px); }
.btn--ghost { border-color: var(--gold); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--gold-3); }
.btn--scene { border-color: rgba(255, 255, 255, .45); color: var(--scene-ink); background: rgba(4, 8, 18, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--scene:hover { background: rgba(4, 8, 18, .45); }
.btn--small { padding: 7px 12px; font-size: 12px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- Page rhythm ---------- */
main { display: block; padding-top: 88px; }
section { padding: 6vh 0; }
/* Panels are 78 characters wide in the body font (ch of the 16px UI face); the hero scroll matches. */
.wrap { width: min(78ch, calc(100% - 32px)); margin: 0 auto; }
.wrap--reading { width: min(78ch, calc(100% - 32px)); }
.hero { min-height: 100svh; display: grid; place-items: center; padding: 96px 0 72px; position: relative; }
.hero__scroll-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }

/* ---------- Scroll panels (§31): smooth ivory, gold rails, seal accents, no parchment ---------- */
.scroll { position: relative; background: var(--ivory); background-image: var(--grain); color: var(--ink); border-radius: var(--radius);
          box-shadow: var(--shadow); padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 52px); }
/* Every panel is a scroll: bronze rods with gold knobs and a compass medallion at top and bottom. */
.scroll { border-radius: 4px; margin: 22px 0; }
.wrap > .scroll + .scroll { margin-top: 66px; }
.scroll::before, .scroll::after { content: ""; position: absolute; left: -22px; right: -22px; height: 38px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17.5' fill='%232d2516' stroke='%23d6b76a' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='20' r='11.5' fill='none' stroke='%23d6b76a' stroke-width='.8'/%3E%3Cpath d='M20 4.5v31M4.5 20h31M9 9l22 22M31 9L9 31' stroke='%23d6b76a' stroke-width='.8'/%3E%3Cpath d='M20 9l2.4 8.6L31 20l-8.6 2.4L20 31l-2.4-8.6L9 20l8.6-2.4z' fill='%23b48f3b'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23a8392b'/%3E%3C/svg%3E") center / 36px 36px no-repeat,
    radial-gradient(circle at 11px 50%, #f0dc9c 0 2px, #d6b76a 3px 6px, #7d6330 7px 8px, transparent 9px) left center / 24px 100% no-repeat,
    radial-gradient(circle at calc(100% - 11px) 50%, #f0dc9c 0 2px, #d6b76a 3px 6px, #7d6330 7px 8px, transparent 9px) right center / 24px 100% no-repeat,
    linear-gradient(180deg, #8c7648 0%, #3b3121 38%, #221b10 62%, #9a8452 100%) center / calc(100% - 32px) 10px no-repeat; }
.scroll::before { top: -19px; } .scroll::after { bottom: -19px; }
.scroll--center { text-align: center; }
.scroll--tight { padding: 22px 20px; }
.scroll--muted { background-color: rgba(246, 241, 231, .92); }

.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.scroll--center .kicker { justify-content: center; }
.seal-mark { width: 22px; height: 22px; border-radius: 2px; background: var(--cinnabar); color: var(--ivory); display: inline-grid; place-items: center;
             font-family: var(--font-han); font-size: 11px; line-height: 1; flex: none; letter-spacing: 0; }
.seal-mark--lg { width: 44px; height: 44px; font-size: 20px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; margin: 0 0 14px; color: var(--ink); letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: clamp(34px, 5.4vw, 60px); letter-spacing: .06em; text-transform: uppercase; }
h2 { font-size: clamp(26px, 3.6vw, 38px); }
h3 { font-size: 21px; margin-top: 6px; }
h4 { font-size: 16px; font-family: var(--font-ui); font-weight: 600; margin-bottom: 8px; }
.han { font-family: var(--font-han); }
.han--title { font-size: clamp(20px, 2.6vw, 28px); letter-spacing: .4em; color: var(--ink-2); margin: -4px 0 18px; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.credo { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.4vw, 24px); color: var(--ink-2); margin: 10px 0 22px; }
.credo b { font-style: normal; font-weight: 500; color: var(--cinnabar); }
.positioning { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 500; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.rule--gold { border-top-color: var(--gold-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.scroll--center .actions { justify-content: center; }
.moment { margin-top: 26px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; gap: 10px; align-items: center; }
.moment::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.on-scene { color: var(--scene-ink); text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
/* Glass: text that sits directly on the scene (hero captions, the hero foot, the footer) gets a translucent dark pane
   with a blurred backdrop and a gold hairline, so it reads on any season or hour without competing with the scrolls. */
.glass { background: linear-gradient(160deg, rgba(10, 16, 32, .46), rgba(4, 8, 18, .34)); backdrop-filter: blur(14px) saturate(125%); -webkit-backdrop-filter: blur(14px) saturate(125%);
         border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .16), 0 10px 30px rgba(0, 0, 0, .28); }

/* The seal is an object, not a diagram: no text selection, a hand cursor, and each segment answers the pointer. */
.seal-figure svg { user-select: none; -webkit-user-select: none; cursor: pointer; }
.seal-figure .seg { transition: filter .15s ease; }
.seal-figure .seg > path, .seal-figure .seg > rect { transition: stroke .15s ease, stroke-width .15s ease; }
.seal-figure .seg:hover { filter: brightness(1.1); }
.seal-figure .seg:hover > path { stroke: var(--ivory); stroke-width: 2; }
.seal-figure .seg--cell:hover > rect, .seal-figure .seg--cell:hover > path { stroke: var(--cinnabar); stroke-width: 1.6; }
blockquote.poem { margin: 0; align-self: center; line-height: 1.9; }
blockquote { margin: 22px 0; padding: 6px 0 6px 20px; border-left: 2px solid var(--gold-2); font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--ink-2); }
ul, ol { margin: 0 0 14px 22px; padding: 0; }
li { margin-bottom: 6px; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
pre { background: var(--ivory-2); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 0 0 14px; }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 18px; }
.grid > *, .years > *, .week > *, .hours > *, .pillars > *, .systems > *, .bar-row > * { min-width: 0; }
.chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--seal { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); align-items: start; gap: 32px; }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; background: rgba(255, 255, 255, .35); }
.card--flat { background: transparent; }
.card h3 { font-size: 19px; }
.card h4 { margin-top: 0; }
.card__foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-3); }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 10px 0 6px; }
.pillar { border: 1px solid var(--line); border-radius: 6px; padding: 14px 8px 12px; text-align: center; background: rgba(255, 255, 255, .4); position: relative; }
.pillar--self { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-3); }
.pillar--self::after { content: "Nhật Chủ"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--ivory); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.pillar--empty { border-style: dashed; color: var(--ink-3); }
.pillar__label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.pillar__han { font-family: var(--font-han); font-size: 36px; line-height: 1.05; color: var(--ink); }
.pillar__vi { font-size: 14px; font-weight: 500; margin-top: 6px; }
.pillar__sub { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.pillar__gods { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 8px; }
.tag { display: inline-block; padding: 2px 7px; border-radius: 3px; background: var(--ivory-2); border: 1px solid var(--line); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.tag--gold { background: var(--gold-3); border-color: var(--gold-2); }

/* ---------- Semantic state chips (colour + glyph + text: never colour alone) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .02em;
        border: 1px solid; white-space: nowrap; line-height: 1.5; }
.chip__glyph { font-size: 9px; }
.chip--self { color: var(--s-self); border-color: var(--s-self); background: rgba(180, 143, 59, .12); }
.chip--favorable { color: var(--s-good); border-color: var(--s-good); background: rgba(59, 122, 79, .1); }
.chip--adverse { color: var(--s-bad); border-color: var(--s-bad); background: rgba(178, 58, 46, .09); }
.chip--neutral { color: var(--s-neutral); border-color: var(--s-neutral); background: rgba(77, 106, 148, .08); }
.chip--mixed { color: var(--s-mixed); border-color: var(--s-mixed); background: rgba(199, 136, 42, .12); }
.state-bar { height: 4px; border-radius: 2px; background: var(--ivory-3); }
.state-bar--self { background: var(--s-self); } .state-bar--favorable { background: var(--s-good); } .state-bar--adverse { background: var(--s-bad); }
.state-bar--neutral { background: var(--s-neutral); } .state-bar--mixed { background: var(--s-mixed); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- Data tables ---------- */
.data { width: 100%; border-collapse: collapse; font-size: 14px; }
.data th, .data td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.data th { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.data td.num { font-variant-numeric: tabular-nums; }
.data tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 14px; }
dl.kv dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
dl.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- Bars (career) ---------- */
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 180px 1fr 44px; gap: 12px; align-items: center; font-size: 14px; }
.bar { height: 8px; background: var(--ivory-3); border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 4px; }
.bar-row .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* Overview tiles read in words; domain panels list the stars behind them. */
.tile__v--word { font-size: 17px; line-height: 1.25; }
.tile__v--word small { display: block; font-size: 11px; letter-spacing: .06em; color: var(--ink-3); margin-top: 2px; }
.star-head { margin: 0 0 12px; font-size: 15px; }
.stars { display: grid; gap: 10px; }
.star-row { display: grid; grid-template-columns: 180px 150px 1fr; gap: 12px; align-items: baseline; font-size: 14px; }
.star-row small { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
.star-row__pos { color: var(--ink-2); }
.star-row__where { color: var(--ink-3); font-size: 13px; }
.star-row--absent { opacity: .55; }
.domain-panels { display: grid; gap: 16px; margin-top: 18px; }
.domain-panel h4 { margin: 0 0 12px; }
.domain-panel .kv { margin: 0 0 8px; }
/* Soft gate (§72): the first blocks are open; later ones keep their title, body blurred behind an invitation to confirm email. */
.locked { position: relative; min-height: 240px; }
.locked__body { filter: blur(7px); opacity: .7; pointer-events: none; user-select: none; -webkit-user-select: none; }
.locked__veil { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; }
.locked__card { max-width: 380px; text-align: center; box-shadow: 0 14px 44px rgba(0, 0, 0, .22); }
.locked__card h4 { margin: 8px 0; }
.locked__card p { margin: 0 0 14px; }
.locked__card .btn[aria-disabled="true"] { opacity: .7; cursor: default; }
.locked__card .gate-form { margin-bottom: 10px; }

/* The gate's own form, and the account page's two ways back in (§72). */
.gate-form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 4px 0 10px; }
.gate-form input { flex: 1 1 200px; min-width: 0; font: 15px var(--font-ui); padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); }
.gate-form input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px var(--gold-3); }

/* The access code: shown once, so it is set to be read off the screen and copied by hand. */
.code-card { margin-top: 14px; border-color: var(--gold); }
.code-card h4 { margin-bottom: 8px; }
.code-card__code { font: 600 22px/1.4 var(--font-ui); letter-spacing: .18em; word-break: break-all; user-select: all; margin: 6px 0 10px; }

/* AI panel readings (§73): prose under the panel whose evidence it was written from. */
/* The reading leads the panel, so it is separated from the evidence below it rather than tacked on underneath. */
.reading { margin: 0 0 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.reading p { font-size: 14.5px; margin: 0 0 8px; }
.reading p:last-child { margin-bottom: 0; }
.reading__kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.reading--empty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reading__wait { margin: 0 0 6px; }
.reading--wait .reading__wait { color: var(--ink-2); }

/* Thỉnh Thiên Cơ (§71): the answer to one question, under the box it was asked in. */
.answer { margin-top: 16px; border: 1px solid var(--line); border-left-width: 3px; border-left-color: var(--gold);
          border-radius: 6px; padding: 14px 16px; background: rgba(255, 255, 255, .45); }
.answer p { font-size: 14.5px; margin: 0 0 10px; }
.answer p:last-child { margin-bottom: 0; }
.answer__q { font-family: var(--font-serif); font-size: 16px; color: var(--ink-2); }
/* The conclusion leads, so it is set as the answer and the rest reads as its evidence. */
.answer__tldr { font-family: var(--font-serif); font-size: 17.5px; line-height: 1.5; color: var(--ink);
                border-left: 2px solid var(--gold); padding-left: 14px; margin: 0 0 14px; }
.answer__tag { display: block; font: 500 10.5px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase;
               color: var(--gold); margin-bottom: 6px; }
/* The breakdown: what the reader can use at once, as cards; ranked ones carry their place. */
.answer__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0 0 16px; }
.answer__card { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: rgba(255, 255, 255, .45); }
.answer__card--ranked { border-top: 3px solid var(--gold); }
.answer__card h4 { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.answer__rank { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--ivory); font: 600 12px/1 var(--font-ui); flex: none; }
.answer__card ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.answer__card li { margin: 2px 0; }
.thinh .answer__card { background: rgba(6, 9, 17, .45); border-color: rgba(214, 183, 106, .25); }
.thinh .answer__card--ranked { border-top-color: var(--gold-2); }
.thinh .answer__card h4 { color: var(--scene-ink); }
.thinh .answer__card ul { color: rgba(244, 239, 230, .85); }
.answer__systems { list-style: none; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.answer__systems li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 6px; }
.answer__systems li:last-child { margin-bottom: 0; }
.answer__systems span:last-child { color: var(--ink-2); flex: 1 1 240px; }
.answer__note { margin-top: 14px; }
/* The one question the pavilion may ask back, set apart in cinnabar; on the ask screen it is also where to click to answer. */
.answer__askback { border-left: 2px solid var(--cinnabar); padding-left: 14px; font-family: var(--font-serif); font-style: italic; font-size: 16px; cursor: pointer; }
.answer__askback .answer__tag { color: var(--cinnabar); }
/* A sitting: answers stack, each a little apart from the last. */
.answer + .answer { margin-top: 18px; }
.history__thread { margin-left: 16px; padding-left: 14px; border-left: 1px solid var(--line); }
/* The share widget: a button, or the link with its two actions. */
.share { margin-top: 12px; display: grid; gap: 8px; }
.share__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.share__link { flex: 1 1 260px; min-width: 0; font: 13px var(--font-ui); padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-2); }
.thinh .share__link { background: rgba(6, 9, 17, .5); border-color: rgba(214, 183, 106, .3); color: var(--scene-ink); }
.thinh .share .btn--ghost { color: var(--scene-ink); border-color: rgba(214, 183, 106, .45); }
.thinh .share .btn--ghost:hover { background: rgba(214, 183, 106, .14); }
.thinh .share__state { color: rgba(244, 239, 230, .7); }
.history__thread .answer { margin-top: 12px; }

/* The same answer, read on the night: the shape holds, the ink inverts, and a gold hairline stands in for the card edge. */
.thinh .answer { text-align: left; margin-top: 8px; background: rgba(6, 9, 17, .5); border: 0; border-top: 1px solid rgba(214, 183, 106, .55); border-radius: 0;
                 color: var(--scene-ink); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 22px 0 8px; animation: thinh-in .5s ease both; }
.thinh .answer .reading__kicker { color: var(--gold-2); }
.thinh .answer__q { color: rgba(244, 239, 230, .7); font-style: italic; }
.thinh .answer p.answer__tldr { color: var(--scene-ink); border-left-color: var(--gold-2); font-size: 19px; }
.thinh .answer__tag { color: var(--gold-2); }
.thinh .answer__systems { border-bottom-color: rgba(214, 183, 106, .24); }
.thinh .answer__systems span:last-child, .thinh .answer p { color: rgba(244, 239, 230, .88); }
.thinh .answer__note, .thinh .answer .muted { color: rgba(244, 239, 230, .6); }
.thinh .answer--gate .actions { margin-top: 14px; justify-content: flex-start; }

/* The questions an account has asked (§71), on the account page: the question is the summary, the answer opens. */
.history { display: grid; gap: 10px; margin-bottom: 16px; }
.history__item { border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, .45); padding: 12px 14px; }
.history__item[open] { border-color: var(--gold); }
.history__item > summary { cursor: pointer; display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.history__item > summary::-webkit-details-marker { display: none; }
.history__q { font-family: var(--font-serif); font-size: 15.5px; color: var(--ink); flex: 1 1 320px; }
.history__when { white-space: nowrap; }
.history__item .answer { margin-top: 12px; }
.history__item .actions { margin-top: 12px; }

/* ---------- Timing strip ---------- */
.years { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.year { border: 1px solid var(--line); border-radius: 6px; padding: 12px 10px 10px; background: rgba(255, 255, 255, .4); border-top-width: 4px; }
.year--favorable { border-top-color: var(--s-good); } .year--adverse { border-top-color: var(--s-bad); }
.year--mixed { border-top-color: var(--s-mixed); } .year--neutral { border-top-color: var(--s-neutral); }
.year__y { font-family: var(--font-serif); font-size: 20px; }
.year__p { font-size: 12px; color: var(--ink-2); }
.year__l { font-size: 11.5px; margin-top: 8px; line-height: 1.4; }
.year__t { font-size: 11px; color: var(--ink-3); margin-top: 4px; }

/* ---------- Hours strip ---------- */
.hours { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.hour { border: 1px solid var(--line); border-radius: 5px; padding: 8px 4px 6px; text-align: center; background: rgba(255, 255, 255, .4); }
.hour--now { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-3); }
.hour__han { font-family: var(--font-han); font-size: 18px; line-height: 1; }
.hour__vi { font-size: 11px; margin-top: 4px; }
.hour__t { font-size: 10px; color: var(--ink-3); }
.hour .state-bar { margin-top: 6px; }

/* ---------- Week strip ---------- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day { border: 1px solid var(--line); border-radius: 6px; padding: 10px 8px; text-align: center; background: rgba(255, 255, 255, .4); }
.day--today { border-color: var(--gold); }
.day__d { font-family: var(--font-serif); font-size: 18px; }
.day__w { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.day__p { font-size: 12px; margin-top: 4px; }
.day .state-bar { margin-top: 8px; }
.day__t { font-size: 10.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.3; }

/* ---------- Actionables ---------- */
.action-list { display: grid; gap: 12px; }
.action { display: grid; grid-template-columns: 6px 1fr; gap: 14px; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px 14px 12px; background: rgba(255, 255, 255, .4); }
.action > i { border-radius: 3px; }
.action--favorable > i { background: var(--s-good); } .action--adverse > i { background: var(--s-bad); }
.action--neutral > i { background: var(--s-neutral); } .action--mixed > i { background: var(--s-mixed); }
.action h4 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.action p { font-size: 14px; color: var(--ink-2); }
details.evidence { margin-top: 8px; font-size: 13px; }
details.evidence summary { cursor: pointer; color: var(--blue); font-weight: 500; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details.evidence summary::before { content: "▸"; font-size: 10px; }
details[open].evidence summary::before { content: "▾"; }
details.evidence ul { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
details.evidence .mono { color: var(--ink-3); }

/* ---------- Forms (onboarding) ---------- */
.field { display: grid; gap: 6px; }
.field label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.field input, .field select { font: 15px var(--font-ui); padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); width: 100%; }
.field input:focus, .field select:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px var(--gold-3); }
.field .why { font-size: 12px; color: var(--ink-3); }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field--wide { grid-column: 1 / -1; }
.step { border-top: 1px solid var(--line); padding: 22px 0; display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.step:first-of-type { border-top: 0; }
.step__n { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-family: var(--font-serif); font-size: 15px; }
.step--done .step__n { background: var(--gold); color: var(--ivory); }
.step h3 { margin-top: 2px; font-size: 19px; }
.reveal { margin-top: 14px; border-left: 2px solid var(--gold-2); padding: 8px 14px; background: rgba(255, 255, 255, .45); border-radius: 0 6px 6px 0; font-size: 14px; }
.reveal:empty { display: none; }
.reveal b { font-weight: 600; }
.notice { border: 1px solid var(--s-mixed); background: rgba(199, 136, 42, .1); border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-top: 12px; }
.notice--bad { border-color: var(--s-bad); background: rgba(178, 58, 46, .08); }
.notice--info { border-color: var(--s-neutral); background: rgba(77, 106, 148, .08); }
.notice--warn { border-color: var(--s-bad); background: rgba(178, 58, 46, .08); }
.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-row label { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; background: #fff; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
/* A radio is its own size: the full-width rule for text fields must not reach it. */
.radio-row input { margin: 0; padding: 0; width: auto; flex: none; accent-color: var(--cinnabar); }
.radio-row input:checked + span { font-weight: 600; }

/* ---------- Seal figure ---------- */
.seal-figure { position: relative; max-width: 600px; margin: 0 auto; }
.seal-figure svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .12)); }
.seal-id { text-align: center; font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .2em; color: var(--ink-3); margin-top: 10px; }
.seal-caption { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 6px; }
/* The plate is turned by an SVG transform attribute about an explicit centre (see compass.apply), not by CSS: no
   transform-origin for a browser to resolve its own way, and no transition, because the compass already eases the
   heading and a second easing on top only lags it. */
/* La bàn: compass mode is a second seal in a dialog over the page, drawn as an instrument, not the portrait redrawn
   under the reader. The reading sits under it in the middle of their attention: the direction, its state, the degrees. */
.laban { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 56px 16px 24px; }
.laban__veil { position: absolute; inset: 0; background: rgba(6, 9, 17, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.laban__inner { position: relative; display: grid; gap: 10px; justify-items: center; width: min(92vw, 92vh, 520px); }
.laban__seal { width: 100%; position: relative; }
/* Where the reading is taken: an index fixed to the dialog just above the rim, in the dialog's own ivory, which the board turns under. */
.laban__index { position: absolute; top: -13px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--scene-ink); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.laban__seal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .55)); }
/* The heaven pool's halo breathes; a reader who asked for less motion gets it lit and still. */
.pool-glow { animation: pool-pulse 3.8s ease-in-out infinite; }
@keyframes pool-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .pool-glow { animation: none; opacity: .55; } }
.laban__read { margin: 6px 0 0; min-height: 34px; color: var(--scene-ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; }
.laban__dir { font-family: var(--font-serif); font-weight: 500; font-size: 28px; line-height: 1.1; }
.laban__deg { font-family: var(--font-ui); font-size: 13px; letter-spacing: .06em; color: rgba(244, 239, 230, .65); font-variant-numeric: tabular-nums; }
/* What the direction is about, under the reading: the line a reader at the wall actually needed. */
.laban__theme { flex-basis: 100%; text-align: center; font-family: var(--font-serif); font-size: 17px; line-height: 1.3; color: rgba(244, 239, 230, .88); }
.laban__note { margin: 0; min-height: 1.4em; font-size: 13px; text-align: center; color: rgba(244, 239, 230, .7); }
.laban__leave { position: fixed; top: 18px; right: clamp(16px, 3vw, 40px); z-index: 2; cursor: pointer; color: var(--scene-ink);
                border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(6, 9, 17, .55);
                font: 500 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; padding: 10px 14px; }
.laban__leave:hover { background: rgba(6, 9, 17, .8); border-color: var(--gold-2); }
.laban__leave:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
body.laban-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .laban__veil { backdrop-filter: none; -webkit-backdrop-filter: none; } }
.seal-tools { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.seal-tools .chip { vertical-align: middle; }
.seal-figure ~ .legend, .seal-id ~ .legend, .seal-figure ~ div > .legend { justify-content: center; }

/* ---------- Lá số tổng quan (hero scroll) + scene captions ---------- */
.hero--overview { padding: 84px 0 64px; overflow: hidden; }
.wrap--overview { width: min(78ch, calc(100% - 72px)); }
.overview { padding: 34px clamp(22px, 4vw, 44px) 28px; }
.overview__head { text-align: center; margin-bottom: 18px; }
.overview__title { font-size: clamp(22px, 2.8vw, 30px); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: 12px; align-items: center; margin: 0 0 6px; }
.overview__sub { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.overview__body { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: center; }
.overview__kv { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; background: rgba(255, 255, 255, .38); gap: 7px 16px; font-size: 13.5px; }
.overview__kv dt { padding-top: 2px; }
.overview__kv dd { line-height: 1.45; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.tile { border: 1px solid var(--line); border-radius: 6px; padding: 16px 8px 14px; text-align: center; background: rgba(255, 255, 255, .38); }
.tile svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tile__l { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-top: 8px; font-weight: 500; }
.tile__v { font-family: var(--font-serif); font-size: 26px; line-height: 1.2; margin-top: 2px; }
.tile__v small { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); }
.conclusion { position: relative; margin-top: 18px; border: 1px solid var(--line); border-radius: 6px; padding: 16px 70px 14px 22px; background: rgba(255, 255, 255, .38); }
.conclusion::before { content: ""; position: absolute; left: -1px; top: 18px; width: 3px; height: 22px; background: var(--cinnabar); border-radius: 0 2px 2px 0; }
.conclusion h3 { font-family: var(--font-ui); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }
.conclusion p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.conclusion__stamp { position: absolute; right: 18px; top: 16px; width: 36px; height: 36px; border: 1.5px solid var(--cinnabar); color: var(--cinnabar); border-radius: 3px;
                     display: grid; place-items: center; font-size: 17px; opacity: .85; transform: rotate(-6deg); }
.overview__actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.overview__note { text-align: center; margin: 14px 0 0; }
.hero-cap { position: absolute; max-width: 240px; padding: 16px 18px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); color: var(--scene-ink); z-index: 1; pointer-events: none; }
.hero-cap--tl { left: clamp(16px, 3vw, 52px); top: 104px; }
.hero-cap--tr { right: clamp(16px, 3vw, 52px); top: 104px; text-align: right; }
.hero-cap--bl, .hero-cap--br { bottom: 56px; padding: 12px 16px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.8; }
.hero-cap--bl { left: clamp(16px, 3vw, 52px); }
.hero-cap--br { right: clamp(16px, 3vw, 52px); text-align: right; }
.hero-cap__brand { font-family: var(--font-serif); font-size: 31px; line-height: 1.12; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; color: var(--scene-ink); font-weight: 500; }
.hero-cap__credo { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; line-height: 1.75; margin-bottom: 14px; }
.hero-cap__line { font-family: var(--font-serif); font-size: 19px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--gold-2); margin-bottom: 10px; }
.hero-cap__en { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; line-height: 1.8; opacity: .85; }
.hero-cap .seal-mark--lg { margin-bottom: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.hero-cap--tr .seal-mark--lg { margin-left: auto; }

/* ---------- Feature list / systems ---------- */
.systems { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.system { border: 1px solid var(--line); border-radius: 6px; padding: 16px 14px; background: rgba(255, 255, 255, .4); }
.system__han { font-family: var(--font-han); font-size: 22px; color: var(--ink-2); }
.system h4 { margin: 6px 0 6px; font-size: 15px; }
.system p { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.system__phase { display: inline-block; margin-top: 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.price { font-family: var(--font-serif); font-size: 44px; line-height: 1; }
.price small { font-family: var(--font-ui); font-size: 14px; color: var(--ink-3); }
.check { list-style: none; margin-left: 0; }
.check li { padding-left: 22px; position: relative; }
.check li::before { content: "◆"; position: absolute; left: 0; top: 1px; font-size: 9px; color: var(--gold); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font: 13px var(--font-ui); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; }
.chips button:hover { border-color: var(--gold); }
textarea.ask { width: 100%; min-height: 96px; font: 15px/1.5 var(--font-ui); padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); resize: vertical; }

/* ---------- Thỉnh Thiên Cơ (§71) ---------- */
/* Every other section is a parchment panel over the scene. This one is the scene: the pavilion at night, the elder
   at the rail, and a question put to him. On a wide screen the picture keeps the left and the words take the right;
   on a phone the picture takes the top. Light ink, no card, nothing that reads as a form. */
#luan-giai { padding: 0; }
.thinh { position: relative; isolation: isolate; overflow: hidden; background: #060911; color: var(--scene-ink); text-align: left; }
.thinh__scene { position: absolute; inset: 0; z-index: 0; background: #060911 url("art/thinh-thien-co.jpg") 50% 42% / cover no-repeat; }
/* The veil buys legibility where the words are and leaves the picture alone where they are not. */
.thinh__veil { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6, 9, 17, .04) 0%, rgba(6, 9, 17, .16) 34%, rgba(6, 9, 17, .8) 56%, rgba(6, 9, 17, .94) 100%),
              linear-gradient(180deg, rgba(6, 9, 17, .42), rgba(6, 9, 17, 0) 22%, rgba(6, 9, 17, 0) 72%, rgba(6, 9, 17, .55)); }
.thinh__inner { position: relative; z-index: 2; width: min(56ch, calc(100% - 48px)); margin-left: auto; margin-right: clamp(24px, 7vw, 120px);
                display: grid; gap: 22px; justify-items: start; }
.thinh--band { padding: clamp(64px, 12vh, 140px) 0 clamp(56px, 10vh, 120px); min-height: min(88vh, 900px); display: grid; align-items: center; }
.thinh__label { display: block; font: 500 10.5px/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: rgba(214, 183, 106, .85); }
.kicker--scene { color: var(--gold-2); margin: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.seal-mark--lg { font-size: 15px; padding: 7px 9px; box-shadow: 0 0 24px rgba(214, 183, 106, .35); }
.thinh__h { color: var(--scene-ink); font-family: var(--font-serif); font-size: clamp(30px, 4.6vw, 50px); font-weight: 500; line-height: 1.12; margin: 0; text-transform: none;
            letter-spacing: .005em; text-shadow: 0 2px 24px rgba(0, 0, 0, .7); }
.thinh__lead { margin: 0; max-width: 52ch; font-size: 15.5px; color: rgba(244, 239, 230, .8); text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }

/* The chart the question is asked of: the reader's own seal on a scrap of paper, so the screen knows who is asking. */
.thinh__seal { display: flex; align-items: center; gap: 16px; }
.thinh__seal-figure { flex: none; width: 88px; height: 88px; padding: 6px; border-radius: 8px; max-width: none; margin: 0;
                      background: var(--ivory); background-image: var(--grain);
                      box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(214, 183, 106, .35); }
.thinh__seal-figure svg { display: block; width: 100%; height: 100%; cursor: default; }
.thinh__seal-text { display: grid; gap: 3px; font-size: 13.5px; color: rgba(244, 239, 230, .78); }
.thinh__seal-text b { font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--scene-ink); }
.thinh__seal-text a { color: var(--gold-2); font-size: 12.5px; }

/* The asking is one object: a pane of dark glass holding the field, the questions others ask, who is listening,
   and the stamp to press. It brightens when the reader writes in it, so the order is learned by looking. */
.thinh__panel { width: 100%; display: grid; gap: 14px; padding: 18px 20px 16px; border-radius: 12px;
                border: 1px solid rgba(214, 183, 106, .32); background: rgba(6, 9, 17, .62);
                backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
                box-shadow: 0 26px 70px rgba(0, 0, 0, .55); transition: border-color .2s ease, box-shadow .2s ease; }
.thinh__panel:focus-within { border-color: var(--gold-2); box-shadow: 0 26px 70px rgba(0, 0, 0, .55), 0 0 0 4px rgba(214, 183, 106, .14), 0 0 60px rgba(214, 183, 106, .12); }
.thinh__panel .thinh__label { color: rgba(214, 183, 106, .9); }
/* The question is written on the night, not typed into a box: a serif line, a gold caret, one hairline beneath. */
textarea.ask--scene { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(214, 183, 106, .3); border-radius: 0;
                      min-height: 0; padding: 4px 0 14px; text-align: left; resize: none; overflow: hidden; caret-color: var(--gold-2);
                      font: 400 clamp(21px, 2.6vw, 28px)/1.45 var(--font-serif); color: var(--scene-ink);
                      transition: border-color .2s ease; }
textarea.ask--scene::placeholder { color: rgba(244, 239, 230, .4); font-style: italic; }
textarea.ask--scene:focus { outline: none; border-bottom-color: rgba(214, 183, 106, .7); }
.thinh__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.thinh__chips .thinh__label { margin-right: 4px; }
.thinh__chips button { padding: 6px 12px; border: 1px solid rgba(214, 183, 106, .3); border-radius: 999px; background: rgba(255, 255, 255, .035);
                       color: rgba(244, 239, 230, .8); font: italic 13.5px/1.2 var(--font-serif); cursor: pointer;
                       transition: border-color .15s ease, background .15s ease, color .15s ease; }
.thinh__chips button:hover { border-color: var(--gold-2); color: var(--scene-ink); background: rgba(214, 183, 106, .12); }
.thinh__chips .thinh__chip-new { font-style: normal; font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; border-style: dashed; opacity: .8; }
.thinh .answer__askback { color: var(--scene-ink); }
/* The house: folded away, because most questions are not about one and an empty pair of fields on every asking
   is two more things to read past. Open, it is two plain fields and the sentence that says what they are for. */
.thinh__house { border-top: 1px solid rgba(214, 183, 106, .16); padding-top: 12px; }
.thinh__house > summary { font: 12px/1.4 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
                          color: rgba(244, 239, 230, .55); cursor: pointer; list-style: none; }
.thinh__house > summary::marker, .thinh__house > summary::-webkit-details-marker { display: none; content: ''; }
.thinh__house > summary::before { content: '＋'; margin-right: 8px; color: var(--gold-2); }
.thinh__house[open] > summary::before { content: '－'; }
.thinh__house > summary:hover { color: var(--scene-ink); }
.thinh__house > p { margin: 10px 0 0; max-width: 62ch; }
.thinh__house-fields { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 12px 0; }
.thinh__house-fields .thinh__label { display: flex; flex-direction: column; gap: 6px; }
.thinh__house-fields input { width: 12ch; padding: 6px 10px; border: 1px solid rgba(214, 183, 106, .3); border-radius: 3px;
                             background: rgba(255, 255, 255, .035); color: var(--scene-ink); font: 15px/1.2 var(--font-serif); }
.thinh__house-fields input:focus { outline: none; border-color: rgba(214, 183, 106, .7); }
.thinh__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 20px;
              border-top: 1px solid rgba(214, 183, 106, .16); padding-top: 14px; }
.thinh__press { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.thinh__key { font: 11px/1.3 var(--font-ui); letter-spacing: .04em; color: rgba(244, 239, 230, .45); max-width: 16ch; text-align: right;
              opacity: 0; transition: opacity .2s ease; }
.thinh__panel.is-ready .thinh__key { opacity: 1; }
.thinh__panel.is-busy textarea.ask--scene { color: rgba(244, 239, 230, .55); }

/* Asking is pressing a seal: a cinnabar stamp, the mark the pavilion puts on everything it stands behind. */
.thinh__send { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.stamp { display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; background: transparent; color: var(--scene-ink); cursor: pointer; text-align: left; }
.stamp__han { width: 58px; height: 58px; border-radius: 6px; display: grid; place-items: center; flex: none;
              background: var(--cinnabar); color: var(--ivory); font: 27px/1 var(--font-han);
              box-shadow: 0 12px 34px rgba(168, 57, 43, .5), inset 0 0 0 2px rgba(255, 255, 255, .14);
              transition: transform .12s ease, box-shadow .12s ease; }
.stamp:hover .stamp__han { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(168, 57, 43, .6), inset 0 0 0 2px rgba(255, 255, 255, .2); }
.stamp:active .stamp__han { transform: scale(.94); }
/* Unpressed until there is a question: the ink is dry and the stamp sits flat. Busy is a different flatness. */
.stamp[disabled] { cursor: not-allowed; }
.stamp[disabled] .stamp__han { background: #5a2a24; box-shadow: none; transform: none; opacity: .6; }
.stamp[disabled] .stamp__text { opacity: .55; }
.thinh__panel.is-busy .stamp[disabled] { cursor: progress; }
.stamp__text { font: 500 12.5px/1.2 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; }
.stamp__sub { display: block; margin-top: 5px; font: italic 13px/1.2 var(--font-serif); letter-spacing: 0; text-transform: none; color: rgba(244, 239, 230, .62); }
.thinh__note { color: rgba(244, 239, 230, .58); max-width: 40ch; }

/* The bench: the pavilion's systems as a row of tiles across the top of the screen, sticky, so it reads as the
   masthead of the house rather than a note under the question. Ghost for the ones not built, lit for the ones that
   listen, pulsing while the pavilion works, gold for the ones that spoke. */
.thinh__bench { position: sticky; top: 0; z-index: 3; padding: 14px clamp(96px, 12vw, 150px) 12px clamp(16px, 3vw, 40px);
                background: linear-gradient(rgba(6, 9, 17, .88), rgba(6, 9, 17, .62) 70%, rgba(6, 9, 17, 0));
                overflow-x: auto; scrollbar-width: none; }
.thinh__bench::-webkit-scrollbar { display: none; }
.thinh__bench ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; width: max-content; }
.thinh__bench li { display: grid; justify-items: center; gap: 3px; min-width: 52px; padding: 7px 8px 6px; border-radius: 6px;
                   border: 1px solid rgba(214, 183, 106, .18); background: rgba(6, 9, 17, .35);
                   opacity: .32; color: rgba(244, 239, 230, .9); transition: opacity .3s ease, color .3s ease, border-color .3s ease; }
.thinh__bench li[data-live="1"] { opacity: .85; border-color: rgba(214, 183, 106, .38); }
.thinh__bench li .han { font-family: var(--font-han); font-size: 18px; line-height: 1; }
.thinh__sysname { font: 8px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.thinh__bench li.is-spoke { opacity: 1; color: var(--gold-2); border-color: var(--gold-2); text-shadow: 0 0 18px rgba(214, 183, 106, .55); box-shadow: 0 0 22px rgba(214, 183, 106, .18); }
.thinh__bench li.is-listening { animation: thinh-listen 1.4s ease-in-out infinite; }
@keyframes thinh-listen { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.thinh__bar { justify-content: flex-end; }

/* What others ask: quiet serif lines, each a question ready to be put. */
.thinh__hintbox { display: grid; gap: 8px; }
.thinh__hints { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.thinh__hints button { padding: 4px 0; border: 0; background: none; color: rgba(244, 239, 230, .72); font: italic 15.5px/1.4 var(--font-serif); cursor: pointer; text-align: left; }
.thinh__hints button::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-2); margin: 0 10px 3px 0; opacity: .8; }
.thinh__hints button:hover { color: var(--scene-ink); }

/* The wait: the pavilion has the question and is weighing it. The reader's seal sits under a la bàn ring that turns
   slowly, a gold sweep runs round it like a needle seeking, and the one line that says so breathes beside it. */
.thinh__wait { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding-top: 14px; border-top: 1px solid rgba(214, 183, 106, .16); }
.thinh__wait[hidden] { display: none; }
.thinh__wait-ring { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.thinh__wait-ring::before, .thinh__wait-ring::after { content: ""; position: absolute; border-radius: 50%; }
.thinh__wait-ring::before { inset: 0; border: 1px dashed rgba(214, 183, 106, .6); animation: thinh-turn 22s linear infinite; }
.thinh__wait-ring::after { inset: -7px; background: conic-gradient(from 0deg, transparent 0 68%, rgba(214, 183, 106, .7) 100%);
                           -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
                                   mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
                           animation: thinh-turn 3.6s linear infinite; }
.thinh__wait-figure { width: 52px; height: 52px; padding: 3px; border-radius: 50%; background: var(--ivory); background-image: var(--grain);
                      box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(214, 183, 106, .4), 0 0 40px rgba(214, 183, 106, .18); }
.thinh__wait-figure svg { display: block; width: 100%; height: 100%; }
.thinh__wait-text { margin: 0; font: italic 17px/1.4 var(--font-serif); color: var(--scene-ink); animation: thinh-breathe 2.6s ease-in-out infinite; }
@keyframes thinh-turn { to { transform: rotate(360deg); } }
@keyframes thinh-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .thinh__wait-ring::before, .thinh__wait-ring::after, .thinh__wait-text { animation: none; } }

/* The screen that covers the site: the same night, taken fullscreen, above the header and the scene. */
.thinh--full { position: fixed; inset: 0; z-index: 200; overflow-y: auto; overscroll-behavior: contain;
               padding: 0 0 clamp(48px, 8vh, 90px); animation: thinh-in .32s ease both; }
.thinh--full .thinh__inner { margin-top: clamp(24px, 5vh, 60px); }
.thinh--full .thinh__scene, .thinh--full .thinh__veil { position: fixed; }
.thinh--full .thinh__scene { transform-origin: 40% 50%; animation: thinh-drift 48s ease-in-out infinite alternate; }
@keyframes thinh-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes thinh-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .thinh--full, .thinh--full .thinh__scene, .thinh__bench li.is-listening { animation: none; } }
/* The way out sits above the bench: the bench reserves this corner with its own right padding, so at an equal
   z-index the bench would be painted over the button and take the click. */
.thinh__leave { position: fixed; top: 18px; right: clamp(16px, 3vw, 40px); z-index: 4; cursor: pointer; color: var(--scene-ink);
                border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(6, 9, 17, .55);
                backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
                font: 500 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; padding: 10px 14px; opacity: .9; }
.thinh__leave:hover { opacity: 1; background: rgba(6, 9, 17, .8); border-color: var(--gold-2); }
/* The page underneath must not scroll while the pavilion is open. */
body.thinh-lock { overflow: hidden; }
#thinh-out { width: 100%; }

@media (max-width: 900px) {
  /* On a phone the picture is the top of the screen rather than the whole background: the elder sits in the clear,
     the picture fades into the night below him, and the words begin where he ends. */
  .thinh__scene, .thinh__veil { height: 60vh; bottom: auto; }
  .thinh__scene { background-position: 40% 50%; }
  .thinh__veil { background: linear-gradient(180deg, rgba(6, 9, 17, .3) 0%, rgba(6, 9, 17, 0) 18%, rgba(6, 9, 17, .08) 46%, rgba(6, 9, 17, .78) 76%, #060911 100%); }
  .thinh__inner { width: calc(100% - 40px); margin: 0 auto; }
  .thinh--band { padding-top: 50vh; min-height: 0; display: block; }
  .thinh--full .thinh__inner { margin-top: 36vh; }
  /* The bench slides sideways; end its track before the leave button so no tile ever passes under it. */
  .thinh__bench { padding-right: clamp(16px, 3vw, 40px); margin-right: 116px; }
  .thinh__bench li { min-width: 40px; padding: 6px 6px 5px; }
  .thinh__sysname { display: none; }
  .thinh--full .thinh__scene, .thinh--full .thinh__veil { position: absolute; animation: none; }
  .thinh__seal-figure { width: 72px; height: 72px; }
  .thinh__panel { padding: 16px 16px 14px; }
  .thinh__bar { flex-direction: column; align-items: stretch; }
  /* No Enter key to promise on a phone; the seal becomes the whole width of the press instead. */
  .thinh__press { margin-left: 0; }
  .thinh__key { display: none; }
  .stamp { width: 100%; justify-content: center; gap: 12px; }
  .stamp__text { letter-spacing: .12em; }
  /* While the question is being weighed, the pane takes the whole screen: the question alone at the top, the seal
     under its turning ring in the middle, the line beneath. The bench stays above it, its marks listening. */
  .thinh__panel.is-busy { position: fixed; inset: 0; z-index: 2; border-radius: 0; border: 0; overflow-y: auto;
                          padding: 96px 28px calc(32px + env(safe-area-inset-bottom));
                          display: grid; align-content: center; justify-items: center; gap: 30px; text-align: center;
                          background: radial-gradient(ellipse at 50% 62%, rgba(6, 9, 17, .5), rgba(6, 9, 17, .84) 70%); }
  .thinh__panel.is-busy .thinh__chips, .thinh__panel.is-busy .thinh__bar { display: none; }
  .thinh__panel.is-busy .thinh__label { text-align: center; }
  .thinh__panel.is-busy textarea.ask--scene { text-align: center; border-bottom: 0; padding: 0; color: var(--scene-ink);
                                              font-size: clamp(21px, 5.6vw, 26px); pointer-events: none; }
  .thinh__panel.is-busy .thinh__wait { grid-template-columns: 1fr; justify-items: center; gap: 26px; border-top: 0; padding-top: 0; }
  .thinh__panel.is-busy .thinh__wait-ring { width: 176px; height: 176px; }
  .thinh__panel.is-busy .thinh__wait-ring::after { inset: -12px; }
  .thinh__panel.is-busy .thinh__wait-figure { width: 136px; height: 136px; padding: 6px; }
  .thinh__panel.is-busy .thinh__wait-text { font-size: 19px; max-width: 24ch; }
}

/* ---------- Footer ---------- */
.tc-footer { padding: 30px 0 110px; color: var(--scene-ink); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); font-size: 12.5px; }
.tc-footer .wrap { display: grid; gap: 18px; padding: 22px 26px; }
.tc-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tc-footer a { text-decoration: none; opacity: .85; }
.tc-footer a:hover { opacity: 1; text-decoration: underline; }
.tc-footer .legal { opacity: .8; line-height: 1.55; max-width: 80ch; }
.tc-footer .versions { font-family: ui-monospace, Menlo, monospace; font-size: 11px; opacity: .7; }

/* ---------- Mobile tab bar (§43) ---------- */
.tc-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; grid-template-columns: repeat(5, 1fr); background: var(--ivory);
             border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
.tc-tabbar a { display: grid; justify-items: center; gap: 3px; text-decoration: none; color: var(--ink-3); font-size: 10px; letter-spacing: .06em; padding: 4px 0; }
.tc-tabbar a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tc-tabbar a[aria-current="page"] { color: var(--cinnabar); }

/* Inner layouts respond to the panel's own width, not the viewport. */
.scroll { container-type: inline-size; }
@container (max-width: 900px) {
  .grid--2:not(.grid--keep), .grid--3:not(.grid--keep), .grid--seal { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .years { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hours { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .systems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bar-row { grid-template-columns: 150px 1fr 40px; }
  .star-row { grid-template-columns: 1fr; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--ivory-3); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .grid--seal { grid-template-columns: 1fr; }
  .systems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .years { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hours { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .hero-cap--tr, .hero-cap--bl, .hero-cap--br { display: none; }
  .hero--overview { display: block; padding-top: 96px; }
  .hero-cap--tl { position: static; max-width: none; width: fit-content; text-align: center; margin: 0 auto 26px; }
  .hero-cap--tl .seal-mark--lg { display: none; }
  .hero-cap__brand { font-size: 28px; }
}
@media (max-width: 1100px) {
  .tc-nav { display: none; }
  .tc-tabbar { display: grid; }
  /* The tab bar grows by the home indicator; the page has to end above it, not behind it. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* Once the pages are as wide as the screen, an ivory scroll passes under the header and the gradient
     scrim is no longer enough to hide it. A dark pane of glass instead, and no gradient tail to reserve. */
  .tc-header { padding: 14px max(clamp(16px, 3vw, 40px), env(safe-area-inset-right))
                       14px max(clamp(16px, 3vw, 40px), env(safe-area-inset-left));
               background: rgba(6, 9, 17, .88);
               backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
               border-bottom: 1px solid rgba(214, 183, 106, .18); }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .wrap { width: calc(100% - 48px); }
  main { padding-top: 76px; }
  h1 { font-size: 29px; letter-spacing: .04em; }
  .scroll { padding: 26px 20px; border-radius: 6px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .systems { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields, .fields--2 { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 120px 1fr 40px; font-size: 13px; }
  .years { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step { grid-template-columns: 1fr; }
  .step__n { display: none; }
  .wrap--overview { width: calc(100% - 48px); }
  .overview { padding: 26px 18px 22px; }
  .overview__body { grid-template-columns: 1fr; gap: 16px; }
  .overview__seal { max-width: 320px; margin: 0 auto; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .conclusion { padding: 14px 16px 14px 18px; }
  .conclusion__stamp { position: static; display: inline-grid; margin-top: 10px; transform: none; }
  .hero-cap__brand { font-size: 24px; }
  dl.kv { grid-template-columns: 1fr; gap: 2px 0; }
  dl.kv dd { margin-bottom: 8px; }
  .brand__han { display: none; }
  /* Header at phone width: brand + language toggle + sign-in must fit on one line */
  .tc-header { gap: 10px; }
  .brand__vi { font-size: 12.5px; letter-spacing: .08em; }
  .tc-util { margin-left: auto; gap: 6px; }
  .lang button { padding: 8px 8px; }
  .tc-util .btn--small { padding: 6px 9px; font-size: 11px; }
  .step { padding: 18px 0; }
  /* Two long choices read as a list down the card, not as pills wrapping raggedly across it. */
  .field--wide .radio-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
  /* The code goes in, the button goes under it, both the full width of the card:
     an access code has to be readable end to end without the field scrolling under the cursor. */
  .gate-form { display: grid; grid-template-columns: 1fr; justify-content: stretch; gap: 10px; }
  .gate-form input, .gate-form .btn { width: 100%; }
}

/* On a touch screen a control under 16px makes Safari zoom the page in the moment it is focused,
   and it never zooms back out. Every field the reader types into is at least 16px. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="radio"]):not([type="checkbox"]), select, textarea,
  .field input:not([type="radio"]):not([type="checkbox"]), .field select,
  .gate-form input, textarea.ask { font-size: 16px; }
  textarea.ask--scene { font-size: clamp(21px, 2.6vw, 28px); }
  .field input:not([type="radio"]):not([type="checkbox"]), .field select { padding: 12px 12px; }
  .radio-row label { padding: 10px 16px; }
}
/* ---------- Term hotspots (§74): a corpus term the reader can ask about, and the one card that answers ---------- */
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: help; text-align: inherit;
        letter-spacing: inherit; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--line); }
.term:hover, .term[aria-expanded="true"] { color: var(--blue); text-decoration-color: var(--blue); }
.term:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.tag .term, .tile__v .term { cursor: help; text-decoration-color: currentColor; }
/* Above every overlay it can be opened from: the Thỉnh screen (200) and the compass (70) both carry terms, and the card
   hangs off body, so under either one a tap would open it out of sight. */
.term-card { position: fixed; z-index: 300; max-width: min(300px, calc(100vw - 16px)); padding: 12px 14px; background: var(--ivory);
             border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(4, 8, 18, .22); color: var(--ink); }
.term-card__name { margin: 0; font-size: 15px; }
/* The seal's parts speak through the same card, one line at a size a reader can use, on hover or on a tap. */
.term-card--seal { max-width: min(380px, calc(100vw - 16px)); padding: 14px 18px; }
.term-card--seal .term-card__name { font-size: 17px; line-height: 1.45; font-weight: 500; }
.term-card__name .han { font-family: var(--font-han); color: var(--ink-2); }
.term-card__en { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.term-card__rows { margin: 10px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; font-size: 12.5px; }
.term-card__rows dt { color: var(--ink-3); white-space: nowrap; }
.term-card__rows dd { margin: 0; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}