@font-face{font-family:"HanSerif";src:local("Songti SC"),local("Noto Serif SC");font-display:swap}
:root{
  --bg:#f6f0e6;
  --ink:#2b2b2b;
  --accent:#b03a2e;
  --accent-dark:#8e2a1f;
  --line:#5c4b3b;
  --card:#fffaf2;
  --muted:#7b6a58;
  --border:#c8b8a8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 20% 0%, #ffffff 0%, var(--bg) 60%, var(--bg) 100%),
    linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  font-family:"HanSerif", "Noto Serif SC","STSong","Songti SC",serif;
  line-height:1.6;
  display:flex;
  flex-direction:column;
}
h1,h2,h3{letter-spacing:.08em}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark);text-decoration-underline:from-font;text-underline-offset:2px}

.gu-header,.gu-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, #fff, var(--card));
}
.gu-footer{border-top:1px solid var(--border);border-bottom:none;margin-top:auto}
.nav a{margin-right:14px}
.nav a{position:relative;padding-bottom:4px}
.nav a:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .2s ease}
.nav a:hover:after{width:100%}
.brand{font-size:20px;font-weight:700;letter-spacing:.12em}
.container{max-width:1100px;margin:0 auto;padding:20px}

.btn,.cta a,button{
  display:inline-block;background:var(--accent);color:#fff;border:none;
  padding:10px 16px;border-radius:8px;letter-spacing:.08em;cursor:pointer;
  font-size:16px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)
}
button:hover,.btn:hover,.cta a:hover{background:var(--accent-dark)}
.btn:active{transform:translateY(1px)}
.btn-outline,a.btn{
  background:transparent;border:1px solid var(--accent);color:var(--accent)
}
a.btn:hover{background:var(--accent);color:#fff}

.card{
  background:var(--card);
  border:1px solid var(--border);
  padding:16px;border-radius:8px;
  box-shadow:0 1px 0 rgba(0,0,0,.03), inset 0 0 60px rgba(139, 115, 85,.05);
  transform:translateY(0);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation:fadeup .5s ease both
}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08), inset 0 0 60px rgba(139,115,85,.05);border-color:#bda88f}
.card .title{font-weight:700;letter-spacing:.1em}
.badge{display:inline-block;padding:2px 6px;border:1px solid var(--border);border-radius:2px;color:var(--muted);font-size:.85em}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0}
input,select,textarea{
  border:1px solid var(--border);padding:8px 10px;border-radius:8px;background:#fffaf6
}
input:focus,select:focus,textarea:focus{outline:none;border-color:#bda88f;box-shadow:0 0 0 2px rgba(189,168,143,.25)}
label{color:var(--muted);margin-right:6px}
table{border-collapse:collapse;width:100%;background:var(--card)}
th,td{border:1px solid var(--border);padding:10px 12px}
th{background:#fffdf7;letter-spacing:.08em}
tbody tr:hover{background:#fff7ea}
.mono{font-family:Consolas,monospace}

.diag-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.hex{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.line{position:relative;height:8px;width:180px;background:#000}
.line.yin{background:linear-gradient(90deg,#000 0 70px,transparent 70px 110px,#000 110px 180px)}
.line.moving{box-shadow:0 0 0 2px var(--accent) inset}

.coins{display:flex;gap:8px;margin:12px 0}
.coin{
  position:relative;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #5a4a2f;
  background:
    radial-gradient(circle at 30% 30%, #e2c176 0%, #b68e3a 50%, #8a6b2a 100%);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,.15),
    0 2px 6px rgba(0,0,0,.12);
  color:transparent;
  font-size:0;
  animation:spin .6s ease;
}
.coin::before{
  content:"";
  position:absolute;left:50%;top:50%;
  width:22px;height:22px;transform:translate(-50%,-50%);
  background:var(--bg);
  border:2px solid #7a5f2a;
  box-shadow:inset 0 0 6px rgba(0,0,0,.2);
  z-index:0;
}
.coin::after{
  content:attr(data-face);
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:22px;height:22px;line-height:22px;text-align:center;
  color:#6a5847;font-size:14px;font-weight:700;
  z-index:1;pointer-events:none;
}
.coin.yang{
  background:
    radial-gradient(circle at 30% 30%, #f0cf84 0%, #caa246 55%, #936f2c 100%);
}
.coin.yin{
  background:
    radial-gradient(circle at 30% 30%, #d7c27b 0%, #a78d3f 55%, #746029 100%),
    radial-gradient(circle at 70% 70%, rgba(30,70,50,.2), rgba(0,0,0,0) 60%);
}
@keyframes spin {0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

.tip{color:var(--muted);font-size:.92em}

.taiji{
  position:relative;width:80px;height:80px;border-radius:50%;
  background:conic-gradient(#000 0 180deg,#fff 180deg 360deg);
  border:2px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.12);
  animation:rotate 8s linear infinite
}
.taiji:before,.taiji:after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:40px;height:40px;border-radius:50%
}
.taiji:before{top:0;background:#000 radial-gradient(#fff 6px,#000 7px)}
.taiji:after{bottom:0;background:#fff radial-gradient(#000 6px,#fff 7px)}
@keyframes rotate{to{transform:rotate(360deg)}}

.poster-title{font-size:22px;letter-spacing:.2em;margin:8px 0}
.poster-sub{color:var(--muted);margin-bottom:8px}

.taiji-img{width:80px;height:80px;display:block}
.spin{animation:rotate 6s linear infinite;transform-origin:50% 50%;display:inline-block;animation-play-state:running}
.glow{filter:drop-shadow(0 0 6px rgba(176,58,46,.35))}
@keyframes spin3d {0%{transform:rotateZ(0) rotateY(0)}50%{transform:rotateZ(180deg) rotateY(10deg)}100%{transform:rotateZ(360deg) rotateY(0)}}
.spin3d{animation:spin3d 10s linear infinite;transform-origin:50% 50%;display:inline-block;animation-play-state:running}

.userbox{position:relative;display:flex;align-items:center;gap:8px;padding-bottom:6px}
.avatar{width:28px;height:28px;border-radius:50%;background:#efe5d6;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;color:#6a5847}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,.08);padding:8px;border-radius:8px;display:none;min-width:140px;z-index:10}
.menu a,.menu button{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--ink);padding:6px 8px;border-radius:2px}
.menu a:hover,.menu button:hover{background:#fff7ea}
.userbox:hover .menu,
.userbox:focus-within .menu,
.menu:hover{display:block}
.userbox.open .menu{display:block}

.to-top{
  position:fixed;right:24px;bottom:80px;z-index:20;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease
}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{background:var(--accent-dark)}