/* 「guofeng」主题：在原站中作为第二个 <style id="guofeng-style"> 出现，
   位于第一个 <style> 之后，故其变量与多数观感会覆盖 base 主题（variables/layout/divination）。
   来源：原站第二个 <style> 块（index.html:163-576），逐字保留以维持原版视觉。
   改动：仅把 .face-yin/.face-yang 的铜钱 PNG 引用从中文文件名改为 /yigua/assets/ 绝对前缀。 */
:root{
  --paper:#f8f2e8;
  --paper-2:#eee4d4;
  --ink:#2a2521;
  --ink-2:#5e564d;
  --ink-3:#857a6d;
  --cinnabar:#9c3b32;
  --cinnabar-d:#7d2a25;
  --gold:#a67c4a;
  --line:#c9bda8;
}
body *{letter-spacing:0 !important}
body{
  font-family:'STKaiti','KaiTi','楷体','STSong','SimSun',serif;
  color:var(--ink);
  min-height:100vh;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 24px 68px;
  position:relative;
  overflow-x:hidden;
  background:#f6efe3;
  background-image:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.72), transparent 52%),
    radial-gradient(circle at 82% 88%, rgba(171,142,102,.08), transparent 34%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.26) 0 1px, transparent 1px 3px);
  background-size:100% 100%,100% 100%,100% 100%;
}
.scene{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.scene svg{
  display:block;
  width:100%;
  height:100%;
}
.scene::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.42), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 38%, rgba(255,255,255,.16));
  mix-blend-mode:screen;
}
.frame{
  width:min(760px,100%);
  margin:26px 0;
  padding:62px 48px 54px;
  position:relative;
  z-index:2;
  background:
    radial-gradient(circle at 12% 18%, rgba(110,88,60,.06), transparent 32%),
    radial-gradient(circle at 88% 79%, rgba(255,255,255,.38), transparent 34%),
    repeating-linear-gradient(94deg, rgba(80,60,38,.014) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(178deg, rgba(255,255,255,.20) 0 2px, transparent 2px 10px),
    linear-gradient(180deg,#fbf7ef 0%,#f3eadb 58%,#e9decb 100%);
  border:1px solid rgba(105,88,66,.42);
  box-shadow:
    0 3px 0 rgba(80,63,45,.10),
    0 30px 64px -24px rgba(70,54,38,.32),
    inset 0 0 0 1px rgba(255,252,244,.72);
}
.frame::before{
  content:"";
  position:absolute;
  inset:11px;
  border:1px solid rgba(156,51,42,.30);
  pointer-events:none;
  z-index:2;
}
.frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  mix-blend-mode:multiply;
  opacity:.34;
  background:
    radial-gradient(circle at 20% 30%, rgba(120,96,68,.06), transparent 25%),
    radial-gradient(circle at 76% 68%, rgba(255,255,255,.22), transparent 30%),
    radial-gradient(circle at 42% 88%, rgba(120,96,68,.04), transparent 22%);
}
.frame .view,
.frame .stamp{
  position:relative;
  z-index:5;
}
.stamp{
  position:absolute;
  top:-4px;
  right:28px;
  width:62px;
  height:62px;
  background:linear-gradient(145deg,#b24236,#7d241f);
  color:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:bold;
  border:2px solid #631d19;
  box-shadow:0 5px 14px rgba(89,28,22,.42), inset 0 1px 0 rgba(255,211,158,.24);
  transform:rotate(-5deg);
  z-index:7;
}
.title{
  color:var(--ink);
  font-size:60px;
  line-height:1;
  margin:0;
  text-shadow:0 1px 0 rgba(255,250,226,.6);
}
.subtitle{
  color:var(--ink-2);
  font-size:15px;
  margin-top:12px;
}
.intro-text{
  color:var(--ink-2);
  font-size:16px;
  line-height:2;
  margin:30px auto 0;
  max-width:520px;
}
.ask-box label{
  color:var(--ink-3);
  font-size:13px;
  margin-bottom:10px;
}
.ask-box textarea{
  background:rgba(255,250,235,.58);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:inherit;
  font-size:16px;
  line-height:1.7;
  padding:13px 15px;
  outline:none;
  border-radius:0;
  box-shadow:inset 0 2px 8px rgba(85,55,27,.08);
}
.ask-box textarea:focus{
  border-color:var(--cinnabar);
  box-shadow:0 0 0 3px rgba(156,51,42,.12), inset 0 2px 8px rgba(85,55,27,.08);
}
.btn{
  background:linear-gradient(180deg,#a83a30,#7d241f);
  color:#f4e6c8;
  border:1px solid #5f1d19;
  font-family:inherit;
  font-size:19px;
  padding:14px 38px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,208,153,.28), 0 7px 18px rgba(91,28,22,.32);
  transition:transform .15s, box-shadow .15s, background .2s;
}
.btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,#b44335,#872821);
  box-shadow:inset 0 1px 0 rgba(255,208,153,.28), 0 10px 22px rgba(91,28,22,.38);
}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.cast-progress{color:var(--ink-3);font-size:14px;margin-bottom:6px}
.cast-progress b{color:var(--cinnabar)}
.cast-hint{color:var(--ink-2);font-size:15px;margin-bottom:24px;min-height:22px}
.coins{display:flex;gap:28px;justify-content:center;perspective:700px;margin:10px 0 18px}
.coin{
  width:82px;
  height:82px;
  border-radius:50%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.3,1.2,.4,1);
}
.coin.show-yang{transform:rotateY(180deg)}
.coin-face{
  position:absolute;
  inset:0;
  border-radius:50%;
  backface-visibility:hidden;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  box-shadow:0 8px 12px rgba(73,45,25,.22);
}
.face-yin{
  background-image:url('/yigua/assets/coin-back.png');
}
.face-yang{
  background-image:url('/yigua/assets/coin-front.png');
  transform:rotateY(180deg);
}
.coin-hole{
  display:none;
}
.coin-result{color:var(--ink-2);font-size:15px;min-height:22px;margin-bottom:14px}
.coin-result b{color:var(--cinnabar)}
.yao-row .mark{color:var(--cinnabar);font-size:11px;margin-left:8px}
.yao-row .pos{color:var(--ink-3);font-size:11px;margin-right:8px;width:28px;text-align:right}
.yao-yang,.yao-yin i{
  background:linear-gradient(180deg,#3b2b1e,#211812);
  box-shadow:0 1px 0 rgba(255,244,213,.35);
}
.hex-label{font-size:13px;color:var(--ink-3)}
.hex-name{font-size:40px;color:var(--ink);margin:6px 0 2px}
.hex-name .nature{font-size:20px;color:var(--ink-2);margin-left:10px}
.hex-figure{
  background:rgba(255,252,244,.62);
  border:1px solid #b9ae99;
  box-shadow:inset 0 0 0 3px rgba(255,250,230,.25), 0 12px 24px rgba(79,52,28,.10);
}
.trigram-sym{color:var(--ink);font-size:38px}
.trigram-sym.sub{color:var(--ink-2);font-size:26px}
.fig-divider{background:var(--line)}
.fig-yao .yy,.fig-yao .yn i{background:var(--ink)}
.fig-yao .ch{color:var(--cinnabar)}
.sec-label{color:var(--cinnabar);font-size:13px;margin-bottom:4px}
.judgment-text{color:var(--ink);font-size:20px;line-height:1.6}
.reading-text{color:var(--ink-2);font-size:16px;line-height:1.95}
.change-block{margin-top:22px;padding-top:18px;border-top:1px dashed #c3b69f}
.change-flow .hn{color:var(--ink);font-size:24px}
.change-flow .arrow{color:var(--cinnabar);font-size:22px}
.change-hint{color:var(--ink-3);font-size:14px;line-height:1.8}
.foot-note{color:var(--ink-3);font-size:13px;line-height:1.9;max-width:520px;margin:0 auto 22px}
.btn.secondary{
  background:transparent;
  color:var(--ink-2);
  border:1px solid #806b4c;
  box-shadow:none;
  font-size:16px;
  padding:11px 32px;
}
.btn.secondary:hover{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
.small{font-size:13px;color:var(--ink-3)}
.history-entry{margin-top:24px;display:flex;justify-content:center}
.history-entry{gap:12px;flex-wrap:wrap}
.history-link{
  background:transparent;
  color:var(--ink-3);
  border:none;
  font-family:inherit;
  font-size:14px;
  padding:8px 14px;
  cursor:pointer;
  border-bottom:1px solid rgba(156,51,42,.55);
  transition:color .2s,border-color .2s;
}
.history-link:hover{
  color:var(--cinnabar);
  border-color:var(--cinnabar);
}
.result-history{margin-top:18px}
#history{text-align:center}
.history-head{margin-bottom:24px}
.history-title{font-size:34px;color:var(--ink)}
.history-subtitle{color:var(--ink-3);font-size:14px;margin-top:8px}
.history-list{
  text-align:left;
  max-height:480px;
  overflow:auto;
  padding:4px 8px 4px 4px;
  margin:0 auto;
  max-width:640px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.history-item{
  background:rgba(255,252,244,.56);
  border:1px solid #c7baa4;
  margin:12px 0;
  padding:14px 16px;
  box-shadow:0 8px 16px -12px rgba(70,44,24,.35);
  border-radius:0;
}
.history-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  color:var(--ink-2);
  font-size:15px;
  line-height:1.6;
}
.history-item summary::-webkit-details-marker{display:none}
.history-item summary::after{
  content:"展";
  font-size:12px;
  color:var(--cinnabar);
  margin-left:auto;
}
.history-item[open] summary::after{content:"收"}
.history-time{color:var(--cinnabar);font-size:13px;min-width:150px}
.history-question{flex:1 1 180px;color:var(--ink)}
.history-hex{color:var(--ink-2);font-size:15px}
.history-detail{padding:14px 2px 0;border-top:1px dashed var(--line);margin-top:12px}
.history-detail .history-judge{color:var(--ink);font-size:16px;line-height:1.6}
.history-detail .history-read{color:var(--ink-2);font-size:14px;line-height:1.9;margin-top:8px}
.history-change{margin-top:12px;color:var(--ink-3);font-size:14px;line-height:1.8;border-top:1px dashed var(--line);padding-top:10px}
.history-empty{padding:42px 16px;color:var(--ink-3);font-size:15px;line-height:2;text-align:center}
.history-foot{display:flex;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.history-clear{color:#8b493f;border-color:#a87f6e}
.history-clear:hover{background:#7d241f;color:#eadbb9;border-color:#7d241f}
.result-explain{
  margin-top:22px;
  padding:18px 18px 16px;
  text-align:left;
  background:rgba(255,252,244,.62);
  border:1px dashed #c3b69f;
  box-shadow:inset 0 0 0 1px rgba(255,250,230,.32);
}
.result-explain h3{
  color:var(--ink);
  font-size:20px;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.result-explain p{
  color:var(--ink-2);
  font-size:15px;
  line-height:2;
  margin:0 0 12px;
}
.result-explain b{color:var(--ink)}
.explain-block{margin-top:14px}
.explain-label{
  display:inline-block;
  color:var(--cinnabar);
  font-size:13px;
  margin-bottom:4px;
}
.explain-block p{margin-bottom:0}
#learn{text-align:left}
.learn-head{text-align:center;margin-bottom:24px}
.learn-title{font-size:34px;color:var(--ink)}
.learn-subtitle{color:var(--ink-3);font-size:14px;margin-top:8px}
.learn-toc{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
  padding:14px;
  margin-bottom:26px;
  background:rgba(255,252,244,.52);
  border:1px solid var(--line);
}
.learn-toc a{
  display:block;
  color:var(--ink-2);
  text-decoration:none;
  font-size:14px;
  line-height:1.5;
  padding:8px 10px;
  border:1px solid transparent;
  transition:color .2s,border-color .2s,background .2s;
}
.learn-toc a:hover{
  color:var(--cinnabar);
  border-color:var(--line);
  background:rgba(255,250,235,.6);
}
.learn-body{display:flex;flex-direction:column;gap:26px}
.learn-article{
  scroll-margin-top:84px;
  padding:18px 16px 4px;
  background:rgba(255,252,244,.48);
  border-left:4px solid rgba(156,51,42,.55);
}
.learn-article h2{
  color:var(--ink);
  font-size:22px;
  line-height:1.5;
  margin-bottom:12px;
}
.learn-article p{
  color:var(--ink-2);
  font-size:15px;
  line-height:2;
  margin-bottom:14px;
}
.learn-article strong{color:var(--ink)}
.learn-foot{display:flex;justify-content:center;margin-top:28px}
@media(max-width:640px){
  body{padding:30px 12px 52px}
  .frame{padding:56px 18px 48px}
  .title{font-size:44px}
  .subtitle{font-size:14px}
  .intro-text{font-size:15px}
  .coins{gap:10px}
  .coin{width:62px;height:62px}
  .coin-face{box-shadow:inset 0 0 0 2px rgba(150,111,54,.62), inset 0 0 10px rgba(90,74,56,.3)}
  .result-grid{flex-direction:column;align-items:center;gap:18px}
  .history-list{max-height:520px}
  .history-time{min-width:0;width:100%}
  .history-question{flex-basis:100%}
  .learn-toc{grid-template-columns:1fr}
  .learn-article{padding:16px 13px 2px}
}