*{box-sizing:border-box}
:root{
  --bg:#f6f3ec;
  --paper:#fffdf7;
  --ink:#1d1d1b;
  --muted:#77736b;
  --line:#d9d3c7;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Noto Serif SC","Songti SC","STSong",serif}
body{min-height:100vh}
.site-header{padding:24px 20px 12px;text-align:center}
.brand{font:700 22px/1.2 Arial,sans-serif;letter-spacing:.28em}
.subtitle{margin-top:7px;color:var(--muted);font-size:14px}
main{width:min(1100px,94vw);margin:0 auto 28px}
.intro{text-align:center;margin:18px 0 22px}
.intro h1{margin:0 0 8px;font-size:clamp(28px,4vw,44px);font-weight:600}
.intro p{margin:0;color:var(--muted);font-size:15px}
.diagram-wrap{
  position:relative;
  min-height:720px;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:18px;
  padding:28px;
  overflow:hidden;
}
.circle-area{display:flex;justify-content:center;align-items:center;min-height:660px}
.circle{
  position:relative;
  width:min(640px,82vw);
  aspect-ratio:1;
  border:1px solid var(--line);
  border-radius:50%;
}
.circle::before{
  content:"";
  position:absolute;
  inset:18%;
  border:1px solid var(--line);
  border-radius:50%;
}
.circle-item{
  position:absolute;
  left:50%;
  top:50%;
  width:28px;
  height:42px;
  margin-left:-14px;
  margin-top:-21px;
  transform-origin:14px 21px;
}
.hex{display:grid;gap:3px;width:26px}
.line{height:3px;background:var(--ink);border-radius:2px}
.line.yin{
  background:linear-gradient(to right,var(--ink) 0 42%,transparent 42% 58%,var(--ink) 58% 100%);
}
.square-panel{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  width:min(330px,46vw);
  text-align:center;
}
.square-area{padding:14px;background:rgba(255,253,247,.96);border:1px solid var(--line);border-radius:8px}
.square{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:5px;
}
.cell{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #bdb7ab;
  background:#fff;
}
.cell .hex{width:18px;gap:2px}
.cell .line{height:2px}
.axis{font-size:12px;color:var(--muted)}
.top-axis{margin-bottom:8px}
.left-axis{margin-top:8px}
footer{text-align:center;color:var(--muted);padding:6px 0 28px;font:13px Arial,sans-serif;letter-spacing:.08em}
@media (max-width:700px){
  .diagram-wrap{min-height:520px;padding:12px}
  .circle-area{min-height:500px}
  .circle{width:92vw}
  .circle-item{width:20px;height:32px;margin-left:-10px;margin-top:-16px}
  .hex{width:18px;gap:2px}.line{height:2px}
  .square-panel{width:48vw}
  .square-area{padding:8px}
  .square{gap:3px}
  .cell .hex{width:12px;gap:1px}
  .cell .line{height:1.5px}
  .top-axis{font-size:9px}
}