/* ==========================================================
   i_ching_and_it_architecture_html.html — "硅之神諭 Silicon Oracle"
   Built on luopan.css tokens (v3.34.0): the Fu Xi 64-hexagram
   wheel, ⚊/⚋ line rain, glowing yin/yang instruments, three-coin
   cast and restyled Chart.js panels. Replaces index.css and the
   prebuilt Tailwind file on this page.
   ========================================================== */

body.oracle {
  /* five-element colours as used by the hexagram / trigram glyphs */
  --el-wood: var(--dir-e);
  --el-fire: var(--dir-s);
  --el-earth: var(--dir-c);
  --el-metal: var(--dir-w-ink);
  --el-water: var(--dir-n);
  --panel: color-mix(in srgb, var(--bg-2) 72%, transparent);
  --glow-cin: color-mix(in srgb, var(--cinnabar) 55%, transparent);
  --glow-gold: color-mix(in srgb, var(--gold) 50%, transparent);
}
.reveal-init [data-reveal="right"]:not(.is-revealed) { transform: translateX(40px); }
.nav-link[aria-current="page"] { color: var(--fg); }
.nav-link[aria-current="page"]::after { transform: translateX(-50%) scale(1); }
@media (max-width: 1320px) {
  .nav-link[aria-current="page"] { color: var(--cinnabar); }
  .nav-link[aria-current="page"]::after { transform: translateY(50%) scale(1); }
}

/* ---------- mini hexagram / trigram glyph (lines are <i>) ---------- */
.mh { display: grid; gap: 3px; width: 100%; }
.mh i {
  display: block;
  height: 3px;
  border-radius: 1px;
  background: currentColor;
}
.mh i.n { background: linear-gradient(90deg, currentColor 0 42%, transparent 42% 58%, currentColor 58%); }
.mh i.m { box-shadow: 0 0 0 1px var(--cinnabar), 0 0 8px var(--glow-cin); }

/* ==========================================================
   Hero
   ========================================================== */
.or-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 0 70px;
  overflow: hidden;
}
.yao-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
body.theme-bright .yao-rain { opacity: 0.32; }
.or-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 22px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--cinnabar);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cinnabar) 25%, transparent);
  animation: orPulse 2.4s ease-in-out infinite;
}
@keyframes orPulse { 50% { box-shadow: 0 0 0 9px transparent; } }
.or-mark { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4em; margin-bottom: 18px; }
.or-mark-han {
  font-size: clamp(3.6rem, 8.4vw, 7.6rem);
  line-height: 1;
  color: var(--fg);
  text-shadow: 0 0 40px color-mix(in srgb, var(--gold) 25%, transparent);
}
.or-mark-en {
  font-family: var(--f-mono);
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cinnabar);
}
.or-title {
  font-family: var(--f-han);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
html[lang="en"] .or-title { font-family: var(--f-disp); font-weight: 500; letter-spacing: -0.01em; }
.gradient-text {
  background: linear-gradient(100deg, var(--cinnabar), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.or-desc { max-width: 560px; color: var(--fg-2); font-size: 1.04rem; margin-bottom: 32px; }
.or-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.or-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 560px;
  border-top: 1px solid var(--line-2);
}
.or-stats > div { padding: 16px 12px 0 0; }
.or-stats > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.or-stats dt { font-family: var(--f-mono); font-size: clamp(1.05rem, 1.8vw, 1.45rem); color: var(--gold); white-space: nowrap; }
.or-stats dt sup { font-size: 0.6em; }
.or-stats dd { font-size: 0.8rem; color: var(--fg-3); margin-top: 4px; }

/* ---------- The Fu Xi wheel ---------- */
.or-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.fx {
  --size: min(640px, 44vw, 78vh);
  position: relative;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  margin: 4% 0;
}
.fx-rot { position: absolute; inset: 0; will-change: transform; }
.fx-svg { width: 100%; height: 100%; overflow: visible; }
.fx-face { fill: color-mix(in srgb, var(--bg-2) 72%, transparent); }
.fx-ring { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.fx-ring-fine { fill: none; stroke: var(--line); stroke-width: 1; }
.fx-tick { stroke: var(--line-2); stroke-width: 1; }
.fx-bin { fill: var(--fg-3); font-family: var(--f-mono); font-size: 10.5px; text-anchor: middle; dominant-baseline: central; letter-spacing: 0.5px; opacity: 0.8; }
.fx-dot { fill: var(--fg-3); }
.fx-hex rect { opacity: 0.82; transition: fill 0.4s, opacity 0.4s; }
.fx-hex.el-wood rect, .fx-tri.el-wood rect { fill: var(--el-wood); }
.fx-hex.el-fire rect, .fx-tri.el-fire rect { fill: var(--el-fire); }
.fx-hex.el-earth rect, .fx-tri.el-earth rect { fill: var(--el-earth); }
.fx-hex.el-metal rect, .fx-tri.el-metal rect { fill: var(--el-metal); }
.fx-hex.el-water rect, .fx-tri.el-water rect { fill: var(--el-water); }
.fx-hex rect.fx-hit { fill: transparent; opacity: 1; cursor: pointer; }
.fx-hex.is-sel rect:not(.fx-hit) { fill: var(--gold); opacity: 1; }
.fx-hex.is-scan rect:not(.fx-hit) { fill: var(--cinnabar-2); opacity: 1; }
.fx-hex:hover rect:not(.fx-hit) { opacity: 1; }
.fx-tri rect { opacity: 0.9; }

.fx-labels { position: absolute; inset: 0; pointer-events: none; }
.fx-lbl {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  line-height: 1;
  will-change: transform;
}
.fx-lbl.hex {
  font-family: var(--f-brush);
  font-size: calc(var(--size) * 0.034);
  color: var(--fg);
  padding: 0.28em 0.5em;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
.fx-lbl.tri {
  font-family: var(--f-han);
  font-weight: 900;
  font-size: calc(var(--size) * 0.024);
}
.fx-lbl.tri.el-wood { color: var(--el-wood); }
.fx-lbl.tri.el-fire { color: var(--el-fire); }
.fx-lbl.tri.el-earth { color: var(--el-earth); }
.fx-lbl.tri.el-metal { color: var(--el-metal); }
.fx-lbl.tri.el-water { color: var(--el-water); }

/* The fixed reading head at the top (south) and its beam */
.fx-head {
  position: absolute;
  left: 50%; top: 5.2%;
  width: 6.4%; height: 11.2%;
  transform: translateX(-50%);
  border: 1.5px solid var(--cinnabar);
  border-radius: 6px;
  box-shadow: 0 0 22px var(--glow-cin), inset 0 0 14px color-mix(in srgb, var(--cinnabar) 25%, transparent);
  pointer-events: none;
  animation: headPulse 2.2s ease-in-out infinite;
}
.fx-head::before {
  content: '';
  position: absolute; left: 50%; top: -14px;
  border: 7px solid transparent;
  border-top-color: var(--cinnabar);
  transform: translateX(-50%);
}
@keyframes headPulse { 50% { opacity: 0.55; } }
.fx-beam {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from -9deg, transparent 0deg, color-mix(in srgb, var(--cinnabar) 22%, transparent) 9deg, transparent 18deg);
  -webkit-mask: radial-gradient(circle, transparent 0 19%, #000 20% 49.6%, transparent 50%);
  mask: radial-gradient(circle, transparent 0 19%, #000 20% 49.6%, transparent 50%);
}

/* Centre read-out */
.fx-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 37%; height: 37%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--size) * 0.008);
  text-align: center;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--bg-3) 92%, transparent), color-mix(in srgb, var(--bg) 94%, transparent) 70%);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 calc(var(--size) * 0.012) color-mix(in srgb, var(--bg) 50%, transparent), 0 0 60px -10px var(--glow-gold);
}
.fx-core::before {
  content: '';
  position: absolute; inset: -9%;
  border-radius: 50%;
  border: 1px dashed var(--line-2);
  animation: coreSpin 60s linear infinite reverse;
}
@keyframes coreSpin { to { transform: rotate(360deg); } }
.fx-core-hex { width: 30%; gap: calc(var(--size) * 0.006); color: var(--cinnabar); }
.fx-core-hex i { height: calc(var(--size) * 0.0085); box-shadow: 0 0 10px var(--glow-cin); }
.fx-core-name { font-family: var(--f-kai); font-size: calc(var(--size) * 0.052); line-height: 1.1; color: var(--fg); margin-top: 4px; }
.fx-core-sub { font-family: var(--f-disp); font-style: italic; font-size: calc(var(--size) * 0.02); color: var(--fg-2); line-height: 1.1; max-width: 80%; }
.fx-core-sub:empty { display: none; }
.fx-core-meta { font-family: var(--f-mono); font-size: calc(var(--size) * 0.018); color: var(--gold); letter-spacing: 0.06em; }
.fx-core-read { font-family: var(--f-mono); font-size: calc(var(--size) * 0.015); letter-spacing: 0.2em; color: var(--fg-3); text-transform: uppercase; }
.blink { color: var(--cinnabar); animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { opacity: 0.2; } }
.fx-cap { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--fg-3); text-align: center; max-width: 520px; }

@media (max-width: 960px) {
  .or-hero { padding-top: 100px; align-items: flex-start; }
  .or-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .fx { --size: min(86vw, 560px); }
  .or-stage { order: -1; margin-bottom: 10px; }
}
@media (max-width: 520px) {
  .or-stats > div + div { padding-left: 8px; }
  .or-stats dd { font-size: 0.72rem; }
  .or-cta .btn { flex: 1 1 auto; }
}

/* ==========================================================
   Chapter rail
   ========================================================== */
.or-rail {
  position: sticky;
  top: var(--hdr-h, 72px);
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rail-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rail-inner::-webkit-scrollbar { display: none; }
.rail-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 14px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
  transition: color 0.3s;
}
.rail-link::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  background: var(--cinnabar);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}
.rail-link:hover, .rail-link.is-active { color: var(--fg); }
.rail-link.is-active::after { transform: scaleX(1); }
.rail-code { font-family: var(--f-mono); font-size: 0.72rem; color: var(--cinnabar); letter-spacing: 0.05em; }
.rail-home { margin-left: auto; color: var(--fg-3); }

/* ==========================================================
   Sections
   ========================================================== */
.or-sec { scroll-margin-top: calc(var(--hdr-h, 72px) + 56px); overflow-x: clip; }
.sec-num.sec-bin {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(3.6rem, 9vw, 8rem);
  letter-spacing: -0.04em;
}
.sec-title { font-size: clamp(1.8rem, 3.8vw, 3.3rem); }
.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: clamp(22px, 3.4vw, 48px);
}
.panel::before {
  /* corner registration marks, like a circuit board */
  content: '';
  position: absolute; inset: 8px;
  pointer-events: none;
  background:
    linear-gradient(var(--line-2), var(--line-2)) left top / 12px 1px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) left top / 1px 12px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) right bottom / 1px 12px no-repeat;
}
.panel-title { font-family: var(--f-han); font-weight: 900; font-size: clamp(1.3rem, 2vw, 1.65rem); margin-bottom: 12px; }
html[lang="en"] .panel-title { font-family: var(--f-disp); font-weight: 500; }
.panel-p { color: var(--fg-2); line-height: 1.85; }
.panel-p strong { color: var(--fg); }

/* ---------- 001 bit ---------- */
.bit-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.bit-inst {
  --tone: var(--gold);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px 10px;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  transition: border-color 0.5s var(--ease);
}
.bit-inst.is-yang { --tone: var(--cinnabar); border-color: color-mix(in srgb, var(--cinnabar) 45%, transparent); }
.bi-col { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; min-width: 0; }
.bi-label { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.bi-digit-wrap { display: flex; align-items: center; gap: 12px; }
.bi-led {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--fg-3);
  transition: background 0.3s, box-shadow 0.3s;
}
.is-yang .bi-led { background: var(--cinnabar); box-shadow: 0 0 12px var(--cinnabar), 0 0 26px var(--glow-cin); }
.bi-digit {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(3.6rem, 7vw, 5.6rem);
  line-height: 1;
  color: var(--tone);
  text-shadow: 0 0 28px color-mix(in srgb, var(--tone) 55%, transparent);
  transition: color 0.4s;
}
.is-yin .bi-digit { color: var(--jade); text-shadow: 0 0 28px color-mix(in srgb, var(--jade) 45%, transparent); }
.bi-state { font-family: var(--f-mono); font-size: 0.78rem; color: var(--fg-2); }
.bi-bus { position: relative; width: clamp(40px, 6vw, 80px); height: 2px; background: var(--line-2); overflow: hidden; display: grid; place-items: center; }
.bi-bus b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-weight: 400; color: var(--fg-3); font-size: 1.1rem; }
.bi-bus { overflow: visible; }
.bi-bus span {
  position: absolute; left: 0; top: -1px;
  width: 16px; height: 4px; border-radius: 2px;
  background: var(--tone);
  box-shadow: 0 0 10px var(--tone);
  animation: busRun 1.6s var(--ease) infinite;
}
@keyframes busRun { from { transform: translateX(-10px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translateX(clamp(40px, 6vw, 80px)); opacity: 0; } }
.bi-yao {
  width: 100%;
  max-width: 140px;
  height: 64px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 6px;
  color: var(--tone);
}
.bi-yao:hover .yao { transform: scale(1.05); }
.yao { display: flex; justify-content: space-between; width: 100%; height: 16px; transition: transform 0.4s var(--ease); }
.yao i {
  display: block;
  height: 100%;
  width: 50.5%;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 18px color-mix(in srgb, currentColor 70%, transparent);
  transition: width 0.55s var(--ease), background 0.4s;
}
.is-yin .yao i { width: 42%; }
.bi-yy { font-family: var(--f-han); font-weight: 900; font-size: 1rem; color: var(--tone); letter-spacing: 0.08em; }
.bi-btn { grid-column: 1 / -1; justify-self: center; }

@media (max-width: 900px) { .bit-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .bit-inst { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 16px 6px; padding: 18px 12px; }
  .bi-bus { width: 24px; }
  .bi-bus span { display: none; }
  .bi-label { font-size: 0.58rem; letter-spacing: 0.08em; }
  .bi-state { font-size: 0.68rem; }
}

/* ---------- 010 bagua ---------- */
.bagua-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.chart-container { position: relative; width: 100%; height: 380px; }
.chart-evo { height: 400px; margin-bottom: clamp(24px, 3vw, 40px); }
.bit-list { list-style: none; display: grid; gap: 12px; margin: 22px 0; }
.bit-list li { display: flex; align-items: center; gap: 14px; color: var(--fg-2); }
.bit-list .code {
  font-family: var(--f-mono);
  font-size: 0.9rem;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--jade) 45%, transparent);
  color: var(--jade);
  background: color-mix(in srgb, var(--jade) 8%, transparent);
  letter-spacing: 0.12em;
}
.hint { font-size: 0.9rem; color: var(--fg-3); font-style: italic; border-left: 1px solid var(--line-2); padding-left: 14px; }
.tri-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(30px, 4vw, 50px);
}
.tri-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  cursor: pointer;
  transition: transform 0.4s var(--ease), border-color 0.3s, background 0.3s;
  color: var(--fg);
}
.tri-btn .mh { width: 42px; gap: 5px; color: var(--el); }
.tri-btn .mh i { height: 5px; }
.tri-name { font-family: var(--f-han); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
html[lang="en"] .tri-name { font-family: var(--f-ui); font-size: 0.78rem; }
.tri-bits { font-family: var(--f-mono); font-size: 0.72rem; color: var(--fg-3); letter-spacing: 0.1em; }
.tri-btn:hover { transform: translateY(-3px); border-color: var(--line-2); }
.tri-btn[aria-pressed="true"] { border-color: var(--cinnabar); background: color-mix(in srgb, var(--cinnabar) 10%, transparent); }
.tri-btn[aria-pressed="true"] .tri-bits { color: var(--cinnabar); }
.tri-cap, .grid-cap { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--fg-3); margin-top: 12px; }
@media (max-width: 960px) {
  .bagua-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-container { height: 330px; }
  .tri-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 011 matrix ---------- */
.matrix-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); }
.sim-head { margin-bottom: 22px; }
.sim-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.sim-hex {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.gua-line {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr) 2.6em;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--gold);
  transition: background 0.3s;
}
.gua-line:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.gua-line.gua-yang { color: var(--cinnabar); }
.gl-pos { font-family: var(--f-han); font-size: 0.74rem; color: var(--fg-3); text-align: left; white-space: nowrap; }
html[lang="en"] .gl-pos { font-family: var(--f-mono); font-size: 0.62rem; }
.gl-w { font-family: var(--f-mono); font-size: 0.64rem; color: var(--fg-3); text-align: right; }
.gl-bar { position: relative; display: flex; justify-content: space-between; height: 13px; }
.gl-bar i {
  display: block;
  height: 100%;
  width: 50.5%;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 14px color-mix(in srgb, currentColor 55%, transparent);
  transition: width 0.5s var(--ease), background 0.35s, box-shadow 0.35s;
}
.gua-yin .gl-bar i { width: 42%; box-shadow: 0 0 8px color-mix(in srgb, currentColor 35%, transparent); }
.gua-line.is-moving .gl-bar::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--cinnabar);
  color: var(--cinnabar);
  font-size: 0.8rem;
  line-height: 1;
}
.gua-line.is-moving[data-move="○"] .gl-bar::after { content: '○'; }
.gua-line.is-moving[data-move="×"] .gl-bar::after { content: '×'; }

.sim-read { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-content: start; }
.sr-cell {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  min-width: 0;
}
.sr-wide { grid-column: 1 / -1; }
.sr-label { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.sr-bin { font-family: var(--f-mono); font-size: clamp(1rem, 1.5vw, 1.3rem); white-space: nowrap; color: var(--jade); letter-spacing: 0.12em; text-shadow: 0 0 16px color-mix(in srgb, var(--jade) 40%, transparent); }
.sr-dec { font-family: var(--f-mono); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--gold); line-height: 1.1; }
.sr-name-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sr-name { font-family: var(--f-kai); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.05; color: var(--fg); }
.sr-kw { font-family: var(--f-mono); font-size: 0.72rem; color: var(--cinnabar); letter-spacing: 0.08em; }
.sr-en { font-family: var(--f-disp); font-style: italic; color: var(--fg-2); }
.sr-en:empty { display: none; }
.sr-tri { font-family: var(--f-mono); font-size: 0.72rem; color: var(--fg-3); margin-top: 6px; letter-spacing: 0.04em; }
.sim-order { font-size: 0.82rem; color: var(--fg-3); line-height: 1.7; margin: 14px 0 26px; padding-left: 12px; border-left: 1px solid var(--cinnabar); }

/* Three-coin cast */
.cast { border-top: 1px solid var(--line); padding-top: 24px; }
.cast-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.coins { display: flex; gap: 14px; padding-bottom: 18px; }
.coin { position: relative; width: 50px; height: 50px; perspective: 500px; }
.coin i {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}
.coin.tails i { transform: rotateY(180deg); }
.coin i::before, .coin i::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.coin i::before {
  background:
    linear-gradient(var(--bg), var(--bg)) center / 13px 13px no-repeat,
    radial-gradient(circle at 34% 30%, #f7e0a0, #d4a23d 48%, #8a6219 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18), inset 0 0 0 6px rgba(255, 230, 160, 0.35), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.coin i::after {
  transform: rotateY(180deg);
  background:
    linear-gradient(var(--bg), var(--bg)) center / 13px 13px no-repeat,
    radial-gradient(circle at 34% 30%, #cdb68e, #8c6d3f 50%, #4a3517 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 0 6px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.coin.flip i { animation: coinFlip 0.8s var(--ease) var(--delay, 0ms) both; }
@keyframes coinFlip {
  0% { transform: translateY(0) rotateY(0deg); }
  45% { transform: translateY(-30px) rotateY(calc(var(--end) * 0.55)); }
  100% { transform: translateY(0) rotateY(var(--end)); }
}
.coin b {
  position: absolute; left: 50%; bottom: -20px;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--fg-2);
}
.coin.heads b { color: var(--gold); }
.cast-btn:disabled { opacity: 0.7; cursor: progress; }
.cast-hint { font-size: 0.82rem; color: var(--fg-3); line-height: 1.7; margin: 12px 0 14px; }
.cast-log { list-style: none; display: grid; gap: 4px; }
.cast-log li {
  display: grid;
  grid-template-columns: 4.2em minmax(0, 1fr) 3em minmax(0, 1.3fr) 44px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  animation: logIn 0.5s var(--ease) both;
}
@keyframes logIn { from { opacity: 0; transform: translateX(-8px); } }
.cast-log li.is-moving { background: color-mix(in srgb, var(--cinnabar) 10%, transparent); }
.cl-line { font-family: var(--f-han); color: var(--fg-2); }
html[lang="en"] .cl-line { font-family: var(--f-mono); font-size: 0.7rem; }
.cl-coins, .cl-sum { font-family: var(--f-mono); color: var(--fg-3); }
.cl-sum { color: var(--gold); }
.cl-type { color: var(--fg); }
.is-moving .cl-type { color: var(--cinnabar); }
.mh1 { color: var(--fg-2); }
.mh1 i { height: 4px; }
.cast-result { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
.cast-result:empty { display: none; }
.cr-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  animation: logIn 0.6s var(--ease) both;
}
.cr-t { grid-column: 1 / -1; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cinnabar); margin-bottom: 6px; }
.mh-lg { grid-row: 2 / span 2; width: 34px; gap: 4px; color: var(--gold); }
.mh-lg i { height: 4px; }
.cr-n { font-family: var(--f-kai); font-size: 1.6rem; line-height: 1.1; }
.cr-m { font-family: var(--f-mono); font-size: 0.66rem; color: var(--fg-3); }
.cr-arrow { font-size: 1.4rem; color: var(--cinnabar); }
.cr-note { flex-basis: 100%; font-size: 0.82rem; color: var(--fg-2); }

/* The 8 × 8 matrix with trigram axes */
.grid-wrap {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-content: start;
  align-self: start;
}
.gx-corner {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  font-family: var(--f-mono); font-size: 0.5rem; color: var(--fg-3); line-height: 1.2; text-align: center;
}
.gx-corner span { display: block; }
.gx-top { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.gx-left { display: grid; grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 6px; }
.gx-lbl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.gx-lbl .mh { width: 18px; gap: 2px; color: var(--el); }
.gx-lbl .mh i { height: 2.5px; }
.gx-name { font-family: var(--f-han); font-weight: 700; font-size: 0.72rem; color: var(--fg-2); line-height: 1; }
.hex-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.grid-cap { grid-column: 2; margin-top: 4px; }
.hexagram-grid-item {
  position: relative;
  aspect-ratio: 1 / 1.08;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  cursor: pointer;
  color: var(--fg-3);
  transition: transform 0.35s var(--ease), border-color 0.3s, background 0.3s, color 0.3s, box-shadow 0.35s;
  min-width: 0;
  padding: 0;
}
.hexagram-grid-item .mh { width: 44%; gap: 3px; }
.hexagram-grid-item .mh i { height: 2.5px; }
.mh-name { font-family: var(--f-han); font-size: 0.66rem; line-height: 1; color: var(--fg-3); white-space: nowrap; }
.hexagram-grid-item:hover { border-color: var(--line-2); color: var(--fg); transform: translateY(-2px); }
.hexagram-grid-item:hover .mh { color: var(--el); }
.hexagram-grid-item.is-cross { background: color-mix(in srgb, var(--gold) 7%, transparent); color: var(--fg-2); }
.hexagram-grid-item.is-active {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
  color: var(--cinnabar-ink);
  transform: scale(1.1);
  z-index: 2;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cinnabar) 22%, transparent), 0 10px 30px -6px var(--glow-cin);
}
.hexagram-grid-item.is-active .mh-name { color: var(--cinnabar-ink); }
.hexagram-grid-item.is-active .mh { color: var(--cinnabar-ink); }

@media (max-width: 1100px) {
  .matrix-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .mh-name { display: none; }
  .hexagram-grid-item { aspect-ratio: 1 / 1; }
  .hexagram-grid-item .mh { width: 52%; gap: 2px; }
  .hexagram-grid-item .mh i { height: 2px; }
  .grid-wrap { grid-template-columns: 24px minmax(0, 1fr); gap: 5px; }
  .gx-top, .gx-left, .hex-grid { gap: 4px; }
  .gx-name { font-size: 0.6rem; }
  .gx-lbl .mh { width: 14px; }
  .gx-corner { font-size: 0.42rem; }
}
@media (max-width: 560px) {
  .sim-body { grid-template-columns: minmax(0, 1fr); }
  .cast-log li { grid-template-columns: 3.6em minmax(0, 1fr) 2.6em minmax(0, 1.2fr) 30px; gap: 6px; padding: 6px 8px; font-size: 0.74rem; }
}

/* ---------- 100 AI ---------- */
.ai-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); }
.ai-card {
  position: relative;
  padding: 24px 0 0;
  border-top: 2px solid var(--tone);
}
.ai-ico { width: 40px; height: 40px; margin-bottom: 14px; fill: none; stroke: var(--tone); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tone) 45%, transparent)); }
.ai-ico .f { fill: var(--tone); stroke: none; }
.ai-card h4 { font-family: var(--f-han); font-weight: 900; font-size: 1.1rem; margin-bottom: 8px; }
html[lang="en"] .ai-card h4 { font-family: var(--f-ui); font-weight: 700; }
.ai-card p { color: var(--fg-2); font-size: 0.93rem; line-height: 1.8; }
@media (max-width: 860px) {
  .ai-cards { grid-template-columns: minmax(0, 1fr); }
  .chart-evo { height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-core::before, .fx-head, .bi-bus span, .blink { animation: none !important; }
}

/* Hexagram names use --f-kai: the brush fonts lack 嗑睽姤 (Yuji) / 夬姤 (Ma Shan
   Zheng), and mixing fonts inside one name looks broken. */