@charset "UTF-8";
:root {
  --paper:var(--theme-canvas);
  --paper-2:var(--theme-surface);
  --ink:var(--theme-primary);
  --ink-2:var(--theme-muted);
  --ink-3:var(--theme-muted);
  --line:var(--theme-selected);
  --cinnabar:var(--theme-accent);
  --cinnabar-2:var(--theme-accent);
  --jade:var(--theme-primary);
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  --mono:"Cascadia Mono","Consolas",monospace
}

*,*::before,*::after {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:14px/1.8 var(--sans);
  -webkit-font-smoothing:antialiased
}

body:before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:20;
  opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23918c79' filter='url(%23n)' opacity='.2' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}

button,input,textarea,select {
  font:inherit
}

button {
  cursor:pointer;
  color:inherit
}

button,a,input,textarea,select,summary {
  -webkit-tap-highlight-color:transparent
}

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid var(--cinnabar);
  outline-offset:5px
}

button:disabled {
  cursor:default
}

button:disabled:hover {
  transform:none
}

::selection {
  background:var(--theme-selected)
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  font-family:var(--serif)
}

.hidden {
  display:none!important
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  background:var(--jade);
  color:white;
  padding:12px;
  z-index:30
}

.skip-link:focus {
  top:10px
}

.muted {
  color:var(--ink-3)
}

.tiny {
  font-size:12px
}

.top {
  max-width:1328px;
  margin:auto;
  padding:26px 44px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
  border:0;
  background:none;
  padding:0;
  text-align:left
}

.brand-seal {
  display:grid;
  place-content:center;
  width:34px;
  height:45px;
  border-radius:3px 2px 4px 1px;
  background:var(--cinnabar);
  color:var(--theme-muted);
  font:17px/1.1 var(--serif);
  border:3px double var(--paper);
  outline:1px solid var(--cinnabar);
  transform:rotate(-3deg)
}

.brand-name {
  font:25px/1.3 var(--serif);
  letter-spacing:5px
}

.brand-name>span {
  display:block;
  font:10px/1.8 var(--sans);
  letter-spacing:2px;
  color:var(--ink-3);
  margin-top:5px
}

.site-nav {
  display:flex;
  gap:38px;
  align-items:center
}

.site-nav button {
  position:relative;
  border:0;
  background:none;
  padding:10px 0;
  color:var(--ink-3);
  font-size:13px;
  letter-spacing:1px
}

.site-nav button.active {
  color:var(--ink)
}

.site-nav button.active:after {
  content:"";
  position:absolute;
  bottom:0;
  left:calc(50% - 2px);
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--cinnabar)
}

#ledger-count {
  font:10px var(--mono);
  margin-left:4px;
  background:var(--theme-selected);
  border-radius:10px;
  padding:2px 5px
}

.header-note {
  font-size:11px;
  color:var(--ink-3);
  letter-spacing:1px
}

.header-note i,.live-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--theme-muted);
  border-radius:50%;
  margin-right:8px
}

main {
  max-width:1240px;
  margin:auto;
  padding:0 0 50px
}

.tabs {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:23px;
  padding-top:29px
}

.tabs button {
  border:0;
  background:none;
  color:var(--theme-muted);
  font-size:12px;
  letter-spacing:1px;
  padding:5px
}

.tabs button span {
  font:10px var(--mono);
  margin-right:9px
}

.tabs button.on {
  color:var(--cinnabar)
}

.tabs button:disabled {
  color:var(--theme-muted)
}

.tabs i {
  width:61px;
  height:1px;
  background:var(--line)
}

.view {
  display:none
}

.view.on {
  display:block;
  animation:enter .45s ease both
}

.page-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:40px 0 30px
}

.eyebrow {
  font:10px/1.6 var(--sans);
  letter-spacing:2.8px;
  color:var(--ink-3);
  margin-bottom:14px
}

h1 {
  font-size:44px;
  font-weight:400;
  letter-spacing:3px;
  line-height:1.5;
  margin-bottom:0
}

h1>span {
  color:var(--theme-muted)
}

.intro-note {
  font-size:13px;
  color:var(--ink-3);
  line-height:2;
  letter-spacing:1px;
  margin:20px 5px 0 25px
}

.ask-grid {
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:40px;
  align-items:stretch
}

.ritual-art {
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:19px 22px 0;
  border-top:1px solid var(--theme-line);
  background:radial-gradient(ellipse at 50% 43%,var(--theme-selected),transparent 65%)
}

.art-topline {
  display:flex;
  justify-content:space-between;
  color:var(--theme-muted);
  font:11px var(--serif);
  letter-spacing:1px
}

.art-topline>span:last-child {
  font-size:10px
}

.bagua {
  position:relative;
  width:min(100%,410px);
  aspect-ratio:1;
  align-self:center;
  margin:33px 0 25px
}

.orbit {
  position:absolute;
  border:1px solid var(--theme-line);
  border-radius:50%;
  inset:4.5%
}

.orbit-inner {
  inset:24%;
  border-color:var(--theme-line)
}

.orbit-dashed {
  inset:12%;
  border-style:dashed;
  border-color:var(--theme-line);
  opacity:.65
}

.orbit-outer:before,.orbit-outer:after {
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--theme-line);
  top:50%;
  left:-3px
}

.orbit-outer:after {
  left:auto;
  right:-3px
}

.orbit-axis {
  position:absolute;
  top:50%;
  left:7%;
  width:86%;
  height:1px;
  background:var(--theme-selected);
  opacity:.55
}

.axis-one {
  transform:rotate(45deg)
}

.axis-two {
  transform:rotate(-45deg)
}

.trigram {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%);
  border:0;
  background:var(--paper);
  width:64px;
  height:68px;
  padding:3px;
  transition:color .2s,background .2s
}

.trigram:hover,.trigram:focus-visible,.trigram.selected {
  color:var(--cinnabar);
  background:var(--theme-selected)
}

.trigram>span {
  font:38px/1 "Segoe UI Symbol","Apple Symbols",serif
}

.trigram small {
  font:10px/1.6 var(--serif);
  margin-top:6px;
  letter-spacing:2px
}

.t0 {
  left:50%;
  top:8%
}

.t1 {
  left:79.7%;
  top:20.3%
}

.t2 {
  left:92%;
  top:50%
}

.t3 {
  left:79.7%;
  top:79.7%
}

.t4 {
  left:50%;
  top:92%
}

.t5 {
  left:20.3%;
  top:79.7%
}

.t6 {
  left:8%;
  top:50%
}

.t7 {
  left:20.3%;
  top:20.3%
}

.bagua-center {
  position:absolute;
  inset:25%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px
}

.center-kicker,.center-bottom {
  font:10px var(--serif);
  color:var(--theme-muted);
  letter-spacing:4px
}

.taiji {
  position:relative;
  width:94px;
  height:94px;
  border:1px solid var(--ink);
  border-radius:50%;
  background:linear-gradient(90deg,var(--ink) 50%,var(--paper) 50%);
  transform:rotate(25deg)
}

.taiji:before,.taiji:after {
  content:"";
  position:absolute;
  width:47px;
  height:47px;
  left:22.5px;
  border:18px solid var(--paper);
  border-radius:50%;
  background:var(--ink);
  top:0
}

.taiji:after {
  top:46px;
  background:var(--paper);
  border-color:var(--ink)
}

.art-caption {
  display:flex;
  gap:13px;
  justify-content:center;
  align-items:center;
  min-height:70px;
  margin-bottom:23px
}

.caption-mark {
  font-size:25px;
  color:var(--cinnabar)
}

.art-caption p {
  font:17px/1.6 var(--serif);
  letter-spacing:2px;
  margin:0
}

.art-caption p>span {
  display:block;
  font:11px/1.8 var(--sans);
  color:var(--ink-3);
  letter-spacing:1px;
  margin-top:7px
}

.art-bottom {
  margin-top:auto;
  border-top:1px solid var(--line);
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--theme-muted);
  font:11px var(--serif);
  letter-spacing:2px
}

.tiny-seal {
  color:var(--cinnabar);
  border:1px solid var(--theme-accent);
  padding:3px 2px;
  font:12px var(--serif);
  writing-mode:vertical-rl;
  letter-spacing:2px
}

.card {
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:7px;
  padding:28px;
  margin-bottom:22px;
  box-shadow:0 6px 18px var(--theme-primary)
}

.question-card {
  padding:28px 30px 25px;
  margin:0
}

.section-label {
  display:flex;
  gap:13px;
  align-items:flex-start;
  margin-bottom:20px
}

.section-number {
  display:grid;
  place-items:center;
  border:1px solid var(--theme-selected);
  color:var(--theme-muted);
  font:14px var(--serif);
  width:29px;
  height:29px;
  flex-shrink:0;
  border-radius:50%;
  margin-top:3px
}

.section-label h2 {
  font-size:21px;
  font-weight:400;
  letter-spacing:1px;
  margin:0 0 5px
}

.section-label p {
  color:var(--ink-3);
  font-size:11px;
  letter-spacing:.4px;
  margin:0
}

.quiet-mark {
  margin-left:auto;
  color:var(--theme-muted);
  font:28px var(--serif)
}

.field {
  display:block;
  margin:10px 0
}

.field>span {
  display:block;
  font-size:12px;
  color:var(--ink-3);
  margin-bottom:6px
}

.question-field {
  margin:0
}

input:not([type]),input[type=text],textarea,select {
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  background:var(--theme-canvas);
  color:var(--ink);
  border-radius:4px;
  outline:none;
  transition:border-color .2s,box-shadow .2s
}

textarea {
  display:block;
  resize:vertical;
  font:15px/1.9 var(--serif);
  min-height:109px;
  max-height:260px;
  padding:14px 16px;
  letter-spacing:.5px
}

textarea::placeholder,input::placeholder {
  color:var(--theme-muted)
}

input:focus,textarea:focus,select:focus {
  border-color:var(--theme-muted);
  box-shadow:0 0 0 3px var(--theme-primary)
}

.question-meta {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--theme-muted);
  margin-top:7px
}

#question-count {
  font-family:var(--mono)
}

.examples {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:15px;
  font-size:10px;
  color:var(--ink-3)
}

.examples button {
  border:0;
  border-bottom:1px solid var(--theme-selected);
  background:none;
  font-size:10px;
  padding:0 0 2px;
  color:var(--theme-muted)
}

.examples button:hover {
  color:var(--cinnabar);
  border-color:var(--cinnabar)
}

.category-line {
  display:flex;
  align-items:center;
  gap:18px;
  font-size:11px;
  color:var(--ink-3);
  margin-top:20px
}

.category-chips {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}

.category-chips button {
  font-size:11px;
  border:1px solid transparent;
  background:none;
  padding:3px 11px;
  border-radius:3px;
  color:var(--theme-muted)
}

.category-chips button.selected {
  border-color:var(--theme-selected);
  background:var(--theme-selected);
  color:var(--jade)
}

.optional-info {
  font-size:11px;
  color:var(--ink-3);
  margin-top:13px
}

.optional-info summary {
  cursor:pointer;
  width:fit-content
}

.optional-info summary>span {
  margin-left:5px;
  color:var(--theme-muted);
  font-size:10px
}

.row2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.method-heading {
  margin:20px 0 12px;
  padding-top:17px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}

.method-heading h3 {
  font:12px var(--sans);
  margin:0;
  font-weight:500
}

.method-heading>span {
  font-size:9px;
  color:var(--ink-3)
}

.modes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.mode {
  position:relative;
  border:1px solid var(--line);
  border-radius:5px;
  display:block;
  padding:12px 13px 10px;
  cursor:pointer;
  transition:background .2s,border-color .2s
}

.mode:has(input:checked) {
  background:var(--theme-selected);
  border-color:var(--theme-muted)
}

.mode input {
  position:absolute;
  right:11px;
  top:12px;
  accent-color:var(--jade);
  width:12px;
  height:12px
}

.mode-icon {
  font-size:24px;
  line-height:1.4;
  color:var(--theme-muted);
  display:block;
  height:33px
}

.stalk-icon {
  font-size:20px;
  letter-spacing:-5px
}

.mode strong {
  display:block;
  font-size:12px;
  font-weight:500;
  margin-top:3px
}

.recommend {
  font:8px var(--sans);
  border-radius:2px;
  color:var(--theme-muted);
  border:1px solid var(--theme-line);
  padding:2px 4px;
  margin-left:3px;
  white-space:nowrap
}

.mode em {
  display:block;
  font-style:normal;
  font-size:10px;
  color:var(--ink-3);
  margin-top:4px
}

.mode-time {
  display:block;
  font-size:9px;
  color:var(--theme-muted);
  margin-top:8px
}

.start-row {
  display:flex;
  gap:20px;
  align-items:center;
  margin-top:23px
}

.primary,.ghost {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  border-radius:4px;
  padding:12px 24px;
  letter-spacing:1px;
  font-size:13px;
  transition:background .2s,transform .2s
}

.primary {
  border:1px solid var(--jade);
  background:var(--jade);
  color:var(--theme-muted)
}

.primary:hover {
  background:var(--theme-primary);
  transform:translateY(-1px)
}

.primary:disabled {
  opacity:.55
}

.ghost {
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-2)
}

.ghost:hover {
  border-color:var(--theme-muted);
  background:var(--theme-canvas)
}

.danger:hover {
  color:var(--cinnabar);
  border-color:var(--cinnabar)
}

#btn-start {
  min-width:210px
}

.local-note {
  font-size:10px;
  color:var(--theme-muted)
}

.local-note>span {
  font-size:16px;
  vertical-align:middle;
  margin-right:5px
}

.note {
  font-size:12px;
  color:var(--cinnabar);
  line-height:1.8
}

p.note {
  margin:10px 0 0
}

p.note:empty {
  display:none
}

.journey-notes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-top:36px;
  padding-top:23px;
  border-top:1px solid var(--line)
}

.journey-notes>div {
  display:flex;
  gap:14px
}

.journey-notes>div>span {
  font:11px/1.9 var(--mono);
  color:var(--theme-muted)
}

.journey-notes p {
  font-size:10px;
  color:var(--ink-3);
  margin:0
}

.journey-notes strong {
  display:block;
  font:14px var(--serif);
  letter-spacing:1px;
  color:var(--ink-2);
  margin-bottom:8px
}

.foot {
  max-width:1240px;
  margin:auto;
  padding:22px 0 30px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:var(--theme-muted);
  font-size:10px
}

.foot>div {
  display:flex;
  align-items:center;
  gap:17px
}

.footer-name {
  font:17px var(--serif);
  color:var(--theme-muted);
  letter-spacing:3px
}

.text-button {
  border:0;
  background:none;
  padding:4px 0;
  font-size:11px;
  color:var(--theme-muted)
}

.text-button:hover {
  color:var(--cinnabar)
}

.foot .text-button {
  font-size:10px
}

/* 亲手起卦 */
.cast-grid {
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:25px
}

.cast-workspace {
  padding:30px
}

.cast-status {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--ink-3);
  margin-bottom:20px
}

.cast-status>span:first-child {
  color:var(--cinnabar);
  letter-spacing:2px
}

.cast-workspace h2 {
  font-size:27px;
  font-weight:400;
  margin-bottom:7px
}

.hint {
  font-size:13px;
  color:var(--ink-3);
  line-height:1.9
}

.canvas-wrap {
  position:relative;
  margin-top:25px
}

.canvas-label {
  position:absolute;
  top:20px;
  left:23px;
  font:10px var(--serif);
  letter-spacing:3px;
  color:var(--theme-muted);
  pointer-events:none
}

.canvas-end {
  position:absolute;
  bottom:20px;
  left:23px;
  font-size:10px;
  color:var(--theme-muted);
  pointer-events:none
}

#stroke-canvas {
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--theme-selected);
  border-radius:5px;
  touch-action:none;
  cursor:crosshair;
  background:radial-gradient(ellipse at center,var(--theme-selected),transparent),repeating-linear-gradient(0deg,transparent 0 39px,var(--theme-selected) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,var(--theme-selected) 39px 40px),var(--theme-canvas);
  transition:box-shadow .3s
}

.canvas-wrap.breathing #stroke-canvas {
  box-shadow:inset 0 0 80px var(--theme-line)
}

.stroke-tip {
  text-align:center;
  color:var(--theme-muted);
  font-size:11px;
  margin-top:13px
}

#btn-keyboard-stroke {
  display:block;
  margin:7px auto 0;
  font-size:10px
}

.changes {
  min-height:60px;
  margin-top:18px;
  font-size:12px;
  color:var(--ink-3);
  padding:14px 16px;
  background:var(--theme-canvas);
  border-radius:4px
}

.changes:empty:before {
  content:"不急。等你准备好，再落下这一笔。"
}

.changes b {
  color:var(--cinnabar)
}

.reveal-title {
  font:20px var(--serif);
  color:var(--ink);
  margin-right:12px
}

.changes small {
  display:block;
  margin-top:5px;
  font-size:10px
}

.cast-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:17px;
  margin-top:24px;
  color:var(--ink-3);
  font-size:10px
}

.side {
  padding:28px
}

.side-heading {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.side-heading h3 {
  font-weight:400;
  font-size:18px;
  margin:0 0 8px
}

.live-dot {
  animation:breathe 2.4s ease-in-out infinite
}

.lines-col {
  display:flex;
  flex-direction:column-reverse;
  gap:17px;
  margin:40px 0 32px
}

.line {
  display:flex;
  gap:18px;
  align-items:center;
  font-size:11px;
  min-height:20px
}

.line .line-pos {
  font:10px var(--serif);
  color:var(--theme-muted);
  min-width:24px
}

.glyph {
  flex:1;
  max-width:155px
}

.glyph i {
  display:block;
  height:9px;
  background:var(--ink);
  border-radius:1px
}

.glyph i.break {
  background:linear-gradient(90deg,var(--ink) 0 42%,transparent 42% 58%,var(--ink) 58%)
}

.line.moving .glyph i {
  background:var(--cinnabar)
}

.line.moving .glyph i.break {
  background:linear-gradient(90deg,var(--cinnabar) 0 42%,transparent 42% 58%,var(--cinnabar) 58%)
}

.line .tag {
  width:74px;
  color:var(--theme-muted);
  font-size:10px
}

.line.moving .tag {
  color:var(--cinnabar)
}

.line.empty .glyph i {
  background:none;
  border-top:2px dashed var(--theme-selected);
  height:2px
}

.line.empty .tag {
  color:var(--theme-muted)
}

.line.current .line-pos {
  color:var(--cinnabar)
}

.line.current .glyph {
  animation:breathe 2s infinite
}

.line.just-revealed .glyph {
  animation:ink-in .65s ease both
}

.progress-track {
  height:3px;
  background:var(--theme-selected)
}

.progress-track>div {
  height:100%;
  width:0;
  background:var(--theme-muted);
  transition:width .6s ease
}

.line-legend {
  display:flex;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:22px;
  font-size:10px;
  color:var(--ink-3)
}

.line-legend>span {
  display:flex;
  gap:6px;
  align-items:center
}

.line-legend i {
  width:19px;
  height:4px;
  background:var(--ink)
}

.line-legend i.yin {
  background:linear-gradient(90deg,var(--ink) 40%,transparent 40% 60%,var(--ink) 60%)
}

.line-legend i.moving-key {
  background:var(--cinnabar)
}

.side-tip {
  font-size:11px;
  line-height:2;
  color:var(--theme-muted);
  margin:18px 0 0
}

.split-stage {
  position:relative;
  height:235px;
  border:1px solid var(--theme-selected);
  border-radius:5px;
  background:var(--theme-canvas);
  padding:65px 20px 25px;
  margin-top:25px
}

.stalks {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  height:100%;
  gap:4px
}

.stalks i {
  display:block;
  flex:1;
  max-width:4px;
  background:linear-gradient(90deg,var(--theme-muted),var(--theme-line),var(--theme-muted));
  border-radius:4px;
  transform:rotate(-6deg);
  transition:transform .3s,margin .3s
}

.stalks i.right {
  background:linear-gradient(90deg,var(--theme-muted),var(--theme-muted),var(--theme-muted));
  transform:rotate(6deg) translateY(-3px)
}

.stalks i.left:has(+i.right) {
  margin-right:22px
}

.split-ctl {
  margin:23px 0
}

input[type=range] {
  width:100%;
  accent-color:var(--jade);
  cursor:ew-resize
}

.split-num {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--ink-3);
  margin-top:8px
}

.split-num b {
  color:var(--ink);
  font:18px var(--serif)
}

/* 展卦、经文与卦历 */
.result-intro {
  align-items:flex-end
}

.result-question {
  font:15px/1.8 var(--serif);
  max-width:460px;
  overflow-wrap:anywhere
}

.result-meta {
  font-size:11px;
  color:var(--ink-3);
  margin-top:10px
}

.result-layout {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:25px
}

.result-visual {
  padding:28px 30px;
  background:var(--theme-selected)
}

.card-eyebrow {
  font-size:10px;
  letter-spacing:2px;
  color:var(--theme-muted);
  margin-bottom:23px
}

.hex-comparison {
  display:grid;
  grid-template-columns:1fr 45px 1fr;
  align-items:center;
  text-align:center;
  padding:12px 0 22px
}

.hex-stack {
  display:flex;
  flex-direction:column-reverse;
  gap:10px;
  width:112px;
  margin:0 auto 24px
}

.hex-line {
  height:10px;
  background:var(--ink);
  position:relative;
  border-radius:1px
}

.hex-line.yin {
  background:linear-gradient(90deg,var(--ink) 42%,transparent 42% 58%,var(--ink) 58%)
}

.hex-line.is-moving {
  background:var(--cinnabar)
}

.hex-line.is-moving.yin {
  background:linear-gradient(90deg,var(--cinnabar) 42%,transparent 42% 58%,var(--cinnabar) 58%)
}

.hex-line.is-moving:after {
  content:"○";
  position:absolute;
  right:-19px;
  top:-9px;
  font-size:13px;
  color:var(--cinnabar)
}

.hex-name {
  font:25px var(--serif);
  letter-spacing:2px;
  margin-bottom:8px
}

.hex-sub {
  font-size:11px;
  color:var(--ink-3)
}

.hex-arrow {
  font:25px var(--serif);
  color:var(--theme-muted);
  padding-bottom:70px
}

.hex-nature {
  font-size:11px;
  color:var(--ink-3);
  margin-top:8px
}

.change-toggle {
  display:block;
  margin:0 auto 18px;
  padding:7px 16px;
  border:1px solid var(--theme-line);
  border-radius:20px;
  background:transparent;
  font-size:11px;
  color:var(--theme-muted)
}

.change-toggle:hover {
  background:var(--theme-selected)
}

.result-visual.transformed .original-stack .hex-line.is-moving {
  animation:flip-line .5s ease
}

.result-visual.transformed .original-stack .hex-line.is-moving.yin {
  background:var(--cinnabar)
}

.result-visual.transformed .original-stack .hex-line.is-moving:not(.yin) {
  background:linear-gradient(90deg,var(--cinnabar) 42%,transparent 42% 58%,var(--cinnabar) 58%)
}

.rule {
  border-top:1px solid var(--theme-selected);
  padding:17px 0 0;
  font-size:12px;
  color:var(--theme-muted)
}

.rule b {
  color:var(--cinnabar);
  font-weight:400
}

.reading-card h2 {
  font-size:23px;
  font-weight:400;
  margin-bottom:14px
}

.reading-card .theme-phrase {
  font:21px/1.7 var(--serif);
  color:var(--ink);
  letter-spacing:2px
}

.reading-card p {
  font-size:13px;
  color:var(--ink-2);
  line-height:2
}

.reading-prompt {
  border-left:2px solid var(--theme-line);
  padding-left:17px;
  margin-top:20px
}

.reading-prompt span {
  font-size:10px;
  color:var(--theme-muted)
}

.reading-prompt p {
  margin:6px 0 0;
  font:17px/1.8 var(--serif)
}

.reading-card .reading-source {
  font-size:10px;
  color:var(--ink-3);
  margin:18px 0 0
}

.reading-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:16px 0 19px;
  gap:12px
}

.reading-heading h2 {
  font-size:23px;
  font-weight:400;
  margin:0
}

.reading-heading span {
  font-size:11px;
  color:var(--ink-3)
}

.entry {
  border-top:1px solid var(--line);
  padding:21px 0 6px
}

.entry:first-of-type {
  border:0;
  padding-top:0
}

.entry h4 {
  font-size:12px;
  font-weight:500;
  margin:0 0 12px;
  color:var(--ink-2)
}

.entry .role {
  font-size:10px;
  color:var(--cinnabar);
  margin-left:12px
}

.entry .text {
  font:21px/1.9 var(--serif);
  letter-spacing:1px
}

.entry .xiang {
  font:13px/2 var(--serif);
  color:var(--ink-3);
  margin-top:10px
}

.plain-rule {
  font-size:12px;
  color:var(--ink-3);
  margin-bottom:24px
}

.reflection {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:22px;
  margin:24px 0
}

.reflection>div {
  border-top:1px solid var(--line);
  padding-top:15px
}

.reflection span {
  font:10px var(--mono);
  color:var(--cinnabar)
}

.reflection h3 {
  font-size:15px;
  font-weight:400;
  margin:10px 0 7px
}

.reflection p {
  color:var(--ink-3);
  font-size:11px;
  margin:0
}

.technical {
  margin:20px 0 0;
  border-top:1px solid var(--line);
  padding-top:17px
}

.technical summary {
  font-size:12px;
  color:var(--theme-muted);
  cursor:pointer;
  padding:4px 0
}

.technical[open] summary {
  margin-bottom:20px
}

.technical .technical {
  margin-bottom:15px
}

.table-wrap {
  overflow-x:auto
}

.kv {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:8px 14px;
  font-size:12px
}

.kv dt {
  color:var(--ink-3)
}

.kv dd {
  margin:0;
  overflow-wrap:anywhere;
  font:11px/1.9 var(--mono)
}

table.entropy {
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  margin:15px 0
}

table.entropy th,table.entropy td {
  text-align:left;
  padding:9px;
  border-bottom:1px solid var(--line);
  vertical-align:top
}

table.entropy th {
  font-weight:400;
  color:var(--ink-3)
}

td.code {
  font:10px var(--mono);
  overflow-wrap:anywhere
}

.result-actions {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:28px;
  flex-wrap:wrap
}

.saved-note {
  margin-left:auto;
  font-size:11px;
  color:var(--theme-muted)
}

.ledger-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px
}

.ledger-heading h2 {
  font-size:21px;
  font-weight:400;
  margin:0
}

.ledger-list {
  margin-top:25px
}

.ledger-empty {
  text-align:center;
  padding:50px 10px 65px;
  color:var(--ink-3)
}

.ledger-empty>span {
  font:55px "Segoe UI Symbol",serif;
  color:var(--theme-muted)
}

.ledger-empty h3 {
  font:21px var(--serif);
  color:var(--ink);
  margin:15px 0
}

.ledger-empty p {
  font-size:12px
}

.ledger-item {
  display:flex;
  align-items:center;
  text-align:left;
  gap:24px;
  padding:20px 0;
  border:0;
  border-bottom:1px solid var(--line);
  background:none;
  width:100%
}

.ledger-item:hover {
  background:var(--theme-selected)
}

.ledger-item .g {
  font:38px "Segoe UI Symbol",serif;
  color:var(--theme-muted)
}

.ledger-item .q {
  flex:1;
  font-size:13px;
  min-width:0;
  overflow-wrap:anywhere
}

.ledger-item b {
  font:17px var(--serif);
  margin-right:12px
}

.ledger-item .ledger-meta {
  display:block;
  font-size:10px;
  color:var(--ink-3);
  margin-top:7px
}

.ledger-item .h {
  font-size:17px;
  color:var(--theme-muted)
}

.actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:18px
}

.about-grid {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:25px
}

.about-grid h2 {
  font-size:23px;
  font-weight:400;
  margin-bottom:25px
}

.about-grid h3 {
  font-size:17px;
  font-weight:400;
  margin-top:30px
}

.about-grid p {
  font-size:13px;
  line-height:2.1;
  color:var(--ink-2)
}

pre.out {
  padding:15px;
  background:var(--theme-canvas);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:11px/1.9 var(--mono);
  max-height:350px;
  overflow:auto
}

pre.out:empty {
  display:none
}

@keyframes enter {
  from {
    opacity:0;
    transform:translateY(8px)
  }

  to {
    opacity:1;
    transform:none
  }

}

@keyframes breathe {
  50% {
    opacity:.35
  }

}

@keyframes ink-in {
  from {
    opacity:0;
    transform:scaleX(.15)
  }

  to {
    opacity:1;
    transform:scaleX(1)
  }

}

@keyframes flip-line {
  50% {
    transform:scaleX(.1)
  }

}

@media(min-width:1500px) {
  .top {
    padding-top:32px;
    padding-bottom:26px
  }

  main {
    padding-bottom:65px
  }

  .page-intro {
    padding-top:46px;
    padding-bottom:37px
  }

  .ask-grid {
    gap:50px
  }

  .question-card {
    padding:32px 34px
  }

  .bagua {
    margin-top:48px
  }

  .journey-notes {
    margin-top:42px
  }

}

@media(max-width:1330px) {
  main,.foot {
    margin-left:44px;
    margin-right:44px
  }

  .top {
    padding-left:44px;
    padding-right:44px
  }

  .ask-grid {
    gap:25px
  }

  .recommend {
    display:inline-block;
    margin:4px 0 0 5px
  }

  .question-card {
    padding:25px
  }

  .ritual-art {
    padding-left:12px;
    padding-right:12px
  }

  .art-caption p {
    font-size:15px;
    letter-spacing:1px
  }

  .local-note {
    font-size:9px
  }

  .start-row {
    gap:12px
  }

  #btn-start {
    min-width:190px
  }

}

@media(max-width:1050px) {
  .header-note {
    display:none
  }

  .site-nav {
    gap:25px
  }

  .ask-grid {
    grid-template-columns:.75fr 1.25fr;
    gap:22px
  }

  h1 {
    font-size:35px
  }

  .intro-note {
    font-size:11px
  }

  .bagua {
    margin-top:60px
  }

  .taiji {
    width:76px;
    height:76px
  }

  .taiji:before,.taiji:after {
    width:38px;
    height:38px;
    left:18px;
    border-width:14px
  }

  .taiji:after {
    top:37px
  }

  .bagua-center {
    gap:11px
  }

  .center-kicker,.center-bottom {
    font-size:8px;
    letter-spacing:2px
  }

  .trigram {
    width:50px;
    height:56px
  }

  .trigram>span {
    font-size:30px
  }

  .trigram small {
    font-size:9px;
    letter-spacing:1px
  }

  .art-topline {
    font-size:9px;
    letter-spacing:0
  }

  .art-caption {
    margin-top:25px
  }

  .art-caption p {
    font-size:13px
  }

  .art-caption p>span {
    font-size:9px;
    letter-spacing:0
  }

  .method-heading>span {
    display:none
  }

  .section-label h2 {
    font-size:18px
  }

  .quiet-mark {
    display:none
  }

  .mode strong {
    font-size:11px
  }

  .recommend {
    font-size:8px
  }

  .mode {
    padding:10px
  }

  .start-row {
    flex-wrap:wrap
  }

  .local-note {
    font-size:10px
  }

  .cast-grid {
    grid-template-columns:1.45fr 1fr;
    gap:18px
  }

  .side {
    padding:23px
  }

  .line {
    gap:10px
  }

  .cast-bottom {
    flex-wrap:wrap
  }

  .hex-stack {
    width:88px
  }

  .hex-comparison {
    grid-template-columns:1fr 25px 1fr
  }

  .hex-name {
    font-size:22px
  }

  .foot {
    flex-wrap:wrap
  }

  .foot>span {
    margin-left:auto
  }

}

@media(max-width:760px) {
  .top {
    padding:20px 22px 18px
  }

  .brand-name {
    font-size:22px
  }

  .brand-name>span {
    font-size:8px
  }

  .brand-seal {
    width:28px;
    height:38px;
    font-size:14px
  }

  .site-nav {
    gap:18px
  }

  .site-nav button {
    font-size:11px;
    letter-spacing:0
  }

  .header-note {
    display:none
  }

  main,.foot {
    margin-left:22px;
    margin-right:22px
  }

  .tabs {
    gap:9px;
    padding-top:24px
  }

  .tabs i {
    width:28px
  }

  .tabs button {
    font-size:10px;
    padding:4px 0
  }

  .tabs button span {
    font-size:9px;
    margin-right:5px
  }

  .page-intro {
    padding-top:32px;
    padding-bottom:25px;
    align-items:flex-start
  }

  .eyebrow {
    font-size:8px;
    letter-spacing:2px;
    margin-bottom:9px
  }

  h1 {
    font-size:31px;
    letter-spacing:2px
  }

  h1>span {
    display:block
  }

  .intro-note {
    font-size:10px;
    letter-spacing:0;
    margin-top:35px;
    margin-left:10px
  }

  .ask-grid {
    grid-template-columns:1fr;
    gap:0
  }

  .ritual-art {
    border-top:0;
    padding:0;
    display:none
  }

  .question-card {
    padding:23px
  }

  .section-label h2 {
    font-size:19px
  }

  .section-label p {
    font-size:10px
  }

  .section-label {
    gap:10px
  }

  .section-number {
    width:25px;
    height:25px;
    font-size:12px
  }

  .category-line {
    gap:12px
  }

  .category-chips {
    gap:3px
  }

  .category-chips button {
    padding:3px 9px
  }

  .question-meta {
    font-size:9px
  }

  .method-heading {
    margin-top:19px
  }

  .modes {
    gap:10px
  }

  .mode {
    padding:12px
  }

  .mode strong {
    font-size:12px
  }

  .mode em {
    font-size:9px
  }

  .recommend {
    display:block;
    width:fit-content;
    margin:5px 0
  }

  .mode-time {
    margin-top:8px
  }

  .mode:has(input[value=classic]) strong {
    margin-bottom:26px
  }

  .start-row {
    gap:12px;
    justify-content:space-between
  }

  #btn-start {
    min-width:175px
  }

  .local-note {
    font-size:9px
  }

  .journey-notes {
    gap:18px;
    margin-top:27px
  }

  .journey-notes>div {
    display:block
  }

  .journey-notes>div>span {
    font-size:9px
  }

  .journey-notes strong {
    font-size:12px;
    letter-spacing:0;
    margin-top:7px
  }

  .journey-notes p {
    font-size:9px;
    line-height:1.9
  }

  .foot {
    gap:14px;
    padding-top:20px
  }

  .foot>div {
    width:100%;
    gap:13px
  }

  .foot>span {
    margin-left:0;
    font-size:9px
  }

  .foot .text-button {
    margin-left:auto;
    font-size:9px
  }

  .cast-grid,.result-layout,.about-grid {
    grid-template-columns:1fr
  }

  .cast-workspace {
    padding:22px
  }

  .cast-workspace h2 {
    font-size:23px
  }

  .hint {
    font-size:12px
  }

  .side {
    display:flex;
    flex-direction:column
  }

  .lines-col {
    margin:23px auto;
    width:min(100%,300px);
    gap:12px
  }

  .line .glyph {
    max-width:none
  }

  .line .tag {
    width:74px
  }

  .side-tip {
    font-size:10px
  }

  .cast-grid .side {
    order:-1
  }

  .cast-grid .side .side-heading,.cast-grid .side>p.tiny {
    display:none
  }

  .cast-grid .side {
    padding:15px 22px
  }

  .cast-grid .side .lines-col {
    margin:4px auto 15px;
    gap:8px
  }

  .cast-grid .side .glyph i {
    height:6px
  }

  .cast-grid .side .line {
    min-height:14px
  }

  .cast-grid .side .line.empty .glyph i {
    height:2px
  }

  .cast-grid .side .line-legend,.cast-grid .side .side-tip {
    display:none
  }

  .cast-grid .card {
    margin-bottom:0
  }

  .cast-grid {
    gap:15px
  }

  .canvas-label {
    font-size:9px;
    top:16px;
    left:16px
  }

  .canvas-end {
    bottom:14px;
    left:16px;
    font-size:9px
  }

  .changes {
    font-size:11px
  }

  .cast-bottom {
    margin-top:18px
  }

  .result-intro {
    display:block
  }

  .result-question {
    margin:15px 0 0;
    font-size:14px
  }

  .result-meta {
    font-size:10px
  }

  .card {
    padding:23px
  }

  .hex-stack {
    width:105px
  }

  .reading-heading {
    display:block
  }

  .reading-heading span {
    display:block;
    margin-top:7px
  }

  .entry .text {
    font-size:19px
  }

  .entry .role {
    display:block;
    margin:7px 0
  }

  .reflection {
    gap:16px
  }

  .reflection h3 {
    font-size:14px
  }

  .reflection p {
    font-size:10px
  }

  .saved-note {
    width:100%;
    margin:0
  }

  .ledger-heading {
    display:block
  }

  .ledger-heading>span {
    display:block;
    margin-top:7px
  }

  .ledger-item {
    gap:15px
  }

  .ledger-item b {
    display:block;
    margin-bottom:6px
  }

  .ledger-item .g {
    font-size:32px
  }

  .result-actions .primary,.result-actions .ghost {
    font-size:12px;
    padding:10px 17px
  }

}

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

}

/* Headings receive programmatic focus after navigation. */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus {
  outline:none
}

/* Reveal the three actual yarrow reductions for each new line. */
.replay-strip {
  display:flex;
  gap:8px;
  margin-top:10px
}

.replay-strip>span {
  flex:1;
  border:1px solid var(--theme-selected);
  border-radius:3px;
  padding:6px 8px;
  font:11px var(--mono);
  color:var(--theme-muted);
  animation:enter .4s ease both
}

.replay-strip>span:nth-child(2) {
  animation-delay:.2s
}

.replay-strip>span:nth-child(3) {
  animation-delay:.4s
}

.replay-strip small {
  font:9px var(--sans);
  color:var(--ink-3);
  margin:0 0 3px
}

.brand-seal {
  color:var(--theme-canvas)
}

.primary {
  color:var(--theme-surface)
}

.rule,.change-toggle {
  color:var(--theme-muted)
}

.entry h3 {
  font:500 12px var(--sans);
  margin:0 0 12px;
  color:var(--ink-2)
}
/* 筮仪与计算旁白：延续纸墨色，给阅读与停顿留下足够空间。 */
.prep-steps,.demo-progress{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 24px}
.prep-steps>span,.demo-progress>span{border:1px solid var(--line);border-radius:20px;padding:5px 13px;font-size:11px;color:var(--ink-3)}
.prep-steps>span.active,.demo-progress>span.active{background:var(--theme-selected);border-color:var(--theme-line);color:var(--theme-primary)}
.prep-steps>span.complete{color:var(--cinnabar);border-color:var(--theme-line)}
.prepare-box>div>p{font:16px/2.1 var(--serif);color:var(--ink-2);margin:17px 0}
.ritual-quote{font:24px/1.9 var(--serif);color:var(--ink);margin:20px 0 23px;padding:15px 0 15px 20px;border-left:2px solid var(--theme-line);letter-spacing:1px}
.preparation-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:25px}
.spoken-question{padding:20px;background:var(--theme-selected);border:1px solid var(--theme-selected);border-radius:5px;font:21px/1.9 var(--serif);overflow-wrap:anywhere}
.spoken-question small{display:block;font:11px/1.8 var(--sans);color:var(--ink-3);margin-top:10px}
.reserved-stalks{display:flex;align-items:center;gap:30px;padding:30px 15px;border:1px solid var(--line);background:var(--theme-canvas);border-radius:5px;margin:25px 0}
.reserved-stalks>div{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;flex:1}
.reserved-stalks i{display:block;flex:0 0 3px;width:3px;height:63px;background:var(--theme-muted);border-radius:3px}
.reserved-stalks>div>span{display:block;width:100%;text-align:center;font-size:11px;color:var(--ink-3);margin-top:15px}
.reserved-one{display:flex;flex-direction:column;align-items:center;border-right:1px solid var(--line);padding-right:25px;gap:15px}
.reserved-one i{height:78px;flex:none;background:var(--cinnabar)}
.reserved-one small{font-size:11px;color:var(--cinnabar);writing-mode:vertical-rl;letter-spacing:2px}
.method-explained{background:var(--theme-selected);padding:17px 20px;border-radius:4px;color:var(--ink-2);font-size:13px}
.method-explained b{font-weight:500;color:var(--ink)}
.method-explained p{margin:9px 0 0;line-height:2}
.source-caption,.prepare-box>div>p.source-caption{font:11px/1.9 var(--sans);color:var(--ink-3);margin-top:24px}
.source-caption a,.meaning-note a,.guide-sources a,.story-origin a{color:var(--theme-primary);text-decoration-color:var(--theme-line);text-underline-offset:3px}
.story-origin{background:var(--theme-canvas);border-left:2px solid var(--theme-muted);padding:12px 15px;font-size:12px;line-height:1.9;color:var(--ink-2);margin:22px 0}
.story-tabs{display:flex;gap:9px;margin:18px 0}
.story-tabs button{border:1px solid var(--line);border-radius:4px;padding:8px 15px;background:none;color:var(--ink-3);font-size:12px}
.story-tabs button.on{color:var(--jade);border-color:var(--theme-line);background:var(--theme-selected)}
#story-title{font:20px/1.8 var(--serif);margin:20px 0 16px}
#story-title:focus{outline:none}
.counting-board{display:grid;grid-template-columns:1fr 48px 1fr;gap:16px;border:1px solid var(--theme-selected);background:var(--theme-canvas);border-radius:5px;padding:20px 18px;margin:15px 0 8px}
.pile-label{display:flex;justify-content:space-between;font:13px var(--serif);gap:7px;color:var(--ink);margin-bottom:15px}
.pile-label>span{font:11px var(--sans);color:var(--ink-3)}
.bundle-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:72px}
.bundle,.remainder-bundle{display:flex;gap:3px;align-items:center;padding:6px 5px;border:1px solid var(--theme-selected);border-radius:3px;background:var(--theme-selected)}
.bundle i,.remainder-bundle i{display:block;width:3px;height:31px;border-radius:2px;background:var(--theme-muted)}
.remainder-bundle{background:var(--theme-selected);border-color:var(--theme-line)}
.remainder-bundle i{background:var(--cinnabar)}
.count-pile>p{font:11px/1.8 var(--sans);color:var(--ink-3);margin:12px 0 0}.count-pile>p b{color:var(--cinnabar);font-weight:400}
.hung-stalk{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;border-left:1px solid var(--theme-selected);border-right:1px solid var(--theme-selected);color:var(--cinnabar);font:10px/1.8 var(--sans);text-align:center}
.hung-stalk>i{height:48px;width:3px;background:var(--cinnabar);border-radius:2px}
.diagram-caption{font-size:11px;line-height:1.9;color:var(--ink-3);margin-bottom:23px}
.change-prose{list-style:none;margin:20px 0;padding:0;counter-reset:steps}
.change-prose>li{position:relative;display:grid;grid-template-columns:104px 1fr;gap:15px;padding:14px 0;border-top:1px solid var(--line);animation:enter .3s ease both}
.change-prose>li:first-child{border-top:0}
.change-prose>li>span{font:12px/2 var(--sans);color:var(--theme-muted)}.change-prose>li>p{font:15px/2.1 var(--serif);color:var(--ink-2);margin:0}
.change-prose>li:nth-child(2){animation-delay:.08s}.change-prose>li:nth-child(3){animation-delay:.16s}.change-prose>li:nth-child(4){animation-delay:.24s}.change-prose>li:nth-child(5){animation-delay:.32s}
.change-equation{background:var(--theme-selected);border:1px solid var(--theme-selected);border-radius:4px;padding:16px 19px;margin:23px 0;color:var(--theme-primary)}
.change-equation>span{display:block;font-size:11px;color:var(--ink-3);margin-bottom:10px}
.change-equation p{font:15px/2 var(--mono);margin:3px 0;overflow-wrap:anywhere}
.change-equation b{font-weight:500;color:var(--cinnabar)}
.meaning-note,.demo-details{border-top:1px solid var(--line);padding-top:13px;margin:20px 0;font-size:12px;color:var(--ink-2)}
.meaning-note summary,.demo-details summary{cursor:pointer;color:var(--theme-primary);font-size:12px;padding:5px 0}
.meaning-note p{line-height:2.1;margin:15px 0}.meaning-note a{font-size:11px}
.line-settled{border-top:1px solid var(--theme-line);margin:28px 0 20px;padding-top:24px}
.line-settled>span{font-size:11px;letter-spacing:2px;color:var(--cinnabar)}
.line-settled h3{font:25px var(--serif);margin:13px 0}.line-settled p{font:15px/2.1 var(--serif);color:var(--ink-2);margin:16px 0}
.line-settled small{font-size:11px;color:var(--ink-3)}
.line-equation{font:12px/1.9 var(--mono);color:var(--theme-primary);overflow-wrap:anywhere}
.story-next-hint{font:14px/2 var(--serif);color:var(--ink-2);padding-top:18px;border-top:1px solid var(--line);margin:20px 0}
.kept-tray{display:flex;gap:10px;margin-top:21px;flex-wrap:wrap}.kept-tray:empty{display:none}.kept-tray>div{flex:1;min-width:70px;border:1px solid var(--line);border-radius:4px;padding:9px 12px;background:var(--theme-canvas);color:var(--ink-3);font-size:10px}.kept-tray b{display:block;font:20px/1.8 var(--serif);color:var(--cinnabar)}.kept-tray .tray-empty b{color:var(--theme-muted);font-size:15px}.kept-tray>p{width:100%;font-size:10px;margin:0;color:var(--ink-3)}
.guide-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start}.guide-article{padding:30px}.guide-note{background:var(--theme-selected);border-left:2px solid var(--theme-muted);padding:16px 20px;font-size:12px;line-height:2;color:var(--ink-2)}
.guide-chapter{display:flex;gap:18px;border-top:1px solid var(--line);padding:28px 0 4px;margin-top:26px;scroll-margin-top:20px}.guide-index{font:11px/2 var(--mono);color:var(--cinnabar);flex-shrink:0}.guide-chapter>div{min-width:0;flex:1}.guide-chapter h2{font:23px/1.7 var(--serif);margin:0 0 18px}.guide-chapter p{font:15px/2.2 var(--serif);color:var(--ink-2);margin:13px 0}.principle-formula{padding:16px 20px;background:var(--theme-canvas);border-radius:4px;font:14px/2.1 var(--mono);color:var(--theme-primary);overflow-wrap:anywhere}.symbol-table th,.symbol-table td{font-size:12px;white-space:nowrap}
.example-card{position:sticky;top:22px;padding:25px}.example-card h2{font:22px/1.8 var(--serif);margin:0 0 20px}.example-card h3{font:18px var(--serif);margin:18px 0}.example-card .counting-board{grid-template-columns:1fr;gap:15px;padding:15px}.example-card .hung-stalk{flex-direction:row;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px}.example-card .hung-stalk>i{height:28px}.example-card .bundle-row{min-height:45px}.example-card .count-pile>p{font-size:10px}.example-card .change-prose>li{display:block;padding:14px 0}.example-card .change-prose>li>span{display:block;margin-bottom:8px}.example-card .hint{font-size:11px;line-height:2;margin-top:20px}.example-card .change-equation{padding:14px}.example-card .change-equation p{font-size:12px}.guide-sources{border-top:1px solid var(--line);padding-top:25px;margin-top:25px;color:var(--ink-3);font-size:12px;line-height:2.2}.guide-sources h2{font:22px var(--serif)}
.replay-intro{font:14px/2 var(--serif);color:var(--ink-2);margin:22px 0}.replay-line{padding:16px 0;border-top:1px solid var(--line)}.replay-line>summary{font:17px/1.8 var(--serif);color:var(--ink);cursor:pointer}.replay-line>summary>span{font:11px var(--sans);color:var(--ink-3);margin-left:15px}.replay-change{margin:26px 0;padding:22px;border:1px solid var(--line);border-radius:4px}.replay-change h4{font:17px var(--serif);margin:0 0 20px}.replay-change .change-prose>li{grid-template-columns:104px 1fr}.replay-line-end{font:14px/2 var(--serif);color:var(--cinnabar);margin-bottom:10px}
.close-ritual{padding-top:24px;border-top:1px solid var(--line);margin-top:25px}.close-ritual h3{font:22px var(--serif);margin:0 0 15px}.close-ritual>p{font:15px/2.1 var(--serif);color:var(--ink-2)}.close-ritual label{font:17px var(--serif);display:block;margin:22px 0 12px}.close-ritual textarea{font-size:15px;min-height:110px}.reflection-save{display:flex;gap:14px;align-items:center;margin-top:12px}.reflection-save .note{font-size:11px}.legacy-note{border-left:2px solid var(--cinnabar);padding:13px 16px;background:var(--theme-selected);color:var(--theme-accent);font-size:12px;line-height:2}.reading-rule-detail{font-size:13px;line-height:2.1;color:var(--ink-2);background:var(--theme-canvas);padding:16px 19px;margin:18px 0 24px}.entry .role{font-size:11px}
@media(max-width:1050px){.site-nav{gap:18px}.site-nav button{font-size:12px}.header-note{display:none}.guide-layout{grid-template-columns:1.2fr 1fr}.guide-article{padding:23px}.guide-chapter{gap:12px}.guide-chapter h2{font-size:20px}.counting-board{gap:10px;padding:16px 12px;grid-template-columns:1fr 38px 1fr}.pile-label{font-size:12px;flex-wrap:wrap}.bundle-row{gap:5px}.bundle,.remainder-bundle{gap:2px;padding:5px 3px}.change-prose>li{grid-template-columns:80px 1fr;gap:12px}.change-prose>li>p{font-size:14px}.preparation-actions{gap:12px}.reserved-stalks{gap:17px}.reserved-one{padding-right:17px}.reserved-stalks>div{gap:3px}.reserved-stalks i{height:50px}}
@media(max-width:760px){.site-nav{gap:12px}.site-nav button{font-size:10px}.site-nav button[data-open=about]{display:none}.guide-layout{display:flex;flex-direction:column}.guide-article,.example-card{width:100%;position:static}.example-card{order:-1}.example-card .counting-board{grid-template-columns:1fr 38px 1fr}.example-card .hung-stalk{flex-direction:column;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0}.example-card .counting-board{gap:10px}.example-card h2{font-size:20px}.example-card .bundle-row{gap:5px}.prep-steps{gap:6px}.prep-steps>span{padding:4px 8px;font-size:10px}.prepare-box>div>p{font-size:15px;line-height:2.1}.ritual-quote{font-size:21px;padding-left:15px}.spoken-question{font-size:18px;padding:16px}.reserved-stalks>div{gap:3px}.reserved-stalks i{flex-basis:2px;width:2px;height:44px}.source-caption,.prepare-box>div>p.source-caption{font-size:10px}.preparation-actions .primary{width:100%}.preparation-actions .text-button{margin:auto}.change-prose>li{display:block;padding:15px 0}.change-prose>li>span{display:block;margin-bottom:6px}.change-prose>li>p{font-size:15px}.change-equation p{font-size:12px}.story-tabs{gap:6px}.story-tabs button{flex:1;padding:8px 6px;font-size:11px}.story-origin{font-size:11px}#story-title{font-size:19px}.counting-board{gap:8px;padding:15px 10px;grid-template-columns:1fr 30px 1fr}.pile-label{font-size:11px}.pile-label>span{font-size:10px}.count-pile>p{font-size:10px}.hung-stalk{font-size:9px}.bundle i,.remainder-bundle i{width:2px;height:27px}.diagram-caption{font-size:10px}.line-settled h3{font-size:23px}.line-settled p,.story-next-hint{font-size:15px}.line-equation{font-size:11px}.kept-tray{gap:6px}.kept-tray>div{padding:8px}.guide-chapter{display:block}.guide-index{display:block;margin-bottom:12px}.guide-chapter h2{font-size:21px}.guide-chapter p{font-size:15px}.replay-change{padding:16px}.replay-change .change-prose>li{display:block}.replay-line>summary>span{display:block;margin:6px 0 0 18px}.principle-formula{font-size:12px;padding:14px}.reflection-save{flex-wrap:wrap}.method-heading .text-button{font-size:10px}.recommend{font-size:8px}}

.cast-grid{align-items:start}.card.side{position:sticky;top:22px}.kept-tray .tray-empty b{color:var(--theme-muted)}
@media(max-width:760px){.card.side{position:static}}

@media(max-width:380px){.top{padding-left:16px;padding-right:16px;gap:12px}.brand-name>span{display:none}.brand-name{font-size:20px;letter-spacing:2px}.brand{gap:10px}.site-nav{gap:10px}.site-nav button{font-size:10px}}
/* 散蓍物理盘与有出处的解读 */
.three-modes{grid-template-columns:repeat(3,minmax(0,1fr))}.three-modes .mode{min-width:0;padding:12px 10px}.three-modes .mode strong{font-size:12px}.three-modes .recommend{display:block;width:fit-content;margin:5px 0 0}.three-modes .mode em{font-size:10px;line-height:1.8}.three-modes .mode-time{font-size:9px;line-height:1.8}.three-modes .mode:has(input[value=classic]) strong{margin-bottom:0}
.physics-meta{display:flex;justify-content:space-between;gap:12px;color:var(--theme-muted);font:11px/1.8 var(--sans);margin:20px 0 12px}.physical-box canvas{display:block;width:100%;height:auto;border:1px solid var(--theme-line);border-radius:6px;background:var(--theme-selected);touch-action:none;cursor:grab}.physical-box canvas:active{cursor:grabbing}.physics-status{font:15px/2 var(--serif);color:var(--ink-2);padding:16px 0;margin:0;min-height:62px}.physics-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.physics-hint{font-size:12px;line-height:2;color:var(--ink-3);margin:20px 0}.physical-box .meaning-note{margin-bottom:4px}
.conclusion-card{background:var(--theme-surface)}.conclusion-card h2{font-size:24px;line-height:1.7;margin-bottom:18px}.reading-card p.answer-question{font:12px/1.9 var(--sans);color:var(--ink-3);padding-bottom:15px;border-bottom:1px solid var(--line)}.reading-card p.conclusion-main{font:18px/2 var(--serif);color:var(--ink);letter-spacing:.3px;margin:18px 0}.overall-context{border-top:1px solid var(--line);padding-top:13px;margin:18px 0}.overall-context summary{font-size:12px;color:var(--theme-primary);cursor:pointer}.overall-context p{font:14px/2 var(--serif);color:var(--ink-2)}.advice-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);padding-top:19px;margin:19px 0}.advice-pair>div>span{font-size:11px;color:var(--cinnabar)}.advice-pair>div>p{font:14px/2 var(--serif);margin:8px 0 0;color:var(--ink-2)}.main-reading-target{font-size:12px!important;border-top:1px solid var(--line);padding-top:15px;margin-top:22px!important}.main-reading-target b{color:var(--cinnabar);font-weight:500}.reading-card .reading-source{font-size:11px;line-height:1.9}
.entry-reading{margin:21px 0 30px}.plain-translation{padding:20px 23px;background:var(--theme-canvas);border-left:2px solid var(--theme-muted);border-radius:0 4px 4px 0}.plain-translation>span{font-size:11px;color:var(--theme-primary);letter-spacing:1px}.plain-translation>p{font:17px/2.1 var(--serif);color:var(--ink);margin:12px 0 0}.commentary-book{border:1px solid var(--theme-selected);border-radius:4px;margin:14px 0;background:var(--theme-surface)}.commentary-book>summary{padding:13px 18px;cursor:pointer;font:14px/1.8 var(--serif);color:var(--theme-primary)}.commentary-book[open]>summary{border-bottom:1px solid var(--line);background:var(--theme-canvas)}.commentary-source{padding:20px 23px}.commentary-source>div{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.commentary-source span{font-size:10px;color:var(--ink-3)}.commentary-source b{font:13px/1.9 var(--sans);font-weight:400;color:var(--ink-2)}.commentary-source blockquote{font:16px/2.15 var(--serif);color:var(--ink-2);margin:15px 0 20px;white-space:pre-line;overflow-wrap:anywhere}.commentary-source a,.classical-sources-note a{font-size:11px;color:var(--theme-primary);text-decoration-color:var(--theme-line);text-underline-offset:3px}.terms-note{padding-top:13px;border-top:1px solid var(--line);margin:20px 0}.terms-note summary{cursor:pointer;font-size:12px;color:var(--theme-primary)}.terms-note dl{display:grid;grid-template-columns:115px 1fr;gap:10px 15px;margin-top:18px}.terms-note dt{font:14px/2 var(--serif);color:var(--cinnabar)}.terms-note dd{font:14px/2 var(--serif);color:var(--ink-2);margin:0}.terms-note>p,.commentary-missing{font-size:11px;line-height:2;color:var(--ink-3)}.classical-sources-note{border-top:1px solid var(--line);padding-top:21px;margin-top:25px}.classical-sources-note h3{font:18px var(--serif);margin:0 0 15px}.classical-sources-note p{font-size:12px;line-height:2;color:var(--ink-3)}.classical-sources-note a{font-size:12px}.commentary-source .transcription-note{font-size:11px;line-height:1.9;color:var(--ink-3)}
@media(max-width:1050px){.three-modes{grid-template-columns:1fr}.three-modes .mode{display:grid;grid-template-columns:35px 1fr;column-gap:9px;padding:12px 14px}.three-modes .mode-icon{grid-row:1/4;align-self:center}.three-modes .recommend{display:inline-block;margin:0 0 0 6px;vertical-align:middle}.three-modes .mode em,.three-modes .mode-time{margin-top:3px}.three-modes .mode-time{font-size:10px}.three-modes .mode input{top:16px}.conclusion-card h2{font-size:22px}.reading-card p.conclusion-main{font-size:17px}.advice-pair{gap:15px}}
@media(max-width:760px){.physics-status{font-size:15px}.physics-hint{font-size:11px}.physics-actions .primary{width:100%;font-size:12px;padding:12px 16px}.physics-actions .text-button{margin:auto}.physics-meta{font-size:10px}.reading-card p.conclusion-main{font-size:17px;line-height:2.1}.advice-pair{grid-template-columns:1fr;gap:17px}.plain-translation{padding:17px}.plain-translation>p{font-size:16px}.commentary-source{padding:17px}.commentary-source blockquote{font-size:16px}.terms-note dl{grid-template-columns:1fr;gap:5px}.terms-note dd{margin-bottom:12px}.classical-sources-note a{font-size:11px}.conclusion-card h2{font-size:23px}.three-modes .mode strong{font-size:13px}.three-modes .mode em{font-size:11px}}
.snapshot-canvas{display:block;width:100%;height:auto;background:var(--theme-selected);border:1px solid var(--theme-line);border-radius:5px;margin:16px 0 20px}.snapshot-button{font-size:11px;padding:9px 14px;margin-bottom:10px}
/* 四种方式：先看清参与次数，再决定停留多久。 */
.four-modes{grid-template-columns:repeat(2,minmax(0,1fr))}.four-modes .mode{min-width:0}.four-modes .mode-time{font-size:10px;line-height:1.9}.mode-notice{font:12px/1.9 var(--sans);color:var(--theme-muted);background:var(--theme-selected);border-left:2px solid var(--theme-muted);padding:12px 15px;margin:17px 0 22px}.story-details>summary{cursor:pointer;color:var(--theme-primary);font:13px/1.9 var(--sans);padding:13px 0;border-bottom:1px solid var(--line);margin-bottom:15px}.simple-line-settled{margin-top:20px}.simple-yao{width:180px;margin:30px auto 20px;position:relative;height:13px;background:var(--ink)}.simple-yao.yin::after{content:"";position:absolute;left:42%;width:16%;height:100%;background:var(--theme-canvas)}.simple-yao.moving{background:var(--cinnabar)}
@media(max-width:760px){.four-modes{grid-template-columns:1fr}.mode-notice{font-size:11px}.simple-yao{width:150px}}

/* 功能标签与无框图形操作。 */
.site-nav button,.tabs button{min-height:44px}.header-note{font-size:10px;letter-spacing:1px}.page-intro h1{letter-spacing:3px}.question-card{border:0;box-shadow:none;background:transparent;padding:18px 0 18px 30px;border-left:1px solid var(--line);border-radius:0}.section-label h2{font-size:26px;letter-spacing:3px}.section-label p{font-size:11px;letter-spacing:1px}.question-field textarea{background:transparent;border:0;border-bottom:1px solid var(--theme-line);border-radius:0;box-shadow:none;padding-left:0;padding-right:0}.question-field textarea:focus{background:var(--theme-control);border-bottom-color:var(--jade)}.question-meta{padding-left:0;padding-right:0}.examples{gap:9px}.examples button{border:0;background:transparent;border-radius:0;min-height:40px;padding:5px 8px;text-decoration:underline;text-decoration-color:var(--theme-line);text-underline-offset:5px}.category-chips button{border:0;border-bottom:1px solid transparent;border-radius:0;box-shadow:none;background:transparent;min-height:44px;padding:7px 10px}.category-chips button.selected{border-bottom-color:var(--cinnabar);background:transparent;color:var(--cinnabar)}
.four-modes{column-gap:24px;row-gap:0}.four-modes .mode{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:17px 0 14px;box-shadow:none}.four-modes .mode:has(input:checked){background:transparent;border-bottom:2px solid var(--jade);padding-bottom:13px}.four-modes .mode:has(input:checked) .mode-icon{color:var(--jade)}.four-modes .mode:hover{background:var(--theme-control)}.four-modes .mode strong{font-size:13px;letter-spacing:1px}.four-modes .mode input{top:23px;right:2px}.four-modes .mode:has(input:focus-visible){outline:2px solid var(--jade);outline-offset:5px}.four-modes .mode-time{font-size:10px}.mode-notice{border:0;background:transparent;padding:12px 0 0;margin:8px 0 6px;font-size:11px;line-height:1.9;color:var(--theme-muted)}.mode-notice::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--cinnabar);margin:0 8px 2px 0}
.action-control{display:inline-flex;align-items:center;gap:9px;vertical-align:middle;flex-shrink:0}.action-caption{font:12px/1.6 var(--sans);letter-spacing:.6px;color:var(--ink-2);white-space:nowrap}.icon-action,.icon-action.primary,.icon-action.ghost,.icon-action.text-button{display:inline-grid;place-items:center;width:48px!important;height:48px;min-width:44px;min-height:44px;padding:0!important;margin:0;border:0!important;border-radius:50%;background:transparent!important;box-shadow:none!important;color:var(--jade);cursor:pointer;vertical-align:middle;transition:color .18s,transform .18s}.icon-action .action-icon{display:block;width:25px;height:25px}.icon-action.primary .action-icon{width:29px;height:29px}.icon-action.primary{color:var(--cinnabar)}.icon-action:hover:not(:disabled){color:var(--cinnabar);transform:translateX(2px);background:var(--theme-control)!important}.icon-action:focus-visible{outline:2px solid var(--jade);outline-offset:3px;background:var(--theme-control)!important}.icon-action:disabled{opacity:.28;cursor:default;transform:none}.icon-action.danger{color:var(--cinnabar)}.minor-action{gap:3px}.minor-action .action-icon{width:20px;height:20px}.start-row{flex-direction:row-reverse;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;margin-top:20px}.start-row .action-caption{font:17px var(--serif);letter-spacing:3px}.preparation-actions,.physics-actions{justify-content:space-between;gap:14px}.story-box>.action-control{display:flex;width:fit-content;margin-left:auto;margin-top:15px}.cast-bottom>.action-control{margin-left:auto}.cast-bottom{gap:16px}.result-actions{justify-content:flex-end;gap:24px}.change-toggle{border:0;background:transparent}.result-visual>.action-control{margin:0 auto 15px;display:flex;width:fit-content}.story-tabs button{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;min-height:44px}.story-tabs button.on{background:transparent;border-bottom-color:var(--jade);color:var(--jade)}.reflection-notes,.closing-history{margin:22px 0;padding:15px 0;border-top:1px solid var(--line)}.reflection-notes>summary,.closing-history>summary{cursor:pointer;color:var(--ink-2);font:13px/1.8 var(--sans)}.reflection-notes .reflection{border:0;margin-bottom:0}.close-ritual>h3{font-size:23px}.close-ritual>label{font-size:12px}.reflection-save{justify-content:flex-end}.replay-change>.action-control{margin-bottom:12px}.ledger-item{border-left:0;border-right:0;border-radius:0;background:transparent}.ledger-item:hover{background:var(--theme-control)}
@media(max-width:760px){.question-card{padding:0;border:0}.page-intro h1{font-size:34px}.section-label h2{font-size:23px}.four-modes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}.four-modes .mode strong{font-size:12px}.four-modes .mode em{font-size:10px}.four-modes .mode-time{font-size:9px}.four-modes .mode input{width:13px;height:13px}.mode-notice{font-size:10px}.category-chips{gap:2px}.category-chips button{padding:6px 8px}.start-row{flex-wrap:wrap}.action-caption{font-size:11px}.physics-actions .primary{width:48px!important}.physics-actions .text-button{margin:0}.preparation-actions .primary{width:48px!important}.preparation-actions .text-button{margin:0}.cast-bottom>span:not(.action-control){display:none}.result-actions{gap:16px;justify-content:space-between;flex-wrap:wrap}.result-actions .action-control{gap:4px}.reflection-save{gap:6px}.header-note{display:none}.foot .action-control{gap:0}.section-label>div>p{max-width:none}}
@media(prefers-reduced-motion:reduce){.icon-action{transition:none}.icon-action:hover:not(:disabled){transform:none}}
.key-legend{display:block;margin-top:7px;font:10px/1.8 var(--sans);color:var(--ink-3)}.key-legend kbd{font:10px var(--mono);border:0;border-bottom:1px solid var(--theme-line);border-radius:0;background:transparent;padding:1px 3px}.stroke-tip{margin-bottom:8px}
/* 覆盖旧主按钮的 ID 级最小宽度，保持图形与标签的邻近关系。 */
.icon-action{min-width:48px!important;max-width:48px!important;flex:0 0 48px}.four-modes .mode strong{margin-bottom:0!important}

.method-heading>.action-control,.cast-bottom>.action-control{display:inline-flex!important}

/* ---- 再作解读（把卦象交给 AI，两条通路） ---- */
.explain-card .hint{margin:0 0 4px}
.explain-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:16px 0 4px}
.explain-row label{font:13px var(--sans);color:var(--ink-2);letter-spacing:.6px}
.explain-row select{min-height:38px;min-width:148px;flex:0 1 auto}
.explain-fields{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;align-items:center;margin:4px 0 14px}
.explain-fields label{font:13px var(--sans);color:var(--ink-2)}
.explain-fields input{min-height:38px}
.explain-run{display:flex;justify-content:flex-end;margin:4px 0 2px}
.explain-out{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.explain-out h3{font:16px var(--serif);letter-spacing:2px;color:var(--ink);margin:0 0 10px}
.explain-out p{color:var(--ink-2);font-size:14px;line-height:1.9;margin:0 0 12px}
.explain-out p.note{font-size:12px;color:var(--ink-3)}
.explain-card code{font:12px ui-monospace,Menlo,monospace;background:var(--theme-control);padding:1px 4px;border-radius:3px}
@media (max-width:560px){
  .explain-fields{grid-template-columns:1fr}
  .explain-row{gap:10px}
  .explain-row select{flex:1 1 100%;min-height:42px}
  .explain-run .action-control{margin-left:auto}
}