:root{--pg:#070A12;--ink:#EAF0FF;--ink2:#BAC4DC;--ink3:#8D98B3;--line:rgba(180,195,230,.16);--line2:rgba(180,195,230,.32);--card:rgba(12,16,34,.42);--cardB:rgba(170,190,255,.15);--glass:rgba(8,12,28,.52);--acc:var(--accN,#9DB8FF);--warm:#FFB38A;--disc:rgba(14,21,48,.85);--disc2:rgba(160,185,255,.14);--serif:'Noto Serif SC','Songti SC','STSong',serif;--mono:ui-monospace,'SF Mono',Menlo,monospace;--panel:rgba(8,12,26,.78);--panelB:rgba(160,185,255,.2)}
html[data-ink=dark]{--ink:#14213A;--ink2:#3E4C66;--ink3:#5E6A82;--line:rgba(20,40,70,.13);--line2:rgba(20,40,70,.28);--card:rgba(255,255,255,.6);--cardB:rgba(255,255,255,.82);--glass:rgba(255,255,255,.64);--acc:var(--accD,#2C6FB4);--warm:#D9692F;--disc:rgba(227,236,247,.92);--disc2:rgba(44,80,130,.14)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--pg);color:var(--ink);font:var(--fs-15)/1.7 -apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Noto Sans SC',sans-serif}
body{overflow-x:hidden;transition:background-color .6s,color .6s}
a{color:inherit;text-decoration:none}
button,select{font:inherit;color:inherit}
em{font-style:normal;font-size:.78em;padding:0 5px;border-radius:4px;background:rgba(255,179,138,.18);color:var(--warm);margin-left:4px;white-space:nowrap}
.mono{font-family:var(--mono)}
/* 场景层 */
.stage{position:absolute;left:0;top:0;width:100%;overflow:hidden;z-index:0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
html.fixed .stage{position:fixed;height:100vh!important}
.stage.grab{cursor:grabbing}
.sky,.fx{position:absolute;left:0;top:0;display:block}
.fx{pointer-events:none}
.sl,.sl2{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
.sl2{pointer-events:none}
.ovl{position:absolute;left:0;overflow:visible}
.hero{position:relative;z-index:1;pointer-events:none;height:100vh}
main.pgm{position:relative;z-index:2;padding-top:200px}
html.fixed main.pgm{padding-top:36px}
/* 星 */
.ovl .ln{stroke:rgba(190,210,255,.42);stroke-width:1}
.ovl.day .ln{stroke:rgba(255,255,255,.6)}
.ovl.day .lns,.ovl.day .sts{filter:drop-shadow(0 0 1.2px rgba(16,36,72,.5))}
.ovl .ln.dim{stroke-dasharray:2 4;opacity:.55}
.ovl .hit{fill:transparent;cursor:pointer;outline:none}
.ovl .hit:focus-visible{stroke:#fff;stroke-width:1.4;stroke-dasharray:3 3}
.ovl .s .sd{display:none}.ovl .s.b .sd,.ovl .s.pin .sd{display:inline}
.ovl .s .tw,.ovl .s .sp,.ovl .s .rip{transform-box:fill-box;transform-origin:center}
.ovl.night .s:not(.pin):not(.empty) .tw{animation-name:tw;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes tw{0%,100%{opacity:1;transform:scale(1)}28%{opacity:.6;transform:scale(.8)}52%{opacity:1;transform:scale(1.08)}74%{opacity:.82;transform:scale(.92)}}
.ovl .s.pin .tw{animation:pinS 5.6s ease-in-out infinite!important}
.ovl .s.pin .sp{animation:pinSp 5.6s ease-in-out infinite}
@keyframes pinS{0%,60%,100%{transform:scale(1);opacity:1}64%{transform:scale(1.5)}68%{transform:scale(.94)}72%{transform:scale(1.36)}78%{transform:scale(1)}}
@keyframes pinSp{0%,60%,100%{transform:scale(1)}64%{transform:scale(1.7)}68%{transform:scale(1)}72%{transform:scale(1.5)}80%{transform:scale(1)}}
.ovl .s.pin .rip{fill:none;stroke:#FF9A5C;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0}
.ovl.day .s.pin .rip{animation:rip 3.6s ease-out infinite}.ovl.day .s.pin .rip.r2{animation-delay:1.8s}
.ovl.night .s.pin .rip{stroke:rgba(255,178,122,.6);animation:rip 5.6s ease-out infinite;animation-delay:3.6s}.ovl.night .s.pin .rip.r2{display:none}
@keyframes rip{0%{transform:scale(1);opacity:.95}100%{transform:scale(4.4);opacity:0}}
.ovl .s.sel:not(.pin) .c{stroke:#fff!important}
.reflw,.refl{pointer-events:none}
.refl .rs{opacity:var(--o,0);transform-box:fill-box;transform-origin:center;animation:shim 3.6s ease-in-out infinite}
@keyframes shim{0%,100%{opacity:var(--o,0);transform:translateX(0) scaleY(1)}35%{opacity:calc(var(--o,0) * .45);transform:translateX(.6px) scaleY(1.18)}65%{opacity:calc(var(--o,0) * .85);transform:translateX(-.5px) scaleY(.9)}}
.ovl .subl .ln{stroke:rgba(255,255,255,.75);stroke-width:1.1;stroke-dasharray:3 5}
.ovl .subw{animation:peekIn .7s ease-out both}
.ovl .subw .sts,.ovl .subw .lns{animation:bob 6s .7s ease-in-out infinite}
@keyframes peekIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ovl .subbg{pointer-events:none}
.ovl .subs .s:not(.pin) .tw{animation:shim2 4.2s ease-in-out infinite!important}
@keyframes shim2{0%,100%{opacity:.95}50%{opacity:.6}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cl.sub{text-shadow:0 1px 8px rgba(6,24,48,.7)}
.ovl .subs .tw{animation:none!important}
.ovl .ylw,.cl.ylw{opacity:.28;transition:opacity .3s}
.cl.sub b{font-size:var(--fs-18)}.cl.sub small i{font-style:normal;color:#FFE0B8}
.edges{position:absolute;inset:0;pointer-events:none}
.eh{position:absolute;pointer-events:auto;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.42);background:rgba(10,14,26,.3);color:#EEF2FA;font-size:var(--fs-12);cursor:pointer;white-space:nowrap;transform:translateY(-50%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:6px}
.eh:hover{border-color:rgba(255,255,255,.8)}
.eh.l{left:12px}.eh.r{right:12px}
.eh b{font-family:var(--serif);font-weight:900}
.eh span{font:500 var(--fs-11) var(--mono);opacity:.82}
.ehb{position:absolute;left:0;right:0;bottom:62px;display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;pointer-events:none}
.ehb>span{font:500 var(--fs-10) var(--mono);letter-spacing:.14em;color:rgba(238,242,250,.85);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.ehb .eh{position:static;transform:none}
@media (prefers-reduced-motion:reduce){.ovl .s .tw,.ovl .s .sp,.ovl .s .rip,.pfl{animation:none!important}}
/* 13 日月轨迹 */
.ovl .arcs{opacity:0;transition:opacity .35s;pointer-events:none}
.arc-on .ovl .arcs{opacity:1;pointer-events:auto}
.ovl .ap{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:.5 7}
.ovl .ap.s{stroke:#FFD49E}.ovl .ap.m{stroke:#D4DEFF;opacity:.85}
.ovl .ad{cursor:pointer;outline:none}.ovl .ad .adh{fill:transparent}
.ovl .ad .add{fill:#FFD49E;stroke:rgba(20,24,40,.35);stroke-width:1;transition:r .15s}.ovl .ad.m .add{fill:#D4DEFF}
.ovl .ad:hover .add,.ovl .ad:focus-visible .add{r:5.6px}
.ovl .ad text,.ovl .ae text{font:600 var(--fs-11) var(--mono);fill:#fff;text-anchor:middle;paint-order:stroke;stroke:rgba(10,16,32,.45);stroke-width:3px;stroke-linejoin:round}
.ovl .ae.edge.l text{text-anchor:start}.ovl .ae.edge.r text{text-anchor:end}
.ovl .ad.s text{fill:#FFE6C4}.ovl .ad.m text{fill:#DCE5FF}
.ovl .ae line{stroke:rgba(255,255,255,.85);stroke-width:1.3}.ovl .ae.s text{fill:#FFE6C4}.ovl .ae.m text{fill:#E2E9FF}
.ovl .hot{fill:transparent;cursor:pointer;stroke:rgba(255,255,255,0);stroke-width:1.2;stroke-dasharray:3 4;transition:stroke .3s;outline:none}
.ovl .hot:hover,.ovl .hot:focus-visible,.arc-on .ovl .hot{stroke:rgba(255,255,255,.75)}
/* 标签 */
.lbls{position:absolute;inset:0;pointer-events:none}
.cl{position:absolute;transform:translateY(-100%);display:flex;align-items:baseline;gap:8px;white-space:nowrap;color:rgba(240,244,255,.94);text-shadow:0 1px 10px rgba(10,20,50,.45)}
.cl b{font:900 var(--fs-22)/1 var(--serif);letter-spacing:.1em}.cl b.big{font-size:var(--fs-28)}.cl b.sm{font-size:var(--fs-18)}
.cl small{font:500 var(--fs-11)/1 var(--mono);letter-spacing:.08em;opacity:.8}
/* 首屏 HUD */
.hud{position:absolute;inset:0;pointer-events:none;--hi:#EEF2FA;--hi2:rgba(238,242,250,.8);--hi3:rgba(238,242,250,.62);--hl:rgba(238,242,250,.3);--hs:0 1px 14px rgba(0,0,10,.35);--ti:#EEF2FA;--ti2:rgba(238,242,250,.78);--tl:rgba(238,242,250,.3)}
.hud.ink-dark{--hi:#13213A;--hi2:#25344F;--hi3:#3E4E6A;--hl:rgba(19,33,58,.25);--hs:0 1px 16px rgba(255,255,255,.45)}
.hud.top-dark{--ti:#13213A;--ti2:#2E3E5C;--tl:rgba(19,33,58,.25)}
.hud a,.hud button,.hud input{pointer-events:auto}
.hd{position:absolute;left:80px;right:80px;top:22px;height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--ti);z-index:4}
.logo{justify-self:start;font:900 var(--fs-18)/1 var(--serif);letter-spacing:.04em;opacity:.9}.logo i{font-style:normal;color:#FFB38A}
.hd nav{display:flex;gap:32px;font-size:var(--fs-14);letter-spacing:.12em}.hd nav a{padding:8px 0;color:var(--ti2)}.hd nav a[aria-current]{color:var(--ti);border-bottom:2px solid #FFB38A}
.hr2{justify-self:end;display:flex;gap:10px;align-items:center}
.wpill{height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--tl);display:inline-flex;align-items:center;font-size:var(--fs-13);color:var(--ti2);white-space:nowrap}
.mpill{height:38px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--tl);background:transparent;color:var(--ti);display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-13);cursor:pointer;max-width:240px}
.mpill[aria-pressed=true]{background:rgba(255,179,138,.16)}
/* 播放键 / 暂停键合并：未播放显示播放键，播放中显示暂停键 */
.mpill .pl,.mpill .pa{flex:none;display:block}
.mpill .pa,.mpill[aria-pressed=true] .pl{display:none}
.mpill[aria-pressed=true] .pa{display:block}
.mpill i{display:block;flex:none;width:18px;height:18px;border-radius:50%;transition:box-shadow 2s cubic-bezier(.37,0,.63,1),background-color 1s}
.mpill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{width:38px;height:38px;border-radius:50%;border:1px solid var(--tl);background:transparent;color:var(--ti);display:grid;place-items:center;cursor:pointer;padding:0}
.ib.menu{display:none}
.lede{position:absolute;left:80px;top:150px;width:560px;color:var(--hi);text-shadow:var(--hs)}
.lede::before{content:'';position:absolute;left:-90px;right:-70px;top:-70px;bottom:-60px;z-index:-1;background:radial-gradient(closest-side,rgba(4,8,20,.28),rgba(4,8,20,0));pointer-events:none}
.hud.ink-dark .lede::before{background:radial-gradient(closest-side,rgba(255,255,255,.34),rgba(255,255,255,0))}
.lede .kk{font:500 var(--fs-11)/1 var(--mono);letter-spacing:.2em;color:var(--hi3)}
.lede h1{margin:18px 0 0;font:900 48px/1.25 var(--serif);letter-spacing:.02em}
.lede p{margin:14px 0 0;max-width:520px;font-size:var(--fs-15);line-height:1.85;color:var(--hi2)}
.btns{display:flex;gap:10px;margin-top:22px}
.b1,.b2{height:42px;padding:0 20px;border-radius:999px;display:inline-flex;align-items:center;font-size:var(--fs-14);font-weight:600;cursor:pointer;text-shadow:none}
.b1{background:var(--hi);color:#0B0F1E}.hud.ink-dark .b1{color:#F4F6FA}
.b2{border:1px solid var(--hl);background:transparent;color:var(--hi)}
.lede .now,.nowb,.arch{font:500 var(--fs-11)/1.5 var(--mono);letter-spacing:.03em;color:var(--hi3)}
.lede>.now{margin-top:16px}
.tip{position:absolute;width:290px;padding:12px 14px;border-radius:14px;background:rgba(10,14,28,.74);border:1px solid rgba(160,185,255,.2);color:#EEF2FA;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:auto;box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}
html[data-phase=day] .tip{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.95);color:#14213A}
.tip small{display:block;font:500 var(--fs-10) var(--mono);letter-spacing:.1em;opacity:.7}
.tip b{display:block;margin-top:4px;font-size:var(--fs-15);line-height:1.45}
.tip span{display:block;margin-top:4px;font:500 var(--fs-11) var(--mono);opacity:.75}
.tip a{display:inline-block;margin-top:6px;font-size:var(--fs-13);font-weight:600;color:#E0743C}
html[data-phase=night] .tip a{color:#FFB38A}
.tip.mob{width:auto}
.mcap{position:absolute;width:240px;padding:11px 13px;border-radius:14px;border:1px solid rgba(240,166,196,.32);background:rgba(12,16,32,.62);color:#EAF0FF;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none}
html[data-phase=day] .mcap{background:rgba(255,255,255,.84);border-color:rgba(255,255,255,.95);color:#14213A}
.mcap small{display:flex;justify-content:space-between;font:500 var(--fs-10) var(--mono);letter-spacing:.1em;color:#F0A6C4}
html[data-phase=day] .mcap small{color:#2C6FB4}
.mcap p{margin:5px 0 0;font-size:var(--fs-14);line-height:1.55}
.mcap.on{animation:cap 7.6s ease both}
.scrolled .mcap,.scrolled .tip{visibility:hidden}
.r-pill .wpill{display:none}
@keyframes cap{0%,12%{opacity:0;transform:translateY(8px)}22%,86%{opacity:1;transform:none}100%{opacity:0}}
.tray{position:absolute;left:80px;right:80px;bottom:66px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;pointer-events:auto}
.tray:empty{display:none}
.tray span{font:500 var(--fs-10) var(--mono);letter-spacing:.14em;color:rgba(238,242,250,.85);margin-right:4px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.tray button{height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(10,14,26,.28);color:#EEF2FA;font-size:var(--fs-12);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tray button b{font-family:var(--serif);font-weight:900;margin-right:4px}
.tray .xtra{display:none}.tray.all .xtra{display:inline-block}.tray.all .tmore{display:none}
.tray .tmore{border-style:dashed}
.tray button i{font-style:normal;margin-left:8px;color:#FFE0B8}
.tray button.on{background:rgba(255,224,184,.22);border-color:rgba(255,224,184,.85)}
.tray .tup{border-color:rgba(255,200,150,.7);background:rgba(255,160,100,.18);margin-right:10px}
.cmp{position:absolute;left:0;right:0;bottom:14px;height:34px}
.cmp i{position:absolute;bottom:20px;width:1px;height:6px;background:rgba(255,255,255,.4)}.cmp i.b{height:11px;background:rgba(255,255,255,.7)}
.cmp span{position:absolute;bottom:0;transform:translateX(-50%);font:600 var(--fs-11) var(--mono);color:rgba(255,255,255,.85)}
.pan button{position:absolute;bottom:12px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.32);background:rgba(10,14,26,.3);color:#fff;font-size:var(--fs-22);line-height:1;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pan button:first-child{left:16px}.pan button:last-child{right:16px}
/* 一天色带：共用 */
.rbar{position:relative;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 6px 20px -12px rgba(0,0,0,.6)}
.rbar .mk{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55)}.rbar .mk.w{background:rgba(255,206,140,.95)}
.rbar .now{position:absolute;top:-5px;bottom:-5px;width:3px;margin-left:-1.5px;border-radius:2px;background:#FFB38A;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.rbar .nowt{position:absolute;top:50%;transform:translate(8px,-50%);font:600 var(--fs-11) var(--mono);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none}
.rbar .nowt.lf{transform:translate(calc(-100% - 8px),-50%)}
.rin{position:absolute;inset:-6px 0;width:100%;height:calc(100% + 12px);margin:0;opacity:0;cursor:ew-resize}
.rlab{position:relative;height:18px;margin-top:5px;font:500 var(--fs-10) var(--mono);letter-spacing:.04em;color:rgba(238,242,250,.72)}
.rlab span{position:absolute;transform:translateX(-50%);white-space:nowrap}.rlab .ev.w{color:#FFD9A8}.rlab .ev.c{color:#D4DEFF}
.rlab.two{height:32px}.rlab.two .ev.c{top:14px}
.rlab .h0{transform:none}.rlab .h24{transform:translateX(-100%)}
.rback{height:28px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.06);color:#fff;font-size:var(--fs-12);cursor:pointer;white-space:nowrap}
.rback:hover{border-color:rgba(255,255,255,.6)}
/* 14：顶部发丝线 */
.rtop{position:absolute;left:0;right:0;top:0;height:18px;pointer-events:auto;z-index:6}
.rline{position:absolute;left:0;right:0;top:0;height:3px;padding:0;border:0;opacity:.9;cursor:pointer;transition:height .2s,opacity .2s}
.rline::after{content:'';position:absolute;left:0;right:0;top:0;height:18px}
.rtop:hover .rline{height:5px;opacity:1}
.rnow{position:absolute;top:0;width:3px;height:8px;margin-left:-1.5px;border-radius:0 0 2px 2px;background:#FFB38A;box-shadow:0 0 8px 1px rgba(255,179,138,.9)}
.rpan{position:absolute;left:0;right:0;top:0;padding:14px 80px 12px;background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--panelB);color:#EEF2FA;transform:translateY(-104%);opacity:0;visibility:hidden;transition:transform .3s ease,opacity .2s,visibility 0s .3s}
.rtop.open .rpan{transform:none;opacity:1;visibility:visible;transition:transform .3s ease,opacity .2s}
.rcap,.rcap2{display:flex;justify-content:space-between;align-items:center;gap:12px;font:500 var(--fs-11) var(--mono);letter-spacing:.08em;color:rgba(238,242,250,.72);margin-bottom:10px}
/* 15：时间胶囊 + 下拉 */
.tpw{position:relative}
.tpill{height:38px;padding:0 12px 0 14px;border-radius:999px;border:1px solid var(--tl);background:transparent;color:var(--ti);display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-13);cursor:pointer;white-space:nowrap}
.tpill .tpt{font:600 var(--fs-13) var(--mono)}.tpill .tps{font:600 var(--fs-13) var(--serif);opacity:.85}
.chev{flex:none;transition:transform .2s}
.tpw.open .chev,.nw.open .chev{transform:rotate(180deg)}
.rdrop{position:absolute;right:0;top:50px;width:470px;padding:16px 18px 14px;border-radius:18px;background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--panelB);color:#EEF2FA;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .25s,visibility 0s .25s;text-align:left}
.rdrop::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.tpw.open .rdrop{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s}
.rdh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px}.rdh b{font:700 var(--fs-15) var(--serif);letter-spacing:.06em}.rdh span{font:500 var(--fs-11) var(--mono);color:rgba(238,242,250,.7)}
.rev{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.rev button{height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font:600 var(--fs-13) var(--mono);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25}
.rev button:hover{border-color:rgba(255,255,255,.4)}
.rev button small{font:500 var(--fs-11) -apple-system,'PingFang SC',sans-serif;letter-spacing:.1em}.rev .w small{color:#FFD9A8}.rev .c small{color:#D4DEFF}
.rft{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:var(--fs-12);color:rgba(238,242,250,.7)}
/* 16：右侧竖条 */
.rside{position:absolute;right:0;top:118px;bottom:140px;width:28px;pointer-events:auto;cursor:ns-resize;touch-action:none;z-index:5;outline:none;border-radius:16px 0 0 16px;border:1px solid transparent;border-right:0;transition:width .28s ease,background-color .28s,border-color .28s}
.rsi{position:absolute;left:0;right:0;top:18px;bottom:18px}
.rsb{position:absolute;right:9px;top:0;bottom:0;width:4px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 12px rgba(0,0,0,.25);transition:width .28s,right .28s}
.rsn{position:absolute;right:5px;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#FFB38A;box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 10px rgba(255,179,138,.95);transition:right .28s}
.rsn b{position:absolute;right:20px;top:50%;transform:translateY(-50%);font:600 var(--fs-11) var(--mono);color:#fff;white-space:nowrap;opacity:0;transition:opacity .2s;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.rsl{position:absolute;right:38px;top:0;bottom:0;width:88px;opacity:0;pointer-events:none;transition:opacity .2s}
.rsl span{position:absolute;right:0;transform:translateY(-50%);font:500 var(--fs-10) var(--mono);white-space:nowrap;color:rgba(238,242,250,.66)}
.rsl .ev.w{color:#FFD9A8}.rsl .ev.c{color:#D4DEFF}
.rsl .mk{position:absolute;right:-14px;width:10px;height:1px;background:rgba(255,255,255,.55)}.rsl .mk.w{background:rgba(255,206,140,.9)}
.rsk{position:absolute;right:12px;top:-2px;font:500 var(--fs-10) var(--mono);letter-spacing:.14em;color:rgba(238,242,250,.7);white-space:nowrap;opacity:0;transition:opacity .2s}
.rside.open{width:140px;background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--panelB)}
.rside.open .rsb{width:14px;right:16px}.rside.open .rsn{right:17px}
.rside.open .rsl,.rside.open .rsn b,.rside.open .rsk{opacity:1}
.rside.open .rsn b{right:22px;padding:1px 7px;border-radius:999px;background:#FFB38A;color:#1A1208;text-shadow:none;z-index:2}
/* 17：首屏文字里的时间线展开 */
.nw{margin-top:16px;pointer-events:auto}
.nowb,.arch{display:inline-flex;align-items:center;gap:7px;padding:2px 0;border:0;background:none;cursor:pointer;text-align:left;text-shadow:inherit}
.nowb .now,.arch .now{border-bottom:1px dashed currentColor;padding-bottom:1px}
.nowb:hover,.arch:hover{color:var(--hi)}
.rinl{width:560px;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .25s,margin .35s;text-shadow:none}
.nw.open .rinl{max-height:140px;opacity:1;margin-top:10px}
.rinl .rwrap{padding:12px 14px 4px;border-radius:14px 14px 0 0;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--panelB);border-bottom:0}
.rinl .rcap2{margin:0;padding:6px 14px 10px;border-radius:0 0 14px 14px;background:var(--panel);border:1px solid var(--panelB);border-top:0}
/* 13：日月轨迹的入口 */
.arch{margin-top:16px}.arch i{font-style:normal;font-size:var(--fs-15);line-height:1;color:#FFC98A}
.archint{margin-top:6px;font:500 var(--fs-11) var(--mono);letter-spacing:.04em;color:#FFC98A;opacity:0;transition:opacity .3s}
.arc-on .archint{opacity:1}
.hud.ink-dark .archint,.hud.ink-dark .arch i{color:#B05A1E}
/* 下方 */
.sec{max-width:1280px;margin:0 auto;padding:84px 24px 0}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.kk{font:500 var(--fs-11)/1 var(--mono);letter-spacing:.2em;color:var(--ink3)}
.sh h2{margin:10px 0 4px;font:900 var(--fs-40)/1.15 var(--serif)}
.sh p{margin:0;max-width:720px;color:var(--ink2)}
.btn{flex:none;height:42px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);display:inline-flex;align-items:center;font-weight:600;font-size:var(--fs-14)}
html.fixed .sec .sh{padding:22px 26px;border-radius:20px;background:var(--glass);border:1px solid var(--cardB);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)}
html.fixed .dw{padding:28px;border-radius:24px;background:var(--glass);border:1px solid var(--cardB);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html.fixed .ft{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:20px 20px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:28px}
.cc{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 14px;align-content:start;padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--cardB);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-ink=dark] .cc{box-shadow:0 10px 30px -24px rgba(20,40,80,.5)}
.disc{width:96px;height:96px}.disc svg{width:96px;height:96px;display:block}
.disc .d0{fill:var(--disc)}.disc .d1{fill:none;stroke:var(--disc2);stroke-dasharray:2 3}
.disc line{stroke:rgba(190,210,255,.5);stroke-width:.8}
html[data-ink=dark] .disc line{stroke:rgba(44,80,130,.4)}
.disc .o{fill:#fff;filter:drop-shadow(0 0 2px rgba(255,255,255,.9))}
html[data-ink=dark] .disc .o{fill:none;stroke:#3A5578;stroke-width:1;filter:none}
.disc .p{fill:#FF9A5C;filter:drop-shadow(0 0 3px rgba(255,150,90,.9))}
.disc .e{fill:none;stroke:rgba(190,210,255,.45);stroke-width:.7;stroke-dasharray:1 1.4}
html[data-ink=dark] .disc .e{stroke:rgba(44,80,130,.35)}
.disc .f{fill:rgba(220,230,255,.55)}html[data-ink=dark] .disc .f{fill:rgba(44,80,130,.35)}
.ct{display:flex;flex-direction:column;gap:2px}
.ct b{font:900 var(--fs-22)/1.2 var(--serif);letter-spacing:.08em}
.ct span{font:500 var(--fs-11) var(--mono);letter-spacing:.06em;color:var(--ink3)}
.cc ol{grid-column:1/-1;margin:10px 0 0;padding:0;list-style:none}
.cc li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:var(--fs-14)}
.cc li a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc li time{font:500 var(--fs-11) var(--mono);color:var(--ink3);white-space:nowrap}
.g{display:block;justify-self:center;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.85)}
html[data-ink=dark] .g{background:transparent;box-shadow:inset 0 0 0 1.2px #3A5578}
.g.pin,html[data-ink=dark] .g.pin{width:10px;height:10px;background:#FF9A5C;box-shadow:0 0 8px rgba(255,150,90,.8)}
.mo{grid-column:1/-1;margin-top:10px;font-size:var(--fs-13);font-weight:600;color:var(--acc)}
.cc.lat{grid-template-columns:1fr}
.dw{display:grid;grid-template-columns:440px minmax(0,1fr);gap:56px;align-items:center;margin-top:28px}
.dial{position:relative;width:420px;height:420px;margin:0 auto}
.ring{position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(closest-side,transparent 86%,#000 86.5%,#000 99.5%,transparent 100%);mask:radial-gradient(closest-side,transparent 86%,#000 86.5%,#000 99.5%,transparent 100%)}
.dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial .gr{fill:none;stroke:var(--line);stroke-dasharray:2 4}
.dial .tk{stroke:var(--ink3);stroke-width:1}
.dial .sh{font:600 var(--fs-12) var(--serif);fill:#fff;text-anchor:middle;paint-order:stroke;stroke:rgba(0,0,0,.25);stroke-width:2px}
.dial .hn{font:500 var(--fs-10) var(--mono);fill:var(--ink3);text-anchor:middle}
.dial .md{fill:#9DB8FF;opacity:.65;cursor:pointer}.dial .md.d{fill:#E0843C}.dial .md.rec{opacity:1}
.dial .md.on{opacity:1;stroke:var(--ink);stroke-width:2}
.dial .hand{stroke:var(--ink);stroke-width:1.5;opacity:.75}
.dial .tipd.sun{fill:#FFC46B;filter:drop-shadow(0 0 6px rgba(255,180,80,.9))}.dial .tipd.moon{fill:#E8ECF5;filter:drop-shadow(0 0 5px rgba(220,230,255,.8))}
.ctr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;line-height:1.3;pointer-events:none}
.ctr small{display:block;font:500 var(--fs-10) var(--mono);letter-spacing:.2em;color:var(--ink3)}.ctr b{display:block;font:600 var(--fs-28) var(--mono)}.ctr span{font:600 var(--fs-13) var(--serif);color:var(--ink2)}
.ml{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.ml li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;padding:14px 10px;border-bottom:1px solid var(--line);transition:background-color .2s;border-radius:6px}
.ml li.on{background:var(--card)}
.tm b{display:block;font:600 var(--fs-22)/1.1 var(--mono);color:var(--acc)}.tm span{font:500 var(--fs-11) var(--mono);color:var(--ink3)}
.ml p{margin:0;font-size:var(--fs-15);line-height:1.65}
.mx{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:var(--fs-14)}
.mx b{font-family:var(--mono);color:var(--acc)}
/* 影像（01 方案） */
.sec.gal{max-width:none;padding:56px 0 0;overflow-x:clip}
.gal>.sh{max-width:1280px;margin:0 auto;padding:0 24px}
html.fixed .gal>.sh{max-width:1232px}
.gw{position:relative;max-width:1280px;height:420px;margin:24px auto 0}
.gband{position:absolute;left:-420px;right:-420px;top:-60px;bottom:-40px;background:linear-gradient(170deg,rgba(255,255,255,0) 22%,rgba(255,255,255,.7) 42%,rgba(255,255,255,.96) 50%,rgba(255,255,255,.7) 58%,rgba(255,255,255,0) 78%)}
html[data-phase=day][data-ink=light] .gband{background:linear-gradient(170deg,rgba(0,0,0,0) 24%,rgba(200,225,255,.1) 40%,rgba(228,240,255,.22) 50%,rgba(200,225,255,.1) 60%,rgba(0,0,0,0) 76%)}
html[data-phase=night] .gband{background:linear-gradient(170deg,rgba(0,0,0,0) 24%,rgba(150,175,255,.09) 40%,rgba(214,226,255,.18) 50%,rgba(240,166,196,.09) 60%,rgba(0,0,0,0) 76%)}
.gband{-webkit-mask:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.gw>i{position:absolute;border-radius:50%}
.ph{position:absolute;margin:0}
.pfl{animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.ph img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;box-shadow:0 14px 30px -14px rgba(30,60,110,.45)}
html[data-phase=night] .ph img{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px -18px rgba(0,0,0,.9),0 0 30px -8px rgba(201,214,255,.25)}
.ph figcaption{margin-top:6px;font-size:var(--fs-12);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcta{display:flex;justify-content:center;margin-top:4px;position:relative}
.gcta a{height:44px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-14);background:linear-gradient(120deg,#7DCDE8,#9AA8F2);color:#071022}
html[data-ink=dark] .gcta a{background:#14213A;color:#fff}
.ft{max-width:1280px;margin:90px auto 0;padding:28px 24px 44px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-13);color:var(--ink3)}
/* 手机 */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  main.pgm{padding-top:130px}
  .hd{left:16px;right:16px;top:12px}.hd nav{display:none}.logo{font-size:var(--fs-15)}.hd{grid-template-columns:1fr auto}
  .hr2{gap:8px}
  .wpill{height:34px;padding:0 10px;font-size:var(--fs-12)}.mpill{height:38px;padding:0 10px}.mpill span{display:none}.ib{display:none}.ib.menu{display:grid}
  .r-pill .wpill{display:none}
  .tpw{position:static}.tpill{height:38px;padding:0 10px 0 12px}
  .rdrop{left:0;right:0;width:auto;top:52px;padding:14px 14px 12px}
  .rev button{height:44px;font-size:var(--fs-12)}
  .rpan{padding:12px 16px 10px}
  .lede{left:16px;right:16px;top:100px;width:auto}.lede h1{font-size:28px;margin-top:12px}.lede p{font-size:var(--fs-14);line-height:1.7;margin-top:8px}.btns{display:none}
  .lede>.now,.nw,.arch{margin-top:10px}.lede .now,.nowb,.arch{font-size:var(--fs-10)}
  .rinl{width:auto}
  .rside{top:96px;bottom:160px}
  .r-side .lede{right:34px}
  .cl b{font-size:var(--fs-18)}.cl b.big{font-size:var(--fs-22)}.cl b.sm{font-size:var(--fs-15)}.cl small{font-size:var(--fs-10)}
  .tray{left:12px;right:12px;bottom:58px}
  .eh{height:28px;padding:0 10px;font-size:var(--fs-11)}.eh span{font-size:var(--fs-10)}.eh.l{left:8px}.eh.r{right:8px}.ehb{bottom:54px}.tray button{height:28px;font-size:var(--fs-11)}
  .pan button{width:34px;height:34px;bottom:10px}
  .sec{padding:56px 16px 0}.sh{flex-direction:column;align-items:flex-start}.sh h2{font-size:var(--fs-28)}.btn{height:38px}
  html.fixed .sec .sh{padding:16px 18px}
  html.fixed .dw{padding:18px 14px}
  .grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:20px -16px 0;padding:0 16px 8px;scrollbar-width:none}
  .grid .cc{flex:none;width:282px;scroll-snap-align:start}
  .dw{grid-template-columns:1fr;gap:24px}.dial{width:320px;height:320px}
  .sec.gal{padding:56px 0 0}.gal>.sh{padding:0 16px}html.fixed .gal>.sh{margin:0 16px;padding:16px 18px}
  .gw{width:358px;max-width:none;height:440px;margin:18px auto 0}
  .gband{left:-120px;right:-120px;top:-40px;bottom:-40px}
  .pfl{animation-name:floatM}
  @keyframes floatM{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .ph img{border-radius:9px}.ph figcaption{font-size:var(--fs-11)}
  .gcta{padding:6px 16px 0;margin-top:0}.gcta a{display:flex;width:100%;justify-content:center}
  .ft{flex-direction:column;margin-top:60px;padding:24px 16px 36px}
}

/* ===== 15q · 全部优化 ===== */
.cl.ylh{display:none}
html.fq[data-phase=day] .cl{text-shadow:0 0 2px rgba(10,28,60,.75),0 1px 8px rgba(10,28,60,.55)}
html.fq[data-phase=day] .cl small{opacity:.95}
html.fq[data-phase=day] .eh,html.fq[data-phase=day] .tray button,html.fq[data-phase=day] .pan button{background:rgba(14,32,62,.5);border-color:rgba(255,255,255,.55)}
html.fq[data-phase=day] .tray span,html.fq[data-phase=day] .ehb>span{text-shadow:0 0 2px rgba(10,28,60,.8),0 1px 6px rgba(10,28,60,.6);color:#fff}
html.fq[data-phase=day] .cmp span{text-shadow:0 0 2px rgba(10,28,60,.8),0 1px 6px rgba(10,28,60,.5)}
html.fq main.pgm{padding-top:24px}
html.fq[data-ink=dark] .ph img{box-shadow:0 14px 30px -16px rgba(30,60,110,.5)}
html.fq .ph figcaption{color:var(--ink2)}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq main.pgm{padding-top:16px}
  html.fq .btns{display:flex;margin-top:12px;gap:8px}
  html.fq .b1,html.fq .b2{height:36px;padding:0 16px;font-size:var(--fs-13)}
}

/* 第三轮：白天写实 */
html.fq .ovl.day .lns,html.fq .ovl.day .sts{filter:none}
html.fq .ovl.day .ln{stroke:rgba(255,255,255,.3);stroke-width:.8}
html.fq .ovl.day .ln.dim{opacity:.6}
html.fq .ovl.day .s.pin .rip{display:none}
html.fq .ovl.day .s.pin .tw{animation:pinD 4.8s ease-in-out infinite!important}
html.fq .ovl.day .s.pin .sp{animation:none}
@keyframes pinD{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.82;transform:scale(1.12)}}

/* 第四轮：星光闪烁（大气抖动：亮度忽明忽暗、星芒伸缩，不同的星节奏不同） */
@media (prefers-reduced-motion:no-preference){
html.fq .ovl .s:not(.pin):not(.empty):not(.sub) .tw{animation-name:scint!important;animation-timing-function:linear!important;animation-iteration-count:infinite!important}
html.fq .ovl .s.xs:not(.pin) .tw{animation-name:scintS!important}
html.fq .ovl .s.b:not(.pin) .sp{animation:spk 1.7s ease-in-out infinite}
html.fq .ovl .s.b:nth-child(2n):not(.pin) .sp{animation-duration:1.1s;animation-delay:-.4s}
html.fq .ovl .s.b:nth-child(3n):not(.pin) .sp{animation-duration:2.3s;animation-delay:-1.2s}
}
@keyframes scint{0%{opacity:1;transform:scale(1)}8%{opacity:.55;transform:scale(.86)}15%{opacity:.95;transform:scale(1.05)}23%{opacity:.68;transform:scale(.92)}31%{opacity:1;transform:scale(1.12)}40%{opacity:.8;transform:scale(.97)}48%{opacity:.45;transform:scale(.82)}56%{opacity:.9;transform:scale(1.04)}65%{opacity:.62;transform:scale(.9)}74%{opacity:1;transform:scale(1.1)}83%{opacity:.74;transform:scale(.95)}91%{opacity:.96;transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes scintS{0%,100%{opacity:1}12%{opacity:.4}25%{opacity:.85}38%{opacity:.55}50%{opacity:1}63%{opacity:.35}76%{opacity:.8}88%{opacity:.6}}
html.fq .ovl .s .sd{display:none!important}
@keyframes spk{0%,100%{opacity:1;transform:scale(1)}30%{opacity:.45;transform:scale(.7)}55%{opacity:1;transform:scale(1.18)}80%{opacity:.6;transform:scale(.85)}}

/* 第十轮：配乐胶囊固定宽度，文字变化不再推动时间胶囊和下拉面板 */
html.fq .mpill{width:212px;max-width:none}
html.fq .mpill span{flex:1;min-width:0}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){html.fq .mpill{width:auto}}

/* 第十一轮：手机首屏文字放到湖面上 */
.lede .why{display:none}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq .lede{top:var(--ledeTop, calc(62vh + 64px));bottom:auto}
  html.fq .lede::before{left:-24px;right:-24px;top:-18px;bottom:-14px}
  html.fq .lede .kk{font-size:var(--fs-10)}
  html.fq .lede h1{font-size:24px;margin-top:8px;line-height:1.22}
  html.fq .lede .why{display:inline-block;margin-top:6px;padding:2px 0;border:0;background:none;color:var(--hi2);font-size:var(--fs-13);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  html.fq .lede .why::after{content:' ↑';text-decoration:none}
  html.fq .lede.more .why::after{content:' ×'}
  html.fq .lede p{display:none;position:absolute;left:0;right:0;bottom:calc(100% + 12px);margin:0;max-width:none;padding:12px 14px;border-radius:14px;background:rgba(8,12,28,.8);border:1px solid rgba(255,255,255,.14);color:#EEF2FA;text-shadow:none;font-size:var(--fs-13);line-height:1.7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  html.fq .lede.more p{display:block}
  html.fq .btns{margin-top:10px}
  html.fq .b1,html.fq .b2{height:34px}
  html.fq .lede>.now{margin-top:8px}
  html.fq .tray{bottom:54px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html.fq .tray::-webkit-scrollbar{display:none}
  html.fq .tray>*{flex:none}
  html.fq .tray>span{display:none}
  html.fq .tray .xtra{display:inline-block}html.fq .tray .tmore{display:none}
}

/* 第十二轮：云、雨、雾、霾天，星官名字底下垫一层半透明深色胶囊，不管背后是白云还是灰雾都看得清 */
/* 第十七轮：不再用带边框的胶囊，改成边缘羽化、没有轮廓的暗晕，像星图印在云上；文字本身再加一圈细描边 */
html.fq.wx-dull .cl{--halo:20,38,66;--ha:.42;isolation:isolate;color:#F6F8FD;text-shadow:0 0 1px rgba(var(--halo),.95),0 1px 2px rgba(var(--halo),.8),0 0 12px rgba(var(--halo),.55)}
html.fq.wx-dull .cl::before{content:'';position:absolute;z-index:-1;inset:-5px -12px -6px -12px;border-radius:999px;pointer-events:none;background:rgba(var(--halo),var(--ha));filter:blur(9px)}
html.fq.wx-dull[data-phase=night] .cl{--halo:4,8,18;--ha:.5}
html.fq.wx-dull .cl.sub{--ha:.5}
html.fq.wx-dull .cl small{opacity:.94}
html.fq.wx-dull .cl.ylw::before{opacity:.5}
html.fq.wx-dull .eh,html.fq.wx-dull .tray button{background:rgba(10,20,40,.55)}
html.fq.wx-dull .tray span,html.fq.wx-dull .ehb>span,html.fq.wx-dull .cmp span{text-shadow:0 0 2px rgba(6,14,30,.9),0 1px 6px rgba(6,14,30,.7);color:#fff}

/* 第十四轮：「瞬间」卡片被文章卡片或操作打断时，快速淡出 */
.mcap.gone{animation:capGone .25s ease both}
@keyframes capGone{from{opacity:.9}to{opacity:0}}

/* 第十八轮：文章星闪烁收到极轻微（亮度 0.8–1、尺度 0.96–1.04），每颗星节奏不同 */
@media (prefers-reduced-motion:no-preference){
@keyframes scint{0%{opacity:1;transform:scale(1)}9%{opacity:.86;transform:scale(.97)}17%{opacity:.98;transform:scale(1.02)}26%{opacity:.84;transform:scale(.965)}35%{opacity:1;transform:scale(1.035)}44%{opacity:.9;transform:scale(.985)}52%{opacity:.8;transform:scale(.96)}61%{opacity:.96;transform:scale(1.015)}70%{opacity:.86;transform:scale(.975)}79%{opacity:1;transform:scale(1.03)}88%{opacity:.9;transform:scale(.99)}100%{opacity:1;transform:scale(1)}}
@keyframes scintS{0%,100%{opacity:1}14%{opacity:.8}29%{opacity:.95}43%{opacity:.84}57%{opacity:1}71%{opacity:.82}86%{opacity:.93}}
@keyframes spk{0%,100%{opacity:1;transform:scale(1)}30%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.05)}80%{opacity:.85;transform:scale(.95)}}
}

.edges .eh.cmpct span{display:none}
/* 第二十二轮：标签离它指向的高度较远时的贴边引导线 */
.edges .ehg{position:absolute;width:1px;background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.3),rgba(255,255,255,.08));pointer-events:none}
.edges .ehd{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none}
html.fq[data-phase=day] .edges .ehg{background:linear-gradient(rgba(14,32,62,.1),rgba(14,32,62,.35),rgba(14,32,62,.1))}
html.fq[data-phase=day] .edges .ehd{background:rgba(14,32,62,.5)}

/* 第二十三轮：点击本命标签后淡出 */
.edges .eh.out{opacity:0;pointer-events:none}
.eh.ghost{pointer-events:none;z-index:6;transition:opacity .38s ease}.eh.ghost.out{opacity:0}

/* 第二十七轮：减少动态效果时，瞬间卡片只淡入淡出，不位移 */
@media (prefers-reduced-motion:reduce){.mcap.on{animation:capFade 7.6s ease both}}
@keyframes capFade{0%,8%{opacity:0}16%,86%{opacity:1}100%{opacity:0}}

/* 第三十一轮：首屏文案换句时淡入 */
.lede .cfade{animation:cfade .45s ease both}@keyframes cfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lede .cfade{animation:none}}

/* 第三十二轮：手机上展开「怎么读这片星空」时，边缘指示标签先让开，说明弹层在最上层 */
.edges{transition:opacity .2s ease}.lede-open .edges{opacity:0;pointer-events:none}.lede.more p{z-index:30}

/* 第三十三轮：浏览器支持 :has 时再加一层保护；标签和引导线一起淡出 */
.hero:has(.lede.more) .edges{opacity:0;pointer-events:none}.lede-open .edges .eh,.lede-open .edges .ehg,.lede-open .edges .ehd{visibility:hidden}

/* 第三十四轮：说明按钮——熟悉之后不再用下划线提示，只在内容更新时亮一个小点 */
.lede .why:not(.first){text-decoration:none;opacity:.88}
.lede .why.fresh::before{content:'';display:inline-block;width:5px;height:5px;margin:0 6px 1px 0;border-radius:50%;background:#f3c38f;box-shadow:0 0 6px rgba(243,195,143,.8);vertical-align:middle}

/* 第三十七轮：首屏文字衬底和投影的浓淡由背景亮度决定（--lgA / --lsA 由脚本按对比度算出） */
.lede::before{background:radial-gradient(closest-side,rgba(4,8,20,var(--lgA,.28)),rgba(4,8,20,0))}
.hud.ink-dark .lede::before{background:radial-gradient(closest-side,rgba(255,255,255,var(--lgA,.34)),rgba(255,255,255,0))}
.hud{--hs:0 1px 14px rgba(0,0,10,var(--lsA,.35))}.hud.ink-dark{--hs:0 1px 16px rgba(255,255,255,var(--lsA,.45))}
.lede::before{transition:background .6s ease}

/* 第三十七轮：云雨雾天的星官名字——衬底更柔、更淡，浓度 --ha 由脚本按背后亮度算出；投影跟着衬底一起变淡 */
html.fq.wx-dull .cl{--ha:.2;text-shadow:0 0 1px rgba(var(--halo),calc(.45 + var(--ha))),0 1px 3px rgba(var(--halo),calc(.25 + var(--ha))),0 0 10px rgba(var(--halo),calc(var(--ha) * .9))}
html.fq.wx-dull .cl::before{inset:-7px -16px -8px -16px;filter:blur(13px);transition:background .5s ease}
html.fq.wx-dull[data-phase=night] .cl{--ha:.16}
html.fq.wx-dull .cl.sub{--ha:.3}
html.fq.wx-dull .cl.ink-d{--halo:255,255,255;color:#13213A}html.fq.wx-dull .cl.ink-d small{color:#25344F}

/* 第四十一轮：横向滑动的文章卡片按吸附对齐时，留出与正文相同的 16px 左边距（scroll-padding），首张卡不再贴边 */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){.grid{scroll-padding-inline:16px}}

/* 第四十二轮：瞬间区联动 */
.dial .mhit{fill:transparent;cursor:pointer}
.dial .md{transition:r .2s ease,opacity .2s ease}.dial .md.on{r:7px;filter:drop-shadow(0 0 6px currentColor)}
.ml .tm{position:relative}.ml .mdot{position:absolute;left:-14px;top:.55em;width:7px;height:7px;border-radius:50%;background:#9DB8FF;box-shadow:0 0 6px rgba(157,184,255,.7)}.ml .mdot.d{background:#E0843C;box-shadow:0 0 6px rgba(224,132,60,.7)}
.ml li{cursor:pointer;padding-left:22px;position:relative;outline:none;scroll-margin:80px 0 28px}.ml li.on{box-shadow:inset 2px 0 0 var(--acc)}.ml li:focus-visible{box-shadow:inset 0 0 0 1px var(--acc)}
.ml li.flash{animation:momFlash .9s ease}@keyframes momFlash{0%{background:rgba(127,200,224,.22)}100%{background:var(--card)}}
@media (prefers-reduced-motion:reduce){.ml li.flash{animation:none}}

/* 第四十三轮：PC 上钟面与列表垂直居中对齐，列表下方弹出的较早瞬间（.mx）原来会撑高右栏，把钟面往下推。改为浮在列表下方、不占布局高度 */
@media (orientation:landscape), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){#moments .mside{position:relative}#moments .mx{position:absolute;left:0;right:0;top:100%;z-index:2}}

/* 第四十四轮：瞬间列表——去掉顶部白线和行间分隔线，每条一张很淡的圆角卡片；选中时浅青描边 */
.ml{border-top:0;display:grid;gap:8px}
.ml li{border-bottom:0;padding:14px 16px 14px 28px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid rgba(220,230,255,.06);grid-template-columns:92px minmax(0,1fr);transition:background-color .2s,border-color .2s}
.ml li:hover{background:rgba(255,255,255,.04)}
.ml li.on{background:rgba(127,200,224,.07);border-color:rgba(127,200,224,.28);box-shadow:none}
.ml li:focus-visible{box-shadow:none;border-color:rgba(127,200,224,.6)}
.ml .tm b{font-size:var(--fs-18)}.ml p{font-size:var(--fs-15)}
.ml li.flash{animation:momFlashB .9s ease}@keyframes momFlashB{0%{background:rgba(127,200,224,.2)}100%{background:rgba(127,200,224,.07)}}
@media (prefers-reduced-motion:reduce){.ml li.flash{animation:none}}
html[data-phase=day] .ml li{background:rgba(255,255,255,.035)}

/* 第四十五轮：在轻卡片之上加一条很淡的细星轨，把每张卡片前的小星点串起来（呼应钟面上的星）；两端渐隐，选中的星点放大 */
.ml{position:relative}
.ml::before{content:'';position:absolute;z-index:1;pointer-events:none;left:var(--spx,18px);top:var(--spt,24px);bottom:var(--spb,24px);width:1px;background:linear-gradient(rgba(157,184,255,0),rgba(157,184,255,.3) 10%,rgba(157,184,255,.3) 90%,rgba(157,184,255,0))}
.ml .mdot{z-index:2;width:8px;height:8px;transition:transform .2s ease}
.ml li.on .mdot{transform:scale(1.5)}
html[data-phase=day] .ml::before{background:linear-gradient(rgba(220,232,255,0),rgba(220,232,255,.38) 10%,rgba(220,232,255,.38) 90%,rgba(220,232,255,0))}

/* 第四十六轮：手机上时刻和日期放在第一行（时刻 · 日期 · 时辰），正文在下面占满整行 */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  .ml li{grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 14px 13px 28px}
  .ml .tm{display:flex;align-items:baseline;gap:10px}
  .ml .tm b{display:inline;font-size:var(--fs-15)}
  .ml .tm span{white-space:nowrap}
  .ml .mdot{top:.45em}
  .ml p{font-size:var(--fs-15);line-height:1.65}
}

/* 第四十七轮：较早瞬间的显示框改成和列表一样的卡片；手机上放到钟面正下方（列表之前），点了就能看到 */
#moments .mx{position:relative;padding:12px 16px 13px 28px;border-radius:14px;background:rgba(127,200,224,.07);border:1px solid rgba(127,200,224,.28);font-size:var(--fs-14);scroll-margin:80px 0 28px}
#moments .mx .mdot{position:absolute;left:12px;top:19px;width:8px;height:8px;border-radius:50%;background:#9DB8FF;box-shadow:0 0 6px rgba(157,184,255,.7)}#moments .mx .mdot.d{background:#E0843C;box-shadow:0 0 6px rgba(224,132,60,.7)}
#moments .mx b{font:600 var(--fs-15) var(--mono);color:var(--acc)}#moments .mx span{font:500 var(--fs-11) var(--mono);color:var(--ink3);margin-left:6px}#moments .mx p{margin:4px 0 0;font-size:var(--fs-15);line-height:1.65}
#moments .mx.flash{animation:momFlashB .9s ease}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){#moments .mside{display:flex;flex-direction:column}#moments .mx{order:-1;margin:0 0 10px}}
@media (orientation:landscape), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){#moments .mx{position:absolute;left:0;right:0;top:100%;z-index:2;margin-top:10px}}
/* 星星被点或轻触时不再出现浏览器默认的方形焦点框；只有键盘 Tab 聚焦时显示一圈细光环 */
.dial .md,.dial .mhit{outline:none;-webkit-tap-highlight-color:transparent}
.dial .md:focus-visible{stroke:var(--acc);stroke-width:2}
.dial svg{-webkit-tap-highlight-color:transparent}

/* 第四十八轮：卡片里的宿名——PC 在日期下面单独一行，手机接在第一行末尾 */
.ml .tm span,#moments .mx span{white-space:nowrap}.ml .tm .mans{display:block;margin-top:3px;font:500 var(--fs-11) var(--mono);color:var(--ink3);letter-spacing:.06em}#moments .mx .mans{margin-left:6px}#moments .mx .mans::before{content:'· ';}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){.ml .tm .mans{display:inline;margin:0}.ml .tm .mans::before{content:'· '}}
/* 钟面上选中星旁的宿名 */
.dial .mlab{font:600 var(--fs-11) var(--serif,serif);fill:rgba(238,242,250,.86);letter-spacing:.1em;pointer-events:none;paint-order:stroke;stroke:rgba(4,8,20,.7);stroke-width:3px}

/* 第五十轮：钟面里的写实星点 */
.dial .mst .md,.dial .mst .md.d{fill:#f2f5ff;opacity:1;stroke:none;filter:drop-shadow(0 0 2px rgba(190,210,255,.95))}
.dial .mst.d .md{fill:#fff3e4;filter:drop-shadow(0 0 2px rgba(255,200,150,.95))}
.dial .mst .md.on{r:revert-layer;stroke:none}
.dial .mst .msp ellipse{fill:rgba(225,234,255,.55)}.dial .mst.d .msp ellipse{fill:rgba(255,226,196,.55)}
.dial .mst .msd ellipse{fill:rgba(225,234,255,.28)}.dial .mst.d .msd ellipse{fill:rgba(255,226,196,.28)}
.dial .mst .mtw,.dial .mst .msp{transform-box:fill-box;transform-origin:center}
.dial .mst .mtw{animation:mtw 4s ease-in-out infinite}
@keyframes mtw{0%,100%{opacity:1;transform:scale(1)}22%{opacity:.78;transform:scale(.9)}38%{opacity:1;transform:scale(1.05)}61%{opacity:.86;transform:scale(.95)}80%{opacity:1;transform:scale(1)}}
.dial .mst .msp{animation:msp 2.2s ease-in-out infinite}
@keyframes msp{0%,100%{opacity:.9}50%{opacity:.55}}
.dial .mst .mring{fill:none;stroke:rgba(127,200,224,0);stroke-width:1;transition:stroke .2s}
/* 选中：光晕和星芒放大、变亮，外面一圈很细的浅青光环；不再改变星核大小 */
.dial .mst .mh,.dial .mst .msp{transition:transform .25s ease,opacity .25s ease;transform-box:fill-box;transform-origin:center}
.dial .mst.on .mh{transform:scale(1.35)}.dial .mst.on .msp{transform:scale(1.3);opacity:1}
.dial .mst.on .mring{stroke:rgba(127,200,224,.75)}
.dial .mst.on .md{filter:drop-shadow(0 0 4px rgba(220,232,255,1))}.dial .mst.d.on .md{filter:drop-shadow(0 0 4px rgba(255,214,170,1))}
@media (prefers-reduced-motion:reduce){.dial .mst .mtw,.dial .mst .msp{animation:none}}


/* 第五十五轮：原方案的光带，颜色改由脚本按页面底色给出（--gbA 核心 / --gbB、--gbC 两侧），透明度与原方案一致 */
html.fq .gw .gband{background:linear-gradient(170deg,rgba(var(--gbB,255,255,255),0) 22%,rgba(var(--gbB,255,255,255),.7) 42%,rgba(var(--gbA,255,255,255),.96) 50%,rgba(var(--gbC,255,255,255),.7) 58%,rgba(var(--gbC,255,255,255),0) 78%)}
html.fq[data-phase=day][data-ink=light] .gw .gband{background:linear-gradient(170deg,rgba(var(--gbB),0) 24%,rgba(var(--gbB),.1) 40%,rgba(var(--gbA),.22) 50%,rgba(var(--gbC),.1) 60%,rgba(var(--gbC),0) 76%)}
html.fq[data-phase=night] .gw .gband{background:linear-gradient(170deg,rgba(var(--gbB),0) 24%,rgba(var(--gbB),.09) 40%,rgba(var(--gbA),.18) 50%,rgba(var(--gbC),.09) 60%,rgba(var(--gbC),0) 76%)}
html.fq .gw .gband{transition:background .8s ease}

/* 第五十八轮：事件按钮播放 */
.rev button{position:relative;overflow:hidden}
.rev button.none{cursor:default;opacity:.45;font:500 var(--fs-11) -apple-system,'PingFang SC',sans-serif;letter-spacing:.04em}
.rev button.none:hover{border-color:rgba(255,255,255,.14)}
.rev button .pi{position:absolute;right:7px;top:7px;width:0;height:0;border-left:5px solid currentColor;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;opacity:.4}
.rev button.none .pi{display:none}
.rev button.on{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}
.rev button.on .pi{width:6px;height:8px;border:0;border-left:2px solid currentColor;border-right:2px solid currentColor;box-sizing:border-box;opacity:.85}
.rev button.on.pz .pi{width:0;height:0;border-left:5px solid currentColor;border-right:0;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.rbar .rpl{position:absolute;top:-4px;bottom:-4px;border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);background:linear-gradient(90deg,rgba(255,255,255,.22) var(--pp,0%),rgba(255,255,255,0) var(--pp,0%));pointer-events:none}
.pbar{position:absolute;z-index:7;display:flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:999px;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--panelB);color:#EEF2FA;font:500 var(--fs-12) -apple-system,'PingFang SC',sans-serif;letter-spacing:.04em;white-space:nowrap;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.pbar.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.pbar::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:var(--pp,0%);background:linear-gradient(90deg,rgba(255,201,138,.5),#FFC98A)}
.pbar .pbt{margin-right:6px}
.pbar button{height:26px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.pbar button:hover,.pbar button:focus-visible{background:rgba(255,255,255,.12)}
.pbar .pbk{color:#FFD9A8}
.pbar .pbx{width:26px;padding:0;font-size:var(--fs-13);opacity:.8}
.pbar .pbt::before{content:'';display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#FFC98A;vertical-align:1px;animation:pbpulse 1.4s ease-in-out infinite}
.pbar.pz .pbt::before{animation:none;opacity:.5}
@keyframes pbpulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.pbar .pbt::before{animation:none}}
.tpw.open~.pbar{opacity:0;visibility:hidden;pointer-events:none}
/* 第五十九轮：没有空位时，被「瞬间」卡片压住的标签暂时淡出 */
.lbls .cl.mcy,.edges .eh.mcy{opacity:.08!important;transition:opacity .35s ease}
/* 第六十轮：首屏小字逐行换色（深字落在暗水上换浅字），仍不够时逐行加贴字晕影 */
html.fq .hud.ink-dark .lede .lninv{color:#F0F4FC!important;transition:color .5s ease}
html.fq .lede .lnh.lnl{text-shadow:0 0 6px rgba(6,10,24,var(--lnA)),0 0 14px rgba(6,10,24,calc(var(--lnA) * .8)),0 1px 2px rgba(6,10,24,var(--lnA))!important}
html.fq .lede .lnh:not(.lnl){text-shadow:0 0 6px rgba(255,255,255,var(--lnA)),0 0 14px rgba(255,255,255,calc(var(--lnA) * .8)),0 1px 2px rgba(255,255,255,var(--lnA))!important}
/* 第六十一轮 */
html.fq .edges .eh.ehx{opacity:0!important;pointer-events:none}
html.fq .lede .lnup{color:var(--hi)}
/* 首屏文字不再垫整块的椭圆衬底（换天气时深浅整块翻转，显得生硬）；清晰度改由字色自适应 + 逐行贴字晕影保证，并平滑过渡 */
html.fq .lede::before{display:none}
html.fq .lede h1,html.fq .lede p,html.fq .lede .kk,html.fq .lede .now,html.fq .lede .why{transition:color .6s ease,text-shadow .6s ease}
html.fq .lede{transition:color .6s ease,text-shadow .6s ease}
html.fq .hero.turning .edges .eh{opacity:0!important;transition:opacity .15s ease}
html.fq .edges .eh{transition:opacity .3s ease}