/* Celestial Dial — base styles (ported from the Aster Claude Design helmet block) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
html, body { margin: 0; padding: 0; }
body {
  background: #221A2E;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #BD8A4C; color: #fff; }

@keyframes asterTwinkle {
  0%, 100% { opacity: .2; transform: scale(.85); }
  50%      { opacity: .95; transform: scale(1); }
}

/* Tweaks panel (emdash-style live editor) */
.tweaks-toggle {
  position: fixed; bottom: 18px; right: 18px; z-index: 100;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: #221A2E; color: #BD8A4C; font-size: 20px; line-height: 44px;
  box-shadow: 0 6px 18px rgba(28,20,40,.4);
}
.tweaks-panel {
  position: fixed; bottom: 72px; right: 18px; z-index: 100;
  width: 232px; background: #FCF9F2; color: #221A2E;
  border: 1px solid rgba(34,26,46,.12); border-radius: 14px;
  padding: 16px; box-shadow: 0 20px 50px -20px rgba(28,20,40,.5);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
.tweaks-panel h4 { margin: 0 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #8A8194; }
.tweaks-panel .swatches { display: flex; gap: 8px; margin-bottom: 16px; }
.tweaks-panel .swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.tweaks-panel .swatch.active { border-color: #221A2E; }
.tweaks-panel label { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; }