:root {
  --paper: #e4e8e1;      /* 天青绢 */
  --paper-2: #d7ddd5;
  --ink: #23302b;        /* 青墨 */
  --ink-soft: #55635c;
  --rule: #b9c4bb;
  --bronze: #8a6a2e;     /* 铜 */
  --bronze-hi: #b8924a;
  --verdigris: #3e7a68;  /* 铜绿 */
  --cinnabar: #b23a26;   /* 朱砂，只用于动爻与印 */
  --focus: #3e7a68;

  --kai: "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "Kaiti TC", "TW-Kai", serif;
  --song: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "Noto Serif SC", "SimSun", serif;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #18201d;
    --paper-2: #212b27;
    --ink: #dbe3dd;
    --ink-soft: #9fb0a7;
    --rule: #34423c;
    --bronze: #c29a4f;
    --bronze-hi: #dcb76c;
    --verdigris: #6fb09a;
    --cinnabar: #e0644d;
    --focus: #6fb09a;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--song);
  font-size: 17px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* —— 版式：桌面左侧竖排题名，右侧单栏 —— */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .page { grid-template-columns: 9rem minmax(0, 40rem); column-gap: 4rem; padding-top: 4rem; justify-content: center; }
  .masthead { grid-row: 1 / span 3; position: sticky; top: 3rem; align-self: start; }
  .footer { grid-column: 2; }
}

.masthead { position: relative; }
.title {
  font-family: var(--kai);
  font-weight: 400;
  font-size: clamp(3rem, 12vw, 5.5rem);
  line-height: 1;
  letter-spacing: .08em;
  margin: 0;
}
@media (min-width: 900px) {
  .title { writing-mode: vertical-rl; font-size: 6rem; letter-spacing: .18em; }
}
.seal {
  display: inline-grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  margin: .75rem 0 0;
  border-radius: 4px;
  background: var(--cinnabar);
  color: var(--paper);
  font-family: var(--kai);
  font-size: 1.5rem;
  line-height: 1;
  transform: rotate(-4deg);
}
.lede { color: var(--ink-soft); margin: 1rem 0 0; max-width: 32em; }
@media (min-width: 900px) { .lede { font-size: .95rem; } }

/* —— 表单 —— */
.flow { display: grid; gap: 2.25rem; }
.step { border: 0; padding: 0; margin: 0; display: grid; gap: 1.25rem; min-width: 0; }
.step legend {
  font-family: var(--kai);
  font-size: 1.6rem;
  line-height: 1.2;
  padding: 0 0 .75rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--rule);
  width: 100%;
}
.field { display: grid; gap: .4rem; }
.field-label { font-size: .95rem; color: var(--ink-soft); }
.hint { font-size: .85rem; color: var(--ink-soft); line-height: 1.6; }
textarea, input[type="number"] {
  width: 100%;
  background: color-mix(in srgb, var(--paper) 70%, white 30%);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .7rem .8rem;
  line-height: 1.6;
  resize: vertical;
}
@media (prefers-color-scheme: dark) {
  textarea, input[type="number"] { background: var(--paper-2); }
}
textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: 999px;
  padding: .2rem .9rem;
  cursor: pointer;
  font-size: .95rem;
}
.chip[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.methods { display: flex; gap: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; overflow-y: hidden; }
.method {
  background: none; border: 0; cursor: pointer;
  padding: .5rem 1rem .6rem;
  white-space: nowrap;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.method[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--verdigris); }
.panel { display: grid; gap: 1rem; }
.panel-copy { margin: 0; color: var(--ink-soft); }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* —— 摇卦：铜钱 + 自下而上长出来的卦 —— */
.toss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  grid-template-areas: "coins stack" "side stack";
  gap: 1.25rem 1.5rem;
  align-items: start;
}
.coins { grid-area: coins; display: flex; gap: .9rem; padding-bottom: 1.4rem; }
.toss-side { grid-area: side; display: grid; gap: .5rem; justify-items: start; }
.stack { grid-area: stack; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; min-height: 9.5rem; justify-content: flex-end; }

.coin {
  --s: 3.6rem;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--bronze-hi), var(--bronze) 70%);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--bronze) 60%, black 40%);
  position: relative;
  color: var(--paper);
  font-family: var(--kai);
  font-size: 1rem;
}
.coin i {
  width: 30%; height: 30%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bronze) 60%, black 40%);
}
.coin[data-face]::after {
  content: attr(data-face);
  position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%);
  color: var(--ink-soft); font-family: var(--song); font-size: .8rem;
}
.coin[data-face="背"] { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--bronze-hi) 70%, var(--paper) 30%), var(--bronze) 75%); }
.coins.spinning .coin { animation: flip .55s cubic-bezier(.3,.7,.4,1) both; }
.coins.spinning .coin:nth-child(2) { animation-delay: .06s; }
.coins.spinning .coin:nth-child(3) { animation-delay: .12s; }
@keyframes flip {
  0% { transform: translateY(0) rotateX(0); }
  45% { transform: translateY(-1.2rem) rotateX(540deg); }
  100% { transform: translateY(0) rotateX(1080deg); }
}

.btn-toss, .btn-primary {
  border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper);
  padding: .65rem 1.4rem;
  border-radius: 2px;
  font-size: 1rem;
  letter-spacing: .05em;
}
.btn-toss:disabled, .btn-primary:disabled { opacity: .35; cursor: not-allowed; }
.btn-primary { background: var(--verdigris); color: #fff; padding: .8rem 2rem; font-size: 1.05rem; }
@media (prefers-color-scheme: dark) { .btn-primary { color: var(--paper); } }
.link { background: none; border: 0; padding: 0; color: var(--verdigris); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: .95rem; }

/* 爻 */
.yao { display: grid; grid-template-columns: 1fr 1.1rem; align-items: center; gap: .35rem; }
.bar { height: .7rem; display: flex; gap: 22%; }
.bar span { flex: 1; background: var(--ink); border-radius: 1px; }
.mark { font-size: .9rem; color: var(--cinnabar); font-weight: 700; text-align: center; line-height: 1; }
.stack .yao { animation: ink .35s ease-out both; }
@keyframes ink { from { opacity: 0; transform: scaleX(.6); } to { opacity: 1; transform: none; } }

.manual { border-top: 1px dashed var(--rule); padding-top: .75rem; }
.manual summary { cursor: pointer; color: var(--verdigris); }
.manual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem 1rem; margin: .75rem 0; }
.manual-grid label { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.manual-grid select { background: transparent; border: 1px solid var(--rule); padding: .2rem .3rem; border-radius: 2px; }

.submit-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.error { color: var(--cinnabar); margin: 0; }

/* —— 结果 —— */
.main, .flow, .result, .chart, .ly-wrap, .reading { min-width: 0; }
#again { justify-self: start; }
.result { margin-top: 3rem; display: grid; gap: 2rem; }
.chart-title { font-family: var(--kai); font-size: 2.2rem; line-height: 1.2; margin: 0; }
.chart-sub { color: var(--ink-soft); font-size: .9rem; margin: .25rem 0 0; }
.chart-time { color: var(--ink-soft); font-size: .85rem; margin: .5rem 0 1.25rem; }

.ly-wrap { overflow-x: auto; }
.ly { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; }
.ly th { font-weight: 400; color: var(--ink-soft); font-size: .8rem; text-align: left; padding: 0 .5rem .4rem; border-bottom: 1px solid var(--rule); }
.ly td { padding: .45rem .5rem; border-bottom: 1px solid color-mix(in srgb, var(--rule) 50%, transparent); white-space: nowrap; vertical-align: middle; }
.ly .yao { width: 4.5rem; }
.ly .bar { height: .55rem; }
.tag { display: inline-block; font-size: .75rem; line-height: 1; padding: .2rem .3rem; border: 1px solid currentColor; border-radius: 2px; margin-left: .25rem; }
.tag.shi { color: var(--ink); }
.tag.ying { color: var(--ink-soft); }
.muted { color: var(--ink-soft); font-size: .8rem; }
.weak { text-decoration: underline wavy color-mix(in srgb, var(--cinnabar) 60%, transparent); text-underline-offset: 4px; }

.mh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mh-col { display: grid; gap: .5rem; justify-items: start; }
.mh-col h3 { margin: 0; font-weight: 400; font-size: .85rem; color: var(--ink-soft); }
.mh-col .gua { display: grid; gap: .4rem; width: min(6rem, 100%); }
.mh-col .name { font-family: var(--kai); font-size: 1.25rem; }
.tiyong { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .25rem; font-size: .95rem; }
.tiyong b { font-weight: 400; color: var(--ink-soft); }

.reading { border-top: 1px solid var(--rule); padding-top: 1.25rem; position: relative; }
.reading-tag { position: absolute; top: -.7rem; right: 0; margin: 0; background: var(--paper); padding: 0 .5rem; font-size: .75rem; color: var(--ink-soft); }
.prose { max-width: 36em; line-height: 1.95; }
.prose h3 { font-family: var(--kai); font-weight: 400; font-size: 1.35rem; margin: 1.6rem 0 .4rem; }
.prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.prose em { color: var(--ink-soft); font-style: normal; font-size: .85rem; }
.prose.loading::after { content: "正在解读…"; color: var(--ink-soft); }
.cursor::after { content: "▍"; color: var(--verdigris); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.footer { border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1rem; font-size: .8rem; color: var(--ink-soft); line-height: 1.7; }
.footer p { margin: 0 0 .4rem; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .toss { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .coin { --s: 3rem; }
  .mh { gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}