:root{ --bg:#ffffff; --fg:#000000; }
@media (prefers-color-scheme: dark){
  :root{ --bg:#f0f0f0; /* 背景灰 */ --fg:#000000; }
}
html,body{
  margin:0; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--fg);
  font-family:system-ui;
}
#wrapper {
  width:90vmin; height:90vmin;
  max-width:600px; max-height:600px;
  transform-origin:center center;
  animation:spin 40s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
#baguaCanvas {
  display:block; width:100%; height:100%;
}
#panel {
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,0.8); padding:6px 12px; border-radius:6px;
  font-size:14px; backdrop-filter:blur(4px);
}
@media (prefers-color-scheme: dark){
  #panel{ background:rgba(0,0,0,0.2); }
}
input[type=range]{ width:160px; }
footer {
  position:absolute; bottom:6px; width:100%; text-align:center;
  font-size:0.8rem;
}