/* 「观星 / Night Sky」：深色星空为主（浅色模式是「破晓」）。中央二十四节气圆环，环心月相；卡片是半透明玻璃。 */
[data-style="celestial"] {
    --sky: #0B1020; --sky-2: #141B33; --sky-ink: #E6E9F5; --sky-soft: #A3ACC8; --sky-line: rgba(230, 233, 245, .16);
}
@media (prefers-color-scheme: light) {
    :root[data-style="celestial"]:not([data-theme]) , [data-style="celestial"] {
        --sky: #F3EEE6; --sky-2: #E9E1D3; --sky-ink: #1E2233; --sky-soft: #5A6178; --sky-line: rgba(30, 34, 51, .14);
    }
}
[data-style="celestial"] body {
    background-color: var(--sky); color: var(--sky-ink);
    background-image:
      radial-gradient(1px 1px at 12% 18%, var(--sky-soft) 50%, transparent 51%),
      radial-gradient(1px 1px at 72% 8%, var(--sky-soft) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 38% 62%, var(--sky-soft) 50%, transparent 51%),
      radial-gradient(1px 1px at 86% 44%, var(--sky-soft) 50%, transparent 51%),
      radial-gradient(1px 1px at 22% 82%, var(--sky-soft) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 58% 30%, var(--sky-soft) 50%, transparent 51%),
      radial-gradient(60rem 40rem at 70% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
    background-attachment: fixed;
}
[data-style="celestial"] .top { background: color-mix(in srgb, var(--sky) 80%, transparent); border-color: var(--sky-line); }
[data-style="celestial"] .brand, [data-style="celestial"] .top-nav a, [data-style="celestial"] .foot a { color: var(--sky-ink); }
[data-style="celestial"] .foot { background: var(--sky-2); border-color: var(--sky-line); color: var(--sky-ink); }
[data-style="celestial"] .foot-entity, [data-style="celestial"] .foot h2 { color: var(--sky-soft); }
[data-style="celestial"] .foot-entity .label { color: var(--sky-ink); }
[data-style="celestial"] .lang > summary, [data-style="celestial"] .menu > summary { border-color: var(--sky-line); }
[data-style="celestial"] .lang-menu, [data-style="celestial"] .menu-panel, [data-style="celestial"] .theme-menu { background: var(--sky-2); border-color: var(--sky-line); }
[data-style="celestial"] main { max-width: 76rem; }
[data-style="celestial"] .note, [data-style="celestial"] .price, [data-style="celestial"] .points, [data-style="celestial"] .td-date,
[data-style="celestial"] .nt-k, [data-style="celestial"] .nt-when, [data-style="celestial"] .lede, [data-style="celestial"] .card-desc { color: var(--sky-soft); }
[data-style="celestial"] h1, [data-style="celestial"] h2, [data-style="celestial"] h3 { color: var(--sky-ink); font-family: var(--serif); }
[data-style="celestial"] .card, [data-style="celestial"] .toc {
    background: color-mix(in srgb, var(--sky-2) 55%, transparent); border: 1px solid var(--sky-line);
    backdrop-filter: blur(10px); color: var(--sky-ink);
}
[data-style="celestial"] details.faq { border-color: var(--sky-line); }
[data-style="celestial"] code { background: var(--sky-2); }

.sky { display: grid; gap: 2rem; align-items: center; padding-top: 1rem; }
.sky-copy h1 { font-size: clamp(2.2rem, 7vw, 3.8rem); line-height: 1.12; margin: 0 0 1.25rem; }
.sky-ring { position: relative; margin: 0; width: min(100%, 34rem); justify-self: center; }
.sky-ring .r-orbit { stroke: var(--sky-line); }
.sky-ring .rt { stroke: var(--sky-soft); }
.sky-ring .rl { fill: var(--sky-soft); }
.sky-ring .rl.next { fill: var(--sky-ink); }
.sky-ring .rt.on, .sky-ring .rl.on { stroke: var(--accent); fill: var(--accent); }
.sky-core { position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%); width: 46%;
            display: grid; justify-items: center; text-align: center; gap: .1rem; }
.sky-core .moon { width: 4.6rem; height: 4.6rem; margin-bottom: .5rem; box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 45%, transparent); }
.sky-core .td-day { font-size: clamp(2.6rem, 8vw, 3.6rem); color: var(--sky-ink); }
.sky-core .td-lunar { font-size: 1rem; margin-top: .2rem; }
.sky-nt { margin-top: .6rem; }
.sky-nt .nt-name { font-size: 1.15rem; color: var(--accent); }
.sky-ring figcaption { text-align: center; font-size: .82rem; color: var(--sky-soft); margin-top: .5rem; }
@media (min-width: 60rem) {
    .sky { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; }
}
@media (max-width: 30rem) {
    .sky-core .moon { width: 3rem; height: 3rem; }
    .sky-nt { display: none; }
}